/* ============================================================
   KYE Protocol™ — buyer-first homepage (v3) styles.
   All color literals bound to design-system role tokens
   (design-system/tokens/color.json → assets/css/tokens.css).
   Every rule scoped under .home-v3 so it never overrides the
   canonical chrome (header/footer injected by components.js).
   ============================================================ */

.home-v3{--v3-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--v3-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace}
.home-v3{color:var(--text);font-family:var(--v3-sans);line-height:1.6}
.home-v3 h1,.home-v3 h2,.home-v3 h3,.home-v3 h4{line-height:1.15;margin:0;letter-spacing:-.02em}
.home-v3 p{margin:0}
.home-v3 a{color:inherit;text-decoration:none}
.home-v3 :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.home-v3 .v3-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.home-v3 .band{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* "Protocol, not product" band had no vertical padding, so its trailing CTA sat
   flush against the section border. Give the band breathing room and separate
   the CTA from the lede. */
.home-v3 .protoband{padding-top:56px;padding-bottom:56px}
.home-v3 .protoband-wrap{max-width:860px}
.home-v3 .protoband .btn{margin-top:26px}
/* KYE Inside band had NO CSS at all: no vertical padding (kicker touched the
   top border, CTA touched the bottom border) and no CTA spacing (button jammed
   against the lede). Mirror the protoband pattern so it sits in line with the
   rest of the landing. Horizontal padding comes from the co-class .container. */
.home-v3 .kyeinside{padding-top:64px;padding-bottom:64px}
.home-v3 .kyeinside-wrap{max-width:860px;margin:0 auto;text-align:center}
.home-v3 .kyeinside-kicker{font-family:var(--v3-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 14px}
.home-v3 .kyeinside-lede{color:var(--text-muted);font-size:18px;line-height:1.62;margin:14px 0 0}
.home-v3 .kyeinside .btn{margin-top:28px}
.home-v3 .eyebrow{font-family:var(--v3-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600}
.home-v3 .sec{padding:88px 0}
.home-v3 .sec-head{max-width:720px;margin:0 auto 56px;text-align:center}
.home-v3 .sec-head h2{font-size:clamp(28px,4vw,42px);margin:14px 0 16px}
.home-v3 .sec-head p{color:var(--text-muted);font-size:18px}
.home-v3 .mono{font-family:var(--v3-mono)}

/* utility (replaces inline styles for CSP cleanliness) */
.home-v3 .u-center{text-align:center}
.home-v3 .u-mt10{margin-top:10px}
.home-v3 .u-mt14{margin-top:14px}
.home-v3 .u-mt16{margin-top:16px}
.home-v3 .u-mt18{margin-top:18px}
.home-v3 .u-mt20{margin-top:20px}
.home-v3 .u-mt8{margin-top:8px}
.home-v3 .u-mb6{margin-bottom:6px}
.home-v3 .u-mb20{margin-bottom:20px}
.home-v3 .u-nomargin{margin:0}
.home-v3 .u-full{width:100%;justify-content:center}
.home-v3 .u-centre-row{justify-content:center;margin-top:16px}
.home-v3 .u-lede-note{color:var(--text-muted);font-size:14px;margin-bottom:20px}

/* buttons */
.home-v3 .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--v3-sans);font-size:15px;font-weight:600;padding:12px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;white-space:nowrap}
.home-v3 .btn-primary{background:var(--accent);color:var(--bg);box-shadow:var(--shadow-2)}
.home-v3 .btn-primary:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:var(--shadow-3)}
.home-v3 .btn-ghost{background:var(--bg);color:var(--text);border-color:var(--line);box-shadow:var(--shadow-1)}
.home-v3 .btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.home-v3 .btn-lg{padding:15px 28px;font-size:16px}

/* hero */
.home-v3 .v3-hero{padding:64px 0 72px}
/* ---- KYC → KYB → KYA → KYE ladder (hero band) ----
   Identity lineage (KYC/KYB/KYA) resolves to authority AT t=0 (KYE).
   VISIBLE-FIRST (§ mobile fail-safe): rungs render fully opaque and only the
   transform animates, so the band is never blank on first paint (or if a tool
   captures mid-animation). Reduced-motion drops all movement. Pure CSS — plays
   without home-v3.js. */
