/* ==========================================================================
   REVIVE — Recovery Spa, Stirling
   Design tokens lifted from Whoop's shipped CSS (see design-system.md).
   ========================================================================== */

:root{
  /* --- colour: near-monochrome, colour only ever appears as data --- */
  --c-black:#000;
  --c-near:#0a0a0a;
  --c-panel:#191919;
  --c-panel-2:#1e1e1e;
  --c-white:#fff;
  --c-mist:#f3f5f9;
  --c-line:#e5e5e5;
  --c-mute:#999;
  --c-mute-d:#b2b2b2;
  --c-ink-2:#4c4c4c;
  --c-cold:#3fc1ff;
  --c-heat:#ff6b2c;

  /* --- per-section flip, exactly how Whoop does it --- */
  --module-background:var(--c-white);
  --module-text-color:var(--c-black);

  /* --- type: fluid, no breakpoint jumps --- */
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(1.5625rem, 8.92vw - .5281690141rem, 7.5rem);
  --fs-h1:      clamp(1.5625rem, 7.04vw - .088028169rem,  6.25rem);
  --fs-h2:      clamp(1.5625rem, 3.76vw + .6822183099rem, 4.0625rem);
  --fs-h3:      clamp(1.5625rem, 3.29vw + .7922535211rem, 3.75rem);
  --fs-h4:      clamp(1.5625rem, 2.35vw + 1.0123239437rem,3.125rem);
  --fs-h5:      clamp(1.5625rem, .94vw + 1.3424295775rem, 2.1875rem);
  --fs-body-lg: clamp(1.125rem,  .56vw + .9929577465rem,  1.5rem);
  --fs-body:    clamp(.875rem,   .56vw + .7429577465rem,  1.25rem);
  --fs-cap:     clamp(.75rem,    .38vw + .661971831rem,   1rem);

  /* --- geometry --- */
  --r-card: clamp(.9375rem, 1.41vw + .6073943662rem, 1.875rem);
  --r-panel: 30px;
  --r-sm: .9375rem;
  --pad-x: clamp(1.25rem, 7.51vw - .5105633803rem, 6.25rem);
  --gap: clamp(2.5rem, 3.76vw + 1.6197183099rem, 5rem);
  --section-y: clamp(4rem, 6vw + 2rem, 10rem);
  --rail-col: 72vw;

  /* --- motion --- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 48rem){ :root{ --rail-col: 27.3vw; } }

/* ========================= base ========================= */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; } /* beats the display:flex on .header__menu */
[id]{ scroll-margin-top:6rem; }      /* anchor targets clear the fixed header */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--c-black);
  background:var(--c-black);
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

