/* ==========================================================================
   Free DataMate — landing page (Layer 2 funnel)
   Self-contained. Does not import site/css/main.css, so the page opens
   correctly straight from the filesystem — but the tokens, type stack and
   button treatment below deliberately match main.css so a visitor moving
   from this page into the library site sees no change of hand.

   COLOUR RULE — CLAUDE.md, reaffirmed by Jamie 26 July 2026:
     #0FB5A6 is for CTA BUTTONS AND NOTHING ELSE. Not the announcement dot,
     not the big percentages, not a rule, not an icon, not a focus ring.
     If you are about to use it on something that is not a button, don't.

   No amber. No webfonts. No motion beyond button hover and accordion
   open/close.
   ========================================================================== */

:root {
  /* brand */
  --teal:       #004650;   /* primary — header, footer, headings          */
  --teal-dark:  #003239;
  --dark:       #0a2a30;   /* deep navy-teal — hero and dark sections     */
  --dark-panel: #103940;   /* raised panels on a dark ground              */
  --accent:     #0fb5a6;   /* CTA BUTTONS ONLY                            */
  --accent-dark:#0c9689;
  --btn-ink:    #00312f;   /* button label — 5.5:1 on --accent            */

  /* ink and ground */
  --ink:        #1a1a1a;
  --ink-mid:    #4a5558;   /* 7.3:1 on --light — AA at small sizes        */
  --light:      #fafaf8;
  --white:      #ffffff;
  --line:       #d9dedd;
  --line-dark:  rgba(255, 255, 255, 0.22);
  --on-dark:    #b9d3d5;   /* 9.6:1 on --dark                             */
  --highlight:  #fdf0c2;   /* review highlight — not a brand colour       */

  --wrap: 1120px;
  --narrow: 760px;
  --gap: 1.5rem;
  --radius: 8px;

  --focus: var(--teal, #004650);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;            /* no motion */
  scroll-padding-top: 5.5rem;       /* sticky header must not cover anchors */
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--teal, #004650); text-underline-offset: 2px; }
a:hover { color: var(--teal-dark); }

/* Visible focus everywhere, retuned per section so it never disappears. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- type ---------------------------------------------------------------
   No webfonts, so hierarchy comes from size, weight and letter-spacing.
   Sentence case throughout — never all-caps headlines.
   ------------------------------------------------------------------------ */

h1, h2, h3 {
  margin: 0 0 0.55em;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--teal, #004650);
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 6.6vw, 3.5rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.6rem, 4.6vw, 2.4rem); }
h3 { font-size: clamp(1.16rem, 3vw, 1.35rem); letter-spacing: -0.014em; }

p, ul, ol { margin: 0 0 1.1em; }
li { margin-bottom: 0.45em; }

.lede { font-size: clamp(1.12rem, 2.7vw, 1.32rem); line-height: 1.5; }

.note {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-mid);
  margin-bottom: 0;
}

/* --- layout -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.15rem;
}
.wrap--narrow { max-width: var(--narrow); }

.section { padding: 3rem 0; }
.section--alt { background: var(--light); }

.section--dark {
  background: var(--dark);
  color: var(--white);
  --focus: var(--white);
}
.section--dark h2,
.section--dark h3 { color: var(--white); }
.section--dark .note { color: var(--on-dark); }
.section--dark a { color: var(--white); }

.section > .wrap > :last-child { margin-bottom: 0; }

.grid { display: grid; gap: var(--gap); }

/* Two up at tablet, three up on the desktop step. Three 220px cards at 768px
   read as a squeezed brochure, so the middle step is deliberate. */
@media (min-width: 560px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) {
  .section { padding: 4.25rem 0; }
}
@media (min-width: 940px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* --- skip link ----------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--white);
  color: var(--teal, #004650);
  font-weight: 700;
  padding: 0.7rem 1rem;
}
.skip:focus { left: 0; }

/* --- 0. announcement bar -------------------------------------------------
   The dot is WHITE, not accent teal. #0FB5A6 is buttons only.
   ------------------------------------------------------------------------- */

.announce {
  background: var(--teal-dark);
  color: var(--white);
  padding: 0.55rem 0;
}
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.announce p {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.4;
  letter-spacing: 0.005em;
  text-align: center;
}
.announce strong { font-weight: 700; letter-spacing: 0.06em; }

.announce__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
}

