/* ══════════════════════════════════════════
   FocusMath — shared stylesheet
   Used by index.html and how-it-works.html
══════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --red: #C41E3A;
  --red-dim: rgba(196,30,58,0.22);
  --black: #080808;
  --white: #FAFAFA;
  --text-dark: #0A0A0A;
  --text-muted: #2a2a2a;
  --font:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Montserrat', -apple-system, sans-serif;
  --nav-h: 58px;
  --nav-top: 14px;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --ease-out: cubic-bezier(0,0,0.2,1);
  /* Layered shadow system */
  --sd1: 0 2px 10px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  --sd2: 0 8px 28px rgba(0,0,0,.11), 0 2px 7px rgba(0,0,0,.06);
  --dk1: 0 2px 14px rgba(0,0,0,.28), 0 1px 4px rgba(0,0,0,.16);
  --dk2: 0 12px 42px rgba(0,0,0,.42), 0 4px 12px rgba(0,0,0,.22);

  /* ── FONT SIZES ── */
  --t-display:  clamp(42px, 8.6vw, 116px);   /* hero title only */
  --t-h2:       clamp(28px, 4vw, 46px);     /* section titles */
  --t-h3:       clamp(19px, 2.2vw, 25px);   /* sub-headings */
  --t-body-lg:  18px;
  --t-body:     16px;
  --t-caption:  13px;
  --t-micro:    12px;                       /* uppercase labels and tags */
  --t-price:    clamp(40px, 5vw, 52px);     /* price amounts */
  --t-body-sm:  14px;                       /* mobile floor for text inside cards */

  /* ── LINE HEIGHTS ── */
  --lh-display:  1.02;
  --lh-heading:  1.12;
  --lh-h3:       1.20;
  --lh-h4:       1.28;
  --lh-body-lg:  1.6;
  --lh-body:     1.6;
  --lh-caption:  1.5;
  --lh-overline: 1.1;

  /* ── LETTER SPACING ── */
  --ls-display:  -0.035em;
  --ls-heading:  -0.025em;
  --ls-h3:       -0.015em;
  --ls-h4:       -0.010em;
  --ls-body:     -0.006em;
  --ls-caption:  0.01em;
  --ls-micro:    0.14em;

  /* ── LAYOUT ── */
  --w-text:    64ch;     /* paragraphs */
  --w-content: 1080px;   /* grids */
  --w-narrow:  720px;    /* single-column blocks */
  --radius:    22px;     /* every card */
  --pad-block: clamp(80px, 10vw, 128px);
  --gutter:    clamp(20px, 7vw, 100px);
  --ambient-clear: clamp(80px, 10vw, 140px);   /* orbs/blobs/symbols fade out this far from every section edge */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); background: var(--black); color: var(--white); overflow-x: clip; max-width: 100%; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul { list-style: none; }
em, i { font-style: normal; }
strong, b { font-weight: 600; }
img, iframe, video { max-width: 100%; height: auto; }
input, select, textarea { font-size: var(--t-body); }
a, button, summary, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--red); outline-offset: 3px;
}
section { content-visibility: auto; contain-intrinsic-size: auto 800px; }
#home { content-visibility: visible; }

/* ── Logo mark (inline <svg><use href="#fm-mark"></svg>, always red) ── */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo-mark { display: block; width: auto; aspect-ratio: 321 / 341; color: var(--red); overflow: visible; }

/* ── Shared uppercase label style ── */
.sec-label, .price-tag, .motto-num, .tl-time, .note-label,
.prof-role, .prof-row-label, .feat-badge, .f-tagline {
  font-family: var(--font);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--ls-micro);
  line-height: var(--lh-overline);
  text-transform: uppercase;
}

/* ══ NAV ══ */
.nav {
  position: fixed; top: calc(var(--nav-top) + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 200;
  width: clamp(520px,56vw,820px);
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(14px,1.8vw,24px);
  background: rgba(8,8,8,0.20);
  backdrop-filter: blur(60px) saturate(250%) brightness(1.05);
  -webkit-backdrop-filter: blur(60px) saturate(250%) brightness(1.05);
  border: 0.5px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 34px rgba(0,0,0,.22), 0 3px 9px rgba(0,0,0,.13);
  transition: background .7s var(--ease), border-color .7s var(--ease), box-shadow .7s var(--ease);
}
.nav.over-light {
  background: rgba(6,6,6,0.54);
  border-color: rgba(255,255,255,0.07);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 14px 44px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.22);
}
.nav.scrolled { background: rgba(8,8,8,0.40); }
.nav.over-light.scrolled { background: rgba(5,5,5,0.70); }
.nav-logo { display: flex; align-items: center; height: 100%; padding: 0 4px; }
.nav-logo .logo-mark { height: 29px; }
.nav-links { display: flex; align-items: center; gap: clamp(10px,1.6vw,22px); }
.nav-links a { font-size: var(--t-body); font-weight: 500; letter-spacing: var(--ls-body); color: rgba(255,255,255,.60); transition: color .3s; white-space: nowrap; }
.nav-links a:hover { color: var(--white); }
.nav-links .nav-cta {
  display: inline-block; padding: 7px 18px; background: var(--red); color: var(--white);
  border-radius: 100px; font-weight: 600;
  transition: background .3s, box-shadow .3s;
  box-shadow: 0 4px 15px rgba(196,30,58,.38);
}
.nav-links .nav-cta:hover { background: #a8192f; box-shadow: 0 6px 22px rgba(196,30,58,.50); }
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 4px; cursor: pointer; }
.hamburger span { display: block; width: 20px; height: 1.5px; background: var(--white); border-radius: 2px; transition: all .3s var(--ease); }
.mobile-nav {
  display: none; position: fixed;
  top: calc(var(--nav-top) + env(safe-area-inset-top) + var(--nav-h) + 8px); left: 50%; transform: translateX(-50%);
  width: clamp(320px,56vw,820px); z-index: 199;
  background: rgba(7,7,7,.92); backdrop-filter: blur(48px) saturate(200%); -webkit-backdrop-filter: blur(48px) saturate(200%);
  border: 0.5px solid rgba(255,255,255,.09); border-radius: 20px;
  box-shadow: 0 16px 48px rgba(0,0,0,.44);
  flex-direction: column; gap: 2px; padding: 13px 15px 17px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: 11px 13px; font-size: var(--t-body); font-weight: 600; letter-spacing: var(--ls-body); color: rgba(255,255,255,.68); border-radius: 10px; transition: all .22s; }
.mobile-nav a:hover { background: rgba(255,255,255,.06); color: var(--white); }
.mobile-nav .m-cta { margin-top: 6px; background: var(--red); color: var(--white); text-align: center; font-weight: 600; border-radius: 11px; }

/* ══ AMBIENT ORB SYSTEM ══ */
.dark-sec { background: var(--black); position: relative; overflow: hidden; }
.atmo { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: none; }
.orb-a {
  width: clamp(420px,68vw,840px); height: clamp(420px,68vw,840px);
  background: radial-gradient(circle, rgba(196,30,58,.30) 0%, rgba(196,30,58,.10) 38%, transparent 72%);
  top: -22%; left: -16%; animation: dA 42s ease-in-out infinite;
}
.orb-b {
  width: clamp(270px,46vw,580px); height: clamp(270px,46vw,580px);
  background: radial-gradient(circle, rgba(196,30,58,.20) 0%, rgba(196,30,58,.07) 38%, transparent 72%);
  bottom: -16%; right: -14%; animation: dB 56s ease-in-out infinite;
}
.orb-c {
  width: clamp(200px,30vw,420px); height: clamp(200px,30vw,420px);
  background: radial-gradient(circle, rgba(175,14,36,.17) 0%, rgba(175,14,36,.06) 38%, transparent 72%);
  top: 36%; left: 52%; animation: dA 70s ease-in-out infinite reverse;
}
@keyframes dA {
  0%,100% { transform: translate(0,0) scale(1); }
  25%  { transform: translate(28px,-22px) scale(1.04); }
  55%  { transform: translate(-18px,32px) scale(.97); }
  80%  { transform: translate(14px,-10px) scale(1.02); }
}
@keyframes dB {
  0%,100% { transform: translate(0,0) scale(1); }
  30%  { transform: translate(-26px,18px) scale(1.03); }
  60%  { transform: translate(22px,-28px) scale(.98); }
  85%  { transform: translate(-10px,12px) scale(1.01); }
}
.rel { position: relative; z-index: 1; }

