/* ==========================================================================
   Prizma Design Tokens, v0.1 "Refraction"
   Single source of truth for the marketing site AND the product app.

   Three tiers (why this matters: you change a brand decision in ONE place):
     1. Primitives , raw values (a specific coral, a specific 14px). Never used directly in components.
     2. Semantic   , what a value MEANS (--text-muted, --surface-card). Components only use these.
     3. Component  , lives in components.css, built only from semantic tokens.
   ========================================================================== */


:root {
  /* ---------- 1. PRIMITIVES ---------- */

  /* Paper → Ink: one warm-neutral ramp. No cool grays, no navy. */
  --paper-0:   #FFFFFF;
  --paper-50:  #FBFAF7;  /* page */
  --paper-100: #F6F4EF;  /* alt section, sidebar */
  --paper-200: #EEEBE4;  /* wells, inputs */
  --paper-300: #E2DED5;  /* strong dividers */
  --ink-300:   #BDB8AD;
  --ink-400:   #9A958A;  /* tertiary text, placeholders */
  --ink-500:   #78736A;
  --ink-600:   #57534B;  /* secondary text */
  --ink-800:   #2A2722;
  --ink-900:   #15130F;  /* primary text, primary button */
  --ink-950:   #0B0A08;  /* dark sections, hero art */

  /* The Spectrum: THE brand asset. Five wavelengths, always in this order. */
  --sp-coral:  #FF6B4A;
  --sp-amber:  #F2A51F;
  --sp-mint:   #22B889;
  --sp-sky:    #3A94F8;
  --sp-violet: #8A6CF5;

  /* Readable-on-paper variants (for text/icons on light backgrounds, pass WCAG AA) */
  --sp-coral-ink:  #C8401F;
  --sp-amber-ink:  #8F5B00;
  --sp-mint-ink:   #0F7A58;
  --sp-sky-ink:    #1B62C4;
  --sp-violet-ink: #5B3FD0;

  /* Status (deliberately NOT spectrum colors, so "source" and "state" never get confused) */
  --red-500:   #D7364B;
  --red-ink:   #A81E33;
  --green-ink: #1F7A3D;

  /* Type families */
  --font-sans:  "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Space: 4px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* Radius, four values, no others */
  --r-sm: 6px;    /* chips, badges, checkboxes */
  --r-md: 10px;   /* buttons, inputs, list rows */
  --r-lg: 16px;   /* cards, product windows */
  --r-xl: 28px;   /* art panels on the marketing site */
  --r-full: 999px;

  /* ---------- 2. SEMANTIC ---------- */

  --bg-page:        var(--paper-50);
  --bg-alt:         var(--paper-100);
  --bg-inverse:     var(--ink-950);
  --surface-card:   var(--paper-0);
  --surface-well:   var(--paper-200);
  --surface-hover:  rgba(21, 19, 15, 0.04);
  --surface-active: rgba(21, 19, 15, 0.07);

  --text:           var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-400);
  --text-inverse:   #F4F1EA;
  --text-inverse-muted: rgba(244, 241, 234, 0.58);

  --line:           rgba(21, 19, 15, 0.09);   /* hairlines: the default way to separate things */
  --line-strong:    rgba(21, 19, 15, 0.16);
  --line-inverse:   rgba(244, 241, 234, 0.12);

  --accent:         var(--sp-coral);          /* brand moments, links, focus. NOT for every badge. */
  --accent-ink:     var(--sp-coral-ink);
  --action:         var(--ink-900);           /* primary buttons are ink, so coral stays special */
  --action-hover:   var(--ink-800);
  --focus-ring:     0 0 0 3px rgba(255, 107, 74, 0.32);

  /* Source categories → wavelengths. This mapping is the core of the visual language. */
  --src-conversations: var(--sp-coral);   /* Slack, Zendesk, Intercom, email, meetings */
  --src-tracking:      var(--sp-amber);   /* Jira, Linear, Asana */
  --src-code:          var(--sp-mint);    /* GitHub, GitLab */
  --src-docs:          var(--sp-sky);     /* Notion, Confluence, Google Docs */
  --src-customers:     var(--sp-violet);  /* CRM, Figma, analytics */

  --spectrum: linear-gradient(90deg,
    var(--sp-coral), var(--sp-amber), var(--sp-mint), var(--sp-sky), var(--sp-violet));

  /* Elevation, three levels. Cards get a hairline, NOT a shadow. */
  --shadow-none:  none;
  --shadow-frame: 0 0 0 1px rgba(21,19,15,0.06), 0 1px 2px rgba(21,19,15,0.04), 0 8px 24px -6px rgba(21,19,15,0.10);
  --shadow-float: 0 0 0 1px rgba(21,19,15,0.07), 0 2px 4px rgba(21,19,15,0.05), 0 24px 60px -12px rgba(21,19,15,0.30);

  /* Type scale, size / line-height / tracking. Weight 500 max on headings: hierarchy comes from size. */
  --fs-display: clamp(44px, 6.4vw, 84px);  /* lh 0.98, ls -0.04em , hero only */
  --fs-h1:      clamp(34px, 4.4vw, 56px);  /* lh 1.04, ls -0.035em */
  --fs-h2:      clamp(26px, 3vw, 38px);    /* lh 1.12, ls -0.028em */
  --fs-h3:      20px;                       /* lh 1.3,  ls -0.015em */
  --fs-lead:    clamp(17px, 1.5vw, 20px);  /* lh 1.5 */
  --fs-body:    16px;                       /* lh 1.55 */
  --fs-ui:      14px;                       /* lh 1.45, app default */
  --fs-sm:      13px;
  --fs-xs:      12px;
  --fs-micro:   11px;                       /* mono labels, uppercase, ls 0.06em */

  /* Layout */
  --max-w: 1200px;
  --gutter: clamp(16px, 3vw, 32px);
  --section-py: clamp(80px, 10vw, 144px);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-med: 320ms;
  --dur-slow: 900ms;
}

