/* SisuReads homepage styles
   Mobile first. Sizes follow the approved design in reference/sisureads-reference.html.
   "cqw" units are 1% of the page width (the body is the size container). */

/* ---------- Fonts (self-hosted, Latin subset, variable weight) ---------- */

@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* Fallback fonts resized to match the brand fonts, so text does not jump when they load */
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 99%;
  ascent-override: 96%;
  descent-override: 25.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Times New Roman"), local("Times"), local("Liberation Serif");
  size-adjust: 91%;
  ascent-override: 101.5%;
  descent-override: 31.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Cormorant Fallback";
  font-style: italic;
  src: local("Times New Roman Italic"), local("Times-Italic"), local("Liberation Serif Italic");
  size-adjust: 88%;
  ascent-override: 105%;
  descent-override: 32.6%;
  line-gap-override: 0%;
}

/* ---------- Brand tokens ---------- */

:root {
  --navy: #1C2440;
  --gold: #B7924A;
  --gold-light: #D2B274;   /* text on navy */
  --gold-dark: #7A5F28;    /* small text on cream */
  --teal: #3F6B64;
  --cream: #F7F3EA;
  --cream-deep: #EFE8D8;
  --text: #3C445E;         /* body text on cream */
  --white: #FFFFFF;

  /* Supporting shades taken from the approved design */
  --navy-raised: #262F52;
  --navy-line: #3A4469;
  --navy-rule: #343D60;
  --navy-outline: #8189A6;
  --navy-dot: #7C85A6;
  --on-navy: #D9DCE6;
  --on-navy-soft: #C3C8D8;
  --on-teal: #EAF1EF;
  --card-line: #E4DCCB;
  --card-rule: #DCD2BC;
  --sand-line: #D9CFB9;
  --sand-rule: #D4C9B0;
  --bar-pod: #7FB0A7;
  --bar-close: #9FB0E0;
  --dot-muted: #8C8069;   /* inactive dot on cream, at least 3:1 */

  --font-display: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  --font-body: "Figtree", "Figtree Fallback", system-ui, sans-serif;

  --pad-x: clamp(20px, 6.6cqw, 96px);
  --pad-y: clamp(28px, 7.2cqw, 104px);
  --max: 1180px;
  --radius: 6px;
  --radius-btn: 4px;

  --focus: var(--navy);
}

/* ---------- Base ---------- */

html {
  background: var(--navy);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  container-type: inline-size;
  background: var(--navy);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

p, h1, h2, h3, ul, dl, dd, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

img, svg { display: block; }
button { font: inherit; }

[hidden] { display: none !important; }

.on-dark { --focus: var(--gold-light); }

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  border-radius: var(--radius-btn);
}
.skip-link:focus { top: 12px; }

/* ---------- Shared pieces ---------- */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
}

.section { padding: var(--pad-y) var(--pad-x); }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }
.section--sand  { background: var(--cream-deep); }
.section--navy  { background: var(--navy); color: var(--cream); }

.stack { display: flex; flex-direction: column; }
.stack--pods  { gap: clamp(20px, 3.4cqw, 48px); }
.stack--why   { gap: clamp(24px, 3.4cqw, 48px); }
.stack--books { gap: clamp(20px, 3cqw, 40px); }

.section-head { display: flex; flex-direction: column; gap: 12px; }
.section-head--720 { max-width: 720px; }
.section-head--760 { max-width: 760px; }
.section-head--800 { max-width: 800px; }

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.on-dark .eyebrow { color: var(--gold-light); }

.label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}
.label--gold { color: var(--gold-dark); }

.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 3.6cqw, 52px);
  line-height: 1.08;
}

.muted { color: var(--text); }

/* Buttons and button-style links */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  font-weight: 700;
  text-decoration: none;
}
.btn--small { flex: none; min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn--large { min-height: 52px; padding: 0 28px; font-size: 16px; }
.btn--xl    { min-height: 54px; padding: 0 30px; font-size: 17px; }
.btn--gold  { background: var(--gold); color: var(--navy); }
.btn--navy  { background: var(--navy); color: var(--cream); }
.btn--outline {
  border: 1px solid var(--navy-outline);
  color: var(--cream);
  font-weight: 600;
}
.btn--start { align-self: flex-start; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* Pressable toggles (age groups, book groups) */
.toggle-group { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle {
  min-height: 48px;
  padding: 6px 16px;
  border: 1px solid var(--navy);
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--navy);
}
.toggle[aria-pressed="true"] { background: var(--navy); color: var(--cream); }
.toggle__narrow { display: none; }

/* ---------- Header ---------- */

.site-header {
  background: var(--navy);
  padding: 14px var(--pad-x);
  border-bottom: 1px solid var(--navy-rule);
  --focus: var(--gold-light);
}
.site-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--cream);
  text-decoration: none;
  padding: 10px 0;
}
.logo span { color: var(--gold-light); }