/* KYC→KYB→KYA→KYE morph — the last letter drops in then falls away, resolving to KYE at t=0 */
.home-v3 .kye-morph{margin:0 0 40px;text-align:center}
.home-v3 .km-stage{display:inline-flex;align-items:flex-start;justify-content:center;font-family:var(--font-mono);font-weight:800;letter-spacing:.01em;line-height:1;font-size:clamp(62px,17vw,132px);color:var(--text)}
.home-v3 .km-ky{display:inline-block}
.home-v3 .km-slot{position:relative;display:inline-block;width:.64em;height:1em;text-align:left}
.home-v3 .km-x{position:absolute;left:0;top:0;display:inline-block;will-change:transform,opacity}
.home-v3 .km-c,.home-v3 .km-b,.home-v3 .km-a{opacity:0}
.home-v3 .km-e{opacity:1;color:var(--accent)}
/* ™ is a trademark superscript, NOT accent decoration — mute it so it reads as
   a mark, not a purple glyph competing with the accent E (CEO 2026-07-18). */
.home-v3 .km-tm{font-family:var(--font-mono);font-weight:700;font-size:.22em;line-height:1;color:var(--text-muted);vertical-align:super;margin-left:.06em}
.home-v3 .km-caption{position:relative;min-height:2em;margin-top:16px}
.home-v3 .km-cap{position:absolute;left:0;right:0;top:0;font-size:clamp(16px,4.4vw,22px);font-weight:700;color:var(--text-muted)}
.home-v3 .km-cap .km-q{font-weight:600;opacity:.7}
.home-v3 .km-cap-c,.home-v3 .km-cap-b,.home-v3 .km-cap-a{opacity:0}
.home-v3 .km-cap-e{opacity:1;color:var(--text)}
.home-v3 .km-cap-e strong{color:var(--accent)}
/* Mute every ™ in the hero morph (caption + settle + lineage) to a small
   superscript mark — keep colour for meaning-bearing words only. */
.home-v3 .kye-morph .tm{color:var(--text-muted);font-size:.62em;vertical-align:super;font-weight:600}
.home-v3 .km-settle{margin:18px auto 0;max-width:640px;font-size:16px;line-height:1.5;color:var(--text-muted)}
.home-v3 .km-settle .accent{color:var(--accent);font-weight:700}
.home-v3 .km-settle em{font-style:normal;font-weight:700;color:var(--text)}
/* Per-rung explanations are the .km-caption cross-fade above (each of KYC/KYB/
   KYA/KYE appears + disappears in sync with its morphing letter). No static
   stacked lineage strip (CEO 2026-07-19 — "not stacked on each other"). */