/* ==========================================================================
   Prizma Components, v0.1
   Shared by the marketing site (product shots are built from these, not
   screenshots) and the style guide. The app should adopt the same rules.
   Every value here comes from tokens.css.
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Type ---------- */
.t-display { font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.04em; font-weight: 500; margin: 0; text-wrap: balance; }
.t-h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.035em; font-weight: 500; margin: 0; text-wrap: balance; }
.t-h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.028em; font-weight: 500; margin: 0; text-wrap: balance; }
.t-h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; margin: 0; }
.t-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-secondary); margin: 0; text-wrap: pretty; }
.t-body { font-size: var(--fs-body); color: var(--text-secondary); margin: 0; text-wrap: pretty; }
.t-label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }

/* The one typographic flourish: serif italic for the words that carry the idea. Max once per heading. */
.t-em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.025em; }
.t-em--spectrum { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--r-md); border: 0; cursor: pointer;
  font: 500 var(--fs-ui)/1 var(--font-sans); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--action); color: var(--paper-50); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 1px 2px rgba(21,19,15,0.25); }
.btn--primary:hover { background: var(--action-hover); }
.btn--secondary { background: var(--surface-card); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--secondary:hover { background: var(--paper-100); }
.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background: var(--surface-hover); color: var(--text); }
.btn--lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 12px; }
.btn--sm { height: 30px; padding: 0 10px; font-size: var(--fs-sm); border-radius: 8px; }
.btn .arrow { transition: transform var(--dur-fast); }
.btn:hover .arrow { transform: translateX(2px); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px;
  border-radius: var(--r-sm); background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-secondary); white-space: nowrap;
}
.chip svg { width: 12px; height: 12px; flex: none; }

/* Source chip: real tool logo + a wavelength dot. The dot color = source category. */
.chip--src::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--ink-300)); flex: none; }
.src-conv  { --c: var(--src-conversations); --c-ink: var(--sp-coral-ink); }
.src-track { --c: var(--src-tracking);      --c-ink: var(--sp-amber-ink); }
.src-code  { --c: var(--src-code);          --c-ink: var(--sp-mint-ink); }
.src-docs  { --c: var(--src-docs);          --c-ink: var(--sp-sky-ink); }
.src-cust  { --c: var(--src-customers);     --c-ink: var(--sp-violet-ink); }

/* Status badges, tinted, never solid. Solid color is reserved for the spectrum. */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: var(--r-sm); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.01em; }
.badge--conflict { background: rgba(215,54,75,0.09); color: var(--red-ink); }
.badge--ok       { background: rgba(31,122,61,0.09); color: var(--green-ink); }
.badge--risk     { background: rgba(242,165,31,0.14); color: var(--sp-amber-ink); }
.badge--neutral  { background: var(--surface-active); color: var(--text-secondary); }