/* The text links only show when the space between logo and button is at least 520px wide */
.site-nav {
  flex: 1 1 0;
  min-width: 0;
  container: nav / inline-size;
  display: flex;
  justify-content: center;
  gap: 0 clamp(14px, 2.2vw, 30px);
  min-height: 44px;
}
.site-nav::before { content: ""; } /* matches the spacing of the approved design */
.site-nav a {
  color: var(--on-navy);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  line-height: 44px;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--cream); }
@container nav (width < 520px) {
  .site-nav a { display: none; }
}

/* ---------- Hero ---------- */

.hero {
  background: var(--navy);
  color: var(--cream);
  padding: clamp(36px, 6cqw, 88px) var(--pad-x) clamp(36px, 5cqw, 72px);
}
.hero__inner,
.hero__row { gap: clamp(32px, 4.4cqw, 64px); }
.hero__inner { display: flex; flex-direction: column; }
.hero__row { display: flex; flex-wrap: wrap; align-items: center; }

.hero__copy {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 4.9cqw, 70px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.hero__title span {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--gold-light);
}
.hero__lead {
  max-width: 580px;
  font-size: clamp(17px, 1.4cqw, 19px);
  color: var(--on-navy);
  text-wrap: pretty;
}

/* "One session, two lengths" card */
.lengths {
  flex: 1 1 360px;
  min-width: 0;
  background: var(--navy-raised);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4cqw, 34px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.lengths__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
}
.lengths__item { display: flex; flex-direction: column; gap: 8px; }
.lengths__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
}
.lengths__mins { color: var(--gold-light); }

.bar { display: flex; gap: 3px; height: 14px; }
.bar--short { width: 75%; }
.bar__part { flex-basis: 0; flex-shrink: 1; border-radius: 2px; }
.bar__part--m3  { flex-grow: 3; }
.bar__part--m5  { flex-grow: 5; }
.bar__part--m7  { flex-grow: 7; }
.bar__part--m12 { flex-grow: 12; }
.bar__part--m15 { flex-grow: 15; }
.bar__part--m25 { flex-grow: 25; }
.bar__part--m35 { flex-grow: 35; }
.bar__part--settle { background: var(--gold-light); }
.bar__part--read   { background: var(--cream); }
.bar__part--pod    { background: var(--bar-pod); }
.bar__part--close  { background: var(--bar-close); }

.legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--navy-line);
  font-size: 15px;
}
.legend li { display: flex; align-items: center; gap: 8px; }
.legend__key { width: 10px; height: 10px; border-radius: 2px; flex: none; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  padding-top: 22px;
  border-top: 1px solid var(--navy-rule);
  font-size: 15px;
  color: var(--on-navy);
}
.facts strong { color: var(--cream); }

/* ---------- Session carousel ---------- */

.session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 4.4cqw, 64px);
}
.session__intro {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.session__toggle { margin-top: 4px; }

.carousel {
  flex: 1.5 1 420px;
  min-width: 0;
  background: var(--navy);
  color: var(--cream);
  border-radius: var(--radius);
  padding: clamp(20px, 3cqw, 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.carousel__progress { display: flex; gap: 4px; }
.carousel__seg {
  flex: 1 1 0;
  height: 6px;
  border-radius: 3px;
  background: var(--navy-line);
}
.carousel__seg.is-current { background: var(--gold-light); }
/* Default lengths (ages 7 to 9); the script updates them for the 60 minute session */
.carousel__seg[data-seg="0"] { flex-grow: 3; }
.carousel__seg[data-seg="1"] { flex-grow: 25; }
.carousel__seg[data-seg="2"] { flex-grow: 12; }
.carousel__seg[data-seg="3"] { flex-grow: 5; }

.carousel__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 264px;
}
.carousel__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.carousel__slides { display: contents; }
.carousel__slide { display: flex; flex-direction: column; gap: 10px; }
.carousel__slide p { color: var(--on-navy); }
.carousel__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 3.4cqw, 44px);
  line-height: 1.05;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.carousel__arrow {
  width: 48px;
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--navy-outline);
  border-radius: var(--radius-btn);
  color: var(--cream);
  cursor: pointer;
}
.carousel__arrow--next {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.carousel__dots { display: flex; align-items: center; }
.carousel__dot {
  width: 32px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.carousel__dot span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--navy-dot);
}
.carousel__dot.is-current span { background: var(--gold-light); }

/* ---------- Two kinds of pod ---------- */

