/* BestPair Floor Assessment, on Data Ink.
   Restraint is the style: fog and white, two petrol bands, Sora for anything
   short or numeric, Source Serif 4 for the argument. No green, no gradients,
   no shadows on cards, no colour-only meaning. */

@font-face { font-family: 'Sora'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/sora-500.woff2) format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/sora-700.woff2) format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/source-serif-4-400.woff2) format('woff2'); }

:root {
  --surface: #EAF2F7;
  --surface-raised: #FFFFFF;
  --petrol: #0F2A3D;
  --petrol-raised: #143850;
  --ink: #10222E;
  --ink-secondary: #33475A;
  --ink-muted: #43596A;
  --cyan: #38BDF8;
  --cyan-bright: #7DD3FC;
  --on-cyan: #06263B;
  --link: #0E6BA8;
  --border: #C8D8E3;

  /* Text on petrol reuses the light tokens: headings on fog, body on border. */
  --on-petrol: var(--surface);
  --on-petrol-2: var(--border);

  --sans: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --nav-h: 64px;
  --gutter: 64px;
  --section-y: 64px;
}

@media (max-width: 767px) {
  :root { --nav-h: 56px; --gutter: 16px; --section-y: 48px; }
}

*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink-secondary);
  font: 400 16px/26px var(--serif);
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-family: var(--sans); font-weight: 700; color: var(--ink); letter-spacing: -0.015em;
  text-wrap: balance; }   /* no one-word last lines on any headline */
h2 { font-size: 36px; line-height: 42px; }
h3 { font-size: 24px; line-height: 32px; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; }
figure { margin: 0; }

a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.band :focus-visible { outline-color: var(--cyan-bright); }

.wrap { width: min(1080px, 100% - 2 * var(--gutter)); margin-inline: auto; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 100; padding: 8px 12px; background: var(--surface-raised);
  font: 500 14px/20px var(--sans); }
.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; }

/* Visible placeholders, so nothing unfinished can pass for finished. */
.ph { display: inline-block; padding: 2px 8px; border: 1px dashed var(--link); border-radius: 8px;
  background: rgba(56, 189, 248, 0.12); color: var(--link); font: 500 13px/20px var(--sans); }
/* Inside a sentence a placeholder wraps like the words around it, so
   punctuation after it stays on the same line. */
p .ph { display: inline; padding: 1px 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.band .ph, .poster .ph { border-color: var(--cyan-bright); background: transparent; color: var(--cyan-bright); }

/* ---- type roles ---------------------------------------------------------- */

.eyebrow { margin: 0 0 16px; font: 500 13px/16px var(--sans); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--link); }
.band .eyebrow { color: var(--cyan-bright); }
.lede { font-size: 18px; line-height: 30px; }

/* ---- buttons ------------------------------------------------------------- */

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 15px 30px; border: 0; border-radius: 10px; background: var(--cyan); color: var(--on-cyan);
  font: 700 16px/20px var(--sans); text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease; }
.btn:hover { background: var(--cyan-bright); color: var(--on-cyan); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.band .btn:focus-visible { outline-color: var(--on-petrol); }
.btn-block { width: 100%; }
/* Secondary action: petrol outline. Cyan stays for the one primary action. */
.btn-secondary { border: 2px solid var(--petrol); background: transparent; color: var(--petrol); padding: 13px 28px; }
.btn-secondary:hover { background: var(--petrol); color: var(--on-petrol); }

.text-link { font: 500 15px/20px var(--sans); color: var(--link); }
.band .text-link { color: var(--cyan-bright); }

/* ---- nav ----------------------------------------------------------------- */

.nav { position: sticky; top: 0; z-index: 20; background: var(--surface-raised); border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--nav-h); }
/* The Matrix lockup, per the brand book: mark height 1.4 x the wordmark's cap height, gap half the mark height.
   Sora Bold's cap height is 0.74em, so the drawn mark is 1.036em tall. The approved SVG pads its 52-unit
   drawing inside a 64-unit box, so the box is 1.275em and the gap is 0.518em less the 0.12em of padding. */