/* ---------- The Spectrum Strip · Prizma's signature ----------
   A thin segmented bar showing WHICH source categories fed a synthesized item.
   Each <i> is one contributing source. It is provenance, not decoration:
   one segment = single-source, five = fully cross-referenced. */
.strip { display: flex; gap: 2px; width: 3px; flex-direction: column; align-self: stretch; flex: none; border-radius: 2px; overflow: hidden; }
.strip i { flex: 1; background: var(--c); border-radius: 1px; min-height: 6px; }
.strip--h { flex-direction: row; width: auto; height: 3px; align-self: auto; }
.strip--h i { min-height: 0; min-width: 10px; }

/* ---------- Cards ---------- */
.card { background: var(--surface-card); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Synthesized item (Digest row) ---------- */
.item { display: flex; gap: 14px; padding: 16px 18px; }
.item + .item { border-top: 1px solid var(--line); }
.item__body { min-width: 0; flex: 1; }
.item__title { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; margin: 0 0 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.item__text { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); margin: 0 0 10px; }
.item__meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ---------- Product window (the frame around app UI in marketing shots) ---------- */
.window { background: var(--paper-50); border-radius: var(--r-lg); box-shadow: var(--shadow-float); overflow: hidden; }
.window__bar { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--paper-100); }
.window__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--paper-300); }
.window__url { margin: 0 auto; font: 400 var(--fs-micro)/1 var(--font-mono); color: var(--text-muted); transform: translateX(-24px); }

