/* ===== Page layout (kit-only, sits on top of colors_and_type.css tokens) ===== */
  html, body { background: var(--w); color: var(--fg-1); }
  body { overflow-x: hidden; }

  /* Left-aligned to the hero's content column (rail 44 + 56px pad = 100px) so
     every section shares one left edge with the nav and hero instead of drifting
     right when centered. Width stays capped so card grids don't sprawl on wide
     monitors. */
  .wrap { max-width: 1300px; margin: 0; padding: 0 56px 0 100px; }
  .wrap-narrow { max-width: 1060px; margin: 0; padding: 0 56px 0 100px; }

  /* ============ NAV ============ */
  .nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(6px);
    border-bottom: 2px solid var(--r);
  }
  .nav-inner {
    height: 60px;
    display: flex; align-items: center; justify-content: space-between;
    /* Full-bleed, aligned to the hero's content column (rail 44px + 56px pad)
       so the logo sits over the headline and the nav doesn't drift right of
       the content on viewports wider than the old 1200px cap. */
    padding: 0 56px 0 100px;
  }
  .nav-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
  .nav-brand img { width: 36px; height: 36px; display: block; }
  .nav-mark {
    font-family: var(--mono);
    font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--fg-1);
  }
  .nav-mark .u { color: var(--r); }
  .nav-links { display: flex; align-items: center; gap: 28px; }
  .nav-link {
    font-family: var(--mono);
    font-size: 11px; letter-spacing: 0.04em;
    color: var(--g600);
    text-decoration: none;
  }
  .nav-link:hover { color: var(--r); }

  /* ============ BUTTONS ============ */
  :focus-visible { outline: 2px solid var(--r); outline-offset: 3px; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px;
    font-family: var(--mono);
    font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
    padding: 11px 22px;
    border: none; cursor: pointer; text-decoration: none;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .btn.primary { background: var(--k); color: #fff; }
  .btn.primary:hover { background: var(--g800); }
  .btn.ghost { background: transparent; color: var(--k); border: 0.5px solid var(--k); }
  .btn.ghost:hover { background: var(--k); color: #fff; }
  .btn.accent { background: var(--r); color: #fff; }
  .btn.accent:hover { background: var(--r-hover); }
  .btn.accent:active { background: var(--r-pressed); }
  .btn .arrow { transition: transform var(--dur) var(--ease); display: inline-block; }
  .btn:hover .arrow { transform: translateX(3px); }
  .btn.sm { font-size: 11px; padding: 7px 14px; white-space: nowrap; }
  .btn.block { width: 100%; justify-content: center; }

  /* ============ HERO ============ */
  .hero { border-bottom: 0.5px solid var(--rule); }
  .hero-row {
    display: grid;
    grid-template-columns: 44px 1fr;
    min-height: 560px;
  }
  .hero-rail {
    background: var(--k);
    display: flex; flex-direction: column; justify-content: space-between;
    align-items: center;
    padding: 24px 0;
  }
  .hero-rail .vert {
    writing-mode: vertical-rl; text-orientation: mixed;
    font-family: var(--mono);
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--g600);
    transform: rotate(180deg);
  }
  .hero-rail .red-bar { width: 3px; height: 56px; background: var(--r); }

  .hero-main {
    padding: 64px 56px 56px;
    display: flex; flex-direction: column; justify-content: flex-start;
    border-right: 0.5px solid var(--rule);
    /* Grid/flex items default to min-width:auto, so a descendant's own
       min-width (the diagram's legibility floor) would otherwise bubble all
       the way up through this flex column and hero-row's grid track,
       growing the whole hero past the viewport instead of scrolling locally
       inside the diagram. */
    min-width: 0;
  }
  /* hero-body shares the single hero-main cell between copy and diagram as a
     wrapping flex row -- hero-row/hero-main's own grid/flex sizing is never
     touched to accommodate the diagram. The diagram is a flex sibling that
     claims leftover space and centers itself in it, dropping to its own full-
     width row below the copy via flex-wrap once space runs out. */
  .hero-body { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; min-width: 0; }
  /* No flex-grow on the copy: it takes its natural reading width and stops
     there, rather than stretching into invisible space its own text (capped
     at 56ch) never fills -- that invisible stretch was what pinned the
     diagram out to the far right edge on wide screens instead of leaving it
     centered in the space beside the headline. */
  .hero-copy { flex: 0 1 480px; min-width: 300px; }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono);
    font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--fg-4);
    margin-bottom: 24px;
  }
  .live-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--r);
    display: inline-block;
  }
  .hero-headline {
    font-family: var(--sans);
    font-size: clamp(40px, 5.6vw, 76px);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 0.92;
    margin-bottom: 32px;
  }
  .hero-headline .em { color: var(--r); font-weight: 600; }
  .hero-sub {
    font-family: var(--sans);
    font-size: 17px; line-height: 1.55;
    color: var(--fg-2);
    max-width: 56ch;
    margin-bottom: 16px;
  }
  /* Below 980px (before the two-column hero grid kicks in) sentences flow
     together as one normal paragraph -- there isn't room to spare yet.
     From 980px up, each sentence gets its own line; the plain paragraph
     wrap still applies within a sentence if it's long enough to need it. */
  .hero-sub-line { display: inline; }
  @media (min-width: 980px) {
    .hero-sub-line { display: block; }
  }
  .hero-sub b { color: var(--fg-1); font-weight: 600; }
  .hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }

  /* Hero diagram -- authoring/publishing shared-center transition.
     Square (1:1), always centered in whatever space hero-body's flex-wrap
     leaves it -- it fills that space rather than pinning to a fixed width
     tied to the right rail or the H1's own height. */
  /* Grows to fill whatever the copy's fixed width leaves behind, then
     centers the (size-capped, see .hero-diagram-inner) square within that
     grown box -- this is what actually puts the diagram in the middle of
     the space beside the headline instead of pinned to the row's far edge. */
  /* The square always fits the viewport -- no horizontal scroll, no min-
     width floor. A real-device test showed the scroll-container approach
     (a prior version of this comment) didn't behave consistently across
     browsers: on at least one mobile Safari it clipped content on one side
     with no way to scroll to it, rather than the clean "shrink until a
     floor, then scroll" fallback it tested as in other engines. Forcing
     the fit removes that whole failure class. The tradeoff: at very narrow
     widths a node's box is too small to hold both its title and its detail
     chips at the design-system's own type-token floor -- see the
     "@container" rule on .hd-tags below, which drops the chips (keeping
     the title, the actually-important content) rather than clipping them
     or shrinking text past what the tokens allow. */
  .hero-diagram {
    flex: 1 1 380px; width: 100%; max-width: 100%; min-width: 0;
    display: flex; justify-content: center; align-items: center;
  }
  .hero-diagram-inner { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 18px; }
  /* Hero code block: reuses the exact .code-head/.code-body component from
     the dogfood section (same real brand.md content, same dark window
     treatment) rather than inventing a new visual language for the hero.
     Wrapped in the system's one elevation device -- the red offset block. */
  .hero-code-offset,
  .dogfood-code-offset {
    position: relative;
    width: 100%;
    margin: 0 12px 12px 0;
  }
  .hero-code-offset { max-width: 560px; }
  .hero-code-offset::before,
  .dogfood-code-offset::before {
    content: ""; position: absolute;
    top: 12px; left: 12px; right: -12px; bottom: -12px;
    background: var(--r);
    z-index: 0;
  }
  .dogfood-code-offset { flex: 1; display: flex; }
  .dogfood-code-offset > .bd-file { flex: 1; }
  .hero-code {
    position: relative; z-index: 1;
    width: 100%;
    background: var(--k);
    border: 0.5px solid var(--rule);
    display: flex; flex-direction: column;
  }
  .hero-code-offset .bd-file { position: relative; z-index: 1; }
  /* Every diagram size/weight below is one of the design system's own type
     tokens (colors_and_type.css), or a clamp() interpolating between two of
     them for responsive scaling -- no new sizes or weights invented for the
     graphic. */
  .hd-eyebrow {
    font-family: var(--mono); font-size: var(--type-eyebrow-size); font-weight: var(--type-eyebrow-weight);
    letter-spacing: var(--type-eyebrow-track); text-transform: uppercase; color: var(--r);
  }
  /* Font/spacing inside every node is sized off the SQUARE's own width, not
     each node's individual box width -- container-type lives here, not on
     .hd-node, specifically so a narrower node (Brand/Legal, 20% of the
     square) renders text at the exact same size as a wider one
     (Comms/Sales/Support/Product, 24.29%). cqw values below are scaled by
     ~0.2429 (24.29%) relative to their old node-relative equivalents, so
     the previously-correct nodes look unchanged and the previously-small
     ones now match them. */
  .hd-square { position: relative; width: 100%; aspect-ratio: 1 / 1; container-type: inline-size; }
  .hd-square > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
  /* Width stays a hard percentage (that's what keeps the whole square
     within the viewport). Height is a minimum, not a cap, set via the
     --h custom property each node carries inline: at narrow widths the
     title + all its chips need more room than the design's nominal row
     height, and growing downward (never clipping, never dropping the
     chips) is the tradeoff -- a slightly taller diagram beats losing
     content. overflow stays visible for the same reason. */
  .hd-node {
    position: absolute; box-sizing: border-box; background: var(--w); border: 1px solid var(--k);
    height: auto; min-height: var(--h);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 4px 5px; overflow: visible;
    transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  }
  .hd-node .hd-title {
    font-family: var(--sans); font-size: clamp(var(--type-eyebrow-size), 3.2cqw, var(--type-body-size));
    font-weight: 700; color: var(--k); line-height: 1.1; white-space: nowrap;
  }
  /* A little extra room between the title and the chips below it. */
  .hd-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75cqw 1cqw; margin-top: 1.6cqw; max-width: 100%; }
  /* A chip's label doesn't shrink indefinitely -- at narrow widths a longer
     single word (Boundaries, Objections, Webflow) can end up wider than the
     pill. Wrapping it onto a second line inside the pill (rather than
     nowrap, which would let it overflow sideways into neighboring content)
     is what actually keeps every chip visible without dropping any of
     them. */
  .hd-tag {
    display: inline-flex; align-items: center; gap: 0.5cqw; min-width: 0;
    font-family: var(--mono); font-size: clamp(calc(var(--type-eyebrow-size) - 2px), 1.7cqw, var(--type-eyebrow-size)); color: var(--g800);
    border: 0.5px solid var(--g200); padding: 0.4cqw 1cqw; max-width: 100%;
    overflow-wrap: break-word; word-break: break-word;
  }
  .hd-tag img { display: block; flex: none; width: clamp(6px, 1.5cqw, 8px); height: clamp(6px, 1.5cqw, 8px); }
  .hd-center {
    position: absolute; left: 37.14%; top: 37.14%; width: 25.71%; height: 25.71%;
    box-sizing: border-box; background: var(--bg-code); border-top: 4px solid var(--r);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: clamp(4px, 8cqw, 10px); overflow: hidden;
    container-type: inline-size; cursor: pointer;
  }
  .hd-center span { display: block; white-space: nowrap; }
  .hd-center .hd-mark { margin: 0 auto; }
  /* Padding and inter-line margins here scale with the card's own width
     (cqw), same as the node chips already do -- fixed px margins ate a
     constant, non-shrinking chunk of a shrinking box and caused a small
     vertical overflow at narrow viewports even though every line's own
     width fit fine. */
  .hd-center .hd-file {
    font-family: var(--mono); font-size: clamp(var(--type-small-size), 15cqw, var(--type-h3-size));
    font-weight: var(--type-h3-weight); letter-spacing: -0.01em; color: var(--w); margin-top: clamp(3px, 6cqw, 9px);
  }
  .hd-center .hd-path {
    font-family: var(--mono); font-size: clamp(calc(var(--type-eyebrow-size) - 2px), 9cqw, var(--type-small-size));
    color: var(--fg-on-dark-2); margin-top: clamp(2px, 4cqw, 6px);
  }
  .hd-center .hd-signed {
    font-family: var(--mono); font-size: clamp(calc(var(--type-eyebrow-size) - 3px), 7cqw, var(--type-eyebrow-size));
    font-weight: var(--type-eyebrow-weight); letter-spacing: var(--type-eyebrow-track); color: var(--amber); margin-top: clamp(3px, 6cqw, 10px);
  }
  .hd-caption { font-size: var(--type-body-size); color: var(--g600); line-height: var(--type-body-leading); }
  .hero-diagram-inner[data-mode="in"] .hd-io-in { opacity: 1; transform: scale(1); }
  .hero-diagram-inner[data-mode="in"] .hd-io-out { opacity: 0; transform: scale(0.97); }
  .hero-diagram-inner[data-mode="out"] .hd-io-in { opacity: 0; transform: scale(0.97); }
  .hero-diagram-inner[data-mode="out"] .hd-io-out { opacity: 1; transform: scale(1); }
  .hero-diagram-inner[data-mode="in"] .hd-flow-in { opacity: 1; transition: opacity 0.85s var(--ease); }
  .hero-diagram-inner[data-mode="in"] .hd-flow-out { opacity: 0; transition: opacity 0.85s var(--ease); }
  .hero-diagram-inner[data-mode="out"] .hd-flow-in { opacity: 0; transition: opacity 0.85s var(--ease); }
  .hero-diagram-inner[data-mode="out"] .hd-flow-out { opacity: 1; transition: opacity 0.85s var(--ease); }
  /* The moving dot's visible size is its stroke-width (a near-zero dash
     length + round linecap renders as a circle, diameter = stroke-width) --
     doubled here from the design file's 1.5 to 3, overriding the inline
     SVG attribute since a CSS property always wins over a presentation
     attribute. */
  .hd-flow-dash { animation: hd-dash 1.6s linear infinite; stroke-width: 3px; }
  @keyframes hd-dash { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -40; } }
  @media (prefers-reduced-motion: reduce) {
    .hd-flow-dash { animation: none; }
    .hd-node, .hd-flow-base, .hd-flow-dash { transition: none; }
  }

  /* Hero aside - prompt card */
  .hero-aside {
    background: var(--g50);
    padding: 32px 28px;
    display: flex; flex-direction: column;
  }
  .hero-aside .label {
    font-family: var(--mono);
    font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--g400);
    margin-bottom: 12px;
  }
  .hero-aside h3 {
    font-family: var(--sans);
    font-size: 22px; font-weight: 500; letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--fg-1);
    margin-bottom: 18px;
  }
  .hero-aside .meta-row {
    display: flex; justify-content: space-between;
    font-family: var(--mono);
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--g400);
    margin-bottom: 10px;
  }
  .hero-aside .meta-row .live { color: var(--r); display: inline-flex; align-items: center; gap: 6px; }
  /* Red-offset block - the system's ONLY elevation device */
  .offset-block {
    position: relative;
    margin: 0 12px 12px 0;
    flex: 1;
  }
  .offset-block::before {
    content: ""; position: absolute;
    top: 12px; left: 12px; right: -12px; bottom: -12px;
    background: var(--r);
    z-index: 0;
  }
  .offset-block > .inner {
    position: relative; z-index: 1;
    background: var(--bg-code);
    padding: 18px 20px;
    font-family: var(--mono);
    font-size: 12px; line-height: 1.75;
    color: var(--g200);
    height: 100%;
  }
  .offset-block .key { color: var(--amber); }
  .offset-block .str { color: var(--g200); }
  .offset-block .com { color: var(--g600); }
  .offset-block .h { color: #fff; }

  /* ============ SECTION SHELL ============ */
  .section { padding: 100px 0; border-top: 0.5px solid var(--rule); position: relative; }
  .section.tight { padding-top: 0; }
  /* #how sits right after the "Own your brand" black divider bar, which already
     has its own vertical padding -- but it still reads too tight against the
     bar's bottom edge, so restore some breathing room here specifically. */
  #how { padding-top: 64px; }
  .section-head {
    margin-bottom: 56px;
  }
  .section-num {
    font-family: var(--mono);
    font-size: 88px; font-weight: 600;
    color: var(--g100);
    line-height: 0.85; letter-spacing: -0.04em;
  }
  .section-eyebrow {
    font-family: var(--mono);
    font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--g400);
    margin-bottom: 14px;
  }
  .section-title {
    font-family: var(--sans);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.0;
    max-width: 22ch;
  }
  .section-title .em { color: var(--r); }
  .section-lede {
    font-family: var(--sans);
    font-size: 17px; line-height: 1.55;
    color: var(--fg-3);
    max-width: 62ch;
    margin-top: 20px;
  }
  .smallprint {
    font-family: var(--sans);
    font-size: 14px; line-height: 1.6;
    color: var(--fg-3);
    max-width: 62ch;
  }
  .smallprint a { color: var(--r); }

  /* ============ IDX-GRID (thesis blocks) ============ */
  .idx-grid {
    padding: 28px 0;
    border-top: 0.5px solid var(--rule);
  }
  .idx-grid:last-of-type { border-bottom: 0.5px solid var(--rule); }
  .section-idx {
    font-family: var(--mono);
    font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--r);
  }
  .idx-body p { font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--fg-2); max-width: 62ch; }
  .idx-body p + p { margin-top: 14px; }
  .idx-body p b { color: var(--fg-1); font-weight: 600; }
  .idx-grid blockquote {
    font-family: var(--sans);
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--fg-1);
    max-width: 24ch;
  }
  .idx-grid blockquote .em { color: var(--r); }

  /* ============ BRAND.MD DIAGRAM (hub-and-spoke) ============ */
  .bd { width: 100%; }
  .bd-head {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
    margin-bottom: 28px; padding-bottom: 20px; border-bottom: 0.5px solid var(--rule); flex-wrap: wrap;
  }
  .bd-head-copy { min-width: 240px; }
  .bd-eyebrow {
    font-family: var(--mono); font-size: var(--type-eyebrow-size); font-weight: var(--type-eyebrow-weight);
    letter-spacing: var(--type-eyebrow-track); text-transform: uppercase; color: var(--g400);
    transition: color 0.5s var(--ease);
  }
  .bd-headline {
    font-family: var(--sans); font-size: clamp(20px, 2vw, 25px); font-weight: 600; letter-spacing: -0.02em;
    color: var(--k); margin-top: 28px; line-height: 1.2;
  }
  .bd-toggle { display: inline-flex; border: 0.5px solid var(--k); flex: none; }
  .bd-toggle-btn {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; padding: 8px 16px; border: none;
    cursor: pointer; background: var(--w); color: var(--k);
    transition: background 0.35s var(--ease), color 0.35s var(--ease);
  }
  .bd-toggle-btn + .bd-toggle-btn { border-left: 0.5px solid var(--k); }
  .bd-toggle-btn.active { background: var(--k); color: var(--w); }

  .bd-svg { width: 100%; height: auto; display: block; overflow: visible; }
  .bd-toggle-wrap { text-align: center; margin-top: 32px; }
  .bd-dash { animation: bd-dash 2.6s linear infinite; }
  @keyframes bd-dash { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -52; } }
  @keyframes bd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

  .bd-file {
    box-sizing: border-box; width: 100%; height: 100%; background: var(--w); border: 0.5px solid var(--k);
    display: flex; flex-direction: column; font-family: var(--sans);
  }
  .bd-file-head { background: var(--k); padding: 13px 18px; display: flex; align-items: center; justify-content: space-between; }
  .bd-file-head-l { display: flex; align-items: center; gap: 11px; }
  .bd-file-name { font-family: var(--mono); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--w); }
  .bd-file-pulse { width: 7px; height: 7px; background: var(--r); animation: bd-pulse 2.4s var(--ease) infinite; }
  .bd-file-body { padding: 17px 18px; flex: 1; display: flex; flex-direction: column; }
  .bd-file-path { font-family: var(--mono); font-size: 11px; color: var(--g600); letter-spacing: 0.02em; }
  .bd-file-rule { border-top: 0.5px solid var(--rule); margin: 15px 0 13px; }
  .bd-file-label { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g400); }
  .bd-file-list { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
  .bd-file-item { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12.5px; color: var(--g800); }
  .bd-dot { width: 4px; height: 4px; background: var(--r); flex: none; display: inline-block; }
  .bd-file-spacer { flex: 1; }
  .bd-file-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 13px; border-top: 0.5px solid var(--rule); }
  .bd-file-signed { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--k); white-space: nowrap; }
  .bd-file-version { font-family: var(--mono); font-size: 11px; color: var(--g400); }

  /* Scrollable window onto the CURRENT, full brand.md file, styled to match
     the diagram's brand.md card (light body, black header) rather than the
     hero's previous dark terminal treatment. Fixed height + overflow-y so
     the hero box doesn't grow to fit the whole file -- it scrolls instead. */
  .bd-file-pre {
    flex: none; height: 300px; margin-top: 13px;
    overflow-y: auto; overflow-x: hidden; white-space: pre-wrap; word-break: break-word;
    font-family: var(--mono); font-size: 13px; line-height: 1.75; color: var(--g800);
    scrollbar-width: thin; scrollbar-color: var(--g200) transparent;
  }
  .bd-file-pre::-webkit-scrollbar { width: 5px; }
  .bd-file-pre::-webkit-scrollbar-track { background: transparent; }
  .bd-file-pre::-webkit-scrollbar-thumb { background: var(--g200); }
  .bd-file-pre .yaml-delim { color: var(--g400); }
  .bd-file-pre .key { color: var(--r); }
  .bd-file-pre .val { color: var(--k); }
  .bd-file-pre .h1 { color: var(--k); font-weight: 700; }
  .bd-file-pre .h2 { color: var(--k); font-weight: 600; }
  .bd-file-pre .com { color: var(--g400); }
  .bd-file-pre .bullet { color: var(--r); }

  .bd-a-card {
    box-sizing: border-box; width: 100%; height: 100%; background: var(--w); border: 0.5px solid var(--g200);
    padding: 0 14px; display: flex; align-items: center; transform-origin: center;
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .bd-a-card span { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--k); }

  .bd-b-card {
    box-sizing: border-box; width: 100%; height: 100%; background: var(--w); border: 0.5px solid var(--g200);
    padding: 14px 15px; display: flex; flex-direction: column; transform-origin: center;
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .bd-b-idx { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--g400); }
  .bd-b-title { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--k); margin-top: 5px; line-height: 1.1; }
  .bd-b-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
  .bd-chip {
    display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; color: var(--g800);
    border: 0.5px solid var(--g200); padding: 3px 6px; white-space: nowrap; line-height: 1.3;
  }
  .bd-chip img { width: 11px; height: 11px; display: block; }

  @media (max-width: 640px) {
    .bd-toggle { width: 100%; }
    .bd-toggle-btn { flex: 1; }
  }

  /* ============ THREE-CARD GRID (surfaces) ============ */
  .surfaces {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border: 0.5px solid var(--rule);
    margin-top: 40px;
  }
  .surface { padding: 32px 28px; border-right: 0.5px solid var(--rule); display: flex; flex-direction: column; }
  .surface:last-child { border-right: none; }
  .surface .num {
    font-family: var(--mono);
    font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--r);
    margin-bottom: 16px;
  }
  .surface h3 {
    font-family: var(--sans);
    font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 14px;
  }
  .surface h3 .em { color: var(--r); }
  .surface p {
    font-family: var(--sans);
    font-size: 14px; line-height: 1.6;
    color: var(--fg-3);
    margin-bottom: 20px;
  }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
  .chip {
    font-family: var(--mono);
    font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--fg-2);
    padding: 4px 8px;
    border: 0.5px solid var(--rule);
    background: var(--w);
  }

  /* ============ PROCESS STEPS ============ */
  .steps { border: 0.5px solid var(--rule); margin-top: 8px; }
  .step { display: flex; border-bottom: 0.5px solid var(--rule); }
  .step:last-child { border-bottom: none; }
  .step-n {
    flex: 0 0 120px;
    padding: 32px 28px;
    border-right: 0.5px solid var(--rule);
    font-family: var(--mono);
    font-size: 13px; font-weight: 500; letter-spacing: 0.08em;
    color: var(--r);
  }
  .step-body { flex: 1; padding: 32px 32px; }
  .step-body h3 {
    font-family: var(--sans);
    font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 10px;
  }
  .step-body h3 .em { color: var(--r); }
  .step-body p {
    font-family: var(--sans);
    font-size: 15px; line-height: 1.6;
    color: var(--fg-3);
    max-width: 60ch;
  }

  /* ============ PRICING ============ */
  .pricing-section {
    max-width: 1300px;
    margin: 0;
    padding: 100px 56px 80px 100px;
  }
  .pricing-eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--g400);
    margin: 0 0 28px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .pricing-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--r);
    display: inline-block;
  }
  .pricing-heading {
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(48px, 5.5vw, 72px);
    letter-spacing: -0.035em;
    line-height: 0.95;
    margin: 0 0 28px;
  }
  .pricing-heading em {
    font-style: normal;
    color: var(--r);
    font-weight: 600;
  }
  .pricing-lede {
    font-family: var(--sans);
    font-size: 18px;
    line-height: 1.55;
    color: var(--g600);
    max-width: 52ch;
    margin: 0 0 64px;
  }
  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border: 0.5px solid var(--g100);
  }
  .pricing-card {
    padding: 36px 32px 40px;
    display: flex;
    flex-direction: column;
    background: var(--w);
  }
  .pricing-card + .pricing-card {
    border-left: 0.5px solid var(--g100);
  }
  .pricing-card.featured {
    background: var(--g50);
    position: relative;
  }
  .pricing-card.featured::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--r);
  }
  .card-name {
    font-family: var(--sans);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
  }
  .card-price {
    font-family: var(--sans);
    font-size: 56px;
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1;
    margin: 0 0 6px;
  }
  .card-price.talk {
    color: var(--r);
    font-weight: 600;
    white-space: nowrap;
  }
  .card-term {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--g600);
    letter-spacing: 0.02em;
    margin: 0 0 28px;
  }
  .card-divider {
    height: 0.5px;
    background: var(--g100);
    margin: 0 0 24px;
  }
  .card-pitch-title {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
  }
  .card-pitch {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--g600);
    margin: 0 0 28px;
  }
  .features {
    list-style: none;
    padding: 0;
    margin: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .features li {
    display: flex;
    gap: 12px;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--g800);
    align-items: flex-start;
  }
  .features li::before {
    content: "";
    flex: 0 0 16px;
    height: 16px;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.5 12L13 4' stroke='%23FF4F00' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
  }
  .card-cta {
    display: block;
    text-align: center;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 13px 24px;
    margin-top: 36px;
    cursor: pointer;
    text-decoration: none;
    transition: background 200ms var(--ease), color 200ms var(--ease);
  }
  .card-cta.primary {
    background: var(--k);
    color: var(--w);
    border: none;
  }
  .card-cta.primary:hover {
    background: var(--g800);
  }
  .card-cta.ghost {
    background: transparent;
    color: var(--k);
    border: 0.5px solid var(--k);
  }
  .card-cta.ghost:hover {
    background: var(--k);
    color: var(--w);
  }
  /* ============ PRICING · FREE-FIRST STRIP + PRICE TAGS ============ */
  .pricing-free-strip {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    border: 0.5px solid var(--rule); background: var(--g50);
    padding: 22px 28px; margin: 0 0 40px;
  }
  .pricing-free-strip p {
    font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--fg-2); margin: 0; max-width: 58ch;
  }
  .pricing-free-strip .btn { flex: none; }
  .price-tags { display: flex; flex-direction: column; gap: 8px; margin: 0 0 28px; }
  .price-tag {
    display: inline-flex; align-items: baseline; gap: 6px; width: fit-content;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; color: var(--g600);
    border: 0.5px solid var(--rule); padding: 7px 10px;
  }
  .price-tag b { color: var(--fg-1); font-weight: 600; }
  .card-billing { font-family: var(--mono); font-size: 12px; color: var(--g600); letter-spacing: 0.02em; margin: 0 0 28px; }

  .pricing-footnote {
    text-align: center;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--g600);
    margin: 32px 0 0;
    letter-spacing: 0.02em;
  }
  .pricing-footnote a {
    color: var(--r);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 0.5px;
  }
  .pricing-footnote a:hover {
    color: var(--k);
  }

  /* ============ PROOFS ============ */
  .proofs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border: 0.5px solid var(--rule);
    margin-top: 24px;
  }
  .proof {
    padding: 32px 28px;
    border-right: 0.5px solid var(--rule);
    display: flex; flex-direction: column;
  }
  .proof:last-child { border-right: none; }
  .proof-path {
    font-family: var(--mono);
    font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--r);
    margin-bottom: 14px;
  }
  .proof h3 {
    font-family: var(--sans);
    font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 12px;
  }
  .proof h3 .em { color: var(--r); }
  .proof p {
    font-family: var(--sans);
    font-size: 14px; line-height: 1.6;
    color: var(--fg-3);
  }

  /* ============ CONTROL GRID (why it matters) ============ */
  .control-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 0.5px solid var(--rule);
    margin-top: 40px;
  }
  .control-card { padding: 40px 32px; }
  .control-icon {
    width: 56px; height: 56px; background: var(--r-light);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
  }
  .control-icon svg { width: 22px; height: 22px; display: block; }
  .control-label {
    font-family: var(--mono); font-size: var(--type-eyebrow-size); font-weight: var(--type-eyebrow-weight);
    letter-spacing: var(--type-eyebrow-track); text-transform: uppercase; color: var(--r);
    margin-bottom: 16px;
  }
  .control-title {
    font-family: var(--sans); font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
    line-height: 1.25; color: var(--fg-1); margin-bottom: 14px;
  }
  .control-desc { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--fg-3); }
  .control-quote {
    position: relative;
    margin-top: 28px; padding-top: 20px; padding-left: 16px;
    border-top: 0.5px solid var(--rule);
    font-family: var(--sans); font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--fg-1);
  }
  .control-quote::before {
    content: ""; position: absolute; left: 0; top: 20px; bottom: 4px; width: 2px; background: var(--r);
  }
  .control-source {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-4);
    margin-top: 10px; padding-left: 16px;
  }

  /* ============ STAT GRID (legacy, unused) ============ */
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 0.5px solid var(--rule);
    border-bottom: 0.5px solid var(--rule);
  }
  .stat-card {
    padding: 40px 32px;
    border-right: 0.5px solid var(--rule);
  }
  .stat-card:first-child { padding-left: 0; }
  .stat-card:last-child { border-right: none; padding-right: 0; }
  .stat-num {
    font-family: var(--sans);
    font-size: clamp(36px, 4.4vw, 52px); font-weight: 700; letter-spacing: -0.02em;
    color: var(--r); line-height: 1; margin-bottom: 20px;
  }
  .stat-desc { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--fg-3); margin-bottom: 20px; }
  .stat-source {
    font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--fg-4);
  }

  /* ============ TECHNICAL DETAIL - BRAND.MD ASIDE ============ */
  .frontmatter {
    margin-top: 32px;
    border: 0.5px solid var(--rule);
    background: var(--w);
  }
  .frontmatter .head {
    background: var(--bg-code);
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px;
  }
  .frontmatter .head .path {
    font-family: var(--mono);
    font-size: 11px; letter-spacing: 0.06em;
    color: #fff;
  }
  .frontmatter .head .live {
    font-family: var(--mono);
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--r);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .frontmatter pre {
    margin: 0; padding: 24px 28px;
    font-family: var(--mono);
    font-size: 13px; line-height: 1.85;
    color: var(--fg-2);
    background: var(--g50);
    overflow-x: auto;
  }
  .frontmatter pre .key { color: var(--r); }
  .frontmatter pre .val { color: var(--fg-1); }
  .frontmatter pre .com { color: var(--g400); }

  /* ============ MANIFESTO ============ */
  .manifesto {
    background: var(--k);
    color: #fff;
    position: relative;
    padding: 100px 0;
  }
  .manifesto::before {
    content: ""; position: absolute;
    top: 0; left: 0; width: 4px; height: 100%;
    background: var(--r);
  }
  .manifesto .eyebrow {
    font-family: var(--mono);
    font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 28px;
    display: inline-flex; align-items: center; gap: 10px;
  }
  .manifesto .text {
    font-family: var(--sans);
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-width: 28ch;
  }
  .manifesto .text .em { color: var(--r); }

  /* ============ DOGFOOD ============ */
  .dogfood {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 0;
    border: 0.5px solid var(--rule);
    margin-top: 8px;
  }
  .dogfood-left { padding: 40px 36px; border-right: 0.5px solid var(--rule); }
  .dogfood-left .kicker {
    font-family: var(--mono);
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--r);
    margin-bottom: 16px;
  }
  .dogfood-left h3 {
    font-family: var(--sans);
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin-bottom: 18px;
  }
  .dogfood-left h3 .em { color: var(--r); }
  .dogfood-left p {
    font-family: var(--sans);
    font-size: 15px; line-height: 1.6;
    color: var(--fg-3);
    margin-bottom: 14px;
  }
  .dogfood-left p b { color: var(--fg-1); font-weight: 600; }
  .dogfood-left p code {
    font-size: 13px; background: var(--g50);
    padding: 1px 6px; color: var(--fg-1);
  }
  .dogfood-left .meta {
    margin-top: 18px;
    display: flex; gap: 24px; flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--g600);
  }
  .dogfood-left .meta b { color: var(--fg-1); font-weight: 500; }
  .dogfood-cta { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }
  .dogfood-right { background: var(--k); display: flex; flex-direction: column; }
  .code-head {
    background: var(--bg-code);
    padding: 12px 20px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 0.5px solid #2a2522;
  }
  .code-head .dots { display: inline-flex; gap: 6px; }
  .code-head .dots i { width: 8px; height: 8px; background: #333; display: block; border-radius: 50%; }
  .code-head .path { font-family: var(--mono); font-size: 11px; color: var(--g200); }
  .code-head .live { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r); }
  .code-body {
    padding: 24px 24px;
    font-family: var(--mono);
    font-size: 12.5px; line-height: 1.85;
    color: var(--g200);
    flex: 1;
    overflow-x: auto;
  }
  .code-body .yaml-delim { color: var(--g600); }
  .code-body .key { color: var(--amber); }
  .code-body .h1 { color: #fff; font-weight: 600; }
  .code-body .h2 { color: #fff; }
  .code-body .com { color: var(--g600); }
  .code-body .bullet { color: var(--g400); }
  .code-body .em { color: var(--r); }
  .code-body p { margin: 0; }

  /* ============ LAUNCH ============ */
  .launch { padding: 100px 0; border-top: 0.5px solid var(--rule); }
  .launch .inner {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 32px;
    align-items: start;
  }
  .launch h2 {
    font-family: var(--sans);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.0;
    margin-bottom: 24px;
    max-width: 22ch;
  }
  .launch h2 .em { color: var(--r); }
  .launch p {
    font-family: var(--sans);
    font-size: 17px; line-height: 1.55;
    color: var(--fg-3);
    max-width: 62ch;
    margin-bottom: 28px;
  }
  .cta-row { display: flex; gap: 10px; flex-wrap: wrap; }

  /* ============ FAQ (accordion via <details>) ============ */
  .faq { border: 0.5px solid var(--rule); margin-top: 8px; }
  .faq-item { border-bottom: 0.5px solid var(--rule); }
  .faq-item:last-child { border-bottom: none; }
  .faq-item summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 120px 1fr 72px;
    align-items: stretch;
    transition: background var(--dur) var(--ease);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:hover { background: var(--g50); }
  .faq-item summary:hover .faq-toggle { color: var(--r); }
  .faq-n {
    padding: 28px 28px;
    border-right: 0.5px solid var(--rule);
    font-family: var(--mono);
    font-size: 13px; font-weight: 500; letter-spacing: 0.08em;
    color: var(--r);
    align-self: center;
  }
  .faq-q {
    padding: 28px 32px;
    font-family: var(--sans);
    font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--fg-1);
    align-self: center;
    max-width: 56ch;
  }
  .faq-toggle {
    padding: 28px 24px;
    border-left: 0.5px solid var(--rule);
    font-family: var(--mono);
    font-size: 20px;
    color: var(--g600);
    align-self: center;
    text-align: center;
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
    transform-origin: center;
  }
  .faq-item[open] .faq-toggle { transform: rotate(45deg); color: var(--r); }
  .faq-item[open] summary { background: var(--g50); }
  .faq-a {
    padding: 24px 96px 32px 152px;
    border-top: 0.5px solid var(--rule);
    background: var(--w);
  }
  .faq-a p {
    font-family: var(--sans);
    font-size: 15px; line-height: 1.65;
    color: var(--fg-3);
    max-width: 64ch;
  }
  .faq-a p + p { margin-top: 10px; }
  .faq-a p code {
    font-size: 13px; background: var(--g100);
    padding: 1px 6px; color: var(--fg-1);
  }

  /* Manifesto closer - bookend black bar with the 8-dot mark on the left. */
  .manifesto-closer { padding: 80px 0; }
  .manifesto-closer .closer-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 32px;
    align-items: center;
  }
  .manifesto-closer .closer-mark {
    width: clamp(64px, 7.2vw, 104px);
    height: clamp(64px, 7.2vw, 104px);
    display: block;
    opacity: 0.92;
  }
  .manifesto-closer .text {
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(32px, 3.6vw, 52px);
    letter-spacing: -0.025em;
    line-height: 1.0;
    color: #fff;
    max-width: 22ch;
  }
  .manifesto-closer .text .em { color: var(--r); }
  @media (max-width: 720px) {
    .manifesto-closer .closer-row { grid-template-columns: 1fr; gap: 20px; }
    .manifesto-closer .closer-mark { width: 48px; height: 48px; }
  }

  /* ============ FOOTER ============ */
  .foot {
    background: var(--k); color: #fff;
    position: relative;
    padding: 56px 0 32px;
  }
  .foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--r); }
  .foot-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 32px;
    border-bottom: 0.5px solid #222;
  }
  .foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .foot-brand img { width: 28px; height: 28px; }
  .foot-brand-text {
    font-family: var(--mono);
    font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
    color: #fff;
  }
  .foot-brand-text .u { color: var(--r); }
  .foot-sub {
    font-family: var(--mono);
    font-size: 11px; line-height: 1.65;
    color: var(--g600);
    max-width: 30ch;
  }
  .foot-col { min-width: 0; }
  .foot-col h4 {
    font-family: var(--mono);
    font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--g400);
    margin-bottom: 14px;
  }
  .foot-col ul { list-style: none; padding: 0; margin: 0; }
  .foot-col li { padding: 7px 0; }
  .foot-col a {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--g200);
    text-decoration: none;
    overflow-wrap: anywhere;
  }
  .foot-col a:hover { color: var(--r); }
  /* Machine-readable pointer for agents/crawlers reading the footer --
     normal case and line-height (unlike .foot-bottom below it) since it's
     meant to actually be read, not scanned as a legal-line label. */
  .foot-agent-note {
    margin-top: 24px; padding-top: 20px; border-top: 0.5px solid rgba(255,255,255,0.12);
    font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--g600);
  }
  .foot-agent-note a { color: var(--g200); text-decoration: none; overflow-wrap: anywhere; }
  .foot-agent-note a:hover { color: var(--r); }
  .foot-bottom {
    margin-top: 24px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--mono);
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--g600);
  }
  .foot-bottom .star { color: var(--r); }

  /* ============ FADE-IN PRIMITIVE ============ */
  .reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
  .reveal.in { opacity: 1; transform: none; }

  /* ============ LOGO PARADE ============ */
  .logo-parade {
    display: flex;
    align-items: stretch;
    border-bottom: var(--hairline);
    background: var(--bg-paper);
    height: 56px;
  }
  .parade-label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 28px 0 100px;
    border-right: var(--hairline);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-4);
    white-space: nowrap;
  }
  .parade-track-wrap {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 60px, black calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 60px, black calc(100% - 48px), transparent 100%);
  }
  .parade-track {
    display: flex;
    align-items: center;
    animation: parade-scroll 55s linear infinite;
    will-change: transform;
  }
  .parade-track-wrap:hover .parade-track {
    animation-play-state: paused;
  }
  .parade-item {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 32px;
    cursor: default;
  }
  .parade-icon {
    height: 14px;
    width: auto;
    display: block;
    opacity: 0.85;
  }
  .parade-name {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--g600);
    white-space: nowrap;
    transition: color var(--dur) var(--ease);
  }
  .parade-item:hover .parade-name {
    color: var(--fg-1);
  }
  .parade-sep {
    flex-shrink: 0;
    color: var(--g200);
    font-size: 8px;
    user-select: none;
  }

  @keyframes parade-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .parade-track { animation: none; }
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 1024px) {
    .parade-label { padding-left: 88px; }
    .hero-row { grid-template-columns: 32px 1fr; }
    .nav-inner, .wrap, .wrap-narrow, .pricing-section { padding-left: 88px; } /* rail shrinks to 32px (32 + 56) */
    .hero-aside { grid-column: 1 / -1; border-top: 0.5px solid var(--rule); }
    .surfaces, .proofs, .stat-grid, .control-grid { grid-template-columns: 1fr; }
    .control-card { border-bottom: 0.5px solid var(--rule); }
    .control-card:last-child { border-bottom: none; }
    .surface, .proof { border-right: none; border-bottom: 0.5px solid var(--rule); }
    .stat-card { border-right: none; border-bottom: 0.5px solid var(--rule); padding-left: 0; padding-right: 0; }
    .stat-card:last-child { border-bottom: none; }
    .surface:last-child, .proof:last-child { border-bottom: none; }
    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-card + .pricing-card { border-left: none; border-top: 0.5px solid var(--g100); }
    .pricing-section { padding: 64px 24px 56px 88px; }
    .dogfood { grid-template-columns: 1fr; }
    .dogfood-left { border-right: none; border-bottom: 0.5px solid var(--rule); }
    .dogfood-left, .dogfood-right { min-width: 0; }
    .dogfood-left p { overflow-wrap: anywhere; }
    .code-body { white-space: pre-wrap; overflow-wrap: anywhere; }
  }
  @media (max-width: 720px) {
    .logo-parade { flex-direction: column; height: auto; }
    .parade-label { padding: 16px 24px; border-right: none; border-bottom: var(--hairline); justify-content: flex-start; }
    .parade-track-wrap {
      height: 48px;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
    }
    .nav-links { gap: 14px; }
    .nav-link { display: none; }
    .nav-link.cta { display: inline-flex; }
    .nav-cta-full { display: none; }
    .nav-inner { padding: 0 24px; }
    .wrap, .wrap-narrow { padding: 0 24px; }
    .pricing-section { padding: 64px 24px 56px; }
    .hero-row { grid-template-columns: 1fr; }
    .hero-rail { display: none; }
    .hero-main { padding: 40px 24px; border-right: none; }
    .section { padding: 64px 0; }
    .section-head, .idx-grid, .launch .inner { grid-template-columns: 1fr; gap: 16px; }
    .section-num { font-size: 56px; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .step-n { flex: 0 0 88px; padding: 24px 16px; }
    .step-body { padding: 24px 20px; }
    .faq-item summary { grid-template-columns: 64px 1fr 48px; }
    .faq-n { padding: 20px 12px; font-size: 11px; }
    .faq-q { padding: 20px 16px; font-size: 16px; }
    .faq-toggle { padding: 20px 8px; font-size: 18px; }
    .faq-a { padding: 20px 24px 24px 76px; }
  }