@keyframes kmC{0%{opacity:0;transform:translateY(-.5em)}4%{opacity:1;transform:translateY(0)}15%{opacity:1;transform:translateY(0)}22%,100%{opacity:0;transform:translateY(.72em)}}
@keyframes kmB{0%,20%{opacity:0;transform:translateY(-.5em)}24%{opacity:1;transform:translateY(0)}35%{opacity:1;transform:translateY(0)}42%,100%{opacity:0;transform:translateY(.72em)}}
@keyframes kmA{0%,40%{opacity:0;transform:translateY(-.5em)}44%{opacity:1;transform:translateY(0)}55%{opacity:1;transform:translateY(0)}62%,100%{opacity:0;transform:translateY(.72em)}}
@keyframes kmE{0%,58%{opacity:0;transform:translateY(-.5em) scale(.9)}66%{opacity:1;transform:translateY(0) scale(1.14)}74%{transform:translateY(0) scale(1)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes kmGlow{0%,60%{opacity:0}72%{opacity:1}100%{opacity:.8}}
@keyframes kmLate{0%,64%{opacity:0}74%,100%{opacity:1}}
@keyframes kmCapC{0%{opacity:0}5%{opacity:1}17%{opacity:1}22%,100%{opacity:0}}
@keyframes kmCapB{0%,21%{opacity:0}26%{opacity:1}37%{opacity:1}42%,100%{opacity:0}}
@keyframes kmCapA{0%,41%{opacity:0}46%{opacity:1}57%{opacity:1}62%,100%{opacity:0}}
@keyframes kmCapE{0%,63%{opacity:0}72%,100%{opacity:1}}
@media(prefers-reduced-motion:no-preference){
  .home-v3 .km-c{animation:kmC 7.2s cubic-bezier(.5,.1,.3,1) forwards}
  .home-v3 .km-b{animation:kmB 7.2s cubic-bezier(.5,.1,.3,1) forwards}
  .home-v3 .km-a{animation:kmA 7.2s cubic-bezier(.5,.1,.3,1) forwards}
  .home-v3 .km-e{animation:kmE 7.2s cubic-bezier(.34,1.56,.64,1) forwards}
  .home-v3 .km-tm{opacity:0;animation:kmLate 7.2s ease forwards}
  .home-v3 .km-cap-c{animation:kmCapC 7.2s ease forwards}
  .home-v3 .km-cap-b{animation:kmCapB 7.2s ease forwards}
  .home-v3 .km-cap-a{animation:kmCapA 7.2s ease forwards}
  .home-v3 .km-cap-e{animation:kmCapE 7.2s ease forwards}
  .home-v3 .km-settle{opacity:0;animation:kmLate 7.2s ease forwards}
  .home-v3 .km-e::after{content:"";position:absolute;left:50%;top:50%;width:1.7em;height:1.7em;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 32%,transparent),transparent 70%);opacity:0;z-index:-1;animation:kmGlow 7.2s ease forwards}
}
.home-v3 .hero-cols{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.home-v3 .hero-cols>*{min-width:0}/* let the code window scroll internally instead of bleeding past the viewport */
.home-v3 .v3-hero h1{font-size:clamp(34px,5vw,56px);margin:18px 0 20px}
.home-v3 .v3-hero .lead{font-size:19px;color:var(--text-muted);max-width:560px}
.home-v3 .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 26px}
.home-v3 .hero-pills{display:flex;flex-wrap:wrap;gap:9px}
.home-v3 .pill{font-family:var(--v3-mono);font-size:12px;padding:6px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-2);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);font-weight:600}
.home-v3 .pill-plain{background:var(--bg);border:1px solid var(--line);color:var(--text-muted)}
@media(max-width:860px){.home-v3 .hero-cols{grid-template-columns:1fr;gap:40px}}

/* mac window */
.home-v3 .win{border-radius:14px;overflow:hidden;max-width:100%;box-shadow:var(--shadow-mega);border:1px solid var(--line);background:var(--bg)}
.home-v3 .win-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--surface-3);border-bottom:1px solid var(--line)}
.home-v3 .dot{width:11px;height:11px;border-radius:50%}
.home-v3 .dot.r{background:var(--danger)}.home-v3 .dot.y{background:var(--warning)}.home-v3 .dot.g{background:var(--success)}
.home-v3 .win-title{margin-left:8px;font-family:var(--v3-mono);font-size:12px;color:var(--text-muted)}
.home-v3 .code{background:var(--text);color:var(--bg);font-family:var(--v3-mono);font-size:12.5px;line-height:1.75;padding:18px;overflow-x:auto;max-width:100%;white-space:pre}
/* comment lines: a DIMMED version of the LIGHT foreground, not the dark
   --text-dim (which was ~3:1 on the near-black block — failed WCAG). */
.home-v3 .code .c{color:color-mix(in srgb,var(--bg) 62%,var(--text))}
.home-v3 .code .k{color:color-mix(in srgb,var(--accent) 45%,var(--bg))}
.home-v3 .code .s{color:color-mix(in srgb,var(--success) 55%,var(--bg))}
.home-v3 .code .f{color:color-mix(in srgb,var(--accent) 60%,var(--bg))}
.home-v3 .code .v3-n{color:color-mix(in srgb,var(--danger) 55%,var(--bg))}
.home-v3 .win-foot{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:12px 14px;border-top:1px solid var(--line);background:var(--bg)}

/* ============================================================
   Authority API live panel — the homepage center of gravity.
   The real /v1/authority/check surface, cycling three outcomes
   (allow / require-approval / deny), each with a signed Finality
   receipt. Token-driven, no hex; the request/decision/receipt
   render light-on-dark (readable) inside the mac window.
   ============================================================ */