.lockup { display: inline-flex; align-items: center; gap: 0.4em; font: 700 20px/1 var(--sans); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.lockup-mark { width: 1.275em; height: 1.275em; flex: none; }
.lockup-tld { font-weight: 500; color: var(--ink-muted); }
.btn-nav { min-height: 40px; padding: 10px 20px; font-size: 15px; }

@media (max-width: 767px) {
  .lockup { font-size: 18px; }
  .btn-nav { padding: 9px 14px; font-size: 14px; line-height: 18px; }
}

/* ---- sections ------------------------------------------------------------ */

.section { padding: var(--section-y) 0; scroll-margin-top: var(--nav-h); }
.section--white { background: var(--surface-raised); }
.band { background: var(--petrol); color: var(--on-petrol-2); }
.band h1, .band h2, .band h3 { color: var(--on-petrol); }

.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head h2 + p { margin-top: 16px; }

@media (max-width: 767px) {
  h2 { font-size: 30px; line-height: 36px; }
  h3 { font-size: 20px; line-height: 28px; }
  .section-head { margin-bottom: 32px; }
}

/* 1. hero */
.hero { padding: 96px 0; }
.hero h1 { max-width: 920px; font-size: 52px; line-height: 56px; letter-spacing: -0.02em; }
.hero .lede { max-width: 660px; margin: 24px 0 0; }
.hero-steps { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; max-width: 820px; margin: 24px 0 0; padding: 0; font-size: 16px; line-height: 24px; color: var(--on-petrol-2); }
.hero-steps li { padding-left: 16px; border-left: 2px solid var(--on-petrol-2); }
.hero-steps strong { display: block; margin-bottom: 4px; font: 700 14px/20px var(--sans); color: var(--on-petrol); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
.hero-note { margin: 16px 0 0; font: 500 13px/18px var(--sans); color: var(--on-petrol-2); }

@media (max-width: 767px) {
  .hero { padding: 48px 0; }
  .hero h1 { font-size: 36px; line-height: 42px; }
  .hero .btn { width: 100%; }
  .hero-steps { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; font-size: 15px; line-height: 22px; }
}

/* 2. explainer */
.video { max-width: 880px; }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; background: var(--petrol); }
.poster { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  aspect-ratio: 16 / 9; padding: 16px; border-radius: 18px; background: var(--petrol); text-align: center; }
.play { position: relative; width: 72px; height: 72px; border-radius: 50%; background: var(--cyan); }
.play::after { content: ''; position: absolute; left: 29px; top: 22px; border-style: solid;
  border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--on-cyan); }
.lineage { max-width: 720px; margin: 32px 0 0; }
.lineage-link { margin: 12px 0 0; }
.video figcaption { margin-top: 12px; font: 500 14px/20px var(--sans); color: var(--ink-muted); }

@media (max-width: 767px) {
  .play { width: 56px; height: 56px; }
  .play::after { left: 22px; top: 17px; border-width: 11px 0 11px 17px; }
}

/* 3. fit */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0; list-style: none; }
.card { padding: 32px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); }
.cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.card h3 { margin-bottom: 12px; }
.fit-note { max-width: 720px; margin: 32px 0 0; }
/* What we look for on each account: the list behind card 3, shown in the reading panel. */
.fields-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 48px; }
.fields-cols .eyebrow { margin-bottom: 12px; }
.field-list { margin: 0; padding: 0; list-style: none; font: 400 15px/22px var(--serif); color: var(--ink-secondary); }
.field-list li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.field-list b { font: 500 14px/22px var(--sans); color: var(--ink); }
.fields-note { max-width: 720px; margin-top: 24px; font-size: 15px; line-height: 24px; }
.proof-note { max-width: 720px; margin: 48px 0 0; font-size: 18px; line-height: 30px; color: var(--ink); }
.not-for { max-width: 720px; margin-top: 48px; padding-left: 24px; border-left: 3px solid var(--petrol); }
.not-for h3 { margin-bottom: 12px; }
.not-for-list { margin: 16px 0 0; padding-left: 20px; }
.not-for-list li { margin-bottom: 12px; }
.not-for-list li:last-child { margin-bottom: 0; }

@media (max-width: 899px) {
  .cards, .cards--two { grid-template-columns: 1fr; gap: 16px; }
  .fit-note { margin-top: 24px; }
  .fields-cols { grid-template-columns: 1fr; gap: 24px; }
  .field-list li { grid-template-columns: 1fr; gap: 0; }
  .proof-note { margin-top: 32px; }
  .card { padding: 24px; }
  .not-for { margin-top: 32px; padding-left: 16px; }
}

/* 4. the Pairing Lift Model. Layout as before: inputs card left, one petrol
   panel right (result on top, explain below); on a phone the result sits
   first and stays in view while a thumb is on a slider. */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.calc-inputs { padding: 32px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); }
/* One petrol panel. It stays beside the inputs as they scroll ONLY where it
   is sure to fit: its height varies (a campaign name adds a line, list mode
   lengthens the tile labels) up to about 860px at 1200px wide. Pinned on a
   screen too short for it, the button at its foot sits under the cookie
   banner or below the fold and cannot be scrolled into reach (found 30 Sep:
   at 1440 x 900 with a campaign name and list mode the click hit the banner).
   Below this size the panel simply scrolls with the page. */