.pods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 0 20px;
}
/* Each card spans five shared rows, so rows line up across the two cards */
.pod {
  grid-row: span 5;
  display: grid;
  grid-template-rows: subgrid;
  margin-bottom: 16px;
  background: var(--cream);
  border: 1px solid var(--card-line);
  border-top: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: clamp(18px, 2.2cqw, 28px) clamp(20px, 2.4cqw, 32px) clamp(8px, 1.2cqw, 16px);
}
.pod--general { border-top-color: var(--teal); }
.pod__head { padding-bottom: 14px; }
.pod__title {
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 2.4cqw, 32px);
  line-height: 1.1;
}
.pod__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--card-rule);
  font-size: 16px;
}
.pod__row > span:first-child { font-weight: 700; }

/* ---------- Why it helps ---------- */

.bridge {
  max-width: 800px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 2.4cqw, 32px);
  line-height: 1.2;
  padding-top: clamp(20px, 2.6cqw, 36px);
  border-top: 1px solid var(--sand-rule);
}

/* Always one row; scrolls sideways with snap when the cards do not fit */
.pillars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(72cqw, 300px), 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-bottom: 10px;
}
.pillar {
  scroll-snap-align: start;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4cqw, 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pillar__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(25px, 2.2cqw, 30px);
  line-height: 1.12;
}

/* ---------- Formed ---------- */

.formed {
  background: var(--teal);
  color: var(--cream);
  padding: clamp(36px, 6cqw, 84px) var(--pad-x);
}
.formed__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px clamp(32px, 5cqw, 72px);
  align-items: center;
}
.formed__title {
  flex: 1 1 420px;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.2cqw, 60px);
  line-height: 1.04;
}
.formed__title span { font-style: italic; font-weight: 500; }
.formed__text { flex: 1 1 420px; min-width: 0; color: var(--on-teal); }

/* ---------- Guides ---------- */

.guides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px 20px;
}
.guide {
  background: var(--white);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4cqw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.guide__head { display: flex; align-items: center; gap: 16px; }
.guide__initials {
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
}
.guide__initials--teal { background: var(--teal); color: var(--cream); }
.guide__photo {
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.guide__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
}
.guide__role { font-size: 15px; font-weight: 600; color: var(--teal); }
.guide__creds { font-size: 16px; color: var(--text); }
.guide__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 23px;
  line-height: 1.25;
}

.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 10px 28px;
  padding-top: 22px;
  border-top: 1px solid var(--sand-line);
}
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.checks svg { flex: none; margin-top: 3px; color: var(--teal); }

/* ---------- Books ---------- */

.books {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 10px 20px;
}
.book {
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.book--companion { border-left-color: var(--teal); }
.book__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
}
.book__author { font-size: 15px; color: var(--text); }

/* ---------- Pilot ---------- */

.pilot {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5cqw, 80px);
  align-items: center;
}
.pilot__facts {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.stats { display: flex; flex-direction: column; gap: 14px; }
.stat { display: flex; align-items: baseline; gap: 16px; }
.stat dt {
  flex: 0 0 clamp(84px, 9cqw, 112px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(46px, 4.4cqw, 60px);
  line-height: 0.9;
  color: var(--gold-light);
}
.stat dd { font-size: 16px; color: var(--cream); }
.pilot__note { font-size: 15px; color: var(--on-navy-soft); }

.testimonial {
  flex: 1.4 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.testimonial blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 2.9cqw, 40px);
  line-height: 1.2;
}
.testimonial figcaption {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-light);
}

/* ---------- Pricing ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px 20px;
}
.plan {
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-top: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: clamp(20px, 2.6cqw, 34px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plan--sisupod { border-top-color: var(--gold); }
.plan__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 20px;
}
.plan__name,
.plan__price {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1;
}
.plan__name { font-size: 30px; }
.plan__price { font-size: 40px; }
.plan__text { font-size: 16px; color: var(--text); }

.plan-notes { display: none; }

.includes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: clamp(16px, 2.4cqw, 28px);
  border-top: 1px solid var(--sand-line);
}
.includes__main { font-size: 16px; color: var(--navy); }
.includes__small { font-size: 15px; color: var(--text); }

/* ---------- Final call to action ---------- */

.cta {
  background: var(--navy);
  color: var(--cream);
  padding: clamp(48px, 7.2cqw, 104px) var(--pad-x);
  border-bottom: 1px solid var(--navy-rule);
}
.cta__inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.cta__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.4cqw, 62px);
  line-height: 1.05;
}
.cta__text { max-width: 560px; color: var(--on-navy); }
.cta__email { font-size: 15px; color: var(--on-navy-soft); }
.cta__email a { color: var(--gold-light); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy);
  color: var(--on-navy-soft);
  padding: 28px var(--pad-x) 36px;
  --focus: var(--gold-light);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 15px;
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 32px;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 2px; }
.logo--footer { font-size: 24px; line-height: 1.1; padding: 0; }
.tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--gold-light);
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.site-footer__links a { display: inline-block; color: var(--on-navy); line-height: 44px; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 32px;
  padding-top: 16px;
  border-top: 1px solid var(--navy-rule);
}

