/* ==========================================================================
   THE CAMP TRANSFORMATION CENTER — HUNTINGTON BEACH
   Rejoin for $1 promo landing page — styles
   ==========================================================================
   ===== EDIT THIS SECTION: BRAND COLORS =====
   These two are taken straight out of The Camp logo. Change them only if the
   brand changes; everything else on the page is derived from them.
   -------------------------------------------------------------------------- */
:root {
  --red:        #bf2d32;   /* The Camp red (from the logo)      */
  --charcoal:   #585858;   /* The Camp grey (from the logo)     */
  /* ===== END EDIT SECTION ===== */

  --red-dark:   #9d2429;   /* pressed / hover state             */
  --red-tint:   #fdf1f1;   /* selected card background          */
  --panel-dark: #2b2b2e;   /* hero + footer panels              */
  --panel-dark2:#232326;

  --ink:        #1f1f22;
  --ink-2:      #55555b;
  --ink-3:      #6e6e76;   /* AA-safe on --ground, --card and --card-2 */
  --ground:     #f3f3f4;
  --card:       #ffffff;
  --card-2:     #f7f7f8;
  --line:       #e3e3e6;
  --line-2:     #c9c9cf;
  --bad:        #b3261e;

  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --r:   14px;
  --r-s: 10px;
  --pad: clamp(18px, 5vw, 34px);
  --maxw: 1240px;
  --measure: 62ch;   /* readable line length, independent of container width */
}

/* -------------------------------------------------------------- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* must win over .dock/img display rules */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
ol, ul { margin: 0; }
abbr { text-decoration: none; color: var(--red); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

/* ------------------------------------------------------------ skip link --- */
/* Off-screen until it takes focus, then it lands above the sticky masthead
   (z-index beats the masthead's 40). First tab stop on the page. */
.skip {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  transform: translateY(calc(-100% - 16px));
  background: var(--red); color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 600; padding: 13px 18px; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  transition: transform .18s ease;
}
.skip:focus-visible { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }
/* main gets tabindex="-1" so focus really moves; don't paint a ring on it. */
main:focus { outline: none; }

/* ------------------------------------------------------------ masthead --- */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; }
.brand { display: flex; align-items: center; min-height: 44px; gap: 11px; text-decoration: none; min-width: 0; overflow: hidden; }
.brand__logo { height: 36px; width: auto; flex: 0 0 auto; }
.brand__text { display: grid; min-width: 0; }
.brand__name {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(17px, 4.6vw, 21px);
  letter-spacing: .02em; text-transform: uppercase; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink);
}
.brand__loc {
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.masthead__phone {
  flex: 0 0 auto; white-space: nowrap;
  /* inline-flex + min-height keeps the pill looking the same while meeting the
     44px minimum tap target (WCAG 2.5.8 / Apple HIG). It was 36px. */
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13px; font-weight: 600; text-decoration: none; color: var(--red);
  border: 1px solid var(--line-2); border-radius: 99px; padding: 0 16px;
}
.masthead__phone:hover { border-color: var(--red); background: var(--red-tint); }

/* ---------------------------------------------------------------- hero --- */
.hero {
  position: relative; overflow: hidden;
  background: var(--panel-dark);
  color: #fff;
  padding: clamp(40px, 9vw, 84px) 0 clamp(34px, 7vw, 58px);
}
.hero::before {   /* red wash, top-right */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(115% 85% at 92% -12%, rgba(191,45,50,.55), transparent 60%),
    radial-gradient(80% 60% at -5% 105%, rgba(88,88,88,.5), transparent 62%);
}
.hero::after {    /* fine grain, hero only */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero .wrap { position: relative; z-index: 3; }

/* Promo hero: gym photo under the existing red wash. Paint order is set
   explicitly because .hero::before is a box-tree child and would otherwise
   land on top of .hero__media. */
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  /* Scrim first, photo second: the headline and the facts list both sit over a
     busy part of this image and need the contrast. */
  background:
    linear-gradient(180deg, rgba(24,24,26,.72) 0%, rgba(24,24,26,.58) 42%, rgba(24,24,26,.85) 100%),
    url("hero.jpg") center 30% / cover no-repeat;
  opacity: .8;
}
.hero--promo::before { z-index: 1; }
.hero--promo::after  { z-index: 2; }
.hero--promo { padding-bottom: clamp(30px, 6vw, 50px); }
/* Hero and Camp Method CTAs are centred; the copy around them stays left-aligned. */
.hero__inner .btn--hero,
.method .btn--hero { display: flex; width: fit-content; margin-inline: auto; }
.hero__inner { position: relative; z-index: 3; }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #ffb3b6;
}
/* .eyebrow is tuned for the dark panels. On the light sections that pink lands
   at 1.5:1 — this modifier is what the markup has always asked for, and until
   now the rule did not exist, so "The offer" was near-invisible. */