/* Light-section ambient blobs */
.light-blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.lb { position: absolute; border-radius: 50%; filter: none; }
.lb-a {
  width: clamp(280px,40vw,520px); height: clamp(280px,40vw,520px);
  background: radial-gradient(circle, rgba(196,30,58,.12) 0%, rgba(196,30,58,.05) 40%, transparent 74%);
  top: -8%; right: -6%; animation: dA 60s ease-in-out infinite;
}
.lb-b {
  width: clamp(220px,32vw,420px); height: clamp(220px,32vw,420px);
  background: radial-gradient(circle, rgba(160,20,50,.09) 0%, rgba(160,20,50,.04) 40%, transparent 74%);
  bottom: -8%; left: -6%; animation: dB 78s ease-in-out infinite;
}
.lb-c {
  width: clamp(180px,26vw,360px); height: clamp(180px,26vw,360px);
  background: radial-gradient(circle, rgba(100,10,30,.07) 0%, transparent 74%);
  top: 45%; left: 40%; animation: dA 90s ease-in-out infinite reverse;
}

/* ══ SECTION ══ */
.sec {
  padding-block: var(--pad-block);
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.light-sec { background: var(--white); color: var(--text-dark); position: relative; overflow: hidden; }

/* ══ REVEAL ══ */
.r { opacity: 0; transform: translateY(28px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); }
.r.on { opacity: 1; transform: none; }
.d1 { transition-delay: .10s; } .d2 { transition-delay: .20s; }
.d3 { transition-delay: .30s; } .d4 { transition-delay: .42s; }
h2 { text-wrap: balance; }
p { text-wrap: pretty; }   /* no one-word last lines */

/* ══════════════════════
   HERO
══════════════════════ */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  text-align: center;
  /* Equal top and bottom padding, so the centre of the content box is the centre of the viewport. */
  padding-block: calc(var(--nav-top) + var(--nav-h) + 16px);
  padding-left: max(22px, env(safe-area-inset-left));
  padding-right: max(22px, env(safe-area-inset-right));
}
@supports (height: 100dvh) { .hero { min-height: 100dvh; } }

/* Hero layout: three rows, 1fr / lockup / 1fr. The two 1fr rows are always equal, so the
   mark + title lockup sits exactly at the vertical centre of the viewport; the tagline
   hangs in the bottom row and never pushes the lockup upward.
   The lockup's box is trimmed to its visible ink (the mark's viewBox padding above, the empty
   descender space under the title), so the centred box is the visible mark-top → title-bottom. */
.hero-inner {
  --ht: var(--t-display);                  /* title size */
  --mk: clamp(104px, 15vw, 232px);         /* mark height */
  flex: 1; width: 100%;
  position: relative; z-index: 2;
  display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center;
}
.hero-lockup { grid-row: 2; display: flex; flex-direction: column; align-items: center; }
.hero-below  { grid-row: 3; align-self: start; display: flex; flex-direction: column; align-items: center; }
.hero-mark {
  height: var(--mk);
  margin-top: calc(var(--mk) * -0.0176);                     /* viewBox padding above the ink */
  margin-bottom: calc(18px - var(--ht) * 0.128);           /* ≈20px visible gap to the caps */
  /* The mark is skewed: its ink centroid sits 3.6% of its width left of the box centre.
     Shift it so it reads as centred over "FocusMath". */
  transform: translateX(3.6%);
}
.hero-title {
  font-family: var(--font-display);
  font-size: var(--ht);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--white);
  margin: 0 0 calc(var(--ht) * -0.143);                      /* box ends at the baseline */
  transform: translateX(-0.025em);                            /* centre the ink, not the advance box */
}
.hero-title .r-word { color: var(--red); }
.hero-tagline {
  margin-top: clamp(22px, 2.5vw, 34px);                       /* ≈24–36px visible gap */
  margin-right: -0.24em;                                      /* cancel the tracking after the last letter */
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255,255,255,.50);
}

/* ── Floating math accents ── */
/* --hm-ink is the stroke colour as an RGB triplet: white on dark sections,
   .hero-math--ink switches a block to black for light sections. */
.hero-math { --hm-ink: 255,255,255; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-math--ink { --hm-ink: 0,0,0; }
.hm {
  position: absolute; font-family: var(--font-display); font-weight: 600;
  line-height: 1; user-select: none; color: transparent;
  -webkit-text-stroke: 1px rgba(var(--hm-ink), var(--hm-a, .18));
}
.hm-pi   { top: 13%; left: 7%;    font-size: clamp(64px,9vw,138px); -webkit-text-stroke-color: rgba(var(--hm-ink),.155); animation: hmDriftA 46s ease-in-out infinite; }
.hm-inf  { bottom: 17%; right: 8%; font-size: clamp(46px,7vw,98px);  -webkit-text-stroke-color: rgba(196,30,58,.28);   animation: hmDriftB 54s ease-in-out infinite; }
.hm-sqrt { top: 20%; right: 12%;  font-size: clamp(42px,6vw,82px);  -webkit-text-stroke-color: rgba(var(--hm-ink),.14); animation: hmDriftA 60s ease-in-out infinite reverse; }
.hm-eq   { bottom: 9%; left: 11%; font-size: clamp(36px,5vw,68px);  -webkit-text-stroke-color: rgba(var(--hm-ink),.195); animation: hmDriftB 50s ease-in-out infinite reverse; }
.hm-shape { position: absolute; border-radius: 50%; }
.hm-circle {
  width: clamp(140px,18vw,260px); height: clamp(140px,18vw,260px);
  border: 1px solid rgba(var(--hm-ink),.11); top: 5%; right: -5%;
  animation: hmSpin 95s linear infinite;
}
.hm-axis {
  width: clamp(110px,15vw,210px); height: clamp(110px,15vw,210px);
  left: -5%; bottom: 3%; animation: hmSpin 120s linear infinite reverse;
}
.hm-axis::before, .hm-axis::after { content: ''; position: absolute; background: rgba(var(--hm-ink),.10); }
/* Extra shapes in the same 1px family: a plain ring, a line drawing (inline SVG sine
   curve or triangle, drawn in currentColor) and a small dot grid. Each section places
   them with slot classes (.hm-s1 … .hm-s5) further down. */
.hm-ring { border: 1px solid rgba(var(--hm-ink), var(--hm-a, .11)); }
.hm-line { position: absolute; color: rgba(var(--hm-ink), var(--hm-a, .15)); }
.hm-line svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hm-line path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hm-dots {
  position: absolute;
  background-image: radial-gradient(circle, rgba(var(--hm-ink), var(--hm-a, .22)) 1px, transparent 1.6px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent);
          mask-image: radial-gradient(closest-side, #000 35%, transparent);
}
.hm-axis::before { top: 50%; left: 0; width: 100%; height: 1px; }
.hm-axis::after { left: 50%; top: 0; width: 1px; height: 100%; }
/* Same symbols on a white section: black strokes, faint red ∞ */
.light-sec .hm-pi   { -webkit-text-stroke-color: rgba(0,0,0,.11); }
.light-sec .hm-inf  { -webkit-text-stroke-color: rgba(196,30,58,.22); }
.light-sec .hm-sqrt { -webkit-text-stroke-color: rgba(0,0,0,.10); }
.light-sec .hm-eq   { -webkit-text-stroke-color: rgba(0,0,0,.14); }
.light-sec .hm-circle { border-color: rgba(0,0,0,.10); }
.light-sec .hm-axis::before, .light-sec .hm-axis::after { background: rgba(0,0,0,.10); }
@keyframes hmDriftA { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(14px,-10px) rotate(2deg); } }
@keyframes hmDriftB { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-12px,12px) rotate(-2deg); } }
@keyframes hmSpin   { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .hm-pi   { font-size: clamp(46px,16vw,80px); left: 4%; }
  .hm-inf  { font-size: clamp(34px,12vw,58px); right: 5%; }
  .hm-sqrt { display: none; }
  .hm-eq   { font-size: clamp(28px,9vw,42px); left: 7%; }
  .hm-circle { width: clamp(110px,40vw,180px); height: clamp(110px,40vw,180px); }
  .hm-axis   { width: clamp(90px,32vw,150px);  height: clamp(90px,32vw,150px); }
}

