/* Spoondraw — arcade neon, on the web.
   Every colour here is lifted from Spoondraw/DesignSystem/Palette.swift so the site and the
   app cannot drift. The light/dark rule is the app's rule: base and linework swap roles,
   the accent trio stays put. Accents are fills and outlines, never text (D-19). */

:root {
  --surface: #FAF6FF;
  --on-surface: #141414;
  --panel: #FFFFFF;
  --on-panel: #141414;
  --must-do: #FF4F9A;
  --must-do-surface: #FFD8E9;
  --normal: #3E8EF5;
  --highlight: #FFD23F;
  --on-accent: #141414;

  --stroke: 3px;
  --radius: 14px;
  --shadow: 5px;

  /* No webfont request: ui-rounded resolves to SF Pro Rounded in Safari, so on an iPhone
     this page renders in the same face as the app. Elsewhere it falls back to the system
     sans. Deliberately no Google Fonts — the privacy page says the site makes no
     third-party requests, and that has to stay true. */
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1A1524;
    --on-surface: #FAF6FF;
    --panel: #241E31;
    --on-panel: #FAF6FF;
    --must-do-surface: #63284A;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.wrap { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.prose { width: min(100% - 2.5rem, 44rem); margin-inline: auto; }

h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.25rem, 7vw, 4rem); font-weight: 900; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 4vw, 2.35rem); font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; font-weight: 800; }
p { margin: 0 0 1rem; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; display: block; }

/* Focus has to be visible against every surface, including inside accent fills. */
:focus-visible {
  outline: var(--stroke) solid var(--must-do);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--panel); color: var(--on-panel);
  padding: 0.75rem 1.25rem; border: var(--stroke) solid var(--on-surface);
  border-radius: var(--radius); font-weight: 800; z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---- the brutal card: outline plus a hard offset shadow, never a blur ---- */
.card {
  background: var(--panel);
  color: var(--on-panel);
  border: var(--stroke) solid var(--on-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow) var(--shadow) 0 var(--on-surface);
  padding: 1.5rem;
}
.card--must { background: var(--must-do-surface); border-width: 5px; }

/* ---- buttons: chunky, and they squash on press like the app's ---- */
.btn {
  display: inline-block;
  font: inherit; font-weight: 800; font-size: 1.0625rem;
  padding: 0.85rem 1.5rem; min-height: 44px;
  background: var(--must-do); color: var(--on-accent);
  border: var(--stroke) solid var(--on-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow) var(--shadow) 0 var(--on-surface);
  text-decoration: none; cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.btn:hover { transform: translate(1px, 1px); box-shadow: 4px 4px 0 var(--on-surface); }
.btn:active { transform: translate(var(--shadow), var(--shadow)); box-shadow: 0 0 0 var(--on-surface); }
.btn--ghost { background: var(--panel); color: var(--on-panel); }

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

/* ---- masthead ---- */
.masthead { padding: 1.5rem 0; }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.wordmark {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 900; font-size: 1.4rem; letter-spacing: -0.02em;
  text-decoration: none; color: inherit;
}
.wordmark svg { width: 1.6rem; height: 1.6rem; }
.masthead nav { display: flex; gap: 1.25rem; font-weight: 700; font-size: 0.95rem; }

/* ---- hero ---- */
.hero { padding: 2rem 0 4rem; }
.hero .wrap { display: grid; gap: 3rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 60rem) { .hero .wrap { grid-template-columns: 1.05fr 0.95fr; } }
.hero p.lead { font-size: 1.2rem; max-width: 34rem; }

.eyebrow {
  display: inline-block; background: var(--highlight); color: var(--on-accent);
  border: var(--stroke) solid var(--on-surface); border-radius: 999px;
  padding: 0.3rem 0.9rem; font-weight: 800; font-size: 0.85rem;
  margin-bottom: 1.25rem;
}

/* The phone sits on a tilted slab so a flat screenshot still reads as an object. */
.shot { position: relative; justify-self: center; max-width: 20rem; }
.shot img { border: var(--stroke) solid var(--on-surface); border-radius: 28px; box-shadow: 8px 8px 0 var(--on-surface); }
.shot::before {
  content: ""; position: absolute; inset: 8% -6% -4% -6%;
  background: var(--normal); border: var(--stroke) solid var(--on-surface);
  border-radius: var(--radius); transform: rotate(-3deg); z-index: -1;
}

/* ---- waitlist form ---- */
.signup { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.5rem 0 0.75rem; }
.signup input[type="email"] {
  flex: 1 1 16rem; font: inherit; font-weight: 600;
  padding: 0.85rem 1rem; min-height: 44px;
  background: var(--panel); color: var(--on-panel);
  border: var(--stroke) solid var(--on-surface); border-radius: var(--radius);
}
.signup input::placeholder { color: var(--on-panel); opacity: 0.55; }
.fineprint { font-size: 0.9rem; opacity: 0.75; max-width: 30rem; }

/* ---- generic sections ---- */
section { padding: 3.5rem 0; }
.grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.step-n {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  background: var(--highlight); color: var(--on-accent);
  border: var(--stroke) solid var(--on-surface); border-radius: 999px;
  font-weight: 900; margin-bottom: 0.85rem;
}
.band { background: var(--must-do-surface); border-block: var(--stroke) solid var(--on-surface); }
.gallery { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.gallery img { border: var(--stroke) solid var(--on-surface); border-radius: 20px; box-shadow: var(--shadow) var(--shadow) 0 var(--on-surface); }
.gallery figure { margin: 0; }
.gallery figcaption { font-size: 0.9rem; font-weight: 700; margin-top: 0.85rem; }

/* ---- long-form legal pages ---- */
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.updated { font-size: 0.9rem; font-weight: 700; opacity: 0.75; }
.tldr { background: var(--highlight); color: var(--on-accent); }
details.faq {
  border: var(--stroke) solid var(--on-surface); border-radius: var(--radius);
  background: var(--panel); color: var(--on-panel);
  padding: 1rem 1.25rem; margin-bottom: 1rem;
}
details.faq summary { font-weight: 800; cursor: pointer; min-height: 32px; }
details.faq > *:last-child { margin-bottom: 0; }

/* ---- footer ---- */
footer { border-top: var(--stroke) solid var(--on-surface); padding: 2.5rem 0; margin-top: 3rem; font-size: 0.95rem; }
footer .wrap { display: flex; gap: 1.5rem; justify-content: space-between; flex-wrap: wrap; }
footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; font-weight: 700; }

/* Available to screen readers, invisible on screen. Used for form labels where the
   placeholder and button already carry the meaning visually. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Layout utilities. These exist because the CSP forbids inline `style` attributes
   (`style-src 'self'`) — the browser silently drops them, which cost a deploy to notice.
   Anything positional goes here rather than on the element. */
.center { text-align: center; }
.text-left { text-align: left; }
.stack-top { margin-top: 2rem; }
.center-block { margin-inline: auto; }

/* The highlighted summary card at the top of the long-form pages. Collapsing the first and
   last child's margins here saves three inline styles per page. */
.tldr { margin-block: 2rem 2.5rem; }
.tldr > :first-child { margin-top: 0; }
.tldr > :last-child { margin-bottom: 0; }