/* Broken/absent asset still reads as a dark plate rather than a torn icon */
.hero__media,.strip__media,.proof__media,.dark__media,
.card,.tile,.cta-panel__media{ background:linear-gradient(160deg,#1e1e1e,#000); }

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

/* ========================= type ========================= */
/* Negative tracking on display sizes is the whole signature — do not remove */
.display,.h2,.h3,.h4,.h5{
  margin:0;
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.04em;
  text-wrap:balance;
}
.display{ font-size:var(--fs-display); }
.h2{ font-size:var(--fs-h2); letter-spacing:-.03em; line-height:1.05; }
.h3{ font-size:var(--fs-h3); letter-spacing:-.03em; line-height:1.06; }
.h4{ font-size:var(--fs-h4); letter-spacing:-.03em; line-height:1.08; }
.h5{ font-size:var(--fs-h5); letter-spacing:-.03em; line-height:1.2; font-weight:500; }

.body{ font-size:var(--fs-body); }
.body-lg{ font-size:var(--fs-body-lg); line-height:1.4; letter-spacing:-.01em; }

/* Caps labels go the other way — positive tracking */
.eyebrow{
  margin:0 0 .75rem;
  font-size:var(--fs-cap);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--c-mute);
}

sup a{ text-decoration:none; color:inherit; opacity:.55; }

/* ========================= buttons ========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:1.125rem 2.25rem;
  border:1px solid transparent;
  border-radius:999px;
  font-size:var(--fs-cap);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn--dark{ background:var(--c-black); color:var(--c-white); }
.btn--dark:hover{ background:var(--c-ink-2); }
.btn--light{ background:var(--c-white); color:var(--c-black); }
.btn--light:hover{ background:var(--c-line); }
.btn--ghost{ background:transparent; color:var(--c-white); border-color:var(--c-white); }
.btn--ghost:hover{ background:var(--c-white); color:var(--c-black); }
.btn--block{ width:100%; }

/* ========================= 1. header ========================= */
.header{
  position:fixed; inset-inline:0; top:0; z-index:400;
  background:transparent;
  transition:background-color .3s var(--ease);
}
/* keeps the wordmark legible while the header is transparent over a bright hero */
.header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.45), transparent);
  transition:opacity .3s var(--ease);
}
.header--solid{ background:var(--c-black); }
.header--solid::before{ opacity:0; }
.header__inner{
  display:flex; align-items:center; justify-content:center;
  position:relative;
  height:4.5rem;
  padding:0 var(--pad-x);
}
.header__logo img{ height:1.625rem; width:auto; }
.header__burger{
  position:absolute; inset-inline-end:var(--pad-x); top:50%;
  translate:0 -50%;
  display:flex; flex-direction:column; gap:.375rem; justify-content:center;
  width:2rem; height:2rem; padding:0;
  background:none; border:0; cursor:pointer;
}
.header__burger span{
  display:block; height:2px; width:100%;
  background:var(--c-white);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.header__burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.header__burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

.header__menu{
  display:flex; flex-direction:column; gap:1rem;
  padding:1.5rem var(--pad-x) 2.5rem;
  background:var(--c-black);
  color:var(--c-white);
}
.header__menu a{
  font-size:var(--fs-body-lg);
  letter-spacing:-.03em;
  text-decoration:none;
}
.header__menu-cta{ font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:var(--fs-cap); }

/* ========================= 2. hero (sticky) =========================
   The absorb effect: the hero pins at top:0 while .sheet — the next block
   in flow — scrolls up over it with a rounded white cap. Whoop's exact
   mechanism (.blog-hero sticky + following section's rounded ::before).
   No JS, no scroll library.
   ================================================================== */
.hero{
  position:sticky; top:0; z-index:0;
  height:100dvh;
  overflow:hidden;
  display:flex; align-items:flex-end;
  padding:0 var(--pad-x) clamp(5rem, 8vw, 9rem);
  color:var(--c-white);
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img,.hero__media video{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.05) 38%, rgba(0,0,0,.75) 100%);
}
.hero__text{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:1.5rem;
  max-width:90rem;
}
.hero__sub{
  margin:0;
  font-size:var(--fs-body-lg);
  line-height:1.35;
  letter-spacing:-.01em;
  max-width:38ch;
}
.hero__text .btn{ margin-top:.5rem; }

.hero__scroll-cue{
  position:absolute; inset-inline:0; bottom:1.75rem;
  display:flex; justify-content:center;
}
.hero__scroll-cue span{
  width:1px; height:2.5rem;
  background:linear-gradient(180deg, transparent, var(--c-white));
  animation: cue 2s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{opacity:.2; transform:scaleY(.6);} 50%{opacity:1; transform:scaleY(1);} }

/* Scroll-driven zoom-out + text fade, matching Whoop's scale(2 - progress).
   Guarded: browsers without scroll timelines get a clean static hero. */
@supports (animation-timeline: scroll()){
  .hero__media img{
    transform-origin:center;
    animation: heroZoom linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100dvh;
  }
  .hero__text{
    animation: heroFade linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 70dvh;
  }
  @keyframes heroZoom{ from{ transform:scale(1.2); } to{ transform:scale(1); } }
  @keyframes heroFade{ from{ opacity:1; translate:0 0; } to{ opacity:0; translate:0 -3rem; } }
}
@media (prefers-reduced-motion: reduce){
  .hero__media img{ animation:none; transform:none; }
  .hero__text{ animation:none; opacity:1; translate:none; }
  .hero__scroll-cue span{ animation:none; }
}

/* ========================= the white sheet ========================= */
.sheet{
  position:relative; z-index:1;
  background:var(--module-background);
  color:var(--module-text-color);
  border-start-start-radius:var(--r-panel);
  border-start-end-radius:var(--r-panel);
  /* clip, NOT hidden: overflow:hidden establishes a scroll container, which
     would break the view() scroll timelines on every section below. */
  overflow:clip;
}