/* ── Math accents per section ──
   Every block is a .hero-math layer: clipped to its section, masked to transparent near
   both section edges, behind content, aria-hidden. .hm-set marks the newer blocks; on
   phones only their .hm-keep children stay (placed in gaps, never behind text). */

/* Tutors: the cards got shorter, so the ∞ moves down below the card row */
#professors .hm-inf { bottom: 9%; }

/* Hero: a second, smaller ring, a sine curve and a triangle outline */
#home .hm-s1 { width: clamp(64px,7vw,108px); height: clamp(64px,7vw,108px); top: 60%; left: 7%; }
#home .hm-s2 { width: clamp(150px,15vw,230px); height: clamp(34px,3.4vw,52px); top: 77%; right: 17%; animation: hmDriftA 64s ease-in-out infinite; }
#home .hm-s3 { width: clamp(46px,4.4vw,68px); height: clamp(40px,3.9vw,60px); top: 15%; left: 36%; --hm-a: .13; animation: hmDriftB 58s ease-in-out infinite; }

/* Our value (dark, short): the default edge fade would swallow most of this section */
#value .hero-math { --ambient-clear: clamp(36px, 5vw, 70px); }
#value .hm-s1 { top: 26%; left: 10%; font-size: clamp(48px,6vw,92px); --hm-a: .16; animation: hmDriftA 52s ease-in-out infinite; }
#value .hm-s2 { width: clamp(90px,11vw,160px); height: clamp(90px,11vw,160px); top: 16%; right: 6%; }
#value .hm-s3 { width: clamp(80px,8vw,120px); height: clamp(64px,6vw,90px); bottom: 14%; right: 16%; --hm-a: .20; }

/* Story (light, black ink) */
#story .hm-s1 { top: 15%; left: 8%; font-size: clamp(56px,7vw,104px); --hm-a: .12; animation: hmDriftA 56s ease-in-out infinite; }
#story .hm-s2 { width: clamp(130px,14vw,200px); height: clamp(32px,3.2vw,46px); top: 50%; right: 4%; --hm-a: .14; }
#story .hm-s3 { width: clamp(96px,9vw,136px); height: clamp(80px,7vw,104px); bottom: 20%; left: 5%; --hm-a: .18; }
#story .hm-s4 { bottom: 16%; right: 9%; font-size: clamp(40px,5vw,70px); --hm-a: .13; animation: hmDriftB 60s ease-in-out infinite; }

/* Beliefs (light, black ink): around the edges and the motto cards, never under card text */
#about .hm-s1 { top: 11%; left: 6%; font-size: clamp(50px,6.4vw,96px); --hm-a: .12; animation: hmDriftA 58s ease-in-out infinite; }
#about .hm-s2 { width: clamp(100px,12vw,170px); height: clamp(100px,12vw,170px); top: 4%; right: 1.5%; left: auto; bottom: auto; animation: hmSpin 140s linear infinite; }
#about .hm-s3 { bottom: 10%; right: 2.5%; font-size: clamp(40px,4.6vw,68px); --hm-a: .12; animation: hmDriftB 52s ease-in-out infinite; }
#about .hm-s4 { width: clamp(96px,9vw,128px); height: clamp(80px,7vw,96px); bottom: 7%; left: 1.5%; --hm-a: .18; }

/* Pricing (dark): only in the side margins, clear of the price cards */
#plans .hm-s1 { top: 9%; left: 8%; font-size: clamp(56px,7vw,110px); --hm-a: .14; animation: hmDriftA 50s ease-in-out infinite; }
#plans .hm-s2 { width: clamp(120px,14vw,220px); height: clamp(120px,14vw,220px); top: 3%; right: -3%; }
#plans .hm-s3 { width: clamp(46px,4.4vw,66px); height: clamp(40px,3.9vw,58px); top: 54%; left: 3%; --hm-a: .13; animation: hmDriftB 62s ease-in-out infinite; }
#plans .hm-s4 { width: clamp(80px,8vw,120px); height: clamp(64px,6vw,90px); bottom: 18%; right: 2.5%; --hm-a: .18; }

/* Footer (dark): just two, very light */
.footer .hm-s1 { top: 22%; left: 9%; font-size: clamp(44px,5vw,76px); --hm-a: .10; }
.footer .hm-s2 { width: clamp(90px,10vw,150px); height: clamp(90px,10vw,150px); bottom: 16%; right: 7%; --hm-a: .08; }

/* Tablets: the side margins are too narrow for the desktop placements, so each new set
   keeps one small symbol inside the left gutter. */
@media (min-width: 769px) and (max-width: 1000px) {
  .hm-set > :not(.hm-keep) { display: none; }
  :is(#value, #story, #about, #plans, .footer) > .hm-set > .hm-keep { left: 1.5%; right: auto; font-size: 40px; }
}

/* ══════════════════════
   SHARED HEADINGS
══════════════════════ */
.sec-label { margin-bottom: 10px; }
.sec-label.lgt { color: var(--red); }
.sec-label.drk { color: rgba(255,255,255,.34); }
.sec-title {
  font-family: var(--font-display);
  font-size: var(--t-h2); font-weight: 700; letter-spacing: var(--ls-heading); line-height: var(--lh-heading);
  color: inherit;
  text-wrap: balance;
}
.sec-title.lgt { color: var(--text-dark); }
.sec-title.drk { color: var(--white); }
.sec-head, .beliefs-header, .professors-header, .trust-header, .faq-header, .subjects-intro {
  max-width: var(--w-content); margin: 0 auto clamp(28px,4vw,44px);
  text-align: center; position: relative; z-index: 1;
}

/* ══════════════════════
   ABOUT + BELIEFS
══════════════════════ */
.about-sec { background: var(--white); color: var(--text-dark); position: relative; overflow: hidden; }
.mission-wrap { max-width: var(--w-narrow); margin: 0 auto clamp(36px,5vw,64px); text-align: center; position: relative; z-index: 1; }
.mission-big {
  font-family: var(--font-display);
  font-size: var(--t-h2); font-weight: 700;
  line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--text-dark);
  text-wrap: balance;
}
.hl { font-family: var(--font-display); font-weight: 700; color: var(--red); }

.mottos-grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(248px,1fr));
  gap: 14px; max-width: var(--w-content); margin: 0 auto; position: relative; z-index: 1;
}
.motto-card {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 0.5px solid rgba(0,0,0,.065);
  border-radius: var(--radius); padding: 28px 24px;
  box-shadow: var(--sd2), 0 0 0 .5px rgba(255,255,255,.90) inset;
  transition: transform .38s var(--ease), box-shadow .38s var(--ease), background .38s;
  cursor: default;
}
.motto-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse at 50% 100%, rgba(196,30,58,.07) 0%, transparent 68%);
  pointer-events: none; opacity: .6; transition: opacity .38s;
}
.motto-card:hover { transform: scale(1.03); box-shadow: var(--sd2), 0 16px 44px rgba(196,30,58,.08); background: rgba(255,255,255,.92); }
.motto-card:hover::before { opacity: 1; }
.motto-num { color: var(--red); margin-bottom: 10px; position: relative; z-index: 1; }
.motto-text { font-family: var(--font); font-size: var(--t-body); font-weight: 400; line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--text-dark); position: relative; z-index: 1; }

