:root {
  --paper:        #F2EBD8;
  --paper-elev:   #EDE4CB;
  --paper-raised: #FBF7EA;
  --paper-inset:  #E5DCC0;
  --brd:          #D4CBA9;
  --brd-strong:   #B8AC85;
  --ink:          #1B1810;
  --ink-dim:      #383019;
  --ink-faint:    #665C42;
  --felt:         #0E3B2C;
  --felt-mid:     #1B5E47;
  --brass:        #A87A2C;
  --brass-bright: #C2913B;
  --brass-text:   #8A6220;   /* brass for TEXT on light grounds — 4.63:1 on paper */
  --act-fold:     #B8AC85;
  --act-call:     #2A6E48;
  --act-bet33:    #B8862E;
  --act-bet75:    #B5601C;
  --act-raise:    #B23A28;
  --mono:  "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "Newsreader", "Iowan Old Style", Georgia, 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-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
               color: var(--ink-faint); text-transform: uppercase; white-space: nowrap;
               border: 1px solid var(--brd); border-radius: 3px; padding: 3px 7px;
               margin-left: 10px; flex-shrink: 0; }

.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: 64px 0; border-bottom: 1px solid var(--brd); }
section.tight { padding: 44px 0; }
.section-head { display: grid; grid-template-columns: 280px 1fr; gap: 48px;
                margin-bottom: 40px; 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: 32px;
                   line-height: 1.05; margin: 0; font-weight: 400; letter-spacing: -0.02em;
                   color: var(--ink); max-width: 22ch; }

/* ─── Page head ─── the subpage title is a marginal note, not a hero.
   The italic serif display scale belongs to the one Home hero; a page title
   is a label that names the page and then gets out of the content's way. */
.page-head { padding: 36px 0 22px; border-bottom: 1px solid var(--brd); }
.ph-title { font-family: var(--serif); font-style: italic; font-size: 26px;
            font-weight: 400; line-height: 1.25; letter-spacing: -0.01em;
            color: var(--ink); margin: 0 0 8px; max-width: 34ch; }
.ph-lede { color: var(--ink-dim); font-size: 14px; line-height: 1.65;
           max-width: 68ch; margin: 0; }
.d-caption { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6;
              color: var(--ink-dim); max-width: 46ch; }
.d-caption code { font-size: 0.95em; }
/* Schmale Bildschirme: Kurzformen, damit CTA und Beta-Chip neben der Marke passen */
.tv-short, .tw-short { display: none; }
@media (max-width: 620px) {
  .tv-long { display: none; }
  .tv-short { display: inline; }
  .tw-long { display: none; }
  .tw-short { display: inline; }
  /* Below 620px the bar is brand + CTA + hamburger and nothing else. The beta
     state is already stated in the hero, the rail chip and the third Home beat,
     so the topbar chip is what gives way — it was pushing the hamburger off
     the right edge entirely at 360px. */
  .top-version { display: none; }
  .topbar-inner { gap: 8px; }
  .top-right { min-width: 0; flex-shrink: 1; }
  .mobile-menu-btn { flex-shrink: 0; }
}
.top-waitlist { display: inline-flex; }
/* Home: die drei Argumente zwischen Hero und Signup-Band */
.home-case { border-bottom: 1px solid var(--brd); }
.hc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
@media (max-width: 900px) { .hc-grid { grid-template-columns: 1fr; gap: 36px; } }
.hc-beat h2 { font-family: var(--serif); font-style: italic; font-weight: 400;
              font-size: 26px; line-height: 1.2; letter-spacing: -0.01em;
              color: var(--ink); margin: 0 0 12px; }
.hc-beat p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.7;
             color: var(--ink-dim); max-width: 46ch; }
.hc-beat code { font-size: 0.95em; }
.hc-link { display: inline-flex; align-items: center; gap: 7px; margin-right: 18px;
           font-family: var(--mono); font-size: 11.5px; font-weight: 700;
           letter-spacing: 0.1em; text-transform: uppercase; color: var(--felt);
           text-decoration: none; border-bottom: 1px solid var(--brd-strong);
           padding-bottom: 2px; }
