/* Black Cactus briefings — cactuspace.com design system.
   Read from the system of record on 2026-10-21: the Canva brand kit
   "[Black Cactus] January 2024 | Brand Guidelines" (design DAF1l34W1_A, 29pp),
   which is the only authoritative source for this brand. Its palette, verbatim:

     BLACK             #252426   type, rules, and the dark surface
     WHITE             #FFFFFF   the light page ground
     OLIVE GREEN       #9CB151   secondary accent
     PRICKLY PEAR RED  #EA353F   primary accent
     BRIGHT GREEN      #DBF225   high-contrast accent

   Contrast measured, not assumed (WCAG 2.1 against the surface each is used on):
     white on BLACK 15.45  ·  BRIGHT on BLACK 12.32  ·  OLIVE on BLACK 6.49  — all AA
     RED on WHITE    4.13  — AA for large text ONLY, so red is display type, rules
                             and annotation strokes, never body copy
     OLIVE on WHITE  2.38  ·  BRIGHT on WHITE 1.25   — both FAIL, so neither green
                             ever sits on the light ground
   Hence the two zones: the dark zone carries the greens, the light zone carries red.

   Three tokens are DERIVED, not brand values, and are marked below. They exist only
   because the brand kit defines no light neutral and no accessible small-text accent.

   Type: the brand kit specifies Bristol 48 (header), FB Africka 24 (subhead) and
   Poppins Light (body). Bristol and FB Africka are Canva-only faces with no webfont
   release, so headings use Poppins 600/700 tightened — the one brand face that exists
   on the web. To use the real faces, drop licensed woff2 files in public/fonts/ and
   change --display here; nothing else refers to them.
   IBM Plex Mono carries eyebrows, labels and data. The brand kit names no monospace;
   it is a derived choice, matched to the kit's "sci-fi / technical" identity words
   and consistent with the other TLE properties.
   Radius is 0. Depth is a hard 6px offset in BLACK, never a blur. */

:root {
  --ink: #252426;            /* brand BLACK */
  --paper: #ffffff;          /* brand WHITE */
  --panel: #f2f1ef;          /* DERIVED stone — the kit defines no light neutral (13.69:1 w/ ink) */
  --oxblood: #252426;        /* the dark surface IS brand BLACK */
  --oxblood-deep: #1a191b;   /* DERIVED deeper black, for the night-sky gradient only */
  --orange: #c11f2c;         /* DERIVED darker prickly pear (6.0:1 both ways) — buttons, small red text */
  --red: #ea353f;            /* brand PRICKLY PEAR RED — large display type and annotations only */
  --amber: #dbf225;          /* brand BRIGHT GREEN — annotations on the dark zone only */
  --olive: #9cb151;          /* brand OLIVE GREEN — on the dark surface, or as a fill behind ink */
  --olive-ink: #5e6d31;      /* DERIVED darker olive (5.66:1 on white) — small olive-family text */
  --taupe: #b9b5ad;          /* rules and diagram strokes only — too light for body text */
  --muted-paper: #5f5c58;    /* muted type on the light ground */
  --muted-ox: #d6d3cc;       /* muted type on BLACK */

  --display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --body: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --wrap: 1120px;
  --shadow: 6px 6px 0 var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
/* .btn and .bub-typing set an explicit display, which beats the UA stylesheet's [hidden] rule,
   so element.hidden silently does nothing without this. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 300 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
strong, b { font-weight: 600; }
p { margin: 0 0 12px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
section[id] { scroll-margin-top: 80px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; }
.mid { max-width: 940px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- zones: the brand's two section colours ---------- */
.zone-dark { background: var(--oxblood); color: var(--panel); }
.zone-dark h1, .zone-dark h2, .zone-dark h3 { color: var(--panel); }
.zone-fade { height: 0; }
.zone-light { background: var(--paper); color: var(--ink); }
section { padding: 56px 0; }
@media (min-width: 768px) { section { padding: 76px 0; } }

/* ---------- type helpers ---------- */
.kicker {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--orange);
}
.zone-dark .kicker { color: var(--amber); }
.mono { font-family: var(--mono); letter-spacing: .04em; }
.lead { font-size: 18px; line-height: 1.6; color: var(--muted-paper); }
.zone-dark .lead { color: var(--muted-ox); }
.center { text-align: center; }
.muted { color: var(--muted-paper); }
.zone-dark .muted { color: var(--muted-ox); }
.small { font-size: 14px; }
.tnum { font-variant-numeric: tabular-nums; }
.grad { color: var(--amber); font-style: italic; }