/* ══════════════════════
   STORY
══════════════════════ */
.story-center { max-width: var(--w-narrow); margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.story-head { margin-bottom: clamp(20px,2.8vw,36px); }
.story-lead {
  font-family: var(--font); font-size: var(--t-body-lg); line-height: var(--lh-body-lg); letter-spacing: var(--ls-body); font-weight: 400;
  color: var(--text-muted); max-width: var(--w-text); margin: 14px auto 0;
}
.video-box {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16/9; background: #0c0c0c; box-shadow: var(--sd2);
}
.vid-ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px;
  background: linear-gradient(145deg,#0e0e0e 0%,#1a0008 100%);
  cursor: pointer; transition: background .34s;
}
.vid-ph:hover { background: linear-gradient(145deg,#141414 0%,#220010 100%); }
.vid-play {
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(196,30,58,.88);
  display: flex; align-items: center; justify-content: center;
  transition: transform .34s var(--ease), box-shadow .34s;
  box-shadow: 0 0 38px rgba(196,30,58,.38);
}
.vid-ph:hover .vid-play { transform: scale(1.1); background: var(--red); box-shadow: 0 0 54px rgba(196,30,58,.52); }
.story-cta { text-align: center; margin-top: clamp(24px, 3vw, 32px); }
.vid-label { font-size: var(--t-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: rgba(255,255,255,.32); }
/* Phone only: the story frame becomes a vertical 9:16 box for the TikTok-style clip. Desktop keeps 16:9. */
@media (max-width: 768px) {
  .video-box { aspect-ratio: 9/16; width: min(100%, 320px); margin: 0 auto; }
}

/* ══════════════════════
   TUTORS
══════════════════════ */
.profs-intro {
  max-width: var(--w-text); margin: 0 auto clamp(36px,5vw,56px); position: relative; z-index: 1;
  font-family: var(--font); font-size: var(--t-body-lg); line-height: var(--lh-body-lg); letter-spacing: var(--ls-body);
  text-align: center;
}
.profs-intro p { color: rgba(255,255,255,.72); font-weight: 400; }
.profs-intro p + p { margin-top: 14px; }

.profs-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  column-gap: 18px; row-gap: 18px;
  max-width: var(--w-content); margin: 0 auto; position: relative; z-index: 1;
}
/* Flexbox base (fallback where subgrid isn't supported) */
.prof-card {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.054);
  backdrop-filter: blur(36px) saturate(180%); -webkit-backdrop-filter: blur(36px) saturate(180%);
  border: 0.5px solid rgba(255,255,255,.10);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--dk1);
  transition: border-color .4s var(--ease), background .4s var(--ease);
  cursor: default;
}
.prof-card:hover { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.064); }
.prof-photo { position: relative; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* Photo sits above the colour + initials fallback (z 2) and under the edge fade (z 3);
   when it fails to load it hides itself and the fallback fills the same panel. */
/* Scaling from the top edge keeps the head in frame and leaves no gap at the top. --photo-zoom
   tunes each photo so the heads come out the same size and eyes sit at the same height. */
.prof-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; z-index: 2; transform: translateX(var(--card-x, 0)) scale(var(--photo-zoom, 1)); transform-origin: 50% 0; }
.prof-bg { position: absolute; inset: 0; }
.bg0 { background: linear-gradient(150deg,#220209 0%,#3e060f 55%,#100002 100%); }
.bg1 { background: linear-gradient(150deg,#0a0018 0%,#1a0036 55%,#070012 100%); }
.bg2 { background: linear-gradient(150deg,#001a08 0%,#002e16 55%,#001006 100%); }
.bg3 { background: linear-gradient(150deg,#1e1000 0%,#341e00 55%,#0e0800 100%); }
.prof-icon-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.prof-init { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 800; letter-spacing: -.04em; color: rgba(255,255,255,.88); line-height: 1; }
.prof-circle {
  width: 64px; height: 64px; border-radius: 50%;
  border: 0.5px solid rgba(255,255,255,.13);
  display: flex; align-items: center; justify-content: center;
  background: rgba(196,30,58,.13); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin-bottom: 6px;
}
.prof-edge { position: absolute; inset: 0; z-index: 3; background: radial-gradient(ellipse at 50% 50%, transparent 36%, rgba(8,8,8,.88) 100%); pointer-events: none; }
.prof-info {
  flex: 1; display: flex; flex-direction: column;
  padding: 18px 24px 22px;
  border-top: 0.5px solid rgba(255,255,255,.07);
}
.prof-name { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.15; font-weight: 700; letter-spacing: var(--ls-h3); color: var(--white); }
.prof-role { color: var(--red); margin-top: 6px; }
.prof-row { margin-top: 12px; }
.prof-row-label { color: rgba(255,255,255,.38); margin-bottom: 5px; }
.prof-row-val { font-family: var(--font); font-size: var(--t-caption); line-height: 1.5; letter-spacing: var(--ls-body); color: rgba(255,255,255,.76); }
.t-short { display: none; }   /* phone-length version of a card row, swapped in at ≤640px */
.prof-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 14px; }
.tag {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 4px 8px;
  border-radius: 100px; background: rgba(255,255,255,.052); border: 0.5px solid rgba(255,255,255,.09); color: rgba(255,255,255,.52);
}
/* Subgrid: photo / name / role / Best with / Background / tags line up across cards */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 641px) {
    .prof-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
    .prof-info { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
    .prof-name { align-self: end; }   /* one-line names sit right above the role line */
    .prof-tags { align-self: end; align-content: flex-end; }
  }
}
/* Cards show name, role, "Best with" and tags; Background lives in the pop-up only */
.prof-card .prof-row-bg { display: none; }
.prof-more { align-self: flex-end; justify-self: end; margin-top: 16px; }

/* "See more" / "Close": small outline pill. The visible pill is 28px; ::before extends
   the tap area to 44px without changing the look. */
.see-more {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; padding: 0 12px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.16); background: transparent;
  font-family: var(--font); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .005em;
  color: rgba(255,255,255,.85); white-space: nowrap; cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.see-more::before { content: ''; position: absolute; left: -6px; right: -6px; top: -8px; bottom: -8px; }
.see-more:hover, .see-more:active, .see-more:focus-visible {
  border-color: rgba(255,255,255,.32); background-color: rgba(196,30,58,.14); color: var(--white);
}
.see-more svg { flex-shrink: 0; transition: transform .25s var(--ease); }
.see-more:hover svg { transform: translateX(2px); }

/* ── Tutor pop-up ──
   Centred dialog, 4:5 at minimum. Photo panel is 45% of that 4:5 height; the box grows
   with the text up to 85vh, then the text scrolls inside and the Close row stays put. Opens with a blur pop-in from the pressed button
   (transform-origin set in JS); only opacity, transform and filter animate. */
.tutor-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; }
.tutor-modal[hidden] { display: none; }
.tm-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transition: opacity .3s var(--ease);
}
.tm-dialog {
  --tmw: min(90vw, 380px);
  --tmh: calc(var(--tmw) * 1.25);               /* 4:5 */
  position: relative; width: var(--tmw);
  min-height: min(85vh, var(--tmh)); max-height: 85vh;   /* grows past 4:5 only if the text needs it */
  display: flex; flex-direction: column; overflow: hidden;
  background: #141416;
  border: 0.5px solid rgba(255,255,255,.12); border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.35);
  outline: none;
  opacity: 0; transform: scale(.92); filter: blur(8px);
  transition: opacity .38s cubic-bezier(.2,.8,.2,1), transform .38s cubic-bezier(.2,.8,.2,1), filter .38s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform, filter;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
@supports (height: 85svh) { .tm-dialog { min-height: min(85svh, var(--tmh)); max-height: 85svh; } }
@media (min-width: 641px) { .tm-dialog { --tmw: 420px; } }
.tutor-modal.is-open .tm-backdrop { opacity: 1; }
.tutor-modal.is-open .tm-dialog { opacity: 1; transform: scale(1); filter: blur(0); }
.tutor-modal.is-closing .tm-backdrop { transition-duration: .26s; }
.tutor-modal.is-closing .tm-dialog { transition-duration: .26s; transition-timing-function: cubic-bezier(.8,0,.8,.2); }

.tm-photo { position: relative; flex: 0 0 calc(var(--tmh) * .45); max-height: 38vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* The pop-up panel is wide and short, so show the whole person centred, iPad included, instead of the card's zoom. */
.tm-photo .prof-img { object-position: center var(--photo-pos, center); transform: scale(var(--modal-zoom, 1)) translateX(var(--photo-x, 0)); }
.tm-photo .prof-edge {
  background:
    linear-gradient(to bottom, transparent 52%, #141416 100%),
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(8,8,8,.35) 100%);
}
.tm-x {
  position: absolute; top: 6px; right: 6px; z-index: 4;
  width: 44px; height: 44px; display: grid; place-items: center;
  color: rgba(255,255,255,.88);
}
.tm-x::before {
  content: ''; position: absolute; inset: 7px; border-radius: 50%;
  background: rgba(8,8,8,.48); border: 0.5px solid rgba(255,255,255,.14);
  transition: background-color .25s var(--ease);
}
.tm-x:hover::before { background: rgba(8,8,8,.68); }
.tm-x svg { position: relative; }
.tm-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 22px 4px;
}
.tm-body .prof-name { font-size: 21px; }
.tm-body .prof-row { margin-top: 12px; }
.tm-body .prof-row-val { font-size: var(--t-caption); }
.tm-body .t-full { display: inline; }
.tm-body .t-short { display: none; }
.tm-body .prof-tags { margin-top: 14px; padding-top: 0; }
/* Pop-up tags, colour-coded: years of tutoring in neon purple, subjects in the site red, geometry in a muted neon green. */
.tm-body .tag { backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.tm-body .tag-years { color: #d9a6ff; background: rgba(176,64,255,.18); border-color: rgba(176,64,255,.55); }
.tm-body .tag-subject { color: #ff8a98; background: color-mix(in srgb, var(--red) 20%, transparent); border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.tm-body .tag-geo { color: #9af5b8; background: rgba(90,214,130,.16); border-color: rgba(90,214,130,.5); }
.tm-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; padding: 10px 16px 14px; }

/* Page pinned under the pop-up (iOS-safe scroll lock; JS sets top and restores the position) */
body.tm-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

.profs-outro {
  max-width: var(--w-text); margin: clamp(36px,5vw,56px) auto 0; position: relative; z-index: 1;
  text-align: center; font-family: var(--font); font-size: var(--t-body); line-height: var(--lh-body); color: rgba(255,255,255,.68);
}
.profs-outro strong { color: rgba(255,255,255,.86); }

/* ══════════════════════
   LESSON PLANS (dark)
══════════════════════ */
.plans-sec { background: var(--black); position: relative; overflow: hidden; }
.plans-atmo { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.plans-blob { position: absolute; border-radius: 50%; filter: none; }
.plans-blob-a {
  width: clamp(320px,50vw,620px); height: clamp(320px,50vw,620px);
  background: radial-gradient(circle, rgba(196,30,58,.09) 0%, transparent 72%);
  top: -12%; left: -10%; animation: dA 24s ease-in-out infinite;
}
.plans-blob-b {
  width: clamp(260px,40vw,500px); height: clamp(260px,40vw,500px);
  background: radial-gradient(circle, rgba(140,15,40,.07) 0%, transparent 72%);
  bottom: -14%; right: -12%; animation: dB 32s ease-in-out infinite;
}
.plans-wrap { max-width: var(--w-content); margin: 0 auto; position: relative; z-index: 1; }
.plans-head { text-align: center; margin-bottom: clamp(20px,2.6vw,28px); }
.plans-intro {
  max-width: var(--w-text); margin: 0 auto clamp(28px,4vw,44px); position: relative; z-index: 1;
  text-align: center; font-family: var(--font); font-size: var(--t-body-lg); line-height: var(--lh-body-lg); letter-spacing: var(--ls-body); font-weight: 400; color: rgba(255,255,255,.68);
}
.plans-cta { text-align: center; margin-bottom: clamp(36px,5vw,56px); }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); column-gap: 18px; row-gap: 18px; max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
.price-card {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.054);
  backdrop-filter: blur(36px) saturate(180%); -webkit-backdrop-filter: blur(36px) saturate(180%);
  border: 0.5px solid rgba(255,255,255,.10);
  border-radius: var(--radius); padding: 28px 24px 28px;
  box-shadow: var(--dk1);
  transition: border-color .4s var(--ease), background .4s var(--ease);
  cursor: default;
}
.price-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(158deg, rgba(255,255,255,.035) 0%, transparent 52%); pointer-events: none; }
.pricing-grid .price-card { display: flex; flex-direction: column; }
.pricing-grid .price-card:hover { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.064); }
.pricing-grid .price-card.feat { border-color: rgba(196,30,58,.38); }
.pricing-grid .price-card.feat:hover { border-color: rgba(196,30,58,.60); }
.badge-slot { min-height: 26px; margin-bottom: 18px; display: flex; align-items: flex-start; }
.feat-badge {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--white); background: var(--red);
  padding: 6px 11px; border-radius: 100px;
  box-shadow: 0 3px 12px rgba(196,30,58,.34);
}
.feat-badge.neutral { background: rgba(255,255,255,.12); box-shadow: none; }
.price-tag { color: rgba(196,30,58,.85); margin-bottom: 8px; }
.price-name { font-family: var(--font-display); font-size: var(--t-h3); line-height: var(--lh-h4); font-weight: 700; letter-spacing: var(--ls-h3); color: var(--white); margin-bottom: 14px; }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px; margin-bottom: 6px; }
.price-per { margin-left: 5px; font-family: var(--font); font-size: var(--t-body-sm); font-weight: 500; letter-spacing: var(--ls-body); color: rgba(255,255,255,.52); }
.price-sym { font-family: var(--font-display); font-size: var(--t-body); font-weight: 700; color: var(--white); align-self: flex-start; margin-top: 7px; }
.price-amt { font-family: var(--font-display); font-size: var(--t-price); font-weight: 800; letter-spacing: -.04em; color: var(--white); line-height: 1; }
.price-dur { font-size: var(--t-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: rgba(255,255,255,.52); }
.price-dur .stu-hl { color: var(--red); font-weight: 600; }
.price-div { width: 100%; height: .5px; background: rgba(255,255,255,.08); margin: 20px 0; }
.price-desc { font-family: var(--font); font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: 400; color: rgba(255,255,255,.68); position: relative; z-index: 1; }
.price-desc strong { color: rgba(255,255,255,.84); display: block; margin-bottom: 4px; font-size: var(--t-body); line-height: var(--lh-body); }
.price-desc .pd-friend { display: inline; color: var(--red); font-size: inherit; margin-bottom: 0; }
.price-desc .price-pack { display: block; margin-top: 12px; color: rgba(255,255,255,.70); }
.price-desc .price-pack b { color: var(--white); }
.price-desc .price-hr { display: block; margin-top: 6px; font-size: var(--t-caption); color: rgba(255,255,255,.40); }
.price-btn {
  display: block; width: 100%; text-align: center;
  margin-top: 24px; padding: 13px;
  border-radius: 11px; font-size: var(--t-caption); font-weight: 600;
  transition: all .35s var(--ease); cursor: pointer; letter-spacing: .01em;
  position: relative; overflow: hidden;
}
.pricing-grid .price-btn { margin-top: auto; }
.pricing-grid .price-desc { margin-bottom: 24px; }
.btn-ghost { background: rgba(255,255,255,.058); color: rgba(255,255,255,.76); border: 0.5px solid rgba(255,255,255,.11); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: rgba(255,255,255,.10); color: var(--white); border-color: rgba(255,255,255,.22); }
.btn-red { background: var(--red); color: var(--white); box-shadow: 0 4px 18px rgba(196,30,58,.32); border: none; }
.btn-red:hover, .btn-red:focus-visible { background: #a8192f; box-shadow: 0 6px 26px rgba(196,30,58,.40); }
.price-seemore { display: none; }
/* Subgrid: badge / tag / name / price / duration / divider / details / button line up across cards */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 641px) {
    .pricing-grid .price-card { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; }
    .pricing-grid .price-btn { align-self: end; }
  }
}
.plans-note {
  max-width: var(--w-text); margin: clamp(36px,5vw,56px) auto 0; position: relative; z-index: 1; text-align: center;
}
.plans-note p { font-family: var(--font); font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: 400; color: rgba(255,255,255,.68); margin-bottom: 13px; }
.plans-note p:last-child { margin-bottom: 0; }
.plans-note strong { color: rgba(255,255,255,.86); }
.plans-more { text-align: center; margin-top: 24px; position: relative; z-index: 1; }
.text-link { color: var(--red); font-weight: 600; border-bottom: 1px solid rgba(196,30,58,.40); padding-bottom: 1px; transition: border-color .3s; }
.text-link:hover { border-color: var(--red); }

/* ══════════════════════
   CTA / BOOK
══════════════════════ */
.cta-wrap { text-align: center; max-width: var(--w-narrow); margin: 0 auto; }
/* The booking section is wider: Cal.com only switches to its side-by-side desktop layout
   (which fits 640px with no inner scroll) when the iframe is wider than ~768px. */
.cta-wrap.book-wrap { max-width: var(--w-content); }
.book-wrap .cta-title { max-width: var(--w-narrow); margin-left: auto; margin-right: auto; }
.cta-title {
  font-family: var(--font-display); font-size: var(--t-h2);
  font-weight: 700; line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: inherit; margin-bottom: 18px;
  text-wrap: balance;
}
.cta-title .free-hl {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.cta-sub {
  font-family: var(--font); font-size: var(--t-body); line-height: var(--lh-body);
  color: rgba(255,255,255,.68); max-width: var(--w-text); margin: 0 auto 36px;
}
.light-sec .cta-sub { color: var(--text-muted); }
.cta-center { text-align: center; }
.cta-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 38px;
  background: var(--red);
  border-radius: 100px;
  box-shadow: 0 4px 18px rgba(196,30,58,.32);
  font-size: var(--t-body); font-weight: 600; color: var(--white);
  transition: all .36s var(--ease); cursor: pointer; letter-spacing: .01em;
  position: relative; overflow: hidden;
}
.cta-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.10) 50%, transparent 72%);
  transform: translateX(-110%); transition: transform .55s var(--ease);
}
.cta-btn:hover { background: #a8192f; box-shadow: 0 6px 26px rgba(196,30,58,.40); }
.cta-btn:hover::after { transform: translateX(110%); }
.cta-arrow { width: 21px; height: 21px; border-radius: 50%; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.book-card {
  --book-pad: 16px;
  max-width: var(--w-content); margin: 0 auto; padding: var(--book-pad); text-align: left;
  background: #FFFFFF;
  border: 0.5px solid rgba(0,0,0,.065);
  border-radius: var(--radius);
  box-shadow: var(--sd2), 0 0 0 .5px rgba(255,255,255,.90) inset;
}
.booking-sub {
  font-family: var(--font-display); font-size: var(--t-h3); line-height: var(--lh-h4); letter-spacing: var(--ls-h3); font-weight: 700;
  color: var(--text-dark); margin-bottom: 4px; padding: 10px 8px 0;
}
.booking-hint {
  font-size: var(--t-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption);
  color: var(--text-muted); opacity: .8; margin-bottom: 16px; padding: 0 8px;
}
/* Cal.com inline embed. The shell holds the calendar's usual height until Cal.com reports
   linkReady, then lets the embed's own (auto-resizing) height take over. */
.cal-shell {
  --cal-hold: 580px;
  position: relative; min-height: var(--cal-hold);
  border-radius: calc(var(--radius) - var(--book-pad)); overflow: hidden;
}
.cal-shell.is-ready { min-height: 0; }
.cal-inline { width: 100%; }
.cal-ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; text-align: center;
  font-size: var(--t-caption); line-height: var(--lh-caption); color: var(--text-muted);
}
.cal-shell.is-ready .cal-ph { display: none; }
.cal-ph-spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(196,30,58,.18); border-top-color: var(--red);
  animation: calSpin .9s linear infinite;
}
@keyframes calSpin { to { transform: rotate(360deg); } }
.cal-ph-link { display: none; }
.cal-shell.is-slow .cal-ph-link { display: inline; }

