/* ---------------------------------------------------------------
   Frior marketing site (frior.ai)
   Frior carries the Sattr brand book: tokens mirror sattr.ai and the
   creator-mode theme (creator-web/src/styles/theme.css, Brand
   Architecture Issue 01). Warm paper surfaces, deep navy ink, brand
   orange for fills only - as text on light surfaces only via
   --brand-text, which is AA-verified. Paper on orange is banned by
   the book, so buttons carry navy text. Teal has one job: "done".
   Geist is self-hosted (SIL OFL) so no visitor data reaches a
   third-party font CDN. Change the tokens in :root, not values
   further down.
   All motion is CSS-only and lives in the one block at the end,
   behind prefers-reduced-motion: no-preference, so the page is
   complete and static without it. The one exception is the header's
   colour-only settle, which does not move anything.
   --------------------------------------------------------------- */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: only light; /* opt out of Chrome Auto Dark Mode force-inverting the site */
  --background: #fcfaf6;      /* working paper */
  --paper-reading: #f5f2ec;   /* reading paper - footer */
  --foreground: #0a0a0a;
  --card: #ffffff;
  --primary: #001226;         /* navy ink */
  --muted-foreground: #6b7270;
  --muted-on-reading: #646b69; /* #6b7270 on reading paper is 4.4:1, under AA - the reading-paper surfaces swap it in */
  --border: rgba(0, 18, 38, 0.12);
  --line-strong: rgba(0, 18, 38, 0.22);
  --line-soft: rgba(0, 18, 38, 0.08);
  --edge-hi: rgba(255, 255, 255, 0.55);

  --brand: #ff5a1f;           /* fills only - buttons, the logo dot, progress, glows */
  --brand-hover: #e84b0f;
  --brand-text: #c2410c;      /* the only orange allowed as text on light - AA-verified */
  --brand-tint: #fff2ea;
  --brand-foreground: #001226;
  --brand-glow: rgba(255, 90, 31, 0.2);
  --gradient-warm: linear-gradient(135deg, #ffe0cf, var(--brand-tint));

  /* "Done" - registered, received. One job, never decoration. */
  --cleared-tint: #dcf7ef;
  --cleared-text: #086958;

  /* Caution - kept distinct from brand orange, so a warning never reads as brand */
  --warning: #fdf3e0;
  --warning-border: #e6c079;
  --warning-foreground: #8a5a09;

  /* The deep-navy chrome the paper floats on - the phone, the "coming" panel */
  --chrome: #0a1526;
  --chrome-foreground: #f5f2ec;
  --text-on-navy: #b7bec6;
  --line-on-navy: rgba(245, 242, 236, 0.1);
  --gradient-chrome:
    radial-gradient(115% 75% at 50% 112%, rgba(245, 242, 236, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #000a17 0%, #001226 55%, #001b34 100%);

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-btn: 6px;
  --radius-card: 14px;
  --radius-card-lg: 16px;
  --radius-pill: 999px;
  --shadow-lift: 0 22px 48px rgba(0, 18, 38, 0.13);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  font-size: 16px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
/* The header is sticky, so anchored sections stop below it */
[id] { scroll-margin-top: 88px; }

h1 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; font-size: clamp(36px, 6vw, 56px); }
h2, h3 { font-weight: 600; color: var(--primary); text-wrap: balance; }
p { max-width: 62ch; }
a { color: var(--primary); text-underline-offset: 3px; }
a:focus-visible, .btn:focus-visible, input:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 600px) { .wrap { padding: 0 20px; } }

/* Header and footer - duplicated in every page */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252, 250, 246, 0.84);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; }
.logo { font-weight: 700; font-size: 22px; color: var(--primary); text-decoration: none; letter-spacing: -0.02em; }
.logo .dot { color: var(--brand); }

.site-footer { border-top: 1px solid var(--border); background: var(--paper-reading); --muted-foreground: var(--muted-on-reading); }
.site-footer .wrap {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-top: 28px; padding-bottom: 28px;
}
.site-footer p { font-size: 13px; color: var(--muted-foreground); }