/* ---------- surfaces: 1px ink rule, no radius, hard shadow on lift ---------- */
.glass { background: var(--oxblood-deep); border: 1px solid rgba(244, 240, 230, .25); }
.paper-card { background: var(--panel); border: 1px solid var(--ink); }

/* ---------- buttons: mono, uppercase, square ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 22px; border: 1px solid var(--ink); border-radius: 0;
  font: 500 14px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: translate .2s ease, box-shadow .2s ease;
}
.btn:hover { translate: 0 -2px; box-shadow: 4px 4px 0 var(--ink); }
.btn-amber { background: var(--orange); color: var(--paper); }
.btn-ghost { background: transparent; border-color: var(--panel); color: var(--panel); }
.btn-ghost:hover { box-shadow: 4px 4px 0 var(--ink); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-sm { padding: 10px 14px; font-size: 12px; }
.icon { width: 17px; height: 17px; flex: none; }
.icon-sm { width: 14px; height: 14px; flex: none; }

/* ---------- sticky bars ---------- */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--ink); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 62px; }
.brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink);
  font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.brand-mark {
  display: grid; place-items: center; width: 30px; height: 30px;
  background: var(--oxblood); color: var(--panel);
  font: 500 11px/1 var(--mono); letter-spacing: .06em;
}
.brand-name { display: none; }
@media (min-width: 640px) { .brand-name { display: inline; } }
.topbar .toggle { display: none; }
@media (min-width: 900px) { .topbar .toggle { display: grid; } }

.bottombar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  padding: 9px 16px calc(9px + env(safe-area-inset-bottom, 0px));
  background: var(--paper); border-top: 1px solid var(--ink);
}
.bottombar p { margin: 0 0 6px; text-align: center; }
@media (min-width: 900px) { .bottombar { display: none; } }
body { padding-bottom: 88px; }
@media (min-width: 900px) { body { padding-bottom: 0; } }

/* ---------- perspective toggle: two square tabs ---------- */
.toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); }
.toggle-thumb {
  position: absolute; inset: 0 auto 0 0; width: 50%;
  background: var(--ink); transition: transform .25s ease;
}
.toggle[data-view="team"] .toggle-thumb { transform: translateX(100%); }
.toggle button {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 12px; border: 0; background: none; cursor: pointer;
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap; transition: color .2s;
}
.toggle button[aria-pressed="true"] { color: var(--paper); }
.zone-dark .toggle, .bottombar .toggle { border-color: var(--ink); }

/* ---------- headers ---------- */
.step-tag {
  display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px;
  border: 1px solid currentColor; color: var(--amber);
}
.zone-light .step-tag { color: var(--orange); }
.step-num {
  display: grid; place-items: center; width: 20px; height: 20px;
  background: currentColor; font: 500 11px/1 var(--mono);
}
.step-num::after { content: attr(data-n); color: var(--oxblood); }
.head h2 { margin-top: 18px; font-size: 32px; }
.head p { margin-top: 14px; }
@media (min-width: 768px) { .head h2 { font-size: 44px; } }
.sec-kicker { color: var(--orange); }
.zone-dark .sec-kicker { color: var(--amber); }

