/* ==========================================================================
   Yoga from the Roots — site.css
   The one stylesheet for every page. Plain CSS: no preprocessor, no build.

   How it is organised (search for the number to jump to a section):
     1. Colours, fonts and sizes ("tokens")      11. Teachers
     2. Base                                      12. Quotes, founding deal, guarantee
     3. Type                                      13. Price card
     4. Buttons, chips, links                     14. FAQ
     5. Nav (top bar) and skip link               15. Email capture, photo band
     6. Home hero                                 16. Shop and product page
     7. Course hero and videos                    17. Footer
     8. Sections, bands, trust strip              18. Sticky buy bar (phones)
     9. Cards and grids                           19. Small pages (free guide, help, legal…)
    10. Module path, curriculum, buy box          20. Phone density

   The look ("direction C", chosen by the owner 2026-10-13): river-teal and
   late-sun amber taken from the photograph, a near-white page, and Manrope
   for everything, set bold and tight for headlines.

   To change a colour everywhere, change it once in section 1.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens: every colour, font and size the site uses, in one place
   -------------------------------------------------------------------------- */
:root {
  --paper: #FBFAF7;        /* page ground: near-white with a hint of warmth */
  --paper-2: #F2EFE8;      /* quiet band */
  --paper-3: #E9E4DA;      /* input borders, hairline on paper-2 */
  --ink: #1B1F1E;          /* text; green-black, not pure black */
  --ink-2: #5D635F;        /* secondary text (5.9:1 on paper) */
  --ink-3: #666C68;        /* captions, small print (4.7:1 on the quiet band) */
  --line: #E3DFD6;         /* hairlines */
  --brand: #1F5A5E;        /* river teal: primary buttons, links (white on it: 7.8:1) */
  --brand-deep: #153F42;   /* hover */
  --brand-tint: #E4EEEC;   /* soft fill behind teal chips */
  --accent: #D08A2E;       /* late-sun amber: on photographs and dark bands only */
  --accent-ink: #8A5A17;   /* amber when it is text on the page (5.7:1) */
  --accent-tint: #F8EBD6;  /* soft fill behind amber chips */
  --on-brand: #FFFFFF;
  --on-dark: #F4F1EA;
  --on-dark-2: #BFC7C4;
  --dark: #15201F;         /* photo shade, dark band */
  --ok: #26683F;           /* tick marks */
  --ok-tint: #E3F1E9;

  --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display-weight: 700;
  --display-track: -0.035em;
  --display-lh: 1.0;

  --r-card: 16px;          /* card corners */
  --r-btn: 999px;          /* pill buttons */
  --r-img: 14px;           /* photo corners */
  --r-chip: 999px;

  --shadow-card: 0 1px 2px rgba(27, 31, 30, 0.04), 0 10px 30px rgba(27, 31, 30, 0.06);
  --shadow-float: 0 12px 40px rgba(27, 31, 30, 0.18);

  --measure: 1200px;       /* widest the content gets */
  --gutter: 20px;          /* space at the screen edge on phones */
  --nav-h: 64px;
  --tap: 44px;             /* smallest comfortable tap target */
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

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

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 760px; }
.wrap--mid { max-width: 960px; }

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

/* Inline icons from the shared icon set at the top of each page. */
.icon-inline { width: 18px; height: 18px; flex: none; }

/* --------------------------------------------------------------------------
   3. Type
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: var(--display-lh);
  text-wrap: balance;
}
/* The emphasised word in a headline: teal on the page, amber on
   photographs and dark or teal bands. Upright, never italic. */
.display em { font-style: normal; font-weight: inherit; color: var(--brand); }
.hero-home .display em,
.band-photo .display em,
.section--dark .display em,
.section--brand .display em { color: var(--accent); }

.display--xl { font-size: clamp(44px, 8.5vw, 96px); }
.display--l  { font-size: clamp(34px, 5.5vw, 64px); }
.display--m  { font-size: clamp(28px, 4vw, 46px); }
.display--s  { font-size: clamp(24px, 2.6vw, 32px); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; max-width: 60ch; }
.body { color: var(--ink-2); max-width: 65ch; text-wrap: pretty; }
.body strong { color: var(--ink); font-weight: 600; }
.small { font-size: 14px; color: var(--ink-2); }
.tiny { font-size: 13px; color: var(--ink-3); }

.section-head { display: grid; gap: 12px; margin-bottom: 36px; }
.section-head .lede { margin-top: 4px; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .section-head--split > * { grid-column: 1; }
  .section-head--split > .link,
  .section-head--split > .small { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; padding-bottom: 6px; }
}