.eyebrow--dark { color: var(--red); }
.hero__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(3rem, 14vw, 6.8rem); line-height: .87; letter-spacing: -.01em;
  margin: 14px 0 0; text-wrap: balance; color: #fff;
}
.hero__title em { font-style: normal; color: #ff5a60; }
.hero__kicker {
  display: inline-block; margin-top: 14px;
  background: var(--red); color: #fff;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.25rem, 5.4vw, 1.85rem); line-height: 1; letter-spacing: .02em;
  padding: 10px 16px 11px; border-radius: 6px;
}
.hero__sub {
  margin-top: 18px; max-width: 44ch; color: #d5d5d8; font-size: clamp(1rem, 3.4vw, 1.12rem);
}
.hero__sub strong { color: #fff; font-weight: 600; }
.facts {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: grid; gap: 1px; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-s); overflow: hidden;
}
.facts li {
  background: rgba(255,255,255,.05); padding: 12px 14px; font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 12px; color: #f0f0f1;
}
.facts span {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: #ff6b70; letter-spacing: .06em;
}
@media (min-width: 640px) { .facts { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------- cards --- */
/* minmax(0,1fr) + min-width:0 keep the horizontal day-scroller from stretching
   the whole form wider than the phone screen */
.booking {
  padding: clamp(28px, 6vw, 54px) var(--pad) 40px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
#bookingForm { min-width: 0; display: grid; gap: 16px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(18px, 4.6vw, 28px); margin: 0; min-width: 0;
  box-shadow: 0 1px 2px rgba(31,31,34,.04), 0 10px 26px rgba(31,31,34,.04);
}

.step { transition: opacity .25s ease; }
.step.is-locked { opacity: .55; }
.step.is-locked .classes,
.step.is-locked .grid2,
.step.is-locked .submit { pointer-events: none; }
.step.is-done .step__num { background: var(--red); color: #fff; border-color: var(--red); }

/* Floating the legend stops it from cutting a notch in the fieldset border */
.step__head {
  float: left; width: 100%; display: flex; gap: 14px; align-items: flex-start;
  padding: 0; margin-bottom: 20px;
}
.step > *:not(legend) { clear: both; }
.step__num {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--card-2); color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  transition: background .2s ease, color .2s ease;
}
.step__title {
  display: block; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.5rem, 5.4vw, 1.9rem);
  line-height: 1.05; color: var(--ink);
}
.step__hint { display: block; color: var(--ink-3); font-size: 13.5px; margin-top: 3px; }

/* ------------------------------------------------- reschedule banner ---- */
.rebook {
  background: var(--panel-dark); color: #fff; border-radius: var(--r);
  padding: 16px clamp(18px, 4.6vw, 24px); display: grid; gap: 6px;
  border-left: 4px solid var(--red);
}
.rebook__title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1.15rem; line-height: 1.1;
}
.rebook__body { font-size: 14px; color: #d5d5d8; max-width: 52ch; }
.rebook__current {
  margin-top: 4px; font-size: 13.5px; color: #fff;
  background: rgba(255,255,255,.08); border-radius: var(--r-s);
  padding: 9px 12px; justify-self: start;
}
.rebook__current strong { color: #ff8b8f; }

/* ------------------------------------------------------- focus legend --- */
.legend {
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 14px 16px; margin-bottom: 14px;
}
.legend__title {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px;
}
.legend__list { list-style: none; padding: 0; display: grid; gap: 7px; }
.legend__list li { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; }
.legend__days {
  flex: 0 0 auto; min-width: 74px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--red);
}
.legend__focus { font-weight: 500; color: var(--ink); }
.legend__note { margin-top: 10px; font-size: 12px; color: var(--ink-3); line-height: 1.45; }

/* focus of the day currently selected in step 2 */
.dayfocus {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 4px; padding: 10px 14px;
  background: var(--red-tint); border: 1px solid rgba(191,45,50,.22);
  border-radius: var(--r-s);
}
.dayfocus__day {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.dayfocus__focus {
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: .03em; color: var(--red); line-height: 1;
}

/* ------------------------------------------------------------- videos --- */
.videos { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.videos__head {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1.15rem; margin-bottom: 14px;
}
.videos__grid { display: grid; gap: 14px; }
@media (min-width: 560px) { .videos__grid { grid-template-columns: 1fr 1fr; } }
/* With a single video the two-column grid would strand it in the left half. */
.videos__grid:has(.video:only-child) {
  grid-template-columns: minmax(0, 340px); justify-content: center;
}
.video { display: grid; gap: 9px; min-width: 0; margin: 0; }
.video__el {
  width: 100%; max-height: 62vh; border-radius: var(--r-s);
  background: #000; display: block;
  aspect-ratio: 9 / 16; object-fit: cover;
}
.video__title {
  font-weight: 600; font-size: 14.5px; line-height: 1.35; color: var(--ink);
}

/* ------------------------------------------------------- class choices --- */
.classes { display: grid; gap: 10px; }
.classes label {
  position: relative; display: block; cursor: pointer;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 15px 52px 15px 16px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.classes label:hover { border-color: var(--line-2); transform: translateY(-1px); }
.classes input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.classes input:focus-visible + .cl { outline: 2px solid var(--red); outline-offset: 6px; border-radius: 4px; }
.classes label:has(input:checked) { border-color: var(--red); background: var(--red-tint); }
.classes label:has(input:checked)::after {
  content: "\2713"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.cl__name { display: block; font-weight: 600; font-size: 16.5px; letter-spacing: -.01em; }
.cl__blurb { display: block; color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }
.cl__meta {
  display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--red);
  border: 1px solid rgba(191,45,50,.28); background: #fff; border-radius: 99px; padding: 2px 9px;
}

/* ------------------------------------------------------- day + time ------ */
.slots { min-width: 0; }
.dayscroll {
  display: flex; gap: 8px; min-width: 0; overflow-x: auto; padding-bottom: 10px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.dayscroll::-webkit-scrollbar { height: 6px; }
.dayscroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
.day {
  flex: 0 0 auto; scroll-snap-align: start; cursor: pointer;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 10px 12px; min-width: 96px; text-align: center; line-height: 1.25;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.day:hover { border-color: var(--line-2); }
.day[aria-selected="true"] { background: var(--panel-dark); color: #fff; border-color: var(--panel-dark); }
.day__dow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.day[aria-selected="true"] .day__dow { color: #b9b9bd; }
.day__date { display: block; font-family: var(--font-display); font-weight: 700; font-size: 21px; }
.day__focus {
  display: block; margin-top: 4px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--red);
  white-space: nowrap;
}
.day[aria-selected="true"] .day__focus { color: #ff8b8f; }

/* On wider screens show every day at once instead of a side-scroller */
@media (min-width: 720px) {
  .dayscroll { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
}

.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 9px; margin-top: 16px; }
.time {
  cursor: pointer; background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 13px 8px; text-align: center;
  font-weight: 600; font-size: 15px; letter-spacing: -.01em;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.time:hover { border-color: var(--red); transform: translateY(-1px); }
.time[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.tz { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); }
.empty { color: var(--ink-2); font-size: 14px; padding: 6px 0; }

/* --------------------------------------------------------------- form ---- */
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 620px) {
  .grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .field--full { grid-column: 1 / -1; }
}

.field label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .02em; margin-bottom: 6px; }
.opt { color: var(--ink-3); font-weight: 400; }
.field input, .field textarea {
  width: 100%; background: var(--card-2); border: 1px solid var(--line-2);
  border-radius: var(--r-s); padding: 13px 14px; font-size: 16px; /* 16px stops iOS zoom */
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input::placeholder, .field textarea::placeholder { color: #9a9aa1; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--red); background: #fff;
  box-shadow: 0 0 0 3px rgba(191,45,50,.12);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--bad); }
.counter { text-align: right; font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }

.err { color: var(--bad); font-size: 13px; margin-top: 6px; font-weight: 500; }
.err--form {
  background: #fdf1f0; border: 1px solid rgba(179,38,30,.3);
  border-radius: var(--r-s); padding: 12px 14px; margin-top: 14px;
}
.notice { border-radius: var(--r-s); padding: 14px 16px; font-size: 14.5px; }
.notice--warn { background: #fff8e6; border: 1px solid #e8cf8a; }

/* hidden spam trap */
.hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------ buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid transparent; border-radius: 99px; cursor: pointer;
  font-weight: 600; letter-spacing: .01em; text-decoration: none;
  padding: 15px 26px; transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.btn:active { transform: translateY(1px); }
.btn--hero {
  margin-top: 26px; background: var(--red); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  text-transform: uppercase; letter-spacing: .06em; padding: 14px 30px;
}
.btn--hero:hover { background: #d13d42; }
.btn--go {
  width: 100%; background: var(--red); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 23px;
  text-transform: uppercase; letter-spacing: .05em; padding: 17px 26px; margin-top: 4px;
}
.btn--go:hover { background: var(--red-dark); }
.btn--go[disabled] { opacity: .6; cursor: not-allowed; }
.btn--ghost { border-color: var(--line-2); background: #fff; color: var(--ink); font-size: 15px; }
.btn--ghost:hover { border-color: var(--red); color: var(--red); }

.btn__spin { display: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; }
.is-sending .btn__spin { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.submit { margin-top: 24px; }
.summary {
  font-size: 14px; color: var(--red); font-weight: 600; margin-bottom: 12px; min-height: 1.4em;
}
.fineprint { font-size: 11.8px; color: var(--ink-3); margin-top: 12px; text-align: center; line-height: 1.5; }
.fineprint--terms { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ success --- */
.success { text-align: left; animation: pop .35s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.success__mark {
  width: 54px; height: 54px; border-radius: 50%; background: var(--red); color: #fff;
  display: grid; place-items: center; font-size: 27px; font-weight: 700; margin-bottom: 18px;
}
.success__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.2rem, 8vw, 3.2rem); line-height: .95; letter-spacing: -.01em;
}
.success__lead { margin-top: 10px; color: var(--ink-2); max-width: 46ch; }
.recap {
  margin: 22px 0 0; display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden;
}
.recap > div { background: var(--card-2); padding: 12px 15px; display: flex; justify-content: space-between; gap: 16px; }
.recap dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.recap dd { margin: 0; font-weight: 600; text-align: right; }
.next { margin-top: 26px; }
.next h3 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1.15rem; margin-bottom: 8px;
}
.next ol { padding-left: 20px; color: var(--ink-2); font-size: 14.5px; display: grid; gap: 4px; }
.disclaimer {
  margin-top: 22px; font-size: 13px; color: var(--ink-2);
  border-left: 3px solid var(--red); padding-left: 12px;
}
.success__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ---------------------------------------------------------- HIST block --- */
.method {
  background: var(--card); border-top: 1px solid var(--line);
  padding: clamp(38px, 8vw, 68px) 0;
}
.method__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 8vw, 3.2rem); line-height: .95; margin: 12px 0 0; color: var(--ink);
}
.method__lead {
  margin-top: 14px; max-width: 56ch; color: var(--ink-2);
  font-size: clamp(1rem, 3.2vw, 1.06rem);
}
.method__points {
  list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px;
}
@media (min-width: 700px) { .method__points { grid-template-columns: 1fr 1fr; } }
.method__points li {
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  font-size: 14.5px; color: var(--ink-2); line-height: 1.5;
}
.method__points span { font-size: 19px; line-height: 1; grid-row: span 2; }
.method__points strong {
  color: var(--ink); font-size: 15px; font-weight: 600;
}
.method__gallery {
  margin-top: 24px; display: grid; gap: 10px; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .method__gallery { grid-template-columns: repeat(3, 1fr); } }
.method__gallery img {
  width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r-s); border: 1px solid var(--line);
}
.method .btn--hero { margin-top: 26px; }

/* ------------------------------------------------------------- urgency --- */
.urgency { background: var(--red); color: #fff; }
.urgency__inner {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; padding-block: 0;
}
.urgency__item {
  padding: 13px 6px; text-align: center;
  display: grid; gap: 2px; align-content: center;
}
.urgency__item + .urgency__item { box-shadow: -1px 0 0 rgba(255,255,255,.28); }
.urgency__item strong {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.15rem, 5vw, 1.7rem); line-height: 1; letter-spacing: .02em;
}
.urgency__item span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
}

/* --------------------------------------------------------------- offer --- */
.offer { background: var(--ground); padding: clamp(34px, 7vw, 62px) 0; }
.offer__inner { display: grid; gap: clamp(22px, 4vw, 38px); align-items: start; }
@media (min-width: 780px) { .offer__inner { grid-template-columns: 1fr auto; } }
.offer__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 7.5vw, 3rem); line-height: .95; margin: 12px 0 0; color: var(--ink);
}
.offer__lead {
  margin-top: 14px; max-width: 52ch; color: var(--ink-2);
  font-size: clamp(1rem, 3.2vw, 1.08rem);
}
.offer__lead strong { color: var(--red); font-weight: 600; }
.offer__list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 9px; }
.offer__list li {
  position: relative; padding-left: 26px; font-size: 14.8px; color: var(--ink-2);
  line-height: 1.5;
}
.offer__list li::before {
  content: "\2713"; position: absolute; left: 0; top: -1px;
  color: var(--red); font-weight: 700; font-size: 15px;
}
.offer__note {
  margin-top: 20px; font-size: 12px; color: var(--ink-3); line-height: 1.5; max-width: 56ch;
}
.offer__figure { margin: 0; }
.offer__figure img {
  width: 100%; max-width: 320px; height: auto; border-radius: var(--r-s);
  border: 1px solid var(--line-2); box-shadow: 0 8px 26px rgba(0,0,0,.11);
}


/* ------------------------------------------------------------- pillars --- */
.pillars { background: var(--card); border-block: 1px solid var(--line); padding: clamp(30px, 6vw, 52px) 0; }
.pillars__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.7rem, 6.5vw, 2.5rem); line-height: .95; margin: 10px 0 0; color: var(--ink);
}
.pillars__list {
  list-style: none; padding: 0; margin: 22px 0 0;
  display: grid; gap: 14px;
}
@media (min-width: 720px) { .pillars__list { grid-template-columns: repeat(3, 1fr); } }
.pillars__list li {
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 18px 18px 20px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
  border-top: 3px solid var(--red);
}
.pillars__list strong {
  display: block; margin-bottom: 6px; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.12rem; letter-spacing: .02em;
}

/* ---------------------------------------------------------------- gate --- */
/* Shown instead of the form before booking opens, or after the offer ends. */
.gate {
  background: var(--panel-dark); color: #fff; border-radius: var(--r);
  padding: clamp(22px, 5vw, 34px); text-align: center;
}
.gate__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.5rem, 6vw, 2.1rem); line-height: 1; color: #fff;
}
.gate__body {
  margin: 12px auto 0; max-width: 46ch; color: #d5d5d8; font-size: 14.8px; line-height: 1.55;
}
.gate .btn--go { margin-top: 20px; display: inline-flex; width: auto; padding-inline: 30px; }