/* ---------- annotations: the site's own device — mono label + thin drawn arrow ---------- */
.anno { display: flex; align-items: flex-end; gap: 4px; color: var(--amber); pointer-events: none; user-select: none; }
.zone-light .anno { color: var(--orange); }
.anno span {
  font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap; padding-bottom: 6px;
}
.anno svg { width: 54px; height: 50px; flex: none; }
.anno path { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.anno .trail { stroke-dasharray: 150; stroke-dashoffset: 150; }
.is-visible .anno .trail { animation: draw 1.1s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.anno-lead { justify-content: center; width: fit-content; margin: 0 auto 4px; }
@media (min-width: 768px) { .anno-lead { margin-left: 2px; margin-right: auto; } }

/* ---------- reveal: the site's tl-rise ---------- */
.reveal { opacity: 0; translate: 0 24px; transition: opacity .7s cubic-bezier(.2,.8,.2,1), translate .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; translate: 0 0; }

/* ---------- grids ---------- */
.grid { display: grid; gap: 18px; }
.g2, .g3 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3, 1fr); } }
.mt-s { margin-top: 24px; } .mt-m { margin-top: 40px; } .mt-l { margin-top: 56px; }

/* ---------- step 1 view cards ---------- */
.view-card {
  position: relative; display: block; width: 100%; padding: 24px; text-align: left;
  color: var(--panel); font: inherit; cursor: pointer;
  background: var(--oxblood-deep); border: 1px solid rgba(244, 240, 230, .3);
  transition: translate .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.view-card:hover { translate: 0 -6px; box-shadow: var(--shadow); }
.view-card[aria-pressed="true"] { border-color: var(--amber); box-shadow: var(--shadow); }
.view-card h3 { margin-top: 10px; font-size: 24px; color: var(--panel); }
.view-card .tick {
  position: absolute; top: 20px; right: 20px; display: grid; place-items: center;
  width: 24px; height: 24px; border: 1px solid rgba(244, 240, 230, .4); color: transparent;
}
.view-card[aria-pressed="true"] .tick { border-color: var(--amber); background: var(--amber); color: var(--oxblood); }
.card-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid currentColor; color: var(--muted-ox); }
.view-card[aria-pressed="true"] .card-icon { color: var(--amber); }
.ticklist { margin-top: 18px; display: grid; gap: 10px; font-size: 16px; color: var(--muted-ox); }
.ticklist li { display: flex; gap: 10px; }
.ticklist svg { color: var(--amber); margin-top: 4px; }

/* ---------- video ---------- */
.video { overflow: hidden; border: 1px solid var(--ink); background: var(--ink); }
.zone-dark .video { border-color: rgba(244, 240, 230, .3); }
.video-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; }
.video-frame > iframe, .video-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.poster-art { position: absolute; inset: 0; display: flex; gap: 10px; padding: 14px; background: var(--panel); }
.poster-rail { display: none; width: 16%; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--ink); }
@media (min-width: 640px) { .poster-rail { display: flex; } }
.poster-rail i { height: 8px; background: var(--taupe); }
.poster-dots { margin-top: auto; display: flex; gap: 5px; }
.poster-dots i { width: 13px; height: 13px; border: 1px solid var(--ink); }
.poster-tiles { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.poster-tiles div { display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: 8px; border: 1px solid var(--ink); background: var(--paper); }
.poster-tiles i { height: 4px; background: var(--ink); }
.poster-tiles i + i { width: 55%; background: var(--taupe); }
.poster-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(23, 21, 15, .55), transparent 55%); }
.play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 64px; height: 64px;
  background: var(--orange); color: var(--paper); border: 1px solid var(--ink);
  transition: translate .2s ease, box-shadow .2s ease;
}
.poster:hover .play { translate: -50% calc(-50% - 3px); box-shadow: var(--shadow); }
@media (min-width: 640px) { .play { width: 76px; height: 76px; } }
.play svg { width: 24px; height: 24px; margin-left: 3px; fill: currentColor; }
.dur {
  position: absolute; right: 12px; bottom: 12px; padding: 4px 8px;
  background: var(--ink); color: var(--paper);
  font: 500 11px/1 var(--mono); letter-spacing: .08em;
}
.head-bubble { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 9px; }
.head-av {
  position: relative; display: grid; place-items: center; width: 50px; height: 50px;
  background: var(--oxblood); border: 1px solid var(--ink); color: var(--panel);
  font: 500 15px/1 var(--mono); letter-spacing: .06em;
}
@media (min-width: 640px) { .head-av { width: 68px; height: 68px; font-size: 19px; } }
.head-label {
  display: none; padding: 5px 10px; background: var(--ink); color: var(--paper);
  font: 500 11px/1.4 var(--mono); letter-spacing: .06em;
}
@media (min-width: 640px) { .head-label { display: inline; } }
.speed { position: absolute; right: 12px; top: 12px; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--ink); }
.speed button {
  border: 0; background: none; cursor: pointer; padding: 4px 7px;
  font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--panel);
}
.speed button[aria-pressed="true"] { background: var(--amber); color: var(--ink); }
.video-soon { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; background: var(--panel); color: var(--ink); }
.video-soon h4 { margin-top: 10px; font-size: 20px; }
.video-soon svg { color: var(--orange); }
.video-soon .lead { color: var(--muted-paper); }
.video-note { display: flex; gap: 9px; justify-content: center; margin-top: 16px; font-size: 15px; }
.video-note svg { color: var(--amber); margin-top: 4px; }

