/* ============================================================
   RoofReach storefront — Broadside C skin (rebuild 2026-08-13).
   Static site, no build step. Layout language FROZEN per the
   Broadside C bundle; tokens below are its exact values.
   Single theme — the ?theme= preview hook was torched once the
   direction was picked. The hero canvas (main.js) reads
   --glow / --map-line as r,g,b triplets from these tokens.
   ============================================================ */

/* ---------- Fonts (self-hosted, zero third-party requests) ---------- */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("fonts/oswald-latin-var.woff2") format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-latin-400.woff2") format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-latin-500.woff2") format('woff2');
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/martian-mono-latin-var.woff2") format('woff2');
}

/* ---------- Tokens (Broadside C, frozen) ---------- */
:root {
  --bg: #0c0c0d;
  --bg-rgb: 12, 12, 13;
  --ink: #f4f1ee;
  --ink-rgb: 244, 241, 238;
  --accent: #f56333;            /* sRGB fallback of oklch(.68 .19 38) */
  --accent: oklch(.68 .19 38);
  --accent-hi: #ff8c62;         /* sRGB fallback of oklch(.78 .17 38) */
  --accent-hi: oklch(.78 .17 38);
  --band-ink: #100b09;
  --hairline: rgba(244, 241, 238, .14);
  --glow: 245, 99, 51;          /* canvas accent, r,g,b */
  --map-line: 200, 195, 189;    /* canvas dormant outlines, r,g,b */
  --display: 'Oswald', sans-serif;
  --body: 'Barlow', sans-serif;
  --mono: 'Martian Mono', monospace;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html {
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }
::selection { background: rgba(var(--glow), .28); color: var(--ink); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--band-ink);
  font-family: var(--display); font-weight: 500; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 12px 20px;
}
.skip-link:focus { left: 0; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

@keyframes rrUp   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rrWipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rrFade { from { opacity: 0; } to { opacity: 1; } }

/* Scroll reveals (variant-B bones, Broadside motion tokens). */
.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s cubic-bezier(.2, .7, .2, 1),
              transform .5s cubic-bezier(.2, .7, .2, 1);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(var(--bg-rgb), .8);
  border-bottom: 1px solid var(--hairline);
}
.header-inner {
  height: 58px;
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-glyph {
  width: 26px; height: 12px; background: var(--accent);
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 82% 100%, 50% 26%, 18% 100%);
}
.brand-word {
  font-family: var(--display); font-weight: 700; font-size: 19px;
  letter-spacing: .02em; text-transform: uppercase;
}
.nav { display: flex; align-items: stretch; }
.nav a {
  display: flex; align-items: center; padding: 0 20px;
  border-left: 1px solid var(--hairline);
  font-family: var(--display); font-weight: 300; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(var(--ink-rgb), .62);
  transition: all .15s ease-out;
}
.nav a:hover { color: var(--ink); background: rgba(var(--ink-rgb), .05); }
.nav a.nav-cta {
  padding: 0 22px; font-weight: 500; letter-spacing: .16em;
  color: var(--accent);
}
.nav a.nav-cta:hover { background: var(--accent); color: var(--bg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--display); font-weight: 500; font-size: 14px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 17px 28px; transition: all .15s ease-out;
}
.btn-solid { background: var(--accent); color: var(--bg); }
.btn-solid:hover { background: var(--accent-hi); color: var(--bg); }
.btn-ghost { color: var(--ink); border: 1px solid rgba(var(--ink-rgb), .3); }
.btn-ghost:hover {
  color: var(--ink); border-color: var(--ink);
  background: rgba(var(--ink-rgb), .06);
}
.btn-small { font-size: 13px; padding: 13px; text-align: center; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 132px 0 0; }
.hero-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(var(--ink-rgb), .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ink-rgb), .028) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.hero-map {
  position: absolute; left: -6%; right: -6%; top: 6%; bottom: -6%;
  width: 112%; height: 100%;
  opacity: 0; transition: opacity 1.1s ease;
  mask-image: radial-gradient(76% 86% at 50% 60%, #000 12%, transparent 80%);
  -webkit-mask-image: radial-gradient(76% 86% at 50% 60%, #000 12%, transparent 80%);
}
.hero-map.is-live { opacity: 1; }
.hero-pool {
  position: absolute; inset: 0;
  background: radial-gradient(44% 54% at 50% 60%, rgba(var(--glow), .12), transparent 72%);
  filter: blur(26px);
}
.hero-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(120% 85% at 50% 100%,
    rgba(var(--bg-rgb), .6), rgba(var(--bg-rgb), .1) 62%, transparent);
}
.hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  background: linear-gradient(180deg, transparent, var(--bg));
}
.hero-inner { position: relative; }
.hero-toprule {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; border-bottom: 1px solid var(--hairline); padding-bottom: 12px;
  animation: rrUp .3s cubic-bezier(.2, .7, .2, 1) both;
}
.mono-tag {
  font-family: var(--mono); font-weight: 400; font-size: 10px;
  letter-spacing: .02em; text-transform: uppercase;
  color: rgba(var(--ink-rgb), .55);
}
.mono-tag-accent { color: var(--accent); }
.hero-kicker {
  font-weight: 500; letter-spacing: .08em; color: var(--accent);
}
/* Umbrella H1 — 14ch breaks it at its own three sentences. */
.hero-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(46px, 9.2vw, 132px);
  line-height: .84; letter-spacing: -.015em; text-transform: uppercase;
  margin: 34px 0 0; max-width: 13ch;
  animation: rrUp .32s cubic-bezier(.2, .7, .2, 1) .05s both;
}
.hero-display-sub {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(22px, 3.4vw, 48px); line-height: 1.06;
  letter-spacing: -.005em; text-transform: uppercase;
  margin: 26px 0 0; color: rgba(var(--ink-rgb), .92);
  animation: rrUp .32s cubic-bezier(.2, .7, .2, 1) .14s both;
}
.hero-bar {
  height: 4px; background: var(--accent); margin: 30px 0 0;
  transform-origin: left;
  animation: rrWipe .3s cubic-bezier(.2, .7, .2, 1) .12s both;
}
.hero-row {
  display: grid; grid-template-columns: 1.25fr auto; gap: 48px;
  align-items: end; margin-top: 24px;
  animation: rrUp .32s cubic-bezier(.2, .7, .2, 1) .16s both;
}
.hero-sub {
  font-family: var(--body); font-weight: 400;
  font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.6; margin: 0;
  color: rgba(var(--ink-rgb), .68); max-width: 54ch;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-stats {
  display: flex; flex-wrap: wrap; margin-top: 56px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  animation: rrUp .32s cubic-bezier(.2, .7, .2, 1) .2s both;
}
.stat {
  padding: 20px 40px; border-right: 1px solid var(--hairline);
}
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; padding-right: 0; }
.stat-val {
  font-family: var(--mono); font-weight: 500; font-size: 22px;
  letter-spacing: -.04em;
}
.stat-val-accent { color: var(--accent); }
.stat-label {
  font-family: var(--mono); font-weight: 300; font-size: 9.5px;
  text-transform: uppercase; color: rgba(var(--ink-rgb), .5);
  margin-left: 12px;
}