/* Hero - the one section every page has */
.hero { padding: 96px 0 104px; }
@media (max-width: 600px) { .hero { padding: 56px 0 64px; } }
.badge {
  display: inline-block; margin-bottom: 20px; padding: 5px 12px;
  border-radius: var(--radius-pill); background: var(--brand-tint);
  color: var(--brand-text); font-size: 13px; font-weight: 500;
}
.lede { margin-top: 20px; font-size: 19px; color: var(--muted-foreground); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px; min-height: 52px; border: 0; border-radius: var(--radius-btn);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn-brand { background: var(--brand); color: var(--brand-foreground); }
.btn-brand:hover { background: var(--brand-hover); }
.btn-quiet { background: transparent; color: var(--primary); border: 1.5px solid var(--line-strong); }
.btn-quiet:hover { background: var(--paper-reading); }
.btn-sm { padding: 8px 15px; font-size: 14px; min-height: 34px; }
.mt-lg { margin-top: 28px; }

/* The big call to action - a warm glow under it, and the arrow leans in on hover */
.btn-lg {
  min-height: 60px; padding: 16px 30px; font-size: 17px;
  box-shadow: 0 14px 30px -12px rgba(255, 90, 31, 0.75);
}
.btn-lg:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -12px rgba(255, 90, 31, 0.8); }
.btn-lg svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.btn-lg:hover svg { transform: translateX(4px); }

/* Waitlist form - plain HTML, posts to functions/waitlist.js */
.waitlist {
  margin-top: 40px; max-width: 480px; padding: 28px;
  display: grid; gap: 18px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.field { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.field input {
  font: inherit; font-weight: 400; font-size: 16px; /* 16px stops iOS zooming on focus */
  padding: 14px 15px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-btn);
  background: var(--card); color: var(--foreground);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:hover { border-color: rgba(0, 18, 38, 0.4); }
.field input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--line-soft); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--primary); } /* navy - paper on orange is banned */

.form-note { font-size: 13px; color: var(--muted-foreground); }
.waitlist .btn { width: 100%; }
.optional { font-weight: 400; color: var(--muted-foreground); }

/* Step 2's collaborations question - native radios, laid out as pills. The
   radio itself stays visible and focusable, so keyboards and screen readers
   work as normal. The soft orange tint on the chosen pill is the selection
   fill the creator-mode theme allows in pickers. */
.choices { border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.choices legend { margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.choices label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px 10px 12px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill);
  font-size: 15px; cursor: pointer; transition: border-color 0.2s, background-color 0.2s;
}
.choices label:hover { border-color: rgba(0, 18, 38, 0.4); }
.choices label:has(:checked) { border-color: var(--primary); background: var(--brand-tint); }
.choices label:has(:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.choices input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }

/* Shown only when the function sends the visitor back to /thanks/#fejl */
.form-error {
  display: none; padding: 12px 14px; border: 1px solid var(--warning-border); border-radius: var(--radius-btn);
  background: var(--warning); color: var(--warning-foreground); font-size: 14px;
}
.form-error:target { display: block; }

/* The honeypot. Kept off-screen rather than display:none, because some bots
   skip fields they can tell are hidden. People never see or tab into it. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Waitlist terms - a :target panel, so it opens and closes without JavaScript.
   It sits above the consent banner (z-index 60). */
.modal { display: none; position: fixed; inset: 0; z-index: 70; align-items: center; justify-content: center; padding: 20px; }
.modal:target { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 18, 38, 0.45); }
.modal-card {
  position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow: auto;
  background: var(--card); border-radius: var(--radius-card); padding: 24px;
  box-shadow: 0 12px 32px rgba(0, 18, 38, 0.16);
}
.modal-card h2 { font-size: 20px; margin-bottom: 12px; }
.modal-card p { font-size: 15px; }
.modal-card p + p { margin-top: 12px; }
.modal-card .btn { margin-top: 20px; }

/* Privacy notice - long-form reading */
.prose h2 { font-size: 20px; margin: 36px 0 10px; }
.prose p, .prose li { color: var(--foreground); font-size: 16px; }
.prose p + p { margin-top: 12px; }
.prose ul { margin: 10px 0 0 20px; }

/* ---------------------------------------------------------------
   Home page: hero with the phone, what counts, four steps, what
   Frior will be, the waitlist. Mobile first - most visitors come
   from a link in a bio - and the sections widen from 900px.
   --------------------------------------------------------------- */
.section { padding: clamp(64px, 11vw, 136px) 0; }
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-text); margin-bottom: 14px;
}
.section-title { font-size: clamp(32px, 6.4vw, 56px); line-height: 1.04; letter-spacing: -0.035em; }
.section-lede { margin-top: 18px; font-size: clamp(17px, 2vw, 19px); color: var(--muted-foreground); text-wrap: pretty; }
.small-print { margin-top: 14px; font-size: 13px; color: var(--muted-foreground); }
.small-print a { color: inherit; }