.calc-panel { overflow: hidden; border-radius: 18px; background: var(--petrol); }
@media (min-width: 1200px) and (min-height: 1000px) {
  .calc-panel { position: sticky; top: calc(var(--nav-h) + 16px); }
}
.calc-result { padding: 32px 32px 8px; background: var(--petrol); }
.calc-explain { padding: 16px 32px 32px; background: var(--petrol); color: var(--on-petrol-2); }

.result-note { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(234, 242, 247, 0.16);
  font: 700 13px/18px var(--sans); color: var(--on-petrol); }
.result-camp { margin: 0 0 16px; font: 700 14px/20px var(--sans); color: var(--on-petrol); }
.result-pair { display: grid; gap: 24px; }
.result-label { margin: 0; font: 500 13px/16px var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-petrol-2); }
.result-num { margin: 8px 0 0; font: 700 56px/60px var(--sans); letter-spacing: -0.02em; color: var(--cyan-bright);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.result-num--2 { font-size: 44px; line-height: 48px; }
.result-band { margin: 6px 0 0; font: 500 14px/20px var(--sans); color: var(--on-petrol-2); font-variant-numeric: tabular-nums; }

/* Five tiles: the two about choice share the first row, the three about money the second. */
.minis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
.minis li { grid-column: span 2; }
.minis li:nth-child(-n+2) { grid-column: span 3; }
.minis li { padding: 12px 14px; border-radius: 10px; background: var(--petrol-raised); }
.mini-v { display: block; font: 700 20px/26px var(--sans); color: var(--on-petrol); font-variant-numeric: tabular-nums; }
.mini-k { display: block; margin-top: 2px; font: 500 12px/16px var(--sans); color: var(--on-petrol-2); }
.calc-sentence { margin-bottom: 24px; color: var(--on-petrol); }

/* Inputs */
.field + .field, .seg-field + .field { margin-top: 28px; }
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.field-head label, .field-label { font: 500 15px/20px var(--sans); color: var(--ink); }
.field-label { display: block; margin-bottom: 8px; padding: 0; }
.optional { font-weight: 500; color: var(--ink-muted); }
fieldset.field { margin: 28px 0 0; padding: 0; border: 0; min-width: 0; }
.text-input { display: block; width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-raised); color: var(--ink); font: 500 16px/20px var(--sans); }
.text-input::placeholder { color: var(--ink-muted); }
.text-input:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

.num { display: flex; flex: none; align-items: center; gap: 2px; height: 44px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); cursor: text; }
.num:focus-within { outline: 3px solid var(--link); outline-offset: 2px; }
.num input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink);
  font: 700 17px/20px var(--sans); text-align: right; font-variant-numeric: tabular-nums; }
.affix { font: 500 15px/20px var(--sans); color: var(--ink-muted); }
.num--agents { width: 84px; }
.num--money { width: 148px; }
.num--pct { width: 88px; }

/* Dialer mode: native radios, drawn as two segments. Selected is petrol, the
   system's pressed state; cyan stays for the primary action. */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-opt { position: relative; flex: 1 1 auto; }
.seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg-opt span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); color: var(--ink);
  font: 700 14px/18px var(--sans); text-align: center; }
.seg-opt input:hover + span { border-color: var(--link); }
.seg-opt input:checked + span { border-color: var(--petrol); background: var(--petrol); color: var(--on-petrol); }
.seg-opt input:focus-visible + span { outline: 3px solid var(--link); outline-offset: 2px; }

/* Occupancy in list mode: switched off, and the hint says why. Text keeps
   full contrast; only the control fades. */
.field--off input[type="range"], .field--off .num { opacity: 0.45; }
.field--off .num { background: var(--surface); cursor: not-allowed; }
.field--off .field-head label { color: var(--ink-muted); }

/* Range: petrol thumb, link-blue fill (cyan would fail 3:1 against white). The
   fill is two hard stops, a solid bar rather than a gradient. */
input[type="range"] { --pct: 50%; display: block; width: 100%; height: 44px; margin: 8px 0 0; padding: 0;
  background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
input[type="range"]:disabled { cursor: not-allowed; }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--link) 0 var(--pct), var(--border) var(--pct) 100%); }
input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; border: 4px solid var(--surface-raised);
  border-radius: 50%; background: var(--petrol); box-shadow: 0 0 0 1px var(--petrol); -webkit-appearance: none; appearance: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--petrol), 0 0 0 5px var(--link); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--border); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--link); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 4px solid var(--surface-raised);
  border-radius: 50%; background: var(--petrol); box-shadow: 0 0 0 1px var(--petrol); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--petrol), 0 0 0 5px var(--link); }

