/* ==========================================================================
   Recovery Room — Black Friday 2026 landing page
   Hand-ported from the Claude Design project "Black Friday landing page"
   (file: Black Friday Landing Page.dc.html) and the Recovery Room design
   system tokens (_ds/recovery-room-design-system/tokens/*).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Webfonts (self-hosted, latin subset)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/poppins-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/montserrat-var.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Base palette — eight colours only */
  --rr-steel-blue: #436E86;
  --rr-near-black: #0A0A0A;
  --rr-true-black: #000000;
  --rr-dark-grey: #1A1A1A;
  --rr-charcoal: #1C1C1C;
  --rr-off-white: #FAFAFA;
  --rr-light-grey: #DCDCDC;
  --rr-white: #FFFFFF;

  /* Semantic aliases */
  --surface-page-dark: var(--rr-near-black);
  --surface-page-light: var(--rr-off-white);
  --surface-panel: var(--rr-dark-grey);
  --text-on-dark: var(--rr-white);
  --text-on-dark-heading: var(--rr-off-white);
  --text-on-light: var(--rr-charcoal);
  --text-muted-on-dark: var(--rr-light-grey);
  --border-light: var(--rr-light-grey);
  --border-dark-button: var(--rr-white);

  /* Type */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Montserrat', sans-serif;
  --text-h1-line: 0.99;
  --text-h1-tracking: -0.02em;
  --text-h2-line: 1.03;
  --text-h2-tracking: -0.02em;
  --text-h3-line: 1.05;
  --text-h3-tracking: -0.02em;
  --text-h5-size: 18px;
  --text-body-size: 16px;
  --text-body-line: 1.5;

  /* Space & shape */
  --radius-control: 10px;
  --radius-media: 15px;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--rr-near-black); }

a { color: inherit; text-underline-offset: 3px; }
a:hover { opacity: .8; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

img { max-width: 100%; }

.nw { white-space: nowrap; }

.tile__ctas-ok { display: contents; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Reveal animations — modelled on the main site's Squarespace "Slide"
   setting: 0.6s, ease, slide up + fade (body copy fades only), triggered
   at ~90% of the viewport. Only active when <html> has .js-reveal, which
   the head script adds unless the visitor prefers reduced motion — so
   with JS off or reduced motion everything is simply visible.
   - .intro         : hero/header, CSS-only, plays on first paint.
                      Order via style="--i:N".
   - [data-reveal]  : everything below, revealed on scroll by main.js.
                      Values: "" (slide), "fade", "media" (larger slide).
   Fill mode is "backwards" so that once finished, normal styles (e.g.
   hover opacity) apply again.
   -------------------------------------------------------------------------- */
@keyframes rr-reveal { from { opacity: 0; transform: translateY(var(--ry, 16px)); } }
@keyframes rr-reveal-fade { from { opacity: 0; } }

html.js-reveal .intro {
  animation: rr-reveal .6s ease backwards;
  animation-delay: calc(var(--i, 0) * 70ms + 80ms);
}

[data-reveal="media"] { --ry: 80px; }
html.js-reveal [data-reveal]:not(.is-in) { opacity: 0; }
html.js-reveal [data-reveal].is-in { animation: rr-reveal .6s ease var(--rd, 0ms) backwards; }
html.js-reveal [data-reveal="fade"].is-in { animation-name: rr-reveal-fade; }

@keyframes rr-word-in { from { opacity: 0; transform: translateY(.32em); } to { opacity: 1; transform: none; } }
@keyframes rr-word-out { to { opacity: 0; transform: translateY(-.32em); } }
@keyframes rr-stock-pulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(3); opacity: 0; } }

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

/* --------------------------------------------------------------------------
   4. Page root, theme, sale state
   -------------------------------------------------------------------------- */
.page {
  /* Theme: Yellow (default) */
  --accent: #FFCF07;
  --accent-contrast-text: var(--rr-near-black);
  --focus-ring: var(--accent);
  --stock-num: var(--rr-white);

  position: relative;
  container-type: inline-size;
  min-height: 100vh;
  background: var(--surface-page-dark);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  -webkit-font-smoothing: antialiased;
}

html[data-theme="blue"] .page {
  --accent: var(--rr-steel-blue);
  --accent-contrast-text: var(--rr-white);
}

/* Hero pill badge text colour follows the theme */
.pill .badge { color: var(--text-on-light); }
html[data-theme="blue"] .pill .badge { color: var(--rr-white); }
/* On light sections the pill is near-black, so its text is white
   ("Keep it simple") regardless of theme */
.sec--light .pill .badge { color: var(--rr-white); }

/* Live / Ended: only one state renders. Default (incl. no-JS) is Live. */
.state-ended { display: none; }
html[data-sale="ended"] .state-ended { display: block; }
html[data-sale="ended"] .state-live { display: none; }

/* Light sections swap the accent to near-black */
.sec--light {
  --accent: var(--rr-near-black);
  --accent-contrast-text: var(--rr-white);
  --focus-ring: var(--rr-near-black);
  background: var(--surface-page-light);
  color: var(--text-on-light);
}

/* Layout model, matching recoveryroomaustralia.com.au:
   - section divider lines run the full page width (.divider--bleed)
   - the header and footer run full width at a 4vw edge inset (.edge)
   - everything else sits in a capped, centred frame (.wrap)
   (The original handoff capped everything at 1160px.) */
.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: clamp(20px, 4cqi, 80px);
  padding-right: clamp(20px, 4cqi, 80px);
}

.edge {
  padding-left: clamp(20px, 4cqi, 80px);
  padding-right: clamp(20px, 4cqi, 80px);
}


/* Narrow/wide visibility (breakpoint 720px, matching the design's logic) */
@container (min-width: 720px) {
  .only-narrow { display: none !important; }
}
@container (max-width: 719.98px) {
  .only-wide { display: none !important; }
}

