/* ==========================================================================
   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: times, ids and keys only */

  /* 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; }
/* Labels are words, so they are set in the sans, sentence case, in secondary ink (7.3:1 on paper). Mono is for times, ids and keys only.
   Until 2026-09-27 labels were uppercase mono: the most copied pattern on template landing pages, and 2.9:1 on paper. */
.t-label { font-family: var(--font-sans); font-size: var(--fs-sm); letter-spacing: -0.005em; text-transform: none; color: var(--text-secondary); font-weight: 500; }
.t-label i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--text-muted); }

/* 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-xs)/1 var(--font-sans); 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 section that continues the previous one's background has no top padding: the gap above it is the previous section's. A menu jump would put its heading under the bar, so it lands as far down as the others */
.flush { padding-top: 0; scroll-margin-top: var(--section-py); }
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; }
.nav__cta .btn { height: 36px; } .nav__cta .btn--primary { padding: 0 14px; }

/* ---------- 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: 600 var(--fs-xs)/1 var(--font-sans); letter-spacing: 0; 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-xs)/1.35 var(--font-sans); }
.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; }
/* The assistants come first and in colour: they are the one choice a buyer makes. The tools they reach follow, quieter. */
.tools__ai { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 40px; margin: 22px 0 44px; }
.tools__ai span { display: inline-flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 500; letter-spacing: -.015em; color: var(--text); }
.tools__ai svg { width: 26px; height: 26px; color: var(--ink-900); }
.tools__ai .tools__any { font-size: 15px; font-weight: 400; color: var(--text-secondary); letter-spacing: 0; }
.tools__row .tools__count { display: none; color: var(--text-secondary); font-weight: 400; }
.tools__row { max-width: 1080px; margin-left: auto; margin-right: auto; }
@media (max-width: 700px) { .tools__ai { gap: 12px 18px; } .tools__ai span { font-size: 18px; gap: 9px; } .tools__ai svg { width: 23px; height: 23px; } .tools__ai .tools__any { flex-basis: 100%; justify-content: center; } }

/* ---------- Section header: title left, sentence right ---------- */
/* Section header: label, heading, then the lead underneath. One column, so the eye reads top to bottom instead of jumping across */
.sh { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }
.sh .t-h1 { max-width: 20ch; }
.sh .t-lead { max-width: 58ch; }
.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); }

/* ---------- 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, .band { 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-muted); }
.step .who { margin-left: auto; padding: 3px 8px; border-radius: var(--r-full); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--fs-xs); }
.step .who--you { background: var(--ink-900); color: var(--paper-50); box-shadow: none; }
.step .who--prizma { display: inline-flex; align-items: center; gap: 5px; padding-left: 5px; color: var(--text-secondary); } .step .who--prizma svg { width: 13px; height: 13px; }
.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--4 { grid-column: span 4; } .cell--12 { grid-column: 1 / -1; }
.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, .cell--4, .cell--12 { 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; }
@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); } }

/* Where the data goes: your tools, read by your own assistant, handing Prizma suggestions; writes come back only after approval.
   Light cards on the dark stage, like the signals in the hero. Stacks top to bottom on small screens. */
.flow { display: grid; grid-template-columns: minmax(0,1fr) 150px minmax(0,1fr) 150px minmax(0,1fr); align-items: stretch; margin: 8px 0 0; }
.flow__node { padding: 18px 20px 20px; border-radius: 16px; background: rgba(251,250,247,.97); color: var(--text); box-shadow: var(--shadow-float); }
.flow__node .t-label { display: block; margin-bottom: 14px; color: var(--text-secondary); }
.flow__logos { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; min-height: 26px; }
.flow__logos svg { width: 22px; height: 22px; color: var(--ink-900); }
.flow__logos .flow__prizma { width: 30px; height: 30px; }
.flow__node p { margin: 14px 0 0; font-size: 14px; line-height: 1.4; color: var(--text-secondary); }
.flow__node--ai { box-shadow: var(--shadow-float), 0 0 0 1.5px rgba(244,241,234,.9), 0 0 0 7px rgba(138,108,245,.28); }
.flow__arrow { position: relative; align-self: center; height: 2px; margin: 0 12px; background: linear-gradient(90deg, rgba(244,241,234,.18), rgba(244,241,234,.75)); }
.flow__arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 8px solid rgba(244,241,234,.75); border-right: 0; }
.flow__arrow span, .flow__back span { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; max-width: 140px; text-align: center; font: 400 var(--fs-xs)/1.4 var(--font-sans); letter-spacing: 0; color: var(--text-inverse-muted); }
.flow__arrow span { bottom: 12px; }
.flow__back { grid-column: 1 / -1; position: relative; height: 26px; margin: 22px calc((100% - 300px) / 6) 36px; border: 2px solid rgba(244,241,234,.32); border-top: 0; border-radius: 0 0 16px 16px; }
.flow__back::before { content: ""; position: absolute; left: -8px; top: -10px; border: 7px solid transparent; border-bottom: 10px solid rgba(244,241,234,.32); border-top: 0; }
.flow__back span { top: calc(100% + 10px); max-width: none; }
@media (max-width: 900px) {
  .flow { grid-template-columns: minmax(0,1fr); }
  .flow__arrow { width: 2px; height: 48px; margin: 0 auto; background: linear-gradient(180deg, rgba(244,241,234,.18), rgba(244,241,234,.75)); }
  .flow__arrow::after { right: -5px; top: auto; bottom: -2px; border: 6px solid transparent; border-top: 8px solid rgba(244,241,234,.75); border-bottom: 0; }
  .flow__arrow span { left: 16px; bottom: auto; top: 50%; transform: translateY(-50%); text-align: left; max-width: 60vw; }
  .flow__back { height: auto; margin: 18px 0 8px; border: 0; } .flow__back::before { display: none; }
  .flow__back span { position: static; transform: none; display: block; max-width: none; }
  .flow__back span::before { content: "↩ "; }
}