/* ---------- step 3 phone ---------- */
.phone { width: 100%; max-width: 310px; margin: 0 auto; padding: 10px; background: var(--ink); }
.phone-in { overflow: hidden; background: var(--paper); color: var(--ink); }
.phone-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; background: var(--panel); border-bottom: 1px solid var(--ink); }
.phone-top .who { text-align: center; }
.phone-av { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto; background: var(--oxblood); color: var(--panel); font: 500 12px/1 var(--mono); }
.phone-top p { margin: 5px 0 0; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.thread { display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; min-height: 280px; padding: 14px 12px; font-size: 15px; }
.bub { max-width: 84%; padding: 9px 12px; border: 1px solid var(--ink); }
.bub-in { align-self: flex-start; background: var(--panel); }
.bub-out { align-self: flex-end; background: var(--oxblood); color: var(--panel); }
.bub-typing { align-self: flex-end; display: flex; gap: 4px; padding: 12px; border: 1px solid var(--ink); background: var(--panel); }
.bub-typing i { width: 6px; height: 6px; background: var(--muted-paper); animation: blink 1.1s ease-in-out infinite; }
.bub-typing i:nth-child(2) { animation-delay: .15s; }
.bub-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.delivered { align-self: flex-end; margin: 0; display: flex; gap: 4px; align-items: center; font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-paper); }
.stamp { margin: 0; text-align: center; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-paper); }
.phone-input { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--ink); }
.phone-input span:first-child { flex: 1; padding: 7px 10px; border: 1px solid var(--taupe); font-size: 14px; color: var(--muted-paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-send { display: grid; place-items: center; width: 26px; height: 26px; background: var(--orange); color: var(--paper); font-size: 13px; }

/* ---------- section 01 flow + math ---------- */
.flow { position: relative; display: grid; gap: 16px; padding-left: 46px; border-left: 1px solid rgba(244, 240, 230, .3); }
.flow li { position: relative; }
.flow .n {
  position: absolute; left: -64px; top: 20px; display: grid; place-items: center;
  width: 36px; height: 36px; background: var(--oxblood); border: 1px solid var(--muted-ox);
  color: var(--panel); font: 500 13px/1 var(--mono);
}
.flow .glass { display: flex; gap: 15px; padding: 20px; }
.flow svg { color: var(--amber); margin-top: 3px; }
.flow strong { display: block; font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--panel); }
.arrow-down { display: block; margin: 20px auto; color: var(--muted-ox); }
.bar { display: flex; height: 46px; border: 1px solid rgba(244, 240, 230, .3); font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.bar div { display: flex; align-items: center; justify-content: center; gap: 3px; overflow: hidden; white-space: nowrap; transition: width .8s ease; }
.bar-strategy { background: var(--amber); color: var(--ink); }
.bar-format { flex: 1; background: var(--oxblood-deep); color: var(--muted-ox); }
.split { display: grid; gap: 16px; margin-top: 18px; }
@media (min-width: 560px) { .split { grid-template-columns: 1fr 1fr; } }
.split div { padding: 18px; border: 1px solid rgba(244, 240, 230, .3); font-size: 15px; color: var(--muted-ox); }
.split .s1 { border-left: 4px solid var(--amber); }
.split .s2 { border-left: 4px solid var(--taupe); }
.split b { display: block; font: 700 26px/1.1 var(--display); color: var(--panel); margin-bottom: 4px; }
.reclaimed { padding: 30px 24px; text-align: center; border: 1px solid var(--amber); }
.reclaimed svg { color: var(--amber); }
.reclaimed .big { font: 700 52px/1 var(--display); color: var(--panel); margin: 14px 0 6px; }

/* ---------- old vs new ---------- */
.vs { padding: 24px; border: 1px solid rgba(244, 240, 230, .3); }
.vs h3 { margin-top: 10px; font-size: 24px; }
.vs-old { border-left: 4px solid var(--taupe); }
.vs-new { border-left: 4px solid var(--amber); }
.vs ul { margin-top: 20px; display: grid; gap: 14px; }
.vs li { display: flex; gap: 12px; color: var(--muted-ox); }
.vs-new li { color: var(--panel); }
.mark { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border: 1px solid currentColor; }
.mark-yes { color: var(--amber); }
.mark-no { color: var(--taupe); }
.zone-light .mark-yes { color: var(--orange); }
.zone-light .mark-no { color: var(--muted-paper); }

/* ---------- estimator ---------- */
.est { display: grid; gap: 28px; padding: 24px; }
@media (min-width: 900px) { .est { grid-template-columns: 1fr 1.05fr; padding: 32px; } }
.field { display: block; margin-bottom: 20px; }
.field > span { display: flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-ox); }
.field svg { color: var(--amber); }
.field select {
  width: 100%; margin-top: 10px; padding: 14px 40px 14px 14px; border-radius: 0;
  border: 1px solid var(--muted-ox); background-color: var(--oxblood); color: var(--panel);
  font: 400 17px/1.2 var(--body); appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0D2C4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 18px;
}
.field select:hover { border-color: var(--amber); }
.est-out { display: flex; flex-direction: column; gap: 22px; padding: 24px; background: var(--panel); color: var(--ink); border: 1px solid var(--ink); box-shadow: var(--shadow); }
.est-out .kicker { color: var(--orange); }
.est-out .lead { color: var(--muted-paper); }
.est-out .big { font: 700 56px/1 var(--display); margin: 10px 0 6px; }
.est-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.est-stats div { padding: 14px; border: 1px solid var(--ink); }
.est-stats b { display: block; font: 700 24px/1.1 var(--display); }
.est-stats span { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-paper); }