.scale { display: flex; justify-content: space-between; font: 500 12px/16px var(--sans); color: var(--ink-muted); }
.hint { margin: 10px 0 0; font: 500 13px/18px var(--sans); color: var(--ink-muted); }

.calc-note { max-width: 720px; margin: 24px 0 0; font: 500 13px/20px var(--sans); color: var(--ink-muted); }
.calc-fallback { max-width: 720px; padding: 16px 20px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-raised); }

.no-js .calc, .no-js .calc-note { display: none; }
.js .calc-fallback { display: none; }

@media (max-width: 899px) {
  .calc { grid-template-columns: 1fr; gap: 16px; }
  /* The panel dissolves so its two parts can sit either side of the inputs. */
  .calc-panel { display: contents; }
  .calc-inputs { padding: 24px 20px; }
  /* On a phone both numbers stay in view while the thumb moves. The fog
     collar masks whatever scrolls past in the gap under the nav and behind
     the rounded corners. Flat colour, not a shadow. */
  .calc-result { order: -1; position: sticky; top: calc(var(--nav-h) + 8px); z-index: 5; padding: 14px 18px; border-radius: 14px;
    box-shadow: 0 -8px 0 8px var(--surface); }
  .result-note { margin-bottom: 10px; padding-bottom: 8px; font-size: 12px; line-height: 16px; }
  .result-camp { margin-bottom: 8px; font-size: 13px; }
  .result-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .result-label { font-size: 11px; line-height: 14px; letter-spacing: 0.06em; }
  .result-num, .result-num--2 { margin-top: 4px; font-size: 30px; line-height: 34px; }
  .result-band { margin-top: 2px; font-size: 12px; line-height: 16px; }
  .calc-explain { padding: 20px; border-radius: 14px; }
  .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .minis li, .minis li:nth-child(-n+2) { grid-column: span 1; }
  .minis li:last-child { grid-column: span 2; }   /* five tiles: the last takes the full row */
}

/* 5. the two stages, and the decision between them: one journey bar, the decision on the join */
.journey { display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "seg1" "body1" "mark" "turn" "seg2" "body2"; }
.journey-seg--1 { grid-area: seg1; }
.journey-seg--2 { grid-area: seg2; }
.journey-body--1 { grid-area: body1; }
.journey-body--2 { grid-area: body2; }
.journey-mark { grid-area: mark; }
.journey-turn { grid-area: turn; }

.journey-seg { padding: 20px 24px; border-radius: 14px 14px 0 0; }
.journey-seg .eyebrow { margin-bottom: 4px; }
.journey-seg h3 { margin: 0; }
.journey-seg--1 { background: var(--surface); }
.journey-seg--2 { background: var(--petrol); }
.journey-seg--2 .eyebrow { color: var(--cyan-bright); }
.journey-seg--2 h3 { color: var(--on-petrol); }
.journey-body { padding: 20px 24px 24px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 14px 14px; }
.journey-body p { margin: 0 0 16px; }
.journey-body .text-link { display: inline-block; }
.journey-mark { justify-self: center; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 16px 0 8px; border-radius: 50%; background: var(--cyan); color: var(--on-cyan);
  box-shadow: 0 0 0 6px var(--surface-raised); }
/* a drawn arrow, not a font glyph, so it is bold and sits dead centre in the circle; it points down on phones */
.journey-mark svg { display: block; transform: rotate(90deg); }
.journey-turn { max-width: 440px; margin: 0 auto 24px; padding: 0 8px; text-align: center; }
.journey-turn h3 { margin-bottom: 8px; color: var(--link); }
.journey-turn p { margin: 0; }

@media (min-width: 900px) {
  .journey { grid-template-columns: minmax(0, 1fr) 120px 120px minmax(0, 1fr); column-gap: 32px;
    grid-template-areas: "seg1 seg1 seg2 seg2" "body1 turn turn body2"; }
  .journey-seg { border-radius: 0; padding: 22px 32px; }
  .journey-seg--1 { border-radius: 14px 0 0 14px; margin-right: -14px; padding-right: 56px; }
  .journey-seg--2 { border-radius: 0 14px 14px 0; margin-left: -14px; padding-left: 56px; text-align: right; }
  .journey-body { padding: 28px 0 0; border: 0; border-radius: 0; }
  .journey-mark { grid-area: 1 / 2 / 2 / 4; align-self: center; z-index: 1; margin: 0; }
  .journey-mark svg { transform: none; }
  .journey-turn { margin: 0; padding: 28px 0 0; }
}

