/* ==========================================================================
   NEVER-LESS, main.css
   Mobile-first. Designed at 390px against a 650px-tall usable viewport, which
   is what a real iPhone in Safari shows once the URL bar and the toolbar have
   taken their cut. Scales up through a layout pass at 1024 and 1440.
   --------------------------------------------------------------------------
   PALETTE, derived from cold early-morning light, one warm accent.
     nightshift  #0A0D12  pre-dawn dark; the 5am walk to the gym. Page base.
     platform    #141922  bus-platform grey-blue. Raised surfaces.
     steel       #232B37  frame edges; the seam down the middle of every pair.
     frost       #93A6BA  cold window light. Secondary text. 7.4:1 on base.
     snow        #E9EDF2  blue-white daylight. Primary text. 16.5:1 on base.
     ember       #E0603F  the one warm thing. Clay-red, not saffron. CTA only.

   Ember appears two or three times per screen, never more. Radius is 2px and
   only on buttons and inputs. There are no shadows. Every border is 1px steel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS, self-hosted, instanced and subset. The latin-ext faces are gated
   behind unicode-range so they cost zero bytes unless an accented character
   actually renders (someone typing an accented name into the form).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  /* 700-900, matching the variable axis the font now actually carries. Only
     700/800/900 are ever used, and instancing away 100-699 took 40% off it. */
  font-weight: 700 900;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Palette */
  --nightshift: #0a0d12;
  --platform: #141922;
  --steel: #232b37;
  --frost: #93a6ba;
  --snow: #e9edf2;
  --ember: #e0603f;

  /* Derived */
  --sunk: #070a0e; /* below-base, for inset fields */
  --steel-soft: #1b222c;
  --ember-dim: #a8402c;

  /* Type stacks. The page is entirely in English; the Hinglish in the copy
     ("ghar ka khana", "paisa wasool") is written in Latin script, so no Indic
     face is needed. */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Fluid type scale. */
  --t-display-xl: clamp(2.4rem, 10.4vw, 5.5rem);
  --t-display-l: clamp(1.9rem, 7.2vw, 3.4rem);
  --t-display-m: clamp(1.45rem, 5.2vw, 2.1rem);
  --t-lead: clamp(1rem, 3.7vw, 1.2rem);
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  /* Rhythm */
  --section-y: clamp(2.75rem, 9vw, 6rem);
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --measure: 34rem;
  --wrap: 78rem;

  /* Motion. Reveals are 300ms with a ~40ms stagger, per the plan. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.3s;

  /* The seam, the 2px gap that splits every pair. */
  --seam: 2px;

  /* Grain, unifies phone photos shot in variable lighting. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. RESET / BASE
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 1rem;
}

body {
  background: var(--nightshift);
  color: var(--snow);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  /* Instagram's in-app browser injects chrome that can overlap content. */
  padding-bottom: env(safe-area-inset-bottom);
}

/* The application sheet locks the page behind it. */
html.sheet-open,
body.sheet-open {
  overflow: hidden;
}

/* Any `display` declaration beats the `hidden` attribute's UA `display: none`.
   Without this, every conditional form field and the progress bar stay on
   screen after being hidden, because .field/.form-progress set grid/flex. */
[hidden] {
  display: none !important;
}

img,
svg,
picture,
video {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--ember);
  color: var(--nightshift);
}

.skip-link {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  transform: translateY(-120%);
  background: var(--ember);
  color: var(--nightshift);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  z-index: 100;
}
.skip-link:focus {
  transform: translateY(0);
}

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

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

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

.section {
  padding-block: var(--section-y);
  position: relative;
}
/* Sections whose own content already carries a lot of vertical air (a rail, a
   ribbon) do not need the full step underneath as well. */
.section--tight {
  padding-block-end: calc(var(--section-y) * 0.6);
}

.measure {
  max-width: var(--measure);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 2px;
  background: currentColor;
  flex: none;
}
/* A second eyebrow inside one screen would spend the accent budget twice, so
   the quieter of the two drops to frost. */
.eyebrow--quiet {
  color: var(--frost);
}

.section-title {
  font-size: var(--t-display-l);
  margin-bottom: 1.15rem;
}

.section-intro {
  color: var(--frost);
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: var(--measure);
}

.footnote,
.disclaimer {
  font-size: var(--t-micro);
  color: var(--frost);
  line-height: 1.6;
  max-width: 44rem;
}
.footnote {
  margin-top: clamp(1.5rem, 5vw, 2rem);
  font-size: var(--t-small);
}
.disclaimer {
  margin-top: 1.5rem;
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   5. THE PAIR. Retired 2026-09-25. The scale receipt was its last user; every
   before/after on the page is now the comparison slider in section 8.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--ember);
  --btn-fg: var(--nightshift);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.375rem;
  padding: 0.9rem 1.65rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  border: 1px solid var(--btn-bg);
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s var(--ease-out), filter 0.18s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover {
  filter: brightness(1.08);
}
.btn:active {
  transform: scale(0.985);
}
.btn--block {
  display: flex;
  width: 100%;
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--snow);
  border-color: var(--steel);
}
.btn--ghost:hover {
  border-color: var(--frost);
  filter: none;
}
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn__arrow {
  transition: transform 0.25s var(--ease-out);
}
.btn:hover .btn__arrow {
  transform: translateX(3px);
}

.btn-note {
  font-size: var(--t-small);
  color: var(--frost);
  margin-top: 0.85rem;
}

/* --------------------------------------------------------------------------
   7. MASTHEAD + HERO

   The hero is the whole first screen: a muted vertical loop with the poster
   underneath it, the headline over the lower third, one button, one quiet
   link and a proof strip on the bottom edge.

   min-height is min(100svh, 44rem), not 100svh alone. The svh term is what
   makes it land exactly on a real phone; the 44rem cap is what stops the hero
   becoming a 900px void on a tall tablet, and it also keeps the layout sane
   inside a very tall iframe, which is how this page gets screenshotted.
   -------------------------------------------------------------------------- */

.masthead {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 20;
  padding-block: 1.05rem;
}

.logo {
  display: block;
  line-height: 0;
}
.logo img {
  width: clamp(8.5rem, 32vw, 12.5rem);
  height: auto;
}
.logo--footer img {
  width: clamp(10rem, 38vw, 12.5rem);
}

.hero {
  position: relative;
  min-height: min(100svh, 44rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--sunk);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--sunk);
}
.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(0.82) contrast(1.06) brightness(0.9);
}
/* The loop fades over the poster once it is actually playing. Until then it is
   not even fetched: preload="none" and scripts/main.js decides. */
.hero__video {
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.hero__video.is-playing {
  opacity: 1;
}
/* Bottom scrim down to the page background, so the headline sits on real
   nightshift rather than on a translucent panel. The top stop darkens just
   enough for the wordmark. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to top,
      var(--nightshift) 0%,
      rgb(10 13 18 / 0.96) 22%,
      rgb(10 13 18 / 0.82) 46%,
      rgb(10 13 18 / 0.38) 70%,
      rgb(10 13 18 / 0.5) 100%
    ),
    var(--grain);
  background-size: auto, 120px 120px;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block-end: 1.25rem;
  /* Transform only, so the text is painted and visible immediately. An
     opacity fade here would defer the LCP measurement by its own duration. */
  animation: hero-rise 0.6s var(--ease-out) 0.05s both;
}
@keyframes hero-rise {
  from {
    transform: translateY(14px);
  }
  to {
    transform: none;
  }
}