/* ---------- Master punchcard ---------- */
.punch-strip { padding-top: 76px; }
.punch-strip .sec-head { margin-bottom: 26px; }
.punch-lede {
  font-family: var(--display); font-weight: 200;
  font-size: clamp(22px, 2.8vw, 38px); line-height: 1.24;
  margin: 0; max-width: 28ch;
}
.strip-head {
  display: flex; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--hairline); padding-bottom: 10px;
}
.strip-title {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: .2em; text-transform: uppercase;
}
.punch-row {
  display: flex; align-items: flex-start; flex-wrap: wrap;
  padding: 30px 0 0; row-gap: 24px;
}
.punch-block { display: flex; flex-direction: column; gap: 14px; }
.punch-seg { display: flex; gap: 18px; align-items: center; }
.punch-c {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(var(--ink-rgb), .3);
}
.punch-c.is-filled {
  border: 0; background: var(--accent);
  box-shadow: 0 0 20px rgba(var(--glow), .55);
}
.punch-note {
  font-family: var(--mono); font-weight: 300; font-size: 9px;
  text-transform: uppercase; color: rgba(var(--ink-rgb), .4);
}
.punch-div {
  width: 1px; height: 44px; background: rgba(var(--ink-rgb), .22);
  margin: 0 28px; flex: none;
}

