/* ============================================================
   ledger.css - the page layer for every marketing page

   One vocabulary of sections, so no two pages open the same way
   and none of them fall back to a grid of bordered cards:

     .hero-stage     full-bleed opening: statement left, a reading
                     or a figure right, a strip of facts underneath
     .strip          facts on one rule
     .rows           label / value on hairlines (the site's table)
     .tiles          a grid divided by hairlines, not by borders
     .timeline       numbered steps down a rail
     .record         numbered rows with a serif figure
     .duo            two columns of prose
     .pull           a pulled sentence
     .sheet          a rule or formula, set in the mono
     .score          a numbered checklist with big figures
     .watch          a watchlist table
     .compare        a side-by-side table
     .faq            an accordion on hairlines
     .field          form controls, underlined not boxed
     .cta-band       the closing band

   Palette and type come from global.css + system.css.
   ============================================================ */

/* ── The page ground ────────────────────────────────────────
   Not flat black. A navy field high on the page and a weaker one low,
   fixed so a long page keeps some depth all the way down instead of
   fading to a slab. Each page adds a tone class below, which moves the
   fields and shifts the warm one, so no two pages are lit identically. */
body {
    background-color: var(--bg-base);
    background-image:
        radial-gradient(110% 55% at 50% 0%, rgba(30, 48, 110, 0.34) 0%, transparent 62%),
        radial-gradient(75% 45% at 88% 96%, rgba(30, 48, 110, 0.20) 0%, transparent 66%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
/* Tones. All the same navy family - the difference is where the light
   falls and how much warmth is in it, which is enough that pages do not
   read as one repeated template. */
body.tone-strategy {
    background-image:
        radial-gradient(95% 50% at 18% 0%, rgba(34, 54, 122, 0.36) 0%, transparent 60%),
        radial-gradient(60% 40% at 92% 88%, rgba(201, 169, 98, 0.07) 0%, transparent 66%);
}
body.tone-process {
    background-image:
        radial-gradient(120% 48% at 62% 0%, rgba(28, 46, 108, 0.34) 0%, transparent 58%),
        radial-gradient(70% 42% at 12% 92%, rgba(30, 48, 110, 0.22) 0%, transparent 66%);
}
body.tone-proof {
    background-image:
        radial-gradient(90% 52% at 78% 0%, rgba(26, 42, 100, 0.36) 0%, transparent 60%),
        radial-gradient(65% 40% at 20% 94%, rgba(201, 169, 98, 0.06) 0%, transparent 68%);
}
body.tone-company {
    background-image:
        radial-gradient(105% 50% at 34% 0%, rgba(36, 56, 126, 0.34) 0%, transparent 62%),
        radial-gradient(70% 44% at 92% 90%, rgba(201, 169, 98, 0.08) 0%, transparent 66%);
}
body.tone-caution {
    background-image:
        radial-gradient(100% 46% at 50% 0%, rgba(24, 38, 92, 0.36) 0%, transparent 58%),
        radial-gradient(60% 40% at 84% 92%, rgba(120, 60, 60, 0.10) 0%, transparent 68%);
}
body.tone-offer {
    background-image:
        radial-gradient(100% 54% at 26% 0%, rgba(34, 54, 122, 0.38) 0%, transparent 62%),
        radial-gradient(72% 46% at 90% 92%, rgba(201, 169, 98, 0.10) 0%, transparent 64%);
}
main { overflow-x: clip; }
.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;
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero-stage {
    position: relative;
    isolation: isolate;
    padding-top: clamp(4.5rem, 10vw, 8rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    background:
        radial-gradient(90% 70% at 15% 0%, var(--navy-field) 0%, transparent 60%),
        radial-gradient(45% 55% at 92% 10%, rgba(201, 169, 98, 0.12) 0%, transparent 60%),
        linear-gradient(180deg, rgba(15, 24, 54, 0.85) 0%, rgba(10, 15, 30, 0) 100%);
}
/* The paper: a fine grain and one warm field high on the right, in place
   of the ruled grid. The grain is an SVG turbulence at very low opacity,
   so it reads as material rather than as a pattern. */
.hero-stage::before {
    content: '';
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.55;
    mix-blend-mode: soft-light;
}
.hero-stage::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 169, 98, 0.45) 30%, rgba(201, 169, 98, 0.45) 70%, transparent 100%);
}
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: end;
}
.hero-eyebrow {
    display: flex; align-items: center; gap: 0.75rem;
    margin: 0 0 1.1rem;
}
.hero-eyebrow::before { content: ''; width: 2.2rem; height: 1px; background: var(--gold); }
.hero-copy .display, .hero-copy h1 { margin: 0 0 1.25rem; max-width: 18ch; }
.hero-copy .lede { max-width: 56ch; }
.hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.75rem; }

