:root {
    --paper:        #F2EBD8;
    --paper-elev:   #EDE4CB;
    --paper-raised: #FBF7EA;
    --paper-inset:  #E5DCC0;
    --brd:          #D4CBA9;
    --brd-strong:   #B8AC85;
    --ink:          #1B1810;
    --ink-dim:      #383019;
    --ink-faint:    #9A8F70;
    --felt:         #0E3B2C;
    --felt-mid:     #1B5E47;
    --brass:        #A87A2C;
    --act-fold:     #B8AC85;
    --act-call:     #2A6E48;
    --act-bet33:    #B8862E;
    --act-bet75:    #B5601C;
    --act-raise:    #B23A28;
    --mono:  "JetBrains Mono", ui-monospace, monospace;
    --serif: "Instrument Serif", "Times New Roman", serif;

    --pad-x: clamp(20px, 6vw, 80px);
    --max-w: 1280px;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { background: var(--paper); color: var(--ink);
         font-family: var(--mono); font-size: 13px; line-height: 1.6;
         -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; }

  .container { max-width: var(--max-w); margin: 0 auto; padding-left: var(--pad-x);
               padding-right: var(--pad-x); }

  /* ─── Topbar ─── */
  .topbar { position: sticky; top: 0; z-index: 50;
            background: var(--paper);
            border-bottom: 1px solid var(--brd); }
  /* Topbar spans the full viewport so the right-side CTAs never overflow the 1280 cap */
  .topbar .container { max-width: none;
                       padding-left: clamp(20px, 3vw, 44px);
                       padding-right: clamp(20px, 3vw, 44px); }
  .topbar-inner { display: flex; align-items: center; gap: 18px; height: 64px;
                  flex-wrap: nowrap; min-width: 0; }
  .brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
  .brand .wm { font-family: var(--mono); font-weight: 600; font-size: 16px;
               letter-spacing: 0.22em; color: var(--ink); white-space: nowrap; }
  .nav-tabs { display: flex; gap: 11px; flex-wrap: nowrap; min-width: 0; align-items: center; }
  .nav-tabs > a, .nav-tabs > .nav-item, .nav-tabs > .nav-item > a {
                display: inline-flex; align-items: center; }
  .nav-tabs a { font-size: 12px; letter-spacing: 0.04em; color: var(--ink);
                font-weight: 600; white-space: nowrap; flex-shrink: 0; }
  .nav-tabs a:hover { color: var(--felt); }
  .top-right { margin-left: auto; padding-left: 16px; display: flex; gap: 10px;
                align-items: center; flex-shrink: 0; }
  /* Visually separate the Discord/Support pair from Buy + Download */
  .top-right .btn-discord { margin-left: 6px; }
  .top-right .btn-discord, .top-right .btn-support { gap: 6px; }
  /* Download — filled, lighter green than the felt Buy button */
  .btn-download { background: var(--felt-mid) !important; border-color: var(--felt-mid) !important;
                  color: var(--paper-raised) !important; }
  .btn-download:hover { background: var(--felt) !important; border-color: var(--felt) !important;
                        color: var(--paper-raised) !important; }
  .top-version { font-size: 11px; letter-spacing: 0.14em; color: var(--ink-faint);
                  text-transform: uppercase; }

  .btn { display: inline-flex; align-items: center; gap: 8px; height: 36px;
         padding: 0 16px; border-radius: 4px; font-size: 12px; font-weight: 600;
         letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid transparent;
         transition: all 120ms ease; }
  .btn-primary { background: var(--felt); color: var(--paper-raised); }
  .btn-primary:hover { background: var(--ink); }
  .btn-ghost { background: transparent; color: var(--ink); border-color: var(--brd-strong); }
  .btn-ghost:hover { border-color: var(--ink); }
  .btn-lg { height: 44px; padding: 0 22px; font-size: 12.5px; }
  .btn .arr { margin-left: 2px; }

  /* ─── Section scaffolding ─── */
  section { padding: 96px 0; border-bottom: 1px solid var(--brd); }
  section.tight { padding: 64px 0; }
  .section-head { display: grid; grid-template-columns: 280px 1fr; gap: 48px;
                  margin-bottom: 56px; align-items: baseline; }
  .section-head .eyebrow { font-size: 11px; letter-spacing: 0.24em;
                           text-transform: uppercase; color: var(--felt); font-weight: 600; }
  .section-head h2 { font-family: var(--serif); font-style: italic; font-size: 56px;
                     line-height: 1; margin: 0; font-weight: 400; letter-spacing: -0.02em;
                     color: var(--ink); max-width: 18ch; }
  .section-head .sub { color: var(--ink-dim); font-size: 14px; line-height: 1.7;
                       max-width: 56ch; letter-spacing: 0.005em; }

  /* ─── Hero ─── */
  .hero { padding: 56px 0 96px; border-bottom: 1px solid var(--brd); }
  .hero-headline { font-family: var(--serif); font-style: italic; font-size: clamp(40px, 5.6vw, 76px);
                   line-height: 1.02; margin: 32px 0 0; font-weight: 400;
                   letter-spacing: -0.02em; color: var(--ink); max-width: 22ch; }
  .hero-headline em { font-style: normal; font-family: var(--mono); font-weight: 500;
                      font-size: 0.32em; letter-spacing: 0.16em; vertical-align: 0.22em;
                      color: var(--felt); }
  .hero-eyebrow { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
                  color: var(--felt); font-weight: 600; }
  .hero-lede { color: var(--ink-dim); font-size: 15.5px; line-height: 1.7; max-width: 60ch;
               margin: 28px 0 36px; letter-spacing: 0.005em; }
  .hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .hero-cta .ws-note { font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0.04em;
                       margin-left: 8px; }
  .hero-headline .hh-accent { color: var(--felt); white-space: nowrap; }

  /* Bundle showcase — two product cards + plus separator */
  .bundle-showcase { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px;
                     align-items: stretch; margin-top: 72px; }

  /* Product showcase — two overlapping screenshots that grow on hover */
  .product-showcase { display: flex; justify-content: center; align-items: center;
                      gap: 0; margin-top: 64px; padding: 20px 0 40px;
                      min-height: 460px; }
  @media (max-width: 760px) { .product-showcase { flex-direction: column; gap: 28px;
                                                   min-height: 0; } }
  .ps-card { position: relative; display: block; text-decoration: none;
             width: 57%; max-width: 675px; cursor: pointer;
             transition: transform 260ms cubic-bezier(.2,.7,.3,1), z-index 0s; }
  @media (max-width: 760px) { .ps-card { width: 100%; max-width: 575px; } }
  .ps-solver { transform: rotate(-2deg) translateX(3%); z-index: 1; }
  .ps-viewer { transform: rotate(2deg) translateX(-3%); z-index: 2; }
  .ps-solver:hover { transform: rotate(0deg) translateX(1%) scale(1.08); z-index: 5; }
  .ps-viewer:hover { transform: rotate(0deg) translateX(-1%) scale(1.08); z-index: 5; }
  @media (max-width: 760px) {
    .ps-solver, .ps-viewer, .ps-solver:hover, .ps-viewer:hover {
      transform: none; }
  }
  .ps-shot { border-radius: 12px; overflow: hidden; position: relative;
             border: 1px solid var(--brd-strong);
             box-shadow: 0 24px 60px rgba(14,24,16,0.22);
             background: #0E1014; }
  .ps-shot img { display: block; width: 100%; height: auto; }
  .ps-tag { display: flex; align-items: center; gap: 10px;
            margin-bottom: 14px; }
  .ps-tag-name { font-family: var(--serif); font-style: italic; font-size: 26px;
                 color: var(--ink); letter-spacing: -0.01em; }
  .ps-tag-sub { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
                letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
                margin-left: auto; }
  .ps-cta { display: flex; align-items: center; justify-content: space-between;
            margin-top: 14px; padding: 0 2px;
            font-family: var(--mono); font-size: 12px; font-weight: 700;
            letter-spacing: 0.1em; text-transform: uppercase; color: var(--felt);
            opacity: 0; transform: translateY(-4px);
            transition: opacity 200ms ease, transform 200ms ease; }
  .ps-card:hover .ps-cta { opacity: 1; transform: translateY(0); }
  .ps-viewer .ps-cta { color: var(--brass); }
  @media (max-width: 760px) { .ps-cta { opacity: 1; transform: none; } }

  /* "Test without download" badge above the Viewer screenshot */
  .ps-viewer-wrap { position: relative; width: 57%; max-width: 675px;
                    transform: rotate(2deg) translateX(-3%); z-index: 2;
                    transition: transform 260ms cubic-bezier(.2,.7,.3,1); }
  .ps-viewer-wrap .ps-viewer { width: 100%; max-width: none;
                               transform: none; }
  .ps-viewer-wrap:hover { transform: rotate(0deg) translateX(-1%) scale(1.08); z-index: 5; }
  .ps-viewer-wrap .ps-viewer:hover { transform: none; }
  @media (max-width: 760px) {
    .ps-viewer-wrap { width: 100%; max-width: 575px; transform: none; }
    .ps-viewer-wrap:hover { transform: none; }
  }
  .ps-try { position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%); z-index: 8;
            display: inline-flex; align-items: center; gap: 8px;
            padding: 13px 22px; border-radius: 26px;
            background: var(--felt); color: var(--paper-raised);
            font-family: var(--mono); font-size: 13px; font-weight: 700;
            letter-spacing: 0.1em; text-transform: uppercase;
            text-decoration: none; white-space: nowrap; cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.45);
            transition: transform 180ms ease, background 180ms ease; }
  .ps-card:hover .ps-try { transform: translate(-50%, -50%) scale(1.06); background: var(--ink); }
  .ps-try-dot { width: 8px; height: 8px; border-radius: 50%;
                background: #6FD4A1; box-shadow: 0 0 0 3px rgba(111,212,161,0.25); }
  .ps-try-arr { font-weight: 400; }
  @media (max-width: 980px) { .bundle-showcase { grid-template-columns: 1fr; gap: 32px; } }
  .bundle-card { background: var(--paper-raised); border: 1px solid var(--brd);
                 border-radius: 10px; padding: 30px 30px 32px;
                 display: flex; flex-direction: column; gap: 18px;
                 position: relative; }
  .bundle-card.bundle-viewer { border: 2px solid var(--brass);
                                background: linear-gradient(180deg, #FBF6E8 0%, var(--paper-raised) 60%); }
  .bundle-card-badge { position: absolute; top: -13px; left: 22px;
                       background: var(--brass); color: var(--paper);
                       font-family: var(--mono); font-size: 10px; font-weight: 700;
                       letter-spacing: 0.18em; text-transform: uppercase;
                       padding: 6px 12px; border-radius: 3px; white-space: nowrap; }
  .bundle-card-eyebrow { font-family: var(--mono); font-size: 10px; font-weight: 700;
                         letter-spacing: 0.24em; text-transform: uppercase;
                         color: var(--brass); }
  .bundle-card-title { display: flex; align-items: center; gap: 14px; }
  .bundle-card-title svg { flex-shrink: 0; }
  .bundle-card-name { font-family: var(--serif); font-style: italic; font-weight: 400;
                      font-size: clamp(40px, 4.8vw, 64px); line-height: 0.98;
                      margin: 0; letter-spacing: -0.02em; color: var(--ink); }
  .bundle-card-sub { font-family: var(--mono); font-size: 11px; font-weight: 600;
                     letter-spacing: 0.14em; text-transform: uppercase;
                     color: var(--ink-dim); margin-top: -10px; }
  .bundle-card-image { background: #0E1014; border-radius: 6px; overflow: hidden;
                       border: 1px solid var(--brd); cursor: zoom-in; }
  .bundle-card-image img { width: 100%; display: block; }
  .bundle-features { list-style: none; padding: 0; margin: 6px 0 0;
                     display: flex; flex-direction: column; gap: 11px; }
  .bundle-features li { position: relative; padding-left: 22px;
                        font-size: 13.5px; line-height: 1.55; color: var(--ink-soft);
                        font-family: var(--sans); }
  .bundle-features li::before { content: ''; position: absolute; left: 0; top: 9px;
                                width: 12px; height: 2px; background: var(--brass); }
  .bundle-features li strong { color: var(--ink); font-weight: 600; }
  .bundle-features li code { font-family: var(--mono); font-size: 12px;
                              background: rgba(168,122,44,0.10); padding: 1px 5px;
                              border-radius: 3px; color: var(--brass); }

  /* BYO panel — spans below the Solver+Viewer pair */
  .bundle-byo { margin-top: 28px; background: var(--paper-elev);
                border: 1.5px dashed var(--brass); border-radius: 10px;
                padding: 30px 32px 32px;
                display: grid; grid-template-columns: 1fr 1.25fr; gap: 36px;
                align-items: start; position: relative; }
  @media (max-width: 980px) { .bundle-byo { grid-template-columns: 1fr; gap: 24px; padding: 26px 24px 28px; } }
  .bundle-byo::before { content: '+'; position: absolute; top: -22px; left: 50%;
                        transform: translateX(-50%);
                        font-family: var(--serif); font-style: italic; font-size: 44px;
                        line-height: 1; color: var(--brass);
                        background: var(--paper); width: 44px; height: 44px;
                        display: grid; place-items: center; border-radius: 50%;
                        border: 1.5px dashed var(--brass); }
  .bundle-byo-eyebrow { font-family: var(--mono); font-size: 10px; font-weight: 700;
                        letter-spacing: 0.24em; text-transform: uppercase;
                        color: var(--brass); margin-bottom: 10px; }
  .bundle-byo-title { font-family: var(--serif); font-style: italic; font-weight: 400;
                      font-size: clamp(28px, 3.2vw, 40px); line-height: 1.02;
                      margin: 0 0 14px; letter-spacing: -0.015em; color: var(--ink); }
  .bundle-byo-lede { font-size: 13.5px; line-height: 1.7; color: var(--ink-dim);
                     margin: 0; max-width: 44ch; }
  .bundle-byo-lede code { font-family: var(--mono); font-size: 12px;
                          background: rgba(168,122,44,0.10); padding: 1px 5px;
                          border-radius: 3px; color: var(--brass); }
  .bundle-byo-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  @media (max-width: 540px) { .bundle-byo-slots { grid-template-columns: 1fr; } }
  .bundle-byo-slot { background: var(--paper-raised); border: 1px solid var(--brd);
                     border-radius: 6px; padding: 16px 16px 14px;
                     display: grid; gap: 6px; }
  .bundle-byo-slot-empty { background: transparent; border-style: dashed;
                            border-color: var(--brd-strong); }
  .bundle-byo-slot-glyph { margin-bottom: 4px; }
  .bundle-byo-slot-name { font-family: var(--mono); font-size: 12px; font-weight: 700;
                          letter-spacing: 0.06em; color: var(--ink);
                          text-transform: uppercase; }
  .bundle-byo-slot-sub  { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
                          letter-spacing: 0.04em; line-height: 1.4; }
  /* Featured BYO slot (Trainer) — clickable, brass accent, prominent */
  a.bundle-byo-slot { text-decoration: none; cursor: pointer; transition: all 140ms ease; }
  a.bundle-byo-slot:hover { transform: translateY(-1px); }
  .bundle-byo-slot-feat { position: relative; background: var(--paper);
                          border: 1.5px solid var(--brass);
                          box-shadow: 0 0 0 1px var(--brass), 0 6px 16px rgba(168,122,44,0.10); }
  .bundle-byo-slot-feat:hover { box-shadow: 0 0 0 1px var(--brass), 0 10px 24px rgba(168,122,44,0.18); }
  .bundle-byo-slot-feat .bundle-byo-slot-name { color: var(--brass); }
  .bundle-byo-slot-badge { position: absolute; top: -10px; right: 12px;
                            background: var(--brass); color: var(--paper);
                            font-family: var(--mono); font-size: 9px; font-weight: 700;
                            letter-spacing: 0.18em; text-transform: uppercase;
                            padding: 4px 9px; border-radius: 3px; white-space: nowrap; }

  /* Nav badge (e.g. "beta" pill next to ART/GTO Trainer) */
  .nav-badge { display: inline-block; margin-left: 5px; padding: 1px 5px;
               background: var(--brass); color: var(--paper);
               font-family: var(--mono); font-size: 8px; font-weight: 700;
               letter-spacing: 0.16em; text-transform: uppercase; border-radius: 2px;
               vertical-align: 1px; line-height: 1.3; white-space: nowrap; }

  /* Trainer page — in-development status banner + CTA card */
  .trainer-status { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
                    padding: 16px 22px; background: linear-gradient(90deg, rgba(168,122,44,0.10), rgba(168,122,44,0.02));
                    border: 1px dashed var(--brass); border-radius: 8px;
                    margin-bottom: 24px; }
  .trainer-status-tag { display: inline-flex; align-items: center; gap: 8px;
                        font-family: var(--mono); font-size: 11px; font-weight: 700;
                        letter-spacing: 0.18em; text-transform: uppercase;
                        color: var(--brass); padding: 6px 12px;
                        background: var(--paper); border: 1px solid var(--brass);
                        border-radius: 4px; white-space: nowrap; }
  .trainer-status-dot { width: 8px; height: 8px; border-radius: 50%;
                        background: var(--brass);
                        box-shadow: 0 0 0 0 rgba(168,122,44,0.6);
                        animation: trainerPulse 1.8s ease infinite; }
  @keyframes trainerPulse {
    0%   { box-shadow: 0 0 0 0 rgba(168,122,44,0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(168,122,44,0); }
    100% { box-shadow: 0 0 0 0 rgba(168,122,44,0); }
  }
  .trainer-status-text { margin: 0; font-family: var(--mono); font-size: 12px;
                         color: var(--ink-dim); letter-spacing: 0.005em; line-height: 1.6;
                         flex: 1; min-width: 240px; }
  .trainer-status-text strong { color: var(--ink); font-weight: 700; }

  .trainer-cta { background: var(--paper-raised); border: 1px solid var(--brd);
                 border-radius: 10px; padding: 36px 40px;
                 display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px;
                 align-items: center; }
  @media (max-width: 760px) {
    .trainer-cta { grid-template-columns: 1fr; padding: 28px 24px; gap: 20px; }
  }
  .trainer-cta-eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
                         letter-spacing: 0.24em; text-transform: uppercase;
                         color: var(--brass); margin-bottom: 8px; }
  .trainer-cta-title { font-family: var(--serif); font-style: italic; font-weight: 400;
                       font-size: clamp(28px, 3.2vw, 40px); line-height: 1.02;
                       margin: 0 0 14px; letter-spacing: -0.015em; color: var(--ink); }
  .trainer-cta-text { margin: 0; font-size: 13.5px; line-height: 1.7;
                      color: var(--ink-dim); max-width: 56ch; letter-spacing: 0.005em; }
  .trainer-cta-actions { display: flex; flex-direction: column; gap: 10px;
                         align-items: stretch; }
  .trainer-cta-actions .btn { justify-content: center; }
  .bundle-plus { display: flex; flex-direction: column; align-items: center;
                 justify-content: center; gap: 12px; padding: 0 4px; }
  .bundle-plus > span { font-family: var(--serif); font-style: italic; font-weight: 400;
                        font-size: 88px; line-height: 1; color: var(--brass); }
  .bundle-plus-note { font-family: var(--mono); font-size: 10px; font-weight: 700;
                      letter-spacing: 0.22em; text-transform: uppercase;
                      color: var(--ink-dim); text-align: center; line-height: 1.5; }
  @media (max-width: 980px) {
    .bundle-plus { flex-direction: row; padding: 0; gap: 16px; }
    .bundle-plus > span { font-size: 56px; }
  }

  /* hero split */
  .hero-split { display: grid; grid-template-columns: 1fr; gap: 24px;
                margin-top: 64px; }
  .split-pane { background: var(--paper-raised); border: 1px solid var(--brd);
                border-radius: 8px; overflow: hidden; display: grid;
                grid-template-rows: auto auto; }
  .split-head { display: flex; align-items: center; justify-content: space-between;
                padding: 14px 18px; background: var(--paper-elev);
                border-bottom: 1px solid var(--brd); font-size: 10.5px;
                letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim);
                font-weight: 700; }
  .split-head .step-num { color: var(--felt); }
  .split-head .lights { display: inline-flex; gap: 6px; align-items: center; }
  .split-head .lights span { width: 8px; height: 8px; border-radius: 50%;
                              background: var(--brd-strong); }
  .split-head .lights span.on { background: var(--felt); }

  /* solver console */
  .console { background: var(--ink); color: var(--paper-raised); padding: 22px 24px;
             font-size: 12.5px; line-height: 1.7; overflow: hidden; height: 100%;
             font-variant-ligatures: none; }
  .console .line { display: flex; gap: 12px; }
  .console .ts { color: #6b6452; flex-shrink: 0; }
  .console .tag { color: #A87A2C; flex-shrink: 0; font-weight: 600; }
  .console .tag.ok { color: #6FD4A1; }
  .console .tag.info { color: #9A8F70; }
  .console .msg { color: #d8d3c2; }
  .console .msg .v { color: #ffffff; font-weight: 600; }
  .console .msg .k { color: #9A8F70; }
  .console .progress { margin-top: 14px; padding-top: 14px; border-top: 1px solid #2a2520; }
  .console .pbar { display: flex; align-items: center; gap: 10px; font-size: 11px;
                   color: #9A8F70; letter-spacing: 0.08em; }
  .console .pbar .track { flex: 1; height: 4px; background: #2a2520; border-radius: 2px;
                          overflow: hidden; }
  .console .pbar .fill { height: 100%; background: #6FD4A1; border-radius: 2px; }

  /* range chart */
  .rc-frame { display: grid; grid-template-rows: auto 1fr auto; height: 100%;
              background: var(--paper-raised); }
  .rc-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
                border-bottom: 1px solid var(--brd); font-size: 11px;
                letter-spacing: 0.06em; color: var(--ink-dim); }
  .rc-toolbar .chip { padding: 4px 10px; background: var(--paper-inset);
                       border: 1px solid var(--brd); border-radius: 3px;
                       font-weight: 600; }
  .rc-toolbar .chip.on { background: var(--felt); color: var(--paper-raised);
                         border-color: var(--felt); }
  .rc-grid-wrap { padding: 16px; display: grid; place-items: center; min-height: 340px; }
  .rc-grid { display: grid; grid-template-columns: repeat(13, 1fr);
             grid-template-rows: repeat(13, 1fr); gap: 1px;
             background: var(--brd); border: 1px solid var(--brd-strong);
             width: 100%; max-width: 380px; aspect-ratio: 1; }
  .rc-cell { background: var(--paper); display: flex; align-items: center;
             justify-content: center; font-size: 9.5px; font-weight: 600;
             color: var(--ink-faint); position: relative; overflow: hidden; }
  .rc-cell.filled { color: var(--paper-raised); }
  .rc-legend { display: flex; gap: 14px; align-items: center; padding: 12px 16px;
               border-top: 1px solid var(--brd); font-size: 10.5px;
               color: var(--ink-dim); letter-spacing: 0.06em; }
  .rc-legend .sw { display: inline-flex; align-items: center; gap: 6px; }
  .rc-legend .sw .swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }

  /* ─── How it works ─── */
  .hiw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 900px) { .hiw { grid-template-columns: 1fr; } }
  .hiw-step { background: var(--paper-raised); border: 1px solid var(--brd);
              border-radius: 8px; padding: 32px 28px; display: grid; gap: 14px;
              grid-template-rows: auto auto 1fr auto; min-height: 280px; }
  .hiw-step .step-tag { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
                        color: var(--felt); font-weight: 700; }
  .hiw-step h3 { font-family: var(--serif); font-style: italic; font-size: 28px;
                 line-height: 1.1; margin: 0; font-weight: 400; color: var(--ink); }
  .hiw-step p { color: var(--ink-dim); font-size: 13px; line-height: 1.65; margin: 0; }
  .hiw-step .step-foot { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.08em;
                         text-transform: uppercase; padding-top: 12px;
                         border-top: 1px dashed var(--brd); }

  /* ─── Features grid ─── */
  .features-block { display: grid; grid-template-columns: 320px 1fr; gap: 56px;
                    align-items: start; padding: 64px 0; }
  @media (max-width: 1024px) { .features-block { grid-template-columns: 1fr; gap: 32px; } }
  .features-block + .features-block { border-top: 1px solid var(--brd); }
  .features-block .product-mark { font-size: 11px; letter-spacing: 0.24em;
                                   text-transform: uppercase; color: var(--brass);
                                   font-weight: 700; margin-bottom: 14px; }
  .features-block h3.product { font-family: var(--serif); font-style: italic;
                                font-size: 44px; line-height: 1; margin: 0 0 16px;
                                font-weight: 400; letter-spacing: -0.01em; }
  .features-block .product-tag { font-size: 12px; letter-spacing: 0.08em;
                                  color: var(--ink-faint); text-transform: uppercase;
                                  font-weight: 600; }
  .features-block p.product-lede { color: var(--ink-dim); font-size: 13.5px;
                                    line-height: 1.7; margin: 14px 0 24px; max-width: 36ch; }
  .features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
                   background: var(--brd); border: 1px solid var(--brd); border-radius: 6px;
                   overflow: hidden; }
  @media (max-width: 600px) { .features-grid { grid-template-columns: 1fr; } }
  .feature { background: var(--paper-raised); padding: 24px 24px 28px;
             display: grid; gap: 8px; align-content: start; }
  .feature .ftag { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
                   color: var(--ink-faint); font-weight: 700; }
  .feature h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink);
                letter-spacing: 0.01em; }
  .feature p { margin: 0; font-size: 12.5px; color: var(--ink-dim); line-height: 1.6; }
  /* Wide featured card (e.g. Editable) — spans full row, brass-offset */
  .feature.feature-wide { background: linear-gradient(180deg, #FBF6E8 0%, var(--paper-raised) 60%);
                          border-left: 3px solid var(--brass);
                          padding: 28px 30px 30px; gap: 12px; }
  .feature.feature-wide .ftag { color: var(--brass); font-size: 11px; }
  .feature.feature-wide h4 { font-family: var(--serif); font-style: italic;
                              font-weight: 400; font-size: 30px; line-height: 1.1;
                              letter-spacing: -0.015em; }
  .feature.feature-wide p { font-size: 13.5px; max-width: 80ch; }

  /* ─── Demo ─── */
  .demo-wrap { background: var(--paper-raised); border: 1px solid var(--brd);
               border-radius: 8px; overflow: hidden; }
  .demo-top { display: flex; align-items: center; gap: 14px; padding: 12px 18px;
              background: var(--paper-elev); border-bottom: 1px solid var(--brd);
              font-size: 11px; letter-spacing: 0.1em; color: var(--ink-dim); }
  .demo-top .url { padding: 4px 10px; background: var(--paper); border: 1px solid var(--brd);
                    border-radius: 3px; font-size: 10.5px; color: var(--ink-faint); }
  .demo-body { display: grid; grid-template-columns: 220px 1fr 240px; min-height: 480px; }
  @media (max-width: 900px) { .demo-body { grid-template-columns: 1fr; min-height: 0; } }
  .demo-sidebar { background: var(--paper-elev); border-right: 1px solid var(--brd);
                  padding: 20px 18px; display: grid; gap: 18px; align-content: start; }
  .demo-sidebar .group { display: grid; gap: 8px; }
  .demo-sidebar .group .gname { font-size: 10px; letter-spacing: 0.18em;
                                 text-transform: uppercase; color: var(--ink-faint);
                                 font-weight: 700; }
  .demo-sidebar .opt { display: flex; justify-content: space-between; align-items: center;
                       font-size: 12px; padding: 6px 8px; border-radius: 3px;
                       color: var(--ink-dim); }
  .demo-sidebar .opt.on { background: var(--felt); color: var(--paper-raised);
                          font-weight: 600; }
  .demo-sidebar .opt .meta { font-size: 10.5px; color: var(--ink-faint); }
  .demo-sidebar .opt.on .meta { color: rgba(251,247,234,0.7); }

  .demo-main { padding: 24px; display: grid; place-items: center; }
  .demo-aside { background: var(--paper-elev); border-left: 1px solid var(--brd);
                padding: 20px 18px; display: grid; gap: 16px; align-content: start; }
  .stat { display: grid; gap: 4px; padding: 12px 14px; background: var(--paper-raised);
          border: 1px solid var(--brd); border-radius: 4px; }
  .stat .sk { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
              color: var(--ink-faint); font-weight: 700; }
  .stat .sv { font-size: 22px; color: var(--ink); font-weight: 700;
              font-family: var(--mono); }
  .stat .sv .unit { font-size: 13px; color: var(--ink-dim); font-weight: 500;
                    margin-left: 4px; }

  /* ─── Pricing ─── */
  .pricing { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
             align-items: stretch; max-width: 880px; margin: 0 auto; }
  @media (max-width: 900px) { .pricing { grid-template-columns: 1fr; } }
  .plan { background: var(--paper-raised); border: 1px solid var(--brd);
          border-radius: 8px; padding: 32px; display: grid; gap: 18px;
          grid-template-rows: auto auto auto 1fr auto; position: relative; }
  .plan.feat { border-color: var(--felt); background: var(--paper);
               box-shadow: 0 0 0 1px var(--felt), 0 12px 40px rgba(14,59,44,0.08); }
  .plan .pname { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
                 color: var(--felt); font-weight: 700; }
  .plan .ptag { position: absolute; top: 24px; right: 24px; font-size: 9.5px;
                letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass);
                font-weight: 700; }
  .plan h3.ph { font-family: var(--serif); font-style: italic; font-size: 36px;
                line-height: 1; margin: 0; font-weight: 400; }
  .plan .price { display: flex; align-items: baseline; gap: 6px; }
  .plan .price .amt { font-size: 38px; font-weight: 700; color: var(--ink);
                      font-family: var(--mono); letter-spacing: -0.02em; }
  .plan .price .per { font-size: 12px; color: var(--ink-faint); letter-spacing: 0.04em; }
  .plan .price .strike { font-size: 14px; color: var(--ink-faint);
                         text-decoration: line-through; margin-left: 6px; }
  .plan .pdesc { font-size: 12.5px; color: var(--ink-dim); line-height: 1.65;
                 max-width: 32ch; }
  .plan ul.bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .plan ul.bullets li { font-size: 12.5px; color: var(--ink-dim); line-height: 1.55;
                        padding-left: 22px; position: relative;
                        overflow-wrap: break-word; }
  .plan ul.bullets li::before { content: '+'; position: absolute; left: 0; top: 0;
                                  color: var(--felt); font-weight: 700;
                                  font-size: 14px; line-height: 1.5; }
  .plan .pbtn { margin-top: 8px; }

  /* ─── FAQ ─── */
  .faq-list { display: grid; gap: 0; border-top: 1px solid var(--brd); }
  .faq-item { border-bottom: 1px solid var(--brd); padding: 22px 0; display: grid;
              grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
  @media (max-width: 720px) { .faq-item { grid-template-columns: 1fr; gap: 8px; } }
  .faq-item .q { font-size: 14px; font-weight: 700; color: var(--ink);
                 letter-spacing: -0.005em; line-height: 1.4; }
  .faq-item .a { color: var(--ink-dim); font-size: 13.5px; line-height: 1.75;
                 letter-spacing: 0.005em; }

  /* ─── Waitlist / footer ─── */
  .waitlist { background: var(--felt); color: var(--paper-raised); padding: 96px 0;
              border-bottom: none; }
  .waitlist h2 { font-family: var(--serif); font-style: italic; font-size: clamp(48px, 6vw, 80px);
                 line-height: 0.98; margin: 0 0 24px; font-weight: 400; max-width: 16ch;
                 letter-spacing: -0.02em; }
  .waitlist .lede { color: rgba(251,247,234,0.7); font-size: 14px; line-height: 1.7;
                    max-width: 56ch; margin: 0 0 32px; letter-spacing: 0.005em; }
  .wl-form { display: flex; gap: 8px; max-width: 560px; }
  .wl-form input { flex: 1; height: 52px; padding: 0 18px; background: rgba(251,247,234,0.08);
                   border: 1px solid rgba(251,247,234,0.18); border-radius: 4px;
                   color: var(--paper-raised); font-family: var(--mono); font-size: 13px;
                   letter-spacing: 0.02em; outline: none; transition: border 120ms ease; }
  .wl-form input::placeholder { color: rgba(251,247,234,0.4); }
  .wl-form input:focus { border-color: var(--brass); background: rgba(168,122,44,0.08); }
  .wl-form button { height: 52px; padding: 0 26px; background: var(--brass);
                    color: var(--ink); border: none; border-radius: 4px;
                    font-family: var(--mono); font-size: 12.5px; font-weight: 700;
                    letter-spacing: 0.08em; text-transform: uppercase;
                    transition: background 120ms ease; }
  .wl-form button:hover { background: #C2913B; }
  .wl-cta { display: inline-flex; align-items: center; gap: 10px; height: 52px;
            padding: 0 28px; background: var(--brass); color: var(--ink);
            border-radius: 4px; font-family: var(--mono); font-size: 12.5px;
            font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
            text-decoration: none; transition: background 120ms ease; }
  .wl-cta:hover { background: #C2913B; }
  .wl-cta .arr { font-size: 15px; }
  .wl-foot { display: flex; gap: 24px; margin-top: 22px; font-size: 11.5px;
             color: rgba(251,247,234,0.55); letter-spacing: 0.06em; }
  .wl-foot .dot { color: rgba(251,247,234,0.3); }

  /* ─── Lightbox ─── */
  .lb-trigger { cursor: zoom-in; position: relative; display: block; }
  .lb-trigger::after { content: 'CLICK TO ENLARGE'; position: absolute; top: 12px; right: 12px;
                        background: rgba(11,12,16,0.78); color: var(--paper-raised);
                        font-size: 9.5px; letter-spacing: 0.16em; padding: 5px 9px;
                        border-radius: 3px; font-weight: 700; pointer-events: none;
                        opacity: 0; transition: opacity 140ms ease; }
  .lb-trigger:hover::after { opacity: 1; }
  .lb-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(11,12,16,0.94);
                backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
                display: grid; grid-template-rows: 1fr auto;
                padding: 24px 24px 16px; cursor: zoom-out;
                animation: lbFade 160ms ease; }
  @keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
  .lb-overlay > img { justify-self: center; align-self: center;
                       width: min(1800px, 96vw); height: auto;
                       max-height: 92vh; object-fit: contain;
                       border: 1px solid rgba(168,122,44,0.3);
                       border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,0.6);
                       cursor: default; }
  .lb-close { position: fixed; top: 20px; right: 20px;
               background: rgba(168,122,44,0.15);
               border: 1px solid var(--brass); color: var(--paper-raised);
               font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
               text-transform: uppercase; font-weight: 700; padding: 8px 14px;
               border-radius: 4px; cursor: pointer; z-index: 110; }
  .lb-foot { display: flex; align-items: center; gap: 18px; justify-content: center;
              padding: 12px 8px 0; flex-wrap: wrap; cursor: default; }
  .lb-cap { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
             color: rgba(251,247,234,0.7); max-width: 60ch; text-align: center; }
  .lb-counter { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
                 color: var(--brass); font-weight: 700; text-transform: uppercase;
                 white-space: nowrap; }
  .lb-thumbs { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto;
                max-width: min(900px, 80vw); padding: 2px; }
  .lb-thumb { width: 52px; height: 36px; padding: 0; border-radius: 3px;
               border: 1px solid rgba(168,122,44,0.25);
               background: rgba(0,0,0,0.4); overflow: hidden; cursor: pointer;
               opacity: 0.45; transition: all 140ms ease; flex-shrink: 0; }
  .lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .lb-thumb:hover { opacity: 0.85; }
  .lb-thumb-on { opacity: 1; border-color: var(--brass);
                  box-shadow: 0 0 0 1px var(--brass); }
  .lb-nav { position: fixed; top: 50%; transform: translateY(-50%);
             background: rgba(168,122,44,0.12); border: 1px solid rgba(168,122,44,0.4);
             color: var(--paper-raised); width: 44px; height: 64px;
             display: grid; place-items: center;
             font-size: 28px; line-height: 1; cursor: pointer;
             border-radius: 4px; z-index: 110;
             transition: background 140ms ease, border-color 140ms ease; }
  .lb-nav:hover { background: rgba(168,122,44,0.28); border-color: var(--brass); }
  .lb-nav-prev { left: 16px; }
  .lb-nav-next { right: 16px; }
  .lb-close { position: fixed; top: 24px; right: 24px; background: rgba(168,122,44,0.15);
              border: 1px solid var(--brass); color: var(--paper-raised);
              font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
              text-transform: uppercase; font-weight: 700; padding: 10px 16px;
              border-radius: 4px; cursor: pointer; }
  .lb-cap { position: static; transform: none; max-width: 60ch;
             font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
             color: rgba(251,247,234,0.7); }

  /* Lightbox gallery extras — prev/next arrows, counter, thumb strip */
  .lb-nav { position: fixed; top: 50%; transform: translateY(-50%);
             width: 52px; height: 52px; display: grid; place-items: center;
             background: rgba(11,12,16,0.78); color: var(--paper-raised);
             border: 1px solid rgba(168,122,44,0.4); border-radius: 50%;
             font-family: var(--serif); font-size: 36px; line-height: 1;
             padding: 0 0 4px; cursor: pointer;
             transition: all 120ms ease; z-index: 110; }
  .lb-nav:hover { background: rgba(168,122,44,0.20); border-color: var(--brass); }
  .lb-nav-prev { left: 24px; }
  .lb-nav-next { right: 24px; }
  @media (max-width: 760px) {
    .lb-nav { width: 40px; height: 40px; font-size: 26px; }
    .lb-nav-prev { left: 10px; }
    .lb-nav-next { right: 10px; }
  }
  .lb-foot { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
              display: flex; flex-direction: column; align-items: center; gap: 10px;
              max-width: min(960px, calc(100vw - 48px));
              padding: 0 8px; }
  .lb-counter { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
                 text-transform: uppercase; color: var(--brass); font-weight: 700; }
  .lb-thumbs { display: flex; gap: 6px; padding: 6px;
                background: rgba(11,12,16,0.85); border: 1px solid rgba(168,122,44,0.3);
                border-radius: 6px;
                overflow-x: auto; max-width: 100%; scrollbar-width: thin; }
  .lb-thumb { flex: 0 0 auto; width: 84px; height: 50px; padding: 0; cursor: pointer;
               background: transparent; border: 1.5px solid transparent;
               border-radius: 3px; overflow: hidden;
               transition: border-color 120ms ease, opacity 120ms ease;
               opacity: 0.55; }
  .lb-thumb:hover { opacity: 0.85; border-color: rgba(168,122,44,0.6); }
  .lb-thumb-on { opacity: 1; border-color: var(--brass); }
  .lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Solver collage tile on the Solver page — transparent, full-bleed within container */
  .solver-collage-bleed { width: min(2400px, 96vw); margin: 0 auto;
                           padding-left: clamp(12px, 2vw, 32px);
                           padding-right: clamp(12px, 2vw, 32px); }

  /* Viewer triptych — hero on left, two thumbnails stacked on the right */
  .viewer-triptych-bleed { width: min(2200px, 94vw); margin: 0 auto;
                            padding-left: clamp(12px, 2vw, 32px);
                            padding-right: clamp(12px, 2vw, 32px); }
  /* New 4-up gallery: hero on top, 3 thumbs in a row below */
  .viewer-gallery { display: flex; flex-direction: column; gap: 18px; }
  .viewer-thumb-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @media (max-width: 760px) {
    .viewer-thumb-row { grid-template-columns: 1fr; }
  }
  /* Uniform aspect ratio for all thumbs — keeps the row visually balanced */
  .viewer-thumb-wide,
  .viewer-thumb-tall { aspect-ratio: 16 / 10; }
  /* Pinned-combo (∼1:1 source) shows top portion (combos + table); strategy bars crop off the bottom */
  .viewer-thumb-tall img { object-position: top center !important; }
  .viewer-thumb-wide img,
  .viewer-thumb-tall img { width: 100%; height: 100%; object-fit: cover;
                            object-position: top left; }
  .viewer-shot-cap-hero { font-size: 13px !important; padding: 9px 14px !important; }
  .viewer-triptych { display: grid;
                      grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
                      gap: 18px; align-items: stretch; }
  @media (max-width: 900px) {
    .viewer-triptych { grid-template-columns: 1fr; gap: 14px; }
  }
  .viewer-thumbs { display: flex; flex-direction: column; gap: 18px; }
  @media (max-width: 900px) {
    .viewer-thumbs { flex-direction: row; gap: 14px; }
    .viewer-thumbs > .viewer-thumb { flex: 1; min-width: 0; }
  }
  .viewer-hero, .viewer-thumb { position: relative; cursor: zoom-in;
                                 background: var(--paper-elev);
                                 border: 1px solid var(--brd); border-radius: 8px;
                                 overflow: hidden; transition: transform 180ms ease,
                                                              border-color 180ms ease,
                                                              box-shadow 180ms ease; }
  .viewer-hero { aspect-ratio: 2555 / 1269; }
  .viewer-thumb { flex: 1; min-height: 0; }
  .viewer-hero img, .viewer-thumb img { width: 100%; height: 100%; display: block;
                                          object-fit: cover; object-position: top left; }
  .viewer-hero:hover, .viewer-thumb:hover { border-color: var(--brass);
                                              transform: translateY(-2px);
                                              box-shadow: 0 12px 32px rgba(14,24,16,0.18); }
  .viewer-shot-cap { position: absolute; left: 14px; bottom: 12px;
                      background: rgba(11,12,16,0.78); color: var(--paper-raised);
                      font-family: var(--mono); font-size: 10.5px; font-weight: 700;
                      letter-spacing: 0.14em; text-transform: uppercase;
                      padding: 6px 10px; border-radius: 3px;
                      backdrop-filter: blur(4px);
                      -webkit-backdrop-filter: blur(4px); }
  .viewer-hero .viewer-shot-cap { font-size: 11.5px; padding: 7px 12px; }
  /* zoom hint badge in top-right of hero */
  .viewer-hero::after,
  .viewer-thumb::after { content: '⤢'; position: absolute; top: 10px; right: 10px;
                          width: 28px; height: 28px;
                          background: rgba(11,12,16,0.78); color: var(--brass);
                          font-size: 14px; font-weight: 700;
                          display: grid; place-items: center; border-radius: 4px;
                          opacity: 0; transition: opacity 140ms ease;
                          pointer-events: none; }
  .viewer-hero:hover::after, .viewer-thumb:hover::after { opacity: 1; }
  .solver-collage { position: relative; cursor: zoom-in;
                     transition: transform 180ms ease, filter 180ms ease;
                     padding: 0; background: transparent; border: none; }
  .solver-collage:hover { transform: translateY(-2px); }
  .solver-collage > img { width: 100%; display: block;
                           filter: drop-shadow(0 24px 48px rgba(14,24,16,0.22))
                                   drop-shadow(0 4px 12px rgba(14,24,16,0.12)); }
  /* Optional wider wrapper used on the Solver subpage to break out of the 1280px container */
  .solver-collage-wide { max-width: 1640px; margin: 0 auto;
                         padding-left: clamp(20px, 4vw, 64px);
                         padding-right: clamp(20px, 4vw, 64px); }
  .solver-collage-cta { position: absolute; right: 22px; bottom: 18px;
                         display: flex; flex-direction: column;
                         align-items: flex-end; gap: 2px;
                         background: rgba(11,12,16,0.78); color: var(--paper-raised);
                         padding: 10px 14px;
                         border-radius: 4px; pointer-events: none;
                         opacity: 0; transition: opacity 140ms ease; }
                         display: flex; flex-direction: column;
                         align-items: flex-end; gap: 2px;
                         padding: 8px 14px;
                         background: rgba(11,12,16,0.78); color: var(--paper-raised);
                         border-radius: 4px; pointer-events: none;
                         opacity: 0; transition: opacity 140ms ease; }
  .solver-collage:hover .solver-collage-cta { opacity: 1; }
  .solver-collage-cta-eyebrow { font-family: var(--mono); font-size: 9px;
                                  letter-spacing: 0.22em; text-transform: uppercase;
                                  color: var(--brass); font-weight: 700; }
  .solver-collage-cta-text { font-family: var(--mono); font-size: 11px;
                              letter-spacing: 0.06em; font-weight: 600; }

  /* Click-to-enlarge hint on the homepage Solver thumbnail (bundle-card image) */
  .bundle-card-image { position: relative; }  /* ─── Video player ─── */
  .video-wrap { background: var(--paper-raised); border: 1px solid var(--brd);
                border-radius: 8px; overflow: hidden; }
  .video-frame { position: relative; background: #0E1014; aspect-ratio: 16 / 9; }
  .video-frame video { width: 100%; height: 100%; display: block; object-fit: contain; }
  .video-meta { display: flex; justify-content: space-between; align-items: center;
                padding: 16px 20px; font-size: 11px; letter-spacing: 0.1em;
                color: var(--ink-dim); }
  .video-meta .left { display: flex; gap: 16px; align-items: center; }
  .video-meta .rec { width: 8px; height: 8px; border-radius: 50%; background: var(--act-raise);
                     animation: pulse 1.4s ease infinite; }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

  /* ─── Page transitions ─── */
  .page-enter { animation: pageIn 240ms ease; }
  @keyframes pageIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Container override on topbar only: a little wider so the full nav fits without wrapping */
  .topbar > .container { max-width: 1560px; padding-left: clamp(20px, 4vw, 48px);
                         padding-right: clamp(20px, 4vw, 48px); }

  /* Active nav link */
  .nav-tabs a.active { color: var(--felt); position: relative; }
  .nav-tabs a.active::after { content: ''; position: absolute; left: 0; right: 0;
                                bottom: -6px; height: 2px; background: var(--felt); }

  /* ─── Pipeline ─── */
  .pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
              border: 1px solid var(--brd); border-radius: 8px; overflow: hidden;
              background: var(--paper-raised); }
  @media (max-width: 1000px) { .pipeline { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px)  { .pipeline { grid-template-columns: 1fr; } }
  .pipe-step { padding: 26px 22px 22px; border-right: 1px solid var(--brd);
               display: flex; flex-direction: column; gap: 14px; position: relative; }
  .pipe-step:last-child { border-right: none; }
  @media (max-width: 1000px) {
    .pipe-step:nth-child(2) { border-right: none; }
    .pipe-step:nth-child(-n+2) { border-bottom: 1px solid var(--brd); }
  }
  @media (max-width: 600px) {
    .pipe-step { border-right: none; border-bottom: 1px solid var(--brd); }
    .pipe-step:last-child { border-bottom: none; }
    .pipe-step:nth-child(2) { border-right: none; }
  }
  .pipe-head { display: flex; align-items: center; justify-content: space-between; }
  .pipe-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
              color: var(--brass); font-weight: 700; }
  .pipe-tool { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
               font-weight: 700; padding: 3px 8px; border-radius: 3px; }
  .pipe-tool.solver { color: var(--paper-raised); background: var(--felt); }
  .pipe-tool.app    { color: var(--paper-raised); background: var(--brass); }

  .pipe-diagram { background: var(--paper); border: 1px solid var(--brd);
                  border-radius: 5px; padding: 18px 16px; height: 180px;
                  display: grid; place-items: center; overflow: hidden; }
  .pipe-step h4 { font-family: var(--serif); font-style: italic; font-size: 22px;
                  margin: 0; font-weight: 400; line-height: 1.1; color: var(--ink); }
  .pipe-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
                      margin-top: 32px; }
  @media (max-width: 1000px) { .pipe-detail-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px)  { .pipe-detail-grid { grid-template-columns: 1fr; } }
  .pipe-detail-grid { align-items: start; }
  .pipe-detail { display: flex; flex-direction: column; gap: 10px; align-self: start; }
  .pipe-detail-head { display: flex; align-items: baseline; gap: 10px; }
  .pipe-detail-head h5 { font-family: var(--serif); font-style: italic; font-size: 20px;
                          margin: 0; font-weight: 400; color: var(--ink); line-height: 1; }
  .pipe-detail p { color: var(--ink-dim); font-size: 13px; line-height: 1.65; margin: 0;
                   max-width: 38ch; }
  .pipe-arrow { position: absolute; right: -12px; top: 70px;
                width: 24px; height: 24px; background: var(--paper-raised);
                border: 1px solid var(--brd-strong); border-radius: 50%; display: grid;
                place-items: center; z-index: 2; color: var(--felt); font-weight: 700;
                font-size: 12px; }
  .pipe-step:last-child .pipe-arrow { display: none; }
  @media (max-width: 1000px) {
    .pipe-step:nth-child(2) .pipe-arrow { display: none; }
  }
  @media (max-width: 600px) { .pipe-arrow { display: none; } }

  /* Pipeline "only ARTGTO" badge + competitive strip */
  .pipe-step-onlyus { background: linear-gradient(180deg, rgba(168,122,44,0.06) 0%, transparent 60%); border-top: 2px solid var(--brass); }
  .pipe-onlyus-badge { display: inline-flex; align-items: center; gap: 6px;
                       margin-top: 6px;
                       background: var(--brass); color: var(--paper);
                       font-family: var(--mono); font-size: 9.5px; font-weight: 700;
                       letter-spacing: 0.2em; text-transform: uppercase;
                       padding: 5px 9px; border-radius: 3px;
                       align-self: flex-start; }
  .pipe-vs-row-old { display: none; }
  .pipe-vs-row-legacy { display: grid; grid-template-columns: 160px 1fr;
                        align-items: stretch; border-bottom: 1px solid var(--brd); }
  .pipe-vs-row:last-child { border-bottom: none; }
  .pipe-vs-them { background: var(--paper-raised); }
  .pipe-vs-us { background: linear-gradient(90deg, rgba(168,122,44,0.08), rgba(168,122,44,0.02)); }
  .pipe-vs-label { display: flex; align-items: center; padding: 16px 20px;
                   font-family: var(--mono); font-size: 11px; font-weight: 700;
                   letter-spacing: 0.22em; text-transform: uppercase;
                   color: var(--ink); border-right: 1px solid var(--brd);
                   background: var(--paper-elev); }
  .pipe-vs-us .pipe-vs-label { color: var(--brass); background: rgba(168,122,44,0.10); }
  .pipe-vs-cells { display: grid; grid-template-columns: repeat(4, 1fr); }
  .pipe-vs-cell { padding: 14px 16px; font-family: var(--sans); font-size: 12.5px;
                  line-height: 1.4; color: var(--ink-soft); border-right: 1px solid var(--brd);
                  display: flex; align-items: center; }
  .pipe-vs-cell:last-child { border-right: none; }
  .pipe-vs-cell.ok { color: var(--ink-dim); }
  .pipe-vs-cell.stop { color: #B23A3A; font-weight: 600; }
  .pipe-vs-cell.win { color: var(--felt); font-weight: 600; }
  .pipe-vs-cell code { font-family: var(--mono); font-size: 11.5px;
                       background: rgba(168,122,44,0.12); padding: 1px 5px;
                       border-radius: 3px; color: var(--brass); margin-left: 4px; }
  @media (max-width: 1000px) {
    .pipe-vs-cells { grid-template-columns: 1fr 1fr; }
    .pipe-vs-cell:nth-child(2) { border-right: none; }
    .pipe-vs-cell:nth-child(-n+2) { border-bottom: 1px solid var(--brd); }
  }
  @media (max-width: 600px) {
    .pipe-vs-row { grid-template-columns: 1fr; }
    .pipe-vs-label { border-right: none; border-bottom: 1px solid var(--brd); }
    .pipe-vs-cells { grid-template-columns: 1fr; }
    .pipe-vs-cell { border-right: none; border-bottom: 1px solid var(--brd); }
    .pipe-vs-cell:last-child { border-bottom: none; }
    .pipe-vs-cell:nth-child(2) { border-right: none; }
    .pipe-vs-cell:nth-child(-n+2) { border-bottom: 1px solid var(--brd); }
  }

  /* Diagram primitives */
  .d-stack { display: flex; flex-direction: column; gap: 10px; align-items: center; }
  .d-row   { display: flex; gap: 6px; align-items: center; }
  .d-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
             text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }

  /* ─── Hero side mark (floats in left margin) ─── */
  .hero { position: relative; }
  .hero-side-mark { position: absolute; top: 56px; left: 40px; z-index: 0;
                    opacity: 0.95; pointer-events: none; }
  .hero-side-mark svg { display: block; }
  @media (max-width: 1380px) { .hero-side-mark { display: none; } }

  /* Floating brand mark — sticks while scrolling, fades at waitlist section */
  .floating-mark { position: fixed; top: 88px; left: max(8px, calc((100vw - var(--max-w)) / 2 - 220px));
                    pointer-events: none; z-index: 4;
                    opacity: 0.95; transition: opacity 360ms ease, transform 360ms ease; }
  .floating-mark svg { display: block; width: 220px; height: auto; }
  .floating-mark-hidden { opacity: 0; transform: translateX(-24px); }
  @media (max-width: 1380px) { .floating-mark { display: none; } }

  /* Realigned pipeline comparison strip — labels sit left of pipeline columns */
  .pipe-vs-strip { margin-top: 40px; margin-left: -148px;
                    border: 1px solid var(--brd); border-radius: 8px;
                    overflow: hidden; background: var(--paper-raised); }
  .pipe-vs-row { display: grid; grid-template-columns: 140px repeat(4, 1fr);
                  align-items: stretch; border-bottom: 1px solid var(--brd); column-gap: 0; }
  @media (max-width: 1380px) { .pipe-vs-strip { margin-left: 0; }
                                .pipe-vs-row { grid-template-columns: 120px repeat(4, 1fr); } }
  @media (max-width: 1000px) { .pipe-vs-row { grid-template-columns: 110px 1fr 1fr;
                                                grid-auto-rows: auto; }
                                .pipe-vs-row > .pipe-vs-cell:nth-child(4) { border-top: 1px solid var(--brd); }
                                .pipe-vs-row > .pipe-vs-cell:nth-child(5) { border-top: 1px solid var(--brd); } }
  @media (max-width: 600px)  { .pipe-vs-row { grid-template-columns: 1fr; }
                                .pipe-vs-row .pipe-vs-label { border-right: none; border-bottom: 1px solid var(--brd); }
                                .pipe-vs-cell { border-right: none !important; border-bottom: 1px solid var(--brd); }
                                .pipe-vs-row .pipe-vs-cell:last-child { border-bottom: none; } }

  /* ─── Hero bundle tag (Solver + Viewer chips) ─── */
  .hero-bundle-tag { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap;
                     margin-bottom: 32px; }
  .bt-chip { display: inline-flex; flex-direction: column; gap: 2px;
             padding: 10px 16px 11px; border-radius: 6px;
             font-family: var(--mono); font-size: 12px; font-weight: 700;
             letter-spacing: 0.06em; line-height: 1.2; position: relative; }
  .bt-chip .bt-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
                     margin-right: 6px; vertical-align: middle; }
  .bt-chip-solver { background: var(--felt); color: var(--paper-raised); }
  .bt-chip-solver .bt-dot { background: var(--paper-raised); }
  .bt-chip-viewer { background: var(--ink); color: var(--brass); }
  .bt-chip-viewer .bt-dot { background: var(--brass); }
  .bt-sub { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
            opacity: 0.78; margin-top: 4px; }
  .bt-plus { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--ink-dim);
             align-self: center; padding: 0 2px; }
  .bt-pricetag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
                 text-transform: uppercase; color: var(--brass); font-weight: 700;
                 align-self: center; border: 1px solid var(--brass);
                 padding: 8px 14px; border-radius: 4px; margin-left: auto; }
  @media (max-width: 760px) {
    .bt-pricetag { margin-left: 0; }
  }

  /* ─── Hero split with flow indicator between Solver and Viewer ─── */
  .hero-split-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px;
                     align-items: stretch; }
  @media (max-width: 920px) { .hero-split-flow { grid-template-columns: 1fr; } }
  .split-flow { display: flex; flex-direction: column; align-items: center; justify-content: center;
                gap: 10px; padding: 0 4px; }
  @media (max-width: 920px) { .split-flow { flex-direction: row; padding: 4px 0; } }
  .sf-line { flex: 1; width: 1px; background: linear-gradient(to bottom,
             transparent, var(--brass) 30%, var(--brass) 70%, transparent);
             min-height: 40px; }
  @media (max-width: 920px) { .sf-line { width: auto; height: 1px;
             background: linear-gradient(to right, transparent, var(--brass) 30%,
             var(--brass) 70%, transparent); min-height: 0; min-width: 40px; } }
  .sf-badge { background: var(--ink); color: var(--brass); border: 1px solid var(--brass);
              border-radius: 6px; padding: 12px 14px; text-align: center;
              font-family: var(--mono); }
  .sf-badge-eyebrow { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
                      color: var(--brass); font-weight: 700; }
  .sf-badge-file { font-size: 16px; font-weight: 700; color: var(--paper-raised);
                   letter-spacing: 0.04em; margin: 4px 0 2px; }
  .sf-badge-arrow { font-size: 14px; color: var(--brass); font-weight: 400;
                     line-height: 1; padding: 0 4px; }
  .sf-from, .sf-to { font-weight: 700; }
  .sf-from { color: var(--paper-raised); }
  .sf-to   { color: var(--brass); }
  .sf-badge-note { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
                   text-transform: uppercase; color: #b8ac85; margin-top: 6px;
                   font-weight: 500; }
  .split-foot { padding: 10px 16px; background: var(--paper-elev);
                border-top: 1px solid var(--brd);
                font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
                color: var(--ink-dim); }
  .split-foot code { color: var(--brass); font-weight: 600; }

  /* ─── Pipeline deep-dive page ─── */
  /* Overview band — 4-step grid + handoff strip stacked, contextually grouped */
  .pp-overview-band { padding: 64px 0 56px; }
  .pp-overview-wrap { display: flex; flex-direction: column; gap: 28px; }
  .pp-overview-foot { display: flex; align-items: center; gap: 14px;
                      padding: 18px 22px; background: var(--paper-elev);
                      border: 1px solid var(--brd); border-radius: 6px;
                      font-family: var(--mono); font-size: 12px; color: var(--ink-dim);
                      letter-spacing: 0.02em; }
  .pp-overview-foot-tag { font-size: 10px; letter-spacing: 0.22em;
                          text-transform: uppercase; color: var(--felt); font-weight: 700;
                          padding: 4px 10px; background: var(--paper-raised);
                          border: 1px solid var(--brd); border-radius: 3px; }

  /* Handoff strip (replaces old dark .pp-handoff) */
  .hs-card { background: var(--paper-raised); border: 1px solid var(--brd);
             border-radius: 10px; padding: 32px 36px 36px;
             position: relative; overflow: hidden; }
  .hs-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0;
                     width: 4px; background: var(--brass); }
  .hs-header { margin-bottom: 28px; max-width: 64ch; }
  .hs-eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
                letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass);
                margin-bottom: 10px; }
  .hs-title { font-family: var(--serif); font-style: italic; font-weight: 400;
              font-size: clamp(32px, 3.6vw, 44px); line-height: 1.02;
              margin: 0 0 14px; letter-spacing: -0.015em; color: var(--ink); }
  .hs-lede { font-size: 14px; line-height: 1.7; color: var(--ink-dim);
             margin: 0; letter-spacing: 0.005em; }
  .hs-lede code { font-family: var(--mono); font-size: 12.5px;
                  background: rgba(168,122,44,0.10); padding: 1px 5px;
                  border-radius: 3px; color: var(--brass); }

  .hs-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
             gap: 14px; align-items: stretch; }
  @media (max-width: 920px) {
    .hs-flow { grid-template-columns: 1fr; gap: 14px; }
    .hs-arrow { transform: rotate(90deg); justify-self: center; padding: 4px 0; }
  }
  .hs-node { background: var(--paper); border: 1px solid var(--brd-strong);
             border-radius: 8px; padding: 20px 20px 18px;
             display: flex; flex-direction: column; gap: 4px; }
  .hs-node-solver { border-color: var(--felt); }
  .hs-node-disk   { border-color: var(--brass); background: linear-gradient(180deg, #FBF6E8 0%, var(--paper) 70%); }
  .hs-node-viewer { border-color: var(--felt); }
  .hs-node-byo    { border-color: var(--brass); border-style: dashed; background: var(--paper-elev); }
  .hs-node-glyph { margin-bottom: 8px; }
  .hs-node-label { font-family: var(--mono); font-size: 12px; font-weight: 700;
                   letter-spacing: 0.08em; color: var(--ink); }
  .hs-node-label code { font-family: var(--mono); font-size: 11.5px; color: var(--brass);
                        background: rgba(168,122,44,0.10); padding: 1px 5px;
                        border-radius: 3px; font-weight: 700; }
  .hs-node-sub { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
                 letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
  .hs-node-list { list-style: none; margin: 12px 0 0; padding: 0;
                  display: flex; flex-direction: column; gap: 6px;
                  border-top: 1px dashed var(--brd); padding-top: 12px; }
  .hs-node-list li { font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim);
                     line-height: 1.5; letter-spacing: 0.01em; }
  .hs-node-list li code { font-family: var(--mono); font-size: 11px;
                          background: rgba(168,122,44,0.10); padding: 1px 5px;
                          border-radius: 3px; color: var(--brass); }
  .hs-files li { padding-left: 14px; position: relative; }
  .hs-files li::before { content: '•'; position: absolute; left: 2px; top: 0;
                         color: var(--brass); font-weight: 700; }
  .hs-arrow { display: grid; place-items: center; padding: 0 4px; }

  /* Stacked viewer + byo cell (right column of the flow) */
  .hs-node-stack { display: flex; flex-direction: column; gap: 8px; }
  .hs-or { font-family: var(--mono); font-size: 10px; font-weight: 700;
           letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint);
           text-align: center; padding: 4px 0; position: relative; }
  .hs-or::before, .hs-or::after { content: ''; position: absolute; top: 50%;
                                   width: calc(50% - 22px); height: 1px;
                                   background: var(--brd-strong); }
  .hs-or::before { left: 0; }
  .hs-or::after  { right: 0; }

  /* ─── Standard path · by the numbers ─── */
  .sp-section { padding: 64px 0; background: var(--paper-elev);
                 border-top: 1px solid var(--brd); border-bottom: 1px solid var(--brd); }
  .sp-card { background: var(--paper-raised); border: 1px solid var(--brd);
              border-radius: 10px; padding: 40px 44px;
              position: relative; overflow: hidden; }
  .sp-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0;
                      width: 4px; background: var(--felt); }
  @media (max-width: 760px) { .sp-card { padding: 28px 24px; } }
  .sp-eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
                 letter-spacing: 0.24em; text-transform: uppercase; color: var(--felt);
                 margin-bottom: 10px; }
  .sp-title { font-family: var(--serif); font-style: italic; font-weight: 400;
               font-size: clamp(32px, 3.8vw, 48px); line-height: 1; margin: 0 0 14px;
               letter-spacing: -0.02em; color: var(--ink); }
  .sp-lede { font-size: 14px; line-height: 1.7; color: var(--ink-dim);
              margin: 0 0 28px; max-width: 72ch; letter-spacing: 0.005em; }
  .sp-lede strong { color: var(--ink); font-weight: 700; }

  /* Scope spec rows */
  .sp-scope { background: var(--paper); border: 1px solid var(--brd);
               border-radius: 6px; padding: 18px 22px; margin-bottom: 28px; }
  .sp-scope-row { display: grid; grid-template-columns: 140px 1fr; gap: 16px;
                   padding: 9px 0; border-bottom: 1px dashed var(--brd);
                   font-family: var(--mono); font-size: 12.5px; line-height: 1.55; }
  .sp-scope-row:last-child { border-bottom: none; }
  .sp-scope-k { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
                 color: var(--ink-faint); font-weight: 700; padding-top: 2px; }
  .sp-scope-v { color: var(--ink); }
  .sp-scope-v strong { color: var(--felt); font-weight: 700; }
  .sp-scope-v .sp-sep { color: var(--ink-faint); margin: 0 4px; }
  .sp-scope-note { color: var(--ink-faint); font-weight: 500; }
  @media (max-width: 640px) {
    .sp-scope-row { grid-template-columns: 1fr; gap: 2px; }
  }

  /* Phase blocks (Solve / Export) */
  .sp-phase { padding: 22px 0; border-top: 1px solid var(--brd); }
  .sp-phase:last-of-type { padding-bottom: 24px; }
  .sp-phase-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
                    margin-bottom: 16px; }
  .sp-phase-tag { font-family: var(--mono); font-size: 11px; font-weight: 700;
                   letter-spacing: 0.18em; text-transform: uppercase;
                   color: var(--paper-raised); background: var(--felt);
                   padding: 4px 12px; border-radius: 3px; }
  .sp-phase-tool { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
                    letter-spacing: 0.18em; text-transform: uppercase;
                    color: var(--brass); }
  .sp-phase-caption { font-family: var(--mono); font-size: 12px; color: var(--ink-dim);
                       letter-spacing: 0.005em; flex: 1; min-width: 240px; }

  .sp-rows { display: flex; flex-direction: column; gap: 10px; }
  .sp-row { display: grid; grid-template-columns: 180px 1fr 110px;
             align-items: center; gap: 16px;
             font-family: var(--mono); font-size: 13px; color: var(--ink-dim); }
  @media (max-width: 640px) {
    .sp-row { grid-template-columns: 1fr 100px; }
    .sp-row-bar { grid-column: 1 / -1; order: 3; }
  }
  .sp-row-label { font-size: 11.5px; letter-spacing: 0.04em; }
  .sp-row-split .sp-row-label { color: var(--brass); font-weight: 700; }
  .sp-row-bar { display: block; height: 14px; background: var(--paper-inset);
                 border-radius: 3px; overflow: hidden; position: relative; }
  .sp-row-bar-fill { display: block; height: 100%; border-radius: 3px;
                      transition: width 280ms ease; }
  .sp-row-bar-fill-single { background: var(--ink-dim); opacity: 0.55; }
  .sp-row-bar-fill-split  { background: var(--brass);
                            background: linear-gradient(90deg, var(--brass) 0%, #C2913B 100%); }
  .sp-row-amt { font-family: var(--serif); font-style: italic; font-size: 22px;
                 color: var(--ink-dim); font-weight: 400; text-align: right;
                 letter-spacing: -0.01em; }
  .sp-row-amt-emph { color: var(--brass); }
  .sp-row-unit { font-family: var(--mono); font-style: normal; font-size: 11px;
                  font-weight: 500; color: var(--ink-faint); letter-spacing: 0.04em;
                  margin-left: 2px; }

  /* Totals strip */
  .sp-total { margin-top: 12px; padding: 18px 22px 20px;
               background: var(--paper); border: 1px solid var(--brd-strong);
               border-radius: 6px; }
  .sp-total-row { display: flex; align-items: baseline; justify-content: space-between;
                   gap: 16px; padding: 6px 0;
                   font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim);
                   border-bottom: 1px dashed var(--brd); }
  .sp-total-row:last-of-type { border-bottom: none; }
  .sp-total-row-emph { font-weight: 700; }
  .sp-total-row-emph .sp-total-label { color: var(--ink); }
  .sp-total-row-emph .sp-total-amt   { color: var(--brass); }
  .sp-total-label { letter-spacing: 0.02em; }
  .sp-total-amt { font-family: var(--serif); font-style: italic; font-size: 22px;
                   color: var(--ink); font-weight: 400; letter-spacing: -0.01em; }
  .sp-total-days { font-family: var(--mono); font-style: normal; font-size: 11px;
                    font-weight: 500; color: var(--ink-faint); letter-spacing: 0.04em;
                    margin-left: 4px; }
  .sp-total-foot { margin: 12px 0 0; font-family: var(--mono); font-size: 11.5px;
                    color: var(--ink-faint); letter-spacing: 0.01em; line-height: 1.65; }

  /* ─── Open Format page ─── */
  .fmt-section { max-width: 880px; margin: 0 auto; }
  .fmt-tag { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
             letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass);
             margin-bottom: 14px; }
  .fmt-tag-quiet { color: var(--ink-faint); }
  .fmt-title { font-family: var(--serif); font-style: italic; font-weight: 400;
               font-size: clamp(32px, 4vw, 48px); line-height: 1.05;
               margin: 0 0 22px; letter-spacing: -0.02em; color: var(--ink); }
  .fmt-body { color: var(--ink-dim); font-size: 15px; line-height: 1.75;
              margin: 0 0 18px; max-width: 64ch; letter-spacing: 0.005em; }
  .fmt-body-small { font-size: 13px; line-height: 1.65; margin-top: 10px; }
  .fmt-body strong { color: var(--ink); font-weight: 700; }
  .fmt-body code, .fmt-body-small code { font-family: var(--mono); font-size: 13px;
                                          background: rgba(168,122,44,0.10);
                                          padding: 1px 6px; border-radius: 3px;
                                          color: var(--brass); }
  .fmt-callout { margin-bottom: 36px; padding: 22px 28px;
                  background: var(--paper-elev); border-left: 3px solid var(--brass);
                  border-radius: 0 6px 6px 0; }
  .fmt-callout-problem { border-left-color: #B23A28; }
  .fmt-callout-eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
                          letter-spacing: 0.24em; text-transform: uppercase;
                          color: #B23A28; margin-bottom: 10px; }
  .fmt-callout-body { font-size: 14px; line-height: 1.75; color: var(--ink-dim);
                       margin: 0; max-width: 64ch; }
  .fmt-callout-body strong { color: var(--ink); font-weight: 700; }
  .fmt-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
                   margin-top: 22px; }
  @media (max-width: 760px) { .fmt-features { grid-template-columns: 1fr; } }
  .fmt-feature { padding: 24px 26px 26px; background: var(--paper-raised);
                  border: 1px solid var(--brd); border-radius: 6px;
                  display: flex; flex-direction: column; gap: 8px; position: relative; }
  .fmt-feature-num { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
                      letter-spacing: 0.24em; color: var(--brass); }
  .fmt-feature h3 { font-family: var(--serif); font-style: italic; font-weight: 400;
                     font-size: 22px; line-height: 1.15; margin: 0 0 6px;
                     letter-spacing: -0.01em; color: var(--ink); }
  .fmt-feature p { font-size: 13px; line-height: 1.65; color: var(--ink-dim);
                    margin: 0; letter-spacing: 0.005em; }

  /* Technical spec sub-sections */
  .fmt-spec { max-width: 920px; }
  .fmt-spec-section { padding: 28px 0; border-top: 1px solid var(--brd); }
  .fmt-spec-section:first-of-type { border-top: 1px solid var(--brd-strong);
                                     margin-top: 28px; }
  .fmt-spec-header { font-family: var(--mono); font-size: 12px; font-weight: 700;
                      letter-spacing: 0.18em; text-transform: uppercase; color: var(--felt);
                      margin: 0 0 16px; }
  .fmt-code { font-family: var(--mono); font-size: 12px; line-height: 1.55;
              color: var(--ink); background: var(--paper-elev);
              border: 1px solid var(--brd); border-radius: 4px;
              padding: 16px 18px; margin: 0 0 16px; overflow-x: auto;
              white-space: pre; letter-spacing: 0.005em; }
  .fmt-code-mini { font-size: 11.5px; padding: 12px 14px; margin-bottom: 8px; }
  .fmt-node { margin-bottom: 18px; padding: 18px 20px;
              background: var(--paper-raised); border: 1px solid var(--brd);
              border-radius: 6px; }
  .fmt-node:last-child { margin-bottom: 0; }
  .fmt-node-name { font-family: var(--mono); font-size: 11.5px; font-weight: 700;
                    letter-spacing: 0.14em; text-transform: uppercase;
                    color: var(--brass); margin-bottom: 12px; }
  .fmt-steps { list-style: none; padding: 0; margin: 0;
                counter-reset: fmt-step; }
  .fmt-steps li { position: relative; padding: 10px 0 10px 36px;
                   font-size: 14px; line-height: 1.65; color: var(--ink-dim);
                   border-bottom: 1px dashed var(--brd);
                   counter-increment: fmt-step; }
  .fmt-steps li:last-child { border-bottom: none; }
  .fmt-steps li::before { content: counter(fmt-step, decimal-leading-zero);
                           position: absolute; left: 0; top: 12px;
                           font-family: var(--mono); font-size: 11px; font-weight: 700;
                           letter-spacing: 0.12em; color: var(--brass); }
  .fmt-steps li code { font-family: var(--mono); font-size: 12px;
                        background: rgba(168,122,44,0.10); padding: 1px 5px;
                        border-radius: 3px; color: var(--brass); }
  .fmt-refs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 760px) { .fmt-refs { grid-template-columns: 1fr; } }
  .fmt-ref { padding: 20px 22px; background: var(--paper-raised);
              border: 1px solid var(--brd); border-radius: 6px;
              display: flex; flex-direction: column; gap: 6px; }
  .fmt-ref-name { font-family: var(--mono); font-size: 16px; font-weight: 700;
                   color: var(--ink); letter-spacing: 0.01em; }
  .fmt-ref-size { font-family: var(--mono); font-size: 10.5px; font-weight: 600;
                   letter-spacing: 0.14em; text-transform: uppercase;
                   color: var(--ink-faint); }
  .fmt-ref p { font-size: 13px; line-height: 1.65; color: var(--ink-dim);
                margin: 6px 0 0; }
  .fmt-ref code { font-family: var(--mono); font-size: 12px;
                   background: rgba(168,122,44,0.10); padding: 1px 5px;
                   border-radius: 3px; color: var(--brass); }
  .fmt-spec-ai { background: linear-gradient(180deg, rgba(168,122,44,0.07), transparent);
                  padding-left: 22px; padding-right: 22px;
                  border-radius: 4px; }
  .fmt-spec-ai .fmt-body em { color: var(--brass); font-style: italic; }

  /* Copyable spec box wrapping the FormatSpecBlock */
  .fmt-spec-copybox { position: relative;
                       margin: 28px 0 0;
                       background: var(--paper-raised);
                       border: 1px solid var(--brd-strong);
                       border-radius: 8px;
                       box-shadow: 0 0 0 1px rgba(168,122,44,0.18),
                                   0 18px 48px rgba(14,24,16,0.08); }
  .fmt-spec-copybox-bar { position: sticky; top: 64px; z-index: 5;
                           display: flex; align-items: center;
                           gap: 16px; padding: 14px 22px;
                           background: var(--paper-elev);
                           border-bottom: 1px solid var(--brd);
                           border-radius: 8px 8px 0 0; }
  .fmt-spec-copybox-meta { display: flex; flex-direction: column; gap: 2px;
                            flex: 1; min-width: 0; }
  .fmt-spec-copybox-label { font-family: var(--mono); font-size: 11px;
                             font-weight: 700; letter-spacing: 0.2em;
                             text-transform: uppercase; color: var(--ink); }
  .fmt-spec-copybox-hint { font-family: var(--mono); font-size: 10.5px;
                            letter-spacing: 0.04em; color: var(--ink-faint); }
  .fmt-spec-copybox-btn { display: inline-flex; align-items: center; gap: 8px;
                          height: 38px; padding: 0 16px; border-radius: 4px;
                          font-family: var(--mono); font-size: 11.5px;
                          font-weight: 700; letter-spacing: 0.12em;
                          text-transform: uppercase; cursor: pointer;
                          border: 1px solid var(--brass);
                          background: var(--brass); color: var(--paper);
                          transition: all 140ms ease; flex-shrink: 0; }
  .fmt-spec-copybox-btn:hover { background: #C2913B; border-color: #C2913B; }
  .fmt-spec-copybox-btn.is-copied { background: var(--felt); border-color: var(--felt); }
  .fmt-spec-copybox-btn-icon { font-size: 13px; line-height: 1; }
  .fmt-spec-copybox-body { padding: 8px 28px 24px; }
  .fmt-spec-copybox-body .fmt-spec-section:first-of-type { border-top: none;
                                                            margin-top: 0; }
  .fmt-spec-copybox-foot { display: flex; align-items: center; gap: 12px;
                            padding: 14px 22px;
                            background: var(--paper-elev);
                            border-top: 1px solid var(--brd);
                            border-radius: 0 0 8px 8px;
                            font-family: var(--mono); font-size: 12px;
                            color: var(--ink-dim); letter-spacing: 0.005em; }
  .fmt-spec-copybox-foot-tag { font-size: 10px; letter-spacing: 0.22em;
                                text-transform: uppercase; color: var(--brass);
                                font-weight: 700; padding: 4px 9px;
                                background: var(--paper-raised);
                                border: 1px solid var(--brass); border-radius: 3px;
                                flex-shrink: 0; }
  .fmt-spec-copybox-foot-text { line-height: 1.6; }
  .fmt-spec-copybox-foot-text em { color: var(--brass); font-style: italic;
                                    font-weight: 600; }
  @media (max-width: 640px) {
    .fmt-spec-copybox-bar { flex-direction: column; align-items: flex-start;
                             gap: 10px; padding: 14px 18px; }
    .fmt-spec-copybox-btn { width: 100%; justify-content: center; }
    .fmt-spec-copybox-body { padding: 8px 18px 20px; }
    .fmt-spec-copybox-foot { flex-direction: column; align-items: flex-start;
                              gap: 8px; padding: 14px 18px; }
  }

  /* Hero two-column grid: lede on the left, CTA stack on the right */
  .hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px;
                align-items: start; }
  @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } }
  .hero-text { min-width: 0; }
  .hero-text .hero-headline { margin-top: 0; }
  .hero-text .hero-lede { margin-bottom: 0; }
  .hero-actions { display: flex; flex-direction: column; gap: 10px;
                   width: 100%; position: sticky; top: 88px; }
  @media (max-width: 980px) { .hero-actions { position: static; max-width: 480px; } }

  .hero-action { display: grid; grid-template-columns: 1fr auto;
                  grid-template-areas: "eyebrow arr" "label arr";
                  column-gap: 16px; row-gap: 2px;
                  padding: 16px 20px; border-radius: 6px;
                  text-decoration: none; cursor: pointer;
                  border: 1.5px solid var(--brd-strong);
                  background: var(--paper-raised);
                  transition: all 160ms ease; }
  .hero-action:hover { transform: translateY(-2px);
                        box-shadow: 0 8px 20px rgba(14,24,16,0.10); }
  .ha-eyebrow { grid-area: eyebrow;
                 font-family: var(--mono); font-size: 10px; font-weight: 700;
                 letter-spacing: 0.22em; text-transform: uppercase;
                 color: var(--ink-faint); }
  .ha-label { grid-area: label;
               font-family: var(--mono); font-size: 14.5px; font-weight: 700;
               letter-spacing: 0.04em; color: var(--ink); }
  .ha-arr { grid-area: arr; align-self: center;
             font-family: var(--serif); font-size: 26px; font-style: italic;
             color: var(--ink-dim); transition: transform 160ms ease, color 160ms ease; }
  .hero-action:hover .ha-arr { transform: translateX(4px); }

  /* Primary — waitlist */
  .ha-primary { background: var(--felt); border-color: var(--felt); }
  .ha-primary .ha-eyebrow { color: rgba(242,235,216,0.62); }
  .ha-primary .ha-label   { color: var(--paper-raised); }
  .ha-primary .ha-arr     { color: var(--brass-bright); }
  .ha-primary:hover { background: var(--ink); border-color: var(--ink); }

  /* Ghost — demo */
  .ha-ghost { background: var(--paper-raised); }
  .ha-ghost:hover { border-color: var(--ink); }

  /* Brass — open format spec */
  .ha-brass { background: linear-gradient(90deg, rgba(168,122,44,0.08), rgba(168,122,44,0.02));
               border-color: var(--brass); }
  .ha-brass .ha-eyebrow { color: var(--brass); }
  .ha-brass .ha-arr     { color: var(--brass); }
  .ha-brass:hover { background: linear-gradient(90deg, rgba(168,122,44,0.16), rgba(168,122,44,0.05)); }

  /* Discord */
  .ha-discord { background: linear-gradient(90deg, rgba(88,101,242,0.10), rgba(88,101,242,0.02));
                 border-color: #5865F2; }
  .ha-discord .ha-eyebrow { color: #5865F2; display: inline-flex; align-items: center; }
  .ha-discord .ha-arr     { color: #5865F2; }
  .ha-discord:hover { background: linear-gradient(90deg, rgba(88,101,242,0.18), rgba(88,101,242,0.06)); }

  /* Try in browser — felt outline accent */
  .ha-try { background: linear-gradient(90deg, rgba(14,59,44,0.07), rgba(14,59,44,0.01));
            border-color: var(--felt); }
  .ha-try .ha-eyebrow { color: var(--felt); }
  .ha-try .ha-arr     { color: var(--felt); }
  .ha-try:hover { background: linear-gradient(90deg, rgba(14,59,44,0.14), rgba(14,59,44,0.04)); }

  /* Solo hero action — single prominent Test-the-Viewer card */
  .hero-actions-solo { display: block; }
  .hero-action.ha-try-hero { display: flex; flex-direction: column; gap: 4px;
                              max-width: 560px; padding: 22px 28px;
                              background: linear-gradient(95deg, rgba(14,59,44,0.12), rgba(14,59,44,0.03));
                              border: 2px solid var(--felt); border-radius: 12px; }
  .ha-try-hero .ha-eyebrow { font-size: 12px; letter-spacing: 0.04em; color: var(--felt);
                             text-transform: none; font-weight: 600; }
  .ha-try-hero .ha-label { font-size: 26px; font-weight: 700; color: var(--ink);
                           letter-spacing: -0.01em; }
  .ha-try-hero .ha-arr { position: absolute; top: 24px; right: 26px;
                         font-size: 22px; color: var(--felt); }
  .ha-try-hero { position: relative; }
  .ha-try-hero:hover { background: linear-gradient(95deg, rgba(14,59,44,0.2), rgba(14,59,44,0.07));
                       transform: translateY(-2px); }

  /* Viewer subpage — split Test / Download box */
  .try-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
               max-width: 880px; margin: 0 auto 24px; }
  @media (max-width: 640px) { .try-split { grid-template-columns: 1fr; } }
  .try-split-half { display: flex; flex-direction: column; gap: 5px;
                    padding: 16px 20px; border-radius: 10px; border: 2px solid var(--felt);
                    text-decoration: none; cursor: pointer;
                    background: linear-gradient(95deg, rgba(14,59,44,0.10), rgba(14,59,44,0.02));
                    transition: transform 180ms ease, background 180ms ease; }
  .try-split-half:hover { transform: translateY(-2px);
                          background: linear-gradient(95deg, rgba(14,59,44,0.18), rgba(14,59,44,0.06)); }
  .try-split-dl { border-color: var(--brass);
                  background: linear-gradient(95deg, rgba(168,122,44,0.10), rgba(168,122,44,0.02)); }
  .try-split-dl:hover { background: linear-gradient(95deg, rgba(168,122,44,0.18), rgba(168,122,44,0.06)); }
  .try-split-eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
                       letter-spacing: 0.16em; text-transform: uppercase; color: var(--felt); }
  .try-split-dl .try-split-eyebrow { color: var(--brass); }
  .try-split-title { font-family: var(--serif); font-style: italic; font-weight: 400;
                     font-size: 22px; line-height: 1.05; color: var(--ink);
                     letter-spacing: -0.015em; }
  .try-split-sub { font-size: 12px; line-height: 1.5; color: var(--ink-dim);
                   max-width: 40ch; }
  .try-split-cta { margin-top: 6px; font-family: var(--mono); font-size: 11px;
                   font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
                   color: var(--felt); }
  .try-split-dl .try-split-cta { color: var(--brass); }

  /* Smaller viewer gallery on the subpage */
  .viewer-gallery-sm { max-width: 880px; margin: 0 auto; }

  .try-box-eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 700;
                     letter-spacing: 0.18em; text-transform: uppercase; color: var(--felt);
                     margin-bottom: 8px; }
  .try-box-title { font-family: var(--serif); font-style: italic; font-weight: 400;
                   font-size: clamp(28px, 3.4vw, 38px); line-height: 1.05; margin: 0 0 8px;
                   color: var(--ink); letter-spacing: -0.015em; }
  .try-box-body { font-size: 14px; line-height: 1.65; color: var(--ink-dim);
                  margin: 0; max-width: 52ch; }
  .try-box-cta { flex-shrink: 0; }

  /* Hero Discord callout */
  .hero-discord { display: flex; align-items: center; gap: 18px;
                  margin-top: 12px; padding: 16px 22px;
                  background: linear-gradient(90deg, rgba(88,101,242,0.10), rgba(88,101,242,0.02));
                  border: 1px solid #5865F2;
                  border-radius: 6px; max-width: 760px;
                  text-decoration: none; cursor: pointer;
                  transition: all 160ms ease; }
  .hero-discord:hover { background: linear-gradient(90deg, rgba(88,101,242,0.18), rgba(88,101,242,0.06));
                        box-shadow: 0 6px 20px rgba(88,101,242,0.18); }
  .hd-icon { flex-shrink: 0; display: inline-flex; align-items: center; }
  .hd-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
  .hd-eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
                letter-spacing: 0.22em; text-transform: uppercase; color: #5865F2; }
  .hd-text { font-family: var(--mono); font-size: 13px; line-height: 1.55;
             color: var(--ink); letter-spacing: 0.005em; font-weight: 500; }
  .hd-cta { display: inline-flex; align-items: center; gap: 6px;
            font-family: var(--mono); font-size: 11.5px; font-weight: 700;
            letter-spacing: 0.14em; text-transform: uppercase;
            color: #5865F2; flex-shrink: 0; white-space: nowrap; }
  @media (max-width: 760px) {
    .hero-discord { flex-direction: column; align-items: flex-start;
                    padding: 14px 16px; gap: 8px; }
    .hd-icon { display: none; }
    .hd-cta { width: 100%; justify-content: flex-end; }
  }

  /* Hero spec callout — brass-outlined card linking to the format page */
  .hero-spec-callout { display: flex; align-items: center; gap: 16px;
                        margin-top: 18px; padding: 16px 22px;
                        background: linear-gradient(90deg, rgba(168,122,44,0.10), rgba(168,122,44,0.02));
                        border: 1px solid var(--brass);
                        border-radius: 6px; max-width: 760px;
                        text-decoration: none; cursor: pointer;
                        transition: all 160ms ease; }
  .hero-spec-callout:hover { background: linear-gradient(90deg, rgba(168,122,44,0.18), rgba(168,122,44,0.06));
                              box-shadow: 0 6px 20px rgba(168,122,44,0.18); }
  .hsc-icon { font-size: 28px; line-height: 1; color: var(--brass);
               flex-shrink: 0; }
  .hsc-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
  .hsc-eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
                  letter-spacing: 0.22em; text-transform: uppercase;
                  color: var(--brass); }
  .hsc-text { font-family: var(--mono); font-size: 13px; line-height: 1.55;
               color: var(--ink); letter-spacing: 0.005em; font-weight: 500; }
  .hsc-cta { display: inline-flex; align-items: center; gap: 6px;
              font-family: var(--mono); font-size: 11.5px; font-weight: 700;
              letter-spacing: 0.14em; text-transform: uppercase;
              color: var(--brass); flex-shrink: 0; white-space: nowrap; }
  @media (max-width: 760px) {
    .hero-spec-callout { flex-direction: column; align-items: flex-start;
                          padding: 14px 16px; gap: 8px; }
    .hsc-icon { display: none; }
    .hsc-cta { width: 100%; justify-content: flex-end; }
  }

  /* Anchor jump card on Open Format page — skip to AI-ready spec */
  .fmt-jump-card { display: flex; align-items: center; gap: 18px;
                    width: 100%; padding: 18px 22px;
                    background: var(--paper-raised);
                    border: 1px solid var(--brass);
                    border-radius: 8px;
                    box-shadow: 0 0 0 1px var(--brass), 0 6px 18px rgba(168,122,44,0.10);
                    cursor: pointer; text-align: left;
                    font-family: inherit; color: inherit;
                    transition: all 160ms ease; }
  .fmt-jump-card:hover { transform: translateY(-2px);
                          box-shadow: 0 0 0 1px var(--brass), 0 12px 28px rgba(168,122,44,0.18); }
  .fmt-jump-icon { font-size: 26px; line-height: 1; color: var(--brass);
                    flex-shrink: 0; }
  .fmt-jump-body { display: flex; flex-direction: column; gap: 2px;
                    flex: 1; min-width: 0; }
  .fmt-jump-eyebrow { font-family: var(--mono); font-size: 10px; font-weight: 700;
                      letter-spacing: 0.24em; text-transform: uppercase;
                      color: var(--brass); }
  .fmt-jump-title { font-family: var(--serif); font-style: italic;
                    font-size: 22px; line-height: 1.15;
                    color: var(--ink); font-weight: 400; letter-spacing: -0.01em;
                    margin-top: 2px; }
  .fmt-jump-sub { font-family: var(--mono); font-size: 12px;
                  color: var(--ink-dim); letter-spacing: 0.005em;
                  line-height: 1.55; margin-top: 4px; }
  .fmt-jump-arrow { font-size: 22px; line-height: 1; color: var(--brass);
                    font-weight: 700; flex-shrink: 0; }
  @media (max-width: 640px) {
    .fmt-jump-card { padding: 14px 16px; gap: 12px; }
    .fmt-jump-icon { font-size: 22px; }
    .fmt-jump-title { font-size: 18px; }
  }

  /* Hero tertiary link to the format page */
  .hero-format-link { display: inline-flex; align-items: center; gap: 6px;
                       font-family: var(--mono); font-size: 11.5px; font-weight: 700;
                       letter-spacing: 0.14em; text-transform: uppercase;
                       color: var(--brass); cursor: pointer;
                       padding: 6px 0; margin-left: 4px;
                       border-bottom: 1px dashed transparent;
                       transition: border-color 140ms ease, color 140ms ease; }
  .hero-format-link:hover { border-bottom-color: var(--brass); color: var(--ink); }
  @media (max-width: 760px) {
    .hero-format-link { width: 100%; margin-left: 0; margin-top: 6px;
                         justify-content: center; }
  }

  /* Discord topbar button — styled like btn-primary but Discord-indigo */
  .btn-discord { display: inline-flex; align-items: center; gap: 8px;
                  height: 36px; padding: 0 16px; border-radius: 4px;
                  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
                  text-transform: uppercase; white-space: nowrap;
                  background: #5865F2; border: 1px solid #5865F2;
                  color: var(--paper-raised); transition: background 120ms ease,
                                                          border-color 120ms ease; }
  .btn-discord:hover { background: #4752C4; border-color: #4752C4; color: var(--paper-raised); }

  /* Support topbar button — outlined neutral, matches button rhythm */
  .btn-support { display: inline-flex; align-items: center; gap: 8px;
                  height: 36px; padding: 0 16px; border-radius: 4px;
                  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
                  text-transform: uppercase; white-space: nowrap;
                  background: transparent; border: 1px solid var(--brd-strong);
                  color: var(--ink); transition: border-color 120ms ease, color 120ms ease; }
  .btn-support:hover { border-color: var(--felt); color: var(--felt); }

  /* Download topbar button — filled lighter green (matches Buy hierarchy) */
  .btn-download { display: inline-flex; align-items: center; gap: 8px;
                  height: 36px; padding: 0 16px; border-radius: 4px;
                  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
                  text-transform: uppercase; white-space: nowrap; cursor: pointer;
                  background: var(--felt-mid); border: 1px solid var(--felt-mid);
                  color: var(--paper-raised); transition: background 120ms ease; }
  .btn-download:hover { background: var(--felt); border-color: var(--felt);
                        color: var(--paper-raised); }
  .top-download { position: relative; display: inline-flex; }
  .top-download .nav-dropdown { position: absolute; top: calc(100% + 6px); right: 0; left: auto;
                                 min-width: 240px; padding: 8px;
                                 background: var(--paper-raised);
                                 border: 1px solid var(--brd-strong); border-radius: 6px;
                                 box-shadow: 0 12px 32px rgba(14,24,16,0.18);
                                 opacity: 0; visibility: hidden; transform: translateY(-4px);
                                 transition: opacity 140ms ease, transform 140ms ease,
                                             visibility 0s linear 140ms;
                                 z-index: 60; display: flex; flex-direction: column; }
  .top-download:hover .nav-dropdown, .top-download:focus-within .nav-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 0s;
  }

  /* Bundle-card inline download link */
  .bundle-card-dl { display: inline-flex; align-items: center; gap: 8px;
                    align-self: flex-start; margin: -4px 0 4px;
                    font-family: var(--mono); font-size: 11px; font-weight: 700;
                    letter-spacing: 0.12em; text-transform: uppercase;
                    color: var(--felt); border-bottom: 1px solid transparent;
                    padding-bottom: 2px; transition: border-color 120ms ease, color 120ms ease; }
  .bundle-card-dl:hover { border-bottom-color: var(--felt); }
  .bundle-card-dl-free { color: var(--brass); }
  .bundle-card-dl-free:hover { border-bottom-color: var(--brass); }

                  text-transform: uppercase; font-family: var(--mono);
                  text-decoration: none; white-space: nowrap;
                  background: transparent; border: 1px solid var(--brass);
                  color: var(--brass); transition: background 120ms ease, color 120ms ease; }
  .btn-download:hover { background: var(--brass); color: var(--paper); }

  /* Top-right Buy button — dropdown variant */
  .top-buy { position: relative; display: inline-flex; }
  .top-buy > .btn { display: inline-flex; align-items: center; gap: 8px;
                     cursor: pointer; height: 36px; padding: 0 16px;
                     border-radius: 4px; font-size: 12px; font-weight: 600;
                     letter-spacing: 0.06em; text-transform: uppercase;
                     border: 1px solid var(--felt); background: var(--felt);
                     color: var(--paper-raised); white-space: nowrap; }
  .top-buy > .btn:hover { background: var(--ink); border-color: var(--ink); }
  /* Dropdown is hidden by default, shows on hover/focus */
  .top-buy .nav-dropdown { position: absolute; top: calc(100% + 6px); right: 0; left: auto;
                            min-width: 280px; padding: 8px;
                            background: var(--paper-raised);
                            border: 1px solid var(--brd-strong);
                            border-radius: 6px;
                            box-shadow: 0 12px 32px rgba(14,24,16,0.18);
                            opacity: 0; visibility: hidden;
                            transform: translateY(-4px);
                            transition: opacity 140ms ease, transform 140ms ease,
                                        visibility 0s linear 140ms;
                            z-index: 60;
                            display: flex; flex-direction: column; }
  .top-buy:hover .nav-dropdown,
  .top-buy:focus-within .nav-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 0s;
  }
  .top-buy-dropdown a { display: flex; flex-direction: column; gap: 3px;
                         padding: 12px 14px; border-radius: 4px;
                         white-space: normal; text-decoration: none; }
  .top-buy-dropdown a:hover { background: var(--paper-elev); }
  .top-buy-dropdown .tbd-label { font-family: var(--mono); font-size: 13px;
                                  font-weight: 700; letter-spacing: 0.06em;
                                  color: var(--ink); }
  .top-buy-dropdown .tbd-sub { font-family: var(--mono); font-size: 10.5px;
                                color: var(--ink-faint); letter-spacing: 0.04em; }

  /* Nav dropdown + separator (ART/GTO Suite menu) */
  .nav-tabs .nav-item.nav-has-dropdown { position: relative; }
  .nav-tabs .nav-item.nav-has-dropdown > a { display: inline-flex; align-items: center;
                                              gap: 4px; cursor: pointer; }
  .nav-tabs .nav-item.nav-has-dropdown .nav-caret { font-size: 9px; color: var(--ink-faint);
                                                    transition: transform 140ms ease; }
  .nav-tabs .nav-item.nav-has-dropdown:hover .nav-caret,
  .nav-tabs .nav-item.nav-has-dropdown:focus-within .nav-caret { transform: rotate(180deg); }
  .nav-tabs .nav-dropdown { position: absolute; top: calc(100% + 6px); left: -14px;
                             min-width: 200px; padding: 8px 0;
                             background: var(--paper-raised);
                             border: 1px solid var(--brd-strong);
                             border-radius: 6px;
                             box-shadow: 0 12px 32px rgba(14,24,16,0.18);
                             opacity: 0; visibility: hidden;
                             transform: translateY(-4px);
                             transition: opacity 140ms ease, transform 140ms ease,
                                         visibility 0s linear 140ms;
                             z-index: 60; display: flex; flex-direction: column; }
  .nav-tabs .nav-item.nav-has-dropdown:hover .nav-dropdown,
  .nav-tabs .nav-item.nav-has-dropdown:focus-within .nav-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 0s;
  }
  .nav-tabs .nav-dropdown a { padding: 8px 14px; font-size: 12px;
                              letter-spacing: 0.04em; color: var(--ink-dim);
                              font-weight: 500; white-space: nowrap;
                              display: flex; align-items: center; gap: 6px; }
  .nav-tabs .nav-dropdown a:hover { color: var(--felt); background: var(--paper-elev); }
  .nav-tabs .nav-dropdown a.active { color: var(--felt); font-weight: 700; }
  .nav-tabs .nav-sep { color: var(--brd-strong); font-weight: 400;
                       padding: 0 2px; user-select: none; pointer-events: none; }

  /* ── Topbar fit ──────────────────────────────────────────────
     8 nav tabs + 2 CTAs + brand is a lot; keep the CTAs on-screen by
     making Discord/Support icon-only, compacting the nav, and dropping
     to a hamburger drawer before the tabs would collide (≤1260px). */
  .btn-discord .btn-label, .btn-support .btn-label { display: none; }
  .top-right .btn-discord, .top-right .btn-support { padding: 0 11px; margin-left: 2px; }
  @media (max-width: 1560px) {
    .topbar-inner { gap: 16px; }
    .nav-tabs { gap: 9px; }
    .nav-tabs a { font-size: 11.5px; letter-spacing: 0.02em; }
  }
  @media (max-width: 1400px) {
    /* Hide secondary utility buttons before the nav gets tight */
    .top-right .btn-discord, .top-right .btn-support { display: none; }
  }
  /* Mobile menu separator */
  .mobile-menu .mm-sep { height: 1px; background: var(--brd);
                          margin: 8px 16px; }

  /* ─── Feature Highlights page ─── */
  .fh-section-tag { display: flex; align-items: baseline; gap: 18px;
                     padding-bottom: 14px; border-bottom: 1px solid var(--brd); }
  .fh-section-tag-badge { padding: 8px 14px; border-radius: 4px;
                          font-family: var(--mono); font-size: 13px; font-weight: 700;
                          letter-spacing: 0.18em; text-transform: uppercase; }
  .fh-badge-felt { background: var(--felt); color: var(--paper-raised); }
  .fh-badge-brass { background: var(--brass); color: var(--paper); }
  .fh-section-tag-text { font-family: var(--serif); font-style: italic; font-size: 22px;
                          color: var(--ink-dim); letter-spacing: -0.005em; }
  .fh-band { padding: 56px 0; border-bottom: 1px solid var(--brd); }
  .fh-band:last-of-type { border-bottom: none; }
  .fh-band-alt { background: var(--paper-elev); }
  .fh-band-felt { background: var(--felt); color: var(--paper-raised);
                   border-bottom: none; }
  .fh-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px;
             align-items: center; }
  @media (max-width: 880px) { .fh-row { grid-template-columns: 1fr; gap: 32px; } }
  .fh-row-rev .fh-visual { order: 2; }
  @media (max-width: 880px) { .fh-row-rev .fh-visual { order: 0; } }
  .fh-eyebrow { font-family: var(--mono); font-size: clamp(28px, 3.6vw, 44px);
                 font-weight: 700; letter-spacing: 0.04em;
                 text-transform: uppercase; color: var(--brass);
                 margin-bottom: 18px; line-height: 1.05; }
  .fh-eyebrow-brass { color: var(--brass); }
  .fh-band-felt .fh-eyebrow { color: var(--brass-bright); }
  .fh-band-felt .fh-eyebrow-brass { color: var(--brass-bright); }
  .fh-title { font-family: var(--serif); font-style: italic; font-weight: 400;
               font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15;
               margin: 0 0 18px; letter-spacing: -0.01em; color: var(--ink-dim);
               max-width: 32ch; }
  .fh-title-felt { color: rgba(242,235,216,0.85); }
  .fh-body { font-size: 13.5px; line-height: 1.7; color: var(--ink-dim);
              margin: 0 0 12px; max-width: 52ch; letter-spacing: 0.005em; }
  .fh-body strong { color: var(--ink); font-weight: 700; }
  .fh-body-felt { color: rgba(242,235,216,0.78); }
  .fh-body-felt strong { color: var(--paper-raised); }
  .fh-body code, .fh-list code { font-family: var(--mono); font-size: 11.5px;
                                 background: rgba(168,122,44,0.10); padding: 1px 5px;
                                 border-radius: 3px; color: var(--brass); }
  .fh-band-felt code { background: rgba(229,178,87,0.18); color: var(--brass-bright); }
  .fh-list { margin: 10px 0 14px; padding: 0; list-style: none; }
  .fh-list li { padding: 4px 0 4px 18px; position: relative;
                 color: var(--ink-dim); font-size: 12.5px; line-height: 1.6;
                 max-width: 52ch; }
  .fh-list li::before { content: ''; position: absolute; left: 4px; top: 14px;
                        width: 5px; height: 5px; border-radius: 50%;
                        background: var(--felt); }
  .fh-band-felt .fh-list li { color: rgba(242,235,216,0.7); }
  .fh-band-felt .fh-list li::before { background: var(--brass-bright); }
  .fh-link { display: inline-flex; align-items: center; gap: 6px;
              font-family: var(--mono); font-size: 12px; font-weight: 700;
              letter-spacing: 0.12em; text-transform: uppercase;
              color: var(--brass); margin-top: 8px;
              border-bottom: 1px dashed transparent;
              padding-bottom: 2px; transition: border-color 140ms ease; }
  .fh-link:hover { border-bottom-color: var(--brass); }
  .fh-link-brass { color: var(--brass-bright); }
  .fh-link-brass:hover { border-bottom-color: var(--brass-bright); }
  .fh-visual { background: var(--paper-raised); border: 1px solid var(--brd-strong);
                border-radius: 8px; overflow: hidden;
                box-shadow: 0 14px 30px rgba(14,24,16,0.10); }
  .fh-visual img { display: block; width: 100%; height: auto; }
  .fh-visual svg { display: block; width: 100%; height: auto; }
  .fh-visual-zoom { cursor: zoom-in; position: relative; }
  .fh-visual-zoom::after { content: '⤢'; position: absolute; top: 12px; right: 12px;
                            width: 32px; height: 32px;
                            background: rgba(11,12,16,0.78); color: var(--brass);
                            font-size: 16px; font-weight: 700;
                            display: grid; place-items: center; border-radius: 4px;
                            opacity: 0; transition: opacity 140ms ease;
                            pointer-events: none; }
  .fh-visual-zoom:hover::after { opacity: 1; }
  .fh-visual-dark { background: var(--felt); padding: 28px;
                     box-shadow: 0 14px 30px rgba(14,24,16,0.22); }
  .fh-visual-felt { background: var(--felt-deep); border-color: var(--felt-mid);
                     padding: 28px; }
  .fh-visual-light { background: var(--paper-elev); padding: 22px; }

  /* ─── Buy Solutions / Library page ─── */
  .lib-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
              margin-bottom: 56px; }
  @media (max-width: 880px) { .lib-grid { grid-template-columns: 1fr; gap: 18px; } }
  .lib-card { position: relative; background: var(--paper-raised);
              border: 1px solid var(--brd); border-radius: 10px;
              padding: 28px 30px 26px;
              display: flex; flex-direction: column; gap: 12px;
              box-shadow: 0 12px 28px rgba(14,24,16,0.10); }
  .lib-card:not(.lib-card-empty) { border-color: var(--felt);
                                    box-shadow: 0 0 0 1px var(--felt),
                                                0 14px 32px rgba(14,59,44,0.10); }
  .lib-badge { position: absolute; top: -12px; left: 24px;
                background: var(--brass); color: var(--paper);
                font-family: var(--mono); font-size: 10px; font-weight: 700;
                letter-spacing: 0.22em; text-transform: uppercase;
                padding: 5px 11px; border-radius: 3px; }
  .lib-card-author { display: inline-flex; align-items: baseline; gap: 8px;
                      padding-bottom: 6px; }
  .lib-card-author-k { font-family: var(--mono); font-size: 9.5px; font-weight: 700;
                        letter-spacing: 0.22em; text-transform: uppercase;
                        color: var(--ink-faint); }
  .lib-card-author-v { font-family: var(--mono); font-size: 12px; font-weight: 700;
                        letter-spacing: 0.06em; color: var(--brass); }
  .lib-card-title { font-family: var(--serif); font-style: italic; font-weight: 400;
                     font-size: 36px; line-height: 1.05; letter-spacing: -0.015em;
                     color: var(--ink); margin: 0; }
  .lib-card-subtitle { font-family: var(--mono); font-size: 11.5px; font-weight: 700;
                        letter-spacing: 0.14em; text-transform: uppercase;
                        color: var(--ink-dim); margin: -4px 0 4px; }
  .lib-card-row { display: grid; grid-template-columns: 130px 1fr; gap: 14px;
                   padding: 10px 0; border-bottom: 1px dashed var(--brd);
                   align-items: baseline; }
  .lib-card-row:last-of-type { border-bottom: none; padding-bottom: 12px; }
  .lib-k { font-family: var(--mono); font-size: 10px; font-weight: 700;
            letter-spacing: 0.2em; text-transform: uppercase;
            color: var(--ink-faint); }
  .lib-v { font-family: var(--mono); font-size: 14px; font-weight: 700;
            color: var(--ink); letter-spacing: 0.005em; line-height: 1.45; }
  .lib-vdim { font-family: var(--mono); font-size: 11px; font-weight: 500;
               color: var(--ink-faint); letter-spacing: 0.02em; }
  .lib-pots { display: inline-flex; gap: 6px; }
  .lib-pot { display: inline-block; padding: 3px 10px; border-radius: 3px;
              background: var(--paper-elev); border: 1px solid var(--brd-strong);
              font-family: var(--mono); font-size: 10.5px; font-weight: 700;
              letter-spacing: 0.12em; color: var(--ink); }
  .lib-nash { color: var(--brass); }
  .lib-card-foot { display: flex; align-items: center; justify-content: space-between;
                    gap: 16px; margin-top: 12px; padding-top: 18px;
                    border-top: 1px solid var(--brd); flex-wrap: wrap; }
  .lib-price { display: inline-flex; align-items: baseline; gap: 4px;
                font-family: var(--serif); font-style: italic; }
  .lib-price-cur { font-size: 32px; color: var(--ink-faint); font-weight: 400; }
  .lib-price-amt { font-size: 56px; color: var(--ink); font-weight: 400;
                    letter-spacing: -0.02em; line-height: 1; }
  .lib-price-one { font-family: var(--mono); font-style: normal;
                    font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
                    text-transform: uppercase; color: var(--ink-faint);
                    margin-left: 8px; align-self: end; padding-bottom: 6px; }

  .lib-card-empty { border-style: dashed; border-color: var(--brd-strong);
                     box-shadow: none; background: var(--paper-elev);
                     display: grid; place-items: center; min-height: 380px; }
  .lib-card-empty-inner { text-align: center; max-width: 36ch; padding: 0 20px; }
  .lib-empty-eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
                        letter-spacing: 0.22em; text-transform: uppercase;
                        color: var(--brass); margin-bottom: 12px; }
  .lib-empty-title { font-family: var(--serif); font-style: italic; font-weight: 400;
                      font-size: 28px; line-height: 1.15; letter-spacing: -0.01em;
                      color: var(--ink); margin: 0 0 14px; }
  .lib-empty-body { font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
                     color: var(--ink-dim); letter-spacing: 0.005em; margin: 0; }
  .lib-empty-body a { color: var(--brass); border-bottom: 1px dashed var(--brass); }

  .lib-includes { margin: 56px 0 80px; padding: 28px 30px 30px;
                   background: var(--paper-elev); border: 1px solid var(--brd);
                   border-left: 3px solid var(--felt); border-radius: 0 6px 6px 0; }
  .upgrade-strip { margin: 18px auto 0; max-width: 880px;
                   display: flex; align-items: center; gap: 12px;
                   padding: 12px 18px; background: rgba(168,122,44,0.08);
                   border: 1px dashed var(--brass); border-radius: 6px;
                   font-family: var(--mono); }
  .upgrade-strip-mark { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
                        background: var(--brass); color: var(--paper);
                        display: grid; place-items: center; font-size: 13px; font-weight: 700; }
  .upgrade-strip-text { font-size: 12.5px; line-height: 1.5; color: var(--ink-dim);
                        letter-spacing: 0.01em; }
  .upgrade-strip-text strong { color: var(--ink); font-weight: 700; }
  .upgrade-strip-text a { color: var(--brass); border-bottom: 1px dashed var(--brass); }

  /* Upgrade badge — green pill anchored to the top seam, clear of card text */
  .plan-feat-wrap { position: relative; }
  .upgrade-badge { position: absolute; top: -18px; left: 50%;
                   transform: translateX(-50%);
                   z-index: 6; display: inline-flex; align-items: center; gap: 10px;
                   padding: 10px 20px; border-radius: 999px;
                   background: var(--felt); color: var(--paper-raised);
                   box-shadow: 0 8px 20px rgba(14,59,44,0.32), 0 0 0 4px var(--paper);
                   font-family: var(--mono); white-space: nowrap; }
  .upgrade-badge .ub-line { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em;
                            text-transform: uppercase; opacity: 0.85; }
  .upgrade-badge .ub-amt { font-family: var(--serif); font-style: italic; font-weight: 400;
                           font-size: 23px; line-height: 1; color: var(--brass-bright); }
  .upgrade-badge .ub-arrow { display: none; }
  @media (max-width: 900px) {
    .upgrade-badge { top: -16px; }
  }

  .lib-soon-btn { display: inline-flex; align-items: center; justify-content: center;
                  background: var(--paper-inset); color: var(--ink-faint);
                  border: 1px dashed var(--brd-strong); cursor: default;
                  font-family: var(--mono); font-weight: 700; letter-spacing: 0.1em;
                  text-transform: uppercase; }
  .lib-includes-eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
                           letter-spacing: 0.22em; text-transform: uppercase;
                           color: var(--felt); margin-bottom: 18px; }
  .lib-includes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  @media (max-width: 760px) { .lib-includes-grid { grid-template-columns: 1fr; } }
  .lib-include-num { font-family: var(--mono); font-size: 11px; font-weight: 700;
                      letter-spacing: 0.22em; color: var(--brass); margin-bottom: 8px; }
  .lib-include-title { font-family: var(--serif); font-style: italic; font-weight: 400;
                        font-size: 22px; line-height: 1.15; color: var(--ink);
                        margin: 0 0 8px; letter-spacing: -0.01em; }
  .lib-include-body { font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
                       color: var(--ink-dim); letter-spacing: 0.005em; margin: 0; }

  /* ─── Roadmap page ─── */
  .rm-track { display: flex; flex-direction: column; gap: 32px;
              max-width: 1080px; margin: 0 auto; }
  .rm-item { display: grid; grid-template-columns: 180px 1fr; gap: 32px;
             align-items: stretch; }
  @media (max-width: 760px) { .rm-item { grid-template-columns: 1fr; gap: 12px; } }
  .rm-meta { display: flex; flex-direction: column; align-items: flex-end;
             gap: 12px; padding-top: 28px; position: sticky; top: 96px;
             height: fit-content; }
  @media (max-width: 760px) {
    .rm-meta { flex-direction: row; align-items: center; justify-content: space-between;
               padding-top: 0; position: static; }
  }
  .rm-stage { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
              letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass); }
  .rm-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--brass);
            box-shadow: 0 0 0 4px rgba(168,122,44,0.15); }
  .rm-dot-soon { background: var(--act-call);
                 box-shadow: 0 0 0 4px rgba(42,110,72,0.20); }
  .rm-dot-mid  { background: var(--brass); }
  .rm-dot-far  { background: var(--ink-faint);
                 box-shadow: 0 0 0 4px rgba(154,143,112,0.15); }
  .rm-dot-empty { background: transparent; border: 1.5px dashed var(--brd-strong);
                  box-shadow: none; }
  .rm-card { background: var(--paper-raised); border: 1px solid var(--brd);
             border-radius: 10px; padding: 32px 36px;
             box-shadow: 0 12px 28px rgba(14,24,16,0.08); }
  .rm-card-feat { background: var(--ink); color: var(--paper-raised);
                  border-color: var(--brass); padding: 28px 32px;
                  box-shadow: 0 0 0 1px var(--brass), 0 16px 36px rgba(0,0,0,0.30); }
  .rm-card-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px;
                  align-items: center; }
  @media (max-width: 880px) { .rm-card-grid { grid-template-columns: 1fr; gap: 22px; } }
  .rm-num { font-family: var(--mono); font-size: 12px; font-weight: 700;
            letter-spacing: 0.24em; color: var(--brass); margin-bottom: 10px; }
  .rm-title { font-family: var(--serif); font-style: italic; font-weight: 400;
              font-size: clamp(32px, 4vw, 44px); line-height: 1.05;
              margin: 0 0 14px; letter-spacing: -0.02em; color: var(--ink); }
  .rm-card-feat .rm-title { color: var(--paper-raised); }
  .rm-body { font-size: 14px; line-height: 1.7; color: var(--ink-dim);
             margin: 0 0 14px; max-width: 56ch; letter-spacing: 0.005em; }
  .rm-card-feat .rm-body { color: rgba(242,235,216,0.75); }
  .rm-card-feat .rm-body strong { color: var(--paper-raised); }
  .rm-list { margin: 10px 0 0; padding: 0; list-style: none; }
  .rm-list li { padding: 5px 0 5px 18px; position: relative;
                color: var(--ink-dim); font-size: 12.5px; line-height: 1.55;
                max-width: 56ch; }
  .rm-list li::before { content: ''; position: absolute; left: 4px; top: 13px;
                        width: 5px; height: 5px; border-radius: 50%;
                        background: var(--felt); }
  .rm-card-feat .rm-list li { color: rgba(242,235,216,0.7); }
  .rm-card-feat .rm-list li::before { background: var(--brass); }
  .rm-visual { background: var(--paper); border: 1px solid var(--brd);
               border-radius: 6px; overflow: hidden; padding: 18px; }
  .rm-card-feat .rm-visual { background: #F1EAD6;
                              border-color: var(--brass);
                              padding: 0; }
  .rm-visual svg { display: block; width: 100%; height: auto; }
  .rm-visual-engine img { display: block; width: 100%; height: auto; }
  .rm-engine-svg { background: transparent; }
  .rm-item-beyond .rm-card { background: var(--paper-elev);
                              border-style: dashed; border-color: var(--brd-strong); }
  .rm-card-empty { padding: 32px 36px; text-align: center; }
  .rm-empty-text { max-width: 56ch; margin: 0 auto; }
  .rm-empty-title { font-family: var(--serif); font-style: italic; font-weight: 400;
                    font-size: 32px; color: var(--ink); margin: 0 0 12px;
                    letter-spacing: -0.01em; }
  .rm-empty-body { font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
                   color: var(--ink-dim); margin: 0; }
  .rm-empty-body strong { color: var(--ink); font-weight: 700; }
  .rm-empty-body a { color: var(--brass); border-bottom: 1px dashed var(--brass); }


  .about-grid { display: grid; grid-template-columns: 360px 1fr;
                 gap: 56px; align-items: start;
                 max-width: 1080px; margin: 0 auto; }
  @media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; gap: 36px; } }
  .about-portrait { background: var(--paper-raised); border: 1px solid var(--brd);
                     border-radius: 10px; overflow: hidden; position: sticky; top: 96px; }
  .about-portrait img { display: block; width: 100%; height: auto; }
  .about-portrait-cap { padding: 18px 22px 20px;
                         border-top: 1px solid var(--brd); background: var(--paper-elev); }
  .about-portrait-name { font-family: var(--serif); font-style: italic;
                          font-weight: 400; font-size: 26px; color: var(--ink);
                          letter-spacing: -0.01em; line-height: 1.1; }
  .about-portrait-role { font-family: var(--mono); font-size: 11px; font-weight: 700;
                          letter-spacing: 0.14em; text-transform: uppercase;
                          color: var(--brass); margin-top: 6px; }
  .about-body { display: flex; flex-direction: column; gap: 32px; }
  .about-block .about-h { font-family: var(--serif); font-style: italic;
                           font-weight: 400; font-size: 30px; line-height: 1.1;
                           letter-spacing: -0.015em; color: var(--ink);
                           margin: 0 0 12px; }
  .about-block p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.75;
                    margin: 0 0 12px; max-width: 64ch; letter-spacing: 0.005em; }
  .about-block p:last-child { margin-bottom: 0; }
  .about-block p strong { color: var(--ink); font-weight: 700; }
  .about-block p em { font-style: italic; color: var(--brass); font-weight: 600; }
  .about-block p a { color: var(--brass); border-bottom: 1px dashed var(--brass);
                      padding-bottom: 1px; }
  .about-block p a:hover { color: var(--ink); border-bottom-color: var(--ink); }
  .about-block-meta { background: var(--paper-elev); border: 1px solid var(--brd);
                       border-radius: 6px; padding: 18px 22px; }
  .about-meta-row { display: grid; grid-template-columns: 110px 1fr; gap: 16px;
                     padding: 6px 0; border-bottom: 1px dashed var(--brd);
                     font-family: var(--mono); font-size: 12.5px; }
  .about-meta-row:last-child { border-bottom: none; }
  .about-meta-k { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
                   color: var(--ink-faint); font-weight: 700; padding-top: 2px; }
  .about-meta-v { color: var(--ink); }
  .about-meta-v a { color: var(--brass); }

  /* ─── Changelog & Known Bugs pages ─── */
  .tabs-row { display: inline-flex; gap: 4px; padding: 4px;
              background: var(--paper-elev); border: 1px solid var(--brd);
              border-radius: 7px; margin-bottom: 8px; }
  .tab-btn { font-family: var(--mono); font-size: 12px; font-weight: 700;
             letter-spacing: 0.08em; text-transform: uppercase;
             padding: 9px 18px; border-radius: 5px; border: none;
             background: transparent; color: var(--ink-dim); cursor: pointer;
             transition: background 140ms ease, color 140ms ease; }
  .tab-btn:hover { color: var(--ink); }
  .tab-btn.active { background: var(--felt); color: var(--paper-raised); }
  .tab-empty { max-width: 820px; margin: 0 auto; padding: 56px 32px;
               text-align: center; background: var(--paper-elev);
               border: 1px dashed var(--brd-strong); border-radius: 8px; }
  .tab-empty-title { font-family: var(--serif); font-style: italic; font-weight: 400;
                     font-size: 30px; color: var(--ink); margin: 0 0 12px;
                     letter-spacing: -0.01em; }
  .tab-empty-body { font-family: var(--mono); font-size: 13px; line-height: 1.7;
                    color: var(--ink-dim); margin: 0; }
  .tab-empty-body a { color: var(--brass); border-bottom: 1px dashed var(--brass); }
  .cl-track { max-width: 900px; margin: 0 auto; }
  .cl-release { display: grid; grid-template-columns: 140px 1fr; gap: 32px; }
  @media (max-width: 720px) { .cl-release { grid-template-columns: 1fr; gap: 12px; } }
  .cl-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
             position: sticky; top: 96px; height: fit-content; }
  @media (max-width: 720px) { .cl-meta { flex-direction: row; align-items: center;
                                          position: static; } }
  .cl-version { font-family: var(--serif); font-style: italic; font-weight: 400;
                font-size: 40px; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
  .cl-current { font-family: var(--mono); font-size: 9.5px; font-weight: 700;
                letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-raised);
                background: var(--felt); padding: 4px 10px; border-radius: 3px; }
  .cl-summary { font-size: 15px; line-height: 1.7; color: var(--ink-dim);
                margin: 0 0 28px; max-width: 64ch; letter-spacing: 0.005em; }
  .cl-group { margin-bottom: 28px; }
  .cl-group-title { font-family: var(--mono); font-size: 11px; font-weight: 700;
                    letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass);
                    margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--brd); }
  .cl-list { list-style: none; margin: 0; padding: 0; display: flex;
             flex-direction: column; gap: 14px; }
  .cl-list li { font-size: 13.5px; line-height: 1.65; color: var(--ink-dim);
                padding-left: 18px; position: relative; max-width: 64ch; }
  .cl-list li::before { content: ''; position: absolute; left: 3px; top: 9px;
                        width: 5px; height: 5px; border-radius: 50%; background: var(--felt); }
  .cl-list li strong { color: var(--ink); font-weight: 700; }
  .cl-foot { max-width: 900px; margin: 40px auto 0; font-family: var(--mono);
             font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0.01em; }
  .cl-foot a { color: var(--brass); border-bottom: 1px dashed var(--brass); }

  .bug-list { max-width: 820px; margin: 0 auto; display: flex;
              flex-direction: column; gap: 0; border-top: 1px solid var(--brd); }
  .bug-item { display: grid; grid-template-columns: auto 1fr auto; gap: 18px;
              align-items: start; padding: 24px 0; border-bottom: 1px solid var(--brd); }
  .bug-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--act-raise);
             margin-top: 6px; box-shadow: 0 0 0 4px rgba(178,58,40,0.14); }
  .bug-title { font-family: var(--serif); font-style: italic; font-weight: 400;
               font-size: 22px; line-height: 1.15; margin: 0 0 8px; color: var(--ink);
               letter-spacing: -0.01em; }
  .bug-body { font-family: var(--mono); font-size: 12.5px; line-height: 1.65;
              color: var(--ink-dim); margin: 0; max-width: 60ch; letter-spacing: 0.005em; }
  .bug-status { font-family: var(--mono); font-size: 9.5px; font-weight: 700;
                letter-spacing: 0.18em; text-transform: uppercase; color: var(--act-bet75);
                white-space: nowrap; padding-top: 4px; }

  /* ─── Engine / Under the hood page ─── */

  .eng-section { max-width: 880px; margin: 0 auto; }
  .eng-tag { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
             letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass);
             margin-bottom: 14px; }
  .eng-title { font-family: var(--serif); font-style: italic; font-weight: 400;
               font-size: clamp(32px, 4vw, 48px); line-height: 1.05;
               margin: 0 0 22px; letter-spacing: -0.02em; color: var(--ink); }
  .eng-body { color: var(--ink-dim); font-size: 15px; line-height: 1.75;
              margin: 0 0 18px; max-width: 64ch; letter-spacing: 0.005em; }
  .eng-body strong { color: var(--ink); font-weight: 700; }
  .eng-body code { font-family: var(--mono); font-size: 13.5px;
                    background: rgba(168,122,44,0.10); padding: 1px 6px;
                    border-radius: 3px; color: var(--brass); }
  .eng-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
               margin: 24px 0 28px; max-width: 640px; }
  @media (max-width: 540px) { .eng-stats { grid-template-columns: 1fr; } }
  .eng-stat { padding: 22px 24px; background: var(--paper-raised);
              border: 1px solid var(--brd); border-radius: 6px;
              display: flex; flex-direction: column; gap: 8px; }
  .eng-stat-amt { font-family: var(--serif); font-style: italic; font-size: 36px;
                  line-height: 1; color: var(--felt); font-weight: 400;
                  letter-spacing: -0.02em; }
  .eng-stat-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
                    color: var(--ink-dim); }
  .eng-formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
                  margin-top: 24px; }
  @media (max-width: 880px) { .eng-formats { grid-template-columns: 1fr; } }
  .eng-format { padding: 22px 22px 24px; background: var(--paper-raised);
                border: 1px solid var(--brd); border-radius: 6px;
                display: flex; flex-direction: column; gap: 10px; position: relative; }
  .eng-format-feat { border-color: var(--brass);
                     box-shadow: 0 0 0 1px var(--brass), 0 8px 24px rgba(168,122,44,0.08); }
  .eng-format-badge { position: absolute; top: -10px; right: 16px;
                      background: var(--brass); color: var(--paper);
                      font-family: var(--mono); font-size: 9px; font-weight: 700;
                      letter-spacing: 0.2em; text-transform: uppercase;
                      padding: 4px 9px; border-radius: 3px; }
  .eng-format-name { font-family: var(--mono); font-size: 18px; font-weight: 700;
                     letter-spacing: 0.02em; color: var(--ink); }
  .eng-format-feat .eng-format-name { color: var(--brass); }
  .eng-format-size { font-family: var(--mono); font-size: 11px; font-weight: 600;
                     letter-spacing: 0.12em; text-transform: uppercase;
                     color: var(--ink-faint); }
  .eng-format-desc { font-size: 13px; line-height: 1.65; color: var(--ink-dim);
                     letter-spacing: 0.005em; }

  /* ─── Pipeline deep-dive page (existing) ─── */
  .pp-band { padding: 88px 0; }
  .pp-band-alt { background: var(--paper-elev); }
  .pp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  @media (max-width: 900px) { .pp-row { grid-template-columns: 1fr; gap: 40px; } }
  .pp-row-rev .pp-visual { order: 2; }
  @media (max-width: 900px) { .pp-row-rev .pp-visual { order: 0; } }
  .pp-visual { display: grid; place-items: center; }
  .pp-visual-inner { background: var(--paper-raised); border: 1px solid var(--brd);
                     border-radius: 8px; padding: 48px 32px; min-height: 280px;
                     display: grid; place-items: center; width: 100%; }
  .pp-tag { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .pp-num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.24em;
            color: var(--brass); font-weight: 700; }
  .pp-text h3 { font-family: var(--serif); font-style: italic; font-size: 44px;
                line-height: 1.05; margin: 0 0 22px; font-weight: 400;
                letter-spacing: -0.015em; color: var(--ink); }
  .pp-body p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.7;
               margin: 0 0 16px; max-width: 56ch; }
  .bullet-list { margin: 12px 0 16px; padding: 0; list-style: none; }
  .bullet-list li { color: var(--ink-dim); font-size: 14px; line-height: 1.7;
                    padding-left: 22px; position: relative; max-width: 60ch; }
  .bullet-list li::before { content: ''; position: absolute; left: 6px; top: 13px;
                            width: 6px; height: 6px; background: var(--felt);
                            border-radius: 50%; }
  .bullet-list li strong { color: var(--ink); font-weight: 700; }

  /* (Legacy .pp-handoff styles kept for now — not rendered, but preserved
     so old standalone bundles still parse cleanly. New design uses .hs-* classes.) */
  .pp-handoff-section { padding: 96px 0 120px; }
  .pp-handoff { background: var(--ink); color: var(--paper-raised);
                border-radius: 10px; padding: 64px 56px; text-align: center; }
  .pp-handoff-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em;
                        text-transform: uppercase; color: var(--brass); font-weight: 700; }
  .pp-handoff h3 { font-family: var(--serif); font-style: italic; font-size: 52px;
                   line-height: 1.05; margin: 14px 0 18px; font-weight: 400;
                   letter-spacing: -0.02em; color: var(--paper-raised); }
  .pp-handoff > p { color: #b8ac85; font-size: 15px; line-height: 1.7;
                    max-width: 60ch; margin: 0 auto 40px; }
  .pp-flow { display: flex; align-items: center; justify-content: center;
             gap: 18px; flex-wrap: wrap; }
  .pp-flow-node { background: #2a2418; border: 1px solid #3a3220; border-radius: 6px;
                  padding: 18px 22px; min-width: 180px; text-align: left; }
  .pp-flow-node.pp-flow-disk { background: #1f1c10; border-color: var(--brass); }
  .pp-flow-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em;
                   color: var(--brass); font-weight: 700; margin-bottom: 6px; }
  .pp-flow-body { font-family: var(--mono); font-size: 12px; line-height: 1.7;
                  color: #d8cca8; }
  .pp-flow-body code { color: var(--paper-raised); font-size: 11px; }
  .pp-flow-arrow { font-family: var(--mono); font-size: 22px; color: var(--brass);
                   font-weight: 400; }
  @media (max-width: 700px) {
    .pp-flow { flex-direction: column; }
    .pp-flow-arrow { transform: rotate(90deg); }
  }

  /* ─── Hardware page ─── */
  .hw-grid { display: grid; gap: 20px; }
  .hw-card { background: var(--paper-raised); border: 1px solid var(--brd);
             border-radius: 8px; padding: 32px 32px 30px; }
  .hw-mark { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
             color: var(--brass); font-weight: 700; margin-bottom: 8px; }
  .hw-solver .hw-mark { color: var(--felt); }
  .hw-card h3 { font-family: var(--serif); font-style: italic; font-size: 32px;
                line-height: 1.05; margin: 0 0 14px; font-weight: 400;
                letter-spacing: -0.01em; color: var(--ink); }
  .hw-lede { color: var(--ink-dim); font-size: 14px; line-height: 1.7; margin: 0 0 22px;
             max-width: 64ch; }
  .hw-spec { display: grid; gap: 0; border-top: 1px solid var(--brd); }
  .hw-row { display: grid; grid-template-columns: 100px 1fr; gap: 16px; padding: 11px 0;
            border-bottom: 1px solid var(--brd); font-size: 13px; line-height: 1.55; }
  .hw-row .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
               text-transform: uppercase; color: var(--ink-faint); font-weight: 700;
               padding-top: 2px; }
  .hw-row .v { color: var(--ink-dim); }
  .hw-row .v strong { color: var(--ink); font-weight: 700; }
  .hw-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
              margin-top: 4px; }
  @media (max-width: 800px) { .hw-tiers { grid-template-columns: 1fr; } }
  .hw-tier { background: var(--paper); border: 1px solid var(--brd); border-radius: 5px;
             padding: 18px 18px 16px; }
  .hw-tier.feat { border-color: var(--felt); background: var(--paper-elev); }
  .hw-tier-head { display: flex; justify-content: space-between; align-items: baseline;
                  margin-bottom: 8px; }
  .hw-tier-name { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
                  text-transform: uppercase; color: var(--ink-dim); font-weight: 700; }
  .hw-tier-amt { font-family: var(--serif); font-style: italic; font-size: 22px;
                  color: var(--felt); font-weight: 400; }
  .hw-tier.feat .hw-tier-amt { color: var(--brass); }
  .hw-tier p { color: var(--ink-dim); font-size: 12px; line-height: 1.6; margin: 0; }

  /* Storage matrix — depth × coverage */
  .hw-storage-matrix { display: grid; grid-template-columns: 1.2fr 1fr 1fr;
                        margin-top: 8px; border: 1px solid var(--brd); border-radius: 6px;
                        overflow: hidden; background: var(--paper); }
  @media (max-width: 760px) {
    .hw-storage-matrix { grid-template-columns: 1fr; }
    .hw-storage-matrix .hsm-corner,
    .hw-storage-matrix .hsm-head:not(.hsm-corner) { display: none; }
    .hw-storage-matrix .hsm-row-label { padding-top: 16px;
                                          border-top: 1px solid var(--brd-strong); }
    .hw-storage-matrix .hsm-row-label:first-child { border-top: none; }
    .hw-storage-matrix .hsm-cell::before {
      content: attr(data-mobile-label); display: block;
      font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--ink-faint); font-weight: 700;
      margin-bottom: 6px;
    }
  }
  .hsm-head { background: var(--paper-elev); padding: 12px 16px;
              font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
              text-transform: uppercase; color: var(--ink-dim); font-weight: 700;
              border-bottom: 1px solid var(--brd); border-right: 1px solid var(--brd); }
  .hsm-head:last-child { border-right: none; }
  .hsm-corner { background: var(--paper-inset); }
  .hsm-row-label { padding: 16px 16px;
                    font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
                    text-transform: uppercase; font-weight: 700; color: var(--ink);
                    background: var(--paper-elev);
                    border-right: 1px solid var(--brd); border-top: 1px solid var(--brd);
                    display: flex; align-items: center; }
  .hsm-cell { padding: 16px 18px;
               border-right: 1px solid var(--brd); border-top: 1px solid var(--brd);
               display: flex; flex-direction: column; gap: 4px; }
  .hsm-cell:nth-child(3n) { border-right: none; }
  .hsm-cell-em { background: linear-gradient(180deg, rgba(168,122,44,0.08), transparent 80%); }
  .hsm-amt { font-family: var(--serif); font-style: italic; font-size: 28px;
              line-height: 1; color: var(--felt); font-weight: 400; letter-spacing: -0.01em; }
  .hsm-cell-em .hsm-amt { color: var(--brass); }
  .hsm-note { font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
               letter-spacing: 0.01em; line-height: 1.5; }

  /* Storage totals — full-coverage bar visualisation */
  .hw-storage-totals { margin-top: 22px; padding: 22px 24px 24px;
                        background: var(--paper-elev); border: 1px solid var(--brd);
                        border-left: 3px solid var(--brass);
                        border-radius: 0 6px 6px 0; }
  .hst-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
                  text-transform: uppercase; color: var(--brass); font-weight: 700;
                  margin-bottom: 16px; }
  .hst-rows { display: flex; flex-direction: column; gap: 10px; }
  .hst-row { display: grid; grid-template-columns: 200px 1fr 80px;
              align-items: center; gap: 16px; font-family: var(--mono);
              font-size: 12.5px; color: var(--ink-dim); }
  @media (max-width: 640px) {
    .hst-row { grid-template-columns: 1fr 70px; }
    .hst-row .hst-bar { grid-column: 1 / -1; order: 3; }
  }
  .hst-label { letter-spacing: 0.02em; }
  .hst-label strong { color: var(--ink); font-weight: 700; }
  .hst-bar { display: block; height: 10px; background: var(--paper-inset);
              border-radius: 2px; overflow: hidden; position: relative; }
  .hst-bar-fill { display: block; height: 100%; background: var(--felt);
                   border-radius: 2px; }
  .hst-bar-fill-add   { background: repeating-linear-gradient(45deg,
                          var(--brass), var(--brass) 6px,
                          rgba(168,122,44,0.6) 6px, rgba(168,122,44,0.6) 12px); }
  .hst-bar-fill-total { background: linear-gradient(90deg, var(--felt) 0%,
                          var(--felt) 67%, var(--brass) 67%, var(--brass) 100%); }
  .hst-amt { font-family: var(--serif); font-style: italic; font-size: 20px;
              color: var(--ink); font-weight: 400; text-align: right;
              letter-spacing: -0.01em; }
  .hst-row-total { padding-top: 10px; margin-top: 4px;
                    border-top: 1px dashed var(--brd-strong); }
  .hst-row-total .hst-label strong,
  .hst-row-total .hst-amt { color: var(--brass); }
  .hst-row-total .hst-label { color: var(--ink); font-weight: 700; }
  .hst-foot { margin: 16px 0 0; font-family: var(--mono); font-size: 12px;
               line-height: 1.65; color: var(--ink-dim); letter-spacing: 0.005em; }

  footer.footer { background: var(--ink); color: var(--paper-raised);
                  padding: 56px 0 40px; }
  .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px;
               padding-bottom: 40px; border-bottom: 1px solid rgba(251,247,234,0.1); }
  @media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
  .foot-grid .fmain p { font-size: 12px; color: rgba(251,247,234,0.5);
                        line-height: 1.7; max-width: 40ch; margin: 16px 0 0; }
  .foot-col h5 { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
                  color: rgba(251,247,234,0.4); font-weight: 700; margin: 0 0 18px; }
  .foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .foot-col ul li { font-size: 12.5px; color: rgba(251,247,234,0.7);
                    letter-spacing: 0.02em; }
  .foot-col ul li:hover { color: var(--brass); }
  .foot-meta { display: flex; align-items: center; justify-content: space-between;
               padding-top: 24px; font-size: 11px; color: rgba(251,247,234,0.4);
               letter-spacing: 0.06em; }

  /* ─────────────────────────────────────────────
     Mobile fixes (≤ 760px)
     ───────────────────────────────────────────── */
  @media (max-width: 760px) {
    :root { --pad-x: 18px; }
    body { font-size: 13px; }

    /* Topbar — hide nav tabs + version chip, keep brand + primary CTA */
    .topbar-inner { gap: 12px; height: 56px; }
    .nav-tabs { display: none; }
    .top-version { display: none; }
    .brand .wm { font-size: 14px; letter-spacing: 0.18em; }
    .top-right { gap: 8px; }
    .top-right .btn-ghost { display: none; }
    .btn { height: 34px; padding: 0 12px; font-size: 11px; }
    .btn-lg { height: 42px; padding: 0 18px; font-size: 12px; }

    /* Section scaffolding — stack head, shrink padding */
    section { padding: 56px 0; }
    section.tight { padding: 40px 0; }
    .section-head { grid-template-columns: 1fr; gap: 16px;
                    margin-bottom: 32px; }
    .section-head h2 { font-size: 36px; max-width: none; }
    .section-head .sub { font-size: 13px; }

    /* Hero */
    .hero { padding: 32px 0 56px; }
    .hero-headline { font-size: 36px; line-height: 1.1; margin-top: 20px;
                     max-width: none; }
    .hero-headline em { font-size: 0.36em; vertical-align: 0.25em; }
    .hero-lede { font-size: 14px; margin: 20px 0 24px; }
    .hero-cta { gap: 10px; }
    .hero-cta .ws-note { margin-left: 0; flex-basis: 100%; }

    /* Hero bundle tag */
    .hero-bundle-tag { gap: 8px; margin-bottom: 24px; }
    .bt-chip { padding: 8px 12px 9px; font-size: 11px; }
    .bt-plus { font-size: 18px; }
    .bt-pricetag { font-size: 10px; padding: 6px 10px;
                   width: 100%; text-align: center; }

    /* Hero split flow */
    .hero-split { margin-top: 32px; gap: 16px; }
    .split-head { padding: 11px 14px; font-size: 9.5px; letter-spacing: 0.14em; }
    .console { padding: 16px 16px; font-size: 11px; line-height: 1.6; }
    .console .line { gap: 8px; flex-wrap: wrap; }
    .console .ts { font-size: 10px; }
    .rc-grid-wrap { padding: 12px; min-height: 0; }
    .rc-grid { max-width: 100%; }
    .rc-cell { font-size: 7.5px; }
    .rc-toolbar { padding: 10px 12px; font-size: 10px; gap: 8px;
                  flex-wrap: wrap; }
    .rc-legend { padding: 10px 12px; font-size: 10px;
                 flex-wrap: wrap; gap: 10px; }

    /* How it works */
    .hiw { gap: 12px; }
    .hiw-step { padding: 24px 22px; min-height: 0; }
    .hiw-step h3 { font-size: 24px; }

    /* Features blocks */
    .features-block { padding: 40px 0; gap: 24px; }
    .features-block h3.product { font-size: 32px; }
    .feature { padding: 20px 20px 22px; }

    /* Demo */
    .demo-top { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
    .demo-top .url { font-size: 9.5px; }
    .demo-sidebar, .demo-aside { padding: 16px 14px; }
    .demo-main { padding: 18px; }
    .stat .sv { font-size: 18px; }

    /* Pricing */
    .pricing { gap: 12px; }
    .plan { padding: 24px 22px; }
    .plan h3.ph { font-size: 28px; }
    .plan .price .amt { font-size: 32px; }

    /* FAQ */
    .faq-item { padding: 18px 0; }
    .faq-item .q { font-size: 13.5px; }

    /* Waitlist */
    .waitlist { padding: 56px 0; }
    .waitlist h2 { font-size: 36px; max-width: none; }
    .waitlist .lede { font-size: 13px; margin-bottom: 24px; }
    .wl-form { flex-direction: column; gap: 10px; }
    .wl-form input, .wl-form button { height: 48px; width: 100%; }
    .wl-cta { width: 100%; justify-content: center; height: 48px; }
    .wl-foot { flex-wrap: wrap; gap: 8px; font-size: 10.5px; }
    .wl-foot .dot { display: none; }

    /* Footer */
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 24px;
                 padding-bottom: 28px; }
    .foot-grid .fmain { grid-column: 1 / -1; }
    .foot-meta { flex-direction: column; gap: 8px;
                 align-items: flex-start; }

    /* Pipeline page */
    .pp-band { padding: 48px 0; }
    .pp-row { gap: 28px; }
    .pp-text h3 { font-size: 30px; margin-bottom: 16px; }
    .pp-body p, .bullet-list li { font-size: 13.5px; }
    .pp-visual-inner { padding: 28px 18px; min-height: 0; }
    .pp-handoff-section { padding: 56px 0 72px; }
    .pp-handoff { padding: 40px 24px; border-radius: 8px; }
    .pp-handoff h3 { font-size: 34px; }
    .pp-handoff > p { font-size: 13.5px; margin-bottom: 28px; }
    .pp-flow-node { min-width: 0; width: 100%; padding: 16px 18px; }

    /* Pipeline cards (homepage) */
    .pipe-step { padding: 22px 18px 20px; }
    .pipe-step h4 { font-size: 20px; }
    .pipe-diagram { height: auto; min-height: 140px; padding: 16px 12px; }
    .pipe-detail-grid { margin-top: 24px; gap: 20px; }

    /* Hardware page */
    .hw-card { padding: 24px 22px; }
    .hw-card h3 { font-size: 26px; }
    .hw-lede { font-size: 13.5px; }
    .hw-row { grid-template-columns: 88px 1fr; gap: 12px;
              padding: 10px 0; font-size: 12.5px; }
    .hw-row .k { font-size: 10px; letter-spacing: 0.12em; }
    .hw-tiers { gap: 10px; }
    .hw-tier { padding: 16px 16px 14px; }

    /* Video */
    .video-meta { flex-direction: column; gap: 8px;
                  align-items: flex-start; padding: 12px 16px; font-size: 10px; }

    /* Lightbox */
    .lb-overlay { padding: 16px; }
    .lb-trigger::after { font-size: 8.5px; padding: 4px 7px;
                         top: 8px; right: 8px; }

    /* Prevent edge overflow on anything stray */
    img, svg, video { max-width: 100%; height: auto; }
  }

  /* Extra-small phones (≤ 380px) */
  @media (max-width: 380px) {
    .hero-headline { font-size: 30px; }
    .section-head h2 { font-size: 30px; }
    .top-right .top-version { display: none; }
    .foot-grid { grid-template-columns: 1fr; }
  }

  /* Global overflow guard */
  html, body { overflow-x: hidden; }

  /* ─── Mobile menu button + drawer ─── */
  .mobile-menu-btn { display: none; width: 36px; height: 36px; padding: 0;
                     background: transparent; border: 1px solid var(--brd-strong);
                     border-radius: 4px; cursor: pointer;
                     flex-direction: column; gap: 4px;
                     align-items: center; justify-content: center; }
  .mobile-menu-btn span { display: block; width: 16px; height: 1.5px;
                          background: var(--ink); border-radius: 1px; }
  .mobile-menu { display: none; }
  /* Swap the 8-tab nav for a hamburger drawer once it no longer fits the bar */
  @media (max-width: 1260px) {
    .nav-tabs { display: none; }
    .top-version { display: none; }
    .mobile-menu-btn { display: inline-flex; }
    .mobile-menu { display: block; position: absolute; left: 0; right: 0; top: 100%;
                   background: var(--paper-raised); border-bottom: 1px solid var(--brd);
                   box-shadow: 0 12px 24px rgba(11,12,16,0.08);
                   padding: 16px 0 22px; }
    .mobile-menu .container { display: flex; flex-direction: column; gap: 4px; }
    .mobile-menu .mm-link { display: block; padding: 12px 4px;
                            font-size: 14px; color: var(--ink); font-weight: 600;
                            letter-spacing: 0.04em;
                            border-bottom: 1px solid var(--brd); }
    .mobile-menu .mm-link.active { color: var(--felt); }
    .mobile-menu .mm-cta { margin-top: 14px; align-self: flex-start; }
  }
  @media (max-width: 760px) {
    .hide-on-mobile { display: none !important; }
  }
  .topbar { position: sticky; }
  /* ─── Pricing comparison table ─── */
  .cmp-wrap { margin-top: 64px; }
  .cmp-eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
                 color: var(--brass); font-weight: 700; }
  .cmp-title { font-family: var(--serif); font-style: italic; font-size: 40px;
               line-height: 1; margin: 12px 0 28px; font-weight: 400;
               letter-spacing: -0.015em; color: var(--ink); }
  .cmp-table { background: var(--paper-raised); border: 1px solid var(--brd);
               border-radius: 8px; overflow: hidden; }
  .cmp-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr;
             border-bottom: 1px solid var(--brd); }
  .cmp-row:last-child { border-bottom: none; }
  .cmp-cell { padding: 16px 20px; font-size: 13px; line-height: 1.5;
              border-right: 1px solid var(--brd); color: var(--ink-dim);
              display: flex; align-items: center; }
  .cmp-cell:last-child { border-right: none; }
  .cmp-head { background: var(--paper-elev); }
  .cmp-head .cmp-cell { padding: 22px 20px; align-items: flex-end;
                        flex-direction: column; gap: 4px; min-height: 96px;
                        justify-content: flex-end; position: relative; }
  .cmp-head .cmp-feat-head { align-items: flex-start; justify-content: flex-end; }
  .cmp-feat-head { font-family: var(--mono); font-size: 11px;
                   letter-spacing: 0.18em; text-transform: uppercase;
                   color: var(--ink-faint); font-weight: 700; }
  .cmp-plan-head { position: relative; }
  .cmp-plan-name { font-family: var(--mono); font-size: 11px;
                   letter-spacing: 0.22em; text-transform: uppercase;
                   color: var(--felt); font-weight: 700; }
  .cmp-plan-price { font-family: var(--serif); font-style: italic;
                    font-size: 28px; color: var(--ink); font-weight: 400;
                    line-height: 1; margin-top: 2px; }
  .cmp-plan-feat { background: var(--paper); }
  .cmp-plan-feat .cmp-plan-name { color: var(--brass); }
  .cmp-plan-tag { position: absolute; top: 10px; right: 12px;
                  font-family: var(--mono); font-size: 9px;
                  letter-spacing: 0.2em; text-transform: uppercase;
                  color: var(--brass); font-weight: 700; }
  .cmp-plan-head { display: flex; flex-direction: column;
                   align-items: flex-start; gap: 4px; }
  .cmp-feat { color: var(--ink); font-weight: 500; font-size: 13px; }
  .cmp-val { color: var(--ink-dim); font-size: 13px; justify-content: center;
             text-align: center; }
  .cmp-val-feat { background: rgba(168,122,44,0.05); }
  .cmp-check { color: var(--felt); font-weight: 700; font-size: 16px; }
  .cmp-dash { color: var(--ink-faint); font-weight: 700; }
  @media (max-width: 760px) {
    .cmp-wrap { margin-top: 40px; }
    .cmp-title { font-size: 28px; margin-bottom: 18px; }
    .cmp-row { grid-template-columns: 1.4fr 1fr 1fr; }
    .cmp-cell { padding: 12px 10px; font-size: 11.5px; }
    .cmp-head .cmp-cell { padding: 14px 10px; }
    .cmp-plan-price { font-size: 20px; }
    .cmp-plan-name { font-size: 9.5px; letter-spacing: 0.18em; }
    .cmp-plan-tag { font-size: 8px; }
    .cmp-feat { font-size: 11.5px; }
    .cmp-val { font-size: 11.5px; }
    .cmp-feat-head { font-size: 9.5px; }
  }

  /* ════════════════════════════════════════════════════════════
     DOCUMENTATION SECTION
     ════════════════════════════════════════════════════════════ */
  :root { --docs-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif; }

  .docs-page { font-family: var(--docs-sans); color: var(--ink); }

  .docs-shell { display: grid;
    grid-template-columns: 264px minmax(0, 1fr) 224px;
    max-width: 1560px; margin: 0 auto; align-items: start; }
  .docs-shell-landing { grid-template-columns: 272px minmax(0, 1fr); }

  /* ── Sidebar ── */
  .docs-side { position: sticky; top: 64px; align-self: start;
    height: calc(100vh - 64px); overflow-y: auto;
    background: var(--paper-elev); border-right: 1px solid var(--brd);
    padding: 22px 14px 56px; }
  .docs-side::-webkit-scrollbar { width: 8px; }
  .docs-side::-webkit-scrollbar-thumb { background: var(--brd); border-radius: 8px; }
  .docs-side-head { display: none; align-items: center; justify-content: space-between;
    padding: 4px 8px 14px; }
  .docs-side-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
  .docs-side-x { background: none; border: none; font-size: 16px; color: var(--ink-dim);
    cursor: pointer; padding: 4px; }

  .docs-search { display: flex; align-items: center; gap: 8px; margin: 0 6px 18px;
    padding: 8px 10px; background: var(--paper-raised); border: 1px solid var(--brd);
    border-radius: 8px; color: var(--ink-faint); }
  .docs-search input { flex: 1; min-width: 0; border: none; background: none; outline: none;
    font-family: var(--docs-sans); font-size: 13.5px; color: var(--ink); }
  .docs-search input::placeholder { color: var(--ink-faint); }
  .docs-search-kbd { font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
    border: 1px solid var(--brd); border-radius: 4px; padding: 0 5px; line-height: 16px; }

  .docs-grp { margin-bottom: 4px; }
  .docs-grp-btn { display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: none; padding: 8px 10px; cursor: pointer;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--ink-faint); font-weight: 700; }
  .docs-grp-btn:hover { color: var(--ink-dim); }
  .docs-grp-caret { font-size: 14px; transition: transform 160ms ease; opacity: 0.7; }
  .docs-grp-caret.open { transform: rotate(90deg); }
  .docs-grp-list { display: grid; gap: 1px; padding: 2px 0 10px; }
  .docs-link { display: block; padding: 7px 12px 7px 16px; border-radius: 7px;
    font-size: 13.5px; line-height: 1.35; color: var(--ink-dim);
    border-left: 2px solid transparent; margin-left: 4px; transition: background 120ms ease, color 120ms ease; }
  .docs-link:hover { background: var(--paper-raised); color: var(--ink); }
  .docs-link.active { color: var(--brass); font-weight: 600;
    border-left-color: var(--brass); background: var(--paper-raised); }

  /* ── Main column ── */
  .docs-main { min-width: 0; padding: 0 clamp(24px, 3vw, 52px); }
  .docs-article { max-width: 1000px; margin: 0 auto; padding: 44px 0 80px; }
  /* Prose keeps a comfortable reading measure; tables (and code) use the full column */
  .docs-article > * { max-width: 768px; }
  .docs-article > .docs-table-wrap,
  .docs-article > .codeblock { max-width: 100%; }

  .docs-bc { font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em;
    color: var(--ink-faint); display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    margin-bottom: 22px; }
  .docs-bc a:hover { color: var(--brass); }
  .docs-bc .sep { opacity: 0.55; }
  .docs-bc-cur { color: var(--ink-dim); }

  .docs-h1 { font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(38px, 4.6vw, 52px); line-height: 1.04; letter-spacing: -0.02em;
    margin: 0 0 26px; color: var(--ink); text-wrap: balance; }

  .docs-article h2 { font-family: var(--docs-sans); font-weight: 650; font-size: 27px;
    letter-spacing: -0.012em; line-height: 1.2; margin: 50px 0 14px; color: var(--ink);
    scroll-margin-top: 88px; }
  .docs-article h3 { font-family: var(--docs-sans); font-weight: 650; font-size: 18.5px;
    letter-spacing: -0.005em; margin: 34px 0 10px; color: var(--ink); scroll-margin-top: 88px; }
  .docs-article h4 { font-family: var(--docs-sans); font-weight: 650; font-size: 15.5px;
    letter-spacing: 0.01em; margin: 26px 0 8px; color: var(--ink); scroll-margin-top: 88px; }
  .docs-article p { font-size: 17px; line-height: 1.72; color: var(--ink-dim);
    margin: 0 0 18px; text-wrap: pretty; }
  .docs-lede { font-size: 20.5px !important; line-height: 1.6 !important;
    color: var(--ink) !important; margin-bottom: 26px !important; font-weight: 420; }
  .docs-article ul, .docs-article ol { font-size: 17px; line-height: 1.7;
    color: var(--ink-dim); padding-left: 22px; margin: 0 0 18px; }
  .docs-article li { margin: 7px 0; padding-left: 4px; }
  .docs-article ul li::marker { color: var(--brass); }
  .docs-article a.lnk { color: var(--brass); border-bottom: 1px solid transparent; }
  .docs-article a.lnk:hover { border-bottom-color: var(--brass); }
  .docs-article strong { color: var(--ink); font-weight: 650; }
  .docs-article em { font-style: italic; }
  .docs-hr { border: none; border-top: 1px solid var(--brd); margin: 28px 0; }

  code.ic { font-family: var(--mono); font-size: 0.84em; background: var(--paper-inset);
    border: 1px solid var(--brd); border-radius: 5px; padding: 1px 6px; color: var(--ink);
    white-space: nowrap; }

  /* ── Callouts ── */
  .callout { display: grid; grid-template-columns: auto 1fr; gap: 13px;
    padding: 16px 18px; border-radius: 12px; margin: 24px 0; border: 1px solid; }
  .callout-ic { display: flex; padding-top: 1px; }
  .callout-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 700; margin-bottom: 6px; }
  .callout-body { font-size: 15.5px; line-height: 1.62; color: var(--ink-dim); }
  .callout-body code.ic { font-size: 0.86em; }
  .callout-note { background: color-mix(in srgb, var(--felt) 6%, var(--paper-raised));
    border-color: color-mix(in srgb, var(--felt) 24%, var(--brd)); }
  .callout-note .callout-ic, .callout-note .callout-title { color: var(--felt); }
  .callout-tip { background: color-mix(in srgb, var(--brass) 9%, var(--paper-raised));
    border-color: color-mix(in srgb, var(--brass) 34%, var(--brd)); }
  .callout-tip .callout-ic, .callout-tip .callout-title { color: var(--brass); }
  .callout-warn { background: color-mix(in srgb, #B23A28 7%, var(--paper-raised));
    border-color: color-mix(in srgb, #B23A28 28%, var(--brd)); }
  .callout-warn .callout-ic, .callout-warn .callout-title { color: #9B3322; }

  /* ── Code block ── */
  .codeblock { background: var(--paper-raised); border: 1px solid var(--brd);
    border-radius: 12px; margin: 24px 0; overflow: hidden; }
  .codeblock-head { display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px 9px 16px; background: var(--paper-inset);
    border-bottom: 1px solid var(--brd); }
  .codeblock-dots { display: inline-flex; gap: 6px; }
  .codeblock-dots i { width: 9px; height: 9px; border-radius: 50%;
    background: var(--brd-strong); display: block; }
  .codeblock-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
  .codeblock-copy { font-family: var(--mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.04em; color: var(--ink-dim); background: var(--paper-raised);
    border: 1px solid var(--brd); border-radius: 6px; padding: 4px 10px; cursor: pointer;
    transition: all 120ms ease; }
  .codeblock-copy:hover { border-color: var(--brd-strong); color: var(--ink); }
  .codeblock pre { margin: 0; padding: 16px; overflow-x: auto; }
  .codeblock code { font-family: var(--mono); font-size: 13px; line-height: 1.75;
    color: var(--ink); white-space: pre; }

  /* ── Figure ── */
  .figure { margin: 28px 0; }
  .figure-frame { position: relative; border: 1px solid var(--brd); border-radius: 12px;
    aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
    background-color: var(--paper-raised);
    background-image: repeating-linear-gradient(135deg,
      transparent 0, transparent 11px,
      color-mix(in srgb, var(--brd) 55%, transparent) 11px,
      color-mix(in srgb, var(--brd) 55%, transparent) 12px); }
  .figure-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-faint); font-weight: 700;
    background: var(--paper); border: 1px solid var(--brd); border-radius: 6px;
    padding: 7px 14px; }
  .figure-cap { font-size: 13.5px; color: var(--ink-faint); margin-top: 11px;
    line-height: 1.5; }

  /* ── Table ── */
  .docs-table-wrap { margin: 24px 0; overflow-x: auto; border: 1px solid var(--brd);
    border-radius: 12px; }
  .docs-table { width: 100%; border-collapse: collapse; font-size: 15px; }
  .docs-table th { text-align: left; background: var(--paper-inset);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-dim); font-weight: 700; padding: 12px 16px;
    border-bottom: 1px solid var(--brd); }
  .docs-table td { padding: 12px 16px; color: var(--ink-dim);
    border-bottom: 1px solid var(--brd); }
  /* Only inline code (file paths etc.) may break to fit; text columns size naturally */
  .docs-table td code.ic { white-space: normal; overflow-wrap: anywhere; }
  .docs-table tr:last-child td { border-bottom: none; }
  .docs-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper-inset) 38%, transparent); }
  .docs-table td:first-child { white-space: nowrap; }
  .docs-table td:first-child code.ic { white-space: normal; }

  /* ── Prev / Next ── */
  .docs-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin-top: 60px; padding-top: 32px; border-top: 1px solid var(--brd); }
  .docs-pn a { display: grid; gap: 7px; padding: 16px 18px; border: 1px solid var(--brd);
    border-radius: 12px; background: var(--paper-raised); transition: border-color 120ms ease, transform 120ms ease; }
  .docs-pn a:hover { border-color: var(--brd-strong); }
  .docs-pn .pn-grp { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
  .docs-pn .pn-title { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.3; }
  .docs-pn .pn-next { text-align: right; }

  /* ── Right rail ── */
  .docs-rail { position: sticky; top: 64px; align-self: start;
    height: calc(100vh - 64px); overflow-y: auto; padding: 48px 24px 48px 8px; }
  .docs-rail h6 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-faint); font-weight: 700; margin: 0 0 14px; }
  .docs-rail nav { display: grid; }
  .docs-rail a { display: block; font-size: 13px; line-height: 1.4; color: var(--ink-faint);
    padding: 6px 0 6px 14px; border-left: 2px solid var(--brd); transition: color 120ms ease, border-color 120ms ease; }
  .docs-rail a:hover { color: var(--ink-dim); }
  .docs-rail a.sub { padding-left: 26px; font-size: 12.5px; }
  .docs-rail a.active { color: var(--brass); border-left-color: var(--brass); font-weight: 600; }

  /* ── Landing ── */
  .docs-landing { max-width: 980px; margin: 0 auto; padding: 56px clamp(0px, 2vw, 24px) 90px; }
  .docs-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--brass); font-weight: 700; margin-bottom: 16px; }
  .docs-landing-h1 { margin-bottom: 18px; }
  .docs-landing-lede { font-size: 19px; line-height: 1.62; color: var(--ink-dim);
    max-width: 60ch; margin: 0 0 28px; text-wrap: pretty; }
  .docs-landing-search { display: flex; align-items: center; gap: 10px; max-width: 460px;
    padding: 13px 16px; background: var(--paper-raised); border: 1px solid var(--brd);
    border-radius: 10px; color: var(--ink-faint); margin-bottom: 52px; }
  .docs-landing-search input { flex: 1; min-width: 0; border: none; background: none; outline: none;
    font-family: var(--docs-sans); font-size: 15px; color: var(--ink); }
  .docs-landing-search input::placeholder { color: var(--ink-faint); }

  .docs-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .docs-card { position: relative; display: block; padding: 26px 26px 24px;
    background: var(--paper-raised); border: 1px solid var(--brd); border-radius: 14px;
    transition: border-color 140ms ease, transform 140ms ease; }
  .docs-card:hover { border-color: var(--brd-strong); transform: translateY(-2px); }
  .docs-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .docs-card-glyph { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center;
    background: var(--paper-inset); border: 1px solid var(--brd); border-radius: 11px; }
  .docs-card-count { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
  .docs-card-title { font-family: var(--docs-sans); font-size: 21px; font-weight: 650;
    letter-spacing: -0.01em; color: var(--ink); margin: 0 0 7px; }
  .docs-card-blurb { font-size: 14.5px; line-height: 1.55; color: var(--ink-dim); margin: 0 0 16px; }
  .docs-card-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 1px;
    border-top: 1px solid var(--brd); padding-top: 12px; }
  .docs-card-list li { margin: 0; }
  .docs-card-link { display: block; font-size: 13.5px; color: var(--ink-dim);
    padding: 5px 6px; border-radius: 6px; cursor: pointer; transition: background 120ms ease, color 120ms ease; }
  .docs-card-link:hover { color: var(--brass); background: var(--paper-inset); }
  .docs-card-arrow { position: absolute; top: 26px; right: 26px; color: var(--brass);
    font-size: 18px; opacity: 0; transform: translateX(-4px); transition: all 160ms ease; }
  .docs-card:hover .docs-card-arrow { opacity: 1; transform: none; }

  /* ── Mobile bar + drawer ── */
  .docs-mobilebar { display: none; align-items: center; gap: 14px;
    position: sticky; top: 64px; z-index: 40; padding: 11px 16px;
    background: var(--paper); border-bottom: 1px solid var(--brd); }
  .docs-burger { display: inline-flex; flex-direction: column; gap: 4px; padding: 6px;
    background: none; border: 1px solid var(--brd); border-radius: 7px; cursor: pointer; }
  .docs-burger span { display: block; width: 16px; height: 2px; background: var(--ink); }
  .docs-mobilebar-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-dim); font-weight: 700; }
  .docs-overlay { position: fixed; inset: 0; background: rgba(27, 24, 16, 0.42);
    z-index: 70; backdrop-filter: blur(1px); }

  /* ── Responsive ── */
  @media (max-width: 1199px) {
    .docs-shell { grid-template-columns: 260px minmax(0, 1fr); }
    .docs-rail { display: none; }
  }
  @media (max-width: 899px) {
    .docs-cards { grid-template-columns: 1fr; }
    .docs-shell, .docs-shell-landing { grid-template-columns: 1fr; }
    .docs-mobilebar { display: flex; }
    .docs-side { position: fixed; top: 0; left: 0; height: 100vh; width: 300px; z-index: 80;
      transform: translateX(-100%); transition: transform 240ms ease; padding-top: 18px; }
    .docs-side-open { transform: none; box-shadow: 0 0 50px rgba(27, 24, 16, 0.3); }
    .docs-side-head { display: flex; }
    .docs-article { padding-top: 32px; }
    .docs-landing { padding-top: 40px; }
  }

/* ───────── Prerendered docs additions ───────── */
.nav-tabs a.active { color: var(--brass); }
.docs-foot { background: var(--ink); color: var(--paper-raised); padding: 44px 0 40px; }
.docs-foot .container { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }
.docs-foot .brand { color: var(--paper-raised); font-family: var(--mono); font-weight: 800; }
.docs-foot .brand .wm { font-size: 15px; letter-spacing: 0.02em; }
.docs-foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.docs-foot nav a { font-size: 13px; color: rgba(251,247,234,0.72); }
.docs-foot nav a:hover { color: var(--paper-raised); }
.docs-foot .foot-copy { width: 100%; font-size: 12px; color: rgba(251,247,234,0.42); margin: 6px 0 0; }
/* static pages have no React mobile menu; keep the bar clean on small screens */
@media (max-width: 1260px) { .topbar .mobile-menu-btn { display: none; } }


/* Landing card: stretched-link overlay (avoid nested anchors) */
.docs-card-overlay { position: absolute; inset: 0; z-index: 1; border-radius: 14px; }
.docs-card-list, .docs-card-arrow { position: relative; z-index: 2; }
.docs-card-list .docs-card-link { display: block; }