/* Serviceplane — the marketing site's one stylesheet (2026-09-22).
   Every page under apps/site links this file, so the tokens, the nav pill, the buttons, the section
   rhythm, the closing band and the footer are defined once. The colour table under :root is
   measured (WCAG 2.1 AA) and guarded by apps/workspace/src/__tests__/site-contrast.test.ts, which
   reads this file. Page-specific rules stay in each page's own <style>. */
:root {
  --paper: #f7f8fa; --paper-2: #eef1f4; --surface: #ffffff; --ink: #1f2d3d; --ink-2: #3f4c5a; --muted: #636e7a;
  --hair: #e2e6ea; --hair-soft: #edf0f3; --mint: #4cc39c; --mint-deep: #227b5f; --mint-soft: #e2f6ee;
  --mint-hover: #2fa983; --mint-ink: #0e2a20;
  --amber: #f9c15c; --amber-soft: #fff3d9; --slate: #4a5d6e; --sky: #2a64c6; --night: #0b1420; --night-2: #12203a;
  --focus: #1f2d3d; --focus-light: #ffffff;
  /* Contrast (WCAG 2.1 AA, measured on these tokens): 4.5:1 for normal text, 3:1 for 24px / 18.66px-bold
     text and for focus rings. The values that moved, and what they were measured against:
       --muted #636e7a (was #6b7784, 4.30 on --paper): 5.20 on --surface, 4.89 on --paper,
         4.54 on the --hair-soft stripe of .field.hidden-field.
       --mint-deep #227b5f (was #2fa983, 2.95 on --surface) is the green used for text:
         5.16 on --surface, 4.86 on --paper, 4.59 on --mint-soft.
       --mint-hover keeps the old deep mint; it is now only the primary button's hover fill.
       --mint-ink #0e2a20 is the label on a --mint fill: 7.00 on --mint, 5.20 on --mint-hover
         (white on --mint is 2.19 and fails).
       --sky #2a64c6 (was #2f6fdc, 3.93): 4.65 on the #e1ebf4 avatar circles.
     Focus ring: --focus #1f2d3d on the light sections — 13.99 on --surface, 13.17 on --paper,
     12.43 on --mint-soft, 12.71 on --amber-soft, 6.39 on --mint; --focus-light #ffffff on the dark
     grounds — 18.50 on --night, 16.79 on the nav pill, 8.44 on the hero behind the form, 5.81 on the
     glass of .hero-form (hero grounds sampled at the elements' own position on a 1440x900 viewport). */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --r-xl: 32px; --r-lg: 24px; --r: 16px; --r-sm: 12px;
  --shadow: 0 1px 1px rgba(16, 24, 40, 0.04), 0 8px 24px -12px rgba(16, 24, 40, 0.18);
  --shadow-lg: 0 40px 90px -30px rgba(24, 52, 80, 0.45);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; margin: 0; line-height: 1.1; }
p { margin: 0; }
.wrap { width: min(1152px, 100% - 32px); margin-inline: auto; }
.wrap-narrow { width: min(768px, 100% - 32px); margin-inline: auto; }
.eyebrow { font: 500 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-deep); }
.lede { color: var(--ink-2); font-size: 18px; line-height: 1.6; max-width: 60ch; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ---- skip link + focus ---- */
.skip { position: fixed; left: -9999px; top: 12px; z-index: 40; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; white-space: nowrap; background: var(--surface); color: var(--ink); font: 500 14px var(--font); text-decoration: none; box-shadow: var(--shadow); }
.skip:focus { left: 16px; }
/* One ring for every button, link and field: 2px, offset 2px. Dark ink on the light sections,
   white on the dark hero, the glass nav pill and the closing band — see the table in :root. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hero :focus-visible, .nav-pill :focus-visible, .band :focus-visible { outline-color: var(--focus-light); }
.nav-pill.solid :focus-visible { outline-color: var(--focus); }
main:focus { outline: none; } /* the skip link's target: the jump itself is the cue, not a ring round the page */

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; font: 500 15px var(--font); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform 0.25s var(--ease), background 0.2s, box-shadow 0.25s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--mint); color: var(--mint-ink); box-shadow: 0 10px 24px -12px rgba(76, 195, 156, 0.8); }
.btn-primary:hover { background: var(--mint-hover); }
.btn-white { background: #fff; color: var(--ink); box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.5); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hair); }
.btn-ghost:hover { background: var(--paper); }
.btn-glass { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.28); backdrop-filter: blur(8px); }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---- floating nav ---- */
.nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 20; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.nav-pill { pointer-events: auto; display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 16px; border-radius: 999px; background: rgba(20, 30, 45, 0.55); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.6); transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; }
.nav-pill.solid { background: rgba(255, 255, 255, 0.86); color: var(--ink); border-color: var(--hair); box-shadow: var(--shadow); }
.nav .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; text-decoration: none; margin-right: 8px; }
.nav .brand svg { width: 22px; height: 22px; }
.nav .brand svg path { transition: fill 0.3s; }
/* The pill turns white as the hero scrolls past, and a white wing on white is a wing nobody
   sees. On that ground the mark takes its light pairing, mint over deep mint. */