.home-v3 .apiwin .win-title{color:var(--success)}
.home-v3 .api-body{background:var(--text)}
.home-v3 .api-sec{padding:14px 16px;border-bottom:1px solid color-mix(in srgb,var(--bg) 14%,var(--text));font-family:var(--v3-mono);font-size:12.5px;line-height:1.7;color:var(--bg)}
.home-v3 .api-sec:last-child{border-bottom:0}
.home-v3 .api-lab{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:7px;color:color-mix(in srgb,var(--bg) 60%,var(--text))}
.home-v3 .api-req{white-space:pre-wrap;overflow-wrap:anywhere}
.home-v3 .api-req .k{color:color-mix(in srgb,var(--accent) 62%,var(--bg))}
.home-v3 .api-req .s{color:color-mix(in srgb,var(--success) 60%,var(--bg))}
.home-v3 .api-verdict{display:flex;align-items:center;gap:10px;font-weight:700;font-size:13px;letter-spacing:.02em}
/* status dot rendered as a pseudo-element (no cross-file class) — inherits
   the verdict colour via currentColor, so it always matches allow/warn/deny. */
.home-v3 .api-verdict::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.home-v3 .v-allow{color:color-mix(in srgb,var(--success) 55%,var(--bg))}
.home-v3 .v-warn{color:color-mix(in srgb,var(--warning) 72%,var(--bg))}
.home-v3 .v-deny{color:color-mix(in srgb,var(--danger) 60%,var(--bg))}
.home-v3 .api-why{margin-top:6px;font-size:11.5px;line-height:1.5;color:color-mix(in srgb,var(--bg) 66%,var(--text))}
.home-v3 .api-receipt{font-size:11px;color:color-mix(in srgb,var(--bg) 60%,var(--text));word-break:break-all}
.home-v3 .api-receipt a{color:color-mix(in srgb,var(--accent) 62%,var(--bg));font-weight:600}
.home-v3 .api-fade{animation:apifade .5s ease}
@keyframes apifade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.home-v3 .api-fade{animation:none}}
/* Coloured tag chip — accent-tinted (never dead grey). Used for framework
   badges, capability chips, SDK langs, etc. across every card. The canonical
   global chip (styles.css `.tag,.pill,.badge…`) forces a grey fill with
   `!important`; this scoped homepage override matches that idiom at higher
   specificity so the buyer-first surface reads coloured, not dead grey.
   §04 token-driven, no hex. */
.home-v3 .tag{font-family:var(--v3-mono);font-size:11px;padding:4px 10px;border-radius:999px;font-weight:600;background:var(--accent-soft) !important;border:1px solid color-mix(in srgb,var(--accent) 26%,transparent) !important;color:var(--accent-2) !important}
/* Framework / capability chips rotate through the semantic role palette so the
   row reads as a spectrum of authority signals, not a wall of indigo (CEO:
   "no coloured tags"). CSS-only (no markup change) via :nth-of-type; every hue
   resolves to a design-system role token (§04) — accent-2 · success · info ·
   warning — no hex. Position 4n+1 keeps the base accent-2 above. */
.home-v3 .tags-row .tag:nth-of-type(4n+2){background:color-mix(in srgb,var(--success) 13%,var(--bg)) !important;border-color:color-mix(in srgb,var(--success) 32%,transparent) !important;color:var(--success) !important}
.home-v3 .tags-row .tag:nth-of-type(4n+3){background:color-mix(in srgb,var(--info) 13%,var(--bg)) !important;border-color:color-mix(in srgb,var(--info) 32%,transparent) !important;color:var(--info) !important}
.home-v3 .tags-row .tag:nth-of-type(4n+4){background:color-mix(in srgb,var(--warning) 14%,var(--bg)) !important;border-color:color-mix(in srgb,var(--warning) 34%,transparent) !important;color:var(--warning) !important}
/* Caption under a code/product window. PROSE — sans, centred, wraps; never
   monospace (mono prose auto-inflates on mobile and runs off-screen). */
.home-v3 .cap{font-family:var(--v3-sans);font-size:12px;color:var(--text-muted);margin-top:10px;text-align:center;overflow-wrap:anywhere}

