:root {
      --paper: #f7f7f5;
      --ink: #11110f;
      --muted: #71716b;
      --line: rgba(17,17,15,.105);
      --soft-line: rgba(17,17,15,.065);
      --panel: #1b1b19;
      --lime: #9da9ff;
      --max: 1240px;
      --ease: cubic-bezier(.22,.61,.36,1);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin:0; color:var(--ink); background:var(--paper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height:1.45; -webkit-font-smoothing: antialiased; }
    button, a { font: inherit; }
    a { color: inherit; text-decoration:none; }
    button { color:inherit; cursor:pointer; }
    .container { max-width:var(--max); margin:0 auto; padding:0 32px; }
    .eyebrow { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:550; }
    .eyebrow .dot { width:7px; height:7px; border-radius:var(--pill); background:var(--ink); }
    .button { display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 18px; border:1px solid transparent; border-radius:var(--pill); transition:transform .2s var(--ease), background .2s ease, color .2s ease, border-color .2s ease; white-space:nowrap; font-size:14px; font-weight:540; }
    .button:hover { transform:translateY(-2px); }
    .button.primary { background:var(--ink); color:#fff; }
    .button.primary:hover { background:#30302d; }
    .button.secondary { border-color:var(--line); background:rgba(255,255,255,.2); }
    .button.secondary:hover { background:#eee; }
    .arrow { font-size:18px; line-height:0; margin-left:8px; margin-top:-2px; }

    /* Navigation */
    .site-header { position:fixed; z-index:30; top:0; left:0; width:100%; transition:background .25s ease, border .25s ease, backdrop-filter .25s ease; }
    .site-header.is-scrolled { background:rgba(247,247,245,.83); border-bottom:1px solid var(--soft-line); backdrop-filter:blur(14px); }
    .nav { height:76px; display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:24px; }
    .brand { display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:650; letter-spacing:-.04em; width:max-content; }
    .brand-mark { width:20px; height:20px; display:grid; place-items:center; border:1.5px solid currentColor; border-radius:50%; position:relative; }
    .brand-mark:after { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
    .nav-links { display:flex; align-items:center; gap:26px; }
    .nav-item { background:none; border:0; padding:6px 0; font-size:13px; color:#41413d; transition:color .2s ease; }
    .nav-item:hover, .nav-item[aria-expanded="true"] { color:var(--ink); }
    .nav-actions { justify-self:end; display:flex; gap:18px; align-items:center; font-size:13px; }
    .nav-actions .button { height:36px; padding:0 15px; font-size:13px; }
    .contact { color:#41413d; transition:color .2s ease; }
    .contact:hover { color:var(--ink); }
    .mega { position:absolute; top:68px; left:50%; width:min(680px, calc(100vw - 32px)); transform:translate(-50%, -8px); padding:22px 24px 24px; background:rgba(252,252,250,.97); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:0 18px 50px rgba(0,0,0,.07); opacity:0; visibility:hidden; transition:opacity .22s var(--ease), transform .24s var(--ease), visibility .24s; }
    .mega.is-open { opacity:1; visibility:visible; transform:translate(-50%, 0); }
    .mega-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px 22px; }
    .mega-link { padding:10px 8px; border-radius:var(--r-sm); transition:background .18s ease; }
    .mega-link:hover { background:#f1f1ee; }
    .mega-link strong { display:block; font-size:13px; font-weight:600; margin-bottom:2px; }
    .mega-link span { display:block; color:var(--muted); font-size:11px; line-height:1.35; }
    .menu-button { display:none; background:none; border:0; padding:6px 0; }
    .menu-bars, .menu-bars:before { display:block; width:21px; height:1px; background:var(--ink); content:""; transition:transform .2s ease; }
    .menu-bars:before { transform:translateY(-6px); }
    .mobile-nav { display:none; }

    /* Hero */
    .hero { min-height:980px; padding:177px 0 75px; overflow:hidden; position:relative; }
    .hero:before { content:""; position:absolute; width:860px; height:520px; top:250px; left:50%; transform:translateX(-50%); background:radial-gradient(ellipse, rgba(224,227,207,.28), transparent 66%); pointer-events:none; }
    .hero-content { position:relative; z-index:1; text-align:center; }
    .announcement { display:inline-flex; align-items:center; gap:9px; padding:6px 10px 6px 8px; border:1px solid var(--line); background:rgba(255,255,255,.3); border-radius:var(--pill); color:#484843; font-size:12px; opacity:0; transform:translateY(12px); animation:reveal .65s .13s var(--ease) forwards; }
    .announcement b { padding:2px 5px; border-radius:var(--r-xs); background:var(--ink); color:#fff; font-size:10px; letter-spacing:.06em; }
    .hero h1 { max-width:970px; margin:30px auto 19px; font-size:clamp(57px, 6.45vw, 84px); font-weight:480; line-height:.98; letter-spacing:-.073em; opacity:0; transform:translateY(22px); animation:reveal .85s .26s var(--ease) forwards; }
    .headline-line { display:block; }
    .word-wrap { position:relative; display:inline-grid; vertical-align:top; min-width:7.4ch; height:1em; overflow:hidden; text-align:left; }.word-wrap.wide-words { min-width:0; max-width:100%; text-align:center; }.word-wrap.wide-words .rotating-word { white-space:nowrap; text-align:center; }
    .rotating-word { grid-area:1 / 1; display:block; transition:opacity .34s var(--ease), transform .36s var(--ease), filter .32s ease; letter-spacing:-.07em; }
    .rotating-word.leaving { opacity:0; transform:translateY(-.42em); filter:blur(1.5px); }
    .rotating-word.entering { opacity:0; transform:translateY(.42em); filter:blur(1.5px); }
    .hero-copy { max-width:600px; margin:0 auto; color:var(--muted); font-size:16px; line-height:1.55; opacity:0; transform:translateY(16px); animation:reveal .7s .42s var(--ease) forwards; }
    .hero-actions { display:flex; justify-content:center; gap:9px; margin:28px 0 0; opacity:0; transform:translateY(16px); animation:reveal .7s .54s var(--ease) forwards; }
    .demo-stage { width:min(1080px, calc(100vw - 32px)); height:460px; margin:86px auto 0; position:relative; perspective:1300px; opacity:0; transform:translateY(66px); animation:demo-enter 1.08s .67s var(--ease) forwards; }
    .demo-window { position:absolute; inset:0; overflow:hidden; border:1px solid rgba(255,255,255,.11); border-radius:var(--r-md) var(--r-md) 0 0; background:#1c1c1a; box-shadow:0 28px 64px rgba(30,30,26,.17), 0 2px 0 rgba(0,0,0,.07); transition:transform .25s var(--ease); transform:rotateX(1deg); will-change:transform; }
    .window-top { display:flex; align-items:center; height:43px; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.47); font-size:11px; }
    .traffic { display:flex; gap:6px; }
    .traffic i { display:block; height:9px; width:9px; border-radius:50%; background:#f0645d; }
    .traffic i:nth-child(2) { background:#e1b557; }.traffic i:nth-child(3) { background:#65bf65; }
    .window-title { position:absolute; left:50%; transform:translateX(-50%); letter-spacing:.02em; }
    .window-tabs { margin-left:auto; display:flex; gap:15px; }
    .window-tabs span:first-child { color:#f5f5f3; }
    .demo-surface { position:relative; height:calc(100% - 43px); }
    .demo-panel { position:absolute; inset:0; opacity:0; pointer-events:none; transform:translateY(8px) scale(.985); transition:opacity .7s var(--ease), transform .7s var(--ease); }
    .demo-panel.active { opacity:1; pointer-events:auto; transform:none; }
    .code-panel { display:grid; grid-template-columns:190px 1fr; height:100%; color:#d8d8d3; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size:13px; line-height:1.72; }
    .file-tree { border-right:1px solid rgba(255,255,255,.09); padding:21px 17px; color:#878780; font-size:11px; }
    .file-tree .project { color:#e9e9e4; margin-bottom:13px; }.file-tree p { margin:0 0 5px; }.file-tree .indent { padding-left:13px; }.file-tree .selected { margin:7px -7px; padding:4px 7px; border-radius:var(--r-xs); background:#30302d; color:#fff; }
    .code-main { padding:23px 0; overflow:hidden; }
    .code-line { display:flex; min-height:22px; }.line-no { width:55px; flex:0 0 55px; padding-right:18px; text-align:right; color:#5d5d58; user-select:none; }.code { white-space:pre; }.pink{color:#e89ab5}.blue{color:#91c7f5}.mint{color:#a6d7b8}.yellow{color:#e9ce88}.gray{color:#91918b}.white{color:#e6e6e1}
    .terminal { position:absolute; right:24px; bottom:23px; width:260px; padding:14px 15px; background:#121211; border:1px solid rgba(255,255,255,.11); border-radius:8px; color:#b8eeb3; font-size:10px; line-height:1.72; box-shadow:0 14px 30px rgba(0,0,0,.22); }
    .terminal span { color:#777771; }.terminal .cursor { display:inline-block; width:5px; height:11px; margin-left:4px; vertical-align:-2px; background:#b8eeb3; animation:blink 1.05s steps(2) infinite; }
    .visual-panel { display:grid; grid-template-columns:1fr .78fr; gap:1px; background:rgba(255,255,255,.07); height:100%; }
    .model-canvas { position:relative; overflow:hidden; background:linear-gradient(135deg,#2c2c27,#161615 74%); }
    .model-canvas:before, .model-canvas:after { content:""; position:absolute; width:310px; height:310px; border:1px solid rgba(223,255,119,.24); border-radius:50%; left:50%; top:48%; transform:translate(-50%,-50%); }.model-canvas:after { width:185px; height:185px; border-color:rgba(255,255,255,.18); }
    .orb { position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); width:120px; height:120px; border-radius:50%; background:radial-gradient(circle at 35% 28%,#eeffd1 0 3%,#dfff77 18%,#819249 52%,#3d4530 75%); box-shadow:0 0 46px rgba(223,255,119,.15); }
    .measure { position:absolute; color:rgba(255,255,255,.52); font:10px "SFMono-Regular",monospace; letter-spacing:.04em; }.measure.top { top:28px; left:30px; }.measure.bottom { bottom:27px; left:30px; }
    .model-info { padding:31px 28px; background:#20201e; color:#e5e5df; }.model-info .badge { display:inline-block; color:#151512; background:var(--lime); border-radius:var(--pill); padding:4px 8px; font-size:9px; font-weight:700; letter-spacing:.08em; }.model-info h3 { margin:23px 0 6px; font-size:28px; font-weight:470; letter-spacing:-.05em; line-height:1; }.model-info > p { margin:0; color:#a3a39d; font-size:12px; line-height:1.5; }.metric-list { margin-top:43px; border-top:1px solid rgba(255,255,255,.1); }.metric { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.1); color:#989891; font:10px "SFMono-Regular",monospace; }.metric b { color:#f0f0ea; font-weight:500; }
    .api-panel { display:grid; grid-template-columns:1fr .9fr; height:100%; color:#e3e3dd; font-family:"SFMono-Regular",Consolas,monospace; }
    .request { padding:25px 27px; border-right:1px solid rgba(255,255,255,.1); }.response { padding:25px 27px; background:#20201e; }.api-label { display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid rgba(255,255,255,.1); font:10px Inter,sans-serif; color:#95958f; }.method { color:#131311; background:#dfff77; padding:3px 6px; font-weight:700; font-size:9px; border-radius:var(--r-xs); }.api-code { color:#c8c8c1; font-size:12px; line-height:1.8; }.api-code .key { color:#9cc9ef; }.api-code .value { color:#b7d5a5; }.response .api-code { color:#a6d7b8; }.api-status { color:#a6d7b8; }
    .demo-switcher { position:absolute; z-index:3; display:flex; gap:5px; left:50%; bottom:17px; transform:translateX(-50%); padding:5px; border:1px solid rgba(255,255,255,.11); background:rgba(25,25,23,.77); backdrop-filter:blur(8px); border-radius:var(--pill); }.demo-switcher button { border:0; background:transparent; color:#aaa9a2; padding:6px 10px; border-radius:var(--pill); font-size:10px; }.demo-switcher button.active { color:#20201d; background:#f3f3ee; }

    /* Sections */
    main { overflow:hidden; }
    .section { padding:142px 0; }.section-top { max-width:570px; }.section h2 { margin:15px 0 16px; font-size:clamp(43px,5vw,65px); line-height:.99; letter-spacing:-.07em; font-weight:480; }.section-intro { color:var(--muted); max-width:490px; font-size:15px; line-height:1.55; }
    .capability { display:grid; grid-template-columns:.73fr 1.27fr; gap:86px; align-items:center; }.capability-visual { min-height:590px; position:relative; overflow:hidden; background:#dadbd4; border-radius:var(--r-xs); }.capability-visual:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 63% 36%,rgba(255,255,255,.95),rgba(255,255,255,.1) 26%, transparent 49%), linear-gradient(135deg,#dee0da,#b7bbb0); }.capability-visual:after { content:""; position:absolute; width:125%; height:34%; left:-12%; bottom:6%; border-radius:50%; background:rgba(20,20,18,.84); filter:blur(22px); transform:rotate(-7deg); }
    .cap-orb { position:absolute; z-index:1; width:270px; height:270px; border-radius:50%; left:51%; top:42%; transform:translate(-50%,-50%); background:radial-gradient(circle at 32% 28%,#fff 0 3%,#edf4d8 13%,#accb70 35%,#25302a 70%,#0f1411); box-shadow:30px 45px 48px rgba(23,27,21,.34); }.cap-caption { position:absolute; z-index:2; left:27px; bottom:26px; color:#f6f6f1; font-size:11px; line-height:1.45; }.cap-caption span { display:block; margin-bottom:5px; color:#bfc1b8; text-transform:uppercase; letter-spacing:.08em; font-size:9px; }
    .cap-list { margin-top:44px; border-top:1px solid var(--line); }.cap-row { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; }.cap-row span { color:var(--muted); font-size:12px; }.cap-row b { font-weight:550; }
    .media-section { padding-top:80px; }.media-grid { display:grid; grid-template-columns:1.35fr .7fr .9fr; grid-template-rows:280px 210px; gap:11px; margin-top:56px; }.media { overflow:hidden; position:relative; border-radius:var(--r-xs); background:#d8dad4; transition:transform .4s var(--ease); }.media:hover { transform:scale(1.012); }.media.large { grid-row:span 2; background:linear-gradient(130deg,#252a24,#869886); }.media.dark { background:#20211e; }.media.clay { background:#c9a68b; }.media.light { background:#e4e4df; }
    .media-label { position:absolute; z-index:2; left:17px; bottom:14px; color:#fff; font-size:11px; }.media-label span { display:block; color:rgba(255,255,255,.67); font-size:9px; text-transform:uppercase; letter-spacing:.09em; margin-bottom:3px; }
    .sphere-stack { position:absolute; width:170px; height:170px; border-radius:50%; left:49%; top:48%; transform:translate(-50%,-50%); background:radial-gradient(circle at 31% 27%,#f0ffd4 0 5%,#cbe98b 17%,#64735c 49%,#273127 71%); box-shadow:35px 35px 0 rgba(22,28,23,.27); }.sphere-stack:after { content:""; position:absolute; inset:-44px 39px 69px -39px; border:1px solid rgba(255,255,255,.44); border-radius:50%; transform:rotate(-28deg); }
    .code-shape { position:absolute; inset:28px 22px; color:#d1d4ca; font:9px/1.85 "SFMono-Regular",monospace; }.code-shape b { color:#dfff77; font-weight:400; }.clay-shape { position:absolute; width:130px; height:110px; border-radius:54% 46% 48% 52% / 60% 42% 58% 40%; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-12deg); background:linear-gradient(130deg,#ead6bc,#be8967 47%,#7e493a); box-shadow:35px 32px 28px rgba(85,48,35,.24); }.light-lines { position:absolute; width:200px; height:200px; border:1px solid #92928b; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); }.light-lines:before,.light-lines:after { content:""; position:absolute; inset:34px; border:1px solid #92928b; border-radius:50%; }.light-lines:after { inset:73px; background:#22221f; border:0; }
    .developer { display:grid; grid-template-columns: .66fr 1.34fr; gap:90px; align-items:start; }.developer .section-top { padding-top:48px; }.dev-window { min-height:476px; overflow:hidden; background:#1c1c1a; border:1px solid rgba(255,255,255,.1); border-radius:var(--r-md); box-shadow:0 28px 55px rgba(0,0,0,.12); }.dev-window-top { height:49px; padding:0 17px; display:flex; align-items:center; border-bottom:1px solid rgba(255,255,255,.1); color:#8c8c84; font:11px "SFMono-Regular",monospace; }.dev-window-top strong { color:#e4e4de; font-weight:400; margin-left:13px; }.dev-body { display:grid; grid-template-columns:1fr .88fr; min-height:426px; font:11px/1.8 "SFMono-Regular",Consolas,monospace; }.dev-request { padding:28px 27px; color:#dadad2; }.dev-response { padding:28px 26px; color:#b6b6af; border-left:1px solid rgba(255,255,255,.1); background:#20201e; }.dev-heading { display:flex; justify-content:space-between; padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:17px; color:#909088; font:10px Inter,sans-serif; }.tag { font:9px "SFMono-Regular",monospace; border:1px solid rgba(255,255,255,.15); color:#e2e2da; padding:2px 5px; border-radius:var(--r-xs); }.dev-response .answer { color:#c3e6b8; margin-top:14px; }.dev-response .dim { color:#6f6f69; }.command-prompt { color:#dfff77; }
    .stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:65px; }.stat { padding:33px 25px 35px 0; border-right:1px solid var(--line); }.stat + .stat { padding-left:27px; }.stat:last-child { border-right:0; }.stat-num { font-size:clamp(46px,5vw,70px); line-height:.9; letter-spacing:-.08em; font-weight:490; }.stat-label { margin-top:14px; color:var(--muted); font-size:13px; }
    .quote { max-width:820px; margin:0 auto; padding:152px 0; text-align:center; }.quote blockquote { margin:0; font-size:clamp(30px,4vw,52px); line-height:1.06; letter-spacing:-.065em; font-weight:480; }.quote figcaption { margin-top:28px; color:var(--muted); font-size:12px; }.quote figcaption b { color:var(--ink); font-weight:600; }
    .final-cta { padding:150px 0 137px; text-align:center; border-top:1px solid var(--line); }.final-cta h2 { max-width:760px; margin:14px auto 19px; font-size:clamp(53px,6vw,78px); line-height:.98; letter-spacing:-.075em; font-weight:480; }.final-cta p { max-width:450px; color:var(--muted); margin:0 auto 27px; }.final-cta .hero-actions { opacity:1; transform:none; animation:none; }
    footer { padding:38px 0 23px; border-top:1px solid var(--line); }.footer-grid { display:grid; grid-template-columns:1.7fr repeat(4,1fr); gap:27px; padding-bottom:75px; }.footer-about p { max-width:190px; margin:16px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }.footer-col h3 { margin:0 0 14px; font-size:11px; font-weight:600; }.footer-col a { display:block; width:max-content; margin:0 0 9px; color:var(--muted); font-size:12px; transition:color .2s ease; }.footer-col a:hover { color:var(--ink); }.footer-bottom { display:flex; justify-content:space-between; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }.footer-bottom div { display:flex; gap:16px; }
    .reveal { opacity:0; transform:translateY(28px); transition:opacity .78s var(--ease), transform .78s var(--ease); }.reveal.visible { opacity:1; transform:none; }.reveal .stagger { opacity:0; transform:translateY(18px); transition:opacity .65s var(--ease), transform .65s var(--ease); }.reveal.visible .stagger { opacity:1; transform:none; }.reveal.visible .stagger:nth-child(2) { transition-delay:.08s }.reveal.visible .stagger:nth-child(3) { transition-delay:.16s }.reveal.visible .stagger:nth-child(4) { transition-delay:.24s }
    /* Cirvix systems */
    .status-pill { display:inline-flex; align-items:center; gap:7px; padding:5px 8px; border:1px solid var(--line); border-radius:var(--pill); color:#50504b; background:rgba(255,255,255,.34); font:10px "SFMono-Regular",Consolas,monospace; }.status-dot { width:6px; height:6px; border-radius:50%; background:#22a773; box-shadow:0 0 0 0 rgba(34,167,115,.4); animation:status-pulse 2.1s infinite; }.cmd-trigger { display:inline-flex; align-items:center; gap:6px; color:#595953; background:transparent; border:0; font-size:12px; }.keycap { padding:2px 5px; border:1px solid var(--line); border-radius:var(--r-xs); color:#686861; background:#f1f1ed; font:10px "SFMono-Regular",Consolas,monospace; }
    .hero.spotlight { --x:50%; --y:42%; }.hero.spotlight:after { content:""; pointer-events:none; position:absolute; inset:0; background:radial-gradient(560px circle at var(--x) var(--y), rgba(36,167,112,.095), transparent 70%); transition:background .12s ease; }.hero .container,.demo-stage { position:relative; z-index:1; }.hero .announcement { font-family:"SFMono-Regular",Consolas,monospace; letter-spacing:.025em; }.hero .announcement b { background:#167c57; }.hero h1 { max-width:1100px; }.telemetry { position:absolute; z-index:4; padding:8px 10px; border:1px solid rgba(255,255,255,.13); border-radius:var(--r-sm); color:#cfcfc8; background:rgba(25,25,23,.9); box-shadow:0 10px 25px rgba(0,0,0,.13); font:10px "SFMono-Regular",Consolas,monospace; opacity:0; animation:telemetry-in .7s 1.25s var(--ease) forwards, telemetry-float 5.5s 2s ease-in-out infinite; }.telemetry strong { color:#b9ebbb; font-weight:500; }.telemetry-left { left:-53px; top:126px; }.telemetry-right { right:-53px; bottom:64px; animation-delay:1.42s,2.4s; }.sandbox-toggle { display:flex; justify-content:space-between; align-items:center; margin:0 26px 17px; padding:9px 10px; border:1px solid rgba(255,255,255,.1); border-radius:var(--r-sm); background:#242421; color:#aaa9a1; font:10px "SFMono-Regular",Consolas,monospace; }.rule-toggle { position:relative; width:31px; height:17px; border:0; border-radius:var(--pill); background:#4d4d47; transition:background .25s ease; }.rule-toggle:after { content:""; position:absolute; width:11px; height:11px; left:3px; top:3px; border-radius:50%; background:#e4e4dc; transition:transform .25s var(--ease); }.rule-toggle.on { background:#19845d; }.rule-toggle.on:after { transform:translateX(14px); }.verdict { display:inline-flex; align-items:center; gap:6px; padding:3px 5px; border:1px solid rgba(255,255,255,.1); border-radius:var(--r-xs); color:#f0b3aa; font-size:9px; }.verdict:before { content:""; width:5px; height:5px; border-radius:50%; background:#de655a; }.verdict.hold { color:#f0d793; }.verdict.hold:before { background:#e5b556; }
    .architecture { padding-top:70px; }.architecture-header { display:flex; justify-content:space-between; align-items:end; gap:30px; }.architecture-header .section-intro { margin-bottom:10px; }.flow { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; min-height:390px; margin-top:60px; }.flow-rail { position:absolute; z-index:0; inset:57px 11% auto; width:78%; height:205px; overflow:visible; }.flow-rail path { fill:none; stroke:rgba(17,17,15,.18); stroke-width:1; }.flow-rail .signal { stroke:#199368; stroke-width:2; stroke-dasharray:13 200; animation:dash 3.4s linear infinite; }.flow-rail .signal.second { animation-delay:-1.7s; }.flow-col { position:relative; z-index:1; }.flow-kicker { display:block; margin:0 0 13px; color:var(--muted); font:10px "SFMono-Regular",Consolas,monospace; letter-spacing:.05em; text-transform:uppercase; }.flow-node { min-height:66px; margin-bottom:11px; padding:14px 15px; border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(250,250,248,.75); transition:transform .3s var(--ease), border-color .3s ease, background .3s ease; }.flow-node:hover { transform:translateY(-3px); border-color:rgba(25,147,104,.48); background:#fafaf7; }.flow-node b { display:block; font-size:13px; font-weight:570; }.flow-node span { display:block; margin-top:3px; color:var(--muted); font-size:11px; }.flow-core { margin-top:35px; padding:21px 18px 17px; background:#20201e; color:#e8e8e0; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.1); box-shadow:0 20px 35px rgba(0,0,0,.08); }.flow-core h3 { margin:0 0 17px; font-size:17px; font-weight:500; letter-spacing:-.04em; }.flow-core div { display:flex; align-items:center; gap:7px; padding:7px 0; border-top:1px solid rgba(255,255,255,.1); color:#acaca4; font-size:10px; }.flow-core i { display:block; width:5px; height:5px; background:#b7edb9; border-radius:50%; animation:status-pulse 2.4s infinite; }
    .bento-section { padding-top:80px; }.bento { display:grid; grid-template-columns:1.2fr .8fr .8fr; grid-template-rows:260px 220px; gap:11px; margin-top:55px; }.bento-card { position:relative; overflow:hidden; padding:21px; border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(255,255,255,.28); transition:transform .32s var(--ease), border-color .32s ease, box-shadow .32s ease; }.bento-card:hover { transform:translateY(-4px); border-color:rgba(25,147,104,.4); box-shadow:0 16px 26px rgba(0,0,0,.05); }.bento-card h3 { margin:0; font-size:16px; letter-spacing:-.035em; font-weight:550; }.bento-card p { margin:5px 0 0; color:var(--muted); font-size:11px; }.bento-latency { grid-column:span 2; }.latency-bars { display:flex; align-items:end; gap:9px; height:120px; margin-top:32px; }.latency-bar { flex:1; min-width:18px; background:linear-gradient(to top,#18815b,#74c99c); border-radius:var(--r-xs) var(--r-xs) 0 0; transform-origin:bottom; animation:bar-rise .85s var(--ease) both; }.latency-bar:nth-child(2){height:48%;animation-delay:.08s}.latency-bar:nth-child(3){height:75%;animation-delay:.16s}.latency-bar:nth-child(4){height:38%;animation-delay:.24s}.latency-bar:nth-child(5){height:62%;animation-delay:.32s}.latency-bar:nth-child(6){height:30%;animation-delay:.4s}.latency-bar:nth-child(7){height:53%;animation-delay:.48s}.latency-bar:first-child{height:67%}.latency-labels { display:flex; justify-content:space-between; color:#76766f; font:9px "SFMono-Regular",Consolas,monospace; }.copy-card { background:#20201e; color:#eee; }.copy-card p { color:#aaa9a1; }.copy-code { margin-top:28px; color:#cae7c1; font:10px/1.55 "SFMono-Regular",Consolas,monospace; }.copy-btn { position:absolute; right:15px; bottom:14px; border:1px solid rgba(255,255,255,.16); border-radius:var(--r-xs); background:transparent; color:#e4e4dd; padding:6px 8px; font-size:10px; transition:background .2s ease; }.copy-btn:hover { background:rgba(255,255,255,.1); }.rule-card { grid-column:span 1; }.rule-state { display:flex; align-items:center; justify-content:space-between; margin-top:36px; padding:13px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font:10px "SFMono-Regular",Consolas,monospace; }.rule-state b { color:#177d59; }.deploy-card { grid-column:span 2; }.deploy-options { display:flex; gap:8px; margin-top:31px; }.deploy-option { flex:1; padding:13px 10px; border:1px solid var(--line); border-radius:var(--r-xs); color:#484842; font-size:11px; transition:background .25s ease, transform .25s var(--ease); }.deploy-option:hover { background:#eff2eb; transform:translateY(-2px); }.deploy-option span { display:block; color:var(--muted); font:9px "SFMono-Regular",Consolas,monospace; margin-bottom:6px; }
    .security-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:55px; border:1px solid var(--line); background:var(--line); }.security-item { min-height:176px; padding:21px; background:var(--paper); transition:background .28s ease, transform .28s var(--ease); }.security-item:hover { background:#eef3ed; transform:translateY(-2px); }.security-check { display:grid; place-items:center; width:21px; height:21px; margin-bottom:26px; border:1px solid rgba(25,147,104,.48); border-radius:50%; color:#157d57; font-size:12px; }.security-item h3 { margin:0 0 8px; font-size:14px; font-weight:570; letter-spacing:-.025em; }.security-item p { margin:0; max-width:250px; color:var(--muted); font-size:11px; line-height:1.5; }.disclosure { margin-top:14px; padding:15px 17px; border-left:2px solid #19885f; color:#5f5f58; background:rgba(25,147,104,.045); font-size:12px; line-height:1.5; }
    .pricing-head { display:flex; justify-content:space-between; align-items:end; gap:25px; }.segmented { display:flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:var(--pill); }.segmented button { border:0; border-radius:var(--pill); background:transparent; padding:7px 11px; color:var(--muted); font-size:11px; transition:background .25s ease,color .25s ease; }.segmented button.active { color:#fff; background:var(--ink); }.billing { display:flex; align-items:center; gap:8px; margin-top:36px; color:var(--muted); font-size:12px; }.billing-toggle { width:36px; height:20px; padding:0; border:0; border-radius:var(--pill); background:#9b9b94; transition:background .25s ease; }.billing-toggle:after { content:""; display:block; width:14px; height:14px; margin-left:3px; border-radius:50%; background:#fff; transition:transform .25s var(--ease); }.billing-toggle.annual { background:#19885f; }.billing-toggle.annual:after { transform:translateX(16px); }.save { color:#157d57; padding:3px 6px; border-radius:var(--pill); background:#e2f4e9; font:9px "SFMono-Regular",Consolas,monospace; }.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:22px; }.price-card { display:flex; flex-direction:column; min-height:350px; padding:24px; border:1px solid var(--line); border-radius:var(--r-sm); transition:transform .3s var(--ease),border-color .3s ease,box-shadow .3s ease; }.price-card:hover { transform:translateY(-4px); border-color:rgba(25,147,104,.46); }.price-card.featured { background:#f0f5ee; border-color:rgba(25,147,104,.45); box-shadow:0 18px 38px rgba(25,147,104,.08); }.price-card h3 { margin:0; font-size:16px; }.price-card > p { min-height:36px; color:var(--muted); font-size:11px; }.price { margin:25px 0 20px; font-size:42px; line-height:.9; letter-spacing:-.065em; }.price small { margin-left:3px; color:var(--muted); font-size:12px; letter-spacing:0; }.price-features { margin:0 0 24px; padding:0; list-style:none; color:#585852; font-size:11px; line-height:2.1; }.price-features li:before { content:"✓"; margin-right:8px; color:#16835b; }.price-card .button { width:100%; margin-top:auto; }
    .faq-layout { display:grid; grid-template-columns:.7fr 1.3fr; gap:90px; }.faq-list { border-top:1px solid var(--line); }.faq-item { border-bottom:1px solid var(--line); }.faq-question { display:flex; justify-content:space-between; gap:20px; width:100%; padding:18px 0; border:0; background:transparent; text-align:left; font-size:14px; font-weight:550; }.faq-question span { color:#1a8a60; font-size:19px; font-weight:350; transition:transform .3s var(--ease); }.faq-item.open .faq-question span { transform:rotate(45deg); }.faq-answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); }.faq-answer > div { overflow:hidden; }.faq-answer p { max-width:600px; margin:0; padding:0 0 0; color:var(--muted); font-size:12px; line-height:1.6; opacity:0; transform:translateY(-6px); transition:opacity .25s ease,transform .25s ease,padding .35s var(--ease); }.faq-item.open .faq-answer { grid-template-rows:1fr; }.faq-item.open .faq-answer p { opacity:1; transform:none; padding-bottom:18px; }.uptime { display:flex; align-items:center; gap:10px; margin-top:28px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font:10px "SFMono-Regular",Consolas,monospace; }.uptime .status-dot { width:7px; height:7px; }
    .modal-backdrop { position:fixed; z-index:70; inset:0; display:grid; place-items:center; padding:20px; background:rgba(17,17,15,.28); backdrop-filter:blur(5px); opacity:0; visibility:hidden; transition:opacity .25s ease,visibility .25s; }.modal-backdrop.open { opacity:1; visibility:visible; }.dialog { width:min(570px,100%); max-height:min(700px,calc(100vh - 40px)); overflow:auto; padding:27px; border:1px solid var(--line); border-radius:var(--r-sm); background:#f8f8f5; box-shadow:0 28px 75px rgba(0,0,0,.18); transform:translateY(18px) scale(.985); transition:transform .35s var(--ease); }.modal-backdrop.open .dialog { transform:none; }.dialog-top { display:flex; justify-content:space-between; gap:20px; }.dialog h2 { margin:0; font-size:25px; letter-spacing:-.05em; font-weight:520; }.dialog p { margin:7px 0 0; color:var(--muted); font-size:12px; }.close-modal { width:29px; height:29px; border:1px solid var(--line); border-radius:50%; background:transparent; font-size:18px; line-height:1; }.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }.field { display:grid; gap:6px; }.field.full { grid-column:span 2; }.field label { color:#56564f; font-size:11px; }.field input,.field select { width:100%; height:38px; padding:0 10px; border:1px solid var(--line); border-radius:var(--r-xs); outline:none; background:#fff; color:var(--ink); font:12px Inter,sans-serif; transition:border-color .2s ease,box-shadow .2s ease; }.field input:focus,.field select:focus { border-color:#279e71; box-shadow:0 0 0 3px rgba(25,147,104,.1); }.contact-form .button { grid-column:span 2; margin-top:5px; }.form-success { display:none; margin-top:22px; padding:15px; border-radius:var(--r-sm); color:#176a4c; background:#e2f4e9; font-size:12px; }.form-success.show { display:block; animation:reveal .45s var(--ease) both; }/* --- Auth dialog (account.js): social doors + the two-step email path --- */
.auth-social { display:grid; gap:10px; margin-top:22px; }
.auth-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:44px; padding:0 14px; border:1px solid var(--line); border-radius:var(--r-xs); background:#fff; color:var(--ink); font:12px Inter,sans-serif; letter-spacing:-.01em; cursor:pointer; transition:border-color .2s ease,background .2s ease; }
.auth-btn:hover { border-color:var(--ink); background:#f6f6f2; }
.auth-btn:disabled { opacity:.55; cursor:default; }
.auth-btn:focus-visible { outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(0,0,0,.12); }
/* THE HIDDEN OVERRIDE. .auth-btn/.auth-social/.auth-divider all declare an
   explicit display, which OUTRANKS the UA stylesheet's [hidden]{display:none}.
   The consequence, observed on production: the social buttons carried the
   hidden attribute while remaining fully visible, so an unconfigured
   deployment showed "Continue with Google/GitHub" — and clicking one left
   for the control plane only to bounce straight back with an unavailable
   error, reading as "social sign-in is fake". One explicit rule restores
   what the hidden attribute promises. */
.auth-btn[hidden], .auth-social[hidden], .auth-divider[hidden] { display:none; }
/* A button that reads as a link. Used for "Forgot your password?", which has
   to be a <button> because it performs an action rather than navigating —
   an <a href="#"> there would put a junk entry in the history. Note the
   [hidden] rule beside it, for the same reason .auth-btn needs one: the
   explicit display would otherwise outrank the UA stylesheet. */
.link-button { padding:0; border:0; background:transparent; color:var(--ink); font:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.link-button:hover { color:#1a8a60; }
.link-button:disabled { opacity:.55; cursor:default; }
.link-button:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(0,0,0,.12); border-radius:2px; }
[data-account-forgot][hidden], [data-account-forgot-note][hidden] { display:none; }
.auth-spin { display:inline-block; width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--ink); border-radius:50%; animation:auth-spin .7s linear infinite; }
@keyframes auth-spin { to { transform:rotate(360deg); } }
.auth-divider { display:flex; align-items:center; gap:10px; margin:18px 0 2px; color:var(--muted); font-size:10px; }
.auth-divider:before,.auth-divider:after { content:""; flex:1; border-top:1px solid var(--soft-line); }
.auth-email-form { margin-top:14px; }
.auth-email-line { grid-column:1 / -1; display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--soft-line); border-radius:var(--r-xs); background:#fff; font-size:12px; }
.auth-email-label { color:var(--muted); font-size:10px; }
.auth-email-value { flex:1; font-weight:600; overflow-wrap:anywhere; }
.auth-change { padding:0; border:0; background:none; color:var(--muted); font:10px Inter,sans-serif; text-decoration:underline; cursor:pointer; }
.auth-back { display:inline-block; margin-top:18px; padding:0; border:0; background:none; color:var(--muted); font:11px Inter,sans-serif; text-decoration:underline; cursor:pointer; }
.auth-back:focus-visible,.auth-change:focus-visible { outline:1px solid var(--ink); outline-offset:2px; }
.auth-foot { margin:18px 0 0; color:var(--muted); font-size:11.5px; }
.auth-terms { margin:12px 0 0; }
.command-dialog { width:min(510px,100%); padding:10px; }.command-input { width:100%; height:40px; border:0; outline:0; background:transparent; font-size:15px; }.command-list { border-top:1px solid var(--line); }.command-list button { display:flex; justify-content:space-between; width:100%; padding:10px 8px; border:0; border-radius:var(--r-xs); background:transparent; text-align:left; font-size:12px; transition:background .18s ease; }.command-list button:hover { background:#ecece7; }.command-list span { color:var(--muted); font:10px "SFMono-Regular",Consolas,monospace; }.toast { position:fixed; z-index:80; left:50%; bottom:24px; padding:9px 12px; border-radius:var(--r-sm); background:#20201e; color:#f2f2ed; font-size:11px; box-shadow:0 12px 24px rgba(0,0,0,.16); transform:translate(-50%,20px); opacity:0; pointer-events:none; transition:opacity .25s ease,transform .25s var(--ease); }.toast.show { opacity:1; transform:translate(-50%,0); }
    .cirvix-metrics { padding-top:42px; padding-bottom:55px; }.cirvix-final { display:block; }.cirvix-final .hero-actions { opacity:1; transform:none; animation:none; }
    /* Awake: a colder, more technical monochrome system */
    body { font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif; letter-spacing:-.012em; }.eyebrow,.announcement,.status-pill,.keycap,.cmd-trigger,.flow-kicker,.uptime { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; }.mint{color:#bdc8ff}.terminal{color:#b9c5ff}.command-prompt{color:#9da9ff}.status-dot{background:#626fe8;box-shadow:0 0 0 0 rgba(98,111,232,.4)}.status-pill{color:#555968}.hero .announcement b{background:#4b56d6}.hero.spotlight:after{background:radial-gradient(590px circle at var(--x) var(--y),rgba(105,119,255,.08),transparent 70%)}.telemetry strong{color:#c1c9ff}.telemetry{border-color:rgba(160,174,255,.2)}.traffic i:nth-child(3){background:#6873e8}.api-status,.response .api-code{color:#bdc8ff}.word-wrap.wide-words{padding-bottom:.075em}.word-wrap.wide-words:after{content:"";position:absolute;z-index:-1;left:5%;right:5%;bottom:.035em;height:2px;background:linear-gradient(90deg,#656ce8,#b48be5,#656ce8);transform:scaleX(.18);transform-origin:center;opacity:0;transition:transform .6s var(--ease),opacity .6s ease}.word-wrap.wide-words:hover:after,body.is-awake .word-wrap.wide-words:after{transform:scaleX(1);opacity:.85}.flow-rail .signal{stroke:#6672ec}.flow-node:hover{border-color:rgba(97,111,232,.48)}.flow-core i{background:#9da9ff}.bento-card:hover,.price-card:hover{border-color:rgba(97,111,232,.45)}.latency-bar{background:linear-gradient(to top,#515bd5,#b7c2ff)}.rule-toggle.on{background:#5965dc}.rule-state b,.security-check{color:#4d59d4}.security-check{border-color:rgba(82,95,219,.48)}.disclosure{border-left-color:#606ce5;background:rgba(96,108,229,.045)}.billing-toggle.annual{background:#5863dd}.save{color:#4c58cf;background:#ebedff}.price-card.featured{background:#f3f4ff;border-color:rgba(97,111,232,.42);box-shadow:0 18px 38px rgba(75,86,214,.08)}.price-features li:before{color:#5863dd}.faq-question span{color:#5964dc}.field input:focus,.field select:focus{border-color:#6370e8;box-shadow:0 0 0 3px rgba(98,111,232,.1)}.model-canvas:before{border-color:rgba(157,169,255,.28)}.model-canvas:after{border-color:rgba(218,222,255,.2)}.orb{background:radial-gradient(circle at 35% 28%,#f5f6ff 0 3%,#c6cdff 18%,#747fc6 51%,#40486f 76%);box-shadow:0 0 46px rgba(135,149,255,.2)}
    .boot-screen{position:fixed;z-index:100;inset:0;overflow:hidden;background:#f7f7f5;pointer-events:none}.boot-screen:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,247,245,0),#f7f7f5 30%,#f7f7f5 100%);transform:translateX(-110%);animation:boot-wipe 1.4s 1.05s var(--ease) forwards}.boot-side{position:absolute;left:clamp(25px,6vw,108px);top:50%;display:flex;align-items:center;gap:16px;transform:translateY(-50%);color:#11110f}.boot-glyph{position:relative;width:42px;height:42px;border:1.5px solid currentColor;border-radius:50%;animation:boot-orbit .95s .08s cubic-bezier(.37,.01,.24,1) both}.boot-glyph:before,.boot-glyph:after{content:"";position:absolute;left:50%;top:50%;border-radius:var(--pill);transform:translate(-50%,-50%)}.boot-glyph:before{width:10px;height:10px;background:currentColor;animation:boot-core .7s .45s var(--ease) both}.boot-glyph:after{width:62px;height:1px;background:linear-gradient(90deg,transparent,#626fe8,transparent);animation:boot-beam .9s .2s var(--ease) both}.boot-wordmark{font-size:16px;font-weight:600;letter-spacing:-.07em;opacity:0;transform:translateX(-10px);animation:boot-name .5s .65s var(--ease) forwards}.boot-meta{position:absolute;left:clamp(29px,6vw,112px);bottom:40px;color:#858580;font:10px "SFMono-Regular",Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;opacity:0;animation:boot-name .5s .82s var(--ease) forwards}.boot-screen.leaving{animation:boot-fade .65s .9s var(--ease) forwards}.side-sigil{position:fixed;z-index:20;left:18px;top:50%;display:flex;align-items:center;gap:8px;transform:translate(-80px,-50%) rotate(-90deg);transform-origin:left center;color:#7b7b75;font:9px "SFMono-Regular",Consolas,monospace;letter-spacing:.13em;text-transform:uppercase;opacity:0;transition:opacity .4s ease,transform .7s var(--ease)}.side-sigil:before{content:"";width:18px;height:1px;background:#6874ea;box-shadow:6px 0 0 #afb8ff}.side-sigil.awake{opacity:1;transform:translate(0,-50%) rotate(-90deg)}
    body:not(.is-awake) .site-header{opacity:0;transform:translateY(-14px)}body.is-awake .site-header{animation:wake-nav .7s .12s var(--ease) both}body:not(.is-awake) .announcement,body:not(.is-awake) .hero h1,body:not(.is-awake) .hero-copy,body:not(.is-awake) .hero-actions,body:not(.is-awake) .demo-stage{animation-play-state:paused}.code-main .code-line{opacity:0;transform:translateX(-7px)}body.is-awake .code-main .code-line{animation:code-line-in .5s var(--ease) forwards}.code-main .code-line:nth-child(1){animation-delay:1.08s}.code-main .code-line:nth-child(3){animation-delay:1.17s}.code-main .code-line:nth-child(4){animation-delay:1.25s}.code-main .code-line:nth-child(5){animation-delay:1.33s}.code-main .code-line:nth-child(6){animation-delay:1.41s}.code-main .code-line:nth-child(7){animation-delay:1.49s}.code-main .code-line:nth-child(8){animation-delay:1.57s}.code-main .code-line:nth-child(9){animation-delay:1.65s}.code-main .code-line:nth-child(10){animation-delay:1.73s}.code-main .code-line:nth-child(12){animation-delay:1.81s}.code-main{position:relative}.code-main:after{content:"";position:absolute;z-index:3;left:55px;right:24px;top:0;height:1px;background:linear-gradient(90deg,transparent,#98a5ff,transparent);box-shadow:0 0 12px rgba(152,165,255,.65);opacity:0;animation:code-scan 3.6s 2.2s ease-in-out infinite}.code-line.is-active{background:linear-gradient(90deg,rgba(108,120,255,.13),transparent 68%);transition:background .4s ease}.file-tree{animation:sidebar-awake .7s 1.05s var(--ease) both}.terminal{opacity:0;animation:terminal-awake .7s 1.95s var(--ease) forwards}.demo-window{animation:surface-breathe 7s 2.4s ease-in-out infinite}.demo-window:hover{animation-play-state:paused}
    /* Pure monochrome / engineered motion */
    :root { --paper:#fff; --ink:#000; --muted:#646464; --line:rgba(0,0,0,.13); --soft-line:rgba(0,0,0,.075); --panel:#0a0a0a; --lime:#fff; }
    body { background:#fff; color:#000; }.site-header.is-scrolled { background:rgba(255,255,255,.9); }.hero:before,.hero.spotlight:after { background:radial-gradient(ellipse at center,rgba(0,0,0,.035),transparent 68%); }.hero h1 { max-width:1150px; font-size:clamp(58px,6.2vw,82px); font-weight:470; line-height:.97; letter-spacing:-.08em; }.hero-fixed,.hero-dynamic-line { display:block; }.hero-dynamic-line { display:flex; justify-content:center; align-items:baseline; gap:.16em; margin-top:.02em; white-space:nowrap; }.word-wrap.wide-words { min-width:12ch; padding:0; text-align:left; }.word-wrap.wide-words .rotating-word { text-align:left; }.word-wrap.wide-words:after { left:0; right:0; bottom:.04em; height:1.5px; background:#000; opacity:.78; }.hero .announcement b,.status-dot,.rule-toggle.on,.billing-toggle.annual { background:#000; }.status-pill { color:#343434; }.side-sigil:before,.boot-glyph:after { background:#000; box-shadow:none; }.boot-screen,.boot-screen:after { background:#fff; }.boot-screen:after { background:linear-gradient(90deg,rgba(255,255,255,0),#fff 30%,#fff 100%); }.boot-meta,.side-sigil { color:#555; }.telemetry { color:#d8d8d8; border-color:rgba(255,255,255,.16); background:#0a0a0a; }.telemetry strong,.terminal,.api-status,.response .api-code { color:#fff; }.traffic i:first-child { background:#707070; }.traffic i:nth-child(2) { background:#b5b5b5; }.traffic i:nth-child(3) { background:#f1f1f1; }.pink,.blue,.mint,.yellow,.white { color:#f0f0f0; }.gray { color:#898989; }.terminal span,.file-tree,.line-no { color:#888; }.method,.model-info .badge { color:#000; background:#fff; }.orb { background:radial-gradient(circle at 35% 28%,#fff 0 3%,#d9d9d9 18%,#858585 52%,#242424 78%); box-shadow:0 0 38px rgba(255,255,255,.12); }.model-canvas:before { border-color:rgba(255,255,255,.22); }.model-canvas:after { border-color:rgba(255,255,255,.14); }.code-main:after { background:linear-gradient(90deg,transparent,#fff,transparent); box-shadow:0 0 9px rgba(255,255,255,.4); }.code-line.is-active { background:linear-gradient(90deg,rgba(255,255,255,.12),transparent 70%); }.demo-window { box-shadow:0 28px 64px rgba(0,0,0,.18),0 2px 0 rgba(0,0,0,.07); }.demo-window:hover { box-shadow:0 32px 76px rgba(0,0,0,.24),0 2px 0 rgba(0,0,0,.07); }
    .architecture { padding-top:105px; }.architecture-header { align-items:flex-end; }.flow { grid-template-columns:.94fr 1.12fr .94fr; gap:38px; min-height:390px; margin-top:58px; }.flow-rail { inset:49px 0 auto; width:100%; height:274px; }.flow-tracks use { fill:none; stroke:rgba(0,0,0,.18); stroke-width:1; vector-effect:non-scaling-stroke; }.flow-packets circle { fill:#000; filter:drop-shadow(0 0 4px rgba(0,0,0,.35)); }.flow-col { opacity:0; transform:translateY(16px); }.architecture.reveal.visible .flow-col { animation:architecture-in .75s var(--ease) forwards; }.architecture.reveal.visible .flow-col:nth-of-type(2) { animation-delay:.12s; }.architecture.reveal.visible .flow-col:nth-of-type(3) { animation-delay:.24s; }.flow-node { min-height:70px; margin-bottom:13px; border-color:rgba(0,0,0,.15); border-radius:var(--r-xs); background:#fff; transition:transform .32s var(--ease),background .32s ease,color .32s ease,border-color .32s ease; }.flow-node:hover,.flow-node:focus { color:#fff; background:#000; border-color:#000; outline:0; transform:translateY(-3px); }.flow-node:hover span,.flow-node:focus span { color:#c5c5c5; }.flow:has(.flow-node:hover) .flow-tracks use { stroke:rgba(0,0,0,.4); }.flow-core { position:relative; overflow:hidden; margin-top:34px; padding:22px 20px 18px; border-radius:var(--r-xs); background:#000; box-shadow:none; }.flow-core:before { content:""; position:absolute; inset:-110% 36% auto; height:220%; border:1px solid rgba(255,255,255,.16); border-radius:50%; animation:core-orbit 7s linear infinite; }.flow-core > * { position:relative; z-index:1; }.core-status { display:inline-flex; margin-bottom:16px; color:#bfbfbf; font:9px "SFMono-Regular",Consolas,monospace; letter-spacing:.1em; }.core-status:before { content:""; width:6px; height:6px; margin:2px 7px 0 0; border-radius:50%; background:#fff; animation:core-pulse 1.8s ease-in-out infinite; }.flow-core i { background:#fff; box-shadow:none; }.flow-core h3 { color:#fff; }.flow-core div { color:#c9c9c9; }.bento-card,.security-item,.price-card { border-color:rgba(0,0,0,.14); background:#fff; }.bento-card:hover,.price-card:hover,.flow-node:hover { border-color:#000; box-shadow:none; }.copy-card,.toast { background:#000; }.copy-code { color:#f1f1f1; }.latency-bar { background:#000; }.security-item:hover,.deploy-option:hover { background:#f4f4f4; }.security-check,.rule-state b,.price-features li:before,.faq-question span { color:#000; border-color:#000; }.disclosure,.save,.price-card.featured { color:#000; border-color:#000; background:#f4f4f4; box-shadow:none; }.field input:focus,.field select:focus { border-color:#000; box-shadow:0 0 0 2px rgba(0,0,0,.12); }.form-success { color:#000; background:#f4f4f4; border:1px solid #000; }.hero .announcement { background:#fff; }.status-dot { box-shadow:none; }.side-sigil:before { background:#000; }.side-sigil:after { content:""; width:5px; height:5px; border-radius:50%; background:#000; }.boot-glyph:after { background:#000; }.boot-screen:after { background:linear-gradient(90deg,rgba(255,255,255,0),#fff 30%,#fff 100%); }
    @keyframes architecture-in { to { opacity:1; transform:none; } } @keyframes core-orbit { to { transform:rotate(360deg); } } @keyframes core-pulse { 50% { opacity:.28; transform:scale(.66); } }
    @media (max-width:780px) { .hero h1 { font-size:clamp(42px,11.4vw,56px); }.hero-dynamic-line { white-space:normal; }.word-wrap.wide-words { min-width:0; }.architecture { padding-top:92px; }.flow { grid-template-columns:1fr; gap:23px; min-height:0; }.flow-rail { display:none; }.flow-core { margin-top:0; }.architecture.reveal.visible .flow-col { animation-delay:0s; }.architecture.reveal.visible .flow-col:nth-of-type(3) { animation-delay:.1s; }.architecture.reveal.visible .flow-col:nth-of-type(4) { animation-delay:.2s; } }
    @keyframes reveal { to { opacity:1; transform:none; } } @keyframes demo-enter { to { opacity:1; transform:translateY(0); } } @keyframes blink { 50% { opacity:0; } } @keyframes status-pulse { 70% { box-shadow:0 0 0 5px rgba(0,0,0,0); } 100% { box-shadow:0 0 0 0 rgba(0,0,0,0); } } @keyframes telemetry-in { to { opacity:1; } } @keyframes telemetry-float { 50% { transform:translateY(-6px); } } @keyframes dash { to { stroke-dashoffset:-213; } } @keyframes bar-rise { from { transform:scaleY(.04); opacity:.2; } to { transform:scaleY(1); opacity:1; } } @keyframes boot-orbit { from{transform:rotate(-78deg) scale(.2);opacity:0}to{transform:rotate(0) scale(1);opacity:1} } @keyframes boot-core { from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)} } @keyframes boot-beam { from{transform:translate(-50%,-50%) scaleX(0);opacity:0}to{transform:translate(-50%,-50%) scaleX(1);opacity:1} } @keyframes boot-name { to{opacity:1;transform:translateX(0)} } @keyframes boot-wipe { to{transform:translateX(110%)} } @keyframes boot-fade { to{opacity:0;visibility:hidden} } @keyframes wake-nav { to{opacity:1;transform:none} } @keyframes code-line-in { to{opacity:1;transform:none} } @keyframes code-scan { 0%,12%{opacity:0;transform:translateY(0)}18%,72%{opacity:.85}84%,100%{opacity:0;transform:translateY(232px)} } @keyframes sidebar-awake { from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none} } @keyframes terminal-awake { to{opacity:1} } @keyframes surface-breathe { 50%{box-shadow:0 32px 76px rgba(0,0,0,.20),0 2px 0 rgba(0,0,0,.07)} }
    @media (max-width: 780px) { .container{padding:0 20px}.nav{height:65px;display:flex;justify-content:space-between}.nav-links,.nav-actions{display:none}.menu-button{display:block}.site-header.is-menu-open{background:var(--paper);border-bottom:1px solid var(--soft-line)}.site-header.is-menu-open .menu-bars{background:transparent}.site-header.is-menu-open .menu-bars:before{transform:translateY(-3px) rotate(45deg);box-shadow:0 0 0 var(--ink)}.site-header.is-menu-open .menu-bars:after{display:block;content:"";width:21px;height:1px;background:var(--ink);transform:translateY(-4px) rotate(-45deg)}.mobile-nav{position:absolute;top:65px;left:0;width:100%;padding:16px 20px 25px;background:var(--paper);border-bottom:1px solid var(--soft-line)}.site-header.is-menu-open .mobile-nav{display:block}.mobile-nav a{display:block;padding:11px 0;border-bottom:1px solid var(--soft-line);font-size:15px}.mobile-nav .button{margin-top:20px;width:100%}.hero{min-height:830px;padding:138px 0 58px}.hero h1{font-size:clamp(45px,12vw,60px);line-height:1.01;margin-top:25px;letter-spacing:-.075em}.hero-copy{font-size:15px;padding:0 6px}.hero-actions{margin-top:24px}.demo-stage{height:360px;margin-top:65px;width:calc(100vw - 20px)}.demo-window{border-radius:var(--r-sm) var(--r-sm) 0 0}.window-tabs{display:none}.file-tree{display:none}.code-panel{grid-template-columns:1fr;font-size:10px}.line-no{width:38px;flex-basis:38px;padding-right:11px}.terminal{right:12px;bottom:12px;width:210px}.demo-switcher{bottom:12px}.demo-switcher button{padding:5px 7px}.visual-panel{grid-template-columns:1fr}.model-info{display:none}.api-panel{grid-template-columns:1fr}.api-panel .response{display:none}.section{padding:92px 0}.section h2{font-size:clamp(39px,11vw,54px)}.capability,.developer{grid-template-columns:1fr;gap:42px}.capability-visual{min-height:420px}.media-section{padding-top:20px}.media-grid{margin-top:35px;grid-template-columns:1.05fr .95fr;grid-template-rows:230px 155px 155px;gap:8px}.media.large{grid-row:span 2}.media.light{grid-column:span 2}.developer .section-top{padding-top:0}.dev-window{min-height:390px}.dev-body{min-height:341px;grid-template-columns:1fr}.dev-response{display:none}.stats{grid-template-columns:1fr;margin-top:44px}.stat,.stat + .stat{padding:22px 0;border-right:0;border-bottom:1px solid var(--line)}.stat:last-child{border-bottom:0}.quote{padding:100px 0}.quote blockquote{font-size:clamp(30px,9vw,46px)}.final-cta{padding:105px 0 97px}.footer-grid{grid-template-columns:repeat(2,1fr);gap:36px 22px;padding-bottom:56px}.footer-about{grid-column:span 2}.footer-bottom{display:block;line-height:1.7}.footer-bottom div{margin-top:8px}.mega{display:none}.telemetry{display:none}.architecture-header,.pricing-head{display:block}.architecture-header .section-intro{margin-top:15px}.flow{grid-template-columns:1fr;gap:25px;margin-top:38px}.flow-rail{display:none}.flow-core{margin-top:0}.bento{grid-template-columns:1fr;grid-template-rows:auto}.bento-card,.bento-latency,.deploy-card{grid-column:span 1;min-height:210px}.security-grid{grid-template-columns:1fr}.pricing-grid{grid-template-columns:1fr}.faq-layout{grid-template-columns:1fr;gap:36px}.contact-form{grid-template-columns:1fr}.field.full,.contact-form .button{grid-column:span 1}.deploy-options{flex-wrap:wrap}.deploy-option{min-width:calc(50% - 4px)}.side-sigil{display:none}.boot-side{left:31px}.boot-meta{left:31px}.boot-screen:after{background:linear-gradient(90deg,rgba(247,247,245,0),#f7f7f5 48%,#f7f7f5 100%)} }
    @media (prefers-reduced-motion: reduce) { *,*:before,*:after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }.reveal,.reveal .stagger,.announcement,.hero h1,.hero-copy,.hero-actions,.demo-stage{opacity:1;transform:none;} }

    /* ================= Opening sequence: topology field ================= */
    .boot-screen { background:transparent; }.boot-screen:after { background:linear-gradient(90deg,rgba(255,255,255,0),#fff 30%,#fff 100%); }
    /* Reveal order: environment → typography → navigation → action → surface */
    .announcement { animation-delay:.16s; }.hero h1 { animation-delay:.30s; }.hero-copy { animation-delay:.54s; }.hero-actions { animation-delay:.80s; }.demo-stage { animation-delay:1.04s; }
    body.is-awake .site-header { animation:wake-nav .8s .64s var(--ease) both; }
    .telemetry { animation:telemetry-in .7s 2.35s var(--ease) forwards, telemetry-float 5.5s 3.1s ease-in-out infinite; }.telemetry-right { animation-delay:2.52s,3.5s; }
    .terminal { animation:terminal-awake .7s 2.6s var(--ease) forwards; }
    .hero-content { transition:opacity .1s linear; will-change:transform; }

    /* ================= System architecture & execution flow ================= */
    /* .reveal sits on the inner container, so the flow columns are scoped through it. */
    .architecture .reveal.visible .flow-col { animation:architecture-in .75s var(--ease) forwards; }
    .architecture .reveal.visible .flow-col:nth-of-type(2) { animation-delay:.12s; }
    .architecture .reveal.visible .flow-col:nth-of-type(3) { animation-delay:.24s; }
    .flow-rail { inset:0; width:100%; height:100%; }
    .flow-tracks use, .flow-tracks path { fill:none; stroke:rgba(0,0,0,.15); stroke-width:1; vector-effect:non-scaling-stroke; transition:stroke .35s ease; }
    .flow-signals path { fill:none; stroke:#000; stroke-width:1.5; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:.55; }
    .flow-packets circle { fill:#000; filter:none; }
    .flow-node { position:relative; }
    .flow-node:after { content:""; position:absolute; inset:-1px; border:1px solid #000; border-radius:var(--r-xs); opacity:0; transform:scale(.985); pointer-events:none; transition:opacity .5s ease, transform .5s var(--ease); }
    .flow-node.is-hit:after { opacity:1; transform:none; transition-duration:.12s; }
    .flow-core.is-hit:before { animation-duration:2.4s; }
    .flow-core.is-hit .core-status:before { transform:scale(1.5); background:#fff; }
    .core-status:before { transition:transform .18s var(--ease); }
    .flow-legend { display:flex; justify-content:space-between; gap:18px; margin-top:34px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font:10px "SFMono-Regular",Consolas,monospace; letter-spacing:.06em; text-transform:uppercase; }

    /* ================= Interior pages ================= */
    body.is-interior .site-header { opacity:1; transform:none; animation:none; }
    .nav-item.active { color:var(--ink); }
    .page-hero { position:relative; overflow:hidden; padding:172px 0 74px; border-bottom:1px solid var(--line); }
    .page-hero .container { position:relative; z-index:1; }
    .crumb { display:flex; align-items:center; gap:9px; color:var(--muted); font:10px "SFMono-Regular",Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; }
    .crumb a:hover { color:var(--ink); }
    .crumb i { display:block; width:14px; height:1px; background:var(--line); }
    .page-hero h1 { max-width:16ch; margin:24px 0 20px; font-size:clamp(48px,5.6vw,74px); line-height:.98; letter-spacing:-.075em; font-weight:470; }
    .page-hero .lede { max-width:540px; margin:0; color:var(--muted); font-size:16px; line-height:1.55; }
    .page-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:32px; }
    .page-facts { display:grid; grid-template-columns:repeat(4,1fr); margin-top:58px; border-top:1px solid var(--line); }
    .page-fact { padding:22px 20px 0 0; border-right:1px solid var(--line); }
    .page-fact:last-child { border-right:0; }
    .page-fact b { display:block; font-size:22px; font-weight:500; letter-spacing:-.05em; }
    .page-fact span { display:block; margin-top:6px; color:var(--muted); font-size:11px; line-height:1.5; }
    .split { display:grid; grid-template-columns:.72fr 1.28fr; gap:80px; align-items:start; }
    .split.reverse { grid-template-columns:1.28fr .72fr; }
    .rule-list { border-top:1px solid var(--line); }
    .rule-item { display:grid; grid-template-columns:38px 1fr; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); }
    .rule-item span.idx { color:var(--muted); font:10px "SFMono-Regular",Consolas,monospace; padding-top:3px; }
    .rule-item h3 { margin:0 0 7px; font-size:15px; font-weight:560; letter-spacing:-.025em; }
    .rule-item p { margin:0; max-width:640px; color:var(--muted); font-size:12px; line-height:1.6; }
    .rule-item code { color:var(--ink); font:11px "SFMono-Regular",Consolas,monospace; }
    .panel { overflow:hidden; border:1px solid var(--line); border-radius:var(--r-xs); background:#fff; }
    .panel-top { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 16px; border-bottom:1px solid var(--line); color:var(--muted); font:10px "SFMono-Regular",Consolas,monospace; letter-spacing:.06em; text-transform:uppercase; }
    .panel-body { padding:22px 20px; }
    .panel.dark { border-color:#000; background:#000; color:#f1f1f1; }
    .panel.dark .panel-top { border-color:rgba(255,255,255,.14); color:#9a9a9a; }
    .code-block { margin:0; overflow-x:auto; color:#f1f1f1; font:11.5px/1.85 "SFMono-Regular",Consolas,monospace; white-space:pre; }
    .code-block .c { color:#8a8a8a; }.code-block .k { color:#fff; }.code-block .s { color:#d2d2d2; }
    .kv { display:grid; grid-template-columns:auto 1fr; gap:9px 22px; margin:0; color:var(--muted); font:11px "SFMono-Regular",Consolas,monospace; }
    .kv dt { color:var(--muted); }.kv dd { margin:0; color:var(--ink); }
    .table-wrap { overflow-x:auto; margin-top:38px; border:1px solid var(--line); border-radius:var(--r-xs); }
    table.grid { width:100%; min-width:560px; border-collapse:collapse; font-size:12px; }
    table.grid th, table.grid td { padding:13px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
    table.grid th { color:var(--muted); font:10px "SFMono-Regular",Consolas,monospace; letter-spacing:.07em; text-transform:uppercase; font-weight:400; }
    table.grid td { color:#2a2a2a; }
    table.grid td b { font-weight:560; }
    table.grid tr:last-child td { border-bottom:0; }
    table.grid code { color:#000; font:11px "SFMono-Regular",Consolas,monospace; }
    .doc-layout { display:grid; grid-template-columns:210px 1fr; gap:60px; align-items:start; }
    .doc-nav { border-top:1px solid var(--line); }
    .doc-nav h3 { margin:20px 0 10px; color:var(--muted); font:10px "SFMono-Regular",Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; font-weight:400; }
    .doc-nav a { display:block; padding:6px 0; color:#41413d; font-size:12px; transition:color .2s ease, padding .2s var(--ease); }
    .doc-nav a:hover { color:var(--ink); padding-left:5px; }
    .prose { max-width:660px; }
    .prose h2 { margin:0 0 14px; font-size:27px; line-height:1.08; letter-spacing:-.05em; font-weight:520; }
    .prose h3 { margin:38px 0 10px; font-size:15px; font-weight:570; letter-spacing:-.02em; }
    .prose p { margin:0 0 14px; color:var(--muted); font-size:13px; line-height:1.7; }
    .prose ul { margin:0 0 16px; padding-left:17px; color:var(--muted); font-size:13px; line-height:1.85; }
    .prose li::marker { color:#000; }
    .prose code { color:var(--ink); font:11.5px "SFMono-Regular",Consolas,monospace; }
    .prose > section { padding:40px 0; border-bottom:1px solid var(--line); }
    .prose > section:first-child { padding-top:0; }
    .prose > section:last-child { border-bottom:0; }
    .status-board { margin-top:52px; border:1px solid var(--line); border-radius:var(--r-xs); }
    .status-row { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line); }
    .status-row:last-child { border-bottom:0; }
    .status-row b { font-size:13px; font-weight:550; }
    .status-row span { color:var(--muted); font-size:11px; }
    .status-row .status-pill { justify-self:end; }
    .spark { display:flex; gap:2px; align-items:flex-end; height:22px; }
    .spark i { flex:1; min-width:2px; height:100%; background:#000; opacity:.16; border-radius:1px; }
    .spark i.up { opacity:.82; }
    .log-list { margin-top:52px; border-top:1px solid var(--line); }
    .log-item { display:grid; grid-template-columns:150px 1fr; gap:28px; padding:28px 0; border-bottom:1px solid var(--line); }
    .log-item time { color:var(--muted); font:10px "SFMono-Regular",Consolas,monospace; letter-spacing:.07em; text-transform:uppercase; }
    .log-item h3 { margin:0 0 9px; font-size:17px; font-weight:540; letter-spacing:-.035em; }
    .log-item p { margin:0 0 10px; max-width:600px; color:var(--muted); font-size:12.5px; line-height:1.65; }
    .chip { display:inline-block; margin:0 5px 5px 0; padding:3px 7px; border:1px solid var(--line); border-radius:var(--r-xs); color:#3a3a3a; font:9px "SFMono-Regular",Consolas,monospace; letter-spacing:.06em; text-transform:uppercase; }
    .chip.solid { color:#fff; background:#000; border-color:#000; }
    .tile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:52px; border:1px solid var(--line); background:var(--line); }
    .tile { display:block; min-height:186px; padding:22px; background:#fff; transition:background .28s ease, transform .28s var(--ease); }
    a.tile:hover { background:#f4f4f4; transform:translateY(-2px); }
    .tile-kicker { color:var(--muted); font:9px "SFMono-Regular",Consolas,monospace; letter-spacing:.1em; text-transform:uppercase; }
    .tile h3 { margin:26px 0 8px; font-size:15px; font-weight:560; letter-spacing:-.03em; }
    .tile p { margin:0; max-width:280px; color:var(--muted); font-size:11.5px; line-height:1.55; }
    .tile .arrow { display:block; margin-top:14px; font-size:15px; }
    .cta-band { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:60px; padding:26px 28px; border:1px solid #000; border-radius:var(--r-xs); }
    .cta-band h3 { margin:0 0 5px; font-size:18px; font-weight:540; letter-spacing:-.04em; }
    .cta-band p { margin:0; color:var(--muted); font-size:12px; }
    @media (max-width:980px) { .split, .split.reverse, .doc-layout { grid-template-columns:1fr; gap:44px; }.tile-grid { grid-template-columns:1fr 1fr; }.page-facts { grid-template-columns:1fr 1fr; gap:0 0; } }
    @media (max-width:780px) { .page-hero { padding:118px 0 54px; }.page-hero h1 { font-size:clamp(40px,11vw,54px); }.page-facts { grid-template-columns:1fr; }.page-fact { padding:18px 0; border-right:0; border-bottom:1px solid var(--line); }.page-fact:last-child { border-bottom:0; }.tile-grid { grid-template-columns:1fr; }.status-row { grid-template-columns:1fr; gap:12px; }.status-row .status-pill { justify-self:start; }.log-item { grid-template-columns:1fr; gap:12px; }.cta-band { display:block; }.cta-band .button { margin-top:18px; }.rule-item { grid-template-columns:1fr; gap:8px; }.flow-legend { display:none; }.architecture .reveal.visible .flow-col { animation-delay:0s; }.architecture .reveal.visible .flow-col:nth-of-type(2) { animation-delay:.1s; }.architecture .reveal.visible .flow-col:nth-of-type(3) { animation-delay:.2s; } }
    @media (prefers-reduced-motion: reduce) { .flow-col { opacity:1 !important; transform:none !important; } }
    .flow-tracks path.hot { stroke:rgba(0,0,0,.44); }

    /* ================================================================
       MOTION LAYER — GSAP-driven. Rounded geometry + live background.
       ================================================================ */
    :root { --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:26px; --ease-long:cubic-bezier(.16,1,.3,1); }

    /* --- Corner geometry: tab/phone radii, never sharp --- */
    .flow-node, .flow-core, .bento-card, .price-card, .panel, .tile, .cta-band, .status-board,
    .table-wrap, .media, .capability-visual, .log-item .panel, .security-grid, .tile-grid,
    .disclosure, .form-success, .deploy-option, .rule-state, .sandbox-toggle, .terminal,
    .model-info, .demo-panel, .dev-response, .price-card.featured { border-radius:var(--r-md); }
    .security-grid, .tile-grid { overflow:hidden; }
    .demo-window { border-radius:var(--r-xl) var(--r-xl) 0 0; }
    .dev-window { border-radius:var(--r-xl); }
    .dialog { border-radius:var(--r-lg); }
    .mega { border-radius:var(--r-lg); }
    .toast, .copy-btn, .command-list button, .mega-link, .file-tree .selected, .field input,
    .field select, .chip, .keycap, .tag, .verdict, .method, .model-info .badge, .save,
    .spark i, .telemetry, .code-block, .page-fact { border-radius:var(--r-xs); }
    .latency-bar { border-radius:var(--r-xs) var(--r-xs) 0 0; }
    .panel .panel-body > .code-block { border-radius:0; }
    .demo-panel { border-radius:0; }
    .flow-node:after { border-radius:var(--r-md); }
    .security-item, .tile { border-radius:0; }
    .disclosure { border-left-width:2px; }

    /* --- Live background field: one canvas behind the whole document --- */
    body > header, body > main, body > footer, body > .side-sigil { position:relative; z-index:1; }
    .modal-backdrop, .toast, .boot-screen { z-index:70; }
    .boot-screen { z-index:100; }
    .site-header { z-index:30; }

    /* --- GSAP owns the intro once it is ready; CSS keyframes stand down --- */
    body.gsap-ready .announcement, body.gsap-ready .hero h1, body.gsap-ready .hero-copy,
    body.gsap-ready .hero-actions, body.gsap-ready .demo-stage, body.gsap-ready .site-header,
    body.gsap-ready .telemetry, body.gsap-ready .terminal, body.gsap-ready .file-tree,
    body.gsap-ready .code-main .code-line, body.gsap-ready .flow-col { animation:none; opacity:1; transform:none; }
    body.gsap-ready .reveal, body.gsap-ready .reveal .stagger { opacity:1; transform:none; transition:none; }
    /* .flow-col is opacity:0 in the base layer and was restored by a keyframe that
       gsap-ready now disables — restore it here or the diagram stays invisible. */
    body.gsap-ready .flow-col { opacity:1; transform:none; }
    body.gsap-ready .demo-window { animation:surface-breathe 7s 2.4s ease-in-out infinite; }

    /* --- Masked line reveal --- */
    .line-mask { display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
    .line-mask > span { display:block; will-change:transform; }
    .word-mask { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
    .word-mask > span { display:inline-block; will-change:transform; }

    /* --- Magnetic controls --- */
    .button, .nav-item, .tile, .flow-node, .bento-card, .price-card { will-change:transform; }
    .button { transition:background .3s var(--ease-long), color .3s var(--ease-long), border-color .3s var(--ease-long); }
    .button:hover { transform:none; }
    .mag-label { display:inline-flex; align-items:center; pointer-events:none; }

    /* --- Nav underline --- */
    .nav-links { position:relative; }
    .nav-underline { position:absolute; bottom:-2px; left:0; height:1px; background:var(--ink); opacity:0; pointer-events:none; }

    /* --- Scroll progress rail --- */
    .scroll-rail { position:fixed; z-index:31; top:0; left:0; width:100%; height:1px; background:transparent; pointer-events:none; }
    .scroll-rail i { display:block; width:100%; height:100%; background:var(--ink); transform:scaleX(0); transform-origin:0 50%; }

    /* --- Execution flow --- */
    .flow-signals path { fill:none; stroke:#000; stroke-width:1.4; stroke-linecap:round; vector-effect:non-scaling-stroke; }
    .flow-core { position:relative; }
    .flow-core:after { content:""; position:absolute; inset:0; border-radius:var(--r-md); box-shadow:0 0 0 0 rgba(0,0,0,.18); opacity:0; pointer-events:none; }

    @media (prefers-reduced-motion: reduce) {
      .line-mask > span, .word-mask > span { transform:none !important; }
      body.gsap-ready .reveal { opacity:1 !important; transform:none !important; }
    }
    @media (max-width:780px) { .hero-actions { flex-wrap:wrap; } .page-actions { width:100%; } }

    /* ================================================================
    /* ================================================================
       CIRVIX DESIGN SYSTEM — the single source of truth for this site.

       WHY THIS BLOCK REPLACED THE ONE THAT WAS HERE
       ---------------------------------------------
       The previous block was headed "Apple light canvas + xAI structure"
       and every value carried a comment naming where it was taken from —
       "--ink:#1d1d1f (apple ink)", "--line:#d2d2d7 (apple hairline)",
       "--shimmer-a:#6366f1 (xai hero-shimmer indigo)". Those are another
       company's palette, and a product wearing someone else's colours cannot
       read as its own. It also silently overrode two earlier :root blocks in
       this same file, so the tokens a reader saw at the top were not the
       tokens the browser used.

       This is now the LAST and only declaration of these tokens. The earlier
       blocks are reduced to pointers at this one.

       THE RULE THAT GOVERNS THE PALETTE
       ---------------------------------
       Chroma is reserved for execution state. Neutrals carry all structure,
       hierarchy and emphasis. A saturated colour on a Cirvix screen always
       means the runtime decided something:

         permit  the call was allowed
         deny    the call was blocked by policy
         hold    the call is held, awaiting a human
         route   the call is in flight, being brokered

       Nothing decorative may borrow those four. That is the whole reason
       green on this product reads as a verdict rather than as a brand
       flourish — and it is why the indigo/purple hover beam is gone: a
       gradient that means nothing devalues the four colours that mean
       something.

       WHAT THE REFERENCES ACTUALLY TAUGHT
       -----------------------------------
       Measured, not guessed (see DESIGN-RESEARCH.md):
         · heading weight sits BELOW 600 on both references — Linear's hero
           is 510, Stripe's is 300. Bold is not what makes type expensive.
         · tracking tightens with size (~-0.02em display, normal at body).
         · motion is two-tier: ~100-160ms micro, ~240-300ms component, on a
           decelerating curve with no overshoot.
         · radius is TIGHT on technical products — Stripe resolves to 4px.
       Those are principles. The values below are Cirvix's own.
       ================================================================ */
    :root {
      /* -- Neutral ramp: zinc-derived, the family Cirvix already uses ------ */
      --paper:#ffffff;
      --tile:#f6f6f7;            /* recessed band, alternating sections     */
      --card:#ffffff;
      --ink:#09090b;             /* near-black; pure #000 rings on white    */
      --ink-soft:#3f3f46;
      /* #71717a measured 4.47:1 against the --tile band — just under AA, and
         the band is exactly where secondary copy sits. Darkened until it
         clears 4.5 on BOTH surfaces (5.25 on paper, 4.85 on tile) rather
         than only on the one it was sampled against. */
      --muted:#6b6b75;
      --line:rgba(9,9,11,.12);
      --line-strong:rgba(9,9,11,.30);
      --soft-line:rgba(9,9,11,.06);
      --panel:#09090b;           /* terminals and code surfaces             */

      /* -- Execution state: the only chroma on the site ------------------- */
      --state-permit:#067a4e;
      --state-permit-line:#a7e8cb;
      --state-permit-wash:rgba(6,122,78,.07);
      --state-deny:#b91c1c;
      --state-deny-line:#f3b4b4;
      --state-deny-wash:rgba(185,28,28,.06);
      --state-hold:#a16207;
      --state-hold-line:#f2d69a;
      --state-hold-wash:rgba(161,98,7,.07);
      --state-route:#2f5fd0;
      --state-route-line:#bed0f7;
      --state-route-wash:rgba(47,95,208,.06);

      /* -- The hover beam, now neutral ------------------------------------ */
      /* Was indigo -> purple. Decorative chroma is forbidden by the rule
         above, so the beam is a moving highlight rather than a colour. */
      --shimmer-a:rgba(9,9,11,.55);
      --shimmer-b:rgba(9,9,11,.14);

      /* -- Motion: two tiers and one curve family ------------------------- */
      /* `--ease` (55 uses) is Cirvix's own and stays. `--ease-apple` is gone;
         its 12 usages were rewritten to `--ease`, which removes both the
         borrowed curve and the borrowed name. */
      --dur-micro:.12s;          /* hover, press, focus                     */
      --dur-base:.24s;           /* components: cards, menus, toggles       */
      --dur-slow:.45s;           /* section entrances                       */

      /* -- Radius: tightened from the 26-28px card scale ------------------ */
      /* 28px on a card is the "giant rounded rectangle" tell; technical
         products sit far tighter. Scaled down proportionally so existing
         geometry keeps its relationships. */
      --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
      --pill:999px;              /* one spelling; there were four           */

      --measure:672px;           /* ~68ch at 16px — the reading column      */
      --header-h:64px;
    }

    /* --- Canvas ------------------------------------------------------ */
    body { background:var(--paper); color:var(--ink); }
    main { background:var(--paper); }

    /* Alternating band rhythm: every other content section drops onto --tile.
       A page of identical white sections has no rhythm to read against; one
       recessed step is enough to group content without drawing a box. */
    .section:nth-of-type(even) { background:var(--tile); }
    .architecture, .bento-section, .final-cta, .page-hero { background:var(--paper); }
    #security, #pricing, .cirvix-metrics { background:var(--tile); }

    /* --- Typography: reference metrics -------------------------------- */
    .hero h1, .page-hero h1, .section h2, .final-cta h2, .quote blockquote, .dialog h2, .prose h2 {
      letter-spacing:-.025em; font-weight:500; line-height:1.05;
    }
    .hero h1 { max-width:15ch; font-size:clamp(44px,6.2vw,72px); }
    .page-hero h1 { max-width:16ch; font-size:clamp(40px,5.4vw,64px); }
    .section h2, .final-cta h2 { font-size:clamp(34px,4.4vw,56px); }
    .prose h2 { font-size:clamp(26px,3vw,34px); letter-spacing:-.022em; }
    .section-intro, .page-hero .lede, .hero-copy { max-width:var(--measure); color:var(--muted); letter-spacing:-.012em; }
    .prose { max-width:var(--measure); }
    .prose p, .prose ul { color:var(--muted); }
    .rule-item h3, .tile h3, .bento-card h3, .security-item h3, .price-card h3, .log-item h3, .flow-node b {
      letter-spacing:-.022em; font-weight:500;
    }
    .eyebrow, .flow-kicker, .tile-kicker, .crumb, .status-pill, .uptime, .panel-top, .chip { color:var(--muted); }

    /* --- Controls ------------------------------------------------------ */
    .button { border-radius:var(--pill); height:44px; padding:0 20px; font-size:14px; font-weight:500;
      letter-spacing:-.01em; transition:background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease); }
    .button:hover { transform:none; }
    .button.primary { background:var(--ink); color:#fff; }
    .button.primary:hover { background:#000; }
    .button.secondary { background:transparent; border-color:var(--line); color:var(--ink); }
    .button.secondary:hover { background:var(--tile); border-color:#c7c7cc; }
    .nav-actions .button { height:36px; padding:0 16px; }
    .keycap, .chip, .tag, .verdict, .method, .save, .status-pill { border-radius:var(--pill); }

    /* --- Header -------------------------------------------------------- */
    .site-header.is-scrolled { background:rgba(255,255,255,.72); backdrop-filter:saturate(1.8) blur(20px);
      -webkit-backdrop-filter:saturate(1.8) blur(20px); border-bottom:1px solid var(--soft-line); }
    .nav { height:var(--header-h); }
    .nav-item { position:relative; z-index:1; font-size:13px; color:var(--ink-soft);
      transition:color var(--dur-micro) var(--ease); }
    .nav-item:hover, .nav-item.active { color:var(--ink); }
    /* A soft pill that travels between nav items: one moving object reads as
       a pointer, where per-item backgrounds read as six separate buttons. */
    .nav-hover-pill { position:absolute; z-index:0; top:0; left:0; height:30px; border-radius:var(--pill);
      background:rgba(0,0,0,.045); opacity:0; pointer-events:none;
      transition:opacity var(--dur-micro) var(--ease); }
    .nav-underline { display:none; }

    /* --- Surfaces ------------------------------------------------------ */
    .tile, .bento-card, .price-card, .panel, .cta-band, .status-board, .table-wrap, .security-grid,
    .tile-grid, .media, .capability-visual, .flow-core, .disclosure, .form-success { border-radius:var(--r-xl); }
    .flow-node, .deploy-option, .rule-state, .sandbox-toggle, .terminal, .model-info { border-radius:var(--r-md); }
    .demo-window { border-radius:var(--r-xl) var(--r-xl) 0 0; }
    .dev-window, .dialog, .mega { border-radius:var(--r-xl); }
    .field input, .field select, .command-list button, .mega-link, .copy-btn, .toast, .code-block,
    .page-fact, .file-tree .selected { border-radius:var(--r-sm); }
    .flow-node:after { border-radius:var(--r-md); }
    /* .price-card.featured is set to --r-md by an earlier compound selector that wins
       on specificity; restate it here. Grid cells stay square — their container clips. */
    .price-card.featured { border-radius:var(--r-xl); }
    /* #pricing wins on specificity over .price-card.featured — restate the tile. */
    .section .price-card.featured, #pricing .price-card.featured, .price-card.featured { background:var(--tile); border-color:var(--ink); }
    .tile, .security-item { border-radius:0; }
    .bento-card, .price-card, .panel, .tile, .security-item { background:var(--paper); border-color:var(--line); }
    .section:nth-of-type(even) .bento-card, .section:nth-of-type(even) .price-card,
    .section:nth-of-type(even) .panel, .section:nth-of-type(even) .tile,
    .section:nth-of-type(even) .security-item, #security .security-item, #pricing .price-card { background:var(--paper); }
    .security-grid, .tile-grid { background:var(--line); }
    .price-card.featured { background:var(--tile); border-color:var(--ink); }
    .panel.dark, .copy-card, .flow-core, .toast { background:var(--ink); border-color:var(--ink); }
    .demo-window, .dev-window { background:var(--ink); }

    /* --- Card hover ---------------------------------------------------- */
    .tile, .bento-card, .price-card, .security-item, .flow-node {
      transition:background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease),
                 transform var(--dur-base) var(--ease); }
    .tile:hover, .bento-card:hover, .price-card:hover { transform:translateY(-2px); border-color:#c7c7cc; box-shadow:none; }
    .security-item:hover, .deploy-option:hover { background:var(--tile); transform:none; }

    /* --- The one luminance moment -------------------------------------- */
    /* Their exact recipe — a 3px pill bar carrying a gradient that sweeps 150% → -150%. */
    .word-wrap.wide-words:after {
      content:""; position:absolute; z-index:0; left:0; right:0; bottom:-.06em; height:3px;
      border-radius:var(--pill); opacity:1; transform:none;
      background:linear-gradient(90deg,
        rgba(0,0,0,.16) 0%, rgba(0,0,0,.16) 35%,
        var(--shimmer-a) 40%, var(--shimmer-b) 50%, rgba(0,0,0,.16) 60%, rgba(0,0,0,.16) 100%);
      background-size:300% 100%;
      animation:hero-shimmer 3s linear .4s infinite;
    }
    @keyframes hero-shimmer { 0% { background-position:150% center; } 100% { background-position:-150% center; } }

    /* Per-character rotator slot. The measurer sizes the box so the width tweens. */
    .word-wrap.wide-words { position:relative; display:inline-block; min-width:0; overflow:visible; text-align:left; vertical-align:top; }
    .rotating-word { display:inline-flex; white-space:nowrap; }
    .rotating-word .ch { display:inline-block; white-space:pre; will-change:filter,transform,opacity; }
    .word-measure { position:absolute; visibility:hidden; white-space:nowrap; pointer-events:none; }

    /* --- Keyframe vocabulary ------------------------------------------- */
    @keyframes fadeSlideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
    @keyframes tilePopIn { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:none; } }
    @keyframes barGrow { from { transform:scaleY(.04); } to { transform:scaleY(1); } }
    @keyframes gridShimmerH { 0% { background-position:0% center; } 100% { background-position:200% center; } }
    @keyframes border-beam { 0% { background-position:0% center; } 100% { background-position:200% center; } }

    /* --- Scroll rail -------------------------------------------------- */
    .scroll-rail i { background:linear-gradient(90deg,var(--ink),var(--ink)); }

    /* --- Dark panels keep their own scale ----------------------------- */
    .panel.dark .panel-top, .copy-card p { color:#a1a1a6; }
    .code-block .c { color:#86868b; }
    .disclosure { background:var(--tile); border-left:2px solid var(--ink); color:var(--ink-soft); }
    .flow-tracks use, .flow-tracks path { stroke:rgba(0,0,0,.16); }
    .flow-tracks path.hot { stroke:rgba(0,0,0,.45); }
    .flow-packets circle { fill:var(--ink); }
    .flow-node:hover, .flow-node:focus { background:var(--ink); border-color:var(--ink); color:#fff; }
    .flow-node:hover span, .flow-node:focus span { color:#a1a1a6; }

    /* --- Reduced motion ---------------------------------------------- */
    @media (prefers-reduced-motion: reduce) {
      .word-wrap.wide-words:after { animation:none; }
      .flow-col { opacity:1 !important; transform:none !important; }
    }

    /* Final word. The alternating-tile rule is .section:nth-of-type(2n) .price-card
       — (0,3,0) and later in source — so the featured card needs to outrank it. */
    .section:nth-of-type(2n) .price-card.featured, .section .price-card.featured,
    .price-card.featured { background:var(--tile); border-color:var(--ink); }

    /* ================================================================
       GEIST — chosen, and self-hosted.

       ATTRIBUTION, CORRECTED. This block previously credited Geist to xAI.
       It is Vercel's, released under SIL OFL-1.1, and getting a licence
       attribution wrong in the file that loads the font is the kind of
       error that is embarrassing precisely because it is checkable.

       Why this face: it is a neutral grotesque with a true monospace
       companion drawn to the same skeleton, so a rule name in the prose and
       the same rule name in a terminal read as one voice rather than two
       fonts. Self-hosted rather than CDN-linked — a control plane that
       leaks a font request to a third party on every page load is making a
       claim about data handling it cannot keep.
       ================================================================ */
    @font-face { font-family:Geist; font-style:normal; font-weight:400; font-display:swap;
      src:local('Geist'), url('vendor/fonts/geist-sans-latin-400-normal.woff2') format('woff2'); }
    @font-face { font-family:Geist; font-style:normal; font-weight:500; font-display:swap;
      src:local('Geist Medium'), url('vendor/fonts/geist-sans-latin-500-normal.woff2') format('woff2'); }
    @font-face { font-family:Geist; font-style:normal; font-weight:600; font-display:swap;
      src:local('Geist SemiBold'), url('vendor/fonts/geist-sans-latin-600-normal.woff2') format('woff2'); }
    @font-face { font-family:'Geist Mono'; font-style:normal; font-weight:400; font-display:swap;
      src:local('Geist Mono'), url('vendor/fonts/geist-mono-latin-400-normal.woff2') format('woff2'); }

    :root {
      --font-sans:Geist, "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
      --font-mono:"Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    }
    body { font-family:var(--font-sans); }
    .eyebrow, .announcement, .status-pill, .keycap, .cmd-trigger, .flow-kicker, .uptime,
    .crumb, .tile-kicker, .panel-top, .chip, .code-block, .terminal, .api-code, .measure,
    .metric, .core-status, .calc-kicker, .boot-meta, .side-sigil, .file-tree, .code-panel,
    .dev-body, .latency-labels, .deploy-option span, .rule-state, .sandbox-toggle,
    .log-item time, .status-row span, table.grid th { font-family:var(--font-mono); }

    /* ================================================================
       PRICING
       ================================================================ */
    .pricing-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:24px; align-items:stretch; }
    .price-card { position:relative; min-height:0; padding:22px 18px; }
    .price-card > p { min-height:52px; font-size:11.5px; line-height:1.5; }
    .price-card h3 { font-size:17px; letter-spacing:-.02em; font-weight:600; }
    .tier-flag { position:absolute; top:-1px; right:16px; padding:4px 10px; border-radius:0 0 var(--r-sm) var(--r-sm);
      background:var(--ink); color:#fff; font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
    .price { margin:18px 0 4px; font-size:38px; line-height:1; letter-spacing:-.04em; font-weight:500; }
    .price small { margin-left:2px; font-size:13px; letter-spacing:-.01em; color:var(--muted); }
    .price-note { min-height:30px; color:var(--muted); font-size:10.5px; line-height:1.45; }
    .tier-spec { display:grid; gap:0; margin:16px 0 18px; padding-top:12px; border-top:1px solid var(--line); }
    .tier-spec > div { display:flex; justify-content:space-between; gap:10px; padding:6px 0; }
    .tier-spec dt { color:var(--muted); font-family:var(--font-mono); font-size:10px; }
    .tier-spec dd { margin:0; font-size:11.5px; font-weight:500; text-align:right; }
    .price-features { margin:0 0 20px; font-size:11px; line-height:1.9; }
    .price-card .button { height:38px; font-size:12.5px; padding:0 14px; }
    .price-card.is-match { border-color:var(--ink); }
    .pricing-grid.is-compact .price-card { min-height:0; }

    /* A border beam, on hover only so it stays a reward rather than ambient noise.
       Neutral, not chromatic — see the palette rule. */
    .price-card:before { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; opacity:0;
      background:linear-gradient(90deg,transparent,var(--shimmer-a),var(--shimmer-b),transparent);
      background-size:200% 100%;
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude;
      transition:opacity .35s var(--ease); pointer-events:none; }
    .price-card:hover:before { opacity:.85; animation:border-beam 2.4s linear infinite; }

    /* ---- Usage calculator ---- */
    .calc { margin-top:34px; padding:26px 28px 22px; border:1px solid var(--line); border-radius:var(--r-xl); background:var(--paper); }
    .calc-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
    .calc-kicker { display:block; margin-bottom:6px; color:var(--muted); font-family:var(--font-mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; }
    .calc-vol { font-size:36px; line-height:1; letter-spacing:-.04em; font-weight:500; }
    .calc-result { text-align:right; }
    .calc-result b { display:block; font-size:20px; letter-spacing:-.03em; font-weight:600; }
    .calc-cost { display:block; margin-top:3px; color:var(--muted); font-family:var(--font-mono); font-size:12px; }
    .calc-range { -webkit-appearance:none; appearance:none; width:100%; height:2px; margin:26px 0 10px;
      background:var(--line); border-radius:var(--pill); outline:none; cursor:pointer; }
    .calc-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px;
      border-radius:50%; background:var(--ink); border:3px solid var(--paper); box-shadow:0 0 0 1px var(--ink);
      cursor:grab; transition:transform .18s var(--ease); }
    .calc-range::-webkit-slider-thumb:active { transform:scale(1.18); cursor:grabbing; }
    .calc-range::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--ink);
      border:3px solid var(--paper); box-shadow:0 0 0 1px var(--ink); cursor:grab; }
    .calc-scale { display:flex; justify-content:space-between; color:var(--muted); font-family:var(--font-mono); font-size:9px; }
    .calc-scale span:nth-child(even) { opacity:0; }
    .calc-note { margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.6; }

    /* ---- Comparison matrix ---- */
    .compare-wrap { margin-top:0; }
    table.compare { min-width:860px; }
    table.compare thead th { position:sticky; top:0; z-index:2; background:var(--paper); border-bottom:1px solid var(--ink);
      font-family:var(--font-mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink); }
    table.compare thead th:first-child { text-align:left; }
    table.compare th, table.compare td { padding:11px 14px; }
    table.compare td.mid { text-align:center; width:13%; }
    table.compare td.feat { color:var(--ink-soft); font-size:12px; }
    table.compare .group-row td { padding:22px 14px 8px; border-bottom:1px solid var(--ink);
      font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
    table.compare .yes { color:var(--ink); font-size:13px; }
    table.compare .no { color:#c7c7cc; }
    table.compare td.mid b { font-size:11px; font-weight:500; }
    table.compare .is-rec { background:var(--tile); }
    table.compare tbody tr:hover td { background:#fafafa; }
    table.compare tbody tr:hover td.is-rec { background:#eeeef0; }

    /* ---- Cost of inaction ---- */
    .risk-row { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; padding:20px 0; border-bottom:1px solid var(--line); }
    .risk-row:last-child { border-bottom:0; }
    .risk-row h3 { margin:0 0 6px; font-size:14px; font-weight:600; letter-spacing:-.02em; }
    .risk-row p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
    .risk-row .fix { padding-left:20px; border-left:1px solid var(--line); }
    .risk-row .fix span { display:block; margin-bottom:5px; color:var(--muted); font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }

    @media (max-width:1100px) {
      .pricing-grid { grid-template-columns:repeat(3,1fr); }
      .pricing-grid .price-card:nth-child(4) { grid-column:1; }
      .pricing-grid .price-card:nth-child(5) { grid-column:2 / span 2; }
    }
    @media (max-width:780px) {
      .pricing-grid, .pricing-grid.is-compact { grid-template-columns:1fr; }
      .pricing-grid .price-card:nth-child(n) { grid-column:auto; }
      .calc { padding:20px; }
      .calc-head { display:block; }
      .calc-result { margin-top:18px; text-align:left; }
      .calc-scale span:nth-child(even) { display:none; }
      .risk-row { grid-template-columns:1fr; gap:14px; }
      .risk-row .fix { padding-left:0; padding-top:12px; border-left:0; border-top:1px solid var(--line); }
    }

    /* ---- Upgrade ladder: control, not volume, moves you up a tier ---- */
    .ladder { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; margin-top:52px; border:1px solid var(--line); border-radius:var(--r-xl); background:var(--line); overflow:hidden; }
    .ladder-step { position:relative; padding:26px 22px 30px; background:var(--paper); transition:background var(--dur-base) var(--ease); }
    .ladder-step:hover { background:var(--tile); }
    .ladder-move { display:flex; align-items:center; gap:7px; color:var(--muted); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; }
    .ladder-move b { font-weight:400; color:var(--ink); }
    .ladder-move i { font-style:normal; opacity:.5; }
    .ladder-step h3 { margin:18px 0 10px; font-size:15px; font-weight:600; letter-spacing:-.022em; line-height:1.25; }
    .ladder-step p { margin:0; color:var(--muted); font-size:12px; line-height:1.62; }
    .ladder-step p b { color:var(--ink); font-weight:500; }
    .ladder-idx { position:absolute; right:18px; bottom:14px; color:var(--line); font-family:var(--font-mono); font-size:22px; letter-spacing:-.04em; }
    .tier-trigger { margin:0 0 18px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; line-height:1.55; }
    .tier-trigger span { display:block; margin-bottom:4px; color:var(--ink); font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
    @media (max-width:1100px) { .ladder { grid-template-columns:1fr 1fr; } }
    @media (max-width:780px) { .ladder { grid-template-columns:1fr; } }

    /* ================================================================
       DISPLAY TYPE.

       Large size, REGULAR weight, tight glyph kerning, then generous space
       between the words and around the block. The airiness comes from the
       whitespace; the precision comes from the tracking.

       The weight is the part people get wrong. Measured on the references:
       Linear's hero is 510 and Stripe's is 300 — both BELOW the 600 a
       template reaches for. Bold is not what makes display type expensive;
       size and space are, and weight only adds mass that then has to be
       fought with letter-spacing.

       Tracking stays at -.035em. The measured references sit near -.02em
       (Linear -.022em, Stripe -.02em), so this is tighter than either — but
       it is a deliberate house variation, not an accident, and it was
       briefly changed to -.028em here and put back. Recorded rather than
       silently re-tuned: if it is ever revisited, the reference numbers
       above are the comparison, and the decision is an aesthetic one.
       ================================================================ */
    .hero h1, .page-hero h1 {
      font-weight:400; letter-spacing:-.035em; line-height:.98; word-spacing:.04em;
    }
    .section h2, .final-cta h2, .prose h2, .quote blockquote, .dialog h2 {
      font-weight:400; letter-spacing:-.035em; line-height:1; word-spacing:.03em;
    }
    /* Capped so the line breaks fall inside the reading column instead of
       filling it edge to edge. A headline that reaches both gutters has no
       margin left to sit in, and the eye reads it as a banner rather than as
       a sentence. The ch-based max-width does the work; the clamp only
       stops it collapsing on small screens. */
    .hero h1 { max-width:14ch; margin:34px auto 26px; font-size:clamp(42px,5.6vw,64px); }
    .page-hero h1 { max-width:15ch; margin:28px 0 24px; font-size:clamp(38px,4.9vw,58px); }
    .section h2, .final-cta h2 { font-size:clamp(32px,4vw,50px); }

    /* Air around the block, which is where the "expensive" feeling actually lives. */
    .hero { padding-top:186px; }
    .hero-copy { margin-top:4px; font-size:16.5px; line-height:1.6; }
    .hero-actions { margin-top:38px; }
    .section-top { margin-bottom:6px; }
    .section-intro { margin-top:18px; line-height:1.62; }
    .page-hero .lede { margin-top:2px; font-size:16.5px; line-height:1.6; }

    @media (max-width:780px) {
      .hero { padding-top:132px; }
      .hero h1 { max-width:none; margin:26px auto 20px; }
      .page-hero h1 { max-width:none; }
    }

    /* ================================================================
       ACCESSIBILITY + RESPONSIVE TIER
       Appended last so it wins the cascade over the historical blocks.
       ================================================================ */

    /* --- Focus -------------------------------------------------------
       The site had ZERO :focus-visible rules in 90KB of CSS, and four
       declarations that removed the browser's ring outright (.field
       input, .field select, .command-input, .flow-node:focus). A
       keyboard user reaching the contact form or the command palette
       had no idea where they were — WCAG 2.4.7, and the two places it
       mattered most were the two places it was switched off.

       :focus-visible rather than :focus, so a mouse click on a button
       does not leave a ring behind. Two-tone: an ink ring with a paper
       gap, so it stays visible on white paper, on the --tile band, and
       on the dark --panel surfaces without needing a variant per
       context. Colour is deliberately NOT one of the four state hues —
       a focus ring is not a verdict. */
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
      border-radius: var(--r-xs);
    }
    /* The dark surfaces invert it — an ink ring on #09090b is invisible. */
    :where(.panel, .terminal, .flow-core, .telemetry, .copy-card, .toast, .cvx-frame)
      :where(a, button, input, [tabindex]):focus-visible {
      outline-color: var(--paper);
    }
    /* Restore what was explicitly removed. */
    .field input:focus-visible, .field select:focus-visible,
    .command-input:focus-visible, .flow-node:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }

    /* Skip link: 115 focusable elements sit between the top of the page
       and the main content, which is a long way to Tab past on every
       navigation. Hidden until focused. */
    .skip-link {
      position: absolute; z-index: 200; top: 8px; left: 8px;
      padding: 10px 14px; border-radius: var(--r-xs);
      background: var(--ink); color: var(--paper);
      font-size: 13px; font-weight: 550;
      transform: translateY(-150%);
      transition: transform var(--dur-base) var(--ease);
    }
    .skip-link:focus-visible { transform: none; }

    /* The footer status became a link when the unverifiable "All Engines
       Operational" claim was removed; a link needs to look like one. */
    a.uptime { transition: color var(--dur-micro) var(--ease); }
    a.uptime:hover { color: var(--ink); }

    /* --- Responsive: the missing middle -----------------------------
       Breakpoints ran 1100 -> 980 -> 780. Between a laptop and a phone
       there was effectively nothing, so a tablet in portrait got the
       desktop grid squeezed rather than a layout meant for it. These
       are the tiers that were absent, not a re-do of the ones present. */

    /* Tablet landscape / small laptop. */
    @media (max-width: 1024px) {
      :root { --header-h: 58px; }
      .container { padding: 0 28px; }
      /* Five pricing columns cannot survive this width; two rows read
         better than five slivers. */
      .pricing-grid { grid-template-columns: repeat(3, 1fr); }
      .bento { grid-template-columns: repeat(2, 1fr); }
      .faq-layout { grid-template-columns: 1fr; gap: 32px; }
    }

    /* Tablet portrait. */
    @media (max-width: 900px) {
      .pricing-grid { grid-template-columns: repeat(2, 1fr); }
      .flow { grid-template-columns: 1fr; gap: 24px; min-height: 0; }
      /* The connecting rail is drawn between three columns; with one
         column it points at nothing. */
      .flow-rail { display: none; }
    }

    /* Phone. The 780 tier existed but stopped at wrapping the hero
       actions — everything below is what it did not cover. */
    @media (max-width: 620px) {
      .container { padding: 0 20px; }
      .pricing-grid, .bento { grid-template-columns: 1fr; }
      .hero h1 { max-width: none; }
      .contact-form { grid-template-columns: 1fr; }
      .field.full, .contact-form .button { grid-column: auto; }
      /* Tables do not reflow; give them their own scroll rather than
         letting one push the whole page sideways. */
      .table-wrap, .grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      table.grid { min-width: 520px; }
      /* Touch targets: 42px controls are below the 44px guideline. */
      .button { height: 46px; }
      /* The rotating hero word reserves width in ch for desktop line
         breaks; on a phone that reservation causes overflow. */
      .word-wrap.wide-words { min-width: 0; }
    }

    /* --- Reduced motion ---------------------------------------------
       Four blocks already handled the scroll reveals. These are the
       looping, attention-seeking animations they did not cover: a
       decorative loop that never stops is the exact thing this media
       query exists for, and "infinite" is the tell. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
      }
      .demo-window, .flow-core:before, .core-status:before,
      .code-main:after, .orb { animation: none !important; }
      html { scroll-behavior: auto; }
    }

    /* ================================================================
       HERO DEMONSTRATION
       Markup in index.html / sandbox.html, behaviour in
       assets/hero-demo.js, engine in assets/policy-engine.js.

       WHY THIS SURFACE IS DARK ON A LIGHT PAGE
       ----------------------------------------
       The design system already answers this: the marketing site is paper and
       the console is black, "because a runtime log on white reads as a document
       rather than as a live system". This panel IS the console — a real
       evaluation, running as you watch — so it takes the console's surface.
       The contrast against the paper page is the point: it reads as a window
       into the product rather than as one more marketing card.

       THE FOUR STATE COLOURS, ON BLACK
       --------------------------------
       The `--state-*` tokens are tuned for printable contrast on white and go
       muddy on near-black. These are the same four meanings at a luminance that
       works here. They stay verdict-only: nothing decorative in this panel
       borrows them, which is why the frame, the stage list and the rule list
       are all neutral until the engine actually decides something.
       ================================================================ */
    .cvx {
      --cvx-bg:#0b0b0d;
      --cvx-raised:#141417;
      --cvx-line:rgba(255,255,255,.10);
      --cvx-line-soft:rgba(255,255,255,.055);
      --cvx-ink:#f4f4f5;
      --cvx-muted:#a1a1aa;
      --cvx-faint:#71717a;

      --cvx-permit:#00e58c;  --cvx-permit-wash:rgba(0,229,140,.10);
      --cvx-deny:#ff6b6b;    --cvx-deny-wash:rgba(255,107,107,.10);
      --cvx-hold:#f5b23d;    --cvx-hold-wash:rgba(245,178,61,.10);
      --cvx-route:#6ba4ff;   --cvx-route-wash:rgba(107,164,255,.10);

      height:auto; perspective:none;
    }

    .cvx-frame {
      border:1px solid var(--cvx-line); border-radius:var(--r-md);
      background:var(--cvx-bg); color:var(--cvx-ink);
      font-family:var(--font-mono); overflow:hidden;
    }

    .cvx-top {
      display:flex; align-items:center; justify-content:space-between; gap:16px;
      padding:10px 14px; border-bottom:1px solid var(--cvx-line);
      background:var(--cvx-raised); font-size:10px; letter-spacing:.06em;
    }
    .cvx-top-id { color:var(--cvx-muted); }
    .cvx-top-live { color:var(--cvx-faint); }
    .cvx-top-meta { display:flex; align-items:center; gap:12px; min-width:0; }

    /* --- Autoplay control -------------------------------------------- *
     * The panel walks itself, so it owes the visitor two things: a visible
     * statement that it is moving on purpose, and a way to stop it. The dot
     * carries state, the hairline carries time-until-next. Both are small
     * enough to ignore and specific enough to trust.                      */
    .cvx-auto {
      display:inline-flex; align-items:center; gap:7px;
      padding:3px 8px; border:1px solid var(--cvx-line); border-radius:var(--pill);
      background:transparent; color:var(--cvx-faint);
      font:9px var(--font-mono); letter-spacing:.1em; text-transform:uppercase;
      cursor:pointer; white-space:nowrap;
      transition:color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
    }
    .cvx-auto:hover { color:var(--cvx-ink); border-color:rgba(255,255,255,.28); }
    .cvx-auto[hidden] { display:none; }

    .cvx-auto-ico { width:5px; height:5px; border-radius:50%; background:var(--cvx-permit); flex:none; }
    .cvx-auto.is-playing .cvx-auto-ico { animation:cvx-auto-pulse 2.1s ease-in-out infinite; }
    .cvx-auto.is-paused  .cvx-auto-ico { background:transparent; box-shadow:inset 0 0 0 1px var(--cvx-faint); }
    .cvx-auto.is-manual  .cvx-auto-ico { background:var(--cvx-faint); }

    .cvx-auto-next { color:var(--cvx-muted); text-transform:none; letter-spacing:.04em; }
    .cvx-auto-next:empty { display:none; }

    /* Scale rather than width: width animation on a 1px bar lands on
       fractional device pixels and stutters; a transform does not. */
    .cvx-auto-bar { width:26px; height:1px; background:rgba(255,255,255,.14); flex:none; overflow:hidden; }
    .cvx-auto-bar i { display:block; width:100%; height:100%; background:var(--cvx-permit);
                      transform:scaleX(0); transform-origin:0 50%; }
    .cvx-auto.is-playing .cvx-auto-bar i { animation:cvx-auto-fill linear forwards; }
    .cvx-auto.is-manual .cvx-auto-bar { opacity:0; }

    @keyframes cvx-auto-pulse { 0%,100% { opacity:1 } 50% { opacity:.32 } }
    @keyframes cvx-auto-fill  { from { transform:scaleX(0) } to { transform:scaleX(1) } }

    .cvx-grid { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,.86fr) minmax(0,1.22fr); }
    .cvx-col { padding:16px 16px 18px; min-width:0; }
    .cvx-col + .cvx-col { border-left:1px solid var(--cvx-line-soft); }

    .cvx-h {
      margin:0 0 12px; color:var(--cvx-faint);
      font-size:9px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
    }
    .cvx-sub {
      display:block; margin:14px 0 7px; color:var(--cvx-faint);
      font-size:9px; letter-spacing:.13em; text-transform:uppercase;
    }

    /* --- Request ----------------------------------------------------- */
    .cvx-fields { margin:0; display:grid; gap:1px; }
    .cvx-field { display:grid; grid-template-columns:78px minmax(0,1fr); gap:8px; align-items:center; padding:3px 0; }
    .cvx-field dt { color:var(--cvx-faint); font-size:10px; }
    .cvx-field dd { margin:0; min-width:0; color:var(--cvx-ink); font-size:11px; overflow-wrap:anywhere; }
    .cvx-field-input dd { display:block; }

    .cvx-field input {
      width:100%; padding:5px 7px; border:1px solid var(--cvx-line); border-radius:var(--r-xs);
      background:#000; color:var(--cvx-ink);
      font:11px var(--font-mono);
    }
    .cvx-field input:hover { border-color:rgba(255,255,255,.2); }
    /* This rule had `outline:0`, which silently defeated the site-wide focus
       ring: `.cvx-field input` is (0,1,1) and the global
       `:where(...):focus-visible` is (0,1,0), so the more specific selector
       won and the one control a visitor actually types into had no keyboard
       indicator. Restated explicitly rather than removed, so the next person
       to reach for `outline:0` here sees why it is not there. */
    .cvx-field input:focus-visible {
      outline:2px solid var(--cvx-ink); outline-offset:2px; border-color:transparent;
    }

    /* The origin is load-bearing on two scenarios: the call was not made by the
       operator, it was made by content the agent read. */
    [data-cvx-origin-row].is-untrusted dd { color:var(--cvx-hold); }

    .cvx-hint { margin:8px 0 0; color:var(--cvx-faint); font-size:10px; line-height:1.5; }
    .cvx-hint code { color:var(--cvx-muted); }
    .cvx-note {
      margin:9px 0 0; padding:7px 9px; border-left:2px solid var(--cvx-hold);
      background:var(--cvx-hold-wash); color:var(--cvx-muted);
      font-size:10px; line-height:1.55;
    }

    .cvx-presets { display:flex; flex-wrap:wrap; gap:5px; margin-top:14px; }
    .cvx-preset {
      padding:5px 9px; border:1px solid var(--cvx-line); border-radius:var(--pill);
      background:transparent; color:var(--cvx-muted);
      font:10px var(--font-mono); cursor:pointer;
      transition:color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease),
                 background var(--dur-micro) var(--ease);
    }
    .cvx-preset:hover { color:var(--cvx-ink); border-color:rgba(255,255,255,.28); }
    .cvx-preset.is-active { color:#000; background:var(--cvx-ink); border-color:var(--cvx-ink); }

    /* --- Pipeline ---------------------------------------------------- */
    .cvx-stages { list-style:none; margin:0; padding:0; display:grid; gap:1px; }
    .cvx-stage {
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      padding:4px 7px; border-radius:var(--r-xs);
      color:var(--cvx-faint); font-size:10.5px;
      opacity:.4;
      transition:opacity var(--dur-base) var(--ease), color var(--dur-base) var(--ease),
                 background var(--dur-base) var(--ease);
    }
    .cvx-stage:before { content:"\25CB"; margin-right:2px; font-size:9px; color:inherit; }
    .cvx-stage-n { flex:1; min-width:0; }
    .cvx-stage-t { color:var(--cvx-faint); font-size:9.5px; font-variant-numeric:tabular-nums; }

    .cvx-stage.is-done { opacity:1; color:var(--cvx-muted); }
    .cvx-stage.is-done:before { content:"\25CF"; color:var(--cvx-permit); }
    .cvx-stage.is-active { background:rgba(255,255,255,.05); color:var(--cvx-ink); }
    /* A stage that did not apply says so, rather than reporting a time it never
       spent. `approval` runs only on a hold; `sanitize` only on a match. */
    .cvx-stage.is-skipped { opacity:.5; }
    .cvx-stage.is-skipped:before { content:"\2013"; color:var(--cvx-faint); }

    .cvx-order {
      margin:12px 0 0; padding-top:10px; border-top:1px solid var(--cvx-line-soft);
      color:var(--cvx-faint); font-size:9.5px; line-height:1.6;
    }
    .cvx-order em { color:var(--cvx-muted); font-style:normal; }
    .cvx-order code { color:var(--cvx-muted); }

    .cvx-total {
      display:flex; justify-content:space-between; align-items:baseline;
      margin:10px 0 0; color:var(--cvx-faint); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
    }
    .cvx-total b { color:var(--cvx-ink); font-size:12px; font-variant-numeric:tabular-nums; letter-spacing:0; }

    /* --- Decision ---------------------------------------------------- */
    .cvx-verdict {
      padding:12px; border:1px solid var(--cvx-line); border-radius:var(--r-sm);
      background:var(--cvx-raised);
      transition:border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
    }
    .cvx-verdict-label {
      display:block; font-size:19px; letter-spacing:-.02em; line-height:1;
      color:var(--cvx-muted);
      transition:color var(--dur-base) var(--ease);
    }
    .cvx-verdict-rule { display:block; margin-top:5px; color:var(--cvx-muted); font-size:10.5px; }
    .cvx-verdict-reason { margin:9px 0 0; color:var(--cvx-muted); font-size:10.5px; line-height:1.6; }
    .cvx-verdict-rem {
      margin:8px 0 0; padding:7px 8px; border-radius:var(--r-xs);
      background:rgba(255,255,255,.04); color:var(--cvx-muted); font-size:10px; line-height:1.55;
    }

    .cvx-verdict.is-permit { border-color:rgba(0,229,140,.34); background:var(--cvx-permit-wash); }
    .cvx-verdict.is-permit .cvx-verdict-label { color:var(--cvx-permit); }
    .cvx-verdict.is-deny   { border-color:rgba(255,107,107,.34); background:var(--cvx-deny-wash); }
    .cvx-verdict.is-deny .cvx-verdict-label { color:var(--cvx-deny); }
    .cvx-verdict.is-hold   { border-color:rgba(245,178,61,.34); background:var(--cvx-hold-wash); }
    .cvx-verdict.is-hold .cvx-verdict-label { color:var(--cvx-hold); }

    .cvx-risk-level { font-size:11px; font-weight:500; color:var(--cvx-muted); }
    .cvx-risk-level.is-low { color:var(--cvx-permit); }
    .cvx-risk-level.is-medium { color:var(--cvx-muted); }
    .cvx-risk-level.is-high { color:var(--cvx-hold); }
    .cvx-risk-level.is-critical { color:var(--cvx-deny); }
    .cvx-risk .cvx-sub { display:inline-block; margin-right:8px; }

    .cvx-signals { list-style:none; margin:7px 0 0; padding:0; display:grid; gap:4px; }
    .cvx-signal { color:var(--cvx-faint); font-size:9.5px; line-height:1.5; }
    .cvx-signal b { display:block; color:var(--cvx-muted); font-weight:500; }
    .cvx-signal.is-critical b { color:var(--cvx-deny); }
    .cvx-signal.is-high b { color:var(--cvx-hold); }
    .cvx-signal.is-none { font-style:italic; }

    .cvx-rules { list-style:none; margin:0; padding:0; display:grid; gap:2px; max-height:132px; overflow:auto; }
    .cvx-rule {
      display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:7px; align-items:center;
      color:var(--cvx-faint); font-size:9.5px;
    }
    .cvx-rule-mark { color:var(--cvx-faint); }
    .cvx-rule-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cvx-rule-effect { color:var(--cvx-faint); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; }
    .cvx-rule.is-matched { color:var(--cvx-ink); }
    .cvx-rule.is-matched .cvx-rule-mark { color:var(--cvx-deny); }
    .cvx-considered-note { margin:8px 0 0; color:var(--cvx-faint); font-size:9px; line-height:1.5; }

    /* --- Approval ---------------------------------------------------- */
    .cvx-approval {
      display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
      padding:10px 14px; border-top:1px solid var(--cvx-line);
      background:var(--cvx-hold-wash);
      font-size:10.5px; color:var(--cvx-muted);
    }
    .cvx-approval b { color:var(--cvx-hold); font-weight:500; }
    .cvx-approval-btns { display:flex; gap:6px; }
    .cvx-btn {
      padding:5px 11px; border:1px solid var(--cvx-line); border-radius:var(--pill);
      background:transparent; color:var(--cvx-ink);
      font:10px var(--font-mono); cursor:pointer;
      transition:background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease),
                 color var(--dur-micro) var(--ease);
    }
    .cvx-btn-yes:hover { border-color:var(--cvx-permit); color:var(--cvx-permit); }
    .cvx-btn-no:hover  { border-color:var(--cvx-deny); color:var(--cvx-deny); }

    /* --- Audit ------------------------------------------------------- */
    .cvx-audit {
      display:flex; align-items:center; gap:14px; flex-wrap:wrap;
      padding:9px 14px; border-top:1px solid var(--cvx-line);
      background:#000; color:var(--cvx-faint); font-size:9.5px;
    }
    .cvx-audit .cvx-sub { display:inline; margin:0; }
    .cvx-audit code { color:var(--cvx-muted); }
    .cvx-audit-ok { color:var(--cvx-faint); }
    .cvx-audit-ok.is-ok { color:var(--cvx-permit); }
    .cvx-audit-log { display:none; }

    /* --- Adoption strip ----------------------------------------------
       Sits directly under the densest part of the panel on purpose. The
       juxtaposition is the argument: this much machinery, one line to adopt. */
    .cvx-adopt {
      display:flex; align-items:center; gap:12px; flex-wrap:wrap;
      padding:11px 14px; border-top:1px solid var(--cvx-line);
      background:var(--cvx-raised); font-size:10px; color:var(--cvx-faint);
    }
    .cvx-adopt code { color:var(--cvx-ink); font-size:11px; }

    /* Screen-reader target for the settled verdict. */
    .cvx-sr {
      position:absolute; width:1px; height:1px; margin:-1px; padding:0;
      overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
    }

    /* --- Responsive --------------------------------------------------- */
    @media (max-width:1024px) {
      .cvx-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
      /* Decision spans the full second row: it is the answer, and it carries
         the most text. */
      .cvx-dec { grid-column:1 / -1; border-left:0; border-top:1px solid var(--cvx-line-soft); }
    }
    /* --- Account (account.html) --------------------------------------- *
     * A signed-in surface on a marketing site, so it borrows the site's paper
     * and hairlines rather than the console's black. The only chroma is the
     * execution-state palette the rest of the product already uses, so a DENY
     * here is the same red as a DENY in the hero.                          */

    .acct-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px; }
    /* Was an <h1>, which made two on the page; demoted to <h2> and given a
       deliberate size so it no longer renders at the browser default weight. */
    .acct-head h2 { margin:0; font-size:27px; line-height:1.1; letter-spacing:-.03em; font-weight:520; }
    .acct-who { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:10px 0 0; color:var(--muted); font-size:14px; }
    .acct-role {
      padding:2px 8px; border:1px solid var(--line); border-radius:var(--pill);
      font:9.5px var(--font-mono); letter-spacing:.11em; text-transform:uppercase;
    }

    .acct-card {
      padding:20px 22px; margin:0 0 14px;
      border:1px solid var(--line); border-radius:var(--r-sm);
      background:rgba(255,255,255,.5);
    }
    .acct-card-top {
      display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
      gap:12px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--soft-line);
    }
    .acct-card-top h2 { font-size:17px; font-weight:560; letter-spacing:-.016em; color:var(--ink); }
    .acct-sub { color:var(--muted); font-size:12px; }
    .acct-sub b { color:var(--ink); font-weight:560; }

    /* A card that has not answered yet dims rather than collapsing, so the
       page does not jump as each section lands independently. */
    .acct-card[data-state="loading"] { opacity:.55; }

    .acct-pill {
      padding:3px 10px; border-radius:var(--pill);
      font:9.5px var(--font-mono); letter-spacing:.11em; text-transform:uppercase;
    }
    .acct-pill.is-ok { color:#0b6e4c; background:rgba(0,180,110,.11); border:1px solid rgba(0,150,95,.28); }
    .acct-pill.is-warn { color:#8a5a06; background:rgba(220,160,40,.12); border:1px solid rgba(190,140,30,.3); }

    .acct-figs { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px 22px; }
    .acct-fig { display:grid; gap:5px; }
    .acct-fig span {
      color:var(--muted); font:9.5px var(--font-mono);
      letter-spacing:.12em; text-transform:uppercase;
    }
    .acct-fig b {
      font-size:21px; font-weight:500; letter-spacing:-.02em; color:var(--ink);
      font-variant-numeric:tabular-nums;
    }

    /* Width from a custom property so the fill can be set without touching
       the markup, and transitions when the number changes. */
    .acct-bar {
      --acct-fill:0%;
      height:5px; margin:0 0 18px; border-radius:var(--pill);
      background:rgba(17,17,15,.09); overflow:hidden;
    }
    .acct-bar i {
      display:block; width:var(--acct-fill); height:100%;
      background:#0f8a5f; transition:width .5s var(--ease);
    }
    .acct-bar.is-full i { background:#b4413c; }

    .acct-note { margin:14px 0 0; max-width:66ch; color:var(--muted); font-size:12.5px; line-height:1.65; }
    .acct-note.is-warn { color:#8a5a06; }
    .acct-actions { margin:18px 0 0; }
    .acct-err { margin:0; color:#a8322f; font-size:13px; }
    .acct-empty { margin:0; color:var(--muted); font-size:13px; }
    .acct-h3 {
      margin:22px 0 10px; color:var(--muted);
      font:9.5px var(--font-mono); letter-spacing:.12em; text-transform:uppercase;
    }
    .acct-mono { font-family:var(--font-mono); font-size:12px; }
    .acct-right { text-align:right; }

    .acct-btn, .acct-link-btn {
      border:1px solid var(--line); border-radius:var(--pill);
      background:transparent; color:var(--ink);
      font:11px var(--font-mono); cursor:pointer;
      transition:border-color .18s ease, background .18s ease;
    }
    .acct-btn { padding:6px 13px; }
    .acct-btn:hover { border-color:rgba(17,17,15,.3); background:rgba(255,255,255,.7); }
    .acct-btn:disabled { opacity:.5; cursor:default; }
    .acct-link-btn { padding:3px 9px; color:var(--muted); }
    .acct-link-btn:hover { color:#a8322f; border-color:rgba(168,50,47,.4); }

    .acct-table { width:100%; border-collapse:collapse; font-size:13px; }
    .acct-table th {
      padding:0 10px 8px 0; text-align:left; color:var(--muted);
      font:9.5px var(--font-mono); letter-spacing:.12em; text-transform:uppercase; font-weight:400;
    }
    .acct-table td { padding:9px 10px 9px 0; border-top:1px solid var(--soft-line); color:var(--ink); }
    .acct-table td:last-child, .acct-table th:last-child { padding-right:0; }

    .acct-secret {
      padding:12px 14px; margin-bottom:4px;
      border-radius:var(--r-xs); background:#0b0b0d;
      overflow-x:auto;
    }
    .acct-secret code { font:12.5px var(--font-mono); color:#f4f4f5; }

    .acct-decs { display:grid; gap:1px; margin:0; padding:0; list-style:none; }
    .acct-dec {
      display:grid; grid-template-columns:62px 108px minmax(0,1fr) auto;
      gap:12px; align-items:baseline; padding:7px 0;
      border-top:1px solid var(--soft-line); font-size:12.5px;
    }
    .acct-dec-v { font:9.5px var(--font-mono); letter-spacing:.1em; color:var(--muted); }
    .acct-dec.is-permit .acct-dec-v { color:#0b6e4c; }
    .acct-dec.is-deny .acct-dec-v { color:#a8322f; }
    .acct-dec.is-hold .acct-dec-v { color:#8a5a06; }
    .acct-dec-a { color:var(--ink); font-family:var(--font-mono); font-size:11.5px; }
    .acct-dec-r {
      color:var(--muted); font-family:var(--font-mono); font-size:11.5px;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .acct-dec-t { color:var(--muted); font-size:11px; white-space:nowrap; }

    @media (max-width:720px) {
      .acct-dec { grid-template-columns:56px minmax(0,1fr); }
      .acct-dec-r, .acct-dec-t { grid-column:span 2; }
      .acct-table { font-size:12px; }
    }

    /* --- Activation (welcome.html) ------------------------------------ *
     * A light interior page like the rest of the site, with the command
     * blocks in the console's dark treatment — the customer is about to paste
     * them into a terminal, and matching the terminal is the honest cue.
     * The only chroma is the execution-state palette already used by the hero
     * demo, so "active" here is the same green as a PERMIT there.           */

    .wel-state {
      padding:18px 20px; margin:0 0 14px;
      border:1px solid var(--line); border-left:2px solid var(--muted);
      border-radius:var(--r-xs); background:rgba(255,255,255,.42);
    }
    .wel-state-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
    .wel-state-head b { font-size:16px; font-weight:560; letter-spacing:-.01em; color:var(--ink); }
    .wel-state p { margin:8px 0 0; max-width:64ch; color:var(--muted); font-size:14px; line-height:1.65; }

    .wel-state-live { border-left-color:#0f8a5f; background:rgba(0,180,110,.06); }
    .wel-state-live .wel-state-head b { color:#0b6e4c; }
    .wel-state-slow { border-left-color:#b07f1c; background:rgba(220,160,40,.07); }
    .wel-state-wait { border-left-color:var(--ink); }

    .wel-confirmed {
      color:var(--muted); font:10px var(--font-mono);
      letter-spacing:.1em; text-transform:uppercase;
    }
    .wel-ref { font-size:12.5px; }
    .wel-ref code { color:var(--ink); }

    /* Breathing rather than spinning: this is a wait for something to arrive,
       not work being done here. */
    .wel-pulse {
      width:7px; height:7px; border-radius:var(--pill);
      background:var(--ink); animation:wel-pulse 1.9s ease-in-out infinite;
    }
    @keyframes wel-pulse { 0%,100% { opacity:1 } 50% { opacity:.25 } }

    .wel-kpis {
      display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
      margin:0 0 34px; border:1px solid var(--line); background:var(--line);
      border-radius:var(--r-xs); overflow:hidden;
    }
    .wel-kpi { display:grid; gap:6px; padding:14px 16px; background:var(--paper); }
    .wel-kpi span {
      color:var(--muted); font:9.5px var(--font-mono);
      letter-spacing:.12em; text-transform:uppercase;
    }
    .wel-kpi b {
      font-size:22px; font-weight:500; letter-spacing:-.02em; color:var(--ink);
      font-variant-numeric:tabular-nums;
    }

    .wel-step { padding-top:28px; border-top:1px solid var(--soft-line); margin-top:28px; }
    .wel-step:first-of-type { border-top:0; }
    .wel-step h2 {
      display:flex; align-items:baseline; gap:11px;
      font-size:19px; font-weight:560; letter-spacing:-.018em; color:var(--ink);
    }
    .wel-n {
      display:inline-flex; align-items:center; justify-content:center;
      width:21px; height:21px; flex:none; border-radius:var(--pill);
      background:var(--ink); color:var(--paper);
      font:10px var(--font-mono); font-variant-numeric:tabular-nums;
    }
    .wel-step > p { margin:9px 0 0; max-width:64ch; color:var(--muted); font-size:14px; line-height:1.65; }

    .wel-cmd {
      display:flex; align-items:flex-start; gap:12px;
      margin-top:13px; padding:13px 14px;
      border:1px solid rgba(255,255,255,.1); border-radius:var(--r-xs);
      background:#0b0b0d; color:#f4f4f5;
    }
    .wel-cmd pre, .wel-cmd code {
      flex:1; min-width:0; margin:0; overflow-x:auto;
      font:12.5px/1.75 var(--font-mono); color:#f4f4f5; white-space:pre;
    }
    .wel-copy {
      flex:none; padding:4px 9px; border:1px solid rgba(255,255,255,.18);
      border-radius:var(--r-xs); background:transparent; color:#a1a1aa;
      font:10px var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
      cursor:pointer; transition:color .18s ease, border-color .18s ease;
    }
    .wel-copy:hover { color:#f4f4f5; border-color:rgba(255,255,255,.4); }

    .wel-warn { margin:8px 0 0; color:#8a5a06; font-size:12.5px; }
    .wel-error { margin-left:10px; color:#a8322f; font-size:13px; }
    .wel-foot { margin:16px 0 0; color:var(--muted); font-size:12.5px; line-height:1.65; }
    .wel-foot code { color:var(--ink); }

    .wel-next { padding-top:28px; border-top:1px solid var(--soft-line); margin-top:34px; }
    .wel-next h2 { font-size:19px; font-weight:560; letter-spacing:-.018em; color:var(--ink); }
    .wel-next a {
      display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
      margin-top:8px; padding:11px 14px;
      border:1px solid var(--line); border-radius:var(--r-xs);
      transition:border-color .18s ease, background .18s ease;
    }
    .wel-next a:hover { border-color:rgba(17,17,15,.28); background:rgba(255,255,255,.5); }
    .wel-next a b { font-size:14px; font-weight:540; color:var(--ink); }
    .wel-next a span { color:var(--muted); font-size:12.5px; }

    @media (max-width:720px) {
      .wel-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .wel-cmd { flex-direction:column; }
      .wel-copy { align-self:flex-end; }
    }

    /* --- Demo motion -------------------------------------------------- *
     * The pipeline is the animation. Everything here is under 420ms and keyed
     * to something that actually happened — a stage completing, a verdict
     * landing, a row joining the chain — so tightening the tour reads as
     * quicker rather than busier. Nothing loops; nothing moves that is not
     * reporting a change.                                                    */

    /* The stage fade has to keep up with a 58ms stagger. On the shared
       --dur-base token the eight rows cross-fade into each other and the
       travelling head turns to mush. */
    .cvx-stage {
      position:relative; overflow:hidden;
      transition:opacity 150ms var(--ease), color 150ms var(--ease),
                 background 150ms var(--ease);
    }

    /* One pass of light per stage. Bound to .is-active, which moves down the
       list one row at a time, so it reads as a head travelling through the
       pipeline instead of eight things blinking at once. */
    .cvx-stage.is-active:after {
      content:""; position:absolute; inset:0; pointer-events:none;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.11) 45%, transparent);
      animation:cvx-sweep .42s var(--ease) 1;
    }

    /* Transform needs a block box; the marker is an inline pseudo by default. */
    .cvx-stage:before { display:inline-block; }
    .cvx-stage.is-done:before { animation:cvx-tick .28s var(--ease) 1; }
    /* Newly matching a descendant selector starts the animation, so adding
       .is-done to the row is what reveals its measured time. */
    .cvx-stage.is-done .cvx-stage-t { animation:cvx-fade-in .25s var(--ease) 1; }

    /* The verdict is the payload. .is-settled is cleared at the top of every
       run and set again at the end, which restarts these without a reflow. */
    [data-cvx-demo].is-settled .cvx-verdict { animation:cvx-verdict-in .34s var(--ease) 1; }
    [data-cvx-demo].is-settled .cvx-verdict-label { animation:cvx-label-in .40s var(--ease) 1; }
    [data-cvx-demo].is-settled .cvx-total b { animation:cvx-fade-in .3s var(--ease) 1; }

    /* Rules and signals are rebuilt from scratch on every render, so a plain
       entrance fires on its own. The stagger is capped at six steps because
       past that the last row lands after the verdict and reads as lag. */
    .cvx-rule, .cvx-signal { animation:cvx-row-in .26s var(--ease) both; }
    .cvx-rule:nth-child(1),   .cvx-signal:nth-child(1)   { animation-delay:0ms; }
    .cvx-rule:nth-child(2),   .cvx-signal:nth-child(2)   { animation-delay:24ms; }
    .cvx-rule:nth-child(3),   .cvx-signal:nth-child(3)   { animation-delay:48ms; }
    .cvx-rule:nth-child(4),   .cvx-signal:nth-child(4)   { animation-delay:72ms; }
    .cvx-rule:nth-child(5),   .cvx-signal:nth-child(5)   { animation-delay:96ms; }
    .cvx-rule:nth-child(n+6), .cvx-signal:nth-child(n+6) { animation-delay:120ms; }

    /* The matched rule is the one that decided it. It gets a beat the others
       do not, because "which rule fired" is the answer the panel exists to give. */
    .cvx-rule.is-matched {
      animation:cvx-row-in .26s var(--ease) both, cvx-matched .55s var(--ease) .12s 1;
    }

    /* Only the newest chain entry animates. Re-animating all five on append
       would make the log look like it rewrote itself, which is precisely the
       claim a hash chain is there to refute. */
    .cvx-audit-row:first-child { animation:cvx-row-in .3s var(--ease) 1; }

    @keyframes cvx-sweep      { from { transform:translateX(-100%) } to { transform:translateX(100%) } }
    @keyframes cvx-tick       { 0% { transform:scale(.4); opacity:.35 } 60% { transform:scale(1.28) } 100% { transform:scale(1); opacity:1 } }
    @keyframes cvx-fade-in    { from { opacity:0 } to { opacity:1 } }
    @keyframes cvx-row-in     { from { opacity:0; transform:translateY(3px) } to { opacity:1; transform:none } }
    @keyframes cvx-verdict-in { from { opacity:.55; transform:scale(.985) } to { opacity:1; transform:none } }
    @keyframes cvx-label-in   { from { opacity:0; transform:translateY(5px) } to { opacity:1; transform:none } }
    @keyframes cvx-matched    { 0%,100% { background:transparent } 40% { background:rgba(255,255,255,.09) } }

    @media (max-width:620px) {
      .cvx-grid { grid-template-columns:minmax(0,1fr); }
      .cvx-col + .cvx-col { border-left:0; border-top:1px solid var(--cvx-line-soft); }
      .cvx-dec { grid-column:auto; }
      .cvx-field { grid-template-columns:66px minmax(0,1fr); }
      .cvx-rules { max-height:none; }
      .cvx-top-live { display:none; }
      .cvx-auto-next { display:none; }
      .cvx-preset { padding:7px 11px; }
    }

    /* Textarea added with the ported lead form; the original rule covered only
       input and select, so the message box rendered unstyled. */
    .field textarea {
      width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-xs);
      outline:none; background:#fff; color:var(--ink);
      font:12px Inter, ui-sans-serif, system-ui, sans-serif; line-height:1.5; resize:vertical;
    }
    .field textarea:focus-visible { border-color:var(--ink); outline:2px solid var(--ink); outline-offset:1px; }

    /* --- Client portal (ported) --------------------------------------
       Only the presentation is new; the DOM contract and the auth logic
       are production's, unchanged. */
    .portal-form .field { display:grid; gap:6px; margin-bottom:16px; }
    .portal-form label { color:var(--muted); font-size:11px; }
    .lead-top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
    .lead-row { padding:16px 0; border-bottom:1px solid var(--line); }
    .lead-row:last-child { border-bottom:0; }
    .lead-row h4 { margin:6px 0 4px; font-size:14px; font-weight:550; letter-spacing:-.02em; }
    .lead-row p { margin:6px 0 0; color:var(--muted); font-size:12.5px; line-height:1.6; }
    .lead-budget { color:var(--muted); font-weight:400; }
    .lead-status { padding:4px 8px; border:1px solid var(--line); border-radius:var(--r-xs);
      background:#fff; color:var(--ink); font:10px var(--font-mono); }
    .card-tag { display:inline-block; padding:3px 8px; border:1px solid var(--line);
      border-radius:var(--pill); color:var(--muted); font:9px var(--font-mono);
      letter-spacing:.06em; text-transform:uppercase; }
    .small { font-size:11.5px; line-height:1.6; }

    /* Booking entry point. [data-book] is rewritten to the configured Cal.com
       URL by cirvix.js — the same contract the production site used. */
    .book-alt { margin:14px 0 0; color:var(--muted); font-size:12px; }
    .book-link { color:var(--ink); text-decoration:underline; text-underline-offset:2px; }

    /* --- Early-access waitlist -----------------------------------------
       Distinct from .contact-form on purpose. That one is enterprise sales
       and goes to `leads`; this is self-serve and goes to `waitlist`. Two
       motions, two tables, two shapes of follow-up. */
    .wl-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; margin-top:44px; align-items:start; }
    .wl-limits h3 { font-size:15px; font-weight:520; letter-spacing:-.01em; margin:0 0 18px; }
    .wl-facts { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
    .wl-facts li { display:flex; gap:16px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--line); }
    .wl-facts b { flex:0 0 84px; font-family:var(--font-mono); font-size:15px; font-weight:400; letter-spacing:-.02em; }
    .wl-facts span { color:var(--muted); font-size:14px; line-height:1.5; }
    .wl-note { margin:20px 0 0; color:var(--muted); font-size:13px; line-height:1.65; }
    .wl-note b { color:var(--state-deny); font-weight:500; }

    .waitlist-form { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; margin:0; }
    .waitlist-form .field.full { grid-column:span 2; }
    .waitlist-form .opt { color:var(--muted); font-weight:400; }
    .waitlist-form button[type=submit] { grid-column:span 2; justify-self:start; }
    .wl-fine { grid-column:span 2; margin:0; color:var(--muted); font-size:12px; line-height:1.6; }

    .wl-tools { border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:9px 16px; }
    .wl-tools legend { padding:0; margin:0 0 10px; font-size:13px; color:var(--ink-soft); }
    .wl-tools label { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink-soft); cursor:pointer; }
    .wl-tools input { width:14px; height:14px; accent-color:var(--state-route); }

    /* The honeypot. Off-screen rather than display:none — some bots skip
       hidden inputs, and the point is that they fill it in. */
    .wl-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

    @media (max-width: 860px) {
      .wl-layout { grid-template-columns:1fr; gap:34px; }
      .waitlist-form { grid-template-columns:1fr; }
      .waitlist-form .field.full, .waitlist-form button[type=submit], .wl-fine { grid-column:span 1; }
    }

    /* --- Threat model --------------------------------------------------
       The diagram is inline SVG with no fills of its own beyond the tokens
       below, so it inherits the palette and stays legible if the neutral
       ramp is ever retuned. Chroma appears once, on the three "= deny"
       labels, because those are verdicts. */
    .tm-figure { margin:38px 0 0; }
    .tm-diagram { width:100%; height:auto; display:block; overflow:visible; }
    .tm-figure figcaption { margin-top:16px; color:var(--muted); font-size:13px; line-height:1.65; max-width:70ch; }

    .tm-zone rect { fill:var(--tile); stroke:var(--line-strong); stroke-width:1; }
    .tm-zone-core rect { fill:var(--paper); stroke:var(--ink); stroke-width:1.25; }
    .tm-zone-label { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; fill:var(--muted); }
    .tm-node { font-family:var(--font-sans); font-size:14px; font-weight:520; fill:var(--ink); letter-spacing:-.015em; }
    .tm-sub { font-family:var(--font-sans); font-size:11.5px; fill:var(--muted); }
    .tm-stage text { font-family:var(--font-mono); font-size:12px; fill:var(--ink-soft); }
    .tm-deny { fill:var(--state-deny); font-weight:500; }
    .tm-flow line { stroke:var(--ink-soft); stroke-width:1.1; color:var(--ink-soft); }
    .tm-edge { font-family:var(--font-mono); font-size:9px; fill:var(--muted); letter-spacing:.06em; }

    .tm-table { margin-top:32px; border-top:1px solid var(--line); }
    .tm-row { display:grid; grid-template-columns:1.1fr 1.1fr 1.6fr; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; align-items:baseline; }
    .tm-row.tm-head { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
    .tm-row span:first-child { font-weight:500; }
    .tm-row span:nth-child(2) { color:var(--ink-soft); }
    .tm-row span:last-child { color:var(--muted); }

    .tm-list { margin:30px 0 0; padding:0 0 0 22px; display:grid; gap:18px; }
    .tm-list li { font-size:14.5px; line-height:1.65; color:var(--muted); }
    .tm-list li b { color:var(--ink); font-weight:520; }
    .tm-mark { color:var(--ink); font-weight:500; }

    .tm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:32px; background:var(--line); border:1px solid var(--line); }
    .tm-card { background:var(--paper); padding:24px 22px; }
    .tm-card h3 { margin:0 0 10px; font-size:14.5px; font-weight:520; letter-spacing:-.015em; }
    .tm-card p { margin:0; color:var(--muted); font-size:13.5px; line-height:1.65; }

    @media (max-width: 900px) {
      .tm-grid { grid-template-columns:1fr; }
      .tm-row { grid-template-columns:1fr; gap:4px; padding:16px 0; }
      .tm-row.tm-head { display:none; }
      .tm-figure { overflow-x:auto; }
      .tm-diagram { min-width:760px; }
    }

    /* Get started — the activation path for a brand-new organisation. Numbered
       steps with copyable commands; a new user should never have to retype
       anything. Lives at the top of the account and disappears once the plan
       is no longer Free (the person has clearly activated). */
    .acct-steps { list-style:none; margin:0; padding:0; display:grid; gap:18px; }
    .acct-steps > li { display:grid; grid-template-columns:30px 1fr; gap:14px; align-items:start; }
    .acct-step-n {
      width:26px; height:26px; border-radius:50%; margin-top:1px;
      display:grid; place-items:center;
      border:1px solid var(--line); background:rgba(255,255,255,.65);
      font:11.5px var(--font-mono); color:var(--ink);
    }
    .acct-steps b { font-weight:560; letter-spacing:-.01em; }
    .acct-steps p { margin:3px 0 8px; color:var(--muted); font-size:12.5px; line-height:1.6; max-width:60ch; }
    .acct-code {
      display:inline-flex; align-items:center; gap:10px;
      padding:7px 12px; border:1px solid var(--line); border-radius:6px;
      background:rgba(17,17,15,.035); cursor:pointer;
      font:12px var(--font-mono); color:var(--ink);
      transition:border-color .18s var(--ease), background .18s var(--ease);
    }
    .acct-code:hover { border-color:rgba(17,17,15,.25); background:rgba(17,17,15,.055); }
    .acct-code:focus-visible { outline:2px solid var(--lime); outline-offset:2px; }
    .acct-code::after { content:'copy'; color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
    .acct-code.is-copied::after { content:'copied ✓'; color:#0b6e4c; }
    .acct-upgrade {
      margin:16px 0 0; padding-top:14px; border-top:1px solid var(--soft-line);
      color:var(--muted); font-size:12.5px;
    }
    .acct-upgrade a { color:var(--ink); font-weight:560; text-decoration:none; border-bottom:1px solid var(--line); }
    .acct-upgrade a:hover { border-bottom-color:var(--ink); }

/* ============================================================
   CIRVIX AgentControl console — dark operations surface.

   Scoped entirely under .ac-root so it cannot leak into the
   marketing pages, which stay light. The console is a different
   product surface with a different job: dense, low-contrast
   chrome so that the only saturated colour on screen is a
   verdict. In this product colour carries meaning, and spending
   it on decoration is spending it.

   THREE RULES THIS FILE KEEPS

   1. WEIGHTS 400 / 500 / 600 ONLY. Those are the three Geist
      cuts the site self-hosts. Asking for 450 or 620 does not
      fail — the browser synthesises it by smearing the 400, and
      every label set that way is very slightly blurred. The
      console was doing this on nine selectors, which is most of
      why its type read soft next to the marketing pages.

   2. COLOUR IS SIGNAL. The surface is neutral to about 90% of
      the pixels. Cyan means telemetry, violet means agent,
      green/amber/red mean allowed/held/blocked. Nothing is
      tinted because it looked nice.

   3. MOTION IS TRANSFORM AND OPACITY. Nothing here animates a
      width, a height or a colour on a hot path. The chart's
      continuous motion is two CSS keyframes on composited
      layers, so it costs the main thread nothing while a
      decision feed is scrolling above it.
   ============================================================ */
.ac-root {
  /* --- ground: pure deep black and graded obsidian layers ---- */
  --ac-bg: #030406;
  --ac-side-bg: #06070a;
  --ac-panel: #0b0d12;
  --ac-panel-2: #101319;
  --ac-panel-3: #151922;

  /* Borders carry the structure, so they are graded rather than
     one value used at three strengths. */
  --ac-line: rgba(255, 255, 255, .06);
  --ac-line-2: rgba(255, 255, 255, .10);
  --ac-line-3: rgba(255, 255, 255, .18);

  /* Neutrals: crisp high-contrast text against deep black */
  --ac-ink: #f8fafc;
  --ac-ink-2: #94a3b8;
  --ac-ink-3: #64748b;

  /* Strict Palette: Green (ok/accent), Yellow (warn/alerts), Blue (systems/links), Black (surfaces) */
  --ac-ok: #10b981;
  --ac-warn: #eab308;
  --ac-deny: #f59e0b;
  --ac-yellow: #facc15;

  /* Systems. Blue is telemetry, infrastructure and network; green is the primary accent. */
  --ac-cyan: #38bdf8;
  --ac-blue: #3b82f6;
  --ac-violet: #3b82f6;
  --ac-accent: #10b981;

  --ac-sans: var(--font-sans, Geist, "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif);
  --ac-mono: var(--font-mono, "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace);

  /* A single hairline of light along the top of every raised
     surface. It is the whole depth system: no drop shadows, no
     glass, just the one highlight that says "this is above that". */
  --ac-hair: inset 0 1px 0 rgba(255, 255, 255, .045);
  --ac-ease: cubic-bezier(.32, .72, 0, 1);
  --ac-sidew: 336px;

  position: relative;
  display: grid;
  grid-template-columns: var(--ac-sidew) minmax(0, 1fr);
  min-height: 100vh;
  margin: 0;
  background: var(--ac-bg);
  color: var(--ac-ink);
  font-family: var(--ac-sans);
  font-size: 13px;
  line-height: 1.5;
  font-feature-settings: "ss01", "cv05";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: grid-template-columns .26s var(--ac-ease);
}
.ac-root[data-side="collapsed"] { --ac-sidew: 62px; }
.ac-root a { color: inherit; text-decoration: none; }
.ac-root a:hover { color: var(--ac-ink); }
.ac-root .ac-side nav a { color: var(--ac-ink-2) !important; text-decoration: none; }
.ac-root .ac-side nav a:hover { background: var(--ac-panel-2); color: var(--ac-ink) !important; }
.ac-root .ac-side nav a.active { background: var(--ac-panel-2); color: var(--ac-ink) !important; box-shadow: var(--ac-hair); }
.ac-root .ac-side nav a .ac-navicon { color: var(--ac-ink-3) !important; }
.ac-root .ac-side nav a:hover .ac-navicon { color: var(--ac-ink-2) !important; }
.ac-root .ac-side nav a.active .ac-navicon { color: var(--ac-accent) !important; }
.ac-root .ac-tabs a { color: var(--ac-ink-3) !important; }
.ac-root .ac-tabs a:hover { color: var(--ac-ink-2) !important; background: var(--ac-panel-2); }
.ac-root .ac-tabs a.active { background: var(--ac-panel-2); color: var(--ac-ink) !important; box-shadow: var(--ac-hair); }
.ac-root .ac-crumb a { color: var(--ac-ink-3) !important; }
.ac-root .ac-crumb a:hover { color: var(--ac-ink) !important; }
.ac-root code, .ac-root kbd { font-family: var(--ac-mono); font-size: .92em; overflow-wrap: anywhere; }
.ac-root button { font-family: inherit; }
.ac-root :focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; border-radius: 7px; }
/* Geist self-hosts 400 / 500 / 600 and nothing else. The UA default for <b>,
   <strong> and headings is 700, which the browser fakes by smearing the 400 —
   and a faked weight is the single most common reason dark UI type looks
   soft. Pinning them to a real cut is most of this pass's "sharper type".
   :where() holds the specificity at zero, so every component rule below
   still overrides it. */
.ac-root :where(b, strong, h1, h2, h3, h4, th, dt) { font-weight: 500; }
/* Digits are compared down columns everywhere in this console, so
   they line up everywhere in this console. */
.ac-root { font-variant-numeric: tabular-nums; }

/* --- sidebar ------------------------------------------------ */
.ac-side {
  display: flex; flex-direction: column;
  padding: 0 10px 14px; border-right: 1px solid var(--ac-line);
  background: var(--ac-side-bg);
  position: sticky; top: 0; height: 100vh; overflow: hidden auto;
  scrollbar-gutter: stable;
  contain: paint;
}
.ac-side::-webkit-scrollbar { width: 9px; }
.ac-side::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .06); border-radius: 9px; border: 3px solid transparent; background-clip: content-box; }
.ac-side:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .11); background-clip: content-box; }

.ac-siderail { display: flex; align-items: center; justify-content: flex-end; gap: 2px; height: 42px; flex: 0 0 auto; }
.ac-root .ac-iconbtn {
  display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto;
  padding: 0; border: 0; border-radius: 8px; background: transparent;
  color: var(--ac-ink-3); cursor: pointer;
  transition: background .13s var(--ac-ease), color .13s var(--ac-ease);
}
.ac-root .ac-iconbtn:hover { background: var(--ac-panel-2); color: var(--ac-ink); }
.ac-root .ac-iconbtn:active { background: var(--ac-panel-3); }
.ac-iconbtn svg { width: 15px; height: 15px; }
.ac-iconbtn.is-on { color: var(--ac-ink); }

/* The connection light. It pulses only while the control plane is
   answering, so a dead ring is information rather than a missing
   animation. */
.ac-root .ac-ring { color: var(--ac-cyan); }
.ac-root .ac-ring svg { animation: ac-breathe 3.4s ease-in-out infinite; }
.ac-root .ac-ring.is-off { color: var(--ac-ink-3); }
.ac-root .ac-ring.is-off svg { animation: none; }
@keyframes ac-breathe { 50% { opacity: .45; } }

.ac-brandrow { display: flex; align-items: center; gap: 2px; padding: 2px 0 16px; flex: 0 0 auto; }
.ac-brand {
  display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto;
  padding: 5px 6px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ac-ink); font-size: 13.5px; text-align: left; cursor: pointer;
  transition: background .13s var(--ac-ease);
}
.ac-brand:hover { background: var(--ac-panel-2); }
.ac-brand b { font-weight: 600; letter-spacing: -.014em; }
.ac-brand em { font-style: normal; font-weight: 400; color: var(--ac-ink-2); letter-spacing: -.01em; }
.ac-brand .ac-caret { color: var(--ac-ink-3); flex: 0 0 auto; }
.ac-brand svg.ac-caret { width: 11px; height: 11px; }
.ac-brandmark { width: 17px; height: 17px; flex: 0 0 auto; display: grid; place-items: center; color: var(--ac-accent); }
.ac-brandmark svg { width: 17px; height: 17px; }

.ac-navgroup { padding-bottom: 15px; }
.ac-navgroup-t {
  display: flex; align-items: center; gap: 5px; width: 100%;
  margin: 0 0 3px; padding: 5px 8px; border: 0; background: transparent;
  color: var(--ac-ink-3); font-size: 11.5px; font-weight: 400; letter-spacing: -.002em;
  text-align: left; cursor: pointer;
  transition: color .13s var(--ac-ease);
}
.ac-navgroup-t svg { width: 10px; height: 10px; flex: 0 0 auto; transition: transform .18s var(--ac-ease); }
.ac-navgroup[data-open="0"] .ac-navgroup-t svg { transform: rotate(-90deg); }
.ac-navgroup[data-open="0"] .ac-navlist { display: none; }
.ac-navgroup-t:hover { color: var(--ac-ink-2); }

.ac-side nav a {
  position: relative;
  display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 8px;
  border-radius: 8px; color: var(--ac-ink-2); font-size: 13px; letter-spacing: -.008em;
  transition: background .13s var(--ac-ease), color .13s var(--ac-ease);
}
.ac-side nav a:hover { background: var(--ac-panel-2); color: var(--ac-ink); }
.ac-side nav a.active { background: var(--ac-panel-2); color: var(--ac-ink); box-shadow: var(--ac-hair); }
/* The active marker grows out of the row rather than appearing on it. */
.ac-side nav a:before {
  content: ""; position: absolute; left: -10px; top: 50%; width: 2px; height: 15px;
  border-radius: 0 2px 2px 0; background: var(--ac-accent);
  transform: translateY(-50%) scaleY(0); transform-origin: center;
  transition: transform .2s var(--ac-ease);
}
.ac-side nav a.active:before { transform: translateY(-50%) scaleY(1); }
.ac-navicon { display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 auto; color: var(--ac-ink-3); transition: color .13s var(--ac-ease); }
.ac-navicon svg { width: 15px; height: 15px; }
.ac-side nav a:hover .ac-navicon { color: var(--ac-ink-2); }
.ac-side nav a.active .ac-navicon { color: var(--ac-accent); }
.ac-navtext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-navlock { margin-left: auto; color: var(--ac-warn); font-size: 9px; }
.ac-navbadge { margin-left: auto; flex: 0 0 auto; color: var(--ac-ink-3); font-size: 11.5px; }
.ac-navcount {
  margin-left: auto; flex: 0 0 auto; min-width: 20px; padding: 1px 6px; border-radius: 6px;
  background: rgba(255, 255, 255, .06); color: var(--ac-ink-2);
  font-size: 11px; text-align: center; line-height: 16px;
}
.ac-navcount.is-accent { background: rgba(59, 130, 246, .18); color: #60a5fa; }
.ac-navcount.is-deny { background: rgba(245, 158, 11, .18); color: var(--ac-yellow); }
.ac-navbadge-hl {
  margin-left: auto; flex: 0 0 auto; padding: 1px 7px; border-radius: 6px;
  font: 600 10px var(--ac-mono); letter-spacing: .06em;
  background: rgba(16, 185, 129, .15); color: var(--ac-ok);
  border: 1px solid rgba(16, 185, 129, .35);
}
.ac-navbadge-hl.is-blue {
  background: rgba(59, 130, 246, .15); color: #60a5fa;
  border-color: rgba(59, 130, 246, .35);
}
.ac-navbadge-hl.is-yellow {
  background: rgba(234, 179, 8, .15); color: #facc15;
  border-color: rgba(234, 179, 8, .35);
}

.ac-sidefoot {
  margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 5px 12px;
  padding: 14px 8px 0; border-top: 1px solid var(--ac-line);
  color: var(--ac-ink-3); font-size: 11px;
}
.ac-sidefoot a { transition: color .13s var(--ac-ease); }
.ac-sidefoot a:hover { color: var(--ac-ink); }
.ac-sidefoot .ac-planpill { margin-left: auto; }
.ac-planpill {
  flex: 0 0 auto; padding: 2px 7px; border: 1px solid var(--ac-line-2); border-radius: 999px;
  font: 400 9px/1.5 var(--ac-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ac-ink-2);
}
.ac-previewpill {
  flex: 0 0 auto; padding: 2px 7px; border-radius: 999px;
  background: rgba(247, 183, 80, .11); color: var(--ac-warn);
  font: 400 9px/1.5 var(--ac-mono); letter-spacing: .07em; text-transform: uppercase;
}

/* Collapsed rail: icons only, labels and counts gone rather than clipped. */
.ac-root[data-side="collapsed"] .ac-navtext,
.ac-root[data-side="collapsed"] .ac-navbadge,
.ac-root[data-side="collapsed"] .ac-navcount,
.ac-root[data-side="collapsed"] .ac-navgroup-t,
.ac-root[data-side="collapsed"] .ac-brand b,
.ac-root[data-side="collapsed"] .ac-brand em,
.ac-root[data-side="collapsed"] .ac-brand .ac-caret,
.ac-root[data-side="collapsed"] .ac-sidefoot { display: none; }
.ac-root[data-side="collapsed"] .ac-side { padding-left: 8px; padding-right: 8px; }
.ac-root[data-side="collapsed"] .ac-side nav a { justify-content: center; padding: 0; }
.ac-root[data-side="collapsed"] .ac-side nav a:before { left: -8px; }
.ac-root[data-side="collapsed"] .ac-brandrow { justify-content: center; }

/* --- main / topbar ------------------------------------------ */
.ac-main { min-width: 0; display: flex; flex-direction: column; }
.ac-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 42px; flex: 0 0 auto; padding: 0 14px 0 16px;
  border-bottom: 1px solid var(--ac-line);
  background: rgba(5, 5, 5, .82);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  position: sticky; top: 0; z-index: 12;
}
.ac-tabs { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ac-tabs::-webkit-scrollbar { display: none; }
.ac-tabs a {
  flex: 0 0 auto; padding: 5px 11px; border-radius: 8px;
  color: var(--ac-ink-3); font-size: 13px; letter-spacing: -.008em; white-space: nowrap;
  transition: background .13s var(--ac-ease), color .13s var(--ac-ease);
}
.ac-tabs a:hover { color: var(--ac-ink-2); background: var(--ac-panel-2); }
.ac-tabs a.active { background: var(--ac-panel-2); color: var(--ac-ink); box-shadow: var(--ac-hair); }
.ac-tabadd { margin-left: 2px; }
.ac-topright { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ac-avatar {
  display: grid; place-items: center; width: 27px; height: 27px; margin-left: 4px; flex: 0 0 auto;
  padding: 0; border: 1px solid var(--ac-line-2); border-radius: 999px;
  background: var(--ac-panel-3); color: var(--ac-ink-2);
  font-size: 11px; font-weight: 500; cursor: pointer;
  transition: border-color .13s var(--ac-ease), color .13s var(--ac-ease);
}
.ac-avatar:hover { border-color: var(--ac-line-3); color: var(--ac-ink); }

/* Menus. One presentation for the workspace, tab-add and account menus. */
.ac-menu {
  position: fixed; z-index: 60; min-width: 212px; padding: 5px;
  border: 1px solid var(--ac-line-2); border-radius: 12px;
  background: var(--ac-panel-2);
  box-shadow: var(--ac-hair), 0 20px 48px rgba(0, 0, 0, .66);
  animation: ac-pop .13s var(--ac-ease);
}
@keyframes ac-pop { from { opacity: 0; transform: translateY(-5px) scale(.985); } }
.ac-menu button, .ac-menu a {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--ac-ink-2); font-size: 12.5px; text-align: left; cursor: pointer;
  transition: background .12s var(--ac-ease), color .12s var(--ac-ease);
}
.ac-menu svg { width: 14px; height: 14px; color: var(--ac-ink-3); flex: 0 0 auto; }
.ac-menu button:hover, .ac-menu a:hover { background: var(--ac-panel-3); color: var(--ac-ink); }
.ac-menu hr { margin: 5px 4px; border: 0; border-top: 1px solid var(--ac-line); }
.ac-menu-h { padding: 8px 9px 6px; color: var(--ac-ink-3); font-size: 11px; }
.ac-menu-h b { display: block; color: var(--ac-ink); font-size: 12.5px; font-weight: 500; overflow-wrap: anywhere; }

/* Quick switcher. */
.ac-switch { position: fixed; inset: 0; z-index: 70; display: grid; place-items: start center; padding-top: 14vh; background: rgba(2, 2, 2, .7); animation: ac-fade .12s ease-out; }
@keyframes ac-fade { from { opacity: 0; } }
.ac-switch-box {
  width: min(540px, calc(100vw - 32px)); border: 1px solid var(--ac-line-2); border-radius: 14px;
  background: var(--ac-panel-2); box-shadow: var(--ac-hair), 0 30px 76px rgba(0, 0, 0, .72); overflow: hidden;
  animation: ac-pop .15s var(--ac-ease);
}
.ac-switch input {
  width: 100%; height: 46px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--ac-line);
  background: transparent; color: var(--ac-ink); font: 400 14px var(--ac-sans); outline: none;
}
.ac-switch input::placeholder { color: var(--ac-ink-3); }
.ac-switch-list { max-height: 328px; overflow-y: auto; padding: 5px; }
.ac-switch-list a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--ac-ink-2); font-size: 13px; }
.ac-switch-list svg { width: 14px; height: 14px; color: var(--ac-ink-3); flex: 0 0 auto; }
.ac-switch-list a:hover, .ac-switch-list a.active { background: var(--ac-panel-3); color: var(--ac-ink); }
.ac-switch-list i { color: var(--ac-ink-3); font-style: normal; font-size: 11px; }

.ac-verifybanner {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 26px;
  border-bottom: 1px solid rgba(247, 183, 80, .2); background: rgba(247, 183, 80, .06);
  color: var(--ac-warn); font-size: 12px;
}
.ac-verifybanner[hidden] { display: none !important; }

/* --- breadcrumb --------------------------------------------- */
.ac-crumb { display: flex; align-items: center; gap: 9px; padding: 24px 28px 8px; color: var(--ac-ink-3); font-size: 13px; }
.ac-crumb b { color: var(--ac-ink); font-size: 17px; font-weight: 500; letter-spacing: -.022em; }
.ac-crumb a { transition: color .13s var(--ac-ease); }
.ac-crumb a:hover { color: var(--ac-ink-2); }
.ac-crumb .ac-sep { color: var(--ac-ink-3); }
.ac-crumb .ac-iconbtn { margin-left: 2px; }
.ac-root .ac-crumb .ac-iconbtn.is-on { color: var(--ac-warn); }

.ac-body { padding: 16px 28px 72px; }

/* --- agent sub-tabs ----------------------------------------- */
.ac-subtabs {
  display: flex; gap: 26px; margin: 2px 0 18px; padding: 0 1px;
  border-bottom: 1px solid var(--ac-line); overflow-x: auto; scrollbar-width: none;
}
.ac-subtabs::-webkit-scrollbar { display: none; }
.ac-subtabs a {
  flex: 0 0 auto; padding: 0 0 10px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--ac-ink-3); font-size: 13px; letter-spacing: -.008em; white-space: nowrap;
  transition: color .14s var(--ac-ease), border-color .14s var(--ac-ease);
}
.ac-subtabs a:hover { color: var(--ac-ink-2); }
.ac-subtabs a.active { border-bottom-color: var(--ac-ink); color: var(--ac-ink); }

/* --- agent header ------------------------------------------- */
.ac-agenthead {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 18px 22px; margin-bottom: 10px;
  border: 1px solid var(--ac-line); border-radius: 14px;
  background: var(--ac-panel); box-shadow: var(--ac-hair);
}
/* The agent's own mark. Violet, because in this console violet is
   the agent — the same hue the AI-facing surfaces use. */
.ac-agenticon {
  position: relative;
  display: grid; place-items: center; width: 72px; height: 72px; flex: 0 0 auto;
  border: 1px solid var(--ac-line-2); border-radius: 16px;
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(167, 139, 250, .12), transparent 70%),
    var(--ac-panel-2);
  box-shadow: var(--ac-hair);
  color: var(--ac-violet); font: 400 19px/1 var(--ac-mono); letter-spacing: -.02em;
}
.ac-agentmeta { min-width: 0; flex: 1 1 auto; padding-top: 1px; }
.ac-agentname {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-size: 28px; font-weight: 600; letter-spacing: -.034em; line-height: 1.15;
}
.ac-agentsub { margin: 7px 0 0; color: var(--ac-ink-2); font-size: 13px; }
.ac-agentsub.is-quiet { margin-top: 4px; color: var(--ac-ink-3); }
.ac-agentsub code { color: var(--ac-ink-2); }
.ac-online { color: var(--ac-ok); }
.ac-agentact { flex: 0 0 auto; }

/* A status light that actually reads as one: a solid core and a
   halo that expands and fades. Transform and opacity only. */
.ac-dot { display: inline-grid; place-items: center; width: 7px; height: 7px; margin-right: 6px; vertical-align: 1px; }
.ac-dot:before, .ac-dot:after { content: ""; grid-area: 1/1; border-radius: 50%; background: currentColor; }
.ac-dot:before { width: 6px; height: 6px; }
.ac-dot:after { width: 6px; height: 6px; animation: ac-ping 2.6s var(--ac-ease) infinite; }
@keyframes ac-ping { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.9); opacity: 0; } }

/* --- metric cards ------------------------------------------- */
/* Five compact telemetry cells, not marketing tiles. The number is the
   loudest thing in each; everything else is chrome around it. */
.ac-stats {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
  margin-bottom: 18px;
}
.ac-stat {
  position: relative;
  display: flex; flex-direction: column; gap: 11px; min-height: 122px; padding: 16px 15px;
  border: 1px solid var(--ac-line); border-radius: 13px; background: var(--ac-panel);
  box-shadow: var(--ac-hair);
  min-width: 0; overflow: hidden;
  transition: background .16s var(--ac-ease), border-color .16s var(--ac-ease);
}
/* Hover lifts the surface and lets the cell's own hue reach the
   border. No glow, no scale — the card is an instrument, not a button. */
.ac-stat:hover { background: var(--ac-panel-2); border-color: var(--ac-line-2); }
.ac-stat[data-hue="ok"]:hover { border-color: rgba(52, 211, 153, .3); }
.ac-stat[data-hue="warn"]:hover { border-color: rgba(247, 183, 80, .3); }
.ac-stat[data-hue="deny"]:hover { border-color: rgba(251, 113, 133, .3); }
.ac-stat[data-hue="cyan"]:hover { border-color: rgba(34, 211, 238, .3); }
.ac-stat[data-hue="blue"]:hover { border-color: rgba(91, 157, 255, .3); }
/* One line, always. Five cells that disagree about their label height stop
   reading as one instrument — and an ellipsis is a better failure than a
   glyph sheared in half by the card edge. */
.ac-stat-k { color: var(--ac-ink-2); font-size: 12px; font-weight: 400; letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-stat-r { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ac-stat-v {
  font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -.038em;
  white-space: nowrap;
}
.ac-stat-v.is-text { font-size: 21px; font-weight: 500; letter-spacing: -.026em; }
.ac-stat-v.is-ok { color: var(--ac-ok); }
.ac-stat-v.is-warn { color: var(--ac-warn); }
.ac-stat-v.is-deny { color: var(--ac-deny); }
.ac-stat-sfx { margin-left: 5px; color: var(--ac-ink-3); font-size: 13px; font-style: normal; font-weight: 400; letter-spacing: -.01em; }
.ac-stat-ico { flex: 0 0 auto; display: grid; place-items: center; color: var(--ac-ink-3); }
.ac-stat-ico.is-ok { color: var(--ac-ok); }
.ac-stat-ico.is-warn { color: var(--ac-warn); }
.ac-stat-ico svg { width: 15px; height: 15px; }
.ac-stat-n { margin-top: auto; color: var(--ac-ink-3); font-size: 11.5px; }
.ac-delta { margin-top: auto; display: flex; align-items: center; gap: 4px; font-size: 12.5px; }
.ac-delta.is-up { color: var(--ac-ok); }
.ac-delta.is-down { color: var(--ac-deny); }
/* A score out of a known total is a measurement, so it gets a
   measurement's rule at the foot of the card. */
.ac-meter { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .05); }
.ac-meter i { display: block; height: 100%; opacity: .62; background: linear-gradient(90deg, rgba(91, 157, 255, .8), var(--ac-cyan)); transform-origin: left; transform: scaleX(0); animation: ac-meter-in .8s .15s var(--ac-ease) forwards; }
@keyframes ac-meter-in { to { transform: scaleX(1); } }

/* --- layout ------------------------------------------------- */
/* Left column carries the record of what the agent IS; right column carries
   what it has been DOING. The reference splits them 1.56 : 1. */
.ac-split { display: grid; grid-template-columns: minmax(0, 1.562fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.ac-split.is-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ac-col { min-width: 0; }

/* --- cards -------------------------------------------------- */
.ac-card {
  margin-bottom: 20px; border: 1px solid var(--ac-line); border-radius: 14px;
  background: var(--ac-panel); box-shadow: var(--ac-hair); overflow: hidden;
}
.ac-card:last-child { margin-bottom: 0; }
.ac-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 11px 18px; border-bottom: 1px solid var(--ac-line); }
.ac-card-h h3 { margin: 0; font-size: 14.5px; font-weight: 500; letter-spacing: -.02em; }
.ac-card-hl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ac-card-ha { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ac-card-b { padding: 16px 18px; }
.ac-card-b.is-flush { padding: 0; }
.ac-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border: 1px solid var(--ac-line-2); border-radius: 8px;
  color: var(--ac-ink-2); font-size: 11.5px; background: transparent; cursor: pointer;
  transition: border-color .13s var(--ac-ease), color .13s var(--ac-ease), background .13s var(--ac-ease);
}
.ac-chip:hover { border-color: var(--ac-line-3); color: var(--ac-ink); background: var(--ac-panel-2); }
.ac-chip svg { width: 10px; height: 10px; }
/* "LIVE" is a claim, so it only renders where the view actually
   refreshes itself. See startLive() in console.js. */
.ac-livechip {
  display: inline-flex; align-items: center; padding: 2px 8px 2px 6px; border-radius: 7px;
  background: rgba(34, 211, 238, .1); color: var(--ac-cyan);
  font: 400 9.5px/1.7 var(--ac-mono); letter-spacing: .11em;
}
.ac-root .ac-link { display: inline-flex; align-items: center; gap: 5px; color: var(--ac-accent); font-size: 12.5px; transition: color .13s var(--ac-ease); }
.ac-root .ac-link:hover { color: #a3adff; }
.ac-link svg { width: 11px; height: 11px; }

/* --- key/value rows ----------------------------------------- */
.ac-rows { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 0 16px; margin: 0; }
.ac-rows dt { padding: 7px 0; color: var(--ac-ink-2); font-size: 13px; }
.ac-rows dd { margin: 0; padding: 7px 0; color: var(--ac-ink); font-size: 13px; overflow-wrap: anywhere; }
/* An identifier is a machine value and is typed as one. */
.ac-rows dd code { color: var(--ac-ink-2); font-size: 12.5px; letter-spacing: -.005em; }

/* --- policy list -------------------------------------------- */
.ac-policies { margin: 0; padding: 0; list-style: none; }
.ac-policies li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; }
.ac-policies b { font-size: 13px; font-weight: 400; color: var(--ac-ink); }

/* --- tables ------------------------------------------------- */
.ac-tablewrap { overflow-x: auto; margin: -16px -18px; -webkit-overflow-scrolling: touch; }
.ac-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ac-table th {
  padding: 10px 18px; border-bottom: 1px solid var(--ac-line); text-align: left;
  color: var(--ac-ink-3); font: 400 9.5px var(--ac-mono);
  letter-spacing: .11em; text-transform: uppercase; white-space: nowrap;
}
.ac-table td { padding: 11px 18px; border-bottom: 1px solid var(--ac-line); vertical-align: middle; }
.ac-table td code { color: var(--ac-cyan); opacity: .85; }
.ac-table tr:last-child td { border-bottom: 0; }
.ac-table tbody tr { transition: background .12s var(--ac-ease); }
.ac-table tbody tr:hover { background: var(--ac-panel-2); }
.ac-table tr.is-link { cursor: pointer; }

/* --- pills -------------------------------------------------- */
.ac-pill {
  display: inline-flex; align-items: center; flex: 0 0 auto; padding: 2px 9px;
  border: 1px solid var(--ac-line-2); border-radius: 8px;
  color: var(--ac-ink-2); font-size: 12px; letter-spacing: -.006em; white-space: nowrap;
}
.ac-pill.is-ok { border-color: rgba(16, 185, 129, .3); background: rgba(16, 185, 129, .12); color: var(--ac-ok); }
.ac-pill.is-warn { border-color: rgba(234, 179, 8, .35); background: rgba(234, 179, 8, .12); color: var(--ac-yellow); }
.ac-pill.is-deny { border-color: rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .14); color: var(--ac-warn); }
.ac-pill.is-info { border-color: rgba(59, 130, 246, .35); background: rgba(59, 130, 246, .12); color: #60a5fa; }

/* --- decision feed ------------------------------------------ */
/* A row is: what was attempted, what the engine decided, and when. The icon
   carries the verdict's colour so the column scans without reading. */
.ac-feed { margin: 0; padding: 0; list-style: none; }
.ac-feed li {
  display: flex; align-items: center; gap: 12px; padding: 9px 18px;
  border-bottom: 1px solid var(--ac-line);
  transition: background .12s var(--ac-ease);
}
.ac-feed li:last-child { border-bottom: 0; }
.ac-feed li:hover { background: var(--ac-panel-2); }
.ac-feedico {
  display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 auto;
  border: 1px solid var(--ac-line); border-radius: 9px; background: var(--ac-panel-2);
  color: var(--ac-ink-2); box-shadow: var(--ac-hair);
}
.ac-feedico svg { width: 14px; height: 14px; }
.ac-feedico.is-deny { border-color: rgba(251, 113, 133, .22); background: rgba(251, 113, 133, .07); color: var(--ac-deny); }
.ac-feedico.is-warn { border-color: rgba(247, 183, 80, .22); background: rgba(247, 183, 80, .07); color: var(--ac-warn); }
.ac-feedico.is-info { border-color: rgba(34, 211, 238, .22); background: rgba(34, 211, 238, .07); color: var(--ac-cyan); }
.ac-feedbody { min-width: 0; flex: 1 1 auto; }
.ac-feedbody b { display: block; font-size: 13px; font-weight: 400; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-feedbody b i { font-style: normal; }
.ac-feedbody b i.is-deny { color: var(--ac-deny); }
.ac-feedbody b em { font-style: normal; font-family: var(--ac-mono); font-size: 12px; color: var(--ac-ink-2); }
.ac-verdict { display: block; margin-top: 2px; font-size: 12px; }
.ac-verdict.is-ok { color: var(--ac-ok); }
.ac-verdict.is-warn { color: var(--ac-warn); }
.ac-verdict.is-deny { color: var(--ac-deny); }
.ac-feedtime { flex: 0 0 auto; color: var(--ac-ink-3); font-size: 12px; white-space: nowrap; }

/* --- trust -------------------------------------------------- */
.ac-trust { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.ac-trust b { font-size: 34px; font-weight: 600; letter-spacing: -.042em; line-height: 1; }
.ac-trust i { margin-left: 5px; color: var(--ac-ink-3); font-size: 14px; font-style: normal; font-weight: 400; }
.ac-signals { margin: 0; padding: 0; list-style: none; }
.ac-signals li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0 10px; }
.ac-signals span { color: var(--ac-ink-2); font-size: 12px; }
.ac-signals b { font: 400 11px var(--ac-mono); color: var(--ac-ink); }
.ac-signals:before { content: ""; }
.ac-signals li:after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .05); }
.ac-signals i { position: absolute; z-index: 1; left: 0; bottom: 3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ac-blue), var(--ac-cyan)); }

/* --- chart -------------------------------------------------- */
/* Telemetry, not analytics: thin strokes, a barely-there area wash, a grid
   that stays under the data, and axis text in the mono face so the hour
   labels line up with the numbers everywhere else in the console.

   The chart ALWAYS draws, including at zero — a window with no traffic is
   a flat baseline with a caption, never an empty box where a chart was. */
.ac-chartwrap { position: relative; padding: 4px 0 0; overflow: hidden; }
.ac-chart { width: 100%; height: auto; display: block; overflow: visible; }
.ac-grid { stroke: rgba(255, 255, 255, .045); stroke-width: 1; shape-rendering: crispEdges; }
.ac-axis { fill: var(--ac-ink-3); font: 400 13px var(--ac-mono); }
.ac-line { stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ac-line.is-total { stroke: #c3c5d2; }
.ac-line.is-ok { stroke: var(--ac-ok); }
.ac-line.is-deny { stroke: var(--ac-deny); }
.ac-area.is-total { fill: url(#acFillTotal); }
.ac-area.is-ok { fill: url(#acFillOk); }
.ac-area.is-deny { fill: url(#acFillDeny); }

/* Entrance: the strokes draw themselves in once, the washes rise under
   them. One-shot, so nothing is animating after the first second. */
.ac-line { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: ac-draw 1.05s .05s var(--ac-ease) forwards; }
.ac-line.is-ok { animation-delay: .12s; }
.ac-line.is-deny { animation-delay: .2s; }
@keyframes ac-draw { to { stroke-dashoffset: 0; } }
.ac-area { opacity: 0; animation: ac-wash .8s .35s ease-out forwards; }
@keyframes ac-wash { to { opacity: 1; } }

/* The live edge. A marker on the newest reading, with a halo that
   expands and fades — the same language as the ● Online dot. */
.ac-edge { fill: #c3c5d2; }
.ac-edgehalo { fill: #c3c5d2; transform-box: fill-box; transform-origin: center; animation: ac-ping 2.6s var(--ac-ease) infinite; }

/* The sweep. A soft band travelling across the plot on the compositor,
   so the panel reads as a live instrument without a single main-thread
   frame and without implying an event that did not happen. */
.ac-sweep {
  position: absolute; top: 6px; bottom: 26px; left: 0; width: 22%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .07) 45%, rgba(125, 139, 255, .05) 60%, transparent);
  transform: translate3d(-110%, 0, 0);
  animation: ac-sweep 9s linear infinite;
}
@keyframes ac-sweep { to { transform: translate3d(560%, 0, 0); } }
.ac-chartnote { position: absolute; inset: auto 0 34px 0; text-align: center; color: var(--ac-ink-3); font-size: 11.5px; pointer-events: none; }

.ac-legend { display: flex; gap: 18px; padding: 0 0 6px; }
.ac-legend span { display: flex; align-items: center; gap: 7px; color: var(--ac-ink-2); font-size: 12px; }
.ac-legend span:before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: currentColor; flex: 0 0 auto; }
.ac-legend .is-total { color: #c3c5d2; }
.ac-legend .is-total:before { width: 11px; height: 2px; border-radius: 2px; }
.ac-legend .is-ok { color: var(--ac-ok); }
.ac-legend .is-deny { color: var(--ac-deny); }

/* --- terminal ----------------------------------------------- */
/* Commands the operator is meant to run, typed the way their shell will
   show them. Never fabricated output — a transcript of a decision that
   did not happen is the one thing this console must not print. */
.ac-term {
  border: 1px solid var(--ac-line-2); border-radius: 11px; overflow: hidden;
  background: #08080c; box-shadow: var(--ac-hair);
}
.ac-term-h {
  display: flex; align-items: center; gap: 7px; padding: 8px 12px;
  border-bottom: 1px solid var(--ac-line); background: var(--ac-panel-2);
  color: var(--ac-ink-3); font: 400 10px var(--ac-mono); letter-spacing: .1em; text-transform: uppercase;
}
.ac-term-h i { width: 7px; height: 7px; border-radius: 50%; background: var(--ac-line-3); flex: 0 0 auto; }
.ac-term-h i:first-child { background: rgba(251, 113, 133, .55); }
.ac-term-h i:nth-child(2) { background: rgba(247, 183, 80, .55); }
.ac-term-h i:nth-child(3) { background: rgba(52, 211, 153, .55); }
.ac-term-h span { margin-left: 4px; }
.ac-term pre {
  margin: 0; padding: 13px 15px; overflow-x: auto;
  font: 400 12px/1.75 var(--ac-mono); color: var(--ac-ink-2);
  -webkit-font-smoothing: subpixel-antialiased;
}
.ac-t-p { color: var(--ac-ok); -webkit-user-select: none; user-select: none; }
.ac-t-c { color: var(--ac-cyan); }
.ac-t-a { color: var(--ac-ink); }
.ac-t-f { color: var(--ac-violet); }
.ac-t-m { color: var(--ac-ink-3); }
/* A block cursor on the last line: the surface reads as a shell waiting
   for input, not a screenshot of one. */
.ac-t-cur { display: inline-block; width: 7px; height: 13px; vertical-align: -2px; background: var(--ac-ink-2); animation: ac-caret 1.15s steps(1) infinite; }
@keyframes ac-caret { 50% { opacity: 0; } }

/* --- bar ---------------------------------------------------- */
.ac-bar { height: 5px; margin-bottom: 18px; border-radius: 99px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.ac-bar i { display: block; height: 100%; border-radius: 99px; background: var(--ac-ok); transform-origin: left; transition: transform .5s var(--ac-ease); }
.ac-bar.is-warn i { background: var(--ac-warn); }
.ac-bar.is-deny i { background: var(--ac-deny); }

/* --- empty / locked / unavailable --------------------------- */
/* Three different sentences, three different treatments. "Nothing yet",
   "not on your plan" and "this deployment cannot do it" imply different
   actions and must never look alike.

   None of them is a dashed box. A dashed border is the universal signal
   for "unfinished", which is exactly the wrong thing to say about a
   tenant who has simply not been attacked yet. */
.ac-empty, .ac-locked, .ac-unavail {
  padding: 22px; border: 1px solid var(--ac-line); border-radius: 12px;
  background: rgba(255, 255, 255, .012);
}
.ac-empty { display: flex; gap: 14px; align-items: flex-start; }
.ac-emptyico {
  display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto;
  border: 1px solid var(--ac-line); border-radius: 10px; background: var(--ac-panel-2);
  color: var(--ac-ink-3); box-shadow: var(--ac-hair);
}
.ac-emptyico svg { width: 15px; height: 15px; }
.ac-emptybody { min-width: 0; flex: 1 1 auto; }
.ac-empty b, .ac-locked b, .ac-unavail b { display: block; font-size: 13px; font-weight: 500; letter-spacing: -.012em; }
.ac-empty p, .ac-locked p, .ac-unavail p { margin: 6px 0 0; color: var(--ac-ink-3); font-size: 12px; line-height: 1.65; max-width: 62ch; }
.ac-empty-act { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* A terminal in a zero state takes the row rather than sharing it. */
.ac-empty-act > .ac-term { flex: 1 1 100%; }
.ac-locked { border-color: rgba(247, 183, 80, .26); background: rgba(247, 183, 80, .045); }
.ac-unavail { border-color: rgba(251, 113, 133, .24); background: rgba(251, 113, 133, .04); }
.ac-unavail b { color: var(--ac-deny); }
.ac-note { margin: 12px 0 0; color: var(--ac-ink-3); font-size: 11.5px; line-height: 1.65; }
.ac-note.is-warn { color: var(--ac-warn); }
.ac-code { display: inline-block; padding: 5px 10px; border: 1px solid var(--ac-line-2); border-radius: 8px; background: #08080c; font: 400 11.5px var(--ac-mono); color: var(--ac-cyan); }

/* --- controls ----------------------------------------------- */
.ac-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
  border: 1px solid var(--ac-line-2); border-radius: 10px;
  background: var(--ac-panel-2); color: var(--ac-ink); font-size: 13px; cursor: pointer;
  box-shadow: var(--ac-hair);
  transition: background .13s var(--ac-ease), border-color .13s var(--ac-ease), transform .09s var(--ac-ease);
}
.ac-btn svg { width: 11px; height: 11px; color: var(--ac-ink-3); }
.ac-btn:hover { background: var(--ac-panel-3); border-color: var(--ac-line-3); }
.ac-btn:active { transform: translateY(.5px); }
.ac-btn:disabled { opacity: .5; cursor: default; transform: none; }
.ac-btn.is-primary { border-color: transparent; background: var(--ac-accent); color: #07070a; font-weight: 500; }
.ac-btn.is-primary svg { color: rgba(7, 7, 10, .6); }
.ac-btn.is-primary:hover { background: #93a0ff; }
.ac-btn.is-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.ac-linkbtn { padding: 0; border: 0; background: transparent; color: var(--ac-deny); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.ac-form { display: grid; gap: 11px; max-width: 340px; }
.ac-form label { display: grid; gap: 5px; color: var(--ac-ink-3); font-size: 11px; }
.ac-form input {
  height: 36px; padding: 0 11px; border: 1px solid var(--ac-line-2); border-radius: 9px;
  background: var(--ac-bg); color: var(--ac-ink); font: 400 12px var(--ac-sans); outline: none;
  transition: border-color .13s var(--ac-ease), box-shadow .13s var(--ac-ease);
}
.ac-form input:focus { border-color: var(--ac-accent); box-shadow: 0 0 0 3px rgba(125, 139, 255, .12); }

/* --- loading ------------------------------------------------ */
/* The skeleton mirrors the real composition — header, five cells, two
   columns — so nothing jumps when the data lands. */
.ac-skel { display: grid; gap: 10px; }
.ac-skel i, .ac-skel u {
  display: block; border-radius: 13px; border: 1px solid var(--ac-line); background: var(--ac-panel);
  position: relative; overflow: hidden;
}
.ac-skel i:after, .ac-skel u:after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .035) 50%, transparent);
  transform: translate3d(-100%, 0, 0);
  animation: ac-shimmer 1.5s linear infinite;
}
.ac-skel > i { height: 114px; }
.ac-skel-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ac-skel-row u { height: 122px; }
.ac-skel-split { display: grid; grid-template-columns: minmax(0, 1.562fr) minmax(0, 1fr); gap: 40px; margin-top: 8px; }
.ac-skel-split u { height: 300px; }
@keyframes ac-shimmer { to { transform: translate3d(100%, 0, 0); } }

/* --- toast -------------------------------------------------- */
.ac-toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 80; margin: 0;
  padding: 10px 15px; border: 1px solid var(--ac-line-2); border-radius: 11px;
  background: var(--ac-panel-2); color: var(--ac-ink); font-size: 12.5px;
  box-shadow: var(--ac-hair), 0 16px 44px rgba(0, 0, 0, .55);
  animation: ac-pop .16s var(--ac-ease);
}
.ac-toast[data-kind="error"] { border-color: rgba(251, 113, 133, .38); color: var(--ac-deny); }
.ac-toast[hidden] { display: none !important; }

/* --- reduced motion ----------------------------------------- */
/* Everything continuous stops. Everything one-shot lands on its final
   frame rather than never arriving — a chart whose strokes are still
   dashed to zero is not a calmer chart, it is an invisible one. */
@media (prefers-reduced-motion: reduce) {
  .ac-root, .ac-root * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ac-sweep, .ac-edgehalo, .ac-t-cur { display: none; }
  .ac-line { stroke-dashoffset: 0; }
  .ac-area { opacity: 1; }
  .ac-meter i { transform: scaleX(1); }
}

/* --- responsive --------------------------------------------- */
/* Desktop is the composition this console was drawn for; the breakpoints
   below fold it down without ever reflowing the desktop layout. */
/* 1280-1480: still the desktop composition, but the left column is ~640px
   and five cells inside it leave about 92px of text width. The rail gives
   some back, the cells tighten, and "Decisions (24h)" stays on one line. */
@media (max-width: 1480px) {
  .ac-root { --ac-sidew: 248px; }
  .ac-rows { grid-template-columns: 180px minmax(0, 1fr); }
  .ac-split, .ac-skel-split { gap: 26px; }
  .ac-stat { padding: 15px 13px; }
  .ac-stat-k { font-size: 11.5px; letter-spacing: -.016em; }
  .ac-stat-v { font-size: 27px; }
  .ac-stat-v.is-text { font-size: 19px; }
  .ac-body, .ac-crumb { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 1280px) {
  /* The columns stack before the cells do: five telemetry cells across a
     single 1200px column still read as a strip, and folding them to three
     340px tiles turns compact instruments into billboards. */
  .ac-split, .ac-skel-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1040px) {
  .ac-stats, .ac-skel-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ac-stat:nth-child(1), .ac-stat:nth-child(2), .ac-stat:nth-child(3) { grid-column: span 2; }
  .ac-stat:nth-child(4), .ac-stat:nth-child(5) { grid-column: span 3; }
}
@media (max-width: 900px) {
  .ac-root, .ac-root[data-side="collapsed"] { grid-template-columns: 1fr; }
  .ac-side {
    position: static; height: auto; flex-direction: column; align-items: stretch; gap: 8px;
    padding: 10px 14px; overflow: hidden; border-right: 0; border-bottom: 1px solid var(--ac-line);
  }
  .ac-siderail, .ac-sidefoot { display: none; }
  .ac-brandrow { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; }
  .ac-side nav { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 0 4px; }
  .ac-side nav::-webkit-scrollbar { display: none; }
  .ac-navgroup { display: contents; }
  .ac-navgroup-t { display: none; }
  .ac-navlist { display: contents !important; }
  .ac-side nav a { flex: 0 0 auto; height: 29px; border: 1px solid var(--ac-line); border-radius: 999px; padding: 0 12px; white-space: nowrap; }
  .ac-side nav a:before { display: none; }
  .ac-navicon, .ac-navbadge { display: none; }
  .ac-agentname { font-size: 22px; }
  .ac-agenticon { width: 56px; height: 56px; border-radius: 14px; }
}
@media (max-width: 720px) {
  .ac-topbar { height: auto; min-height: 44px; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 14px; position: static; }
  .ac-tabs { display: none; }
  .ac-topright { padding: 0; justify-content: flex-end; width: 100%; }
  .ac-body, .ac-crumb { padding-left: 14px; padding-right: 14px; }
  .ac-stats, .ac-skel-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-stat:nth-child(1), .ac-stat:nth-child(2),
  .ac-stat:nth-child(3), .ac-stat:nth-child(4) { grid-column: span 1; }
  .ac-stat:nth-child(5) { grid-column: 1 / -1; }
  .ac-stat-v { font-size: 25px; }
  .ac-agenthead { flex-wrap: wrap; padding: 16px; }
  .ac-agentact { width: 100%; }
  .ac-rows { grid-template-columns: 1fr; gap: 0; }
  .ac-rows dt { padding-bottom: 0; }
  .ac-rows dd { padding-top: 2px; }
  .ac-subtabs { gap: 18px; }
  .ac-posture-bar { flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 14px; }
  .ac-posture-right { width: 100%; justify-content: flex-start; }
}
/* Wide screens: the content column is capped rather than run to 2400px,
   because a decision row the width of a monitor is unreadable. */
@media (min-width: 1800px) {
  .ac-body, .ac-crumb { max-width: 1560px; }
}


/* ============================================================
   Policy surfaces.

   Everything below serves one job: making the difference between
   "this is in force" and "this is a proposal" impossible to miss.
   A draft that reads like a live policy is the failure mode this
   whole area exists to prevent, so state, hash and diff are the
   loudest things on the page and the rule text is the quietest.
   ============================================================ */

/* --- a state banner ----------------------------------------- */
.ac-state {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 18px; margin-bottom: 16px;
  border: 1px solid var(--ac-line); border-radius: 13px;
  background: var(--ac-panel); box-shadow: var(--ac-hair);
}
.ac-state.is-ok { border-color: rgba(52, 211, 153, .26); background: rgba(52, 211, 153, .045); }
.ac-state-ico {
  display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
  border: 1px solid var(--ac-line); border-radius: 9px; background: var(--ac-panel-2);
  color: var(--ac-ink-2); box-shadow: var(--ac-hair);
}
.ac-state.is-ok .ac-state-ico { border-color: rgba(52, 211, 153, .3); color: var(--ac-ok); background: rgba(52, 211, 153, .07); }
.ac-state-ico svg { width: 15px; height: 15px; }
.ac-state b { display: block; font-size: 13.5px; font-weight: 500; letter-spacing: -.012em; }
.ac-state p { margin: 5px 0 0; color: var(--ac-ink-3); font-size: 12px; line-height: 1.6; }
.ac-state-a { margin-left: auto; flex: 0 0 auto; }

/* --- the progress rail through the review workflow ---------- */
.ac-machine {
  display: flex; align-items: center; gap: 0; margin: 0 0 18px; padding: 0; list-style: none;
}
.ac-machine li { position: relative; display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; }
.ac-machine li:not(:last-child):after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--ac-line-2); margin: 0 10px;
}
.ac-machine i {
  width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--ac-line-3); background: var(--ac-panel);
}
.ac-machine span { color: var(--ac-ink-3); font-size: 12px; white-space: nowrap; }
.ac-machine li[data-state="done"] i { background: var(--ac-ink-3); border-color: var(--ac-ink-3); }
.ac-machine li[data-state="done"] span { color: var(--ac-ink-2); }
.ac-machine li[data-state="now"] i { background: var(--ac-accent); border-color: var(--ac-accent); box-shadow: 0 0 0 3px rgba(125, 139, 255, .16); }
.ac-machine li[data-state="now"] span { color: var(--ac-ink); }

/* --- diff --------------------------------------------------- */
.ac-diff { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.ac-diff li {
  display: flex; align-items: baseline; gap: 7px; flex: 1 1 100px; min-width: 0;
  padding: 11px 13px; border: 1px solid var(--ac-line); border-radius: 10px; background: var(--ac-panel-2);
}
.ac-diff i { font-style: normal; font-family: var(--ac-mono); font-size: 13px; }
.ac-diff b { font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.ac-diff span { color: var(--ac-ink-3); font-size: 11.5px; }
.ac-diff li[data-k="add"] i { color: var(--ac-ok); }
.ac-diff li[data-k="del"] i { color: var(--ac-deny); }
.ac-diff li[data-k="mod"] i { color: var(--ac-warn); }
.ac-diff li[data-k="same"] i { color: var(--ac-ink-3); }

/* The one thing on a review screen that must never be missed. Governance
   exists to catch policy being weakened by accident; a muted chip would be
   the wrong volume for the only change that can hand an agent a capability
   nobody argued for. */
.ac-loosens {
  display: flex; gap: 13px; align-items: flex-start; margin-bottom: 14px;
  padding: 14px 16px; border: 1px solid rgba(251, 113, 133, .35); border-radius: 11px;
  background: rgba(251, 113, 133, .07);
}
.ac-loosens.is-warn { border-color: rgba(247, 183, 80, .35); background: rgba(247, 183, 80, .06); }
.ac-loosens > span { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; color: var(--ac-deny); }
.ac-loosens.is-warn > span { color: var(--ac-warn); }
.ac-loosens svg { width: 17px; height: 17px; }
.ac-loosens b { display: block; color: var(--ac-deny); font-size: 13px; font-weight: 500; letter-spacing: -.012em; }
.ac-loosens.is-warn b { color: var(--ac-warn); }
.ac-loosens p { margin: 5px 0 0; color: var(--ac-ink-2); font-size: 12px; line-height: 1.6; }

/* The rules that actually moved, named. A count tells a reviewer how much
   changed; only the names tell them whether to care. */
.ac-difflist { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.ac-difflist li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 11px; border: 1px solid var(--ac-line); border-radius: 9px; background: var(--ac-panel-2);
}
.ac-difflist i { font-style: normal; font-family: var(--ac-mono); font-size: 12px; width: 9px; flex: 0 0 auto; }
.ac-difflist code { flex: 1 1 auto; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-difflist li[data-k="add"] i { color: var(--ac-ok); }
.ac-difflist li[data-k="del"] i { color: var(--ac-deny); }
.ac-difflist li[data-k="mod"] i { color: var(--ac-warn); }

/* --- hash chip ---------------------------------------------- */
.ac-root .ac-hash {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  padding: 6px 10px; border: 1px solid var(--ac-line-2); border-radius: 9px;
  background: #08080c; color: var(--ac-ink-2); cursor: pointer;
  transition: border-color .13s var(--ac-ease), color .13s var(--ac-ease);
}
.ac-root .ac-hash:hover { border-color: var(--ac-line-3); color: var(--ac-ink); }
.ac-hash svg { width: 12px; height: 12px; color: var(--ac-cyan); flex: 0 0 auto; }
.ac-hash code { font-size: 11.5px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ac-hash-ok { font-style: normal; font-size: 11px; color: var(--ac-ok); opacity: 0; transition: opacity .14s linear; }
.ac-hash.is-copied .ac-hash-ok { opacity: 1; }

/* --- code --------------------------------------------------- */
.ac-codeblock { border: 1px solid var(--ac-line-2); border-radius: 11px; overflow: hidden; background: #08080c; box-shadow: var(--ac-hair); }
.ac-codeblock header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 13px; border-bottom: 1px solid var(--ac-line); background: var(--ac-panel-2);
  color: var(--ac-ink-3); font: 400 10px var(--ac-mono); letter-spacing: .1em; text-transform: uppercase;
}
.ac-codeblock pre { margin: 0; padding: 13px 15px; overflow-x: auto; font: 400 12px/1.7 var(--ac-mono); color: var(--ac-ink-2); }

/* --- the JSON editor ---------------------------------------- */
.ac-editor { display: grid; gap: 9px; }
.ac-jsoned {
  width: 100%; min-height: 320px; resize: vertical;
  padding: 13px 15px; border: 1px solid var(--ac-line-2); border-radius: 11px;
  background: #08080c; color: var(--ac-ink); font: 400 12px/1.7 var(--ac-mono);
  outline: none; tab-size: 2;
  transition: border-color .13s var(--ac-ease), box-shadow .13s var(--ac-ease);
}
.ac-jsoned:focus { border-color: var(--ac-accent); box-shadow: 0 0 0 3px rgba(125, 139, 255, .11); }
.ac-problems { margin: 0; display: grid; gap: 5px; }
.ac-problems[data-kind="error"] span {
  display: block; padding: 7px 11px; border-radius: 8px;
  border: 1px solid rgba(251, 113, 133, .28); background: rgba(251, 113, 133, .06);
  color: var(--ac-deny); font: 400 11.5px/1.55 var(--ac-mono);
}
.ac-savestate { color: var(--ac-ink-3); font-size: 11.5px; }
.ac-savestate[data-kind="warn"] { color: var(--ac-warn); }
.ac-savestate[data-kind="ok"] { color: var(--ac-ok); }
.ac-savestate[data-kind="error"] { color: var(--ac-deny); }
.ac-savestate[data-kind="busy"] { color: var(--ac-ink-2); }
.ac-form.is-wide { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.ac-form.is-wide .ac-btn { grid-column: 1 / -1; justify-content: center; }

/* --- reviews ------------------------------------------------ */
.ac-reviews { margin: 0; padding: 0; list-style: none; }
.ac-reviews li {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 9px;
  padding: 11px 18px; border-bottom: 1px solid var(--ac-line);
}
.ac-reviews li:last-child { border-bottom: 0; }
.ac-reviews b { font-size: 12.5px; font-weight: 500; }
.ac-reviews p { grid-column: 1 / -1; margin: 0; color: var(--ac-ink-2); font-size: 12px; line-height: 1.6; }
/* A stale approval is struck through rather than removed: the reader needs to
   know it was given and that it no longer counts. */
.ac-reviews li[data-stale="1"] b,
.ac-reviews li[data-stale="1"] .ac-pill { opacity: .45; text-decoration: line-through; }
.ac-stalemark { font-style: normal; color: var(--ac-warn); font-size: 11px; }

.ac-blockers { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ac-blockers li { display: flex; align-items: center; gap: 9px; color: var(--ac-ink-2); font-size: 12.5px; }
.ac-blockers svg { width: 13px; height: 13px; color: var(--ac-deny); flex: 0 0 auto; }

/* --- why ---------------------------------------------------- */
.ac-why { display: grid; gap: 0; }
.ac-why-step { position: relative; padding: 0 0 18px 0; }
.ac-why-step:not(:last-child):before {
  content: ""; position: absolute; left: 5px; top: 20px; bottom: 2px; width: 1px; background: var(--ac-line-2);
}
.ac-why-k {
  display: flex; align-items: center; gap: 10px; margin-bottom: 7px;
  color: var(--ac-ink-3); font: 400 9.5px var(--ac-mono); letter-spacing: .11em; text-transform: uppercase;
}
.ac-why-k:before { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--ac-line-3); background: var(--ac-panel); flex: 0 0 auto; }
.ac-why-step > b, .ac-why-step > p, .ac-why-rules { margin: 0 0 0 21px; }
.ac-why-step > b { display: block; font-size: 13px; font-weight: 400; }
.ac-why-step > p { color: var(--ac-ink-2); font-size: 12.5px; line-height: 1.6; }
.ac-why-verdict { font-size: 16px !important; font-weight: 600 !important; letter-spacing: -.02em; }
.ac-why-verdict.is-ok { color: var(--ac-ok); }
.ac-why-verdict.is-warn { color: var(--ac-warn); }
.ac-why-verdict.is-deny { color: var(--ac-deny); }
.ac-why-rules { padding: 0; list-style: none; display: grid; gap: 4px; }
.ac-why-rules li {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
  padding: 7px 11px; border: 1px solid var(--ac-line); border-radius: 9px; background: var(--ac-panel-2);
  opacity: .5;
}
.ac-why-rules li[data-match="1"] { opacity: 1; border-color: var(--ac-line-3); }
.ac-why-rules code { font-size: 12px; }
.ac-why-rules em { font-style: normal; color: var(--ac-ink-3); font: 400 10px var(--ac-mono); letter-spacing: .08em; }
.ac-why-rules span { color: var(--ac-ink-3); font: 400 9.5px var(--ac-mono); letter-spacing: .1em; }
.ac-why-rules li[data-match="1"] span { color: var(--ac-ok); }

/* --- enterprise verdict badges ------------------------------ */
.ac-verdict-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 6px;
  font: 500 10.5px var(--ac-mono); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; box-shadow: var(--ac-hair);
}
.ac-verdict-badge svg { width: 12px; height: 12px; flex: 0 0 auto; }
.ac-verdict-badge.is-ok, .ac-verdict-badge.is-allow, .ac-verdict-badge.is-permit {
  background: rgba(52, 211, 153, .10); color: var(--ac-ok);
  border: 1px solid rgba(52, 211, 153, .26);
}
.ac-verdict-badge.is-deny, .ac-verdict-badge.is-block {
  background: rgba(244, 63, 94, .10); color: var(--ac-deny);
  border: 1px solid rgba(244, 63, 94, .28);
}
.ac-verdict-badge.is-warn, .ac-verdict-badge.is-hold {
  background: rgba(245, 158, 11, .10); color: var(--ac-warn);
  border: 1px solid rgba(245, 158, 11, .28);
}
.ac-verdict-badge.is-audit, .ac-verdict-badge.is-info {
  background: rgba(100, 116, 139, .12); color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, .22);
}

/* --- executive posture bar ---------------------------------- */
.ac-posture-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 18px; margin-bottom: 18px;
  border: 1px solid var(--ac-line-2); border-radius: 12px;
  background: var(--ac-panel); box-shadow: var(--ac-hair);
}
.ac-posture-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap; }
.ac-posture-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 7px;
  font: 600 11px var(--ac-mono); letter-spacing: .06em; text-transform: uppercase;
}
.ac-posture-badge.is-ok {
  background: rgba(52, 211, 153, .12); color: var(--ac-ok);
  border: 1px solid rgba(52, 211, 153, .28);
}
.ac-posture-badge.is-warn {
  background: rgba(245, 158, 11, .12); color: var(--ac-warn);
  border: 1px solid rgba(245, 158, 11, .28);
}
.ac-posture-meta { color: var(--ac-ink-2); font-size: 12.5px; }
.ac-posture-meta code { color: var(--ac-ink); }
.ac-posture-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* --- 7-stage decision investigation pipeline ---------------- */
.ac-pipeline {
  display: flex; flex-direction: column; gap: 0;
  margin: 12px 0 20px; border: 1px solid var(--ac-line-2); border-radius: 12px;
  background: var(--ac-panel); box-shadow: var(--ac-hair); overflow: hidden;
}
.ac-pipeline-step {
  display: grid; grid-template-columns: 28px 148px minmax(0, 1fr) auto;
  align-items: center; gap: 12px; padding: 11px 16px;
  border-bottom: 1px solid var(--ac-line); font-size: 12.5px;
  transition: background .12s var(--ac-ease);
}
.ac-pipeline-step:last-child { border-bottom: 0; }
.ac-pipeline-step:hover { background: var(--ac-panel-2); }
.ac-pipeline-idx {
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--ac-panel-3); border: 1px solid var(--ac-line-2);
  font: 500 10px var(--ac-mono); color: var(--ac-ink-3);
}
.ac-pipeline-step.is-match .ac-pipeline-idx {
  background: rgba(52, 211, 153, .15); border-color: rgba(52, 211, 153, .35); color: var(--ac-ok);
}
.ac-pipeline-step.is-deny .ac-pipeline-idx {
  background: rgba(244, 63, 94, .15); border-color: rgba(244, 63, 94, .35); color: var(--ac-deny);
}
.ac-pipeline-step.is-hold .ac-pipeline-idx {
  background: rgba(245, 158, 11, .15); border-color: rgba(245, 158, 11, .35); color: var(--ac-warn);
}
.ac-pipeline-name {
  font: 500 11px var(--ac-mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ac-ink-2);
}
.ac-pipeline-body { min-width: 0; color: var(--ac-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-pipeline-body code { font-size: 12px; }
.ac-pipeline-badge {
  font: 500 10.5px var(--ac-mono); letter-spacing: .04em; text-transform: uppercase;
}
.ac-pipeline-badge.is-ok { color: var(--ac-ok); }
.ac-pipeline-badge.is-deny { color: var(--ac-deny); }
.ac-pipeline-badge.is-warn { color: var(--ac-warn); }
.ac-pipeline-badge.is-info { color: var(--ac-cyan); }
.ac-pipeline-badge.is-neutral { color: var(--ac-ink-3); }

/* --- 6-pillar trust score breakdown ------------------------- */
.ac-trust-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin: 16px 0 0;
}
@media (max-width: 900px) { .ac-trust-grid { grid-template-columns: 1fr; } }
.ac-trust-pillar {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--ac-line);
  background: var(--ac-panel-2); box-shadow: var(--ac-hair);
}
.ac-trust-pillar-h {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
}
.ac-trust-pillar-name { font-size: 12.5px; font-weight: 500; color: var(--ac-ink); }
.ac-trust-pillar-score { font: 500 11.5px var(--ac-mono); }
.ac-trust-pillar-score.is-ok { color: var(--ac-ok); }
.ac-trust-pillar-score.is-warn { color: var(--ac-warn); }
.ac-trust-pillar-score.is-deny { color: var(--ac-deny); }
.ac-trust-pillar-desc { font-size: 11.5px; color: var(--ac-ink-3); line-height: 1.45; }

/* --- attention center queue --------------------------------- */
.ac-attention-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ac-attention-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-radius: 10px; border: 1px solid var(--ac-line);
  background: var(--ac-panel-2); box-shadow: var(--ac-hair);
  transition: border-color .12s var(--ac-ease), background .12s var(--ac-ease);
}
.ac-attention-item:hover { border-color: var(--ac-line-2); background: var(--ac-panel-3); }
.ac-attention-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ac-attention-ico {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
}
.ac-attention-ico.is-warn { background: rgba(245, 158, 11, .12); color: var(--ac-warn); }
.ac-attention-ico.is-deny { background: rgba(244, 63, 94, .12); color: var(--ac-deny); }
.ac-attention-ico svg { width: 14px; height: 14px; }
.ac-attention-info { min-width: 0; }
.ac-attention-info b { display: block; font-size: 13px; font-weight: 500; color: var(--ac-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-attention-info p { margin: 2px 0 0; color: var(--ac-ink-3); font-size: 11.5px; }
.ac-attention-action { flex: 0 0 auto; }

.ac-simresult { margin-top: 14px; padding-top: 15px; border-top: 1px solid var(--ac-line); }
.ac-simhead { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; flex-wrap: wrap; }
.ac-note.is-lead { margin: 0 0 13px; color: var(--ac-ink-2); font-size: 12.5px; }
.ac-cond { color: var(--ac-ink-3); font-size: 11.5px; }

/* A rule table is scanned down its Effect column, so every row has to be one
   line tall. Globs are long and the wrapper already scrolls horizontally;
   letting them wrap instead turns a four-rule policy into a wall. */
.ac-table.is-rules { min-width: 860px; }
.ac-table.is-rules td, .ac-table.is-rules th { white-space: nowrap; }
.ac-table.is-rules td:first-child { font-weight: 500; }
.ac-table.is-rules code { display: inline-block; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.ac-table.is-rules .ac-cond { display: inline-block; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.ac-evt { display: inline-grid; place-items: center; width: 15px; height: 15px; vertical-align: -3px; margin-right: 6px; color: var(--ac-accent); }
.ac-evt svg { width: 13px; height: 13px; }
.ac-linkbtn.is-quiet { color: var(--ac-accent); text-decoration: none; }
.ac-linkbtn.is-quiet:hover { text-decoration: underline; }
.ac-stats.is-four { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- drawer ------------------------------------------------- */
.ac-drawer-wrap { position: fixed; inset: 0; z-index: 75; }
.ac-drawer-scrim {
  position: absolute; inset: 0; background: rgba(3, 3, 5, .75);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: ac-fade .14s ease-out;
}
.ac-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 100vw);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--ac-line-2); background: #0c0e14; color: #f0f2f6;
  box-shadow: -24px 0 64px rgba(0, 0, 0, .85);
  animation: ac-slide .22s var(--ac-ease);
  z-index: 10;
}
@keyframes ac-slide { from { transform: translate3d(24px, 0, 0); opacity: 0; } }
.ac-drawer-h {
  display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
  padding: 14px 18px; border-bottom: 1px solid var(--ac-line);
}
.ac-drawer-h h3 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -.02em; }
.ac-drawer-a { margin-left: auto; display: flex; gap: 8px; }
.ac-drawer-b { flex: 1 1 auto; overflow-y: auto; padding: 18px; }
.ac-drawer-b .ac-card { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .ac-drawer, .ac-drawer-scrim { animation: none; }
}
@media (max-width: 900px) {
  .ac-machine { flex-wrap: wrap; gap: 10px 0; }
  .ac-machine li:not(:last-child):after { margin: 0 8px; }
  .ac-form.is-wide { grid-template-columns: 1fr; }
}

/* The console takes the whole viewport. Applied to <body> by console.js only
   while the app view is visible, so the signed-out gate keeps the site chrome. */
body.ac-fullscreen .site-header,
body.ac-fullscreen .cirvix-footer,
body.ac-fullscreen .scroll-rail { display: none !important; }
body.ac-fullscreen { background: #050505; }
body.ac-fullscreen main[data-acct] { padding: 0; }

/* ==================================================================
   CIRVIX — DARK CONTROL SURFACE
   ------------------------------------------------------------------
   The console (--ac-*) has been a dark operations surface since the
   rebuild; the marketing pages stayed on white paper. Two surfaces for
   one product read as two products, and the thing we sell is a control
   plane — it should look like one from the first paint.

   This is the last layer in the file, so it wins on specificity ties
   without deleting the light system underneath it. Nothing above is
   removed: the light values remain the fallback if this block is ever
   dropped, and every rule here is an override, not a rewrite.

   Two roles were entangled in --ink and have to be separated here:
   --ink meant BOTH "text colour" and "inverted surface". On white those
   are the same near-black. On black they are opposites, so every rule
   that painted a surface with --ink is repointed below.
   ================================================================== */
:root {
  /* -- Surface ramp ------------------------------------------------- */
  --paper:#050506;           /* the canvas                              */
  --tile:#08090B;            /* recessed alternating band               */
  --card:#0C0D10;            /* cards, panels, raised content           */
  --raised:#111318;          /* inputs, hover, the step above a card    */
  --raised-2:#17191F;        /* menus, popovers, the highest surface    */

  /* -- Type --------------------------------------------------------- */
  --ink:#F2F3F7;             /* primary — cool white, not pure #fff     */
  --ink-soft:#C6CAD6;
  /* #8F95A6 measures 6.0:1 on --paper and 5.6:1 on --card. Secondary
     copy sits on both, so it is checked against the lighter of the two
     rather than only against the canvas it was sampled on. */
  --muted:#8F95A6;
  --faint:#6B7080;           /* tertiary: timestamps, units, captions   */

  /* -- Structure ---------------------------------------------------- */
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.20);
  --soft-line:rgba(255,255,255,.05);
  --panel:#0C0D10;

  /* -- Inverted surface: what --ink used to mean when it was a bg ---- */
  --invert-bg:#F2F3F7;
  --invert-ink:#08090B;

  /* -- Execution state ----------------------------------------------
     Same semantics as the light theme, re-picked for a dark ground.
     These are the console values, so a decision reads identically in
     the marketing demo and in the product. */
  --state-permit:#34D399;
  --state-permit-line:rgba(52,211,153,.34);
  --state-permit-wash:rgba(52,211,153,.09);
  --state-deny:#FB7185;
  --state-deny-line:rgba(251,113,133,.34);
  --state-deny-wash:rgba(251,113,133,.09);
  --state-hold:#F7B750;
  --state-hold-line:rgba(247,183,80,.34);
  --state-hold-wash:rgba(247,183,80,.09);
  --state-route:#5B9DFF;
  --state-route-line:rgba(91,157,255,.34);
  --state-route-wash:rgba(91,157,255,.09);

  /* -- Accents: cyan is live infrastructure, violet is agent/AI -------
     Used on state and activity only. A panel never takes one as a fill. */
  --accent-cyan:#22D3EE;
  --accent-violet:#A78BFA;

  --lime:#22D3EE;            /* legacy alias, now the infrastructure cyan */

  /* The hover beam, re-lit for a dark ground. */
  --shimmer-a:rgba(255,255,255,.42);
  --shimmer-b:rgba(255,255,255,.10);
}

/* --- Canvas ------------------------------------------------------- */
html { background:var(--paper); }
body, main { background:var(--paper); color:var(--ink); }
::selection { background:rgba(34,211,238,.26); color:#fff; }
body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* --- Inverted surfaces: white-on-white repairs --------------------- */
/* Each of these painted a near-black surface with --ink and wrote #fff
   on top. --ink is now near-white, so only the text colour flips. */
.button.primary { background:var(--invert-bg); color:var(--invert-ink); }
.button.primary:hover { background:#fff; }
.tier-flag, .chip.solid, .segmented button.active,
.announcement b, .hero .announcement b, .skip-link, .method, .model-info .badge {
  background:var(--invert-bg); color:var(--invert-ink);
}
.file-tree .selected, .media-label, .flow-node:hover, .flow-node:focus {
  background:var(--invert-bg); color:var(--invert-ink);
}

/* These were dark panels ON white paper. They must stay a step above the
   canvas rather than inverting into white slabs. */
.panel.dark, .copy-card, .flow-core, .toast,
.demo-window, .dev-window {
  background:var(--card); border-color:var(--line);
}
.panel.dark, .copy-card, .code-block, .copy-code { color:var(--ink-soft); }
.flow-core h3 { color:var(--ink); }
.flow-core i, .core-status:before, .flow-core.is-hit .core-status:before { background:var(--accent-cyan); }

/* --- Cards and containers ----------------------------------------- */
.bento-card, .security-item, .price-card, .panel, .tile, .flow-node,
.calc, .doc-nav, .table-wrap, .faq-item, .media, .stat {
  background:var(--card); border-color:var(--line);
}
.tile:hover, .bento-card:hover, .price-card:hover, a.tile:hover,
.security-item:hover, .deploy-option:hover {
  background:var(--raised); border-color:var(--line-strong);
}
.price-card.featured { background:var(--raised); border-color:var(--line-strong); }
.section .price-card.featured, #pricing .price-card.featured { border-color:var(--accent-violet); }
.price-card.is-match { border-color:var(--accent-cyan); }
.disclosure { background:rgba(255,255,255,.03); border-left-color:var(--accent-violet); }
.save { background:rgba(34,211,238,.12); color:var(--accent-cyan); }
.form-success { background:var(--state-permit-wash); color:var(--state-permit); }
table.compare tbody tr:hover td { background:rgba(255,255,255,.035); }
table.compare .no { color:var(--faint); }

/* --- Header ------------------------------------------------------- */
.site-header.is-scrolled {
  background:rgba(5,5,6,.78); backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.hero .announcement, .announcement { background:var(--card); border-color:var(--line); }

/* --- Form controls ------------------------------------------------ */
.field input, .field select, .field textarea, .auth-email-line, .calc-range {
  background:var(--raised); color:var(--ink); border-color:var(--line);
}
.field input::placeholder, .field textarea::placeholder { color:var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus-visible {
  border-color:var(--accent-cyan); box-shadow:0 0 0 3px rgba(34,211,238,.16); outline:none;
}
.auth-btn { background:var(--raised); color:var(--ink); border-color:var(--line); }
.auth-btn:hover, .auth-btn:focus-visible { background:var(--raised-2); border-color:var(--line-strong); }
.button.secondary { color:var(--ink); border-color:var(--line-strong); }
.button.secondary:hover { background:var(--raised); border-color:var(--ink); }
.billing-toggle:after { background:var(--invert-bg); }
.billing-toggle.annual, .rule-toggle.on { background:var(--accent-cyan); }
.calc-range::-webkit-slider-thumb { background:var(--accent-cyan); box-shadow:0 0 0 1px var(--accent-cyan); }
.calc-range::-moz-range-thumb { background:var(--accent-cyan); box-shadow:0 0 0 1px var(--accent-cyan); }

/* --- Splash ------------------------------------------------------- */
.boot-screen, .boot-screen:after { background:var(--paper); }
.boot-screen:after { background:linear-gradient(90deg,rgba(5,5,6,0),var(--paper) 30%,var(--paper) 100%); }
.boot-meta, .side-sigil { color:var(--faint); }
.side-sigil:before, .boot-glyph:after { background:var(--ink); box-shadow:0 0 18px rgba(34,211,238,.5); }

/* --- Hero atmosphere ---------------------------------------------- */
/* One cool wash, low amplitude. A dark page with no light source reads
   flat; two would read like a gradient template. */
.hero:before { background:radial-gradient(ellipse 900px 520px at 50% 12%,rgba(34,211,238,.07),transparent 70%); }
.hero.spotlight:after { background:radial-gradient(590px circle at var(--x) var(--y),rgba(167,139,250,.10),transparent 70%); }
.orb { background:radial-gradient(circle at 35% 28%,#dff6fb 0 3%,#7fd8ec 16%,#2b6f86 52%,#0b1a20 78%); box-shadow:0 0 52px rgba(34,211,238,.20); }
.cap-orb { background:radial-gradient(circle at 32% 28%,#e7e2ff 0 3%,#a78bfa 16%,#4c3f8a 54%,#120f22 80%); }
.model-canvas:before { border-color:rgba(34,211,238,.22); }
.model-canvas:after { border-color:rgba(255,255,255,.10); }

/* --- Terminals and code ------------------------------------------- */
/* The technical surfaces carry the colour. Everything else stays neutral. */
.terminal, .telemetry strong, .api-status, .response .api-code { color:var(--accent-cyan); }
.telemetry { color:var(--muted); border-color:var(--line); background:var(--tile); }
.command-prompt { color:var(--accent-violet); }
.code-block .k, .code-main .k { color:var(--accent-violet); }
.mint { color:var(--state-permit); }
.pink { color:var(--state-deny); }
.blue { color:var(--state-route); }
.yellow { color:var(--state-hold); }
.white { color:var(--ink); }
.gray, .terminal span, .file-tree, .line-no { color:var(--faint); }
.code-main:after { background:linear-gradient(90deg,transparent,var(--accent-cyan),transparent); box-shadow:0 0 12px rgba(34,211,238,.55); }
.code-line.is-active { background:linear-gradient(90deg,rgba(34,211,238,.12),transparent 70%); }
.traffic i:first-child { background:#4a4f5c; }
.traffic i:nth-child(2) { background:#6b7080; }
.traffic i:nth-child(3) { background:var(--accent-cyan); }
.status-dot { background:var(--state-permit); box-shadow:0 0 0 0 rgba(52,211,153,.45); }
.status-pill { color:var(--muted); }

/* --- Diagram / flow ------------------------------------------------ */
.flow-rail .signal { stroke:var(--accent-cyan); }
.flow-node:hover { border-color:var(--accent-cyan); }
.flow-packets circle { fill:var(--accent-cyan); }
.latency-bar { background:linear-gradient(to top,#177e93,var(--accent-cyan)); }
.security-check { color:var(--state-permit); border-color:var(--state-permit-line); }
.rule-state b { color:var(--accent-cyan); }
.price-features li:before { color:var(--state-permit); }
.faq-question span { color:var(--accent-cyan); }
.eyebrow .dot, .wel-pulse, .wel-n { background:var(--accent-cyan); }
.nav-underline { background:var(--ink); }
.scroll-rail i { background:linear-gradient(90deg,var(--accent-cyan),var(--accent-violet)); }
.menu-bars, .menu-bars:before, .site-header.is-menu-open .menu-bars:after { background:var(--ink); }
.word-wrap.wide-words:after { background:linear-gradient(90deg,var(--accent-cyan),var(--accent-violet),var(--accent-cyan)); }

/* --- Threat-model diagram ------------------------------------------ */
.tm-node { fill:var(--card); stroke:var(--line-strong); }
.tm-zone-core rect { stroke:var(--accent-cyan); }
.tm-stage text { fill:var(--muted); }
.tm-flow line { stroke:var(--line-strong); }

/* --- Depth -------------------------------------------------------- */
/* Shadows do almost nothing on black. Definition comes from a hairline
   top highlight instead, the way the console already does it. */
.bento-card, .price-card, .panel, .tile, .security-item, .demo-window, .dev-window {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.demo-window { box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 32px 80px rgba(0,0,0,.6); }
.demo-window:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 36px 92px rgba(0,0,0,.7); }
.price-card.featured { box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 20px 48px rgba(0,0,0,.5); }

/* --- Footer ------------------------------------------------------- */
.cirvix-footer { background:var(--tile); border-top:1px solid var(--line); }

/* --- Surfaces the first pass missed ---------------------------------
   Found by diffing every light background in the file against what this
   layer already overrides. These are opaque or high-alpha white, so
   unlike the .ac-*/.cvx-* overlays (low-alpha white ON dark, already
   correct) they would have stayed light panels under near-white text. */
.mega { background:rgba(12,13,16,.97); border-color:var(--line); box-shadow:0 18px 50px rgba(0,0,0,.6); }
.mega-link:hover { background:rgba(255,255,255,.05); }
.acct-card { background:var(--card); border-color:var(--line); }
.acct-btn:hover { background:var(--raised); }
.acct-step-n { background:var(--raised-2); color:var(--ink); }
.wel-state { background:var(--card); border-color:var(--line); }
.wel-next a:hover { background:var(--raised); }
.lead-status { background:var(--card); color:var(--ink); border-color:var(--line); }
.capability-visual:before { background:radial-gradient(circle at 63% 36%,rgba(34,211,238,.55),rgba(34,211,238,.06) 26%,transparent 62%); }

/* --- Public verifier ------------------------------------------------
   Its own small block rather than reusing the console's classes: this page
   must render correctly for someone who has never signed in, and coupling it
   to console styles would make a signed-out visitor depend on a stylesheet
   written for a signed-in one. */
.vp-form { display:grid; gap:20px; max-width:760px; }
.vp-form textarea { width:100%; padding:12px 14px; border-radius:var(--r-sm);
  font-family:var(--font-mono); font-size:12.5px; line-height:1.6; resize:vertical;
  background:var(--raised); color:var(--ink); border:1px solid var(--line); }
.vp-form textarea:focus { border-color:var(--accent-cyan); box-shadow:0 0 0 3px rgba(34,211,238,.16); outline:none; }
.field-hint { margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.field-hint input[type=file] { font-size:11.5px; color:var(--muted); max-width:100%; }

#vpResult { margin-top:34px; }
.vp-verdict { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px;
  padding:18px 20px; border-radius:var(--r-sm); border:1px solid var(--line); margin-bottom:18px; }
.vp-verdict .vp-state { font-family:var(--font-mono); font-size:20px; letter-spacing:.06em; font-weight:600; }
.vp-verdict .vp-what { color:var(--muted); font-size:13.5px; line-height:1.6; flex:1 1 320px; }
.vp-ok  { background:var(--state-permit-wash); border-color:var(--state-permit-line); }
.vp-ok  .vp-state { color:var(--state-permit); }
.vp-bad { background:var(--state-deny-wash); border-color:var(--state-deny-line); }
.vp-bad .vp-state { color:var(--state-deny); }
.vp-unk { background:var(--state-hold-wash); border-color:var(--state-hold-line); }
.vp-unk .vp-state { color:var(--state-hold); }

.vp-checks { list-style:none; margin:0 0 22px; padding:0; display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.vp-checks li { background:var(--card); padding:10px 14px; font-size:12.5px; color:var(--muted); line-height:1.55; }
.vp-checks li b { font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  margin-right:10px; color:var(--ink-soft); }
.vp-checks li.ok  b:before { content:"✓ "; color:var(--state-permit); }
.vp-checks li.bad b:before { content:"✕ "; color:var(--state-deny); }

.vp-grid { display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:start;
  padding:22px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card); }
.vp-score { display:grid; place-items:center; min-width:126px; padding:18px 22px;
  border-radius:var(--r-sm); border:1px solid var(--line); }
.vp-score-n { font-size:46px; line-height:1; font-weight:500; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.vp-score-b { margin-top:8px; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; color:var(--muted); }
.vp-permit { background:var(--state-permit-wash); border-color:var(--state-permit-line); }
.vp-permit .vp-score-n { color:var(--state-permit); }
.vp-hold { background:var(--state-hold-wash); border-color:var(--state-hold-line); }
.vp-hold .vp-score-n { color:var(--state-hold); }
.vp-deny { background:var(--state-deny-wash); border-color:var(--state-deny-line); }
.vp-deny .vp-score-n { color:var(--state-deny); }
.vp-unknown .vp-score-n { color:var(--muted); }

.vp-facts { display:grid; grid-template-columns:minmax(110px,auto) 1fr; gap:0; margin:0; font-size:13px; }
.vp-facts dt { padding:7px 18px 7px 0; border-bottom:1px solid var(--soft-line);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.vp-facts dd { margin:0; padding:7px 0; border-bottom:1px solid var(--soft-line);
  font-family:var(--font-mono); font-size:12px; word-break:break-all; }
.vp-reasons { margin-top:20px; }
.vp-reasons h4 { margin:0 0 8px; font-size:13px; font-weight:600; }
.vp-reasons ul { margin:0; padding-left:18px; color:var(--muted); font-size:13px; line-height:1.7; }
.vp-note { margin-top:18px; color:var(--faint); font-size:12px; line-height:1.65; max-width:70ch; }
.vp-actions { margin-top:20px; }

@media (max-width:720px) {
  .vp-grid { grid-template-columns:1fr; gap:18px; }
  .vp-facts { grid-template-columns:1fr; }
  .vp-facts dt { border-bottom:0; padding-bottom:0; }
  .vp-facts dd { padding-top:2px; }
}

/* ==================================================================
   SHARP INSTRUMENTS, MORE COLOUR, AND THE MARK
   ================================================================== */

/* --- Charts read like an instrument, not an illustration -----------
   The lines were already straight segments; `stroke-linejoin: round` and
   `stroke-linecap: round` were rounding every corner off, which is what made
   a polyline look like a spline. Mitred joins and butt caps give the ECG
   silhouette — a spike stays a spike instead of being sanded into a hill. */
.ac-line {
  stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 8;
  stroke-width: 1.75; shape-rendering: geometricPrecision;
}
.ac-line.is-total { stroke: var(--chart-neutral); }
.ac-line.is-ok    { stroke: var(--state-permit); }
.ac-line.is-deny  { stroke: var(--state-deny); }
/* The fill stops well short of the line so the trace stays the brightest
   thing in the panel — an area that competes with its own line is decoration. */
.ac-area { shape-rendering: geometricPrecision; }

/* --- A fuller accent set -------------------------------------------
   Cyan and violet carried everything, which meant every category chip looked
   like a state chip. Blue, green and amber are added as their own hues so a
   category, a state and a link are distinguishable at a glance rather than by
   position alone. */
:root {
  --accent-blue:   #5B9DFF;   /* links, navigation, informational      */
  --accent-green:  #34D399;   /* healthy, verified, complete           */
  --accent-yellow: #F5C451;   /* attention, pending, degraded          */
  --chart-neutral: #A8ADBD;   /* the total series — never a state hue  */

  --blue-wash:   rgba(91,157,255,.12);
  --green-wash:  rgba(52,211,153,.12);
  --yellow-wash: rgba(245,196,81,.12);
}
.tone-blue   { color: var(--accent-blue); }
.tone-green  { color: var(--accent-green); }
.tone-yellow { color: var(--accent-yellow); }
.chip.blue   { background: var(--blue-wash);   color: var(--accent-blue); }
.chip.green  { background: var(--green-wash);  color: var(--accent-green); }
.chip.yellow { background: var(--yellow-wash); color: var(--accent-yellow); }
a:not(.button):not(.nav-item):not(.brand):not(.tile):not(.mega-link):not(.ac-root *):not(.ac-root) { color: var(--accent-blue); }
a:not(.button):not(.nav-item):not(.brand):not(.tile):not(.mega-link):not(.ac-root *):not(.ac-root):hover { color: #8FBCFF; }

/* --- Live colour, on the things that are actually live --------------
   Restricted to status indicators. An interface where everything moves has
   nowhere left to put emphasis, so the pulse marks "this is a live reading"
   and nothing else. */
@keyframes cvx-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 currentColor; }
  50%      { opacity: .58; box-shadow: 0 0 0 3px transparent; }
}
.status-dot, .ac-dot.is-live, .core-status:before {
  animation: cvx-pulse 2.4s var(--ease) infinite;
}
@keyframes cvx-sweep { to { background-position: 200% 0; } }
/* The hero underline moves through the accent set rather than sitting on one
   hue, which is the one place a gradient earns its place: it is the product
   name, and the sweep is slow enough to read as ambient. */
.word-wrap.wide-words:after {
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-violet), var(--accent-blue), var(--accent-cyan));
  background-size: 200% 100%;
  animation: cvx-sweep 9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .status-dot, .ac-dot.is-live, .core-status:before,
  .word-wrap.wide-words:after { animation: none; }
}

/* --- The mark ------------------------------------------------------
   Was a CSS circle with a dot in it, which was a placeholder standing in for
   a logo that existed. It is now the real geometry, masked so it takes
   `currentColor` and works on any surface. */
.brand-mark {
  width: 22px; height: 22px; border: 0; border-radius: 0; background: currentColor;
  -webkit-mask: url("logo-mark.png") center / contain no-repeat;
  mask: url("logo-mark.png") center / contain no-repeat;
}
.brand-mark:after { content: none; }
.boot-glyph {
  width: 76px; height: 76px; background: var(--ink);
  -webkit-mask: url("logo-mark.png") center / contain no-repeat;
  mask: url("logo-mark.png") center / contain no-repeat;
}
@keyframes cvx-mark-in {
  0%   { opacity: 0; transform: scale(.82) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.03) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
body:not(.is-awake) .boot-glyph { opacity: 0; }
body.is-awake .boot-glyph { animation: cvx-mark-in .9s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  body.is-awake .boot-glyph { animation: none; opacity: 1; }
}

/* --- Black-on-black: the rest of the light layer's text colours ------
   The dark pass repointed backgrounds and the surfaces that used --ink as a
   fill, but eight rules set `color:#000` outright, left over from the
   monochrome light theme. Their backgrounds went dark and the text stayed
   pure black, so on the pricing table "Pro", "$1,990" and every tier value
   rendered at a 1.7:1 ratio — present in the DOM, invisible on screen.

   Found by walking the live page and computing contrast rather than by
   reading the stylesheet, which is why they survived the first two passes. */
.method, .model-info .badge { color: var(--invert-ink); }   /* inverted chips: light fill, dark text */
.chip.solid, .tier-flag, .segmented button.active { color: var(--invert-ink); }
.security-check { color: var(--state-permit); }
.rule-state b { color: var(--accent-cyan); }
.price-features li:before { color: var(--state-permit); }
.faq-question span { color: var(--accent-cyan); }
.disclosure { color: var(--ink-soft); }
.price-card.featured { color: var(--ink); }
.form-success { color: var(--state-permit); }
table.grid code { color: var(--ink); }
table.grid td, table.grid th { color: var(--ink); }
table.compare td, table.compare th { color: var(--ink); }
.prose li::marker { color: var(--accent-cyan); }
.cvx-preset.is-active { color: var(--invert-ink); }
.price, .price small, .tier-spec dd, .price-note { color: var(--ink); }
.tier-spec dt, .price-note { color: var(--muted); }

/* The skip link is a light chip that only appears on keyboard focus, so it is
   the one anchor that must NOT take the blue link colour added above. */
.skip-link, .skip-link:focus, .skip-link:focus-visible { color: var(--invert-ink) !important; }

/* --- The last twelve light surfaces --------------------------------
   Found by diffing every light background in the stylesheet against what the
   dark layers already override, rather than by looking at pages one at a time.
   The worst of them was .dialog at #f8f8f5 — the sign-in modal. Everything
   else on the site went dark, the modal stayed a white sheet, and its heading
   inherits --ink, which is now near-white. "Sign in to Cirvix" was rendering
   near-white on white and the whole panel read as broken, which is exactly
   what "the Google sign-in is not showing" looks like from the outside: the
   button was there and measured 192x44 the entire time. */
.dialog {
  background: var(--raised-2); border-color: var(--line-strong); color: var(--ink);
  box-shadow: 0 32px 80px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.05);
}
.dialog h2, .dialog h3, .dialog label, .auth-email-value { color: var(--ink); }
.dialog p, .dialog .small, .dialog .micro, .auth-terms { color: var(--muted); }
.modal-backdrop { background: rgba(2,2,3,.66); }
.close-modal { color: var(--muted); background: none; border: 0; }
.close-modal:hover { color: var(--ink); }
.auth-divider:before, .auth-divider:after { border-top-color: var(--line); }

.keycap { background: var(--raised); color: var(--muted); border-color: var(--line); }
.demo-switcher button.active { background: var(--raised-2); color: var(--ink); }
.command-list button:hover { background: var(--raised); }
.rule-toggle:after { background: var(--invert-bg); }
.media.light { background: var(--card); }
table.compare tbody tr:hover td.is-rec { background: rgba(167,139,250,.10); }
/* The hero pill is a chip on the page ground, not a white card on it. */
.hero .announcement { background: var(--card); border-color: var(--line); }

/* These two are deliberately left alone: .sphere-stack and .clay-shape are
   illustrations whose gradients ARE the artwork, not surfaces that inherited a
   theme. Recolouring them would flatten the only two rendered objects on the
   page into the palette. */

/* Verdict pips keep their semantics but move onto the dark-ground values so a
   deny reads the same here as it does in the console. */
.verdict:before { background: var(--state-deny); }
.verdict.hold:before { background: var(--state-hold); }

/* --- The real mark -------------------------------------------------
   Extracted from the brand sheet's own "Standalone" panel, not traced. The
   earlier assets/logo.svg was my approximation of it and was wrong; it is
   deleted rather than kept around to be picked up by mistake.

   Used as a MASK rather than an <img>: the alpha channel is the mark, so
   `background: currentColor` paints it whatever colour its context is. That
   means one file serves the dark site, a light surface, a hover state and the
   inverted lockup without a second export — and it cannot drift from the
   sheet, because there is only one file. */
.brand-mark {
  width: 24px; height: 24px; border: 0; border-radius: 0; background: currentColor;
  -webkit-mask: url("logo-mark.png") center / contain no-repeat;
  mask: url("logo-mark.png") center / contain no-repeat;
  flex: 0 0 auto;
}
.brand-mark:after { content: none; }
.brand { gap: 9px; }

.boot-glyph {
  width: 84px; height: 84px; background: var(--ink); border: 0; border-radius: 0;
  -webkit-mask: url("logo-mark.png") center / contain no-repeat;
  mask: url("logo-mark.png") center / contain no-repeat;
}
.boot-glyph:after { content: none; }

/* The console shares the mark rather than drawing its own. */
.ac-brand-mark, .ac-logo {
  background: currentColor;
  -webkit-mask: url("logo-mark.png") center / contain no-repeat;
  mask: url("logo-mark.png") center / contain no-repeat;
}

/* --- Sign in has to be reachable without opening a menu ------------
   Below 780px `.nav-actions` is display:none, so the only route to sign-in
   was the copy inside `.mobile-nav` — which is itself display:none until the
   hamburger is opened. Measured at 390px: zero visible [data-nav-auth]
   elements on the page. The hamburger works and reveals it, so nothing was
   broken; it was simply undiscoverable, and for a product whose primary
   action is signing in, "behind a menu" and "not there" are the same thing to
   a visitor.

   The sign-in control comes back into the mobile header beside the hamburger.
   Everything else in .nav-actions stays hidden — the status pill, the command
   trigger and the Launch CTA do not earn header space at this width. */
@media (max-width: 780px) {
  .nav-actions { display: flex; align-items: center; gap: 10px; }
  /* ...but only the auth control survives. */
  .nav-actions > *:not([data-nav-auth]) { display: none; }
  .nav-actions [data-nav-auth] {
    display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
    font-size: 13px; white-space: nowrap;
    border: 1px solid var(--line-strong); border-radius: var(--pill);
    color: var(--ink); background: transparent;
  }
  .nav-actions [data-nav-auth]:active { background: var(--raised); }
  .nav { gap: 10px; }
  /* The hamburger keeps its own slot; the two must not collide. */
  .menu-button { margin-left: 2px; }
}
@media (max-width: 380px) {
  /* On the narrowest phones the wordmark yields before the sign-in control
     does — the brand mark alone still identifies the page. */
  .brand span:not(.brand-mark) { display: none; }
}

/* ==========================================================================
   PALETTE — the product's own three colours
   --------------------------------------------------------------------------
   Cirvix has exactly one vocabulary and it already has three colours in it:
   a call is permitted, held for a human, or denied. Green, amber, red.

   The interface used to carry cyan, violet and blue as well, purely as
   category accents. That was a mistake of the ordinary kind — they were added
   so two chips sitting next to each other would look different — but on a
   security console it costs something specific: a reader learns that colour
   means state, then meets a violet chip that means nothing at all, and after
   that has to read every chip's text to know whether it matters. Decorative
   hue competes with the only hue that carries information.

   So the accents are retired INTO the state palette rather than removed. The
   old tokens still resolve, because fifty rules reference them and rewriting
   each one is how you miss four; they now resolve to members of the same
   family. Differentiation that used to come from hue now comes from weight
   and wash, which is a smaller signal — appropriately, because a category is
   a smaller fact than a verdict.

   Links are green. On a page about what an agent is allowed to do, the "go"
   colour is the honest one for the thing you may click.
   ========================================================================== */
:root {
  /* The three that mean something. */
  --accent-green:  #3DDC84;   /* permitted · verified · healthy · links   */
  --accent-yellow: #F5C451;   /* held · pending · attention · degraded    */
  --accent-red:    #FF5C5C;   /* denied · blocked · failed                */
  --chart-neutral: #A8ADBD;   /* totals and axes — never a verdict hue    */

  --green-wash:  rgba(61,220,132,.12);
  --yellow-wash: rgba(245,196,81,.12);
  --red-wash:    rgba(255,92,92,.12);

  /* Retired hues, aliased rather than deleted. */
  --accent-cyan:   var(--accent-green);
  --accent-violet: var(--accent-yellow);
  --accent-blue:   var(--accent-green);
  --blue-wash:     var(--green-wash);
  --lime:          var(--accent-green);

  /* States, unified with the accents so one verdict is one colour everywhere. */
  --state-permit:  var(--accent-green);
  --state-hold:    var(--accent-yellow);
  --state-deny:    var(--accent-red);
  --cvx-permit:      var(--accent-green);
  --cvx-hold:        var(--accent-yellow);
  --cvx-deny:        var(--accent-red);
  --cvx-permit-wash: var(--green-wash);
  --cvx-hold-wash:   var(--yellow-wash);
  --cvx-deny-wash:   var(--red-wash);
}

.tone-red  { color: var(--accent-red); }
.chip.red  { background: var(--red-wash); color: var(--accent-red); }

a:not(.button):not(.nav-item):not(.brand):not(.tile):not(.mega-link):not(.ac-root *):not(.ac-root) { color: var(--accent-green); }
a:not(.button):not(.nav-item):not(.brand):not(.tile):not(.mega-link):not(.ac-root *):not(.ac-root):hover { color: #6BE8A2; }

/* The hero underline sweeps the verdict set, in the order a call moves
   through it: allowed, held, denied. Slow enough to read as ambient. */
.word-wrap.wide-words:after {
  background: linear-gradient(90deg,
    var(--accent-green), var(--accent-yellow), var(--accent-red), var(--accent-green));
  background-size: 200% 100%;
}

/* --- Escape benchmark, worked scenarios -----------------------------
   A scenario is a sequence, so it is rendered as one: numbered steps, each
   carrying its own verdict. The steps that are SUPPOSED to succeed are shown
   in green alongside the refusals, because a page that only showed denials
   would be describing a system that blocks everything, which is neither what
   this does nor what anyone should buy. */
.bench-case {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 16px 0;
  background: var(--panel, rgba(255,255,255,.02));
}
.bench-case > header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.bench-case > header b { font-size: 15px; letter-spacing: -.01em; }
.bench-narr { margin: 0 0 12px; opacity: .78; font-size: 14px; }
.bench-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.bench-steps li { font-size: 13.5px; line-height: 1.5; }
.bench-steps code { font-size: 12.5px; }
.bench-reason { display: block; opacity: .66; margin-top: 3px; font-size: 12.5px; }
/* The verdict chips carry the meaning; the counter is just an index. */
.bench-steps li::marker { color: var(--chart-neutral); font-variant-numeric: tabular-nums; }

/* A table and the paragraph after it were separated by one pixel, because
   .table-wrap carried a top margin and no bottom one. Tight enough to read as
   a mistake when settled, and genuinely overlapping while the section
   animated in. */
.prose .table-wrap { margin-bottom: 26px; }
.prose .table-wrap + h3 { margin-top: 4px; }

/* --- Runtime Authorization hero: signature + proof points --- */
.hero-signature { margin:18px 0 0; font-size:17px; font-weight:600; color:var(--ink); letter-spacing:-.01em; opacity:0; transform:translateY(16px); animation:reveal .7s .48s var(--ease) forwards; }
.hero-proofpoints { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px; max-width:600px; margin-left:auto; margin-right:auto; opacity:0; transform:translateY(16px); animation:reveal .7s .55s var(--ease) forwards; }
.hero-proofpoints .proofpoint { border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--paper); text-align:left; }
.hero-proofpoints .proofpoint b { display:block; font-size:12px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); margin-bottom:4px; }
.hero-proofpoints .proofpoint span { font-size:13px; color:var(--muted); line-height:1.45; }
@media (max-width:780px) { .hero-proofpoints { grid-template-columns:1fr; } }