/* --------------------------------------------------------------------------
   5. Design-system primitives
   -------------------------------------------------------------------------- */

/* Badge — small uppercase Montserrat 600 meta label */
.badge {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
}
.badge--light { color: var(--rr-light-grey); }
/* Section eyebrows: CREDIT PACKS, UNLIMITED PASSES, SUNSHINE COAST */
.badge--eyebrow { font-size: 13px; }
.badge--onlight { color: var(--text-on-light); }

/* Accent pill chip wrapping a badge */
.pill {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  border-radius: var(--radius-control);
  padding: 7px 12px;
}

/* Button */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.4px;
  line-height: 1.2;
  letter-spacing: .05em;
  border-radius: var(--radius-control);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  text-align: center;
  transition: opacity .15s ease;
  border: none;
  box-shadow: none;
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast-text);
  padding: 16px 21px;
}
.btn--secondary {
  background: transparent;
  color: var(--rr-white);
  border: 1px solid var(--border-dark-button);
  padding: 15px 21px;
}
.btn--loc {
  background: var(--rr-near-black);
  color: var(--rr-white);
  border-color: var(--rr-white);
}
.btn:hover:not(:disabled) { opacity: .8; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:disabled:hover { opacity: .4; }

/* Column of full-width CTAs */
.stack-cta { display: flex; flex-direction: column; }
.stack-cta .btn { width: 100%; }

/* Divider */
.divider {
  border: none;
  border-top: 1px solid var(--rr-light-grey);
  margin: 0;
  width: 100%;
  opacity: .35;
}
/* Section rules that run the full page width (must outrank .divider's
   width/opacity, hence the compound selectors) */
.divider.divider--bleed {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100cqw;
}
.divider.divider--onlight { opacity: 1; }

/* CheckList */
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.checklist li { display: flex; align-items: flex-start; gap: 10px; }
.checklist svg { flex-shrink: 0; margin-top: 3px; }
.checklist span {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--text-on-light);
}

/* Input */
.field { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; }
.field__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-on-light);
}
.field__input {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  color: var(--text-on-light);
  background: var(--rr-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-control);
  padding: 14px 16px;
  outline: none;
  width: 100%;
}
.field__input:focus { border-color: var(--focus-ring); }
textarea.field__input { resize: vertical; min-height: 120px; }

/* Stock dot — static glow + slow pulse ring */
.dot { position: relative; display: inline-block; flex: none; width: 10px; height: 10px; }
.dot__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--dot, #2FD47A);
  animation: rr-stock-pulse var(--dot-speed, 2.4s) cubic-bezier(.2, .6, .3, 1) infinite;
}
.dot__core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--dot, #2FD47A);
  box-shadow: 0 0 10px 2px var(--dot-glow, transparent);
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
/* A copy of the recoveryroomaustralia.com.au header, measured from the live
   site (Nov 2026). Squarespace sizes it in vw, so this does too.
   - Desktop (900px+): logo | centred menu with dropdowns | Book Now button,
     1.4vw × 4vw padding. The logo + menu take 80% of the bar, the button
     area the rest, as on the main site.
   - Narrower: logo | menu icon, 6vw padding; the icon opens a full-screen
     menu. Logo 30px tall below 768px, 40px above.
   - Both: 1px #4F4F4F line underneath, static (it scrolls away with the
     page; the main site's hide-on-scroll is deliberately not copied).
   The main site wraps its menu onto two lines between ~800 and 899px; this
   page uses the phone layout there instead. */
