/* Team SAR — site stylesheet.
   Apple interface-system layer (design handoff 2026-08-15) over unchanged SAR
   brand law: pure-black canvas, one red accent, grayscale-darkened photography,
   frozen copy and prices. Type is SF Pro on Apple devices via -apple-system,
   Inter elsewhere. Radius grammar: pill 9999px = actions, 18px = cards,
   10-12px = media slots, 8px = inline card imagery. Elevation is flat 1px
   hairlines; the only shadow is --shadow-product on the template screenshots. */

:root {
  --bg-canvas: #000000;
  --surface-card: #121210;
  --surface-highlight: #1A0C0A;
  --text-primary: #F4F4F2;
  --text-secondary: #B9BAB4;
  --text-muted: #8A8B85;
  /* 4.51:1 on --surface-card, 5.05:1 on canvas. Was #6A6B65 = 3.49:1, under the
     4.5:1 AA floor, and it colours .num — the 14px label on every tile, price
     card and strip. Still a neutral grey, so the one-accent law is untouched. */
  --text-dim: #7C7D76;
  --accent: #E8483B;
  --accent-hover: #F26A5E;
  --border-default: #33342F;
  /* 4.55:1 on --surface-card. Was #4A4B45 = 2.13:1, the lowest pair in the file,
     and on the narrow branch this mark is the entire answer for a table row. */
  --mark-off: #7C7E74;

  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;

  --ls-body: -0.374px;
  --ls-small: -0.224px;
  --ls-list: -0.3px;

  --pad-x: clamp(20px, 4.5vw, 48px);
  --pad-band: clamp(48px, 7vw, 80px);
  --gap-cards: clamp(14px, 2vw, 22px);

  --r-card: 18px;
  --r-media: 10px;
  --r-box: 12px;
  --r-img: 8px;

  --shadow-product: 0 2px 8px rgba(0, 0, 0, 0.6), 0 24px 60px rgba(244, 244, 242, 0.16);
  --frost-bg: rgba(8, 8, 8, 0.72);
  --frost-blur: saturate(180%) blur(20px);
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ring-focus: 0 0 0 3px rgba(232, 72, 59, 0.5);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; background: #000; }

body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
::selection { background: rgba(232, 72, 59, 0.35); }

:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 6px; }

/* legacy structural elements neutralised: tone changes divide sections now */
hr.rule { display: none; border: 0; }

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }

.kicker {
  display: block;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}

h1 em, h2 em, h3 em { font-style: normal; color: var(--accent); }

.lead { font-weight: 300; letter-spacing: 0; color: var(--text-secondary); text-wrap: pretty; }
.lead strong, p strong { font-weight: 600; color: var(--text-primary); }
.muted { color: var(--text-muted); }

/* ---------- fixed frosted nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  background: rgba(8, 8, 8, 0);
  border-bottom: 1px solid rgba(51, 52, 47, 0);
  transition: background-color 240ms ease, border-color 240ms ease;
}
.nav.scrolled, .nav.open {
  background: var(--frost-bg);
  -webkit-backdrop-filter: var(--frost-blur);
  backdrop-filter: var(--frost-blur);
  border-bottom-color: var(--border-default);
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 var(--pad-x);
  min-height: 48px;
}
.nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  min-height: 44px;
}
.nav .brand img { width: 22px; height: 22px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav a.link {
  text-decoration: none;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: var(--ls-small);
  color: var(--text-secondary);
  padding: 15px 0;
  transition: color 150ms ease;
}
.nav a.link:hover { color: var(--text-primary); }
.nav a.link[aria-current="page"] { color: var(--text-primary); font-weight: 600; }
.nav .nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #000;
  border-radius: 9999px;
  padding: 7px 16px;
  min-height: 32px;
  text-decoration: none;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: var(--ls-small);
  transition: transform 120ms ease, background 120ms ease;
}
.nav .nav-cta:hover { background: var(--accent-hover); color: #000; }
.nav .nav-cta:active { transform: scale(0.95); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
  transition: transform 120ms ease;
}
.nav-toggle:active { transform: scale(0.95); }
.nav-toggle[hidden] { display: none !important; }

/* ≤833px: links collapse into a frosted full-screen sheet. The sheet needs JS
   (site.js stamps .jsnav); without it the links render as a static wrapped row */