/* Two terms, and both earn their place. --t-display-xl is the page's own
   display step; the 8.6vw term is the LINE-BREAK budget, because the tagline
   is 49 characters and has to break as three lines on a 360px phone without
   orphaning "it." on a fourth. */
.hero__title {
  font-size: min(var(--t-display-xl), 8.6vw);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.94;
  max-width: 17ch;
  margin-bottom: 0.7rem;
  text-wrap: balance;
}
.hero__title .accent {
  color: var(--ember);
}

.hero__sub {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--frost);
  max-width: 30rem;
}

.hero__actions {
  margin-top: 1.35rem;
  max-width: 26rem;
}
.hero__secondary {
  margin-top: 0.9rem;
  font-size: var(--t-small);
  color: var(--frost);
  text-align: center;
}
.hero__secondary a {
  color: var(--frost);
  text-decoration: none;
  border-block-end: 1px solid var(--steel);
  padding-block-end: 2px;
  transition: color 0.16s var(--ease-out), border-color 0.16s var(--ease-out);
}
.hero__secondary a:hover {
  color: var(--snow);
  border-color: var(--frost);
}

/* The proof strip on the bottom edge. The two figures count up once, on first
   sight, which draws the eye to the credibility line without adding words. */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0.8rem 0 0;
  margin-top: 1.35rem;
  gap: 0.3rem 0.9rem;
  border-block-start: 1px solid var(--steel);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.625rem, 2.8vw, 0.75rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--frost);
  line-height: 1.2;
}
.hero__stats b {
  color: var(--snow);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   8. THE PROOF RAIL
   A native horizontal scroller at every width, snapping card to card. There
   is no desktop grid any more: about 1.15 cards on a phone, 2.3 on a tablet
   and 3.3 on a wide screen, so the next card is always visibly cut off and
   it is obvious there is more.

   The card sizes and the leading edge are worked out in cqi against the rail
   itself. The leading edge lines up with the headline above (the gutter on a
   phone, the wrap's edge on a wide screen) and the trailing edge bleeds to the
   viewport, which is what makes "there is more" read without a word.

   Touch, trackpad, shift-wheel and keyboard focus all move it natively.
   scripts/main.js adds mouse drag-to-scroll and the arrows.
   -------------------------------------------------------------------------- */

.rail {
  margin-top: clamp(1.75rem, 6vw, 2.5rem);
  container-type: inline-size;
  --rail-gap: 0.75rem;
  --rail-n: 1.15;
}

.rail__track {
  display: grid;
  grid-auto-flow: column;
  /* Fallback for anything without container query units. */
  grid-auto-columns: min(84%, 21rem);
  gap: var(--rail-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding-inline: var(--gutter);
  padding-block-end: 0.25rem;
  align-items: stretch;
}
@supports (width: 1cqi) {
  .rail__track {
    --rail-edge: max(var(--gutter), calc((100cqi - var(--wrap)) / 2 + var(--gutter)));
    grid-auto-columns: calc(
      (100cqi - var(--rail-edge) + var(--rail-gap)) / var(--rail-n) - var(--rail-gap)
    );
    scroll-padding-inline: var(--rail-edge);
    padding-inline: var(--rail-edge);
  }
}
.rail__track::-webkit-scrollbar {
  display: none;
}
@media (min-width: 48rem) {
  .rail {
    --rail-gap: 1rem;
    --rail-n: 2.3;
  }
}
@media (min-width: 64rem) {
  .rail {
    --rail-n: 3.3;
  }
}

/* A mouse can drag the rail (scripts/main.js). While it does, snapping is
   off so the track follows the pointer 1:1, and it is switched back on once
   the release has settled on a card. */
@media (hover: hover) and (pointer: fine) {
  .rail__track {
    cursor: grab;
  }
}
.rail__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
  -webkit-user-select: none;
}

.rail__card {
  scroll-snap-align: start;
  /* One swipe, one card. Without it a quick flick on a phone sails past two
     or three results and the reader never sees them. */
  scroll-snap-stop: always;
  border: 1px solid var(--steel);
  background: var(--platform);
  /* The meta row sizes itself against THIS box, not the viewport. At 1440 the
     viewport is wide but each card is only ~380px, and sizing that row in vw
     made the type jump to its maximum just as the card got narrow. */
  container-type: inline-size;
  min-width: 0;
}

/* Comparison slider. Used by the proof rail and by the story pair.

   THE TOUCH RULE. Only the round handle moves the seam. The frame is
   `manipulation`, which lets the browser pan in BOTH directions: a vertical
   swipe scrolls the page, a horizontal swipe scrolls the rail it sits in.
   It used to be `pan-y`, and because touch-action is intersected from the
   touched element up to the scroller, that switched the rail's horizontal
   pan off for any swipe that began on a photo. The rail could only be moved
   from the 12px gap between cards. The handle alone is `none`. */
.compare {
  position: relative;
  /* Portrait, because these are standing full-body shots cropped to the torso.
     A landscape frame would crop the very change the section exists to show. */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background: var(--steel-soft);
}
.compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  pointer-events: none;
}
.compare__after {
  clip-path: inset(0 0 0 var(--pos, 50%));
}
.compare::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: var(--grain);
  background-size: 120px 120px;
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.compare__seam {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--pos, 50%);
  width: var(--seam);
  background: var(--snow);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
}

.compare__handle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--pos, 50%);
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--snow);
  border: none;
  color: var(--nightshift);
  display: grid;
  place-items: center;
  cursor: ew-resize;
  /* The one element allowed to swallow the gesture. Everything else on the
     card pans natively, so neither a vertical flick nor a swipe along the
     rail is ever eaten by the slider. */
  touch-action: none;
  transition: transform 0.18s var(--ease-out);
}
/* A thumb is wider than 44px. The invisible ring takes the grab target to
   60px without drawing anything bigger. */
.compare__handle::before {
  content: '';
  position: absolute;
  inset: -0.5rem;
  border-radius: 50%;
}
.compare__handle:active {
  cursor: ew-resize;
  transform: translate(-50%, -50%) scale(1.08);
}
.compare__handle svg {
  width: 1.15rem;
  height: 1.15rem;
}

.compare__tag {
  position: absolute;
  inset-block-start: 0.75rem;
  z-index: 3;
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  background: rgb(10 13 18 / 0.78);
  border: 1px solid var(--steel);
  color: var(--frost);
}
.compare__tag--before {
  inset-inline-start: 0.75rem;
}
.compare__tag--after {
  inset-inline-end: 0.75rem;
  background: var(--ember);
  border-color: var(--ember);
  color: var(--nightshift);
}

/* One row under each photo. It has to hold ONE line down to a 320px phone.
   Sized in cqi, against the card rather than the viewport, so it tracks the
   box it actually has to fit inside. Anything longer than about 24 characters
   has to be solved in the copy, not in the type size. */
.rail__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.8rem clamp(0.65rem, 4cqi, 1.1rem);
  border-block-start: 1px solid var(--steel);
}
.rail__stat {
  font-family: var(--font-display);
  font-weight: 800;
  /* Plain value first, for anything without container query support: an
     unsupported unit invalidates the whole clamp(). */
  font-size: 0.9375rem;
  font-size: clamp(0.8125rem, 4.4cqi, 1.0625rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ember);
  white-space: nowrap;
  min-width: 0;
}