/* --------------------------------------------------------------------------
   4. Buttons, chips, links
   -------------------------------------------------------------------------- */
.btn,
.payhip-buy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:active, .payhip-buy-button:active { transform: translateY(1px); }
/* Primary: the teal button. A pasted Payhip "Add to cart" button
   (class payhip-buy-button, data-theme="none") gets exactly this look. */
.btn--primary,
.payhip-buy-button { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover,
.payhip-buy-button:hover { background: var(--brand-deep); color: var(--on-brand); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn--outline-light { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.6); }
.btn--outline-light:hover { background: rgba(255,255,255,0.18); }
.btn--lg { min-height: 56px; padding: 0 30px; font-size: 17px; }
.btn--sm { min-height: var(--tap); padding: 0 16px; font-size: 14px; }
.btn--block { width: 100%; }
.btn .price { opacity: .85; font-weight: 500; }
.btn svg { width: 18px; height: 18px; flex: none; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 26px; padding: 0 10px;
  border-radius: var(--r-chip);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  background: var(--brand-tint); color: var(--brand);
}
.chip--accent { background: var(--accent-tint); color: var(--accent-ink); }
.chip--soon { background: transparent; color: var(--ink-2); border: 1px dashed var(--ink-3); }
.chip--ok { background: var(--ok-tint); color: var(--ok); }

.link { color: var(--brand); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.link svg { width: 16px; height: 16px; }

.trust-line { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--ink-2); }
.trust-line li { display: inline-flex; align-items: center; gap: 8px; }
.trust-line svg { width: 16px; height: 16px; color: var(--brand); flex: none; }

/* --------------------------------------------------------------------------
   5. Nav (the bar at the top of every page) and the skip link
   -------------------------------------------------------------------------- */
/* "Skip to content": invisible until a keyboard user presses Tab. */
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  padding: 12px 18px; border-radius: 8px; background: var(--ink); color: #fff;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 250, 247, 0.94);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(12px)) {
  .nav { background: rgba(251, 250, 247, 0.86); backdrop-filter: saturate(160%) blur(12px); }
}
.nav .wrap { display: flex; align-items: center; gap: 16px; min-height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: var(--tap); min-width: 0; }
.brand img { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.brand span {
  font-family: var(--font-display);
  font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 800;
  white-space: nowrap;
}
.nav-links { display: none; margin-left: 12px; gap: 4px; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px;
  font-size: 15px; font-weight: 500; text-decoration: none; border-radius: 8px; opacity: .85;
}
.nav-links a:hover { opacity: 1; background: rgba(27, 31, 30, 0.06); }
.nav-links a[aria-current="page"] { opacity: 1; font-weight: 700; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-actions .members { display: none; font-size: 14px; font-weight: 600; text-decoration: none; padding: 0 10px; min-height: var(--tap); align-items: center; opacity: .85; }
.nav-actions .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); border: 0; background: transparent; border-radius: 8px; cursor: pointer;
}
.burger svg { width: 24px; height: 24px; }
/* The phone menu ("sheet"). Without JavaScript the menu button does nothing,
   so the sheet is shown under the bar instead (see .no-js rule below). */
.nav-sheet { display: none; border-top: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.nav.is-open .nav-sheet { display: block; }
.nav-sheet a { display: flex; align-items: center; min-height: 52px; padding: 0 var(--gutter); text-decoration: none; font-size: 17px; font-weight: 500; border-bottom: 1px solid var(--line); }
.nav-sheet a[aria-current="page"] { font-weight: 700; }
.nav-sheet .sheet-cta { padding: 14px var(--gutter) 18px; }
.nav-sheet .sheet-cta a { border: 0; min-height: 52px; padding: 0 24px; display: flex; justify-content: center; color: var(--on-brand); font-weight: 600; }
/* Under 900px the sticky buy bar carries the buy button, so the bar keeps
   only the name and the menu button: at 390px the three together do not fit. */
@media (max-width: 899px) {
  .nav-actions .btn { display: none; }
  .brand span { font-size: 15px; }
  html:not(.js) .burger { display: none; }
  html:not(.js) .nav-sheet { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); }
  html:not(.js) .nav-sheet a { min-height: var(--tap); border: 0; font-size: 15px; padding: 0 12px; }
  html:not(.js) .nav-sheet .sheet-cta { display: none; }
}
@media (max-width: 359px) { .brand span { font-size: 13px; letter-spacing: 0.03em; } }
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-actions .members { display: inline-flex; }
  .burger { display: none; }
  .nav.is-open .nav-sheet { display: none; }
}