/* Hero -------------------------------------------------------- */
/* The hero slides up under the header (70px + its 1px border) so the glow
   reaches the top edge, and clips sideways only, so the glow fades out into
   the next section instead of stopping at a hard line */
.hero-home { position: relative; overflow-x: clip; margin-top: -71px; padding: 111px 0 32px; }
/* Two warm glows and a whisper of navy behind the phone, oversized so they can drift */
.hero-home::before {
  content: ""; position: absolute; inset: -20% -30% -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(26% 24% at 70% 56%, rgba(255, 90, 31, 0.3), transparent 70%),
    radial-gradient(44% 40% at 72% 58%, var(--brand-glow), transparent 72%),
    radial-gradient(30% 26% at 30% 12%, rgba(255, 90, 31, 0.12), transparent 70%),
    radial-gradient(34% 30% at 12% 86%, rgba(0, 18, 38, 0.05), transparent 70%);
}
.hero-grid { display: grid; gap: 56px; align-items: center; }
.hero-title {
  font-size: clamp(42px, 11.2vw, 92px); line-height: 0.98; letter-spacing: -0.045em;
  color: var(--primary); text-wrap: balance;
}
.hero-title .line { display: block; }
/* The hand-drawn orange stroke under "resten" */
.scribble { position: relative; white-space: nowrap; }
.scribble svg {
  position: absolute; left: -2%; bottom: -0.14em; width: 104%; height: 0.3em;
  overflow: visible; fill: none; stroke: var(--brand); stroke-width: 7; stroke-linecap: round;
}
.hero-lede { margin-top: 26px; font-size: clamp(18px, 2.3vw, 21px); line-height: 1.55; color: var(--muted-foreground); max-width: 44ch; text-wrap: pretty; }
.hero-cta { margin-top: 34px; }

/* The phone - built in HTML and CSS, a device in navy chrome with paper
   inside. It is one role="img" for assistive tech; the caption says it is
   an illustration. Sizes inside are em-based off the phone's font size,
   so the whole device scales as one. */