/* The reading beside the statement: rows, or one big figure. */
.hero-reading { display: grid; margin: 0; align-self: end; }
.hero-reading > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--border);
}
.hero-reading > div:last-child { border-bottom: 1px solid rgba(201, 169, 98, 0.35); }
.hero-reading dt { font-size: 0.88rem; color: var(--text-quiet); }
.hero-reading dd { margin: 0; font-size: 1.5rem; color: var(--text-primary); letter-spacing: -0.02em; text-align: right; }
.hero-reading dd.txt { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; }
.hero-figure { align-self: end; text-align: right; }
.hero-figure .fig { display: block; font-family: var(--font-display); font-size: clamp(4rem, 9vw, 8rem); line-height: 0.9; color: var(--text-primary); letter-spacing: -0.03em; }
.hero-figure .fig em { font-style: italic; color: var(--accent-lt); }
.hero-figure .cap { display: block; margin-top: 0.75rem; }

/* ── Strip: facts on one rule ───────────────────────────────── */
.strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.strip > div {
    padding: 1.25rem 1.5rem 1.25rem 0;
    display: grid; gap: 0.3rem; align-content: start;
}
.strip > div + div { padding-left: 1.5rem; border-left: 1px solid var(--border); }
.strip .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--text-primary); letter-spacing: -0.02em; }
.strip .v.serif { font-family: var(--font-display); letter-spacing: -0.01em; }
.strip .k { font-size: 0.84rem; color: var(--text-quiet); line-height: 1.4; }

/* ── Section heads ──────────────────────────────────────────── */
.band { position: relative; }
.sec-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-head .caps { display: block; margin-bottom: 0.9rem; }
.sec-head h2, .sec-head .display { margin: 0 0 1rem; }
.sec-head .lede { max-width: 56ch; }
/* Heading on the left, lede on the right, both on one rule. */
.sec-head-split {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    position: relative;
}
.sec-head-split::before { content: ''; position: absolute; left: 0; top: -1px; width: 2.6rem; height: 2px; background: var(--gold); }
.sec-head-split .lede { padding-bottom: 0.35rem; }

/* ── Rows ───────────────────────────────────────────────────── */
.rows { display: grid; margin: 0; }
.rows > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border);
}
.rows > div:last-child { border-bottom: 1px solid rgba(201, 169, 98, 0.30); }
.rows dt { font-size: 0.88rem; color: var(--text-quiet); }
.rows dd { margin: 0; font-size: 0.95rem; color: var(--text-primary); text-align: right; }
.rows dd.num, .rows dd.mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.rows-lg dd { font-size: 1.25rem; }
.rows .mark dd { color: var(--accent-lt); }