/* ══════════════════════
   HOW IT WORKS PAGE
══════════════════════ */
.how-hero {
  min-height: 42vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--nav-top) + var(--nav-h) + 56px) var(--gutter) calc(var(--pad-block) / 2);
}
.how-hero-in { max-width: var(--w-narrow); margin: 0 auto; }
.how-hero-lead { font-family: var(--font); font-size: var(--t-body-lg); line-height: var(--lh-body-lg); color: rgba(255,255,255,.62); max-width: var(--w-text); margin: 14px auto 0; }

.tl { max-width: var(--w-narrow); margin: 0 auto clamp(40px,5.5vw,64px); position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
.tl-item {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px 24px;
  background: rgba(255,255,255,.04); border: 0.5px solid rgba(255,255,255,.08); border-radius: var(--radius);
}
.tl-num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(196,30,58,.15); border: 0.5px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-caption); color: var(--red);
}
.tl-body { flex: 1; padding-top: 2px; }
.tl-time { color: rgba(255,255,255,.44); margin-bottom: 8px; line-height: 1.4; }
.tl-text { font-family: var(--font); font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: 400; color: rgba(255,255,255,.74); max-width: var(--w-text); }
.note-card { max-width: var(--w-narrow); margin: 0 auto; text-align: left; position: relative; z-index: 1; padding: 28px; }
.note-label { color: var(--red); margin-bottom: 16px; line-height: 1.4; }
.note-card p { font-family: var(--font); font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: 400; color: rgba(255,255,255,.68); margin-bottom: 12px; max-width: var(--w-text); }
.note-card p:last-child { margin-bottom: 0; }