/* ---------- Section scaffolding ---------- */
.section { padding: 104px 0 0; }
.sec-head {
  display: flex; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 10px; margin-bottom: 44px;
}
.sec-num {
  font-family: var(--mono); font-weight: 400; font-size: 10px;
  color: var(--accent);
}
.sec-name {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: .2em; text-transform: uppercase;
}

/* ---------- §T — T3's beats + step strip (absorbed §1 / §3) ----------
   The three beats and how-it-works were always describing T3; v2.1
   folds them into the T3 card instead of running them as page-level
   sections. Same hairline-bento / thin-rule idiom, one nest deeper. */
.beats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 30px;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.beat {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 22px 20px;
  transition: background .15s ease-out;
}
.beat:hover { background: rgba(var(--ink-rgb), .03); }
.beat-k {
  font-family: var(--mono); font-weight: 400; font-size: 10px;
  color: var(--accent);
}
.beat h4 {
  font-family: var(--display); font-weight: 500; font-size: 21px;
  line-height: 1.08; text-transform: uppercase; margin: 12px 0 10px;
}
.beat p {
  font-family: var(--body); font-weight: 400; font-size: 14.5px;
  line-height: 1.55; color: rgba(var(--ink-rgb), .62); margin: 0;
}
.visual-slot[hidden] { display: none; }

/* Accent pull line — the same left-rule idiom the §ST will-do close
   uses. Carries the T3 tagline and the founder fire line (cull 8/25). */
.pull-line {
  border-left: 3px solid var(--accent);
  margin-top: 30px; padding-left: 18px;
  font-family: var(--body); font-weight: 500; font-size: 17px;
  line-height: 1.6; color: var(--ink); max-width: 52ch;
}
.who-para.pull-line { max-width: 58ch; }

/* Mono kicker above a second beats grid (T3 manager/owner block). */
.beats-head {
  font-family: var(--mono); font-weight: 400; font-size: 10px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); margin: 34px 0 0;
}
.beats-head + .beats { margin-top: 14px; }

.steps-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 26px; margin-top: 30px;
}
.step-mini { border-top: 3px solid rgba(var(--ink-rgb), .2); padding-top: 14px; }
.step-mini.step-lead { border-top-color: var(--accent); }
.step-k {
  font-family: var(--mono); font-weight: 400; font-size: 10px;
  text-transform: uppercase; color: rgba(var(--ink-rgb), .45);
}
.step-mini p {
  font-family: var(--body); font-weight: 400; font-size: 14.5px;
  line-height: 1.55; color: rgba(var(--ink-rgb), .62); margin: 10px 0 0;
}

/* ---------- §4 Who's behind it ---------- */
.who-grid {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px;
  align-items: start;
}
.who-para {
  font-family: var(--body); font-weight: 400; font-size: 16.5px;
  line-height: 1.68; color: rgba(var(--ink-rgb), .64);
  margin: 26px 0 0; max-width: 58ch;
}
.who-name {
  margin-top: 26px; padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono); font-weight: 400; font-size: 10px;
  text-transform: uppercase; color: rgba(var(--ink-rgb), .5);
  max-width: 58ch;
}

/* ---------- §F Free door / §5 board headings ---------- */
.board-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.board-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 5.4vw, 76px); line-height: .92;
  text-transform: uppercase; margin: 0; max-width: 16ch;
}
.door-lead {
  font-family: var(--display); font-weight: 200;
  font-size: clamp(22px, 2.8vw, 38px); line-height: 1.24;
  margin: 44px 0 0; max-width: 34ch;
}
.door-para {
  font-family: var(--body); font-weight: 400; font-size: 16.5px;
  line-height: 1.68; color: rgba(var(--ink-rgb), .64);
  margin: 22px 0 0; max-width: 58ch;
}
.door-cta { margin-top: 36px; }
.door-grid {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px;
  margin-top: 44px; align-items: start;
}
.door-grid .door-lead { margin-top: 0; }

/* Spec-card — the thin-rule mono instrument used for the free-door
   taste-of-it menu (D-a) and the founder credential card (F-a). */