.hc-link:hover { color: var(--brass-text); border-bottom-color: var(--brass-text); }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200;
             background: var(--felt); color: var(--paper-raised);
             font-family: var(--mono); font-size: 12px; font-weight: 700;
             letter-spacing: 0.08em; text-transform: uppercase;
             padding: 12px 18px; border-radius: 0 0 4px 0; text-decoration: none; }
.skip-link:focus { left: 0; }
main:focus { outline: none; }

/* Wer Bewegung reduziert haben will, bekommt sie nicht aufgedraengt */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.ph-actions { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap;
              align-items: center; }

/* The .artgto spec is ~4,600px of reference text. It stays on the page in full,
   but folded — a marketing page should not make you scroll a spec to reach the
   next argument. */
.fmt-spec-details > summary { cursor: pointer; font-family: var(--mono);
                              font-size: 12.5px; font-weight: 700;
                              letter-spacing: 0.06em; text-transform: uppercase;
                              color: var(--felt); padding: 14px 0;
                              list-style: none; }
.fmt-spec-details > summary::-webkit-details-marker { display: none; }
.fmt-spec-details > summary::before { content: "+ "; }
.fmt-spec-details[open] > summary::before { content: "− "; }
.fmt-spec-details > summary:hover { color: var(--brass-text); }
.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(38px, 4.9vw, 68px);
                 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; }
.hero-headline .hh-line { display: block; text-wrap: balance; }

/* 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: grid; grid-template-columns: 1fr 1fr; gap: 28px;
                    align-items: start; margin-top: 64px; padding: 8px 0 24px; }
@media (max-width: 760px) { .product-showcase { grid-template-columns: 1fr; gap: 28px; } }
.ps-card { position: relative; display: block; text-decoration: none;
           width: 100%; cursor: pointer; }
@media (max-width: 760px) { .ps-card { max-width: 575px; margin: 0 auto; } }
.ps-shot { border-radius: 10px; overflow: hidden; position: relative;
           border: 1px solid var(--brd-strong);
           aspect-ratio: 1.85;
           box-shadow: 0 14px 36px rgba(14,24,16,0.14);
           background: #0E1014;
           transition: box-shadow 260ms ease; }
.ps-card:hover .ps-shot { box-shadow: 0 22px 48px rgba(14,24,16,0.22); }
.ps-shot img { display: block; width: 100%; height: 100%;
               object-fit: cover; object-position: top center; }
.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, .ps-card:focus-within .ps-cta { opacity: 1; transform: translateY(0); }
.ps-viewer .ps-cta { color: var(--brass-text); }
@media (max-width: 760px) { .ps-cta { opacity: 1; transform: none; } }

/* "Test without download" badge above the Viewer screenshot */
.ps-viewer-wrap { position: relative; width: 100%; }
.ps-viewer-wrap .ps-viewer { width: 100%; max-width: none; }
@media (max-width: 760px) {
  .ps-viewer-wrap { max-width: 575px; margin: 0 auto; }
}
@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-text); }
.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-text); }