.rh {
  --rh-fs: min(14.4px, calc(16px - .12vw));
  --rh-grey: #8E8E8E;
  --rh-light: #DCDCDC;
  position: relative;
  z-index: 3;
  background: var(--surface-page-dark);
  color: var(--rr-white);
}
.rh a:hover { opacity: 1; }
/* The underline sits inside the bar's height, as on the main site */
.rh__bar {
  display: flex;
  align-items: center;
  padding: 6vw;
  box-shadow: inset 0 -1px 0 #4F4F4F;
}
.rh__titlenav { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.rh__title { flex: 1 1 auto; }
.rh__logo { display: inline-block; vertical-align: top; }
.rh__logo img { display: block; height: 30px; width: auto; max-width: none; }
.rh__nav,
.rh__book { display: none; }
.rh__actions { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; }

/* Menu / close icons: the main site's own SVGs (29×30, right-aligned in a
   47×30 button). On the main site the close X is black on the black menu,
   so effectively invisible; here it's the same off-white as the menu icon. */
.rh__burger,
.rh-menu__close {
  position: relative;
  display: block;
  width: 47px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: #FAFAFA;
  cursor: pointer;
}
.rh__burger::before,
.rh-menu__close::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: var(--rh-icon) no-repeat 100% 50%;
  mask: var(--rh-icon) no-repeat 100% 50%;
}
.rh__burger { --rh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 30' width='29' height='30'%3E%3Cg stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'%3E%3Cpath d='M1.5 7.5h26M1.5 15.5h26M1.5 23.5h26'/%3E%3C/g%3E%3C/svg%3E"); }
.rh-menu__close { --rh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 30' width='29' height='30'%3E%3Cg stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'%3E%3Cpath d='M6.308 7.307 22.57 23.571M6.308 23.693 22.57 7.429'/%3E%3C/g%3E%3C/svg%3E"); }

/* Phones (where the hero photo shows): the header is see-through over the
   photo, with no underline */
@container (max-width: 719.98px) {
  .rh { background: transparent; }
  .rh__bar { box-shadow: none; }
}

@container (min-width: 768px) {
  .rh__logo img { height: 40px; }
}

/* Desktop bar */
@container (min-width: 900px) {
  .rh__bar { padding: 1.4vw 4vw; }
  .rh__titlenav { flex: 0 0 80%; }
  .rh__title { flex: 1 1 33%; }
  .rh__nav { display: block; flex: 1 1 90%; min-width: 0; text-align: center; }
  .rh__actions { flex: 1 1 auto; min-width: 0; }
  .rh__burger { display: none; }
  .rh__book { display: inline-block; }
}
.rh__navlist {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rh__item { position: relative; margin: 0 1vw; }
.rh__item > a,
.rh__folder-btn {
  display: block;
  padding: .1em 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: var(--rh-fs);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--rr-white);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .12s;
}
.rh__folder-btn { position: relative; padding-right: 1em; }
.rh__folder-btn::after { content: "▾"; position: absolute; top: .1em; right: 0; }
.rh__item > a:hover,
.rh__folder:hover .rh__folder-btn,
.rh__folder.is-open .rh__folder-btn { color: var(--rh-grey); }

/* Dropdowns: open on hover, keyboard focus, or a tap (main.js) */
.rh__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  margin: 0;
  padding: 0 16px;
  list-style: none;
  text-align: left;
  white-space: nowrap;
  background: rgba(26, 26, 26, .97);
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s, visibility 0s .12s;
}
.rh__folder:hover .rh__dropdown,
.rh__folder:focus-within .rh__dropdown,
.rh__folder.is-open .rh__dropdown { opacity: 1; visibility: visible; transition: opacity .12s; }
.rh__dropdown a {
  display: block;
  padding: 9.6px 0;
  font-family: var(--font-body);
  font-size: var(--rh-fs);
  line-height: 1.3;
  color: var(--rr-white);
  text-decoration: none;
  transition: color .12s;
}
.rh__dropdown a:hover { color: var(--rh-grey); }

.rh__book {
  padding: 16px 20.8px;
  border: 2px solid var(--rh-light);
  border-radius: 10px;
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--rh-fs);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;
  color: var(--rh-light);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .1s linear, color .1s linear;
}
.rh__book:hover { background-color: var(--rh-light); color: #000; }

/* Phone menu (a <dialog>, so it sits above everything) */
html.rh-lock { overflow: hidden; }
.rh-menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
  color: var(--rr-white);
  flex-direction: column;
  opacity: 0;
  transition: opacity .4s cubic-bezier(.4, 0, .2, 1);
}
.rh-menu[open] { display: flex; }
.rh-menu.is-open { opacity: 1; }
.rh-menu::backdrop { background: transparent; }
.rh-menu__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6vw;
}
.rh-menu__nav { position: relative; flex: 1 1 auto; overflow: hidden; }
.rh-menu__panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1), visibility 0s .6s;
}
.rh-menu__panel.is-active { transform: none; visibility: visible; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.rh-menu__panel.is-left { transform: translateX(-100%); }
.rh-menu__panel ul { margin: 0; padding: 0; list-style: none; }
.rh-menu__panel li { padding: 0 15px; }
.rh-menu__link,
.rh-menu__back {
  display: inline-flex;
  align-items: center;
  margin: 3vw 5vw;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  text-align: left;
  color: var(--rr-white);
  text-decoration: none;
  cursor: pointer;
}
.rh-menu__back { margin: 3vw calc(15px + 5vw) calc(3vw + 10px); padding: 0 10px; }
.rh-chev {
  flex: none;
  width: 1em;
  height: 1em;
  margin-left: .15em;
  fill: none;
  stroke: var(--rh-light);
  stroke-width: .5px;
  transform: rotate(-90deg);
}
.rh-chev--back { margin: 0 .15em 0 0; transform: rotate(90deg); }
.rh-menu__cta { flex: none; padding: 15px 6vw 6vw; }
.rh-menu__book {
  display: inline-block;
  min-width: 210px;
  padding: 16px 20.8px;
  border: 2px solid var(--rh-light);
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;
  text-align: center;
  color: var(--rh-light);
  text-decoration: none;
}
@container (min-width: 900px) {
  .rh-menu { display: none !important; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero-bg {
  position: absolute;
  /* runs up behind the header, which is see-through on phones */
  top: 0;
  left: 0;
  right: 0;
  height: max(720px, 150cqi);
  overflow: hidden;
  pointer-events: none;
}
.hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}
.hero-bg__tint { position: absolute; inset: 0; background: rgba(10, 10, 10, .1); }
.hero-bg__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 43%;
  background: linear-gradient(to bottom,
    rgba(10,10,10,0) 0%, rgba(10,10,10,.3) 10%, rgba(10,10,10,.56) 22%,
    rgba(10,10,10,.78) 40%, rgba(10,10,10,.93) 65%, var(--surface-page-dark) 100%);
}
@container (min-width: 720px) {
  .hero-bg { display: none; }
}

.hero {
  position: relative;
  padding-top: clamp(16px, 3cqi, 40px);
  padding-bottom: clamp(56px, 8cqi, 104px);
}
.hero__cols { display: flex; flex-wrap: wrap; gap: clamp(36px, 5cqi, 72px); }
.hero__main {
  flex: 1.15 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero__top { display: flex; flex-direction: column; align-items: flex-start; }
@container (max-width: 719.98px) {
  /* Phones: the pill/headline/tagline start closer to the header */
  .hero { padding-top: 6px; }
  /* On narrow screens the headline block fills the photo area so "Save up to"
     lands on the gradient (0.645 of the photo height, minus the header
     (6vw + 30px logo + 6vw), the 6px above and the gap before "Save up to";
     the photo starts at the very top) */
  .hero__top {
    min-height: calc(max(720px, 150cqi) * 0.645 - (12vw + 30px) - 6px - clamp(28px, 4cqi, 48px));
  }
}
.hero__h1 {
  margin: clamp(20px, 2.6cqi, 28px) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 6.4cqi, 76px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-on-dark-heading);
  max-width: 9em;
  text-wrap: balance;
}
.hero__tag {
  margin: clamp(16px, 2cqi, 24px) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 6.8cqi, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: rgba(250, 250, 250, .8);
}
/* Phones: pill, "Black Friday" and the tagline sit a little closer */
@container (max-width: 719.98px) {
  .hero__h1 { margin-top: 14px; }
  .hero__tag { margin-top: 10px; }
}
.hero__tag-line { display: block; white-space: nowrap; }
.tagword {
  position: relative;
  display: inline-block;
  transition: width .5s cubic-bezier(.2, .7, .2, 1);
  white-space: nowrap;
  color: var(--rr-off-white);
}
.tagword__measure { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; }
.tagword__word { display: inline-block; animation: rr-word-in .5s cubic-bezier(.2, .7, .2, 1) both; }
.tagword__word.is-out { animation: rr-word-out .28s cubic-bezier(.4, 0, 1, 1) forwards; }

.hero__save {
  margin: clamp(28px, 4cqi, 48px) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-on-dark-heading);
}
.hero__save-lead { display: block; font-size: clamp(26px, 3cqi, 34px); line-height: 1.15; }
.hero__save-pct {
  display: block;
  font-weight: 300;
  font-size: clamp(128px, 18cqi, 200px);
  line-height: .88;
  margin-left: -0.05em;
}
.hero__ends {
  margin: clamp(12px, 1.6cqi, 16px) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2cqi, 24px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-on-dark-heading);
}
.hero__limited { margin: 8px 0 0; color: var(--text-muted-on-dark); }
.hero__cta {
  margin-top: clamp(24px, 3cqi, 32px);
  align-self: stretch;
  max-width: 360px;
}
.hero__plain { margin: 20px 0 0; }