.hero-visual { position: relative; display: grid; justify-items: center; gap: 22px; }
.phone-stage { position: relative; }
.phone {
  position: relative; width: min(312px, 78vw); aspect-ratio: 9 / 19; margin-inline: auto;
  font-size: clamp(13px, 3.6vw, 14px);
  padding: 0.72em; border-radius: 3.4em;
  background: linear-gradient(150deg, #22324a 0%, #0a1526 38%, #000a17 100%);
  box-shadow:
    inset 0 0 0 1px rgba(245, 242, 236, 0.1),
    0 50px 90px -30px rgba(0, 18, 38, 0.55),
    0 24px 40px -24px rgba(0, 18, 38, 0.4);
}
/* The island */
.phone::before {
  content: ""; position: absolute; z-index: 2; top: 1.45em; left: 50%; translate: -50% 0;
  width: 6.4em; height: 1.7em; border-radius: var(--radius-pill); background: #000a17;
}
.screen {
  height: 100%; overflow: hidden; border-radius: 2.7em;
  background: linear-gradient(180deg, var(--card) 0%, var(--background) 40%);
  display: flex; flex-direction: column; gap: 0.9em; padding: 1.1em 1.15em 0;
  color: var(--primary);
}
.status { display: flex; justify-content: space-between; align-items: center; padding: 0.15em 0.6em 0; font-size: 0.93em; font-weight: 600; }
.status svg { width: 4.4em; height: 1em; fill: var(--primary); }
.app-head { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 0.9em; }
.app-hi { font-size: 0.93em; color: var(--muted-foreground); }
.app-title { font-size: 1.6em; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.app-avatar {
  width: 2.5em; height: 2.5em; border-radius: var(--radius-pill); flex: none;
  display: grid; place-items: center; font-size: 0.93em; font-weight: 600;
  background: var(--brand-tint); color: var(--brand-text);
}
/* The notification that drops in - a package just arrived */
.notice {
  display: flex; align-items: center; gap: 0.75em; padding: 0.7em 0.85em;
  background: var(--chrome); color: var(--chrome-foreground); border-radius: 1.1em;
  box-shadow: 0 12px 24px -12px rgba(0, 18, 38, 0.6);
}
.notice-icon {
  width: 2.2em; height: 2.2em; flex: none; border-radius: 0.7em; display: grid; place-items: center;
  background: var(--brand); color: var(--brand-foreground);
}
.notice-icon svg { width: 1.2em; height: 1.2em; }
.notice-text b { display: block; font-size: 0.93em; font-weight: 600; }
.notice-text span { display: block; font-size: 0.86em; color: var(--text-on-navy); }
/* The collaboration the brief is about, drawn as the featured card */
.collab-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 1.2em; padding: 1em;
  box-shadow: 0 16px 30px -18px rgba(0, 18, 38, 0.35), inset 0 1px 0 var(--edge-hi);
}
.collab-top { display: flex; gap: 0.75em; align-items: center; }
.brand-mark {
  width: 2.6em; height: 2.6em; flex: none; border-radius: 0.8em; display: grid; place-items: center;
  font-weight: 700; font-size: 0.93em; color: var(--primary);
  background: var(--gradient-warm);
}
.collab-text b { display: block; font-size: 1em; line-height: 1.3; }
.collab-text span { display: block; font-size: 0.86em; color: var(--muted-foreground); }
.done {
  display: flex; align-items: center; gap: 0.55em; margin-top: 0.9em; padding: 0.65em 0.75em;
  border-radius: 0.8em; background: var(--cleared-tint); color: var(--cleared-text);
  font-size: 0.9em; font-weight: 600; line-height: 1.35;
}
.done svg { width: 1.35em; height: 1.35em; flex: none; }
.rows { list-style: none; display: grid; }
.row { display: flex; align-items: center; gap: 0.75em; padding: 0.7em 0.15em; border-top: 1px solid var(--line-soft); }
.row:first-child { border-top: 0; }
.row .brand-mark { width: 2.2em; height: 2.2em; border-radius: 0.7em; background: var(--paper-reading); }
.row-text { flex: 1; min-width: 0; }
.row-text b { display: block; font-size: 0.93em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-text span { display: block; font-size: 0.82em; color: var(--muted-foreground); }
.tick { width: 1.5em; height: 1.5em; flex: none; color: var(--cleared-text); }
.todo {
  flex: none; font-size: 0.8em; font-weight: 600; padding: 0.3em 0.7em; border-radius: var(--radius-pill);
  background: var(--brand-tint); color: var(--brand-text);
}
.progress { margin-top: auto; padding: 0.9em 0.15em 1.3em; }
.progress p { display: flex; justify-content: space-between; font-size: 0.86em; color: var(--muted-foreground); }
.progress p b { color: var(--primary); font-weight: 600; }
.bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35em; margin-top: 0.55em; }
.bars i { height: 0.4em; border-radius: var(--radius-pill); background: var(--brand); }
.bars i:last-child { background: var(--line-soft); }

/* Two small chips: a row under the phone on small screens, floating
   beside it from 900px, where there is room either side */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.chip {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 10px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9); border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 14px 30px -12px rgba(0, 18, 38, 0.28);
  font-size: 13px; font-weight: 600; color: var(--primary); white-space: nowrap;
}
.chip svg { width: 20px; height: 20px; flex: none; }
.chip-a svg { color: var(--primary); }
.chip-b svg { color: var(--brand-text); }
.caption { font-size: 13px; color: var(--muted-foreground); }

@media (min-width: 900px) {
  .hero-home { padding: 135px 0 120px; }
  .hero-grid { grid-template-columns: 1.08fr 0.92fr; gap: 48px; }
  .chips { margin: 0; }
  .chip { position: absolute; z-index: 3; }
  .chip-a { top: 17%; right: calc(100% - 28px); }
  .chip-b { bottom: 21%; left: calc(100% - 28px); }
}

/* What counts ------------------------------------------------- */
.cards { list-style: none; display: grid; gap: 16px; margin-top: 44px; }
/* Icon beside the text on phones, above it once the cards sit in a row */
.card {
  position: relative; padding: 28px 26px 30px;
  display: grid; grid-template-columns: 60px 1fr; column-gap: 18px; align-items: start;
  background: linear-gradient(180deg, #fffaf6, var(--card) 45%); border: 1px solid var(--border); border-radius: var(--radius-card-lg);
  box-shadow: inset 0 1px 0 var(--edge-hi);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.card-icon {
  grid-row: span 2; width: 60px; height: 60px; border-radius: var(--radius-card); display: grid; place-items: center;
  background: var(--gradient-warm); color: var(--primary);
  box-shadow: inset 0 1px 0 var(--edge-hi), 0 8px 18px -10px rgba(255, 90, 31, 0.5);
  transition: transform 0.45s var(--ease);
}
.card:hover .card-icon { transform: rotate(-6deg) scale(1.06); }
.card-icon svg { width: 30px; height: 30px; }
.card-icon .accent { fill: var(--brand); stroke: none; }
.card h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.25; padding-top: 4px; }
.card p { margin-top: 6px; color: var(--muted-foreground); }
/* A short aside with an icon - on reading paper, or on a card where the
   section itself is reading paper (the steps) */
.callout {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 36px; padding: 20px 22px;
  border-radius: var(--radius-card-lg); background: var(--paper-reading); max-width: 760px;
  --muted-foreground: var(--muted-on-reading);
}
.callout svg { width: 26px; height: 26px; flex: none; color: var(--brand-text); margin-top: 1px; }
.callout p:not(.small-print) { font-size: 17px; color: var(--primary); }
.callout .small-print { margin-top: 8px; }
.steps-section .callout { margin-top: 24px; background: var(--card); border: 1px solid var(--border); }
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .card { display: block; }
  .card h3 { margin-top: 22px; padding-top: 0; }
}