/* ========================= 3. offer strip ========================= */
.strip{
  display:grid; gap:var(--gap);
  align-items:center;
  padding:var(--section-y) var(--pad-x);
}
@media (min-width:56rem){ .strip{ grid-template-columns:1fr 1fr; } }
.strip__media{ border-radius:var(--r-card); overflow:hidden; aspect-ratio:4/3; }
.strip__media img{ width:100%; height:100%; object-fit:cover; }
.strip__body{ display:flex; flex-direction:column; align-items:flex-start; gap:1.25rem; }
.strip__body .body{ margin:0; max-width:46ch; color:var(--c-ink-2); }

/* ========================= 4. proof ========================= */
.proof{ padding:var(--section-y) var(--pad-x); }
.proof__head{ max-width:60rem; display:flex; flex-direction:column; gap:1.5rem; }
.proof__head .body-lg{ margin:0; color:var(--c-ink-2); }
.proof__media{
  margin-top:var(--gap);
  border-radius:var(--r-card); overflow:hidden;
  aspect-ratio:16/9;
}
.proof__media img{ width:100%; height:100%; object-fit:cover; }

.stats{
  display:grid; gap:var(--gap);
  margin:var(--gap) 0 0; padding:0; list-style:none;
}
@media (min-width:48rem){ .stats{ grid-template-columns:repeat(3,1fr); } }
.stats li{ display:flex; flex-direction:column; gap:.5rem; border-top:1px solid var(--c-line); padding-top:1.25rem; }
.stat__n{ font-size:var(--fs-h4); font-weight:600; letter-spacing:-.04em; line-height:1; }
.stat__l{ font-size:var(--fs-cap); color:var(--c-ink-2); line-height:1.45; }

/* ========================= 5. rail (the rooms) ========================= */
.rail-section{ padding:var(--section-y) 0; }
.rail-section__head{
  padding:0 var(--pad-x); margin-bottom:var(--gap);
  max-width:56rem; display:flex; flex-direction:column; gap:1.25rem;
}
.rail-section__head .body-lg{ margin:0; color:var(--c-ink-2); }

.rail{
  display:flex; gap:1rem;
  padding:0 var(--pad-x) 1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline-start:var(--pad-x); /* snap respects the gutter */
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.rail::-webkit-scrollbar{ display:none; }

/* --- rail controls: injected by app.js, one per rail ---------------------
   Horizontal rails are undiscoverable without them, and unusable entirely
   on a mouse with no horizontal wheel. Arrows + dots, always visible. */
.rail-nav{
  display:flex; align-items:center; justify-content:center;
  gap:1.25rem;
  padding:1.5rem var(--pad-x) 0;
}
.rail-nav__arrow{
  flex:0 0 auto;
  width:2.75rem; height:2.75rem; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-white); color:var(--c-black);
  border:1px solid var(--c-line); border-radius:50%;
  cursor:pointer;
  transition:background-color .2s var(--ease), opacity .2s var(--ease), transform .2s var(--ease);
}
.rail-nav__arrow svg{ width:1rem; height:1rem; }
.rail-nav__arrow:hover:not(:disabled){ background:var(--c-black); color:var(--c-white); transform:scale(1.06); }
.rail-nav__arrow:disabled{ opacity:.25; cursor:default; }