.spec-card { border: 1px solid var(--hairline); padding: 26px 24px; }
.spec-title {
  font-family: var(--mono); font-weight: 500; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 4px;
  border-bottom: 1px solid var(--hairline); padding-bottom: 14px;
}
.spec-checks p {
  font-family: var(--body); font-weight: 400; font-size: 15px;
  line-height: 1.55; color: rgba(var(--ink-rgb), .78);
  margin: 0; padding: 13px 0 13px 24px; position: relative;
}
.spec-checks p + p { border-top: 1px solid var(--hairline); }
.spec-checks p::before {
  content: '\2713'; position: absolute; left: 0; top: 13px;
  color: var(--accent); font-weight: 700;
}
.spec-rows p {
  font-family: var(--mono); font-weight: 400; font-size: 11.5px;
  letter-spacing: .03em; text-transform: uppercase; line-height: 1.5;
  color: rgba(var(--ink-rgb), .72); margin: 0; padding: 13px 0;
}
.spec-rows p + p { border-top: 1px solid var(--hairline); }

/* ---------- §T Founding board — the ascending tier stack ----------
   v2.1: the tiers ARE the site's "what it is", so each one gets a
   full-width row instead of a third of a 3-column grid — room for the
   epithet, the checkmark rows, the per-card invoice line, and (on T3)
   the absorbed beats + step strip. Reading order rises T3 → T2 → T1
   with the orange band as the T3→T2 escalator between them. */
.tier-intro {
  font-family: var(--display); font-weight: 200;
  font-size: clamp(20px, 2.4vw, 32px); line-height: 1.3;
  margin: 30px 0 0; color: rgba(var(--ink-rgb), .8);
}
.tier-row {
  display: grid; grid-template-columns: .82fr 1.6fr; gap: 52px;
  border-top: 1px solid var(--hairline);
  margin-top: 44px; padding-top: 34px;
}
.tier-rail,
.tier-body { min-width: 0; }
.tier-kick {
  font-family: var(--mono); font-weight: 500; font-size: 16px;
  letter-spacing: -.01em; line-height: 1.28; text-transform: uppercase;
  color: var(--accent); margin: 0;
}
.tier-epithet {
  font-family: var(--display); font-weight: 300; font-size: 15px;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(var(--ink-rgb), .45); margin: 8px 0 0;
}
.tier-price { display: flex; align-items: baseline; gap: 6px; margin: 20px 0 0; }
.tier-price-val {
  font-family: var(--mono); font-weight: 500; font-size: 38px;
  letter-spacing: -.05em; color: var(--accent);
}
.tier-price-per {
  font-family: var(--mono); font-weight: 300; font-size: 13px;
  color: rgba(var(--ink-rgb), .5);
}
.tier-price-line {
  font-family: var(--mono); font-weight: 500; font-size: 21px;
  letter-spacing: -.04em; line-height: 1.35; margin: 0;
  color: var(--accent);
}
.tier-price-stack { margin: 20px 0 0; }
.tier-terms {
  font-family: var(--mono); font-weight: 300; font-size: 10px;
  text-transform: uppercase; color: rgba(var(--ink-rgb), .5);
  margin: 10px 0 0;
}
.tier-proof {
  font-family: var(--body); font-weight: 500; font-size: 14.5px;
  color: rgba(var(--ink-rgb), .78); margin: 16px 0 0;
}
.tier-best {
  font-family: var(--body); font-weight: 400; font-size: 15px;
  line-height: 1.6; color: rgba(var(--ink-rgb), .62); margin: 16px 0 0;
}
.tier-head {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 3.2vw, 44px); line-height: 1.02;
  letter-spacing: -.005em; text-transform: uppercase;
  margin: 0 0 14px; max-width: 20ch;
}
.tier-face {
  font-family: var(--body); font-weight: 400; font-size: 16px;
  line-height: 1.6; color: rgba(var(--ink-rgb), .78); margin: 0;
  max-width: 62ch;
}
.tier-story {
  font-family: var(--body); font-weight: 400; font-size: 15.5px;
  line-height: 1.65; color: rgba(var(--ink-rgb), .66);
  margin: 16px 0 0; max-width: 62ch;
}
.tier-circles { display: flex; gap: 10px; margin: 22px 0 8px; }
.tier-circles .punch-c { width: 15px; height: 15px; }
.tier-open {
  font-family: var(--mono); font-weight: 300; font-size: 9px;
  text-transform: uppercase; color: rgba(var(--ink-rgb), .4);
}
.tier-detail { margin-top: 24px; }
.tier-detail summary {
  list-style: none; cursor: pointer;
  font-family: var(--mono); font-weight: 400; font-size: 10px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent);
  transition: color .15s ease-out;
}
.tier-detail summary::-webkit-details-marker { display: none; }
.tier-detail summary:hover { color: var(--accent-hi); }
.tier-detail .sum-open { display: none; }
.tier-detail[open] .sum-open { display: inline; }
.tier-detail[open] .sum-closed { display: none; }
.tier-rows {
  border-top: 1px solid var(--hairline);
  margin-top: 16px; padding-top: 18px;
  display: flex; flex-direction: column; gap: 11px;
  animation: rrFade .18s ease-out both;
}
/* §1.9 — what-you-get rows read as checkmarks, every tier. */
.tier-rows p {
  font-family: var(--body); font-size: 14.5px; line-height: 1.5;
  color: rgba(var(--ink-rgb), .68); margin: 0;
  padding-left: 24px; position: relative; max-width: 74ch;
}
.tier-rows p::before {
  content: '\2713'; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700;
}
.tier-gift {
  border-top: 1px solid var(--hairline);
  margin-top: 16px; padding-top: 14px;
  font-family: var(--body); font-size: 14.5px; line-height: 1.5;
  color: rgba(var(--ink-rgb), .82); max-width: 74ch;
}
/* T2 hours-math — invites the reader to do the arithmetic; states no
   figure of its own (copy law, ruled 2026-08-21). */
