/* ============ SayTrue — marketing surface ============
   Tokens per DESIGN.md. Mono = fact. Served by Propshaft, fingerprinted and
   cached for a year — this used to be an inline <style> block re-shipped on
   every pageview, which stopped making sense the moment the site grew past
   one page. Hand-authored CSS; the Tailwind build never touches this file. */
:root{
  /* Zapisnik tokens */
  --st-bg:#08090B;
  --st-bg-2:#0A0C0F;
  --st-surface:#0E1114;
  --st-surface-2:#151A1F;
  --st-rule:rgba(255,255,255,.10);
  --st-ink:rgba(255,255,255,.92);
  --st-ink-2:rgba(255,255,255,.64);
  --st-ink-3:rgba(255,255,255,.42);
  --st-source:#7EC4E3;
  --st-grounded:#7EEA9B;
  --st-escalated:#F2B76C;
  --st-nosource:#9AA6B2;
  /* Legacy aliases mapped onto Zapisnik tokens (brand continuity, no fork) */
  --bg:var(--st-bg);
  --surface:var(--st-surface);
  --surface-2:var(--st-surface-2);
  --line:var(--st-rule);
  --line-2:rgba(255,255,255,0.06);
  --hair:rgba(255,255,255,0.15);
  --white:#fff;
  /* the one inverted surface: the record printed dark-on-light */
  --st-surface-inverse:#fff;
  --st-ink-inverse:#000;
  --w80:var(--st-ink);
  --w60:var(--st-ink-2);
  --w40:var(--st-ink-3);
  --w20:rgba(255,255,255,0.20);
  --blue:var(--st-source);
  --amber:var(--st-escalated);
  --green:var(--st-grounded);
  --font:'Geist',-apple-system,system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --mono:'Space Grotesk',sans-serif;   /* wordmark only */
  --data:'JetBrains Mono',monospace;   /* the evidence voice: facts only */
}
*{margin:0;padding:0;box-sizing:border-box}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background-color:var(--st-bg);background-image:linear-gradient(180deg,var(--st-bg) 0%,var(--st-bg-2) 100%);color:var(--st-ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
@media(max-width:600px){.wrap{padding:0 20px}}
::selection{background:rgba(126,196,227,0.25)}
:focus-visible{outline:2px solid var(--st-source);outline-offset:2px;border-radius:4px}
[id]{scroll-margin-top:96px}
.link{color:var(--st-source);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media(hover:hover){.link:hover{text-decoration-thickness:2px}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:16px 0;transition:background .2s ease,backdrop-filter .2s ease}
.nav.scrolled{background:rgba(8,9,11,0.72);backdrop-filter:blur(12px);border-bottom:1px solid var(--st-rule)}
/* 1fr | auto | 1fr grid so the link pill is centered on the PAGE, not merely
   between two unequal neighbors (brand vs. actions). #navMenu is absolute and
   never takes a track. */
.nav-in{width:100%;max-width:1400px;padding:0 max(40px,env(safe-area-inset-left)) 0 max(40px,env(safe-area-inset-right));display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav-in>.brand{justify-self:start}
@media(max-width:600px){.nav-in{padding:0 max(20px,env(safe-area-inset-left)) 0 max(20px,env(safe-area-inset-right))}}
.brand{display:flex;align-items:center;gap:10px}
.brand .mk{height:32px;flex:none;display:grid;place-items:center}
.brand .mk svg{height:32px;width:auto;display:block}
.brand .wd{font-family:var(--mono);font-weight:700;font-size:21px;letter-spacing:-.02em;white-space:nowrap;color:#fff}
.nav-actions{display:flex;align-items:center;gap:10px;justify-self:end}
.nav-signin,.nav-cta{white-space:nowrap}
/* Below ~1080px the side clusters outgrow equal 1fr tracks (1fr floors at
   min-content), which would shove the pill off-center anyway — fall back to
   the classic spread instead of pretending. True centering above. */
@media(max-width:1080px){.nav-in{grid-template-columns:auto auto auto;justify-content:space-between}}
.nav-links{justify-self:center;display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--st-rule);border-radius:64px;backdrop-filter:blur(5px)}
.nav-links a{font-size:14px;font-weight:500;color:var(--st-ink-2);padding:8px 16px;border-radius:64px;transition:color .16s ease,background .16s ease}
@media(hover:hover){.nav-links a:hover{color:#fff;background:rgba(255,255,255,0.06)}}
.nav-signin{font-size:14px;font-weight:500;color:var(--st-ink-2);padding:9px 14px;transition:color .16s ease}
@media(hover:hover){.nav-signin:hover{color:#fff}}
/* language switcher — mono because the label is a code, not a word. On the
   narrowest screens it yields its header slot to the CTA and lives in the
   menu instead (the panel carries the full language name there). */
/* One capsule, three segments; the filled segment is where you are. */
.lang-switch{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--st-rule);border-radius:64px;backdrop-filter:blur(5px)}
.nav-lang{display:inline-flex;align-items:center;font-family:var(--data);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--st-ink-2);padding:6px 11px;border-radius:64px;transition:color .16s ease,background .16s ease}
.nav-lang.on{color:var(--st-bg);background:var(--st-ink);cursor:default}
@media(hover:hover){.nav-lang:not(.on):hover{color:#fff;background:rgba(255,255,255,0.08)}}
@media(max-width:420px){.lang-switch{display:none}}
.pill-btn{font-size:14px;font-weight:500;white-space:nowrap;color:#fff;padding:9px 18px;border:1px solid var(--hair);border-radius:64px;background:rgba(255,255,255,0.10);transition:background .16s ease}
@media(hover:hover){.pill-btn:hover{background:rgba(255,255,255,0.18)}}
/* 768: links collapse into the menu; header CTA stays outside it (DESIGN.md). */
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:1px solid var(--st-rule);border-radius:64px;background:transparent;color:var(--st-ink);cursor:pointer;transition:background .16s ease}
@media(hover:hover){.nav-toggle:hover{background:rgba(255,255,255,0.06)}}
.nav-toggle .bars{display:block;width:16px;height:10px;position:relative}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .16s ease,top .16s ease}
.nav-toggle .bars::before{top:0}
.nav-toggle .bars::after{top:8.5px}
.nav-toggle[aria-expanded=true] .bars::before{top:4.5px;transform:rotate(45deg)}
.nav-toggle[aria-expanded=true] .bars::after{top:4.5px;transform:rotate(-45deg)}
/* The panel is a record of where you can go, styled like every other surface:
   ruled rows on the surface colour, no scrim, no full-screen takeover. */
.nav-menu{display:none;position:absolute;top:calc(100% + 8px);right:max(20px,env(safe-area-inset-right));left:max(20px,env(safe-area-inset-left));background:var(--st-surface);border:1px solid var(--st-rule);border-radius:10px;overflow:hidden}
.nav-menu a{display:block;padding:15px 18px;font-size:15px;font-weight:500;color:var(--st-ink);border-bottom:1px solid var(--st-rule)}
.nav-menu a:last-child{border-bottom:0;color:var(--st-ink-2)}
@media(hover:hover){.nav-menu a:hover{background:var(--st-surface-2)}}
@media(max-width:768px){
  .nav{padding-top:max(16px,env(safe-area-inset-top))}
  .nav-in{position:relative}
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .nav-menu{display:block;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s ease-out,transform .16s ease-out,visibility 0s .16s}
  .nav-menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease-out,transform .16s ease-out,visibility 0s}
}
@media(max-width:420px){.nav-signin{display:none}}

/* kicker — mono section overline; replaces decorative eyebrow badges */
.kicker{display:block;font-family:var(--data);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--st-ink-2)}

/* hero — the glossy stage: glow + veil + masked grid behind a centered claim,
   the headline assembling word by word, and Exhibit 01 as the proof beneath.
   The color field returned from the original direction; what sits ON it is
   still the record. */
.hero{position:relative;overflow:hidden;text-align:center;padding:168px 0 88px;border-bottom:1px solid var(--st-rule)}
.hero-glow{position:absolute;inset:0;z-index:0;background:radial-gradient(80% 55% at 50% 18%,rgba(126,196,227,.18),transparent 60%),radial-gradient(60% 50% at 78% 30%,rgba(242,183,108,.10),transparent 60%),radial-gradient(60% 50% at 22% 32%,rgba(126,234,155,.10),transparent 60%)}
.hero-veil{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 80% at 50% 0%,rgba(8,9,11,0) 30%,rgba(8,9,11,.55) 80%,var(--st-bg) 100%),linear-gradient(180deg,rgba(8,9,11,.35) 0%,rgba(8,9,11,0) 30%,rgba(8,9,11,0) 60%,var(--st-bg) 100%)}
.hero-bggrid{position:absolute;inset:0;z-index:1;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(110% 70% at 50% 35%,#000 20%,transparent 70%);-webkit-mask-image:radial-gradient(110% 70% at 50% 35%,#000 20%,transparent 70%)}
.hero-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:26px}
.ann{display:inline-flex;align-items:center;font-family:var(--data);font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--st-ink-2);padding:8px 16px;border:1px solid var(--hair);border-radius:64px;background:rgba(255,255,255,0.04)}
h1.hero-h{font-family:var(--font);font-weight:500;font-size:64px;line-height:1.05;letter-spacing:-0.04em;max-width:17ch;margin:0 auto}
h1.hero-h .it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;margin:0 .08em}
h1.hero-h .w{display:inline-block;will-change:transform,filter,opacity}
.hero-sub{font-size:18px;line-height:1.55;color:var(--st-ink-2);max-width:54ch;margin:0 auto}
.hero-cta{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.hero-note{font-family:var(--data);font-size:13px;color:var(--st-ink-2)}
.hero-record{width:100%;max-width:640px;margin:44px auto 0;text-align:left}
/* the entrance: armed only when JS adds .anim (never under reduced motion),
   so a blocked script or a reduced-motion visitor gets a fully visible page */
.anim .hero-h .w,.anim .fade-up{opacity:.001}
.w.in{animation:wordIn .7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes wordIn{from{opacity:.001;filter:blur(10px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:none}}
.fade-up.in{animation:fadeUp .7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes fadeUp{from{opacity:.001;filter:blur(10px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:none}}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;min-height:44px;padding:12px 22px;border-radius:64px;border:1px solid transparent;transition:background .16s ease,transform .15s ease,box-shadow .16s ease;cursor:pointer}
.btn-white{background:var(--st-surface-inverse);color:var(--st-ink-inverse)}
/* The submit button disables itself while the POST is in flight, and until now
   it looked exactly as clickable as before. Per the states table: muted ink on
   a ruled surface, no hover, not-allowed — never opacity alone, which dims the
   label past the contrast floor. */
.btn:disabled{cursor:not-allowed;transform:none;box-shadow:none}
.btn-white:disabled,.btn-white[aria-busy=true]{background:var(--st-surface-2);color:var(--st-ink-2);border-color:var(--st-rule)}
.btn-ghost:disabled,.btn-ghost[aria-busy=true]{background:transparent;color:var(--st-ink-3);border-color:var(--st-rule)}
@media(hover:hover){.btn-white:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(255,255,255,.14)}}
.btn-ghost{background:rgba(255,255,255,0.10);border-color:var(--hair);color:#fff}
@media(hover:hover){.btn-ghost:hover{background:rgba(255,255,255,0.18)}}
@media(max-width:760px){.hero{padding:140px 0 56px}h1.hero-h{font-size:38px}.hero-sub{font-size:16px}.hero-record{margin-top:32px}}

/* exhibit — the only permitted container for product scenes */
figure.exhibit{border:1px solid var(--st-rule);background:var(--st-surface);border-radius:10px;overflow:hidden;margin:0}
/* The record reads as a protocol sheet, not a chat card: dot leaders run each
   ledger line out to its stamp, the source is an ATTACHED slip on a drawn
   connector (no card-in-card), and the grounded chip carries a drawn tick. */
figure.exhibit.record{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 110px),var(--st-surface);box-shadow:0 28px 64px -36px rgba(0,0,0,.65)}
.record .xc-turn{padding:16px 0}
.record .xc-meta::after{content:"";order:1;flex:1 1 24px;min-width:24px;border-bottom:1px dotted rgba(255,255,255,.18);align-self:center;transform:translateY(-2px)}
.record .xc-meta .st-chip{order:2}
.record .st-chip.grounded::before,figure.glass .st-chip.grounded::before{content:"";width:7px;height:4px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin:-2px 7px 0 0}
/* Glass exhibits carry the same ledger anatomy as the hero record. The dot
   leader only runs when the line opens with text (the outcomes card leads
   with its chip as the row label — no leader there). */
figure.glass .xc-meta:has(>span:first-child:not(.st-chip))::after{content:"";order:1;flex:1 1 24px;min-width:24px;border-bottom:1px dotted rgba(255,255,255,.18);align-self:center;transform:translateY(-2px)}
figure.glass .xc-meta .st-chip{order:2}
.record .source-card{position:relative;border:0;background:transparent;border-radius:0;padding:8px 0 0 36px;margin-top:6px}
.record .source-card::before{content:"";position:absolute;left:13px;top:0;width:15px;height:22px;border-left:1px solid var(--st-rule);border-bottom:1px solid var(--st-rule);border-bottom-left-radius:8px}
.record .source-card .doc{width:28px;height:28px;border-radius:6px}
.record .source-card .doc svg{width:15px;height:15px}
.exhibit-body{padding:22px}
@media(max-width:600px){.exhibit-body{padding:16px}}
figure.exhibit figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding:10px 16px;border-top:1px solid var(--st-rule);background:var(--st-surface-2);font-family:var(--data);font-size:12px;line-height:1.5;color:var(--st-ink-2)}
figure.exhibit figcaption .exno{color:var(--st-ink);font-weight:600;letter-spacing:.08em}
.xc-turn{padding:14px 0;border-top:1px solid var(--st-rule)}
.xc-turn:first-child{border-top:0;padding-top:0}
.xc-turn:last-child{padding-bottom:0}
.xc-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--data);font-size:12px;color:var(--st-ink-2);margin-bottom:7px}
.xc-msg{font-size:16px;line-height:1.55;color:var(--st-ink)}

/* status chip — always text + color, never color alone */
.st-chip{display:inline-flex;align-items:center;font-family:var(--data);font-size:11px;font-weight:600;letter-spacing:.08em;padding:3px 10px;border:1px solid;border-radius:6px;background:var(--st-surface-2)}
.st-chip.grounded{color:var(--st-grounded);border-color:rgba(126,234,155,.35)}
.st-chip.escalated{color:var(--st-escalated);border-color:rgba(242,183,108,.35)}
.st-chip.nosource{color:var(--st-nosource);border-color:rgba(154,166,178,.4)}

/* source card — citation next to an answer: icon + text, never a colored border alone */
.source-card{display:flex;align-items:center;gap:12px;border:1px solid var(--st-rule);background:var(--st-surface-2);border-radius:10px;padding:12px 14px;margin-top:12px}
.source-card .doc{width:34px;height:34px;border-radius:6px;background:rgba(126,196,227,.15);display:grid;place-items:center;color:var(--st-source);flex:none}
.source-card .doc svg{width:17px;height:17px}
.source-card .ct b{font-size:14px;font-weight:600;display:block;color:var(--st-ink)}
.source-card .ct span{font-family:var(--data);font-size:12px;color:var(--st-ink-2)}

/* ledger rows — mono facts between 1px rules */
.ledger-rows{border-top:1px solid var(--st-rule)}
.ledger-row{display:flex;justify-content:space-between;gap:8px 24px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--st-rule);font-family:var(--data);font-size:13px;line-height:1.5;color:var(--st-ink-2)}
.ledger-row .lv{color:var(--st-ink);text-align:right;overflow-wrap:anywhere}
/* Source ledgers carry full URLs; without this a 55-character mono URL
   pushes the page sideways on a phone. */
@media(max-width:600px){.ledger-row{flex-direction:column;gap:2px}.ledger-row .lv{text-align:left}}

/* honesty box — admitted gaps; prominent, neutral, no alarm colors */
aside.honesty{border:2px solid var(--st-rule);background:var(--st-surface);border-radius:10px;padding:22px 24px}
aside.honesty h3{font-size:16px;font-weight:600;margin-bottom:8px}
aside.honesty p{font-size:14px;color:var(--st-ink-2);line-height:1.6}

/* mission — centered manifesto that lights up word by word as it is read.
   Armed only under .js (a script-less page shows plain lit text) and forced
   lit under reduced motion. */
.mission{padding:112px 0 0}
.mission-in{max-width:900px;margin:0 auto;text-align:center}
.mission p{font-weight:500;font-size:34px;line-height:1.4;letter-spacing:-0.01em;color:var(--st-ink)}
.mission .mw{display:inline}
.js .mission .mw{color:rgba(255,255,255,.22);transition:color .25s ease}
.js .mission .mw.lit{color:var(--st-ink)}
@media(max-width:760px){.mission{padding:64px 0 0}.mission p{font-size:24px}}

/* section heads */
.sec-head{max-width:680px;margin:0 auto 56px;text-align:center}
.sec-head .kicker{margin-bottom:16px}
.sec-head h2{font-size:40px;font-weight:500;letter-spacing:-0.03em;line-height:1.15}
.sec-head p{font-size:18px;color:var(--st-ink-2);margin-top:16px;line-height:1.55;max-width:62ch}
@media(max-width:760px){.sec-head h2{font-size:30px}}

/* feature rows — copy beside a gradient showcase card, alternating */
.features{padding:112px 0 56px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;padding:56px 0}
.frow.flip .ftext{order:2}
.ftext .kicker{margin-bottom:20px}
.ftext h2{font-size:40px;font-weight:500;letter-spacing:-0.03em;line-height:1.15}
.ftext p{font-size:18px;color:var(--st-ink-2);line-height:1.6;margin-top:20px;max-width:46ch}
.ftext .btn{margin-top:28px}
@media(max-width:860px){.features{padding:64px 0 32px}.frow{grid-template-columns:1fr;gap:28px;padding:36px 0}.frow.flip .ftext{order:0}.ftext h2{font-size:30px}}

/* showcase — the returned gradient fields, with the record printed on glass.
   The color sells; the content on the glass stays claims-disciplined: real
   exhibit turns, honest chips, demo-data caption. Radius steps `glass` (16)
   and `showcase` (24) are documented in DESIGN.md. */
.fcard{position:relative;border-radius:24px;overflow:hidden;min-height:440px;display:grid;place-items:center;padding:44px}
.g-blue{background:radial-gradient(125% 120% at 78% 12%,#ecd58a 0%,#7e8cf2 36%,#3a5bdc 68%,#16245f 100%)}
.g-violet{background:radial-gradient(125% 120% at 72% 16%,#f2cf6c 0%,#9b86f3 38%,#5a5ce4 66%,#241f6b 100%)}
.g-sunset{background:radial-gradient(130% 130% at 58% 8%,#ff8ad9 0%,#b06bf0 34%,#ff7a4d 76%,#3a1640 100%)}
figure.glass{position:relative;z-index:2;width:100%;max-width:460px;margin:0;background:rgba(10,13,18,0.68);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.13);border-radius:16px;padding:20px;box-shadow:0 30px 70px rgba(0,0,0,.4);text-align:left}
figure.glass figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin:16px -20px -20px;padding:10px 16px;border-top:1px solid rgba(255,255,255,.13);font-family:var(--data);font-size:12px;line-height:1.5;color:var(--st-ink-2)}
figure.glass figcaption .exno{color:var(--st-ink);font-weight:600;letter-spacing:.08em}
figure.glass .ledger-rows{border-top-color:rgba(255,255,255,.13)}
figure.glass .ledger-row{border-bottom-color:rgba(255,255,255,.13)}
@media(max-width:860px){.fcard{min-height:360px;padding:24px}figure.glass{padding:16px}figure.glass figcaption{margin:14px -16px -16px}}

/* proof strip — mechanisms instead of logos */
.proof{padding:56px 0 0}
.proof-in{max-width:860px;margin:0 auto}
.proof .kicker{text-align:center;margin-bottom:18px}

/* contact */
.contact{padding:112px 0;border-top:1px solid var(--st-rule)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
/* Grid and flex children default to min-width:auto, so one long unbroken
   string — a pasted URL, a German compound — pushes the whole page sideways. */
.contact-grid>*{min-width:0}
.form{min-width:0}
.form-note,.form-privacy,.dt{overflow-wrap:break-word}
@media(max-width:860px){.contact{padding:64px 0}.contact-grid{grid-template-columns:1fr;gap:32px}}
.contact h2{font-size:40px;font-weight:500;letter-spacing:-.03em;line-height:1.15}
.contact>.contact-grid p.lead{font-size:16px;color:var(--st-ink-2);margin-top:14px;line-height:1.6;max-width:44ch}
.contact .detail{display:flex;align-items:flex-start;gap:12px;margin-top:22px;font-size:14px;color:var(--st-ink);line-height:1.5}
.contact .detail .ic{width:36px;height:36px;border-radius:10px;border:1px solid var(--st-rule);background:var(--st-surface);display:grid;place-items:center;color:var(--st-source);flex:none}
.contact .detail .ic svg{width:17px;height:17px}
.contact .detail .dt{padding-top:7px}
.contact .detail .dm{font-family:var(--data);font-size:13px;color:var(--st-ink-2)}
.form{background:var(--st-surface);border:1px solid var(--st-rule);border-radius:10px;padding:30px;display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;font-weight:500;color:var(--st-ink)}
.field input,.field textarea{font:inherit;font-size:16px;color:#fff;background:var(--st-bg);border:1px solid var(--st-rule);border-radius:10px;padding:12px 14px;min-height:44px;transition:border-color .16s ease}
.field input::placeholder,.field textarea::placeholder{color:var(--st-ink-3)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--st-source);outline-offset:2px;border-color:rgba(126,196,227,.5)}
.field textarea{resize:vertical;min-height:96px;line-height:1.5}
/* A form message must never be read by its colour alone, and an error must
   never wear the success colour. Amber is the escalated/handoff token — a
   rejected form is a handoff back to the visitor, not an emergency, so no red. */
.form-note{font-size:13px;line-height:1.5;color:var(--st-ink-2);min-height:1em}
.form-note:empty{display:none}
.form-note.is-ok{color:var(--st-grounded)}
.form-note.is-error{color:var(--st-escalated);display:flex;gap:8px;align-items:flex-start}
.form-note.is-error::before{content:"—";flex:none;font-family:var(--data)}
.field-req{font-family:var(--data);font-size:11px;color:var(--st-ink-2);margin-left:6px;text-transform:none}
.form-privacy{font-size:13px;color:var(--st-ink-2);line-height:1.6;max-width:58ch}

/* cta — closing band with the quiet version of the hero's field */
.cta{padding:112px 0}
@media(max-width:760px){.cta{padding:64px 0}}
.cta-card{position:relative;overflow:hidden;border:1px solid var(--st-rule);border-radius:16px;background:var(--st-surface);padding:72px 40px;text-align:center}
.cta-bggrid{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(80% 80% at 50% 0%,#000,transparent 75%);-webkit-mask-image:radial-gradient(80% 80% at 50% 0%,#000,transparent 75%)}
.cta-halo{position:absolute;width:560px;height:300px;top:-150px;left:50%;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(126,196,227,.18),transparent 70%);pointer-events:none}
.cta-card>h2,.cta-card>p,.cta-card>.btns{position:relative;z-index:1}
.cta-card h2{font-size:44px;font-weight:500;letter-spacing:-0.03em;line-height:1.1}
.cta-card p{font-size:18px;color:var(--st-ink-2);margin:16px auto 0;max-width:52ch}
.cta-card .btns{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}
@media(max-width:760px){.cta-card{padding:48px 22px}.cta-card h2{font-size:30px}}

/* ---- inner marketing pages (product / solutions / resources) ---- */

/* page head — the quiet cousin of the hero: same type, no glow */
.page-head{padding:168px 0 56px;text-align:center;border-bottom:1px solid var(--st-rule)}
.page-head .kicker{margin-bottom:18px}
.page-head h1{font-size:64px;font-weight:500;line-height:1.05;letter-spacing:-0.04em;max-width:18ch;margin:0 auto}
.page-sub{font-size:18px;line-height:1.55;color:var(--st-ink-2);max-width:58ch;margin:20px auto 0}
.page-head .hero-cta{margin-top:28px}
@media(max-width:760px){.page-head{padding:140px 0 44px}.page-head h1{font-size:38px}.page-sub{font-size:16px}}

/* capability trio — three ruled cards, no icons, the sentence does the work */
.trio{padding:72px 0 40px}
.trio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{border:1px solid var(--st-rule);background:var(--st-surface);border-radius:10px;padding:26px 24px}
.tcard h2{font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.tcard p{font-size:16px;color:var(--st-ink-2);line-height:1.6;margin-top:10px}
@media(max-width:860px){.trio{padding:48px 0 24px}.trio-grid{grid-template-columns:1fr}}

/* how-it-works — a numbered ledger, not a diagram */
.steps{padding:56px 0}
.steps-h{font-size:28px;font-weight:500;letter-spacing:-.02em;text-align:center;margin-bottom:36px}
.steps-list{max-width:720px;margin:0 auto;list-style:none;counter-reset:step}
.steps-list li{counter-increment:step;display:grid;grid-template-columns:56px 1fr;gap:4px 18px;padding:20px 0;border-top:1px solid var(--st-rule);align-items:baseline}
.steps-list li::before{content:counter(step,decimal-leading-zero);grid-row:span 2;font-family:var(--data);font-size:20px;color:var(--st-ink-2)}
.steps-list li b{font-size:16px;font-weight:600}
.steps-list li span{font-size:15px;color:var(--st-ink-2);line-height:1.6}

/* FAQ — native disclosure, styled as ruled rows */
.faq{padding:72px 0}
.faq-in{max-width:760px;margin:0 auto}
.faq-h{font-size:28px;font-weight:500;letter-spacing:-.02em;margin-bottom:24px}
.faq-item{border-top:1px solid var(--st-rule)}
.faq-item:last-child{border-bottom:1px solid var(--st-rule)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:18px 0;font-size:16px;font-weight:500;color:var(--st-ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--data);font-size:18px;color:var(--st-ink-3);flex:none}
.faq-item[open] summary::after{content:"−"}
@media(hover:hover){.faq-item summary:hover{color:#fff}}
.faq-item p{font-size:16px;color:var(--st-ink-2);line-height:1.65;padding:0 0 20px;max-width:64ch}

/* page-card grid — hub listings and related cross-links */
.related{padding:16px 0 40px}
.related-h{font-size:28px;font-weight:500;letter-spacing:-.02em;margin-bottom:24px}
.hub{padding:56px 0 16px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pcard{position:relative;display:flex;flex-direction:column;gap:6px;border:1px solid var(--st-rule);background:var(--st-surface);border-radius:10px;padding:22px 24px;transition:background .16s ease,border-color .16s ease}
.pcard b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.pcard>span{font-size:14px;color:var(--st-ink-2);line-height:1.55;max-width:34ch}
.pcard-go{position:absolute;top:20px;right:20px;font-size:16px;color:var(--st-ink-3);transition:color .16s ease,transform .16s ease}
@media(hover:hover){.pcard:hover{background:var(--st-surface-2);border-color:var(--hair)}.pcard:hover .pcard-go{color:var(--st-ink);transform:translateX(2px)}}
@media(max-width:860px){.pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.pgrid{grid-template-columns:1fr}}
/* Opt-in registry treatment: a grid of PAGES (capability index, product and
   solutions hubs) reads as hairline rows with mono references instead of a
   wall of identical cards. Explicit class, not .hub — the blog and guides
   indexes are dated content listings and keep the card form, as do the
   related grids on product and solutions pages. */
.pgrid.registry{grid-template-columns:1fr 1fr;gap:0 56px;counter-reset:findex}
.pgrid.registry .pcard{counter-increment:findex;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:16px;row-gap:2px;border:0;background:none;border-radius:0;border-bottom:1px solid var(--st-rule);padding:18px 4px}
.pgrid.registry .pcard::before{content:counter(findex,decimal-leading-zero);grid-column:1;grid-row:1;font-family:var(--data);font-size:12px;letter-spacing:.08em;color:var(--st-ink-2)}
.pgrid.registry .pcard b{grid-column:2;grid-row:1}
.pgrid.registry .pcard>span:not(.pcard-go){grid-column:2;grid-row:2;max-width:none}
.pgrid.registry .pcard .pcard-go{position:static;grid-column:3;grid-row:1/span 2;align-self:center}
@media(hover:hover){.pgrid.registry .pcard:hover{background:rgba(255,255,255,.025);border-color:var(--st-rule)}}
@media(max-width:860px){.pgrid.registry{grid-template-columns:1fr}}

/* console screenshots — real screens in exhibit frames, @2x PNGs */
.console-shots{padding:56px 0 16px}
.cta-mid{padding:40px 0 8px}
.cta-mid .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px;text-align:center}
.cta-mid p{font-size:18px;color:var(--st-ink-2);margin:0}
.faq-more{text-align:center;margin-top:-32px;padding:0 24px 56px}
@media(max-width:760px){.cta-mid{padding:24px 0 0}.faq-more{margin-top:-16px}}
.shots-grid{display:grid;grid-template-columns:1fr;gap:24px;max-width:960px;margin:0 auto}
figure.exhibit.shot img{width:100%;height:auto;display:block}

/* use-case cards — keyword label over a benefit title over one sentence.
   Deliberately metric-free; numbers live only where they are true. */
.ucases{padding:72px 0 32px}
.ucgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.uc{border:1px solid var(--st-rule);background:var(--st-surface);border-radius:10px;padding:26px 24px}
.uc-label{display:block;font-family:var(--data);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--st-source);margin-bottom:10px}
.uc h2{font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.uc p{font-size:16px;color:var(--st-ink-2);line-height:1.6;margin-top:8px;max-width:52ch}
@media(max-width:760px){.ucases{padding:48px 0 24px}.ucgrid{grid-template-columns:1fr}}

/* solution proof — narrative, setup ledger, then the concrete KB contract */
.story{padding:72px 0}
.story-in{max-width:760px;margin:0 auto}
.story-in .kicker{margin-bottom:14px}
.story-h{font-size:34px;font-weight:500;letter-spacing:-.02em;line-height:1.25;max-width:22ch;margin-bottom:8px}
.story-p{font-size:18px;line-height:1.7;color:var(--st-ink-2);max-width:64ch;margin-top:18px}
.story-p:first-of-type{color:var(--st-ink)}
.kb-example{padding:56px 0}
.kbex-in>.page-sub{margin:0 0 24px;max-width:64ch}
.kbex-table-scroll{overflow-x:auto}
figure.exhibit.kbex table{width:100%;border-collapse:collapse;min-width:720px}
figure.exhibit.kbex th{padding:13px 16px;text-align:left;border-bottom:1px solid var(--st-rule);font-family:var(--data);font-size:13px;font-weight:500;color:var(--st-ink-2)}
figure.exhibit.kbex td{padding:15px 16px;border-bottom:1px solid var(--st-rule);font-size:15px;line-height:1.55;vertical-align:top}
figure.exhibit.kbex tbody tr:last-child td{border-bottom:0}
figure.exhibit.kbex th:first-child,figure.exhibit.kbex td:first-child{width:28%}
figure.exhibit.kbex th:last-child,figure.exhibit.kbex td:last-child{width:150px}
/* The comparison table is a fair-columns variant: the last column holds the
   competitor's prose, not the narrow autonomy chip the base rule was drawn
   for, so both vendor columns get equal width. */
figure.exhibit.kbex.cmp th:first-child,figure.exhibit.kbex.cmp td:first-child{width:20%}
figure.exhibit.kbex.cmp th:last-child,figure.exhibit.kbex.cmp td:last-child{width:40%}
.kbex-class{display:inline-block;border:1px solid var(--st-rule);border-radius:6px;padding:3px 8px;font-family:var(--data);font-size:12px;line-height:1.35;color:var(--st-ink-2);white-space:nowrap}
@media(max-width:760px){.story{padding:48px 0}.story-h{font-size:28px}.story-p{font-size:16px}.kb-example{padding:40px 0}
  figure.exhibit.kbex table{min-width:0}
  figure.exhibit.kbex thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  figure.exhibit.kbex tr{display:block;padding:14px 16px;border-bottom:1px solid var(--st-rule)}
  figure.exhibit.kbex tbody tr:last-child{border-bottom:0}
  figure.exhibit.kbex td{display:block;width:auto;padding:2px 0;border-bottom:0}
  figure.exhibit.kbex th:first-child,figure.exhibit.kbex td:first-child{width:auto}
  figure.exhibit.kbex th:last-child,figure.exhibit.kbex td:last-child{width:auto}
  figure.exhibit.kbex td:first-child{font-weight:600;padding-bottom:6px}
  figure.exhibit.kbex td[data-th]::before{content:attr(data-th);display:block;font-family:var(--data);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--st-ink-2);margin:6px 0 2px}
}

/* live demo section on the solutions hub — the widget floats bottom-right */
.demo-live{padding:56px 0 96px}

/* nav dropdown group heading — mono overline splitting panel sections */
.nav-dd-group{display:block;font-family:var(--data);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--st-ink-3);padding:10px 12px 4px}

/* nav dropdown — the desktop disclosure panels for Product/Solutions */
.nav-dd{position:relative}
.nav-dd-btn{font:inherit;font-size:14px;font-weight:500;color:var(--st-ink-2);padding:8px 16px;border:0;border-radius:64px;background:transparent;cursor:pointer;transition:color .16s ease,background .16s ease}
@media(hover:hover){.nav-dd-btn:hover{color:#fff;background:rgba(255,255,255,0.06)}}
.nav-dd-btn[aria-expanded=true]{color:#fff;background:rgba(255,255,255,0.06)}
.nav-dd-panel{visibility:hidden;opacity:0;transform:translateY(-4px);position:absolute;top:calc(100% + 14px);left:50%;translate:-50%;min-width:340px;background:var(--st-surface);border:1px solid var(--st-rule);border-radius:10px;padding:8px;box-shadow:0 24px 60px rgba(0,0,0,.5);transition:opacity .16s ease-out,transform .16s ease-out,visibility 0s .16s}
.nav-dd-panel.open{visibility:visible;opacity:1;transform:none;transition:opacity .16s ease-out,transform .16s ease-out,visibility 0s}
.nav-dd-panel a{display:block;padding:10px 12px;border-radius:6px}
.nav-dd-panel a b{display:block;font-size:14px;font-weight:600;color:var(--st-ink)}
.nav-dd-panel a span{display:block;font-size:13px;color:var(--st-ink-2);line-height:1.45;margin-top:1px}
@media(hover:hover){.nav-dd-panel a:hover{background:var(--st-surface-2)}}
.nav-dd-hub{border-bottom:1px solid var(--st-rule);margin-bottom:6px;padding-bottom:12px!important}
@media(max-width:768px){.nav-dd{display:none}}

/* legal / simple content pages */
.legal{max-width:760px;margin:0 auto;padding:160px 0 100px}
.legal .kicker{margin-bottom:16px}
.legal h1{font-size:40px;font-weight:500;letter-spacing:-.03em;line-height:1.1;margin-bottom:10px}
.legal .upd{font-family:var(--data);font-size:13px;color:var(--st-ink-2);margin-bottom:28px}
.legal p{font-size:16px;color:var(--st-ink);line-height:1.7;margin-bottom:16px;max-width:56ch}
.legal a{color:var(--st-source);text-decoration:underline;text-underline-offset:3px}
/* The legal pages carry Tailwind utility classes, but this layout loads no
   Tailwind — headings and lists rendered unstyled until these rules existed. */
.legal h2{font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--st-ink);margin:40px 0 12px;padding-top:20px;border-top:1px solid var(--st-rule)}
.legal ul{list-style:disc;padding-left:22px;margin-bottom:16px}
.legal li{font-size:16px;color:var(--st-ink);line-height:1.7;margin-bottom:8px;max-width:54ch}
.legal strong{font-weight:500;color:var(--st-ink)}
@media(max-width:760px){.legal{padding:130px 0 80px}.legal h1{font-size:30px}.legal h2{font-size:18px;margin-top:32px}}

/* blog & guide prose — the .legal column with article extras */
.post-date{display:block;font-family:var(--data);font-size:12px;color:var(--st-ink-3)}
.post-body h2{font-size:24px;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--st-ink);margin:40px 0 12px;padding-top:20px;border-top:1px solid var(--st-rule)}
.post-body h3{font-size:18px;font-weight:600;margin:28px 0 8px}
.post-body p{font-size:16px;color:var(--st-ink);line-height:1.7;margin-bottom:16px;max-width:64ch}
.post-body ul,.post-body ol{padding-left:22px;margin-bottom:16px}
.post-body li{font-size:16px;color:var(--st-ink);line-height:1.7;margin-bottom:8px;max-width:60ch}
.post-body a{color:var(--st-source);text-decoration:underline;text-underline-offset:3px}
.post-body blockquote{border-left:1px solid var(--st-rule);padding-left:18px;color:var(--st-ink-2);margin:0 0 16px}
.post-body code{font-family:var(--data);font-size:14px;background:var(--st-surface);border:1px solid var(--st-rule);border-radius:4px;padding:1px 6px}
.post-body pre{background:var(--st-surface);border:1px solid var(--st-rule);border-radius:10px;padding:16px;overflow-x:auto;margin-bottom:16px}
.post-body pre code{border:0;background:transparent;padding:0}
.post-body table{border-collapse:collapse;margin-bottom:16px;width:100%}
.post-body th,.post-body td{border:1px solid var(--st-rule);padding:8px 12px;font-size:15px;text-align:left}

/* footer */
footer{border-top:1px solid var(--st-rule);padding:56px 0 40px}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:48px}
.foot-brand{max-width:320px}
.foot-brand .brand{margin-bottom:14px}
.foot-brand p{font-size:14px;color:var(--st-ink-2);line-height:1.6}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:32px 40px;flex:1 1 720px;min-width:0}
.foot-col h3{font-size:12px;font-family:var(--data);letter-spacing:.1em;text-transform:uppercase;color:var(--st-ink-2);margin-bottom:16px;font-weight:500}
/* WCAG 2.2 AA 2.5.8 wants 24×24; these were 22px tall. The hit area grows,
   the type scale does not — padding absorbs the difference and the rhythm
   stays because the old margin is folded into it. */
.foot-col a{display:block;font-size:14px;color:var(--st-ink-2);padding:5px 0;margin-bottom:3px;transition:color .16s ease}
@media(hover:hover){.foot-col a:hover{color:#fff}}
.foot-bot{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--st-rule);font-family:var(--data);font-size:12px;line-height:1.6;color:var(--st-ink-2)}
/* Inline links inside running text keep their line, but claim a 24px box.
   A coarse pointer gets more room again — a fingertip is not a cursor. */
.foot-bot a,.dt a,.form-privacy a{display:inline-block;padding:4px 2px}
@media(pointer:coarse){
  .foot-col a{padding:8px 0}
  .foot-bot a,.dt a,.form-privacy a{padding:7px 4px}
  .nav-signin{padding:12px 14px}
}
@media(max-width:600px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.foot-cols{grid-template-columns:1fr}}

/* motion budget: fade/translate 6px, 160ms, ease-out, once per element on viewport entry */
/* Content is visible by default and the script opts into animating it. The
   inverse — arming in CSS and releasing in JS — meant a blocked or failed
   script left thirteen blocks at opacity 0 and the page effectively blank. */
.js .reveal{opacity:0;transform:translateY(6px);transition:opacity .16s ease-out,transform .16s ease-out}
.js .reveal.in{opacity:1;transform:none}

/* ---- focal sequence: the record assembling ----
   The product's claim is that an answer arrives with its source. The hero
   exhibit performs exactly that, once: the guest's question is the premise
   and is already on the page, then the answer lands, then the verdict, then
   — last and slowest — the source that makes the answer worth trusting.
   Nothing else on this surface moves this way. */
.js .record .xc-turn+.xc-turn .xc-msg,
.js .record .xc-turn+.xc-turn .st-chip,
.js .record .source-card{opacity:0;transform:translateY(8px)}
.js .record.written .xc-turn+.xc-turn .xc-msg{opacity:1;transform:none;transition:opacity .32s cubic-bezier(.16,1,.3,1),transform .32s cubic-bezier(.16,1,.3,1)}
.js .record.written .xc-turn+.xc-turn .st-chip{opacity:1;transform:none;transition:opacity .24s ease-out .22s,transform .24s ease-out .22s}
.js .record.written .source-card{opacity:1;transform:none;transition:opacity .38s cubic-bezier(.16,1,.3,1) .40s,transform .38s cubic-bezier(.16,1,.3,1) .40s}

/* Keyboard users land on a sticky nav in front of a long single page; without
   this the first real content is a dozen tab stops away. Visible only when
   focused, and it clears the nav rather than hiding behind it. */
/* Fixed and above the nav's own z-index:100 — an absolute one slid under the
   wordmark and became unreadable exactly when it was needed. */
.skip-link{position:fixed;left:50%;transform:translateX(-50%);top:-100px;z-index:200;background:var(--st-surface);color:var(--st-ink);border:1px solid var(--st-source);border-radius:10px;padding:12px 20px;font-size:14px;font-weight:500;transition:top .16s ease}
.skip-link:focus-visible{top:16px}

@media(prefers-reduced-motion:reduce){
  /* Entrances and decorative easing go; state feedback stays, because a
     hover or focus that no longer responds reads as a broken control. */
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .stw-typing i,[class*=marquee]{animation:none!important}
  .js .record .xc-msg,.js .record .st-chip,.js .record .source-card{opacity:1!important;transform:none!important}
  .hero-h .w,.fade-up{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}
  .js .mission .mw{color:var(--st-ink)!important;transition:none!important}
  html{scroll-behavior:auto!important}
  *{transition-duration:.01ms!important}
  .btn:hover{transform:none!important}
}