.rail-nav__dots{ display:flex; align-items:center; gap:.625rem; }
.rail-nav__dot{
  position:relative;
  width:.625rem; height:.625rem; padding:0;
  background:var(--c-black); opacity:.25;
  border:0; border-radius:50%;
  cursor:pointer;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
/* 44px touch target without changing the 10px visual */
.rail-nav__dot::before{
  content:""; position:absolute; inset:-1.0625rem;
}
.rail-nav__dot--active{ opacity:1; transform:scale(1.25); }

/* dark section inverts the controls */
.dark .rail-nav__dot{ background:var(--c-white); }
.dark .rail-nav__arrow{
  background:transparent; color:var(--c-white);
  border-color:rgba(255,255,255,.3);
}
.dark .rail-nav__arrow:hover:not(:disabled){ background:var(--c-white); color:var(--c-black); }

.card{
  position:relative; flex:0 0 var(--rail-col);
  aspect-ratio:3/4;
  border-radius:var(--r-card);
  overflow:hidden;
  scroll-snap-align:start;
}
.card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out); }
.card:hover img{ transform:scale(1.04); }
.card__grad{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 45%);
}
.card__title{
  position:absolute; inset-inline-start:1.5rem; top:1.5rem;
  inset-inline-end:4rem;
  margin:0;
  font-size:var(--fs-h5); font-weight:600; line-height:1.1; letter-spacing:-.03em;
  color:var(--c-white);
}
.card__more{
  position:absolute; inset-inline-end:1.25rem; bottom:1.25rem;
  width:2.75rem; height:2.75rem;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%;
  background:var(--c-white); color:var(--c-black);
  font-size:1.5rem; line-height:1;
  cursor:pointer;
  transition:transform .2s var(--ease);
}
.card__more:hover{ transform:scale(1.08); }

/* --- benefit cards: image + claim + citation ---------------------------
   Taller than the plain image card because every claim carries its source.
   Never remove .bcard__src — the citation is what keeps the claim lawful. */
.bcard{
  flex:0 0 var(--rail-col);
  display:flex; flex-direction:column;
  background:var(--c-white);
  border:1px solid var(--c-line);
  border-radius:var(--r-card);
  overflow:hidden;
  scroll-snap-align:start;
}
.bcard__media{ aspect-ratio:4/3; overflow:hidden; background:linear-gradient(160deg,#1e1e1e,#000); }
.bcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out); }
.bcard:hover .bcard__media img{ transform:scale(1.04); }
.bcard__body{ display:flex; flex-direction:column; gap:.75rem; padding:1.75rem; flex:1; }
.bcard__stat{
  margin:0;
  font-size:var(--fs-cap); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--c-cold);
}
.bcard__title{
  margin:0;
  font-size:var(--fs-body-lg); font-weight:600;
  letter-spacing:-.03em; line-height:1.15;
}
.bcard__text{ margin:0; font-size:var(--fs-cap); line-height:1.5; color:var(--c-ink-2); }
.bcard__text + .bcard__text{ margin-top:.25rem; }
/* the honesty card — no image, full-height text */
.bcard--dark{ background:var(--c-black); border-color:var(--c-black); color:var(--c-white); }
.bcard--dark .bcard__body{ justify-content:center; }
.bcard--dark .bcard__text{ color:var(--c-mute-d); }

@media (min-width:48rem){ .bcard__body{ padding:2rem; } }

/* --- OVERLAY CARD VARIANT (experiment) ---------------------------------
   TO REVERT: delete the word `rail--overlay` from the benefits rail in
   index.html and the cards go back to image-on-top / white-panel-below.
   Deleting this whole block also reverts it. Nothing here modifies the
   default .bcard rules above — it only overrides them under the parent
   class, so the two styles cannot drift apart. */
.rail--overlay .bcard{
  position:relative;
  min-height:31rem;
  border:0;
  background:var(--c-black);
}
.rail--overlay .bcard__media{
  position:absolute; inset:0;
  aspect-ratio:auto;
}
.rail--overlay .bcard__media img{ height:100%; }
.rail--overlay .bcard::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg,
    rgba(0,0,0,.94) 0%, rgba(0,0,0,.78) 28%, rgba(0,0,0,.35) 58%, rgba(0,0,0,0) 88%);
}
.rail--overlay .bcard__body{
  position:relative; z-index:1;
  justify-content:flex-end;
  color:var(--c-white);
}
.rail--overlay .bcard__title{ font-size:var(--fs-h5); font-weight:600; }
.rail--overlay .bcard__text{ color:rgba(255,255,255,.82); }
/* the timing card carries no image, so it needs no scrim */
.rail--overlay .bcard--dark::after{ display:none; }