/* ── Tiles: divided, not boxed ──────────────────────────────── */
.tiles {
    display: grid;
    grid-template-columns: repeat(var(--tiles, 3), minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.tiles > * {
    background: var(--bg-base);
    padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.25rem, 2vw, 2rem);
    display: grid; gap: 0.6rem; align-content: start;
    transition: background var(--dur-base) var(--ease-out);
}
.tiles > *:hover { background: var(--bg-surface); }
.tiles .caps { color: var(--accent-warm); }
.tiles h3 { margin: 0; font-size: var(--step-1); }
.tiles h3.serif { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); letter-spacing: var(--tracking-display); }
.tiles p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--text-muted); }
.tiles ul { margin: 0.25rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.tiles li { font-size: 0.92rem; color: var(--text-muted); padding-left: 1.1rem; position: relative; }
.tiles li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 0.45rem; height: 1px; background: var(--accent); }
.tiles .big { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--text-primary); letter-spacing: -0.03em; line-height: 1; }
.tiles .big.serif { font-family: var(--font-display); letter-spacing: -0.01em; }
.tiles .big.up { color: var(--accent-green); }
.tiles .big.down { color: var(--accent-red); }
.tile-wide { grid-column: span 2; }
.tile-navy { background: linear-gradient(135deg, var(--navy) 0%, var(--bg-surface) 100%); }
.tile-navy:hover { background: linear-gradient(135deg, var(--navy) 0%, var(--bg-elevated) 100%); }

/* ── Timeline ───────────────────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.timeline > li {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0 clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1.75rem, 3vw, 2.5rem) 0;
    border-top: 1px solid var(--border);
    position: relative;
}
.timeline > li:last-child { border-bottom: 1px solid var(--border); }
.timeline .n {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    line-height: 0.9;
    color: var(--gold);
    letter-spacing: -0.03em;
}
.timeline .when { display: block; margin-bottom: 0.6rem; }
.timeline h3 { margin: 0 0 0.6rem; font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); letter-spacing: var(--tracking-display); }
.timeline p { margin: 0; max-width: 62ch; line-height: 1.7; color: var(--text-muted); }
.timeline .aside { margin-top: 1.25rem; }
.timeline-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }

/* ── Record: numbered rows with a serif figure ──────────────── */
.record { list-style: none; margin: 0; padding: 0; }
.record > li {
    display: grid;
    grid-template-columns: 3rem minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(1rem, 3vw, 3rem);
    padding: clamp(1.5rem, 3vw, 2.25rem) 0;
    border-top: 1px solid var(--border);
    align-items: start;
}
.record > li:last-child { border-bottom: 1px solid var(--border); }
.record .n { font-family: var(--font-display); font-size: 1.35rem; line-height: 1; color: var(--gold); padding-top: 0.35rem; }
.record .fig { display: block; font-family: var(--font-display); font-size: var(--step-3); line-height: 1.1; color: var(--text-primary); letter-spacing: var(--tracking-display); }
.record .sub { display: block; margin-top: 0.35rem; font-size: 0.86rem; color: var(--text-quiet); }
.record p { margin: 0; line-height: 1.7; color: var(--text-muted); }
.record ul { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.record li li { padding-left: 1.1rem; position: relative; color: var(--text-muted); font-size: 0.95rem; }
.record li li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 0.45rem; height: 1px; background: var(--accent); }

/* ── Duo / pull ─────────────────────────────────────────────── */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); }
.duo p { margin: 0 0 1rem; line-height: 1.75; color: var(--text-muted); }
.duo p:last-child { margin: 0; }
.duo strong { color: var(--text-primary); font-weight: 600; }
.pull {
    position: relative;
    margin: 0;
    padding: 0.5rem 0 0.5rem clamp(1.5rem, 3vw, 2.5rem);
    border-left: 1px solid var(--gold);
    font-family: var(--font-display);
    font-size: var(--step-3);
    line-height: 1.25;
    color: var(--text-primary);
    letter-spacing: var(--tracking-display);
    max-width: 30ch;
}
.pull em { font-style: italic; color: var(--accent-lt); }
.pull cite { display: block; margin-top: 1rem; font-family: var(--font-body); font-style: normal; font-size: 0.85rem; color: var(--text-quiet); }