/* ------------------------------------------------------------ comeback --- */
.comeback { background: var(--panel-dark2); color: #fff; padding: clamp(34px, 7vw, 62px) 0; }
.comeback__inner { display: grid; gap: clamp(22px, 4vw, 38px); align-items: center; }
.comeback__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.8rem, 7vw, 2.8rem); line-height: .95; margin: 12px 0 0; color: #fff;
}
.comeback__lead {
  margin-top: 14px; max-width: 50ch; color: #d5d5d8; font-size: clamp(1rem, 3.2vw, 1.06rem);
}
.comeback__lead strong { color: #ff8b8f; font-weight: 600; }
.comeback__tag {
  margin-top: 20px; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; font-size: 15px; color: #ff6b70;
}

/* --------------------------------------------------------------- foot ---- */
.foot {
  background: var(--panel-dark2); color: #e9e9ea;
  padding: 36px 0 calc(36px + env(safe-area-inset-bottom)); margin-top: 20px;
}
.foot__name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.55rem; letter-spacing: .03em; line-height: 1.05; }
.foot__meta { margin-top: 10px; font-size: 14px; color: #b6b6bb; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.foot__meta a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.foot__meta a:hover { color: #ff6b70; }
.sep { color: #7c7c84; }   /* decorative separator, but free to lift */
.foot__note { margin-top: 12px; font-size: 13px; color: #96969d; max-width: 42ch; }
.foot__terms { margin-top: 16px; font-size: 11.5px; color: #94949c; max-width: 60ch; line-height: 1.5; }

/* --------------------------------------------------------------- dock ---- */
.dock {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 45; display: flex; align-items: center; gap: 12px;
  background: var(--panel-dark); color: #fff; border: 1px solid rgba(255,255,255,.14);
  border-radius: 99px; padding: 9px 9px 9px 18px; box-shadow: 0 12px 34px rgba(31,31,34,.3);
  animation: pop .3s ease both;
}
.dock__text { min-width: 0; flex: 1; }
.dock__label { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #b6b6bb; }
.dock__value { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Outlined, not filled: the solid red treatment made this read as the primary
   CTA and got it mistaken for the submit button. */
.dock__btn {
  flex: 0 0 auto; background: transparent; color: #fff; text-decoration: none;
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 99px; padding: 10px 16px; font-weight: 600; font-size: 13.5px;
  white-space: nowrap;
}
.dock__btn:hover, .dock__btn:active {
  border-color: #fff; background: rgba(255,255,255,.12);
}
@media (min-width: 720px) { .dock { display: none; } }

/* ---------------------------------------------------------- animation --- */
.reveal { animation: rise .6s cubic-bezier(.22,.9,.3,1) both; animation-delay: var(--d, 0ms); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
  .reveal, .success { animation: none; }
  html { scroll-behavior: auto; }
}
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }


/* ==========================================================================
   6-WEEK CHALLENGE — components added for this page
   ========================================================================== */

.hero__micro {
  margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.62); line-height: 1.5;
}

/* ------------------------------------------------------------ includes --- */
/* The five things the challenge includes. Card + centred line icon, following
   the icon row on the franchise location pages (see Materials/download.png). */
.includes { background: var(--ground); padding: clamp(34px, 7vw, 62px) 0; }
.includes__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 7.5vw, 3rem); line-height: .95; margin: 12px 0 0; color: var(--ink);
}
.includes__lead {
  margin-top: 14px; max-width: 52ch; color: var(--ink-2);
  font-size: clamp(1rem, 3.2vw, 1.08rem);
}
.includes__terms {
  margin-top: 22px; font-size: 12px; color: var(--ink-3); line-height: 1.5; max-width: 60ch;
}

.inc {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: grid; gap: 12px; grid-template-columns: 1fr;
}
@media (min-width: 560px) { .inc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .inc { grid-template-columns: repeat(3, 1fr); } }
.inc__item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 18px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.inc__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--red-tint); color: var(--red);
  display: grid; place-items: center; margin-bottom: 8px;
}
.inc__icon svg { width: 30px; height: 30px; display: block; }
.inc__item strong {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.1rem; letter-spacing: .02em; line-height: 1.1; color: var(--ink);
}
.inc__item span:last-child {
  font-size: 13.6px; line-height: 1.5; color: var(--ink-3); max-width: 30ch;
}