/* --- 1. sticky header ---------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--teal, #004650);
  color: var(--white);
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  --focus: var(--white);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Brand lockup, installed 26 July 2026 from gaia block bgs.ai. Not this page's
   own component - matches the library estate's .brand/.brand-mark so the two
   converge if this ever grows a shared stylesheet. Not a link here (funnel
   discipline, rule 16: no nav, and that extends to the brand mark). */
.brand {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--white, #fff);
  /* 🔒 G-27, 2 Aug: as a flex item of .masthead__inner this had no flex-shrink
     set, so the default (1) let the row shrink .brand's own box below its
     content's true width - .brand-word + gap + .brand-mark, both children
     flex:0 0 auto so they never shrink themselves. The roundel then spilled
     past .brand's shrunk right edge into the CTA's box (no z-index/absolute
     positioning involved - plain in-flow overlap). flex-shrink:0 stops the
     shrink at the source. */
  flex-shrink: 0;
}
.brand-mark { width: 1.3em; height: 1.3em; color: #0FB5A6; flex: 0 0 auto; }
/* 🔒 .brand-word MUST be defined here too. This page does NOT load main.css - it has
   its own stylesheet - so a .brand-word rule added to main.css does not reach it. Without
   this the wordmark SVG has no height constraint and renders ~1169px wide in black on
   both the masthead and the footer. Found and fixed 26 July 2026; if you change the
   library value in main.css, change it here as well. */
.brand-word { height: 1.75em; width: auto; flex: 0 0 auto; }
.footer .brand-word { height: 1.5em; }
/* 🔒 AND THE FILL MUST BE DEFINED HERE TOO - the same trap the note above warns
   about, one property along. Neither SVG's paths carry a fill attribute, so both
   fell back to black: the wordmark on the teal masthead and the dark footer, and
   the roundel that .brand-mark above intends to be #0FB5A6. The sizing was fixed
   here on 26 July 2026 and the fill was not. Board G-24, fixed 2 Aug 2026 - the
   matching pair lives in main.css near its own .brand-word block. */
.brand-word path { fill: currentColor; }
.brand-mark path { fill: currentColor; }

/* --- buttons — the only thing on this page wearing --accent -------------- */

.btn {
  display: inline-block;
  background: var(--accent, #0FB5A6);
  color: var(--btn-ink);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  padding: 1rem 1.7rem;
  border: 2px solid var(--accent, #0FB5A6);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
  transition: background-color 0.12s linear, transform 0.12s linear, box-shadow 0.12s linear;
}
.btn:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--btn-ink);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}
.btn:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); }

.btn--sm {
  font-size: 0.86rem;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 1.6rem 0 0.85rem; }
.btn-row--centre { justify-content: center; margin-top: 2.5rem; }

.reassure {
  font-size: 0.92rem;
  color: var(--on-dark);
  margin: 0;
}
.section--alt .reassure,
.section:not(.section--dark) .reassure { color: var(--ink-mid); }
/* Bottom demo fallback. Same trap as .brand-word: this page does NOT load
   main.css, so a rule added there does not reach it. Keep the two in step. */
.reassure--alt { margin-top: 1.1rem; opacity: 0.92; }
.reassure--alt a { color: inherit; }
.section--dark .reassure { color: var(--on-dark); }

/* --- 2. hero ------------------------------------------------------------- */