.tier-math {
  border-left: 1px solid var(--hairline);
  margin-top: 24px; padding: 4px 0 4px 22px;
  font-family: var(--body); font-weight: 400; font-size: 15.5px;
  line-height: 1.65; color: rgba(var(--ink-rgb), .7); max-width: 66ch;
}
/* Per-card invoice line — VERBATIM LAW (§3-C). */
.tier-invoice {
  border-left: 3px solid var(--accent);
  margin-top: 26px; padding: 16px 24px;
  font-family: var(--body); font-weight: 500; font-size: 16.5px;
  line-height: 1.6; color: rgba(var(--ink-rgb), .88);
  max-width: 72ch;
}
.tier-cta { display: inline-block; margin-top: 26px; padding: 15px 26px; }

/* ---------- Sunset band, Q&A ---------- */
.band-sunset {
  border-left: 1px solid var(--hairline);
  margin-top: 56px; padding: 18px 26px;
  font-family: var(--body); font-weight: 400; font-size: 15.5px;
  line-height: 1.65; color: rgba(var(--ink-rgb), .6);
  max-width: 72ch;
}
.qa { margin-top: 40px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.qa summary {
  list-style: none; cursor: pointer; padding: 17px 0;
  font-family: var(--display); font-weight: 300; font-size: 22px;
  text-transform: uppercase; color: rgba(var(--ink-rgb), .55);
  transition: color .15s ease-out;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--ink); }
.qa summary::before { content: '+ '; color: var(--accent); }
.qa[open] summary::before { content: '\2014\00a0'; }
.qa-a {
  font-family: var(--body); font-weight: 400; font-size: 16px;
  line-height: 1.65; color: rgba(var(--ink-rgb), .66);
  margin: 0; padding: 0 0 22px; max-width: 68ch;
}

/* ---------- §R Running today / roadmap ---------- */
.road-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; margin-top: 44px; }
.road-label {
  font-family: var(--mono); font-weight: 400; font-size: 10px;
  text-transform: uppercase; color: var(--accent); margin: 0 0 18px;
}
.road-today {
  font-family: var(--display); font-weight: 200;
  font-size: clamp(22px, 2.6vw, 34px); line-height: 1.3;
  margin: 0; color: rgba(var(--ink-rgb), .85);
}
.road-rows { display: flex; flex-direction: column; }
.road-rows p {
  border-top: 1px solid var(--hairline); margin: 0; padding: 14px 0;
  font-family: var(--body); font-weight: 400; font-size: 15.5px;
  line-height: 1.5; color: rgba(var(--ink-rgb), .68);
}
.road-rows p:last-child { border-bottom: 1px solid var(--hairline); }
.road-honesty {
  margin-top: 34px;
  font-family: var(--body); font-weight: 400; font-size: 15px;
  line-height: 1.6; color: rgba(var(--ink-rgb), .5); max-width: 70ch;
}