/* ------------------------------------------------------------- pending --- */
/* Review-build only. Every one of these blocks is a decision still sitting
   with the client — strip them before launch. */
.pending {
  margin-top: 26px; border: 2px dashed var(--red);
  background: var(--red-tint); border-radius: var(--r);
  padding: 18px 20px 20px;
}
.pending--wide { margin-top: 0; }
.pending__tag {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; font-size: .92rem; color: var(--red); margin: 0 0 6px;
}
.pending__body {
  margin: 0; font-size: 14.4px; line-height: 1.55; color: var(--ink-2); max-width: 62ch;
}
.pending__body strong { color: var(--ink); }

.afterwards { background: var(--card); padding: clamp(30px, 6vw, 52px) 0; }

/* --------------------------------------------------------------- proof --- */
.proof { background: var(--panel-dark2); color: #fff; padding: clamp(34px, 7vw, 62px) 0; }
.proof__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.8rem, 7vw, 2.8rem); line-height: .95; margin: 12px 0 0; color: #fff;
}
.proof__lead {
  margin-top: 12px; max-width: 46ch; color: #d5d5d8; font-size: clamp(1rem, 3.2vw, 1.06rem);
}
.proof__grid {
  margin-top: 26px; display: grid; gap: 14px; grid-template-columns: 1fr;
}
@media (min-width: 680px) { .proof__grid { grid-template-columns: repeat(2, 1fr); } }
.proof__grid figure { margin: 0; }
.proof__grid img {
  width: 100%; height: auto; display: block; border-radius: var(--r-s);
  border: 1px solid rgba(255,255,255,.14);
}
.proof__note {
  margin-top: 20px; font-size: 12px; line-height: 1.55;
  color: rgba(255,255,255,.55); max-width: 66ch;
}

/* ------------------------------------------------------- booking intro --- */
.booking__head { margin-bottom: clamp(20px, 4vw, 30px); }
.booking__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.8rem, 7vw, 2.7rem); line-height: .95; margin: 10px 0 0; color: var(--ink);
}
.booking__lead {
  margin-top: 12px; max-width: 54ch; color: var(--ink-2);
  font-size: clamp(1rem, 3.2vw, 1.06rem);
}


/* --------------------------------------------------------------- price --- */
.price {
  margin-top: 26px; display: grid; gap: 12px; grid-template-columns: 1fr;
}
@media (min-width: 620px) { .price { grid-template-columns: repeat(2, 1fr); } }
.price__card {
  background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--red);
  border-radius: var(--r); padding: 22px 22px 24px;
}
.price__card--alt { background: var(--red-tint); border-color: var(--red); }
.price__label {
  margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; font-size: .95rem; color: var(--ink-3);
}
.price__num {
  margin: 4px 0 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 3.4rem); line-height: 1; color: var(--red);
}
.price__note {
  margin: 8px 0 0; font-size: 13.8px; line-height: 1.5; color: var(--ink-2); max-width: 34ch;
}
.price__foot {
  margin-top: 14px; font-size: 13.6px; line-height: 1.55; color: var(--ink-2); max-width: 56ch;
}

/* ---------------------------------------------------------- afterwards --- */
.afterwards { background: var(--card); border-block: 1px solid var(--line); padding: clamp(34px, 7vw, 62px) 0; }
.afterwards__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.8rem, 7vw, 2.7rem); line-height: .95; margin: 10px 0 0; color: var(--ink);
}
.afterwards__lead {
  margin-top: 14px; max-width: 56ch; color: var(--ink-2);
  font-size: clamp(1rem, 3.2vw, 1.06rem);
}
.afterwards__lead strong { color: var(--red); font-weight: 600; }

/* ------------------------------------------------------------ holistic --- */
/* The franchise five-pillar row. Icons extracted from the location-page
   graphic — see public/icons/. */