.hero {
  background: var(--dark);
  color: var(--white);
  padding: 2.75rem 0 3.25rem;
  --focus: var(--white);
}
.hero h1 { color: var(--white); margin-bottom: 0.4em; }
.hero .lede { color: #dcebec; max-width: 46ch; margin-bottom: 1.9rem; }
/* D390: "It's free." is the second half of the headline, carried on its own line so the
   films' closing sentence can be the H1 without becoming a six-line wall on a phone.
   Hero is the dark section, so it takes the accent against the deep teal. */
/* ⛔ WHITE, NOT ACCENT. #0FB5A6 is CTA buttons and interaction states only (this file,
   line 23, and main.css D191) - it is never used to colour type. */
.hero__free { color: var(--white, #ffffff); font-weight: 800; line-height: 1.05;
  margin: 0 0 0.45em; letter-spacing: -0.01em;
  font-size: clamp(1.5rem, 5.2vw, 2.1rem); }

@media (min-width: 900px) {
  .hero { padding: 4.25rem 0 4.5rem; }
  .hero h1 { max-width: 20ch; }
}

/* --- media slots --------------------------------------------------------
   .media is the aspect-ratio frame. Drop an <iframe> straight in as a child
   and it fills the frame — no other change needed.
   ------------------------------------------------------------------------- */

.media { position: relative; width: 100%; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--4x3  { aspect-ratio: 4 / 3; }

.media > iframe,
.media > img,
.media > video,
.media > picture,
.media > picture > img,
.media > .media-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius);
}
/* Added 12 Aug 2026 with the first real image on this page. Without object-fit an
   <img> stretched by width:100%/height:100% is DISTORTED, not cropped — and the
   <picture> rules above are needed because a <source>/<img> pair makes the img a
   grandchild of .media, so the .media > img rule never reaches it. */
.media > img,
.media > picture > img { object-fit: cover; }

.media-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  padding: 1.25rem;
  background: #e7e9e8;
  border: 2px dashed #a9b3b2;
  color: #3d4746;
  font-size: 0.9rem;
  line-height: 1.5;
}
.media-slot strong { display: block; font-size: 0.98rem; color: #1f2b2a; }
.media-slot p { margin: 0; max-width: 44ch; }
.media-slot__note { font-size: 0.8rem; color: #5c6665; }

.media--onDark .media-slot {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.4);
  color: #cfe3e4;
}
.media--onDark .media-slot strong { color: var(--white); }
.media--onDark .media-slot__note { color: #9fbabc; }

/* --- 3. three-step cards ------------------------------------------------- */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal, #004650);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
}
.section--alt .card { background: var(--white); }
.card > :last-child { margin-bottom: 0; }

.card__kicker {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.card__foot {
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--ink-mid);
}

.card--guarantee { background: #f2f7f7; }

.promise {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--teal, #004650);
  margin-bottom: 0.6rem;
}
.mechanism {
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 0;
}
.ast {
  font-weight: 700;
  text-decoration: none;
  padding: 0 0.15em;
}
.ast:hover { text-decoration: underline; }

/* --- 4. review wall ------------------------------------------------------ */

.reviews { margin-top: 2rem; }

.review {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem 1.3rem 1.1rem;
  display: flex;
  flex-direction: column;
}

.review__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; }

.avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #e7e9e8;
  border: 2px dashed #a9b3b2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #5c6665;
}

.review__who { min-width: 0; }
.review__name { margin: 0; font-weight: 700; font-size: 0.98rem; line-height: 1.3; }
.review__meta { margin: 0.15rem 0 0; font-size: 0.84rem; color: var(--ink-mid); line-height: 1.35; }

/* Stars are teal, not gold — amber is banned page-wide (override 3). */
.stars {
  margin: 0 0 0.7rem;
  font-size: 1rem;
  letter-spacing: 0.14em;
  color: var(--teal, #004650);
}

.review__body { font-size: 0.96rem; line-height: 1.55; margin-bottom: 0.9rem; }

mark {
  background: var(--highlight);
  color: var(--ink);
  padding: 0.06em 0.15em;
  border-radius: 2px;
}

.tag {
  margin: auto 0 0;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--line);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a5b00;
}

/* --- 5. alternating feature blocks --------------------------------------- */

.feature { display: grid; gap: 1.4rem; margin-bottom: 2.75rem; }
.feature:last-of-type { margin-bottom: 0; }
.feature__text > :last-child { margin-bottom: 0; }

@media (min-width: 860px) {
  .feature {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3.75rem;
  }
  /* Alternate the image side. */
  .feature--flip .feature__text { order: 2; }
  .feature--flip .feature__media { order: 1; }
  /* Added 12 Aug 2026: a feature block whose image slot was REMOVED rather than
     filled (no honest asset exists — see the comments in index.html). Without
     this it keeps the two-column grid and the copy sits in a half-width column
     beside a hole. Delete the class from the block when its image arrives. */
  .feature--noMedia { grid-template-columns: 1fr; }
}

/* --- 6. case study ------------------------------------------------------- */

.case {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.case__block > :last-child { margin-bottom: 0; }
.case__block h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: 0.6rem;
}

@media (min-width: 860px) {
  .case { grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; }
  /* The result spans the full width but keeps its place in the reading order:
     the site, what we found, what we did, THEN the number. */
  .case__block--result { grid-column: 1 / -1; }
}