/* Narrow-only quick nav */
.hero__nav {
  margin-top: 24px;
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.hero__nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border: 1px solid rgba(220, 220, 220, .35);
  border-radius: var(--radius-control);
  color: var(--text-on-dark);
  text-align: center;
  text-decoration: none;
}
.hero__nav-title {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--text-on-dark-heading);
}
.hero__nav-sub {
  font-size: min(13px, 3.25cqi);
  line-height: 1.45;
  white-space: nowrap;
  color: var(--text-muted-on-dark);
}

/* Wide-only hero extras */
.hero__wide-extra {
  margin-top: clamp(32px, 4cqi, 48px);
  align-self: stretch;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero__wide-extra p { margin: 0; }
.hero__wide-extra p:first-of-type { margin-top: 8px; }

/* Desktop: the text column stops growing at its content width (520px, the
   paragraph block) and the hero photo takes the rest of the row */
@container (min-width: 1000px) {
  .hero__main { max-width: 520px; }
}

.hero__media {
  flex: 1 1 380px;
  min-width: 0;
  min-height: clamp(240px, 52cqi, 440px);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--surface-panel);
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero__media .tint { position: absolute; inset: 0; background: rgba(10, 10, 10, .1); }

/* --------------------------------------------------------------------------
   8. Offers
   -------------------------------------------------------------------------- */
.offers-wrap { padding-bottom: clamp(64px, 9cqi, 120px); }
#black-friday-offers, #credit-packs, #unlimited-passes { outline: none; }

.offer-block--credits { padding-top: clamp(48px, 7cqi, 88px); }
.offer-block--passes { padding-top: clamp(64px, 9cqi, 112px); }
.offer-block--passes .offer-head { padding-top: clamp(40px, 6cqi, 72px); }

.offer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px clamp(32px, 6cqi, 96px);
}
.offer-head__title {
  flex: 1 1 300px;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.offer-head__title h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.2cqi, 34px);
  line-height: var(--text-h3-line);
  letter-spacing: var(--text-h3-tracking);
  color: var(--text-on-dark-heading);
}
.offer-head__copy {
  flex: 1 1 300px;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.offer-head__copy p { margin: 0; }
.offer-head__copy .muted { color: var(--text-muted-on-dark); }

/* Tile grid: 1 column, then 3 columns once the content area reaches 1000px
   (a 1088px-wide page, given the 4% side gutters). The offer heading above
   each grid switches at the same point so its columns line up with the tiles:
   title over tile 1, first paragraph over tile 2, second over tile 3. */
.tile-grid {
  margin-top: clamp(36px, 4.5cqi, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px 24px;
}
@container (min-width: 1088px) {
  .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Row 1: the small label. Row 2: the heading and both paragraphs, so the
     paragraphs start level with the heading. The row gap matches the
     label-to-heading gap used on smaller screens. */
  .offer-head {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 24px;
    align-items: start;
  }
  .offer-head__title,
  .offer-head__copy { display: contents; }
  .offer-head__title .badge { grid-column: 1; grid-row: 1; justify-self: start; }
  .offer-head__title h3 { grid-column: 1; grid-row: 2; }
  .offer-head__copy p { grid-row: 2; padding-right: 32px; }
  .offer-head__copy p:first-child { grid-column: 2; }
  .offer-head__copy p:last-child { grid-column: 3; }
}

/* ----- The pricing tile (one reusable component, four stock states) ----- */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-panel);
  border-radius: var(--radius-control);
  /* default stock state: Available */
  --dot: #2FD47A;
  --dot-glow: rgba(47, 212, 122, .6);
  --dot-speed: 2.4s;
}
.tile--featured { border: 2px solid var(--accent); }
.tile__flag {
  position: absolute;
  top: -14px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  background: var(--rr-off-white);
  border-radius: var(--radius-control);
  padding: 6px 10px;
}
.tile__head { padding: 18px 24px; border-bottom: 1px solid rgba(220, 220, 220, .16); }
.tile--featured .tile__head {
  background: var(--accent);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}