.rail__foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* One dot per card, built by scripts/main.js from the cards themselves. The
   visible mark is a 2px bar; the button around it is 44px tall so it can
   actually be tapped. Every card at least 60% on screen is lit, so on a wide
   screen three are lit at once, which says how much of the set is showing. */
.rail__dots {
  display: flex;
  flex-wrap: wrap;
}
.rail__dot {
  position: relative;
  width: 1.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rail__dot::before {
  content: '';
  position: absolute;
  inset-inline: 0.25rem;
  inset-block-start: calc(50% - 1px);
  height: 2px;
  background: var(--steel);
  transition: background-color 0.2s var(--ease-out);
}
.rail__dot[data-in-view='true']::before {
  background: var(--frost);
}
.rail__dot:hover::before {
  background: var(--snow);
}

/* Previous / next. From 768px up only: on a phone the thumb is the control
   and the hint says so. Hidden in the markup until scripts/main.js wires
   them, because with scripts off they would do nothing.

   They sit right beside the dots, on the left, not at the far end of the
   row: from 1024px up the sticky CTA floats in the bottom-right corner and
   covers anything parked there whenever the rail is low on the screen. */
.rail__arrows {
  display: none;
  gap: 0.5rem;
  margin-inline-start: 0.5rem;
}
.rail__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  color: var(--snow);
  border: 1px solid var(--steel);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.16s var(--ease-out), color 0.16s var(--ease-out),
    opacity 0.16s var(--ease-out);
}
.rail__arrow:hover:not([aria-disabled='true']) {
  border-color: var(--ember);
  color: var(--ember);
}
.rail__arrow[aria-disabled='true'] {
  opacity: 0.35;
  cursor: default;
}
@media (min-width: 48rem) {
  .rail__arrows {
    display: flex;
  }
  .rail__hint {
    display: none;
  }
}
.rail__hint {
  margin-inline-start: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--frost);
  transition: opacity 0.3s var(--ease-out);
}
.rail__hint::after {
  content: ' \2192';
  display: inline-block;
  animation: hint-nudge 1.9s var(--ease-in-out) infinite;
}
.rail__hint[data-done='true'] {
  opacity: 0;
}
@keyframes hint-nudge {
  0%,
  60%,
  100% {
    transform: none;
  }
  80% {
    transform: translateX(4px);
  }
}

/* --------------------------------------------------------------------------
   9. EXPANDING CARDS, "sound familiar" and "read more"
   Three cards instead of eleven bullets. One idea per card, the rest on tap.
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  gap: 0.6rem;
  margin-top: clamp(1.75rem, 6vw, 2.5rem);
}
.card {
  border: 1px solid var(--steel);
  background: var(--platform);
}
.card__q {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 1.15rem 3rem 1.15rem 1.15rem;
  position: relative;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--snow);
  -webkit-tap-highlight-color: transparent;
}
.card__a p {
  color: var(--frost);
  font-size: var(--t-small);
  line-height: 1.6;
  /* The padding lives on the paragraph, never on the grid item. An item with
     padding has a content-based minimum bigger than zero, so a 0fr row cannot
     collapse and the first line of every answer leaks out under the heading. */
  padding: 0 1.15rem 1.15rem;
}

/* The plus/minus mark, shared by the cards and the FAQ. Both strokes are
   anchored by their right edge, so the vertical one has to be pulled back to
   the horizontal one's midpoint to make a plus rather than a "minus bar". */
.card__q::before,
.card__q::after,
.faq__q::before,
.faq__q::after {
  content: '';
  position: absolute;
  inset-inline-end: 1.1rem;
  inset-block-start: 50%;
  background: var(--ember);
  transition: transform 0.32s var(--ease-out), opacity 0.32s var(--ease-out);
}
.faq__q::before,
.faq__q::after {
  inset-inline-end: 0.35rem;
}
.card__q::before,
.faq__q::before {
  width: 0.9rem;
  height: 2px;
  transform: translateY(-50%);
}
.card__q::after,
.faq__q::after {
  width: 2px;
  height: 0.9rem;
  transform: translate(calc(1px - 0.45rem), -50%);
  transform-origin: center;
}
.card__q[aria-expanded='true']::after,
.faq__item[data-open='true'] .faq__q::after {
  transform: translate(calc(1px - 0.45rem), -50%) scaleY(0);
  opacity: 0;
}

/* The height animation, shared by every expander on the page. 0fr to 1fr is
   the only way to transition an auto height without measuring it in JS.

   Collapsing is gated on `.js-on`, which the inline script in <head> sets and
   strips again if scripts/main.js never lands. The default state is therefore
   OPEN: with scripts off, every card, bio and answer is simply on the page.
   Content that is hidden with no way left to reveal it is the one failure
   mode worth designing against here. */
.card__a,
.more__body,
.faq__a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.36s var(--ease-out);
}
.js-on .card__a,
.js-on .more__body,
.js-on .faq__a {
  grid-template-rows: 0fr;
}
.js-on .card__a[data-open='true'],
.js-on .more__body[data-open='true'],
.js-on .faq__item[data-open='true'] .faq__a {
  grid-template-rows: 1fr;
}
.card__a > div,
.more__body > div,
.faq__a > div {
  overflow: hidden;
}

/* With scripts off the control that would open an expander has nothing to do,
   so the "read more" buttons go and the plus marks come off the headings. The
   FAQ questions stay: they are the headings, not just the triggers. */
html:not(.js-on) .more {
  display: none;
}
html:not(.js-on) .card__q::before,
html:not(.js-on) .card__q::after,
html:not(.js-on) .faq__q::before,
html:not(.js-on) .faq__q::after {
  display: none;
}
html:not(.js-on) .card__q,
html:not(.js-on) .faq__q {
  cursor: default;
  padding-inline-end: 0;
}

/* --------------------------------------------------------------------------
   10. THE STORY, then/now
   One 4:5 frame per coach, and the same comparison slider as the proof rail
   (section 8): same markup, same script, same touch rule. Stacked on a phone,
   side by side from 768px up. It replaced a scroll-scrubbed wipe on
   2026-09-25; the wipe drew a seam that looked draggable and was not.
   -------------------------------------------------------------------------- */

.story-pairs {
  display: grid;
  gap: clamp(1.75rem, 6vw, 2.5rem);
  margin-top: clamp(1.75rem, 6vw, 2.5rem);
  margin-bottom: clamp(2rem, 7vw, 3rem);
}
@media (min-width: 48rem) {
  .story-pairs {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 3vw, 2.5rem);
  }
}
/* Capped on a wide screen. At the full wrap each 4:5 frame is 700px tall,
   so on a 1440x900 laptop neither comparison fits on screen with its
   caption. At 60rem the pair, its captions and the heading fit together. */
@media (min-width: 64rem) {
  .story-pairs {
    max-width: 60rem;
  }
}
.story-pair {
  margin: 0;
  min-width: 0;
}
.story-pair .compare {
  border: 1px solid var(--steel);
}
.story-pair .compare img {
  object-position: center 18%;
}
.story-pair figcaption {
  margin-top: 0.7rem;
  font-size: var(--t-small);
  color: var(--frost);
  line-height: 1.5;
}