.bignum {
  margin: 0 0 0.35rem;
  font-size: clamp(4.5rem, 20vw, 9rem);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.05em;
  color: var(--white);
}
.bignum__sub {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.14rem);
  line-height: 1.5;
  color: var(--on-dark);
  max-width: 62ch;
}

/* Visible placeholder blocks on the dark ground. */
.fill {
  border: 2px dashed rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #cfe3e4;
}
.fill strong { display: block; color: var(--white); font-size: 0.96rem; margin-bottom: 0.35rem; }
.fill p { margin: 0; }
.fill--quote { margin: 0; }

/* Placeholder blocks on a light ground (used inside the FAQ). */
.section:not(.section--dark) .fill {
  border-color: #a9b3b2;
  background: #eef0ef;
  color: #3d4746;
}
.section:not(.section--dark) .fill strong { color: #1f2b2a; }

/* proof strip — auto-fit so a fourth tile needs no CSS change */
.strip__h {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: 1.1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-dark);
}

.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.tile {
  background: var(--dark-panel);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 1.3rem 1.25rem;
}
.tile__pc {
  margin: 0 0 0.4rem;
  font-size: clamp(2.9rem, 8vw, 3.7rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--white);
}
.tile__detail {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--white);
}
.tile__note {
  margin: 0.7rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--on-dark);
}

/* --- 7. numbered steps --------------------------------------------------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 560px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } }

.steps li {
  counter-increment: step;
  margin: 0;
  padding-top: 1rem;
  border-top: 3px solid var(--teal, #004650);
}
.steps li::before {
  content: counter(step);
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--teal, #004650);
  margin-bottom: 0.4rem;
}
.steps h3 { margin-bottom: 0.35em; }
.steps p { margin: 0; color: var(--ink-mid); }

/* --- 8. pricing / disqualifier ------------------------------------------- */

.fit__h { margin-top: 3rem; }

.disqualify {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--teal, #004650);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
}
.disqualify p {
  margin: 0;
  font-size: clamp(1.06rem, 2.4vw, 1.2rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--teal, #004650);
}

/* --- 9. FAQ accordion ---------------------------------------------------- */

.faq { border-top: 1px solid var(--line); margin-top: 2rem; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq h3 { margin: 0; font-size: 1rem; }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 1.15rem 0.15rem;
  background: none;
  border: 0;
  font: inherit;
  font-size: clamp(1.02rem, 2.4vw, 1.14rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--teal, #004650);
  text-align: left;
  cursor: pointer;
}
.faq__q:hover { color: var(--teal-dark); }
.faq__q:focus-visible { outline-offset: -3px; }

/* Plus / minus drawn in CSS — no icon font, no SVG file. */
.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: var(--teal, #004650);
  border-radius: 1px;
}
.faq__icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq__icon::after  { left: 8px; top: 0; width: 2px; height: 18px; }
.faq__q[aria-expanded="true"] .faq__icon::after { display: none; }

.faq__a { padding: 0 0.15rem 1.3rem; }
.faq__a > :last-child { margin-bottom: 0; }
.faq__a p { max-width: 68ch; }

/* --- 10. booking --------------------------------------------------------- */

/* ⚠️ REWRITTEN 29 July 2026, when the iClosed embed actually landed.
   Two things about the old rule were written for an embed that was not there yet
   and became wrong the moment it was:
   ① `min-height: 720px` reserved space for an unknown embed. The widget declares
      its own 620px inline, so a 720px floor left 100px of dead box under a live
      calendar. The child now sets the height.
   ② `2px dashed` is the universal visual language for "placeholder". Around a
      working booking calendar it reads as a broken page, which is the exact
      complaint `.booking--link` was invented to solve one screen lower down. */
.booking {
  margin: 2rem 0 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem;
  display: flex;
}

/* ⚠️ iClosed ships a DIV plus an async script that injects the iframe at runtime.
   The iframe is therefore a GRANDCHILD of .booking, so the `.booking > iframe`
   rule below has never matched anything and never will. Both are covered here.
   Do not delete either as dead code - one is vendor-shaped, one is defensive. */
.booking .iclosed-widget { width: 100%; }
.booking iframe { width: 100%; border: 0; border-radius: 5px; }
.booking > iframe { width: 100%; min-height: 700px; border: 0; border-radius: 5px; }

/* .booking--link: the state BEFORE the iClosed embed is pasted, 28 July 2026.
   The base rule reserves 720px behind a dashed border for an embed that is not
   there yet; holding a single button in that much dashed emptiness reads as a
   broken page. This collapses it to the button. ⚠️ Remove this class from the
   markup when the embed lands - do not delete the rule, the base .booking is
   still what the embed needs. */
.booking--link { min-height: 0; border-style: solid; border-color: rgba(255,255,255,.14); }
.booking--link .booking__slot { padding: 1.75rem 1.25rem; }

.booking__slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1.5rem;
  color: #cfe3e4;
  font-size: 0.92rem;
}
.booking__slot strong { color: var(--white); font-size: 1rem; }
.booking__slot p { margin: 0; }
.booking__slot code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.12);
  padding: 0.15em 0.4em;
  border-radius: 3px;
}

