/* rf-portfolio.css — RetroFuture portfolio design system.
 *
 * EXTRACTED 2026-07-29 from the inline <style> block of src/raw/index.html. Loaded by both
 * the public homepage and the gated /studio/viz/mechanism page so the ported mechanism
 * sections keep their exact appearance without a second copy of these rules existing.
 * Edit here; there is no other copy.
 */
:root {
  /* ════════════════════════════════════════════════════════════════════════════════
     REVENANT DS — LIGHT SKIN. Re-skinned 2026-07-29 (lane retrofuture-trim-and-boundary).

     Every colour below is lifted from the DS at
       revenant-dev/overlay/ui/custody-proof/styles/revenant-ds.css
     (line numbers are that file's :root block as of 2026-07-29), or from the `revenant`
     THEME BLOCK in corpus/business/forensic-architecture-brief/build_deck.py, which is
     the same token set the slide deck ships. NOTHING HERE IS INVENTED, and this is
     deliberately not a third palette: the site, the brief and the deck now read as one
     system because they are quoting one source.

     "Lighter" means a LIGHTER GROUND AND MORE AIR — never weaker ink. The neo-brutalist
     bones stay: thick borders, hard offset shadows, jewel tones. Lightening is done by
     raising the ground, opening whitespace, and using the jewel tones as ACCENTS rather
     than as fields. Every colour bound to text below measures AA 4.5:1 or better on
     every ground it is actually used on — see the measured table in the lane report.

     TWO DS COLOURS ARE FILL-ONLY AND ARE NOT BOUND TO TEXT ANYWHERE:
       --accent-mid #12A377 (3.08:1)  DS L50: "FILL WEIGHT ONLY, never text"
       --ink-faint  #8AA79C (2.38:1)  DS L44: "DISABLED/PLACEHOLDER ONLY, never a label"
     They are carried as tokens so a future hand reaches for the right one, and they are
     named --fill-* / --disabled-* rather than a colour role so binding one to text reads
     as obviously wrong.
     ════════════════════════════════════════════════════════════════════════════════ */

  /* ── Ground. Lighter than the DS default by using --paper as the page and reserving
        the mint --paper-mid for section contrast, so the page breathes white. ── */
  --bg:#FCFAF4;                 /* DS --paper       L35  light cream ground */
  --surface:#F2F6F3;            /* DS --paper-mid   L36  faintest mint — contrast bands */
  --surface-raised:#FFFDF4;     /* DS --surface-raised L81 brutalist card fill */
  --paper-deep:#E3EDE7;         /* DS --paper-deep  L37  pale sea-mint */

  /* ── Ink. Unchanged in weight: lightening never touches these. ── */
  --text:#0E211B;               /* DS --ink         L41  16.07:1 on --bg */
  --mid:#1D3A31;                /* DS --ink-mid     L42  11.82:1 */
  --muted:#3E5F54;              /* DS --ink-light   L43  6.77:1 — DS FLOOR for recessive */

  /* ── Jewel accents. Used as accents, not as fields. ── */
  --amber:#0A7052;              /* DS --accent      L47  EMERALD 5.83:1, DS-safe as text.
                                   Name kept: ~200 rules already reference --amber, and
                                   renaming them is churn with no forensic benefit. The
                                   VALUE is the DS emerald; nothing here is amber. */
  --amber-50:#D8F2E6;           /* DS --accent-lt   L49  mint WASH — a fill, never text */
  --amber-100:#D8F2E6;          /* same wash; kept so existing rules resolve */
  --green:#06563E;              /* DS --accent-dk   L48  8.35:1 — small type */
  --green-50:#D8F2E6; --green-100:#D8F2E6;
  --blue:#1E4E8C;               /* DS --sienna      L77  SAPPHIRE 7.97:1 */
  --blue-50:#E9EEF6;            /* pale sapphire wash — deck `revenant` nest-3 */
  --violet:#1E4E8C;             /* the DS has no violet; sapphire stands in rather than
                                   inventing a hue outside the system */
  --violet-50:#E9EEF6;
  --teal:#0A7052; --teal-50:#D8F2E6;
  --rose:#7B2233;               /* DS --bronze      L76  GARNET 9.50:1 */
  --rose-50:#F6EAEC;            /* pale garnet wash — deck `revenant` nest-4 */
  --ok:#1A5E33;                 /* DS --color-success-ink L112  7.47:1 */
  --navy:#0E211B;               /* DS --ink — the dark brutalist panel fill */

  /* ── NOT TEXT. Guarded by name. ── */
  --fill-accent-mid:#12A377;    /* DS L50  3.08:1  FILL WEIGHT ONLY */
  --disabled-ink:#8AA79C;       /* DS L44  2.38:1  DISABLED/PLACEHOLDER ONLY */

  /* ── Borders + brutalist geometry. Thick rules, hard offset blocks. ── */
  --border:#9CC4B4;             /* DS --paper-rule  L38  soft mint hairline */
  --border-thick:4px;           /* deck `revenant` border-thick */
  --border-heavy:6px;           /* deck `revenant` border-heavy */
  --shadow-hard:4px 4px 0 var(--text);   /* DS --shadow-hard L100, verbatim */
  --shadow:6px 6px 0 var(--text);        /* heavier block for raised cards */
  --shadow-sm:0 1px 6px rgba(14,33,27,.07); /* DS --shadow-sm L97 (hue → DS ink) */

  --font-d:'Space Grotesk',system-ui,sans-serif;
  --font-b:'Inter',system-ui,sans-serif;
  --font-m:'JetBrains Mono','Courier New',monospace;
  --r:3px;                      /* DS --radius-sm L92 — brutalist, crisp corners */
  --max:1120px; --nav-h:68px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;scroll-padding-top:calc(var(--nav-h) + 12px)}
/* MEASURED 2026-07-28: the nav is position:sticky at 68px and no anchor target carried a
   scroll offset — #skills landed at top=4, #reckon at 0, #formulas at 24, all beneath the
   header. Fixes every in-page anchor, including the nav links retargeted off the retired
   /version-a|b|c.html resume-variant pages. */
[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}
body{font-family:var(--font-b);background:var(--bg);color:var(--text);line-height:1.7;font-size:18px}/* v5 2026-07-29: was 16px. Bigger base; overflow gets fixed by cutting words, never by shrinking type. */
a{color:inherit;text-decoration:none} ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:700;line-height:1.2}
h1{font-size:clamp(2.5rem,6.5vw,4.2rem);letter-spacing:-.02em}
h2{font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.01em}
h3{font-size:1.3rem;font-weight:700}/* v5 2026-07-29: whole scale up one step */
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.section{padding:80px 0} .section+.section{border-top:1px solid var(--border)}

.eyebrow{font-family:var(--font-m);font-size:.875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;margin-bottom:16px}/* v4: was .72rem */
.eyebrow .lucide{width:14px;height:14px}