.tile__name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-on-dark);
}
.tile--featured .tile__name { color: var(--accent-contrast-text); }

.tile__body {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr));
  grid-template-rows: auto 1fr;
  column-gap: 40px;
  padding: 24px;
}
.tile__pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 24px;
}
.tile__price {
  margin: 0;
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-on-dark-heading);
}
.tile__was { margin: 10px 0 0; font-size: 20px; line-height: 1.3; color: var(--text-muted-on-dark); }
.tile__was span { color: var(--text-on-dark); }
.tile__save {
  margin: 16px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--rr-white);
  border-radius: var(--radius-control);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tile__per { margin: 16px 0 0; }
.tile__per--pass { display: flex; flex-direction: column; }
.tile__per--pass .lead { font-size: 13px; line-height: 1.4; color: var(--text-muted-on-dark); }

.tile__stockbox {
  align-self: stretch;
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--rr-near-black);
  border-radius: var(--radius-control);
  display: flex;
  flex-direction: column;
}
.tile__stockbox p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 5px;
  font-size: 17px;
  line-height: 1.25;
  color: var(--text-on-dark);
}
.tile__stockbox .num { font-weight: 700; color: var(--stock-num, var(--rr-white)); }
.tile__stockbox .tile__stock-out { display: none; }

.tile__level {
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-on-dark);
}
.tile__level .lv { display: none; }
.tile__level .lv--available { display: inline; }