/* Home page only: the bar floats over the photograph and turns solid once
   you scroll. Only when JavaScript runs (html.js); otherwise it stays solid. */
.js .nav--over { position: fixed; left: 0; right: 0; background: transparent; backdrop-filter: none; border-bottom-color: transparent; color: #fff; transition: background-color .2s ease; }
.js .nav--over.is-stuck,
.js .nav--over.is-open { background: rgba(251, 250, 247, 0.96); color: var(--ink); border-bottom-color: var(--line); }
.js .nav--over:not(.is-stuck):not(.is-open) .btn--primary { background: #fff; color: var(--ink); }
.js .nav--over:not(.is-stuck):not(.is-open) .brand span { text-shadow: 0 1px 12px rgba(0,0,0,.35); }

/* --------------------------------------------------------------------------
   6. Home hero: the photograph fills the first screen at every width.
   On phones the copy is anchored below the faces: the top half of the hero
   is photograph only (a 4:5 crop with both faces in its upper third), and the
   shade starts under them. The eyebrow and the three-item trust line give
   way to one short line, so the phone hero stays light.
   -------------------------------------------------------------------------- */
.hero-home { position: relative; display: grid; align-items: end; color: #fff; background: var(--dark); isolation: isolate; min-height: 100svh; }
.hero-home picture { position: absolute; inset: 0; z-index: -2; }
.hero-home picture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero-home::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(21,32,31,.94) 0%, rgba(21,32,31,.78) 28%, rgba(21,32,31,.2) 56%, rgba(21,32,31,.22) 100%);
}
.hero-home .wrap { padding-block: 52svh 28px; }
.hero-home .hero-copy { display: grid; gap: 16px; }
.hero-home .eyebrow { display: none; color: var(--accent); }
.hero-home .display { max-width: 12ch; text-shadow: 0 2px 24px rgba(0,0,0,.3); }
.hero-home .lede { color: rgba(255,255,255,.9); max-width: 48ch; font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-home .trust-short { font-size: 13.5px; color: rgba(255,255,255,.85); }
.hero-home .trust-line { display: none; color: rgba(255,255,255,.85); }
.hero-home .trust-line svg { color: var(--accent); }
.hero-home .btn--primary { background: #fff; color: var(--ink); }
.hero-home .btn--primary:hover { background: var(--paper-2); }
.hero-home .btn--primary .price { color: var(--ink-2); }
@media (max-width: 599px) {
  .hero-home .hero-actions .btn { width: 100%; }
}
@media (min-width: 900px) {
  .hero-home { min-height: 86svh; }
  .hero-home picture img { object-position: 70% 40%; }
  .hero-home::after { background: linear-gradient(to top, rgba(21,32,31,.88) 0%, rgba(21,32,31,.55) 38%, rgba(21,32,31,.12) 70%, rgba(21,32,31,.3) 100%); }
  .hero-home .wrap { padding-block: 160px 72px; }
  .hero-home .hero-copy { gap: 22px; }
  .hero-home .eyebrow { display: block; }
  .hero-home .lede { font-size: clamp(18px, 1.5vw, 21px); }
  .hero-home .trust-short { display: none; }
  .hero-home .trust-line { display: flex; }
}

/* --------------------------------------------------------------------------
   7. Course hero (copy left, trailer right) and tap-to-load videos
   -------------------------------------------------------------------------- */
.hero-course { padding-block: 40px 48px; }
.hero-course .wrap { display: grid; gap: 32px; }
.hero-course .copy { display: grid; gap: 20px; align-content: center; }
.hero-course .display { max-width: 14ch; }
/* A video "poster": a real link to the video. site.js swaps in the player
   when tapped, so nothing loads from Vimeo until someone asks for it. */
.trailer {
  position: relative; display: block; border-radius: var(--r-img); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--dark); color: #fff; text-decoration: none; isolation: isolate;
  box-shadow: var(--shadow-card);
}
.trailer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; z-index: -1; transition: transform .6s ease; }
.trailer:hover img { transform: scale(1.03); }
.trailer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,0) 55%); }
.trailer .play {
  position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; z-index: 1;
  background: rgba(255,255,255,.92); color: var(--ink); display: grid; place-items: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.trailer .play svg { width: 28px; height: 28px; margin-left: 4px; }
.trailer .cap { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; display: grid; gap: 2px; }
.trailer .cap strong { font-size: 15px; }
.trailer .cap span { font-size: 13px; opacity: .9; }
.trailer--wide { aspect-ratio: 16 / 10; }
/* Once tapped: the player sits in a box the same size as the poster. */
.video-frame { position: relative; border-radius: var(--r-img); overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame .video-note { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: #fff; background: var(--dark); font-size: 16px; }
@media (min-width: 900px) {
  .hero-course { padding-block: 64px 72px; }
  .hero-course .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
  .hero-course .trailer { aspect-ratio: 5 / 4; }
}

/* --------------------------------------------------------------------------
   8. Sections, bands, trust strip
   -------------------------------------------------------------------------- */
.section { padding-block: 64px; }
.section--tight { padding-block: 40px; }
.section--band { background: var(--paper-2); }
.section--dark { background: var(--dark); color: var(--on-dark); }
.section--dark .lede, .section--dark .body, .section--dark .small { color: var(--on-dark-2); }
.section--dark .eyebrow { color: var(--accent); }
.section--brand { background: var(--brand); color: var(--on-brand); }
.section--brand .lede, .section--brand .body { color: rgba(255,255,255,.86); }
.section--brand .eyebrow { color: rgba(255,255,255,.8); }
@media (min-width: 900px) { .section { padding-block: 96px; } .section--tight { padding-block: 56px; } }

.trust-strip { border-block: 1px solid var(--line); background: var(--paper); }
.trust-strip .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; padding-block: 22px; }
.trust-strip .wrap > div { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); line-height: 1.35; }
.trust-strip strong { display: block; color: var(--ink); font-weight: 600; }
.trust-strip svg { width: 22px; height: 22px; color: var(--brand); flex: none; margin-top: 1px; }
@media (min-width: 900px) { .trust-strip .wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Thin bar at the top of the shop. */
.ship-bar { background: var(--brand-tint); color: var(--brand); font-size: 14px; font-weight: 600; }
.ship-bar .wrap { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 44px; text-align: center; }
.ship-bar svg { width: 20px; height: 20px; flex: none; }

/* --------------------------------------------------------------------------
   9. Cards and grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: minmax(0, 1fr); }
.grid--3 { grid-template-columns: minmax(0, 1fr); }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--center { align-items: center; }
@media (min-width: 520px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid { gap: 24px; } .grid--wide-gap { gap: 48px; } }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px;
  display: grid; gap: 12px; align-content: start;
  box-shadow: var(--shadow-card);
}
.section--band .card { box-shadow: none; }
.card h3 { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.card .body { font-size: 15.5px; }
.card .icon { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; }
.card .icon svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   10. The module path (home), the curriculum and buy box (course page)
   -------------------------------------------------------------------------- */
.path { display: grid; gap: 14px; }
.path li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }
.path .n { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.path .n--last { background: var(--accent); color: var(--ink); }
.path strong { display: block; font-size: 17px; font-weight: 600; }
.path span.small { display: block; }
.path .meta { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; }
@media (min-width: 900px) {
  .path { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .path li { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; padding: 22px; min-height: 190px; }
  .path .meta { white-space: normal; }
}

/* Curriculum: one fold-out box per module (native <details>, no script). */
.curriculum { display: grid; gap: 12px; }
.module { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); overflow: hidden; }
.module summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 20px; min-height: 72px; }
.module summary .n { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.module[open] summary .n { background: var(--brand); color: var(--on-brand); }
.module summary strong { display: block; font-size: 18px; font-weight: 600; }
.module summary .small { display: block; margin-top: 2px; }
.module summary .meta { display: grid; justify-items: end; gap: 6px; font-size: 13.5px; color: var(--ink-3); white-space: nowrap; }
.module summary .meta svg { width: 20px; height: 20px; color: var(--ink-2); transition: transform .2s ease; }
.module[open] summary .meta svg { transform: rotate(180deg); }
.module .lessons { padding: 0 20px 20px 78px; display: grid; }
.module .lessons li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.module .lessons li > span:last-child { color: var(--ink-3); text-align: right; font-size: 14px; }
.module .lessons li.class { font-weight: 600; }
.module .lessons li.class > span:last-child { color: var(--accent-ink); }
.module .lessons .chip { min-height: 32px; text-decoration: none; }
.module .lessons .link { min-height: 32px; font-size: 14px; }
@media (max-width: 600px) { .module .lessons { padding-left: 20px; } .module summary .meta span:first-child { display: none; } }

.curriculum-totals { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 14.5px; color: var(--ink-2); }
.curriculum-totals strong { color: var(--ink); }

/* Curriculum beside a buy box that stays in view on wide screens. */
.layout-buy { display: grid; gap: 32px; }
.buybox { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); padding: 24px; display: grid; gap: 14px; box-shadow: var(--shadow-card); }
.buybox .price-row { display: flex; align-items: baseline; gap: 10px; }
.buybox .price-big { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 48px; line-height: 1; letter-spacing: -0.03em; }
.buybox .price-row .small { padding-bottom: 6px; }
.buybox ul { display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); }
.buybox ul li { display: flex; gap: 10px; align-items: flex-start; }
.buybox ul svg { width: 18px; height: 18px; color: var(--ok); flex: none; margin-top: 2px; }
.buybox .btn { margin-top: 4px; }
.buybox .tiny { text-align: center; }
@media (min-width: 1000px) {
  .layout-buy { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
  .buybox { position: sticky; top: calc(var(--nav-h) + 20px); }
}

/* --------------------------------------------------------------------------
   11. Teachers
   -------------------------------------------------------------------------- */
.teachers { display: grid; gap: 24px; }
.teacher { display: grid; gap: 16px; align-content: start; }
.teacher figure { border-radius: var(--r-img); overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper-2); }
.teacher img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.teacher h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 24px; letter-spacing: -0.02em; }
.teacher .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.teacher .body { font-size: 16px; }
@media (min-width: 760px) { .teachers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }

/* --------------------------------------------------------------------------
   12. Quotes ("if any of this is you"), founding deal, guarantee
   -------------------------------------------------------------------------- */
.mirror { display: grid; gap: 14px; }
.mirror blockquote { margin: 0; padding: 20px 22px; border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--line); font-size: 18px; font-weight: 500; line-height: 1.4; }
.mirror blockquote::before { content: "\201C"; color: var(--accent-ink); margin-right: 2px; }
.mirror blockquote::after { content: "\201D"; color: var(--accent-ink); }
@media (min-width: 900px) { .mirror { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The founding cohort: our honest stand-in for testimonials, until real
   students have finished and agreed to be quoted. Never invent quotes. */
.deal { display: grid; gap: 20px; border-radius: var(--r-card); padding: 28px; background: var(--paper); border: 1px solid var(--line); }
.deal dl { display: grid; gap: 16px; }
.deal dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 4px; }
.deal dd { margin: 0; color: var(--ink-2); font-size: 16px; }
.deal--stack dl { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 760px) { .deal dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } }

.guarantee { display: grid; gap: 22px; align-items: center; }
.guarantee .seal { width: 112px; height: 112px; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent-ink); display: grid; place-items: center; align-content: center; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.25; padding: 12px; background: var(--paper); }
.guarantee .seal strong { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; text-transform: none; line-height: 1; margin-bottom: 4px; color: var(--ink); }
.guarantee q { font-weight: 500; font-size: clamp(19px, 2vw, 24px); line-height: 1.35; letter-spacing: -0.01em; quotes: "\201C" "\201D"; }
.signatures { display: flex; gap: 28px; flex-wrap: wrap; }
.signatures div { font-size: 14px; color: var(--ink-2); }
.signatures svg { width: 150px; height: 48px; color: var(--ink); }
@media (min-width: 760px) { .guarantee { grid-template-columns: auto minmax(0, 1fr); gap: 40px; } }