@media (max-width: 833px) {
  .nav .nav-cta { display: none; }
  .nav-links { flex-wrap: wrap; gap: 4px 16px; padding-bottom: 8px; }
  .nav.jsnav .nav-toggle { display: inline-flex; }
  /* backdrop-filter would make the nav the containing block for the fixed
     sheet (Filter Effects 2), collapsing it into the 48px bar — so while the
     sheet is open the bar goes near-opaque and drops its own filter; the
     sheet's frost lives on the sheet element itself, which is safe */
  .nav.jsnav.open {
    background: rgba(5, 5, 5, 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav.jsnav .nav-links {
    display: none;
    position: fixed;
    inset: 48px 0 0 0;
    z-index: 85;
    background: rgba(5, 5, 5, 0.94);
    -webkit-backdrop-filter: var(--frost-blur);
    backdrop-filter: var(--frost-blur);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px clamp(20px, 6vw, 48px) 40px;
  }
  .nav.jsnav.open .nav-links {
    display: flex;
    animation: sheet-in 260ms var(--ease-out) both;
  }
  .nav.jsnav .nav-links > * { max-width: 720px; width: 100%; margin-inline: auto; }
  .nav.jsnav .nav-links a.link {
    display: flex;
    align-items: center;
    min-height: 52px;
    font-size: 17px;
    letter-spacing: var(--ls-body);
    padding: 0;
    border-bottom: 1px solid var(--border-default);
  }
  .nav-links .sheet-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #000;
    border-radius: 9999px;
    padding: 12px 24px;
    min-height: 44px;
    margin-top: 24px;
    text-decoration: none;
    font-family: var(--font-text);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: var(--ls-body);
    transition: transform 120ms ease, background 120ms ease;
  }
  .nav-links .sheet-cta:hover { background: var(--accent-hover); color: #000; }
  .nav-links .sheet-cta:active { transform: scale(0.95); }
}
@media (min-width: 834px) {
  .nav-links .sheet-cta { display: none; }
}
/* The "Start →" pill is display:none below 834px, so it never needed a touch
   size — until a folding phone showed up 890px wide. Height only: the row has
   roughly 6px of slack at 890, so any horizontal growth wraps the bar. */
@media (hover: none) {
  .nav .nav-cta { min-height: 44px; }
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- breadcrumb trail (inner pages, under the fixed nav) ---------- */

/* Sits in the hero's top-left, aligned with the nav brand, out of the centred
   copy's flow. 44px rows so the Home link meets the touch floor at every width.
   top: 52px, not the nominal 48: the fixed bar really measures 49px (border) on
   phones and ~51.6px on desktop (link padding + line box), and it keeps pointer
   events while transparent, so anything under it loses the top of its hit box. */
.crumbs {
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 2;
}
/* Over the colour plate clip (coaching, about) a bright frame passes behind the
   trail for part of each loop and the 14px grey drops under 4.5:1. A top fade
   mirroring .hero-fade keeps the trail (and the nav links above it) readable
   without touching the clip's own grade; photo heroes are dark enough as they are. */
.hero-video ~ .crumbs::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -52px;
  height: 220px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 100%);
}
/* No JS on a phone: the links render as a static wrapped row inside the fixed,
   transparent bar, right on top of the trail. Hide the trail there; site.js
   stamps .jsnav at DOMContentLoaded and the trail appears with the hamburger. */
@media (max-width: 833px) {
  .nav:not(.jsnav) ~ .hero .crumbs { display: none; }
}
.crumbs ol {
  list-style: none;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: var(--ls-small);
  color: var(--text-primary);
  text-align: left;
}
.crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 150ms ease;
}
.crumbs a:hover { color: var(--text-primary); }
.crumbs li[aria-current="page"] { font-weight: 600; }
/* the separator is a drawn chevron, not a glyph, so screen readers read
   "Home, Coaching" and never a stray character between them */
.crumbs li + li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 9px 0 7px;
  border-right: 1px solid var(--text-dim);
  border-bottom: 1px solid var(--text-dim);
  transform: rotate(-45deg);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(120px, 15vh, 170px) var(--pad-x) clamp(72px, 9vw, 120px);
}
.hero.tall { padding: clamp(120px, 18vh, 200px) var(--pad-x) clamp(88px, 12vw, 150px); }
.hero.mid { padding: clamp(120px, 16vh, 180px) var(--pad-x) clamp(80px, 10vw, 130px); }

/* Desktop hero height. Padding alone sized these bands, which left them far
   wider than tall — every hero photo is portrait or near-square, so cover
   cropped most of it away and cut off faces, shirts and the plate lettering
   (only ~20% of the source was visible at 1920). The box is always wider than
   the image, so the crop is purely vertical and height is the only lever.
   The px floor keeps a short laptop window from collapsing the band again;
   the cap stops a tall/portrait monitor turning it into a wall. */
@media (min-width: 834px) {
  .hero { min-height: clamp(650px, 103vh, 1150px); }
  .hero.mid { min-height: clamp(670px, 108vh, 1200px); }
  .hero.tall { min-height: clamp(700px, 110vh, 1250px); }
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.32) contrast(1.12);
}
.hero-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.45) contrast(1.1);
}
/* Q-directed exception: the plate clip plays in colour (red plate = the accent) */
.hero-video.hero-video-colour { filter: brightness(0.45) contrast(1.1); }
.hero-copy {
  position: relative;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero h1 {
  margin: 18px 0 0;
  font-size: clamp(30px, 5vw, 56px);
  line-height: 1.07;
  letter-spacing: -0.28px;
  color: var(--text-primary);
  text-wrap: balance;
}
.hero .lead {
  margin: 22px 0 0;
  max-width: 54ch;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.5;
}
.hero.tall .lead { font-size: clamp(17px, 2vw, 24px); max-width: 46ch; }
.hero .btn-row { justify-content: center; margin-top: 36px; }

/* ---------- full-bleed tone bands ---------- */

.band { background: #000; }
.band.surface { background: var(--surface-card); }
.band.highlight { background: var(--surface-highlight); }
.band[id] { scroll-margin-top: 64px; }
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--pad-band) var(--pad-x);
}
.wrap.tight { padding: clamp(40px, 6vw, 64px) var(--pad-x); }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 {
  margin: 12px 0 0;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  text-wrap: balance;
}
.section-head .lead {
  margin: 14px 0 0;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.45;
}
.section-head .btn { margin-top: 20px; }
.section-head .btn-row { margin-top: 20px; }
.section-head .btn-row .btn { margin-top: 0; }