/* reveal — FAIL-SAFE (§0.29): content is visible by DEFAULT. The hide-then-
   animate state applies ONLY after home-v3.js confirms it is running by adding
   .reveal-anim to the .home-v3 root. If that script fails to load (the Astro
   migration once dropped it → empty sections on mobile), .reveal-anim is never
   set and every .reveal block stays visible — production content is never
   hidden behind a script that might not run. */
.home-v3 .reveal{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
.home-v3.reveal-anim .reveal{opacity:0;transform:translateY(22px)}
.home-v3.reveal-anim .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.home-v3 .reveal,.home-v3.reveal-anim .reveal{opacity:1;transform:none;transition:none}}

/* cards */
.home-v3 .v3-grid{display:grid;gap:22px}
.home-v3 .g3{grid-template-columns:repeat(3,1fr)}
.home-v3 .g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.home-v3 .g3,.home-v3 .g2{grid-template-columns:1fr}}
.home-v3 .card{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow-1);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.home-v3 .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-3);border-color:var(--text-dim)}
.home-v3 .card h3{font-size:20px;margin:14px 0 8px}
.home-v3 .card p{color:var(--text-muted);font-size:15px}
.home-v3 .ic{width:44px;height:44px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-family:var(--v3-mono);font-weight:700;font-size:18px}
.home-v3 .glyph{font-family:var(--v3-mono);font-size:34px;font-weight:700;color:var(--accent);line-height:1}

/* ecosystem diagram */
.home-v3 .diagram{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow-2);overflow-x:auto}
.home-v3 .diagram svg{display:block;margin:0 auto;max-width:100%;height:auto}
.home-v3 .dnode{fill:var(--bg);stroke:var(--line);stroke-width:1.5}
.home-v3 .dnode-core{fill:var(--accent);stroke:var(--accent-2)}
.home-v3 .dnode-cat{fill:var(--surface-2);stroke:var(--line)}
.home-v3 .dlabel{font-family:var(--v3-sans);font-size:12.5px;fill:var(--text);font-weight:600}
.home-v3 .dlabel-core{fill:var(--bg)}
.home-v3 .dsub{font-family:var(--v3-mono);font-size:10px;fill:var(--text-dim)}
.home-v3 .dsub-core{fill:var(--accent-soft)}
.home-v3 .dline{stroke:var(--text-dim);stroke-width:1.5;fill:none}
.home-v3 .dcol-h{font-family:var(--v3-mono);font-size:11px;fill:var(--accent);letter-spacing:.08em;font-weight:700;text-transform:uppercase}

/* lifecycle */
.home-v3 .life{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:30px 22px;box-shadow:var(--shadow-2);overflow-x:auto;margin-bottom:34px}
.home-v3 .life svg{display:block;margin:0 auto;max-width:100%;height:auto}
.home-v3 .lpath{stroke:var(--accent);stroke-width:2.5;fill:none;stroke-linecap:round}
.home-v3 .lpath-draw{stroke-dasharray:var(--len,720);stroke-dashoffset:var(--len,720);transition:stroke-dashoffset 1.4s ease}
.home-v3 .life.in .lpath-draw{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.home-v3 .lpath-draw{stroke-dashoffset:0;transition:none}}
.home-v3 .lnode circle{fill:var(--bg);stroke:var(--accent);stroke-width:2.5}
.home-v3 .lnode text{font-family:var(--v3-mono);font-size:11px;fill:var(--text);font-weight:600}
.home-v3 .lnum{font-family:var(--v3-mono);font-size:12px;fill:var(--bg);font-weight:700}
.home-v3 .lnum-accent{fill:var(--accent)}
.home-v3 .lcircle-core{fill:var(--accent);stroke:var(--accent-2)}
.home-v3 .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media(max-width:900px){.home-v3 .steps{grid-template-columns:repeat(2,1fr)}}
.home-v3 .v3-step{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow-1)}
.home-v3 .v3-step .num{font-family:var(--v3-mono);font-size:12px;color:var(--accent);font-weight:700}
.home-v3 .v3-step h4{font-size:15px;margin:8px 0 6px}
.home-v3 .v3-step p{color:var(--text-muted);font-size:13px}