.nav-pill.solid .brand svg path:first-child { fill: var(--mint); }
.nav-pill.solid .brand svg path:last-child { fill: var(--mint-deep); }
.nav .sep { width: 1px; height: 18px; background: currentColor; opacity: 0.25; margin: 0 6px; }
.nav .links { display: flex; gap: 2px; }
.nav .links a { text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 999px; opacity: 0.9; }
.nav .links a:hover { background: rgba(255, 255, 255, 0.12); opacity: 1; }
.nav-pill.solid .links a:hover { background: var(--paper-2); }
.nav .cta { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.nav .cta .signin { text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 12px; opacity: 0.9; }
.nav .cta .btn { height: 36px; padding: 0 14px; font-size: 14px; }
.nav-pill.solid .btn-white { background: var(--ink); color: #fff; }

/* ---- hero ---- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; padding: 120px 16px 96px; isolation: isolate; }
.hero .sky { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #0e1b2c 0%, #16304a 45%, #2e6a6b 78%, #8fd4bd 100%); }
.hero .blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: 0.55; will-change: transform; }
.hero .b1 { width: 60vw; height: 60vw; max-width: 720px; max-height: 720px; left: -10vw; top: -10vh; background: radial-gradient(circle, rgba(76, 195, 156, 0.7), transparent 65%); animation: drift1 26s ease-in-out infinite alternate; }
.hero .b2 { width: 50vw; height: 50vw; max-width: 640px; max-height: 640px; right: -12vw; top: 10vh; background: radial-gradient(circle, rgba(249, 193, 92, 0.45), transparent 65%); animation: drift2 32s ease-in-out infinite alternate; }
.hero .b3 { width: 70vw; height: 40vw; max-width: 900px; left: 15vw; bottom: -10vh; background: radial-gradient(ellipse, rgba(143, 212, 189, 0.8), transparent 65%); animation: drift3 22s ease-in-out infinite alternate; }
.hero .horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: -1; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.35) 70%, #fff 100%); }
.hero .grain { position: absolute; inset: 0; z-index: -1; opacity: 0.08; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
@keyframes drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(8vw, 6vh) scale(1.15); } }
@keyframes drift2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-10vw, 8vh) scale(0.95); } }
@keyframes drift3 { from { transform: translate(0, 0); } to { transform: translate(-6vw, -4vh) scale(1.08); } }
.hero-inner { position: relative; width: min(880px, 100%); }
.hero h1 { font-size: clamp(38px, 6.4vw, 72px); letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25); }
.hero .lede { color: rgba(255, 255, 255, 0.86); margin: 22px auto 0; font-size: clamp(16px, 2vw, 19px); }
.hero-form { margin: 32px auto 0; display: flex; gap: 6px; padding: 6px; width: min(520px, 100%); border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero-form input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 0; background: transparent; color: #fff; font: 15px var(--font); outline: none; }
/* the hero's white text is measured against the sky gradient + blobs at each element's own height:
   placeholder 4.79 and fine print 4.85 at 0.86 (0.7 and 0.72 read 3.80 and 3.96 there), the input's
   own ring 3.80 at 0.7 on the glass (0.5 read 2.73). The input keeps that inset ring, not the outline. */
.hero-form input::placeholder { color: rgba(255, 255, 255, 0.86); }
.hero-form input:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7); border-radius: 999px; }
.hero .fine { margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, 0.86); }
.scroll-hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: rgba(31, 45, 61, 0.7); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.scroll-hint i { width: 1px; height: 28px; background: currentColor; display: block; animation: hint 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(10px); opacity: 0; } }