/* Four steps -------------------------------------------------- */
.steps-section {
  background: linear-gradient(180deg, transparent, var(--paper-reading) 18%, var(--paper-reading) 82%, transparent);
  --muted-foreground: var(--muted-on-reading);
}
.steps-grid { display: grid; gap: 48px; }
.steps { list-style: none; display: grid; gap: 14px; }
/* A connector from each number down to the next one (the 22px padding plus
   the 14px gap), and the orange that fills it as the step scrolls in */
.step:not(:last-child)::before, .step:not(:last-child)::after {
  content: ""; position: absolute; left: 23px; top: 70px; bottom: -36px; width: 2px; border-radius: 2px;
}
.step::before { background: var(--line-strong); }
.step::after { background: var(--brand); transform-origin: top; }
.step {
  position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 20px; align-items: start;
  padding: 22px 22px 24px 0;
}
.step-num {
  position: relative; z-index: 1; width: 48px; height: 48px; border-radius: var(--radius-pill);
  display: grid; place-items: center; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums;
  background: var(--brand); color: var(--brand-foreground);
  box-shadow: 0 0 0 6px var(--paper-reading);
}
.step h3 { font-size: clamp(20px, 2.4vw, 24px); letter-spacing: -0.02em; line-height: 1.25; padding-top: 9px; }
.step p { margin-top: 8px; color: var(--muted-foreground); }
@media (min-width: 900px) {
  .steps-grid { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
  .steps-intro { position: sticky; top: 128px; }
}

/* What Frior will be ------------------------------------------ */
.coming {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 40px; padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 64px);
  border-radius: var(--radius-card-lg); background: var(--gradient-chrome); color: var(--chrome-foreground);
}
/* An orange sunrise in the corner, and a fine dot grid for texture */
.coming::before, .coming::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.coming::before { background: radial-gradient(50% 60% at 92% 0%, rgba(255, 90, 31, 0.34), transparent 70%); }
.coming::after {
  background-image: radial-gradient(rgba(245, 242, 236, 0.1) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(120deg, transparent 30%, #000); mask-image: linear-gradient(120deg, transparent 30%, #000);
}
.coming .badge { background: var(--brand); color: var(--brand-foreground); font-weight: 600; }
.coming .section-title { color: var(--chrome-foreground); }
.coming .section-lede { color: var(--text-on-navy); }
.coming-note {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-on-navy);
  font-size: 15px; color: var(--text-on-navy);
}
.features { list-style: none; display: grid; gap: 12px; align-content: center; }
.feature {
  display: flex; gap: 16px; align-items: center; padding: 18px 20px;
  border-radius: var(--radius-card); border: 1px solid var(--line-on-navy);
  background: rgba(245, 242, 236, 0.04);
  transition: background-color 0.3s, border-color 0.3s, transform 0.35s var(--ease);
}
.feature:hover { background: rgba(245, 242, 236, 0.08); border-color: rgba(245, 242, 236, 0.2); transform: translateX(4px); }
.feature svg { width: 40px; height: 40px; flex: none; padding: 9px; border-radius: 12px; background: rgba(255, 90, 31, 0.16); color: var(--brand); }
.feature b { display: block; font-weight: 600; color: var(--chrome-foreground); }
.feature span { display: block; font-size: 15px; color: var(--text-on-navy); }
@media (min-width: 900px) {
  .coming { grid-template-columns: 1fr 1fr; gap: 64px; }
}

/* The waitlist ------------------------------------------------ */
.waitlist-section { position: relative; overflow: clip; }
.waitlist-section::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(40% 50% at 70% 60%, var(--brand-glow), transparent 70%);
}
.waitlist-grid { display: grid; gap: 8px; align-items: center; }
.waitlist-section .waitlist {
  max-width: 520px; padding: clamp(24px, 4vw, 36px); gap: 20px; border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-lift), inset 0 1px 0 var(--edge-hi);
}
.audience { margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--primary); }
@media (min-width: 900px) {
  .waitlist-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .waitlist-section .waitlist { margin-top: 0; justify-self: end; width: 100%; }
}