/* --------------------------------------------------------------------------
   13. Price card (course page, "The whole course")
   -------------------------------------------------------------------------- */
.pricing { display: grid; gap: 20px; }
.price-card { border-radius: var(--r-card); padding: 32px 28px; background: var(--paper); color: var(--ink); display: grid; gap: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-float); }
.price-card .amount { display: flex; align-items: baseline; gap: 12px; }
.price-card .amount strong { font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -0.04em; }
.price-card .amount span { color: var(--ink-2); font-size: 15px; max-width: 18ch; line-height: 1.3; }
.price-card ul { display: grid; gap: 10px; }
.price-card ul li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--ink-2); }
.price-card ul li strong { color: var(--ink); font-weight: 600; }
.price-card ul svg { width: 20px; height: 20px; color: var(--ok); flex: none; margin-top: 2px; }
.price-card .btn { margin-top: 6px; }
.price-card .tiny { text-align: center; }
.price-card .anchor { font-size: 15px; color: var(--ink-2); text-align: center; }
.price-side { display: grid; gap: 18px; align-content: center; }
.price-side .option { border: 1px dashed var(--ink-3); border-radius: var(--r-card); padding: 18px 20px; display: grid; gap: 6px; color: var(--ink-2); font-size: 15px; }
.price-side .option strong { color: var(--ink); font-size: 16px; }
@media (min-width: 900px) { .pricing { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; } }