.holistic {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px) { .holistic { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .holistic { grid-template-columns: repeat(5, 1fr); } }
.holistic li {
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 12px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px;
}
.holistic img {
  width: auto; height: 52px; display: block;
}
.holistic strong {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.02rem; letter-spacing: .02em; line-height: 1.15; color: var(--red);
}


/* ==========================================================================
   LAYOUT PASS — desktop centring + mobile grid orphan
   Kyle / Rafael review 2026-09-21. Everything below is alignment only;
   no copy, colour or spacing scale is changed.
   ========================================================================== */

/* Hero: the CTA is centred, so the line under it has to be too. */
.hero__micro { text-align: center; max-width: 46ch; margin-inline: auto; }

/* Fine print under the price, and the generated terms line.
   These stay LEFT aligned — centring short ragged lines read worse. The actual
   problem was the character cap: at 56ch and 60ch they wrapped at roughly half
   the container, leaving a dead right-hand column. Cap removed so a long
   sentence runs the full content width before it wraps. */
.price__foot,
.includes__terms {
  text-align: left;
  max-width: none;
  margin-inline: 0;
}

/* "Why six weeks", "After the six weeks" and the footer.
   Same fix as the fine print above: the copy looked stranded because the
   character caps (50ch, 56ch, 42ch, 60ch) wrapped it at roughly half the
   container while the display heading ran nearly full width. Caps removed,
   alignment stays LEFT — a long sentence now runs the full content width
   before it wraps. */
.comeback__title,
.comeback__lead,
.afterwards__title,
.afterwards__lead,
.foot__note,
.foot__terms {
  max-width: none;
  margin-inline: 0;
}

/* ---- holistic row: no orphaned card ----
   Five cards never divide evenly. Below 560px the grid is 2-up and the fifth
   card was left alone against the left edge; between 560 and 900 it is 3-up
   and the last two sat left. Both rows are now centred. */
@media (max-width: 559px) {
  .holistic li:nth-child(5) {
    grid-column: 1 / -1;
    width: calc(50% - 6px);
    margin-inline: auto;
  }
}
@media (min-width: 560px) and (max-width: 899px) {
  .holistic { grid-template-columns: repeat(6, 1fr); }
  .holistic li { grid-column: span 2; }
  .holistic li:nth-child(4) { grid-column: 2 / span 2; }
  .holistic li:nth-child(5) { grid-column: 4 / span 2; }
}


/* ==========================================================================
   OCTOBER 12 CHALLENGE — prize section, and the seventh inclusion card
   ========================================================================== */

/* Seven cards never divide by three. Centre the orphan on the last row rather
   than letting it hang against the left edge. Same fix as the holistic row. */
@media (min-width: 900px) {
  .inc--six > .inc__item:nth-child(7) { grid-column: 2 / 3; }
}
@media (min-width: 560px) and (max-width: 899px) {
  .inc--six > .inc__item:nth-child(7) { grid-column: 1 / -1; width: calc(50% - 6px); margin-inline: auto; }
}

/* --------------------------------------------------------------- prize --- */
.prize {
  background: var(--panel-dark2); color: #fff;
  padding: clamp(34px, 7vw, 62px) 0;
  border-top: 4px solid var(--red);
}
.prize__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.8rem, 7vw, 2.8rem); line-height: .95; margin: 12px 0 0; color: #fff;
}
.prize__figure {
  margin-top: 26px; display: grid; gap: clamp(14px, 3vw, 30px); align-items: center;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r); padding: clamp(20px, 4vw, 30px);
}
@media (min-width: 680px) { .prize__figure { grid-template-columns: auto 1fr; } }
.prize__amount {
  margin: 0; font-family: var(--font-display); font-weight: 800; color: var(--red);
  font-size: clamp(3.4rem, 13vw, 5.6rem); line-height: .85;
  filter: drop-shadow(0 0 30px rgba(191,45,50,.4));
}
.prize__amount span { color: #fff; font-size: .55em; vertical-align: super; margin-left: .04em; }
.prize__mechanic {
  margin: 0; font-size: clamp(1rem, 3.2vw, 1.12rem); line-height: 1.5; color: #d5d5d8;
}
.prize__mechanic strong { color: #fff; font-weight: 600; }

.prize__lead {
  margin-top: clamp(22px, 4vw, 30px); font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; font-size: 1.2rem; color: #fff;
}
.prize__reqs { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
@media (min-width: 680px) { .prize__reqs { grid-template-columns: 1fr 1fr; } }
.prize__reqs li {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-s); padding: 16px 18px;
  font-size: 15px; line-height: 1.45; color: #d5d5d8;
}
.prize__reqs li span {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--red); color: #fff; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
}
.prize__reqs strong { color: #fff; font-weight: 600; }

.prize__note {
  margin-top: 18px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.62);
}
.prize__note strong { color: #fff; font-weight: 600; }


/* ==========================================================================
   SCHEDULER — date + time picker
   Replaces class -> day -> time with one month view. Left rail states what is
   being booked and stays put; right side does the choosing.
   ========================================================================== */

.sched { padding-block: clamp(20px, 3.4vw, 30px); }
.sched__grid { display: grid; gap: clamp(20px, 3vw, 34px); margin-top: 20px; }
@media (min-width: 860px) { .sched__grid { grid-template-columns: minmax(176px, 212px) minmax(0, 1fr); } }

/* ---- left rail ---- */
.sched__aside {
  background: linear-gradient(170deg, var(--panel-dark) 0%, var(--panel-dark2) 100%);
  color: #fff; border-radius: var(--r); padding: clamp(20px, 3vw, 26px);
  display: flex; flex-direction: column; gap: 2px;
  position: relative; overflow: hidden;
}
.sched__aside::before {
  content: ""; position: absolute; inset: -40% -60% auto auto; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(191,45,50,.30) 0%, transparent 68%);
  pointer-events: none;
}
.sched__logo { width: 46px; height: auto; margin-bottom: 14px; position: relative; }
.sched__eyebrow {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin: 0; position: relative;
}
.sched__name {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.7rem, 4.4vw, 2.1rem); line-height: 1; margin: 6px 0 18px;
  color: #fff; position: relative;
}
.sched__meta { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; position: relative; }
.sched__meta li {
  display: flex; gap: 10px; align-items: center;
  font-size: 14px; color: rgba(255,255,255,.80); line-height: 1.35;
}
.sched__meta svg { width: 17px; height: 17px; flex: 0 0 auto; color: #ff8b8f; }

.sched__picked {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16);
  position: relative; animation: schedIn .42s cubic-bezier(.22,1,.36,1) both;
}
@keyframes schedIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sched__pickedLabel {
  margin: 0; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.sched__pickedDate {
  margin: 7px 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: 1.28rem; line-height: 1.1; color: #fff;
}
.sched__pickedTime {
  margin: 3px 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: 1.28rem; line-height: 1.1; color: #ff8b8f;
}
.sched__free {
  margin: auto 0 0; padding-top: 20px; font-size: 12.5px;
  color: rgba(255,255,255,.55); position: relative;
}

/* ---- calendar ---- */
.cal { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(16px, 2.6vw, 22px); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cal__month {
  margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; font-size: clamp(1.1rem, 2.6vw, 1.32rem); color: var(--ink);
}
.cal__nav { display: flex; gap: 6px; }
.cal__arrow {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--card); color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.cal__arrow svg { width: 17px; height: 17px; }
.cal__arrow:hover:not(:disabled) { border-color: var(--red); color: var(--red); transform: scale(1.06); }
.cal__arrow:active:not(:disabled) { transform: scale(.94); }
.cal__arrow:disabled { opacity: .3; cursor: not-allowed; }

.cal__dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-top: 18px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.cal__dow span {
  text-align: center; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; }
.cal__cell {
  aspect-ratio: 1; min-width: 0; width: 100%; max-width: 46px; justify-self: center;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--ink);
  font: 600 15px/1 var(--font-body); cursor: pointer; position: relative;
  display: grid; place-items: center;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.cal__cell--blank { pointer-events: none; }
.cal__cell:not(:disabled):hover { background: var(--red-tint); color: var(--red); }
.cal__cell:not(:disabled):active { transform: scale(.93); }
/* An available date is marked, not just clickable — a dot reads faster than a
   hover state the visitor has to go hunting for. */
.cal__cell:not(.is-empty):not(.is-selected)::after {
  content: ""; position: absolute; bottom: 6px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--red); opacity: .55;
}
.cal__cell.is-empty { color: var(--line-2); cursor: default; font-weight: 400; }
.cal__cell.is-selected {
  background: var(--red); color: #fff;
  box-shadow: 0 6px 18px -4px rgba(191,45,50,.55);
}
.cal__cell:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.cal__tz { margin: 14px 0 0; font-size: 12px; color: var(--ink-3); }

/* ---- time slots ---- */
.slots {
  margin-top: 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(16px, 2.6vw, 22px);
  animation: schedIn .36s cubic-bezier(.22,1,.36,1) both;
}
.slots__head {
  margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 14px; color: var(--ink-2);
}
.slots__head strong {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.12rem; letter-spacing: .02em; color: var(--ink);
}
.slots__focus {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--red); background: var(--red-tint); border-radius: 100px; padding: 4px 10px;
}
.slots__list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.slot {
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
  border-radius: var(--r-s); padding: 13px 10px; min-height: 48px;
  font: 700 15px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.slot:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.slot:active { transform: translateY(0) scale(.98); }
.slot.is-selected {
  background: var(--red); border-color: var(--red); color: #fff;
  box-shadow: 0 8px 20px -6px rgba(191,45,50,.6);
}
.slot:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .sched__picked, .slots { animation: none; }
  .cal__arrow, .cal__cell, .slot { transition: none; }
}


