/* Yap — landing design system.
   The page is drawn from the app's own world: the cream/orange token set from
   desktop/src/App.css, Departure Mono as the pixel voice (headings, numerals,
   eyebrows, metadata — never body copy), and Yappy's cutaway room rendered by
   the real canvas code from docs/prototypes/yappy-house.html. Nothing here is
   rounded: the whole page sits on the same 1px grid as the chick. */

@font-face {
  /* Departure Mono (SIL OFL 1.1) — see DepartureMono-LICENSE.txt.
     Same file the app bundles at desktop/src/assets/fonts/. */
  font-family: "Departure Mono";
  src: url("DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Ground + surfaces — the App.css cream family. */
  --bg: #f8f0e0;
  --bg-2: #f2e6cd;
  --card: #fffcf6;
  --card-2: #fdf6e8;
  --text: #2c2216;
  --muted: #7a6547;
  --line: rgba(74, 48, 20, 0.16);
  --line-2: rgba(74, 48, 20, 0.08);

  /* Orange is action. Sky is information. Straight from the app. */
  --accent: #ef7d3c;
  --accent-ink: #9c4a15;
  --accent-soft: rgba(239, 125, 60, 0.14);
  --accent-data: #4ba3d8;
  --accent-data-ink: #17638d;
  --accent-data-soft: rgba(75, 163, 216, 0.16);

  --block: rgba(74, 48, 20, 0.42);
  --ok: #4f9d69;

  --mono: "Departure Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ui: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, system-ui, sans-serif;
  --body: -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif;

  --maxw: 1080px;
  --gutter: clamp(18px, 4vw, 34px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #201811;
    --bg-2: #171009;
    --card: #2a2119;
    --card-2: #241c14;
    --text: #f4e9d6;
    --muted: #b6a184;
    --line: rgba(255, 238, 214, 0.16);
    --line-2: rgba(255, 238, 214, 0.08);
    --accent: #ff9a5c;
    --accent-ink: #ff9a5c;
    --accent-soft: rgba(255, 154, 92, 0.16);
    --accent-data: #8fd6ff;
    --accent-data-ink: #8fd6ff;
    --accent-data-soft: rgba(143, 214, 255, 0.14);
    --block: rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  --bg: #201811;
  --bg-2: #171009;
  --card: #2a2119;
  --card-2: #241c14;
  --text: #f4e9d6;
  --muted: #b6a184;
  --line: rgba(255, 238, 214, 0.16);
  --line-2: rgba(255, 238, 214, 0.08);
  --accent: #ff9a5c;
  --accent-ink: #ff9a5c;
  --accent-soft: rgba(255, 154, 92, 0.16);
  --accent-data: #8fd6ff;
  --accent-data-ink: #8fd6ff;
  --accent-data-soft: rgba(143, 214, 255, 0.14);
  --block: rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, canvas, svg { display: block; max-width: 100%; }
p { margin: 0; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--accent-data);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- type ---------- */

h1, h2 {
  font-family: var(--mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.04;
  margin: 0;
}
h1 { font-size: clamp(2rem, 6.2vw, 4rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.35rem); }
h3 {
  font-family: var(--ui);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.eyebrow.data { color: var(--accent-data-ink); }

.lede {
  color: var(--muted);
  font-size: clamp(1.04rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  max-width: 44ch;
}

/* A run of hard facts, set in the pixel voice. Wraps rather than overflows. */
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  padding: 0;
  list-style: none;
}
.meta li { display: inline-flex; align-items: center; gap: 7px; }
.meta li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--accent-data);
  flex: none;
}

/* ---------- pixel chrome ---------- */

/* 2x2 checker rule — the same ordered dither the scene uses for its skies. */
.dither {
  height: 8px;
  border: 0;
  margin: 0;
  background:
    conic-gradient(var(--line) 0 25%, transparent 0 50%, var(--line) 0 75%, transparent 0)
    0 0 / 8px 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7em;
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.95em 1.5em;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.1s steps(2), filter 0.1s steps(2);
}
.btn:hover { text-decoration: none; }
.btn small { font-size: 0.72rem; opacity: 0.8; letter-spacing: 0.06em; }

/* The one loud thing on the page: an arcade button sitting on a hard 4px
   shadow with no blur, which presses in under the cursor. */
.btn-primary {
  background: var(--accent);
  color: #2a1608;
  box-shadow: 4px 4px 0 0 var(--block);
}
.btn-primary:hover,
.btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--block);
}

.btn-ghost {
  background: var(--card);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--accent); }