/* --------------------------------------------------------------------------
   14. FAQ (native <details>: works without JavaScript)
   -------------------------------------------------------------------------- */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; font-size: 18px; font-weight: 600; }
.faq summary svg { width: 22px; height: 22px; color: var(--brand); flex: none; transition: transform .2s ease; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq p { padding: 0 0 20px; color: var(--ink-2); max-width: 70ch; }

/* --------------------------------------------------------------------------
   15. Email capture (free guide, shop list, waitlist) and the photo band
   -------------------------------------------------------------------------- */
.capture { display: grid; gap: 24px; align-items: center; }
.capture .cover { width: 150px; aspect-ratio: 3 / 4; border-radius: 10px; background: var(--brand); color: #fff; padding: 16px; display: grid; align-content: space-between; box-shadow: var(--shadow-float); transform: rotate(-3deg); }
.capture .cover small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.capture .cover strong { font-weight: 800; font-size: 20px; line-height: 1.05; letter-spacing: -0.02em; }
.capture .cover--amber { background: var(--accent); color: var(--ink); }
.capture > div { display: grid; gap: 12px; }

/* The email form itself, used everywhere a form appears. */
.signup { display: grid; gap: 10px; margin-top: 8px; }
.signup label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.signup .row { display: grid; gap: 10px; }
.signup input[type="email"] { min-height: 52px; padding: 0 18px; border-radius: var(--r-btn); border: 1.5px solid var(--ink-3); background: #fff; font: inherit; color: var(--ink); width: 100%; min-width: 0; }
.signup input[type="email"]:focus-visible { border-color: var(--brand); outline: 3px solid var(--accent); outline-offset: 2px; }
@media (min-width: 600px) { .signup .row { grid-template-columns: minmax(0, 1fr) auto; } }
/* Inside narrow boxes (buy box, product page) the field and button stack. */
.buybox .signup .row, .notify .signup .row { grid-template-columns: minmax(0, 1fr); }
.status-line { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
@media (min-width: 900px) { .capture { grid-template-columns: auto minmax(0, 1fr); gap: 48px; } }

.band-photo { position: relative; color: #fff; isolation: isolate; overflow: hidden; background: var(--dark); }
.band-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; z-index: -2; }
.band-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(21,32,31,.9), rgba(21,32,31,.6)); }
.band-photo .wrap { padding-block: 80px; display: grid; gap: 20px; }
.band-photo .display { max-width: 16ch; }
.band-photo .lede { color: rgba(255,255,255,.88); }
.band-photo .note { font-size: 14px; color: rgba(255,255,255,.85); }
@media (min-width: 900px) { .band-photo .wrap { padding-block: 120px; } }

/* --------------------------------------------------------------------------
   16. Shop: product cards, featured bundle, product page
   -------------------------------------------------------------------------- */
.product-card { display: grid; gap: 10px; align-content: start; text-decoration: none; }
.product-card figure { position: relative; border-radius: var(--r-img); overflow: hidden; aspect-ratio: 1; background: var(--paper-2); display: grid; place-items: center; border: 1px solid var(--line); }
.section--band .product-card figure { background: var(--paper); }
.product-card figure svg { width: 70%; height: auto; aspect-ratio: 1; color: var(--ink); transition: transform .4s ease; }
a.product-card:hover figure svg { transform: scale(1.04); }
a.product-card:hover .name { text-decoration: underline; text-underline-offset: 4px; }
.product-card .badge { position: absolute; top: 12px; left: 12px; }
.product-card .name { font-size: 17px; font-weight: 600; }
.product-card .sub { font-size: 14px; color: var(--ink-2); }
.product-card .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.product-card .price { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.product-card figure.is-brand { background: var(--brand); color: #fff; border-color: var(--brand); }
.product-card figure.is-brand svg { width: 64px; height: 64px; color: #fff; }

.featured { display: grid; gap: 24px; border-radius: var(--r-card); overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.featured figure { background: var(--paper-2); display: grid; place-items: center; aspect-ratio: 4 / 3; }
.featured figure svg { width: 72%; height: auto; aspect-ratio: 1; max-height: 90%; color: var(--ink); }
.featured .copy { padding: 8px 24px 28px; display: grid; gap: 14px; align-content: center; }
.featured .copy h2 { font-weight: 700; font-size: 28px; letter-spacing: -0.03em; line-height: 1.05; }
.featured .includes { display: grid; gap: 6px; font-size: 15px; color: var(--ink-2); }
.featured .includes li { display: flex; gap: 10px; align-items: flex-start; }
.featured .includes svg { width: 18px; height: 18px; color: var(--ok); margin-top: 3px; flex: none; }
@media (min-width: 900px) { .featured { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; } .featured figure { aspect-ratio: auto; min-height: 420px; } .featured .copy { padding: 40px; } }

.shop-trust { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .shop-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Product page */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--ink-3); padding-block: 12px 0; align-items: center; }
.crumbs a { color: var(--ink-2); min-height: var(--tap); display: inline-flex; align-items: center; }
.pdp { display: grid; gap: 32px; padding-block: 8px 64px; }
.gallery { display: grid; gap: 12px; align-content: start; }
.gallery .main { border-radius: var(--r-img); background: var(--paper-2); border: 1px solid var(--line); aspect-ratio: 1; display: grid; place-items: center; }
.gallery .main svg { width: 72%; height: auto; aspect-ratio: 1; color: var(--ink); }
.gallery .thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gallery .thumbs button { aspect-ratio: 1; border-radius: 10px; border: 1.5px solid var(--line); background: var(--paper-2); display: grid; place-items: center; cursor: pointer; padding: 10px; min-width: 0; min-height: var(--tap); }
.gallery .thumbs button[aria-pressed="true"] { border-color: var(--ink); }
.gallery .thumbs svg { width: 100%; height: auto; aspect-ratio: 1; color: var(--ink); }
.buy { display: grid; gap: 18px; align-content: start; }
.buy h1 { font-weight: 700; font-size: clamp(32px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.035em; }
.buy .status { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.buy .notify { border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; background: var(--paper-2); display: grid; gap: 6px; }
.buy .notify h2 { font-size: 18px; font-weight: 700; }
.buy .ship { display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
.buy .ship li { display: flex; gap: 10px; align-items: flex-start; }
.buy .ship svg { width: 18px; height: 18px; color: var(--brand); flex: none; margin-top: 2px; }
.specs { border-top: 1px solid var(--line); }
.specs details { border-bottom: 1px solid var(--line); }
.specs summary { display: flex; justify-content: space-between; align-items: center; min-height: 56px; font-weight: 600; font-size: 16px; }
.specs summary svg { width: 20px; height: 20px; color: var(--brand); transition: transform .2s ease; flex: none; }
.specs details[open] summary svg { transform: rotate(45deg); }
.specs p, .specs ul { padding-bottom: 16px; color: var(--ink-2); font-size: 15px; }
.specs ul { display: grid; gap: 6px; list-style: disc; padding-left: 20px; }
@media (min-width: 900px) { .pdp { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; padding-top: 16px; } .buy { position: sticky; top: calc(var(--nav-h) + 24px); } }

.used-in { display: grid; gap: 12px; }
.used-in a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; background: var(--paper); }
.used-in a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.used-in .n { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.used-in strong { display: block; font-size: 15.5px; font-weight: 600; }
.used-in span.small { display: block; }
.used-in svg { width: 18px; height: 18px; color: var(--ink-3); }
@media (min-width: 900px) { .used-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); background: var(--paper-2); padding-block: 48px 110px; font-size: 14.5px; color: var(--ink-2); }
.footer .cols { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer .about { grid-column: 1 / -1; display: grid; gap: 12px; align-content: start; max-width: 34ch; }
.footer h2 { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.footer ul { display: grid; }
.footer a { text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); }
.footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.footer .about .brand span { font-size: 15px; }
.footer .bottom { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 13px; color: var(--ink-3); }
.footer .pay { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.footer .pay span { padding: 3px 8px; border: 1px solid var(--line); border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; background: var(--paper); color: var(--ink-2); }
.footer--plain { padding-bottom: 48px; }
@media (min-width: 760px) { .footer .cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .footer .about { grid-column: auto; } .footer { padding-bottom: 48px; } }

/* --------------------------------------------------------------------------
   18. Sticky buy bar (phones only). Hidden until site.js shows it, once the
   hero button has scrolled away; hidden again while a full buy block is on
   screen. Without JavaScript it never appears and the page's own buttons do
   the job.
   -------------------------------------------------------------------------- */
.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 250, 247, 0.97);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(27, 31, 30, 0.08);
  transform: translateY(110%); visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.sticky-buy.is-visible { transform: translateY(0); visibility: visible; transition: transform .25s ease, visibility 0s; }
.sticky-buy .copy { flex: 1; min-width: 0; display: grid; }
.sticky-buy strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-buy .copy span { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-buy .btn { flex: none; min-height: var(--tap); }
@media (min-width: 900px) { .sticky-buy { display: none; } }

/* --------------------------------------------------------------------------
   19. Small pages: page headings, free-guide funnel, help, legal, notices
   -------------------------------------------------------------------------- */
.page-head { padding-block: 48px 8px; display: grid; gap: 14px; }
@media (min-width: 900px) { .page-head { padding-block: 72px 16px; } }

/* A slim bar with just the name, for pages that should not lead away. */
.brand-bar { border-bottom: 1px solid var(--line); background: var(--paper); }
.brand-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--nav-h); }
.brand-bar .link { font-size: 15px; }

/* Funnel pages (free guide, check your inbox, welcome): one narrow column. */
.funnel { max-width: 560px; margin-inline: auto; padding: 48px var(--gutter) 64px; display: grid; gap: 22px; }
.funnel .brand { justify-self: start; pointer-events: none; }
.funnel .ticks { display: grid; gap: 10px; }
.funnel .ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); }
.funnel .ticks svg { width: 20px; height: 20px; color: var(--ok); flex: none; margin-top: 3px; }
.funnel .guide-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; }
.funnel .cover { width: 104px; aspect-ratio: 3 / 4; border-radius: 8px; background: var(--brand); color: #fff; padding: 10px; display: grid; align-content: space-between; box-shadow: var(--shadow-float); transform: rotate(-3deg); }
.funnel .cover small { font-size: 8px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.funnel .cover strong { font-weight: 800; font-size: 14px; line-height: 1.05; }
.funnel .button-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Help page and thank-you page: labelled blocks of plain answers. */
.answers { display: grid; gap: 0; border-top: 1px solid var(--line); }
.answers > div { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.answers dt { font-weight: 700; font-size: 17px; }
.answers dd { margin: 0; color: var(--ink-2); max-width: 65ch; }
@media (min-width: 760px) { .answers > div { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; } }

.steps { display: grid; gap: 14px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.steps li::before { counter-increment: step; content: counter(step); width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; }
.steps strong { display: block; color: var(--ink); }
.steps span { color: var(--ink-2); }

/* A calm boxed notice ("not legal advice", "contact details are being set up"). */
.notice { border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--paper-2); border-radius: 10px; padding: 16px 18px; color: var(--ink-2); font-size: 15px; }
.notice strong { color: var(--ink); }

/* Long text (legal page). */
.prose { max-width: 72ch; color: var(--ink-2); }
.prose h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); margin: 0 0 16px; }
.prose h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 28px 0 8px; }
.prose p, .prose ul { margin: 0 0 14px; }
.prose ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--brand); font-weight: 600; }
.prose .pull { font-size: 19px; font-weight: 500; color: var(--ink); border-left: 3px solid var(--accent); padding-left: 16px; }
.legal-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-toc a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-btn); text-decoration: none; font-weight: 600; font-size: 15px; background: var(--paper); }
.legal-toc a:hover { border-color: var(--ink); }