.tile__meta { display: flex; flex-direction: column; }
.tile__meta > p { margin: 0; }
.tile__note { margin: 2px 0 0 !important; font-size: 14px; color: var(--text-muted-on-dark); }
.tile__ctas {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tile__ctas .btn { width: 100%; }
.tile__ctas-out { display: none; }

/* ----- Stock state machine (driven by data-stock-* on <html>) ----- */

/* Running low */
html[data-stock-c10="running-low"] [data-item="c10"],
html[data-stock-c15="running-low"] [data-item="c15"],
html[data-stock-c30="running-low"] [data-item="c30"],
html[data-stock-p3="running-low"]  [data-item="p3"],
html[data-stock-p6="running-low"]  [data-item="p6"],
html[data-stock-p12="running-low"] [data-item="p12"] {
  --dot: #FF9124;
  --dot-glow: rgba(255, 145, 36, .6);
  --dot-speed: 1.9s;
}
html[data-stock-c10="running-low"] [data-item="c10"] .lv--available,
html[data-stock-c15="running-low"] [data-item="c15"] .lv--available,
html[data-stock-c30="running-low"] [data-item="c30"] .lv--available,
html[data-stock-p3="running-low"]  [data-item="p3"]  .lv--available,
html[data-stock-p6="running-low"]  [data-item="p6"]  .lv--available,
html[data-stock-p12="running-low"] [data-item="p12"] .lv--available { display: none; }
html[data-stock-c10="running-low"] [data-item="c10"] .lv--running-low,
html[data-stock-c15="running-low"] [data-item="c15"] .lv--running-low,
html[data-stock-c30="running-low"] [data-item="c30"] .lv--running-low,
html[data-stock-p3="running-low"]  [data-item="p3"]  .lv--running-low,
html[data-stock-p6="running-low"]  [data-item="p6"]  .lv--running-low,
html[data-stock-p12="running-low"] [data-item="p12"] .lv--running-low { display: inline; }

/* Almost sold out */
html[data-stock-c10="almost-sold-out"] [data-item="c10"],
html[data-stock-c15="almost-sold-out"] [data-item="c15"],
html[data-stock-c30="almost-sold-out"] [data-item="c30"],
html[data-stock-p3="almost-sold-out"]  [data-item="p3"],
html[data-stock-p6="almost-sold-out"]  [data-item="p6"],
html[data-stock-p12="almost-sold-out"] [data-item="p12"] {
  --dot: #FF4D42;
  --dot-glow: rgba(255, 77, 66, .65);
  --dot-speed: 1.4s;
}
html[data-stock-c10="almost-sold-out"] [data-item="c10"] .lv--available,
html[data-stock-c15="almost-sold-out"] [data-item="c15"] .lv--available,
html[data-stock-c30="almost-sold-out"] [data-item="c30"] .lv--available,
html[data-stock-p3="almost-sold-out"]  [data-item="p3"]  .lv--available,
html[data-stock-p6="almost-sold-out"]  [data-item="p6"]  .lv--available,
html[data-stock-p12="almost-sold-out"] [data-item="p12"] .lv--available { display: none; }
html[data-stock-c10="almost-sold-out"] [data-item="c10"] .lv--almost-sold-out,
html[data-stock-c15="almost-sold-out"] [data-item="c15"] .lv--almost-sold-out,
html[data-stock-c30="almost-sold-out"] [data-item="c30"] .lv--almost-sold-out,
html[data-stock-p3="almost-sold-out"]  [data-item="p3"]  .lv--almost-sold-out,
html[data-stock-p6="almost-sold-out"]  [data-item="p6"]  .lv--almost-sold-out,
html[data-stock-p12="almost-sold-out"] [data-item="p12"] .lv--almost-sold-out { display: inline; }

/* Sold out */
html[data-stock-c10="sold-out"] [data-item="c10"],
html[data-stock-c15="sold-out"] [data-item="c15"],
html[data-stock-c30="sold-out"] [data-item="c30"],
html[data-stock-p3="sold-out"]  [data-item="p3"],
html[data-stock-p6="sold-out"]  [data-item="p6"],
html[data-stock-p12="sold-out"] [data-item="p12"] {
  --dot: #8E8E8E;
  --dot-glow: transparent;
  filter: grayscale(1) opacity(.75);
}
html[data-stock-c10="sold-out"] [data-item="c10"] .dot__pulse,
html[data-stock-c15="sold-out"] [data-item="c15"] .dot__pulse,
html[data-stock-c30="sold-out"] [data-item="c30"] .dot__pulse,
html[data-stock-p3="sold-out"]  [data-item="p3"]  .dot__pulse,
html[data-stock-p6="sold-out"]  [data-item="p6"]  .dot__pulse,
html[data-stock-p12="sold-out"] [data-item="p12"] .dot__pulse { display: none; }
html[data-stock-c10="sold-out"] [data-item="c10"] .lv--available,
html[data-stock-c15="sold-out"] [data-item="c15"] .lv--available,
html[data-stock-c30="sold-out"] [data-item="c30"] .lv--available,
html[data-stock-p3="sold-out"]  [data-item="p3"]  .lv--available,
html[data-stock-p6="sold-out"]  [data-item="p6"]  .lv--available,
html[data-stock-p12="sold-out"] [data-item="p12"] .lv--available { display: none; }
html[data-stock-c10="sold-out"] [data-item="c10"] .lv--sold-out,
html[data-stock-c15="sold-out"] [data-item="c15"] .lv--sold-out,
html[data-stock-c30="sold-out"] [data-item="c30"] .lv--sold-out,
html[data-stock-p3="sold-out"]  [data-item="p3"]  .lv--sold-out,
html[data-stock-p6="sold-out"]  [data-item="p6"]  .lv--sold-out,
html[data-stock-p12="sold-out"] [data-item="p12"] .lv--sold-out { display: inline; }
html[data-stock-c10="sold-out"] [data-item="c10"] .tile__stock-ok,
html[data-stock-c15="sold-out"] [data-item="c15"] .tile__stock-ok,
html[data-stock-c30="sold-out"] [data-item="c30"] .tile__stock-ok,
html[data-stock-p3="sold-out"]  [data-item="p3"]  .tile__stock-ok,
html[data-stock-p6="sold-out"]  [data-item="p6"]  .tile__stock-ok,
html[data-stock-p12="sold-out"] [data-item="p12"] .tile__stock-ok { display: none; }
html[data-stock-c10="sold-out"] [data-item="c10"] .tile__stock-out,
html[data-stock-c15="sold-out"] [data-item="c15"] .tile__stock-out,
html[data-stock-c30="sold-out"] [data-item="c30"] .tile__stock-out,
html[data-stock-p3="sold-out"]  [data-item="p3"]  .tile__stock-out,
html[data-stock-p6="sold-out"]  [data-item="p6"]  .tile__stock-out,
html[data-stock-p12="sold-out"] [data-item="p12"] .tile__stock-out { display: flex; }
html[data-stock-c10="sold-out"] [data-item="c10"] .tile__ctas-ok,
html[data-stock-c15="sold-out"] [data-item="c15"] .tile__ctas-ok,
html[data-stock-c30="sold-out"] [data-item="c30"] .tile__ctas-ok,
html[data-stock-p3="sold-out"]  [data-item="p3"]  .tile__ctas-ok,
html[data-stock-p6="sold-out"]  [data-item="p6"]  .tile__ctas-ok,
html[data-stock-p12="sold-out"] [data-item="p12"] .tile__ctas-ok { display: none; }
html[data-stock-c10="sold-out"] [data-item="c10"] .tile__ctas-out,
html[data-stock-c15="sold-out"] [data-item="c15"] .tile__ctas-out,
html[data-stock-c30="sold-out"] [data-item="c30"] .tile__ctas-out,
html[data-stock-p3="sold-out"]  [data-item="p3"]  .tile__ctas-out,
html[data-stock-p6="sold-out"]  [data-item="p6"]  .tile__ctas-out,
html[data-stock-p12="sold-out"] [data-item="p12"] .tile__ctas-out { display: contents; }

/* Notes under the tile grids */
.grid-note { margin: clamp(24px, 3.5cqi, 32px) 0 0; font-size: 14px; color: var(--text-muted-on-dark); }
.grid-notes {
  margin-top: clamp(24px, 3.5cqi, 32px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: var(--text-muted-on-dark);
}
.grid-notes p { margin: 0; }

/* Narrow-only "sale is live" block after the passes */
.live-note { margin-top: 56px; display: flex; flex-direction: column; gap: 16px; }
.live-note p { margin: 8px 0 0; }

/* --------------------------------------------------------------------------
   9. Disclosures (How credits work / Terms) and FAQ
   -------------------------------------------------------------------------- */
.disclosure {
  margin-top: clamp(28px, 4cqi, 40px);
  border: 1px solid rgba(220, 220, 220, .35);
  border-radius: var(--radius-control);
}
.disclosure--terms { margin-top: 0; }
.disclosure h2, .disclosure h4 { margin: 0; }
.disclosure__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 18px clamp(20px, 3cqi, 32px);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h5-size);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-on-dark-heading);
  transition: opacity .15s ease;
}
.disclosure__btn:hover { opacity: .8; }
.disclosure__btn .chev { flex: none; color: var(--rr-white); transition: transform .3s ease; }
.disclosure__btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.disclosure__panel {
  padding: 0 clamp(20px, 3cqi, 32px) clamp(20px, 3cqi, 32px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.disclosure__panel[hidden] { display: none; }

.credits-dl { margin: 0; display: flex; flex-direction: column; }
.credits-dl > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(220, 220, 220, .16);
}
.credits-dl > div:last-child { border-bottom: 1px solid rgba(220, 220, 220, .16); }
.credits-dl dt {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-on-dark-heading);
}
.credits-dl dd { margin: 0; }
.credits-copy { display: flex; flex-direction: column; gap: 8px; }
.credits-copy p { margin: 0; }
.credits-copy .fine { font-size: 14px; color: var(--text-muted-on-dark); }
.credits-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -8px 0 -10px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
}