/* ── Sheet: rules in the mono ───────────────────────────────── */
.sheet {
    position: relative;
    padding: 1.25rem 1.5rem 1.25rem 1.75rem;
    background: linear-gradient(90deg, rgba(138, 164, 232, 0.06), transparent 70%);
    border-left: 2px solid var(--accent);
    font-family: var(--font-num);
    font-size: 0.9rem;
    line-height: 1.85;
    color: var(--text-muted);
    overflow-x: auto;
}
.sheet .caps { display: block; margin-bottom: 0.6rem; }
.sheet b { color: var(--text-primary); font-weight: 500; }
.sheet .k { color: var(--accent-lt); }
.sheet .c { color: var(--text-subtle); }
.sheet + .sheet { margin-top: 1rem; }

/* ── Score: numbered checklist ──────────────────────────────── */
.score { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.score > li {
    display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 1rem 1.25rem; align-items: baseline;
    padding: 1.1rem 0;
    border-top: 1px solid var(--border);
}
.score > li:last-child { border-bottom: 1px solid var(--border); }
.score .n { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--gold); }
.score .t { font-size: 1rem; color: var(--text-primary); font-weight: 500; }
.score .d { display: block; margin-top: 0.2rem; font-size: 0.88rem; color: var(--text-quiet); }
.score .r { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; color: var(--accent-green); white-space: nowrap; }

/* ── Watchlist ──────────────────────────────────────────────── */
.watch { width: 100%; border-collapse: collapse; }
.watch td, .watch th { padding: 0.9rem 1rem 0.9rem 0; border-top: 1px solid var(--border); text-align: left; vertical-align: baseline; }
.watch tr:last-child td { border-bottom: 1px solid var(--border); }
.watch th { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-quiet); border-top: 0; }
.watch .sym { font-family: var(--font-num); font-size: 1.05rem; color: var(--text-primary); width: 6rem; }
.watch .nm { color: var(--text-primary); }
.watch .nt { color: var(--text-quiet); font-size: 0.9rem; }

/* ── Compare ────────────────────────────────────────────────── */
.compare-scroll { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 640px; }
.compare th, .compare td { padding: 1rem 1.25rem 1rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.compare thead th { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); color: var(--text-primary); padding-bottom: 1.1rem; border-bottom: 1px solid rgba(138, 164, 232, 0.45); }
.compare tbody th { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-quiet); white-space: nowrap; width: 1%; padding-right: 2.5rem; }
.compare td { color: var(--text-muted); }
.compare td.win { color: var(--text-primary); }
.compare td.num { color: var(--text-primary); font-family: var(--font-num); }
.compare tbody tr:hover td { color: var(--text-primary); }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq { display: grid; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
    padding: 1.1rem 0;
    font-size: 1.02rem; font-weight: 500; color: var(--text-primary);
    transition: color var(--dur-fast) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); line-height: 1; transition: transform var(--dur-base) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent-lt); }
.faq .a { padding: 0 3rem 1.25rem 0; color: var(--text-muted); line-height: 1.7; max-width: 66ch; }
.faq .a p { margin: 0 0 0.75rem; }
.faq .a p:last-child { margin: 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq-grid .sec-head { position: sticky; top: calc(var(--nav-h, 4.5rem) + 2rem); margin: 0; }
.faq-group { margin-bottom: 2.5rem; }
.faq-group .caps { display: block; margin-bottom: 0.75rem; color: var(--accent-warm); }

/* ── Forms ──────────────────────────────────────────────────── */
.field { display: grid; gap: 0.45rem; margin-bottom: 1.5rem; }
.field label { font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-quiet); }
.field input, .field textarea, .field select {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(238, 241, 248, 0.18);
    border-radius: 0;
    padding: 0.7rem 0;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-primary);
    transition: border-color var(--dur-base) var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-subtle); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.field textarea { min-height: 8rem; resize: vertical; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.form-note { font-size: 0.85rem; color: var(--text-quiet); margin: 0.5rem 0 0; }

/* ── Notices ────────────────────────────────────────────────── */
.note {
    padding: 1.1rem 1.4rem;
    border: 1px solid var(--border);
    border-left: 2px solid var(--gold);
    font-size: 0.9rem; line-height: 1.65; color: var(--text-muted);
}
.note.warn { border-left-color: var(--accent-red); }
.note strong { color: var(--text-primary); }

/* ── Closing band ───────────────────────────────────────────── */
.cta-band {
    position: relative;
    background:
        radial-gradient(70% 90% at 50% 100%, var(--navy-field) 0%, transparent 65%);
    border-top: 1px solid var(--border);
}
.cta-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.cta-inner .display { margin: 0 0 1rem; max-width: 16ch; }
.cta-inner .lede { max-width: 50ch; }
/* A row, not a stack. Two buttons one above the other read as a list of
   two unrelated things; side by side they read as a choice, with the
   secondary clearly second. The note drops to its own line beneath. */
/* A grid, so the two buttons are the same width whether they sit side by
   side or stack. As a flex row they took their own text widths and, in the
   narrow closing column, stacked into a ragged left-aligned pair. */
.cta-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; align-items: start; }
.cta-actions .btn-solid, .cta-actions .btn-ghost { width: 100%; }
.cta-actions .quiet { grid-column: 1 / -1; font-size: 0.85rem; color: var(--text-quiet); margin: 0.35rem 0 0; }