.story__body {
  display: grid;
  gap: 1rem;
  max-width: var(--measure);
  color: var(--frost);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.story__body strong {
  color: var(--snow);
  font-weight: 600;
}

.signature {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.signature span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-small);
  color: var(--frost);
  letter-spacing: 0;
  margin-top: 0.15rem;
}

/* --------------------------------------------------------------------------
   11. HOW IT WORKS, three steps on one path
   The connector draws as the steps enter, which is what makes three boxes
   read as one route rather than three facts.
   -------------------------------------------------------------------------- */

.steps {
  position: relative;
  display: grid;
  margin-top: clamp(1.75rem, 6vw, 2.5rem);
  counter-reset: step;
  padding-inline-start: 3.25rem;
}
.steps__line {
  position: absolute;
  inset-inline-start: 1.05rem;
  inset-block: 1.05rem 1.5rem;
  width: 1px;
  background: var(--steel);
  transform-origin: top;
}
.motion-on .steps__line {
  transform: scaleY(0);
}
/* The JS fallback's end state, used only where view() timelines are missing. */
.motion-on .steps__line.is-drawn {
  transform: none;
  transition: transform 0.9s var(--ease-out);
}
@keyframes steps-draw-y {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes steps-draw-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
/* `cover`, not `entry`: on a wide screen this element is 1px tall, and for a
   zero-height subject every `entry` percentage resolves to the same instant.
   `cover` spans the whole passage through the scrollport either way. */
@supports (animation-timeline: view()) {
  .motion-on .steps__line {
    animation: steps-draw-y linear both;
    animation-timeline: view();
    animation-range: cover 8% cover 48%;
  }
}

.step {
  position: relative;
  padding-block: 1.55rem;
  border-block-start: 1px solid var(--steel);
}
.step:first-of-type {
  border-block-start: 0;
  padding-block-start: 0;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  inset-inline-start: -3.25rem;
  inset-block-start: 1.55rem;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  background: var(--nightshift);
  border: 1px solid var(--steel);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--frost);
}
.step:first-of-type::before {
  inset-block-start: 0;
}
.step h3 {
  font-size: var(--t-display-m);
  margin-bottom: 0.4rem;
}
.step p {
  color: var(--frost);
  font-size: var(--t-small);
  line-height: 1.6;
  max-width: 32rem;
}

/* --------------------------------------------------------------------------
   12. THE OFFER
   One card. There is one thing to buy, and the coach is a preference inside
   it, not a product to weigh up. See docs/DECISIONS.md.
   -------------------------------------------------------------------------- */

.offer-section {
  background: var(--platform);
  border-block: 1px solid var(--steel);
}

.offer {
  /* The flag straddles the top border, so this has to be the containing
     block. Without it the flag escapes to the nearest positioned ancestor and
     renders as a full-width ember bar above the card. */
  position: relative;
  background: var(--nightshift);
  border: 1px solid var(--steel);
  border-radius: 2px;
  padding: clamp(1.25rem, 5vw, 2rem);
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.5rem);
  /* Clearance for the flag, which is pulled up by half its own height. Not
     decorative spacing. */
  margin-block-start: clamp(2.25rem, 7vw, 3rem);
}
.offer__flag {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: clamp(1.25rem, 5vw, 2rem);
  transform: translateY(-50%);
  background: var(--ember);
  color: var(--nightshift);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  white-space: nowrap;
}
.offer__head {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}
.offer__name {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--frost);
}
.offer__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1em 0.5rem;
}
.offer__figure {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 11vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.9;
}
/* `sup` is position:static in UA stylesheets, so `top` alone does nothing.
   The UA `vertical-align: super` has to be reset too, or the two offsets stack
   and the dollar sign floats clean off the top of the numerals. */
.offer__figure sup {
  font-size: 0.34em;
  font-weight: 700;
  color: var(--frost);
  letter-spacing: 0;
  position: relative;
  vertical-align: baseline;
  top: -1.45em;
}
/* Currency is never implied. Most of the paying audience is not in Australia. */
.offer__unit {
  font-size: var(--t-small);
  color: var(--frost);
  font-weight: 400;
  letter-spacing: 0;
}
.offer__line {
  color: var(--snow);
  font-size: 1.0625rem;
  line-height: 1.45;
  font-weight: 500;
}
.offer__head .btn {
  margin-top: 0.6rem;
}
.offer__meta {
  font-size: var(--t-small);
  color: var(--frost);
  line-height: 1.5;
}
.offer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding-block-start: 1.35rem;
  border-block-start: 1px solid var(--steel);
}
.offer__list li {
  color: var(--frost);
  font-size: var(--t-small);
  line-height: 1.55;
  padding-inline-start: 1.5rem;
  position: relative;
}
/* Steel, not ember. The flag and the button already spend the screen's accent
   budget, and five ember dashes would spend it four more times. */
.offer__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  width: 0.6rem;
  height: 1px;
  background: var(--frost);
}
.offer__list strong {
  color: var(--snow);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   13. THE COACHES
   Profiles, not products. Short by default, the full bio behind a tap.
   -------------------------------------------------------------------------- */

/* Two up, on the phone as well as anywhere else. Stacked, the two 4:5
   portraits cost 870px between them, which is a screen and a third spent on
   two faces. Side by side they are a matched set, which is the point of them. */
.coaches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-top: clamp(1.75rem, 6vw, 2.5rem);
}
.coach {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.85rem;
  min-width: 0;
}
.coach__body {
  display: flex;
  flex-direction: column;
}
.coach__frame {
  border: 1px solid var(--steel);
  border-radius: 2px;
  overflow: hidden;
  background: var(--platform);
  aspect-ratio: 4 / 5;
}
.coach__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.coach__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.3rem, 5.2vw, 2.1rem);
  letter-spacing: -0.02em;
  color: var(--snow);
  line-height: 1;
}
.coach__spec {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.8125rem, 3.4vw, 0.9375rem);
  color: var(--ember);
  margin: 0.4rem 0 0.8rem;
  line-height: 1.3;
}
.coach__short {
  font-size: clamp(0.8125rem, 3.4vw, 0.875rem);
  line-height: 1.6;
  color: var(--frost);
}
.more {
  display: inline-block;
  align-self: flex-start;
  margin-top: 0.85rem;
  background: none;
  border: 0;
  padding: 0 0 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-small);
  color: var(--snow);
  border-block-end: 1px solid var(--steel);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.16s var(--ease-out);
}
.more:hover {
  border-color: var(--frost);
}
.more__body p {
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--frost);
  padding-block-start: 0.85rem;
}
.coach__meta {
  font-size: clamp(0.6875rem, 2.9vw, 0.75rem);
  color: var(--frost);
  border-block-start: 1px solid var(--steel);
  padding-block-start: 0.7rem;
  /* auto, not a fixed step: the two bios are different lengths and the rule
     under them has to land on one line across both cards. */
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   14. THE RIBBON, "in their words"
   A strip that moves slowly on its own, pauses the moment it is touched, and
   is swipeable with a thumb. scripts/main.js duplicates the set and drives
   scrollLeft, so the swipe and the drift are the same mechanism and never
   fight each other. Under reduced motion nothing moves on its own and it is
   a plain horizontal snap-scroll.
   -------------------------------------------------------------------------- */

.ribbon {
  margin-top: clamp(1.5rem, 5vw, 2rem);
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* Vertical scroll always wins; a horizontal drag is opt-in. */
  touch-action: pan-y pan-x;
}
.ribbon::-webkit-scrollbar {
  display: none;
}
.ribbon__track {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: max-content;
  padding-inline: var(--gutter);
}
.rquote {
  flex: 0 0 min(78vw, 19rem);
  border: 1px solid var(--steel);
  background: var(--platform);
  padding: 1.1rem 1.15rem 1rem;
  display: grid;
  align-content: start;
  gap: 0.85rem;
}
.rquote p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--snow);
}
.rquote footer {
  font-size: var(--t-micro);
  color: var(--frost);
  border-block-start: 1px solid var(--steel);
  padding-block-start: 0.75rem;
}
.rquote footer b {
  color: var(--snow);
  font-weight: 600;
  display: block;
}