/* CTA band: buttons centered, optional heading above */
.cta-band .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
}
.cta-head {
  flex-basis: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 18px;
}
.cta-head h2 {
  margin: 12px 0 0;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.2px;
  text-wrap: balance;
}

/* ---------- grids ---------- */

.grid { display: grid; gap: var(--gap-cards); align-items: stretch; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
/* cols-4 holds four cards, but auto-fit only reaches 4-up at ~1162px, so every
   width from ~863px strands the last one alone beside two empty slots — the
   unfolded Duo (890) sits in that band. 2x2 there instead of 3+1. */
@media (min-width: 863px) and (max-width: 1161px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
.grid.media-row { align-items: start; gap: clamp(16px, 2.4vw, 28px); }

/* ---------- cards ---------- */

.tile {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  padding: clamp(22px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 150ms ease, transform 120ms ease;
}
/* on surface bands the cards flip to black so the hairline still reads */
.band.surface .tile:not(.hot) { background: #000; }
.tile.hot { background: var(--surface-highlight); border-color: var(--accent); }
.tile h3 {
  font-size: 21px;
  letter-spacing: -0.3px;
  line-height: 1.2;
  color: var(--text-primary);
}
.tile h3 em { color: var(--accent); }
.tile p {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: var(--ls-small);
  color: var(--text-muted);
}
.tile.hot p { color: var(--text-secondary); }
.num {
  display: block;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tile.hot .num { color: var(--accent); }
.num .n-red { color: var(--accent); }
a.tile { text-decoration: none; }
a.tile:hover { border-color: var(--text-dim); }
a.tile.hot:hover { border-color: var(--accent-hover); }
a.tile:active { transform: scale(0.98); }
.tile .num.social-num { display: flex; align-items: center; gap: 8px; letter-spacing: 0.08em; }
.tile .social-icon { width: 18px; height: 18px; flex-shrink: 0; }
.tile .cbs-logo { width: 140px; height: auto; filter: grayscale(1) contrast(1.05); align-self: flex-start; }

/* clickable card affordance: red chevron on the title row */
.tile .go { color: var(--accent); }

/* ---------- buttons (pill grammar) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #000;
  border: 0;
  border-radius: 9999px;
  padding: 12px 24px;
  min-height: 44px;
  text-decoration: none;
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: var(--ls-body);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}
.btn:hover { background: var(--accent-hover); color: #000; }
.btn:active { transform: scale(0.95); }
.btn.hero-cta { padding: 14px 28px; min-height: 48px; font-size: 18px; font-weight: 300; letter-spacing: 0; }
.btn.ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 11px 22px;
}
.btn.ghost:hover { background: var(--surface-highlight); color: var(--accent-hover); border-color: var(--accent); }
.band.highlight .btn.ghost:hover { background: rgba(232, 72, 59, 0.08); }
.btn.small { padding: 10px 21px; font-size: 15px; letter-spacing: var(--ls-small); }
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-text);
  font-size: 17px;
  letter-spacing: var(--ls-body);
  transition: color 120ms ease;
}
.tlink:hover { color: var(--accent-hover); }
.tlink .chev { font-size: 20px; line-height: 1; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(24px, 3.5vw, 36px); }
.tile .btn-row { margin-top: auto; padding-top: 12px; }

/* ---------- square-marker lists (brand motif) ---------- */

ul.sq { list-style: none; display: grid; gap: 13px; align-content: start; }
/* the marker is absolutely positioned, NOT a flex item: a flex li turns every
   inline <strong>/<em> text run into its own column and tears the sentence
   apart (shipped once — the 2026-08-16 "texts out of position" bug) */
ul.sq li {
  position: relative;
  padding-left: 19px;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: var(--ls-list);
  color: var(--text-secondary);
}
ul.sq li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  background: var(--accent);
}
ul.sq li strong { font-weight: 600; color: var(--text-primary); }
ul.sq li em { font-style: normal; font-weight: 600; color: var(--accent); }

/* ---------- IG embeds ---------- */

.embed-tile { padding: 14px; gap: 10px; }
.embed-tile .num { letter-spacing: var(--ls-small); padding: 4px 6px 0; }
/* multi-column Transformations grid: a label that wraps must not drop its frame
   below the rest of the row, so every label gets a two-line box there */
@media (min-width: 720px) {
  .transform-proof .embed-tile .num { min-height: calc(2.8em + 4px); min-height: calc(2lh + 4px); }
}
/* IG ships no dark embed theme: the frame is sized to the media box exactly and
   the iframe is pulled up 54px so the white profile header clips away.
   .video-frame: self-hosted Transformations clips share the 4:5 box, in colour */
.embed-frame, .video-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 5;
  background: var(--surface-card);
  border-radius: var(--r-media);
}
.embed-frame.embed-frame-sq { aspect-ratio: 1 / 1; }
.embed-frame iframe {
  position: absolute;
  top: -54px;
  left: 0;
  width: 100%;
  height: calc(100% + 54px);
  border: 0;
  display: block;
  background: var(--surface-card);
}
/* solid strip over the last pixels absorbs sub-pixel rounding of IG's footer */
.embed-frame::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: inherit;
}
.embed-tile .ig-fallback {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 6px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: var(--ls-small);
  transition: color 150ms ease;
}
.embed-tile .ig-fallback:hover { color: var(--text-primary); }
/* the poster img under the video is the still that reduced-motion users see */
.video-frame img, .video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--pos, 50%);
  display: block;
}
/* self-hosted Instagram videos (Q, 2026-09-24): --pos picks the 4:5 band of a
   9:16 clip; .fit shows the whole frame when burned-in text sits top and bottom */