/* ---- gallery: the new HB photography is portrait, and worth the room ---- */
.method__gallery--tall { gap: clamp(10px, 1.6vw, 16px); }
.method__gallery--tall figure { margin: 0; overflow: hidden; border-radius: var(--r-s); }
.method__gallery--tall picture { display: block; }
.method__gallery--tall img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 4 / 5;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.method__gallery--tall figure:hover img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) { .method__gallery--tall img { transition: none; } }






/* ==========================================================================
   WIDE LAYOUT
   The container went from 940px to 1240px, which removes the dead margins on
   a normal desktop. Wider container does not mean wider text: body copy is
   capped at a readable measure so lines do not run to 1,100px.
   ========================================================================== */

.hero__sub,
.includes__lead,
.afterwards__lead,
.comeback__lead,
.method__lead,
.booking__lead,
.proof__lead,
.prize__mechanic,
.prize__note { max-width: var(--measure); }

/* Fine print was deliberately set full-width earlier. At 1240px that is too
   far for 12px type, so it gets a wider-but-still-bounded measure. */
.price__foot,
.includes__terms,
.foot__note,
.foot__terms { max-width: 96ch; }

/* ---- booking: the two steps sit side by side once there is room ---- */
@media (min-width: 1200px) {
  #bookingForm {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(18px, 2vw, 28px);
    align-items: stretch;
  }
  /* Step 2 is visible from the outset rather than appearing on selection —
     seeing what is coming is worth more than the reveal, and it is what keeps
     both columns balanced. */
  #step-1 { grid-column: 1; }
  #step-2 { grid-column: 2; }
  .booking__head { max-width: var(--measure); }
}

/* The locked state reads as "not yet" rather than "broken" now that it is
   always on screen. */
@media (min-width: 1200px) {
  #step-2.is-locked { opacity: .58; transition: opacity .35s ease; }
  #step-2:not(.is-locked) { opacity: 1; }
}



/* ---- scheduler: sized by its own card, not the viewport ----
   The overflow bug came from a viewport breakpoint deciding a layout whose
   space is set by the card. A container query asks the right question: is
   THIS card wide enough for the rail and the calendar side by side? Below that
   the rail sits on top, whatever the screen size. */
.step { min-width: 0; }
.sched { container-type: inline-size; }
@container (max-width: 440px) {
  .sched__grid { grid-template-columns: 1fr; }
}


/* ---- booking side by side: equal cards, aligned edges ----
   Both cards stretch to the taller of the two. Step 2's button is pushed to
   the bottom with margin-top: auto, so its lower edge always meets step 1's —
   including after a date is picked and the time slots make step 1 taller. */
@media (min-width: 1200px) {
  #step-1, #step-2 { display: flex; flex-direction: column; }

  #step-1 .sched__grid { flex: 1 1 auto; grid-template-columns: 184px minmax(0, 1fr); gap: 18px; }
  #step-1 .sched__aside { padding: 22px 20px; }
  #step-1 .sched__main { display: flex; flex-direction: column; }
  #step-1 .cal { flex: 1 1 auto; display: flex; flex-direction: column; padding: 18px 16px; }
  #step-1 .cal__tz { margin-top: auto; padding-top: 14px; }

  /* Three time slots per row instead of two — picking a date adds one fewer
     row to step 1, so the two cards grow less when they grow together. */
  #step-1 .slots { padding: 16px; }
  #step-1 .slots__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #step-1 .slot { padding-inline: 6px; font-size: 14px; }

  /* Whatever height step 1 sets, step 2 fills it with the notes box rather
     than an empty gap above the button. The question is open-ended, so a
     roomier box is an invitation, not padding. */
  #step-2 .grid2 { flex: 1 1 auto; grid-template-rows: auto auto minmax(0, 1fr); }
  #step-2 .field--full { display: flex; flex-direction: column; }
  #step-2 .field--full textarea { flex: 1 1 auto; min-height: 72px; resize: none; }
  #step-2 .submit { margin-top: 0; padding-top: 18px; }
}


/* ---- fine print: full container width, per request ----
   Overrides the 96ch / 62ch caps set in the wide-layout pass. */
.price__foot,
.includes__terms,
.prize__note,
.foot__note,
.foot__terms { max-width: none; }


/* ==========================================================================
   BEFORE / AFTER SLIDER — replaces the 2x2 proof grid
   ========================================================================== */
.ba {
  margin-top: clamp(24px, 4vw, 38px);
  display: grid;
  grid-template-columns: auto minmax(0, 900px) auto;
  justify-content: center;
  align-items: center;
  column-gap: clamp(16px, 4vw, 64px);
  row-gap: 20px;
}
.ba__arrow--prev { grid-column: 1; grid-row: 1; }
.ba__viewport    { grid-column: 2; grid-row: 1; }
.ba__arrow--next { grid-column: 3; grid-row: 1; }
.ba__dots        { grid-column: 1 / -1; grid-row: 2; justify-self: center; }

.ba__viewport {
  position: relative; width: 100%;
  aspect-ratio: 858 / 548;
  border-radius: var(--r);
  overflow: hidden;
  background: #111114;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8);
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.ba__slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden; z-index: 0;
}
.ba__slide.is-active  { opacity: 1; visibility: visible; z-index: 2; }
.ba__slide.is-leaving { visibility: visible; z-index: 1; }
.ba__slide img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none;
}