/* 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-text);
                      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-text); margin-bottom: 10px; }
.bundle-byo-title { font-family: var(--serif); font-style: italic; font-weight: 400;
                    font-size: 26px; line-height: 1.15;
                    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-text); }
.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; }
.bundle-byo-slot-feat { position: relative; background: var(--paper);
                        border: 1.5px solid var(--brass);
                        box-shadow: 0 6px 16px rgba(14,24,16,0.10); }
.bundle-byo-slot-feat:hover { box-shadow: 0 10px 24px rgba(14,24,16,0.10); }
.bundle-byo-slot-feat .bundle-byo-slot-name { color: var(--brass-text); }
.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: rgba(168,122,44,0.10);
                  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-text); padding: 6px 12px;
                      background: var(--paper); border: 1px solid var(--brass);
                      border-radius: 4px; white-space: nowrap; }
.trainer-status-dot { width: 6px; height: 6px; background: var(--brass); }
.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-text); margin-bottom: 8px; }
.trainer-cta-title { font-family: var(--serif); font-style: italic; font-weight: 400;
                     font-size: 26px; line-height: 1.15;
                     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-text); }
.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-text);
                                 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: 1px solid var(--brass);
                        padding: 28px 30px 30px; gap: 12px; }
.feature.feature-wide .ftag { color: var(--brass-text); font-size: 11px; }
.feature.feature-wide h4 { font-family: var(--serif); font-style: italic;
                            font-weight: 400; font-size: 26px; line-height: 1.15;
                            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 12px 40px rgba(14,24,16,0.10); }
.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-text);
              font-weight: 700; }
.plan h3.ph { font-family: var(--serif); font-style: italic; font-size: 26px;
              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: 64px 0;
            border-bottom: none; }
.waitlist h2 { font-family: var(--serif); font-style: italic; font-size: 32px;
               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-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: var(--brass-bright); }
.wl-cta .arr { font-size: 15px; }
.wl-cta { white-space: nowrap; }
.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-text); 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-text); }
.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-text); }
.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-text); }
.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-text); 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-text); }
.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(1160px, 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-text);
                                            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-text);
                        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 > 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-text); 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; }

/* ─── 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-text); 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-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: rgba(168,122,44,0.08); }
.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-text); 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-text); 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-text); }
.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-text); 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-text); 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-text); 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-text); 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-text); }
.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-text); 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-text);
              margin-bottom: 10px; }
.hs-title { font-family: var(--serif); font-style: italic; font-weight: 400;
            font-size: 26px; line-height: 1.15;
            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-text); }

.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-text); background: linear-gradient(180deg, #FBF6E8 0%, var(--paper) 70%); }
.hs-node-viewer { border-color: var(--felt); }
.hs-node-byo    { border-color: var(--brass-text); 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-text);
                      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-text); }
.hs-files li { padding-left: 14px; position: relative; }
.hs-files li::before { content: '•'; position: absolute; left: 2px; top: 0;
                       color: var(--brass-text); 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: 32px; line-height: 1.15; 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-text); }
.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-text); 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: none; }
.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-text); }
.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-text); }
.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-text);
           margin-bottom: 14px; }
.fmt-tag-quiet { color: var(--ink-faint); }
.fmt-title { font-family: var(--serif); font-style: italic; font-weight: 400;
             font-size: 32px; line-height: 1.15;
             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-text); }
.fmt-callout { margin-bottom: 36px; padding: 22px 28px;
                background: var(--paper-elev); border-left: 1px 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-text); }
.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-text); 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-text); }
.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-text); }
.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-text); }
.fmt-spec-ai { background: rgba(168,122,44,0.07);
                padding-left: 22px; padding-right: 22px;
                border-radius: 4px; }
.fmt-spec-ai .fmt-body em { color: var(--brass-text); 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 18px 48px rgba(14,24,16,0.10); }
.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-text);
                              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-text); 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: background 160ms ease, border-color 160ms ease; }
.hero-action:hover {
                      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: rgba(168,122,44,0.08);
             border-color: var(--brass-text); }
.ha-brass .ha-eyebrow { color: var(--brass-text); }
.ha-brass .ha-arr     { color: var(--brass-text); }
.ha-brass:hover { background: rgba(168,122,44,0.16); }

/* Discord */
.ha-discord { background: rgba(88,101,242,0.10);
               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: rgba(88,101,242,0.18); }

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

/* 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: rgba(14,59,44,0.12);
                            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: rgba(14,59,44,0.2); }

/* Viewer subpage — split Test / Download box */
.try-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
             max-width: 1160px; 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: rgba(14,59,44,0.10);
                  transition: transform 180ms ease, background 180ms ease; }
.try-split-half:hover {
                        background: rgba(14,59,44,0.18); }
.try-split-dl { border-color: var(--brass-text);
                background: rgba(168,122,44,0.10); }
.try-split-dl:hover { background: rgba(168,122,44,0.18); }
.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-text); }
.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-text); }

/* Smaller viewer gallery on the subpage */
.viewer-gallery-sm { max-width: 1160px; 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: rgba(88,101,242,0.10);
                border: 1px solid #5865F2;
                border-radius: 6px; max-width: 760px;
                text-decoration: none; cursor: pointer;
                transition: background 160ms ease, border-color 160ms ease; }