/* Cookie consent banner - injected by /assets/analytics.js, same as sattr.ai */
.consent-banner {
  position: fixed; left: 20px; bottom: 20px; z-index: 60; max-width: 360px;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 18, 38, 0.16); padding: 16px 18px;
}
.consent-banner p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--foreground); }
.consent-actions { display: flex; gap: 10px; }
/* While the banner is open we reserve room under the footer, so scrolling to
   the end never leaves the Privacy and Cookie choices links hidden behind it. */
body:has(.consent-banner) .site-footer { padding-bottom: 150px; }
@media (max-width: 480px) {
  .consent-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* The header settles onto paper once you scroll. It is colour only, not
   motion, so it stays on under reduced motion; without scroll timelines the
   header simply keeps its paper background. */
@supports (animation-timeline: scroll()) {
  .site-header { animation: header-settle linear both; animation-timeline: scroll(root); animation-range: 0 96px; }
  @keyframes header-settle { from { background-color: transparent; border-bottom-color: transparent; } }
}

/* ---------------------------------------------------------------
   Motion. Everything that moves is in here, so reduced motion gets
   the finished, static page. The load sequence plays once; the scroll
   effects use view timelines and only exist where they are supported -
   everywhere else each element simply sits in its final state.
   We never fade the h1, because it is the page's largest paint.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .hero-home::before { animation: drift 26s ease-in-out infinite alternate; }
  .scribble svg { animation: wipe 0.9s 0.5s var(--ease) both; }
  .hero-lede, .hero-cta { animation: rise 0.8s var(--ease) both; }
  .hero-cta { animation-delay: 0.1s; }
  .hero-visual { animation: rise 1s 0.15s var(--ease) both; }
  .notice { animation: drop-in 0.7s 1.3s var(--ease) both; }
  .done { animation: pop 0.6s 1.9s var(--ease) both; }
  .done svg { animation: wipe 0.5s 2.2s var(--ease) both; }
  .chip { animation: pop 0.6s var(--ease) both, bob 7s ease-in-out infinite alternate; }
  .chip-a { animation-delay: 2.5s, 3.1s; }
  .chip-b { animation-delay: 2.9s, 3.5s; }

  @supports (animation-timeline: view()) {
    /* The phone lifts and leans away as the hero scrolls off */
    .phone-stage { animation: lean linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }

    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% entry 70%; }
    .cards .card:nth-child(2) { animation-range: entry 12% entry 80%; }
    .cards .card:nth-child(3) { animation-range: entry 20% entry 90%; }
    .features .feature:nth-child(2) { animation-range: entry 12% entry 80%; }
    .features .feature:nth-child(3) { animation-range: entry 20% entry 90%; }

    /* Each step rises in, its number lights up, then its connector fills */
    .step { animation: rise linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; }
    .step::after { animation: fill-rail linear both; animation-timeline: view(); animation-range: cover 30% cover 55%; }
    .step-num { animation: light-up linear both; animation-timeline: view(); animation-range: entry 55% cover 40%; }
  }

  @keyframes rise { from { opacity: 0; transform: translateY(28px); } }
  @keyframes drop-in { from { opacity: 0; transform: translateY(-140%) scale(0.92); } }
  @keyframes pop { from { opacity: 0; transform: scale(0.9); } }
  /* A left-to-right wipe draws a stroke in without the stray dot a round
     line cap leaves at the start of a dash animation */
  @keyframes wipe { from { clip-path: inset(0 100% 0 0); } }
  @keyframes bob { to { translate: 0 -8px; } }
  @keyframes drift { to { transform: translate3d(4%, -3%, 0) scale(1.06); } }
  @keyframes lean { to { transform: translateY(-48px) rotate(-5deg) scale(0.94); opacity: 0.6; } }
  @keyframes fill-rail { from { transform: scaleY(0); } }
  @keyframes light-up { from { background: var(--card); box-shadow: 0 0 0 6px var(--paper-reading), inset 0 0 0 1.5px var(--line-strong); } }
}