.video-frame.fit { background: #000; }
.video-frame.fit img, .video-frame.fit video { object-fit: contain; }
.embed-tile p { margin: 0; padding: 0 6px 4px; }

/* ---------- client photo strips ---------- */

.home-client-strip, .client-wall {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  align-items: start;
  margin-top: var(--gap-cards);
}
.home-client-strip { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
/* Four photos, and auto-fit passes through a 3-up state that strands the fourth
   beside two empty cells — the unfolded Duo in portrait (626px) lands in it.
   2x2 across that band; 466 and 890 already resolve cleanly and are untouched. */
@media (min-width: 521px) and (max-width: 698px) {
  .home-client-strip { grid-template-columns: repeat(2, 1fr); }
}
.client-wall { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-top: 0; }
.home-client-strip img, .client-wall img {
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
}
/* Transformations shows its clients in colour (Q, 2026-09-24); Home keeps the grade */
.home-client-strip img { filter: grayscale(1) contrast(1.05); }

/* ---------- program choice cards (Home) ---------- */

.program-choice { gap: 10px; }
.program-choice .title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}
.program-choice .title-row .go { font-size: 22px; line-height: 1; }
.program-choice.hot .title-row { color: var(--accent); }

/* ---------- media figures ---------- */

/* video clips inside cards (coaching) */
figure.clip {
  background: #000;
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  padding: clamp(14px, 2vw, 18px);
  display: block;
}
.band .clip { background: var(--surface-card); }
.band.surface .clip { background: #000; }
figure.clip video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-media);
  filter: grayscale(1) contrast(1.05);
}

/* template screenshots: product imagery resting on a card, the site's one shadow */
.tpl-figure {
  margin: clamp(24px, 3.5vw, 36px) 0 0;
  max-width: 900px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  padding: clamp(14px, 2vw, 20px);
}
.band.surface .tpl-figure { background: #000; }
.tpl-figure a { display: block; }
.tpl-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-img);
  filter: grayscale(1);
  box-shadow: var(--shadow-product);
}
.tpl-figure figcaption {
  padding: 14px 6px 2px;
  font-size: 14px;
  letter-spacing: var(--ls-small);
  line-height: 1.5;
  color: var(--text-muted);
}

/* About: captioned portrait + art panel */
.coach-portrait {
  margin: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.coach-portrait img { width: 100%; height: auto; filter: grayscale(1) contrast(1.05); }
.coach-portrait figcaption { padding: 14px 18px; }
.coach-portrait figcaption .kicker { margin-bottom: 4px; }
.coach-portrait figcaption span:not(.kicker) { font-size: 14px; letter-spacing: var(--ls-small); color: var(--text-dim); }
.about-media { align-items: start; gap: clamp(12px, 1.6vw, 20px); }
.about-media > img {
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
  filter: grayscale(1) contrast(1.05);
}
/* 2-column band (~572-933px): 3 photos orphan the last beside a hole — the
   brand plate fills the fourth slot there. Hidden wherever the grid is 3-up
   (no hole) or single-column (no hole either). */
.about-media .logo-tile { display: none; }
/* 888, not 933: the photo grid already flips to 3-up at 889 (flip point
   780/0.878 = 888.38), so from 889 to 933 the filler tile became the very orphan
   it exists to prevent — which is exactly where the unfolded Duo sits at 890. */
@media (min-width: 572px) and (max-width: 888px) {
  .about-media .logo-tile {
    display: block;
    align-self: stretch;
    min-height: 240px;
    padding: 0;
    overflow: hidden;
  }
  /* contain, not cover: the plate must never clip. The tile matches the
     logo file's black ground so the letterbox is seamless. */
  .about-media .logo-tile { background: #000; }
  .about-media .logo-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.art-panel {
  margin: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  overflow: hidden;
}
.art-panel img { width: 100%; height: auto; display: block; filter: grayscale(1) contrast(1.05); }
.art-panel figcaption { padding: clamp(18px, 3vw, 28px); }
.art-panel figcaption .kicker { margin-bottom: 8px; }
.art-panel figcaption h3 { font-size: clamp(21px, 2.4vw, 28px); letter-spacing: var(--ls-body); }

/* ---------- expectations: numbered terms ---------- */

.terms { max-width: 760px; display: grid; gap: clamp(24px, 3.5vw, 36px); }
.term {
  display: grid;
  grid-template-columns: minmax(44px, 56px) 1fr;
  gap: 16px;
  border-top: 1px solid var(--border-default);
  padding-top: 22px;
}
.term .t-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: var(--ls-body);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.term h2 {
  margin: 0 0 10px;
  font-size: 21px;
  letter-spacing: -0.3px;
  line-height: 1.2;
  color: var(--text-primary);
}
.term p {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: var(--ls-list);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* ---------- FAQ (details/summary/.a structure is load-bearing) ---------- */

.faq-box {
  max-width: 860px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  background: #000;
  overflow: hidden;
}
.faq-box details { border-bottom: 1px solid var(--border-default); }
.faq-box details:last-child { border-bottom: 0; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.faq-box summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  min-height: 44px;
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: var(--ls-body);
  color: var(--text-primary);
}
/* the + glyph lives in CSS so tools/build-schema.py keeps capturing clean
   summary text for the FAQ JSON-LD — never move it into the markup */
.faq-box summary::after {
  content: "+";
  color: var(--accent);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  flex: none;
  transition: transform 200ms var(--ease-out);
}
.faq-box details[open] summary::after { transform: rotate(45deg); }
.faq-box .a {
  padding: 0 22px 20px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: var(--ls-list);
  color: var(--text-muted);
}
.faq-box .a strong { font-weight: 600; color: var(--text-primary); }

/* ---------- pricing ---------- */

/* sticky local sub-nav: sits under the 48px global bar */
.subnav {
  position: sticky;
  top: 48px;
  z-index: 60;
  background: var(--frost-bg);
  -webkit-backdrop-filter: var(--frost-blur);
  backdrop-filter: var(--frost-blur);
  border-bottom: 1px solid var(--border-default);
}
.subnav-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px var(--pad-x);
  min-height: 52px;
}
.subnav-inner .page-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: var(--ls-body);
  color: var(--text-primary);
}
.subnav .btn { min-height: 32px; padding: 7px 16px; font-size: 14px; letter-spacing: var(--ls-small); }
/* the 32px nav-scale pill is a desktop nicety; touch screens get the 44px floor.
   `max-width: 833px` was a proxy for "touch screen" and the iPhone Duo breaks it:
   unfolded it is 890px wide, so it takes the desktop branch while still being a
   finger-driven screen. `hover: none` asks the real question, and keeps the mouse
   case (any width) on the 32px pill. */
@media (max-width: 833px), (hover: none) {
  .subnav .btn { min-height: 44px; padding: 10px 18px; }
}

#pay-status {
  display: none;
  margin: 0 auto 24px;
  max-width: 720px;
  padding: 14px 18px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-box);
  font-weight: 600;
}
#pay-status a { color: var(--accent); }
#pay-status a.btn { color: #000; }