/* NAV — old RetroFuture logo style */
.nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);height:var(--nav-h)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:100%}
.nav-wordmark{font-family:var(--font-d);font-weight:700;font-size:1.18rem;letter-spacing:-.03em;display:flex;align-items:center;color:var(--text)}
.rf-n{color:var(--text);font-weight:700}
.rf-t{color:var(--amber);font-weight:800;font-style:oblique 8deg;text-shadow:0 2px 14px rgba(16,185,129,.32);display:inline-block}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-link{font-size:.84rem;font-weight:500;padding:6px 12px;border-radius:6px;color:var(--mid);transition:all .15s}
.nav-link:hover{color:var(--text);background:rgba(0,0,0,.04);text-decoration:none}
.nav-link.active{color:var(--amber);background:var(--amber-100)}
.nav-cta{font-size:.82rem;font-weight:600;padding:7px 15px;border-radius:6px;background:var(--text);color:#fff;transition:opacity .15s;margin-left:4px}
.nav-cta:hover{opacity:.82;text-decoration:none}

/* HERO */
.hero{padding:96px 0 80px;position:relative;overflow:hidden;background:var(--bg)}
.hero-carto-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero-inner{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center;position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:.875rem;font-weight:500;color:var(--amber);background:var(--amber-50);border:1px solid rgba(16,185,129,.25);padding:5px 13px;border-radius:100px;margin-bottom:24px}/* v4: was .73rem */
.hero-badge .lucide{width:13px;height:13px}
.hero-h1{margin-bottom:24px} .hero-h1 em{font-style:normal;color:var(--amber)}
.hero-sub{font-size:1.35rem;line-height:1.7;color:var(--mid);max-width:38ch;margin-bottom:40px}/* v5: subtitles want to be BIG. max-width in ch so the measure stays readable as type grows. */
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 28px;border-radius:9px;background:var(--amber);color:#fff;font-size:1.05rem;font-weight:600;transition:all .15s;box-shadow:0 4px 14px rgba(16,185,129,.3)}
.btn-primary:hover{opacity:.9;transform:translateY(-1px);text-decoration:none;box-shadow:0 6px 20px rgba(16,185,129,.35)}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 28px;border-radius:9px;border:1.5px solid var(--border);color:var(--mid);font-size:1.05rem;font-weight:500;transition:all .15s}
.btn-outline:hover{border-color:var(--amber);color:var(--amber);text-decoration:none}
.btn-primary .lucide,.btn-outline .lucide{width:16px;height:16px}
.metrics-strip{display:flex;gap:36px;flex-wrap:wrap}
.metric{display:flex;flex-direction:column;gap:3px}
.metric-val{font-family:var(--font-m);font-size:2.2rem;font-weight:700;color:var(--text);line-height:1}
.metric-val.g{color:var(--amber)} .metric-val.a{color:var(--amber)} .metric-val.b{color:var(--blue)}
.metric-label{font-size:.95rem;color:var(--muted);font-family:var(--font-m)}/* v4: was .72rem */


/* TRUST BAR */
.trust-bar{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0}
.trust-inner{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:7px;font-family:var(--font-m);font-size:.875rem;color:var(--mid);padding:6px 20px;white-space:nowrap}/* v4: was .73rem */
.trust-item .lucide{width:13px;height:13px;color:var(--amber)}
.trust-sep{color:var(--border);font-size:1.2rem;line-height:1}
@media(max-width:900px){.trust-sep:nth-child(4),.trust-sep:nth-child(6),.trust-sep:nth-child(8),.trust-sep:nth-child(10){display:none}}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-text h2{margin-bottom:18px} .about-text p{color:var(--mid);line-height:1.75;margin-bottom:14px}
.about-aside{display:flex;flex-direction:column;gap:14px}
.aside-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 24px;box-shadow:var(--shadow-sm)}
.aside-card-label{font-family:var(--font-m);font-size:.875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}/* v4: was .7rem */
.aside-card-val{font-weight:600;font-size:.97rem;display:flex;align-items:center;gap:8px}
.aside-card-val .lucide{width:16px;height:16px;color:var(--amber)}

/* MISSION GRAPH */
.mission-section{padding:72px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.mission-header{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start;margin-bottom:36px}
.mission-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.mission-pill{font-family:var(--font-m);font-size:.875rem;font-weight:500;padding:4px 11px;border-radius:100px;border:1px solid var(--border);color:var(--mid);background:var(--bg)}/* v4: was .7rem */
.mission-pill.hi{background:var(--amber-100);border-color:rgba(16,185,129,.3);color:var(--amber)}
.mission-legend{display:flex;flex-direction:column;gap:8px;align-self:center}
.legend-item{display:flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:.875rem;color:var(--mid)}/* v4: was .68rem */
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.ld-n{background:#10b981} .ld-e{background:#2563eb} .ld-s{background:#7c3aed} .ld-coc{background:#f59e0b}
.mission-diagram{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:28px;overflow-x:auto;box-shadow:var(--shadow-sm)}

/* RECKON */
.reckon-intro{max-width:720px;margin-bottom:52px}
/* Reckon brand intro on retrofuture — IM Fell English (the Reckon brand font),
   italic swashes, matching reckon.systems / reckon.astro brand display. */
.reckon-intro h2{margin-bottom:18px;font-family:'IM Fell English','EB Garamond',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:.01em} .reckon-intro p{color:var(--mid);line-height:1.75;margin-bottom:14px}
.blockquote{border-left:3px solid var(--amber);padding:16px 24px;background:var(--amber-50);border-radius:0 var(--r) var(--r) 0;margin:24px 0;font-style:italic;color:var(--mid)}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:18px;margin-top:8px}
/* Column layout so a card's trailing CTA sits on the card's BASELINE, not wherever
   its paragraph happened to end. Measured 2026-08-05 at 1280px: the four résumé
   cards are equal height (height:100% inside the grid row) but their "Open résumé"
   links landed at four different y positions — 584/562/609/587 — because the span
   simply followed the copy. margin-top:auto on the last child pushes it to the
   bottom; cards whose last child is the paragraph are unaffected. */
.pillar{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s,border-color .2s;display:flex;flex-direction:column}
.pillar>:last-child{margin-top:auto}
.pillar:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:rgba(16,185,129,.4)}
.pillar-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.pillar-icon .lucide{width:20px;height:20px}
.pi-a{background:var(--amber-100);color:var(--amber)} .pi-g{background:var(--green-50);color:var(--green)}
.pi-b{background:var(--blue-50);color:var(--blue)} .pi-v{background:var(--violet-50);color:var(--violet)}
.pi-t{background:var(--teal-50);color:var(--teal)}
.pillar h3{margin-bottom:8px} .pillar p{font-size:.85rem;color:var(--mid);line-height:1.6}