/* ---------- whiteboard poster ---------- */
.wb { position: absolute; inset: 0; background: var(--paper); }
.wb svg { width: 100%; height: 100%; }

/* ---------- evidence table ---------- */
.ev { overflow: hidden; }
.ev-top { display: flex; align-items: center; gap: 11px; padding: 15px 20px; border-bottom: 1px solid var(--ink); background: var(--panel); font-size: 15px; }
.ev-top svg { color: var(--orange); }
.ev-row { display: grid; grid-template-columns: 1fr 1fr; font-size: 15px; }
@media (min-width: 700px) { .ev-row { grid-template-columns: 1.05fr 1fr 1fr; } }
.ev-row > * { padding: 15px 16px; border-bottom: 1px solid var(--taupe); margin: 0; }
.ev-metric {
  grid-column: span 2; background: var(--panel);
  font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-paper);
}
@media (min-width: 700px) {
  .ev-metric { grid-column: auto; background: none; font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); }
}
.ev-old { display: flex; gap: 10px; color: var(--muted-paper); border-right: 1px solid var(--taupe); }
.ev-new { display: flex; gap: 10px; color: var(--ink); }
.ev-head-old { background: var(--panel); border-right: 1px solid var(--ink); }
.ev-head-new { background: var(--oxblood); color: var(--panel); }
.ev-head-new .kicker { color: var(--panel); }
.ev-foot { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 22px; }
@media (min-width: 640px) { .ev-foot { flex-direction: row; justify-content: space-between; } }