/* 6. the Floor Assessment */
/* Four tiles: one column on a phone, two when "$15,000" fits twice across,
   four once each tile is wide enough for the number at 44px. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 48px; padding: 0; list-style: none; }
.stat { padding: 24px; border-radius: 14px; background: var(--petrol-raised); }
.stat-num { display: block; font: 700 44px/48px var(--sans); letter-spacing: -0.02em; color: var(--cyan-bright); }
.stat-label { display: block; margin-top: 8px; font: 500 14px/20px var(--sans); color: var(--on-petrol-2); }
.assess-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.assess-cols h3 { margin-bottom: 12px; }
.assess-cols p + h3 { margin-top: 32px; }
.ticks { padding-left: 20px; }
.ticks li { margin-bottom: 12px; padding-left: 4px; }
.ticks li::marker { color: var(--cyan-bright); }
@media (max-width: 1023px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* On a phone four stacked tiles run to 600px, so each becomes a row with
   the number and its label side by side. */
@media (max-width: 639px) {
  .stats { grid-template-columns: 1fr; gap: 8px; }
  .stat { display: flex; align-items: center; gap: 16px; padding: 14px 20px; }
  .stat-num { flex: none; min-width: 132px; font-size: 32px; line-height: 36px; }
  .stat-label { margin-top: 0; }
}

@media (max-width: 899px) {
  .stats { margin-bottom: 32px; }
  .assess-cols { grid-template-columns: 1fr; gap: 32px; }
}

/* 7. sample report */
.pages-more { max-width: 760px; margin: 32px 0 0; }
.download { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.download-note { margin: 0; font: 500 13px/20px var(--sans); color: var(--ink-muted); }
.pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0; list-style: none; }
.page { display: flex; flex-direction: column; aspect-ratio: 8.5 / 11; padding: 20px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--surface-raised); }
.page--img { display: block; padding: 0; overflow: hidden; }
.page--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-top { display: flex; justify-content: space-between; gap: 8px; font: 500 12px/16px var(--sans); color: var(--ink-muted); }
.page-title { margin: 12px 0 0; font: 700 16px/22px var(--sans); color: var(--ink); }
.page-body { display: flex; flex: 1; align-items: center; justify-content: center; margin-top: 16px; padding: 16px;
  border: 1px dashed var(--border); border-radius: 8px; text-align: center; }
.pages figcaption { margin-top: 16px; }
.cap-title { display: block; margin-bottom: 4px; font: 700 16px/22px var(--sans); color: var(--ink); }
.pages-scroll:focus-visible { outline-offset: 6px; }

@media (max-width: 767px) {
  .pages-scroll { overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); }
  .pages { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 16px; }
  .pages li { scroll-snap-align: start; }
}

/* 8. objections */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 24px 0; cursor: pointer;
  list-style: none; font: 700 20px/28px var(--sans); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font: 500 24px/28px var(--sans); color: var(--link); }
.faq details[open] summary::after { content: '\2212'; }
.answer { max-width: 680px; padding-bottom: 24px; }

@media (max-width: 899px) {
  .faq-grid { grid-template-columns: 1fr; gap: 0; }
  .faq summary { font-size: 18px; line-height: 26px; padding: 20px 0; }
}

/* 9. what happens next */
.timeline { display: grid; gap: 24px; padding: 0; list-style: none; }
.step { position: relative; padding-left: 56px; }
.step-dot { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 2px solid var(--petrol); border-radius: 50%; background: var(--surface);
  font: 700 16px/1 var(--sans); color: var(--ink); }
.step--now .step-dot { border-color: var(--cyan); background: var(--cyan); color: var(--on-cyan); }
.step:not(:last-child)::after { content: ''; position: absolute; left: 19px; top: 48px; bottom: -16px; width: 2px;
  background: var(--ink-muted); }
.step-meta { display: block; margin: 10px 0 6px; font: 500 13px/16px var(--sans); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--link); }
.step h3 { margin-bottom: 8px; font-size: 20px; line-height: 28px; }

@media (min-width: 1024px) {
  .timeline { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .step { padding: 56px 0 0; }
  .step:not(:last-child)::after { left: 48px; right: -16px; top: 19px; bottom: auto; width: auto; height: 2px; }
  .step-meta { margin-top: 0; }
}

/* 9b. dig deeper: two columns of four, read down each column */
.reading { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto);
  grid-auto-flow: column; gap: 0 48px; padding: 0; list-style: none; }