/* FORMULAS */
.formulas-intro{max-width:620px;margin-bottom:44px}
.formulas-intro h2{margin-bottom:12px} .formulas-intro p{color:var(--mid);line-height:1.7}
.formula-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:28px;overflow:hidden}
.fcard-header{padding:22px 28px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px}
.fcard-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fcard-icon .lucide{width:20px;height:20px}
.fi-g{background:var(--green-50);color:var(--green)} .fi-b{background:var(--blue-50);color:var(--blue)}
.fi-v{background:var(--violet-50);color:var(--violet)} .fi-a{background:var(--amber-100);color:var(--amber)}
.fcard-title{flex:1} .fcard-title h3{font-size:1.05rem;margin-bottom:3px} .fcard-q{font-size:.9rem;color:var(--mid)}/* v4: was .83rem */
.fcard-badge{font-family:var(--font-m);font-size:.875rem;font-weight:600;padding:4px 10px;border-radius:100px;letter-spacing:.05em;white-space:nowrap}/* v4: was .68rem */
.fb-g{background:var(--green-100);color:var(--green)} .fb-b{background:var(--blue-50);color:var(--blue)}
.fb-v{background:var(--violet-50);color:var(--violet)} .fb-a{background:var(--amber-100);color:var(--amber)}
.fcard-body{display:grid;grid-template-columns:1fr 1fr;gap:0}
.fcard-left{padding:26px 28px;border-right:1px solid var(--border)}
.fcard-right{padding:26px 28px}
.plain-box{border-radius:8px;padding:14px 18px;margin-bottom:20px;font-size:.88rem;line-height:1.65}
.plain-box strong{display:block;font-size:.75rem;font-family:var(--font-m);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;opacity:.75}/* v4: was .68rem */
.pb-g{background:var(--green-50);border:1px solid rgba(5,150,105,.15)}
.pb-b{background:var(--blue-50);border:1px solid rgba(37,99,235,.15)}
.pb-v{background:var(--violet-50);border:1px solid rgba(124,58,237,.15)}
.pb-a{background:var(--amber-50);border:1px solid rgba(16,185,129,.15)}
.formula-display{margin:14px 0;padding:14px;background:var(--bg);border-radius:8px;text-align:center;overflow-x:auto;font-size:1rem}
.params-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:.82rem}
.params-table th{font-family:var(--font-m);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);padding:7px 10px;text-align:left}/* v4: was .68rem */
.params-table td{padding:7px 10px;border-top:1px solid rgba(209,250,229,.6)}
.params-table code{font-family:var(--font-m);font-size:.82em;background:var(--bg);padding:2px 6px;border-radius:4px}
.chart-wrap{position:relative;height:230px}
.chart-label{font-family:var(--font-m);font-size:.75rem;color:var(--muted);margin-bottom:8px;letter-spacing:.06em;text-transform:uppercase}/* v4: was .68rem */
.slider-wrap{margin-top:14px}
input[type=range]{width:100%;accent-color:var(--amber);cursor:pointer}
.slider-readout{display:flex;justify-content:space-between;font-family:var(--font-m);font-size:.875rem;color:var(--mid);margin-top:6px}/* v4: was .78rem */
.slider-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.s-chip{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 14px;text-align:center}
.s-chip-val{font-family:var(--font-m);font-size:1.2rem;font-weight:600}
.s-chip-lbl{font-size:.875rem;color:var(--muted);font-family:var(--font-m);display:block;margin-top:2px}/* v4: was .7rem */

/* MERMAID */
.diagram-section{padding:64px 0}
.diagram-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:32px;box-shadow:var(--shadow-sm);overflow-x:auto;margin-top:32px}

/* NUMBERS */
.numbers-strip{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:56px 0}
/* Centred wrap, not a stretch grid. Measured 2026-08-05 at 1280px: auto-fit with a
   140px floor resolved to SIX columns for SEVEN tiles, so "0.95 · confidence on spawn
   cost formula" sat alone against the left edge under a full row. A flex wrap centres
   whatever the last row holds, so no tile count can orphan. */
.numbers-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:32px 40px}
.number-item{flex:0 1 140px;text-align:center}
.number-val{font-family:var(--font-d);font-size:2.4rem;font-weight:700;line-height:1}
.nv-a{color:var(--amber)} .nv-g{color:var(--amber)} .nv-b{color:var(--blue)} .nv-v{color:var(--violet)}
.number-desc{font-size:.79rem;color:var(--muted);margin-top:6px;line-height:1.45}