/* ========================= 6. pricing ========================= */
.pricing{ padding:var(--section-y) var(--pad-x); background:var(--c-mist); }
.pricing__head{ max-width:52rem; display:flex; flex-direction:column; gap:1.25rem; }
.pricing__head .body-lg{ margin:0; color:var(--c-ink-2); }
.plans{ display:grid; gap:1rem; margin-top:var(--gap); }
@media (min-width:56rem){ .plans{ grid-template-columns:repeat(2,1fr); max-width:56rem; } }
.plan .btn{ margin-top:auto; }
.plan{
  display:flex; flex-direction:column; gap:1.5rem;
  padding:2rem;
  background:var(--c-white);
  border-radius:var(--r-card);
}
.plan--feature{ background:var(--c-black); color:var(--c-white); }
.plan--feature .eyebrow{ color:var(--c-cold); }
.plan--feature .plan__row{ border-color:rgba(255,255,255,.18); }
.plan--feature .plan__note{ color:var(--c-mute-d); }

.plan__rows{ display:flex; flex-direction:column; }
.plan__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.875rem 0;
  border-bottom:1px solid var(--c-line);
  font-size:var(--fs-cap);
}
.plan__row:last-child{ border-bottom:0; }
.plan__row-label{ opacity:.7; }
.plan__row-price{ font-weight:600; letter-spacing:-.02em; white-space:nowrap; }
/* headline price per card gets the display treatment */
.plan__row--hero{ padding-top:0; }
.plan__row--hero .plan__row-label{ opacity:1; font-weight:500; }
.plan__row--hero .plan__row-price{ font-size:var(--fs-h5); letter-spacing:-.04em; }
.plan__per{ font-size:var(--fs-cap); font-weight:500; letter-spacing:0; opacity:.55; }
.plan__note{ margin:0; margin-top:auto; font-size:var(--fs-cap); color:var(--c-mute); line-height:1.45; }
.fineprint{ margin-top:1.5rem; max-width:60rem; font-size:var(--fs-cap); color:var(--c-mute); line-height:1.55; }

/* ========================= 7. social proof grid ========================= */
.social{ padding:var(--section-y) var(--pad-x); }
.social__head{ max-width:56rem; display:flex; flex-direction:column; gap:1.25rem; margin-bottom:var(--gap); }
.social__head .body-lg{ margin:0; color:var(--c-ink-2); }
/* Two columns at every width — Whoop keeps the mosaic on mobile rather than
   collapsing to a stack, and it is the better-looking half of the section. */
.social__grid{
  display:grid; gap:.75rem;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:minmax(0,auto);
}
.tile--tall{ grid-row:span 2; }
/* 4 tiles + one row-span leaves a hole bottom-right — last tile takes the row */
.social__grid > :last-child{ grid-column:span 2; min-height:14rem; }
.tile{ min-height:11rem; }
@media (min-width:48rem){
  .social__grid{ gap:1rem; }
  .tile{ min-height:18rem; }
  .social__grid > :last-child{ min-height:22rem; }
}
.tile{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  min-height:18rem;
}
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tile__grad{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 55%); }
.tile__cap{ position:absolute; inset-inline-start:1.5rem; bottom:1.5rem; color:var(--c-white); }
.tile__name{ margin:0; font-weight:600; letter-spacing:-.02em; }
.tile__role{ margin:.125rem 0 0; font-size:var(--fs-cap); opacity:.75; }
.tile--quote{
  background:var(--c-mist);
  display:flex; flex-direction:column; justify-content:space-between;
  gap:1rem; padding:1.25rem;
}
.tile--quote blockquote{ font-size:var(--fs-body); letter-spacing:-.02em; }
@media (min-width:48rem){
  .tile--quote{ gap:2rem; padding:2rem; }
  .tile--quote blockquote{ font-size:var(--fs-h5); }
}
.tile--quote blockquote{ margin:0; }
.tile--quote .tile__name,.tile--quote .tile__role{ color:var(--c-black); }
.tile--quote .tile__role{ color:var(--c-mute); }