/* tabs */
.home-v3 .tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:34px}
.home-v3 .tab{font-family:var(--v3-sans);font-size:14px;font-weight:600;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--text-muted);cursor:pointer;transition:all .16s ease}
.home-v3 .tab:hover{border-color:var(--accent);color:var(--accent)}
.home-v3 .tab.on{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.home-v3 .panel{display:none}
.home-v3 .panel.on{display:block;animation:v3-fade .4s ease}
@keyframes v3-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.home-v3 .panel.on{animation:none}}
/* `.split` only ever rides a tab PANEL. Scope the grid to the ACTIVE panel so
   an inactive `panel split` falls through to `.panel{display:none}` and hides —
   an unscoped `.split{display:grid}` has equal specificity to `.panel{display:
   none}` but is declared later, so it won and left every panel visible (tabs
   appeared not to switch). */
.home-v3 .panel.on.split{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
@media(max-width:860px){.home-v3 .panel.on.split{grid-template-columns:1fr}}
.home-v3 .tile{border-radius:16px;padding:28px;display:flex;flex-direction:column;justify-content:center;min-height:200px}
.home-v3 .tile-indigo{background:linear-gradient(135deg,var(--accent-soft),color-mix(in srgb,var(--accent) 16%,var(--bg)));border:1px solid color-mix(in srgb,var(--accent) 24%,transparent)}
.home-v3 .tile-out{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--accent-2)}
.home-v3 .tile-lab{font-family:var(--v3-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:12px}

/* region grid */
.home-v3 .regions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.home-v3 .v3-region{font-family:var(--v3-mono);font-size:11px;text-align:center;padding:10px 6px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);color:var(--text-muted)}

/* illustrative dashboard (secondary, clearly captioned) */
.home-v3 .dash{background:var(--bg);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-3);overflow:hidden}
.home-v3 .dash-top{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.home-v3 .dash-top .tt{font-weight:700}
.home-v3 .demo-pill{font-family:var(--v3-mono);font-size:10px;letter-spacing:.1em;padding:3px 9px;border-radius:999px;background:var(--warning);color:var(--bg);font-weight:700}
.home-v3 .dash-body{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
@media(max-width:860px){.home-v3 .dash-body{grid-template-columns:1fr}}
.home-v3 .pane{background:var(--bg);padding:22px}
.home-v3 .pane h4{font-size:14px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.home-v3 .bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-family:var(--v3-mono);font-size:11px;color:var(--text-muted)}
.home-v3 .bar-row .lab{width:74px;flex-shrink:0}
.home-v3 .bar-track{flex:1;height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.home-v3 .bar-fill{height:100%;background:var(--accent);border-radius:999px;width:0;transition:width 1.1s ease}
.home-v3 .v3-ev-list{list-style:none;padding:0;margin:0}
.home-v3 .v3-ev-list li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--text-muted);padding:8px 0;border-bottom:1px dashed var(--line)}
.home-v3 .v3-ev-list li:last-child{border:0}
.home-v3 .v3-ev-list .ck{color:var(--success);font-family:var(--v3-mono);flex-shrink:0}
.home-v3 .pane-foot{font-family:var(--v3-mono);font-size:10.5px;color:var(--text-dim);margin-top:14px}
.home-v3 .kmark-sm{width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--bg);display:grid;place-items:center;font-family:var(--v3-mono);font-weight:700;font-size:13px}

/* bento */
.home-v3 .bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:860px){.home-v3 .bento{grid-template-columns:repeat(2,1fr)}}
.home-v3 .bento .card{margin:0}
.home-v3 .b-wide{grid-column:span 2}
.home-v3 .bignum{font-family:var(--v3-mono);font-size:56px;font-weight:700;color:var(--accent);line-height:1;letter-spacing:-.03em}
.home-v3 .statline{display:flex;flex-wrap:wrap;gap:22px}
.home-v3 .statline .s{flex:1;min-width:110px}
.home-v3 .statline .v3-n{font-family:var(--v3-mono);font-size:32px;font-weight:700;color:var(--text)}
.home-v3 .statline .l{font-size:12px;color:var(--text-muted)}