/* --- 11. guarantee terms ------------------------------------------------
   Quiet, but --ink-mid on --light is 7.3:1 — comfortably AA at this size.
   ------------------------------------------------------------------------- */

.terms {
  background: var(--light);
  border-top: 1px solid var(--line);
  padding: 2.25rem 0;
}
.terms__h {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 0.7rem;
}
.terms p {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.65;
  color: var(--ink-mid);
  max-width: 84ch;
}

/* --- 12. footer ---------------------------------------------------------- */

.footer {
  background: var(--teal, #004650);
  color: var(--white);
  padding: 2.5rem 0 1.75rem;
  font-size: 0.92rem;
  --focus: var(--white);
}
.footer a { color: var(--white); }

.footer__inner { display: grid; gap: 1.75rem; }
@media (min-width: 780px) {
  .footer__inner { grid-template-columns: 1.1fr 1fr 1fr; gap: 2.5rem; }
}

.footer__co { margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--on-dark); }

.footer address { font-style: normal; line-height: 1.65; }

.footer__links p { margin: 0 0 0.55rem; }
.footer__links p:last-child { margin-bottom: 0; }

.footer__legal {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.8rem;
  color: var(--on-dark);
}

/* --- narrow-screen trims ------------------------------------------------- */

@media (max-width: 420px) {
  .logo-slot { width: 96px; font-size: 0.54rem; }
  .announce p { font-size: 0.78rem; }
  .btn { width: 100%; }
  /* The CTA label is long by design ("say what happens next, literally"), so on a
     narrow screen it wraps to two lines. Trim the chrome around it to keep the
     sticky header from eating the viewport, while staying well above the 24px
     minimum target size — it is the primary action on the page. */
  .masthead { padding: 0.45rem 0; }
  .btn--sm { width: auto; font-size: 0.75rem; line-height: 1.2; padding: 0.6rem 0.65rem; }
}

/* ==========================================================================
   🔒 NO JOURNEY-STEPPER CSS HERE, AND NONE BELONGS HERE. 28 July 2026.
   About 160 lines were removed from this point: the full .gp map, .gp-fold /
   .gp-sum, .gp-next, and the .gp-thin copy. Every one of them was dead - this
   page carries no stepper of any kind now, because rule 16 says a funnel gets
   no nav and a six-step pipeline is nav.

   ⚠️ The removed .gp-thin block carried the instruction "Keep both in sync"
   with main.css. That instruction is what made this a hazard: following it
   would put a stepper back on a funnel page. There is nothing to keep in sync.
   If a stepper ever legitimately belongs on an /offers/ page, that is a new
   logged decision and rule 16 has to change first.
   ========================================================================== */

/* --- VSL slot (D413). The box is the deliverable: 16:9, capped, centred, so the
   real film drops in without the page reflowing. The placeholder skin inside it is
   throwaway and is guarded by check_no_placeholders.py. --- */
.vsl{padding-top:0}
.vsl__h{font-size:clamp(1.05rem,2.4vw,1.25rem);margin:0 0 .75rem;text-align:center}
.vsl__box{position:relative;aspect-ratio:16/9;max-width:44rem;margin:0 auto;
  border-radius:.5rem;overflow:hidden;background:var(--dark-panel,#12181b)}
.vsl__box>video,.vsl__box>iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vsl__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border:2px dashed rgba(255,255,255,.28);border-radius:.5rem}
.vsl__badge{font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.62);font-weight:700}
.vsl__note{max-width:44rem;margin:.7rem auto 0;text-align:center;
  font-size:.875rem;color:var(--ink-mid)}