/* ---- sections ---- */
section.block { padding: 96px 0; }
.head { max-width: 760px; margin: 0 auto 48px; }
.head h2 { font-size: clamp(30px, 4.2vw, 46px); margin-top: 14px; text-wrap: balance; }
.head .lede { margin-top: 16px; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(2) { transition-delay: 0.08s; } .stagger.in > *:nth-child(3) { transition-delay: 0.16s; } .stagger.in > *:nth-child(4) { transition-delay: 0.24s; } .stagger.in > *:nth-child(5) { transition-delay: 0.32s; } .stagger.in > *:nth-child(6) { transition-delay: 0.4s; }

/* ---- pause / resume for the two auto-advancing rotations (WCAG 2.2.2) ---- */
/* Hidden where motion is reduced: nothing rotates there, so there is nothing to offer to pause. */
.rotator { display: flex; justify-content: center; margin: 0 0 24px; }
.rotator.left { justify-content: flex-start; margin: 22px 0 0; }
.pause { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--hair); background: var(--surface); font: 500 13px var(--font); color: var(--ink-2); cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.pause:hover { border-color: var(--ink); color: var(--ink); }

/* ---- pills + product mock ---- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
.pill { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--hair); background: var(--surface); font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: all 0.2s; }
.pill:hover, .pill.active { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.pill.active { background: var(--ink); color: #fff; }
.stage { position: relative; border-radius: var(--r-xl); padding: clamp(16px, 4vw, 48px); background: linear-gradient(160deg, #cfe8f7 0%, #9fbfe4 55%, #7fb6c5 100%); box-shadow: var(--shadow-lg); overflow: hidden; }
.stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 20% 10%, rgba(255, 255, 255, 0.5), transparent 70%); pointer-events: none; }
.frame { position: relative; display: grid; grid-template-columns: 1fr 240px; background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 30px 60px -30px rgba(16, 24, 40, 0.5); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.6); }
.frame-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-bottom: 1px solid var(--hair); background: var(--paper); font: 12px var(--mono); color: var(--muted); }
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--hair); display: inline-block; }
.frame-bar span { margin-left: 8px; }
.thread { padding: 20px; display: flex; flex-direction: column; gap: 14px; min-height: 380px; }
.msg { display: grid; grid-template-columns: 32px 1fr; gap: 12px; opacity: 0; transform: translateY(8px); }
.msg.show { animation: msgin 0.6s var(--ease) forwards; }
@keyframes msgin { to { opacity: 1; transform: none; } }
.msg .who { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--mono); background: #e1ebf4; color: var(--sky); }
.msg.ai .who { background: var(--mint-soft); color: var(--mint-deep); } .msg.staff .who { background: var(--amber-soft); color: #8a6318; }
.msg .meta { font: 11px var(--mono); color: var(--muted); margin-bottom: 4px; }
.msg .bubble { background: var(--paper); border-radius: 14px; padding: 10px 14px; font-size: 14px; line-height: 1.5; }
.msg.ai .bubble { background: var(--surface); border: 1px solid var(--hair); }
.msg.staff .bubble { background: var(--mint-soft); }
.cite { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font: 11px var(--mono); color: var(--mint-deep); background: var(--mint-soft); padding: 3px 8px; border-radius: 999px; }
.typing { display: inline-flex; gap: 4px; padding: 10px 14px; background: var(--paper); border-radius: 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
.rail { border-left: 1px solid var(--hair); background: var(--paper); padding: 16px; font-size: 12px; display: flex; flex-direction: column; gap: 14px; }
.rail dt { font: 500 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.rail dd { margin: 0; color: var(--ink); }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font: 500 11px var(--font); background: var(--amber-soft); color: #8a6318; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.ok { background: var(--mint-soft); color: var(--mint-deep); }
.ledger { font: 11px/1.7 var(--mono); color: var(--ink-2); border-top: 1px dashed var(--hair); padding-top: 10px; }
.ledger div { opacity: 0; transform: translateX(-6px); }
.ledger div.show { animation: ledin 0.5s var(--ease) forwards; }
@keyframes ledin { to { opacity: 1; transform: none; } }
.ledger span { color: var(--muted); }

/* ---- product scenes: one animation per tab ---- */
.scenes { position: relative; min-height: 440px; }
.scene { position: absolute; inset: 0; opacity: 0; transform: translateY(14px) scale(0.985); pointer-events: none; transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.scene.active { opacity: 1; transform: none; pointer-events: auto; position: relative; }
.seq { opacity: 0; transform: translateY(8px); }
.seq.show { animation: msgin 0.55s var(--ease) forwards; }
.typing-msg.show { animation: msgin 0.55s var(--ease) forwards, gone 0.4s var(--ease) 1.15s forwards; }
@keyframes gone { to { opacity: 0; height: 0; margin-top: -14px; overflow: hidden; } }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.split .card-ui, .scene[data-scene="email"] .card-ui { min-height: 420px; }
.scene[data-scene="sms"] { display: grid; place-items: center; min-height: 440px; }
.card-ui { background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 30px 60px -30px rgba(16, 24, 40, 0.5); border: 1px solid rgba(255, 255, 255, 0.6); overflow: hidden; }
.card-ui .bar-top { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--hair); background: var(--paper); font: 12px var(--mono); color: var(--muted); }
.card-ui .bar-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); display: inline-block; }
.card-ui .body { padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.notice { font-size: 13px; color: var(--muted); font-style: italic; padding: 6px 0; }
.desk-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); }
.desk-row b { font-weight: 500; font-size: 13.5px; }
.desk-row small { color: #b9583d; font: 500 12px var(--mono); }
.desk-row .claim { font: 500 12px var(--font); padding: 6px 12px; border-radius: 999px; background: var(--mint); color: var(--mint-ink); }
.desk-row.taken { border-color: var(--mint); background: var(--mint-soft); }
.desk-row.taken small { color: var(--mint-deep); }
.proof-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: var(--paper); font-size: 13.5px; }
.proof-row .tick { width: 20px; height: 20px; border-radius: 50%; background: var(--mint); color: var(--mint-ink); display: grid; place-items: center; font-size: 12px; font-weight: 700; transform: scale(0); transition: transform 0.4s var(--ease); }
.show .tick { transform: scale(1); }
.lock { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); color: var(--muted); }
.lock i { width: 12px; height: 14px; border: 2px solid currentColor; border-radius: 3px; position: relative; display: inline-block; }
.lock i::before { content: ""; position: absolute; left: 1px; top: -8px; width: 6px; height: 8px; border: 2px solid currentColor; border-bottom: 0; border-radius: 6px 6px 0 0; transition: transform 0.4s var(--ease); transform-origin: left bottom; }
.lock.open { color: var(--mint-deep); } .lock.open i::before { transform: rotate(-30deg); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hair); background: var(--surface); }
.field small { display: block; font: 500 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.field.hidden-field { background: repeating-linear-gradient(45deg, var(--paper), var(--paper) 6px, var(--hair-soft) 6px, var(--hair-soft) 12px); color: var(--muted); }
.mail { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); }
.mail .av { width: 36px; height: 36px; border-radius: 50%; background: #e1ebf4; color: var(--sky); display: grid; place-items: center; font: 600 11px var(--mono); }
.mail .subj { font-weight: 500; font-size: 14px; }
.mail .from { font-size: 12px; color: var(--muted); }
.mail .snip { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.labels { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.label { font: 500 12px var(--font); padding: 4px 10px; border-radius: 999px; background: var(--amber-soft); color: #8a6318; }
.label.route { background: var(--mint-soft); color: var(--mint-deep); }
.phone { width: min(300px, 100%); margin: 0 auto; border-radius: 34px; background: #111; padding: 12px; box-shadow: 0 30px 60px -30px rgba(16, 24, 40, 0.6); }
.phone .screen { background: var(--surface); border-radius: 24px; padding: 18px 14px; min-height: 380px; display: flex; flex-direction: column; gap: 10px; }
.phone .time { text-align: center; font: 500 11px var(--mono); color: var(--muted); }
.sms { max-width: 85%; padding: 9px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; }
.sms.in { background: var(--paper-2); align-self: flex-start; border-bottom-left-radius: 4px; }
.sms.out { background: var(--mint); color: var(--mint-ink); align-self: flex-end; border-bottom-right-radius: 4px; }
.sms.sys { align-self: center; font: 11px var(--mono); color: var(--muted); background: none; }
.evals { display: grid; gap: 6px; }
.eval { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--paper); font-size: 13px; }
.eval .ok { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--mint); color: var(--mint-ink); }
.eval .miss { background: var(--amber); color: #5a3d00; }
.eval small { font: 11px var(--mono); color: var(--muted); }
.gauge-light { display: flex; align-items: baseline; gap: 10px; }
.gauge-light b { font-size: 40px; font-weight: 500; letter-spacing: -0.03em; }
.gauge-light small { color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } .scenes { min-height: 0; } .scene { position: absolute; } .scene.active { position: relative; } }

/* shared bits of the deck cards */
.trace { font: 12.5px/1.8 var(--mono); }
.trace div { opacity: 0; transform: translateX(-6px); }
.trace div.show { animation: ledin 0.4s var(--ease) forwards; }
.modes { display: flex; gap: 8px; }
.modes span { font: 500 12px var(--font); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hair); color: var(--muted); transition: all 0.3s; }
.gauge { display: flex; align-items: baseline; gap: 10px; }
.gauge b { font-size: 34px; font-weight: 500; letter-spacing: -0.02em; }
.gauge small { font-size: 13px; }
.policy { display: grid; gap: 8px; font-size: 13px; }
.policy div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.policy .ok { font: 500 11px var(--mono); }

/* ---- 3D deck under "how it runs" ---- */
.deck-wrap { perspective: 1400px; perspective-origin: 70% 30%; min-height: 520px; position: sticky; top: 96px; padding: 8px 0 40px; }
.deck { position: relative; height: 460px; transform-style: preserve-3d; transition: transform 0.6s var(--ease); animation: deckfloat 9s ease-in-out infinite alternate; }
@keyframes deckfloat { from { transform: rotateY(-4deg) rotateX(2deg) translateY(0); } to { transform: rotateY(3deg) rotateX(-2deg) translateY(-8px); } }
.deck.hover { animation: none; }
.dcard { position: absolute; inset: 0 48px 48px 0; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hair); box-shadow: 0 40px 80px -40px rgba(16, 24, 40, 0.45), 0 1px 1px rgba(16, 24, 40, 0.04); padding: 24px; transform-style: preserve-3d; transition: transform 0.9s var(--ease), opacity 0.9s var(--ease), box-shadow 0.9s; will-change: transform; backface-visibility: hidden; display: flex; flex-direction: column; gap: 14px; }
.dcard .k { font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.dcard h4 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.dcard.p0 { transform: translate3d(0, 0, 0) rotateY(0) scale(1); z-index: 3; opacity: 1; }
.dcard.p1 { transform: translate3d(84px, 52px, -180px) rotateY(-16deg) rotateX(5deg) scale(0.94); z-index: 2; opacity: 0.9; }
.dcard.p2 { transform: translate3d(36px, 104px, -360px) rotateY(-26deg) rotateX(8deg) scale(0.88); z-index: 1; opacity: 0.7; }
.dcard .trace { color: var(--ink-2); }
.dcard .trace .out { color: var(--mint-deep); } .dcard .trace .in { color: #8a6318; } .dcard .trace .ok { color: var(--mint-deep); font-weight: 500; }
.dcard .modes span { border-color: var(--hair); color: var(--muted); } .dcard .modes span.lit { background: var(--mint); color: var(--mint-ink); border-color: var(--mint); }
.dcard .policy div { background: var(--paper); } .dcard .policy .ok { color: var(--mint-deep); }
.dcard .gauge b { color: var(--ink); } .dcard .gauge small { color: var(--muted); }
.dcard .art { margin-top: auto; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--mint), var(--amber), var(--slate)); opacity: 0.35; }
@media (max-width: 960px) { .deck-wrap { position: static; min-height: 0; perspective: 1000px; } .deck { height: 500px; } .dcard { inset: 0 24px 40px 0; } .dcard.p1 { transform: translate3d(36px, 28px, -120px) rotateY(-10deg) scale(0.95); } .dcard.p2 { transform: translate3d(20px, 60px, -240px) rotateY(-16deg) scale(0.9); } }
@media (prefers-reduced-motion: reduce) { .scene, .dcard, .deck { transition: none; animation: none; } .seq { opacity: 1; transform: none; animation: none; } .proof-row .tick { transform: scale(1); } }

/* ---- vertical cards ---- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.study { border-radius: var(--r-lg); padding: 32px; background: var(--paper); border: 1px solid var(--hair); display: flex; flex-direction: column; gap: 16px; transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.study:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.study .tags { display: flex; gap: 8px; flex-wrap: wrap; }
.study .tag { font: 500 12px var(--font); padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hair); color: var(--ink-2); }
.study h3 { font-size: 26px; }
.study p { color: var(--ink-2); font-size: 15px; }
.study .quote { font-size: 20px; line-height: 1.4; letter-spacing: -0.01em; }
.study a { color: var(--sky); text-decoration: none; font-weight: 500; }

/* ---- built for + industries ---- */
.feature .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--mint-soft); display: grid; place-items: center; font-size: 18px; }
.verticals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vert { border-radius: var(--r-lg); border: 1px solid var(--hair); background: var(--surface); padding: 22px; display: flex; flex-direction: column; gap: 8px; transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.vert:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.vert h3 { font-size: 18px; }
.vert p { color: var(--ink-2); font-size: 14px; flex: 1; }
.vert .ex { font-size: 13px; color: var(--mint-deep); font-style: italic; }
@media (max-width: 960px) { .verticals { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .verticals { grid-template-columns: 1fr; } }

.ticks { margin: auto 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.ticks li::before { content: "✓"; color: var(--mint-deep); font-weight: 600; }

/* ---- feature grid ---- */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { border-radius: var(--r-lg); border: 1px solid var(--hair); background: var(--surface); padding: 28px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); }
.feature h3 { font-size: 22px; }
.feature p { color: var(--ink-2); font-size: 15px; }
.mini { margin-top: auto; border-radius: var(--r); background: var(--paper); border: 1px solid var(--hair); padding: 14px; font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
.mini .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mini .row b { font-weight: 500; }
.mini .row small { color: var(--muted); font: 11px var(--mono); }
.models { display: flex; flex-wrap: wrap; gap: 6px; }
.models span { font: 11px var(--mono); padding: 4px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--hair); transition: all 0.3s; }
.models span.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 6px; }
.flow span { text-align: center; font: 500 11px var(--mono); padding: 8px 4px; border-radius: 8px; background: var(--surface); border: 1px solid var(--hair); position: relative; }
.flow span.lit { border-color: var(--mint); background: var(--mint-soft); color: var(--mint-deep); }
.bar { height: 8px; border-radius: 999px; background: var(--hair-soft); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--mint); border-radius: 999px; transition: width 1.6s var(--ease); }
.in .bar i { width: var(--w, 60%); }