.notice-card { max-width: 720px; margin: 0 auto clamp(28px, 4vw, 44px); }
.notice-card .num { margin-bottom: 10px; }

/* segmented control: sliding accent pill indicator */
.segmented {
  position: relative;
  display: flex;
  max-width: 620px;
  margin: 0 auto clamp(28px, 4vw, 44px);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 9999px;
  padding: 3px;
}
.segmented .seg-ind {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  background: var(--accent);
  border-radius: 9999px;
  transition: transform 260ms var(--ease-out);
}
.segmented[data-count="4"] .seg-ind { width: calc((100% - 6px) / 4); }
.segmented[data-count="3"] .seg-ind { width: calc((100% - 6px) / 3); }
.segmented[data-count="2"] .seg-ind { width: calc((100% - 6px) / 2); }
/* region switch (INR / USD) sits directly above the tenure control */
.segmented.currency { max-width: 440px; margin-bottom: 14px; }
.segmented button {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  /* 44px, not 40: the only place this got the touch floor was the max-width:419px
     wrap fallback, which no iPhone Duo screen ever reaches (466 / 626 / 890). */
  min-height: 44px;
  background: none;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: var(--ls-small);
  font-weight: 400;
  color: var(--text-secondary);
  transition: color 200ms ease;
  padding: 0 6px;
  white-space: nowrap;
}
.segmented button[aria-checked="true"] { font-weight: 600; color: #000; }
/* 2x2 fallback for very narrow screens: indicator can't track a wrapped grid */
@media (max-width: 419px) {
  .segmented { flex-wrap: wrap; border-radius: 20px; }
  .segmented .seg-ind { display: none; }
  .segmented button { flex: 1 1 45%; }
  .segmented button[aria-checked="true"] { background: var(--accent); }
}

.plans { align-items: stretch; }
/* Three plan cards against the shared 280px track minimum: 834-965px only fits
   two, so the bundle — the card the page is selling — drops alone onto a second
   row beside an empty half. The unfolded Duo is 890. Pin 3-up for the whole
   desktop branch; .grid.cols-3.plans (0,3,0) out-specifies .grid.cols-3 (0,2,0). */
@media (min-width: 834px) {
  .grid.cols-3.plans { grid-template-columns: repeat(3, 1fr); }
}
.price-card { gap: 0; }
.price-card .num { margin-bottom: 0; }
.price-card .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 4px 12px;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--ls-small);
}
.chip.outline { border: 1px solid var(--accent); color: var(--accent); }
.chip.fill { background: var(--accent); color: #000; }
.price-card p.price {
  margin: 10px 0 2px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.05;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.price .permo { font-size: 16px; font-weight: 400; color: var(--text-dim); letter-spacing: 0; }
.price-card .was { margin: 6px 0 0; font-size: 14px; letter-spacing: var(--ls-small); color: var(--text-dim); }
.price-card .was s { text-decoration-thickness: 1.5px; }
.price-card .billed { margin: 6px 0 0; font-size: 14px; letter-spacing: var(--ls-small); color: var(--text-muted); }
.price-card .ladders {
  flex: 1;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-default);
}
.price-card.hot .ladders { border-top-color: rgba(232, 72, 59, 0.35); }
.ladder-kicker {
  display: block;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.ladders ul.sq { gap: 10px; margin-bottom: 16px; }
.ladders ul.sq:last-child { margin-bottom: 0; }
.ladders ul.sq li { font-size: 15px; line-height: 1.5; letter-spacing: var(--ls-small); padding-left: 16px; }
.ladders ul.sq li::before { width: 6px; height: 6px; top: 8px; }
.bundle-only {
  border: 1px solid var(--accent);
  border-radius: var(--r-box);
  padding: 14px 16px;
}
.bundle-only .ladder-kicker { margin-bottom: 10px; }
.price-card .btn { margin-top: 20px; }
.assure {
  margin: 12px 0 0;
  text-align: center;
  font-size: 14px;
  letter-spacing: var(--ls-small);
  color: var(--text-dim);
}
.fine-print {
  margin: 20px 0 0;
  max-width: 720px;
  font-size: 14px;
  letter-spacing: var(--ls-small);
  line-height: 1.55;
  color: var(--text-dim);
}

/* one-time consult strip (directly below the cards) */
.consult-strip {
  margin-top: clamp(24px, 3.5vw, 36px);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  padding: clamp(20px, 2.8vw, 28px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.consult-strip .consult-copy { flex: 1 1 380px; min-width: min(100%, 300px); }
.consult-strip .num { margin-bottom: 8px; }
.consult-price {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.consult-strip p:not(.consult-price) {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: var(--ls-small);
  color: var(--text-muted);
}

/* numbered steps */
.steps-row { gap: clamp(16px, 2.4vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.steps-row .step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border-default);
  padding-top: 18px;
}
.steps-row .step .num {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: var(--ls-body);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-transform: none;
}
.steps-row .step p { font-size: 16px; line-height: 1.55; letter-spacing: var(--ls-list); color: var(--text-secondary); }

/* comparison: one markup, two presentations.
   ≥834px = full bordered grid; ≤833px = plan picker + one column as rows */
.cmp {
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  /* clip, not hidden: both round the corners identically, but `hidden` makes this
     a scroll container, which silently disables position:sticky on .cmp-head. */
  overflow: hidden; /* Safari 15 and older: no clip, so the old corners */
  overflow: clip;   /* everyone else: not a scroll container, so the sticky head works */
  background: var(--surface-card);
}
.cmp-head {
  display: grid;
  grid-template-columns: minmax(200px, 1.6fr) repeat(3, minmax(120px, 1fr));
  align-items: end;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border-default);
  background: #000;
  /* The table runs ~1.8 screens on a 626px-tall unfolded phone, and the ≤833px
     plan-picker fallback is not available at 890px — so without this the columns
     lose their headings and 14 rows of ✓/— identify nothing. 101px clears the
     48px nav plus the 53px sticky subnav. */
  position: sticky;
  top: 101px;
  z-index: 50;
}
.cmp-head .col { text-align: center; padding: 0 8px; }
.cmp-head .col .plan-name {
  display: block;
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: var(--ls-small);
  color: var(--text-primary);
}
.cmp-head .col.best .plan-name { color: var(--accent); }
.cmp-head .col .plan-price {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  letter-spacing: var(--ls-small);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.cmp-head .col .chip { margin-top: 8px; padding: 3px 10px; }
.cmp-cat {
  padding: 10px 20px;
  background: var(--surface-highlight);
  border-bottom: 1px solid var(--border-default);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.cmp-row {
  display: grid;
  grid-template-columns: minmax(200px, 1.6fr) repeat(3, minmax(120px, 1fr));
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(51, 52, 47, 0.55);
}
.cmp-row .r-label {
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: var(--ls-small);
  color: var(--text-secondary);
  padding-right: 12px;
}
.cmp-v { text-align: center; font-size: 16px; font-weight: 600; }
.cmp-v.yes { color: var(--accent); }
.cmp-v.no { color: var(--mark-off); }
.cmp-legend {
  margin: 0;
  padding: 12px 20px;
  font-size: 14px;
  letter-spacing: var(--ls-small);
  color: var(--text-dim);
}
.cmp-legend .yes { color: var(--accent); font-weight: 600; }
/* --mark-off, so the legend key is the same colour as the mark it explains */
.cmp-legend .no { color: var(--mark-off); font-weight: 600; }
.cmp-mobile { display: none; }
.cmp-mobile-head {
  display: none;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: #000;
  border-bottom: 1px solid var(--border-default);
}
.cmp-mobile-head .plan-name {
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: var(--ls-small);
  color: var(--text-primary);
}
.cmp-mobile-head.best .plan-name { color: var(--accent); }
.cmp-mobile-head .plan-price {
  font-size: 14px;
  letter-spacing: var(--ls-small);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
/* 834-1023: the three value columns hold one glyph each but the 1.6fr/1fr ratio
   hands them 62% of the table, starving the row labels — 267px of label at 890px
   wide, narrower than the same label gets on a 466px phone, and the extra wrapping
   made the table TALLER at 890 (1109px) than at 1024 (1047px). Head and rows must
   carry identical tracks or the columns stop lining up. */
@media (min-width: 834px) and (max-width: 1023px) {
  .cmp-head,
  .cmp-row { grid-template-columns: minmax(200px, 2.6fr) repeat(3, minmax(96px, 1fr)); }
}
@media (max-width: 833px) {
  .cmp-mobile { display: block; margin-bottom: 16px; }
  .cmp-mobile-head { display: flex; }
  .cmp-head { display: none; }
  .cmp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
  }
  .cmp-row .r-label { padding-right: 0; }
  .cmp-row .cmp-v { display: none; flex: none; }
  .cmp[data-view="t"] .cmp-v.v-t { display: block; }
  .cmp[data-view="n"] .cmp-v.v-n { display: block; }
  .cmp[data-view="b"] .cmp-v.v-b { display: block; }
  .cmp-cat { padding: 9px 18px; }
  .cmp-legend { padding: 12px 18px; }
}
.cmp-note {
  margin: 20px 0 0;
  max-width: 720px;
  font-size: 16px;
  letter-spacing: var(--ls-list);
  line-height: 1.55;
  color: var(--text-muted);
}

/* elite strip on the highlight band */
.elite-strip {
  max-width: 860px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  padding: clamp(20px, 2.8vw, 28px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.elite-strip .elite-copy { flex: 1 1 380px; min-width: min(100%, 300px); }
.elite-strip .num { margin-bottom: 8px; }
.elite-strip p:not(.num) {
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: var(--ls-list);
  color: var(--text-secondary);
}
.final-cta {
  max-width: 760px;
  margin: clamp(40px, 6vw, 64px) auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.final-cta h2 {
  margin: 12px 0 0;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.2px;
}
.final-cta .btn { margin-top: 30px; }

/* ---------- footer ---------- */

footer {
  background: var(--surface-card);
  border-top: 1px solid var(--border-default);
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 56px) var(--pad-x) clamp(28px, 4vw, 44px);
}
.footer-cols { display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-start; }
.fbrand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.fbrand img { width: 20px; height: 20px; object-fit: contain; }
.footer-cols .col { min-width: 220px; }
.footer-cols .col > p {
  margin: 10px 0 0;
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: var(--ls-small);
  color: var(--text-dim);
}
.footer-nav { display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  text-decoration: none;
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: var(--ls-small);
  color: var(--text-muted);
  transition: color 150ms ease;
}
.footer-nav a:hover { color: var(--text-primary); }
.fine {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border-default);
  max-width: 760px;
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: var(--ls-small);
  line-height: 1.6;
  color: var(--text-dim);
}
.fine strong { font-weight: 600; color: var(--text-muted); }

/* ---------- motion ---------- */

/* cross-document view transitions (production opt-in) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 240ms var(--ease-out) both vt-out; }
::view-transition-new(root) { animation: 320ms var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* scroll reveals live in assets/site.js ([data-reveal]): the initial hidden
   state is applied by JS, so no-JS renders everything visible */

/* smooth scroll: assets/lenis.min.js, initialised in site.js (wheel only; touch
   and reduced-motion users keep native scrolling). `lenis-smooth` is present only
   while Lenis is animating a wheel scroll, so the iframe rule just stops the
   Instagram embeds swallowing wheel events mid-scroll; at rest the reels stay
   fully clickable. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-new(root) { animation-name: vt-in-still; }
  .hero-video { display: none; }
  figure.clip video { display: none; }
  .video-frame video { display: none; }
  .nav.open .nav-links { animation: sheet-fade 200ms ease both; }
  .segmented .seg-ind { transition: none; }
  .faq-box summary::after { transition: none; }
}
@keyframes vt-in-still { from { opacity: 0; } }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-transparency: reduce) {
  .nav.scrolled, .nav.open, .nav-links, .subnav {
    background: #000;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------- collapsing ladder ---------- */

@media (max-width: 734px) {
  :root { --pad-band: clamp(48px, 9vw, 64px); }
}

/* ---------- intake form (intake.html, send-form.html) ----------
   Structure is contractually fixed; restyled with the interface tokens:
   pill buttons, 48px hairline fields, 18px panels, focus ring. */

.intake-form fieldset { border: 0; }
.intake-form fieldset:disabled { opacity: 0.45; }
.intake-form .field { margin-bottom: 24px; max-width: 65ch; }
.intake-form .field > label,
.intake-form .qlabel {
  display: block;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.intake-form .req::after { content: " *"; color: var(--accent); }
.intake-form .hint { font-size: 14px; letter-spacing: var(--ls-small); color: var(--text-dim); margin-top: 8px; }

.intake-form input:not([type="radio"]):not([type="checkbox"]),
.intake-form select,
.intake-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-box);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: 16px;
  letter-spacing: var(--ls-small);
}
.intake-form textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.intake-form input:focus,
.intake-form select:focus,
.intake-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); }
.intake-form input::placeholder,
.intake-form textarea::placeholder { color: var(--text-dim); }
.intake-form input:read-only { color: var(--text-muted); border-style: dashed; }

.intake-form .choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
  font-size: 16px;
  letter-spacing: var(--ls-small);
  color: var(--text-secondary);
}
.intake-form .choice input { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--accent); }
.intake-form .choice-row { display: flex; flex-wrap: wrap; gap: 8px 28px; }

.intake-form .cat-picker input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.intake-form .cat-tabs { display: flex; flex-wrap: wrap; gap: 12px; }
.intake-form .cat-tabs label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid var(--border-default);
  border-radius: 9999px;
  background: var(--surface-card);
  color: var(--text-secondary);
  font-family: var(--font-text);
  font-size: 15px;
  letter-spacing: var(--ls-small);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.intake-form .cat-tabs label:hover { border-color: var(--accent); }
.intake-form .cat-picker input:checked + input + input + .cat-tabs label[for="cat-t"],
.intake-form .cat-picker input + input:checked + input + .cat-tabs label[for="cat-n"],
.intake-form .cat-picker input + input + input:checked + .cat-tabs label[for="cat-tn"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  font-weight: 600;
}
.intake-form .cat-picker input:focus-visible ~ .cat-tabs label { box-shadow: var(--ring-focus); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.status-box {
  display: none;
  margin: 24px 0 0;
  max-width: 65ch;
  padding: 14px 18px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-box);
  font-weight: 600;
}
.status-box a.btn { display: inline-flex; margin-top: 14px; }

.tc-intro { max-width: 65ch; margin-bottom: 24px; }
.tc-intro p { color: var(--text-secondary); }
.tc-updated {
  font-size: 14px;
  letter-spacing: var(--ls-small);
  color: var(--text-dim);
  margin-top: 10px;
}
.tc-doc {
  max-width: 65ch;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  background: var(--surface-card);
  padding: clamp(20px, 3vw, 28px);
  transition: border-color 240ms ease;
}
.tc-doc:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.tc-doc.read-through { border-color: var(--accent); }
.agreement .clause + .clause { margin-top: 28px; }
.agreement h3 {
  display: flex;
  gap: 10px;
  font-size: 17px;
  letter-spacing: var(--ls-body);
  color: var(--text-primary);
  margin-bottom: 10px;
}
.agreement .clause-n { color: var(--accent); flex-shrink: 0; }
.agreement ul.sq { gap: 10px; }
.agreement ul.sq li { font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.tc-accept { max-width: 65ch; margin-top: 28px; }

.intake-form input[type="file"] {
  padding: 8px;
  min-height: 48px;
}
.intake-form input[type="file"]::file-selector-button {
  min-height: 32px;
  padding: 6px 16px;
  margin-right: 12px;
  border: 1px solid var(--accent);
  border-radius: 9999px;
  background: transparent;
  color: var(--accent);
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: var(--ls-small);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.intake-form input[type="file"]::file-selector-button:hover { background: var(--surface-highlight); color: var(--accent-hover); }
.intake-form button.btn { cursor: pointer; }

.fee-panel {
  max-width: 65ch;
  margin-bottom: 28px;
  background: var(--surface-highlight);
  border: 1px solid var(--accent);
  border-radius: var(--r-card);
  padding: clamp(20px, 3vw, 28px);
}
.fee-panel .num { color: var(--accent); margin-bottom: 16px; }
.fee-panel dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; }
.fee-panel dt {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  align-self: baseline;
}
.fee-panel dd { margin: 0; font-weight: 600; color: var(--text-primary); }
.fee-panel dd.big { font-size: 21px; font-family: var(--font-display); }

/* intake pages keep their .section shells (public pages use .band/.wrap now) */
.section {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) var(--pad-x);
}

/* ---------- intake reader controls: light theme + larger text ---------- */
/* inert everywhere until a page sets data-theme/data-text on <html>; only
   intake.html ships the toggle. Light values re-map the :root tokens. */
html[data-theme="light"] {
  background: #fff;
  color-scheme: light;
  --bg-canvas: #FFFFFF;
  --surface-card: #F4F4F1;
  --surface-highlight: #FAEEEC;
  --text-primary: #1C1C1A;
  --text-secondary: #45463F;
  --text-muted: #5C5D55;
  --text-dim: #6E6F67;
  --accent: #C0362B;
  --accent-hover: #A82D23;
  --border-default: #D8D8D2;
  --mark-off: #B5B6B0;
  --frost-bg: rgba(252, 252, 250, 0.72);
  --shadow-product: 0 2px 8px rgba(0, 0, 0, 0.08), 0 24px 60px rgba(28, 28, 26, 0.12);
  --ring-focus: 0 0 0 3px rgba(192, 54, 43, 0.4);
}
[data-theme="light"] .hero { background: var(--bg-canvas); }
/* accent fills keep readable ink on the darker light-mode red */
[data-theme="light"] .btn { color: #fff; }
[data-theme="light"] .btn:hover { color: #fff; }
[data-theme="light"] .btn.ghost { color: var(--accent); }
[data-theme="light"] #pay-status a.btn { color: #fff; }
[data-theme="light"] .intake-form .cat-picker input:checked + input + input + .cat-tabs label[for="cat-t"],
[data-theme="light"] .intake-form .cat-picker input + input:checked + input + .cat-tabs label[for="cat-n"],
[data-theme="light"] .intake-form .cat-picker input + input + input:checked + .cat-tabs label[for="cat-tn"] { color: #fff; }

html[data-text="lg"] body { zoom: 1.15; }

.reader-ctl { display: flex; gap: 8px; margin-left: auto; }
.reader-ctl button {
  font: 600 14px/1 var(--font-text);
  letter-spacing: var(--ls-small);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 9999px;
  padding: 8px 14px;
  min-height: 36px;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.reader-ctl button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.reader-ctl button:hover { border-color: var(--accent); }
.reader-ctl button:focus-visible { outline: none; box-shadow: var(--ring-focus); }