/* --------------------------------------------------------------------------
   15. FAQ
   Six items, single-open: opening one closes the one that was open. The
   height animation is shared with the cards above.
   -------------------------------------------------------------------------- */

.faq {
  margin-top: clamp(1.75rem, 6vw, 2.5rem);
  border-block-start: 1px solid var(--steel);
}
.faq__item {
  border-block-end: 1px solid var(--steel);
}
.faq__q {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 1.25rem 2.75rem 1.25rem 0;
  position: relative;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--snow);
  -webkit-tap-highlight-color: transparent;
}
.faq__a p {
  color: var(--frost);
  font-size: var(--t-small);
  line-height: 1.65;
  max-width: 42rem;
  padding-block-end: 1.25rem;
}
.faq__a p + p {
  padding-block-start: 0.75rem;
}
.faq__a strong {
  color: var(--snow);
  font-weight: 600;
}
.faq__a a {
  color: var(--snow);
  text-decoration-color: var(--ember);
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   16. LAST CALL + THE CALCULATOR
   One block: the cap and the button, and underneath it the "not today" path.
   The calculator appears once on the page and this is where it lives.
   -------------------------------------------------------------------------- */

.last-call {
  border-block-start: 1px solid var(--steel);
}
.last-call__grid {
  display: grid;
  gap: clamp(2.5rem, 8vw, 3.5rem);
}
.last-call .section-title [data-spots-open] {
  font-variant-numeric: tabular-nums;
}
.last-call__pitch .btn {
  margin-top: 1.5rem;
}
.numbers__title {
  font-size: var(--t-display-m);
  margin-bottom: 0.6rem;
}
.numbers__intro {
  color: var(--frost);
  font-size: var(--t-small);
  line-height: 1.6;
  margin-bottom: 1.15rem;
  max-width: 30rem;
}

/* --------------------------------------------------------------------------
   17. THE APPLICATION, inline by default and a sheet with JavaScript

   With scripts off this section simply renders at the end of the page and
   works. scripts/main.js adds `.is-sheet`, which turns it into a fixed
   full-screen overlay on the same URL: no reload, which is what keeps it
   working inside Instagram's in-app browser.
   -------------------------------------------------------------------------- */

.apply {
  background: var(--platform);
  border-block: 1px solid var(--steel);
  padding-block: var(--section-y);
}
.apply__backdrop,
.apply__close {
  display: none;
}

.apply.is-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.apply.is-sheet .apply__backdrop {
  display: block;
  position: absolute;
  inset: 0;
  background: rgb(7 10 14 / 0.82);
}
.apply.is-sheet .apply__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--platform);
  padding-block: 0.85rem calc(3rem + env(safe-area-inset-bottom));
}
.apply.is-sheet .apply__close {
  display: grid;
  place-items: center;
  position: sticky;
  inset-block-start: 0;
  align-self: flex-end;
  margin-inline-end: var(--gutter);
  margin-block-end: 0.5rem;
  z-index: 5;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--nightshift);
  border: 1px solid var(--steel);
  border-radius: 2px;
  color: var(--snow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.16s var(--ease-out);
}
.apply.is-sheet .apply__close:hover {
  border-color: var(--ember);
}

.form-shell {
  max-width: 38rem;
  margin-inline: auto;
  margin-top: clamp(1.75rem, 6vw, 2.5rem);
  background: var(--nightshift);
  border: 1px solid var(--steel);
}

.form-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-block-end: 1px solid var(--steel);
}
.form-progress__track {
  flex: 1;
  height: 3px;
  background: var(--steel);
  overflow: hidden;
}
.form-progress__fill {
  height: 100%;
  width: 33.333%;
  background: var(--ember);
  transition: width 0.45s var(--ease-out);
}
.form-progress__label {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--frost);
  white-space: nowrap;
}

.form-body {
  padding: clamp(1.25rem, 5vw, 2rem);
}

.step-panel {
  display: grid;
  gap: 1.5rem;
}
.step-panel[hidden] {
  display: none;
}
.step-panel:not([hidden]) {
  animation: panel-in 0.4s var(--ease-out) both;
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.step-panel__head {
  display: grid;
  gap: 0.4rem;
}
.step-panel__head h3 {
  font-size: var(--t-display-m);
}
.step-panel__head p {
  color: var(--frost);
  font-size: var(--t-small);
  line-height: 1.55;
}

/* The self-exclusion block, now at the top of step one where it does its
   filtering job without costing a screen in the page. */
.not-for {
  padding: 1.25rem 1.2rem;
  background: var(--platform);
  border: 1px solid var(--steel);
  border-inline-start: 3px solid var(--steel);
}
.not-for h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  color: var(--snow);
}
.not-for ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.not-for li {
  color: var(--frost);
  font-size: var(--t-small);
  line-height: 1.5;
  padding-inline-start: 1.25rem;
  position: relative;
}
.not-for li::before {
  content: '\00D7';
  position: absolute;
  inset-inline-start: 0;
  color: var(--steel);
  font-weight: 700;
}

.field {
  display: grid;
  gap: 0.55rem;
}
.field > label,
.fieldset > legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  color: var(--snow);
}
.field__hint {
  font-size: var(--t-small);
  color: var(--frost);
  line-height: 1.5;
}

.fieldset {
  border: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.fieldset > legend {
  padding: 0;
  margin-bottom: 0.2rem;
}

/* 16px minimum prevents iOS Safari / Instagram in-app zoom-on-focus. */
.input,
.select,
.textarea {
  width: 100%;
  min-height: 3.125rem;
  font-size: 16px;
  padding: 0.8rem 0.9rem;
  background: var(--sunk);
  border: 1px solid var(--steel);
  border-radius: 2px;
  color: var(--snow);
  transition: border-color 0.18s var(--ease-out),
    background-color 0.18s var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--frost);
  opacity: 0.75;
}
.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--ember);
  background: var(--nightshift);
}
.textarea {
  min-height: 6.5rem;
  resize: vertical;
  line-height: 1.5;
}
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2393A6BA' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 0.75rem;
  padding-inline-end: 2.5rem;
}
.select:invalid,
.select option[value=''] {
  color: var(--frost);
}

/* Chip-style radio group, big tap targets, no custom-control weirdness. */
.choices {
  display: grid;
  gap: 0.5rem;
}
.choices--2 {
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 30rem) {
  .choices--wrap {
    grid-template-columns: 1fr 1fr;
  }
}