/* ---------- activation hub ---------- */
.hub-top { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--ink); }
@media (min-width: 640px) { .hub-top { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.hub-count { font: 700 56px/1 var(--display); }
.hub-sync { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--ink); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hub li { display: flex; align-items: center; gap: 15px; padding: 16px 0; border-top: 1px solid var(--taupe); }
.hub li:first-child { border-top: 0; }
.hub-ic { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 1px solid var(--ink); }
.hub-body { flex: 1; min-width: 0; }
.hub-body .r1 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hub-body strong { font-family: var(--display); font-size: 18px; font-weight: 700; }
.hub-body .n { font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--muted-paper); }
.hub-body .d { margin: 3px 0 0; font-size: 14px; color: var(--muted-paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track { margin-top: 10px; height: 6px; border: 1px solid var(--taupe); overflow: hidden; }
.track i { display: block; height: 100%; width: 0; background: var(--orange); transition: width 1s ease; }
.is-visible .track i { width: 100%; }

/* ---------- ecosystem: the site's own mono-labelled line art ---------- */
.eco { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1; }
.eco > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.eco-ring { fill: none; stroke: var(--taupe); stroke-width: .3; }
.eco-line { stroke: var(--taupe); stroke-width: .6; }
.eco-hub {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: 128px; padding: 16px; text-align: center;
  background: var(--oxblood); color: var(--panel); border: 1px solid var(--ink); box-shadow: var(--shadow);
}
@media (min-width: 560px) { .eco-hub { width: 158px; } }
.eco-hub .m { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--amber); color: var(--amber); }
.eco-hub strong { font: 700 16px/1.2 var(--display); }
.eco-node {
  position: absolute; translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 98px; padding: 10px; text-align: center;
  background: var(--paper); border: 1px solid var(--ink);
}
@media (min-width: 560px) { .eco-node { width: 126px; padding: 12px; } }
.eco-node svg { color: var(--orange); }
.eco-node strong { font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.eco-node span { display: none; font-size: 13px; color: var(--muted-paper); }
@media (min-width: 560px) { .eco-node span { display: block; } }

/* ---------- research cards / pillars / agenda / library ---------- */
.research { display: flex; flex-direction: column; padding: 24px; height: 100%; transition: translate .25s ease, box-shadow .25s ease; }
.research:hover { translate: 0 -6px; box-shadow: var(--shadow); }
.research svg { color: var(--orange); }
.research .stat { font: 700 50px/1 var(--display); margin: 14px 0 4px; }
.research .lab { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--oxblood); }
.research .body { flex: 1; margin: 14px 0 0; font-size: 15px; color: var(--muted-paper); }
.research .src { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--taupe); font: 500 11px/1.5 var(--mono); letter-spacing: .04em; }
.research .src a { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--muted-paper); text-decoration: underline; text-underline-offset: 3px; }
.research .src a:hover { color: var(--oxblood); }
.research .caveat { margin: 8px 0 0; font-size: 13px; font-style: italic; color: var(--muted-paper); }