/* before/after */
.home-v3 .ba-before{border:1px solid color-mix(in srgb,var(--danger) 35%,var(--bg));background:color-mix(in srgb,var(--danger) 7%,var(--bg))}
.home-v3 .ba-after{border:1px solid color-mix(in srgb,var(--success) 35%,var(--bg));background:color-mix(in srgb,var(--success) 8%,var(--bg))}
.home-v3 .ba h3{font-size:17px;margin-bottom:12px}
.home-v3 .ba p{font-size:14px;color:var(--text-muted)}
.home-v3 .strike{text-decoration:line-through;color:var(--text-dim)}
.home-v3 .otag{display:inline-block;font-family:var(--v3-mono);font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px;margin-top:14px}
.home-v3 .otag-red{background:color-mix(in srgb,var(--danger) 14%,var(--bg));color:var(--danger)}
.home-v3 .otag-green{background:color-mix(in srgb,var(--success) 16%,var(--bg));color:var(--success)}
.home-v3 .v3-flow{margin-top:16px;display:flex;flex-direction:column;gap:0}
.home-v3 .v3-flow .fn{font-family:var(--v3-mono);font-size:11px;color:var(--text-muted);padding:7px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.home-v3 .v3-flow .fa{text-align:center;color:var(--accent);font-size:12px;line-height:1.2;margin:2px 0}

/* trust readiness */
.home-v3 .ready{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px}
@media(max-width:860px){.home-v3 .ready{grid-template-columns:repeat(2,1fr)}}
.home-v3 .rcard{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow-1)}
.home-v3 .rcard .st{font-family:var(--v3-mono);font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;display:inline-block;margin-bottom:10px}
.home-v3 .st-prog{background:var(--warning-soft);color:var(--warning)}
.home-v3 .st-live{background:var(--success-soft);color:var(--success)}
.home-v3 .rcard .name{font-size:15px;font-weight:600}

/* pricing */
.home-v3 .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.home-v3 .tiers{grid-template-columns:1fr}}
.home-v3 .v3-tier{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:var(--shadow-1);display:flex;flex-direction:column}
.home-v3 .v3-tier.v3-rec{border:2px solid var(--accent);box-shadow:var(--shadow-3);position:relative}
.home-v3 .rec-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-family:var(--v3-mono);font-size:10px;letter-spacing:.1em;background:var(--accent);color:var(--bg);padding:5px 14px;border-radius:999px;font-weight:700}
.home-v3 .v3-tier .tname{font-size:20px;font-weight:700;margin-bottom:4px}
.home-v3 .v3-tier .tsub{color:var(--text-muted);font-size:14px;margin-bottom:20px}
.home-v3 .v3-tier ul{list-style:none;padding:0;margin:0 0 22px;flex:1}
.home-v3 .v3-tier li{font-size:14px;color:var(--text-muted);padding:7px 0;display:flex;gap:9px}
.home-v3 .v3-tier li::before{content:"✓";color:var(--success);font-weight:700}

/* roi calc */
.home-v3 .roi{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow-2);margin-top:36px}
.home-v3 .roi-label{display:inline-block;font-family:var(--v3-mono);font-size:11px;font-weight:700;padding:4px 11px;border-radius:999px;background:var(--warning-soft);color:var(--warning);margin-bottom:18px}
.home-v3 .roi-inputs{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-bottom:20px}
@media(max-width:640px){.home-v3 .roi-inputs{grid-template-columns:1fr}}
.home-v3 .roi-in label{display:block;font-size:13px;color:var(--text-muted);margin-bottom:8px;font-weight:500}
.home-v3 .roi-in .val{font-family:var(--v3-mono);color:var(--accent);font-weight:700}
.home-v3 input[type=range]{width:100%;accent-color:var(--accent)}
.home-v3 .roi-out{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center}
.home-v3 .roi-out .v3-big{font-family:var(--v3-mono);font-size:34px;font-weight:700;color:var(--text)}
.home-v3 .roi-out .note{font-size:12px;color:var(--text-dim);margin-top:8px}