/* ---- arrows ---- */
.ba__arrow {
  border: 0; background: transparent; padding: 10px; margin: 0;
  color: var(--red); cursor: pointer; border-radius: 12px;
  display: grid; place-items: center;
  transition: color .2s ease, transform .2s ease, filter .2s ease;
}
.ba__arrow svg { width: clamp(56px, 6.4vw, 92px); height: auto; display: block; }
.ba__arrow--next svg { transform: scaleX(-1); }
.ba__arrow:hover { color: #e0393f; filter: drop-shadow(0 6px 18px rgba(191,45,50,.45)); }
.ba__arrow--prev:hover { transform: translateX(-4px); }
.ba__arrow--next:hover { transform: translateX(4px); }
.ba__arrow:active { transform: scale(.94); }
.ba__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ---- dots ---- */
.ba__dots { display: flex; gap: 8px; align-items: center; }
.ba__dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 100px;
  background: rgba(255,255,255,.28); cursor: pointer;
  transition: width .35s cubic-bezier(.22,1,.36,1), background .25s ease;
}
.ba__dot:hover { background: rgba(255,255,255,.55); }
.ba__dot.is-active { width: 28px; background: var(--red); }
.ba__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

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

/* No JavaScript: first slide shows on its own, controls stay out of the way. */
.ba:not(.is-ready) .ba__arrow,
.ba:not(.is-ready) .ba__dots { display: none; }

/* ---- phones: image full width, controls in a row underneath ---- */
@media (max-width: 720px) {
  .ba { grid-template-columns: auto 1fr auto; column-gap: 10px; row-gap: 14px; }
  .ba__viewport    { grid-column: 1 / -1; grid-row: 1; }
  .ba__arrow--prev { grid-column: 1; grid-row: 2; }
  .ba__dots        { grid-column: 2; grid-row: 2; justify-self: center; }
  .ba__arrow--next { grid-column: 3; grid-row: 2; }
  .ba__arrow svg   { width: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .ba__arrow, .ba__dot { transition: none; }
}

/* ---- "After the six weeks": full width, per request ---- */
.afterwards__lead { max-width: none; }


/* ==========================================================================
   PREMIUM PASS — micro-interactions, rhythm and finish across the whole page
   Hover lifts use the individual `translate` / `scale` properties rather than
   `transform`, so they never fight the load and scroll reveals (which animate
   `transform`). Every hover effect is gated on a real pointer; every motion
   effect is switched off under reduced motion at the end of this block.
   ========================================================================== */

:root {
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --section-y:   clamp(52px, 7.2vw, 108px);
  --head-h:      64px;
  --shadow-lift: 0 22px 44px -26px rgba(31,31,34,.42), 0 2px 6px rgba(31,31,34,.05);
}
/* Large desktop: the 1240 container left 340px of empty margin each side at 1920. */
@media (min-width: 1600px) { :root { --maxw: 1360px; } }

/* ---------------------------------------------------------- baseline ---- */
html { scroll-padding-top: calc(var(--head-h) + 12px); }
body { font-kerning: normal; font-feature-settings: "kern"; }
::selection { background: #f4c7c9; color: var(--ink); }
.hero ::selection, .prize ::selection, .proof ::selection, .foot ::selection,
.sched__aside ::selection, .dock ::selection { background: var(--red); color: #fff; }

/* Balanced headings, and no one-word last lines in running copy. `pretty`
   only re-flows the final lines of a paragraph; it does not narrow the measure. */
h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }

.price__num, .prize__amount, .countdown, .recap dd { font-variant-numeric: tabular-nums; }

/* Focus: red reads well on the light sections but only ~3:1 on the dark ones. */
.hero :focus-visible, .prize :focus-visible, .proof :focus-visible,
.foot :focus-visible, .dock :focus-visible { outline-color: #fff; }

/* ------------------------------------------------------ vertical rhythm -- */
/* One spacing token for every full-width section, instead of five different
   clamps. Section headings share one scale for the same reason. */
.includes, .prize, .proof, .afterwards, .method { padding-block: var(--section-y); }
.booking { padding-block: var(--section-y); }
.foot { margin-top: 0; }   /* the 20px grey strip between Method and the footer read as a gap, not a gutter */

.includes__title, .prize__title, .proof__title, .booking__title,
.afterwards__title, .method__title {
  font-size: clamp(2.1rem, 6.2vw, 3.7rem); line-height: .92; letter-spacing: -.005em;
}
.eyebrow::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 22px; height: 2px; margin: -2px 10px 0 0;
  background: currentColor; border-radius: 2px;
}

/* ------------------------------------------------------------ masthead --- */
.masthead {
  transition: box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
}
.masthead.is-scrolled {
  background: rgba(255,255,255,.95);
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 var(--line), 0 12px 30px -20px rgba(31,31,34,.35);
}
.masthead__inner { min-height: var(--head-h); }
.masthead__progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--red), #e2474d);
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}
.masthead__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.masthead__phone {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, scale .15s ease;
}
.masthead__phone:active { scale: .97; }

/* Appears once the hero button has scrolled away; hidden again over the form. */
.masthead__cta { display: none; }
@media (min-width: 720px) {
  .masthead__cta {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
    border-radius: 99px; background: var(--red); color: #fff; text-decoration: none; white-space: nowrap;
    font-family: var(--font-display); font-weight: 700; font-size: 16px;
    text-transform: uppercase; letter-spacing: .06em;
    box-shadow: 0 8px 20px -10px rgba(191,45,50,.7);
    opacity: 0; translate: 0 -8px; visibility: hidden; pointer-events: none;
    transition: opacity .3s ease, translate .4s var(--ease-out), background-color .2s ease,
                box-shadow .2s ease, visibility 0s linear .4s;
  }
  .masthead__cta.is-visible {
    opacity: 1; translate: 0 0; visibility: visible; pointer-events: auto;
    transition-delay: 0s;
  }
  .masthead__cta:active { scale: .97; }
}

/* ------------------------------------------------------------- buttons --- */
.btn {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease,
              box-shadow .3s ease, translate .3s var(--ease-out), scale .15s ease;
}
.btn:active { transform: none; scale: .98; }

/* Primary CTAs: soft red glow, a light sweep on hover, and an arrow that moves. */
.btn--hero, #submitBtn { position: relative; overflow: hidden; isolation: isolate; }
.btn--hero { box-shadow: 0 12px 28px -12px rgba(191,45,50,.75); }
.btn--hero::after, #submitBtn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  translate: -110% 0;
}
.btn--hero::before, #submitBtn::before {
  content: ""; order: 2; flex: 0 0 auto; width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate .35s var(--ease-out);
}
#submitBtn .btn__label { order: 1; }
#submitBtn .btn__spin { order: 3; }
#submitBtn.is-sending::before { display: none; }
#submitBtn.is-sending { cursor: progress; }

@media (hover: hover) {
  .btn--hero:hover, #submitBtn:not([disabled]):hover {
    translate: 0 -2px;
    box-shadow: 0 18px 34px -14px rgba(191,45,50,.85);
  }
  .btn--hero:hover::after, #submitBtn:not([disabled]):hover::after {
    translate: 110% 0; transition: translate .8s var(--ease-out);
  }
  .btn--hero:hover::before, #submitBtn:not([disabled]):hover::before { translate: 4px 0; }
  .btn--ghost:hover { background: var(--red-tint); }
  .masthead__cta:hover { background: #d13d42; box-shadow: 0 12px 24px -10px rgba(191,45,50,.8); }
}
.btn--hero:active, #submitBtn:active { translate: 0 0; }

