/* ======================================================================
       Agent Control Center — marketing site v3
       Tokens: page theme (light paper + navy / dark carbon + warm), GetSet beams,
       ACC v2 "Ember Relay" product tokens (used only inside product scenes).
       ====================================================================== */
    :root {
      /* GetSet beams — hue order is fixed */
      --b-yellow: #dfda4e; --b-orange: #ff9502; --b-coral: #d65d5c; --b-violet: #6d18ee; --b-indigo: #3d12da; --b-blue: #0911e1; --b-sky: #089cf9; --b-mint: #37e1a0; --b-live: #00e6a0;
      --beam: linear-gradient(100deg, #dfda4e 0%, #ff9502 14.29%, #d65d5c 28.57%, #6d18ee 42.86%, #3d12da 57.14%, #0911e1 71.43%, #089cf9 85.71%, #37e1a0 100%);
      --navy: #001670; --navy-2: #0b2596; --carbon: #0e1015; --cream: #f0ede5;
      /* ACC v2 “Ember Relay” — dark · warm · carbon (product scenes keep these in both themes) */
      --c-bg: #151312; --c-surface: #1C1A18; --c-surface-2: #242220; --c-surface-3: #2C2926;
      --c-border: #322F2B; --c-border-strong: #433F3A;
      --c-text: #F2EFEA; --c-text-2: #CCC7BF; --c-text-3: #948E85; --c-text-4: #665F57;
      --c-accent: #F0EFED; --c-accent-fg: #121212;
      --c-blue: #60A5FA; --c-blue-soft: rgba(96,165,250,.12); --c-blue-text: #93C5FD;
      --c-amber: #FACC15; --c-amber-soft: rgba(250,204,21,.12); --c-amber-text: #FDE047;
      --c-violet: #A78BFA; --c-violet-soft: rgba(167,139,250,.12); --c-violet-text: #C4B5FD;
      --c-teal: #2DD4BF; --c-teal-soft: rgba(45,212,191,.12); --c-teal-text: #5EEAD4;
      --c-green: #4ADE80; --c-green-soft: rgba(74,222,128,.12); --c-green-text: #86EFAC;
      --c-red: #F87171; --c-red-soft: rgba(248,113,113,.12); --c-red-text: #FCA5A5;
      --c-gray: #908E89; --c-gray-soft: rgba(144,142,137,.12); --c-gray-text: #B0AEA9;
      --sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
      --serif: "Newsreader", Georgia, "Times New Roman", serif;
      --mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
      --syne: "Syne", "Space Grotesk", Arial, sans-serif;
      --wrap: 1200px; --gutter: 32px; --sec: 96px;
    }
    /* ---- page theme tokens: light (default) ---- */
    .site {
      --paper: #f4f1ea; --paper-2: #ebe7dd; --paper-3: #e2ddd1; --card: #ffffff; --card-2: #faf8f3;
      --ink: #14161c; --ink-2: #454952; --ink-3: #5f636c; --ink-4: #8a8f9a;
      --line: #d8d2c4; --line-2: #c6bfae; --line-soft: #e6e1d6;
      --accent: #001670; --accent-2: #0b2596; --accent-fg: #ffffff; --accent-soft: rgba(0,22,112,.08); --accent-ring: rgba(0,22,112,.16);
      --band: #0e1015; --band-2: #15181f; --band-fg: #f0ede5; --band-fg-2: #b8bcc6; --band-fg-3: #8a8f9a; --band-line: #2a2f39;
      --nav-bg: rgba(244,241,234,.86); --focus: #001670; --shadow: rgba(20,22,28,.28); --shadow-2: rgba(20,22,28,.14);
      --err: #a4262c; --err-line: #e0a3a3; --err-bg: #fdf1f1; --ok-bg: rgba(55,225,160,.10); --ok-line: rgba(0,150,110,.45);
      color-scheme: light;
    }
    /* ---- dark: carbon ground, warm surfaces and type ---- */
    .site[data-theme="dark"] {
      --paper: #0e1015; --paper-2: #14161c; --paper-3: #1a1d24; --card: #161920; --card-2: #1a1d25;
      --ink: #f0ede5; --ink-2: #c4c0b7; --ink-3: #969188; --ink-4: #6f6b64;
      --line: #272a33; --line-2: #363a45; --line-soft: #1f222a;
      --accent: #f0ede5; --accent-2: #ffffff; --accent-fg: #0e1015; --accent-soft: rgba(240,237,229,.08); --accent-ring: rgba(240,237,229,.18);
      --band: #14161c; --band-2: #1a1d24; --band-fg: #f0ede5; --band-fg-2: #c4c0b7; --band-fg-3: #969188; --band-line: #2b2f39;
      --nav-bg: rgba(14,16,21,.84); --focus: #dfda4e; --shadow: rgba(0,0,0,.6); --shadow-2: rgba(0,0,0,.4);
      --err: #f6a5a5; --err-line: rgba(246,165,165,.4); --err-bg: rgba(248,113,113,.10); --ok-bg: rgba(55,225,160,.08); --ok-line: rgba(55,225,160,.45);
      color-scheme: dark;
    }
    @media (prefers-color-scheme: dark) {
      .site:not([data-theme="light"]) {
      --paper: #0e1015; --paper-2: #14161c; --paper-3: #1a1d24; --card: #161920; --card-2: #1a1d25;
      --ink: #f0ede5; --ink-2: #c4c0b7; --ink-3: #969188; --ink-4: #6f6b64;
      --line: #272a33; --line-2: #363a45; --line-soft: #1f222a;
      --accent: #f0ede5; --accent-2: #ffffff; --accent-fg: #0e1015; --accent-soft: rgba(240,237,229,.08); --accent-ring: rgba(240,237,229,.18);
      --band: #14161c; --band-2: #1a1d24; --band-fg: #f0ede5; --band-fg-2: #c4c0b7; --band-fg-3: #969188; --band-line: #2b2f39;
      --nav-bg: rgba(14,16,21,.84); --focus: #dfda4e; --shadow: rgba(0,0,0,.6); --shadow-2: rgba(0,0,0,.4);
      --err: #f6a5a5; --err-line: rgba(246,165,165,.4); --err-bg: rgba(248,113,113,.10); --ok-bg: rgba(55,225,160,.08); --ok-line: rgba(55,225,160,.45);
      color-scheme: dark;
    }
    }
    /* logo marks per theme: one-ink under 150px; navy on paper, white on carbon */
    .site .mark-dark { display: none; }
    .site[data-theme="dark"] .mark-dark { display: block; }
    .site[data-theme="dark"] .mark-light { display: none; }
    @media (prefers-color-scheme: dark) {
      .site:not([data-theme="light"]) .mark-dark { display: block; }
      .site:not([data-theme="light"]) .mark-light { display: none; }
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body { margin: 0; background: #f4f1ea; font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    @media (prefers-color-scheme: dark) { body { background: #0e1015; } }
    .site { background: var(--paper); color: var(--ink); min-height: 100vh; }
    a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
    a:hover { color: var(--accent-2); }
    [hidden] { display: none !important; }
    [id] { scroll-margin-top: 84px; }
    img { max-width: 100%; display: block; }
    h1, h2, h3, h4 { font-family: var(--sans); font-weight: 500; letter-spacing: -0.022em; margin: 0; line-height: 1.06; text-wrap: balance; }
    p { margin: 0; text-wrap: pretty; }
    button { font: inherit; }
    :focus { outline: none; }
    :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .skip { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--accent); color: var(--accent-fg); padding: 10px 14px; font-size: 14px; border-radius: 6px; text-decoration: none; }
    .skip:focus { top: 12px; }
    .wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

    /* type roles */
    .eyebrow { font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 10px; }
    .eyebrow .beamdot { width: 26px; height: 6px; border-radius: 3px; background: var(--beam); display: inline-block; flex: none; }
    .h2 { font-size: clamp(30px, 3.4vw, 44px); max-width: 22ch; }
    .h3 { font-size: clamp(22px, 2.2vw, 28px); }
    .lede { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
    .small { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
    .mono { font-family: var(--mono); }
    .serif { font-family: var(--serif); }
    .more { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; }
    .more:hover { border-bottom-color: currentColor; color: var(--accent-2); }
    .more svg { width: 15px; height: 15px; transition: transform .15s ease; }
    .more:hover svg { transform: translateX(3px); }

    /* buttons */
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: 6px; font-weight: 500; font-size: 15.5px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; white-space: nowrap; font-family: var(--sans); }
    .btn:hover { transform: translateY(-1px); }
    .btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
    .btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-fg); }
    .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
    .btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
    .btn svg { width: 16px; height: 16px; flex: none; }
    .ic { width: 16px; height: 16px; flex: none; }

    /* sections */
    section.sec { padding: var(--sec) 0; position: relative; }
    .sec-head { margin-bottom: 44px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: end; }
    .sec-head .eyebrow { margin-bottom: 16px; }
    .sec-head .lede { margin: 0; font-size: 17px; }
    .sec-head.stack { grid-template-columns: minmax(0, 1fr); row-gap: 16px; align-items: start; }
    .tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; letter-spacing: .02em; border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 11px; color: var(--ink-2); background: transparent; white-space: nowrap; }
    .tag.planned { border-style: dashed; }
    .tag .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--ink-4); }
    .label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--ink-3); }
    .caption { margin-top: 12px; font-size: 13px; color: var(--ink-3); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
    .caption b { font-weight: 500; color: var(--ink-2); }
    .ill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-3); border: 1px solid var(--c-border); border-radius: 3px; padding: 2px 6px; white-space: nowrap; }
    .card-ui { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
    .illb { position: absolute; top: 10px; right: 10px; z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 3px; padding: 2px 6px; background: var(--paper-2); pointer-events: none; }
    .illb.band { color: var(--band-fg-3); border-color: var(--band-line); background: var(--band-2); }
    /* status legend symbols (site-side, with labels) */
    .stat { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
    .stat i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
    .stat.running i { background: var(--c-blue); } .stat.waits i { background: var(--c-amber); } .stat.review i { background: var(--c-violet); } .stat.done i { background: var(--c-teal); } .stat.merged i { background: var(--c-green); } .stat.queued i { background: var(--c-gray); }
    /* role icons (site-side) */
    .role { width: 40px; height: 40px; border-radius: 10px; display: inline-grid; place-items: center; color: #0b0d12; flex: none; }
    .role svg { width: 18px; height: 18px; }
    .role.mgr { background: var(--b-orange); } .role.dev { background: var(--b-sky); } .role.des { background: var(--b-violet); color: #fff; } .role.tst { background: var(--b-mint); } .role.rev { background: var(--b-coral); } .role.you { background: var(--cream); }
    .role.plain { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); }

    /* ============ ACC UI kit (Ember Relay · dark · warm · carbon — the product's own look) ============ */
    .acc { background: var(--c-bg); color: var(--c-text); border: 1px solid var(--c-border-strong); border-radius: 12px; overflow: hidden; font-family: var(--sans); font-size: 13px; line-height: 1.4; box-shadow: 0 40px 80px -48px var(--shadow), 0 0 0 1px rgba(0,0,0,.2); position: relative; text-align: left; }
    .acc-shell { display: grid; grid-template-columns: 172px minmax(0, 1fr); min-height: 100%; }
    .acc-side { background: var(--c-surface); border-right: 1px solid var(--c-border); padding: 10px 8px 12px; display: flex; flex-direction: column; gap: 2px; }
    .acc-brand { display: flex; align-items: center; gap: 8px; padding: 6px 8px 12px; }
    .acc-brand i { width: 22px; height: 22px; border-radius: 6px; background: var(--c-accent); color: var(--c-accent-fg); display: grid; place-items: center; font-style: normal; }
    .acc-brand i svg { width: 13px; height: 13px; }
    .acc-brand b { display: block; font-size: 11px; font-weight: 600; letter-spacing: -0.01em; color: var(--c-text); line-height: 1.1; white-space: nowrap; }
    .acc-brand span { display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-3); margin-top: 3px; font-family: var(--mono); }
    .acc-grp { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-4); padding: 8px 8px 4px; font-weight: 500; }
    .acc-nav { position: relative; display: flex; flex-direction: column; gap: 1px; }
    .acc-item { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; padding: 0 8px; height: 30px; border-radius: 5px; color: var(--c-text-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
    .acc-item svg { width: 14px; height: 14px; color: var(--c-text-3); flex: none; }
    .acc-item.on { color: var(--c-text); }
    .acc-item.on svg { color: var(--c-text); }
    .acc-item .bdg { margin-left: auto; font-family: var(--mono); font-size: 10px; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--c-surface-3); color: var(--c-text-2); display: grid; place-items: center; }
    .acc-item .bdg.danger { background: var(--c-red-soft); color: var(--c-red-text); }
    .acc-hl { position: absolute; left: 0; right: 0; height: 30px; border-radius: 5px; background: var(--c-surface-3); top: 0; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
    .acc-main { min-width: 0; display: flex; flex-direction: column; }
    .acc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 42px; padding: 0 14px; border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
    .acc-crumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--c-text-3); white-space: nowrap; overflow: hidden; }
    .acc-crumb b { color: var(--c-text); font-weight: 500; }
    .acc-crumb .live { width: 6px; height: 6px; border-radius: 50%; background: var(--c-green); display: inline-block; }
    .acc-crumb svg { width: 12px; height: 12px; color: var(--c-text-4); flex: none; }
    .acc-headr { display: flex; align-items: center; gap: 8px; }
    .acc-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 12px; font-size: 11.5px; font-weight: 500; border: 1px solid var(--c-border); color: var(--c-text-2); background: var(--c-surface-2); white-space: nowrap; }
    .acc-pill.amber { background: var(--c-amber-soft); border-color: rgba(250,204,21,.25); color: var(--c-amber-text); }
    .acc-pill svg { width: 12px; height: 12px; }
    .acc-ava { width: 22px; height: 22px; border-radius: 50%; background: var(--c-surface-3); color: var(--c-text); display: grid; place-items: center; font-size: 10px; font-weight: 600; }
    .acc-page { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1; }
    .acc-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .acc-title .t4 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--c-text); display: block; }
    .acc-title span { font-size: 12px; color: var(--c-text-3); }
    .acc-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--c-border); }
    .acc-tab { padding: 7px 10px; font-size: 12.5px; font-weight: 500; color: var(--c-text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
    .acc-tab.on { color: var(--c-text); border-bottom-color: var(--c-text); }
    .acc-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px; padding: 12px; }
    .acc-card.soft { background: var(--c-surface-2); }
    .acc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 5px; font-size: 12.5px; font-weight: 500; border: 1px solid var(--c-border-strong); background: var(--c-surface-2); color: var(--c-text); white-space: nowrap; pointer-events: none; }
    .acc-btn.pri { background: var(--c-accent); color: var(--c-accent-fg); border-color: var(--c-accent); }
    .acc-btn svg { width: 12px; height: 12px; }
    .acc-input { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--c-border-strong); background: var(--c-surface-2); color: var(--c-text-3); font-size: 13px; }
    .acc-input .caret { width: 1px; height: 16px; background: var(--c-text); display: inline-block; }
    /* status chips — semantic, role-fixed */
    .st { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 7px; border-radius: 3px; font-size: 11px; font-weight: 500; white-space: nowrap; background: var(--c-gray-soft); color: var(--c-gray-text); }
    .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .st.running { background: var(--c-blue-soft); color: var(--c-blue-text); }
    .st.review { background: var(--c-violet-soft); color: var(--c-violet-text); }
    .st.blocked { background: var(--c-amber-soft); color: var(--c-amber-text); }
    .st.done { background: var(--c-teal-soft); color: var(--c-teal-text); }
    .st.merged { background: var(--c-green-soft); color: var(--c-green-text); }
    .st.failed { background: var(--c-red-soft); color: var(--c-red-text); }
    .st.online { background: var(--c-green-soft); color: var(--c-green-text); }
    .st.running::before { animation: pulse 1.6s ease-in-out infinite; }
    @keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
    .chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 3px; font-size: 11px; font-weight: 500; border: 1px solid var(--c-border); color: var(--c-text-2); background: transparent; white-space: nowrap; }
    .chip.mono { font-family: var(--mono); font-size: 10.5px; }
    .chip.p1 { border-color: rgba(248,113,113,.35); color: var(--c-red-text); }
    .chip.p2 { color: var(--c-text-2); }
    .chip.wait { background: var(--c-amber-soft); border-color: rgba(250,204,21,.25); color: var(--c-amber-text); }
    .chip svg { width: 11px; height: 11px; }
    /* identity — one beam each (brand pattern), square avatar (product shape) */
    .ava { width: 20px; height: 20px; border-radius: 4px; display: inline-grid; place-items: center; font-size: 9.5px; font-weight: 600; color: #0b0d12; flex: none; letter-spacing: 0; }
    .ava.lg { width: 30px; height: 30px; border-radius: 6px; font-size: 12px; }
    .ava.you { background: var(--cream); }
    .ava.mgr { background: var(--b-orange); }
    .ava.dev { background: var(--b-sky); }
    .ava.des { background: var(--b-violet); color: #fff; }
    .ava.tst { background: var(--b-mint); }
    .ava.rev { background: var(--b-coral); }
    .who { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-text-2); white-space: nowrap; }
    /* task card (Work board) */
    .task { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px; padding: 10px 11px; display: flex; flex-direction: column; gap: 7px; position: relative; }
    .task .tk { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--c-text-3); }
    .task .tk .id::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c-gray); margin-right: 7px; vertical-align: 1px; }
    .task.is-running .tk .id::before { background: var(--c-blue); }
    .task.is-review .tk .id::before { background: var(--c-violet); }
    .task.is-blocked .tk .id::before { background: var(--c-amber); }
    .task.is-done .tk .id::before { background: var(--c-teal); }
    .task.is-merged .tk .id::before { background: var(--c-green); }
    .task .tt { font-size: 13px; font-weight: 500; color: var(--c-text); line-height: 1.3; }
    .task .tm { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    .col-h { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--c-text-2); font-weight: 500; padding: 0 2px 6px; border-bottom: 1px solid var(--c-border); }
    .col-h .n { font-family: var(--mono); font-size: 10.5px; color: var(--c-text-3); }
    .col-h i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 7px; background: var(--c-gray); vertical-align: 1px; }
    .col-h i.q { background: var(--c-gray); } .col-h i.r { background: var(--c-blue); } .col-h i.v { background: var(--c-violet); } .col-h i.d { background: var(--c-teal); }
    /* chat */
    .msg { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; align-items: start; }
    .msg .ava { margin-top: 1px; }
    .msg .from { font-size: 11px; color: var(--c-text-3); margin-bottom: 3px; display: flex; gap: 6px; align-items: baseline; }
    .msg .from b { color: var(--c-text-2); font-weight: 500; }
    .msg p { font-size: 13px; color: var(--c-text); line-height: 1.45; }
    .msg.agent p { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 8px; padding: 9px 11px; }
    /* inbox rows + drawer */
    .irow { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-surface); }
    .irow .it { font-size: 13px; font-weight: 500; color: var(--c-text); }
    .irow .im { font-size: 11.5px; color: var(--c-text-3); margin-top: 2px; }
    .irow .ii { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; }
    .irow .ii svg { width: 12px; height: 12px; }
    .irow .ii.amber { background: var(--c-amber-soft); color: var(--c-amber-text); }
    .irow .ii.violet { background: var(--c-violet-soft); color: var(--c-violet-text); }
    .irow .ii.gray { background: var(--c-gray-soft); color: var(--c-gray-text); }
    .irow .ctl { display: flex; gap: 6px; }
    .rail { display: flex; align-items: center; gap: 0; }
    .rail .rs { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 9.5px; white-space: nowrap; color: var(--c-text-3); min-width: 0; flex: 1; position: relative; }
    .rail .rs i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c-border-strong); background: var(--c-bg); display: block; position: relative; z-index: 1; }
    .rail .rs.done i { background: var(--c-teal); border-color: var(--c-teal); }
    .rail .rs.now i { background: var(--c-violet); border-color: var(--c-violet); box-shadow: 0 0 0 4px var(--c-violet-soft); }
    .rail .rs::before { content: ""; position: absolute; top: 4px; left: -50%; right: 50%; height: 2px; background: var(--c-border-strong); }
    .rail .rs:first-child::before { display: none; }
    .rail .rs.done::before, .rail .rs.now::before { background: var(--c-teal); }
    .actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
    /* knowledge rows, decisions, context panel */
    .krow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-surface); }
    .krow .ki { width: 26px; height: 26px; border-radius: 6px; background: var(--c-surface-3); display: grid; place-items: center; color: var(--c-text-2); }
    .krow .ki svg { width: 13px; height: 13px; }
    .krow .kk { font-family: var(--mono); font-size: 10.5px; color: var(--c-text-3); margin-bottom: 3px; }
    .krow .kt { font-size: 13px; color: var(--c-text); line-height: 1.4; }
    .krow .kt em { color: var(--c-text-2); font-family: var(--serif); font-size: 14px; }
    .krow .kd { font-family: var(--mono); font-size: 10.5px; color: var(--c-text-3); white-space: nowrap; }
    .ctxp { border: 1px dashed var(--c-border-strong); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
    .ctxp .lab { font-family: var(--mono); font-size: 10.5px; color: var(--c-text-3); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
    .ctxp .sel { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; color: var(--c-text); padding: 7px 9px; border-radius: 6px; background: var(--c-surface-2); border: 1px solid var(--c-border); }
    .ctxp .sel svg { width: 13px; height: 13px; color: var(--c-text-2); }
    .ctxp .sel .why { font-family: var(--mono); font-size: 10px; color: var(--c-text-3); }
    .ctxp .sel.hi { border-color: rgba(167,139,250,.5); }
    .knob { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--c-border); font-size: 12.5px; }
    .knob:last-child { border-bottom: 0; }
    .knob .kn { color: var(--c-text); font-weight: 500; }
    .knob .kd { display: block; font-size: 11px; color: var(--c-text-3); margin-top: 2px; }
    .seg { display: inline-flex; border: 1px solid var(--c-border-strong); border-radius: 5px; overflow: hidden; font-size: 11px; font-weight: 500; }
    .seg span { padding: 3px 9px; color: var(--c-text-3); }
    .seg span.on { background: var(--c-surface-3); color: var(--c-text); }
    /* runner rows */
    .rrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-surface); font-size: 12.5px; }
    .rrow svg { width: 16px; height: 16px; color: var(--c-text-2); }
    .rrow b { font-weight: 500; color: var(--c-text); display: block; }
    .rrow .rm { font-size: 11px; color: var(--c-text-3); display: block; margin-top: 1px; }
    .rrow .hb { font-family: var(--mono); font-size: 10.5px; color: var(--c-text-3); }
    .inst { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--c-text-2); background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 6px; padding: 8px 10px; overflow: hidden; white-space: nowrap; }
    .inst .p { color: var(--c-text-3); }
    /* plan rows */
    .trow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 7px; align-items: center; height: 40px; padding: 0 9px; border: 1px solid var(--c-border); border-radius: 7px; background: var(--c-surface); }
    .trow .id { font-family: var(--mono); font-size: 10.5px; color: var(--c-text-3); }
    .trow .tt { font-size: 12.5px; font-weight: 500; color: var(--c-text); white-space: nowrap; overflow: hidden; display: flex; align-items: center; gap: 7px; min-width: 0; }
    .trow .tt > span:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .trow .tt .ava { width: 16px; height: 16px; font-size: 8px; border-radius: 3px; }
    .trow .stt { display: inline-flex; gap: 6px; align-items: center; }
    /* beam patterns (brand) */
    .beam-rail { height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; position: relative; }
    .acc .beam-rail { background: rgba(240,237,229,.08); }
    .beam-rail > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--beam); width: var(--p, 0%); transition: width .9s cubic-bezier(.2,.7,.2,1); }
    .beam-line { height: 3px; border-radius: 2px; background: var(--beam); }
    .beam-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--b-live); animation: gs-breathe 1.6s ease-in-out infinite; display: inline-block; }
    .globe { width: 18px; height: 18px; border-radius: 50%; background: var(--beam); display: inline-block; flex: none; }
    @keyframes gs-breathe { 0%, 100% { opacity: .28; } 50% { opacity: .85; } }
    @keyframes gs-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(220%); } }
    @keyframes gs-flow { to { stroke-dashoffset: -1000; } }
    /* stage colours — the story's five stages in hue order */
    .s1 { --sc: var(--b-yellow); } .s2 { --sc: var(--b-orange); } .s3 { --sc: var(--b-coral); } .s4 { --sc: var(--b-violet); } .s5 { --sc: var(--b-sky); }

    /* example product (the founder's app — light, deliberately not ACC) */
    .ex { background: #fbfaf7; color: #1b1a17; border: 1px solid #ddd8cc; border-radius: 10px; overflow: hidden; font-family: var(--sans); font-size: 12px; box-shadow: 0 24px 50px -30px rgba(20,18,16,.5); text-align: left; }
    .ex-bar { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; background: #efece4; border-bottom: 1px solid #ddd8cc; font-family: var(--mono); font-size: 10px; color: #6d675c; }
    .ex-bar i { width: 7px; height: 7px; border-radius: 50%; background: #cfc9bc; display: inline-block; }
    .ex-bar .url { margin-left: 6px; flex: 1; min-width: 0; background: #fff; border: 1px solid #e3ded3; border-radius: 4px; height: 18px; display: flex; align-items: center; padding: 0 8px; color: #8b8477; overflow: hidden; white-space: nowrap; }
    .ex-bar .lab { font-family: var(--sans); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #8b8477; white-space: nowrap; }
    .ex-in { padding: 14px; }
    .ex h5 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; color: #1b1a17; }
    .ex .sub { color: #6d675c; font-size: 11.5px; }
    .ex .exf { margin-top: 10px; }
    .ex .exf label { display: block; font-size: 10.5px; font-weight: 500; color: #4a453c; margin-bottom: 4px; }
    .ex .exf span { display: flex; align-items: center; height: 28px; padding: 0 9px; border: 1px solid #ddd8cc; border-radius: 5px; background: #fff; color: #8b8477; font-size: 11.5px; }
    .ex .exf span.f { color: #1b1a17; }
    .ex .exbtn { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 12px; border-radius: 5px; background: #1b1a17; color: #fff; font-size: 11.5px; font-weight: 500; margin-top: 12px; }
    .ex .check { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #ece8de; font-size: 12px; color: #1b1a17; }
    .ex .check i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #cfc9bc; display: grid; place-items: center; flex: none; }
    .ex .check.ok i { background: #1b1a17; border-color: #1b1a17; color: #fff; }
    .ex .check.ok i svg { width: 9px; height: 9px; }
    .ex .check.ok span { color: #6d675c; text-decoration: line-through; text-decoration-color: #cfc9bc; }
    .ex .skel { height: 10px; border-radius: 5px; background: #e6e1d6; margin-top: 10px; }
    .ex .skel.w60 { width: 60%; } .ex .skel.w40 { width: 40%; } .ex .skel.w80 { width: 80%; } .ex .skel.tall { height: 28px; border-radius: 6px; margin-top: 12px; }

    /* reveal */
    .js .rv { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
    .js .rv.in { opacity: 1; transform: none; }
    /* pages (landing + detail views) */
    .page[hidden] { display: none !important; }
    .page-head { padding: 40px 0 8px; }
    .back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; margin-bottom: 28px; }
    .back svg { width: 14px; height: 14px; transform: rotate(180deg); }
    .back:hover { color: var(--accent); }
    .page-head h1 { font-size: clamp(34px, 4vw, 52px); max-width: 20ch; }
    .page-head .lede { margin-top: 18px; }

    @media (max-width: 1040px) {
      .sec-head { grid-template-columns: minmax(0, 1fr); row-gap: 14px; align-items: start; }
    }
    @media (max-width: 640px) {
      :root { --gutter: 20px; --sec: 68px; }
      body { font-size: 16px; }
      .h2 { font-size: clamp(27px, 7.6vw, 34px); }
      .acc-shell { grid-template-columns: minmax(0, 1fr); }
      .acc-side { display: none; }
      .acc-head { height: 40px; }
      .irow { grid-template-columns: 22px minmax(0, 1fr); align-items: start; }
      .irow .ctl { grid-column: 2; }
      .rrow { grid-template-columns: 26px minmax(0, 1fr); }
      .rrow .st, .rrow .hb { grid-column: 2; justify-self: start; }
      .inst { white-space: normal; flex-wrap: wrap; }
    }
    .motion-off .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
    .motion-off .st.running::before, .motion-off .beam-dot, .motion-off .flow, .motion-off .drafting .beam-rail > i { animation: none !important; }
    .motion-off .anim { opacity: 1 !important; transform: none !important; animation: none !important; }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .site .anim { opacity: 1 !important; transform: none !important; animation: none !important; }
      .js .rv { opacity: 1; transform: none; transition: none; }
      .btn, .btn:hover { transition: none; transform: none; }
      .acc-hl, .beam-rail > i { transition: none; }
      .st.running::before, .beam-dot, .drafting .beam-rail > i, .spin, .flow { animation: none !important; }
      .more svg { transition: none; }
    }
  

  .nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line); color: var(--ink); }
  .nav-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; }
  .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); min-width: 0; }
  .lockup { display: flex; align-items: flex-start; gap: 0.31em; font-family: var(--syne); font-weight: 700; font-size: 21px; line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
  .lockup img { height: 1.125em; width: auto; margin-top: -0.02em; }
  .lockup .w { padding-top: 0.14em; }
  .brand .sep { width: 1px; height: 20px; background: var(--line-2); flex: none; }
  .brand .prod { font-size: 14.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
  .links { display: flex; align-items: center; gap: 24px; }
  .links a { font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; white-space: nowrap; }
  .links a:hover { color: var(--ink); border-bottom-color: var(--ink-4); }
  .links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
  .nav-r { display: flex; align-items: center; gap: 14px; }
  .nav .btn { min-height: 38px; padding: 0 14px; font-size: 14px; }
  /* theme selector — three radios styled as a segmented control */
  .theme { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px; margin: 0; background: var(--paper-2); }
  .theme legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .theme label { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--ink-3); cursor: pointer; }
  .theme label:hover { color: var(--ink); }
  .theme input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .theme input:checked + svg { color: var(--accent-fg); }
  .theme label:has(input:checked) { background: var(--accent); color: var(--accent-fg); }
  .theme label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
  .theme svg { width: 15px; height: 15px; position: relative; }
  .menu-btn { display: none; width: 44px; height: 44px; border-radius: 6px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
  .menu-btn svg { width: 20px; height: 20px; }
  .mobile-menu { border-top: 1px solid var(--line); background: var(--paper); }
  .mobile-menu a { display: block; padding: 15px var(--gutter); font-size: 16px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
  .mobile-menu .mrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px var(--gutter); border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
  .mobile-menu .cta { padding: 18px var(--gutter) 22px; }
  @media (max-width: 1040px) {
    .links, .nav-r .btn-primary, .nav-r .theme { display: none; }
    .menu-btn { display: inline-flex; }
    .brand .prod, .brand .sep { display: none; }
  }


  .hero { padding: 56px 0 64px; overflow: hidden; position: relative; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; align-items: start; }
  .hero-copy { padding-top: 26px; position: relative; z-index: 2; }
  .hero .eyebrow { margin-bottom: 22px; }
  .hero h1 { font-size: clamp(38px, 4.4vw, 60px); max-width: 13ch; letter-spacing: -0.03em; }
  .hero .lede { margin-top: 22px; max-width: 40ch; font-size: 18.5px; }
  .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
  .hero .note { margin-top: 16px; }
  .hero .note b { color: var(--ink-2); font-weight: 500; }
  /* provider marks — compatibility information, text labels only */
  .prov-row { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
  .prov-row .label { margin-bottom: 12px; }
  .prov-list { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
  .prov { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px 0 6px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); color: var(--ink); text-decoration: none; }
  .prov i { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); font-style: normal; }
  .prov i svg { width: 15px; height: 15px; }
  .prov b { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.1; }
  .prov span { display: block; font-size: 11px; color: var(--ink-3); margin-top: 3px; line-height: 1; }
  .prov-list .more { font-size: 14px; margin-left: 4px; }

  /* ---- the scene: strands → ACC → example output ---- */
  .scene-wrap { position: relative; --bleed: calc(clamp(0px, (100vw - var(--wrap)) / 2 - 24px, 88px) + var(--gutter)); margin-right: calc(-1 * var(--bleed)); --k: 1; }
  .scene-box { position: relative; height: calc(600px * var(--k)); }
  .scene { position: absolute; left: 0; top: 0; width: 760px; height: 600px; transform-origin: 0 0; transform: scale(var(--k)); }
  .strands { position: absolute; left: 0; top: 0; width: 760px; height: 600px; overflow: visible; pointer-events: none; }
  .strands .sh use { stroke: #1a1410; stroke-width: 13; opacity: .16; filter: url(#hs-blur); transform: translateY(9px); }
  .strands .gl use { stroke-width: 18; opacity: 0; filter: url(#hs-glow); }
  .strands .bd use { stroke-width: 9; }
  .strands .hi use { stroke: #fff; stroke-width: 2.2; opacity: .42; transform: translateY(-2.4px); }
  .site[data-theme="dark"] .strands .sh use { opacity: 0; }
  .site[data-theme="dark"] .strands .gl use { opacity: .38; }
  .site[data-theme="dark"] .strands .hi use { opacity: .3; }
  @media (prefers-color-scheme: dark) {
    .site:not([data-theme="light"]) .strands .sh use { opacity: 0; }
    .site:not([data-theme="light"]) .strands .gl use { opacity: .38; }
    .site:not([data-theme="light"]) .strands .hi use { opacity: .3; }
  }
  @media (prefers-reduced-motion: reduce) {
    .stage .strands g use, .stage .beat, .stage .stt > *, .stage .toast, .stage .ex-screen, .stage .globe-h, .stage .acc-hl, .stage .apv .acc-btn, .stage .apv .st, .stage .rail-p > i { transition: none !important; }
    .stage .strands .flow, .drafting .beam-rail > i { animation: none !important; }
  }
  .strands .c0 { stroke: var(--b-yellow); } .strands .c1 { stroke: var(--b-orange); } .strands .c2 { stroke: var(--b-coral); } .strands .c3 { stroke: var(--b-violet); } .strands .c4 { stroke: var(--b-indigo); } .strands .c5 { stroke: var(--b-blue); } .strands .c6 { stroke: var(--b-sky); } .strands .c7 { stroke: var(--b-mint); }
  .strands .flow { stroke: #fff; stroke-width: 3.5; stroke-dasharray: 26 974; stroke-dashoffset: 0; opacity: 0; transition: opacity .5s ease; }
  .stage.b3 .strands .flow { opacity: .85; animation: gs-flow 5.5s linear infinite; }
  .stage.b5 .strands .flow { opacity: 0; animation: none; }
  /* draw-in: strands are hidden until beat 1, then draw with a stagger */
  .stage .strands g use { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2.6s cubic-bezier(.3,.2,.2,1); }
  .stage .strands .c1 { transition-delay: .08s; } .stage .strands .c2 { transition-delay: .16s; } .stage .strands .c3 { transition-delay: .24s; } .stage .strands .c4 { transition-delay: .32s; } .stage .strands .c5 { transition-delay: .4s; } .stage .strands .c6 { transition-delay: .48s; } .stage .strands .c7 { transition-delay: .56s; }
  .stage.b1 .strands g use { stroke-dashoffset: 0; }
  .globe-h { position: absolute; left: 747px; top: 343px; width: 26px; height: 26px; border-radius: 50%; background: var(--beam); box-shadow: 0 8px 20px -6px rgba(20,18,16,.5), inset -3px -4px 8px rgba(0,0,0,.25), inset 3px 3px 6px rgba(255,255,255,.35); z-index: 5; opacity: 0; transform: scale(.4); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .stage.b5 .globe-h { opacity: 1; transform: none; }
  .stage.paused .st.running::before, .stage.paused .beam-dot, .stage.paused .drafting .beam-rail > i, .stage.paused .strands .flow { animation-play-state: paused; }
  .hero-acc { position: absolute; left: 0; top: 0; width: 580px; height: 390px; z-index: 2; box-shadow: 0 50px 90px -40px var(--shadow), 0 0 0 1px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.06) inset; }
  .hero-acc .acc-shell { grid-template-columns: 150px minmax(0, 1fr); height: 100%; }
  .hero-acc .acc-brand { padding: 6px 4px 12px; gap: 6px; }
  .hero-acc .acc-brand b { font-size: 10px; }
  .hero-acc .trow .tt { font-size: 12px; }
  .hero-acc .trow .st, .hero-acc .trow .chip { font-size: 10.5px; padding: 0 6px; }
  .hero-acc .acc-page { padding: 11px 13px 13px; gap: 9px; }
  .hero-acc .acc-title .t4 { font-size: 14px; }
  .hero-acc .acc-item { height: 28px; font-size: 12px; }
  .hero-acc .acc-hl { height: 28px; }
  .hero-acc .acc-side { padding-bottom: 8px; }
  .hwork { display: grid; grid-template-columns: minmax(0, 13fr) minmax(0, 20fr); gap: 10px; flex: 1; min-height: 0; }
  .hchat { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .hchat .acc-card { padding: 9px; display: flex; flex-direction: column; gap: 9px; flex: 1; overflow: hidden; }
  .hchat .msg p { font-size: 12px; }
  .hchat .acc-input { margin-top: auto; height: 32px; font-size: 12px; }
  .drafting { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px dashed var(--c-border-strong); border-radius: 7px; color: var(--c-text-3); font-size: 11.5px; }
  .drafting .beam-rail { height: 4px; }
  .drafting .beam-rail > i { width: 42%; animation: gs-sweep 1.4s cubic-bezier(.5,0,.5,1) infinite; transition: none; }
  .sysline { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--c-text-3); padding: 0 2px; }
  .sysline .beam-dot { width: 7px; height: 7px; }
  .sysline b { color: var(--c-text-2); font-weight: 500; }
  .hplan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .hplan .ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--c-text-3); padding: 0 2px; min-height: 26px; }
  .hplan .ph b { color: var(--c-text); font-weight: 500; }
  .hplan .trow { height: 32px; }
  .skl { height: 32px; border-radius: 7px; border: 1px dashed var(--c-border); background: transparent; display: flex; align-items: center; gap: 8px; padding: 0 9px; }
  .skl i { display: block; height: 8px; border-radius: 4px; background: var(--c-surface-3); }
  .skl i:first-child { width: 22px; } .skl i:nth-child(2) { width: 46%; } .skl i:last-child { width: 44px; margin-left: auto; }
  .trow .st, .trow .chip { transition: opacity .3s ease; }
  .toast { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; background: var(--c-surface-2); border: 1px solid var(--c-border-strong); color: var(--c-text); font-size: 11.5px; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
  .toast .ii { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--c-green-soft); color: var(--c-green-text); flex: none; }
  .toast .ii svg { width: 12px; height: 12px; }
  .toast b { font-weight: 500; }
  .toast span { color: var(--c-text-3); }
  .hero-ex { position: absolute; left: 540px; top: 356px; width: 220px; z-index: 4; box-shadow: 0 30px 60px -30px rgba(20,18,16,.55), 0 0 0 1px rgba(0,0,0,.06); }
  .hero-ex .ex-in { min-height: 178px; position: relative; }
  .hero-ex h5 { font-size: 13.5px; }
  .hero-ex .check { padding: 5px 0; font-size: 11.5px; }
  .ex-screen { position: absolute; inset: 14px; opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
  .ex-screen .exf label { font-size: 10px; }
  .ex-screen .exf span { height: 26px; }
  .ex-screen.on { opacity: 1; transform: none; }
  .ex-0 .bld { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6d675c; margin-top: 12px; }
  .ex-0 .bld .beam-dot { width: 7px; height: 7px; }
  /* scene caption + controls (text lives outside the moving surfaces) */
  .seq { margin-top: 18px; margin-right: var(--bleed); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: start; }
  .seq-cap { grid-column: 1 / -1; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; min-height: 44px; }
  .seq-cap b { color: var(--ink); font-weight: 500; }
  .seq-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; padding-top: 12px; }
  .seq-rail .beam-rail { position: absolute; left: 6px; right: 6px; top: 0; height: 4px; border-radius: 2px; }
  .seq-step { background: none; border: 0; padding: 0; text-align: left; color: var(--ink-3); font-size: 12px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 7px; min-height: 32px; white-space: nowrap; }
  .seq-step i { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); display: inline-block; opacity: .35; transition: opacity .3s ease; flex: none; }
  .seq-step.on { color: var(--ink); }
  .seq-step.on i { opacity: 1; box-shadow: 0 0 0 3px var(--accent-soft); }
  .seq-step.past i { opacity: .9; }
  .seq-btns { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
  .seq-btn { width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); cursor: pointer; display: inline-grid; place-items: center; }
  .seq-btn svg { width: 14px; height: 14px; }
  .seq-btn:hover { border-color: var(--ink-3); }
  .seq-note { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; margin-right: 4px; }
  .scene-more { display: none; background: none; border: 0; cursor: pointer; padding: 0; align-self: flex-start; }

  /* beats — cumulative classes b1..b5 on .stage; markup default (all five) is the complete frame */
  .stage .beat { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
  .stage.b1 .beat.k1, .stage.b2 .beat.k2, .stage.b3 .beat.k3, .stage.b4 .beat.k4, .stage.b5 .beat.k5 { opacity: 1; transform: none; }
  .stage .trow.beat { transition-delay: var(--d, 0s); }
  .stage.b2 .k1only, .stage.b2 .beat.k1.k1only { opacity: 0; position: absolute; pointer-events: none; }
  .stage .stt { position: relative; min-width: 0; justify-content: flex-end; }
  .stage .stt > * { transition: opacity .35s ease; }
  .stage .s-running, .stage .s-wait, .stage .s-done, .stage .s-merged, .stage .s-review { opacity: 0; position: absolute; }
  .stage .s-queued { opacity: 1; position: static; }
  .stage.b3 .r1 .s-queued, .stage.b3 .r2 .s-queued, .stage.b3 .r3 .s-queued, .stage.b3 .r4 .s-queued { opacity: 0; position: absolute; }
  .stage.b3 .r1 .s-running, .stage.b3 .r2 .s-running, .stage.b3 .r3 .s-wait, .stage.b3 .r4 .s-wait { opacity: 1; position: static; }
  .stage.b4 .r1 .s-running, .stage.b4 .r2 .s-running, .stage.b4 .r3 .s-wait, .stage.b4 .r4 .s-wait { opacity: 0; position: absolute; }
  .stage.b4 .r1 .s-done, .stage.b4 .r2 .s-done, .stage.b4 .r3 .s-review, .stage.b4 .r4 .s-running { opacity: 1; position: static; }
  .stage.b5 .r3 .s-review, .stage.b5 .r4 .s-running { opacity: 0; position: absolute; }
  .stage.b5 .r3 .s-merged, .stage.b5 .r4 .s-done { opacity: 1; position: static; }
  .stage .ex-0 { opacity: 1; transform: none; }
  .stage.b4 .ex-0 { opacity: 0; }
  .stage.b4 .ex-a { opacity: 1; transform: none; }
  .stage.b5 .ex-a { opacity: 0; }
  .stage.b5 .ex-c { opacity: 1; transform: none; }
  .stage.b5 .toast { opacity: 1; transform: none; }
  .stage .acc-hl { transform: translateY(var(--hl, 0px)); }
  .stage.b1 { --hl: 29px; } .stage.b2 { --hl: 87px; } .stage.b3 { --hl: 87px; } .stage.b4 { --hl: 29px; } .stage.b5 { --hl: 58px; }
  .stage .apv .acc-btn { transition: opacity .3s ease; }
  .stage.b3 .apv .acc-btn.pri { opacity: 0; position: absolute; }
  .stage .apv .st.done { opacity: 0; position: absolute; }
  .stage.b3 .apv .st.done { opacity: 1; position: static; }
  .stage .rail-p { --p: 4%; } .stage.b2 .rail-p { --p: 26%; } .stage.b3 .rail-p { --p: 50%; } .stage.b4 .rail-p { --p: 74%; } .stage.b5 .rail-p { --p: 100%; }

  @media (max-width: 1040px) {
    .hero { padding: 40px 0 56px; }
    .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
    .hero-copy { padding-top: 0; }
    .hero h1 { max-width: 16ch; }
    .scene-wrap { margin-right: 0; max-width: 760px; --bleed: 0px; }
    .seq { margin-right: 0; }
  }
  @media (max-width: 640px) {
    .hero h1 { font-size: clamp(32px, 9.4vw, 42px); }
    .hero-cta .btn { width: 100%; }
    .prov { height: 40px; }
    /* phone: a simplified, readable scene — no miniature dashboard */
    .scene-box { height: auto; }
    .scene { position: static; width: auto; height: auto; transform: none; display: flex; flex-direction: column; gap: 14px; }
    .strands, .globe-h { display: none; }
    .scene .strands-mini { display: block; width: 100%; height: 56px; }
    .hero-acc { position: static; width: auto; height: auto; }
    .hero-acc .acc-shell { grid-template-columns: minmax(0, 1fr); }
    .hwork { grid-template-columns: minmax(0, 1fr); }
    .hchat { display: none; }
    .hero-ex { position: static; width: auto; max-width: 360px; }
    .hero-ex .ex-in { min-height: 170px; }
    .seq { grid-template-columns: minmax(0, 1fr); }
    .seq-step span { display: none; }
    .seq-step { justify-content: center; min-height: 36px; }
    .scene-more { display: inline-flex; margin-top: 4px; }
    .hero-acc .trow .id { display: none; }
    .hero-acc .trow { grid-template-columns: minmax(0, 1fr) auto; }
  }
  .scene .strands-mini { display: none; }
  .strands-mini path { fill: none; stroke-width: 4; stroke-linecap: round; }
  .strands-mini .m0 { stroke: var(--b-yellow); } .strands-mini .m1 { stroke: var(--b-orange); } .strands-mini .m2 { stroke: var(--b-coral); } .strands-mini .m3 { stroke: var(--b-violet); } .strands-mini .m4 { stroke: var(--b-indigo); } .strands-mini .m5 { stroke: var(--b-blue); } .strands-mini .m6 { stroke: var(--b-sky); } .strands-mini .m7 { stroke: var(--b-mint); }


  /* ---- problem ---- */
  .prob { background: var(--paper-2); }
  .prob-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: center; }
  .prob-text .h2 { margin-top: 16px; }
  .prob-text .lede { margin-top: 18px; }
  .prob-list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
  .prob-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 15.5px; color: var(--ink-2); }
  .prob-list li i { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--card); display: grid; place-items: center; color: var(--ink); }
  .prob-list li i svg { width: 16px; height: 16px; }
  .conv { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr) 300px; align-items: center; min-height: 300px; }
  .frag { display: flex; flex-direction: column; gap: 14px; }
  .fr { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font-size: 12.5px; color: var(--ink-2); display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; align-items: start; box-shadow: 0 14px 30px -24px var(--shadow); }
  .fr i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); }
  .fr i svg { width: 12px; height: 12px; }
  .fr b { display: block; font-weight: 500; color: var(--ink); font-size: 12.5px; margin-bottom: 2px; }
  .fr span { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
  .fr.dim { opacity: .82; }
  .conv-svg { width: 100%; height: 240px; display: block; overflow: visible; }
  .conv-svg path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 360; stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.2,.7,.2,1); }
  .conv-svg path:nth-child(2) { transition-delay: .15s; } .conv-svg path:nth-child(3) { transition-delay: .3s; }
  .js .rv:not(.in) .conv-svg path { stroke-dashoffset: 360; }
  .conv .acc { font-size: 12.5px; }
  .conv .acc-page { padding: 12px 13px 13px; gap: 9px; }
  .conv .acc-title .t4 { font-size: 13.5px; }
  .conv .mini-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 9px; border: 1px solid var(--c-border); border-radius: 7px; background: var(--c-surface); font-size: 12px; color: var(--c-text); }
  .conv .mini-row svg { width: 13px; height: 13px; color: var(--c-text-2); }
  .conv .mini-row .st { height: 18px; font-size: 10.5px; }
  .conv .mini-row .who { font-size: 11px; }
  @media (max-width: 1040px) {
    .prob-grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
    .conv { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); }
  }
  @media (max-width: 640px) {
    .conv { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
    .conv-svg { display: none; }
    .conv .mid { position: relative; height: 34px; }
    .conv .mid::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--beam); }
    .frag { flex-direction: row; flex-wrap: wrap; }
    .fr { flex: 1 1 140px; }
  }

  /* ---- five stages ---- */
  .stages-sec .sec-head { margin-bottom: 40px; }
  .stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; position: relative; counter-reset: stage; }
  .stages::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 3px; border-radius: 2px; background: var(--beam); opacity: .9; }
  .stg { position: relative; display: flex; flex-direction: column; gap: 12px; }
  .stg .ring { width: 46px; height: 46px; border-radius: 50%; background: var(--paper); border: 3px solid var(--sc); display: grid; place-items: center; color: var(--ink); position: relative; z-index: 1; }
  .stg .ring svg { width: 20px; height: 20px; }
  .stg .k { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .06em; }
  .stg h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
  .stg p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
  .stages-foot { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
  .stages-foot .small { max-width: 60ch; }
  @media (max-width: 1040px) {
    .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
    .stages::before { display: none; }
  }
  @media (max-width: 640px) {
    .stages { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
    .stages::before { display: block; left: 21px; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; }
    .stg { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 4px 16px; }
    .stg .ring { grid-row: 1 / span 3; }
  }


  .ben { background: var(--paper); }
  .halo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: auto; gap: 24px; }
  .hcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 30px 60px -50px var(--shadow); position: relative; overflow: hidden; }
  .hcard.a { grid-column: 1 / span 7; grid-row: 1 / span 2; }
  .hcard.b { grid-column: 8 / span 5; grid-row: 1; }
  .hcard.c { grid-column: 8 / span 5; grid-row: 2; }
  .hcard .vis { border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line-soft); padding: 36px 18px 18px; position: relative; overflow: hidden; }
  .hcard.a .vis { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 40px 26px 26px; }
  .hcard .txt { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
  .hcard h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
  .hcard.b h3, .hcard.c h3 { font-size: 21px; }
  .hcard p { font-size: 15.5px; color: var(--ink-2); line-height: 1.5; max-width: 46ch; }
  .explore { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 40px; padding: 0 14px 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); font-weight: 500; font-size: 14px; cursor: pointer; margin-top: 4px; }
  .explore:hover { border-color: var(--ink); }
  .explore svg { width: 14px; height: 14px; }
  /* card A — roles → assignment → handoff */
  .roles { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
  .rl { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); }
  .rl b { font-weight: 500; color: var(--ink); display: block; font-size: 13px; line-height: 1.1; }
  .rl span { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
  .rl .role { width: 48px; height: 48px; border-radius: 13px; }
  .rl .role svg { width: 21px; height: 21px; }
  .rl b { font-size: 14.5px; }
  .rl span { font-size: 12px; }
  .assign { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
  .assign .acc { font-size: 12.5px; }
  .assign .acc-page { padding: 10px 11px 11px; gap: 7px; }
  .assign .trow { height: 40px; }
  .assign .trow .tt { font-size: 13px; }
  .assign .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
  .assign .lbl i { width: 14px; height: 3px; border-radius: 2px; background: var(--beam); display: inline-block; }
  .hand { display: grid; grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr); gap: 8px; align-items: center; background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: 10px; padding: 12px 14px; color: var(--c-text); font-size: 12.5px; }
  .hand .hc { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--c-text-2); }
  .hand .hc b { color: var(--c-text); font-weight: 500; display: block; }
  .hand .hc .sub { display: block; font-size: 11px; color: var(--c-text-3); margin-top: 1px; }
  .hand .hc:last-child { justify-content: flex-end; text-align: right; }
  .hand .track { position: relative; height: 28px; }
  .hand .track .beam-line { position: absolute; left: 0; right: 0; top: 13px; opacity: .6; }
  .hand .track .tok { position: absolute; top: 4px; left: 0; height: 20px; padding: 0 7px; border-radius: 3px; background: var(--c-surface-3); border: 1px solid var(--c-border-strong); font-family: var(--mono); font-size: 10.5px; color: var(--c-text); display: inline-flex; align-items: center; gap: 5px; transform: translateX(calc(160px - 100%)); transition: transform 1.6s cubic-bezier(.2,.7,.2,1) .4s; }
  .js .rv:not(.in) .hand .track .tok { transform: translateX(0); }
  .hand .track .tok i { width: 6px; height: 6px; border-radius: 50%; background: var(--b-violet); display: inline-block; }
  .hand-note { margin-top: 12px; font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
  .hand-note svg { width: 14px; height: 14px; color: var(--ink-3); flex: none; }
  .people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pp { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 12.5px; color: var(--ink-2); }
  .pp .ava { width: 30px; height: 30px; border-radius: 50%; font-size: 12px; }
  .pp b { display: block; color: var(--ink); font-weight: 500; font-size: 13px; }
  .pp .lbl2 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); grid-column: 1 / -1; margin-bottom: -2px; display: flex; align-items: center; gap: 8px; }
  .pp .lbl2 i { width: 14px; height: 3px; border-radius: 2px; background: var(--beam); display: inline-block; }
  /* card B — decision → later conversation */
  .ctxv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dec-card { background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: 10px; padding: 11px 12px; color: var(--c-text); font-size: 12.5px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; align-items: start; }
  .dec-card .ki { width: 24px; height: 24px; border-radius: 6px; background: var(--c-surface-3); display: grid; place-items: center; color: var(--c-text-2); }
  .dec-card .ki svg { width: 12px; height: 12px; }
  .dec-card .kk { font-family: var(--mono); font-size: 10.5px; color: var(--c-text-3); margin-bottom: 3px; display: flex; justify-content: space-between; gap: 8px; }
  .dec-card .kt { color: var(--c-text); line-height: 1.4; }
  .ctx-link { position: relative; height: 54px; }
  .ctx-link svg { position: absolute; left: 0; top: 0; width: 100%; height: 54px; overflow: visible; }
  .ctx-link path { fill: none; stroke: url(#beamgrad-ctx); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 120; stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1) .2s; }
  .js .rv:not(.in) .ctx-link path { stroke-dashoffset: 120; }
  .ctx-link .lab { position: absolute; left: 46px; top: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-3); background: var(--paper-2); padding: 2px 6px; border-radius: 4px; }
  .later { background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: 10px; padding: 11px 12px; color: var(--c-text); font-size: 12.5px; }
  .later .kk { font-family: var(--mono); font-size: 10.5px; color: var(--c-text-3); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .later .msg p { font-size: 12.5px; }
  .later mark { background: rgba(167,139,250,.22); color: var(--c-text); border-radius: 3px; padding: 0 3px; }
  /* card C — inbox + control */
  .inb { background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: 10px; padding: 10px; color: var(--c-text); display: flex; flex-direction: column; gap: 8px; }
  .inb .irow { padding: 8px 10px; }
  .inb .irow .it { font-size: 12.5px; }
  .inb .irow .im { font-size: 11px; }
  .ctrl { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
  .ctrl .seg { border-color: var(--line-2); font-size: 11.5px; }
  .ctrl .seg span { color: var(--ink-3); }
  .ctrl .seg span.on { background: var(--accent); color: var(--accent-fg); }
  .ctrl .pill { display: inline-flex; gap: 6px; }
  .ctrl .pill span { border: 1px solid var(--line-2); border-radius: 5px; padding: 3px 9px; font-size: 11.5px; color: var(--ink-2); background: var(--card); }
  @media (max-width: 1040px) {
    .halo { grid-template-columns: minmax(0, 1fr); }
    .hcard.a, .hcard.b, .hcard.c { grid-column: 1; grid-row: auto; }
    .assign { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 640px) {
    .people { grid-template-columns: minmax(0, 1fr); }
    .hcard { padding: 18px; border-radius: 14px; }
    .hcard .vis { padding: 14px; }
    .hand { grid-template-columns: minmax(0, 1fr); }
    .hand .track { display: none; }
    .hand .hc:last-child { justify-content: flex-start; text-align: left; }
    .hcard h3 { font-size: 21px; }
  }


  .exec { background: var(--paper-2); }
  .exec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .xc { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
  .xc h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.015em; }
  .xc p { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
  .xc .vis { min-height: 150px; display: flex; flex-direction: column; justify-content: center; gap: 10px; position: relative; padding-top: 26px; }
  /* tool per agent */
  .bind { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: 13px; }
  .bind .role { width: 30px; height: 30px; border-radius: 8px; }
  .bind .role svg { width: 14px; height: 14px; }
  .bind b { font-weight: 500; display: block; font-size: 13px; }
  .bind .arrow { display: flex; align-items: center; gap: 6px; color: var(--ink-3); }
  .bind .arrow i { width: 26px; height: 3px; border-radius: 2px; background: var(--beam); display: inline-block; }
  .bind .tool { font-family: var(--mono); font-size: 11px; color: var(--ink); border: 1px solid var(--line-2); border-radius: 5px; padding: 3px 7px; background: var(--card); white-space: nowrap; }
  /* devices */
  .devices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .dv { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 12px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
  .dv svg { width: 56px; height: 44px; display: block; overflow: visible; }
  .dv svg .o { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
  .dv svg .f { fill: var(--paper-3); }
  .dv svg .g { fill: var(--b-live); }
  .dv b { font-size: 13px; font-weight: 500; }
  .dv span { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }
  .hosted { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); padding: 8px 10px; border: 1px dashed var(--line-2); border-radius: 10px; }
  .hosted svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
  /* people */
  .team { display: flex; flex-direction: column; gap: 8px; }
  .tm-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: 13px; }
  .tm-row .ava { width: 30px; height: 30px; border-radius: 50%; font-size: 12px; }
  .tm-row b { font-weight: 500; display: block; }
  .tm-row span.r { font-size: 11.5px; color: var(--ink-3); display: block; }
  .tm-row .tag { font-size: 11.5px; padding: 3px 9px; }
  .exec-foot { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; }
  @media (max-width: 1040px) { .exec-grid { grid-template-columns: minmax(0, 1fr); } .xc .vis { min-height: 0; } }
  @media (max-width: 640px) { .devices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .dv { padding: 10px 4px; } .dv svg { width: 44px; height: 36px; } }


  /* ---- proof band ---- */
  .proof { background: var(--band); color: var(--band-fg); }
  .proof .eyebrow { color: var(--band-fg-3); }
  .proof .h2 { color: var(--band-fg); }
  .proof-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 64px; align-items: center; }
  .story { font-family: var(--serif); font-size: 21px; line-height: 1.5; color: var(--band-fg); max-width: 36ch; margin-top: 22px; }
  .story em { font-style: italic; color: var(--band-fg-2); }
  .proof .more { color: var(--band-fg); margin-top: 26px; }
  .proof .more:hover { color: #fff; }
  .proof-vis { position: relative; padding: 36px 0 8px; }
  .lesson { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lesson .then, .lesson .now { border: 1px solid var(--band-line); border-radius: 12px; padding: 14px 16px; background: var(--band-2); }
  .lesson .lab { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--band-fg-3); margin-bottom: 8px; }
  .lesson p { font-size: 14px; color: var(--band-fg-2); line-height: 1.5; }
  .lesson .link { position: relative; height: 44px; margin-left: 28px; width: 3px; border-radius: 2px; background: var(--beam); }
  .lesson .now .task { margin-top: 10px; }
  @media (max-width: 1040px) { .proof-grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } }

  /* ---- roadmap ---- */
  .roadmap-sec { background: var(--paper); }
  .rm-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
  .today { padding: 24px 26px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
  .today h3 { font-size: 18px; font-weight: 500; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .today h3 .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--b-live); }
  .today ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
  .today li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: baseline; }
  .today li svg { width: 14px; height: 14px; color: var(--ink-3); position: relative; top: 2px; }
  .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .pl { background: var(--card); border: 1px dashed var(--line-2); border-radius: 14px; padding: 18px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px 14px; align-items: start; }
  .pl .pi { width: 40px; height: 40px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); grid-row: 1 / span 3; }
  .pl .pi svg { width: 18px; height: 18px; }
  .pl h3 { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
  .pl p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
  .pl .tag { justify-self: start; margin-top: 4px; }
  .rm-foot { margin-top: 20px; }
  @media (max-width: 1040px) { .rm-grid { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 640px) { .plans { grid-template-columns: minmax(0, 1fr); } }


  .apply { background: var(--paper-2); }
  .apply-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 48px; row-gap: 32px; align-items: start; }
  .faq { grid-column: 1; grid-row: 1; }
  .form-wrap { grid-column: 2; grid-row: 1; }
  .faq h3 { font-size: 20px; font-weight: 500; margin-bottom: 6px; }
  .faq details { border-top: 1px solid var(--line-2); }
  .faq details:last-of-type { border-bottom: 1px solid var(--line-2); }
  .faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0,1fr) 22px; gap: 14px; align-items: center; padding: 15px 0; font-weight: 500; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary svg { width: 18px; height: 18px; color: var(--accent); transition: transform .2s ease; }
  .faq details[open] summary svg { transform: rotate(45deg); }
  .faq summary:hover { color: var(--accent); }
  .faq .a { padding: 0 0 16px; color: var(--ink-2); font-size: 15.5px; max-width: 56ch; line-height: 1.55; }
  .card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 32px; box-shadow: 0 30px 60px -48px var(--shadow); }
  .card h3 { font-size: 24px; font-weight: 500; }
  .card .intro { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; }
  .facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .field { margin-top: 20px; }
  .field label, .field .label-txt { display: block; font-weight: 500; font-size: 14px; margin-bottom: 7px; }
  .field .opt { font-weight: 400; color: var(--ink-3); }
  .field input[type="text"], .field input[type="email"], .field textarea { width: 100%; font-family: var(--sans); font-size: 15.5px; color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); border-radius: 8px; padding: 11px 13px; min-height: 46px; transition: border-color .15s ease, box-shadow .15s ease; }
  .field textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
  .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--card); }
  .field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
  .field .hint { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
  .field .err { display: flex; gap: 6px; align-items: baseline; font-size: 13px; color: var(--err); margin-top: 6px; }
  .field.invalid input, .field.invalid textarea { border-color: var(--err); }
  .radios { display: flex; flex-wrap: wrap; gap: 8px; }
  .radios label { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 13px; font-size: 14px; cursor: pointer; margin: 0; font-weight: 400; min-height: 40px; }
  .radios label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
  .radios input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
  .summary { display: block; margin-top: 20px; border: 1px solid var(--err-line); background: var(--err-bg); color: var(--err); border-radius: 8px; padding: 11px 13px; font-size: 14px; }
  .summary:empty { height: 0; padding: 0; border: 0; margin: 0; overflow: hidden; }
  .submit { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
  .submit .btn { min-width: 210px; }
  .submit .btn[disabled] { opacity: .7; cursor: progress; transform: none; }
  .spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: currentColor; animation: spin .8s linear infinite; display: none; }
  .btn.busy .spin { display: inline-block; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .after { border-radius: 12px; padding: 26px; border: 1px solid var(--line); }
  .after.ok { background: var(--ok-bg); border-color: var(--ok-line); }
  .after.bad { background: var(--err-bg); border-color: var(--err-line); }
  .after h3 { font-size: 22px; display: flex; align-items: center; gap: 12px; }
  .after h3 svg { width: 24px; height: 24px; flex: none; }
  .after p { margin-top: 12px; color: var(--ink-2); font-size: 15.5px; }
  .after .proto { margin-top: 16px; padding: 11px 13px; border-radius: 8px; background: var(--paper-2); border: 1px dashed var(--line-2); font-size: 13px; color: var(--ink-2); }
  .after .proto b { color: var(--ink); font-weight: 500; }
  .after .row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
  @media (max-width: 1040px) {
    .apply-grid { grid-template-columns: minmax(0, 1fr); }
    .form-wrap { grid-column: 1; grid-row: 1; }
    .faq { grid-column: 1; grid-row: 2; }
    .card { padding: 22px; }
  }
  @media (max-width: 640px) {
    .card { padding: 18px; }
    .submit .btn { width: 100%; }
  }


  .tour-head { padding-bottom: 28px; }
  .onpage { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
  .onpage a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); text-decoration: none; font-size: 13.5px; font-weight: 500; background: var(--card); }
  .onpage a i { width: 10px; height: 10px; border-radius: 50%; background: var(--sc); display: inline-block; }
  .onpage a:hover { color: var(--ink); border-color: var(--ink-3); }
  .tstage { padding: 64px 0; border-top: 1px solid var(--line); }
  .tstage:nth-of-type(even) { background: var(--paper-2); }
  .tgrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: start; }
  .ttext { position: sticky; top: 92px; }
  .tnum { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .tnum .ring { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--sc); display: grid; place-items: center; color: var(--ink); background: var(--card); }
  .tnum .ring svg { width: 18px; height: 18px; }
  .tnum .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--ink-3); }
  .ttext h2 { font-size: clamp(26px, 2.8vw, 34px); }
  .ttext .sum { margin-top: 12px; color: var(--ink-2); font-size: 16px; }
  .ydo { margin: 22px 0 0; display: grid; gap: 14px; }
  .ydo > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
  .ydo dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--ink-3); padding-top: 3px; }
  .ydo dd { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
  .ydo dd b { color: var(--ink); font-weight: 500; }
  .tscene .acc { font-size: 13px; }
  .tscene .acc-shell { min-height: 440px; }
  .tscene .caption { margin-top: 14px; }
  .tscene .caption b { color: var(--ink); }
  .tview { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
  .tview .anim { opacity: 0; transform: translateY(8px); }
  .js .rv.in .tview .anim { animation: rowIn .5s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i, 0) * 70ms); }
  @keyframes rowIn { to { opacity: 1; transform: none; } }
  .ctx { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .ctx .lab { font-family: var(--mono); font-size: 10.5px; color: var(--c-text-3); margin-right: 4px; }
  .waves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .wave-h { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--c-text-2); font-weight: 500; padding: 0 2px 6px; border-bottom: 1px solid var(--c-border); }
  .wave-h span:last-child { font-family: var(--mono); font-size: 10.5px; color: var(--c-text-3); font-weight: 400; }
  .dep { font-family: var(--mono); font-size: 10.5px; color: var(--c-text-3); }
  .board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
  .act { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 11.5px; color: var(--c-text-3); padding-top: 8px; border-top: 1px solid var(--c-border); }
  .act b { color: var(--c-text-2); font-weight: 500; }
  .v4-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; flex: 1; min-height: 0; }
  .v4-grid .drawer { box-shadow: none; }
  .drawer { background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: -16px 0 48px -12px rgba(0,0,0,.6); }
  .drawer .dh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .drawer .dh b { font-size: 13px; font-weight: 600; }
  .drawer .dh .id { font-family: var(--mono); font-size: 10.5px; color: var(--c-text-3); }
  .drawer .kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; font-size: 12px; margin: 0; }
  .drawer .kv dt { color: var(--c-text-3); }
  .drawer .kv dd { margin: 0; color: var(--c-text); }
  .drawer .rv-note { font-size: 12px; color: var(--c-text-2); background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 6px; padding: 8px 10px; line-height: 1.45; }
  .next { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--c-surface-2); border: 1px dashed var(--c-border-strong); font-size: 12.5px; color: var(--c-text-2); }
  .next .beam-line { width: 44px; flex: none; }
  .dec { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
  .dec .kk { font-family: var(--mono); font-size: 10.5px; color: var(--c-text-3); display: flex; justify-content: space-between; }
  .dec .kt { font-size: 12.5px; color: var(--c-text); line-height: 1.4; }
  .dec.dim { opacity: .6; }
  /* handoff callout between stages 3 and 4 */
  .handoff-band { padding: 8px 0 0; }
  .hband { display: grid; grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr); gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; }
  .hband .side { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .hband .side:last-child { justify-content: flex-end; text-align: right; }
  .hband b { display: block; font-weight: 500; }
  .hband span.s { display: block; font-size: 13px; color: var(--ink-3); }
  .hband .mid { position: relative; height: 36px; }
  .hband .mid .beam-line { position: absolute; left: 0; right: 0; top: 16px; }
  .hband .mid .tok { position: absolute; top: 6px; left: 0; height: 24px; padding: 0 8px; border-radius: 4px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 11px; display: inline-flex; align-items: center; transform: translateX(calc(140px - 100%)); transition: transform 1.6s cubic-bezier(.2,.7,.2,1) .3s; }
  .js .rv:not(.in) .hband .mid .tok { transform: translateX(0); }
  .hband-cap { text-align: center; margin-top: 12px; font-size: 14.5px; color: var(--ink-2); }
  .tour-cta { padding: 64px 0 80px; border-top: 1px solid var(--line); }
  .tour-cta .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
  @media (max-width: 1040px) {
    .tgrid { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
    .ttext { position: static; }
    .tscene .acc-shell { min-height: 0; }
    .waves { grid-template-columns: minmax(0, 1fr); }
    .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v4-grid { grid-template-columns: minmax(0, 1fr); }
    .hband { grid-template-columns: minmax(0, 1fr); }
    .hband .mid { display: none; }
    .hband .side:last-child { justify-content: flex-start; text-align: left; }
  }
  @media (max-width: 640px) {
    .board { grid-template-columns: minmax(0, 1fr); }
    .ydo > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .tstage { padding: 48px 0; }
  }


  .sp { padding: 56px 0; border-top: 1px solid var(--line); }
  .sp:nth-of-type(even) { background: var(--paper-2); }
  .sp-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; align-items: start; }
  .sp-grid h2 { font-size: clamp(24px, 2.6vw, 32px); }
  .sp-grid .sum { margin-top: 12px; color: var(--ink-2); font-size: 16px; }
  .sp-grid .small { margin-top: 14px; }
  .tools { display: grid; gap: 12px; }
  .tool { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
  .tool .ti { width: 44px; height: 44px; border-radius: 11px; background: var(--paper-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); }
  .tool .ti svg { width: 20px; height: 20px; }
  .tool h3 { font-size: 17px; font-weight: 500; }
  .tool h3 span { font-weight: 400; color: var(--ink-3); font-size: 14px; margin-left: 2px; }
  .tool p { font-size: 14.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
  .tool .facts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
  .tool .facts .tag { font-size: 12px; padding: 4px 9px; }
  .tool .side { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
  .auth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
  .auth .ac { padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: 12px; font-size: 14px; color: var(--ink-2); display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
  .auth .ac svg { width: 18px; height: 18px; color: var(--ink); margin-top: 2px; }
  .auth .ac b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 3px; }
  .runners { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .rlist { display: grid; gap: 10px; }
  .rl2 { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
  .rl2 .dv { border: 0; padding: 0; background: transparent; }
  .rl2 b { display: block; font-weight: 500; font-size: 15px; }
  .rl2 span { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.45; }
  .runners .acc { font-size: 12.5px; }
  .runners .acc-page { padding: 12px 13px 13px; gap: 8px; }
  .hostnote { margin-top: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-size: 14px; color: var(--ink-2); display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
  .hostnote svg { width: 18px; height: 18px; color: var(--ink); margin-top: 2px; }
  .hostnote b { color: var(--ink); font-weight: 500; }
  .kv2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kv2 .k { padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
  .kv2 .k h3 { font-size: 15.5px; font-weight: 500; display: flex; align-items: center; gap: 10px; }
  .kv2 .k h3 svg { width: 16px; height: 16px; color: var(--ink-3); }
  .kv2 .k p { font-size: 14px; color: var(--ink-2); margin-top: 8px; line-height: 1.5; }
  .kv2 .k .tag { margin-top: 10px; }
  .req { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .req li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; color: var(--ink-2); padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
  .req li svg { width: 16px; height: 16px; color: var(--accent); margin-top: 3px; }
  .req li b { color: var(--ink); font-weight: 500; }
  @media (max-width: 1040px) {
    .sp-grid { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
    .runners { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 640px) {
    .tool { grid-template-columns: 44px minmax(0, 1fr); }
    .tool .side { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
    .auth, .kv2 { grid-template-columns: minmax(0, 1fr); }
  }


  .case-hero { background: var(--band); color: var(--band-fg); padding-bottom: 56px; }
  .case-hero .back { color: var(--band-fg-2); }
  .case-hero .back:hover { color: var(--band-fg); }
  .case-hero .eyebrow { color: var(--band-fg-3); }
  .case-hero .lede { color: var(--band-fg-2); }
  .case-story { font-family: var(--serif); font-size: 21px; line-height: 1.55; color: var(--band-fg); max-width: 60ch; margin-top: 28px; }
  .case-story p + p { margin-top: 18px; }
  .case-story em { color: var(--band-fg-2); }
  .lessons { padding: 64px 0; }
  .lesson-row { display: grid; grid-template-columns: 56px minmax(0, 5fr) minmax(0, 6fr); column-gap: 32px; align-items: start; padding: 32px 0; border-top: 1px solid var(--line); }
  .lesson-row:last-of-type { border-bottom: 1px solid var(--line); }
  .lesson-row .n { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--sc); background: var(--card); display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: var(--ink); }
  .lesson-row h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; }
  .lesson-row .lab { margin: 16px 0 6px; }
  .lesson-row p { font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }
  .lesson-row .vis { background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; position: relative; padding-top: 34px; }
  .lesson-row .vis .acc { font-size: 12.5px; }
  .lesson-row .vis .acc-page { padding: 12px 13px; gap: 8px; }
  .case-foot { padding: 0 0 72px; }
  .stat-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 28px; align-items: center; }
  .stat-card .big { font-size: clamp(38px, 4.5vw, 56px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
  .stat-card .big small { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--ink-3); display: block; margin-top: 8px; }
  .stat-card p { font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }
  .stat-card p b { color: var(--ink); font-weight: 500; }
  @media (max-width: 1040px) {
    .lesson-row { grid-template-columns: 56px minmax(0, 1fr); row-gap: 18px; }
    .lesson-row .vis { grid-column: 2; }
  }
  @media (max-width: 640px) {
    .lesson-row { grid-template-columns: minmax(0, 1fr); }
    .lesson-row .vis { grid-column: 1; }
    .stat-card { grid-template-columns: minmax(0, 1fr); }
  }


  /* footer */
  footer.foot { border-top: 1px solid var(--line); padding: 64px 0 40px; background: var(--paper); }
  .foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 32px; row-gap: 36px; align-items: start; }
  .foot-brand { grid-column: 1 / span 5; }
  .lock2 { display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 0.31em; align-items: start; font-family: var(--syne); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
  .lock2 img { height: 1.125em; width: auto; grid-row: 1 / span 2; margin-top: -0.02em; }
  .lock2 .w { padding-top: 0.14em; }
  .lock2 .tl { grid-column: 2; font-family: var(--syne); font-weight: 400; font-size: 0.25em; line-height: 1; letter-spacing: 0; color: var(--ink); opacity: .62; margin-top: .34em; }
  .foot-brand p { margin-top: 24px; color: var(--ink-2); font-size: 15px; max-width: 40ch; }
  .foot-col { grid-column: span 2; }
  .foot-brand + .foot-col { grid-column: 7 / span 2; }
  .foot-col h4 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--ink-3); margin-bottom: 12px; }
  .foot-col a { display: block; font-size: 14.5px; color: var(--ink); text-decoration: none; padding: 4px 0; }
  .foot-col a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
  .foot-bottom { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-3); }
  /* dialogs */
  .dlg { border: 0; padding: 0; background: var(--card); color: var(--ink); border-radius: 18px; width: min(1020px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 60px 120px -40px rgba(0,0,0,.6), 0 0 0 1px var(--line); overflow: hidden; }
  .dlg::backdrop { background: rgba(14,16,21,.55); backdrop-filter: blur(4px); }
  .dlg-in { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
  .dlg-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 28px 0; }
  .dlg-h .eyebrow { margin-bottom: 10px; }
  .dlg-h h2 { font-size: clamp(22px, 2.4vw, 30px); }
  .dlg-x { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); cursor: pointer; display: inline-grid; place-items: center; flex: none; }
  .dlg-x svg { width: 16px; height: 16px; }
  .dlg-x:hover { border-color: var(--ink); }
  .dlg-b { padding: 20px 28px 24px; overflow: auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 28px; align-items: start; }
  .dlg-b p { font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }
  .dlg-b p + p { margin-top: 12px; }
  .dlg-b p b { color: var(--ink); font-weight: 500; }
  .dlg-b .pts { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .dlg-b .pts li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: 14.5px; color: var(--ink-2); }
  .dlg-b .pts li svg { width: 15px; height: 15px; color: var(--accent); margin-top: 3px; }
  .dlg-b .small { margin-top: 14px; }
  .dlg-vis .acc { font-size: 12.5px; }
  .dlg-vis .acc-page { padding: 12px 13px 13px; gap: 8px; }
  .dlg-f { padding: 0 28px 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
  .dlg-f .row { display: flex; gap: 10px; flex-wrap: wrap; }
  .arow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 7px; border: 1px solid transparent; }
  .arow.on { background: var(--c-surface-2); border-color: var(--c-border); }
  .arow b { display: block; font-size: 12.5px; font-weight: 600; color: var(--c-text); }
  .arow span.r { display: block; font-size: 11px; color: var(--c-text-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .arow .st { height: 18px; font-size: 10px; }
  .adet { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
  .adet .dh { display: flex; align-items: center; gap: 10px; }
  .adet .dh b { font-size: 14px; font-weight: 600; }
  .adet .dh .chip { margin-left: auto; }
  .adet .desc { font-size: 12px; color: var(--c-text-2); }
  .adet .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11.5px; color: var(--c-text-3); }
  .adet .row b { color: var(--c-text-2); font-weight: 500; margin-right: 2px; }
  .adet .instr { font-family: var(--mono); font-size: 11px; line-height: 1.55; color: var(--c-text-2); background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 6px; padding: 9px 10px; white-space: pre-wrap; }
  .roster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; }
  .budget { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--c-text-2); }
  .budget .bar { height: 6px; border-radius: 3px; background: var(--c-surface-3); overflow: hidden; }
  .budget .bar i { display: block; height: 100%; width: 41%; background: var(--c-text-2); border-radius: 3px; }
  .budget .bl { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--c-text-3); }
  .scene-full { overflow: auto; border-radius: 12px; }
  .scene-full .acc { width: 640px; height: auto; position: static; transform: none; }
  .scene-full .acc-hl { transform: translateY(58px); }
  .scene-full .hero-acc .acc-item { height: 28px; }
  .scene-full .acc-shell { grid-template-columns: 172px minmax(0, 1fr); }
  .scene-full .hchat { display: flex; }
  .scene-full .hwork { grid-template-columns: minmax(0, 14fr) minmax(0, 19fr); }
  .scene-full .trow .id { display: inline; }
  .scene-full .trow { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .scene-full .k1only, .scene-full .drafting { display: none; }
  .scene-full .beat, .scene-full .toast, .scene-full .acc-pill { opacity: 1 !important; transform: none !important; }
  .scene-full .s-queued, .scene-full .s-running, .scene-full .s-wait { display: none; }
  .scene-full .s-done, .scene-full .s-merged, .scene-full .s-review { opacity: 1 !important; position: static !important; }
  .scene-full .r5 .s-queued { display: inline-flex; }
  .scene-full .apv .acc-btn.pri { display: none; }
  .scene-full .apv .st.done { opacity: 1 !important; position: static !important; }
  .dlg-scene-b { display: block; }
  /* prototype review area — separate from the visitor flow */
  .proto-band { background: var(--paper-3); border-top: 1px solid var(--line-2); }
  .proto-band details { padding: 14px 0; }
  .proto-band summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); }
  .proto-band summary::-webkit-details-marker { display: none; }
  .proto-band summary .pk { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; border: 1px dashed var(--line-2); border-radius: 4px; padding: 2px 6px; }
  .proto-band .pin { padding: 12px 0 4px; display: flex; flex-wrap: wrap; gap: 14px 28px; font-size: 13.5px; color: var(--ink-2); align-items: center; }
  .proto-band label { display: inline-flex; align-items: center; gap: 8px; }
  .proto-band input { accent-color: var(--accent); }
  @media (max-width: 1040px) {
    .foot-brand { grid-column: 1 / -1; }
    .foot-col, .foot-brand + .foot-col { grid-column: span 6; }
    .lock2 { font-size: 40px; }
    .dlg-b { grid-template-columns: minmax(0, 1fr); }
    .roster { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 640px) {
    .foot-grid { grid-template-columns: minmax(0, 1fr); }
    .foot-col, .foot-brand + .foot-col { grid-column: 1 / -1; }
    .lock2 { font-size: 36px; }
    .dlg { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 14px; }
    .dlg-in { max-height: calc(100vh - 16px); }
    .dlg-h, .dlg-b, .dlg-f { padding-left: 18px; padding-right: 18px; }
  }