/* ---- infrastructure steps ---- */
.infra { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
.steps { display: flex; flex-direction: column; }
.step { padding: 24px 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 44px 1fr; gap: 12px; cursor: pointer; }
.step .n { font: 500 13px var(--mono); color: var(--mint-deep); padding-top: 4px; }
.step h3 { font-size: 22px; }
.step p { color: var(--ink-2); font-size: 15px; margin-top: 6px; }
.step ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.6s var(--ease), opacity 0.4s; }
.step.active ul { max-height: 200px; opacity: 1; }
.step li::before { content: "✓"; color: var(--mint-deep); font-weight: 600; margin-right: 8px; }
.step.active .n { color: var(--ink); }

/* ---- numbers ---- */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.num { border-top: 2px solid var(--mint); padding-top: 16px; }
.num b { display: block; font-size: 44px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.num small { display: block; margin-top: 10px; color: var(--ink-2); font-size: 14px; }

/* ---- closing band ---- */
.band { background: var(--night); color: #fff; padding: 120px 0 0; position: relative; overflow: hidden; }
.band::before { content: ""; position: absolute; inset: -20% -10% auto; height: 70%; background: radial-gradient(40% 50% at 30% 20%, rgba(76, 195, 156, 0.35), transparent 70%), radial-gradient(35% 45% at 80% 10%, rgba(249, 193, 92, 0.18), transparent 70%); pointer-events: none; }
.band .cta { position: relative; text-align: center; max-width: 760px; margin: 0 auto 96px; }
.band h2 { font-size: clamp(32px, 5vw, 56px); text-wrap: balance; }
.band .lede { color: rgba(255, 255, 255, 0.72); margin: 18px auto 0; }
.band .actions { display: flex; gap: 12px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
footer { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 48px 0 40px; color: #8fa3b8; font-size: 14px; }
.foot { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot h4 { margin: 0 0 12px; font-size: 13px; color: #fff; font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { text-decoration: none; }
.foot a:hover { color: #fff; }
.foot .brand { color: #fff; font-weight: 600; font-size: 18px; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.foot .brand svg { width: 22px; height: 22px; }
.legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }

@media (max-width: 960px) {
  .nav .links { display: none; }
  .frame { grid-template-columns: 1fr; } .rail { border-left: 0; border-top: 1px solid var(--hair); }
  .duo, .grid3, .infra { grid-template-columns: 1fr; }
  .numbers { grid-template-columns: 1fr 1fr; }
  .panel { position: static; }
  .foot { grid-template-columns: 1fr 1fr; }
  section.block { padding: 72px 0; }
}
@media (max-width: 600px) {
  .hero { padding-top: 100px; }
  .hero-form { flex-direction: column; border-radius: 24px; }
  .hero-form input { height: 40px; }
  .numbers, .foot { grid-template-columns: 1fr; }
  .nav .cta .signin { display: none; }
  .stage { border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rotator { display: none; }
  .reveal, .stagger > * { opacity: 1; transform: none; transition: none; }
  .msg, .ledger div, .trace div, .panel .card { opacity: 1; transform: none; animation: none; }
  .hero .blob, .scroll-hint i, .typing i { animation: none; }
  .in .bar i { transition: none; }
}

/* ---- inner pages (2026-09-22): a short hero, a table of what is true, prose, a FAQ ---- */
.hero.sub { min-height: 0; padding: 150px 16px 88px; }
.hero.sub .lede { max-width: 64ch; }
.hero .crumb { display: inline-flex; gap: 8px; align-items: center; font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.86); margin-bottom: 22px; }
.hero .crumb a { color: inherit; text-decoration: none; opacity: 0.86; } .hero .crumb a:hover { opacity: 1; text-decoration: underline; }
.hero.sub .actions { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.nav .links a.current { background: rgba(255, 255, 255, 0.14); opacity: 1; }
.nav-pill.solid .links a.current { background: var(--paper-2); }

.prose { max-width: 68ch; color: var(--ink-2); font-size: 17px; line-height: 1.7; display: grid; gap: 18px; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose h3 { color: var(--ink); font-size: 24px; margin-top: 14px; }
.prose ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.prose code { font: 13px var(--mono); background: var(--paper); border: 1px solid var(--hair); border-radius: 6px; padding: 1px 6px; color: var(--ink); }

/* what is true, row by row: a claim, then how it is enforced — the page's spine */
.facts { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.fact { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--hair); }
.fact h3 { font-size: 22px; }
.fact .how { color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.fact .how p + p { margin-top: 10px; }
.fact .tag { display: inline-block; font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint-deep); background: var(--mint-soft); padding: 4px 9px; border-radius: 999px; margin-top: 10px; }

/* a wide card that holds an example: a question, the answer, the passage it came from */
.example { border-radius: var(--r-lg); border: 1px solid var(--hair); background: var(--paper); padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.example .col { display: grid; gap: 12px; align-content: start; }
.example .k { font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.example .card-ui .body { gap: 12px; }
.passage { border-left: 3px solid var(--mint); background: var(--surface); border-radius: 0 12px 12px 0; padding: 12px 14px; font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.passage b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px; font-size: 13px; }
.audit-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); font-size: 13.5px; }
.audit-row .seq { font: 500 11px var(--mono); color: var(--muted); }
.audit-row .hash { font: 11px var(--mono); color: var(--mint-deep); }
.audit-row.tampered { border-color: #9a3f24; background: #fbeeea; color: #9a3f24; } /* 5.9:1 — #b9583d read 4.1 on this pink */
.audit-row.tampered .hash { color: #9a3f24; }

/* not a table of features: what it is versus what it is not */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.versus .side { border-radius: var(--r-lg); border: 1px solid var(--hair); padding: 26px; background: var(--surface); }
.versus .side.no { background: var(--paper); }
.versus h3 { font-size: 18px; margin-bottom: 14px; }
.versus ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.versus li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.versus .side li::before { content: "✓"; color: var(--mint-deep); font-weight: 600; }
.versus .side.no li::before { content: "—"; color: var(--muted); }

.faq { display: grid; gap: 0; border-top: 1px solid var(--hair); max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { cursor: pointer; padding: 20px 0; font-size: 18px; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 22px/1 var(--mono); color: var(--mint-deep); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 22px; color: var(--ink-2); font-size: 15.5px; line-height: 1.65; max-width: 68ch; }

.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related a { display: block; text-decoration: none; border-radius: var(--r); border: 1px solid var(--hair); padding: 18px 20px; background: var(--surface); transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.related a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.related b { display: block; font-weight: 500; font-size: 16px; }
.related small { color: var(--ink-2); font-size: 13.5px; }

/* the not-found page */
.lost { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px 16px 80px; }
.lost h1 { font-size: clamp(34px, 5vw, 56px); }
.lost .related, .related.four { grid-template-columns: 1fr 1fr; }
.lost .code { font: 500 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-deep); margin-bottom: 18px; }

@media (max-width: 960px) {
  .fact, .example, .versus { grid-template-columns: 1fr; }
  .related, .lost .related, .related.four { grid-template-columns: 1fr; }
}

/* ---- ROI estimate (government page, 2026-09-22) ---- */
.roi { border-radius: var(--r-xl); border: 1px solid var(--hair); background: var(--surface); box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 1.2fr; overflow: hidden; }
.roi .inputs { padding: 32px; display: grid; gap: 28px; align-content: start; border-right: 1px solid var(--hair); }
.roi .inputs label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 500; color: var(--ink); }
.roi .inputs label output { font: 500 22px/1 var(--font); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.roi .inputs .range { display: grid; gap: 10px; }
.roi .inputs .ends { display: flex; justify-content: space-between; font: 11px var(--mono); color: var(--muted); }
.roi input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; cursor: pointer; }
.roi input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--mint) var(--p, 50%), var(--hair-soft) var(--p, 50%)); }
.roi input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--hair-soft); }
.roi input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--mint); }
.roi input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--surface); border: 2px solid var(--mint-deep); box-shadow: var(--shadow); }
.roi input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--mint-deep); box-shadow: var(--shadow); }
.roi .outputs { padding: 32px; background: var(--paper); display: grid; gap: 22px; align-content: start; }
.roi .outputs .k { font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.roi .big { display: grid; gap: 6px; }
.roi .big b { font-size: clamp(40px, 5vw, 56px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.roi .big b.mint { color: var(--mint-deep); }
.roi .big small { color: var(--ink-2); font-size: 14px; }
.roi .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.roi .pair b { font-size: clamp(28px, 3.4vw, 36px); }
.roi .fine { grid-column: 1 / -1; padding: 16px 32px 20px; border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--muted); line-height: 1.55; }
@media (max-width: 960px) { .roi { grid-template-columns: 1fr; } .roi .inputs { border-right: 0; border-bottom: 1px solid var(--hair); } }
@media (max-width: 600px) { .roi .pair { grid-template-columns: 1fr; } }