.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.125rem;
  padding: 0.7rem 0.9rem;
  background: var(--sunk);
  border: 1px solid var(--steel);
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.3;
  transition: border-color 0.16s var(--ease-out),
    background-color 0.16s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.choice__dot {
  width: 1.05rem;
  height: 1.05rem;
  border: 1px solid var(--frost);
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  transition: border-color 0.16s var(--ease-out);
}
.choice__dot::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ember);
  transform: scale(0);
  transition: transform 0.18s var(--ease-out);
}
.choice:hover {
  border-color: var(--frost);
}
.choice:has(input:checked) {
  border-color: var(--ember);
  background: color-mix(in srgb, var(--ember) 9%, var(--sunk));
}
.choice:has(input:checked) .choice__dot {
  border-color: var(--ember);
}
.choice:has(input:checked) .choice__dot::after {
  transform: scale(1);
}
.choice:has(input:focus-visible) {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

/* PAR-Q health screen. Checkboxes rather than radios: more than one can be
   true, and forcing a single answer would lose the detail that matters. */
.checks {
  display: grid;
  gap: 0.4rem;
}
.choice--check {
  align-items: start;
  min-height: 2.9rem;
  padding: 0.65rem 0.85rem;
  font-size: 0.875rem;
  line-height: 1.4;
}
.choice__box {
  width: 1.05rem;
  height: 1.05rem;
  border: 1px solid var(--frost);
  border-radius: 2px;
  flex: none;
  margin-top: 0.15rem;
  display: grid;
  place-items: center;
  transition: border-color 0.16s var(--ease-out),
    background-color 0.16s var(--ease-out);
}
.choice__box::after {
  content: '';
  width: 0.6rem;
  height: 0.32rem;
  border-inline-start: 2px solid var(--nightshift);
  border-block-end: 2px solid var(--nightshift);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  margin-top: -0.12rem;
  transition: transform 0.18s var(--ease-out);
}
.choice--check:has(input:checked) .choice__box {
  background: var(--ember);
  border-color: var(--ember);
}
.choice--check:has(input:checked) .choice__box::after {
  transform: rotate(-45deg) scale(1);
}
/* "None of these apply" is the answer most people give, so it reads as a
   different kind of thing rather than an eighth symptom. */
.choice--none {
  margin-top: 0.35rem;
  border-style: dashed;
}

.consent {
  display: flex;
  gap: 0.8rem;
  align-items: start;
  padding: 1.05rem;
  background: var(--sunk);
  border: 1px solid var(--steel);
  cursor: pointer;
  border-radius: 2px;
}
.consent input {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  margin-top: 0.1rem;
  accent-color: var(--ember);
}
.consent span {
  font-size: var(--t-small);
  color: var(--frost);
  line-height: 1.55;
}

.grid-2 {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.form-actions .btn {
  flex: 1;
}
.form-actions .btn--ghost {
  flex: 0 0 auto;
  min-width: 5.5rem;
}

.error-msg {
  color: var(--ember);
  font-size: var(--t-small);
  font-weight: 500;
  display: none;
}
.field[data-invalid='true'] .error-msg,
.fieldset[data-invalid='true'] .error-msg {
  display: block;
}
.field[data-invalid='true'] .input,
.field[data-invalid='true'] .select,
.field[data-invalid='true'] .textarea {
  border-color: var(--ember);
}

.form-legal {
  font-size: var(--t-micro);
  color: var(--frost);
  line-height: 1.6;
  margin-top: 1.25rem;
  max-width: 38rem;
  margin-inline: auto;
  opacity: 0.85;
}
.form-legal a {
  color: var(--frost);
}

/* Confirmation states */
.confirm {
  padding: clamp(2rem, 8vw, 3rem) clamp(1.25rem, 5vw, 2rem);
  display: grid;
  gap: 1rem;
  text-align: left;
}
.confirm[hidden] {
  display: none;
}
.confirm__badge {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: var(--ember);
  color: var(--nightshift);
  border-radius: 50%;
  margin-bottom: 0.35rem;
}
.confirm h3 {
  font-size: var(--t-display-m);
}
.confirm p {
  color: var(--frost);
  line-height: 1.6;
  max-width: 32rem;
}
.confirm .btn {
  margin-top: 0.75rem;
  justify-self: start;
}

/* --------------------------------------------------------------------------
   18. THE CALCULATOR, "Your Starting Numbers"
   Rendered into #numbers by scripts/calculator.js.

   Two things here are load-bearing rather than decorative:

   - The result number is the one moment on this page that earns full ember at
     display size. It is the payoff the reader traded three questions for.
   - Every panel is one question, so the tool starts inside one phone screen
     rather than scrolling as a single long form.
   -------------------------------------------------------------------------- */

.calc {
  background: var(--platform);
  border: 1px solid var(--steel);
  border-radius: 2px;
  padding: clamp(1.1rem, 4.5vw, 1.6rem);
}

.calc__panel {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.calc__legend {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 4.6vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--snow);
  padding: 0;
  margin-bottom: 0.2rem;
}

.calc__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--snow);
}

.calc__grid {
  display: grid;
  gap: 0.9rem;
}
@media (min-width: 26rem) {
  .calc__grid {
    grid-template-columns: 1fr 1fr;
  }
  .calc__span {
    grid-column: 1 / -1;
  }
}

/* Unit toggle. A quarter of this audience is in the US and will not convert
   their own height into centimetres, they will simply leave. */
.calc__unit {
  display: flex;
  gap: 0.4rem;
}
.calc__unit .input {
  flex: 1;
  min-width: 0;
}
.calc__toggle {
  flex: none;
  width: 3.25rem;
  background: var(--sunk);
  border: 1px solid var(--steel);
  border-radius: 2px;
  color: var(--frost);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.16s var(--ease-out), color 0.16s var(--ease-out);
}
.calc__toggle:hover,
.calc__toggle:focus-visible {
  border-color: var(--frost);
  color: var(--snow);
}

.calc__imperial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

/* Five day-options have to hold one row down to 320px, so they lose the radio
   dot and become plain number targets. */
.choices--days {
  grid-template-columns: repeat(5, 1fr);
  gap: 0.35rem;
}
.choices--days .choice {
  justify-content: center;
  padding: 0.7rem 0.2rem;
  font-weight: 600;
}
.choices--days .choice__dot {
  display: none;
}

.calc__nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.1rem;
}
.calc__nav .btn {
  flex: 1;
}
.calc__back {
  flex: none;
  background: none;
  border: 0;
  padding: 0.6rem 0.2rem;
  color: var(--frost);
  font-family: var(--font-body);
  font-size: var(--t-small);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.calc__back:hover {
  color: var(--snow);
}

/* ---- the result ------------------------------------------------------ */

.calc__result:focus {
  outline: none;
}

.calc__headline {
  text-align: center;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--steel);
  margin-bottom: 1.1rem;
}
.calc__eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--frost);
  margin-bottom: 0.35rem;
}
.calc__number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.4rem, 17vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}
.calc__unit-label {
  font-size: var(--t-small);
  color: var(--frost);
  margin-top: 0.4rem;
  line-height: 1.45;
}
.calc__burn {
  font-size: var(--t-small);
  color: var(--frost);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.calc__burn strong {
  color: var(--snow);
  font-variant-numeric: tabular-nums;
}

/* ---- the gate -------------------------------------------------------- */

.calc__gate {
  border-top: 1px solid var(--steel);
  padding-top: 1.25rem;
}
.calc__gate-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 4.2vw, 1.25rem);
  line-height: 1.25;
  color: var(--snow);
  margin-bottom: 0.5rem;
}
.calc__gate-body {
  font-size: var(--t-small);
  color: var(--frost);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.calc__gate-form {
  display: grid;
  gap: 0.6rem;
}
/* The calculator's email capture. Two-up as soon as there is room; at 390px
   they stack, because a 50/50 split of a phone width leaves an email field
   too narrow to read what you typed. */
.capture__row {
  display: grid;
  gap: 0.6rem;
}
@media (min-width: 26rem) {
  .capture__row {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  }
}
.capture__field {
  min-width: 0;
}

/* ---- the full sheet -------------------------------------------------- */

.calc__macros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--steel);
  border: 1px solid var(--steel);
  border-radius: 2px;
  margin-bottom: 1.4rem;
}
.calc__macro {
  background: var(--platform);
  padding: 0.7rem 0.35rem;
  text-align: center;
}
.calc__macro dt {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--frost);
  margin-bottom: 0.2rem;
}
.calc__macro dd {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.95rem, 4vw, 1.1rem);
  color: var(--snow);
  font-variant-numeric: tabular-nums;
}