/* ---------- Inputs ---------- */
.input { height: 48px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--line-strong); font: 400 15px var(--font-sans); color: var(--text); min-width: 0; }
.input::placeholder { color: var(--text-muted); }
.input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink-900), var(--focus-ring); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Prizma site v4. Layout only: every colour, size and radius comes from
   ../../system/tokens.css, and shared pieces (.btn, .window, .t-*) from
   ../../system/components.css.

   What changed from v3: the image slots are now real product screenshots
   captured from the app mock (design/mockups/app-v2, "?shot=" mode), so this
   file adds ONE new pattern, .shot, that frames a screenshot consistently.
   ========================================================================== */

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: var(--section-py) 0; }
a { color: inherit; }
img { max-width: 100%; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper-50) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid transparent; transition: border-color var(--dur-med); }
.nav.is-stuck { border-color: var(--line); }
.nav__in { height: 64px; display: flex; align-items: center; gap: 32px; }
.logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 18px; letter-spacing: -0.03em; text-decoration: none; }
.logo svg { width: 26px; height: 26px; }
.nav__links { display: flex; gap: 4px; margin-left: 8px; }
.nav__links a { font-size: var(--fs-ui); color: var(--text-secondary); text-decoration: none; padding: 7px 11px; border-radius: 8px; transition: background var(--dur-fast), color var(--dur-fast); }
.nav__links a:hover { background: var(--surface-hover); color: var(--text); }
.nav__cta { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ---------- Hero ---------- */
.hero { padding: clamp(56px, 7vw, 96px) 0 0; text-align: center; }
.pill { display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 14px 0 6px; border-radius: var(--r-full); background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--fs-sm); color: var(--text-secondary); text-decoration: none; margin-bottom: 28px; }
.pill b { font: 500 var(--fs-micro)/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--paper-50); background: var(--ink-900); padding: 5px 8px; border-radius: var(--r-full); }
.hero .t-display { max-width: 13ch; margin: 0 auto; }
.hero .t-lead { max-width: 58ch; margin: 28px auto 36px; }
.signup { display: flex; gap: 8px; justify-content: center; max-width: 460px; margin: 0 auto; }
.signup .input { flex: 1; }
.signup__done { display: none; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; font-size: 16px; font-weight: 500; }
.signup__done svg { width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: var(--green-ink); color: #fff; flex: none; }
.signup.is-done > :not(.signup__done) { display: none; } .signup.is-done .signup__done { display: flex; }
.signup button:disabled { opacity: .6; cursor: progress; }
.signup__status { margin: 10px auto 0; max-width: 460px; font-size: var(--fs-sm); color: var(--red-ink); min-height: 0; } .signup__status:empty { display: none; }
.final .signup__status { color: #FF9C8A; }
.hero__note { margin-top: 14px; font-size: var(--fs-sm); color: var(--text-muted); }

/* The dark stage that product UI floats on */
.art { position: relative; border-radius: var(--r-xl); background: var(--ink-950); overflow: hidden; isolation: isolate; }
.art canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.art::before { content: ""; position: absolute; inset: -20%; z-index: -2; opacity: .5; filter: blur(70px);
  background: conic-gradient(from 100deg at 50% 12%, transparent 0deg, var(--sp-violet) 25deg, var(--sp-sky) 55deg, var(--sp-mint) 80deg, var(--sp-amber) 105deg, var(--sp-coral) 135deg, transparent 160deg); }
.hero__art { margin-top: clamp(48px, 6vw, 80px); padding: clamp(28px, 6vw, 88px) clamp(14px, 7vw, 104px) 0; }
@media (min-width: 1360px) { .hero__art { width: min(1440px, calc(100vw - 48px)); margin-left: 50%; transform: translateX(-50%); padding-left: 224px; padding-right: 224px; } .hero__art.rise { animation-name: rise-c; } }
@keyframes rise-c { from { opacity: 0; transform: translateX(-50%) translateY(18px); } to { opacity: 1; transform: translateX(-50%); } }
.hero__art .window { margin-bottom: -56px; text-align: left; }
.hero__art .window img { display: block; width: 100%; height: auto; }
.beam { position: absolute; left: 50%; top: 0; width: 2px; height: clamp(28px, 6vw, 88px); transform: translateX(-50%); background: linear-gradient(#fff0, #fff); box-shadow: 0 0 18px 2px rgba(255,255,255,.55); }

/* Raw signals floating in the margins of the stage: the three claims behind the proposal on screen */
.sig { position: absolute; z-index: 2; width: 196px; display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(251,250,247,.97); box-shadow: var(--shadow-float); font-size: var(--fs-xs); line-height: 1.35; text-align: left; animation: bob 7s var(--ease-out) infinite alternate; }
.sig svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.sig b { display: block; font-weight: 500; color: var(--text); }
.sig span { display: block; margin-top: 3px; color: var(--text-muted); font: 400 var(--fs-micro)/1.3 var(--font-mono); }
.sig em { font-style: normal; color: var(--red-ink); }
.sig:nth-of-type(2n) { animation-duration: 9s; animation-delay: -3s; }
@keyframes bob { to { transform: translateY(-9px); } }
@media (max-width: 1359px) { .sig { display: none; } }

/* ---------- Tools strip ---------- */
.tools { padding: 112px 0 0; text-align: center; }
.tools__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; margin-top: 22px; }
.tools__row span { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; color: var(--text-secondary); letter-spacing: -.01em; }
.tools__row svg { width: 20px; height: 20px; filter: grayscale(1) opacity(.75); transition: filter var(--dur-med); }
.tools__row span:hover svg { filter: none; }

/* ---------- Section header: title left, sentence right ---------- */
.sh { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.sh .t-label { grid-column: 1 / -1; margin-bottom: -8px; display: flex; align-items: center; gap: 10px; }
.sh .t-label::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--spectrum); }
@media (max-width: 820px) { .sh { grid-template-columns: 1fr; } }

/* ---------- Problem: what the record says vs what is true ---------- */
.gaps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.gap { border-radius: var(--r-lg); background: var(--paper-0); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; display: flex; flex-direction: column; }
.gap__says, .gap__true { padding: 22px 24px; }
.gap__says { background: var(--paper-100); border-bottom: 1px solid var(--line); position: relative; }
.gap__says::after { content: "≠"; position: absolute; left: 24px; bottom: -14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 500 13px/1 var(--font-mono); color: var(--red-ink); background: var(--paper-0); box-shadow: inset 0 0 0 1px rgba(215,54,75,.3); }
.gap__true { padding-top: 30px; flex: 1; }
.gap .t-label { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.gap .t-label svg { width: 13px; height: 13px; filter: grayscale(1) opacity(.7); }
.gap p { margin: 0; font-size: 17px; line-height: 1.4; letter-spacing: -.01em; }
.gap__says p { color: var(--text-secondary); }
.gap__says p s { text-decoration-color: rgba(215,54,75,.5); }
@media (max-width: 900px) { .gaps { grid-template-columns: 1fr; } }

/* ---------- How it works ---------- */
.how { background: var(--bg-alt); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--line-strong); margin-top: 48px; }
.step { padding: 24px 24px 0 0; } .step + .step { padding-left: 24px; border-left: 1px solid var(--line); }
.step .t-label { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.step .t-label i { font-style: normal; color: var(--text); }
.step .who { margin-left: auto; padding: 3px 7px; border-radius: var(--r-full); box-shadow: inset 0 0 0 1px var(--line-strong); letter-spacing: .04em; }
.step .who--you { background: var(--ink-900); color: var(--paper-50); box-shadow: none; }
.step p { margin: 6px 0 0; color: var(--text-secondary); font-size: 15px; }
@media (max-width: 980px) { .steps { grid-template-columns: 1fr 1fr; } .step, .step + .step { padding: 22px 20px 22px 0; border-left: 0; border-bottom: 1px solid var(--line); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- .shot: the one way a product screenshot is framed ----------
   A tinted panel, the screenshot inside window chrome, bleeding off the
   bottom edge so it reads as "a piece of the product", not a slide.
   --tint picks the wavelength, --h the visible height. On small screens the
   window keeps a minimum width and bleeds off the right too, so text in the
   screenshot stays readable instead of shrinking to nothing. */
.shot { position: relative; overflow: hidden; isolation: isolate; height: var(--h, 400px); padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px) 0; background: color-mix(in srgb, var(--tint, var(--ink-300)) 10%, var(--paper-100)); }
.shot canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .9; }
.shot .window { min-width: var(--min, 520px); border-radius: 12px 12px 0 0; box-shadow: var(--shadow-frame); }
.shot .window__bar { height: 30px; padding: 0 12px; gap: 5px; }
.shot .window__bar i { width: 8px; height: 8px; }
.shot .window__url { font-size: 10px; transform: translateX(-18px); }
.shot img { display: block; width: var(--zoom, 100%); max-width: none; height: auto; margin-top: var(--crop, 0); }
picture { display: block; }
.shot .crop { overflow: hidden; }
.shot--wide { border-radius: var(--r-xl); height: auto; padding: clamp(20px, 5vw, 64px) clamp(16px, 6vw, 88px) 0; box-shadow: inset 0 0 0 1px var(--line); }
.shot--wide .window { min-width: 0; margin-bottom: -2px; }
.shot--wide.shot--cut { height: var(--h, 560px); }
.shot--dark { background: rgba(244,241,234,.05); box-shadow: inset 0 0 0 1px var(--line-inverse); }
.shot--dark .window { box-shadow: var(--shadow-float); }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 16px; }
.cell { grid-column: span 6; border-radius: var(--r-xl); background: var(--paper-0); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; display: flex; flex-direction: column; }
.cell--7 { grid-column: span 7; } .cell--5 { grid-column: span 5; }
.cell__txt { padding: 26px 30px 30px; border-top: 1px solid var(--line); flex: 1; }
.cell__txt .t-label { display: block; margin-bottom: 10px; }
.cell__txt p { margin: 8px 0 0; font-size: 15px; color: var(--text-secondary); max-width: 54ch; }
@media (max-width: 900px) { .cell, .cell--7, .cell--5 { grid-column: 1 / -1; } .cell .shot { height: min(var(--h, 400px), 420px); } }

/* ---------- Evidence legend ---------- */
.legend { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--line-strong); margin: 48px 0 16px; }
.legend > div { padding: 24px 24px 0 0; } .legend > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.legend h3 { display: flex; align-items: center; gap: 9px; }
.legend p { margin: 8px 0 0; color: var(--text-secondary); font-size: 15px; }
.ev { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 600 10px/1 var(--font-mono); color: #fff; background: var(--c); }
.ev--verified { --c: var(--green-ink); } .ev--asserted { --c: var(--sp-amber-ink); } .ev--conflict { --c: var(--red-ink); }
.ev--unchecked { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-400); }
.ev svg { width: 10px; height: 10px; }
.aside { margin: 40px 0 64px; font: 400 clamp(20px, 2.2vw, 26px)/1.35 var(--font-serif); letter-spacing: -.015em; max-width: 40ch; text-wrap: pretty; }
@media (max-width: 980px) { .legend { grid-template-columns: 1fr 1fr; } .legend > div, .legend > div + div { padding: 22px 20px 22px 0; border-left: 0; border-bottom: 1px solid var(--line); } }
@media (max-width: 560px) { .legend { grid-template-columns: 1fr; } }

/* ---------- Three columns ---------- */
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--line-strong); margin-top: 48px; }
.cols3 > div { padding: 24px 28px 0 0; } .cols3 > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.cols3 .t-label { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.cols3 p { margin: 6px 0 0; color: var(--text-secondary); font-size: 15px; }
.tier { height: 22px; padding: 0 8px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line-inverse); color: var(--text-inverse) !important; }
.tier::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
@media (max-width: 820px) { .cols3 { grid-template-columns: 1fr; } .cols3 > div, .cols3 > div + div { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--line); } }

