/* battlebridge.com homepage, ROUND 2 sections (hero to close). Shared tokens, nav, footer, frame and hover live in
   ../../shared-r2/css/site.css. Started from round 1's home.css (../home/css/home.css, untouched); the round-1
   Stage 4 fixes are all kept. Round-2 changes are marked "r2". Brief: ../../DIRECTION-r2.md section 8. */

.tnum { font-variant-numeric: tabular-nums; }

/* ---------- 1. hero (ground) ---------- */
.hero { min-height: min(100svh, 960px); display: flex; align-items: center; padding: 120px 0 64px; }
.hero > .wrap { width: 100%; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 40px; align-items: center; }
.hero-copy { min-width: 0; container-type: inline-size; }
/* polish: "Ads Arsenal is live" is Ads Arsenal speaking, so it takes petrol, like the Ads section's own kicker
   (.aa-kicker). Petrol on ground 6.59 light / 8.45 dark. */
.hero-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; font: 600 15px/1.4 var(--font-body); color: var(--ads); }
.h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 5.4vw, 80px); line-height: .95; letter-spacing: 0; }
.h1 .ln { padding-bottom: .04em; }
@media (min-width: 1024px) {
  .h1 .ln { white-space: nowrap; }
  @supports (width: 1cqi) { .h1 { font-size: min(clamp(44px, 5.4vw, 80px), calc(100cqi / 10.45)); } }
}
.br-ph { display: none; }
@media (max-width: 479px) { .br-ph { display: inline; } }
.sub { margin-top: 28px; max-width: 38rem; font-size: 20px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.sub strong { font-weight: 600; color: var(--ink); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.ctas .ico { width: 20px; height: 20px; }
.numstrip { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: 24px; margin-top: 40px; padding-top: 24px; background: var(--rule) top left / 100% 2px no-repeat; }
.numstrip .n-fig { font: 600 clamp(32px, 3.2vw, 40px)/1 var(--font-figure); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.numstrip .n-lbl { margin-top: 10px; max-width: 15ch; font-size: 14px; line-height: 1.4; color: var(--ink-2); }

.hero-art { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; align-self: start; margin-top: 45px; }
/* polish: the drawn Ads trio carries the Capstone frame's 3px product cap in petrol (Ads Arsenal is speaking; a
   product colour is an address, never data, so nothing inside the drawings changes) */
.hc { border-radius: 12px; background: linear-gradient(var(--ads), var(--ads)) top / 100% 3px no-repeat, var(--surface); box-shadow: var(--shadow-menu); padding: 20px; }
.hc-budget { width: 300px; margin-right: 32px; }
.hc-hour { width: 340px; }
.hc-one { width: 288px; margin-right: 56px; }
.hc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font: 600 13px/1.2 var(--font-body); color: var(--ink-2); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.bars i { flex: 1; border-radius: 3px; background: var(--data); }
.hc-foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.hc-foot .f-l { font-size: 13px; color: var(--ink-3); }
.hc-foot .f-r { font-size: 14px; font-weight: 600; color: var(--ink); }
.lh { display: flex; flex-direction: column; gap: 12px; }
.lh-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.lh-disc { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
.lh-disc .ico { width: 16px; height: 16px; stroke-width: 1.75; }
.lh-t { font-size: 13px; line-height: 1.35; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lh-m { margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lh-txt { min-width: 0; padding-top: 3px; }
.op1 { display: flex; flex-direction: column; gap: 8px; }
.op1-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; line-height: 1.3; }
.op1-row .p { color: var(--ink-2); }
.op1-row .r { display: flex; align-items: baseline; gap: 10px; }
.op1-row .s { color: var(--ink); font-variant-numeric: tabular-nums; }
.op1-row .d { width: 64px; text-align: right; font-size: 12px; color: var(--pos); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hc-one .hc-foot .f-l { color: var(--ink-2); }
.hc-one .hc-foot .f-r { font: 600 18px/1 var(--font-figure); font-variant-numeric: tabular-nums; color: var(--ink); }
.hero-art-phone { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .seat { animation: seat 300ms var(--ease-enter) backwards; }
  .seat:nth-child(2) { animation-delay: 80ms; }
  .seat:nth-child(3) { animation-delay: 160ms; }
}
@keyframes seat { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-art { display: none; }
  .hero-art-phone { display: block; margin-top: 40px; }
  .hero-art-phone .hc-hour { width: 100%; max-width: 420px; }
}
@media (max-width: 767px) {
  .hero { min-height: 0; padding: 104px 0 72px; }
  .hero-kicker { margin-bottom: 20px; }
  .h1 { font-size: 44px; }
  .sub { margin-top: 24px; font-size: 17px; }
  .ctas { flex-direction: column; margin-top: 28px; }
  .ctas .btn { width: 100%; height: 52px; }
  .numstrip { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .numstrip .n-fig { font-size: 28px; }
  .hero-art-phone .hc-hour { max-width: none; }
}
@media (max-width: 767px) and (max-height: 699px) {
  .h1 { font-size: 40px; }
}

/* ---------- 2. see what's happening: r2 THE NIGHT BAND (data-theme="dark" in both modes) ---------- */
/* the value contrast light mode was missing, built from the family's own night ground; the lit top and bottom edges
   keep it a machined object, not a hole in the page */
.night { position: relative; box-shadow: inset 0 1px rgba(255,255,255,.06), inset 0 -1px rgba(255,255,255,.04); }
.night .frame { max-width: 1000px; margin: 0 auto; }
.callouts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.callout { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--surface); box-shadow: var(--ring); font-size: 13px; color: var(--ink-2); }
.callout .ico { width: 16px; height: 16px; color: var(--ink-3); stroke-width: 1.75; }
.callout .still { width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
@media (max-width: 767px) {
  .callout { height: auto; min-height: 36px; padding: 8px 14px; }
  .night .frame-lg { border-radius: 12px; }
}

/* ---------- 3. Ads Arsenal (ground); petrol is the address ---------- */
.aa-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font: 600 15px/1.4 var(--font-body); color: var(--ads); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.step { padding: 28px; }
.step .s-n { font: 600 15px/1 var(--font-figure); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.step h3 { margin-top: 14px; font: 600 20px/1.3 var(--font-body); color: var(--ink); }
.step p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.op-grid { display: grid; grid-template-columns: 5fr 7fr; column-gap: 56px; align-items: start; margin-top: 96px; }
/* r2: every metal heading is raised by day */
.h-sub { margin-bottom: 36px; font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.08; text-wrap: balance; filter: var(--raise); }
.feats { display: flex; flex-direction: column; gap: 28px; }
.feat { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 16px; }
.feat::before { content: ""; width: 12px; height: 2px; margin-top: 11px; background: var(--ads); }
.feat h4 { font: 600 17px/1.4 var(--font-body); color: var(--ink); }
.feat p { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

.aa { position: relative; }
.aa-frame { border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-modal); overflow: hidden; }
.aa-frame::before { content: ""; display: block; height: 3px; background: var(--ads); }
.aa-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 0 20px; background: var(--surface-2); }
.aa-name { display: flex; align-items: center; gap: 8px; font: 600 14px/1 var(--font-body); color: var(--ink); }
.aa-scan { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.aa-body { display: flex; flex-direction: column; gap: 16px; padding: 20px 20px 72px; }
.aa-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.aa-lbl { font: 600 13px/1.3 var(--font-body); color: var(--ink-2); }
.blocks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.blocks i { height: 32px; border-radius: 4px; }
.blocks .b-done { background: var(--data); opacity: .8; }
.blocks .b-off { background: repeating-linear-gradient(135deg, var(--data) 0 2px, transparent 2px 6px), var(--surface); box-shadow: inset 0 0 0 1.5px var(--data); }
.blocks .b-next { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.aa-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; line-height: 1; color: var(--ink-3); }
.aa-axis .now { color: var(--ink); font-weight: 600; }
.minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mini { padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.mini .m-l { font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.mini .m-v { margin: 6px 0 6px; font: 600 22px/1 var(--font-figure); font-variant-numeric: tabular-nums; color: var(--ink); }
.mini .m-s { font-size: 12px; line-height: 1.3; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mini .m-s.pos { color: var(--pos); }
.blk { padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.ct { display: flex; flex-direction: column; gap: 8px; }
.ct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 8px; background: var(--surface-2); font-size: 13px; line-height: 1.3; }
.ct-row .h { min-width: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-row .c { flex: none; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.ct-row.win { box-shadow: inset 2px 0 0 var(--data); }
.ct-row.win .c { color: var(--ink); font-weight: 600; }
.ct-note { margin-top: 10px; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.ac-rows { display: flex; flex-direction: column; gap: 10px; }
.ac-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 1.3; color: var(--ink); }
.toast { position: absolute; left: -32px; bottom: -76px; width: 300px; padding: 14px 16px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-menu); }
.toast .t-h { font-size: 12px; line-height: 1.3; color: var(--ink-3); }
.toast .t-b { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ink); }

.statement { max-width: 880px; margin: 112px auto 0; padding: 48px; border-radius: 16px; text-align: center; }
.statement h3 { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.1; text-wrap: balance; filter: var(--raise); }
.statement p { max-width: 40rem; margin: 18px auto 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.st-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.st-figs .f { font: 600 28px/1 var(--font-figure); font-variant-numeric: tabular-nums; color: var(--ink); }
.st-figs .l { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.aa-close { margin-top: 48px; text-align: center; }
.aa-close p { margin-bottom: 20px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1023px) {
  .op-grid { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .toast { position: static; width: auto; margin-top: 16px; }
  .aa-body { padding-bottom: 20px; }
}
@media (max-width: 767px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .step { padding: 24px; }
  .op-grid { margin-top: 72px; }
  .h-sub { font-size: 28px; }
  .aa-bar { padding: 0 16px; }
  .aa-body { padding: 16px; }
  .ct-row { align-items: flex-start; }
  .ct-row .h { white-space: normal; overflow: visible; text-overflow: clip; }
  .minis { gap: 8px; }
  .mini { padding: 10px; }
  .mini .m-v { font-size: 20px; }
  .statement { margin-top: 72px; padding: 28px; }
  .statement h3 { font-size: 28px; }
  .st-figs { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
}
@media (max-width: 384px) {
  .mini { padding: 10px 8px; }
  .mini .m-v { font-size: clamp(16px, 5.2vw, 20px); }
}

/* ---------- 4. The Arsenal (band) ---------- */
/* r2 departure (home-r2/NOTES.md): round 1's 7fr | 5fr (Ads left, Search over Conversion right) left a ~300px hole in
   the Ads card once the side cards carried screen strips (+258px on the right column, measured). Now Ads Arsenal, "the
   platform", is a full-width card on top (copy left, list and actions right) and the two included products sit side
   by side under it, so each strip is 588px wide instead of 490 and reads at website size. Same words, same order. */
.ars { display: flex; flex-direction: column; gap: 24px; }
.ars-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ac { position: relative; display: flex; flex-direction: column; padding: 40px; border-radius: 12px; box-shadow: var(--shadow-1); background: linear-gradient(var(--p), var(--p)) top / 100% 3px no-repeat, var(--surface); }
.ac-wide { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; }
.ac-aside { display: flex; flex-direction: column; }
.ac-wide .dashes { margin-top: 52px; }
.ac-wide .ac-foot-wrap { margin-top: 28px; }
.np { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.np-name { font: 600 18px/1.2 var(--font-figure); color: var(--pt); text-decoration: none; }
.ac h3 { margin-top: 20px; font: 600 28px/1.25 var(--font-body); color: var(--ink); text-wrap: balance; }
.ars-side .ac h3 { font-size: 22px; line-height: 1.3; }
.ac > p, .ac-body > p, .ac-main > p { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.ars-side .ac p { font-size: 16px; }
.dashes { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.dashes li { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 14px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.dashes li::before { content: ""; width: 12px; height: 2px; margin-top: 11px; background: var(--ads); }
.ac-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line); }
.ac-foot-wrap { margin-top: 32px; display: flex; flex-direction: column; flex: 1; }
.tlink { font: 600 15px/1.4 var(--font-body); color: var(--ads); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tlink:hover { text-decoration-thickness: 2px; }

/* r2: the side cards carry a real screen strip (a night island, flush at the top, the product's 3px rule inside the
   corner) and are links to their /arsenal/ section. The name is the link; its ::after covers the whole card. */
.ac.has-shot { padding: 0; overflow: hidden; background: var(--surface); }
.ac-shot { position: relative; overflow: hidden; padding-top: 3px; background: #0D0E10; border-bottom: 1px solid var(--line); }
.ac-shot::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 3px; background: var(--cap); }
.p-search .ac-shot { --cap: var(--search-mark); }
.p-conv .ac-shot { --cap: var(--conv); }
.ac-shot img { display: block; width: 100%; height: auto; transform-origin: var(--fo, 30% 30%); }
/* polish: both strips are cut at 1x for the 588px card at 1440 (139px tall, 10-12px of the app's own ground on the left
   and top). From 640px up they hold 139px and never scale: the crop is 976px wide, so a wider stacked card (640-1023)
   shows more of the same row and a narrower one shows less, always at 1x. On a phone each card takes its own 360px
   crop (Family leads only) at its own ratio. */
@media (min-width: 640px) {
  .ac-shot img { height: 139px; object-fit: cover; object-position: left top; }
}
.ac-body { display: flex; flex-direction: column; flex: 1; padding: 28px 36px 36px; }
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.stretch:focus-visible { outline: none; }
.ac.is-link:has(.stretch:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.ac.is-link:hover .np-name { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .ac.is-link { transition: transform 200ms var(--ease-enter), box-shadow 200ms var(--ease-enter); }
  .ac.is-link:has(.stretch:focus-visible) { transform: translateY(-2px); box-shadow: var(--shadow-menu); }
  .ac.is-link:active { transform: scale(.995); transition-duration: 100ms; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ac-shot img { transition: transform .5s var(--ease-shot); }
  .ac.is-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-menu); }
  .ac.is-link:hover .ac-shot img { transform: scale(1.03); }
}

/* r2: the offer. Touch: the footnote with a 3px crimson left rule. Bold: the page's one crimson band, full bleed,
   right under the cards, the same words in white and a night-mode chrome pill (the homepage's own "Sign up now"). */
.ars-offer { margin-top: 40px; }
.ars-offer-in { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; }
.ars-note { max-width: 42rem; padding-left: 16px; font-size: 15px; line-height: 1.6; color: var(--ink-2); background: linear-gradient(var(--crimson-line), var(--crimson-line)) left top / 3px 100% no-repeat; }
[data-colour="bold"] .ars-sec { padding-bottom: 0; }
[data-colour="bold"] .ars-offer {
  margin-top: 72px; padding: 72px 0;
  background: var(--crimson-band); box-shadow: inset 0 1px rgba(255,255,255,.16), inset 0 -1px rgba(0,0,0,.25);
}
[data-colour="bold"] .ars-note { padding-left: 0; background: none; font: 600 20px/1.45 var(--font-body); color: #FFFFFF; }
[data-colour="bold"] .ars-offer :focus-visible { outline-color: #FFFFFF; }
.ars-offer .btn { flex: none; }
@media (max-width: 1023px) {
  .ars-side { grid-template-columns: minmax(0, 1fr); }
  .ac-wide { display: flex; }
  .ac-wide .dashes { margin-top: 24px; }
  .ac-wide .ac-foot-wrap { margin-top: 32px; }
}
@media (max-width: 767px) {
  .ac { padding: 28px; }
  .ac h3 { font-size: 24px; }
  .ac > p, .ac-body > p, .ac-main > p { font-size: 16px; }
  .ac-body { padding: 24px 24px 28px; }
  .ars-offer-in { flex-direction: column; align-items: flex-start; }
  [data-colour="bold"] .ars-offer { margin-top: 56px; padding: 48px 0; }
  [data-colour="bold"] .ars-note { font-size: 18px; }
  [data-colour="bold"] .ars-offer .btn { width: 100%; }
}

/* ---------- 5. Built for us first (ground). Round 3 ----------
   Four cards in two rows: the companies we run, then the machines you get (the heading's two lines). The family panel
   as before (surface, platinum rule, shadow-1); each card is a name, one line on what it is, three proof points and a
   link. The proof points are the card's weight now: 28px figures in ink (data never takes a brand colour), labels at
   14px ink-2, over a hairline. The Arsenal card is the only one that names an Arsenal, so it alone carries the
   all-lit Capstone and a top rule in the three product colours (the A taken apart, as on /arsenal/). No crimson in the
   cards: the links take a neutral line-strong underline here (the section is mostly figures; DIRECTION-r2 3.4). */
#platforms .sec-head { max-width: 62rem; }
.plats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.plat { display: flex; flex-direction: column; padding: 40px; }
.plat-ars { background: linear-gradient(90deg, var(--ads) 0 33.333%, var(--search-mark) 33.333% 66.666%, var(--conv) 66.666% 100%) top / 100% 3px no-repeat, var(--surface); }
.plat-name { display: flex; align-items: center; gap: 10px; }
.plat h3 { font: 600 26px/1.25 var(--font-body); color: var(--ink); }
.plat .desc { margin-top: 12px; max-width: 34rem; font-size: 17px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.pstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.pstats dd { margin: 0; }
.pstats .nw { white-space: nowrap; }
.pstats .f { font: 600 28px/1 var(--font-figure); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.pstats .l { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }
.plink { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: auto; padding-top: 28px; font: 600 15px/1.4 var(--font-body); color: var(--ink); }
.plink .ico { width: 16px; height: 16px; }
.plats .plink { text-decoration-color: var(--line-strong); }
.plats .plink:hover { color: var(--ink); text-decoration-color: var(--ink); }
/* 1024-1279: two columns of ~476px, so the figures step down to keep "Step one" and "50 to 75" on one line */
@media (min-width: 1024px) and (max-width: 1279px) { .pstats .f { font-size: 24px; } .plat { padding: 36px; } }
@media (max-width: 1023px) { .plats { grid-template-columns: minmax(0, 1fr); } }
/* phone: each proof point is a row (figure left, label right), so a two-word figure never squeezes */
@media (max-width: 639px) {
  .plat { padding: 28px 24px; }
  .plat h3 { font-size: 24px; }
  .plat .desc { font-size: 16px; }
  .pstats { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pstats > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 14px; align-items: baseline; }
  .pstats .f { font-size: 24px; }
  .pstats .l { margin-top: 0; }
}

/* ---------- 6. The Scoreboard (band): no crimson ---------- */
.score { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 960px; margin: 0 auto; padding-top: 32px; background: var(--rule) top / 100% 3px no-repeat; text-align: center; }
.score > div { padding: 0 8px; }
.score > div + div { border-left: 1px solid var(--line); }
.score .f { font: 600 clamp(36px, 4.4vw, 52px)/1 var(--font-figure); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.score .l { margin-top: 12px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.score .s { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.usr { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; margin-top: 48px; padding: 24px; }
.usr-t { font: 600 15px/1.3 var(--font-body); color: var(--ink); }
.usr-figs { display: flex; flex-wrap: wrap; gap: 20px 40px; }
.usr-figs > div { text-align: center; }
.usr-figs .f { font: 600 28px/1 var(--font-figure); font-variant-numeric: tabular-nums; color: var(--ink); }
.usr-figs .l { margin-top: 6px; font-size: 12px; line-height: 1.3; color: var(--ink-3); }
.pq { display: grid; grid-template-columns: 1fr 1fr; margin-top: 80px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.pq-photo { position: relative; min-height: 300px; background: #161719; }
.pq-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pq-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 24px 20px; font-size: 13px; line-height: 1.4; color: #FFFFFF;
  background: var(--scrim) top / 100% calc(100% - 40px) no-repeat, linear-gradient(rgba(13,14,16,.72), rgba(13,14,16,.72)) bottom / 100% 40px no-repeat; }
.pq-quote { display: flex; align-items: center; padding: 48px; }
.pq-inner { padding-left: 27px; background: var(--rule-v) left top / 3px 100% no-repeat; }
.pq blockquote { margin: 0; font: 500 24px/1.45 var(--font-body); color: var(--ink); font-style: normal; text-wrap: pretty; }
.pq-by { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.mono { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--surface-2); font: 600 16px/1 var(--font-figure); color: var(--ink); }
.pq-n { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.pq-r { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 1023px) {
  .pq { grid-template-columns: minmax(0, 1fr); }
  .pq-photo { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
  .score { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .score > div { padding: 0 8px; }
  .score > div:nth-child(3) { border-left: 0; }
  .score .f { font-size: clamp(28px, 9.5vw, 36px); }
  .usr { padding: 20px; }
  .usr-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; }
  .pq { margin-top: 56px; }
  .pq-quote { padding: 28px; }
  .pq blockquote { font-size: 20px; }
}

/* ---------- 7. Free Strategy Report (ground, the close) ---------- */
.close-cta { display: flex; justify-content: center; margin-top: 8px; }
.close-cta .ico { width: 22px; height: 22px; stroke-width: 1.75; }
.expect { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 42rem; margin: 48px auto 0; text-align: center; }
.expect .f { font: 600 28px/1 var(--font-figure); font-variant-numeric: tabular-nums; color: var(--ink); }
.expect .l { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.fine { max-width: 40rem; margin: 32px auto 0; text-align: center; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.reach { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px 48px; max-width: 48rem; margin: 40px auto 0; padding-top: 32px; border-top: 1px solid var(--line); }
.reach > div { display: flex; align-items: center; gap: 12px; }
.reach .ico { width: 20px; height: 20px; color: var(--ink-3); stroke-width: 1.75; }
.reach a { font-size: 15px; line-height: 1.4; color: var(--ink-2); text-decoration: none; }
.reach a:hover { color: var(--crimson-text); text-decoration: underline; text-decoration-color: var(--crimson-line); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
@media (max-width: 767px) {
  .close-cta .btn { width: 100%; height: 56px; font-size: 17px; }
  .expect { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .reach { flex-direction: column; align-items: center; gap: 16px; }
}

/* Option B for Travis (round 1 Stage 4 P2-2), off unless ?nav=ghost; kept from round 1 */
[data-nav-signup="ghost"] .nav.hero-on .nav-signup { background: var(--btn-ghost-grad); color: var(--ink); box-shadow: var(--btn-ghost-edge); }
@media (hover: hover) and (pointer: fine) {
  [data-nav-signup="ghost"] .nav.hero-on .nav-signup:hover { background: var(--btn-ghost-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px var(--ink), 0 1px 2px rgba(20,24,30,.10); }
}