.kbd {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line), 0 2px 0 0 var(--line);
  padding: 1px 7px;
  color: var(--text);
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 62px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.brand:hover { text-decoration: none; }
.brand svg { width: 26px; height: 26px; flex: none; }
.brand .ver {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  align-self: flex-end;
  padding-bottom: 2px;
}
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links .btn { padding: 0.7em 1.1em; font-size: 0.74rem; }
@media (max-width: 780px) { .nav-links a.hide-sm { display: none; } }

/* ---------- sections ---------- */

.section { padding-block: clamp(52px, 8vw, 96px); }
/* The nav is sticky, so an anchor jump would otherwise park the section's
   eyebrow and heading underneath it. */
.section[id] { scroll-margin-top: 74px; }
.section-head { max-width: 46ch; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 { margin-block: 0.4em 0.45em; }
.section-head p { color: var(--muted); }

/* ---------- hero ---------- */

.hero { padding-block: clamp(44px, 7vw, 84px) clamp(30px, 4vw, 48px); }
.hero h1 { margin-block: 0.5em 0.5em; }
.hero .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block: clamp(26px, 4vw, 36px) 22px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: end;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; align-items: start; } }

/* The spec sheet: the answers people actually go looking for, in the pixel
   voice, as information rather than decoration. */
.spec { margin: 0; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; }
.spec > div {
  display: grid;
  grid-template-columns: 8.2em minmax(0, 1fr);
  gap: 10px;
  padding-block: 9px;
  border-top: 1px solid var(--line);
}
.spec > div:last-child { border-bottom: 1px solid var(--line); }
.spec dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; }
.spec dd { margin: 0; color: var(--text); }
@media (max-width: 420px) { .spec > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- the diorama: Yappy's house, full width ---------- */

.diorama { margin: 0; }
.dio-frame {
  position: relative;
  width: 100%;
  height: clamp(224px, 30vw, 430px);
  background: #a5673f;
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.dio-frame canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
/* Scanline veil — 1px of CRT, no more. */
.dio-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg, rgba(20, 10, 4, 0.11) 0 1px, transparent 1px 3px);
}
.ticker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-block: 12px 0;
}
.ticker .live {
  width: 6px; height: 6px;
  background: var(--ok);
  flex: none;
}
.ticker b { color: var(--text); font-weight: 400; }
.ticker .sep { color: var(--line); }

/* ---------- how it works ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--card); padding: clamp(20px, 2.6vw, 28px); }
.step .cue {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--accent-ink);
  background: var(--accent-soft);
  padding: 4px 10px;
  margin-bottom: 16px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.97rem; }

/* ---------- features ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } }
.feat {
  background: var(--card);
  padding: clamp(20px, 2.6vw, 26px);
}
.feat .tag {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-data-ink);
  margin-bottom: 12px;
}
.feat h3 { margin-bottom: 8px; }
.feat p { color: var(--muted); font-size: 0.95rem; }

/* ---------- privacy manifesto ---------- */