/* Terms panel */
.terms-sec { padding-top: clamp(48px, 7cqi, 88px); padding-bottom: clamp(48px, 7cqi, 88px); }
.terms-panel {
  max-width: 780px;
  padding: 0 clamp(20px, 3cqi, 32px) clamp(20px, 3cqi, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted-on-dark);
}
.terms-panel[hidden] { display: none; }
.terms-panel p { margin: 0; }
.terms-panel ul { list-style: none; margin: 4px 0 0; padding: 0; }

/* FAQ */
.faq { padding-top: clamp(64px, 9cqi, 120px); padding-bottom: clamp(64px, 9cqi, 120px); }
.faq__cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px clamp(32px, 6cqi, 96px);
}
.faq__cols > h2 {
  flex: 1 1 240px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4cqi, 40px);
  line-height: var(--text-h2-line);
  letter-spacing: var(--text-h2-tracking);
}
.faq__list { flex: 2.4 1 420px; max-width: 720px; border-bottom: 1px solid var(--border-light); }
.faq-item { border-top: 1px solid var(--border-light); }
.faq-item h3 { margin: 0; }
.faq-item__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 68px;
  padding: 18px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(17px, 1.9cqi, 20px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-on-light);
  transition: opacity .15s ease;
}
.faq-item__btn:hover { opacity: .8; }
.faq-item__btn .chev { flex: none; color: var(--accent); transition: transform .3s ease; }
.faq-item__btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.faq-item__panel {
  padding: 0 44px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-item__panel[hidden] { display: none; }
.faq-item__panel p, .faq-item__panel ul { margin: 0; }
.faq-item__panel ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.faq-item__panel .yes-no { color: var(--accent); }

/* --------------------------------------------------------------------------
   10. Guide ("Not sure which one to choose?") and "Why buy now" — wide only
   -------------------------------------------------------------------------- */
.guide { padding-top: clamp(64px, 9cqi, 120px); padding-bottom: clamp(64px, 9cqi, 120px); }
.guide__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.guide__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4cqi, 40px);
  line-height: var(--text-h2-line);
  letter-spacing: var(--text-h2-tracking);
  text-wrap: balance;
}
.guide__grid {
  margin-top: clamp(32px, 4.5cqi, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 24px;
}
.guide-card {
  display: flex;
  flex-direction: column;
  background: var(--rr-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-control);
  padding: clamp(24px, 3.6cqi, 40px);
}
.guide-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.8cqi, 30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.guide-card__lead {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-on-light);
}
.guide-card__copy { margin: 10px 0 0; max-width: 46ch; }
.guide-card__best { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.guide-card__cta { margin-top: auto; padding-top: 32px; max-width: 320px; }

.why { padding-top: clamp(64px, 9cqi, 120px); padding-bottom: clamp(64px, 9cqi, 120px); }
.why__cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px clamp(32px, 6cqi, 96px);
}
.why__cols h2 {
  flex: 1 1 300px;
  max-width: 520px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4cqi, 40px);
  line-height: var(--text-h2-line);
  letter-spacing: var(--text-h2-tracking);
  color: var(--text-on-dark-heading);
  text-wrap: balance;
}
.why__copy { flex: 1 1 300px; max-width: 520px; display: flex; flex-direction: column; gap: 16px; }
.why__copy p { margin: 0; }
.why__lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-on-dark-heading);
}

/* --------------------------------------------------------------------------
   11. Locations
   -------------------------------------------------------------------------- */
.locations { padding-bottom: clamp(64px, 9cqi, 120px); }
.locations__head {
  padding-top: clamp(48px, 7cqi, 88px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.locations__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4cqi, 40px);
  line-height: var(--text-h2-line);
  letter-spacing: var(--text-h2-tracking);
  color: var(--text-on-dark-heading);
}
.locations__grid {
  margin-top: clamp(32px, 4.5cqi, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 48px 24px;
}
.location { display: flex; flex-direction: column; gap: 20px; }
.location h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.8cqi, 30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-on-dark-heading);
}
.location__addr { margin: -8px 0 0; }
.location__photo {
  margin-top: 4px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-media);
  background: var(--surface-panel);
}
.location__photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.location__photo .tint { position: absolute; inset: 0; background: rgba(10, 10, 10, .1); }

/* --------------------------------------------------------------------------
   12. Contact
   -------------------------------------------------------------------------- */
.contact { padding-bottom: clamp(64px, 9cqi, 120px); }
.contact__inner {
  padding-top: clamp(48px, 7cqi, 88px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px clamp(32px, 6cqi, 96px);
}
.contact__intro { flex: 1 1 240px; display: flex; flex-direction: column; gap: 12px; }
.contact__intro h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4cqi, 40px);
  line-height: var(--text-h2-line);
  letter-spacing: var(--text-h2-tracking);
  text-wrap: balance;
}
.contact__intro p { margin: 0; max-width: 30ch; }
.contact__phones {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Icon beside the facility name; the number sits underneath, lined up
   with the name rather than the icon */
.contact__phone {
  display: grid;
  grid-template-columns: 18px auto;
  justify-content: start;
  align-items: center;
  column-gap: 10px;
  row-gap: 4px;
}
.contact__phone-icon { grid-column: 1; grid-row: 1; display: block; }
.contact__phone-name { grid-column: 2; grid-row: 1; font-weight: 600; }
.contact__phone-num {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  white-space: nowrap;
  text-decoration-thickness: 1px;
}
.contact__form { flex: 2.4 1 420px; max-width: 720px; display: flex; flex-direction: column; gap: 16px; }
.contact__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}
.contact__send { margin-top: 8px; display: flex; }
/* Spam trap for bots: kept off-screen rather than display:none, which
   some bots skip */