/* ========================= 8. dark section ========================= */
.dark{
  --module-background:var(--c-black);
  --module-text-color:var(--c-white);
  background:var(--module-background);
  color:var(--module-text-color);
  padding:var(--section-y) 0;
  border-radius:var(--r-card);
  margin:0 .75rem;
}
.dark__head{ padding:0 var(--pad-x); max-width:56rem; display:flex; flex-direction:column; gap:1.25rem; }
.dark__head .body-lg{ margin:0; color:var(--c-mute-d); }
.dark__media{
  margin:var(--gap) var(--pad-x) 0;
  border-radius:var(--r-card); overflow:hidden; aspect-ratio:16/9;
}
.dark__media img{ width:100%; height:100%; object-fit:cover; }
.rail--dark{ margin-top:var(--gap); }
.spec{
  flex:0 0 var(--rail-col);
  scroll-snap-align:start;
  display:flex; flex-direction:column; gap:.75rem;
  padding:1.75rem;
  background:var(--c-panel);
  border-radius:var(--r-sm);
}
.spec__title{ margin:0; font-size:var(--fs-body-lg); font-weight:600; letter-spacing:-.03em; }
.spec__body{ margin:0; font-size:var(--fs-cap); color:var(--c-mute-d); line-height:1.5; }

/* ========================= 9. booking panel ========================= */
.cta-panel{ padding:var(--section-y) var(--pad-x); }
.cta-panel__inner{
  display:flex; flex-direction:column; align-items:center; gap:1.5rem;
  padding:clamp(2.5rem,5vw,5rem) var(--pad-x);
  background:var(--c-near);
  color:var(--c-white);
  border-radius:var(--r-card);
  text-align:center;
}
.cta-panel__inner .body-lg{ margin:0; color:var(--c-mute-d); max-width:44ch; }
.booking-widget{
  width:100%; max-width:44rem;
  margin-top:1rem; padding:2.5rem 1.5rem;
  border:1px dashed rgba(255,255,255,.25);
  border-radius:var(--r-sm);
  display:flex; flex-direction:column; align-items:center; gap:1.25rem;
}
/* Live bsport embed: white card so the widget's dark text stays legible
   inside the black panel */
.booking-widget--live{
  border:0; display:block;
  background:var(--c-white); color:var(--c-black);
  border-radius:var(--r-sm);
  padding:1rem;
}
.booking-widget--live > div{ width:100%; }

.booking-widget__note{
  margin:0; font-size:var(--fs-cap);
  text-transform:uppercase; letter-spacing:.1em; color:var(--c-mute);
}
/* Flush to the panel's bottom + side edges (negative margins cancel the
   inner padding), bottom corners follow the card radius, top fades into
   the panel black so the photo grows out of the card. */
.cta-panel__media{
  align-self:stretch; position:relative;
  margin:1.5rem calc(var(--pad-x) * -1) calc(clamp(2.5rem,5vw,5rem) * -1);
  border-radius:0 0 var(--r-card) var(--r-card);
  overflow:hidden; aspect-ratio:16/9;
}
.cta-panel__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.cta-panel__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, var(--c-near), transparent 45%);
}

/* ========================= 10. footnotes ========================= */
.notes{ padding:0 var(--pad-x) var(--section-y); max-width:64rem; }
.notes p{ font-size:var(--fs-cap); line-height:1.6; color:var(--c-mute); }

/* ========================= 11. footer ========================= */
/* position+z-index are LOAD-BEARING: .hero is position:sticky with z-index 0,
   and a positioned element paints over a non-positioned one, so without this
   the sticky hero covers the whole footer. Same fix as .sheet. */
.footer{
  position:relative; z-index:1;
  background:var(--c-black); color:var(--c-white);
  padding:var(--section-y) var(--pad-x) 7rem;
}
@media (min-width:48rem){ .footer{ padding-bottom:3rem; } }
.footer__cols{ display:grid; gap:var(--gap); }
@media (min-width:48rem){ .footer__cols{ grid-template-columns:repeat(4,1fr); } }
.footer__cols h3{
  margin:0 0 1rem;
  font-size:var(--fs-cap); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
}
.footer__address{
  font-style:normal;
  font-size:var(--fs-cap);
  line-height:1.6;
  color:var(--c-mute-d);
  margin:0 0 1rem;
}
.footer__cols a{
  display:block; padding:.4rem 0;
  font-size:var(--fs-cap); color:var(--c-mute-d); text-decoration:none;
  transition:color .2s var(--ease);
}
.footer__cols a:hover{ color:var(--c-white); }
.footer__base{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  margin-top:var(--gap); padding-top:2.5rem;
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center;
}
.footer__logo{ height:1.75rem; width:auto; }
.footer__base p{ margin:0; font-size:var(--fs-cap); color:var(--c-mute); }
.footer__credit a{ color:inherit; text-underline-offset:.2em; }
.footer__social{ color:var(--c-white); display:inline-flex; padding:.25rem; margin-bottom:.5rem; transition:opacity .2s; }
.footer__social svg{ width:26px; height:26px; }
.footer__social:hover{ opacity:.6; }