/* Trust's four principles, two by two, under the diagram. The third carries the three things a change can reach. */
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid var(--line-strong); margin-top: 48px; }
.cols2 > div { padding: 26px 32px 28px 0; border-bottom: 1px solid var(--line); } .cols2 > div:nth-child(2n) { padding-left: 32px; border-left: 1px solid var(--line); }
.cols2 .t-label { display: block; margin-bottom: 10px; } .cols2 p { margin: 6px 0 0; font-size: 15px; color: var(--text-secondary); max-width: 52ch; }
.dark .cols2, .dark .cols2 > div { border-color: var(--line-inverse); } .dark .cols2 p { color: var(--text-inverse-muted); }
.reach { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; color: rgba(244,241,234,.82); }
.reach li { display: inline-flex; align-items: center; gap: 8px; } .reach li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
@media (max-width: 820px) { .cols2 { grid-template-columns: 1fr; } .cols2 > div, .cols2 > div:nth-child(2n) { padding: 22px 0; border-left: 0; } }

/* ---------- Origin ---------- */

/* ---------- 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; } }

/* ---------- Signup after Setup: the moment "five minutes" lands, twenty phone screens before the final one ---------- */
.midcta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px; margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--line-strong); }
.midcta__t { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; }
.midcta__f { flex: 0 1 460px; }
.midcta .signup { margin: 0; max-width: none; }
.midcta .signup__status { margin: 10px 0 0; }

/* ---------- 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__in nav a { padding: 12px 0; color: var(--text-secondary); } .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; }

.dots { display: none; }  /* the swipe-row dots, phones only */

/* ---------- 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; }
  .shot--wide.shot--full { height: auto; }  /* shown whole: the Review evidence, every state down to "Not checked" */
  .cell .shot { height: 440px; }
  .hero { padding-top: 32px; }
  .pill { margin-bottom: 20px; }
  .hero .t-lead { margin: 20px auto 28px; }
  .hero__art { margin-top: 36px; 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; }

  /* Shorter page: tighter sections, no Day shot (the four steps carry How it works), eight logos and a count */
  :root { --section-py: 56px; }
  .tools { padding-top: 64px; }
  .tools__ai { margin-bottom: 28px; }
  .tools__row { gap: 10px 22px; }
  .tools__row .tools__more { display: none; }
  .tools__row .tools__count { display: inline-flex; }
  .sh { margin-bottom: 28px; }
  .how .shot--wide { display: none; }
  .steps { margin-top: 0; }
  .aside { margin: 32px 0 48px; }
  .midcta { display: block; margin-top: 32px; padding-top: 28px; }
  .midcta__t { margin-bottom: 16px; }
  .nav__cta .btn { height: 44px; }

  /* Every row of cards swipes sideways instead of stacking: same cards, same words, a fraction of the scroll. The next card peeks in, dots say how many */
  .gaps, .bento, .steps, .legend, .cols2, .cols3 { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px; scrollbar-width: none; }
  .gaps::-webkit-scrollbar, .bento::-webkit-scrollbar, .steps::-webkit-scrollbar, .legend::-webkit-scrollbar, .cols2::-webkit-scrollbar, .cols3::-webkit-scrollbar { display: none; }
  .gap, .bento .cell, .steps > div, .legend > div, .cols2 > div, .cols3 > div { scroll-snap-align: start; grid-column: auto !important; }
  /* the text lists (steps, evidence states, principles, roles) become cards like the screenshot ones */
  .steps, .legend, .cols2, .cols3 { border-top: 0; }
  .legend { margin: 32px 0 0; } .cols2 { margin-top: 32px; align-items: start; }  /* one principle carries a list: the others keep their own height instead of an empty box */
  .steps > .step, .steps > .step + .step, .legend > div, .legend > div + div, .cols2 > div, .cols2 > div:nth-child(2n), .cols3 > div, .cols3 > div + div { padding: 20px 20px 22px; border: 0; border-radius: var(--r-lg); background: var(--paper-0); box-shadow: inset 0 0 0 1px var(--line); }
  .dark .cols2 > div, .dark .cols2 > div:nth-child(2n) { background: rgba(244,241,234,.05); box-shadow: inset 0 0 0 1px var(--line-inverse); }
  section[id] { scroll-margin-top: 24px; } section[id].flush { scroll-margin-top: calc(var(--section-py) + 24px); }  /* the bar is taller than a phone section's padding */
  .gaps .reveal, .bento .reveal { opacity: 1; transform: none; transition: none; }
  .bento .cell .shot { height: 340px; }
  .cell__txt { padding: 18px 20px 22px; }
  .dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
  .dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--ink-300); transition: width var(--dur-fast), background var(--dur-fast); }
  .dots i.on { width: 18px; background: var(--ink-900); }
  .dark .dots i { background: rgba(244,241,234,.28); } .dark .dots i.on { background: var(--paper-50); }
}

/* ---------- 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-sm)/1.5 var(--font-sans); 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; } }