/* 404 and other one-message pages. */
.center-page { min-height: 60vh; display: grid; align-content: center; gap: 18px; padding-block: 72px; }

/* --------------------------------------------------------------------------
   20. Phone density (owner feedback 2026-10-13: "everything looks too
   dense"). Under 700px the three pillar cards become icon rows, the module
   path becomes a plain list, and product cards become horizontal rows.
   -------------------------------------------------------------------------- */
@media (max-width: 699px) {
  .section { padding-block: 56px; }
  .section-head { margin-bottom: 28px; }
  .pillars .grid { gap: 8px; }
  .pillars .card { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; border: 0; box-shadow: none; padding: 14px 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
  .pillars .card .icon { grid-row: 1 / span 2; }
  .path { gap: 0; }
  .path li { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 14px 0; }
  .teachers { gap: 36px; }
  .teacher figure { aspect-ratio: 1; }
  .curriculum-totals { gap: 6px 16px; font-size: 14px; }
}
@media (max-width: 519px) {
  .product-card { grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: center; }
  .product-card figure { grid-row: 1 / span 3; }
  .product-card .badge { display: none; }
  .product-card .row { grid-column: 2; }
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Legal page: headings stay dark inside the long-text column, and the
   four-link contents row has no bullets. */
.prose .display { color: var(--ink); }
.prose .legal-toc { list-style: none; padding: 0; display: flex; }

html:not(.js) .nav-sheet { padding-inline: calc(var(--gutter) - 12px); }