/* diagnostic */
.home-v3 .diag{max-width:760px;margin:0 auto;background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:var(--shadow-2)}
.home-v3 .diag-q{margin-bottom:22px}
.home-v3 .diag-q .ql{font-size:14px;font-weight:600;margin-bottom:10px}
.home-v3 .opts{display:flex;flex-wrap:wrap;gap:8px}
.home-v3 .opt{font-family:var(--v3-sans);font-size:13px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--text-muted);cursor:pointer;transition:all .14s ease}
.home-v3 .opt:hover{border-color:var(--accent)}
.home-v3 .opt.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-2);font-weight:600}
.home-v3 .diag-res{display:none;margin-top:24px;padding:22px;border-radius:14px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)}
.home-v3 .diag-res.on{display:block;animation:v3-fade .4s ease}
.home-v3 .diag-res h4{font-size:17px;margin-bottom:10px}
.home-v3 .diag-res .blocks{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.home-v3 .diag-res .blk{font-family:var(--v3-mono);font-size:11px;padding:5px 11px;border-radius:8px;background:var(--bg);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);color:var(--accent-2);font-weight:600}
.home-v3 .diag-body{color:var(--text-muted);font-size:14px}
.home-v3 .subtext{font-size:12px;color:var(--text-dim);font-style:italic}

.home-v3 .mt{margin-top:34px}
/* footnote / caption under a card. PROSE — sans, readable, wraps. Monospace
   here inflated on mobile and ran off-screen; sans keeps normal reading width. */
.home-v3 .works{font-family:var(--v3-sans);font-size:13.5px;line-height:1.5;color:var(--text-muted);margin-top:14px}
.home-v3 .mini-code{font-family:var(--v3-mono);font-size:11.5px;background:var(--text);color:var(--bg);border-radius:10px;padding:12px 14px;overflow-x:auto;max-width:100%;margin-top:14px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.home-v3 .mini-code .c{color:color-mix(in srgb,var(--bg) 62%,var(--text))}
.home-v3 .mini-code .s{color:color-mix(in srgb,var(--success) 55%,var(--bg))}
.home-v3 .tags-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}

/* command-center: real governed captures wrapper spacing */
.home-v3 .cc-captures{margin-bottom:28px}

/* ============================================================
   "See the governance, live" — real, provenance-recorded surface
   captures (§0.35 / §13). Previously SHIPPED WITH NO CSS: a raw
   desktop screenshot dropped onto the page read as "a screenshot of
   another page". This block frames each capture inside a browser
   window (titlebar + dots) so it reads as an intentional, verifiable
   product shot, and styles the tab switcher to match the surface.
   Scoped under .home-v3, token-driven, no hex.
   ============================================================ */
/* browser-window frame around every capture */

/* ============================================================
   Landing-spine (Authority · Evidence · Finality pillars).
   The block is injected by the canonical landing-spine generator
   (do not hand-edit the injected block). These rules render it
   natively on-brand inside the v3 flow — token-driven, higher
   specificity than the injected block's own defaults. No hex.
   ============================================================ */
.home-v3 .lsp{max-width:1180px;margin:0 auto;padding:88px 24px;border-top:1px solid var(--line)}
.home-v3 .lsp .h-section{font-size:clamp(28px,4vw,42px);letter-spacing:-.02em;max-width:820px}
.home-v3 .lsp-lede{max-width:760px;margin:14px 0 30px;color:var(--text-muted);font-size:18px;line-height:1.55}
.home-v3 .lsp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:880px){.home-v3 .lsp-grid{grid-template-columns:1fr}}
.home-v3 .lsp-pillar{border:1px solid var(--line);border-top:3px solid var(--chip-c,var(--accent));border-radius:16px;padding:26px 24px 22px;background:var(--bg);box-shadow:var(--shadow-1);display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.home-v3 .lsp-pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow-3)}
.home-v3 .lsp-pillar-head{display:flex;gap:12px;align-items:flex-start}
.home-v3 .lsp-pillar-ico{font-size:28px;color:var(--chip-c,var(--accent))}
.home-v3 .lsp-pillar-name{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.home-v3 .lsp-pillar-q{margin:2px 0 0;color:var(--text-muted);font-size:14px}
.home-v3 .lsp-pillar-outcome{margin:16px 0 10px;font-size:16px;line-height:1.5;font-weight:600;color:var(--text)}
.home-v3 .lsp-pillar-points{margin:0 0 18px;padding-left:18px;color:var(--text-muted);font-size:14px;line-height:1.55}
.home-v3 .lsp-pillar-points li{margin:5px 0}
.home-v3 .lsp-pillar-link{margin-top:auto;font-weight:600;text-decoration:none;color:var(--chip-c,var(--accent))}
.home-v3 .lsp-pillar-link:hover{text-decoration:underline}