/* Dot indicators for the sideways rows (phones only) */
.snap-dots { display: none; }

/* =====================================================================
   PHONES (up to 600px wide). Nothing below changes tablet or desktop.
   ===================================================================== */
@media (max-width: 600px) {

  /* 1. Hero buttons: one line, equal width */
  .btn-row { flex-wrap: nowrap; gap: 10px; }
  .btn-row .btn {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--gold);
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
  }
  .btn-row .btn--outline { border-color: var(--navy-outline); }

  /* 2. Age buttons: one two-part switch, label on two lines */
  .switch { flex-wrap: nowrap; gap: 0; }
  .switch .toggle {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 6px 10px;
    line-height: 1.3;
  }
  .switch .toggle:first-child { border-radius: var(--radius-btn) 0 0 var(--radius-btn); }
  .switch .toggle:last-child  { border-radius: 0 var(--radius-btn) var(--radius-btn) 0; margin-left: -1px; }
  .switch .toggle__wide { display: none; }
  .switch .toggle__narrow { display: contents; }
  .switch .toggle__narrow > span { display: block; white-space: nowrap; }
  .switch .toggle:focus-visible { position: relative; z-index: 1; }

  /* 3. Two kinds of pod: one comparison card with two columns */
  .pods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
    background: var(--cream);
    border: 1px solid var(--card-line);
    border-radius: var(--radius);
    padding: 0 16px 6px;
  }
  .pod,
  .pod__row { display: contents; }
  .pod__head {
    grid-row: 1;
    padding: 14px 0 12px;
    border-top: 4px solid var(--navy);
  }
  .pod--general .pod__head { border-top-color: var(--teal); }
  .pod--sisupod .pod__head { grid-column: 1; }
  .pod--general .pod__head { grid-column: 2; }
  .pod__head .label { font-size: 14px; }
  .pod__title { font-size: 24px; }
  .pod__row > span { font-size: 15px; }
  /* Row labels: shown once, across both columns */
  .pod__row > span:first-child {
    grid-column: 1 / -1;
    padding: 10px 0 2px;
    border-top: 1px solid var(--card-rule);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--teal);
  }
  .pod--general .pod__row > span:first-child { display: none; }
  .pod__row > span:last-child { padding-bottom: 10px; }
  .pod--sisupod .pod__row > span:last-child { grid-column: 1; }
  .pod--general .pod__row > span:last-child { grid-column: 2; }
  .pod--sisupod .pod__row:nth-child(2) > span:first-child { grid-row: 2; }
  .pod--sisupod .pod__row:nth-child(3) > span:first-child { grid-row: 4; }
  .pod--sisupod .pod__row:nth-child(4) > span:first-child { grid-row: 6; }
  .pod--sisupod .pod__row:nth-child(5) > span:first-child { grid-row: 8; }
  .pod__row:nth-child(2) > span:last-child { grid-row: 3; }
  .pod__row:nth-child(3) > span:last-child { grid-row: 5; }
  .pod__row:nth-child(4) > span:last-child { grid-row: 7; }
  .pod__row:nth-child(5) > span:last-child { grid-row: 9; }

  /* 4 and 6. Sideways rows with snap, hidden scrollbar and dots */
  .snap-row {
    scrollbar-width: none;
  }
  .snap-row::-webkit-scrollbar { display: none; }

  .guides {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 85cqw;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* run to the screen edges so the next card's edge shows */
    margin: 0 calc(-1 * var(--pad-x));
    padding: 4px var(--pad-x);
    scroll-padding: 0 var(--pad-x);
  }
  .guide { scroll-snap-align: start; }
  .pillars { padding-bottom: 0; scroll-snap-type: x mandatory; }

  .snap-row:focus-visible { outline-offset: -3px; }
  .snap-dots {
    display: flex;
    justify-content: center;
    margin-top: -18px;
  }
  .snap-dots button {
    width: 32px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .snap-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dot-muted);
  }
  .snap-dots button[aria-current="true"] span { background: var(--navy); }

  /* 5. Membership: two option tiles side by side */
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .plan { padding: 16px 14px; gap: 10px; }
  .plan__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .plan__name { font-size: 26px; line-height: 1.05; }
  .plan__price { display: block; }
  .plan__text { display: none; }
  .plan-notes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: -6px;
    font-size: 16px;
    color: var(--text);
  }
  .plan-notes strong { color: var(--navy); }

  /* 6. Session card: as tall as the longest step, no more */
  .carousel__body { min-height: 0; }
  .carousel__slides { display: grid; }
  .carousel__slide { grid-area: 1 / 1; }
  .carousel__slide[hidden] { display: flex !important; visibility: hidden; }
}