/* 72-Hour Ads order page. Hand-written, no build step, one file.
   Tokens follow the axeom.com light theme (cool off-white paper, navy ink, brand sapphire) and its rules:
   sapphire is the action colour (flat fill on buttons), ONE sapphire colour field per page (the guarantee),
   tone changes section to section, 700-weight headings, no glow, no gradient buttons, no arrows.
   Mobile first. Breakpoints: 640px and 960px. 8px spacing scale.
   No inline styles anywhere in the HTML, so the CSP can stay at style-src 'self'. */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('fonts/dm-sans-latin-variable-opsz-wght-normal.woff2') format('woff2');
}

:root {
  color-scheme: light;
  --paper: #f7f9fc;
  --white: #ffffff;
  --ink: #0b1220;
  --t2: #243248; /* strong body on light */
  --t3: #435066; /* body on light */
  --t4: #586476; /* small print on light */
  --line: #d5dde9;
  --line-strong: #748297;
  --sap: #1e5aaa; /* brand sapphire: buttons and the one colour field */
  --sap-hover: #174a8e;
  --sap-tint: #eaf1fb;
  --night: #0b1220;
  --on-night: #f4f7fb;
  --on-night-2: #c6d0dd;
  --pale: #8fb0e0; /* accent text on night, 8:1 */
  --err: #b42318;
  --ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --gutter: 16px;
  --sec: 56px;
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}
@media (min-width: 960px) {
  :root { --gutter: 32px; --sec: 96px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font: 400 17px/1.55 var(--ui);
  font-optical-sizing: auto;
  color: var(--t3);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }

h1, h2, h3 { color: var(--ink); font-weight: 700; margin: 0; text-wrap: balance; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 700; }
a { color: var(--sap); text-underline-offset: 3px; }
a:hover { color: var(--sap-hover); }
s { color: var(--t4); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: #fff; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 8px; top: -64px; z-index: 50; padding: 12px 16px;
  background: var(--ink); color: #fff; font-weight: 600; border-radius: 6px;
}
.skip:focus { top: 8px; }

.container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- sections and tone ---------- */
.section { padding-block: var(--sec); }
.section--paper { background: var(--paper); }
.section--white { background: var(--white); }
.section--night { background: var(--night); color: var(--on-night-2); }
.section--night h2, .section--night h3, .section--night strong { color: #fff; }
.section--sap { background: var(--sap); color: #fff; }
.section--sap h2, .section--sap strong { color: #fff; }

h2 {
  font-size: clamp(1.75rem, 3.2vw + 1rem, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h3 { font-size: 20px; line-height: 1.3; }

.split { display: grid; gap: 24px; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
}
.measure { max-width: 62ch; }
.lede { font-size: 20px; line-height: 1.5; color: var(--t2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border: 2px solid var(--sap); border-radius: 6px;
  background: var(--sap); color: #fff; font: 600 17px/1.2 var(--ui);
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.btn:hover { background: var(--sap-hover); border-color: var(--sap-hover); color: #fff; box-shadow: 0 6px 18px rgba(30, 90, 170, 0.28); }
.btn:active { transform: scale(0.98); box-shadow: none; }
.btn--block { width: 100%; }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(11, 18, 32, 0.22); }
/* White button for the dark fields (the guarantee). */
.btn--light { background: #fff; border-color: #fff; color: var(--ink); }
.btn--light:hover { background: var(--sap-tint); border-color: var(--sap-tint); color: var(--ink); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.btn--light:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.linkbtn {
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--sap); font: 600 17px/1.3 var(--ui); text-decoration: underline; text-underline-offset: 3px;
}
.linkbtn:hover { color: var(--sap-hover); }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: block; color: var(--ink); font-weight: 700; font-size: 17px; line-height: 1.15; text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand__by { display: block; font-size: 14px; font-weight: 500; color: var(--t3); }
@media (min-width: 640px) {
  .brand__by { display: inline; font-size: inherit; color: inherit; }
}

/* ---------- hero ---------- */
.hero { background: var(--paper); padding-block: 28px 48px; }
.hero__grid { display: grid; gap: 40px; }
.hero h1 {
  margin-bottom: 20px;
  font-size: clamp(2.5rem, 4.6vw + 1.2rem, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.hero h1 span { display: block; color: var(--sap); }
.hero .lede { margin-bottom: 20px; max-width: 54ch; font-size: 18px; }
.proof-line { max-width: 54ch; margin-bottom: 24px; font-size: 16px; line-height: 1.5; color: var(--t2); font-weight: 500; }
.hero__cta { margin-bottom: 16px; }
/* Hero clip: a real edit. Desktop shows it in the right column. Phones and tablets get the copy under the proof row (.hero__clip--m), so the headline and button stay on the first screen. */
.hero__clip { display: none; }
/* Phone and tablet copy of the hero clip (funnel v4): right under the proof row, centered, never full width. */
.hero .hero__clip--m { display: block; width: min(70%, 260px); margin: 28px auto 0; }

/* Hero proof row (funnel v4): avatar stack, who, then the one strong line. */
.hproof { max-width: 54ch; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.hproof__who { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.avstack { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.avstack li { margin-left: -12px; }
.avstack li:first-child { margin-left: 0; }
.avstack img { display: block; width: 40px; height: 40px; border: 2px solid var(--paper); border-radius: 50%; object-fit: cover; background: var(--sap-tint); }
.hproof__who p { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--t2); }
.hproof__big { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }

.hero .btn { width: 100%; }
@media (min-width: 640px) {
  .hero { padding-block: 40px 56px; }
  .hero .lede { font-size: 20px; margin-bottom: 24px; }
  .proof-line { font-size: 17px; margin-bottom: 32px; }
  .hproof { margin-top: 28px; padding-top: 24px; }
  .hero .btn { width: auto; min-width: 280px; }
}
@media (min-width: 960px) {
  .hero { padding-block: 80px 96px; }
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 64px; }
  .hero__clip { display: block; width: min(100%, 300px); margin-inline: auto 0; }
  .hero .hero__clip--m { display: none; }
  .hproof__big { font-size: 22px; }
}

/* ---------- promise strip (funnel v1) ---------- */
.promise { padding-block: 20px; background: var(--white); border-bottom: 1px solid var(--line); }
.promise__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.promise__list li { padding-left: 12px; border-left: 3px solid var(--sap); font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ink); }
@media (min-width: 768px) {
  .promise { padding-block: 24px; }
  .promise__list { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .promise__list li { font-size: 17px; }
}

/* Button under a section (Cameron, guarantee): full width on phones. */
.section-cta { margin-top: 32px; }
.section--sap .section-cta { margin-top: 32px; }
.section-cta .btn, .price-block .btn { width: 100%; }
@media (min-width: 640px) {
  .section-cta .btn, .price-block .btn { width: auto; min-width: 280px; }
}

/* ---------- hairline lists ---------- */
.ticks { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.ticks > li { position: relative; padding: 14px 0 14px 28px; border-top: 1px solid var(--line); }
.ticks > li::before {
  content: ''; position: absolute; left: 0; top: 1.45em; width: 12px; height: 3px; background: var(--sap);
}

/* Offer stack: bold item, plain detail under it. */
.ticks--stack > li { padding-right: 4px; }
.ticks--stack > li::before { top: 1.7em; }
.ticks--stack strong { display: block; margin-bottom: 2px; font-size: 19px; line-height: 1.35; }

.price-block { margin-top: 32px; padding: 24px; border: 1.5px solid var(--sap); border-radius: 8px; background: var(--sap-tint); }
.price-block__price { margin: 0 0 4px; font-size: clamp(2.5rem, 9vw, 4rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.price-block__price span { display: block; font-size: 20px; font-weight: 600; letter-spacing: 0; color: var(--t2); }
.price-block__note { margin-bottom: 20px; font-size: 19px; color: var(--t2); }
@media (min-width: 640px) {
  .price-block { padding: 32px; }
}

/* ---------- how it works ---------- */
/* Phones: 2 by 2 with smaller numbers, so the four title-only steps take one short block instead of a long column. */
.steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step); display: block; margin-bottom: 8px;
  font-size: clamp(2.25rem, 6vw, 4.5rem); font-weight: 700; line-height: 1; color: var(--sap);
}
.steps strong { display: block; margin-bottom: 0; font-size: 18px; line-height: 1.3; }
@media (min-width: 640px) {
  .steps { gap: 40px 32px; margin-top: 32px; }
  .steps strong { font-size: 20px; }
}
@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- testimonial (funnel v2; mirrors axeom.com HomeTestimonial) ---------- */
.tst__grid { display: grid; gap: 32px; align-items: center; }
.tst__card { width: min(100%, 260px); margin-inline: auto 0; }
.tst__quote { margin: 0 0 24px; }
.tst__quote blockquote {
  margin: 0; font-size: clamp(1.5rem, 2.2vw + 1rem, 2.5rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.015em;
  color: var(--ink); text-wrap: pretty; max-width: 28ch;
}
.tst__quote figcaption { margin-top: 16px; font-size: 16px; color: var(--t3); }
.tst__quote figcaption b { color: var(--ink); }
.tst__fig { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.tst__num { font-size: clamp(3.5rem, 8vw, 5.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--sap); font-variant-numeric: tabular-nums; }
.tst__sub { font-size: 20px; line-height: 1.35; color: var(--t2); max-width: 32ch; }
.tst__note { margin-bottom: 16px; font-size: 15px; color: var(--t4); }
.tst__did { max-width: 56ch; color: var(--t2); }
@media (min-width: 960px) {
  .tst__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
  .tst__card { width: min(100%, 320px); margin-inline: auto; }
}

/* Who we edit for (funnel v5): Kam's testimonial leads, then the proof wall cards like axeom.com (photo, name, handle). White on paper, one border.
   Funnel v6: the cards are a rolling bar (see "rolling rows" below). Fixed width, 190px on phones and 220px from 640px. */
.who__h { margin-bottom: 32px; }
.wall { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.who__past { margin: 40px 0 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.who__past + .roll { margin-top: 16px; }
.wall__list { list-style: none; margin: 0; padding: 0; }
.wall__card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 132px;
  padding: 14px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.wall__avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--sap-tint); }
.wall__text { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.wall__name { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.wall__meta { font-size: 14px; line-height: 1.4; color: var(--t3); overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) {
  .wall__card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 10px 24px rgba(11, 18, 32, 0.1); }
}

/* ---------- rolling rows (funnel v6; roll.js, proof.js) ----------
   Same method as the proof wall on axeom.com: the row holds the same track twice, the second copy is aria-hidden, and the row slides
   left by exactly one track (-50%), so the loop has no jump. Only transform animates. The wrapper clips (overflow: clip, so focus can never scroll it
   sideways) and fades both edges, so the page itself can never scroll sideways.
   Each track must be wider than the wrapper (1056px at most): cards 10 x 236px, reels 4 x 272px. If you add or remove cards, keep that true.
   Paused by: hover (mouse), a tap (cards), keyboard focus, a playing reel, the row being off screen, a hidden tab. Classes are set by roll.js and proof.js. */
.roll {
  --roll-w: 190px; --roll-gap: 12px; --roll-time: 55s;
  overflow: hidden; overflow: clip; padding: 8px 0 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.roll:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.roll__row { display: flex; width: max-content; animation: roll-drift var(--roll-time) linear infinite; }
.roll__track { display: flex; flex: none; align-items: flex-start; gap: var(--roll-gap); padding-right: var(--roll-gap); }
.roll--cards .wall__card { flex: none; width: var(--roll-w); }
.roll--reels { --roll-w: 170px; --roll-time: 48s; }
.roll--reels .roll__track { margin: 0; }
.roll--reels .clip { flex: none; width: var(--roll-w); }
.roll--reels .roll__row { animation-direction: reverse; }
@keyframes roll-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.roll.is-off .roll__row, .roll.is-held .roll__row, .roll.is-focus .roll__row, .roll.is-video .roll__row,
.roll-tab-hidden .roll__row { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .roll:hover .roll__row { animation-play-state: paused; }
}
@media (min-width: 640px) {
  .roll { --roll-w: 220px; --roll-gap: 16px; --roll-time: 65s; }
  .roll--reels { --roll-w: 210px; --roll-gap: 24px; --roll-time: 55s; }
}
@media (min-width: 960px) {
  .roll--reels { --roll-w: 240px; --roll-gap: 32px; --roll-time: 60s; }
}
/* Reduced motion: no rolling. Both rows become the plain wrapping grid, and the aria-hidden copy is not shown. */
@media (prefers-reduced-motion: reduce) {
  .roll { padding: 0; -webkit-mask-image: none; mask-image: none; }
  .roll__row { width: auto; }
  .roll__track { display: grid; flex: 1 1 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-right: 0; }
  .roll__track[aria-hidden="true"] { display: none; }
  .roll--cards .wall__card, .roll--reels .clip { width: auto; }
  .roll--reels .roll__track { gap: 24px 12px; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 640px) {
  .roll--cards .roll__track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .roll--reels .roll__track { gap: 32px 24px; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 960px) {
  .roll--reels .roll__track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .roll--cards .wall__card { flex-direction: row; justify-content: flex-start; gap: 16px; min-height: 88px; padding: 16px 20px; text-align: left; }
}

/* ---------- client clips (testimonial and past work) ---------- */
/* A normal grid, never a sideways scroll: 2 across until 960px, then 4. Used by Cameron's four clips (the "Edits we made for them" row is a rolling row, see above). */
.samples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; margin: 32px 0 0; }
@media (min-width: 640px) {
  .samples { gap: 32px 24px; }
}
@media (min-width: 960px) {
  .samples { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.clip { margin: 0; min-width: 0; }
.clip__frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; background: var(--night); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.clip__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: var(--night); }
.clip__play {
  position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; background: linear-gradient(180deg, rgba(11, 18, 32, 0) 55%, rgba(11, 18, 32, 0.55)); color: #fff; cursor: pointer;
}
.clip__play::before { content: ''; grid-area: 1 / 1; width: 60px; height: 60px; border-radius: 50%; background: var(--sap); box-shadow: 0 6px 20px rgba(11, 18, 32, 0.4); transition: transform 0.2s ease, background-color 0.2s ease; }
.clip__play svg { grid-area: 1 / 1; margin-left: 3px; }
.clip__play:hover::before { background: var(--sap-hover); transform: scale(1.06); }
.clip__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.clip.is-playing .clip__play { display: none; }
.clip__cap { margin-top: 12px; font-size: 14px; line-height: 1.4; color: var(--t3); }
.clip__cap strong { display: block; font-size: 17px; line-height: 1.3; }
.clip__cap span { display: block; }
@media (hover: hover) and (pointer: fine) {
  .clip:hover .clip__frame { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(11, 18, 32, 0.18); }
}

/* ---------- Cameron England block ---------- */
.cam__head { display: flex; align-items: center; gap: 16px; }
.cam__avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--sap-tint); }
.cam__name { font-size: clamp(1.25rem, 1.5vw + 1rem, 1.75rem); line-height: 1.2; letter-spacing: -0.01em; }
.cam__handle { margin: 2px 0 0; font-size: 16px; color: var(--t3); }
.cam__fig { margin: 24px 0 8px; font-size: clamp(2.25rem, 6vw, 4rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--sap); text-wrap: balance; }
.cam__line { max-width: 56ch; color: var(--t2); }

/* ---------- the six edits, compact, inside the offer stack (funnel v5) ---------- */
.edits { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.edit { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.edit__icon { display: block; margin-bottom: 8px; color: var(--sap); }
.edit h3 { margin: 0; font-size: 16px; line-height: 1.25; }
.edit p { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 400; color: var(--t3); }
@media (min-width: 640px) {
  .edits { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .edit { padding: 16px; }
  .edit h3 { font-size: 17px; }
}

/* ---------- guarantee (the one sapphire field) ---------- */
.section--sap h2 { font-size: clamp(2rem, 5vw, 3.75rem); max-width: 20ch; margin-bottom: 24px; }
.section--sap p { max-width: 52ch; font-size: 20px; line-height: 1.5; }

/* ---------- VSL prices (inside the FAQ) ---------- */
.vsl-price { font-size: 24px; font-weight: 700; color: var(--ink); }

/* ---------- questions ---------- */
.faq { border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 12px 0; list-style: none; cursor: pointer;
  font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 16px; height: 16px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat;
}
.faq details[open] summary::after { background: linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat; }
.faq .a { max-width: 62ch; padding: 0 0 24px; }
.faq .a .ticks { margin-bottom: 16px; }
.faq .a .ticks + p { margin-top: 0; }

/* ---------- order section (night band, white panels) ---------- */
.order__grid { display: grid; gap: 32px; }
@media (min-width: 960px) {
  .order__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
}
.order__intro p { color: var(--on-night-2); font-size: 20px; line-height: 1.5; }
.order__intro h2 { margin-bottom: 24px; }

.panel { padding: 24px; border-radius: 8px; background: #fff; color: var(--t3); }
.panel + .panel { margin-top: 24px; }
@media (min-width: 640px) {
  .panel { padding: 40px; }
}
.panel h3 { margin-bottom: 16px; font-size: clamp(1.5rem, 1.5vw + 1rem, 1.875rem); line-height: 1.15; letter-spacing: -0.01em; }
.panel h3:focus { outline: none; }
.panel .intro { margin-bottom: 24px; }

.field { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend {
  display: block; margin: 0 0 8px; padding: 0; font-weight: 600; color: var(--ink);
}
.input {
  display: block; width: 100%; min-height: 52px; padding: 0 16px;
  border: 1.5px solid var(--line-strong); border-radius: 6px; background: #fff; color: var(--ink);
  font: 400 17px/1.3 var(--ui);
}
textarea.input { min-height: 140px; padding: 12px 16px; resize: vertical; line-height: 1.5; }
.input::placeholder { color: var(--t4); opacity: 1; }
.input:focus-visible { outline: 3px solid var(--sap); outline-offset: 1px; border-color: var(--sap); }
.input[aria-invalid='true'], .field[data-invalid='true'] .choice label { border-color: var(--err); }
.err { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--err); }
.hint { margin: 6px 0 0; font-size: 15px; color: var(--t4); }

.choice { position: relative; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice label {
  display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 0; padding: 8px 16px;
  border: 1.5px solid var(--line-strong); border-radius: 6px; background: #fff;
  font-weight: 500; color: var(--ink); cursor: pointer;
}
.choice label::before {
  content: ''; flex: none; width: 20px; height: 20px; border: 2px solid var(--t3); border-radius: 50%; background: #fff;
}
.choice--check label::before { border-radius: 4px; }
.choice input:checked + label { border-color: var(--sap); background: var(--sap-tint); }
.choice input:checked + label::before { border-color: var(--sap); background: var(--sap); box-shadow: inset 0 0 0 3px #fff; }
.choice--check input:checked + label::before { box-shadow: none; background: var(--sap) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.8 9 10 3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.choice input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 2px; }

.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.send-error { margin: 16px 0 0; font-weight: 600; color: var(--err); }
.privacy-note { margin-top: 24px; font-size: 15px; color: var(--t4); }

.fit-ok { margin: 0 0 16px; padding: 10px 14px; border-left: 4px solid var(--sap); background: var(--sap-tint); font-weight: 600; color: var(--ink); }

/* ---------- order form: the Axeom lead form engine (scripts/forms.js) ----------
   Classes mirror axeom-com LeadForm.astro (progress bar, step slide, lettered choice cards, Back link), on this page's tokens.
   forms.js adds the bar, Back and Next buttons itself, so every class here is .leadform*. */
.leadform { width: 100%; max-width: 640px; }
.leadform__form { display: grid; gap: 24px; }
.leadform__step { display: grid; gap: 24px; margin: 0; padding: 0; border: 0; min-width: 0; }
.leadform__field { display: grid; gap: 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
.leadform__group .leadform__field { gap: 8px; }
.leadform__q {
  margin: 0; padding: 0; font: 700 clamp(1.375rem, 1.2vw + 1.1rem, 1.75rem) / 1.2 var(--ui); letter-spacing: -0.015em;
  color: var(--ink); text-wrap: balance;
}
legend.leadform__q { margin-bottom: 16px; }
.leadform__q:focus { outline: none; }
.leadform__lbl { font-weight: 600; color: var(--ink); }
.leadform__hint { margin: -8px 0 0; font-size: 15px; color: var(--t4); }
.leadform__options { display: grid; gap: 8px; margin: 0; counter-reset: opt; }
.leadform__option { position: relative; display: block; }
/* The real radio stays in the page for keyboard and screen readers; the label is the card. */
.leadform__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.leadform__option label {
  display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 8px 16px;
  border: 1.5px solid var(--line-strong); border-radius: 6px; background: #fff;
  color: var(--ink); font-size: 18px; font-weight: 500; line-height: 1.3; pointer-events: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.leadform__option label::before {
  counter-increment: opt; content: counter(opt, upper-alpha); content: counter(opt, upper-alpha) / '';
  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px;
  border: 1.5px solid var(--line-strong); border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--t2);
}
.leadform__option:hover label { border-color: var(--ink); }
.leadform__option input:checked + label { border-color: var(--sap); background: var(--sap-tint); box-shadow: inset 0 0 0 1px var(--sap); }
.leadform__option input:checked + label::before { border-color: var(--sap); background: var(--sap); color: #fff; }
.leadform__option input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 3px; }
.leadform__field input[type='text'], .leadform__field input[type='email'], .leadform__field input[type='tel'] {
  display: block; width: 100%; min-height: 56px; padding: 0 16px;
  border: 1.5px solid var(--line-strong); border-radius: 6px; background: #fff; color: var(--ink);
  font: 400 18px/1.3 var(--ui);
}
.leadform__field input::placeholder { color: var(--t4); opacity: 1; }
.leadform__field input:focus-visible { outline: 3px solid var(--sap); outline-offset: 1px; border-color: var(--sap); }
.leadform__err { padding: 6px 8px; border-left: 3px solid var(--err); background: #fdecea; font-size: 15px; font-weight: 600; color: var(--err); }
.leadform__field[aria-invalid='true'] input[type='text'], .leadform__field[aria-invalid='true'] input[type='email'], .leadform__field[aria-invalid='true'] input[type='tel'],
.leadform input[aria-invalid='true'] { border-color: var(--err); }
.leadform__field[aria-invalid='true'] .leadform__option label { border-color: var(--err); }
.leadform__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.leadform__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.leadform__send-error { margin: 0; font-weight: 600; color: var(--err); }
.leadform__send-error a { color: var(--err); }
.leadform__form[hidden] { display: none; }

/* Progress bar: empty on the first question, then fills as the visitor answers. */
.leadform__top { display: flex; align-items: center; gap: 16px; }
.leadform__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.leadform__bar > i { display: block; height: 100%; background: var(--sap); transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.25s ease-out; }

/* Back and Next (and the final submit) sit on one row. */
.leadform__nav { display: flex; align-items: center; gap: 16px; }
.leadform__nav .btn { flex: 1; margin: 0; width: auto; }
.leadform__nav [hidden] { display: none; }
.leadform__back {
  min-height: 52px; padding: 0 16px; border: 0; background: none; color: var(--t2);
  font: 500 17px/1.2 var(--ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.leadform__back:hover { color: var(--ink); }
@media (min-width: 640px) {
  .leadform__nav .btn { flex: none; min-width: 200px; }
}

/* A new question slides in (not when the visitor asks for reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  .leadform__step.is-in-fwd { animation: leadform-fwd 0.18s ease-out; }
  .leadform__step.is-in-back { animation: leadform-back 0.18s ease-out; }
}
@keyframes leadform-fwd { from { opacity: 0; transform: translateX(16px); } }
@keyframes leadform-back { from { opacity: 0; transform: translateX(-16px); } }

/* The engine's own result panel is swapped for the decline panel or Step 2 by order.js. This only styles it if it ever stays on screen. */
.leadform__result { display: grid; gap: 8px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); outline: none; }
.leadform__result p { margin: 0; }
.leadform__result[hidden] { display: none; }

/* Order bump: the 48-Hour Rush. */
/* The 48-Hour Rush, offered on thanks.html right after payment. */
.rush-offer { margin: 0 0 32px; border: 2px dashed var(--sap); background: var(--sap-tint); }
.rush-offer p { margin: 0 0 16px; }

/* Order summary and live total. */
.order-summary { margin-bottom: 24px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--t2); }
.order-summary__row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.order-summary__total { display: flex; justify-content: space-between; gap: 16px; margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--line-strong); font-size: 20px; font-weight: 700; color: var(--ink); }
.order-summary__total strong { font-size: 24px; }
.pay-note { margin-top: 12px; font-size: 15px; font-weight: 500; color: var(--t2); }

.summary { margin-bottom: 24px; padding: 16px 0; border-block: 1px solid var(--line); color: var(--t2); }
.after-btn { margin-top: 16px; }
.pay-fine { margin-top: 16px; font-size: 15px; color: var(--t4); }
.toast {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px; margin: 0 auto; padding: 14px 16px;
  border-radius: 8px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 0 0 2px #fff;
}

.starter { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.starter h3 { font-size: 24px; }
.starter__why { font-weight: 600; color: var(--ink); }
/* Starter 5 shown first (1 to 9 ads a month with $1,000+ spend). */
.starter--top { margin: 0 0 24px; padding: 20px; border: 1.5px solid var(--sap); border-radius: 8px; background: var(--sap-tint); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 16px; }

.result p { font-size: 20px; line-height: 1.5; color: var(--t2); }

/* White panels inside the night band keep light-surface colours. */
.section--night .panel { color: var(--t3); }
.section--night .panel h3, .section--night .panel strong { color: var(--ink); }
.panel :focus-visible { outline-color: var(--ink); }

/* ---------- thanks page ---------- */
.steps-plain { margin: 0 0 24px; padding-left: 24px; }
.steps-plain li { margin-bottom: 8px; padding-left: 4px; }
.page-top { padding-block: 40px var(--sec); background: var(--paper); }
.page-top h1 { margin-bottom: 24px; font-size: clamp(2rem, 4vw + 1rem, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.page-top .panel { margin-top: 32px; max-width: 720px; border: 1px solid var(--line); }

/* ---------- sticky mobile CTA (phones only; funnel.js toggles [hidden]) ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--white); border-top: 1px solid var(--line);
}
.sticky-cta__text { font-size: 17px; font-weight: 700; color: var(--ink); }
.sticky-cta .btn { flex: none; }
@media (min-width: 768px) {
  .sticky-cta { display: none !important; }
}
/* Keep the last content clear of the bar on phones. */
@media (max-width: 767px) {
  .ftr { padding-bottom: calc(48px + 72px + env(safe-area-inset-bottom)); }
}

/* ---------- motion (funnel v4; motion.js) ----------
   Sections and cards fade and slide up as they scroll in, and the big numbers count up once.
   Nothing is hidden until motion.js adds .js-motion to <html>, and it does not add it when the visitor
   asks for reduced motion or the browser has no IntersectionObserver. Only opacity and transform move, so nothing shifts.
   The hero, header and order form are never animated. */
.js-motion [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }
.count { position: relative; display: inline-block; }
.count__live { position: absolute; left: 0; top: 0; white-space: nowrap; }
.count--run .count__final { color: transparent; }

/* ---------- footer ---------- */
.ftr { padding: 32px 0 48px; background: var(--white); border-top: 1px solid var(--line); font-size: 15px; color: var(--t3); }
.ftr__in { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.ftr a { display: inline-flex; align-items: center; min-height: 44px; color: var(--t2); font-weight: 500; }
.ftr .who { font-weight: 700; color: var(--ink); }

/* ---------- legal pages ---------- */
.legal { padding-block: 40px 72px; background: var(--white); }
.legal .container { max-width: 760px; }
.legal h1 { margin-bottom: 8px; font-size: clamp(2rem, 4vw + 1rem, 3rem); line-height: 1.08; letter-spacing: -0.02em; }
.legal .meta { margin-bottom: 32px; color: var(--t4); }
.legal h2 { margin: 40px 0 12px; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; }
.legal h3 { margin: 24px 0 8px; font-size: 18px; }
.legal ul, .legal ol { margin: 0 0 16px; padding-left: 24px; }
.legal li { margin-bottom: 8px; }
.legal table { width: 100%; margin: 16px 0 24px; border-collapse: collapse; font-size: 16px; }
.legal th, .legal td { padding: 10px 12px 10px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.legal tbody tr:last-child td, .legal tbody tr:last-child th { border-bottom: 1px solid var(--line); }
.callout { margin: 16px 0 24px; padding: 16px 20px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); color: var(--ink); }