.reading a { display: block; padding: 20px 0; border-top: 1px solid var(--border); text-decoration: none; }
.reading li:nth-child(5) a, .reading li:last-child a { border-bottom: 1px solid var(--border); }
.reading-title { display: block; font: 700 17px/24px var(--sans); color: var(--link); }
.reading a:hover .reading-title { text-decoration: underline; text-underline-offset: 3px; }
.reading-line { display: block; margin-top: 4px; color: var(--ink-secondary); }

@media (max-width: 767px) {
  .reading { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .reading li:nth-child(5) a { border-bottom: 0; }
}

/* 10. close. Follows the white Dig deeper strip, so a rule marks the turn
   from reading to the ask. */
.closing { text-align: center; border-top: 1px solid var(--border); }
.closing-inner { max-width: 720px; }
.closing p { margin: 16px auto 32px; }

/* ---- personal-link tracking ---------------------------------------------- */

/* The hub's disclosure line, word for word, under the nav on both pages. */
.track-notice { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--border); background: var(--surface);
  font: 500 12px/18px var(--sans); color: var(--ink-muted); }
.track-notice .wrap { display: block; }   /* a span, so it needs block to take the content width */
.track-notice a { color: var(--ink-muted); }

/* /consent.js injects this banner; its wording is the lawyer-reviewed hub
   text and is not edited here. Styled to match the hub's version. */
#cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px 64px;
  background: var(--petrol); border-top: 1px solid rgba(234, 242, 247, 0.12); color: var(--on-petrol-2);
  font: 500 14px/20px var(--sans); transform: translateY(100%); transition: transform 0.3s ease; }
#cookie-banner.visible { transform: translateY(0); }
#cookie-banner p { flex: 1 1 320px; margin: 0; }
#cookie-banner a { color: var(--cyan-bright); }
.cookie-actions { display: flex; flex: none; gap: 8px; }
#cookie-accept, #cookie-decline { min-height: 40px; padding: 8px 20px; border-radius: 8px; cursor: pointer;
  font: 700 14px/20px var(--sans); }
#cookie-accept { border: 0; background: var(--cyan); color: var(--on-cyan); }
#cookie-accept:hover { background: var(--cyan-bright); }
#cookie-decline { border: 1px solid rgba(234, 242, 247, 0.4); background: transparent; color: var(--on-petrol); }
#cookie-decline:focus-visible, #cookie-accept:focus-visible { outline: 3px solid var(--cyan-bright); outline-offset: 2px; }
@media (max-width: 767px) { #cookie-banner { padding: 14px 16px; } }
@media (prefers-reduced-motion: reduce) { #cookie-banner { transition: none; } }

/* ---- booking dialog ------------------------------------------------------ */

.booking { width: min(1000px, 100% - 32px); max-width: none; height: min(820px, 100% - 32px); max-height: none;
  margin: auto; padding: 0; border: 0; border-radius: 18px; background: var(--surface-raised); color: var(--ink-secondary);
  display: flex; flex-direction: column; overflow: hidden; }
.booking:not([open]) { display: none; }
.booking::backdrop { background: rgba(15, 42, 61, 0.72); }
.booking-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 28px 16px;
  border-bottom: 1px solid var(--border); }
.booking-head h2 { font-size: 24px; line-height: 32px; }
.booking-sub { margin: 4px 0 0; font: 500 14px/20px var(--sans); color: var(--ink-muted); }
.booking-close { flex: none; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-raised); color: var(--ink); font: 500 26px/1 var(--sans); cursor: pointer; }
.booking-close:hover { border-color: var(--petrol); }
.booking-close:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.booking-frame { flex: 1; min-height: 0; background: var(--surface-raised); }
.booking-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.booking-fallback { margin: 0; padding: 12px 28px 16px; border-top: 1px solid var(--border); font-size: 14px; line-height: 22px; }
body:has(.booking[open]) { overflow: hidden; }

@media (max-width: 767px) {
  .booking { width: 100%; height: 100%; border-radius: 0; }
  .booking-head { padding: 16px; }
  .booking-head h2 { font-size: 20px; line-height: 28px; }
  .booking-fallback { padding: 10px 16px 14px; font-size: 13px; }
}

/* ---- The live test -------------------------------------------------------- */