.subjects-grid-row {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; max-width: var(--w-content); margin: 0 auto;
  position: relative; z-index: 1;
}
.subjects-grid-row .motto-card { padding: 24px 22px; }
.subjects-copy {
  max-width: var(--w-text); margin: clamp(32px,4.4vw,48px) auto 0; text-align: center; position: relative; z-index: 1;
  font-family: var(--font); font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: 400; color: var(--text-muted);
}
.subjects-copy p + p { margin-top: 14px; }
.subjects-note {
  display: block; margin-top: 28px; padding: 18px 22px;
  border-radius: var(--radius); background: rgba(0,0,0,.035); border: 0.5px solid rgba(0,0,0,.06);
  color: #5a5a5a;
}

.trust-list {
  list-style: none;
  max-width: var(--w-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  position: relative;
  z-index: 1;
}
.trust-list li {
  padding: 26px 24px;
  background: rgba(255,255,255,.04); border: 0.5px solid rgba(255,255,255,.08); border-radius: var(--radius);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: rgba(255,255,255,.70);
}
.trust-list li::before {
  content: ''; display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--red); margin-bottom: 16px;
}
.trust-list li strong {
  display: block; margin-bottom: 6px;
  color: var(--white);
  font-weight: 600;
}

.sched-intro { max-width: var(--w-text); margin: 0 auto clamp(30px,4vw,44px); text-align: center; position: relative; z-index: 1; }
.sched-intro p { font-family: var(--font); font-size: var(--t-body-lg); line-height: var(--lh-body-lg); letter-spacing: var(--ls-body); font-weight: 400; color: var(--text-muted); }
.sched-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 14px; max-width: var(--w-narrow); margin: 0 auto; position: relative; z-index: 1; }
.sched-outro { max-width: var(--w-text); margin: clamp(32px,4.4vw,48px) auto 0; text-align: center; position: relative; z-index: 1; }
.sched-outro p { font-family: var(--font); font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: 400; color: var(--text-muted); }
.sched-outro strong { color: var(--text-dark); }
.sched-outro p + p { margin-top: 12px; }
#schedule .price-card, #packs .price-card {
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 0.5px solid rgba(0,0,0,.065);
  box-shadow: var(--sd2), 0 0 0 .5px rgba(255,255,255,.90) inset;
}
#schedule .price-tag { color: var(--red); margin-bottom: 12px; }
#schedule .price-desc { color: var(--text-muted); }
#schedule .price-desc strong { color: var(--text-dark); }