/* ---------- §V See it run (facade; hidden while empty) ---------- */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.video-facade { margin: 0; }
.video-poster {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  background: rgba(var(--ink-rgb), .04) center / cover no-repeat;
  border: 1px solid var(--hairline); cursor: pointer; position: relative;
}
.video-poster::after {
  content: '\25B6'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--accent);
}
.video-poster:hover { border-color: var(--accent); }
.video-facade iframe {
  width: 100%; aspect-ratio: 16 / 9; border: 0; display: block;
}
.video-facade figcaption {
  font-family: var(--mono); font-weight: 300; font-size: 9.5px;
  text-transform: uppercase; color: rgba(var(--ink-rgb), .5);
  margin-top: 10px;
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--hairline); margin-top: 104px; }
.footer-inner {
  padding: 26px 40px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-glyph {
  width: 22px; height: 10px; background: rgba(var(--ink-rgb), .5);
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 82% 100%, 50% 26%, 18% 100%);
}
.footer-word {
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: .02em; text-transform: uppercase;
  color: rgba(var(--ink-rgb), .6);
}
.footer-lines {
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-end; text-align: right;
}
.footer-legal {
  font-family: var(--mono); font-weight: 300; font-size: 9.5px;
  color: rgba(var(--ink-rgb), .36);
}
.footer-contact {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 10px;
  font-family: var(--mono); font-weight: 300; font-size: 9.5px;
  letter-spacing: .04em; text-transform: uppercase;
}
.footer-contact a { color: rgba(var(--ink-rgb), .5); }
.footer-contact a:hover { color: var(--accent); }
.footer-sep { color: rgba(var(--ink-rgb), .28); }
.social-row { display: flex; gap: 22px; }
/* The author display:flex above outranks the UA style for [hidden], so the
   flagged-off social row would still sit in the footer as a zero-width flex
   item — stealing the right-hand slot from the contact block under
   space-between. Same guard .visual-slot already carries. */
.social-row[hidden] { display: none; }
.social-link {
  font-family: var(--mono); font-weight: 300; font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(var(--ink-rgb), .5);
}
.social-link:hover { color: var(--ink); }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  gap: 10px; padding: 10px 14px;
  background: rgba(var(--bg-rgb), .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--hairline);
}
.sticky-cta .btn {
  flex: 1; font-size: 11px; letter-spacing: .1em;
  padding: 13px 6px; text-align: center; white-space: nowrap;
}

/* ---------- Locked-block overrides (locked bytes NEVER edited) --------
   Two v2.1 calls land on Broadside blocks whose text is byte-locked.
   Both are carried here as [data-lock]-scoped !important overrides so
   the blocks stay byte-diffable against the bundle forever:

   §ST EQUALIZATION (§1.4) — the won't-do column rendered at weight 200
   and 50–55% ink while the will-do column ran weight 700 at full ink.
   Honesty was whispering. Both columns now render at the same weight
   and the same brightness. Not one locked byte moved to do it.

   §6 QUOTE PAIRING (§1.12, size-matched at the 8/25 cull, R7) — the
   pull-quote opened with a 96px accent quote mark and never closed.
   The closer is drawn as a ::after on the quote paragraph, at the SAME
   96px as the locked opener (the 1.25em first cut is what the operator
   flagged as "different sizes"); it steps to 48px alongside the opener
   at ≤560px. Operator veto on preview = delete these rules. */
[data-lock="s2"] > div > div:nth-of-type(2) > div:first-child > h2 {
  font-weight: 700 !important;
  color: var(--ink) !important;
}
[data-lock="s2"] > div > div:nth-of-type(2) > div:first-child > div > div {
  color: var(--ink) !important;
}
[data-lock="s6"] > div > div > div > p::after {
  content: '\201D';
  font-family: var(--display); font-weight: 700;
  font-size: 96px; line-height: 0;
  vertical-align: -.38em; margin-left: .08em;
  color: var(--accent);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .beats { grid-template-columns: 1fr; }
  .steps-strip { grid-template-columns: 1fr; gap: 22px; }
  /* The tier rail stacks above its body: kicker → price → scarcity,
     then the pitch, then the ask. Reading order holds on a phone. */
  .tier-row { grid-template-columns: 1fr; gap: 30px; }
  .door-grid,
  .who-grid { grid-template-columns: 1fr; gap: 40px; }
  .road-grid { grid-template-columns: 1fr; gap: 44px; }
  .video-grid { grid-template-columns: 1fr; }
  .hero-row { grid-template-columns: 1fr; gap: 28px; align-items: start; }
}