.case-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; padding: 0; list-style: none; }
.case-figs li { padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); }
.case-num { display: block; font: 700 44px/48px var(--sans); letter-spacing: -0.02em; color: var(--petrol); }
.case-num--muted { color: var(--ink-muted); }
.case-k { display: block; margin-top: 8px; font: 500 14px/20px var(--sans); color: var(--ink-secondary); }
.case-limits { max-width: 720px; margin-top: 48px; padding-left: 24px; border-left: 3px solid var(--petrol); }
.case-limits h3 { margin-bottom: 12px; }
@media (max-width: 1023px) { .case-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .case-figs { grid-template-columns: 1fr; gap: 8px; }
  .case-figs li { display: flex; align-items: center; gap: 16px; padding: 16px; }
  .case-num { flex: none; min-width: 132px; font-size: 32px; line-height: 36px; }
  .case-k { margin-top: 0; }
  .case-limits { margin-top: 32px; padding-left: 16px; }
}

/* ---- Dig deeper: folds in the sections, and the reading panel ------------------- */

.more { max-width: 720px; margin-top: 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.more + .more, .more + .fit-note { margin-top: 0; }
.more + .fit-note { padding-top: 32px; }
.more summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer;
  list-style: none; font: 700 17px/24px var(--sans); color: var(--link); }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: '+'; flex: none; font: 500 22px/24px var(--sans); }
.more[open] summary::after { content: '\2212'; }
.more summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.more-body { padding-bottom: 20px; }
.more-body p { margin-bottom: 12px; }
.band .more { border-color: rgba(234, 242, 247, 0.2); margin-top: 40px; }
.band .more summary { color: var(--cyan-bright); }
.no-js .read-open { display: none; }

.reader { position: fixed; inset: 0 0 0 auto; width: min(680px, 100%); height: 100%; max-width: none; max-height: none;
  margin: 0 0 0 auto; padding: 0; border: 0; background: var(--surface-raised); color: var(--ink-secondary);
  display: flex; flex-direction: column; overflow: hidden; }
.reader:not([open]) { display: none; }
.reader::backdrop { background: rgba(15, 42, 61, 0.72); }
.reader-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 32px 20px;
  border-bottom: 1px solid var(--border); }
.reader-head .eyebrow { margin-bottom: 8px; }
.reader-head h2 { font-size: 26px; line-height: 34px; }
.reader-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 32px 40px; outline: 0; }
.reader-body p, .reader-body li { font-size: 17px; line-height: 28px; }
.reader-body h3 { margin: 28px 0 8px; font-size: 19px; line-height: 26px; }
.reader-body ul, .reader-body ol { margin: 0 0 16px; padding-left: 20px; }
.reader-body li { margin-bottom: 12px; padding-left: 4px; }
.reader-body li::marker { color: var(--link); }
.reader-body b { font: 500 16px/28px var(--sans); color: var(--ink); }
.report-pages { padding-left: 0 !important; list-style: none; }
.report-pages li { padding: 14px 0 2px; margin: 0; border-top: 1px solid var(--border); }
.report-pages b { display: block; }
.reader-intro { color: var(--ink-muted); }
.reader .fields-cols { grid-template-columns: 1fr; gap: 24px; margin: 24px 0; }
.reader .fields-cols .eyebrow { margin: 0 0 12px; font-size: 13px; line-height: 16px; }
.reader .field-list { margin: 0; padding-left: 0; }
.reader .field-list li { font-size: 16px; line-height: 24px; margin: 0; padding: 10px 0; }
.reader .field-list b { font: 500 14px/24px var(--sans); }
.copy-src { padding: 24px; border-radius: 14px; background: var(--surface); }
.copy-src p:last-child { margin-bottom: 0; }
.reader-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.copy-done { font: 500 14px/20px var(--sans); color: var(--ink-muted); }
.reader-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 16px 32px;
  border-top: 1px solid var(--border); }
body:has(.reader[open]) { overflow: hidden; }

@media (max-width: 767px) {
  .reader { width: 100%; }
  .reader-head { padding: 16px; }
  .reader-head h2 { font-size: 21px; line-height: 28px; }
  .reader-body { padding: 20px 16px 32px; }
  .reader-body p, .reader-body li { font-size: 16px; line-height: 26px; }
  .reader-foot { padding: 12px 16px; }
  .reader-foot .btn { flex: 1 1 0; min-width: 0; padding-left: 12px; padding-right: 12px; }
  .download .btn { width: 100%; }
}

/* ---- footer -------------------------------------------------------------- */

.footer { padding: 32px 0 48px; border-top: 1px solid var(--border); font: 500 13px/20px var(--sans); color: var(--ink-muted); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.footer p { margin: 0; }
.footer a { color: var(--ink-muted); }
.footer .ph { margin-top: 6px; }

/* ---- /book --------------------------------------------------------------- */

.book-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start;
  padding: 48px 0 64px; }