/* PATENT */
.patent-card{background:var(--navy);border-radius:var(--r);padding:40px 48px;color:#fff;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.patent-card h3{color:#fff;font-size:1.25rem;margin-bottom:10px}
.patent-card p{color:rgba(255,255,255,.62);font-size:.88rem;line-height:1.7}
.patent-badge{font-family:var(--font-m);font-size:.7rem;font-weight:600;background:rgba(16,185,129,.18);color:rgba(16,185,129,.9);padding:4px 12px;border-radius:100px;letter-spacing:.08em;margin-bottom:12px;display:inline-block;border:1px solid rgba(16,185,129,.3)}
.patent-aside{display:flex;flex-direction:column;align-items:center;gap:12px}
.patent-filed{font-family:var(--font-m);font-size:.72rem;color:rgba(255,255,255,.4)}
.patent-icon{width:64px;height:64px;color:rgba(255,255,255,.12)}
.patent-icon .lucide{width:64px;height:64px}

/* HIRE */
.hire-section{background:var(--amber-50);border-top:1px solid rgba(16,185,129,.15)}
.hire-inner{text-align:center;max-width:700px;margin:0 auto}
.hire-inner h2{margin-bottom:16px} .hire-inner>p{color:var(--mid);margin-bottom:32px;font-size:1.02rem;line-height:1.75}
.hire-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:36px;text-align:left}
.hire-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm)}
.hire-card .hc-role{font-family:var(--font-m);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.hire-card .hc-role .lucide{width:12px;height:12px}
.hire-card .hc-title{font-weight:700;font-size:.95rem;margin-bottom:6px}
.hire-card .hc-desc{font-size:.82rem;color:var(--mid);line-height:1.55}
.hire-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-hire{display:inline-flex;align-items:center;gap:9px;padding:13px 28px;border-radius:8px;background:var(--amber);color:#fff;font-size:.92rem;font-weight:700;transition:all .15s;box-shadow:0 4px 14px rgba(16,185,129,.28)}
.btn-hire:hover{opacity:.9;transform:translateY(-1px);text-decoration:none}
.btn-hire .lucide{width:17px;height:17px}

/* RF SECTION */
.rf-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.rf-text h2{margin-bottom:16px} .rf-text p{color:var(--mid);line-height:1.75;margin-bottom:14px}
.rf-link{display:inline-flex;align-items:center;gap:6px;color:var(--amber);font-weight:600;font-size:.88rem}
.rf-link:hover{text-decoration:underline}
.rf-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.rf-tag{font-family:var(--font-m);font-size:.73rem;background:var(--surface);border:1px solid var(--border);padding:5px 12px;border-radius:100px;color:var(--mid)}

.chart-unavailable{font-family:var(--font-m);font-size:1rem;color:var(--muted);border:1px dashed var(--border);border-radius:8px;padding:18px;text-align:center;margin:0}

/* FOOTER
   Legibility fix (2026-08-23): the low-opacity whites below measured at 4.4:1
   (.footer-link) and 2.51:1 (.footer-credit) on the near-black --text background
   — the credit line failed WCAG AA outright and the link row was borderline.
   Solid #fff on --text (#0E211B) measures 16.77:1; bold weight per operator
   ruling ("footer text must be white and bold"). Contrast, not opacity, now
   carries the visual hierarchy (font-size/letter-spacing), so nothing here
   reads as washed-out again. */
.footer{background:var(--text);color:#fff;padding:56px 0 36px}
.footer-inner{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start}
.footer-wordmark{font-family:var(--font-d);font-weight:700;font-size:1.1rem;letter-spacing:-.02em;color:#fff;margin-bottom:8px}
.footer-wordmark span{color:var(--amber);font-style:oblique 8deg}
.footer-sub{font-size:.86rem;line-height:1.7;max-width:380px;margin-bottom:20px;color:#fff;font-weight:700}
.footer-links{display:flex;gap:16px}
.footer-link{font-size:.86rem;color:#fff;font-weight:700;transition:opacity .15s}
.footer-link:hover{opacity:.75;text-decoration:underline}
.footer-right{text-align:right}
.footer-credit{font-family:var(--font-m);font-size:.7rem;color:#fff;font-weight:700;line-height:1.9}

/* TERMS STRIP — static wrapped chips (scrolling ticker retired 2026-08-09, operator directive) */
.terms-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg);padding:12px 0}
.terms-scroll{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.term-pill{font-family:var(--font-m);font-size:.72rem;white-space:nowrap;padding:5px 14px;border-radius:100px;border:1px solid var(--border);color:var(--mid)}
.term-pill.hi{background:var(--amber-100);border-color:rgba(16,185,129,.3);color:var(--amber)}

/* HAMBURGER */
.nav-hamburger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:none;background:none;cursor:pointer;color:var(--text);transition:background .15s;flex-shrink:0}
.nav-hamburger:hover{background:rgba(0,0,0,.06)}
.nav-hamburger .lucide{width:22px;height:22px;display:block}
.hbr-close{display:none}
.nav-hamburger.is-open .hbr-open{display:none}
.nav-hamburger.is-open .hbr-close{display:block}
.mobile-menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 8px 32px rgba(0,0,0,.10);z-index:199;padding:12px 20px 20px;flex-direction:column;gap:4px}
.mobile-menu.open{display:flex}
.m-link{font-size:.95rem;font-weight:500;padding:11px 14px;border-radius:8px;color:var(--mid);display:block;transition:all .15s;text-decoration:none}
.m-link:hover{background:rgba(0,0,0,.05);color:var(--text)}
.m-active{color:var(--amber);background:var(--amber-100)}
.m-cta{background:var(--amber);color:#fff!important;font-weight:700;text-align:center;margin-top:8px;border-radius:8px}
.m-cta:hover{opacity:.88}

@media(max-width:768px){
  .hero-inner,.about-grid,.fcard-body,.hire-cards,.rf-grid,.footer-inner,.patent-card,.mission-header{grid-template-columns:1fr}
  /* MEASURED 2026-07-28: document scrollW was 553 at a 390px viewport. Cause was NOT the
     hero SVG (its <line> children report unclipped geometry but section.hero clips them)
     and NOT the nav. It was min-content floors: grid/flex children default to
     min-width:auto, so the no-wrap .footer-links row and the white-space:nowrap trust
     chips held the 1fr tracks open at ~521px. Let them wrap and allow the tracks to
     shrink. */
  .footer-inner>*{min-width:0}
  .footer-links{flex-wrap:wrap;row-gap:8px}
  .footer-right{text-align:left}
  .trust-item{white-space:normal}
  .hero-rose-wrap{display:none}
  .fcard-left{border-right:none;border-bottom:1px solid var(--border)}
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  /* 2-up on narrow. Expressed in flex because .numbers-grid is a flex wrap now (see
     the orphan note above); the old grid-template-columns here became a silent no-op. */
  .number-item{flex:0 1 calc(50% - 20px)}
  .section{padding:48px 0}
  .hero{padding:80px 0 48px}
  .trust-inner{justify-content:flex-start;flex-wrap:wrap;gap:0;padding:0 4px}
  .trust-item{padding:4px 14px}
  .trust-sep{display:none}
  .mission-legend{flex-direction:row;flex-wrap:wrap;gap:12px}
  .potential-formula-row{grid-template-columns:1fr}
  .pot-formula{border-right:none;border-bottom:1px solid var(--border)}
  .pot-metric{border-right:none;border-bottom:1px solid var(--border)}
  /* .potential-charts MOVED from here to a @media block after its base rule (see the
     cascade-order note down there) — declared at this point it never applied. */
}

/* POTENTIAL ENGINE — light theme */
.potential-section{padding:80px 0;background:linear-gradient(180deg,#f6f9f8 0%,#eef4f2 100%);position:relative;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.potential-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 15% 60%,rgba(16,185,129,.07) 0%,transparent 55%),radial-gradient(ellipse at 85% 40%,rgba(37,99,235,.05) 0%,transparent 55%);pointer-events:none}
.pot-eyebrow{font-family:var(--font-m);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;margin-bottom:16px}
.pot-eyebrow .lucide{width:13px;height:13px;color:#10b981}
.potential-intro{max-width:700px;margin-bottom:44px;position:relative}
.potential-intro h2{color:var(--text);margin-bottom:12px}
.potential-intro p{color:var(--mid);line-height:1.75}
.potential-formula-row{display:grid;grid-template-columns:auto 1fr 1fr 1fr;background:#fff;border:1px solid var(--border);border-radius:var(--r);margin-bottom:36px;overflow:hidden;box-shadow:0 1px 3px rgba(15,23,42,.04)}
.pot-formula{padding:22px 28px;border-right:1px solid var(--border)}
.pot-formula-label{font-family:var(--font-m);font-size:.67rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.pot-formula-eq{font-family:var(--font-m);font-size:1.25rem;font-weight:600;color:#059669;margin-bottom:6px;white-space:nowrap}
.pot-formula-note{font-size:.72rem;color:var(--muted);line-height:1.55;max-width:220px}
.pot-metric{padding:22px 18px;border-right:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.pot-metric:last-child{border-right:none}
.pot-metric-val{font-family:var(--font-d);font-size:2.1rem;font-weight:700;color:var(--text);line-height:1}
.pot-metric-lbl{font-family:var(--font-m);font-size:.67rem;color:var(--muted);margin-top:7px;line-height:1.45;text-align:center}
/* CASCADE ORDER BUG, measured 2026-07-28: the mobile overrides for .potential-formula-row
   / .pot-formula / .pot-metric live in the @media(max-width:768px) block ~15 lines ABOVE
   these base rules. Equal specificity + later source position means the 4-column base rule
   WON at every width, so at 390px the row's content was 636px inside a 324px box with
   overflow:hidden — 312px of a formula column silently cropped, invisible to any
   document-level overflow check because the crop is what kept the document narrow.
   Re-declared here, after the base rules, where they actually apply. */
@media(max-width:768px){
  .potential-formula-row{grid-template-columns:1fr}
  .pot-formula{border-right:none;border-bottom:1px solid var(--border)}
  .pot-metric{border-right:none;border-bottom:1px solid var(--border)}
  .pot-metric:last-child{border-bottom:none}
  .pot-formula-eq{white-space:normal;overflow-wrap:anywhere;font-size:1.05rem}
  .pot-formula-note{max-width:none}
}
@media(max-width:640px){
  /* measured: .fcard-badge is white-space:nowrap at 175px and was cropped 18px by the
     card's overflow:hidden — invisible to a document-level overflow check. */
  .fcard-badge{white-space:normal}
  /* .fcard-left is a grid child: min-width defaults to auto, so its min-content width
     (343px) held it wider than the 324px card and 19px was cropped. */
  .fcard-body>*{min-width:0}
  .fcard-left{overflow-wrap:anywhere}
}
.potential-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pot-chart-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:22px;box-shadow:0 1px 3px rgba(15,23,42,.04)}
.pot-chart-card-full{grid-column:1/-1}
.pot-chart-title{font-family:var(--font-d);font-weight:700;font-size:.97rem;color:var(--text);margin-bottom:3px}
.pot-chart-sub{font-family:var(--font-m);font-size:.67rem;color:var(--muted);margin-bottom:14px;line-height:1.4}
.pot-chart-wrap{position:relative;height:250px}
.pot-chart-wrap-wide{position:relative;height:190px}
/* The height above is reserved for a CANVAS. When rf-shared.js swaps the canvas for
   the "Chart unavailable" note (CDN blocked/down), the reserved height stays and the
   card shows the one-line notice above ~200px of dead white. Collapse to content in
   exactly that case. */
.pot-chart-wrap:has(.chart-unavailable),
.pot-chart-wrap-wide:has(.chart-unavailable){height:auto}
/* SAME CASCADE-ORDER BUG, its surviving sibling. The 2026-07-28 fix above re-declared
   .potential-formula-row / .pot-formula / .pot-metric after their base rules but left
   `.potential-charts{grid-template-columns:1fr}` behind in the dead @media block, so the
   `1fr 1fr` base rule kept winning at every width. Measured 2026-08-05 at 390px: the
   "Force Multiplier Surface" and "Rocket Liftoff Burn Profile" cards still rendered
   side-by-side in ~170px columns, breaking every title onto 2–3 lines. */
@media(max-width:768px){
  .potential-charts{grid-template-columns:1fr}
}
.pot-slider-row{display:flex;align-items:center;gap:10px;margin-top:12px}
.pot-slider-row label{font-family:var(--font-m);font-size:.72rem;color:var(--mid);white-space:nowrap}
.pot-slider-row input[type=range]{flex:1;accent-color:#10b981}
.pot-f0-badge{font-family:var(--font-m);font-size:.82rem;font-weight:600;color:#059669;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.25);padding:3px 10px;border-radius:100px;min-width:54px;text-align:center}
.pot-zone-labels{display:flex;gap:16px;margin-top:10px;flex-wrap:wrap}
.pot-zone{display:flex;align-items:center;gap:5px;font-family:var(--font-m);font-size:.67rem;color:var(--mid)}
.pot-zone-dot{width:8px;height:8px;border-radius:50%}

/* RECKON MCP DEMO */
.mcp-section{padding:80px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.mcp-intro{max-width:680px;margin-bottom:36px}
.mcp-intro h2{color:var(--text);margin-bottom:12px}
.mcp-intro p{color:var(--mid);line-height:1.75}
.mcp-demo{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:stretch}
.mcp-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:24px;box-shadow:0 1px 3px rgba(15,23,42,.04)}
.mcp-card-label{font-family:var(--font-m);font-size:.67rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.mcp-card-label .lucide{width:14px;height:14px;color:#10b981}
.mcp-steps{display:flex;flex-direction:column;gap:10px}
.mcp-step{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:#fff;transition:border-color .2s,background .2s}
.mcp-step.active{border-color:#10b981;background:rgba(16,185,129,.06)}
.mcp-step.done{border-color:rgba(16,185,129,.35)}
.mcp-step-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff;background:#fff;transition:all .2s}
.mcp-step.active .mcp-step-dot{border-color:#10b981;background:#10b981}
.mcp-step.done .mcp-step-dot{border-color:#10b981;background:#10b981}
.mcp-step-body{flex:1;min-width:0}
.mcp-step-name{font-family:var(--font-d);font-weight:600;font-size:.92rem;color:var(--text)}
.mcp-step-desc{font-family:var(--font-m);font-size:.72rem;color:var(--muted);margin-top:3px;line-height:1.5}
.mcp-step.active .mcp-step-name,.mcp-step.done .mcp-step-name{color:#059669}
.mcp-console{font-family:var(--font-m);font-size:.74rem;line-height:1.7;color:var(--mid);background:#0f172a;color:#cbd5e1;border-radius:8px;padding:16px;height:220px;overflow:auto;white-space:pre-wrap}
.mcp-console .ln-ok{color:#34d399}
.mcp-console .ln-info{color:#93c5fd}
.mcp-console .ln-url{color:#fcd34d}
.mcp-cta-row{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.mcp-run{font-family:var(--font-b);font-weight:600;font-size:.9rem;color:#fff;background:#10b981;border:none;border-radius:8px;padding:11px 20px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s}
.mcp-run:hover{background:#059669}
.mcp-run:disabled{opacity:.55;cursor:not-allowed}
.mcp-result{margin-top:18px;padding:14px 16px;border:1px solid rgba(16,185,129,.3);background:rgba(16,185,129,.06);border-radius:8px;display:none}
.mcp-result.show{display:block}
.mcp-result-label{font-family:var(--font-m);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.mcp-result a{font-family:var(--font-m);font-size:.9rem;color:#059669;font-weight:600;word-break:break-all;display:inline-flex;align-items:center;gap:6px}
.mcp-badge{font-family:var(--font-m);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);border-radius:100px;padding:3px 10px}
@media(max-width:760px){.mcp-demo{grid-template-columns:1fr}.mcp-console{height:180px}}

/* LEDGER PROOF DEMO */
.coc-section{padding:80px 0;background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.coc-intro{max-width:800px;margin-bottom:40px}
.coc-intro h2{margin-bottom:16px}
.coc-lead{color:var(--mid);line-height:1.75;font-size:1.02rem}
.coc-anchor-link{color:var(--amber);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.coc-anchor-link:hover{opacity:.8}

/* ── INTERACTIVE LEDGER PANEL (removed) ── */
.mrkx-wrap{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;box-shadow:var(--shadow);margin-bottom:40px}

/* Statsbar */
.mrkx-statsbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:20px;padding:14px 18px;background:var(--bg);border:1px solid var(--border);border-radius:8px}
.mrkx-stat{display:flex;flex-direction:column;gap:2px}
.mrkx-stat-big{font-family:var(--font-m);font-size:1.65rem;font-weight:700;color:var(--text);line-height:1}
.mrkx-big-gold{color:var(--amber)}
.mrkx-stat-lbl{font-family:var(--font-m);font-size:.63rem;color:var(--muted);letter-spacing:.05em}
.mrkx-stat-arrow{color:var(--border);flex-shrink:0}
.mrkx-stat-sep{width:1px;height:34px;background:var(--border);flex-shrink:0}
.mrkx-complexity-badge{display:flex;flex-direction:column;gap:2px}
.mrkx-complexity-label{font-family:var(--font-m);font-size:1.05rem;font-weight:700;color:var(--amber)}
.mrkx-complexity-sub{font-family:var(--font-m);font-size:.63rem;color:var(--muted)}
.mrkx-root-display{display:flex;flex-direction:column;gap:4px;flex:1;min-width:180px}
.mrkx-root-lbl{font-family:var(--font-m);font-size:.63rem;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.mrkx-root-hash{font-family:var(--font-m);font-size:.68rem;font-weight:600;color:var(--text);word-break:break-all;background:var(--surface);padding:3px 8px;border-radius:4px;border:1px solid var(--border)}

/* Controls */
.mrkx-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.mrkx-btn-random{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:7px;background:var(--amber);color:#fff;font-size:.83rem;font-weight:700;border:none;cursor:pointer;transition:all .15s;box-shadow:0 3px 10px rgba(16,185,129,.25)}
.mrkx-btn-random:hover{opacity:.9;transform:translateY(-1px)}
.mrkx-btn-random:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.mrkx-btn-sample{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:7px;background:var(--bg);color:var(--mid);font-size:.79rem;font-weight:500;border:1.5px solid var(--border);cursor:pointer;transition:all .15s;font-family:var(--font-m)}
.mrkx-btn-sample:hover{border-color:var(--amber);color:var(--amber)}
.mrkx-btn-sample:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.mrkx-btn-sample.active{background:var(--amber-50);border-color:var(--amber);color:var(--amber)}
.mrkx-loading-badge{font-family:var(--font-m);font-size:.72rem;color:var(--muted);margin-left:4px}
.mrkx-loading-badge.ready{color:var(--green,#059669)}
.mrkx-loading-badge.error{color:var(--rose,#e11d48)}

/* Main grid */
.mrkx-grid{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}

/* Tree panel */
.mrkx-tree-panel{display:flex;flex-direction:column;gap:10px}
.mrkx-tree-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mrkx-panel-title{font-family:var(--font-m);font-size:.72rem;font-weight:600;color:var(--mid);letter-spacing:.06em}
.mrkx-panel-hint{font-family:var(--font-m);font-size:.68rem;color:var(--muted);font-style:italic}
.mrkx-canvas-wrap{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg);cursor:pointer;position:relative}
.mrkx-canvas-wrap canvas{display:block;width:100%;height:auto;touch-action:none}
.mrkx-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:4px}
.mrkx-leg-item{display:flex;align-items:center;gap:5px;font-family:var(--font-m);font-size:.63rem;color:var(--muted)}
.mrkx-leg-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.leg-leaf{background:var(--border);border:1.5px solid var(--muted)}
.leg-selected{background:#f59e0b;border:1.5px solid #d97706}
.leg-path{background:var(--amber);border:1.5px solid var(--green)}
.leg-root{background:var(--violet,#7c3aed);border:1.5px solid #5b21b6}

/* Proof panel */
.mrkx-proof-panel{background:var(--bg);border:1px solid var(--border);border-radius:8px;overflow:hidden;min-height:420px;display:flex;flex-direction:column}
.mrkx-proof-idle{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px 24px;text-align:center;color:var(--muted);font-size:.88rem;line-height:1.6}
.mrkx-proof-idle-icon{opacity:.35}
.mrkx-proof-content{flex:1;display:flex;flex-direction:column;overflow:hidden}
.mrkx-proof-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--amber-50)}
.mrkx-proof-title{font-family:var(--font-d);font-size:.88rem;font-weight:700;color:var(--text)}
.mrkx-proof-leaf-id{font-family:var(--font-m);font-size:.7rem;color:var(--amber);font-weight:600}
.mrkx-proof-leaf-hash{padding:9px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
.mrkx-hash-label{display:block;font-family:var(--font-m);font-size:.6rem;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;margin-bottom:4px}
.mrkx-hash-val{font-family:var(--font-m);font-size:.65rem;font-weight:600;color:var(--text);word-break:break-all;background:var(--bg);display:block;padding:5px 8px;border-radius:4px;border:1px solid var(--border)}

/* Path list */
.mrkx-path-list{overflow-y:auto;max-height:224px}
.mrkx-path-step{display:grid;grid-template-columns:42px 38px 1fr;gap:5px 8px;align-items:start;padding:7px 16px;border-bottom:1px solid var(--border);transition:background .12s}
.mrkx-path-step.animating{background:rgba(16,185,129,.06)}
.mrkx-path-step.done-step{background:rgba(16,185,129,.03)}
.mrkx-step-level{font-family:var(--font-m);font-size:.58rem;font-weight:700;color:var(--muted);padding:2px 5px;border-radius:3px;background:var(--surface);border:1px solid var(--border);white-space:nowrap;text-align:center}
.mrkx-step-pos{font-family:var(--font-m);font-size:.58rem;color:var(--muted);padding:2px 5px;border-radius:3px;background:var(--surface);text-align:center}
.mrkx-step-pos.left{color:#7c3aed;background:#f5f3ff;border:1px solid rgba(124,58,237,.2)}
.mrkx-step-pos.right{color:#0d9488;background:#f0fdfa;border:1px solid rgba(13,148,136,.2)}
.mrkx-step-hash{font-family:var(--font-m);font-size:.6rem;color:var(--muted);word-break:break-all;padding-top:2px}
.mrkx-step-hash.lit{color:var(--text);font-weight:600}

/* Proof root row */
.mrkx-proof-root-row{padding:9px 16px;border-top:1px solid var(--border);background:var(--amber-50)}
.mrkx-hash-root{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.3)}

/* Verify bar */
.mrkx-verify-bar{padding:9px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mrkx-btn-verify{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:6px;background:var(--amber);color:#fff;font-size:.77rem;font-weight:700;border:none;cursor:pointer;transition:all .15s}
.mrkx-btn-verify:hover{opacity:.9}
.mrkx-btn-verify:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.mrkx-btn-verify:disabled{opacity:.45;cursor:not-allowed}
.mrkx-verify-result{font-family:var(--font-m);font-size:.7rem;font-weight:600}
.mrkx-verify-result.ok{color:var(--green,#059669)}
.mrkx-verify-result.fail{color:var(--rose,#e11d48)}
.mrkx-verify-result.running{color:var(--muted)}

/* Proof footer */
.mrkx-proof-footer{padding:8px 16px;border-top:1px solid var(--border)}
.mrkx-anchor-link{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-m);font-size:.68rem;font-weight:600;color:var(--amber);text-decoration:underline;text-underline-offset:2px}
.mrkx-anchor-link:hover{opacity:.8}

/* Decomposition section */
.coc-decomp-section{margin-bottom:32px}
.coc-decomp-intro{margin-bottom:24px}
.coc-decomp-lead{color:var(--mid);line-height:1.7;margin-top:8px;font-size:.95rem}
.coc-decomp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}

.coc-decomp-card{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color .2s,box-shadow .2s;cursor:pointer}
.coc-decomp-card:hover{border-color:rgba(16,185,129,.4);box-shadow:var(--shadow)}
.coc-decomp-card:focus{outline:2px solid var(--amber);outline-offset:2px}
.coc-decomp-card[aria-expanded="true"]{border-color:var(--amber);box-shadow:var(--shadow)}
.mdc-summary{display:flex;align-items:center;gap:14px;padding:20px 20px 16px}
.mdc-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mdc-icon .lucide{width:20px;height:20px}
.mdc-headline{flex:1}
.mdc-big{font-family:var(--font-d);font-size:1.65rem;font-weight:700;color:var(--text);line-height:1}
.mdc-label{font-family:var(--font-m);font-size:.7rem;color:var(--muted);margin-top:3px}
.mdc-chevron{color:var(--muted);transition:transform .25s}
.mdc-chevron .lucide{width:18px;height:18px}
.coc-decomp-card[aria-expanded="true"] .mdc-chevron{transform:rotate(180deg)}

.mdc-detail{max-height:0;overflow:hidden;transition:max-height .35s ease}
.coc-decomp-card[aria-expanded="true"] .mdc-detail{max-height:400px}
.mdc-detail-inner{padding:0 20px 20px;border-top:1px solid var(--border)}
.mdc-subhead{font-family:var(--font-m);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 10px}
.mdc-parts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.mdc-part{background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:10px 12px}
.mdc-part-sum{grid-column:1/-1;background:var(--amber-50);border-color:rgba(16,185,129,.25)}
.mdc-part-val{display:block;font-family:var(--font-m);font-size:1.1rem;font-weight:700;color:var(--text);line-height:1.1}
.mdc-part-green{color:var(--amber)}
.mdc-part-lbl{display:block;font-size:.68rem;color:var(--muted);font-family:var(--font-m);margin-top:3px}
.mdc-note{font-size:.8rem;color:var(--mid);line-height:1.65}

/* Zero-collision callout */
.coc-collision-bar{display:flex;align-items:flex-start;gap:16px;background:var(--navy);color:#fff;border-radius:var(--r);padding:22px 28px;flex-wrap:wrap}
.coc-collision-icon{width:36px;height:36px;border-radius:8px;background:rgba(16,185,129,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.coc-collision-icon .lucide{width:18px;height:18px;color:var(--amber)}
.coc-collision-body{flex:1;min-width:200px;font-size:.88rem;line-height:1.7;color:rgba(255,255,255,.75)}
.coc-collision-body strong{color:#fff;font-weight:700}
.coc-collision-verify{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-m);font-size:.78rem;font-weight:600;color:var(--amber);white-space:nowrap;align-self:center;text-decoration:underline;text-underline-offset:2px}
.coc-collision-verify:hover{opacity:.8}

@media(max-width:900px){
  .mrkx-grid{grid-template-columns:1fr}
  .mrkx-proof-panel{min-height:auto}
}
@media(max-width:640px){
  .mrkx-statsbar{gap:14px}
  .mrkx-stat-sep{display:none}
  .mrkx-root-display{min-width:100%;order:5}
}
@media(max-width:768px){
  .coc-collision-bar{flex-direction:column}
  .coc-collision-verify{align-self:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .mrkx-path-step,.mrkx-btn-random,.mrkx-btn-sample{transition:none}
}



/* ═══ DELIVERABLES + CONCEPTS (added 2026-07-29, lane retrofuture-trim-and-boundary) ═══
   The brief and the deck are the deliverable, so they get the first block under the fold
   and the largest non-hero type on the page. The concepts block replaces ~700 lines of
   mechanism that moved to /studio/viz/mechanism — concepts are public, constructions are
   not. Both blocks are deliberately airy: whitespace is the point, not a cost. */

.deliverables{background:var(--surface);padding:88px 0}
.deliv-h2{margin-bottom:40px;max-width:20ch}
.deliv-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.deliv-card{display:flex;flex-direction:column;gap:14px;padding:40px;border:1.5px solid var(--border);border-radius:16px;background:var(--bg);transition:border-color .15s,transform .15s}
.deliv-card:hover{border-color:var(--amber);transform:translateY(-2px);text-decoration:none}
.deliv-primary{border-color:var(--amber);box-shadow:0 6px 24px rgba(16,185,129,.10)}
.deliv-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:.95rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.deliv-kicker .lucide{width:17px;height:17px}
.deliv-title{font-family:var(--font-d);font-size:1.9rem;font-weight:700;line-height:1.15;color:var(--text)}
.deliv-desc{font-size:1.1rem;line-height:1.65;color:var(--mid);margin:0}
.deliv-go{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:10px;font-weight:700;font-size:1.05rem;color:var(--amber)}
.deliv-go .lucide{width:18px;height:18px}
.deliv-pdf-note{margin-top:22px;font-family:var(--font-m);font-size:.95rem;color:var(--muted)}
.deliv-pdf-note a{color:var(--amber);text-decoration:underline}

.concepts{padding:88px 0}
.concepts-h2{margin-bottom:40px;max-width:20ch}
.concepts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.concept-card{padding:34px;border:1.5px solid var(--border);border-radius:16px;background:var(--bg)}
.concept-n{font-family:var(--font-m);font-size:1rem;font-weight:700;color:var(--amber);letter-spacing:.1em;margin-bottom:12px}
.concept-card h3{font-size:1.5rem;margin-bottom:12px;color:var(--text)}
.concept-card p{font-size:1.08rem;line-height:1.7;color:var(--mid);margin:0}
.concepts-foot{margin-top:32px;font-size:1.15rem;line-height:1.7;color:var(--mid);max-width:60ch}
.concepts-foot strong{color:var(--text)}

@media(max-width:820px){
  .deliv-grid,.concepts-grid{grid-template-columns:1fr}
  .deliverables,.concepts{padding:56px 0}
  .deliv-card{padding:28px}
  .concept-card{padding:26px}
  .deliv-title{font-size:1.6rem}
}


/* ═══ REVENANT SPA SKIN — structural overrides (rewritten 2026-07-29) ══════════════
   Target: the running revenant SPA at revenant-dev/overlay/ui/custody-proof, shot in
   Chromium and used as the reference. The colours live in the revenant-light theme in
   themes.css; this block matches the SPA's GEOMETRY — brutalist ink rules, hard offset
   shadow blocks, 3px corners, pill nav, white cards on a mint ground.

   TEAL IS THE INK, MINT IS THE FILL. Enforced here, not just intended:
     - text/links use --amber (= --teal-ink #0A5C57, 7.27:1 on the ground)
     - --fill-teal (#0E9E96, 3.07:1) appears ONLY as a fill or a rule, never as color:
     - button fills are the deep teal with white on top (7.83:1), NOT the bright teal,
       whose white pairing measures 3.31:1 and fails.
   The measured table for every pair is in the lane report. */

.section{padding:96px 0}
.section+.section{border-top:3px solid var(--text)}
.wrap{padding:0 40px}
.hero{padding:104px 0 88px;background:var(--bg)}
body{background:var(--bg)}

/* Cards: white on mint, ink rule, hard offset block — the SPA's card treatment. */
.deliv-card,.concept-card,.aside-card,.hire-card,.formula-card,.plain-box,.number-item{
  background:var(--surface);
  border:3px solid var(--text);
  border-radius:var(--r);
  box-shadow:var(--shadow-hard);
}
.deliv-card:hover,.concept-card:hover,.hire-card:hover{
  transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--text);border-color:var(--text);
}
.deliv-primary{box-shadow:6px 6px 0 var(--amber);border-color:var(--text)}
.deliverables{background:var(--surface-2)}   /* mint band */
.concepts{background:var(--bg)}
.concept-n{color:var(--amber)}

/* Buttons: deep-teal fill + white (7.83:1). The bright teal is a fill elsewhere, but
   never under white text — that pair measures 3.31:1. */
.btn-primary{background:var(--amber);color:#fff;border:3px solid var(--text);
  border-radius:var(--r);box-shadow:var(--shadow-hard);text-shadow:none}
.btn-primary:hover{opacity:1;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--text)}
.btn-outline{border:3px solid var(--text);border-radius:var(--r);color:var(--text);
  background:var(--surface);box-shadow:var(--shadow-hard)}
.btn-outline:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--amber);
  border-color:var(--text);color:var(--amber)}

/* Nav: white bar, heavy ink rule under it, pill links — the SPA header. */
.nav{background:var(--surface);border-bottom:3px solid var(--text);backdrop-filter:none}
/* MEASURED 2026-07-29: `.nav-link{color:var(--text)}` sits later in this file than
   `.nav-cta{color:#fff}` and has the SAME specificity (0,1,0), so it won the cascade on
   `class="nav-link nav-cta"` and painted ink-on-ink — the "Work Together" pill rendered
   as a solid dark blob with invisible text. Contrast tooling would not have caught it:
   the pair it measures is the one the stylesheet DECLARES, not the one that wins. Only
   the screenshot showed it. Excluding .nav-cta keeps the rule honest. */
.nav-link:not(.nav-cta){border-radius:100px;color:var(--text)}
.nav-link:not(.nav-cta):hover{background:var(--surface-2)}
.nav-link.active:not(.nav-cta){color:#fff;background:var(--amber);border:2px solid var(--text)}
.nav-cta{border-radius:100px;border:2px solid var(--text);color:#fff}
.rf-t{color:var(--amber);text-shadow:none}
.hero-badge{background:var(--surface-2);border:2px solid var(--text);border-radius:100px;
  color:var(--text)}   /* ink on mint fill = 10.81:1 */
.trust-bar{background:var(--surface);border-top:3px solid var(--text);border-bottom:3px solid var(--text)}
.trust-item{color:var(--text)}
.metric-val{color:var(--text)}
.metric-val.g,.metric-val.a{color:var(--amber)}
.metric-val.b{color:var(--blue)}
.metric-label{color:var(--muted)}

/* Eyebrows: teal, uppercase, mono — the SPA's section kickers. */
.eyebrow{color:var(--amber)}

/* Dark panel. --navy is now the ink #10302B; white on it measures 15.06:1. */
.patent-card{background:var(--navy);border-radius:var(--r);box-shadow:var(--shadow-hard);
  border:3px solid var(--text)}
.patent-badge{border-radius:100px;background:var(--surface-2);color:var(--text);border:2px solid var(--text)}
.patent-card p{color:#CDE6E1}      /* mint on ink = 10.81:1 */
.patent-filed{color:#A9D2CB;font-size:1rem}  /* 8.63:1; was .72rem — small text is not acceptable */
.patent-icon{color:#4C6B64}

.term-pill{border:2px solid var(--text);border-radius:100px;background:var(--surface)}
.chart-unavailable{border:2px dashed var(--border-soft);color:var(--muted)}

@media(max-width:820px){
  .section{padding:60px 0}
  .hero{padding:72px 0 52px}
  .wrap{padding:0 20px}
  .deliv-grid,.concepts-grid{grid-template-columns:1fr}
  .deliv-card{padding:26px}
  .concept-card{padding:24px}
  .deliv-title{font-size:1.6rem}
}

/* ══════════════════════════════════════════════════════════════════════════════════
   SÉANCE DESIGN TOKENS — CONSUMPTION LAYER  (lane retrofuture-portfolio-tighten, 2026-08-04)

   tools/seance_lite.py `design-commit` writes a guarded block at the TOP of
   public/themes.css declaring --font-brand / --font-d / --font-m / --font-b / --r and
   the --sp-* / --lh-* / --label-* / --head-* scale. Those are DECLARATIONS. This block
   is where they are CONSUMED, and it sits at the end of the file on purpose: the
   brutalist re-skin above re-declares .section and .hero padding at equal specificity,
   so a consumption rule placed any earlier would be silently overridden — the file
   would read correct and the page would not move.

   EVERY var() here carries the CURRENT value as its fallback. So a stylesheet with no
   séance block behaves exactly as it does today, and the editor's job is to move the
   fallback, never to be required for the page to render.
   ══════════════════════════════════════════════════════════════════════════════════ */
body{line-height:var(--lh-body,1.7)}
h1,h2,h3,h4{font-weight:var(--head-weight,700);letter-spacing:var(--head-tracking,-.02em)}
.section{padding:var(--sp-section,96px) 0}
.hero{padding:var(--sp-hero-t,104px) 0 var(--sp-hero-b,88px)}
.nav-wordmark,.footer-wordmark{font-family:var(--font-brand,var(--font-d))}
.eyebrow,.hero-badge,.metric-label,.pot-eyebrow,.term-pill,.trust-item,.fcard-badge{
  text-transform:var(--label-transform,uppercase);
  letter-spacing:var(--label-tracking,.1em);
  font-weight:var(--label-weight,600);
}

/* ── BUTTON LABEL CENTRING (operator instruction, 2026-08-04) ──────────────────────
   Measured first, then fixed. The audit reads each button's rendered inline content
   (getClientRects over its own child nodes) against its content box and compares the
   left/right and top/bottom gaps — the RENDERED position, not the declared rule.

   The measurement that mattered was the SECOND one. On the first pass every label
   looked shifted right and 0 button icons had rendered: this container's Chromium
   cannot reach the internet, so the lucide script failed and each `<i class="lucide">`
   collapsed while still holding its 16px box and 9px flex gap ON THE LEFT of the label.
   With the assets actually fetched (through the agent proxy, CA verified) the icons
   render and all 64 measured labels centre within ±1px at 1440/768/390 in both grounds.
   So the pre-existing defect was in the MEASUREMENT, not the page — worth stating
   plainly, because a fix credited to the wrong cause is a fix that will regress.

   What is added below is the guarantee rather than the accident. These buttons are
   inline-flex WITHOUT justify-content, so they centre only because they shrink-wrap
   their content. The moment one is given a width — a full-width mobile CTA, a grid
   cell, `flex:1` in a row — the content packs to flex-start and the label goes left
   while `text-align:center` in the source still reads correct, because a flex parent
   ignores it for its flex items. justify-content is the property that actually holds
   at any width; text-align covers the wrapped-line case inside a label that breaks
   onto two lines at 390px. Both, on every button and CTA on the page. */
.btn-primary,.btn-outline,.btn-hire,.sg-btn,.mcp-run{
  justify-content:center;
  text-align:center;
}
.nav-cta,.m-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.m-cta{display:flex}          /* full-width in the mobile menu column */