/* ── Message sheet (a Telegram message, depicted) ───────────── */
.msg {
    position: relative;
    padding: 1rem 1.25rem 1rem 1.4rem;
    border-left: 2px solid var(--accent);
    background: linear-gradient(90deg, rgba(138, 164, 232, 0.07), rgba(138, 164, 232, 0) 75%);
    font-family: var(--font-num);
    font-size: 0.84rem;
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 30rem;
}
.msg .from { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.6rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--border); color: var(--text-primary); }
.msg .from small { color: var(--gold); font-size: 0.78rem; }
.msg b { color: var(--text-primary); font-weight: 500; }
.msg .act { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.msg .act span { flex: 1; text-align: center; padding: 0.45rem 0; border: 1px solid rgba(238, 241, 248, 0.16); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.84rem; font-weight: 600; color: var(--text-muted); }
.msg .act .go { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.msg .up { color: var(--accent-green); }

/* ── Narrow ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .hero-grid, .cta-inner, .faq-grid, .timeline-body { grid-template-columns: 1fr; }
    .hero-figure { text-align: left; }
    .faq-grid .sec-head { position: static; }
    .strip { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .strip > div + div { padding-left: 0; border-left: 0; }
    .strip > div:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid var(--border); }
    .strip > div:nth-child(n+3) { border-top: 1px solid var(--border); }
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tile-wide { grid-column: span 2; }
    .sec-head-split { grid-template-columns: 1fr; }
    .record > li { grid-template-columns: 3rem minmax(0, 1fr); }
    .record > li > :nth-child(3) { grid-column: 2; }
}
@media (max-width: 640px) {
    .tiles, .duo, .field-row { grid-template-columns: 1fr; }
    .tile-wide { grid-column: auto; }
    .strip { grid-template-columns: 1fr; }
    .strip > div { padding-left: 0 !important; border-left: 0 !important; border-top: 1px solid var(--border); }
    .strip > div:first-child { border-top: 0; }
    .timeline > li { grid-template-columns: 3rem minmax(0, 1fr); }
    .hero-copy .display, .hero-copy h1 { max-width: 100%; }
}

/* ── The strategy finder's way in ───────────────────────────
   It used to be a circle floating over every page. A section that has
   just laid out two strategies is the place to ask which one suits you,
   so the door is here instead. */
.finder {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    padding: clamp(1.75rem, 4vw, 2.75rem) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
}
.finder::before {
    content: '';
    position: absolute; left: 0; top: -1px;
    width: 2.6rem; height: 2px; background: var(--gold);
}
.finder .caps { display: block; margin-bottom: 0.75rem; }
.finder .display { margin: 0 0 0.9rem; }
.finder .lede { max-width: 62ch; font-size: var(--step-0); }
.finder-act { display: grid; justify-items: start; gap: 0.6rem; }
.finder-act .quiet { margin: 0; font-size: 0.82rem; color: var(--text-quiet); }
@media (max-width: 860px) { .finder { grid-template-columns: 1fr; } }