.book-copy h1 { font-size: 36px; line-height: 42px; }
.book-list { margin: 32px 0; padding: 0; list-style: none; }
.book-list li { margin-bottom: 16px; padding-left: 16px; border-left: 3px solid var(--cyan); font-size: 18px; line-height: 30px; }
.book-not { font-size: 18px; line-height: 30px; color: var(--ink); }
.book-who { margin-top: 24px; font: 500 14px/20px var(--sans); color: var(--ink-muted); }
.scheduler { display: block; width: 100%; height: 680px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-raised); }
.scheduler--ph { display: flex; align-items: center; justify-content: center; padding: 24px; border-style: dashed; }
.book-fallback { margin-top: 12px; font-size: 15px; line-height: 24px; }

@media (max-width: 899px) {
  .book-grid { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 48px; }
  .book-copy h1 { font-size: 30px; line-height: 36px; }
  .book-list { margin: 24px 0; }
  .scheduler { height: 640px; }
}

/* ---- /privacy and 404 ---------------------------------------------------- */

.doc { max-width: 720px; padding: 64px 0; }
.doc h1 { margin-bottom: 24px; font-size: 36px; line-height: 42px; }

@media (max-width: 767px) {
  .doc { padding: 48px 0; }
  .doc h1 { font-size: 30px; line-height: 36px; }
}

/* ---- /case-studies (built by cloudflare/case-studies.py) ------------------ */

.cs-hero .eyebrow a { color: inherit; text-decoration: none; }
.cs-hero .eyebrow a:hover { text-decoration: underline; }
.cs .case-figs { margin-bottom: 48px; }
.cs-part { max-width: 720px; margin-top: 40px; }
.cs-part h2 { margin-bottom: 12px; font-size: 26px; line-height: 34px; }
.cs-part p, .cs-part li { font-size: 18px; line-height: 30px; }
.cs-part ul { margin: 0 0 16px; padding-left: 20px; }
.cs-part li { margin-bottom: 12px; padding-left: 4px; }
.cs-part li::marker { color: var(--link); }
.cs-part b { font: 600 17px/30px var(--sans); color: var(--ink); }
.cs-part.case-limits { margin-top: 48px; }
.cs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 48px 0 0; }
.cs-index h1 { font-size: 36px; line-height: 42px; }
.cs-index h1 + p { margin-top: 16px; }
.cs-new { margin: 24px 0 0; font: 500 15px/22px var(--sans); color: var(--on-petrol-2); }
.cs-explore { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--border); }
.cs-explore > h2 { margin-bottom: 24px; font-size: 26px; line-height: 34px; }
.cs-explore .card { display: flex; flex-direction: column; }
.cs-explore .card .eyebrow { margin-bottom: 8px; }
.cs-explore .card h3 { font-size: 20px; line-height: 28px; }
.cs-explore .card h3 a { color: inherit; text-decoration: none; }
.cs-explore .card h3 a:hover { text-decoration: underline; }
.cs-explore .card .text-link { margin-top: auto; }
.cs-list h2 { margin-bottom: 12px; font-size: 24px; line-height: 32px; }
.cs-list h2 a { color: inherit; text-decoration: none; }
.cs-list h2 a:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .cs .case-figs { margin-bottom: 32px; }
  .cs-part { margin-top: 32px; }
  .cs-part h2 { font-size: 22px; line-height: 28px; }
  .cs-index h1 { font-size: 30px; line-height: 36px; }
  .cs-explore { margin-top: 48px; padding-top: 32px; }
  .cs-explore > h2 { font-size: 22px; line-height: 28px; }
  .cs-part p, .cs-part li { font-size: 17px; line-height: 28px; }
}

/* Case study tables: one per page at most, four short columns. Scrolls inside its own box on a narrow phone. */
.cs-table-wrap { margin: 8px 0 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cs-table { width: 100%; border-collapse: collapse; font: 500 15px/22px var(--sans); color: var(--ink-secondary); }
.cs-table th, .cs-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.cs-table thead th { font: 600 12px/16px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
  border-bottom-color: var(--ink-muted); }
.cs-table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.cs-table td:nth-child(2), .cs-table td:nth-child(3) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.reader-body .cs-table { font-size: 14px; line-height: 20px; }
@media (max-width: 767px) {
  .cs-table { font-size: 14px; line-height: 20px; }
  .cs-table th, .cs-table td { padding: 8px 6px; }
  .cs-table tbody th { white-space: normal; }
}