/*
  The one shell (site pass, 10 Sep): the same header, footer and column on
  every public page, so the product meets people the same way wherever they
  land. Everything here is prefixed pp- so it sits beside each page's own
  stylesheet without either reaching into the other.

  Three button labels across the site: Start free, Try the demo, and Open
  Preppit once signed in. Ember is for the one button that moves you forward.

  Pages that have a dark theme put class="pp-themed" on <html>; the home and
  download pages are light only, so the header stays light with them.
*/
:root {
  --pp-ground: #f4f5f3;
  --pp-ink: #14171c;
  --pp-mute: #5e6470;
  --pp-rule: #dde0dc;
  --pp-ember: #c2185b;
  --pp-on-ember: #ffffff;
  --pp-display: "Hanken Grotesk", -apple-system, system-ui, sans-serif;
  --pp-body: "Hanken Grotesk", -apple-system, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root.pp-themed:not([data-theme="light"]) {
    --pp-ground: #16181c; --pp-ink: #f2f3f5; --pp-mute: #9aa1ad; --pp-rule: #30343b;
    --pp-ember: #f27aa6; --pp-on-ember: #16181c;
  }
}
:root.pp-themed[data-theme="dark"] {
  --pp-ground: #16181c; --pp-ink: #f2f3f5; --pp-mute: #9aa1ad; --pp-rule: #30343b;
  --pp-ember: #f27aa6; --pp-on-ember: #16181c;
}

.pp-wrap { max-width: 1120px; margin: 0 auto; padding-inline: 32px; box-sizing: border-box; }
@media (max-width: 640px) { .pp-wrap { padding-inline: 20px; } }

/* ---- Header ---- */
.pp-nav { font-family: var(--pp-body); color: var(--pp-ink); }
.pp-nav__row { display: flex; align-items: center; gap: 28px; padding-block: 20px; }
.pp-brand { display: inline-flex; align-items: center; gap: 10px; font: 800 21px/1 var(--pp-display); letter-spacing: -0.01em; color: var(--pp-ink); text-decoration: none; }
/* Header mark, no raspberry dot. The dotted tile stays on the download app icon. */
.pp-tile { height: 32px; width: auto; display: block; flex: none; }
.pp-nav__links { display: flex; align-items: center; gap: 26px; margin-left: auto; font: 500 15px var(--pp-body); }
.pp-nav__links a { color: var(--pp-ink); text-decoration: none; }
.pp-nav__links a:hover { color: var(--pp-ember); }
.pp-nav__links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--pp-ink); padding-block: 4px; }
.pp-nav__links [hidden] { display: none; }
@media (max-width: 640px) {
  .pp-nav__row { gap: 16px; padding-block: 16px; }
  .pp-nav__links { gap: 16px; }
  .pp-nav__links .pp-wide { display: none; }
}

/* ---- Buttons ---- */
.pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 16px/1 var(--pp-display); padding: 14px 22px; border-radius: 9px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1.5px solid var(--pp-ink); background: transparent; color: var(--pp-ink);
}
.pp-btn--go { background: var(--pp-ember); border-color: var(--pp-ember); color: var(--pp-on-ember); }
.pp-btn--go:hover { filter: brightness(0.93); }
.pp-btn--sm { font-size: 14px; padding: 10px 16px; }
.pp-nav__links .pp-btn--go, .pp-nav__links .pp-btn--go:hover { color: var(--pp-on-ember); }
.pp-btn:focus-visible, .pp-nav a:focus-visible, .pp-foot a:focus-visible { outline: 2px solid var(--pp-ember); outline-offset: 3px; }

/* ---- Footer ---- */
.pp-foot { font-family: var(--pp-body); color: var(--pp-mute); font-size: 14px; }
.pp-foot__row { display: flex; gap: 12px 28px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--pp-rule); padding-block: 28px 12px; }
.pp-foot__row > span { color: var(--pp-ink); font-weight: 500; }
.pp-foot nav { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
.pp-foot nav a { color: var(--pp-ink); text-decoration: none; }
.pp-foot nav a:hover { color: var(--pp-ember); }
.pp-foot__legal { margin: 0; padding-block: 0 40px; font-size: 12px; color: var(--pp-mute); }
@media (max-width: 640px) { .pp-foot nav { margin-left: 0; } }