/* ========================= floating CTA pill ========================= */
.pill{
  position:fixed; z-index:500;
  inset-inline:0; bottom:1.25rem;
  width:max-content; margin-inline:auto;
  padding:1.125rem 2.5rem;
  background:var(--c-black); color:var(--c-white);
  border-radius:999px;
  font-size:var(--fs-cap); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  text-decoration:none;
  box-shadow:0 .5rem 2rem rgba(0,0,0,.35);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.pill--hidden{ opacity:0; transform:translateY(140%); pointer-events:none; }
@media (min-width:48rem){ .pill{ display:none; } }


/* ========================= standalone doc pages ========================= */
/* disclaimer.html — no sticky hero here, so the page needs its own top pad */
.page{ background:var(--c-white); }
.doc{
  position:relative; z-index:1;
  max-width:52rem;
  margin:0 auto;
  padding:calc(4.5rem + var(--section-y)) var(--pad-x) var(--section-y);
  background:var(--c-white);
}
.doc h1{ margin-bottom:2rem; }
.doc__h{
  margin:3rem 0 1rem;
  font-size:var(--fs-body-lg); font-weight:600; letter-spacing:-.03em;
}
.doc__h3{
  margin:2rem 0 .75rem;
  font-size:var(--fs-body); font-weight:600; letter-spacing:-.02em;
}
.doc p{ margin:0 0 1rem; font-size:var(--fs-cap); line-height:1.65; color:var(--c-ink-2); }
.doc__list{ margin:0 0 1rem; padding-left:1.25rem; font-size:var(--fs-cap); line-height:1.65; color:var(--c-ink-2); }
.doc__list li{ margin-bottom:.35rem; }
.doc p strong{ color:var(--c-black); }
.doc a{ color:var(--c-black); }
.doc__back{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--c-line); }


/* ========================= scroll reveals =========================
   Trigger-once fade-up, matching leadhook.co (opacity 0→1, translateY,
   cubic-bezier(.16,1,.3,1), fires once) without the animation library.

   :where() IS LOAD-BEARING — do not remove it. It zeroes the specificity
   of everything inside, so the hidden rule scores (0,1,0) and `.js .is-in`
   at (0,2,0) always wins. Without it, any selector containing a tag name
   (.stats li, .notes p, .footer__cols > div) scores (0,2,1) and beats
   .is-in — those elements get the class but never become visible. That
   bug hid the stat numbers, the disclaimer and the whole footer.

   Elements are hidden by selector rather than by a JS-added class so they
   are hidden at first paint; adding the class from deferred JS would show
   the content, hide it, then reveal it. The `.js` flag is set by an inline
   script in <head>, so with JavaScript off nothing is ever hidden.
   ================================================================== */
.js :where(
    .strip__media,
    .strip__body,
    .proof__head,
    .proof__media,
    .stats li,
    .rail-section__head,
    .pricing__head,
    .plan,
    .social__head,
    .tile,
    .dark__head,
    .dark__media,
    .cta-panel__inner,
    .notes p,
    .footer__cols > div
  ){
  opacity:0;
  transform:translateY(32px);
  will-change:opacity, transform;
}
.js :where(.strip__media, .proof__media, .dark__media){
  transform:translateY(36px) scale(.96);
}
.js .is-in{
  opacity:1;
  transform:none;
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce){
  .js :where(
      .strip__media,
    .strip__body,
    .proof__head,
    .proof__media,
    .stats li,
    .rail-section__head,
    .pricing__head,
    .plan,
    .social__head,
    .tile,
    .dark__head,
    .dark__media,
    .cta-panel__inner,
    .notes p,
    .footer__cols > div
    ){ opacity:1; transform:none; }
}