.hero-discord:hover { background: rgba(88,101,242,0.14); border-color: #5865F2; }
.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: rgba(168,122,44,0.10);
                      border: 1px solid var(--brass);
                      border-radius: 6px; max-width: 760px;
                      text-decoration: none; cursor: pointer;
                      transition: background 160ms ease, border-color 160ms ease; }
.hero-spec-callout:hover { background: rgba(168,122,44,0.14); border-color: var(--brass-text); }
.hsc-icon { font-size: 28px; line-height: 1; color: var(--brass-text);
             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-text); }
.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-text); 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 6px 18px rgba(14,24,16,0.10);
                  cursor: pointer; text-align: left;
                  font-family: inherit; color: inherit;
                  transition: background 160ms ease, border-color 160ms ease; }
.fmt-jump-card:hover {
                        box-shadow: 0 12px 28px rgba(14,24,16,0.10); }
.fmt-jump-icon { font-size: 26px; line-height: 1; color: var(--brass-text);
                  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-text); }
.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-text);
                  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-text); 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-text); 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-text); }
.bundle-card-dl-free:hover { border-bottom-color: var(--brass-text); }

                text-transform: uppercase; font-family: var(--mono);
                text-decoration: none; white-space: nowrap;
                background: transparent; border: 1px solid var(--brass);
                color: var(--brass-text); 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: 11px;
               font-weight: 700; letter-spacing: 0.24em;
               text-transform: uppercase; color: var(--brass-text);
               margin-bottom: 18px; line-height: 1.05; }
.fh-eyebrow-brass { color: var(--brass-text); }
.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: 32px; line-height: 1.15;
             margin: 0 0 18px; letter-spacing: -0.01em; color: var(--ink);
             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-text); }
.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-text); margin-top: 8px;
            border-bottom: 1px dashed transparent;
            padding-bottom: 2px; transition: border-color 140ms ease; }
.fh-link:hover { border-bottom-color: var(--brass-text); }
.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-text);
                          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 14px 32px rgba(14,24,16,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-text); }
.lib-card-title { font-family: var(--serif); font-style: italic; font-weight: 400;
                   font-size: 26px; line-height: 1.15; 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-text); }
.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-text); 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-text); 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: 1px 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-text); 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,24,16,0.18);
                 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-text); 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-text); }
.rm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brass); }
.rm-dot-soon { background: var(--act-call); }
.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-text); padding: 28px 32px;
                box-shadow: 0 16px 36px rgba(14,24,16,0.10); }
.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-text); margin-bottom: 10px; }
.rm-title { font-family: var(--serif); font-style: italic; font-weight: 400;
            font-size: 26px; line-height: 1.15;
            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-text);
                            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-text); 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-text); 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: 26px; line-height: 1.15;
                         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-text); font-weight: 600; }
.about-block p a { color: var(--brass-text); 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-text); }