.faq-list { max-width: var(--w-narrow); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; }
.faq-item {
  background: rgba(255,255,255,.054);
  backdrop-filter: blur(36px) saturate(180%); -webkit-backdrop-filter: blur(36px) saturate(180%);
  border: 0.5px solid rgba(255,255,255,.10);
  border-radius: var(--radius); padding: 20px 24px;
  box-shadow: var(--dk1);
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.faq-item:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.064); }
.faq-item summary {
  cursor: pointer; font-family: var(--font-display); font-size: var(--t-body); font-weight: 700; line-height: var(--lh-h4); letter-spacing: var(--ls-h4); color: var(--white);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-family: var(--font); font-size: var(--t-body-lg); font-weight: 500; line-height: 1; color: var(--red); transition: transform .3s; flex-shrink: 0; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { font-family: var(--font); font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: 400; color: rgba(255,255,255,.72); margin-top: 14px; max-width: var(--w-text); }
.faq-item p + p { margin-top: 10px; }

/* ══════════════════════
   PAY PAGE
══════════════════════ */
.pay-hero { min-height: 36vh; }
.pay-packs, .pay-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
  max-width: 760px; margin: 0 auto; position: relative; z-index: 1;
}
#packs .price-tag { color: var(--red); margin-bottom: 12px; }
#packs .price-sym, #packs .price-amt { color: var(--text-dark); }
#packs .price-per, #packs .price-dur { color: #5a5a5a; }
.pay-note {
  max-width: var(--w-text); margin: clamp(28px,4vw,40px) auto 0; text-align: center; position: relative; z-index: 1;
  font-family: var(--font); font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--text-muted);
}
.pay-note a { color: var(--red); font-weight: 600; }
.pay-option { display: flex; flex-direction: column; }
.pay-option-title {
  font-family: var(--font-display); font-size: var(--t-h3); line-height: var(--lh-h4); font-weight: 700; letter-spacing: var(--ls-h3);
  color: var(--white); margin-bottom: 8px;
}
.pay-option p { font-family: var(--font); font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: rgba(255,255,255,.68); }
.pay-option .pay-small { margin-top: auto; padding-top: 16px; font-size: var(--t-caption); line-height: var(--lh-caption); color: rgba(255,255,255,.52); }
.pay-btn { align-self: flex-start; margin-top: 22px; }
.pay-ph-line { margin-top: 12px; }
.pay-dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; margin-top: 20px; font-size: var(--t-caption); line-height: var(--lh-caption); }
.pay-dl dt { color: rgba(255,255,255,.44); }
.pay-dl dd { color: rgba(255,255,255,.86); min-width: 0; }
/* Unfinished values: loud on purpose, so nobody mistakes them for real details */
.ph {
  display: inline-block; max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere;
  color: #F2C14E; background: rgba(242,193,78,.08);
  border: 1px dashed rgba(242,193,78,.6); border-radius: 6px; padding: 2px 6px;
}

/* ══════════════════════
   FOOTER
══════════════════════ */
.footer {
  position: relative;
  background: var(--black);
  padding: var(--pad-block) var(--gutter);
  padding-bottom: calc(clamp(40px,5vw,64px) + env(safe-area-inset-bottom));
}
.footer.join-prev { padding-top: calc(var(--pad-block) / 2); }
.footer-in { max-width: var(--w-content); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; position: relative; z-index: 2; }
.f-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.f-brand .logo-mark { height: 36px; }
.f-logo { font-family: var(--font-display); font-size: var(--t-body-lg); font-weight: 700; letter-spacing: -.02em; color: var(--white); line-height: 1.2; }
.f-logo span { color: var(--red); }
.f-tagline { color: rgba(255,255,255,.34); line-height: 1.6; }
.f-social, .f-contact { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.f-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,.044); border: 0.5px solid rgba(255,255,255,.085);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); cursor: pointer;
}
.f-icon:hover { background: rgba(255,255,255,.09); color: var(--white); border-color: rgba(255,255,255,.18); }
.f-md-link, .f-email {
  display: inline-flex; align-items: center; height: 42px; padding: 0 18px;
  border-radius: 100px; background: rgba(255,255,255,.044); border: 0.5px solid rgba(255,255,255,.085);
  color: rgba(255,255,255,.60); font-size: var(--t-caption); font-weight: 500; letter-spacing: var(--ls-caption);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); cursor: pointer;
}
.f-md-link:hover, .f-email:hover { background: rgba(255,255,255,.09); color: var(--white); border-color: rgba(255,255,255,.18); }
/* Quiet text link to pay.html: small and muted, underlined on hover only */
.f-pay-link {
  font-size: var(--t-caption); line-height: var(--lh-caption); font-weight: 500; letter-spacing: var(--ls-caption);
  color: rgba(255,255,255,.38); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.f-pay-link:hover, .f-pay-link:focus-visible { color: rgba(255,255,255,.70); text-decoration-color: currentColor; }
.f-rule { width: min(100%, var(--w-narrow)); height: 0; border: 0; border-top: 0.5px solid rgba(255,255,255,.10); }
.f-meta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.f-note { font-size: var(--t-caption); line-height: var(--lh-caption); font-weight: 500; letter-spacing: var(--ls-caption); color: rgba(255,255,255,.38); }
.f-copy { font-size: var(--t-caption); line-height: var(--lh-caption); font-weight: 500; letter-spacing: var(--ls-caption); color: rgba(255,255,255,.22); }

/* ══ SECTION BOUNDARIES ══
   Dark ↔ light: a plain straight edge. Each section paints only its own flat background;
   overflow:hidden keeps its ambient layer inside it, and the ambient layer is masked to
   transparent near both edges so no orb, blob or symbol shows a faint band at the line.
   Same colour (Story → About, Tutors → Plans): .join-next / .join-prev halve the padding on
   each side, so the gap equals one section padding and the two read as one area.
   content-visibility:auto paints each section as its own layer; at a fractional boundary the
   page background can show through as a hairline, so neighbours overlap by 1px. */
section + section, section + footer { margin-top: -1px; }
.sec.join-prev { padding-top: calc(var(--pad-block) / 2); }
.sec.join-next { padding-bottom: calc(var(--pad-block) / 2); }
.atmo, .light-blobs, .plans-atmo, .hero-math {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--ambient-clear), #000 calc(100% - var(--ambient-clear)), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 var(--ambient-clear), #000 calc(100% - var(--ambient-clear)), transparent);
}

/* ══ OUR VALUE (dark, joined to the hero) ══
   A short section: its own padding, halved on the side that joins the hero (same
   join-prev technique as Tutors → Plans). One faint orb, masked inside the section. */
.value-sec { --vp: clamp(64px, 8vw, 104px); padding-block: var(--vp); }
.value-sec.join-prev { padding-top: calc(var(--vp) / 2); }
.value-sec .orb-a { opacity: .45; top: -30%; left: 50%; margin-left: calc(clamp(420px,68vw,840px) / -2); }
.value-wrap { max-width: var(--w-narrow); margin: 0 auto; text-align: center; }
.value-text {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--white);
  text-wrap: balance;
}
.value-accent { display: block; color: var(--red); font-style: normal; text-wrap: balance; }   /* balanced on its own, no one-word last line */