.contact__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact__status p { margin: 0; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
/* Mirrors the recoveryroomaustralia.com.au footer (measured from the live
   homepage), with the column headings in the landing page accent colour
   instead of the main site's blue. Mobile/tablet: logo + social row, tagline,
   then two columns. Desktop (1000px+): the main site's 24-column placement —
   Links at column 8, Hours at 12, Locations at 17 (Kawana Waters at 20). */
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  align-items: start;
  padding-top: 72px;
  padding-bottom: 56px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--rr-white);
}
.site-footer__grid p { margin: 0; }
.site-footer__grid a { color: var(--rr-light-grey); text-decoration: none; }

.sf-brand {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  row-gap: 22px;
  margin-bottom: 48px;
}
.sf-logo { display: inline-flex; grid-column: 1; grid-row: 1; }
.sf-logo img { display: block; width: 210px; height: auto; }
.sf-social { grid-column: 2; grid-row: 1; justify-self: end; display: flex; gap: 14px; }
.sf-tagline { grid-column: 1 / -1; grid-row: 2; }
.sf-social a { display: inline-flex; width: 24px; height: 24px; color: var(--rr-white) !important; }
.sf-social svg { width: 24px; height: 24px; fill: currentColor; }

.sf-heading {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.sf-links { grid-column: 1; grid-row: 2; }
.sf-links ul { list-style: none; margin: 0; padding: 0; }
.sf-hours { grid-column: 1; grid-row: 3; margin-top: 40px; }
.sf-hours p + p { margin-top: 1.5em; }
.sf-locations { grid-column: 2; grid-row: 2 / span 2; }
.sf-loc + .sf-loc { margin-top: 22px; }
.sf-loc p + p { margin-top: 1em; }
.sf-loc strong { color: var(--rr-light-grey); }

@container (min-width: 1000px) {
  .site-footer__grid {
    grid-template-columns: repeat(24, minmax(0, 1fr));
    gap: 0;
    padding-top: 61px;
    padding-bottom: 63px;
    font-size: 14.27px;
  }
  /* Desktop order as on the main site: logo, tagline, social icons */
  .sf-brand {
    grid-column: 1 / span 7;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 9px 0 0;
  }
  .sf-logo { order: 1; }
  .sf-brand .sf-tagline { order: 2; margin-top: 25px; }
  .sf-social { order: 3; margin-top: 34px; }
  .sf-heading { font-size: 22.72px; margin-bottom: 33px; }
  .sf-links { grid-column: 8 / span 4; grid-row: 1; }
  .sf-hours { grid-column: 12 / span 5; grid-row: 1; margin-top: 0; }
  .sf-locations {
    grid-column: 17 / span 8;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .sf-locations .sf-heading { grid-column: 1 / -1; }
  .sf-loc--sippy { grid-column: 1 / span 3; }
  .sf-loc--kawana { grid-column: 4 / span 5; }
  .sf-loc + .sf-loc { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   14. Ended state
   -------------------------------------------------------------------------- */
.ended-band {
  background: var(--surface-page-dark);
  color: var(--text-on-dark);
  position: relative;
  width: 100%;
  padding: clamp(72px, 11cqi, 128px) clamp(20px, 5cqi, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.ended-band__inner {
  position: relative;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.ended-band h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5cqi, 56px);
  line-height: var(--text-h1-line);
  letter-spacing: var(--text-h1-tracking);
  color: var(--text-on-dark-heading);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   15. Location modal
   -------------------------------------------------------------------------- */
.loc-modal {
  /* Must stay fixed (the browser default for modal dialogs): anything else
     anchors it to the top of the document and opening it scrolls the page up */
  position: fixed;
  width: min(400px, calc(100% - 40px));
  padding: 32px 24px 24px;
  background: var(--surface-panel);
  border: 1px solid rgba(220, 220, 220, .2);
  border-radius: var(--radius-control);
  color: var(--text-on-dark);
}
.loc-modal::backdrop { background: rgba(0, 0, 0, .72); }
.loc-modal__body { display: flex; flex-direction: column; gap: 10px; }
.loc-modal h2 {
  margin: 0;
  padding-right: 40px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-on-dark-heading);
}
.loc-modal__text { margin: 0 0 14px; color: var(--text-muted-on-dark); }
.loc-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-on-dark);
  cursor: pointer;
}
.loc-modal__close:hover { opacity: .8; }

/* --------------------------------------------------------------------------
   16. Sticky dock + toast (narrow, live only)
   -------------------------------------------------------------------------- */
.dock-spacer { height: 76px; }
/* .dock-wrap .dock must outrank the later .dock { display:flex } rule */
@container (min-width: 720px) {
  .dock-spacer, .dock-wrap .dock { display: none; }
}

.dock-wrap { position: sticky; bottom: 0; height: 0; z-index: 50; }
.dock-wrap__inner {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  /* The dock hides by sliding down; clip it so the hidden dock doesn't add
     empty scroll space below the footer */
  overflow: hidden;
  overflow: clip;
}
.toast {
  pointer-events: auto;
  max-width: min(calc(100% - 40px), 440px);
  margin-bottom: 12px;
  padding: 12px 16px;
  background: var(--surface-panel);
  border: 1px solid rgba(220, 220, 220, .35);
  border-radius: var(--radius-control);
  color: var(--text-on-dark);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  visibility: hidden;
}
.toast.is-on { visibility: visible; }
.dock {
  pointer-events: auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface-page-dark);
  border-top: 1px solid rgba(220, 220, 220, .2);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .3s ease, visibility .3s ease;
}
.dock.is-on { transform: translateY(0); visibility: visible; }
.dock .btn { width: 100%; }