.calc__block {
  border-top: 1px solid var(--steel);
  padding-top: 1.15rem;
  margin-bottom: 1.15rem;
}
.calc__block h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--snow);
  margin-bottom: 0.55rem;
}
.calc__block p {
  font-size: var(--t-small);
  color: var(--frost);
  line-height: 1.6;
}
.calc__block p strong {
  color: var(--snow);
}

.calc__food-lead {
  margin-bottom: 0.6rem;
}
.calc__food {
  list-style: none;
  display: grid;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
  padding: 0;
}
.calc__food li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9375rem;
  color: var(--snow);
  line-height: 1.45;
}
.calc__food li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4rem;
  height: 1px;
  background: var(--ember);
}
.calc__food-note,
.calc__note {
  font-size: var(--t-micro);
  color: var(--frost);
  line-height: 1.6;
}
.calc__note {
  border-left: 1px solid var(--steel);
  padding-left: 0.8rem;
  margin-top: 0.8rem;
}

.calc__coach .btn {
  margin-top: 0.9rem;
}

/* The honest limit of the tool, and the reason the coaching exists. */
.calc__expiry {
  background: var(--sunk);
  border: 1px solid var(--steel);
  border-radius: 2px;
  padding: 0.9rem 1rem;
  font-size: var(--t-small);
  color: var(--frost);
  line-height: 1.6;
}
.calc__sent {
  text-align: center;
  font-size: var(--t-micro);
  color: var(--frost);
  margin-top: 0.9rem;
}

/* --------------------------------------------------------------------------
   19. STICKY CTA
   One thumb-reach button that always says the right thing. The label is
   contextual and scripts/main.js owns it: "Apply for coaching" everywhere,
   "Get my numbers" past the last call, and hidden entirely over the
   calculator or the application sheet.
   -------------------------------------------------------------------------- */

.sticky-cta {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 40;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: rgb(10 13 18 / 0.92);
  backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--steel);
  transform: translateY(110%);
  transition: transform 0.4s var(--ease-out);
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.sticky-cta[data-visible='true'] {
  transform: translateY(0);
}
.sticky-cta__alt {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-small);
  line-height: 1.15;
  color: var(--frost);
  text-decoration: none;
  border-block-end: 1px solid var(--steel);
  padding-block-end: 3px;
  transition: color 0.16s var(--ease-out), border-color 0.16s var(--ease-out);
}
.sticky-cta__alt:hover {
  color: var(--snow);
  border-color: var(--ember);
}
.sticky-cta .btn {
  flex: 1;
  min-height: 3rem;
  padding-inline: 1rem;
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */

.footer {
  /* The bottom step is the sticky bar's clearance, not spacing. */
  padding-block: clamp(2.25rem, 7vw, 3.5rem) 6.5rem;
  border-block-start: 1px solid var(--steel);
  font-size: var(--t-small);
  color: var(--frost);
}
.footer__top {
  display: grid;
  gap: 1.5rem;
  padding-block-end: 1.75rem;
  border-block-end: 1px solid var(--steel);
}
@media (min-width: 48rem) {
  .footer__top {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  list-style: none;
  padding: 0;
  margin-top: 1.25rem;
}
.footer__links a {
  text-decoration: none;
  border-block-end: 1px solid var(--steel);
  padding-block-end: 2px;
  transition: color 0.16s var(--ease-out), border-color 0.16s var(--ease-out);
}
.footer__links a:hover {
  color: var(--snow);
  border-color: var(--ember);
}
/* Three accounts, brand first. One per row, full width on a phone so each is
   a whole thumb target; a right-hand column of equal widths from 768px up. */
.ig-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
.ig-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--snow);
  border: 1px solid var(--steel);
  padding: 0.55rem 0.95rem;
  border-radius: 2px;
  min-height: 2.75rem;
  transition: border-color 0.18s var(--ease-out);
}
.ig-link svg {
  flex: none;
}
.ig-link:hover {
  border-color: var(--ember);
}
.ig-link__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
  min-width: 0;
}
.ig-link__text b {
  font-family: var(--font-display);
  font-weight: 700;
}
.ig-link__handle {
  color: var(--frost);
  overflow-wrap: anywhere;
}
.footer__legal {
  padding-block-start: 1.25rem;
  display: grid;
  font-size: var(--t-micro);
  line-height: 1.65;
  opacity: 0.85;
}
.footer__legal strong {
  color: var(--snow);
  font-weight: 600;
}
/* Each disclaimer is one line with the full compliance text behind it.
   <details>, so it opens with scripts off. The cue is frost and underlined in
   steel: it is a way in, not a call to action, so no ember here. */
.legal-more > summary {
  display: block;
  list-style: none;
  cursor: pointer;
  padding-block: 0.7rem;
  -webkit-tap-highlight-color: transparent;
}
.legal-more > summary::-webkit-details-marker {
  display: none;
}
.legal-more__line {
  margin-inline-end: 0.6rem;
}
.legal-more__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  color: var(--frost);
  border-block-end: 1px solid var(--steel);
  line-height: 1.3;
  transition: color 0.16s var(--ease-out), border-color 0.16s var(--ease-out);
}
.legal-more > summary:hover .legal-more__cue {
  color: var(--snow);
  border-color: var(--frost);
}
.legal-more__cue svg {
  transition: transform 0.2s var(--ease-out);
}
.legal-more__close,
.legal-more[open] .legal-more__open {
  display: none;
}
.legal-more[open] .legal-more__close {
  display: inline;
}
.legal-more[open] .legal-more__cue svg {
  transform: rotate(180deg);
}
.legal-more > p {
  padding-block-end: 0.85rem;
  max-width: 48rem;
}
.footer__bottom {
  padding-block-start: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: var(--t-micro);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   21. LEGAL PAGES (privacy / terms), which share this stylesheet
   -------------------------------------------------------------------------- */

.doc {
  padding-block: clamp(4rem, 12vw, 6rem) clamp(3rem, 9vw, 5rem);
  max-width: 46rem;
}
.doc h1 {
  font-size: var(--t-display-l);
  margin-bottom: 0.75rem;
}
.doc__meta {
  color: var(--frost);
  font-size: var(--t-small);
  margin-bottom: 2.5rem;
  padding-block-end: 1.5rem;
  border-block-end: 1px solid var(--steel);
}
.doc h2 {
  font-size: var(--t-display-m);
  margin-top: 2.5rem;
  margin-bottom: 0.85rem;
}
.doc h3 {
  font-size: 1.0625rem;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}
.doc p,
.doc li {
  color: var(--frost);
  line-height: 1.7;
  margin-bottom: 0.9rem;
}
.doc ul,
.doc ol {
  padding-inline-start: 1.25rem;
  margin-bottom: 1rem;
}
.doc a {
  color: var(--snow);
  text-decoration-color: var(--ember);
  text-underline-offset: 3px;
}
.doc__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-small);
  text-decoration: none;
  color: var(--frost);
  margin-bottom: 2rem;
}
.doc__back:hover {
  color: var(--ember);
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: var(--t-small);
}
.doc th,
.doc td {
  text-align: left;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--steel);
  vertical-align: top;
  color: var(--frost);
}
.doc th {
  color: var(--snow);
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--platform);
}