/* ══ RESPONSIVE ══ */
@media (max-width: 960px) {
  .profs-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }

  .nav { width: min(calc(100vw - 32px), 480px); padding: 0 16px; }
  .mobile-nav { width: min(calc(100vw - 32px), 480px); }


  /* — Tutor cards: horizontal mobile layout (photo left, info right) — */
  /* Phone cards: photo panel left (104px, full card height), info right, top-aligned.
     Name, role, the short "Best with" line, tags, then "See more" on the right.
     Card height comes from the content. Scoped to .prof-card so the pop-up, which reuses
     these classes, keeps the desktop typography. */
  .profs-grid { grid-template-columns: 1fr; row-gap: 12px; }
  .prof-card { flex-direction: row; align-items: stretch; border-radius: 20px; }
  .prof-card .prof-photo { aspect-ratio: auto; flex: 0 0 104px; width: 104px; }
  .prof-card .prof-edge {
    /* soft fade into the card on the right, light vignette elsewhere */
    background:
      linear-gradient(to right, transparent 58%, rgba(26,26,28,.92) 100%),
      radial-gradient(ellipse at 40% 45%, transparent 55%, rgba(8,8,8,.45) 100%);
  }
  .prof-card .prof-icon-wrap { gap: 0; }
  .prof-card .prof-circle { width: 44px; height: 44px; margin-bottom: 6px; }
  .prof-card .prof-circle svg { width: 20px; height: 20px; }
  .prof-card .prof-init { font-size: 22px; font-weight: 700; }
  .prof-card .prof-info { flex: 1; min-width: 0; border-top: none; padding: 16px 16px 12px; }
  .prof-card .prof-name { font-size: 17px; line-height: 1.2; }
  .prof-card .prof-role { margin-top: 3px; font-size: 10px; }
  .prof-card .prof-row-label { display: none; }
  .prof-card .prof-row { margin-top: 6px; }
  .prof-card .prof-row-val {
    font-size: 13px; line-height: 1.25; color: rgba(255,255,255,.70);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .prof-card .prof-tags { margin-top: 10px; padding-top: 0; gap: 5px; }
  .prof-card .tag { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; font-size: 11px; line-height: 1; }
  .prof-card .prof-more { margin-top: 8px; }

  /* — Pricing cards: compact mobile layout —
     Scoped to .pricing-grid .price-card only: #schedule and the how-it-works note
     card reuse the bare .price-card class for non-collapsible info cards. */
  .pricing-grid { row-gap: 14px; }
  .pricing-grid .price-card { cursor: pointer; padding: 26px 24px; }
  .pricing-grid .price-card .badge-slot,
  .pricing-grid .price-card .price-tag,
  .pricing-grid .price-card .price-div,
  .pricing-grid .price-card .price-desc,
  .pricing-grid .price-card .price-btn { display: none; }
  .pricing-grid .price-card.expanded .badge-slot { display: flex; }
  .pricing-grid .price-card.expanded .badge-slot:empty { display: none; }
  .pricing-grid .price-card.expanded .price-tag,
  .pricing-grid .price-card.expanded .price-div,
  .pricing-grid .price-card.expanded .price-desc,
  .pricing-grid .price-card.expanded .price-btn { display: block; }
  .pricing-grid .price-desc { margin-bottom: 0; }
  .pricing-grid .price-card.expanded .price-btn { margin-top: 20px; }
  .price-name { margin-bottom: 10px; }
  .price-row { margin-bottom: 2px; }
  .price-seemore {
    /* the 44px touch box pads the text ~14px above and below; let that overlap the card
       padding so the visible spacing matches the top of the card */
    display: inline-flex; align-self: flex-start; margin-top: 2px; margin-bottom: -14px;
    font-size: var(--t-caption); font-weight: 600; color: var(--red);
    text-decoration: underline; text-decoration-color: rgba(196,30,58,.40);
    text-decoration-thickness: 1px; text-underline-offset: 4px;
  }
  .pricing-grid .price-card.expanded .price-seemore { margin-top: 6px; }

  .cta-btn { padding: 13px 22px; font-size: var(--t-body-sm); }   /* fits one line in a phone column */
  .book-card { --book-pad: 10px; }

  /* — Booking: only the title above the calendar; the subtitle moves below it — */
  #book .book-wrap { display: flex; flex-direction: column; }
  #book .cta-title { order: 1; }
  #book .book-card { order: 2; transition-delay: 0s; }
  #book .cta-sub { order: 3; margin: 24px auto 0; }
  #book .booking-sub, #book .booking-hint { display: none; }
  #book .cal-shell { --cal-hold: 1000px; }

  /* — Tutors: first intro paragraph only, short card rows — */
  .profs-intro-more { display: none; }
  .t-full { display: none; }
  .t-short { display: inline; }

  .subjects-grid-row { grid-template-columns: 1fr; }
  .tl-item { padding: 18px; gap: 14px; }
  .note-card { padding: 22px 20px; }
  .trust-list li { padding: 22px 20px; }

  /* — Mobile typography floors — */
  .prof-row-val, .price-desc, .faq-item p, .tl-text, .note-card p,
  .plans-note p, .motto-text { font-size: var(--t-body-sm); }
  .tag { font-size: var(--t-micro); }
  .faq-item { padding: 16px 20px; }
}
@media (max-width: 460px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════
   MOBILE PERFORMANCE + CORRECTNESS
   (desktop is untouched above this point)
══════════════════════ */
@media (max-width: 768px) {
  /* 1.2 — one ambient layer per section on phones */
  .orb-b, .orb-c, .lb-b, .lb-c, .plans-blob-b { display: none; }
  .orb-a, .lb-a, .plans-blob-a { opacity: .7; }

  /* 1.3 — backdrop-filter is the most expensive property on mobile Safari;
     solid fills stand in so the cards don't look flat */
  .price-card, .prof-card, .faq-item, .note-card, .motto-card, .prof-circle,
  .nav, .mobile-nav, .btn-ghost, .cta-btn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .price-card, .prof-card, .faq-item, .note-card { background: rgba(28,28,30,.92); }
  .motto-card { background: rgba(255,255,255,.94); }
  #schedule .price-card, #packs .price-card { background: rgba(255,255,255,.94); }
  /* No blur on phones, so the nav and menu must be (near-)solid in every state —
     otherwise headings and buttons show through them crisply as you scroll. */
  .nav, .nav.scrolled, .nav.over-light, .nav.over-light.scrolled { background: rgba(10,10,10,.94); }
  .mobile-nav { background: #0b0b0b; }

  /* 1.4 — orbs stay, they just hold still */
  .orb-a, .lb-a, .plans-blob-a { animation: none !important; }
  .hm, .hm-shape { animation: none !important; }

  /* 1.5 — fewer floating math symbols */
  .hm-sqrt, .hm-eq, .hm-circle, .hm-axis { display: none; }
  .hm-pi  { font-size: clamp(46px,16vw,80px); left: 4%; opacity: .6; }
  .hm-inf { font-size: clamp(34px,12vw,58px); right: 5%; opacity: .6; }
  #home .hm-s2, #home .hm-s3 { display: none; }
  #home .hm-s1 { width: 54px; height: 54px; top: 25%; left: auto; right: 14%; }
  .hm-set > :not(.hm-keep) { display: none; }
  /* The one symbol kept per section, small and in a gap beside or between text blocks.
     Anchored to the section edge whose content above/below doesn't reflow. */
  #value .hm-s1  { top: 22%; left: 4%; font-size: 40px; }
  #story .hm-s1  { top: 60px; left: 7%; font-size: 36px; }
  #about .hm-s1  { top: auto; bottom: 512px; left: auto; right: 6%; font-size: 36px; }
  #plans .hm-s1  { top: auto; bottom: 410px; left: auto; right: 8%; font-size: 32px; }
  .footer .hm-s1 { top: 86px; left: 9%; font-size: 36px; }
  /* Existing ∞ / π: keep them clear of the tutor cards and of the booking text */
  #professors .hm-pi  { top: 52px; }
  #professors .hm-inf { bottom: 196px; }
  #book .hm-pi  { top: 70px; }
  #book .hm-inf { top: 96px; bottom: auto; }

  /* Hero glow on phones. The single desktop-sized orb sat centred ~30px from the top,
     inside the edge fade and under the nav, so it was masked out; the other two were
     hidden above. Here: two smaller static orbs, centred well inside the visible band.
     The section clips them (overflow: hidden), so no horizontal scroll. */
  #home .orb-a {
    width: 115vw; height: 115vw; top: 6%; left: -42vw; opacity: 1;
    background: radial-gradient(circle, rgba(196,30,58,.34) 0%, rgba(196,30,58,.12) 40%, transparent 70%);
  }
  #home .orb-b {
    display: block; width: 100vw; height: 100vw; top: auto; bottom: 8%; right: -44vw;
    background: radial-gradient(circle, rgba(196,30,58,.26) 0%, rgba(196,30,58,.09) 40%, transparent 70%);
    animation: none !important;
  }

  /* 2.4 — 44×44 touch targets. Text-style triggers (price-seemore)
     use inline-flex so they gain height without stretching to the full width
     of their container and losing their underline shape. */
  .mobile-nav a, .price-btn, .cta-btn { min-height: 44px; }
  .price-seemore {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .f-md-link, .f-email { height: 44px; }
  .faq-item summary { min-height: 44px; padding: 10px 0; }
  .f-icon { width: 44px; height: 44px; }
  .hamburger { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }

  /* 2.9 — mobile type and spacing floors */
  body { font-size: var(--t-body); line-height: 1.6; }
  .hero-inner { --ht: clamp(36px, 10vw, 56px); }
  p { max-width: 100%; }
}

/* Very narrow phones: text reflows into the gaps these two sit in */
@media (max-width: 359px) {
  #professors .hm-inf, #plans .hm-s1 { display: none; }
}

/* 2.8 — stop the iOS rubber-band flash (overscroll-behavior-y on body is set above) */
.mobile-nav { overscroll-behavior: contain; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .r { opacity: 1 !important; transform: none !important; }
}