/* ---------------------------------------------------------------- form --- */
.field label { transition: color .2s ease; }
.field:focus-within label { color: var(--red); }
.field:focus-within label .opt { color: var(--ink-3); }
.field input::placeholder, .field textarea::placeholder { transition: color .2s ease; }
.field input:focus::placeholder, .field textarea:focus::placeholder { color: #c2c2c8; }
@media (hover: hover) {
  .field input:hover:not(:focus), .field textarea:hover:not(:focus) { border-color: #a9a9b1; }
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  box-shadow: 0 0 0 3px rgba(179,38,30,.1);
  animation: nudge .38s ease;
}
@keyframes nudge {
  20% { translate: -5px 0; } 40% { translate: 4px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; }
}
.err { animation: errIn .3s var(--ease-out); }
@keyframes errIn { from { opacity: 0; translate: 0 -3px; } }

/* --------------------------------------------------------------- cards --- */
.price__card, .holistic li, .prize__reqs li {
  transition: translate .45s var(--ease-out), box-shadow .45s var(--ease-out),
              border-color .25s ease, background-color .25s ease;
}
.holistic img { transition: translate .5s var(--ease-spring), scale .5s var(--ease-spring); }
.price__card--alt { box-shadow: 0 18px 40px -28px rgba(191,45,50,.55); }

@media (hover: hover) {
  .price__card:hover { translate: 0 -4px; box-shadow: var(--shadow-lift); }
  .price__card--alt:hover { box-shadow: 0 26px 48px -26px rgba(191,45,50,.6); }
  .holistic li:hover { translate: 0 -4px; box-shadow: var(--shadow-lift); border-color: var(--line-2); background: var(--card); }
  .holistic li:hover img { translate: 0 -3px; scale: 1.07; }
  .prize__reqs li:hover { border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.075); }
}

/* Gallery: the zoom already exists; add depth and a slow settle. */
.method__gallery--tall figure { transition: box-shadow .5s var(--ease-out), translate .5s var(--ease-out); }
.method__gallery--tall img { transition: transform .9s var(--ease-out); }
@media (hover: hover) {
  .method__gallery--tall figure:hover { translate: 0 -3px; box-shadow: 0 26px 50px -30px rgba(31,31,34,.55); }
}

/* -------------------------------------------------------------- footer --- */
.foot { padding-top: clamp(44px, 6vw, 72px); }
.foot__meta a {
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + .8em) / 0 1px no-repeat;
  transition: color .2s ease, background-size .35s var(--ease-out);
}
.foot__meta a:hover { background-size: 100% 1px; }
.foot__top {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  margin-top: 22px; padding: 0 18px; border-radius: 99px;
  border: 1px solid rgba(255,255,255,.18); color: #e9e9ea; text-decoration: none;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.foot__top svg { width: 15px; height: 15px; transition: translate .35s var(--ease-out); }
@media (hover: hover) {
  .foot__top:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); color: #fff; }
  .foot__top:hover svg { translate: 0 -3px; }
}

/* ---------------------------------------------------------- dock + done --- */
.dock { animation: dockIn .55s var(--ease-spring) both; }
@keyframes dockIn { from { opacity: 0; translate: 0 calc(100% + 16px); } }
.dock__btn { transition: border-color .2s ease, background-color .2s ease; }

.success__mark { position: relative; animation: markIn .6s var(--ease-spring) .12s both; }
.success__mark::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--red); animation: markRing 1.1s var(--ease-out) .3s both;
}
@keyframes markIn { from { opacity: 0; scale: .4; } }
@keyframes markRing { from { opacity: .7; scale: 1; } to { opacity: 0; scale: 1.9; } }

/* -------------------------------------------------------------- reveal --- */
/* polish.js adds .rv to below-the-fold blocks and removes it as each one
   enters view. Without the script nothing is ever hidden. */
.rv { opacity: 0; }

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; }
  .masthead__cta, .btn, .btn--hero::before, .btn--hero::after, #submitBtn::before, #submitBtn::after,
  .price__card, .holistic li, .holistic img, .prize__reqs li, .method__gallery--tall figure,
  .method__gallery--tall img, .foot__meta a, .foot__top svg { transition: none; }
  .dock, .success__mark, .success__mark::after, .err,
  .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { animation: none; }
  .success__mark::after { opacity: 0; }
}

/* The booking heading ran to two lines only because the whole head was capped
   at the reading measure. The lead keeps the cap; the heading doesn't need it. */
@media (min-width: 1200px) { .booking__head { max-width: none; } }

/* Prize requirements: the copy is one flex item now, so "Complete all" and the
   bold part no longer split into two columns on a phone. */
.prize__reqs li p { margin: 0; min-width: 0; padding-top: 2px; }

/* Scheduler on a tablet: the card is ~630px wide at 768, room enough for the
   rail beside the calendar. Decided by the card's width, like the rule above. */
@container (min-width: 600px) {
  .sched__grid { grid-template-columns: minmax(176px, 212px) minmax(0, 1fr); }
}


/* ==========================================================================
   MARQUEE — "What's included" cards drifting left
   Replaces the 3D ring. Bigger cards, every one face-on and readable. Until
   marquee.js adds .is-running this is the ordinary grid inside page margins.
   ========================================================================== */
.marquee { margin-top: 26px; }
.marquee .inc { margin-top: 0; }

/* Bigger cards in both states. */
.marquee .inc__item { padding: 32px 26px 30px; gap: 6px; }
.marquee .inc__icon { width: 64px; height: 64px; margin-bottom: 12px; }
.marquee .inc__icon svg { width: 34px; height: 34px; }
.marquee .inc__item strong { font-size: clamp(1.2rem, 1.6vw, 1.42rem); }
.marquee .inc__item span:last-child { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: 32ch; }

/* ---- running ---- */
.marquee.is-running {
  --mq-w: clamp(276px, 26vw, 352px);
  --mq-gap: clamp(16px, 2vw, 26px);
  --mq-fade: clamp(24px, 7vw, 140px);
  max-width: none; padding: 18px 0 34px; margin-top: 14px;
  overflow: hidden;   /* the track is far wider than the screen by design */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--mq-fade), #000 calc(100% - var(--mq-fade)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--mq-fade), #000 calc(100% - var(--mq-fade)), transparent);
}
/* Two identical copies with a trailing gap, so moving by exactly -50% lands
   the second copy where the first began. */
.marquee.is-running .marquee__track {
  display: flex; gap: var(--mq-gap); padding-right: var(--mq-gap);
  width: max-content; margin: 0;
  animation: marquee var(--mq-dur, 90s) linear infinite;
  will-change: transform;
}
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
.marquee.is-running:hover .marquee__track,
.marquee.is-held .marquee__track,
.marquee.is-offscreen .marquee__track { animation-play-state: paused; }

.marquee.is-running .marquee__track > .inc__item {
  flex: 0 0 var(--mq-w); width: var(--mq-w); margin: 0;
  box-shadow: 0 1px 2px rgba(31,31,34,.04), 0 12px 30px -20px rgba(31,31,34,.2);
  transition: translate .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .25s ease;
}
@media (hover: hover) {
  .marquee.is-running .marquee__track > .inc__item:hover {
    translate: 0 -4px; border-color: var(--red);
    box-shadow: 0 22px 44px -22px rgba(191,45,50,.42);
  }
}