@media (max-width: 700px) {
  .wrap { padding: 0 22px; }
  .nav a { display: none; }
  .nav a.nav-cta { display: flex; }
  .hero { padding-top: 108px; }
  /* Two mono tags collide on a phone rule — stack them. */
  .hero-toprule { flex-direction: column; align-items: flex-start; gap: 7px; }
  .stat { padding: 16px 20px; }
  .stat:first-child { padding-left: 0; }
  .punch-c { width: 18px; height: 18px; }
  .punch-seg { gap: 12px; }
  .punch-div { margin: 0 16px; height: 34px; }
  .footer-inner { padding: 26px 22px; }
  .sticky-cta { display: flex; }
  body { padding-bottom: 66px; }
  .tier-row { margin-top: 36px; padding-top: 28px; }
  .tier-invoice { padding: 14px 18px; }
  .tier-cta { display: block; text-align: center; }
  .spec-card { padding: 22px 20px; }
  .footer-inner { justify-content: flex-start; }
  .footer-lines { align-items: flex-start; text-align: left; }
  .footer-contact { justify-content: flex-start; }

  /* Locked Broadside blocks — inline styles adapted via scoped
     !important overrides only; locked bytes are never edited. */
  [data-lock="s2"] > div,
  [data-lock="s6"] > div { padding: 72px 22px 0 !important; }
  [data-lock="s2"] > div > div:nth-of-type(2) {
    grid-template-columns: 1fr !important; gap: 40px !important;
  }
  [data-lock="sB"] > div > div {
    padding-left: 22px !important; padding-right: 22px !important;
  }
  [data-lock="sC"] > div > div {
    padding-left: 22px !important; padding-right: 22px !important;
  }
}

@media (max-width: 560px) {
  [data-lock="s6"] > div > div {
    grid-template-columns: 1fr !important; gap: 14px !important;
  }
  [data-lock="s6"] > div > div > span {
    font-size: 48px !important;
  }
  /* the drawn closer steps down with the locked opener */
  [data-lock="s6"] > div > div > div > p::after {
    font-size: 48px;
  }
}

/* ---------- Legal pages (Terms / Privacy) ---------- */
.legal-main { padding: 56px 0 100px; }
.legal-wrap { max-width: 760px; }
.legal-banner {
  display: inline-block; margin: 0 0 28px;
  padding: 8px 14px; border: 1px solid var(--hairline); border-radius: 3px;
  font-family: var(--mono); font-weight: 400; font-size: 10.5px;
  letter-spacing: .04em; text-transform: uppercase;
  color: rgba(var(--ink-rgb), .55);
}
.legal-h1 {
  font-family: var(--display); font-weight: 300; font-size: clamp(28px, 4vw, 42px);
  margin: 0 0 8px;
}
.legal-updated {
  font-family: var(--mono); font-weight: 300; font-size: 10px;
  color: rgba(var(--ink-rgb), .45); margin: 0 0 40px;
}
.legal-h2 {
  font-family: var(--display); font-weight: 500; font-size: 17px;
  color: var(--accent); margin: 38px 0 12px;
  border-bottom: 1px solid var(--hairline); padding-bottom: 8px;
}
.legal-p {
  font-family: var(--body); font-weight: 400; font-size: 15px; line-height: 1.65;
  color: rgba(var(--ink-rgb), .82); margin: 0 0 16px;
}
.legal-list { margin: 0 0 16px; padding-left: 20px; }
.legal-list li {
  font-family: var(--body); font-weight: 400; font-size: 15px; line-height: 1.65;
  color: rgba(var(--ink-rgb), .82); margin-bottom: 8px;
}
.legal-p a, .legal-list a { color: var(--accent); }
.legal-p a:hover, .legal-list a:hover { color: var(--accent-hi); }
.legal-back {
  display: inline-block; margin-top: 48px;
  font-family: var(--mono); font-weight: 400; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(var(--ink-rgb), .55);
}
.legal-back:hover { color: var(--accent); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero-map { opacity: 1; }
}