/* ─── 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-text); 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-text);
                  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-text); 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-text);
           margin-bottom: 14px; }
.eng-title { font-family: var(--serif); font-style: italic; font-weight: 400;
             font-size: 32px; line-height: 1.15;
             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-text); }
.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-text);
                   box-shadow: 0 8px 24px rgba(14,24,16,0.10); }
.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-text); }
.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-text); font-weight: 700; }
.pp-text h3 { font-family: var(--serif); font-style: italic; font-size: 26px;
              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-text); 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-text); }
.pp-flow-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em;
                 color: var(--brass-text); 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-text);
                 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-text); 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-text); }
.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: rgba(168,122,44,0.08); }
.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-text); }
.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: 1px 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-text); 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-text); }
.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-text); }
.foot-meta { display: flex; align-items: center; justify-content: space-between;
             padding-top: 24px; font-size: 11px; color: rgba(251,247,234,0.62);
             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; }
  .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: 26px; max-width: none; }
  .section-head .sub { font-size: 13px; }

  /* Page head */
  .page-head { padding: 26px 0 18px; }
  .ph-title { font-size: 22px; max-width: none; }
  .ph-lede { font-size: 13.5px; }

  /* 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: 24px; }
  .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: 24px; 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; }
  .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; }

/* ─── Side rail navigation (desktop) — spade slides along the items ─── */
:root { --rail-w: 248px; }
.siderail { display: none; }
@media (min-width: 1261px) {
  .topbar { display: none; }
  body { padding-left: var(--rail-w); }
  .siderail { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0;
              width: var(--rail-w); z-index: 60; background: var(--paper);
              border-right: 1px solid var(--brd); overflow-y: auto; overscroll-behavior: contain; }
  .rail-version { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
                 color: var(--ink-faint); text-transform: uppercase;
                 padding: 0 20px 14px; }
  .rail-brand { display: flex; align-items: center; gap: 11px; padding: 22px 20px 20px;
                border-bottom: 1px solid var(--brd); flex-shrink: 0; }
  .rail-brand .wm { font-family: var(--mono); font-weight: 600; font-size: 14px;
                    letter-spacing: 0.2em; color: var(--ink); white-space: nowrap; }
  .rail-nav { position: relative; display: flex; flex-direction: column;
              padding: 20px 12px 20px 0; flex: 1 0 auto; }
  .rail-spade { position: absolute; left: 15px; top: 0; width: 19px; height: 19px;
                transition: transform 300ms cubic-bezier(.3,.8,.3,1), opacity 180ms ease;
                pointer-events: none; z-index: 1; }
  .rail-spade svg { display: block; }
  .rail-spade-off { opacity: 0; }
  .rail-link { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 46px;
               font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink);
               border-radius: 0 5px 5px 0; white-space: nowrap; }
  .rail-link:hover { color: var(--felt); background: var(--paper-raised); }
  .rail-link.active { color: var(--felt); }
  .rail-link.rail-sub { padding-left: 46px; font-weight: 500; font-size: 12px; color: var(--ink-dim); }
  .rail-link.rail-sub:hover, .rail-link.rail-sub.active { color: var(--felt); }
  .rail-group { padding: 16px 10px 5px 46px; font-size: 9.5px; font-weight: 700;
                letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }
  .rail-sep { height: 1px; background: var(--brd); margin: 12px 18px 12px 46px; }
  .rail-foot { padding: 16px 18px 18px; border-top: 1px solid var(--brd);
               display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
  .rail-foot .btn { justify-content: center; width: 100%; }
  .rail-links { display: flex; gap: 16px; justify-content: center; padding-top: 8px; }
  .rail-links a { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px;
                  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
                  color: var(--ink-dim); }
  .rail-links a:hover { color: var(--felt); }
  /* the rail carries the brand — retire the floating/hero side marks */
  .floating-mark { display: none; }
  .hero-side-mark { display: none; }
  /* docs layout: no topbar on desktop → panels stick to the viewport top */
  .docs-side, .docs-rail { top: 0; height: 100vh; }
}
/* ─── Pricing comparison table ─── */
.cmp-wrap { margin-top: 64px; }
.cmp-eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
               color: var(--brass-text); font-weight: 700; }
.cmp-title { font-family: var(--serif); font-style: italic; font-size: 26px;
             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-text); }
.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-text); 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-text); font-weight: 600;
  border-left-color: var(--brass-text); 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-text); }
.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-text); }
.docs-article a.lnk { color: var(--brass-text); border-bottom: 1px solid transparent; }
.docs-article a.lnk:hover { border-bottom-color: var(--brass-text); }
.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-text); }
.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-text); border-left-color: var(--brass-text); 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-text); 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); }
.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-text); background: var(--paper-inset); }
.docs-card-arrow { position: absolute; top: 26px; right: 26px; color: var(--brass-text);
  font-size: 18px; opacity: 0; transform: translateX(-4px); transition: background 160ms ease, border-color 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-text); }
.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: 700; }
.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; }

/* On dark grounds brass must get lighter, not darker. */
.waitlist,
.footer,
.lb-overlay,
.console,
.rm-card-feat,
.bt-chip-viewer,
.sf-badge,
.pipe-vs-us,
.video-meta,
.ps-shot,
.bundle-card-image,
.viewer-hero,
.viewer-thumb,
.solver-collage,
.demo-sidebar .opt.on,
.rc-toolbar .chip.on,
.docs-foot,
.upgrade-badge { --brass-text: var(--brass-bright); }