.manifesto { background: var(--card-2); border-block: 1px solid var(--line); }
.manifesto h2 { color: var(--accent-data-ink); }
.manifesto .lead {
  font-size: clamp(1.08rem, 1.9vw, 1.3rem);
  line-height: 1.5;
  max-width: 52ch;
  margin-top: 0.9em;
}
.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 34px);
  margin-top: clamp(32px, 4vw, 48px);
}
@media (max-width: 700px) { .facts { grid-template-columns: 1fr; } }
.fact { border-top: 1px solid var(--line); padding-top: 14px; }
.fact b {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-data-ink);
  margin-bottom: 8px;
}
.fact span { color: var(--muted); font-size: 0.95rem; }
.net {
  margin-top: clamp(30px, 4vw, 44px);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--muted);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 16px 18px;
}
.net b { color: var(--text); font-weight: 400; }

/* ---------- pricing ----------
   One price, stated once, in the same pixel voice the spec sheet uses. The
   card is the only surface on the page allowed to sit on the arcade shadow,
   so the thing you are being asked to buy reads as the one object here. */

.pricing .net { margin-top: clamp(28px, 3.5vw, 40px); background: var(--card); }

.price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}
@media (max-width: 820px) { .price-grid { grid-template-columns: 1fr; } }

.price-card {
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line), 6px 6px 0 0 var(--block);
  padding: clamp(22px, 3vw, 32px);
}
.price-card .tag {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-data-ink);
}

.amount {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--mono);
  margin-block: 14px 4px;
}
.amount b {
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 3.9rem);
  line-height: 1;
  color: var(--text);
}
.amount span {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.price-spec {
  margin: 22px 0 26px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.price-spec > div {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr);
  gap: 10px;
  padding-block: 9px;
  border-top: 1px solid var(--line);
}
.price-spec > div:last-child { border-bottom: 1px solid var(--line); }
.price-spec dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; }
.price-spec dd { margin: 0; color: var(--text); }
@media (max-width: 420px) { .price-spec > div { grid-template-columns: 1fr; gap: 2px; } }

.price-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 42ch;
}
.price-note b { color: var(--text); }

.price-side { display: grid; gap: clamp(18px, 2.4vw, 26px); }
.side-block { border-top: 1px solid var(--line); padding-top: 16px; }
.side-block b {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 10px;
}
.side-block p { color: var(--muted); font-size: 0.95rem; }
.side-block p + p { margin-top: 10px; }
.side-block strong { color: var(--text); font-weight: 700; }

/* ---------- download ---------- */

.download { text-align: center; }
.download .wrap > * { margin-inline: auto; }
.download h2 { margin-block: 0.4em 0.5em; }
.download p { color: var(--muted); max-width: 48ch; }
.download .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-block: clamp(26px, 4vw, 34px) 22px;
}
.download .meta { justify-content: center; }

/* ---------- footer ---------- */

.foot { border-top: 1px solid var(--line-2); padding-block: 34px 44px; }
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.foot .links { display: flex; flex-wrap: wrap; gap: 18px; }
.foot a, .foot .cr {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.foot a:hover { color: var(--text); text-decoration: none; }

/* ---------- legal pages (privacy.html / terms.html) ---------- */

.legal { max-width: 740px; margin-inline: auto; padding: clamp(38px, 6vw, 66px) var(--gutter) 80px; }
.legal .back {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-block;
  margin-bottom: 26px;
}
.legal h1 { font-size: clamp(1.7rem, 4.6vw, 2.6rem); }
.legal .updated {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block: 14px 30px;
}
.legal h2 { font-size: clamp(1.05rem, 2.2vw, 1.3rem); margin-block: 40px 12px; }
.legal p { margin-block: 12px; color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
.legal ul { margin-block: 12px; padding-left: 20px; color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
.legal li { margin-block: 8px; }
.legal strong { color: var(--text); font-weight: 700; }
.legal .intro {
  font-size: 1.06rem;
  color: var(--text);
  background: var(--accent-data-soft);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 18px 20px;
}
.legal .contact { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }

/* ---------- motion ----------
   The whole motion budget is spent in one place: the living room above. Nothing
   else on the page moves except the arcade button pressing in under the cursor,
   and reduced motion switches both off — the scene falls back to a static frame
   drawn from the same code. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}