/* ---------- Dark: trust ---------- */
.dark { background: var(--bg-inverse); color: var(--text-inverse); position: relative; overflow: hidden; isolation: isolate; }
.dark > canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .5; }
.dark .t-lead { color: rgba(244,241,234,.78); } .dark .t-label { color: var(--text-inverse-muted); }
.dark .cols3 { border-color: var(--line-inverse); } .dark .cols3 > div + div { border-color: var(--line-inverse); }
.dark .cols3 p { color: var(--text-inverse-muted); }
@media (max-width: 820px) { .dark .cols3 > div { border-color: var(--line-inverse); } }

/* ---------- Origin ---------- */
.origin { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 64px; align-items: start; }
.quote { font: 400 clamp(24px, 2.9vw, 36px)/1.25 var(--font-serif); letter-spacing: -.02em; margin: 0; text-wrap: pretty; }
.quote em { color: var(--accent-ink); }
.by { display: flex; align-items: center; gap: 12px; margin-top: 28px; font-size: var(--fs-ui); color: var(--text-secondary); }
.by i { width: 38px; height: 38px; border-radius: 50%; background: var(--spectrum); }
.by__av { display: inline-flex; } .by__av i { box-shadow: 0 0 0 2px var(--bg-page); } .by__av i + i { margin-left: -12px; background: linear-gradient(270deg, var(--sp-coral), var(--sp-amber), var(--sp-mint), var(--sp-sky), var(--sp-violet)); }
.stats { display: grid; border-top: 1px solid var(--line-strong); }
.stat { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.stat b { font-size: 40px; letter-spacing: -.045em; font-weight: 500; line-height: 1; white-space: nowrap; }
.stat span { font-size: var(--fs-ui); color: var(--text-secondary); text-align: right; }
@media (max-width: 820px) { .origin { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 64px; align-items: start; }
.faq__list { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 20px 0; font-size: 18px; font-weight: 500; letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font: 400 20px/1 var(--font-mono); color: var(--text-muted); transition: transform var(--dur-med) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
.faq details p { margin: -4px 0 22px; color: var(--text-secondary); max-width: 62ch; }
@media (max-width: 820px) { .faq { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Final CTA ---------- */
.final { padding-bottom: var(--gutter); }
.final .art { padding: clamp(72px, 11vw, 160px) var(--gutter); text-align: center; color: var(--text-inverse); }
.final .art::before { opacity: .3; background: conic-gradient(from 280deg at 50% 100%, transparent 0deg, var(--sp-violet) 25deg, var(--sp-sky) 55deg, var(--sp-mint) 80deg, var(--sp-amber) 105deg, var(--sp-coral) 135deg, transparent 160deg); }
.final .art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 62% at 50% 42%, rgba(11,10,8,.94) 35%, rgba(11,10,8,0) 100%); }
.final .t-lead { color: var(--text-inverse-muted); margin: 20px auto 36px; max-width: 46ch; }
.final .input { background: rgba(244,241,234,.08); box-shadow: inset 0 0 0 1px rgba(244,241,234,.2); color: var(--text-inverse); }
.final .input:focus { box-shadow: inset 0 0 0 1px var(--text-inverse), var(--focus-ring); }
.final .btn--primary { background: var(--paper-50); color: var(--ink-900); }

footer.ft { padding: 40px 0 56px; font-size: var(--fs-sm); color: var(--text-muted); }
.ft__in { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ft__in nav { margin-left: auto; display: flex; gap: 20px; } .ft a { text-decoration: none; } .ft a:hover { color: var(--text); }

/* ---------- Motion: one orchestrated load, then quiet scroll reveals ---------- */
.rise { opacity: 0; transform: translateY(18px); animation: rise var(--dur-slow) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.reveal.in { opacity: 1; transform: none; }
@media (max-width: 760px) { .nav__links { display: none; } .signup { flex-direction: column; } .signup .input { flex: none; } .pill .opt { display: none; } }

/* ?static=1: no entrance motion, everything visible (used for screenshots) */
.static .rise, .static .reveal { opacity: 1; transform: none; animation: none; transition: none; }
@media (min-width: 1360px) { .static .hero__art.rise { transform: translateX(-50%); } }
.static .sig { animation: none; }

/* ---------- Phones (below 700px) ----------
   Desktop screenshots cropped to a phone never look right: a third of the frame is sidebar and the
   text runs off the edge. So below 700px every <picture> serves a capture of the app's own phone
   layout (img/m/), shown at full width and only cut at the bottom. --crop-m shifts a tall capture up
   to the part the caption talks about. */
@media (max-width: 700px) {
  .shot, .shot--wide { padding: 18px 14px 0; }
  .shot .window, .shot--wide .window { min-width: 0; }
  .shot img { width: 100%; margin-top: var(--crop-m, 0); }
  .shot--wide, .shot--wide.shot--cut { height: 460px; }
  .cell .shot { height: 440px; }
  .hero__art { padding: 28px 14px 0; }
  .hero__art .window { max-height: 560px; }
  .window__url { max-width: 66%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: none; }
}

/* ---------- Legal pages (privacy.html, terms.html) ----------
   A reading column with a sticky list of sections beside it. No motion: these pages should
   appear instantly and get out of the way. */
.legal { padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 8vw, 120px); }
.legal__head { padding-bottom: clamp(32px, 4vw, 48px); margin-bottom: clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line-strong); }
.legal__head .t-label { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.legal__head .t-label::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--spectrum); }
.legal__meta { margin: 18px 0 0; font: 400 var(--fs-xs)/1.5 var(--font-mono); letter-spacing: .02em; color: var(--text-muted); }
.legal__grid { display: grid; grid-template-columns: 248px minmax(0, 66ch); gap: clamp(40px, 7vw, 104px); align-items: start; }
.legal__toc { position: sticky; top: 96px; font-size: var(--fs-ui); }
.legal__toc .t-label { display: block; margin-bottom: 12px; }
.legal__toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.legal__toc a { display: flex; gap: 10px; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 1px solid transparent; color: var(--text-secondary); text-decoration: none; line-height: 1.35; transition: color var(--dur-fast), border-color var(--dur-fast); }
.legal__toc a span { font: 400 var(--fs-micro)/1.7 var(--font-mono); color: var(--text-muted); flex: none; }
.legal__toc a:hover { color: var(--text); }
.legal__toc a.on { color: var(--text); border-left-color: var(--ink-900); font-weight: 500; }
.legal__toc .legal__other { display: inline-flex; margin: 22px 0 0; padding: 0; border: 0; color: var(--text); font-weight: 500; }
.legal__toc .legal__other:hover { color: var(--accent-ink); }
.legal__body { font-size: 17px; line-height: 1.65; color: var(--text-secondary); text-wrap: pretty; }
.legal__body > :first-child { margin-top: 0; }
.legal__body > p:first-child { font-size: var(--fs-lead); line-height: 1.5; color: var(--text); }
.legal__body h2 { margin: 56px 0 14px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 500; color: var(--text); scroll-margin-top: 88px; }
.legal__n { display: block; margin-bottom: 8px; font: 500 var(--fs-micro)/1 var(--font-mono); letter-spacing: .06em; color: var(--text-muted); }
.legal__body p { margin: 0 0 16px; }
.legal__body strong { font-weight: 500; color: var(--text); }
.legal__body ul { list-style: none; margin: 0 0 18px; padding: 0; }
.legal__body li { position: relative; padding-left: 20px; margin-bottom: 10px; }
.legal__body li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-300); }
.legal__body a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.legal__body a:hover { color: var(--accent-ink); }
@media (max-width: 900px) {
  .legal__grid { grid-template-columns: 1fr; gap: 40px; }
  .legal__toc { position: static; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
  .legal__toc ol { columns: 2; column-gap: 24px; border-left: 0; } .legal__toc li { break-inside: avoid; } .legal__toc a { padding-left: 0; border-left: 0; }
  .legal__toc a.on { font-weight: 400; }
}
@media (max-width: 520px) { .legal__toc ol { columns: 1; } .legal-body .nav__cta .btn--ghost { display: none; } .legal__body { font-size: 16px; } }