.pillars { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
@media (min-width: 900px) { .pillars { flex-direction: row; align-items: stretch; } }
.pillar { flex: 1; padding: 24px; }
.pillar .n { font: 500 12px/1 var(--mono); letter-spacing: .12em; color: var(--orange); }
.pillar h3 { margin-top: 10px; font-size: 24px; }
.pillar p { margin: 12px 0 0; font-size: 15px; color: var(--muted-paper); }
.pillar-arrow { align-self: center; color: var(--taupe); rotate: 90deg; }
@media (min-width: 900px) { .pillar-arrow { rotate: none; } }

.agenda > div { display: flex; gap: 20px; padding: 22px; border-top: 1px solid var(--taupe); }
.agenda > div:first-child { border-top: 0; }
.agenda .n { font: 500 13px/1.4 var(--mono); letter-spacing: .1em; color: var(--orange); }
.agenda strong { display: block; font: 700 20px/1.25 var(--display); }
.agenda p { margin: 7px 0 0; font-size: 15px; color: var(--muted-paper); }
.agenda-foot { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 22px; background: var(--oxblood); color: var(--panel); text-align: center; }
.agenda-foot .lead { color: var(--muted-ox); }
@media (min-width: 640px) { .agenda-foot { flex-direction: row; text-align: left; } }

.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.filters button {
  padding: 9px 16px; border: 1px solid var(--ink); background: var(--paper);
  font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); cursor: pointer; transition: translate .2s ease, box-shadow .2s ease;
}
.filters button:hover { translate: 0 -2px; box-shadow: 4px 4px 0 var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lib { display: grid; gap: 18px; }
@media (min-width: 640px) { .lib { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .lib { grid-template-columns: repeat(3, 1fr); } }
.lib article { transition: translate .25s ease, box-shadow .25s ease; }
.lib article:hover { translate: 0 -6px; box-shadow: var(--shadow); }
.lib .thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--ink); }
.lib .thumb .pill { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid currentColor; }
.lib .thumb.case { background: var(--oxblood); color: var(--panel); }
.lib .thumb.workshop { background: var(--orange); color: var(--paper); }
.lib .thumb.playbook { background: var(--ink); color: var(--panel); }
.lib .meat { padding: 20px; }
.lib .chip { display: inline-block; padding: 4px 9px; border: 1px solid currentColor; font: 500 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.chip-case { color: var(--oxblood); }
.chip-workshop { color: var(--orange); }
.chip-playbook { color: var(--muted-paper); }
.lib h3 { margin-top: 14px; font-size: 21px; }
.lib p { margin: 9px 0 0; font-size: 15px; color: var(--muted-paper); }
.lib .soon { margin-top: 16px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-paper); }

/* ---------- final CTA + footer ---------- */
.final { padding: 52px 24px; background: var(--oxblood); color: var(--panel); border: 1px solid var(--ink); box-shadow: var(--shadow); text-align: center; }
.final h2 { margin-top: 14px; font-size: 34px; color: var(--panel); }
@media (min-width: 768px) { .final h2 { font-size: 48px; } }
.final .kicker { color: var(--amber); }
.final .lead { margin: 18px auto 0; max-width: 540px; color: var(--muted-ox); }
.final-btns { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
@media (min-width: 640px) { .final-btns { flex-direction: row; justify-content: center; } }
.upsell { margin: 28px auto 0; padding-top: 22px; border-top: 1px solid rgba(244, 240, 230, .3); max-width: 560px; font-size: 15px; color: var(--muted-ox); }
.upsell a { color: var(--amber); text-decoration: underline; text-underline-offset: 4px; }

footer { padding: 32px 0 38px; border-top: 1px solid var(--ink); font: 500 12px/1.6 var(--mono); letter-spacing: .06em; color: var(--muted-paper); }
.foot-in { display: flex; flex-direction: column; align-items: center; gap: 16px; }
@media (min-width: 640px) { .foot-in { flex-direction: row; justify-content: space-between; } }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; text-transform: uppercase; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }
.totop { display: inline-flex; align-items: center; gap: 6px; color: var(--orange); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; translate: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .track i { width: 100%; }
}

/* Published tiers in the final CTA. That panel is the DARK surface, not the light zone, so
   these are measured against BLACK #252426, not against paper:
     BRIGHT GREEN #DBF225 12.32  the price figure
     --muted-ox   #D6D3CC 10.34  the tier label
     --taupe      #B9B5AD  7.56  the rules
   The first version of this block used --muted-paper (2.32) and --orange (2.58) on that panel,
   both of which FAIL; keep any change to it measured against the dark ground. */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin-top: 26px;
  border: 2px solid var(--taupe);
}
.tiers .tier { padding: 16px 14px; border-right: 2px solid var(--taupe); }
.tiers .tier:last-child { border-right: 0; }
.tier-name {
  margin: 0; font-family: var(--mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted-ox);
}
.tier-price {
  margin: 8px 0 0; font-family: var(--display); font-weight: 700;
  font-size: 28px; line-height: 1; color: var(--amber);
}
.tier-meta { margin: 6px 0 0; font-size: 13px; color: var(--muted-ox); }
@media (max-width: 420px) {
  .tiers { grid-template-columns: 1fr; }
  .tiers .tier { border-right: 0; border-bottom: 2px solid var(--taupe); }
  .tiers .tier:last-child { border-bottom: 0; }
}