/* --------------------------------------------------------------------------
   22. SCROLL REVEAL
   Opt-in: nothing is hidden unless `.reveals-on` is set on <html>, which only
   happens when the browser can actually honour it. A failed or slow
   scripts/main.js therefore leaves a fully readable page rather than a blank
   one, the failure mode that matters on a flaky mobile connection.

   300ms, ease-out, stagger supplied per element as --reveal-delay.
   -------------------------------------------------------------------------- */

.reveals-on [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.reveals-on [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   23. TABLET, 768px and up
   -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  :root {
    --measure: 38rem;
  }

  .cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }

  .coaches {
    gap: clamp(1.5rem, 4vw, 2.25rem);
  }

  /* Three steps across one line, with the connector drawn horizontally
     between the markers rather than down the side. */
  .steps {
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(1.5rem, 4vw, 2.5rem);
    padding-inline-start: 0;
    padding-block-start: 3.25rem;
  }
  .steps__line {
    inset-inline-start: 1.05rem;
    inset-block: 1.05rem auto;
    width: calc(100% - 2.1rem);
    height: 1px;
    transform-origin: left;
  }
  .motion-on .steps__line {
    transform: scaleX(0);
  }
  @supports (animation-timeline: view()) {
    .motion-on .steps__line {
      animation-name: steps-draw-x;
    }
  }
  .step {
    border-block-start: 0;
    padding-block: 0;
  }
  .step:first-of-type {
    padding-block-start: 0;
  }
  .step::before,
  .step:first-of-type::before {
    inset-inline-start: 0;
    inset-block-start: -3.25rem;
  }

  .rquote {
    flex-basis: 20rem;
  }
}

/* --------------------------------------------------------------------------
   24. DESKTOP, 1024px and up
   No empty half-screens. Roughly 99% of traffic is a phone, so this is a
   layout pass rather than a design of its own.
   -------------------------------------------------------------------------- */

@media (min-width: 64rem) {
  /* Hero: the loop takes a fixed 9:16 column on the left, the words and the
     buttons take the right. Nothing floats in an empty half. */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: 8rem 4rem;
    min-height: min(100svh, 50rem);
    overflow: visible;
  }
  .hero__media {
    position: relative;
    inset: auto;
    aspect-ratio: 9 / 16;
    max-height: 40rem;
    border: 1px solid var(--steel);
    border-radius: 2px;
    overflow: hidden;
    align-self: center;
  }
  /* The scrim exists to put the headline on real page ground. On desktop the
     headline is not over the video at all, so it drops back to a light vignette
     that only unifies the clip with the page. */
  .hero__scrim {
    background:
      linear-gradient(to top, rgb(10 13 18 / 0.55), rgb(10 13 18 / 0) 55%),
      var(--grain);
    background-size: auto, 120px 120px;
  }
  .hero__inner {
    padding-inline: 0;
    padding-block-end: 0;
    max-width: 34rem;
  }
  .hero__title {
    font-size: clamp(2.6rem, 3.9vw, 4.25rem);
    max-width: 14ch;
  }
  .hero__sub {
    font-size: var(--t-lead);
  }
  .hero__actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: none;
  }
  .hero__actions .btn {
    width: auto;
    flex: none;
  }
  .hero__secondary {
    margin-top: 0;
    text-align: left;
  }
  .hero__stats {
    gap: 0.35rem 2rem;
    font-size: var(--t-micro);
  }

  .story__body {
    max-width: 44rem;
  }

  .offer {
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    align-items: start;
  }

  /* Each coach card turns on its side. Stacked, a 4:5 portrait in a half-wrap
     column is 700px tall, which is most of a laptop screen spent on one face. */
  .coach {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    grid-template-rows: auto;
    gap: clamp(1.1rem, 2vw, 1.6rem);
    align-items: stretch;
  }
  .coach__frame {
    align-self: start;
  }

  /* A question set on a 1150px line reads as a caption. The answers already
     cap at 42rem; the questions have to match. */
  .faq {
    max-width: 52rem;
  }
  .offer__list {
    padding-block-start: 0;
    border-block-start: 0;
    border-inline-start: 1px solid var(--steel);
    padding-inline-start: clamp(1.5rem, 3vw, 2.5rem);
  }

  .rquote {
    flex-basis: 21rem;
  }

  /* Last call and the calculator, two columns. */
  .last-call__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
  }

  .sticky-cta {
    inset-inline-start: auto;
    inset-block-end: 1.5rem;
    inset-inline-end: 1.5rem;
    border: 1px solid var(--steel);
    border-radius: 2px;
    padding: 0.7rem 0.8rem 0.7rem 1.1rem;
  }

  /* The sheet becomes a centred column over a dark backdrop. */
  .apply.is-sheet .apply__panel {
    inset-block: 3vh;
    inset-inline-start: 50%;
    inset-inline-end: auto;
    width: min(48rem, 92vw);
    transform: translateX(-50%);
    border: 1px solid var(--steel);
    border-radius: 2px;
  }
}

/* --------------------------------------------------------------------------
   25. WIDE, 1440px and up
   -------------------------------------------------------------------------- */

@media (min-width: 90rem) {
  .hero {
    grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
  }
  .hero__media {
    max-height: 44rem;
  }
}

/* --------------------------------------------------------------------------
   26. REDUCED MOTION, full kill switch
   The inline script in <head> never sets `.reveals-on` or `.motion-on` here,
   so nothing reveals, the step connector is simply drawn, and the ribbon
   never moves on its own. These rules cover everything else.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  /* The global rule above collapses durations to ~0, which is right for
     transitions and for the form's panel-in, but would leave the hero's
     entrance parked at ITS start offset. This one needs an explicit reset. */
  .hero__inner {
    animation: none !important;
    transform: none !important;
  }
  .steps__line {
    transform: none !important;
  }
  .rail__hint::after {
    animation: none;
  }
  .sticky-cta {
    transition: none;
  }
  /* The ribbon becomes a plain horizontal snap-scroll. */
  .ribbon {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
  }
  .rquote {
    scroll-snap-align: start;
  }
}

/* Forced-colors / high-contrast safety net */
@media (forced-colors: active) {
  .btn,
  .choice,
  .compare__handle,
  .rail__arrow {
    border: 1px solid CanvasText;
  }
  .rail__dot::before {
    background: CanvasText;
  }
}