/* ==========================================================================
   Fertility with Kara — design system
   Brand: Launch Pack V1 §03–§05. Teal and ivory lead. Rose is an accent —
   it should never turn the whole brand pink.
   ========================================================================== */

@font-face {
  font-family: 'Lora';
  src: url('/fonts/lora-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('/fonts/lora-latin-italic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette */
  --teal: #285d5d;
  --teal-deep: #1d4646;
  --teal-ink: #173b3b;
  --sage: #cad8d0;
  --sage-soft: #e4ece7;
  --ivory: #faf7f1;
  --white: #fffdfc;
  --rose: #d8aaa5;
  --rose-soft: #f3e3e0;
  --rose-ink: #94534d; /* rose for text: AA on ivory and sand-soft (11 Nov 2026 audit: #9c5b55 was 4.3:1 on sand) */
  --rose-ink-deep: #8a4b45; /* rose-ink for small labels on tinted boxes: 5.3:1+ on rose-soft, sand-soft and sage-soft */
  --rose-light: #f0cfcb; /* rose for text on teal: 5.1:1 (the brand --rose is 3.6:1 there) */
  --sand: #e8d9c8;
  --sand-soft: #f2e9df;
  --charcoal: #292d2d;
  --muted: #566060;
  --line: #e2dbd0;

  /* Type */
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1: clamp(1.18rem, 1.1rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.42rem, 1.28rem + 0.7vw, 1.8rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --step-4: clamp(2.15rem, 1.7rem + 2.2vw, 3.5rem);
  --step-5: clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);

  /* Space & shape */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --radius-s: 10px;
  --radius: 18px;
  --radius-l: 28px;
  /* Rounded corners, 8px everywhere (option A, 25 Oct 2026): buttons, panels and pictures share one size.
     The ebooks and the course use the same 8px. Circles, pills and book covers keep their own shapes. */
  --btn-radius: 8px;
  /* Structural panels: cards, boxes, bands, figures, tables. */
  --panel-radius: 8px;
  /* Pictures: diagrams, picture bands, video thumbnails and the video player. */
  --picture-radius: 8px;
  --shadow-s: 0 1px 2px rgb(23 59 59 / 0.06), 0 2px 8px rgb(23 59 59 / 0.05);
  --shadow: 0 2px 6px rgb(23 59 59 / 0.05), 0 12px 32px rgb(23 59 59 / 0.08);
  --shadow-l: 0 30px 60px -20px rgb(23 59 59 / 0.28);
  --ease: cubic-bezier(0.22, 0.8, 0.28, 1);
  --container: 1200px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* overflow-x on html as well as body (25 Oct 2026): with body's alone, a phone could still pan a few pixels sideways
   where a dial, a painting fading in or a tilted video tile pokes past the edge */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; overflow-x: clip; }
body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--charcoal);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--teal-deep); }
:focus-visible { outline: 3px solid var(--rose-ink); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--sage); color: var(--teal-ink); }
[hidden] { display: none !important; }

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

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  color: var(--teal-ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); overflow-wrap: break-word; } /* a long name must never push the page sideways */
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { text-wrap: pretty; }
em.accent, .accent { font-style: italic; color: var(--rose-ink); }

.eyebrow {
  text-wrap: balance;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--teal);
}
.eyebrow::before { content: ''; flex: none; width: 2.9rem; height: 1px; background: var(--rose); }
.eyebrow--center::after { content: ''; flex: none; width: 2.9rem; height: 1px; background: var(--rose); }
.lead { font-size: var(--step-1); line-height: 1.6; color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), 780px); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--sage { background: var(--sage-soft); }
.section--sand { background: var(--sand-soft); }
.section--white { background: var(--white); }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); max-width: 720px; }
.section-head--center { text-align: center; margin-inline: auto; justify-items: center; }
.stack > * + * { margin-top: var(--stack, 1rem); }
.stack--tight { --stack: 0.4rem; }
.stack--loose { --stack: 1.75rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.center { text-align: center; }
.center-block { display: flex; justify-content: center; }
.grid { display: grid; gap: clamp(1rem, 0.6rem + 1.5vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.split > * { min-width: 0; }
.nowrap { white-space: nowrap; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
  .split--reverse > :first-child { order: 2; }
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--teal); color: var(--white); padding: 0.75rem 1.25rem; border-radius: 999px;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; color: var(--white); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--teal-ink); --btn-fg: var(--ivory); --btn-bd: var(--teal-ink);
  font-family: var(--font-sans); font-style: normal; /* never inherit a serif or italic from the box around it */
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 1.05rem 1.9rem;
  border-radius: var(--btn-radius);
  border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s, color 0.2s;
}
.btn:hover { --btn-bg: var(--teal); --btn-bd: var(--teal); color: var(--btn-fg); transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgb(23 59 59 / 0.8); }
.btn:active { transform: translateY(0); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--teal); --btn-bd: color-mix(in srgb, var(--teal) 35%, transparent); }
.btn--ghost:hover { --btn-bg: var(--white); }
.btn--light { --btn-bg: var(--ivory); --btn-fg: var(--teal-ink); --btn-bd: var(--ivory); }
.btn--light:hover { --btn-bg: var(--rose); --btn-bd: var(--rose); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: var(--ivory); --btn-bd: rgb(250 247 241 / 0.5); }
.btn--sm { padding: 0.72rem 1.25rem; font-size: 0.74rem; }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 700; font-size: 0.92rem; text-decoration: none; color: var(--teal);
}
.link-arrow::after { content: '→'; transition: transform 0.25s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(250 247 241 / 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgb(23 59 59 / 0.35); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 78px; }
.brand-logo { display: block; flex: none; }
.brand-logo img { width: clamp(170px, 17vw + 70px, 275px); }  /* The lower bound is what a 320px phone can take beside the two buttons. */
.primary-nav ul { list-style: none; padding: 0; display: flex; align-items: center; gap: clamp(0.4rem, 0.2rem + 0.8vw, 1.4rem); }
.primary-nav a {
  position: relative; display: block; padding: 0.5rem 0.15rem;
  font-size: 0.93rem; font-weight: 600; color: var(--charcoal); text-decoration: none;
}
.primary-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 1.5px;
  background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
.primary-nav a:hover::after, .primary-nav a[aria-current='page']::after { transform: scaleX(1); }
.primary-nav a[aria-current='page'] { color: var(--teal); }
.header-cta { flex: none; }
.header-actions { flex: none; display: flex; align-items: center; gap: 0.7rem; }
.header-search {
  flex: none; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.95rem;
  border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 0.85rem; font-weight: 700; color: var(--teal-ink); text-decoration: none; transition: box-shadow 0.2s;
}
.header-search:hover { box-shadow: inset 0 0 0 1.5px var(--teal); }
.header-search svg { width: 16px; height: 16px; }
.primary-nav a { white-space: nowrap; }
/* Narrower desktops: the Search button shrinks to its icon so the menu keeps one line */
@media (max-width: 1320px) {
  .header-search { padding: 0; width: 42px; height: 42px; justify-content: center; }
  .header-search span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.nav-toggle {
  display: none; flex: none; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white); position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; background: var(--teal-ink);
  transform: translate(-50%, -50%); transition: transform 0.3s var(--ease), opacity 0.2s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ''; }
.nav-toggle span::before { transform: translate(-50%, calc(-50% - 6px)); }
.nav-toggle span::after { transform: translate(-50%, calc(-50% + 6px)); }
.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 1180px) {
  .nav-toggle { display: block; }
  .header-cta { padding-inline: 0.85rem; }  /* option B (24 Oct 2026): the Free guide button stays in the bar on tablets and phones */
  .header-actions { margin-left: auto; }
  .header-search { padding: 0; width: 46px; height: 46px; justify-content: center; }
  .header-search span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .primary-nav {
    position: fixed; inset: 78px 0 auto 0; max-height: calc(100dvh - 78px); overflow-y: auto;
    background: var(--ivory); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    padding: 1rem var(--gutter) 2rem;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.3s var(--ease), visibility 0.25s;
  }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav li + li { border-top: 1px solid var(--line); }
  .primary-nav a { padding: 1rem 0; font-family: var(--font-serif); font-size: 1.3rem; font-weight: 500; }
  .primary-nav a::after { display: none; }
  .primary-nav .nav-mobile-cta { display: block; border: 0; padding-top: 1.25rem; }
}
.nav-mobile-cta { display: none; }
/* Phones: the search icon moves into the menu to make room for the Free guide button (option B, 24 Oct 2026) */
.nav-mobile-search { display: none; }
@media (max-width: 480px) {
  .brand-logo img { width: 150px; }
  .header-search { display: none; }
  .header-actions { gap: 0.4rem; }
  .header-cta { font-size: 0.7rem; padding: 0.6rem 0.7rem; }
  .primary-nav .nav-mobile-search { display: block; }
}
@media (max-width: 360px) { .brand-logo img { width: 128px; } .header-cta { font-size: 0.66rem; padding: 0.55rem 0.6rem; } }
.primary-nav .nav-mobile-cta .btn { display: flex; padding: 1rem 1.5rem; color: var(--white); font-family: var(--font-sans); font-size: 1rem; font-weight: 700; }
.no-js .primary-nav { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(4rem, 3rem + 5vw, 7rem);
}
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.9; }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--ivory) 20%, rgb(250 247 241 / 0.75) 50%, rgb(250 247 241 / 0.1) 85%);
}
.hero__inner { display: grid; gap: clamp(2.5rem, 1rem + 5vw, 4rem); align-items: center; }
@media (min-width: 960px) { .hero__inner { grid-template-columns: 1.2fr 0.8fr; } }
.hero__copy { display: grid; gap: 1.5rem; justify-items: start; }
.hero :is(h1, .hero__h) { font-size: clamp(2.7rem, 1.6rem + 4.4vw, 5.3rem); line-height: 0.98; letter-spacing: -0.032em; }
.hero :is(h1, .hero__h) em { display: block; font-style: italic; color: var(--rose-ink); }
/* Editorial display: each line is set deliberately, one word held back in teal. */
.hero :is(h1, .hero__h) .ln { display: block; }
.hero :is(h1, .hero__h) .thin { color: var(--teal); opacity: 0.72; }
.hero .lead { color: #465050; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: var(--step--1); color: var(--muted); padding-top: 0.25rem; }
.hero__trust span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero__trust span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 3px rgb(40 93 93 / 0.18); }

/* Library search box (Learn header and 404); .hero-popular is the "Jump to" chip row */
.hero-search {
  width: min(100%, 560px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.45rem;
  padding: 0.45rem; background: var(--white); border-radius: var(--btn-radius);
  box-shadow: var(--shadow), inset 0 0 0 1.5px var(--line); transition: box-shadow 0.2s;
}
.hero-search:focus-within { box-shadow: var(--shadow), inset 0 0 0 1.5px var(--teal), 0 0 0 4px rgb(40 93 93 / 0.14); }
.hero-search input { min-width: 0; border: 0; background: transparent; padding: 0.8rem 1rem; font-size: 1.05rem; color: var(--teal-ink); }
.hero-search input:focus { outline: none; }
.hero-popular { margin-top: -0.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.hero-popular span { margin-right: 0.3rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hero-popular a {
  padding: 0.45rem 0.9rem; border-radius: 999px; background: rgb(255 253 252 / 0.85); box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 700; font-size: 0.85rem; color: var(--teal-ink); text-decoration: none; transition: box-shadow 0.2s, background-color 0.2s;
}
.hero-popular a:hover { background: var(--white); box-shadow: inset 0 0 0 1px var(--teal); }
@media (max-width: 560px) {
  .hero-search { grid-template-columns: minmax(0, 1fr); }
  .hero-popular span { flex-basis: 100%; margin: 0 0 0.2rem; }
}
/* Homepage hero, option B "Kara beside you" (22 Oct 2026): who writes the site, then two ways in */
.hero-kara {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; width: min(100%, 34rem);
  padding: 1rem 1.3rem 1rem 1rem; border-radius: var(--panel-radius, 18px); background: rgb(255 255 255 / 0.75);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 36px -26px rgb(23 59 59 / 0.45);
}
.hero-kara__mark { width: 68px; height: 68px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); }
.hero-kara__mark img { width: 70%; height: auto; }
.hero-kara__mark img.is-photo { width: 100%; height: 100%; object-fit: cover; }
.hero-kara p { margin: 0; font-size: 0.95rem; line-height: 1.45; color: #465050; }
.hero-kara strong { display: block; font: 600 1.08rem var(--font-serif); color: var(--teal-ink); }
.hero-kara a { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose-ink); text-decoration: none; white-space: nowrap; }
.hero-kara a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .hero-kara { gap: 0.8rem; padding: 0.85rem 1rem 0.85rem 0.85rem; }
  .hero-kara__mark { width: 56px; height: 56px; }
  .hero-ctas { width: 100%; flex-direction: column; align-items: stretch; }
}

/* Portrait arch with floating "new language" chips */
.portrait { position: relative; justify-self: center; width: min(100%, 440px); }
.portrait__frame {
  position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px var(--radius-l) var(--radius-l);
  overflow: hidden; background: linear-gradient(160deg, var(--sage-soft), var(--sand));
  box-shadow: var(--shadow-l);
  outline: 1px solid rgb(40 93 93 / 0.12); outline-offset: 12px;
}
.portrait__frame img.portrait__photo { width: 100%; height: 100%; object-fit: cover; }
.portrait__placeholder { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 1rem; padding: 2rem; text-align: center; }
.portrait__placeholder img { width: 62%; filter: drop-shadow(0 12px 22px rgb(23 59 59 / 0.15)); }
.portrait__placeholder p { font-family: var(--font-serif); font-style: italic; color: var(--teal); font-size: var(--step-1); }
.chip-float {
  position: absolute; z-index: 2;
  padding: 0.55rem 1rem; border-radius: 999px;
  background: var(--white); box-shadow: var(--shadow);
  font-weight: 700; font-size: 0.85rem; color: var(--teal-ink); white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) { .chip-float { animation: float 7s ease-in-out infinite; } }
.chip-float::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 0.5rem; background: var(--rose); vertical-align: middle; }
.chip-float:nth-of-type(1) { top: 12%; left: -8%; }
.chip-float:nth-of-type(2) { top: 36%; right: -10%; animation-delay: -2s; }
.chip-float:nth-of-type(3) { bottom: 22%; left: -12%; animation-delay: -4s; }
.chip-float:nth-of-type(4) { bottom: 6%; right: -4%; animation-delay: -5.5s; }
.chip-float:nth-of-type(even)::before { background: var(--teal); }
@keyframes float { 50% { transform: translateY(-10px); } }
@media (max-width: 560px) {
  .chip-float { font-size: 0.75rem; padding: 0.45rem 0.8rem; }
  .chip-float:nth-of-type(1), .chip-float:nth-of-type(3) { left: -2%; }
  .chip-float:nth-of-type(2), .chip-float:nth-of-type(4) { right: -2%; }
}

/* ---------- The cycle dial (home hero) ----------
   The Fertility Library drawn as a circle. Every segment is a real link rendered
   on the server, so the dial navigates with JavaScript off; main.js only adds the
   hover/focus behaviour that rewrites the centre. */
.hero--dial .hero__inner { align-items: center; }
@media (min-width: 1060px) { .hero--dial .hero__inner { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); } }

.dial { position: relative; justify-self: center; width: min(100%, 500px); aspect-ratio: 1; }
.dial svg { width: 100%; height: 100%; }

.dial__seg { cursor: pointer; }
.dial__seg path { transform-origin: 50% 50%; transition: transform 0.45s var(--ease), opacity 0.35s; }
.dial__seg:hover path, .dial__seg.is-active path { transform: scale(1.032); }
.dial__seg:focus { outline: none; }
.dial__seg:focus-visible path { stroke: var(--rose-ink); stroke-width: 2; }
.dial text { font-family: var(--font-serif); font-style: italic; font-size: 12px; pointer-events: none; }
/* The outer band: the "Looking After Yourself" topics, wrapped around the medical ones. */
.dial__seg--band:hover path, .dial__seg--band.is-active path { transform: scale(1.018); }
.dial .dial__band-label { font-style: normal; font-size: 7.6px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--teal-ink); }

.dial__core {
  position: absolute; inset: 27.5%; border-radius: 50%; background: var(--ivory);
  box-shadow: inset 0 0 0 1px rgb(40 93 93 / 0.16);
  display: grid; place-items: center; align-content: center; gap: 0.55rem;
  text-align: center; padding: 1.5rem;
}
.dial__kicker { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rose-ink); }
.dial__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.05rem, 0.9rem + 0.75vw, 1.5rem); line-height: 1.16; letter-spacing: -0.018em; color: var(--teal-ink); }
.dial__summary { font-size: 0.81rem; line-height: 1.5; color: var(--muted); max-width: 23ch; }
.dial__go { margin-top: 0.15rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-ink); border-bottom: 1px solid var(--rose); padding-bottom: 4px; }
/* Small cells orbiting just outside the dial: each <span> is a full-size layer rotated to its
   place on the ring, with the cell drawn at its top centre; the whole ring turns slowly. */
.dial__orbit { position: absolute; inset: -4%; pointer-events: none; animation: dial-orbit 80s linear infinite; }
.dial__orbit--outer { inset: -8.5%; animation-duration: 110s; animation-direction: reverse; }
.dial__orbit span { position: absolute; inset: 0; }
.dial__orbit span::before {
  content: ''; position: absolute; top: 0; left: 50%; width: var(--cell, 15px); height: var(--cell, 15px);
  margin: calc(var(--cell, 15px) / -2) 0 0 calc(var(--cell, 15px) / -2); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--white), var(--rose) 75%);
  box-shadow: 0 0 0 4px rgb(216 170 165 / 0.18); animation: dial-cell 6s ease-in-out infinite;
}
.dial__orbit span:nth-child(1) { transform: rotate(8deg); }
.dial__orbit span:nth-child(2) { transform: rotate(58deg); --cell: 11px; }
.dial__orbit span:nth-child(3) { transform: rotate(112deg); --cell: 18px; }
.dial__orbit span:nth-child(4) { transform: rotate(166deg); --cell: 10px; }
.dial__orbit span:nth-child(5) { transform: rotate(214deg); --cell: 14px; }
.dial__orbit span:nth-child(6) { transform: rotate(262deg); --cell: 12px; }
.dial__orbit span:nth-child(7) { transform: rotate(318deg); --cell: 16px; }
.dial__orbit span:nth-child(3n + 2)::before { background: radial-gradient(circle at 35% 30%, var(--white), var(--sage) 75%); box-shadow: 0 0 0 4px rgb(202 216 208 / 0.3); animation-delay: -2s; }
.dial__orbit span:nth-child(3n)::before { background: radial-gradient(circle at 35% 30%, var(--white), #e4d0b4 75%); box-shadow: 0 0 0 4px rgb(228 208 180 / 0.3); animation-delay: -4s; }
.dial__orbit--outer span:nth-child(1) { transform: rotate(34deg); --cell: 8px; }
.dial__orbit--outer span:nth-child(2) { transform: rotate(104deg); --cell: 12px; }
.dial__orbit--outer span:nth-child(3) { transform: rotate(178deg); --cell: 8px; }
.dial__orbit--outer span:nth-child(4) { transform: rotate(240deg); --cell: 11px; }
.dial__orbit--outer span:nth-child(5) { transform: rotate(296deg); --cell: 7px; }
.dial__orbit--outer span::before { opacity: 0.9; }
.dial__orbit--outer span:nth-child(odd)::before { background: radial-gradient(circle at 35% 30%, var(--white), var(--teal) 80%); box-shadow: 0 0 0 3px rgb(40 93 93 / 0.12); }
@keyframes dial-orbit { to { transform: rotate(360deg); } }
@keyframes dial-cell { 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .dial__orbit, .dial__orbit span::before { animation: none; } }
@media (max-width: 620px) {
  .dial__orbit { inset: -3%; }
  .dial__orbit--outer { inset: -6%; }
}
.dial__caption { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-top: 1.6rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.dial__caption::before, .dial__caption::after { content: ''; width: 2.1rem; height: 1px; background: var(--rose); }

/* Homepage dial, option D (11 Nov 2026): pointing at a topic lifts its piece, dims the other inner pieces
   and shows a picture card for it under the circle, over the caption. Mouse and trackpad only: on a touch
   screen a tap opens the topic straight away, so the card never shows there. */
.dial__pv { display: none; }
@media (hover: hover) and (pointer: fine) {
  .dial[data-dial-preview] .dial__seg path { transition: transform 0.45s var(--ease), opacity 0.35s, filter 0.35s; }
  .dial[data-dial-preview].is-previewing .dial__seg.is-active path { transform: scale(1.05); filter: drop-shadow(0 6px 10px rgb(23 59 59 / 0.28)); }
  .dial[data-dial-preview].is-previewing .dial__seg:not(.is-active) path { opacity: 0.7; }
  .dial[data-dial-preview] ~ .dial__caption, .dial[data-dial-preview] ~ .dial__free { transition: opacity 0.25s; }
  .dial[data-dial-preview].is-previewing ~ .dial__caption, .dial[data-dial-preview].is-previewing ~ .dial__free { opacity: 0; }
  .dial__pv {
    position: absolute; left: 3%; right: 3%; top: calc(100% + 0.7rem); z-index: 5;
    display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; align-items: center; gap: 0 1rem;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius);
    box-shadow: 0 22px 46px rgb(23 59 59 / 0.18); overflow: hidden; color: inherit; text-decoration: none;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity 0.25s, transform 0.35s var(--ease), visibility 0s 0.35s;
  }
  .dial[data-dial-preview].is-previewing .dial__pv { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .dial__pv-pic { position: relative; align-self: stretch; min-height: 6.4rem; background: var(--sand-soft); }
  .dial__pv-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .dial__pv-tag {
    position: absolute; top: 0.45rem; left: 0.45rem; padding: 0.18rem 0.5rem; border-radius: var(--panel-radius);
    background: rgb(255 253 252 / 0.94); font-style: normal; font-size: 0.64rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-ink);
  }
  .dial__pv-txt { display: grid; gap: 0.15rem; padding: 0.7rem 0; }
  .dial__pv-txt small { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-ink); }
  .dial__pv-txt b { font-family: var(--font-serif); font-weight: 500; font-size: 1.15rem; line-height: 1.2; color: var(--teal-ink); }
  .dial__pv-sum { font-size: 0.8rem; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dial__pv-go {
    margin-right: 1rem; padding: 0.55rem 0.9rem; border-radius: var(--btn-radius); background: var(--teal-ink); color: var(--ivory);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  }
  .dial__pv-go::after { content: ' \2192'; }
  .dial__pv:hover .dial__pv-go { background: var(--teal); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .dial__pv { transform: none; transition: opacity 0.15s, visibility 0s 0.15s; }
}

/* The core has to shrink with the dial or the label spills out of the ring. Its two small labels stay at
   about 11px on a phone (25 Oct 2026: they were 9px), with less letter-spacing so they still fit. */
@media (max-width: 620px) {
  .dial__core { inset: 24%; padding: 1rem; gap: 0.3rem; }
  .dial__kicker { font-size: 0.7rem; letter-spacing: 0.1em; line-height: 1.3; }
  .dial__title { font-size: 1.02rem; }
  .dial__summary { display: none; }
  .dial__go { font-size: 0.7rem; letter-spacing: 0.08em; }
  .dial text { font-size: 14px; }
  .dial .dial__band-label { font-size: 9.5px; letter-spacing: 0.08em; }
}

/* ---------- Editorial index (the library, set as a two-column contents page) ---------- */
.index {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  border-top: 1.5px solid var(--teal-ink);
}
.index__row {
  display: grid; grid-template-columns: 2.2rem 3.4rem minmax(0, 1fr); gap: 1rem; align-items: center;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: background 0.4s var(--ease);
}
.index__row:hover { background: linear-gradient(90deg, rgb(228 236 231 / 0.55), transparent 78%); color: inherit; }
.index__n { font-family: var(--font-serif); font-style: italic; color: var(--rose-ink); font-size: 0.95rem; }
.index__thumb {
  width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--white), var(--rose-soft));
  transition: transform 0.45s var(--ease);
}
.index__row:nth-child(3n + 2) .index__thumb { background: radial-gradient(circle at 35% 30%, var(--white), var(--sage-soft)); }
.index__row:nth-child(3n) .index__thumb { background: radial-gradient(circle at 35% 30%, var(--white), var(--sand-soft)); }
.index__row:hover .index__thumb { transform: scale(1.08) rotate(-3deg); }
.index__thumb img { width: 78%; height: 78%; object-fit: contain; }
.index__body { display: grid; gap: 0.2rem; min-width: 0; }
.index__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.15rem, 1rem + 0.45vw, 1.35rem); color: var(--teal-ink); letter-spacing: -0.015em; transition: transform 0.4s var(--ease); }
.index__row:hover .index__title { transform: translateX(5px); }
.index__summary { font-size: 0.86rem; color: var(--muted); line-height: 1.5; }
.index__all { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.6rem; }
@media (max-width: 820px) {
  .index { grid-template-columns: 1fr; }
  .index__row { grid-template-columns: 1.8rem 3rem minmax(0, 1fr); gap: 0.85rem; }
  .index__thumb { width: 3rem; height: 3rem; }
}

/* ---------- Contrast table ("You won't read this here") ---------- */
.contrast {
  --no-ink: #7a4f4a; /* darker than --rose-ink so small text on the tinted column passes AA */
  --no-bg: #fbf4f2;
  border: 1px solid var(--line); border-radius: var(--panel-radius); overflow: hidden; background: var(--white);
}
.contrast__head, .contrast__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.contrast__head span { padding: 1rem 1.6rem; font: 800 0.74rem var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase; }
.contrast__head span:first-child { background: var(--rose-soft); color: var(--no-ink); }
.contrast__head span:last-child { background: var(--sage-soft); color: var(--teal); }
.contrast__rows { list-style: none; margin: 0; padding: 0; }
.contrast__row > p { margin: 0; padding: 1.25rem 1.6rem; border-top: 1px solid var(--line); display: flex; gap: 0.9rem; align-items: flex-start; }
.contrast__no { background: var(--no-bg); font-family: var(--font-serif); font-style: italic; font-size: 1.08rem; line-height: 1.45; color: var(--no-ink); }
.contrast__no s { text-decoration-color: rgb(122 79 74 / 0.5); text-decoration-thickness: 1px; }
.contrast__yes { color: var(--teal-ink); line-height: 1.55; }
.contrast__mark {
  flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; border-radius: 50%;
  display: grid; place-items: center; font: 700 0.78rem var(--font-sans); font-style: normal; color: var(--white);
}
.contrast__no .contrast__mark { background: var(--no-ink); }
.contrast__yes .contrast__mark { background: var(--teal); }
/* Labels are for screen readers on wide screens (the column headings say it visually); they show on phones. */
.contrast__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contrast__values {
  list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2rem;
  font: 800 0.74rem var(--font-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal);
}
.contrast__values li::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 0.6rem; border-radius: 50%; background: var(--rose); vertical-align: 0.15em; }
@media (max-width: 720px) {
  .contrast__head { display: none; }
  .contrast__row { grid-template-columns: 1fr; }
  .contrast__row + .contrast__row { border-top: 1px solid var(--line); }
  .contrast__row > p { padding: 1rem 1.15rem; border-top: 0; }
  .contrast__label {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    display: block; margin-bottom: 0.25rem; font: 800 0.66rem var(--font-sans); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase;
  }
  .contrast__no .contrast__label { color: var(--no-ink); }
  .contrast__yes .contrast__label { color: var(--teal); }
}

/* ---------- Homepage "Inside a topic": the illustration beside a numbered contents of a topic page ---------- */









.figure { background: var(--white); border: 1px solid var(--line); border-radius: var(--picture-radius); padding: clamp(1.3rem, 1rem + 1.6vw, 2.4rem); }
.figure img { margin-inline: auto; }
.figure figcaption { text-wrap: balance; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-align: center; }

/* ---------- Language band: the statement beside a "You hear / It means" translator ---------- */

















/* ---------- Divider ---------- */
.divider { display: block; width: min(560px, 80%); margin: 0 auto; opacity: 0.9; pointer-events: none; }
/* The band carries the colour of the section ABOVE the seam, so the divider's
   soft edges always sit on one flat ground instead of straddling two. */
.divider-band { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem); }
.divider-band--ivory { background: var(--ivory); }
.divider-band--white { background: var(--white); }
.divider-band--sage  { background: var(--sage-soft); }
.divider-band--sand  { background: var(--sand-soft); }

/* ---------- Cards ---------- */
.card {
  position: relative; display: flex; flex-direction: column; gap: 0.75rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s;
}
.card h3 { font-size: var(--step-1); }
.card p { color: var(--muted); font-size: 0.97rem; }
a.card, .card--link { text-decoration: none; color: inherit; }
a.card:hover, .card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--sage) 80%, var(--teal)); }
.card .link-arrow { margin-top: auto; padding-top: 0.5rem; }
.card__icon {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--white), var(--rose-soft));
  box-shadow: inset 0 0 0 1px rgb(216 170 165 / 0.35);
}
.card__icon img { width: 76%; height: 76%; object-fit: contain; transition: transform 0.4s var(--ease); }
a.card:hover .card__icon img { transform: scale(1.08) rotate(-3deg); }
.card:nth-child(3n + 2) .card__icon { background: radial-gradient(circle at 35% 30%, var(--white), var(--sage-soft)); box-shadow: inset 0 0 0 1px rgb(40 93 93 / 0.12); }
.card:nth-child(3n) .card__icon { background: radial-gradient(circle at 35% 30%, var(--white), var(--sand-soft)); box-shadow: inset 0 0 0 1px rgb(200 170 140 / 0.35); }
.card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag {
  display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px;
  background: var(--sage-soft); color: var(--teal); font-size: 0.76rem; font-weight: 700;
}

/* Pillars */
.pillar { display: grid; gap: 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--rose); }
.pillar__num { font-family: var(--font-serif); font-style: italic; color: var(--rose-ink); font-size: var(--step-1); }
.pillar h3 { font-size: var(--step-2); }
.pillar p { color: var(--muted); }

/* ---------- Video thumbnails (brand thumbnail system: 2–4 words, rotating bg) ---------- */
.video-card { display: flex; flex-direction: column; gap: 1rem; text-decoration: none; color: inherit; }
.thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--picture-radius); overflow: hidden;
  display: grid; grid-template-columns: 1.3fr 1fr; align-items: center;
  padding: 0 0 0 clamp(1rem, 0.6rem + 1.4vw, 1.6rem);
  background: var(--teal); color: var(--ivory);
  box-shadow: var(--shadow-s);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.video-card:hover .thumb, .thumb:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.thumb--ivory { background: var(--ivory); color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--line); }
.thumb--sage { background: var(--sage); color: var(--teal-ink); }
.thumb__title {
  font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.02em; line-height: 0.98;
  font-size: clamp(1.25rem, 0.9rem + 1.3vw, 1.9rem); text-transform: uppercase; z-index: 1;
}
.thumb__title small { display: block; margin-top: 0.6rem; font-size: 0.62rem; letter-spacing: 0.2em; font-weight: 700; opacity: 0.8; }
.thumb__art { position: relative; height: 100%; display: grid; place-items: center; }
.thumb__art::before {
  content: ''; position: absolute; width: 118%; aspect-ratio: 1; border-radius: 50%;
  background: rgb(250 247 241 / 0.14); right: -30%;
}
.thumb--ivory .thumb__art::before { background: var(--rose-soft); }
.thumb--sage .thumb__art::before { background: rgb(250 247 241 / 0.55); }
.thumb__art img { position: relative; width: 82%; max-height: 82%; object-fit: contain; filter: drop-shadow(0 10px 16px rgb(0 0 0 / 0.15)); }
.thumb__badge {
  position: absolute; left: clamp(1rem, 0.6rem + 1.4vw, 1.6rem); bottom: 0.9rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: 999px; background: rgb(250 247 241 / 0.18);
}
.thumb--ivory .thumb__badge, .thumb--sage .thumb__badge { background: rgb(40 93 93 / 0.1); }
.thumb__play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  background: rgb(250 247 241 / 0.94); display: grid; place-items: center; box-shadow: var(--shadow);
}
.thumb__play::before { content: ''; border-left: 18px solid var(--teal); border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.video-card h3 { font-size: var(--step-1); }
.video-card p { color: var(--muted); font-size: 0.95rem; }
.video-embed { aspect-ratio: 16 / 9; border-radius: var(--picture-radius); overflow: hidden; background: var(--teal-ink); position: relative; }
.video-embed iframe { width: 100%; height: 100%; border: 0; }
.video-embed button { all: unset; cursor: pointer; position: absolute; inset: 0; }
.video-embed button img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Homepage "Watch Kara": launch playlist (player · up next · notify strip) ---------- */
.watch { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 0.8rem + 2.4vw, 2.75rem); align-items: start; }
.player { text-decoration: none; }
.player .thumb__title { font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem); }
.player .thumb__title small { font-size: 0.72rem; }
.player .thumb__badge { bottom: clamp(0.9rem, 0.5rem + 1.2vw, 1.3rem); }
.player__play {
  position: absolute; right: clamp(0.9rem, 0.5rem + 1.2vw, 1.4rem); bottom: clamp(0.8rem, 0.4rem + 1.2vw, 1.2rem);
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(250 247 241 / 0.95); box-shadow: var(--shadow); transition: transform 0.35s var(--ease);
}
.player__play::before { content: ''; border-left: 17px solid var(--teal); border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 5px; }
.player:hover .player__play { transform: scale(1.06); }
.watch__title { font-size: var(--step-2); margin-top: 1.25rem; }
.watch__hook { margin-top: 0.5rem; max-width: 60ch; font-family: var(--font-serif); font-style: italic; color: var(--muted); }
.watch__read { margin-top: 0.8rem; }
.watch__read a { font-weight: 700; font-size: 0.92rem; color: var(--teal); text-decoration: none; }
.watch__read a:hover { text-decoration: underline; text-underline-offset: 3px; }

.upnext { background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); overflow: hidden; }
.upnext__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.upnext__head h3 { font-family: var(--font-sans); font-weight: 800; font-size: 0.74rem; line-height: 1.2; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); }
.upnext__head span { font-size: 0.82rem; color: var(--muted); }
.upnext__list { list-style: none; margin: 0; padding: 0; }
.upnext__list li + li { border-top: 1px solid var(--line); }
.upnext__item {
  display: grid; grid-template-columns: 1.7rem 2.75rem minmax(0, 1fr); gap: 0.85rem; align-items: center;
  padding: 0.8rem 1.25rem; text-decoration: none; color: inherit; transition: background-color 0.25s var(--ease);
}
.upnext__item:hover { background: var(--ivory); }
.upnext__n { font-family: var(--font-serif); font-style: italic; color: var(--rose-ink); }
.upnext__icon { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, var(--white), var(--rose-soft)); }
.upnext__list li:nth-child(3n + 2) .upnext__icon { background: radial-gradient(circle at 35% 30%, var(--white), var(--sage-soft)); }
.upnext__list li:nth-child(3n) .upnext__icon { background: radial-gradient(circle at 35% 30%, var(--white), var(--sand-soft)); }
.upnext__icon img { width: 78%; height: 78%; object-fit: contain; }
.upnext__body { display: grid; gap: 0.15rem; }
.upnext__title { font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.3; color: var(--teal-ink); }
.upnext__item:hover .upnext__title { text-decoration: underline; text-underline-offset: 3px; }
.upnext__meta { font-size: 0.78rem; color: var(--muted); }
.upnext__more { display: block; padding: 0.95rem 1.25rem; border-top: 1px solid var(--line); font-weight: 700; font-size: 0.9rem; color: var(--teal); text-decoration: none; }
.upnext__more:hover { background: var(--ivory); }

.notify {
  margin-top: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); scroll-margin-top: 6rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.25rem 2.5rem; align-items: center;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem) clamp(1.3rem, 0.8rem + 1.6vw, 2.25rem);
  background: var(--sage-soft); border-radius: var(--panel-radius);
}
.notify__text h3 { font-size: var(--step-2); }
.notify__text p { margin-top: 0.35rem; color: var(--muted); }
.notify .form { gap: 0.8rem; }

/* Email + button on one line (subscribe-form partial with `inline: true`) */
.form-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; }
.form-inline .btn { padding-block: 0.9rem; white-space: nowrap; }
.form-inline .field__error { order: 3; grid-column: 1 / -1; }

@media (max-width: 900px) {
  .watch, .notify { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .form-inline { grid-template-columns: minmax(0, 1fr); }
  .player__play { width: 48px; height: 48px; }
  .player__play::before { border-left-width: 14px; border-top-width: 8px; border-bottom-width: 8px; margin-left: 4px; }
  .upnext__item { padding-inline: 1rem; }
}

/* ---------- Book covers (CSS mockups of the ebook & starter guide concepts) ---------- */
.book { perspective: 1400px; justify-self: center; width: min(100%, 330px); }
.book__cover {
  position: relative; aspect-ratio: 3 / 4.2; border-radius: 3px var(--picture-radius) var(--picture-radius) 3px;
  background: var(--ivory); color: var(--teal-ink);
  padding: 13% 11% 10%;
  display: flex; flex-direction: column; overflow: hidden;
  transform: rotateY(-16deg) rotateX(3deg);
  box-shadow: -1px 0 0 #d9d0c3, -12px 0 0 -2px #efe7db, -13px 1px 0 -2px #d9d0c3, 30px 40px 60px -24px rgb(23 59 59 / 0.45);
  transition: transform 0.6s var(--ease);
}
.book:hover .book__cover { transform: rotateY(-6deg) rotateX(1deg); }
.book__cover::before { /* spine highlight */
  content: ''; position: absolute; inset: 0 auto 0 0; width: 14px;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.3) 45%, transparent);
}
.book__cover::after { /* soft follicular circle behind the title */
  content: ''; position: absolute; width: 95%; aspect-ratio: 1; right: -32%; top: 20%; border-radius: 50%;
  background: radial-gradient(circle, var(--rose-soft) 0 18%, transparent 19% 30%, rgb(202 216 208 / 0.6) 31% 33%, transparent 34% 52%, rgb(216 170 165 / 0.35) 53% 54%, transparent 55%);
}
.book__kicker { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal); position: relative; z-index: 1; }
.book__title {
  position: relative; z-index: 1; margin-top: auto;
  font-family: var(--font-serif); font-weight: 500; text-transform: uppercase; line-height: 1;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem); letter-spacing: 0.02em;
}
.book__line { display: block; }
.book__with { position: relative; z-index: 1; font-family: var(--font-serif); font-style: italic; color: var(--rose-ink); font-size: 1.35rem; margin-top: 0.35rem; }
.book__rule { position: relative; z-index: 1; height: 1px; background: var(--rose); margin-block: 1.1rem 0.8rem; width: 60%; }
.book__tag { position: relative; z-index: 1; font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; }
.book__mark { position: absolute; z-index: 1; right: 10%; top: 9%; width: 20%; opacity: 0.95; }
.book--small { width: min(100%, 260px); }
.book--small .book__title { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem); }
.book--dark .book__cover { background: var(--teal); color: var(--ivory); box-shadow: -1px 0 0 #143636, -12px 0 0 -2px #214f4f, -13px 1px 0 -2px #143636, 30px 40px 60px -24px rgb(0 0 0 / 0.55); }
.book--dark .book__kicker { color: var(--sage); }
.book--dark .book__with { color: var(--rose); }
.book--dark .book__tag { color: rgb(250 247 241 / 0.7); }
.book--dark .book__cover::after { opacity: 0.25; }

/* ---------- The Fertility Guide page: dark top with the covers on a shelf, then "Inside Book One" ---------- */
.byline { margin: -0.4rem 0 0; font-family: var(--font-serif); font-style: italic; font-size: var(--step-1); color: var(--rose-ink); }
.guide-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 2rem + 4vw, 5rem) clamp(3.5rem, 2.5rem + 4vw, 5.5rem); background: var(--teal); color: var(--ivory); }
.guide-hero__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.guide-hero__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 1rem + 4vw, 4rem); align-items: center; }
.guide-hero__copy { display: grid; gap: 1.1rem; justify-items: start; }
.guide-hero .breadcrumb, .guide-hero .breadcrumb a { color: rgb(250 247 241 / 0.72); }
.guide-hero .eyebrow { color: var(--sage); }
.guide-hero h1 { color: var(--ivory); font-size: clamp(2.6rem, 1.6rem + 3vw, 4.2rem); line-height: 1; letter-spacing: -0.03em; }
.guide-hero h1 em { display: block; color: var(--rose); }
.guide-hero .byline { margin: 0; color: var(--rose-light); }
.guide-hero .lead { color: rgb(250 247 241 / 0.84); max-width: 50ch; }
.guide-hero__form { width: min(100%, 540px); margin-top: 0.4rem; }
.guide-hero__cta { margin-bottom: 0.8rem; color: rgb(250 247 241 / 0.85); font-size: 0.95rem; }
.guide-hero__cta strong { color: var(--ivory); }
.guide-hero .btn { --btn-bg: var(--ivory); --btn-fg: var(--teal-ink); --btn-bd: var(--ivory); }
.guide-hero .form-note a { color: var(--ivory); }
.guide-hero :focus-visible { outline-color: var(--ivory); }

/* The covers stand on a shelf; two real pages from Book One fan out behind them. Sizes are relative, so it scales. */
.guide-stage__art { position: relative; aspect-ratio: 6 / 5; }
.guide-stage__page { position: absolute; top: 1%; width: 36%; height: auto; background: var(--white); box-shadow: 0 24px 50px -24px rgb(0 0 0 / 0.55); }
.guide-stage__page--1 { left: 6%; transform: rotate(-9deg); }
.guide-stage__page--2 { right: 4%; top: 0; transform: rotate(8deg); }
.guide-stage__books { position: absolute; left: 4%; right: 4%; bottom: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.guide-stage__book {
  width: 100%; height: auto; border-radius: 3px var(--picture-radius) var(--picture-radius) 3px;
  box-shadow: -1px 0 0 #d9d0c3, -8px 0 0 -2px #efe7db, -9px 1px 0 -2px #d9d0c3, 24px 34px 50px -22px rgb(0 0 0 / 0.55);
}
.guide-stage__book:nth-child(1) { transform: rotate(-4deg) translateX(14%); z-index: 1; }
.guide-stage__book:nth-child(2) { transform: translateY(-5%) scale(1.06); z-index: 3; }
.guide-stage__book:nth-child(3) { transform: rotate(4deg) translateX(-14%); z-index: 2; }
.guide-stage__shelf { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-radius: 3px; background: linear-gradient(#e8dccb, #cdbca5); box-shadow: 0 18px 30px -10px rgb(0 0 0 / 0.5); }
.guide-stage__labels { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; font-size: 0.8rem; color: rgb(250 247 241 / 0.85); }
.guide-stage__labels a { color: inherit; text-decoration: none; }
.guide-stage__labels b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 1.02rem; color: var(--ivory); }
.guide-stage__labels a:hover b { text-decoration: underline; text-underline-offset: 3px; }


@media (max-width: 960px) {
  .guide-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .guide-stage { width: min(100%, 560px); justify-self: center; }
}
@media (max-width: 560px) {
  .guide-stage__labels { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.9rem; font-size: 0.75rem; }
  .guide-stage__labels b { font-size: 0.95rem; }
}

/* Three covers side by side (partials/book-covers.ejs) */
.covers {
  list-style: none; margin: 0; padding: 0; width: 100%; max-width: 1000px; justify-self: center;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 3vw, 3rem); align-items: start;
}
.covers--compact { max-width: 520px; gap: clamp(0.6rem, 2vw, 1.25rem); }
.covers li { margin: 0; }
.covers a { display: grid; gap: 1rem; color: inherit; text-decoration: none; }
.covers img {
  display: block; width: 100%; height: auto; border-radius: 3px var(--picture-radius) var(--picture-radius) 3px;
  box-shadow: -1px 0 0 #d9d0c3, -8px 0 0 -2px #efe7db, -9px 1px 0 -2px #d9d0c3, 20px 30px 46px -22px rgb(23 59 59 / 0.45);
  transition: transform 0.4s var(--ease);
}
.covers a:hover img, .covers a:focus-visible img { transform: translateY(-6px); }
.covers__caption { text-align: center; font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.25; color: var(--teal-ink); }
.covers__num { display: block; margin-bottom: 0.2rem; font: 700 0.68rem var(--font-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--rose-ink); }
@media (max-width: 620px) {
  .covers__caption { font-size: 0.85rem; }
  .covers__num { font-size: 0.56rem; letter-spacing: 0.12em; }
}

.ebooks { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); align-items: start; }
.ebook {
  display: grid; gap: 0.7rem; padding: clamp(1.4rem, 1rem + 1.5vw, 2rem);
  background: var(--white); border-radius: var(--panel-radius); box-shadow: inset 0 0 0 1px var(--line);
}
.ebook__cover { margin: 0 0 0.9rem; }
.ebook__cover img {
  display: block; width: min(100%, 240px); height: auto; margin-inline: auto; border-radius: 3px var(--picture-radius) var(--picture-radius) 3px;
  box-shadow: -1px 0 0 #d9d0c3, -8px 0 0 -2px #efe7db, -9px 1px 0 -2px #d9d0c3, 18px 26px 40px -22px rgb(23 59 59 / 0.45);
}
.ebook__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0; }
.ebook__num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rose-ink); }
.ebook h3 { font-size: var(--step-2); margin: 0; }
.ebook__sub { margin: 0; font-family: var(--font-serif); font-style: italic; color: var(--teal); }
.ebook > p:not([class]) { margin: 0; color: var(--muted); }
.ebook .faq { margin-top: 0.4rem; }
.ebook .faq summary { font-size: var(--step-0); padding: 0.9rem 1.1rem; }
.ebook .faq details > div { padding: 0 1.1rem 1.1rem; }
.ebook__chapters { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.35rem; font-size: var(--step--1); }
.tag--sand { background: var(--sand-soft); color: var(--muted); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1rem; }
.form-row { display: grid; gap: 1rem; }
@media (min-width: 620px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 700; font-size: 0.88rem; color: var(--teal-ink); }
.field input, .field textarea {
  width: 100%; padding: 0.9rem 1.1rem; border-radius: var(--btn-radius);
  border: 1.5px solid var(--line); background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgb(40 93 93 / 0.14); }
.field.has-error input, .field.has-error textarea { border-color: #b3564e; }
.field__error { color: #9d3c34; font-size: 0.85rem; font-weight: 600; }
.checkbox { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9rem; color: var(--muted); }
.form-ask { margin: 0 0 0.6rem; font-size: 0.9rem; font-weight: 600; } /* what a sign-up form will send (5 Nov 2026) */
.checkbox input { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; accent-color: var(--teal); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 0.82rem; color: var(--muted); }
.form-status { padding: 0.9rem 1.1rem; border-radius: var(--btn-radius); font-weight: 600; font-size: 0.92rem; }
.form-status--error { background: #f7e2df; color: #7d2f28; }
.form-status--ok { background: var(--sage-soft); color: var(--teal-ink); }
.btn[aria-busy='true'] { opacity: 0.7; pointer-events: none; }
.on-dark .field label, .on-dark .checkbox { color: rgb(250 247 241 / 0.85); }
.on-dark .form-note { color: rgb(250 247 241 / 0.78); }
.on-dark .field__error { color: #ffd1cc; }

/* ---------- Homepage free-guide band: cover + contents page ("peek inside") ---------- */
.guide-band {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "peek head" "peek body";
  column-gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center;
  padding: clamp(2rem, 1rem + 4vw, 4.5rem); border-radius: var(--picture-radius);
  background: linear-gradient(135deg, var(--sand-soft), #f6ece6);
}
.guide-band__head { grid-area: head; align-self: end; }
.guide-band__body { grid-area: body; align-self: start; }
.guide-band__body .ticks { margin: 1.5rem 0 1.8rem; }

/* The book overlaps the left edge of the contents page; the page's text starts where the book ends. */
.guide-peek {
  --book-w: clamp(200px, 19vw, 270px); --overlap: calc(var(--book-w) * 0.44);
  grid-area: peek; display: grid; align-items: start;
  grid-template-columns: calc(var(--book-w) - var(--overlap)) var(--overlap) minmax(0, 1fr);
  grid-template-rows: 2.75rem auto;
}
.guide-peek__cover { grid-column: 1 / 3; grid-row: 1 / 3; z-index: 1; width: var(--book-w); height: auto; justify-self: start; margin-top: 0.5rem; border-radius: 3px var(--picture-radius) var(--picture-radius) 3px; box-shadow: 0 22px 40px -12px rgb(23 59 59 / 0.45); transform: rotate(-3deg); }
.guide-peek__page {
  grid-column: 2 / 4; grid-row: 2;
  padding: 1.5rem 1.5rem 1.3rem calc(var(--overlap) + 1.4rem);
  background: var(--white); border-radius: var(--panel-radius); box-shadow: 0 30px 60px -28px rgb(23 59 59 / 0.45);
  transform: rotate(3.5deg);
}
.guide-peek__label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); }
.guide-peek__page ol { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.guide-peek__page li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.3rem; font-family: var(--font-serif); font-size: 0.84rem; line-height: 1.3; color: var(--teal-ink); }
.guide-peek__page li span { font-style: italic; color: var(--rose-ink); }
.guide-peek__more { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: 0.72rem; font-weight: 700; color: var(--muted); }

/* Ticked list: short benefit lines with a teal check */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.ticks li { position: relative; padding-left: 2.1rem; font-weight: 600; font-size: 0.95rem; color: var(--teal-ink); }
.ticks li::before { content: ''; position: absolute; left: 0; top: 0.05rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--teal); }
.ticks li::after {
  content: ''; position: absolute; left: 0.5rem; top: 0.33rem; width: 0.34rem; height: 0.62rem;
  border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

@media (max-width: 960px) {
  .guide-band { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "peek" "body"; row-gap: 2.25rem; }
  .guide-peek { --book-w: 230px; width: 100%; max-width: 560px; justify-self: center; }
  .guide-band__body .ticks { margin-top: 0; }
}
/* Phones: the cover sits centred on top of the contents page instead of beside it. */
@media (max-width: 560px) {
  .guide-peek { --book-w: 170px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; justify-items: center; }
  .guide-peek__cover { grid-column: 1; grid-row: 1; justify-self: center; margin-top: 0; }
  .guide-peek__page {
    grid-column: 1; grid-row: 1; width: 100%;
    margin-top: calc(var(--book-w) * 0.9); padding: calc(var(--book-w) * 0.5 + 1rem) 1.3rem 1.2rem;
    transform: rotate(1.5deg);
  }
}

/* ---------- Homepage "Meet Kara": arch portrait + statement ---------- */
.kara-feature { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: center; }
.kara-feature .portrait { width: min(100%, 380px); }
/* Option A (24 Oct 2026): the photo on its own, and her verified facts as four cards */
.kara-feature__photo { width: min(100%, 380px); justify-self: center; }
.kara-feature__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--picture-radius); box-shadow: var(--shadow-l); }
.kara-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.kara-facts li { display: grid; gap: 0.2rem; align-content: start; padding: 0.8rem 0.9rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 3px 0 var(--rose-light), inset 0 0 0 1px var(--line); }
.kara-facts b { font: 500 1rem/1.25 var(--font-serif); color: var(--teal-ink); }
.kara-facts span { font-size: 0.78rem; line-height: 1.35; color: var(--muted); }
@media (max-width: 1100px) { .kara-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-facts { max-width: 860px; margin: 1.6rem auto 0; text-align: left; }  /* Meet Kara page, under the hello (option A, 24 Oct 2026) */
.kara-feature__statement { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.35rem); line-height: 1.28; color: var(--teal-ink); text-wrap: balance; }
.kara-feature__statement em { color: var(--rose-ink); }
.kara-feature__who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.75rem; padding-block: 1.1rem; border-block: 1px solid var(--line); font-size: 0.92rem; color: var(--muted); }
.kara-feature__who b { font-size: 1rem; font-weight: 600; color: var(--teal-ink); }
.kara-feature__sep { color: var(--rose); font-size: 1.3em; line-height: 1; }
.kara-feature__body { max-width: 58ch; color: var(--muted); }
@media (max-width: 820px) {
  .kara-feature { grid-template-columns: minmax(0, 1fr); }
  .kara-feature .portrait { width: min(100%, 280px); }
}
@media (max-width: 560px) {
  /* name and title on their own lines rather than wrapping after the dot */
  .kara-feature__who { flex-direction: column; align-items: flex-start; }
  .kara-feature__sep { display: none; }
}

/* ---------- Homepage ebook series: "Inside the series" contents page ---------- */


/* ---- Heading block ---- */







/* ---- The three books ---- */
/* position: relative so the visually-hidden spans inside are clipped by the swipe row, not the page */







/* heading first in the markup (so it is announced as "Book One: The Basics"), kicker shown above it */














/* Book Three: planned topics are listed unnumbered, and set a touch quieter */





/* ---- Desktop: heading left, intro + button right, then three ruled columns ---- */


/* ---- Tablet and phone: the books become a swipeable row of contents cards ---- */


/* ---------- CTA bands ---------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--picture-radius); padding: clamp(2rem, 1rem + 4vw, 4.5rem);
  background: linear-gradient(135deg, var(--sage-soft), var(--sand-soft));
}
.cta-band__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.cta-band--dark { background: var(--teal); color: var(--ivory); }
.cta-band--dark h2, .cta-band--dark h3 { color: var(--ivory); }
.cta-band--dark .lead, .cta-band--dark p { color: rgb(250 247 241 / 0.8); }
.cta-band--dark .eyebrow { color: var(--sage); }
.cta-band--dark .cta-band__bg { opacity: 0.55; }
.cta-band--dark :focus-visible { outline-color: var(--ivory); } /* rose-ink on teal is too faint for a focus ring */
.cta-band:not(.cta-band--dark)::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(250 247 241 / 0.88) 35%, rgb(250 247 241 / 0.2) 75%); }
.checklist { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.checklist li { display: flex; gap: 0.75rem; align-items: baseline; }
.checklist li::before { content: ''; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--rose); transform: translateY(-0.1rem); }
.checklist--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0.6rem 2rem; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) clamp(3rem, 2.25rem + 3vw, 5rem);
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
}
.page-hero__bg {
  position: absolute; inset: 0 0 0 32%; z-index: -1; width: 68%; height: 100%;
  object-fit: cover; object-position: 60% 42%; opacity: 0.6;
  /* fade the image in from its own left edge so there is no vertical seam */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%);
          mask-image: linear-gradient(90deg, transparent 0, #000 34%);
}
.page-hero__bg + .page-hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(96deg, var(--ivory) 0 30%, rgb(250 247 241 / 0.72) 58%, rgb(250 247 241 / 0.3) 92%); }
.page-hero .container { display: grid; gap: 1.1rem; justify-items: start; }
.page-hero h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.4rem); line-height: 1.0; letter-spacing: -0.03em; max-width: 18ch; }
/* ---------- Contact page: intro beside a three-step suggestion form with picture tiles ---------- */
.container.contact-grid {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; grid-template-areas: "head card" "more card";
  column-gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); row-gap: 1.8rem; align-items: start; justify-items: stretch;
}
.contact-head { grid-area: head; }
.contact-head h2 { margin-top: 0.6rem; }
.contact-head .lead { margin-top: 1.1rem; }
.contact-card { grid-area: card; }
.contact-more { grid-area: more; display: grid; gap: 1.2rem; align-content: start; }
.contact-photo { position: relative; margin: 0; max-width: 460px; aspect-ratio: 4 / 4.2; border-radius: var(--picture-radius); overflow: hidden; box-shadow: var(--shadow-l); }
.contact-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.contact-photo::after { content: ''; position: absolute; inset: 58% 0 0; background: linear-gradient(transparent, rgb(23 59 59 / 0.88)); }
.contact-photo figcaption { position: absolute; z-index: 1; left: 1.2rem; right: 1.2rem; bottom: 1.1rem; display: grid; gap: 0.5rem; justify-items: start; color: var(--white); }
.contact-photo .thumb__badge { position: static; }
.contact-photo b { font: 500 var(--step-1)/1.25 var(--font-serif); }
.contact-ways { width: 100%; margin: 0.6rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0.9rem; }
.contact-way a { height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; gap: 0.35rem; padding: 1.1rem 1.2rem 1.2rem; background: var(--white); border-radius: var(--panel-radius); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 0.9rem; text-decoration: none; cursor: pointer; transition: box-shadow 0.2s, transform 0.2s; }
.contact-way a:hover, .contact-way a:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--teal), var(--shadow); }
.contact-way b { font: 500 var(--step-1)/1.2 var(--font-serif); color: var(--teal-ink); }
.contact-way a > b { grid-row: 2; }
.contact-way a > span:not([class]) { grid-row: 3; }
/* the action: a button-like pill whose arrow points where the card goes (down to the form, or out to email) */
.contact-way__go { grid-row: 4; justify-self: start; margin-top: 0.7rem; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.7rem 0.55rem 1.1rem; border-radius: 999px; background: var(--teal); color: var(--white); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.02em; }
.contact-way__arrow { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--white); color: var(--teal-ink); font-size: 0.95rem; line-height: 1; transition: transform 0.2s; }
.contact-way a:hover .contact-way__arrow, .contact-way a:focus-visible .contact-way__arrow { transform: translateX(3px); }
.contact-way a:hover .contact-way__arrow--down, .contact-way a:focus-visible .contact-way__arrow--down { transform: translateY(3px); }
@media (prefers-reduced-motion: no-preference) {
  .contact-way__arrow--down { animation: contact-nudge 1.8s ease-in-out 1s 3; }
}
@keyframes contact-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }
.contact-way--main a { background: var(--teal); color: rgb(255 253 252 / 0.85); box-shadow: var(--shadow); }
.contact-way--main b { color: var(--white); }
.contact-way--main .contact-way__go { background: var(--white); color: var(--teal-ink); }
.contact-way--main .contact-way__arrow { background: var(--rose-soft); color: var(--rose-ink); }
.contact-way__tag { justify-self: start; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--rose-soft); color: var(--rose-ink); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.contact-now { padding-top: 0; }
.contact-now__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.contact-now__label { margin-right: 0.5rem; font-family: var(--font-serif); font-size: 1.15rem; color: var(--teal-ink); }
.contact-now a { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.45rem 1rem 0.45rem 0.45rem; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.9rem; font-weight: 700; color: var(--teal-ink); text-decoration: none; transition: box-shadow 0.2s; }
.contact-now a:hover, .contact-now a:focus-visible { box-shadow: inset 0 0 0 1px var(--teal); }
.contact-now img { width: 34px; height: 34px; border-radius: 50%; background: var(--ivory); }
.contact-form { gap: 1.9rem; }
.contact-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.contact-form .contact-step__title { display: flex; align-items: center; gap: 0.7rem; padding: 0; font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; color: var(--teal-ink); }
.contact-step__title .muted { font-family: var(--font-sans); font-size: 0.85rem; }
.contact-step__n {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--rose-soft); color: var(--rose-ink); font-family: var(--font-sans); font-size: 0.8rem; font-weight: 800;
}
.contact-step > .field, .contact-step > .form-row { margin-top: 0.9rem; }
.contact-step > .field__error { margin-top: 0.4rem; }
.areas { margin-top: 0.9rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.area { position: relative; cursor: pointer; }
.area input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.area__box {
  height: 100%; display: grid; justify-items: center; align-content: start; gap: 0.45rem; padding: 0.85rem 0.5rem 0.8rem;
  border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
  text-align: center; font-size: 0.8rem; font-weight: 700; line-height: 1.25; color: var(--teal-ink);
  transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
}
.area__box img { width: 3.3rem; height: 3.3rem; padding: 0.3rem; object-fit: contain; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--white), var(--rose-soft)); }
.area:nth-child(3n + 2) .area__box img { background: radial-gradient(circle at 35% 30%, var(--white), var(--sage-soft)); }
.area:nth-child(3n) .area__box img { background: radial-gradient(circle at 35% 30%, var(--white), var(--sand-soft)); }
.area:hover .area__box { box-shadow: inset 0 0 0 1px var(--teal); }
.area input:checked + .area__box { background: var(--teal); color: var(--ivory); box-shadow: none; }
.area input:checked + .area__box img { background: var(--white); }
.area input:focus-visible + .area__box { outline: 2px solid var(--rose-ink); outline-offset: 2px; }
@media (max-width: 900px) {
  .container.contact-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "more" "card"; }
}
@media (max-width: 420px) {
  .areas { gap: 0.45rem; }
  .area__box { padding-inline: 0.3rem; font-size: 0.74rem; }
  .area__box img { width: 2.8rem; height: 2.8rem; }
}

.breadcrumb { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.breadcrumb li + li::before { content: '/'; margin-right: 0.4rem; color: var(--rose); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal); }
/* Topic pages: the topic's illustration large in the header, with quick facts and key terms */
.topic-hero { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); background: linear-gradient(120deg, var(--ivory) 40%, var(--sage-soft)); border-bottom: 1px solid var(--line); }
.topic-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; }
.topic-hero__copy { display: grid; gap: 1rem; justify-items: start; }
.topic-hero h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.2rem); line-height: 1; letter-spacing: -0.03em; }
.topic-facts { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8rem 1.8rem; }
.topic-facts li { font-size: 0.82rem; color: var(--muted); }
.topic-facts b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 1.6rem; line-height: 1.2; color: var(--teal-ink); }
.topic-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.topic-hero__fig { margin: 0; padding: clamp(1rem, 0.6rem + 1.2vw, 1.5rem); border-radius: var(--picture-radius); background: var(--white); box-shadow: var(--shadow); }
.topic-hero__fig img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.topic-hero__fig figcaption { margin-top: 0.6rem; text-align: center; font-size: 0.78rem; font-style: italic; color: var(--muted); }
.topic-hero__fig--icon { display: grid; place-items: center; aspect-ratio: 4 / 3; background: radial-gradient(circle at 40% 35%, var(--white), var(--rose-soft)); }
.topic-hero__fig--icon img { width: 62%; max-height: none; }
@media (max-width: 860px) { .topic-hero__grid { grid-template-columns: minmax(0, 1fr); } .topic-hero__fig { max-width: 560px; } }
.page-hero__icon { width: clamp(140px, 10vw + 80px, 220px); filter: drop-shadow(0 16px 26px rgb(23 59 59 / 0.15)); }

/* ---------- Library (Learn) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter {
  padding: 0.5rem 1rem; border-radius: 999px; border: 1.5px solid var(--line); background: transparent;
  font-size: 0.85rem; font-weight: 700; color: var(--muted); transition: all 0.2s;
}
.filter:hover { border-color: var(--teal); color: var(--teal); }
.filter[aria-pressed='true'] { background: var(--teal); border-color: var(--teal); color: var(--white); }
/* ---------- Library page: search in the header, then picture cards ---------- */
.library-hero h1 { margin-top: 0.6rem; font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.6rem); max-width: 20ch; }
.library-hero .library-search { margin-top: 0.6rem; }
.library-hero .filters { margin-top: 0.4rem; }
/* Learn page zones: female, male, and the topics for both (option B, 22 Oct 2026) */
.zone { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.zone[hidden] { display: none; }
.zone--female { background: linear-gradient(180deg, var(--rose-soft), #f8eeea); }
.zone--male { background: linear-gradient(180deg, var(--sage-soft), #eef3f0); }
.zone--both { background: var(--sand-soft); }
.zone__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 2rem; margin-bottom: 2.2rem; }
.zone__head--plain { grid-template-columns: minmax(0, 760px); }
.zone__copy { display: grid; gap: 1rem; justify-items: start; }
.zone__copy h2 { font-size: var(--step-4); margin: 0; line-height: 1.08; }
.zone__copy .lead { margin: 0; }
.zone__motion { min-width: 0; max-width: 520px; justify-self: end; width: 100%; }
.zone__motion--eggs .egg-orbit { width: min(100%, 250px); }
.zone__cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.zone__cards--both { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zcard {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--white); border-radius: var(--panel-radius); box-shadow: var(--shadow-s);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.zcard[hidden] { display: none; }
.zcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.zcard__pic { display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.zcard__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zcard__body { display: grid; gap: 0.35rem; align-content: start; padding: 0.9rem 1rem 1.1rem; }
.zcard__area { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink); }
.zcard__area--male { color: var(--teal); }
.zcard__title { font: 500 1.08rem/1.25 var(--font-serif); color: var(--teal-ink); }
.zcard__sum { font-size: 0.85rem; line-height: 1.45; color: var(--muted); }
.zone__cards--both .zcard { flex-direction: row; }
.zone__cards--both .zcard__pic { flex: none; width: 132px; aspect-ratio: auto; min-height: 150px; }
/* Option B (24 Oct 2026): each zone opens with a large "Start here" card spanning two rows */
.zone__cards:has(.zcard--first) { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
.zone__cards--both:has(.zcard--first) { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
.zcard--first { position: relative; grid-row: span 2; flex-direction: column; box-shadow: inset 0 0 0 2px var(--teal), var(--shadow); }
.zcard--first:hover { box-shadow: inset 0 0 0 2px var(--teal), var(--shadow-l); }
.zone__cards .zcard--first .zcard__pic { flex: 1 1 auto; width: 100%; min-height: 260px; aspect-ratio: auto; }
.zcard--first .zcard__title { font-size: 1.5rem; }
.zcard__start { position: absolute; top: 0.8rem; left: 0.8rem; z-index: 2; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--teal); color: var(--white); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 1000px) { .zone__cards:has(.zcard--first), .zone__cards--both:has(.zcard--first) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zcard--first { grid-column: 1 / -1; grid-row: auto; } .zone__cards .zcard--first .zcard__pic { min-height: 0; aspect-ratio: 16 / 9; } }
@media (max-width: 600px) { .zone__cards--both:has(.zcard--first) { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1000px) {
  .zone__head { grid-template-columns: minmax(0, 1fr); }
  .zone__motion { justify-self: center; }
  .zone__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zone__cards--both { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .zone__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zone__cards--both { grid-template-columns: minmax(0, 1fr); }
  .zone__cards:not(.zone__cards--both) .zcard__sum { display: none; }
  .zone__cards--both .zcard__pic { width: 110px; }
}
/* ---------- Free guide page: the ten foundations as a path, the worksheets as paper ---------- */
.steps-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.4rem 1rem; }
.steps-path__step { position: relative; display: grid; justify-items: center; text-align: center; }
/* the line joining one picture to the next, along each row of five */
.steps-path__step::after {
  content: ''; position: absolute; top: 60px; left: calc(50% + 68px); width: calc(100% - 136px + 1rem); height: 2px;
  background: linear-gradient(90deg, var(--sage), var(--rose));
}
.steps-path__step:nth-child(5n)::after, .steps-path__step:last-child::after { display: none; }
.steps-path__pic {
  position: relative; width: 120px; height: 120px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, var(--white), var(--rose-soft)); box-shadow: 0 0 0 6px var(--white), 0 0 0 7px var(--line);
}
.steps-path__step:nth-child(3n + 2) .steps-path__pic { background: radial-gradient(circle at 35% 30%, var(--white), var(--sage-soft)); }
.steps-path__step:nth-child(3n) .steps-path__pic { background: radial-gradient(circle at 35% 30%, var(--white), var(--sand-soft)); }
.steps-path__pic img { position: absolute; inset: 0; margin: auto; max-width: 76%; max-height: 76%; object-fit: contain; }
.steps-path__n {
  position: relative; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; margin-top: -0.9rem;
  border-radius: 50%; background: var(--teal); color: var(--ivory); font-size: 0.8rem; font-weight: 700;
}
.steps-path__title { margin-top: 0.5rem; font-family: var(--font-serif); line-height: 1.3; color: var(--teal-ink); }

.ws-band { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3rem; align-items: center; }
.ws-band__text { display: grid; gap: 0.8rem; justify-items: start; }
.ws-band__text h3 { font-size: var(--step-3); }
.ws-band__text p { color: var(--muted); }
.ws-fan { list-style: none; margin: 0; padding: 0; position: relative; height: 470px; }
.ws-sheet {
  position: absolute; width: 46%; min-height: 330px; display: flex; flex-direction: column; gap: 0.45rem; padding: 1.4rem 1.4rem 1.6rem;
  background: var(--white); border-radius: var(--panel-radius); box-shadow: 0 20px 40px -24px rgb(23 59 59 / 0.45), 0 0 0 1px rgb(0 0 0 / 0.05);
}
/* 11 Nov 2026: a staircase, each sheet a little lower and in front of the last, so every title shows and the
   third sheet stays inside the page (before, the middle sheet hid two titles and the third ran past the edge). */
.ws-fan { height: 520px; }
.ws-sheet:nth-child(1) { left: 0; top: 0; transform: rotate(-5deg); }
.ws-sheet:nth-child(2) { left: 26%; top: 70px; z-index: 2; transform: rotate(-1deg); }
.ws-sheet:nth-child(3) { right: 3%; top: 140px; z-index: 3; transform: rotate(4deg); }
.ws-sheet__kicker { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose-ink); }
.ws-sheet h4 { font-size: 1.2rem; }
.ws-sheet p { font-size: 0.8rem; color: var(--muted); }
.ws-sheet__line { display: block; padding: 0.9rem 0 0.3rem; border-bottom: 1px solid var(--line); font-size: 0.74rem; color: var(--muted); }
.ws-sheet__table { display: grid; margin-top: 0.4rem; }
.ws-sheet__thead { display: grid; grid-template-columns: 0.8fr 0.8fr 0.9fr 1.2fr 1.3fr; gap: 0.3rem; padding: 0.4rem 0.35rem; background: var(--sage-soft); font-size: 0.6rem; font-weight: 700; line-height: 1.25; color: var(--teal-ink); }
.ws-sheet__row { height: 1.5rem; border-bottom: 1px solid var(--line); }

@media (max-width: 1000px) {
  .steps-path { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps-path__step::after { display: none; }
  .ws-band { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .steps-path { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 0.8rem; }
  .steps-path__pic { width: 100px; height: 100px; }
  .steps-path__title { font-size: 0.92rem; }
  /* phones: the worksheets overlap as a stack rather than a wide fan */
  .ws-fan { height: auto; display: grid; }
  .ws-sheet { position: relative; width: 88%; min-height: 0; left: auto !important; right: auto !important; top: auto !important; }
  .ws-sheet:nth-child(1) { transform: rotate(-2deg); }
  .ws-sheet:nth-child(2) { justify-self: end; margin-top: -1.5rem; transform: rotate(1.5deg); }
  .ws-sheet:nth-child(3) { margin-top: -1.5rem; transform: rotate(-1deg); z-index: 3; }
}

/* ---------- Resources page: word of the day, flashcard glossary, source tiles ---------- */
.source-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.9rem; }
.source-tiles li { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.2rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.source-tiles__short { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; color: var(--rose-ink); }
.source-tiles b { font-family: var(--font-serif); font-weight: 500; font-size: 1rem; line-height: 1.3; color: var(--teal-ink); }
.source-tiles__text { font-size: 0.82rem; color: var(--muted); }
.source-tiles a { margin-top: auto; padding-top: 0.4rem; font-size: 0.82rem; font-weight: 700; color: var(--teal); }
@media (max-width: 1100px) { .source-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .source-tiles { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Text pages (privacy, disclaimer), thank-you and 404: warm header, paper on a sand "desk" ---------- */
.doc-hero { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem); background: linear-gradient(180deg, var(--ivory), var(--sand-soft)); }
.doc-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: center; }
.doc-hero__copy { display: grid; gap: 0.9rem; justify-items: start; }
.doc-hero h1 { font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4rem); line-height: 1; letter-spacing: -0.03em; }
.doc-hero__pic {
  display: grid; place-items: center; width: clamp(120px, 8vw + 80px, 180px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--white), var(--rose-soft)); box-shadow: 0 0 0 8px rgb(255 253 252 / 0.7), var(--shadow);
}
.doc-hero__pic img { width: 66%; height: auto; }
.doc-points { list-style: none; margin: 0.3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.doc-points li { padding: 0.45rem 0.9rem; border-radius: 999px; background: rgb(255 253 252 / 0.85); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.85rem; font-weight: 700; color: var(--teal-ink); }
.doc-points li::before { content: '✓'; margin-right: 0.4rem; color: var(--teal); }
.doc-desk { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(3rem, 2rem + 4vw, 5.5rem); background: linear-gradient(180deg, var(--sand-soft), #efe3d6); }
.doc-paper { max-width: 820px; margin-inline: auto; padding: clamp(1.4rem, 0.8rem + 3vw, 3rem); border-radius: var(--panel-radius); background: var(--white); box-shadow: 0 30px 60px -30px rgb(23 59 59 / 0.4); counter-reset: doc; }
.doc-paper h2 { counter-increment: doc; margin-top: 2.4rem; font-size: var(--step-2); }
.doc-paper h2::before { content: counter(doc, decimal-leading-zero); display: block; margin-bottom: 0.2rem; font-size: 1rem; font-style: italic; color: var(--rose-ink); }
.doc-paper > :first-child { margin-top: 0; }
.learn-cards.learn-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto; }
@media (max-width: 700px) {
  .doc-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .doc-hero__pic { order: -1; width: 110px; }
  .learn-cards.learn-cards--3 { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
}

.library-empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }

/* ---------- Article (topic pages) ---------- */
.article-layout { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 1000px) { .article-layout { grid-template-columns: 240px minmax(0, 1fr); } }
.toc { position: sticky; top: 7rem; align-self: start; display: none; }
@media (min-width: 1000px) { .toc { display: block; } }
.toc p { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); padding-bottom: 0.7rem; border-bottom: 1.5px solid var(--teal-ink); margin-bottom: 0; }
.toc__count { font-family: var(--font-serif); font-style: italic; font-size: 0.82rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--rose-ink-deep); white-space: nowrap; }
/* Reading path: a rail runs through one dot per section and fills teal down to the current one (main.js sets --toc-fill) */
.toc ol { position: relative; list-style: none; padding: 0; margin-top: 0.5rem; }
.toc ol::before, .toc ol::after { content: ''; position: absolute; left: calc(0.65rem - 1px); top: 1.1rem; width: 2px; border-radius: 2px; }
.toc ol::before { height: var(--toc-rail, calc(100% - 2.2rem)); background: var(--sage); }
.toc ol::after { height: var(--toc-fill, 0px); background: var(--teal); transition: height 0.4s var(--ease); }
.toc a { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3rem 1fr; column-gap: 0.85rem; align-items: start; padding: 0.5rem 0; font-size: 0.88rem; line-height: 1.4; color: var(--muted); text-decoration: none; transition: color 0.25s; }
.toc a::before { content: ''; grid-row: span 2; justify-self: center; width: 0.7rem; height: 0.7rem; margin-top: 0.27rem; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--sage); transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease); }
.toc a:hover { color: var(--teal); }
.toc a:hover::before { box-shadow: inset 0 0 0 2px var(--teal); }
.toc a.is-read { color: var(--teal); }
.toc a.is-read::before { background: var(--teal); box-shadow: none; transform: scale(0.75); }
.toc a.is-active { color: var(--teal-ink); font-weight: 700; }
.toc a.is-active::before { background: var(--teal); box-shadow: none; outline: 2px solid var(--rose); outline-offset: 3px; }
.toc a.is-active::after { content: 'You are here' / ''; grid-column: 2; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.06em; color: var(--rose-ink); }
@media (prefers-reduced-motion: reduce) { .toc ol::after, .toc a::before { transition: none; } }
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { font-size: var(--step-3); margin-top: 3rem; }
.prose h3 { font-size: var(--step-2); margin-top: 2.25rem; }
.prose p, .prose li { color: #3b4343; }
.prose figure { margin-block: 2.5rem; }
.prose figure img { width: 100%; border-radius: var(--picture-radius); background: var(--white); border: 1px solid var(--line); padding: clamp(0.75rem, 2vw, 1.5rem); }
.prose figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.75rem; text-align: center; font-style: italic; }

/* Recurring "ebook boxes" — the same system as the book's inside pages (Launch Pack §07) */
.box { position: relative; border-radius: var(--panel-radius); padding: clamp(1.25rem, 1rem + 1vw, 1.9rem); border: 1px solid var(--line); background: var(--white); }
.box__label {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal);
}
.box__label::before { content: ''; flex: none; width: 1.9rem; height: 1px; background: currentColor; opacity: 0.55; }
.box p:last-child { margin-bottom: 0; }
.box--explains { background: var(--sage-soft); border-color: transparent; }
.box--explains p { font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.55; color: var(--teal-ink); }
.box--takeaway { background: var(--teal); border-color: transparent; color: var(--ivory); }
.box--takeaway .box__label { color: var(--rose-light); }
.box--takeaway p { font-family: var(--font-serif); font-size: var(--step-2); line-height: 1.35; color: var(--ivory); font-style: italic; }
.box--ask { background: var(--sand-soft); border-color: transparent; }
.box--ask .box__label { color: var(--rose-ink-deep); }
.box--ask ol { padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.myths { display: grid; gap: 1rem; }
.myth { display: grid; border-radius: var(--panel-radius); overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 10px 24px -18px rgb(23 59 59 / 0.35); }
@media (min-width: 700px) { .myth { grid-template-columns: 1fr 1.3fr; } }
.myth > div { position: relative; padding: 1.25rem 1.5rem 1.25rem 3.4rem; }
/* A rose ✕ for the myth and a teal ✓ for the evidence */
.myth > div::before { position: absolute; left: 1.1rem; top: 1.2rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; line-height: 1; }
.myth__claim { background: var(--rose-soft); }
.myth__claim::before { content: '✕' / ''; background: var(--white); color: var(--rose-ink); box-shadow: inset 0 0 0 1.5px var(--rose); }
.myth__claim strong, .myth__evidence strong { display: block; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.35rem; }
.myth__claim strong { color: var(--rose-ink-deep); }
/* 11 Nov 2026 design review: no line through the myth (it made the sentence hard to read). The ✕, the "You may hear"
   label and a softer colour say it is a myth. */
.myth__claim p { font-family: var(--font-serif); font-style: italic; color: var(--muted); }
.myth__evidence { background: var(--white); }
.myth__evidence::before { content: '✓' / ''; background: var(--teal); color: var(--ivory); }
.myth__evidence strong { color: var(--teal); }
/* Words you may hear: one flashcard per term, each with a coloured top edge */
.terms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
/* Rows always fill: three across when the count divides by 3, otherwise two across with an odd last card taking the whole row */
@media (min-width: 640px) {
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terms > div:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .terms:has(> div:last-child:nth-child(3n)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .terms:has(> div:last-child:nth-child(3n)) > div:last-child { grid-column: auto; }
}
.terms > div { --edge: var(--sage); display: grid; align-content: start; gap: 0.45rem; padding: 1.1rem 1.1rem 1.2rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 3px 0 var(--edge), 0 8px 20px -16px rgb(23 59 59 / 0.4); }
.terms > div:nth-child(3n + 2) { --edge: var(--rose); }
.terms > div:nth-child(3n) { --edge: var(--sand); }
.terms dt { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: var(--teal-ink); }
.terms dd { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }

/* Kara's own boxes carry her monogram, like a note in the margin */
.prose .box:has(> .box__label--kara), .sg-paper .box:has(> .box__label--kara) { padding-left: calc(clamp(1.25rem, 1rem + 1vw, 1.9rem) + 4.5rem); }
.prose .box:has(> .box__label--kara)::before, .sg-paper .box:has(> .box__label--kara)::before {
  content: ''; position: absolute; left: clamp(1.25rem, 1rem + 1vw, 1.9rem); top: clamp(1.25rem, 1rem + 1vw, 1.9rem); width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--white) url('/images/brand/monogram-k.webp') center / 78% no-repeat; box-shadow: 0 0 0 1px var(--sage), 0 6px 14px -8px rgb(23 59 59 / 0.4);
}
.prose .box--takeaway:has(> .box__label--kara)::before { background-color: var(--ivory); box-shadow: 0 0 0 3px rgb(216 170 165 / 0.6); }
.prose .box--explains { border-left: 3px solid var(--teal); }
/* On phones the monogram moves to the top-right corner, so Kara's words keep the full width */
@media (max-width: 560px) {
  .prose .box:has(> .box__label--kara), .sg-paper .box:has(> .box__label--kara) { padding-left: clamp(1.25rem, 1rem + 1vw, 1.9rem); }
  .prose .box:has(> .box__label--kara)::before, .sg-paper .box:has(> .box__label--kara)::before { left: auto; right: 1rem; top: 1rem; width: 2.4rem; height: 2.4rem; }
  .prose .box > .box__label--kara, .sg-paper .box > .box__label--kara { padding-right: 2.8rem; }
}

/* Questions for your appointment: a dashed tear-off card with room for notes (prints cleanly) */
.prose .box--ask { margin-top: 2.6rem; padding-top: 2.2rem; background: var(--white); border: 1.5px dashed var(--rose); }
.box__tab { position: absolute; top: -0.85rem; left: 1.4rem; padding: 0.35rem 0.8rem; border-radius: var(--panel-radius); background: var(--rose-soft); color: var(--rose-ink-deep); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.prose .box--ask ol { list-style: none; padding: 0; gap: 0; counter-reset: ask; }
.prose .box--ask li { counter-increment: ask; display: grid; grid-template-columns: 2rem 1fr; margin: 0; padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.prose .box--ask li::before { content: counter(ask); font-family: var(--font-serif); font-style: italic; color: var(--rose-ink); }
.box__notes { margin-top: 1rem !important; height: 3.2rem; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); background: repeating-linear-gradient(transparent 0 1.55rem, var(--line) 1.55rem 1.6rem); }
.sources { font-size: 0.88rem; color: var(--muted); }
.sources ul { padding-left: 1.1rem; margin-top: 0.5rem; }
/* Previous / next (25 Oct 2026): the Embryology Course's pager cards, so both sides move on the same way */
.pager { display: grid; gap: 1rem; margin-top: 4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.pager a { display: grid; gap: 0.3rem; padding: 1.1rem 1.3rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow 0.2s, transform 0.2s var(--ease); }
.pager a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--teal), var(--shadow-s); }
.pager small { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.pager span { font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.25; color: var(--teal-ink); }
.pager .next { text-align: right; background: var(--teal); box-shadow: none; }
.pager .next:hover { box-shadow: var(--shadow); }
.pager .next small { color: var(--rose-light); }
.pager .next span { color: var(--ivory); }
@media (prefers-reduced-motion: reduce) { .pager a { transition: none; } .pager a:hover { transform: none; } }

/* ---------- Start Here (22 Oct 2026): A · the six steps on an illustrated path, plus D's appointment questions ---------- */
/* Start Here, option D "Picture board" (22 Oct 2026): watercolour header, then the steps as tilted picture cards */
.start-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.start-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.start-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--ivory) 30%, rgb(250 247 241 / 0.82) 50%, rgb(250 247 241 / 0) 78%); }
.start-hero__inner { display: grid; gap: 1.1rem; justify-items: start; }
.start-hero__inner > * { max-width: 36rem; margin: 0; }
.start-hero h1 { font-size: var(--step-5); }
.start-hero__count { color: var(--muted); }
.start-hero__count b { font: 600 1.5rem var(--font-serif); color: var(--rose-ink); }
.start-hero__count a { color: inherit; text-decoration-color: var(--rose); text-underline-offset: 4px; }
.start-hero__count a:hover { color: var(--teal-ink); }
.start__progress:not([hidden]) { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.4rem; white-space: nowrap; }
.start__bar { width: min(220px, 30vw); height: 8px; border-radius: 99px; background: var(--sage-soft); overflow: hidden; }
.start__bar span { display: block; height: 100%; width: calc(var(--done, 0) * 100%); background: var(--teal); transition: width 0.5s var(--ease); }
.start__count { margin: 0; color: var(--muted); }
.start__count b { color: var(--teal-ink); }
.start__hint { margin: 0; }
.start-board-sec { padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.start-board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem 1.8rem; }
.start-card { display: flex; flex-direction: column; gap: 0.9rem; padding: 0.75rem 0.75rem 1.2rem; background: var(--white); border-radius: var(--panel-radius); box-shadow: 0 22px 40px -26px rgb(23 59 59 / 0.55), 0 0 0 1px var(--line); rotate: -1.2deg; }
.start-card:nth-child(2n) { rotate: 1.2deg; }
.start-card:nth-child(3n) { rotate: -0.4deg; }
.start-card__pic { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--picture-radius); background: var(--sand); }
.start-card__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.start-card__pic img[src*="kara-portrait"] { object-position: 50% 12%; } /* step 6: Kara's face, not only her chin (11 Nov 2026) */
.start-card__pic--cover { background: linear-gradient(160deg, #f6ece6, #efe2d6); }
.start-card__pic--cover img { position: absolute; inset: 8% 0; margin: auto; width: auto; height: 84%; object-fit: contain; box-shadow: 0 18px 30px -18px rgb(23 59 59 / 0.5); }
.start-card__text { flex: 1; display: flex; flex-direction: column; gap: 0.55rem; padding-inline: 0.4rem; }
.start-card__n { position: relative; width: 2.4rem; height: 2.4rem; margin-top: -2.3rem; border-radius: 50%; display: grid; place-items: center; background: var(--rose-ink); color: var(--white); box-shadow: 0 0 0 4px var(--white); font: 600 1.1rem/1 var(--font-serif); transition: background 0.3s; }
.start-card.is-done .start-card__n { background: var(--teal); }
/* Option B (24 Oct 2026): the next step stands out, finished steps fade and get a tick (main.js sets is-next and is-done) */
.start-card { position: relative; }
.start-card__next, .start-card__tick { display: none; }
.start-card.is-next { box-shadow: 0 0 0 3px var(--teal), 0 26px 44px -24px rgb(23 59 59 / 0.6); }
.start-card.is-next .start-card__next { display: block; position: absolute; top: -0.85rem; left: 50%; z-index: 3; translate: -50% 0; padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--teal); color: var(--white); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.start-card.is-done .start-card__pic, .start-card.is-done h2, .start-card.is-done p { opacity: 0.6; }
.start-card.is-done .start-card__tick { display: grid; place-items: center; position: absolute; top: 1.3rem; right: 1.3rem; z-index: 3; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px var(--white); }
.start-card.is-done .start-card__tick::after { content: ""; width: 0.45rem; height: 0.85rem; margin-top: -0.2rem; border: solid var(--white); border-width: 0 3px 3px 0; rotate: 45deg; }
@media (prefers-reduced-motion: no-preference) { .start-card { transition: box-shadow 0.3s var(--ease); } .start-card__pic, .start-card h2, .start-card p { transition: opacity 0.3s; } }
.start-card h2 { margin: 0; font-size: 1.3rem; line-height: 1.2; }
.start-card p { margin: 0; color: #465050; font-size: 0.95rem; }
.start-card .start-step__actions { margin-top: auto; padding-top: 0.4rem; gap: 0.6rem 1.2rem; }
/* bottom-right corner, never over Kara's face (user rule, 22 Oct 2026; fixed here 24 Oct) */
.start__play { position: absolute; right: 0.7rem; bottom: 0.7rem; width: 46px; height: 46px; border-radius: 50%; background: rgb(255 253 252 / 0.95); box-shadow: var(--shadow); }
.start__play::after { content: ''; position: absolute; left: 18px; top: 14px; border-left: 14px solid var(--teal); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.start-step__actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 0.3rem; }
.start-tick { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--teal-ink); cursor: pointer; }
.start-tick input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; cursor: pointer; }
.start-tick__box { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--sage); background: var(--white); display: grid; place-items: center; transition: background 0.2s, border-color 0.2s; }
.start-tick input:focus-visible + .start-tick__box { outline: 2px solid var(--teal); outline-offset: 3px; }
.start-tick input:checked + .start-tick__box { background: var(--teal); border-color: var(--teal); }
.start-tick input:checked + .start-tick__box::after { content: ''; width: 10px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.start-board__end { display: grid; justify-items: center; gap: 0.8rem; margin-top: 2.5rem; text-align: center; }
.start-board__end p { margin: 0; }
.start__complete { font-family: var(--font-serif); font-size: var(--step-1); color: var(--teal-ink); }
.start-questions-sec { padding-top: 0; }
.start-questions-sec__grid { max-width: 1080px; }
.start-questions__foot { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; }
.start-questions { position: relative; background: var(--white); border: 2px dashed var(--rose); border-radius: var(--panel-radius); padding: 2.2rem clamp(1.3rem, 1rem + 2vw, 2.4rem) 1.8rem; display: grid; gap: 0.7rem; justify-items: start; }
.start-questions__tab { position: absolute; top: -0.85rem; left: 1.4rem; background: var(--rose-soft); color: var(--rose-ink-deep); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3rem 0.75rem; }
.start-questions h2 { margin: 0; font-size: var(--step-3); }
.start-questions .small { margin: 0; }
.start-questions__list { list-style: none; margin: 0.4rem 0 0.6rem; padding: 0; counter-reset: q; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; width: 100%; }
.start-questions__list li { counter-increment: q; display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); align-content: start; gap: 0.15rem 0.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.start-questions__list li::before { content: counter(q) '.'; grid-row: span 2; font: 500 1.05rem/1.4 var(--font-serif); color: var(--rose-ink); }
.start-questions__list span { font-family: var(--font-serif); font-size: 1.06rem; line-height: 1.4; color: var(--teal-ink); }
.start-questions__list a { font-size: 0.78rem; color: var(--muted); width: fit-content; }
.start-kara { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; color: inherit; background: var(--sage-soft); padding: 0.7rem 1.2rem 0.7rem 0.8rem; border-radius: var(--panel-radius); }
.start-kara img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top; }
.start-kara > span { display: grid; gap: 0.15rem; }
.start-kara b { font-family: var(--font-serif); font-weight: 500; font-size: 1.1rem; color: var(--teal-ink); }
.start-kara > span > span { font-size: 0.85rem; font-weight: 700; color: var(--teal); }
.start-kara:hover b { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) {
  .start-questions__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) { .start-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .start-board { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .start-card, .start-card:nth-child(n) { rotate: 0deg; }
  /* the watercolour becomes a strip under the text, cropped to the two faces */
  .start-hero { display: flex; flex-direction: column; padding-bottom: 0; }
  .start-hero::before { content: none; }
  .start-hero__bg { position: static; order: 2; height: 230px; margin-top: 1.8rem; object-position: 58% 22%; z-index: auto; }
}
@media print {
  .is-printing-questions body * { visibility: hidden; }
  .is-printing-questions .start-questions, .is-printing-questions .start-questions * { visibility: visible; }
  .is-printing-questions .start-questions { position: absolute; left: 0; top: 0; width: 100%; border-color: #999; }
  .is-printing-questions .start-questions__print { display: none; }
}

/* The Learn menu panel leads with a link to the Learn page itself */
.nav-mega__top { width: min(100% - 2 * var(--gutter), 1400px); margin-inline: auto; padding-top: 1.25rem; }
.primary-nav .nav-mega__all { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem 1.1rem; border-radius: var(--panel-radius); background: var(--teal); color: var(--white); font-size: 0.9rem; font-weight: 500; transition: background 0.2s; }
.primary-nav .nav-mega__all:hover, .primary-nav .nav-mega__all:focus-visible { background: var(--teal-deep); color: var(--white); }
/* The bar keeps white text in every state, including on the Learn page itself (aria-current) */
.primary-nav .nav-mega__all, .primary-nav .nav-mega__all[aria-current='page'], .primary-nav .nav-mega__all:visited { color: var(--white); }
.primary-nav .nav-mega__all[aria-current='page'] { background: var(--teal-deep); }
.primary-nav .nav-mega__all::after { display: none; }
.nav-mega__all b { font-family: var(--font-serif); font-weight: 500; font-size: 1.1rem; margin-right: 0.6rem; }
.nav-mega__top + .nav-mega__grid { padding-top: 1.4rem; }
/* The Embryology Course row under "Open the Learn page" (25 Oct 2026, shown once the course is live) */
.nav-mega__top:has(.nav-mega__course) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; }
.primary-nav .nav-mega__course, .primary-nav .nav-mega__course:visited { background: var(--sage-soft); color: var(--teal-ink); }
.primary-nav .nav-mega__course:hover, .primary-nav .nav-mega__course:focus-visible { background: var(--sage); color: var(--teal-ink); }
@media (max-width: 1180px) { .nav-mega__top:has(.nav-mega__course) { grid-template-columns: 1fr; } }
@media (max-width: 1180px) { .nav-mega__top { width: auto; padding: 1rem 1rem 0; } .primary-nav .nav-mega__all { white-space: normal; font-family: var(--font-sans); font-size: 0.85rem; line-height: 1.4; } .nav-mega__all b { display: block; margin: 0 0 0.2rem; } }

/* ---------- Videos page (22 Oct 2026): A · Kara on camera, B's episode guide, A's year timeline ---------- */
.vpage__title { margin-top: 1rem; font-size: clamp(2.4rem, 1.5rem + 3vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 18ch; }
.vhero { background: radial-gradient(120% 90% at 85% 20%, #2f6b6b, var(--teal-deep) 60%, var(--teal-ink)); color: var(--white); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.vhero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.vhero__copy { display: grid; gap: 1.2rem; justify-items: start; }
.vhero .breadcrumb, .vhero .breadcrumb a { color: rgb(255 255 255 / 0.78); }
.vhero .vpage__title { color: var(--white); margin: 0; }
.vhero .accent { color: var(--rose-light); }
.vhero .lead { color: rgb(255 255 255 / 0.86); margin: 0; max-width: 46ch; }
.vhero__notify { scroll-margin-top: 6rem; width: 100%; max-width: 520px; background: var(--white); color: var(--charcoal); padding: 1.3rem 1.4rem; border-radius: var(--panel-radius); display: grid; gap: 0.5rem; }
.vhero__notify > p { margin: 0 0 0.4rem; color: var(--muted); font-size: 0.92rem; }
.vhero__frame { position: relative; z-index: 1; display: block; width: 64%; margin-inline: auto; aspect-ratio: 4 / 5; max-height: 560px; border-radius: var(--picture-radius); overflow: hidden; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.5); text-decoration: none; color: var(--white); }
.vhero__stage { position: relative; padding-block: 1.5rem; }
.vhero__tile { position: absolute; z-index: 0; width: 36%; padding: 0.5rem; background: var(--white); border-radius: var(--panel-radius); box-shadow: 0 20px 40px -18px rgb(0 0 0 / 0.55); }
.vhero__tile img { display: block; width: 100%; height: auto; border-radius: var(--picture-radius); }
.vhero__tile--1 { top: 4%; right: -2%; transform: rotate(6deg); }
.vhero__tile--2 { top: 14%; left: -4%; transform: rotate(-6deg); }
.vhero__tile--3 { bottom: 16%; right: -5%; width: 30%; transform: rotate(-5deg); }
.vhero__tile--4 { bottom: 6%; left: -2%; transform: rotate(5deg); }
.vhero__tile--ep { padding: 0; background: none; }
.vhero__tile--ep .thumb { box-shadow: 0 20px 40px -18px rgb(0 0 0 / 0.55); }
.vhero__tile--ep .thumb__title { font-size: 0.8rem; position: relative; z-index: 1; }
.vhero__tile--ep .thumb__title small { font-size: 0.45rem; margin-top: 0.3rem; }
.vhero__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vhero__frame::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgb(23 59 59 / 0.9)); }
.vhero__play { position: relative; flex: none; width: 60px; height: 60px; border-radius: 50%; background: rgb(255 253 252 / 0.95); box-shadow: var(--shadow); transition: transform 0.3s var(--ease); }
.vhero__play::after { content: ''; position: absolute; left: 23px; top: 18px; border-left: 19px solid var(--teal); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.vhero__frame:hover .vhero__play { transform: scale(1.06); }
.vhero__cap { position: absolute; z-index: 1; left: 1.3rem; right: 1.3rem; bottom: 1.3rem; display: flex; align-items: flex-end; gap: 1rem; }
.vhero__captext { display: grid; gap: 0.6rem; justify-items: start; }
.vhero__captext .thumb__badge { position: static; }
.vhero__captext b { font: 500 var(--step-2)/1.2 var(--font-serif); }
.ep { display: grid; gap: 0.6rem; text-decoration: none; color: inherit; }
.ep .thumb__title { font-size: clamp(0.85rem, 0.6rem + 0.5vw, 1rem); }
.ep .thumb__title small { font-size: 0.5rem; margin-top: 0.4rem; }
.ep .thumb__badge { left: 0.7rem; bottom: 0.55rem; padding: 0.2rem 0.45rem; font-size: 0.5rem; }
.ep .thumb__play { width: 40px; height: 40px; }
.vguide { scroll-margin-top: 5rem; }
.vguide__list { list-style: none; margin: 0; padding: 0; display: grid; }
.vguide__row { scroll-margin-top: 6rem; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(1.2rem, 1rem + 2vw, 2.5rem); padding: 1.8rem 0; border-top: 1px solid var(--line); align-items: start; }
.vguide__body { display: grid; gap: 0.55rem; justify-items: start; }
.vguide__n { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink); }
.vguide__row h3 { margin: 0; font-size: var(--step-2); }
.vguide__row blockquote { margin: 0; padding-left: 0.9rem; border-left: 2px solid var(--rose); font-family: var(--font-serif); font-style: italic; color: var(--muted); max-width: 62ch; }
.vguide__take { margin: 0; padding: 0.6rem 0.9rem; background: var(--sage-soft); border-left: 3px solid var(--teal); font-size: 0.92rem; max-width: 62ch; }
/* Option B (24 Oct 2026): the episode guide as a folding list */
.vguide__list--fold { gap: 0.6rem; }
.vguide__list--fold .vguide__row { display: block; padding: 0; border: 0; }
.vguide__fold { border-radius: var(--panel-radius); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); }
.vguide__fold[open] { box-shadow: inset 0 0 0 2px var(--teal); }
.vguide__fold > summary { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; padding: 0.7rem 1.3rem 0.7rem 0.7rem; cursor: pointer; list-style: none; }
.vguide__fold > summary::-webkit-details-marker { display: none; }
.vguide__fold > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: var(--panel-radius); }
.vguide__fold .vguide__thumb { aspect-ratio: 16 / 9; }
/* 6 Nov 2026: each row shows its episode's painted poster (it carries the episode number and title) */
.vguide__poster { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--picture-radius, 8px); box-shadow: 0 0 0 1px var(--line); }
.vguide__fold .vguide__thumb .thumb__title { font-size: 0.82rem; }
.vguide__head { display: grid; gap: 0.2rem; }
.vguide__fold h3 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.vguide__chev { width: 0.8rem; height: 0.8rem; margin-top: -0.4rem; border: solid var(--teal); border-width: 0 2px 2px 0; rotate: 45deg; }
.vguide__fold[open] .vguide__chev { rotate: 225deg; margin-top: 0.3rem; }
.vguide__fold .vguide__body { padding: 0 1.4rem 1.3rem calc(150px + 1.9rem); }
.vguide__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0.2rem 0 0; }
/* Self-hosted episodes (29 Oct 2026): the painted Episode 1 plays in the site's own player, its words folded below */
.vplayer { margin: 0 0 0.4rem; width: 100%; max-width: 760px; display: grid; gap: 0.6rem; }
.watch__main .vplayer { max-width: none; }
.vplayer video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--picture-radius); background: var(--ivory); box-shadow: 0 0 0 1px var(--line); }
/* 6 Nov 2026 audit: the words inside the video are too small in a phone-width player, so phones play full screen */
.vplayer__tip { display: none; margin: -0.2rem 0 0; font-size: 0.82rem; color: var(--muted); }
/* End of a library page (views/pages/topic.ejs, 11 Nov 2026): one "Keep going" panel for the course and the male
   guides, then the Starter Guide as a slim band with its cover (.guide-strip: .guide-band is the homepage section). */
.prose .keep-going { margin: 2.4rem 0 1.6rem; padding: clamp(1rem, 0.7rem + 1vw, 1.4rem); border-radius: var(--panel-radius); background: var(--sand-soft); }
.keep-going__label { display: block; margin-bottom: 0.8rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rose-ink); }
.keep-going__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.prose .keep-going__grid > .box { margin: 0; background: var(--white); border-color: transparent; box-shadow: var(--shadow-s); }
.prose a.guide-strip { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin: 0 0 1.6rem; padding: 0.8rem 1.1rem 0.8rem 0.9rem; border-radius: var(--panel-radius); background: var(--teal-ink); color: var(--ivory); text-decoration: none; transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.prose a.guide-strip:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--ivory); }
.guide-strip img { width: 4.2rem; height: auto; border-radius: 3px var(--picture-radius) var(--picture-radius) 3px; box-shadow: 0 8px 16px -8px rgb(0 0 0 / 0.5); }
.guide-strip__txt { display: grid; gap: 0.1rem; min-width: 0; }
.guide-strip__txt small { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-light); }
.guide-strip__txt b { font-family: var(--font-serif); font-weight: 500; font-size: 1.15rem; }
.guide-strip__txt > span { font-size: 0.86rem; opacity: 0.85; }
.guide-strip__go { padding: 0.55rem 0.9rem; border-radius: var(--btn-radius); background: var(--ivory); color: var(--teal-ink); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 560px) { .prose a.guide-strip { grid-template-columns: 3.6rem minmax(0, 1fr); } .guide-strip img { width: 3.6rem; } .guide-strip__go { grid-column: 1 / -1; justify-self: start; } }

/* Consultation "message sent" panel (views/partials/consult-form.ejs, 11 Nov 2026) */
.consult-sent { display: grid; justify-items: center; gap: 0.8rem; padding: clamp(0.6rem, 0.3rem + 1vw, 1.2rem) 0.2rem; text-align: center; scroll-margin-top: 7rem; }
.consult-sent:focus { outline: none; }
.consult-sent__tick { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--sage-soft); }
.consult-sent__tick svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--teal-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.consult-sent__h { margin: 0; font-size: var(--step-3); }
.consult-sent > p { margin: 0; max-width: 34rem; color: var(--muted); }
.consult-sent__steps { list-style: none; margin: 0.3rem 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; text-align: left; }
.consult-sent__steps li { margin: 0; padding: 0.85rem 0.9rem; border: 1px solid var(--line); border-radius: var(--panel-radius); background: var(--white); font-size: 0.9rem; color: var(--teal-ink); }
.consult-sent__steps b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 1.3rem; color: var(--rose-ink); }
.consult-sent .btn-row { justify-content: center; }
@media (max-width: 560px) { .consult-sent__steps { grid-template-columns: minmax(0, 1fr); } }

/* Videos page topic buttons above the episode list (main.js, 11 Nov 2026) */
.vfilter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.6rem; }
.vfilter[hidden] { display: none; }
.vfilter__btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem 0.4rem 0.45rem; border: 1px solid var(--line); border-radius: var(--btn-radius); background: var(--white); color: var(--teal-ink); font: 600 0.84rem/1.2 var(--font-sans); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.vfilter__btn:first-child { padding-left: 0.8rem; }
.vfilter__btn:hover { border-color: var(--teal); }
.vfilter__btn[aria-pressed="true"] { background: var(--teal-ink); border-color: var(--teal-ink); color: var(--ivory); }
.vfilter__btn img { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; }
.vfilter__n { font-size: 0.72rem; font-weight: 700; color: var(--rose-ink); }
.vfilter__btn[aria-pressed="true"] .vfilter__n { color: var(--rose-light); }
.vfilter__note { margin: -0.9rem 0 1.4rem; font-size: 0.86rem; font-weight: 600; color: var(--muted); }
.vfilter__note:empty { display: none; }
@media (max-width: 640px) {
  /* one swipeable row on a phone instead of six rows of buttons */
  .vfilter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 0.4rem; scrollbar-width: none; }
  .vfilter::-webkit-scrollbar { display: none; }
  .vfilter__btn { flex: none; }
}

/* "Watch with Kara" video cards on topic pages and male guides (views/partials/video-cards.ejs, 11 Nov 2026) */
.prose .vcards__lead { margin: 0 0 0.9rem; color: var(--muted); }
.prose .vcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.prose .vcards li { margin: 0; padding: 0; }
.prose .vcards li::marker { content: none; }
.prose a.vcard { height: 100%; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.85rem; align-items: center; padding: 0.5rem; border: 1px solid var(--line); border-radius: var(--panel-radius); background: var(--white); color: var(--teal-ink); text-decoration: none; transition: border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s; }
.prose a.vcard:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-s); }
.vcard__pic { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--picture-radius) - 2px); background: var(--sand-soft); }
.vcard__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard__play { position: absolute; right: 0.35rem; bottom: 0.35rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: rgb(255 253 252 / 0.94); box-shadow: 0 4px 10px rgb(23 59 59 / 0.18); }
.vcard__play svg { width: 0.7rem; height: 0.7rem; margin-left: 1px; fill: var(--teal-ink); }
.vcard__body { display: grid; gap: 0.2rem; min-width: 0; }
.vcard__title { font-family: var(--font-serif); font-weight: 500; font-size: 0.98rem; line-height: 1.3; }
.vcard__len { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose-ink); }
.vcards__more { margin-top: 0.8rem; }
.prose .vcards__more > summary { cursor: pointer; display: inline-block; padding: 0.55rem 0.9rem; border-radius: var(--btn-radius); border: 1px solid var(--line); background: var(--white); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-ink); list-style: none; }
.prose .vcards__more > summary::-webkit-details-marker { display: none; }
.prose .vcards__more[open] > summary { margin-bottom: 0.8rem; }
@media (max-width: 560px) { .prose .vcards { grid-template-columns: minmax(0, 1fr); } .prose a.vcard { grid-template-columns: 7.5rem minmax(0, 1fr); } }

/* The Play button on the poster until the episode starts (main.js, 11 Nov 2026). It sits above the middle so it
   never covers the painted title card at the bottom left. */
.vplayer__stage { position: relative; }
.vplayer__play {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.55rem 1.2rem 0.55rem 0.55rem;
  border: 0; border-radius: 999px; background: rgb(255 253 252 / 0.95); color: var(--teal-ink); cursor: pointer;
  box-shadow: 0 14px 34px rgb(23 59 59 / 0.22); font: 700 0.76rem/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.vplayer__play:hover { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 18px 40px rgb(23 59 59 / 0.28); }
.vplayer__play:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
.vplayer__play-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--teal-ink); }
.vplayer__play-icon svg { width: 1rem; height: 1rem; margin-left: 2px; fill: var(--ivory); }
@media (max-width: 480px) { .vplayer__play { padding: 0.45rem; } .vplayer__play-txt { display: none; } }
@media (max-width: 700px) and (pointer: coarse) { .vplayer__tip { display: block; } }
.vplayer__words > summary { cursor: pointer; font-size: 0.92rem; font-weight: 700; color: var(--teal); }
.vplayer__words p { margin: 0.55rem 0 0; max-width: 62ch; font-size: 0.95rem; }
@media (max-width: 700px) { .vguide__fold > summary { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 0.9rem; } .vguide__fold h3 { font-size: 1.05rem; } .vguide__fold .vguide__body { padding: 0 1rem 1.1rem; } .vguide__fold .vguide__thumb .thumb__title { display: none; } }
/* /videos: every episode by topic (6 Nov 2026), in the old timeline's dots and type */
.vtopics.vyear__line { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.6rem 1.4rem; }
.vtopics .vyear__month::before { display: none; }
.vtopics h3 a { color: inherit; text-decoration: none; } .vtopics h3 a:hover, .vtopics h3 a:focus-visible { text-decoration: underline; }
.vtopics__eps { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; gap: 0.35rem; text-align: left; justify-self: stretch; font-size: 0.92rem; line-height: 1.35; }
.vtopics__eps a { display: block; padding: 0.2rem 0; color: var(--teal-ink); text-decoration: none; } .vtopics__eps a:hover, .vtopics__eps a:focus-visible { text-decoration: underline; }
.vtopics__eps span { color: var(--muted); font-variant-numeric: tabular-nums; }
.vyear__line { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2rem 1rem; }
.vyear__month { position: relative; display: grid; gap: 0.3rem; justify-items: center; align-content: start; text-align: center; }
.vyear__month::before { content: ''; position: absolute; top: 34px; left: -50%; right: 50%; border-top: 2px dashed var(--sage); }
.vyear__month:nth-child(6n + 1)::before { display: none; }
.vyear__dot { position: relative; width: 68px; height: 68px; border-radius: 50%; background: var(--ivory); box-shadow: inset 0 0 0 2px var(--sage); display: grid; place-items: center; }
.vyear__dot img { width: 70%; height: auto; }
.vyear__month.is-first .vyear__dot { box-shadow: inset 0 0 0 3px var(--rose-ink); background: var(--rose-soft); }
.vyear__m { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink); }
.vyear__month h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.vyear__month p { margin: 0; font-size: 0.78rem; line-height: 1.4; color: var(--muted); }
.episodes { columns: 2 300px; column-gap: 2.5rem; padding-left: 1.4rem; }
.episodes li { padding: 0.3rem 0; break-inside: avoid; color: var(--muted); }
.episodes li::marker { color: var(--rose-ink); font-weight: 700; }
.vseries { margin-top: 2.5rem; display: grid; gap: 1rem; }
.vseries ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.vseries li { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; padding: 0.55rem 1rem; font-size: 0.85rem; color: var(--muted); }
.vseries b { margin-right: 0.3rem; font-family: var(--font-serif); font-weight: 500; color: var(--teal-ink); }
@media (max-width: 1200px) { .vhero__notify .form-inline { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .vhero__grid { grid-template-columns: minmax(0, 1fr); }
  .vyear__line { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vyear__month::before { display: none; }
}
@media (max-width: 760px) { .vguide__row { grid-template-columns: minmax(0, 1fr); } .vguide__thumb .thumb__title { font-size: 1.25rem; } .vguide__thumb .thumb__title small { font-size: 0.62rem; } .vguide__thumb .thumb__badge { font-size: 0.62rem; } }
@media (max-width: 600px) { .vyear__line { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vhero__frame { width: 78%; } .vhero__captext b { font-size: 1.02rem; } .vhero__captext .thumb__badge { font-size: 0.66rem; letter-spacing: 0.04em; } .vhero__tile { width: 40%; } .vhero__tile--3 { display: none; } .vhero__cap { left: 0.9rem; right: 0.9rem; bottom: 0.9rem; } .vhero__play { width: 48px; height: 48px; } .vhero__play::after { left: 18px; top: 14px; border-left-width: 15px; border-top-width: 10px; border-bottom-width: 10px; } }

/* FAQ */
/* ---------- FAQ page (22 Oct 2026, option B): theme cards, then each theme in two columns ---------- */
.faq-top h1 { margin: 1rem 0 0.6rem; font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); line-height: 1; letter-spacing: -0.03em; }
.faq-top .lead { margin: 0 0 2.2rem; }
.faq-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.faq-card { height: 100%; display: grid; gap: 0.45rem; align-content: start; padding: 1.3rem 1.2rem 1.4rem; border-radius: var(--panel-radius); text-decoration: none; color: inherit; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.faq-card:hover, .faq-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow); }
.faq-card--0 { background: var(--rose-soft); }
.faq-card--1 { background: var(--sage-soft); }
.faq-card--2 { background: var(--sand-soft); }
/* 6 Nov 2026 (option A): each theme card opens with its own painting */
.faq-card .faq-card__pic { width: calc(100% + 2.4rem); max-width: none; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin: -1.3rem -1.2rem 0.6rem; padding: 5px; background: var(--white); border-radius: var(--panel-radius) var(--panel-radius) 0 0; }
.faq-card b { font: 500 1.12rem/1.25 var(--font-serif); color: var(--teal-ink); }
.faq-card__n { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink); }
.faq-card__peek { margin-top: 0.3rem; font-size: 0.85rem; font-style: italic; color: var(--muted); }
.faq-group { scroll-margin-top: 6rem; padding-block: 1.8rem; border-top: 1px solid var(--line); }
.faq-group:first-child { padding-top: 0; border-top: 0; }
.faq-group h2 { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 1.1rem; font-size: var(--step-2); }
.faq-group__icon { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--ivory); }
.faq-group__icon img { width: 80%; height: auto; }
.faq--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1.2rem; align-items: start; }
.faq-page__ask { margin: 2.5rem 0 0; text-align: center; color: var(--muted); }
/* Option B (24 Oct 2026): the themes stay beside the questions on a computer; one column of questions */
.faq-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 3rem; align-items: start; }
.faq-main { min-width: 0; max-width: 820px; }
.faq-side { position: sticky; top: 7rem; padding: 1.1rem 1.2rem; border-radius: var(--panel-radius); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); }
.faq-side__h { margin: 0 0 0.6rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink); }
.faq-side ol { list-style: none; margin: 0; padding: 0; display: grid; }
.faq-side a { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); color: var(--teal-ink); font: 500 1rem/1.3 var(--font-serif); text-decoration: none; }
.faq-side a:hover, .faq-side a:focus-visible { color: var(--teal); text-decoration: underline; }
.faq-side small { font: 700 0.75rem var(--font-sans); color: var(--muted); }
@media (max-width: 900px) { .faq-layout { grid-template-columns: minmax(0, 1fr); } .faq-side { display: none; } }  /* the theme cards above do the same job on small screens */
@media (max-width: 1000px) { .faq-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .faq-cards > li:last-child:nth-child(odd) { grid-column: 1 / -1; } .faq-cards > li:last-child:nth-child(odd) .faq-card__pic { aspect-ratio: 2 / 1; } .faq--cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .faq-card { padding: 1rem 0.9rem 1.1rem; } .faq-card .faq-card__pic { width: calc(100% + 1.8rem); margin: -1rem -0.9rem 0.5rem; } .faq-card b { font-size: 1rem; } }
@media (max-width: 330px) { .faq-cards { grid-template-columns: minmax(0, 1fr); } }

.faq { display: grid; gap: 0.75rem; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); transition: border-color 0.2s, box-shadow 0.3s; }
.faq details[open] { border-color: var(--sage); box-shadow: var(--shadow-s); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1.25rem 1.5rem; font-family: var(--font-serif); font-size: var(--step-1); color: var(--teal-ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; content: '+' / ''; flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--sage-soft); color: var(--teal); font-family: var(--font-sans); font-size: 1.2rem; transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 1.5rem 1.4rem; color: var(--muted); max-width: 72ch; }

/* Quote / about */
.quote { font-family: var(--font-serif); font-size: var(--step-3); line-height: 1.3; color: var(--teal-ink); font-style: italic; }
.quote::before { content: '“'; display: block; font-size: 4rem; line-height: 0.6; color: var(--rose); margin-bottom: 0.5rem; }
/* ---------- Meet Kara page: photo collage, profile, "Learn with Kara" cards ---------- */
.mk-hero .container { position: relative; }
.mk-collage { position: relative; width: min(100%, 980px); aspect-ratio: 980 / 520; margin-inline: auto; }
.mk-collage__tile { position: absolute; padding: 0.8rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: var(--shadow); }
.mk-collage__tile img { display: block; width: 100%; height: auto; }
.mk-collage__tile--1 { left: 3%; top: 6%; width: 23%; transform: rotate(-5deg); }
.mk-collage__tile--2 { left: 15%; bottom: 0; width: 13%; transform: rotate(4deg); }
.mk-collage__tile--3 { right: 2%; top: 2%; width: 23%; transform: rotate(5deg); }
.mk-collage__tile--4 { right: 13%; bottom: 0; width: 14%; transform: rotate(-4deg); }
/* the photo sits in the middle of the collage, on top of it */
.mk-collage__photo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(31%, 300px); }
.mk-collage__photo .portrait { width: 100%; }
/* the frame is smaller here than on its own, so its placeholder (logo + line) is scaled to fit */
.mk-collage__photo .portrait__placeholder { padding: 1rem; gap: 0.5rem; }
.mk-collage__photo .portrait__placeholder img { width: 56%; }
.mk-collage__photo .portrait__placeholder p { font-size: clamp(0.82rem, 0.6rem + 0.7vw, 1.15rem); }
.mk-collage__photo .dev-todo { font-size: 0.6rem; }
.mk-intro { margin-top: 2.4rem; display: grid; justify-items: center; gap: 1rem; text-align: center; }
.mk-intro h1 { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); line-height: 1; letter-spacing: -0.03em; }
.mk-role { padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--sage-soft); font-size: 0.85rem; font-weight: 700; color: var(--teal-ink); }

.mk-story { max-width: 940px; }
.mk-story__quote {
  padding-left: 1.4rem; border-left: 3px solid var(--rose);
  font-family: var(--font-serif); font-style: italic; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.28; color: var(--teal-ink); text-wrap: balance;
}
.mk-story__cols { margin-top: 2rem; columns: 2; column-gap: 2.6rem; color: var(--muted); }
.mk-story__cols p { margin-bottom: 1rem; break-inside: avoid; }
.mk-story .signature { margin-top: 1rem; }

.learn-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.learn-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--white); border-radius: var(--picture-radius); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-s);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.learn-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.learn-card__pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.learn-card__pic img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 1rem; object-fit: contain; }
.learn-card__pic--sage { background: linear-gradient(140deg, var(--white), var(--sage-soft)); }
.learn-card__pic--teal { background: var(--teal); }
.learn-card__pic--teal img { padding: 1.6rem; }
.learn-card__pic--rose { background: linear-gradient(140deg, var(--white), var(--rose-soft)); }
.learn-card__pic--sand { background: linear-gradient(140deg, var(--white), var(--sand-soft)); }
.learn-card__play { position: absolute; right: 1rem; bottom: 1rem; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgb(250 247 241 / 0.95); }
.learn-card__play::before { content: ''; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent var(--teal); margin-left: 4px; }
.learn-card__title { padding: 1rem 1.15rem 0; font-family: var(--font-serif); font-size: 1.2rem; color: var(--teal-ink); }
.learn-card__text { padding: 0.25rem 1.15rem 1.2rem; font-size: 0.88rem; color: var(--muted); }
.learn-cards__more { margin-top: 1.6rem; color: var(--muted); }
@media (min-width: 1100px) { .learn-cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* The Embryology Course band (25 Oct 2026, home and Learn): the course's six first-week paintings beside the invitation */
.course-band__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.6rem, 1rem + 3vw, 3.5rem); align-items: center; }
.course-band__stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.4rem, 1vw, 0.9rem); }
.course-band__stages img { width: 100%; height: auto; display: block; }
.course-band__facts { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose-ink); }
/* The homepage hero's fourth tab, "The Course" (1 Nov 2026, option A): the six first-week paintings in a ring
   around the invitation. It replaced the dark course header above the hero. */
.dial-tabs .dial-tabs__list [role='tab'].dial-tabs__course { color: var(--rose-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rose-ink) 45%, transparent); }
.dial-tabs .dial-tabs__list [role='tab'].dial-tabs__course[aria-selected='true'] { background: var(--rose-ink); box-shadow: none; color: var(--white); }
.course-ring { position: relative; width: min(100%, 560px); aspect-ratio: 1; margin: 1rem auto 0; container-type: inline-size; }
.course-ring__img { position: absolute; width: 23%; }
.course-ring__img img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: #faf6ec; display: block; box-shadow: 0 10px 24px -14px rgb(23 59 59 / 0.6); }
.course-ring__img:nth-child(1) { left: 38.5%; top: 0; }
.course-ring__img:nth-child(2) { left: 74%; top: 18%; }
.course-ring__img:nth-child(3) { left: 74%; top: 59%; }
.course-ring__img:nth-child(4) { left: 38.5%; top: 77%; }
.course-ring__img:nth-child(5) { left: 3%; top: 59%; }
.course-ring__img:nth-child(6) { left: 3%; top: 18%; }
.course-ring__mid { position: absolute; inset: 25%; border-radius: 50%; background: var(--teal-deep); color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem; }
.course-ring__mid p { margin: 0; }
.course-ring__small { font-size: clamp(0.55rem, 2.6cqw, 0.68rem); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #e9c9c4; }
.course-ring__big { font-family: var(--font-serif); font-size: clamp(0.8rem, 5.2cqw, 1.4rem); line-height: 1.18; margin: 0.35rem 0 0.75rem !important; }
.course-ring__big .script-kara { display: block; color: #f0c9c3; }
.dial-tabs .course-ring__mid .btn { width: auto; padding: 0.55em 0.95em; font-size: clamp(0.55rem, 2.5cqw, 0.7rem); }
@media (max-width: 560px) { .course-ring__mid { padding: 0.6rem; } }
/* Option B "The ring, labelled" (11 Nov 2026): day labels under the paintings (Day 1 above it, clear of the centre),
   a dashed path round the ring with an arrow, and the counts and the free Module 1 in the centre. */
.course-ring--days { margin-top: 2.2rem; }
.course-ring--days .course-ring__img { z-index: 1; display: grid; justify-items: center; gap: 0.25rem; }
.course-ring--days .course-ring__img:nth-child(1) { top: -2.1rem; }
.course-ring--days .course-ring__img:nth-child(1) .course-ring__day { order: -1; }
.course-ring__day { padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--white); box-shadow: var(--shadow-s); font-size: clamp(0.62rem, 2.2cqw, 0.72rem); font-weight: 800; line-height: 1.3; color: var(--teal-ink); white-space: nowrap; }
.course-ring__path { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; color: var(--rose-ink); pointer-events: none; }
.course-ring--days .course-ring__mid { z-index: 1; gap: 0.4rem; }
.course-ring--days .course-ring__big { margin-bottom: 0.2rem !important; }
.course-ring__facts { font-size: clamp(0.6rem, 2.4cqw, 0.8rem); color: var(--sage); }
.course-ring__facts b { margin: 0 0.15rem 0 0.45rem; font-family: var(--font-serif); font-size: 1.45em; font-weight: 500; color: var(--white); }
.course-ring__facts b:first-child { margin-left: 0; }
.course-ring__free { font-size: clamp(0.6rem, 2.4cqw, 0.8rem); font-weight: 700; color: var(--rose-light); text-decoration: none; }
.course-ring__free:hover { text-decoration: underline; }
.course-ring--days + .course-ring__note { margin-top: 2.2rem; }
/* A small ring (phones) has no room in the centre: the counts and the free Module 1 stay in the line under the ring */
@container (max-width: 440px) { .course-ring__facts, .course-ring__free { display: none; } .course-ring--days .course-ring__big { margin-bottom: 0.4rem !important; } }
@container (max-width: 330px) { .course-ring--days .course-ring__small { display: none; } .course-ring__day { padding: 0.1rem 0.4rem; font-size: 0.58rem; } }
/* Homepage hero Female and Male tabs, option C (11 Nov 2026): cards under each circle, in place of its caption, each
   tagged free to read (teal) or in the package. Rose edge for the female topics, blue for the male guides. */
.dial-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0.85rem 0.55rem; width: min(100%, 560px); margin: 1.6rem auto 0; padding: 0; list-style: none; }
.dial-cards--female li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dial-cards a { --edge: #33566a; position: relative; display: flex; align-items: center; gap: 0.65rem; height: 100%; padding: 0.8rem 0.5rem 0.5rem; background: rgb(255 253 252 / 0.92); border: 1px solid var(--line); border-left: 3px solid var(--edge); border-radius: var(--panel-radius); color: var(--teal-ink); font-size: 0.84rem; font-weight: 600; line-height: 1.3; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease); }
.dial-cards--female a { --edge: var(--rose-ink); }
.dial-cards a.is-free { --edge: var(--teal); }
.dial-cards a:hover { border-color: var(--edge); box-shadow: var(--shadow-s); transform: translateY(-1px); }
.dial-cards a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dial-cards img { flex: none; width: 54px; height: 54px; object-fit: cover; border-radius: var(--picture-radius); }
.dial-cards b { display: block; font-family: var(--font-serif); font-size: 0.82rem; font-style: italic; font-weight: 400; color: var(--edge); }
.dial-cards a.is-free b { color: var(--rose-ink); }
.dial-cards--male a.is-free b { color: #33566a; }
.dial-cards small { display: block; margin-top: 0.1rem; font-size: 0.74rem; font-weight: 500; color: var(--muted); }
.dial-cards__tag { position: absolute; top: -0.6rem; right: 0.6rem; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 0.62rem; font-style: normal; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dial-cards a.is-free .dial-cards__tag { background: var(--teal); border-color: var(--teal); color: var(--white); }
.course-ring__note { text-align: center; color: var(--muted); font-size: 0.9rem; margin-top: 0.4rem; }
.course-ring__note a { color: var(--rose-ink); font-weight: 700; }
/* The course invitation (1 Nov 2026, options B + C): partials/course-invite.ejs,
   as the dark course header above the homepage hero and as the panel under "The Course" in the menu */
.course-invite { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.6rem, 1rem + 3vw, 3.5rem); align-items: center; }
.course-invite__q { font-family: var(--font-serif); font-weight: 500; line-height: 1.12; color: var(--teal-ink); margin: 0.35rem 0 0.8rem; }
.course-invite__lead { max-width: 36rem; margin: 0 0 1.1rem; }
.course-invite__facts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.3rem; padding: 0; list-style: none; }
.course-invite__facts li { padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--sage-soft); color: var(--teal-ink); font-size: 0.85rem; font-weight: 600; }
.course-invite__stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.5rem, 1.2vw, 1rem); }
.course-invite__stages img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: #faf6ec; display: block; }
.course-invite-sec { background: var(--teal-deep); color: var(--white); padding-block: clamp(2.2rem, 1.5rem + 3vw, 3.4rem); overflow: hidden; }
.course-invite--home .eyebrow { color: #e9c9c4; }
.course-invite--home .eyebrow::before { background: currentColor; }
.course-invite--home .course-invite__q { color: var(--white); font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.course-invite--home .course-invite__q .script-kara { display: block; color: #f0c9c3; font-size: 1.12em; }
.course-invite--home .course-invite__lead { color: rgb(255 255 255 / 0.86); font-size: 1.08rem; }
.course-invite--home .course-invite__facts li { background: rgb(255 255 255 / 0.12); color: var(--white); }
.course-invite--home .btn--ghost { --btn-fg: var(--white); --btn-bd: rgb(255 255 255 / 0.6); }
.course-invite--home .btn--ghost:hover { --btn-bg: rgb(255 255 255 / 0.1); }
.course-invite--home .course-invite__stages img { box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.5); }
.course-invite--home .course-invite__stages img:nth-child(even) { transform: translateY(1.2rem); }
.course-invite--menu { width: min(100% - 2 * var(--gutter), 1400px); margin-inline: auto; padding-block: 1.75rem 2rem; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.course-invite--menu .course-invite__q { font-size: clamp(1.5rem, 1rem + 1.2vw, 2.2rem); }
.course-invite--menu .course-invite__lead { color: var(--muted); }
/* inside the menu, undo the menu-link and menu-list styles (they would squeeze the buttons and stretch the facts) */
.primary-nav .course-invite .btn { display: inline-flex; justify-content: center; padding: 1.05rem 1.9rem; font-family: var(--font-sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.11em; color: var(--btn-fg); white-space: nowrap; }
.primary-nav .course-invite .btn::after { display: none; }
.primary-nav .nav-mega__panel .course-invite__facts { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; gap: 0.5rem; }
.primary-nav .course-invite__facts li { border: 0; width: auto; }
.nav-new { display: inline-block; margin-left: 0.35rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--rose-soft); color: var(--rose-ink); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 0.15em; line-height: 1.4; }
@media (max-width: 860px) {
  .course-invite { grid-template-columns: 1fr; }
  .course-invite--home .course-invite__stages { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4rem; }
  .course-invite--home .course-invite__stages img:nth-child(even) { transform: none; }
}
@media (max-width: 1180px) {
  .course-invite--menu { width: auto; padding: 1rem 1rem 1.25rem; }
  .course-invite--menu .course-invite__stages { display: none; }
  .primary-nav .course-invite--menu .course-invite__q { font-family: var(--font-serif); }
  .primary-nav .course-invite__facts li { background: var(--white); }
  .primary-nav .course-invite .btn { width: 100%; }
}
@media (max-width: 800px) { .course-band__inner { grid-template-columns: 1fr; } .course-band__stages { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

@media (max-width: 960px) { .learn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  /* phones: a square collage with the photo larger in the middle */
  .mk-collage { aspect-ratio: 1; }
  .mk-collage__photo { width: 50%; }
  .mk-collage__tile { padding: 0.45rem; border-radius: var(--panel-radius); }
  .mk-collage__tile--1 { left: 0; top: 4%; width: 34%; }
  .mk-collage__tile--3 { right: 0; top: 12%; width: 33%; }
  .mk-collage__tile--2 { left: 6%; bottom: 0; width: 22%; }
  .mk-collage__tile--4 { right: 6%; bottom: 2%; width: 23%; }
  .mk-story__cols { columns: 1; }
}
@media (max-width: 420px) { .learn-card__title { font-size: 1.05rem; } .learn-card__text { font-size: 0.8rem; } }

.signature { font-family: var(--font-serif); font-style: italic; font-size: 2rem; color: var(--rose-ink); }
.dev-todo {
  display: inline-block; padding: 0.6rem 0.9rem; border: 1.5px dashed #c47f2b; border-radius: 10px;
  background: #fff6e8; color: #7a4a0f; font-size: 0.82rem; font-weight: 600;
}

/* Worksheets */
.worksheet { background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.worksheet h3 { margin-bottom: 0.25rem; }
.write-line { border-bottom: 1px solid var(--line); min-height: 2.6rem; padding-top: 1rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.write-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.78rem; }
.write-table th { text-align: left; padding: 0.6rem; background: var(--sage-soft); color: var(--teal-ink); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.7rem; }
.write-table td { border-bottom: 1px solid var(--line); height: 2.8rem; }
.table-scroll { overflow-x: auto; border-radius: var(--panel-radius); }
.table-hint { display: none; margin-top: 0.5rem; font-size: 0.78rem; color: var(--muted); }
@media (max-width: 600px) { .table-hint { display: block; } }
@media print { .table-hint { display: none !important; } }
/* ---------- Starter Guide: the guide as paper on a warm sand "desk", with its contents beside it ---------- */
.sg-hero { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem); background: linear-gradient(180deg, var(--ivory), var(--sand-soft)); }
.sg-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
.sg-hero__copy { display: grid; gap: 0.9rem; justify-items: start; }
.sg-hero h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.2rem); line-height: 1; letter-spacing: -0.03em; }
.sg-hero .byline { margin: 0; }
.sg-hero__cover {
  width: clamp(170px, 12vw + 80px, 250px); height: auto; border-radius: 3px var(--picture-radius) var(--picture-radius) 3px; transform: rotate(3deg);
  box-shadow: -1px 0 0 #d9d0c3, -8px 0 0 -2px #efe7db, -9px 1px 0 -2px #d9d0c3, 22px 32px 50px -22px rgb(23 59 59 / 0.45);
}
.sg-desk { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(3rem, 2rem + 4vw, 5.5rem); background: linear-gradient(180deg, var(--sand-soft), #efe3d6); }
.sg-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
.sg-paper { min-width: 0; } /* keeps the wide results table scrolling inside the paper on phones */
@media (min-width: 1000px) { .sg-layout { grid-template-columns: 250px minmax(0, 820px); justify-content: center; } }
.sg-toc li.sg-toc__ws a::before { border-radius: 2px; } /* the worksheets stop is a square, not a section dot */
.sg-progress { display: block; height: 4px; margin-top: 1rem; border-radius: 4px; background: rgb(255 253 252 / 0.7); overflow: hidden; }
.sg-progress span { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--teal); transition: width 0.15s linear; }
.sg-paper { padding: clamp(1.4rem, 0.8rem + 3vw, 3rem); border-radius: var(--panel-radius); background: var(--white); box-shadow: 0 30px 60px -30px rgb(23 59 59 / 0.4); }
.sg-thing { scroll-margin-top: 6rem; display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.6rem; align-items: start; padding-block: 1.8rem; border-bottom: 1px solid var(--line); }
.sg-thing__pic { position: relative; aspect-ratio: 1; border-radius: var(--picture-radius); }
.sg-thing__pic img { position: absolute; inset: 0; margin: auto; max-width: 80%; max-height: 80%; object-fit: contain; }
.sg-thing__pic--rose { background: linear-gradient(140deg, var(--white), var(--rose-soft)); }
.sg-thing__pic--sage { background: linear-gradient(140deg, var(--white), var(--sage-soft)); }
.sg-thing__pic--sand { background: linear-gradient(140deg, var(--white), var(--sand-soft)); }
.sg-thing__n { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--rose-ink); }
.sg-thing h2 { margin-top: 0.15rem; font-size: var(--step-2); }
.sg-thing p { margin-top: 0.5rem; color: #3f4848; }
.sg-thing__note { padding: 0.75rem 1rem; background: var(--rose-soft); font-family: var(--font-serif); font-style: italic; color: var(--teal-ink) !important; }
.sg-paper__h2 { scroll-margin-top: 6rem; margin-top: 2.6rem; }
@media (max-width: 560px) {
  .sg-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .sg-hero__cover { order: -1; width: 150px; justify-self: center; }
  .sg-thing { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; }
}

/* Disclaimer strip */
.disclaimer-strip { background: var(--sand-soft); border-top: 1px solid var(--line); padding-block: 1.75rem; }
.disclaimer-strip p { font-size: 0.85rem; color: var(--muted); max-width: 95ch; }
.disclaimer-strip strong { color: var(--teal-ink); }

/* ---------- Footer ---------- */
.site-footer { position: relative; isolation: isolate; overflow: hidden; background: var(--teal-deep); color: rgb(250 247 241 / 0.78); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) 2rem; }
.site-footer__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
/* Footer shortcuts (option A, 22 Oct 2026): four calm columns, no tiles. */
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 2.5rem; padding-bottom: 2.5rem; margin-bottom: 2.75rem; border-bottom: 1px solid rgb(250 247 241 / 0.14); }
.footer-col h2 a { color: inherit; }
.footer-col h2 a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.footer-col ul { gap: 0.15rem; }
.footer-col li a { display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0; color: rgb(250 247 241 / 0.88); font-size: 0.95rem; line-height: 1.3; }
.footer-col li a:hover { color: var(--white); }
.footer-col__icon { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--ivory); display: grid; place-items: center; transition: transform 0.2s; }
.footer-col__icon img { width: 78%; height: auto; }
.footer-col li a:hover .footer-col__icon { transform: scale(1.08); }
.footer-col small { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-light); }
.footer-covers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1.2rem; }
.footer-covers a { display: block; }
.footer-covers img { width: 100%; height: auto; border-radius: 3px var(--picture-radius) var(--picture-radius) 3px; box-shadow: 0 8px 18px rgb(0 0 0 / 0.25); display: block; transition: transform 0.2s; }
.footer-covers a:hover img, .footer-covers a:focus-visible img { transform: translateY(-4px); }
.footer-col .footer-cta { display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.7rem 1rem; margin-bottom: 0.6rem; border-radius: var(--btn-radius); background: var(--ivory); color: var(--teal-ink); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.footer-col .footer-cta:hover { background: var(--rose); color: var(--teal-ink); text-decoration: none; }
.footer-col .footer-cta--quiet { display: flex; width: fit-content; padding: 0.3rem 0; background: none; color: var(--rose-light); font-size: 0.92rem; letter-spacing: 0; text-transform: none; }
.footer-col .footer-cta--quiet:hover { background: none; color: var(--white); text-decoration: underline; }
@media (max-width: 1000px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr; gap: 2rem; } }
@media (prefers-reduced-motion: reduce) { .footer-col__icon, .footer-covers img { transition: none; } }
/* Footer contact strip (24 Oct 2026): Kara, her email and "Suggest a topic", above the topic columns on every page */
.footer-contact { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; margin-bottom: 2.5rem; padding: 1.1rem 1.4rem; border-radius: var(--panel-radius); background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); color: rgb(250 247 241 / 0.85); }
.footer-contact img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; border: 3px solid rgb(255 255 255 / 0.85); }
.footer-contact p { margin: 0; }
.footer-contact__q { font: 500 1.25rem/1.25 var(--font-serif); color: var(--white); margin-bottom: 0.15rem !important; }
.footer-contact a:not(.footer-cta) { color: var(--white); font-weight: 700; overflow-wrap: anywhere; font-size: clamp(0.85rem, 4.2vw, 1rem); }
.footer-contact .footer-cta { display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.7rem 1rem; border-radius: var(--btn-radius); background: var(--ivory); color: var(--teal-ink); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.footer-contact .footer-cta:hover { background: var(--rose); color: var(--teal-ink); text-decoration: none; }
@media (max-width: 700px) { .footer-contact { grid-template-columns: 56px minmax(0, 1fr); } .footer-contact img { width: 56px; height: 56px; } .footer-contact .footer-cta { grid-column: 1 / -1; justify-self: start; } }
/* Footer topic columns on phones (option B, 24 Oct 2026): each column folds into one link to its section page */
.footer-col__jump { display: none; }
@media (max-width: 560px) {
  .footer-cols { gap: 0.6rem; }
  .footer-col:not(.footer-col--books) > h2, .footer-col:not(.footer-col--books) > ul { display: none; }
  .footer-col__jump { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 0.9rem 1.1rem; border-radius: var(--panel-radius); background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); color: var(--white); font: 500 1.1rem var(--font-serif); text-decoration: none; }
  .footer-col__jump small { grid-column: 1; margin-top: 0.1rem; color: rgb(250 247 241 / 0.75); }
  .footer-col__jump span { grid-row: 1 / 3; grid-column: 2; }
  .footer-col--books { margin-top: 1.4rem; }
}
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
/* The Embryology Course adds its own "The course" column (25 Oct 2026) */
@media (min-width: 860px) { .footer-grid--extra { grid-template-columns: 1.3fr 1fr 1fr 1fr 1.2fr; column-gap: 2rem; } }
.footer-brand { display: grid; gap: 1.1rem; justify-items: start; }
.footer-mark { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.footer-mark span:first-child { width: 72px; height: 72px; border-radius: 50%; background: var(--ivory); display: grid; place-items: center; flex: none; }
.footer-mark img { width: 80%; }
.footer-word { font-family: var(--font-serif); font-size: 1.6rem; line-height: 1.05; color: var(--ivory); }
.footer-word em { display: block; color: var(--rose); font-size: 1.25rem; }
.site-footer h2 { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage); margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.site-footer a { color: rgb(250 247 241 / 0.85); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-base { margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid rgb(250 247 241 / 0.15); display: grid; gap: 1rem; font-size: 0.8rem; color: rgb(250 247 241 / 0.6); }
@media (min-width: 860px) { .footer-base { grid-template-columns: 1fr auto; } }
.social { display: flex; gap: 0.6rem; }
.social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgb(250 247 241 / 0.25); }
.social a:hover { background: rgb(250 247 241 / 0.1); }
/* Placeholder marks for accounts that do not exist yet: visibly present, clearly
   not clickable, and out of the tab order. */
.social__pending {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px dashed rgb(250 247 241 / 0.22); color: rgb(250 247 241 / 0.4); cursor: default;
}
.social__note { margin-top: 0.7rem; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(250 247 241 / 0.45); }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-news .field input { background: rgb(250 247 241 / 0.08); border-color: rgb(250 247 241 / 0.25); color: var(--ivory); }
.footer-news .field input::placeholder { color: rgb(250 247 241 / 0.55); }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ---------- Print (worksheets & starter guide) ---------- */
@media print {
  .site-header, .site-footer, .disclaimer-strip, .no-print, .toc, .pager, .btn { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .section, .page-hero { padding-block: 1rem; background: none; }
  .page-hero__bg, .page-hero__veil { display: none; }
  .worksheet { break-inside: avoid; border: 1px solid #999; }
  .sg-thing { break-inside: avoid; }
  .sg-hero, .sg-desk { background: none; }
  .sg-paper { box-shadow: none; padding: 0; }
  .sg-hero__cover { transform: none; box-shadow: none; width: 140px; }
  a { text-decoration: none; color: inherit; }
}

/* Extras */
.card--library { background: var(--teal); border-color: var(--teal); color: var(--ivory); justify-content: center; }
.card--library h3 { color: var(--ivory); font-size: var(--step-2); }
.card--library p { color: rgb(250 247 241 / 0.8); }
.card--library .eyebrow, .card--library .link-arrow { color: var(--sage); }
.card--library:hover { border-color: var(--teal-deep); }

/* =========================================================================
   Phone and tablet refinements — 2026-10-01
   From an audit of every page at 320, 360, 375, 390, 414, 768, 820, 1024
   (portrait and landscape) and 1180px. Rules run wide to narrow so the
   narrower one always wins. Desktop above 1200px is left as it was.
   ========================================================================= */

/* ---- Footer ------------------------------------------------------------
   It kept the one-column phone layout until 860px, so a portrait iPad
   showed a narrow strip of links beside two thirds of empty teal. */
@media (max-width: 859.98px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 1rem + 4vw, 3.5rem); }
  .footer-brand, .footer-news { grid-column: 1 / -1; }
}
@media (min-width: 600px) and (max-width: 859.98px) {
  .footer-base { grid-template-columns: 1fr auto; align-items: center; }
}
/* The signup field used to stretch the full width of a tablet. */
.footer-news .field input { max-width: 26rem; }
/* A wave in the background art ran through this line like a strikethrough. */
.site-footer__bg { opacity: 0.3; }
.social__note { position: relative; margin-top: 0.9rem; color: rgb(250 247 241 / 0.72); }

/* ---- The homepage dial -------------------------------------------------
   Between 960 and 1060px the hero left the dial only about 350px while its
   centre kept desktop sizes, so "Choose a segment" sat on top of segment 05.
   The centre now answers to the dial's own width, not the viewport's. */
.dial { container-type: inline-size; }
@container (max-width: 430px) {
  .dial__core { inset: 24%; padding: 1rem; gap: 0.3rem; }
  .dial__kicker { font-size: 0.7rem; letter-spacing: 0.1em; line-height: 1.3; }
  .dial__title { font-size: 1.02rem; }
  .dial__summary { display: none; }
  .dial__go { font-size: 0.7rem; letter-spacing: 0.08em; }
}
@container (max-width: 330px) {
  .dial__core { inset: 22%; padding: 0.7rem; }
  .dial__kicker { font-size: 0.66rem; letter-spacing: 0.06em; line-height: 1.3; }
  .dial__title { font-size: 0.92rem; }
  .dial__go { font-size: 0.66rem; letter-spacing: 0.06em; }
}
/* Fallback for browsers without container queries (iOS 15 and older): the same
   compact centre, applied over the viewport range where the dial column is narrow. */
@media (min-width: 960px) and (max-width: 1059.98px) {
  .dial__core { inset: 24%; padding: 1rem; gap: 0.3rem; }
  .dial__kicker { font-size: 0.7rem; letter-spacing: 0.1em; line-height: 1.3; }
  .dial__title { font-size: 1.02rem; }
  .dial__summary { display: none; }
  .dial__go { font-size: 0.7rem; letter-spacing: 0.08em; }
}
/* An orbiting pearl used to drift across the caption underneath. */
.dial__caption { position: relative; z-index: 1; margin-top: clamp(1.9rem, 1.2rem + 1.4vw, 2.8rem); }

/* ---- Wrapping and spacing ---------------------------------------------- */
.cta-band h2, .prose h2 { text-wrap: balance; }
.faq summary { text-wrap: pretty; }
.index__all .btn { white-space: nowrap; flex: none; }
/* Two paragraphs inside a box had no gap, so the button sat on the text. */
.box > p + p { margin-top: 1rem; }
/* Article lines ran to about 90 characters on a tablet. The document pages
   (disclaimer, privacy) are not running articles, so they keep the 820px the
   .doc-paper rule asks for, which .prose had been quietly overriding. */
.prose { max-width: 65ch; }
.doc-paper { max-width: 820px; }

/* ---- Cards left stranded alone on a last row ---------------------------- */
/* Three books: one centred column rather than two with an orphan. */
@media (max-width: 1000px) {
  .ebooks { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
}
@media (max-width: 1000px) { .steps-path { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Three worksheets: keep three columns on a tablet instead of two plus one. */
@media (min-width: 600px) and (max-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Five source tiles: centre the short last row. */
@media (min-width: 601px) and (max-width: 1100px) {
  .source-tiles { display: flex; flex-wrap: wrap; justify-content: center; }
  .source-tiles li { flex: 1 1 13rem; max-width: 20rem; }
}
.source-tiles__text { font-size: 0.88rem; }
/* Spare row height was pushing the numbered badges to different heights. */
.steps-path__step { align-content: start; }
/* Book cards ended at different heights, so their buttons were out of line. */
.ebooks { align-items: stretch; }
.ebook { height: 100%; align-content: start; }
.ebook .faq { margin-top: auto; }

/* ---- Worksheet fan: the sheets covered each other's titles on a tablet --- */
@media (max-width: 1000px) {
  .ws-fan { height: auto; display: grid; }
  .ws-sheet { position: relative; width: 88%; min-height: 0; left: auto !important; right: auto !important; top: auto !important; }
  .ws-sheet:nth-child(1) { transform: rotate(-2deg); }
  .ws-sheet:nth-child(2) { justify-self: end; margin-top: -1.5rem; transform: rotate(1.5deg); }
  .ws-sheet:nth-child(3) { margin-top: -1.5rem; transform: rotate(-1deg); z-index: 3; }
}

/* ---- Email fields squeezed next to their button ------------------------- */
@media (max-width: 1100px) { .guide-hero__form .form-inline { grid-template-columns: minmax(0, 1fr); } }

/* ---- The free-guide "peek inside" card was squeezed to a 130px column ---- */
@media (max-width: 1100px) {
  .guide-band { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "peek" "body"; row-gap: 2.25rem; }
  .guide-peek { --book-w: 230px; width: 100%; max-width: 560px; justify-self: center; }
  .guide-band__body .ticks { margin-top: 0; }
}

/* ---- Homepage: the figure floated in the middle of empty space ---------- */

/* …and top-aligned it left a blank column under it: it now travels beside the list */


/* ---- Document pages: heading and paper started on different left edges --- */
.doc-hero__grid { max-width: 820px; margin-inline: auto; }
@media (max-width: 700px) { .doc-hero__pic { margin-left: 0.5rem; } }

/* ---- Thank-you and 404 -------------------------------------------------- */
@media (max-width: 1100px) { .learn-cards.learn-cards--3 { max-width: 760px; } }
/* "e.g. AMH" was cut to "e.g. AM" in the search box. */
@media (max-width: 420px) { .hero-search input { font-size: 0.95rem; padding-inline: 0.85rem; } }
/* Stacked buttons were different widths. */
@media (max-width: 480px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { justify-content: center; }
}

/* ---- Topic pages -------------------------------------------------------- */
/* The hero picture was pinned left with an empty band beside it. */
@media (max-width: 860px) { .topic-hero__fig { margin-inline: auto; } }
/* "6 sources" kept dropping onto a second row on its own. */
@media (max-width: 480px) {
  .topic-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; }
}
/* "Ask your healthcare professional" wrapped, leaving one word below. */
@media (max-width: 430px) {
  .eyebrow { letter-spacing: 0.14em; }
  .box__label { letter-spacing: 0.13em; }
  .box__label::before { width: 1.1rem; }
}

/* ---- Contact ------------------------------------------------------------ */
@media (max-width: 380px) {
  .area__box { font-size: 0.68rem; padding-inline: 0.25rem; overflow-wrap: break-word;
    -webkit-hyphens: auto; hyphens: auto; }  /* iOS Safari still needs the prefix */
  .area__box img { width: 2.5rem; height: 2.5rem; }
}
@media (max-width: 340px) {
  /* "endometriosis" is one long word and still ran over on a 320px phone. */
  .area__box { font-size: 0.62rem; letter-spacing: -0.01em; }
}
/* Just under the 24px minimum on some phones. */


/* ---- FAQ ---------------------------------------------------------------- */

/* ---- Starter guide ------------------------------------------------------ */
/* The picture column left the text only about 190px on a phone. */
@media (max-width: 560px) {
  .sg-thing { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .sg-thing__pic { width: 5rem; }
  .sg-thing h2 { overflow-wrap: break-word; }
}
/* The tracker table is wider than a phone. Shadows show which way it scrolls. */
.write-table { min-width: 34rem; }
.write-table th { overflow-wrap: break-word; }
.table-scroll {
  background:
    linear-gradient(to right, var(--white) 30%, rgb(255 255 255 / 0)) left / 2.5rem 100% no-repeat,
    linear-gradient(to left, var(--white) 30%, rgb(255 255 255 / 0)) right / 2.5rem 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgb(23 59 59 / 0.17), rgb(23 59 59 / 0)) left / 0.8rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgb(23 59 59 / 0.17), rgb(23 59 59 / 0)) right / 0.8rem 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* ---- Meet Kara ---------------------------------------------------------- */
@media (max-width: 430px) { .mk-role { border-radius: 1rem; font-size: 0.78rem; text-wrap: balance; } }

/* ---- Homepage odds and ends --------------------------------------------- */
@media (min-width: 960px) and (max-width: 1100px) {
  .hero-popular { gap: 0.4rem; }
  .hero-popular a { padding-inline: 0.65rem; }
}
@media (max-width: 520px) {
  .index__all { flex-direction: column; align-items: stretch; }
  .index__all .btn { justify-content: center; }
}
@media (max-width: 420px) {
  /* Narrow phones: the cover sits above the title instead of beside it. */
  
  
  .contrast__values { gap: 0.5rem 1rem; letter-spacing: 0.12em; }
}

/* ---- Video thumbnails --------------------------------------------------- */
.ep .thumb__title small { font-size: 0.64rem; }
.ep .thumb__badge { font-size: 0.62rem; }
@media (max-width: 460px) {
  /* The title ran into the artwork on small phones. */
  .ep .thumb { grid-template-columns: 1.75fr 1fr; padding-left: 0.7rem; }
  .ep .thumb__title { font-size: 0.78rem; }
  .ep .thumb__title small { font-size: 0.58rem; letter-spacing: 0.12em; }
}

/* ---- Free-guide hero: the signup card stopped short of the right edge ---- */
@media (max-width: 959.98px) { .hero__copy > .card { width: 100%; } }

/* ---- "Editions": the paragraph sat left of centre under its heading ------ */
.center .lead, .lead.center-block { margin-inline: auto; }

/* ---- Tap targets: the consent box was 19px, under the 24px minimum ------- */
.checkbox input { width: 1.5rem; height: 1.5rem; margin-top: 0.05rem; }

/* ---- Teaching diagrams on phones ----------------------------------------
   The labels (Primordial, Egg retrieval, Day 1…) are drawn into the artwork,
   so at 320-430px they shrink to 4-6px and cannot be read. On phones each
   diagram runs the full width of the screen and opens full size when tapped,
   where the browser's own viewer allows pinch-zoom. The IVF steps also have a
   phone-shaped version of the same artwork, stacked two by two.
   Full bleed is done with the container gutter rather than 100vw, so a
   scrollbar can never push the page sideways. */
.diagram { display: block; }
.diagram__hint { display: none; }
@media (max-width: 620px) {
  .topic-hero__fig, .prose figure, .figure {
    margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-inline: 0;
    padding-inline: 0; background: transparent; box-shadow: none;
  }
  .topic-hero__fig > *, .prose figure > *, .figure > * { padding-inline: var(--gutter); }
  .topic-hero__fig .diagram, .prose figure .diagram, .figure .diagram { padding-inline: 0; }
  .topic-hero__fig img, .prose figure img, .figure img {
    width: 100%; border-radius: 0; border-inline: 0; padding-inline: 10px; /* labels at the art's edges stay off the screen edge */
  }
  /* The icon heroes are small round pictures, not diagrams: leave them in their card. */
  .topic-hero__fig--icon {
    margin-inline: auto; padding-inline: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
    border-radius: var(--picture-radius); background: var(--white); box-shadow: var(--shadow);
  }
  .diagram__hint {
    display: block; margin-top: 0.7rem; padding-inline: var(--gutter); text-align: center;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  }
  /* 11 Nov 2026 design review: a wide labelled diagram keeps a readable width and pans sideways (views/partials/diagram.ejs) */
  .diagram.diagram--pan { max-width: 100vw; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } /* max-width: the 680 px picture must not widen the article */
  .topic-hero__fig .diagram.diagram--pan img, .prose figure .diagram.diagram--pan img, .figure .diagram.diagram--pan img { width: 680px; max-width: none; }
}

/* The header on the narrowest phones: the logo plus the two round buttons only
   just fit across 320px, so the gaps tighten rather than the buttons squashing. */
@media (max-width: 400px) {
  .header-inner { gap: 0.75rem; }
  .header-actions { gap: 0.5rem; }
}

/* Male fertility: existing brand colours, typography and illustrations. */
.male-hero {background: var(--ivory) url('/images/bg/male-fertility.webp') center/cover; padding: clamp(3rem,7vw,6rem) 0;}
.male-hero__copy {max-width: 760px; margin: auto; text-align: center; padding: 2rem; background: rgba(250,247,241,.92); border-radius: var(--panel-radius);}
.male-hero h1 {font-size: var(--step-4);}
.male-hero .breadcrumb ol {justify-content: center;}
.male-feature {background: var(--sage-soft);}
.male-feature__grid {display:grid; grid-template-columns: 180px 1fr; gap: 2.5rem; align-items:center; max-width: 1000px;}
.male-feature__grid>img {width:100%; height:auto;}
.male-paths {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;}
.male-path {display:block;padding:1.5rem;border:1px solid var(--line);border-radius: var(--panel-radius);background:var(--white);text-decoration:none;color:var(--teal-ink);}
.male-path:hover {background:var(--sage-soft);}
.male-path strong {display:block;font-family:var(--font-serif);font-size:var(--step-1);margin:.5rem 0;}
.male-path p {color:var(--muted);margin:0;}
.male-content {max-width:860px;}
.male-content section {scroll-margin-top:110px;margin-bottom:3rem;}
.male-figure {max-width:760px;margin:2rem auto;}
.male-figure img {width:100%;height:auto;}
.male-review {border-left:4px solid var(--rose);padding:1rem 1.5rem;background:var(--rose-soft);}
@media(max-width:900px){.male-paths{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.male-paths{grid-template-columns:1fr;}.male-feature__grid{grid-template-columns:1fr;gap:1rem;}.male-feature__grid>img{width:120px;}.male-hero__copy{padding:1.5rem;}}

/* Expanded illustrated male fertility guide */
.male-intro {display:grid;grid-template-columns:1fr 230px;gap:3rem;align-items:center;margin-bottom:3rem;}
.male-intro img{width:100%;height:auto;}
.male-reading{display:grid;grid-template-columns:215px minmax(0,850px);gap:3rem;align-items:start;}
.male-article{min-width:0;}
.male-chapter{scroll-margin-top:110px;padding-bottom:2.5rem;margin-bottom:3rem;border-bottom:1px solid var(--line);}
.male-figure{margin:2rem 0;}
.male-figure img{display:block;border-radius:var(--picture-radius);width:100%;height:auto;}
.male-figure figcaption{font-size:.85rem;color:var(--muted);line-height:1.7;margin-top:.7rem;}
.male-table-wrap{overflow-x:auto;margin:2rem 0;border-radius:var(--panel-radius);}
.male-values{width:100%;border-collapse:collapse;font-size:.9rem;}
.male-values caption{text-align:left;font-weight:700;padding:1rem;background:var(--sage-soft);}
.male-values th,.male-values td{padding:.85rem;text-align:left;border-bottom:1px solid var(--line);}
.male-values thead{background:var(--teal);color:var(--white);}
.male-values tbody tr:nth-child(even){background:var(--ivory);}
.male-editorial{display:block;max-width:100%;height:auto;border-radius:var(--picture-radius);}
@media(max-width:1000px){.male-reading{grid-template-columns:1fr;}.male-intro{grid-template-columns:1fr 160px;}}
@media(max-width:600px){.male-intro{grid-template-columns:1fr;gap:1rem;}.male-intro img{width:150px;}.male-values th,.male-values td{padding:.6rem;font-size:.78rem;}.male-figure figcaption{font-size:.8rem;}.male-chapter{margin-bottom:2rem;}}
.male-intro{grid-template-columns:1.1fr 1fr;}
.male-intro img{border-radius:var(--picture-radius);}
@media(max-width:600px){.male-intro{grid-template-columns:1fr;}.male-intro img{width:100%;}}
/* Four male fertility guides and vertical header dropdown */
.nav-dropdown{position:relative;}
.nav-dropdown>summary{display:flex;align-items:center;gap:.35rem;cursor:pointer;list-style:none;font-size:.93rem;font-weight:600;padding:.5rem .15rem;color:var(--charcoal);white-space:nowrap;}
.nav-dropdown>summary::-webkit-details-marker{display:none;}
/* Drawn chevron in place of the ⌄ character, which sat below the baseline like a stray "v" */
.nav-dropdown>summary>span{flex:none;width:.4rem;height:.4rem;margin-left:.15rem;font-size:0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.12rem) rotate(45deg);transition:transform .2s;}
.nav-dropdown[open]>summary>span{transform:translateY(.1rem) rotate(-135deg);}
.nav-dropdown>summary.is-current{color:var(--teal);text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:.6rem;}
.nav-dropdown>summary:focus-visible{outline:2px solid var(--teal);outline-offset:5px;}
.primary-nav .nav-submenu{position:absolute;top:100%;left:0;display:flex;flex-direction:column;align-items:stretch;gap:0;width:305px;margin:0;padding:.55rem;background:var(--white);border:1px solid var(--line);border-radius:var(--panel-radius);box-shadow:0 15px 35px rgb(23 59 59 / .15);}
.nav-dropdown:not([open])>.nav-submenu{display:none;}
.primary-nav .nav-submenu li{width:100%;margin:0;border:0;}
.primary-nav .nav-submenu a{padding:.8rem .75rem;font-size:.9rem;border-radius:var(--panel-radius);line-height:1.5;}
.primary-nav .nav-submenu a{position:relative;transition:background-color .15s,color .15s,padding-left .2s var(--ease);}
/* The row under the pointer (or keyboard focus) lights up: rose for the female menu, sage for the male menu */
.nav-group{--hl-bg:var(--sage);--hl-bar:var(--teal);}
.nav-group--female{--hl-bg:var(--rose-soft);--hl-bar:var(--rose-ink);}
.primary-nav .nav-submenu a::before{content:'';position:absolute;left:.35rem;top:.7rem;bottom:.7rem;width:3px;border-radius:3px;background:var(--hl-bar);opacity:0;transition:opacity .15s;}
.primary-nav .nav-submenu a:hover,.primary-nav .nav-submenu a:focus-visible,.primary-nav .nav-submenu a[aria-current='page']{background:var(--hl-bg);color:var(--teal-ink);padding-left:1.15rem;}
.primary-nav .nav-submenu a:hover::before,.primary-nav .nav-submenu a:focus-visible::before,.primary-nav .nav-submenu a[aria-current='page']::before{opacity:1;}
.primary-nav .nav-submenu a:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;}
.primary-nav .nav-submenu a::after{display:none;}
.male-page-card>img{width:76px;height:76px;object-fit:contain;margin-bottom:1rem;}
.male-page-card[aria-current='page']{border-color:var(--teal);background:var(--sage-soft);}
.male-paths{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:1180px){
 .primary-nav .nav-group{width:100%;}
 .nav-dropdown>summary{font-family:var(--font-serif);font-size:1.25rem;padding:1rem 0;justify-content:space-between;}
 .primary-nav .nav-submenu{position:static;width:100%;box-shadow:none;margin:0 0 .75rem;padding:.4rem;background:var(--sage-soft);}
 .primary-nav .nav-submenu a{font-family:var(--font-sans);font-size:.95rem;padding:.7rem .65rem;}
}
@media(max-width:600px){.male-paths{grid-template-columns:1fr;}}
.male-hero--editorial{background:var(--ivory);padding:clamp(2rem,5vw,4.5rem) 0;border-bottom:1px solid var(--line);}
.male-hero__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center;}
.male-hero--editorial .male-hero__copy{padding:0;margin:0;text-align:left;background:none;border-radius:0;}
.male-hero--editorial h1{font-size:clamp(2.4rem,4.5vw,4.5rem);line-height:1.12;}
.male-hero__art{margin:0;}
.male-hero__art img{display:block;width:100%;height:auto;border-radius:var(--picture-radius);box-shadow:0 12px 32px #173e3810;}
.male-hero__art figcaption{font-size:.75rem;color:var(--muted);margin-top:.6rem;text-align:right;}
.male-intro--focused{grid-template-columns:1.2fr 1fr;gap:3rem;margin-bottom:0;}
.male-outcome{color:var(--teal-ink);font-size:.9rem;line-height:1.8;text-wrap:balance;}
.male-intro--focused>div:first-child>*+*{margin-top:1rem;} /* the intro paragraph sat right under the heading */
.male-guide-switcher ol{list-style:none;padding:0;margin:0;}
.male-guide-switcher a{display:flex;gap:1rem;padding:1rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--teal-ink);line-height:1.5;}
.male-guide-switcher a span{font-family:var(--font-serif);color:var(--muted);}
.male-guide-switcher a[aria-current],.male-guide-switcher a:hover{background:var(--sage-soft);border-radius:var(--panel-radius);}
.male-guide-switcher a{align-items:center;}
.male-guide-switcher a img{width:56px;height:56px;object-fit:contain;flex-shrink:0;}
.male-guide-switcher a span{font:inherit;color:var(--teal-ink);}
.male-hero--editorial{background:linear-gradient(90deg,#faf7f1ee,#faf7f1dd),url('/images/male/background-teal.webp') center/cover;}
.male-stage-labels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none!important;padding:0!important;margin:.7rem 0 1.3rem!important;gap:.45rem;text-align:center;color:#153f3d;font-size:.78rem;font-weight:600;line-height:1.45;}
.male-stage-labels li{margin:0!important;overflow-wrap:anywhere;}
.male-measure-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:.8rem 0 1.4rem;}
.male-measure-panels h3{font-size:1.2rem;margin:0 0 .5rem;color:#153f3d;}
.male-measure-panels p{font-size:.85rem;line-height:1.6;margin:0;}
@media(max-width:600px){.male-stage-labels{grid-template-columns:1fr;text-align:left;list-style:decimal!important;padding-left:1.3rem!important;font-size:.9rem;}.male-measure-panels{grid-template-columns:1fr;}.male-measure-panels>div{border-top:1px solid var(--line);padding-top:.8rem;}}
.male-read-next{display:grid;grid-template-columns:180px 1fr;gap:1.4rem;align-items:center;margin:3rem 0;padding:1.3rem;background:var(--sage-soft);border-radius:var(--panel-radius);}
.male-read-next img{width:100%;height:auto;border-radius:var(--picture-radius);}
.male-read-next h2{font-size:1.6rem;margin:.5rem 0;}
.male-read-next h2 a{color:var(--teal-ink);text-decoration:none;}
.male-read-next p{font-size:.9rem;margin:0;}
@media(min-width:700px){.ebooks{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1100px){.ebooks{grid-template-columns:repeat(4,minmax(0,1fr));}} /* option B: the four cards side by side */
@media(max-width:800px){.male-hero__grid,.male-intro--focused{grid-template-columns:1fr;gap:1.5rem;}.male-hero__art{max-width:650px;}.male-hero--editorial h1{font-size:clamp(2.2rem,7vw,3.5rem);}.male-hero--editorial .lead{font-size:1.05rem;}}
@media(max-width:500px){.male-read-next{grid-template-columns:1fr;}.male-read-next img{max-width:260px;}.male-hero__art img{border-radius:var(--picture-radius);}}

/* ---- Male guides, polish pass (2026-10-12) --------------------------------
   Brings the four male guides in line with the female topic pages: the same
   hero facts, numbered contents with scroll spy, figure frames, FAQ cards and
   paragraph rhythm. Every picture opens in the on-page viewer (.lightbox). */
.male-hero .breadcrumb ol { justify-content: flex-start; }
.male-hero--editorial .male-hero__copy { display: grid; gap: 1rem; justify-items: start; }
.male-hero--editorial .male-hero__copy > * { margin: 0; }
.male-intro-band { position: relative; overflow: hidden; }
.male-intro-band > .container { position: relative; }
.male-sprig { position: absolute; right: -90px; bottom: -70px; width: clamp(180px, 22vw, 320px); height: auto; opacity: 0.55; pointer-events: none; transform: rotate(-8deg); }
.male-guide-switcher > .eyebrow { margin-bottom: 0.6rem; }
.male-guide-switcher a span small { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-ink-deep); }

/* Contents: the topic-page .toc, kept visible as a card on narrower screens */
.toc.toc--male { display: block; }
@media (max-width: 999px) {
  .toc.toc--male { position: static; padding: 1.2rem 1.4rem; background: var(--sage-soft); border-radius: var(--panel-radius); }
  .toc.toc--male ol { columns: 2; column-gap: 1.5rem; }
  .toc.toc--male li { break-inside: avoid; }
  .toc.toc--male ol::before, .toc.toc--male ol::after { display: none; } /* the rail can't cross columns; the dots still mark progress */
}
@media (max-width: 560px) { .toc.toc--male ol { columns: 1; } }

/* Chapter rhythm: chapters wrap their paragraphs, so restore the .prose spacing */
.male-chapter > * + * { margin-top: 1.25rem; }
.male-chapter > h2 { margin-top: 0.6rem; }
.male-chapter__head { display: flex; align-items: center; gap: 0.85rem; }
.male-chapter__mark { display: grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--white), var(--sage-soft)); }
.male-chapter__mark img { width: 100%; height: auto; }
.male-chapter__mark--number { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--line); }
.male-chapter .box--takeaway { margin-top: 2rem; }
/* Each chapter's "Read more" research list stays closed until it is clicked (25 Oct 2026) */
.male-section-sources { margin-top: 1rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.85rem; color: var(--muted); }
.male-section-sources[open] { box-shadow: inset 0 0 0 1px var(--sage), var(--shadow-s); }
.male-section-sources > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; padding: 0.75rem 1rem; cursor: pointer; list-style: none; }
.male-section-sources > summary::-webkit-details-marker { display: none; }
.male-section-sources > summary strong { font: 500 1rem var(--font-serif); color: var(--teal); }
.male-section-sources__hint { margin-left: auto; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
.male-section-sources__hint::after { content: 'Show +'; }
.male-section-sources[open] .male-section-sources__hint::after { content: 'Hide −'; }
.male-section-sources > summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.male-section-sources ul { margin: 0; padding: 0 1rem 0.9rem 2.2rem; display: grid; gap: 0.35rem; }
@media print { .male-section-sources ul { display: grid; } }

/* Figures: the same white card as topic-page diagrams, with an Enlarge badge */
.male-figure { margin: 2.5rem 0 !important; max-width: none; }
.male-figure__pic { position: relative; display: block; border-radius: var(--picture-radius); }
.male-figure__pic img { display: block; }
.male-figure__pic:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.male-figure__zoom { position: absolute; top: 0.8rem; right: 0.8rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: 999px; background: rgb(255 255 255 / 0.92); box-shadow: 0 2px 8px rgb(23 59 59 / 0.15); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-ink); }
.male-figure__zoom::before { content: ""; width: 0.75rem; height: 0.75rem; border: 2px solid currentColor; border-radius: 50%; box-shadow: 3px 3px 0 -1px currentColor; }
.male-figure__pic:hover .male-figure__zoom { background: var(--teal); color: var(--white); }
.male-figure figcaption { line-height: 1.6; }
.male-stage-labels { margin: 0.9rem 0 0 !important; }
.male-measure-panels { margin: 1rem 0 0; }
.male-measure-panels > div { padding: 1rem; border-radius: var(--panel-radius); background: var(--ivory); }

/* Text explainers: real text, so the labels stay readable at any size */
.prose .male-steps { padding: clamp(1.2rem, 1rem + 1vw, 1.8rem); border-radius: var(--panel-radius); background: var(--sand-soft); }
.male-steps__title { font-family: var(--font-serif); font-size: var(--step-1); color: var(--teal-ink); margin: 0 0 1rem; }
.male-steps ol { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.male-steps li { counter-increment: step; position: relative; padding: 1rem 1rem 1rem 3.4rem; border-radius: var(--panel-radius); background: var(--white); margin: 0 !important; }
.male-steps li::before { content: counter(step); position: absolute; left: 1rem; top: 1rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--teal); color: var(--white); font-family: var(--font-serif); font-size: 0.9rem; }
.male-steps li b { display: block; color: var(--teal-ink); margin-bottom: 0.2rem; }
.male-steps li span { display: block; font-size: 0.9rem; line-height: 1.55; color: #3b4343; }
.male-steps figcaption { margin-top: 1rem; }
@media (max-width: 620px) {
  .prose figure.male-steps { margin-inline: 0; padding: 1.1rem; border-radius: var(--panel-radius); background: var(--sand-soft); }
  .prose figure.male-steps > * { padding-inline: 0; }
  .male-steps ol { grid-template-columns: 1fr; }
  .male-figure__zoom { top: 0.5rem; right: calc(var(--gutter) + 0.5rem); }
  .male-measure-panels { padding-inline: var(--gutter); }
}

/* Both partners: links to the female-side topics and the ebook previews */
.male-shared { margin-top: 3rem; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); border-radius: var(--panel-radius); background: var(--ivory); border: 1px solid var(--line); scroll-margin-top: 110px; }
.male-shared > * + * { margin-top: 1rem; }
.male-shared h2 { margin-top: 0.4rem; font-size: var(--step-2); }
.male-shared__topics, .male-shared__books { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.8rem; }
.male-shared__topics li { margin: 0 !important; }
.male-shared__topics a, .male-shared__books a { display: flex; align-items: center; gap: 0.8rem; height: 100%; padding: 0.8rem; border-radius: var(--panel-radius); background: var(--white); border: 1px solid var(--line); text-decoration: none; color: var(--muted); font-size: 0.85rem; line-height: 1.45; transition: border-color 0.2s, box-shadow 0.3s; }
.male-shared__topics a:hover, .male-shared__books a:hover { border-color: var(--sage); box-shadow: var(--shadow-s); }
.male-shared__topics img { width: 3rem; height: 3rem; object-fit: contain; flex: none; }
.male-shared__books img { width: 3.2rem; height: auto; flex: none; box-shadow: 0 4px 10px rgb(23 59 59 / 0.18); }
.male-shared b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 1rem; color: var(--teal-ink); }
.male-shared small { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink); }
.male-shared__books { grid-template-columns: 1fr; margin-top: 1.4rem !important; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.male-shared__books a span { flex: 1; }

/* Female topic pages: the matching link back to the male guides */
.box--partners { background: var(--white); }
.box--partners ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.box--partners li { margin: 0 !important; }
.box--partners a { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.7rem; border-radius: var(--panel-radius); background: var(--sage-soft); text-decoration: none; color: var(--teal-ink); font-weight: 600; font-size: 0.92rem; }
.box--partners a:hover { background: var(--sage); }
.box--partners img { width: 2.4rem; height: 2.4rem; object-fit: contain; flex: none; }
/* Links between the website and the Embryology Course (25 Oct 2026): the same box on both sides.
   Website topic pages: "Go deeper in the course" (lesson paintings). Course lessons: "Read next on Fertility with Kara" (topic icons). */
.box--links { background: var(--white); }
.box--links ul, .prose .box--links ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; margin: 0.8rem 0 0; }
.box--links li { margin: 0 !important; }
.box--links ul a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.85rem; padding: 0.5rem 0.8rem 0.5rem 0.5rem; border-radius: var(--panel-radius); background: var(--sage-soft); text-decoration: none; color: var(--teal-ink); }
.box--links ul a:hover { background: var(--sage); }
.box--links ul img { width: 4.6rem; height: 3.45rem; object-fit: cover; border-radius: calc(var(--panel-radius) * 0.6); display: block; }
.box--links .is-icon img { width: 2.6rem; height: 2.6rem; object-fit: contain; border-radius: 0; margin-inline: 0.2rem; }
.box--links b { display: block; font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.box--links small { display: block; margin-top: 0.15rem; color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.box--links .box__more { margin-top: 1rem; }
.box--links .box__book { margin-top: 0.9rem; font-size: 0.92rem; }

/* Picture viewer: a native <dialog>, so Escape, focus and the backdrop are handled by the browser */
.lightbox { margin: auto; width: min(1100px, 94vw); max-width: none; max-height: 94vh; padding: 0; border: 0; border-radius: var(--panel-radius); background: var(--white); box-shadow: 0 25px 60px rgb(23 59 59 / 0.35); }
.lightbox::backdrop { background: rgb(21 45 45 / 0.72); }
.lightbox__frame { display: grid; gap: 0.8rem; padding: clamp(0.8rem, 2vw, 1.4rem); }
.lightbox__img { display: block; width: 100%; max-height: 74vh; object-fit: contain; background: var(--ivory); border-radius: var(--picture-radius); }
.lightbox__caption { font-size: 0.9rem; line-height: 1.55; color: var(--muted); font-style: italic; margin: 0; }
.lightbox__actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem; margin: 0; }
.lightbox__open { font-size: 0.85rem; font-weight: 600; }
.lightbox__close { font: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.65rem 1.2rem; border: 0; border-radius: var(--btn-radius); background: var(--teal-ink); color: var(--white); cursor: pointer; }
.lightbox__close:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
html.has-lightbox { overflow: hidden; }
@media (max-width: 620px) { .lightbox { width: 100vw; max-height: 100vh; border-radius: 0; } .lightbox__img { max-height: 68vh; } }
@media (max-width: 700px) { .male-sprig { display: none; } }
@media print { .male-figure__zoom, .lightbox, .male-sprig { display: none !important; } }

/* Watercolour additions (12 Oct 2026): side-by-side pictures and the shared-picture banner */
.male-figure--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.male-figure--pair figcaption { grid-column: 1 / -1; }
.male-figure--pair .male-figure__zoom { top: 0.55rem; right: 0.55rem; }
.male-shared__art { display: block; width: calc(100% + 2 * clamp(1.4rem, 1rem + 2vw, 2.4rem)); max-width: none; height: clamp(150px, 22vw, 230px); margin: calc(-1 * clamp(1.4rem, 1rem + 2vw, 2.4rem)) calc(-1 * clamp(1.4rem, 1rem + 2vw, 2.4rem)) 1.2rem; object-fit: cover; object-position: center 45%; border-radius: var(--panel-radius) var(--panel-radius) 0 0; }
.male-shared { overflow: hidden; }
@media (max-width: 620px) { .male-figure--pair { grid-template-columns: 1fr; } }
/* Wide labelled diagrams (25 Oct 2026, the Book Four explainers): on a phone they keep a readable
   width and pan sideways, like the course's figures; Enlarge still opens the whole picture */
.male-figure__swipe { display: none; }
@media (max-width: 620px) {
  .male-figure--wide .male-figure__pic { overflow-x: auto; overscroll-behavior-x: contain; }
  .male-figure--wide .male-figure__pic img { width: 640px; max-width: none; }
  .male-figure__swipe { display: block; margin: 0.45rem 0 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
}
/* Male section landing: the homepage dial hero, with a softer background */
/* Option C: the hero painting is mirrored so its sperm-meeting-the-egg scene sits behind the dial. */
.male-dial-hero .hero__bg img { opacity: 0.8; transform: scaleX(-1); }
.dial--male .dial__kicker { color: var(--teal); }
.male-dial-hero .dial__caption::before, .male-dial-hero .dial__caption::after { background: var(--teal); }
/* The caption wraps on phones; keep both lines centred between the rules */
.dial__caption { text-align: center; }
/* Female fertility: the same dial hero as the male landing */
.female-dial-hero .hero__bg img { opacity: 0.55; }
.female-dial-hero .breadcrumb { margin-bottom: -0.6rem; }

/* Header with both Female and Male Fertility menus (12 Oct 2026). The header gets a wider
   container than the page body, then compacts in steps so the menu stays on one line:
   Search becomes an icon, the logo and gaps shrink, and the phone menu starts at 1180px. */
.site-header .header-inner { width: min(100% - 2 * var(--gutter), 1400px); gap: 1.2rem; }
@media (min-width: 1181px) and (max-width: 1520px) {
  .header-search { padding: 0; width: 42px; height: 42px; justify-content: center; }
  .header-search span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (min-width: 1181px) and (max-width: 1400px) {
  .brand-logo img { width: 215px; }
  .primary-nav ul { gap: 0.55rem; }
  .primary-nav a, .nav-dropdown > summary { font-size: 0.88rem; }
  .header-inner { gap: 0.9rem; }
}
@media (min-width: 1181px) and (max-width: 1260px) {
  .brand-logo img { width: 190px; }
  .primary-nav ul { gap: 0.4rem; }
  .primary-nav a, .nav-dropdown > summary { font-size: 0.85rem; }
}

/* Dial variant: small swimming sperm orbit the dial instead of round cells (male guides).
   Each swimmer sits at the top of its rotated layer, head pointing the way its ring turns. */
.dial--sperm .dial__orbit span::before { display: none; }
.dial__orbit span > svg {
  position: absolute; top: 0; left: 50%; width: calc(var(--cell, 15px) * 3.4); height: auto;
  color: #2f6b72; opacity: 0.88; transform: translate(-50%, -50%); animation: dial-swim 2.6s ease-in-out infinite;
}
.dial__orbit span:nth-child(3n + 2) > svg { color: #6f9aa0; animation-delay: -0.9s; }
.dial__orbit span:nth-child(3n) > svg { color: #8fb0a6; animation-delay: -1.7s; }
.dial__orbit--outer span > svg { color: #4f7f86; opacity: 0.7; animation-name: dial-swim-back; }
@keyframes dial-swim { 50% { transform: translate(-50%, -50%) rotate(7deg); } }
@keyframes dial-swim-back { 0%, 100% { transform: translate(-50%, -50%) scaleX(-1); } 50% { transform: translate(-50%, -50%) scaleX(-1) rotate(7deg); } }
@media (prefers-reduced-motion: reduce) { .dial__orbit span > svg { animation: none; } }

/* Kara's script (option B, chosen 12 Oct 2026). Satisfy matches the logo's "with Kara" lettering.
   Accents only, never medical text: the labels where Kara "signs" the page, the Meet Kara
   signature, and the "Know your options." line in the dial heroes. */
@font-face {
  font-family: 'Satisfy';
  src: url('/fonts/satisfy-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root { --font-script: 'Satisfy', 'Brush Script MT', cursive; }
.box__label.box__label--kara { font-family: var(--font-script); font-size: 1.45rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.1; color: var(--rose-ink-deep); }
.box--takeaway .box__label.box__label--kara { color: var(--rose-light); }
.script-kara { font-family: var(--font-script); font-weight: 400; font-style: normal; letter-spacing: 0; color: var(--rose-ink); font-size: 1.12em; }
.signature { font-family: var(--font-script); font-style: normal; font-size: 2.8rem; line-height: 1.2; }
.hero :is(h1, .hero__h) em.ln { font-family: var(--font-script); font-style: normal; font-weight: 400; letter-spacing: 0; line-height: 1.05; font-size: 0.92em; padding-top: 0.08em; }


/* Dial variant: small egg cells orbit the dial (female fertility), the counterpart of .dial--sperm. */
.dial--eggs .dial__orbit span::before { display: none; }
.dial--eggs .dial__orbit span > svg { width: calc(var(--cell, 15px) * 2.2); color: #b9706a; opacity: 0.95; filter: drop-shadow(0 2px 4px rgb(156 91 85 / 0.18)); animation: dial-egg 7s ease-in-out infinite; }
.dial--eggs .dial__orbit span:nth-child(3n + 2) > svg { color: #d8aaa5; animation-delay: -2.3s; }
.dial--eggs .dial__orbit span:nth-child(3n) > svg { color: #d9b48f; animation-delay: -4.6s; }
.dial--eggs .dial__orbit--outer span > svg { opacity: 0.7; animation-name: dial-egg; }
@keyframes dial-egg { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .dial--eggs .dial__orbit span > svg { animation: none; } }

/* Homepage hero: tabs above the dial (option C, chosen 12 Oct 2026) */
.dial-tabs__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1.4rem; position: relative; z-index: 1; }
.dial-tabs__list [role="tab"] { font: 700 0.78rem var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.6rem 1.05rem; border: 0; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); cursor: pointer; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.dial-tabs__list [role="tab"]:hover { color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--teal); }
.dial-tabs__list [role="tab"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.dial-tabs__list [role="tab"][aria-selected="true"] { background: var(--teal-ink); color: var(--white); box-shadow: none; }
.dial-tabs__list #dial-tab-female[aria-selected="true"] { background: var(--rose-ink); }
.dial-tabs__list #dial-tab-male[aria-selected="true"] { background: #33566a; }
/* Arrows pointing at Female and Male (22 Oct 2026); they fade once a tab has been chosen */
.dial-tabs__list [role="tab"] { position: relative; }
.dial-tabs__hint { position: absolute; bottom: calc(100% - 8px); left: -40px; width: 56px; height: 62px; pointer-events: none; color: var(--rose-ink); transition: opacity 0.4s; }
#dial-tab-male .dial-tabs__hint { left: auto; right: -40px; color: #33566a; --dx: -1; }
#dial-tab-male .dial-tabs__hint svg { transform: scaleX(-1); }
.dial-tabs__hint svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dial-tabs.is-picked .dial-tabs__hint { opacity: 0; }
@media (max-width: 1059px) { .dial-tabs__list { margin-top: 1.6rem; } } /* room for the arrows when the dial sits below the text */

/* Learn page: the tabbed dial beside the search and filters (12 Oct 2026) */
.library-hero { overflow: hidden; }
.page-hero .container.library-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; justify-items: stretch; }
.library-hero__copy { display: grid; gap: 1.1rem; justify-items: start; min-width: 0; }
.library-hero__dial { min-width: 0; }
.library-hero__dial .dial { width: min(100%, 460px); }
@media (max-width: 1000px) {
  .page-hero .container.library-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .library-hero__dial { max-width: 500px; justify-self: center; width: 100%; }
}

/* Start Here: the tabbed dial after the six steps (12 Oct 2026) */
.start-dial { overflow: hidden; }
.start-dial__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
.start-dial__copy { display: grid; gap: 1.1rem; justify-items: start; min-width: 0; }
.start-dial__copy h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.start-dial__links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.start-dial__dial { min-width: 0; }
.start-dial__dial .dial { width: min(100%, 460px); }
@media (max-width: 1000px) {
  .start-dial__grid { grid-template-columns: minmax(0, 1fr); }
  .start-dial__dial { max-width: 500px; justify-self: center; width: 100%; }
}

/* ================= Motion (options A, B, C, D, F, G, chosen 13 Oct 2026) =================
   Calm, transform-and-opacity only, and all of it off for visitors who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  /* A · The opening line: headline lines rise; "Know your options." writes itself on in script */
  .hero--dial :is(h1, .hero__h) .ln { animation: motion-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .hero--dial :is(h1, .hero__h) .ln:nth-child(2) { animation-delay: 0.12s; }
  .hero--dial :is(h1, .hero__h) em.ln { animation: motion-write 1.5s cubic-bezier(0.55, 0.05, 0.3, 1) 0.5s backwards; }
  .hero--dial .hero__copy > .lead { animation: motion-rise 0.7s ease 1.2s backwards; }
  .hero--dial .hero-kara { animation: motion-rise 0.7s ease 1.35s backwards; }
  .hero--dial .hero-ctas { animation: motion-rise 0.7s ease 1.5s backwards; }
  .hero--dial .hero__bg img { animation: motion-breathe 16s ease-in-out infinite alternate; }

  /* B · Dials bloom open: segments one by one round the ring, then the band, centre and orbit */
  .dial .dial__seg > * { animation: motion-bloom 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .dial .dial__seg--band > * { animation-name: motion-sweep; animation-duration: 0.8s; }
  .dial__seg:nth-child(3) > * { animation-delay: 0ms; }
  .dial__seg:nth-child(4) > * { animation-delay: 50ms; }
  .dial__seg:nth-child(5) > * { animation-delay: 100ms; }
  .dial__seg:nth-child(6) > * { animation-delay: 150ms; }
  .dial__seg:nth-child(7) > * { animation-delay: 200ms; }
  .dial__seg:nth-child(8) > * { animation-delay: 250ms; }
  .dial__seg:nth-child(9) > * { animation-delay: 300ms; }
  .dial__seg:nth-child(10) > * { animation-delay: 350ms; }
  .dial__seg:nth-child(11) > * { animation-delay: 400ms; }
  .dial__seg:nth-child(12) > * { animation-delay: 450ms; }
  .dial__seg:nth-child(13) > * { animation-delay: 500ms; }
  .dial__seg:nth-child(14) > * { animation-delay: 550ms; }
  .dial__seg:nth-child(15) > * { animation-delay: 600ms; }
  .dial__seg:nth-child(16) > * { animation-delay: 650ms; }
  .dial__seg:nth-child(17) > * { animation-delay: 700ms; }
  .dial__seg:nth-child(18) > * { animation-delay: 750ms; }
  .dial__seg:nth-child(19) > * { animation-delay: 800ms; }
  .dial__seg:nth-child(20) > * { animation-delay: 850ms; }
  .dial__seg:nth-child(21) > * { animation-delay: 900ms; }
  .dial__seg:nth-child(22) > * { animation-delay: 950ms; }
  .dial__seg:nth-child(23) > * { animation-delay: 1000ms; }
  .dial__seg:nth-child(24) > * { animation-delay: 1050ms; }
  .dial__seg:nth-child(25) > * { animation-delay: 1100ms; }
  .dial__seg:nth-child(26) > * { animation-delay: 1150ms; }
  .dial__seg:nth-child(27) > * { animation-delay: 1200ms; }
  .dial__seg:nth-child(28) > * { animation-delay: 1250ms; }
  .dial__seg:nth-child(29) > * { animation-delay: 1300ms; }
  .dial__seg:nth-child(30) > * { animation-delay: 1350ms; }
  .dial__seg:nth-child(31) > * { animation-delay: 1400ms; }
  .dial__seg:nth-child(32) > * { animation-delay: 1450ms; }
  .dial .dial__core { animation: motion-rise 0.6s ease 0.9s backwards; }
  .dial .dial__orbit > span { animation: motion-fade 1s ease 1.3s backwards; }
  .dial + .dial__caption { animation: motion-fade 0.8s ease 1.4s backwards; }
  /* The female and male tab panels turn in instead (C), and the Start Here dial waits until it is seen */
  .dial-tabs__panel + .dial-tabs__panel .dial .dial__seg > *,
  .dial-tabs__panel + .dial-tabs__panel .dial .dial__core,
  .dial-tabs__panel + .dial-tabs__panel .dial .dial__orbit > span,
  .dial-tabs__panel + .dial-tabs__panel .dial__caption { animation-name: none; }
  .js .start-dial .dial:not(.is-inview) .dial__seg > *,
  .js .start-dial .dial:not(.is-inview) .dial__core,
  .js .start-dial .dial:not(.is-inview) .dial__orbit > span,
  .js .start-dial .dial:not(.is-inview) + .dial__caption { animation-play-state: paused; }

  /* C · The circles turn when you switch tabs (main.js adds these classes) */
  .dial-tabs__panel.is-out { animation: motion-turn-out 0.38s cubic-bezier(0.5, 0, 0.75, 0) forwards; }
  .dial-tabs__panel.is-in { animation: motion-turn-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  /* The Female and Male arrows draw themselves on, then keep nudging towards their tab */
  .dial-tabs__hint path { stroke-dasharray: 1; animation: hint-draw 0.7s ease-out 1.6s backwards; }
  .dial-tabs__hint path + path { animation-delay: 2.2s; animation-duration: 0.3s; }
  .dial-tabs__hint { animation: hint-nudge 1.4s ease-in-out 2.6s 3; }
  #dial-tab-male .dial-tabs__hint path { animation-delay: 1.8s; }
  #dial-tab-male .dial-tabs__hint path + path { animation-delay: 2.4s; }
  #dial-tab-male .dial-tabs__hint { animation-delay: 2.8s; }
  .dial-tabs:not(.is-picked) #dial-tab-female { --ring: 207 128 128; animation: hint-pulse 2.8s ease-out 2.6s 3; }
  .dial-tabs:not(.is-picked) #dial-tab-male { --ring: 51 86 106; animation: hint-pulse 2.8s ease-out 3s 3; }
  @keyframes hint-draw { from { stroke-dashoffset: 1; } }
  @keyframes hint-pulse { 0% { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 0 rgb(var(--ring) / 0.45); } 70%, 100% { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 10px rgb(var(--ring) / 0); } }
  @keyframes hint-nudge { 0%, 100% { translate: 0 0; } 50% { translate: calc(var(--dx, 1) * 5px) 5px; } }

  /* F · Cards lift and lean towards the pointer (main.js sets --rx/--ry on fine pointers) */
  .zcard { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s; }
  .zcard, .zcard:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .zcard:hover, .zcard:focus-visible { translate: 0 -6px; box-shadow: 0 22px 40px -22px rgb(23 59 59 / 0.45); }
  .zcard__pic img { transition: scale 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .zcard:hover .zcard__pic img, .zcard:focus-visible .zcard__pic img { scale: 1.06; }
  .guide-stage__book { transition: translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s; }
  .guide-stage__book:hover { translate: 0 -10px; filter: drop-shadow(0 16px 18px rgb(0 0 0 / 0.25)); }

  /* G · Smooth page changes: a soft cross-fade between pages, the header stays still, and a Learn
     card's picture glides into its topic page header (both carry the same data-vt name) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: motion-page-out 0.25s ease both; }
  ::view-transition-new(root) { animation: motion-page-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  ::view-transition-group(*) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  .site-header { view-transition-name: site-header; }
[data-vt="your-cycle"] img { view-transition-name: pic-your-cycle; }
[data-vt="fertility-testing"] img { view-transition-name: pic-fertility-testing; }
[data-vt="female-fertility"] img { view-transition-name: pic-female-fertility; }
[data-vt="male-fertility"] img { view-transition-name: pic-male-fertility; }
[data-vt="pcos"] img { view-transition-name: pic-pcos; }
[data-vt="endometriosis"] img { view-transition-name: pic-endometriosis; }
[data-vt="iui"] img { view-transition-name: pic-iui; }
[data-vt="ivf"] img { view-transition-name: pic-ivf; }
[data-vt="egg-freezing"] img { view-transition-name: pic-egg-freezing; }
[data-vt="lifestyle"] img { view-transition-name: pic-lifestyle; }
[data-vt="supplements"] img { view-transition-name: pic-supplements; }
[data-vt="emotional-health"] img { view-transition-name: pic-emotional-health; }
}
@keyframes motion-rise { from { opacity: 0; transform: translateY(0.5em); } }
@keyframes motion-write { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% 0 -10% 0); } }
@keyframes motion-breathe { to { scale: 1.05; translate: -1% -1%; } }
@keyframes motion-bloom { from { opacity: 0; transform: scale(0.55) rotate(-14deg); } }
@keyframes motion-sweep { from { opacity: 0; transform: rotate(-24deg) scale(1.05); } }
@keyframes motion-fade { from { opacity: 0; } }
@keyframes motion-turn-out { to { opacity: 0; transform: rotate(-28deg) scale(0.9); } }
@keyframes motion-turn-in { from { opacity: 0; transform: rotate(28deg) scale(0.9); } }
@keyframes motion-page-out { to { opacity: 0; } }
@keyframes motion-page-in { from { opacity: 0; transform: translateY(10px); } }

/* D · Sperm meets egg (views/partials/sperm-egg.ejs) */
.sperm-egg { margin: 0; }
.sperm-egg svg { display: block; width: 100%; height: auto; }
.sperm-egg image { mix-blend-mode: multiply; } /* the painted swimmers' paper background melts into the box (11 Nov 2026) */
.sperm-egg figcaption { margin-top: 0.3rem; font-size: 0.75rem; font-style: italic; color: var(--muted); text-align: center; }
.male-shared__art.male-shared__art--motion { height: auto; padding: 1rem clamp(1rem, 3vw, 2rem) 0.4rem; background: linear-gradient(120deg, var(--rose-soft), var(--ivory) 60%); }
.box--partners .sperm-egg { margin: 0.6rem auto 1.1rem; max-width: 520px; }
/* The watercolour banner sits on top, the sperm animation directly beneath it (13 Oct 2026) */
.male-shared__art + .male-shared__art--motion { width: auto; margin: -1.2rem calc(-1 * clamp(1.4rem, 1rem + 2vw, 2.4rem)) 1.2rem; border-radius: 0; background: linear-gradient(180deg, var(--ivory), var(--rose-soft)); padding-top: 0.6rem; }

/* Homepage male band: the sperm-meets-egg animation on the right (13 Oct 2026) */
.male-feature--motion { overflow: hidden; }
.male-feature--motion .male-feature__grid { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 400px); max-width: none; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.male-feature__motion { min-width: 0; }
@media (max-width: 1000px) { .male-feature--motion .male-feature__grid { grid-template-columns: 140px minmax(0, 1fr); } .male-feature__motion { grid-column: 1 / -1; max-width: 520px; justify-self: center; width: 100%; } }
@media (max-width: 600px) { .male-feature--motion .male-feature__grid { grid-template-columns: 1fr; } }

/* Homepage female band (13 Oct 2026): mirrors the male band, with the egg orbit on the right */
.female-feature { background: linear-gradient(120deg, var(--rose-soft), var(--ivory) 70%); overflow: hidden; }
.female-feature__grid { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 400px); gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: center; }
.female-feature__grid > img { width: 100%; height: auto; }
.female-feature__copy, .male-feature__copy { display: grid; gap: 1rem; justify-items: start; min-width: 0; }
.female-feature__motion { min-width: 0; }
@media (max-width: 1000px) { .female-feature__grid { grid-template-columns: 140px minmax(0, 1fr); } .female-feature__motion { grid-column: 1 / -1; } }
@media (max-width: 600px) { .female-feature__grid { grid-template-columns: 1fr; } .female-feature__grid > img { width: 130px; } }

/* Egg orbit (views/partials/egg-orbit.ejs) */
.egg-orbit { margin: 0 auto; width: min(100%, 300px); }
.egg-orbit__stage { position: relative; aspect-ratio: 1; }
.egg-orbit__egg { position: absolute; inset: 14%; width: 72%; height: 72%; }
.egg-orbit__ring { position: absolute; inset: 2%; }
.egg-orbit__ring--outer { inset: -6%; }
.egg-orbit__ring span { position: absolute; inset: 0; }
.egg-orbit__ring span svg { position: absolute; top: 0; left: 50%; width: 30px; height: auto; transform: translate(-50%, -50%); color: #b9706a; }
.egg-orbit__ring span:nth-child(3n + 2) svg { color: #d8aaa5; width: 24px; }
.egg-orbit__ring span:nth-child(3n) svg { color: #d9b48f; width: 20px; }
.egg-orbit__ring--outer span svg { opacity: 0.7; width: 18px; }
.egg-orbit__ring span:nth-child(1) { transform: rotate(8deg); }
.egg-orbit__ring span:nth-child(2) { transform: rotate(58deg); }
.egg-orbit__ring span:nth-child(3) { transform: rotate(112deg); }
.egg-orbit__ring span:nth-child(4) { transform: rotate(166deg); }
.egg-orbit__ring span:nth-child(5) { transform: rotate(214deg); }
.egg-orbit__ring span:nth-child(6) { transform: rotate(262deg); }
.egg-orbit__ring span:nth-child(7) { transform: rotate(318deg); }
.egg-orbit__ring--outer span:nth-child(1) { transform: rotate(34deg); }
.egg-orbit__ring--outer span:nth-child(2) { transform: rotate(104deg); }
.egg-orbit__ring--outer span:nth-child(3) { transform: rotate(178deg); }
.egg-orbit__ring--outer span:nth-child(4) { transform: rotate(240deg); }
.egg-orbit__ring--outer span:nth-child(5) { transform: rotate(296deg); }
.egg-orbit figcaption { margin-top: 2rem; text-align: center; font-size: 0.75rem; font-style: italic; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .egg-orbit__ring { animation: dial-orbit 60s linear infinite; }
  .egg-orbit__ring--outer { animation-duration: 90s; animation-direction: reverse; }
  .egg-orbit__ring span svg { animation: egg-orbit-pulse 7s ease-in-out infinite; }
  .egg-orbit__ring span:nth-child(3n + 2) svg { animation-delay: -2.3s; }
  .egg-orbit__ring span:nth-child(3n) svg { animation-delay: -4.6s; }
}
@keyframes egg-orbit-pulse { 50% { scale: 1.15; } }

/* Sperm development timeline (sperm-health chapter): numbered steps and a 0–3 month ruler
   under the watercolour. The bar stops between 2 and 3 months ("roughly two to three"). */
.male-timeline-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none !important; padding: 0 !important; margin: 1rem 0 0 !important; text-align: center; }
.male-timeline-steps li { margin: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.male-timeline-steps__n { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--teal-ink); color: var(--white); font-size: 0.75rem; font-weight: 700; margin-bottom: 0.2rem; }
.male-timeline-steps b { font-size: 0.95rem; color: var(--teal-ink); }
.male-timeline-steps li > span:last-child { font-size: 0.82rem; line-height: 1.5; color: var(--muted); }
.male-ruler { margin: 1.4rem 0.4rem 0; }
.male-ruler__head { display: flex; justify-content: space-between; align-items: end; font-size: 0.8rem; font-weight: 700; color: var(--teal-ink); }
.male-ruler__head span:last-child { position: relative; padding-bottom: 0.2rem; }
.male-ruler__head span:last-child::after { content: ""; position: absolute; right: 0; top: 100%; width: 2px; height: 2.4rem; background: var(--teal-ink); }
.male-ruler__track { position: relative; height: 4px; margin-top: 0.75rem; border-radius: 2px; background: var(--line); }
.male-ruler__track span { position: absolute; left: 0; top: -4px; width: 83%; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #cfe0d8, #5f8f86 66%, rgb(95 143 134 / 0.35)); }
.male-ruler__ticks { display: flex; justify-content: space-between; list-style: none !important; padding: 0 0.6rem 0 0 !important; margin: 0.55rem 0 0 !important; font-size: 0.75rem; color: var(--muted); }
.male-ruler__ticks li { margin: 0 !important; }
.male-ruler__note { margin: 0.9rem 0 0 !important; text-align: center; font-size: 0.88rem; color: var(--teal-ink); }
@media (max-width: 600px) {
  .male-timeline-steps { grid-template-columns: 1fr; gap: 0.7rem; text-align: left; padding-inline: var(--gutter) !important; }
  .male-timeline-steps li { display: grid; grid-template-columns: 1.6rem 1fr; column-gap: 0.7rem; align-items: start; }
  .male-timeline-steps__n { grid-row: span 2; margin: 0; }
  .male-ruler { margin-inline: calc(var(--gutter) + 0.2rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .male-ruler__track span { transform-origin: left; transition: scale 1.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .js .male-ruler:not(.is-inview) .male-ruler__track span { scale: 0 1; }
}

/* ================= Meet Kara · her background (verified qualifications, 13 Oct 2026) ================= */
.mk-bg { background: linear-gradient(180deg, var(--sage-soft), var(--ivory)); }
.mk-time__head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); gap: 2rem 3rem; align-items: end; margin-bottom: 3rem; }
.mk-time__head h2 { margin: 0.7rem 0 1.1rem; font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); line-height: 1.08; }
.mk-time__head .lead { margin: 0; max-width: 60ch; color: var(--teal-ink); }
.mk-time__reg { background: var(--white); border-radius: var(--panel-radius); padding: 1.3rem 1.4rem; box-shadow: inset 0 3px 0 var(--teal), var(--shadow-s); display: grid; gap: 0.3rem; }
.mk-time__reg span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; color: var(--rose-ink); }
.mk-time__reg b { font: 500 1.25rem/1.25 var(--font-serif); color: var(--teal-ink); }
.mk-time__reg small { color: var(--muted); }
.mk-time { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; position: relative; }
.mk-time::before { content: ''; position: absolute; left: 0; right: 0; top: 3.15rem; border-top: 2px solid var(--teal); }
.mk-stop { position: relative; display: grid; gap: 0.5rem; align-content: start; }
.mk-stop__year { height: 2.2rem; font: 500 var(--step-2)/1 var(--font-serif); color: var(--teal-ink); }
.mk-stop__dot { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; background: var(--sage-soft); box-shadow: inset 0 0 0 4px var(--teal); }
.mk-stop b { margin-top: 0.4rem; font: 500 1.1rem/1.3 var(--font-serif); color: var(--teal-ink); }
.mk-stop__sub { font-size: 0.86rem; color: var(--muted); }
.mk-stop__sub em { font-family: var(--font-serif); color: var(--rose-ink); }
.mk-stop--today .mk-stop__year { color: var(--rose-ink); }
.mk-stop--today .mk-stop__dot { background: var(--rose); box-shadow: inset 0 0 0 4px var(--rose-ink), 0 0 0 6px rgb(216 170 165 / 0.35); }
.mk-time__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 3rem; margin-top: 3rem; }
.mk-time__more p { margin: 0; color: var(--muted); max-width: 60ch; }
.mk-research { margin-top: 3rem; display: grid; gap: 1rem; }
.mk-research__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.mk-research__cards li { display: grid; gap: 0.5rem; align-content: start; background: var(--white); padding: 1.4rem 1.5rem; border-radius: var(--panel-radius); box-shadow: var(--shadow-s); font-size: 0.95rem; color: var(--muted); }
.mk-research__cards b { font: 500 var(--step-1)/1.25 var(--font-serif); color: var(--teal-ink); }
@media (max-width: 900px) {
  .mk-time__head, .mk-time__more, .mk-research__cards { grid-template-columns: minmax(0, 1fr); }
  .mk-time { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; padding-left: 2rem; }
  .mk-time::before { left: 9px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px solid var(--teal); }
  .mk-stop__dot { position: absolute; left: -2rem; top: 0.2rem; }
  .mk-stop__year { height: auto; }
}
.byline__cred { display: block; margin-top: 0.3rem; font-family: var(--font-sans); font-style: normal; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.guide-hero .byline__cred { color: rgb(250 247 241 / 0.85); }
/* With her real photo, keep the badges off her face */
.kara-feature .chip-float:nth-of-type(2) { top: auto; bottom: 30%; right: -9%; }
.kara-feature .chip-float:nth-of-type(3) { bottom: 7%; left: -10%; }
/* Male guides, 13 Oct 2026 (option B): evidence labels, "Where the guidelines disagree" boxes,
   the label legend on /male-fertility and Kara's research-area note. Brand palette only; the
   dots repeat the level in shape, so the label never relies on colour alone. */
.evidence-pill {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  border: 1px solid transparent; border-radius: 999px; font: 700 0.74rem/1.2 var(--font-sans); letter-spacing: 0.03em; white-space: nowrap;
}
.evidence-pill--strong { background: var(--sage); color: var(--teal-ink); border-color: rgb(23 59 59 / 0.35); }
.evidence-pill--moderate { background: var(--sand); color: var(--charcoal); border-color: rgb(41 45 45 / 0.3); }
.evidence-pill--limited { background: var(--rose-soft); color: var(--rose-ink-deep); border-color: rgb(138 75 69 / 0.4); }
.evidence-pill__dots { display: inline-flex; gap: 3px; }
.evidence-pill__dots i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.evidence-pill--strong .evidence-pill__dots i,
.evidence-pill--moderate .evidence-pill__dots i:nth-child(-n + 2),
.evidence-pill--limited .evidence-pill__dots i:first-child { background: currentColor; }
.box__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.box__head .box__label { margin-bottom: 0; }

.box--disagree { background: var(--sand-soft); border: 0; border-left: 4px solid var(--teal-ink); }
.box--disagree .box__label { color: var(--rose-ink-deep); }
.prose .box--disagree__topic { margin: 0 0 0.9rem; font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.35; color: var(--teal-ink); }
.box--disagree__list { list-style: none; margin: 0; padding: 0; }
.prose .box--disagree__list li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0.25rem 1.25rem; margin: 0; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.box--disagree__list a { font-size: 0.92rem; font-weight: 700; color: var(--teal-ink); overflow-wrap: anywhere; }
.box--disagree__list span { font-size: 0.95rem; color: #3b4343; }
.prose .box--disagree__ask { margin-top: 0; padding-top: 0.9rem; border-top: 1px solid var(--line); font-weight: 700; color: var(--teal-ink); }
@media (max-width: 600px) { .prose .box--disagree__list li { grid-template-columns: minmax(0, 1fr); } }

.evidence-legend { scroll-margin-top: 110px; }
.evidence-legend__list { display: grid; gap: 0.85rem; margin: 1rem 0; }
.evidence-legend__list div { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 0.4rem 1rem; align-items: start; }
.evidence-legend__list dd { margin: 0; font-size: 0.92rem; color: #3b4343; }
@media (max-width: 600px) { .evidence-legend__list div { grid-template-columns: minmax(0, 1fr); } }
.prose .evidence-legend-link { font-size: 0.88rem; color: var(--muted); }
.prose .male-kara-note { padding: 0.8rem 1.1rem; border-left: 3px solid var(--teal); border-radius: var(--panel-radius); background: var(--sage-soft); font-size: 0.92rem; color: var(--teal-ink); }
.prose .male-review--flag { font-size: 0.92rem; }

/* Supplements page (21 Oct 2026, options A + B): section pictures beside the text, and at-a-glance picture cards.
   Any topic can use them through topics.js `sections[].pic` and `glance`. */
.prose .sec-pic { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 1.6rem); align-items: start; margin: 0.4rem 0 2rem; }
.prose .sec-pic--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
.prose .sec-pic--flip figure { order: 2; }
.prose .sec-pic figure { margin: 0; }
.prose .sec-pic figure img { padding: 0; border: 0; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--picture-radius); box-shadow: var(--shadow); }
.prose .sec-pic figcaption { margin-top: 0.5rem; font-size: 0.8rem; font-style: italic; line-height: 1.45; color: var(--muted); }
.prose .sec-pic > p { margin-top: 0; }
@media (max-width: 720px) {
  .prose .sec-pic, .prose .sec-pic--flip { grid-template-columns: minmax(0, 1fr); }
  .prose .sec-pic--flip figure { order: 0; }
}
.glance { margin: 2.2rem 0 2.6rem; }
.glance h2 { margin-bottom: 0.3rem; }
.glance__lead { margin: 0 0 1rem; color: var(--muted); }
.glance__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.glance__card { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.1rem 1.15rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius, 18px); }
.glance__pic { width: 88px; height: 88px; margin-bottom: 0.35rem; border-radius: 50%; overflow: hidden; background: var(--ivory, #FAF7F1); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--line); }
.prose .glance__pic img { width: 100%; height: 100%; object-fit: cover; padding: 0; border: 0; border-radius: 0; }
.prose .glance__card h3 { margin: 0; font-size: 1.15rem; }
.prose .glance__card p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.prose .glance__card .glance__who { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.glance__tag { align-self: flex-start; margin-top: auto; padding: 0.42rem 0.7rem; border-radius: 99px; font-size: 0.68rem; font-weight: 800; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; }
.glance__tag--essential { background: var(--teal); color: var(--white); }
.glance__tag--gain { background: #dcebe2; color: #1f5a3d; }
.glance__tag--limited { background: #efe4d6; color: #6b4a22; }
.glance__tag--caution { background: #f4e1de; color: #8d3b33; }
@media (max-width: 560px) { .glance__grid { grid-template-columns: minmax(0, 1fr); } }

/* Sources lists fold away (21 Oct 2026): click "Show the research" to open. */
details.sources--fold { margin-top: 2rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); }
details.sources--fold[open] { border-color: var(--sage); box-shadow: var(--shadow-s); }
.sources--fold > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.8rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; color: var(--ink); }
.sources--fold > summary::-webkit-details-marker { display: none; }
.sources--fold > summary strong { font-family: var(--font-serif, Lora, serif); font-size: 1.05rem; color: var(--teal); }
.sources__count { font-size: 0.85rem; color: var(--muted); }
.sources__hint { margin-left: auto; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
.sources__hint::after { content: ' +'; }
details.sources--fold[open] .sources__hint { font-size: 0; }
details.sources--fold[open] .sources__hint::after { content: 'Hide the research −'; font-size: 0.78rem; }
.sources--fold > summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
details.sources--fold > ul, details.sources--fold > p { margin: 0; padding: 0 1.25rem 1.1rem 2.35rem; }
details.sources--fold > p { padding-left: 1.25rem; padding-bottom: 0.6rem; }
section.sources details.sources--fold { margin-top: 1rem; }
.prose .sec-pic--contain figure img { object-fit: contain; background: var(--white); border: 1px solid var(--line); padding: 0.6rem; }
@media print { details.sources--fold > ul { display: block; } }

/* ===== Ebook shop (22 Oct 2026): /shop and /shop/<book>. Mixes shop mockups A, B and C. ===== */
.shop-head { max-width: 46rem; margin: 1rem 0 2.5rem; }
.shop-head h1 { margin: 0.4rem 0 0.8rem; }
.shop-soon { margin-top: 1rem; padding: 0.85rem 1.1rem; background: var(--sand-soft); border-left: 3px solid var(--rose); color: var(--charcoal); max-width: 46rem; }
.shop-h2 { margin: 3rem 0 1.25rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.shop-kicker { font: 800 0.72rem/1.2 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink); }
.shop-price { font: 700 1.15rem/1.2 var(--font-sans); color: var(--teal-ink); }
.shop-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: auto; padding-top: 1rem; }
.shop-buy--big { padding-top: 1.25rem; }
.shop-buy--big .shop-price { font-size: 1.5rem; }
/* Overseas visitors (23 Oct 2026): the worker sets <html data-visitor="overseas"> from Cloudflare's country. */
.shop-usd, .shop-abroad { display: none; }
html[data-visitor="overseas"] .shop-usd { display: inline; }
html[data-visitor="overseas"] .shop-abroad { display: block; }
.shop-usd { font-size: 0.72em; font-weight: 500; color: var(--muted); }
.shop-abroad { margin-top: 1rem; padding: 0.85rem 1.1rem; background: var(--sage-soft); border-left: 3px solid var(--teal); color: var(--charcoal); max-width: 46rem; font-size: 0.95rem; }
.shop-saving { margin-top: 0.6rem; color: var(--rose-ink); font-weight: 700; }
.shop-more { color: var(--rose-light); font-weight: 600; font-size: 0.92rem; }
.shop-note { color: var(--muted); font-size: 0.9rem; max-width: 46rem; margin-top: 1.75rem; }
.shop-best { color: var(--teal); font-weight: 600; }

/* "Which book is for you?" tiles */

/* Bundle banner and fanned covers */
.shop-bundle { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2.5rem; align-items: center; background: var(--teal-ink); color: var(--ivory); padding: 2.25rem 2.5rem; border-radius: var(--panel-radius); margin-top: 3rem; }
.shop-bundle h2 { color: var(--ivory); margin: 0.35rem 0 0.5rem; }
.shop-bundle p { color: #dfe9e5; max-width: 34rem; }
.shop-bundle .shop-kicker { color: var(--rose-light); }
.shop-bundle .shop-price { color: var(--ivory); font-size: 1.4rem; }
.shop-bundle .shop-usd { color: #dfe9e5; }
.shop-bundle strong { color: var(--ivory); }
.shop-fan { display: flex; align-items: flex-end; }
.shop-fan img { width: 112px; height: auto; border-radius: 3px var(--picture-radius) var(--picture-radius) 3px; box-shadow: var(--shadow); }
.shop-fan img + img { margin-left: -46px; }
.shop-fan img:nth-child(odd) { transform: rotate(-4deg); }
.shop-fan img:nth-child(even) { transform: rotate(3deg) translateY(-8px); }
.shop-fan--big { justify-content: center; padding: 1rem 0; }
.shop-fan--big img { width: min(170px, 36%); } /* scales with its column: on a tablet the fan covered the heading (25 Oct 2026) */
.shop-fan--big img + img { margin-left: max(-74px, -17%); }
/* Two classes, so the phone rule for the big fans (84px covers) no longer swells this one over its card's title (11 Nov 2026) */
.shop-fan.shop-fan--mini { flex: none; }
.shop-fan.shop-fan--mini img { width: 34px; box-shadow: var(--shadow-s); }
.shop-fan.shop-fan--mini img + img { margin-left: -18px; }

/* Book grid */
.shop-card__sub { color: var(--muted); font-size: 0.92rem; margin: 0; }
.shop-card__meta { font-size: 0.82rem; color: var(--muted); margin: 0; }

/* Comparison table */

/* Reassurance strip and waiting list */
.shop-trust { list-style: none; padding: 1.5rem 0 0; margin: 3rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; border-top: 1px solid var(--line); }
.shop-trust li { display: grid; gap: 0.2rem; }
.shop-trust b { font-family: var(--font-serif); color: var(--teal-ink); font-size: 1.05rem; font-weight: 600; }
.shop-trust span { color: var(--muted); font-size: 0.92rem; }
.shop-notify { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem 2.5rem; align-items: center; margin-top: 3rem; padding: 2rem; background: var(--sage-soft); border-radius: var(--panel-radius); }
.shop-notify h2 { font-size: 1.5rem; margin: 0 0 0.4rem; }
.shop-notify p { margin: 0; color: var(--charcoal); }
.shop-notify--top { margin-top: 1.4rem; max-width: 980px; }  /* option A (24 Oct 2026): the waiting list at the top while the shop is closed */

/* A book's own page */
.shop-book__top { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; margin-top: 1rem; }
.shop-book__cover { width: 100%; max-width: 420px; height: auto; box-shadow: var(--shadow-l); display: block; margin: 0 auto; }
.shop-book__info h1 { margin: 0.5rem 0 0.4rem; }
.shop-book__sub { font-family: var(--font-serif); font-size: 1.2rem; color: var(--teal); margin-bottom: 1rem; }
.shop-how { margin-top: 1.75rem; background: var(--sage-soft); padding: 1.4rem 1.5rem; border-radius: var(--panel-radius); }
.shop-how h2 { font-size: 1.25rem; margin: 0; }
.shop-how ol { padding-left: 1.2rem; margin: 0.75rem 0 0; display: grid; gap: 0.5rem; }
.shop-how p { margin: 0.9rem 0 0; color: var(--muted); font-size: 0.92rem; }
.shop-chapters { columns: 2; column-gap: 3rem; padding-left: 1.4rem; max-width: 60rem; }
.shop-chapters li { break-inside: avoid; padding: 0.3rem 0; }
.shop-samples__intro { color: var(--muted); margin: -0.5rem 0 1rem; }
.shop-samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 1.25rem; }
.shop-samples figure { margin: 0; }
.shop-samples img { width: 100%; height: auto; box-shadow: var(--shadow-s); border: 1px solid var(--line); display: block; }
.shop-samples figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }
.shop-list { display: grid; }
.shop-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 1.25rem; align-items: center; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.shop-row:last-child { border-bottom: 1px solid var(--line); }
.shop-row img { width: 88px; height: auto; box-shadow: var(--shadow-s); display: block; }
.shop-row h3 { margin: 0.25rem 0 0.35rem; }
.shop-row h3 a { color: inherit; text-decoration: none; }
.shop-row p { margin: 0; }
.shop-others { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.shop-others__item { display: flex; gap: 0.9rem; align-items: center; padding: 0.9rem; border: 1px solid var(--line); background: var(--white); border-radius: var(--panel-radius); text-decoration: none; color: var(--charcoal); min-width: 0; }
.shop-others__item:hover, .shop-others__item:focus-visible { border-color: var(--teal); }
.shop-others__item > img { width: 46px; height: auto; box-shadow: var(--shadow-s); flex: none; }
.shop-others__item small { display: block; font-size: 0.75rem; color: var(--rose-ink); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.shop-others__item b { font-family: var(--font-serif); font-weight: 600; color: var(--teal-ink); }

@media (max-width: 1000px) {
  .shop-shelf, .shop-others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .shop-bundle { grid-template-columns: 1fr; padding: 1.75rem 1.25rem; gap: 1.5rem; }
  .shop-fan img { width: 84px; }
  .shop-fan img + img { margin-left: -34px; }
  .shop-trust, .shop-notify, .shop-book__top { grid-template-columns: 1fr; }
  .shop-notify { padding: 1.5rem 1.25rem; }
  .shop-chapters { columns: 1; }
  .shop-fan--big img { width: min(120px, 36%); }
  .shop-fan--big img + img { margin-left: max(-52px, -17%); }
  .shop-book__cover { max-width: 280px; }
}
@media (max-width: 520px) {
  .shop-shelf, .shop-others { grid-template-columns: 1fr; }
  .shop-row { grid-template-columns: 64px minmax(0, 1fr); }
  .shop-row img { width: 64px; }
}

/* Header mega menu (option B, 22 Oct 2026): "Learn" opens one full-width panel with every topic, the
   four male guides and the ebooks, in the same four groups as the footer. Ebooks and About Kara keep
   the small dropdown. Native <details>, so it works without JavaScript; main.js closes it on outside
   click and Escape like the other dropdowns. */
.nav-group--mega { --hl-bg: var(--sage-soft); --hl-bar: var(--teal); display: flex; align-items: center; }
.nav-group--mega > .nav-mega > summary { padding-inline: 0.3rem; }
.nav-mega__label { display: none; }
.nav-group--mega > .nav-mega > summary.is-current { text-decoration: none; }
.primary-nav .nav-mega__link.is-current { color: var(--teal); }
.primary-nav .nav-mega__link.is-current::after { transform: scaleX(1); }
/* The Course is new: its menu item takes the same rose as its New badge. */
.primary-nav .nav-group--course .nav-mega__link, .primary-nav .nav-group--course .nav-mega > summary { color: var(--rose-ink); }
@media (max-width: 1180px) {
  .primary-nav .nav-mega__link { display: none; }
  .nav-group--mega { display: block; }
  .nav-group--mega .nav-mega > summary > span.nav-mega__label { display: inline; width: auto; height: auto; margin: 0; font-size: inherit; border: 0; transform: none; }
  .nav-group--mega > .nav-mega > summary { padding-inline: 0; }
  .nav-group--mega > .nav-mega > summary.is-current { text-decoration: underline; }
}
.nav-dropdown.nav-mega { position: static; }
.nav-mega__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 24px 40px -28px rgb(23 59 59 / 0.45); }
.nav-mega:not([open]) > .nav-mega__panel { display: none; }
.nav-mega__grid { width: min(100% - 2 * var(--gutter), 1400px); margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 2.5rem; padding-block: 1.75rem 2rem; }
.nav-mega__col { min-width: 0; }
.primary-nav .nav-mega__h { display: block; padding: 0; margin-bottom: 0.9rem; font: 800 0.72rem/1.2 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-ink); }
.primary-nav .nav-mega__h:hover { text-decoration: underline; text-underline-offset: 4px; }
.primary-nav .nav-mega__panel a::after { display: none; }
.primary-nav .nav-mega__panel ul { display: grid; gap: 0.1rem; align-items: stretch; }
.primary-nav .nav-mega__panel li a { display: flex; align-items: center; gap: 0.65rem; padding: 0.4rem 0.5rem; margin-inline: -0.5rem; border-radius: var(--panel-radius); color: var(--teal-ink); font-size: 0.92rem; font-weight: 600; line-height: 1.3; white-space: normal; }
.primary-nav .nav-mega__panel li a:hover, .primary-nav .nav-mega__panel li a:focus-visible, .primary-nav .nav-mega__panel li a[aria-current='page'] { background: var(--sage-soft); }
.primary-nav .nav-mega__col--female li a:hover, .primary-nav .nav-mega__col--female li a:focus-visible, .primary-nav .nav-mega__col--female li a[aria-current='page'] { background: var(--rose-soft); }
.primary-nav .nav-mega__panel li a:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.nav-mega__panel li img { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ivory); padding: 3px; }
.nav-mega__panel small { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-ink); }
.nav-mega__covers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
.primary-nav .nav-mega__covers a { padding: 0; display: block; }
.nav-mega__covers img { width: 100%; height: auto; display: block; box-shadow: var(--shadow-s); transition: transform 0.2s; }
.nav-mega__covers a:hover img, .nav-mega__covers a:focus-visible img { transform: translateY(-3px); }
.primary-nav .nav-mega__shop { color: var(--btn-fg); padding: 0.65rem 1rem; }
.primary-nav .nav-mega__more { display: block; width: fit-content; margin-top: 0.7rem; padding: 0; color: var(--rose-ink); font-weight: 700; font-size: 0.9rem; }
@media (max-width: 1180px) {
  .nav-mega__panel { position: static; border: 0; box-shadow: none; background: var(--sage-soft); margin: 0 0 0.75rem; border-radius: var(--panel-radius); }
  .nav-mega__grid { width: auto; grid-template-columns: 1fr; gap: 1.5rem; padding: 1.1rem 1rem 1.25rem; }
  .primary-nav .nav-mega__panel li + li { border-top: 0; }
  .primary-nav .nav-mega__panel li a { font-family: var(--font-sans); font-size: 0.95rem; padding: 0.5rem 0.5rem; }
  .primary-nav .nav-mega__h { font-family: var(--font-sans); margin-bottom: 0.4rem; }
  .nav-mega__covers { max-width: 280px; }
  .primary-nav .nav-mega__shop { font-family: var(--font-sans); font-size: 0.85rem; }
  .primary-nav .nav-mega__more { font-family: var(--font-sans); font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) { .nav-mega__covers img { transition: none; } }

/* Homepage "Where are you right now?" paths (option C, 23 Oct 2026): three numbered steps on one line, men and partners
   alongside as "At every stage"; and the ebook shop strip (option B, 22 Oct 2026). */
.journey { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.journey__line { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.journey__line::before { content: ""; position: absolute; top: 18px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, var(--rose-light) 0 8px, transparent 8px 14px); }
.journey__stage { position: relative; display: grid; gap: 0.6rem; align-content: start; }
.journey__dot { position: relative; z-index: 1; justify-self: center; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--rose-ink); color: var(--white); font: 600 1rem var(--font-serif); box-shadow: 0 0 0 6px var(--ivory); }
.journey__stage img, .journey__side img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.journey__stage img { border-radius: var(--panel-radius); }
.journey h3 { margin: 0.2rem 0 0; font: 500 1.3rem/1.2 var(--font-serif); color: var(--teal-ink); }
.journey ul { list-style: none; margin: 0; padding: 0; display: grid; }
.journey li a { display: block; padding: 0.5rem 0; border-top: 1px solid var(--line); font-weight: 600; color: var(--teal); text-decoration: none; }
.journey li a:hover, .journey li a:focus-visible { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }
.journey__side { margin-top: 48px; overflow: hidden; border-radius: var(--panel-radius); background: var(--teal-deep); color: var(--white); }
.journey__side > div { padding: 1rem 1.1rem 1.1rem; }
.journey__kicker { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-light); }
.journey__side h3 { color: var(--white); }
.journey__side li a { color: var(--white); border-top-color: rgb(255 255 255 / 0.2); }
.journey__side li a:hover, .journey__side li a:focus-visible { color: var(--rose-light); }
@media (max-width: 1000px) { .journey { grid-template-columns: minmax(0, 1fr); } .journey__side { margin-top: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } .journey__side img { height: 100%; } }
@media (max-width: 640px) { .journey__line { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } .journey__line::before { top: 0; bottom: 0; left: 18px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--rose-light) 0 8px, transparent 8px 14px); } .journey__stage { padding-left: 54px; } .journey__dot { position: absolute; left: 0; top: 0; } .journey__side { grid-template-columns: minmax(0, 1fr); } .journey__side img { height: auto; } }
/* Homepage ebook strip (option D, 24 Oct 2026): the set of four first, then each book and its price */
.home-shop { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; padding: 2.5rem 3rem; background: radial-gradient(120% 120% at 20% 30%, #2f6b6b, var(--teal-ink) 65%); color: var(--ivory); border-radius: var(--panel-radius); overflow: hidden; }
.home-shop h2 { color: var(--ivory); margin: 0.4rem 0; }
.home-shop p { color: #dfe9e5; max-width: 34rem; }
.home-shop .eyebrow { color: var(--rose-light); }
.home-shop__covers { display: flex; justify-content: center; padding: 1rem 0; }
.home-shop__covers img { width: 30%; height: auto; box-shadow: 0 18px 36px rgb(0 0 0 / 0.4); border-radius: 3px var(--picture-radius) var(--picture-radius) 3px; position: relative; }
.home-shop__covers img + img { margin-left: -9%; }
.home-shop__covers img:nth-child(1) { transform: rotate(-7deg) translateY(10px); }
.home-shop__covers img:nth-child(2) { transform: rotate(-2deg); z-index: 1; }
.home-shop__covers img:nth-child(3) { transform: rotate(3deg); z-index: 2; }
.home-shop__covers img:nth-child(4) { transform: rotate(8deg) translateY(12px); z-index: 3; }
.home-shop__price { font-size: 1.05rem; }
.home-shop__price strong { font: 600 1.9rem var(--font-serif); color: var(--white); margin-right: 0.3rem; }
.home-shop__books { list-style: none; margin: 1.3rem 0 0.9rem; padding: 0; display: grid; border-top: 1px solid rgb(255 255 255 / 0.18); }
.home-shop__books a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid rgb(255 255 255 / 0.12); color: #dfe9e5; font-size: 0.9rem; text-decoration: none; }
.home-shop__books a:hover, .home-shop__books a:focus-visible { color: var(--white); }
.home-shop__books span { font-weight: 700; color: var(--white); white-space: nowrap; }
.home-shop__link { color: var(--rose-light); font-weight: 600; font-size: 0.9rem; }
.home-shop__link:hover { color: var(--ivory); }
@media (max-width: 900px) { .home-shop { grid-template-columns: minmax(0, 1fr); padding: 2rem 1.25rem; gap: 1rem; } }

/* ---------- Free guide page (22 Oct 2026, option B): a sample page beside the sign-up, the other nine locked below ---------- */
.fg-hero { background: var(--sand-soft); }
.fg-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.fg-hero__copy { display: grid; gap: 1.1rem; justify-items: start; }
.fg-hero__copy h1 { margin: 0.4rem 0 0; font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); line-height: 1; }
.fg-hero__copy h1 em { color: var(--rose-ink); }
.fg-hero__copy .lead { margin: 0; }
.fg-hero__copy .card { width: 100%; }
.fg-sample { position: relative; margin: 0; }
.fg-sample__tag { position: absolute; z-index: 1; top: -0.9rem; left: 1.5rem; padding: 0.35rem 0.8rem; background: var(--teal); color: var(--white); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.fg-page { display: grid; gap: 0.8rem; justify-items: start; padding: 2.6rem 2.4rem 2.2rem; background: var(--white); box-shadow: 0 2px 4px rgb(0 0 0 / 0.04), 0 30px 60px -28px rgb(23 59 59 / 0.4); transform: rotate(1.2deg); }
.fg-page__kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-ink); }
.fg-page img { width: 100%; height: auto; max-height: 220px; object-fit: contain; padding: 1rem; border-radius: var(--picture-radius); background: var(--ivory); }
.fg-page h2 { margin: 0.3rem 0 0; font-size: var(--step-3); }
.fg-page p { margin: 0; color: var(--charcoal); }
.fg-page .fg-page__note { padding: 0.7rem 0.9rem; border: 2px dashed var(--rose); font-size: 0.92rem; font-weight: 600; color: var(--rose-ink-deep); }
.fg-rest { list-style: none; margin: 0 0 3rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
.fg-rest__item { position: relative; display: grid; grid-template-columns: 1.6rem 52px minmax(0, 1fr); gap: 0.8rem; align-items: center; padding: 0.8rem 2.6rem 0.8rem 1rem; border-radius: var(--panel-radius); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); }
.fg-rest__n { font: 500 1.05rem var(--font-serif); color: var(--rose-ink); }
.fg-rest__item img { width: 52px; height: 52px; object-fit: contain; padding: 4px; border-radius: 50%; background: var(--white); }
.fg-rest__title { font: 500 1rem/1.3 var(--font-serif); color: var(--teal-ink); }
.fg-rest__lock { position: absolute; right: 1rem; top: 50%; width: 14px; height: 11px; margin-top: -3px; border-radius: 2px; background: var(--sage); }
.fg-rest__lock::before { content: ''; position: absolute; left: 2px; top: -8px; width: 10px; height: 10px; box-sizing: border-box; border: 2px solid var(--sage); border-bottom: 0; border-radius: 6px 6px 0 0; }
@media (max-width: 900px) {
  .fg-hero__grid, .fg-rest { grid-template-columns: minmax(0, 1fr); }
  .fg-page { transform: none; padding: 2.2rem 1.4rem 1.6rem; }
}

/* ---------- The Fertility Guide (22 Oct 2026, option B): the reading path, then real pages from the drafts ---------- */
.gpath { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.gpath__line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; position: relative; }
.gpath__line::before { content: ''; position: absolute; left: 12%; right: 12%; top: 38%; border-top: 2px dashed var(--rose); }
.gpath__stop { position: relative; height: 100%; display: grid; gap: 0.35rem; justify-items: center; align-content: start; padding: 1.2rem 1rem 1.3rem; border-radius: var(--panel-radius); text-align: center; text-decoration: none; color: inherit; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.gpath__stop:hover, .gpath__stop:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow); }
.gpath__stop--rose { background: var(--rose-soft); }
.gpath__stop--sage { background: var(--sage-soft); }
.gpath__stop--sand { background: var(--sand-soft); }
.gpath__stop--teal { background: #e7eeec; box-shadow: inset 0 0 0 2px var(--teal); }
.gpath__stop img { width: 120px; height: auto; margin-bottom: 0.6rem; box-shadow: 0 16px 26px -14px rgb(23 59 59 / 0.55); }
.gpath__n { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink); }
.gpath__stop b { font: 500 1.2rem var(--font-serif); color: var(--teal-ink); }
.gpath__stop > span:last-child { font-size: 0.86rem; color: var(--muted); }
.gpath__side { display: grid; gap: 0.6rem; }
.gpath__or { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; color: var(--teal); }
.glook__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
.glook__group { scroll-margin-top: 6rem; display: grid; gap: 1rem; align-content: start; }
.glook__book { margin: 0; font-size: 0.88rem; color: var(--muted); }
.glook__book b { display: block; font: 500 1.2rem var(--font-serif); color: var(--teal-ink); }
.glook__pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
.glook__pages figure { margin: 0; display: grid; gap: 0.45rem; }
.glook__pages a { display: block; }
.glook__pages img { display: block; width: 100%; height: auto; background: var(--white); box-shadow: 0 18px 36px -22px rgb(23 59 59 / 0.5), 0 0 0 1px rgb(0 0 0 / 0.04); }
.glook__pages figcaption { font-size: 0.76rem; color: var(--muted); }
.glook__note { margin: 0; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 960px) {
  .gpath, .gpath__line, .glook__groups { grid-template-columns: minmax(0, 1fr); }
  .gpath__line::before { display: none; }
}
@media (max-width: 699px) { .ebook__cover img { max-width: 190px; margin-inline: auto; } .gpath__stop img { width: 96px; } }

/* ---------- Shop (22 Oct 2026, option A): one shelf, each book once ---------- */
.shop-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.shop-book { display: grid; gap: 0.45rem; align-content: start; padding: 1.4rem 1.3rem; border-radius: var(--panel-radius); }
.shop-book--rose { background: var(--rose-soft); }
.shop-book--sage { background: var(--sage-soft); }
.shop-book--sand { background: var(--sand-soft); }
.shop-book--teal { background: #e7eeec; }
.shop-book__cover img { display: block; width: 72%; height: auto; margin: 0 auto 0.9rem; box-shadow: 0 22px 34px -18px rgb(23 59 59 / 0.55); transition: transform 0.3s var(--ease); }
.shop-book__cover:hover img, .shop-book__cover:focus-visible img { transform: translateY(-5px) rotate(-1.5deg); }
.shop-book h3 { margin: 0; font-size: var(--step-2); }
.shop-book h3 a { color: inherit; text-decoration: none; }
.shop-book__who { margin: 0; font-family: var(--font-serif); font-style: italic; color: var(--teal-ink); }
.shop-book .shop-buy { margin-top: 0.5rem; }
.shop-book__see { font-size: 0.85rem; font-weight: 700; color: var(--teal); text-decoration: none; }
.shop-book__see:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px) { .shop-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .shop-shelf { grid-template-columns: minmax(0, 1fr); } .shop-book__cover img { width: 46%; } }
@media (prefers-reduced-motion: reduce) { .shop-book__cover img { transition: none; } }

/* ---------- Resources (22 Oct 2026, option C): flip cards to practise the words ---------- */
.res-hero { background: radial-gradient(120% 90% at 85% 20%, #2f6b6b, var(--teal-deep) 60%, var(--teal-ink)); color: var(--white); padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.res-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
.res-hero__copy { display: grid; gap: 1rem; justify-items: start; }
.res-hero .breadcrumb, .res-hero .breadcrumb a { color: rgb(255 255 255 / 0.78); }
.res-hero h1 { margin: 0; color: var(--white); font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; }
.res-hero .lead { margin: 0; color: rgb(255 255 255 / 0.86); }
.res-hero__how { margin: 0; font-weight: 700; color: var(--rose-light); }
.word-day { display: grid; gap: 0.6rem; justify-items: center; align-content: center; min-height: 260px; padding: clamp(1.6rem, 1rem + 2vw, 2.4rem); border-radius: var(--panel-radius); background: var(--white); color: var(--teal-ink); text-align: center; box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.55), 10px 10px 0 -2px rgb(255 255 255 / 0.25), 20px 20px 0 -4px rgb(255 255 255 / 0.12); }
.word-day__kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-ink); }
.word-day__term { margin: 0; font: 500 clamp(1.9rem, 1.3rem + 2vw, 2.8rem)/1.1 var(--font-serif); }
.word-day__back { display: grid; gap: 0.5rem; justify-items: center; }
.word-day__def { margin: 0; color: var(--charcoal); max-width: 42ch; }
.word-day__link { display: inline-block; padding-block: 0.3rem; font-size: 0.85rem; font-weight: 700; color: var(--teal); text-decoration: none; }
.word-day__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.word-day__flip { margin-top: 0.4rem; padding: 0.5rem 1rem; border: 0; border-radius: 999px; background: var(--sage-soft); color: var(--teal-ink); font: 700 0.85rem var(--font-sans); cursor: pointer; }
.word-day.is-card:not(.is-flipped) .word-day__back { display: none; }
.fc-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.fc-bar[hidden] { display: none; }
.fc-score { margin: 0; color: var(--teal); }
.fc-reset { margin-left: 0.6rem; padding: 0; border: 0; background: none; font: inherit; font-size: 0.85rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.flashcards { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.flashcard { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.4rem 1.4rem 1.2rem; border-radius: var(--panel-radius); }
.flashcard[hidden] { display: none; }
.flashcard--rose { background: var(--rose-soft); }
.flashcard--sage { background: var(--sage-soft); }
.flashcard--sand { background: var(--sand-soft); }
.flashcard dt { font: 500 1.35rem/1.2 var(--font-serif); color: var(--teal-ink); }
.flashcard dd { display: flex; flex-direction: column; gap: 0.8rem; flex: 1; margin: 0; }
.flashcard dd p { margin: 0; color: #3f4848; font-size: 0.93rem; }
.flashcard__topic { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; font-size: 0.78rem; font-weight: 700; color: var(--teal); text-decoration: none; }
.flashcard__topic img { width: 1.9rem; height: 1.9rem; padding: 0.15rem; border-radius: 50%; background: var(--white); }
.flashcard__topic:hover { text-decoration: underline; text-underline-offset: 3px; }
.flashcard__flip { padding: 0; border: 0; background: none; font: 500 0.78rem var(--font-sans); color: var(--muted); cursor: pointer; }
/* With JavaScript: the word on the front, the meaning on the back */
.is-deck .flashcards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.is-deck .flashcard { min-height: 170px; justify-content: center; align-items: center; text-align: center; cursor: pointer; box-shadow: var(--shadow-s); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.is-deck .flashcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.is-deck .flashcard:not(.is-flipped) dd { display: none; }
.is-deck .flashcard.is-flipped { justify-content: flex-start; align-items: flex-start; text-align: left; background: var(--white); box-shadow: inset 0 0 0 2px var(--teal), var(--shadow); }
.is-deck .flashcard.is-flipped dt { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-ink); }
.is-deck .flashcard.is-flipped .flashcard__flip { align-self: flex-start; }
.fc-more { margin: 1.5rem 0 0; text-align: center; }
.res-ws { margin-top: 0; }
@media (max-width: 1000px) { .is-deck .flashcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .res-hero__grid { grid-template-columns: minmax(0, 1fr); } .flashcards, .is-deck .flashcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .flashcards { grid-template-columns: minmax(0, 1fr); } .is-deck .flashcard { min-height: 140px; padding: 1rem; } .is-deck .flashcard dt { font-size: 1.1rem; } }
@media (prefers-reduced-motion: reduce) { .is-deck .flashcard { transition: none; } }

/* ---------- Privacy (option C) and the medical disclaimer (option A), 23 Oct 2026: a dark top, then the full text on paper ---------- */
.priv-hero { background: radial-gradient(120% 90% at 85% 20%, #2f6b6b, var(--teal-deep) 60%, var(--teal-ink)); color: var(--white); padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.priv-hero .container { display: grid; gap: 0.9rem; justify-items: start; }
.priv-hero .breadcrumb, .priv-hero .breadcrumb a { color: rgb(255 255 255 / 0.78); }
.priv-hero .eyebrow { color: var(--rose-light); }
.priv-hero .eyebrow::before { background: var(--rose-light); }
.priv-hero h1 { margin: 0; color: var(--white); font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); line-height: 1; }
.priv-hero .lead { margin: 0; color: rgb(255 255 255 / 0.86); }
.priv-promises { list-style: none; width: 100%; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.priv-promises li { display: grid; gap: 0.4rem; align-content: start; padding: 1.4rem; border-radius: var(--panel-radius); background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); }
.priv-promises__tick { width: 44px; height: 44px; margin-bottom: 0.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--rose-light); color: var(--teal-ink); }
.priv-promises__tick svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.priv-promises b { font: 500 var(--step-1) var(--font-serif); }
.priv-promises li > span:last-child { font-size: 0.9rem; color: rgb(255 255 255 / 0.8); }
.doc-paper .priv-details { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-ink); }
@media (max-width: 800px) { .priv-promises { grid-template-columns: minmax(0, 1fr); } }
.disc-key { margin: 1.4rem 0 0; max-width: 820px; padding: 1.4rem 1.6rem; border-left: 4px solid var(--rose-light); background: rgb(255 255 255 / 0.08); }
.disc-key p { margin: 0; font: italic 400 var(--step-1)/1.5 var(--font-serif); color: var(--white); }

/* ---------- Thank-you and 404 (23 Oct 2026, option C): the message, then every topic to pick from ---------- */
.pick-hero { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); background: linear-gradient(180deg, var(--rose-soft), var(--ivory)); }
.pick-card { max-width: 760px; display: grid; gap: 1rem; justify-items: center; text-align: center; }
.pick-card h1 { margin: 0; font-size: clamp(2.3rem, 1.5rem + 3vw, 3.8rem); line-height: 1.05; letter-spacing: -0.03em; }
.pick-card .lead { margin: 0; }
.pick-card .pick-next { justify-content: center; margin-top: 0.3rem; } /* the thank-you page's one next step (11 Nov 2026) */
.pick-tick { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: var(--white); }
.pick-tick svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pick-404 { font: 500 clamp(4.5rem, 3rem + 6vw, 8rem)/0.9 var(--font-serif); letter-spacing: -0.04em; color: var(--rose); }
.pick-search { width: min(100%, 560px); }
.topic-pick__h { margin: 0 0 1.4rem; text-align: center; font-size: var(--step-3); }
.topic-pick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.9rem; }
.topic-pick a { height: 100%; display: grid; gap: 0.5rem; justify-items: center; align-content: start; padding: 1rem 0.6rem; border-radius: var(--panel-radius); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); text-align: center; text-decoration: none; font: 500 0.98rem/1.25 var(--font-serif); color: var(--teal-ink); transition: transform 0.2s, box-shadow 0.2s; }
.topic-pick a:hover, .topic-pick a:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--teal), var(--shadow-s); }
.topic-pick img { width: 64px; height: 64px; object-fit: contain; }
.topic-pick .upnext__tag { justify-self: center; margin-top: 0; font-family: var(--font-sans); font-style: normal; } /* Free / In the package (10 Nov 2026) */
@media (max-width: 900px) { .topic-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .topic-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .topic-pick a { transition: none; } }

/* ---------- Topic pages (23 Oct 2026, option A): Kara's summary first, then a picture card per section ---------- */
.topic-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.6rem 0; align-items: start; }
/* 11 Nov 2026: each box is as tall as its own words (the takeaway used to stretch and sit half empty), and beside
   a long "Kara explains" the takeaway stays in view while you read. */
@media (min-width: 761px) { .topic-summary .box--takeaway { position: sticky; top: 6.5rem; } }
.prose .topic-summary .box { margin: 0; }
.prose .topic-summary .box:has(> .box__label--kara) { padding-left: clamp(1.25rem, 1rem + 1vw, 1.9rem); padding-top: 4.6rem; }
.prose .topic-summary .box:has(> .box__label--kara)::before { top: 1.1rem; left: clamp(1.25rem, 1rem + 1vw, 1.9rem); }
.topic-stages { margin: 0 0 2.5rem; }
.prose .topic-stages__h { margin: 0 0 0.7rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-ink); }
.prose .topic-stages ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.7rem; }
.prose .topic-stages ol:has(> li:nth-child(3):last-child), .prose .topic-stages ol:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.prose .topic-stages li { margin: 0; padding: 0; }
.prose .topic-stages li::before { content: none; }
.topic-stages a { position: relative; height: 100%; display: grid; gap: 0.4rem; align-content: start; padding: 0.5rem 0.5rem 0.7rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow 0.2s, transform 0.2s; }
.topic-stages a:hover, .topic-stages a:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--teal), var(--shadow-s); }
.topic-stages__pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--picture-radius); background: var(--ivory); }
.topic-stages__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.topic-stages__pic--contain img { object-fit: contain; padding: 4px; }
.topic-stages__n { position: absolute; top: 0.9rem; left: 0.9rem; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: var(--white); font-size: 0.78rem; font-weight: 700; }
.topic-stages__t { font: 500 0.92rem/1.25 var(--font-serif); color: var(--teal-ink); }
@media (max-width: 760px) { .topic-summary { grid-template-columns: minmax(0, 1fr); } .prose .topic-stages ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .topic-stages a { transition: none; } }

/* ---------- Male guides (23 Oct 2026, A + B): picture cards with each chapter's key idea, before chapter 1 ---------- */
.male-keys { margin: 1.4rem 0 2.8rem; padding: clamp(1rem, 0.8rem + 1vw, 1.5rem); border-radius: var(--panel-radius); background: var(--teal); }
.prose .male-keys__h { margin: 0 0 1rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-light); }
.prose .male-keys__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.prose .male-keys__list li { margin: 0; padding: 0; }
.prose .male-keys__list li::before { content: none; }
.prose .male-keys__list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.male-key { height: 100%; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--panel-radius); background: var(--white); text-decoration: none; color: inherit; transition: transform 0.2s; }
.male-key:hover, .male-key:focus-visible { transform: translateY(-2px); }
.male-key__pic { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ivory); }
.male-key__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.male-key__pic--contain img { object-fit: contain; padding: 0.6rem; }
.male-key__body { display: grid; gap: 0.45rem; align-content: start; justify-items: start; padding: 1rem 1.15rem 1.15rem; }
.male-key__n { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink); }
.male-key__title { font: 500 1.1rem/1.25 var(--font-serif); color: var(--teal-ink); }
.male-key__idea { font: italic 400 0.98rem/1.45 var(--font-serif); color: var(--charcoal); }
.male-key__go { margin-top: 0.2rem; font-size: 0.82rem; font-weight: 700; color: var(--teal); }
.prose .male-keys__list li:last-child:nth-child(odd) .male-key { grid-template-rows: none; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.prose .male-keys__list li:last-child:nth-child(odd) .male-key__pic { aspect-ratio: auto; min-height: 100%; }
@media (max-width: 760px) {
  .prose .male-keys__list { grid-template-columns: minmax(0, 1fr); }
  .prose .male-keys__list li:last-child:nth-child(odd) .male-key { grid-template-columns: none; grid-template-rows: auto 1fr; }
  .prose .male-keys__list li:last-child:nth-child(odd) .male-key__pic { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) { .male-key { transition: none; } }

/* ---------- Female Fertility dial page (23 Oct 2026, option A): the five topics as picture cards under the dial ---------- */
.female-cards-sec { background: var(--white); padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.female-cards__h { margin: 0 0 1rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-ink); }
.female-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.female-card { height: 100%; display: grid; gap: 0.4rem; align-content: start; overflow: hidden; padding-bottom: 1rem; border-radius: var(--panel-radius); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s; }
.female-card:hover, .female-card:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--teal), var(--shadow); }
.female-card.is-here { background: var(--rose-soft); box-shadow: inset 0 0 0 2px var(--rose-ink); }
.female-card__pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 0.4rem; }
.female-card__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.female-card__meta, .female-card__title, .female-card__sum, .female-card__go { margin-inline: 1rem; }
.female-card__meta { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-ink); }
.female-card__title { font: 500 1.12rem/1.2 var(--font-serif); color: var(--teal-ink); }
.female-card__sum { font-size: 0.86rem; line-height: 1.45; color: var(--muted); }
.female-card__go { margin-top: 0.3rem; font-size: 0.82rem; font-weight: 700; color: var(--teal); }
.female-card.is-here .female-card__go { color: var(--rose-ink); }
@media (max-width: 1000px) { .female-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .female-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .female-cards > li:last-child:nth-child(odd) { grid-column: 1 / -1; } .female-card__sum { display: none; } }
@media (prefers-reduced-motion: reduce) { .female-card { transition: none; } }

/* ---------- Male Fertility landing (23 Oct 2026, option A): the four guides as picture cards, in the male colours ---------- */
.male-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.male-cards .female-card__meta { color: var(--teal); }
.male-cards .female-card.is-here { background: var(--sage-soft); box-shadow: inset 0 0 0 2px var(--teal); }
.male-cards .female-card.is-here .female-card__go { color: var(--teal); }
@media (max-width: 1000px) { .male-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Homepage dial option C (23 Oct 2026): the twelve dial topics as numbered picture tiles under the hero */
.dial-tiles-sec { background: var(--white); padding-block: clamp(2.2rem, 2rem + 1.5vw, 3rem); }
.dial-tiles__h { margin: 0 0 1rem; font: 800 0.72rem var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-ink); }
.dial-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.8rem; }
.dial-tiles a { position: relative; height: 100%; display: grid; gap: 0.4rem; justify-items: center; align-content: start; padding: 0.9rem 0.5rem; border-radius: var(--panel-radius); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); text-align: center; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.dial-tiles a:hover, .dial-tiles a:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--teal), var(--shadow-s); }
.dial-tiles__n { position: absolute; top: 0.5rem; left: 0.6rem; font: 600 0.8rem var(--font-serif); color: var(--rose-ink); }
.dial-tiles img { width: 56px; height: 56px; object-fit: contain; }
.dial-tiles__t { font: 500 0.95rem/1.25 var(--font-serif); color: var(--teal-ink); }
@media (max-width: 900px) { .dial-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .dial-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .dial-tiles a { transition: none; } .dial-tiles a:hover { transform: none; } }

/* Kara's email address (23 Oct 2026): Contact page box and footer line */
.contact-email a { font-weight: 700; color: var(--teal); overflow-wrap: anywhere; }
.footer-email { margin-top: 0.6rem; }
.footer-email a { color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.footer-email a:hover, .footer-email a:focus-visible { color: var(--rose-light); }

/* Ebooks page option C (24 Oct 2026): the four books compared in one table */
.gcompare { overflow-x: auto; border-radius: var(--panel-radius); }
.gcompare__table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; }
.gcompare__table thead th { scroll-margin-top: 6rem; padding: 0 0.8rem 1rem; text-align: left; vertical-align: bottom; font: 500 1.15rem/1.25 var(--font-serif); color: var(--teal-ink); }
.gcompare__table thead img { display: block; width: 96px; height: auto; margin-bottom: 0.7rem; box-shadow: var(--shadow-s); }
.gcompare__table thead span { display: block; margin-bottom: 0.2rem; font: 800 0.66rem var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-ink); }
.gcompare__table tbody th { padding: 0.8rem; text-align: left; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.gcompare__table td { padding: 0.8rem; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--charcoal); vertical-align: top; }
.gcompare__table tbody tr:nth-child(odd) td { background: var(--ivory); }
.gcompare__note { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--muted); }
.gcompare__hint { display: none; margin: 0 0 0.6rem; font-size: 0.8rem; color: var(--muted); }
@media (max-width: 760px) {
  .gcompare__hint { display: block; }
  .gcompare__table { min-width: 640px; }
  .gcompare__table tbody th, .gcompare__table thead td { position: sticky; left: 0; z-index: 1; background: var(--white); box-shadow: 1px 0 0 var(--line); }
  .gcompare__table thead th { font-size: 1rem; }
  .gcompare__table thead img { width: 72px; }
}

/* Contact page option A (24 Oct 2026): what happens after Send, under the form */
.contact-next { list-style: none; margin: 1.4rem 0 0; padding: 1.2rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; border-top: 1px solid var(--line); }
.contact-next li { display: grid; gap: 0.25rem; align-content: start; padding: 0.9rem; border-radius: var(--panel-radius); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.84rem; line-height: 1.4; color: var(--muted); }
.contact-next span { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--teal); color: var(--white); font: 600 0.85rem var(--font-serif); }
.contact-next b { font: 500 1rem/1.25 var(--font-serif); color: var(--teal-ink); }
.contact-next a { color: var(--teal); font-weight: 700; }
@media (max-width: 700px) { .contact-next { grid-template-columns: minmax(0, 1fr); } }

/* 24 Oct 2026 (graphics audit) */
/* The Enlarge button sat over the sperm picture's "Acrosome" label: bottom-left, clear of the labels */
.male-figure__zoom { top: auto; bottom: 0.8rem; right: auto; left: 0.8rem; }
@media (max-width: 760px) { .male-figure__zoom { top: auto; bottom: 0.5rem; right: auto; left: calc(var(--gutter) + 0.5rem); } }
.male-figure--pair .male-figure__zoom { top: auto; bottom: 0.55rem; right: auto; left: 0.55rem; }
/* Labelled diagrams: the button goes under the picture instead of over a label (25 Oct 2026) */
.male-figure--diagram .male-figure__zoom { position: static; margin-top: 0.6rem; }

/* ---------- Motion pass (24 Oct 2026, graphics audit) ----------
   One rhythm for the whole site: 0.35 s hovers, 0.9 s reveals, all on --ease. Painted pictures wash in
   (fade, unblur, settle) once as they reach the screen; card groups follow each other by 70 ms.
   Nothing is hidden without JS, and a timer in main.js reveals anything the observer has missed. */
:root { --t-hover: 0.35s; --t-reveal: 0.9s; }
@media (prefers-reduced-motion: no-preference) {
  .js .paint-in { opacity: 0; filter: blur(6px) saturate(0.85); transform: scale(1.015); transition: opacity var(--t-reveal) var(--ease), filter 1.1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--stagger, 0s); }
  .js .paint-in.is-painted { opacity: 1; filter: none; transform: none; }
  .js .rise-in { opacity: 0; transform: translateY(14px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); transition-delay: var(--stagger, 0s); }
  .js .rise-in.is-painted { opacity: 1; transform: none; }
  .lightbox[open] { animation: lightbox-in 0.4s var(--ease); }
  .lightbox[open]::backdrop { animation: lightbox-fade 0.4s var(--ease); }
}
@keyframes lightbox-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes lightbox-fade { from { opacity: 0; } }

/* Teaching diagrams under topic sections (25 Oct 2026, src/data/teach-figures.js): a painted course
   figure on its own warm paper, full text width, with room above and below. */
.prose .teach { margin-block: 1.6rem 2.2rem; }
.prose .teach .diagram img { width: 100%; height: auto; padding: 0; border: 0; background: none; border-radius: var(--picture-radius); box-shadow: 0 1px 0 rgb(41 45 45 / 0.04), 0 10px 30px -18px rgb(40 93 93 / 0.35); }
.prose .teach figcaption { margin-top: 0.7rem; font-size: 0.92rem; line-height: 1.55; color: var(--muted); max-width: 62ch; }

/* Painting pass (25 Oct 2026): the glossy "pearl" gradients behind small icons become painted washes
   (public/images/wash, cut from one watercolour sheet), the video tiles sit on painted backdrops
   (public/images/thumbs), paintings lose their white mounts, and the background loops come to rest. */
.index__thumb, .card__icon, .upnext__icon, .area__box img, .steps-path__pic, .doc-hero__pic, .topic-hero__fig--icon { background: url('/images/wash/disc-rose.webp') center / cover no-repeat; }
.index__row:nth-child(3n + 2) .index__thumb, .card:nth-child(3n + 2) .card__icon, .upnext__list li:nth-child(3n + 2) .upnext__icon,
.area:nth-child(3n + 2) .area__box img, .steps-path__step:nth-child(3n + 2) .steps-path__pic { background: url('/images/wash/disc-sage.webp') center / cover no-repeat; }
.index__row:nth-child(3n) .index__thumb, .card:nth-child(3n) .card__icon, .upnext__list li:nth-child(3n) .upnext__icon,
.area:nth-child(3n) .area__box img, .steps-path__step:nth-child(3n) .steps-path__pic { background: url('/images/wash/disc-sand.webp') center / cover no-repeat; }
.card:nth-child(3n + 2) .card__icon, .card:nth-child(3n) .card__icon { box-shadow: none; }
.male-chapter__mark { background: none; } /* the painted marks carry their own wash */
.dial__orbit span::before { background: url('/images/wash/disc-rose.webp') center / cover no-repeat; box-shadow: none; }
.dial__orbit span:nth-child(3n + 2)::before { background: url('/images/wash/disc-sage.webp') center / cover no-repeat; box-shadow: none; }
.dial__orbit span:nth-child(3n)::before { background: url('/images/wash/disc-sand.webp') center / cover no-repeat; box-shadow: none; }
.dial__orbit--outer span:nth-child(odd)::before { background: url('/images/wash/disc-sage.webp') center / cover no-repeat; box-shadow: none; filter: saturate(1.3) brightness(0.8); }

.thumb { background: url('/images/thumbs/bg-teal.webp') center / cover no-repeat, var(--teal); }
.thumb--ivory { background: url('/images/thumbs/bg-ivory.webp') center / cover no-repeat, var(--ivory); }
.thumb--sage { background: url('/images/thumbs/bg-sage.webp') center / cover no-repeat, var(--sage); }
.thumb__art::before, .thumb--ivory .thumb__art::before, .thumb--sage .thumb__art::before { background: none; }

.topic-hero__fig:not(.topic-hero__fig--icon) { padding: 0; background: none; box-shadow: none; }
.topic-hero__fig:not(.topic-hero__fig--icon) img { border-radius: var(--picture-radius); }

@media (prefers-reduced-motion: no-preference) {
  .chip-float { animation-iteration-count: 3; }
  .dial__orbit { animation-iteration-count: 1; }
  .dial__orbit span::before { animation-iteration-count: 3; }
  .hero--dial .hero__bg img { animation-iteration-count: 2; }
  .egg-orbit__ring { animation-iteration-count: 1; }
  .egg-orbit__ring span svg { animation-iteration-count: 3; }
}
/* The dials' orbiting swimmers and eggs are painted sprites (views/partials/dial.ejs) */
.dial__orbit span > img { position: absolute; top: 0; left: 50%; width: calc(var(--cell, 15px) * 3.4); height: auto; transform: translate(-50%, -50%); }
.dial--eggs .dial__orbit span > img { width: calc(var(--cell, 15px) * 2.4); }

/* Terms of sale (option A, 25 Oct 2026): the ten sections listed beside the paper on a computer, folded at the top on a phone */
.terms-layout { display: grid; grid-template-columns: 250px minmax(0, 820px); gap: 2.4rem; justify-content: center; align-items: start; }
.terms-layout .doc-paper { margin: 0; }
.terms-layout .doc-paper h2 { scroll-margin-top: 7rem; }
.terms-side { position: sticky; top: 7rem; padding: 1.1rem 1.2rem; border-radius: var(--panel-radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.terms-side__h { margin: 0 0 0.5rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink); }
.terms-side ol, .terms-fold ol { list-style: none; margin: 0; padding: 0; display: grid; }
.terms-side a, .terms-fold a { display: flex; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid var(--line); color: var(--teal-ink); font: 500 0.95rem/1.3 var(--font-serif); text-decoration: none; }
.terms-side li:last-child a, .terms-fold li:last-child a { border-bottom: 0; }
.terms-side a:hover, .terms-side a:focus-visible, .terms-fold a:hover, .terms-fold a:focus-visible { color: var(--teal); text-decoration: underline; }
.terms-side small, .terms-fold small { min-width: 1.4rem; font: italic 600 0.8rem/1.6 var(--font-serif); color: var(--rose-ink); }
.terms-fold { display: none; margin: 0.4rem 0 1rem; border-radius: var(--panel-radius); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); }
.terms-fold > summary { padding: 0.8rem 1rem; font-weight: 700; color: var(--teal-ink); cursor: pointer; }
.terms-fold > summary span { float: right; font-weight: 500; font-size: 0.85rem; color: var(--muted); }
.terms-fold ol { padding: 0 1rem 0.6rem; }
@media (max-width: 960px) { .terms-layout { grid-template-columns: minmax(0, 1fr); } .terms-side { display: none; } .terms-fold { display: block; } }
@media print { .terms-side, .terms-fold { display: none; } .terms-layout { display: block; } }

/* Rounded corners, 8px everywhere (option A, 25 Oct 2026): the last square boxes and pictures.
   Book covers keep a nearly square spine and round the open edge. */
.male-review, .vguide__take, .shop-soon, .box__notes, .fg-page, .fg-page .fg-page__note, .shop-book__cover { border-radius: var(--panel-radius); }
.mk-collage__tile img, .course-band__stages img, .shop-samples img { border-radius: var(--picture-radius); }
img.shop-book__cover, .shop-book__cover img, .shop-row > a img, .shop-others__item img { border-radius: 3px var(--picture-radius) var(--picture-radius) 3px; }

/* Audit fixes (1 Nov 2026): a .btn link in the footer keeps its own colours (the course's "Get the free guide"
   was cream on cream), and form fields are 16px on phones so iPhones do not zoom in when you tap them */
.site-footer a.btn { color: var(--btn-fg); }
.site-footer a.btn:hover { text-decoration: none; }
@media (max-width: 760px) { input[type='search'], input[type='email'], input[type='text'], textarea, select { font-size: 16px; } }

/* The legal links along the bottom of the footer (1 Nov 2026) */
.footer-legal { flex-basis: 100%; order: 3; }
.footer-legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; }
.footer-legal a { color: inherit; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / 0.35); }
.footer-legal a:hover { color: var(--white); text-decoration-color: currentColor; }
@media (max-width: 560px) { .footer-legal a { display: inline-block; padding-block: 0.35rem; } }

/* ---------- Audit fixes, 6 Nov 2026 ---------- */
/* Manrope draws "(c)" as a copyright sign through a common ligature: "section 11(1)(c)" read as "11(1)©" */
body { font-variant-ligatures: no-common-ligatures; }
/* long addresses (the Information Regulator's email) wrap instead of running off a phone screen */
.doc-paper a, .prose a { overflow-wrap: anywhere; }
/* a mega menu panel never runs below the screen on a short laptop (the course's 25 modules at 1366x650) */
@media (min-width: 1181px) { .nav-mega__panel { max-height: calc(100dvh - 78px); overflow-y: auto; overscroll-behavior: contain; } }
/* the legal pages' "On this page" list scrolls on its own when it is taller than the screen (1024x768) */
@media (min-width: 961px) { .terms-side { max-height: calc(100vh - 7rem); overflow-y: auto; } }
/* small rose labels on soft tints reach AA contrast (4.18 to 4.44 before) */
.nav-new, .shop-kicker, .gpath__n { color: #8a4e49; }
/* phone tap targets of at least 40px: the footer legal row and the hero topic tabs */
@media (max-width: 560px) {
  .footer-legal a { padding-block: 0.6rem; }
  .dial-tabs__list [role='tab'] { min-height: 40px; }
}

/* Urgent help at a glance (7 Nov 2026, views/partials/urgent-help.ejs): painted icons beside the safety steps */
.urgent-help { margin: 1.4rem 0 1.9rem; padding: 1rem 1.1rem 1.1rem; border-radius: var(--panel-radius); background: var(--rose-soft); border-left: 4px solid var(--rose-ink); }
.urgent-help__h { margin: 0 0 0.7rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink-deep); }
.urgent-help__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem 1.2rem; margin: 0; padding: 0; list-style: none; }
.urgent-help__list li { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--charcoal); }
.urgent-help__list img { flex: none; width: 3.4rem; height: 3.4rem; border-radius: 50%; }
.urgent-help__list a { font-weight: 700; color: var(--rose-ink-deep); white-space: nowrap; }

/* ==========================================================================
   The Fertility with Kara Package (10 Nov 2026): /package, /consultations, /supplements, the members-only page,
   /my-package and the homepage bands. 8px corners (site tokens), brand colours only.
   ========================================================================== */
.header-signin {
  flex: none; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.95rem;
  border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 0.85rem; font-weight: 700; color: var(--teal-ink); text-decoration: none; transition: box-shadow 0.2s; white-space: nowrap;
}
.header-signin:hover { box-shadow: inset 0 0 0 1.5px var(--teal); }
.header-signin svg { width: 16px; height: 16px; }
@media (max-width: 1320px) {
  .header-signin { padding: 0; width: 42px; height: 42px; justify-content: center; }
  .header-signin span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 480px) { .header-signin { display: none; } }

.pkg-soon { color: var(--rose-ink-deep); }

/* The price card */
.pkg-card {
  display: grid; gap: 0.85rem; align-content: start; padding: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
  background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--teal);
  border-radius: var(--panel-radius); box-shadow: var(--shadow);
}
.pkg-card__kicker { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-ink-deep); }
.pkg-card__price { margin: 0; font-family: var(--font-serif); font-size: clamp(2.3rem, 1.8rem + 2vw, 3.1rem); line-height: 1; color: var(--teal-ink); }
.pkg-card__price small { font-family: var(--font-sans); font-size: 0.95rem; color: var(--muted); }
.pkg-card__usd { margin: -0.3rem 0 0.2rem; font-size: 0.88rem; color: var(--muted); }
.pkg-card__ticks li { font-size: 0.93rem; }
.pkg-card__btn { width: 100%; justify-content: center; margin-top: 0.4rem; }
.pkg-card__note, .pkg-card__signin { margin: 0.55rem 0 0; font-size: 0.85rem; color: var(--muted); }

/* Heroes */
.pkg-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); background: linear-gradient(160deg, var(--sage-soft), var(--ivory) 60%, var(--rose-soft)); }
.pkg-hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.pkg-hero__copy { display: grid; gap: 1.1rem; }
.pkg-hero__copy h1 { font-size: var(--step-4); line-height: 1.12; text-wrap: balance; }
.pkg-hero__facts { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.pkg-hero__facts li { display: grid; font-size: 0.85rem; color: var(--muted); }
.pkg-hero__facts b { font-family: var(--font-serif); font-size: var(--step-2); color: var(--teal-ink); line-height: 1.1; }
.pkg-hero__pic { margin: 0; }
.pkg-hero__pic img { display: block; width: 100%; height: auto; border-radius: var(--picture-radius); box-shadow: var(--shadow-l); }
.pkg-hero--mine { padding-block: clamp(2rem, 1.5rem + 3vw, 3.5rem); }

/* /package top (11 Nov 2026, Peter's second pick): option B "Kara invites you", Kara beside the headline and the
   price card on dark teal, then option D "Look inside each part", picture tabs with one panel per part. */
.pkg-invite { position: relative; isolation: isolate; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); background: var(--teal-deep) url(/images/bg/footer-teal.webp) center / cover; color: var(--white); }
.pkg-invite::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgb(29 70 70 / 0.5); } /* keeps the light labels readable over the paler parts of the watercolour */
@media (max-width: 700px) { .pkg-invite::before { background: rgb(29 70 70 / 0.72); } }
.pkg-invite__grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.2fr) minmax(280px, 0.85fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.pkg-invite__photo { margin: 0; }
.pkg-invite__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 999px 999px var(--picture-radius) var(--picture-radius); box-shadow: var(--shadow-l); }
.pkg-invite__photo figcaption { margin-top: 0.8rem; font-size: 0.85rem; color: var(--sage); text-align: center; }
.pkg-invite__photo .script-kara { margin-right: 0.25rem; font-size: 1.5rem; color: var(--rose-light); }
.pkg-invite__copy { display: grid; gap: 1rem; }
.pkg-invite__copy h1 { font-size: var(--step-4); line-height: 1.12; color: var(--white); text-wrap: balance; }
.pkg-invite__copy h1 em { color: var(--rose-light); }
.pkg-invite__copy .lead { color: var(--sage-soft); }
.pkg-invite__copy .eyebrow { color: var(--rose-light); }
.pkg-invite__copy .breadcrumb a, .pkg-invite__copy .breadcrumb span { color: var(--sage); }
.pkg-invite__facts { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.pkg-invite__facts li { display: grid; font-size: 0.85rem; color: var(--sage); }
.pkg-invite__facts b { font-family: var(--font-serif); font-size: var(--step-2); line-height: 1.1; color: var(--white); }
.pkg-invite .pkg-card { color: var(--charcoal); }
/* Look inside each part */
.pkg-look__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; margin-bottom: 1.2rem; }
.pkg-look__tabs[hidden] { display: none; }
.pkg-look__tabs [role="tab"] { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem; border: 1px solid var(--line); border-radius: var(--panel-radius); background: var(--white); color: var(--teal-ink); font: 600 0.92rem/1.3 var(--font-sans); text-align: left; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.pkg-look__tabs [role="tab"]:hover { border-color: var(--teal); }
.pkg-look__tabs [role="tab"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.pkg-look__tabs [role="tab"] > img { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: var(--picture-radius); }
.pkg-look__tabs .pkg-fan--tab { flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: var(--picture-radius); }
.pkg-fan--tab img { top: 14%; height: 72%; left: calc(4% + var(--i) * 17%); box-shadow: 0 2px 5px rgb(23 59 59 / 0.25); }
.pkg-look__tabs [role="tab"] b { display: block; font: italic 400 0.95rem var(--font-serif); color: var(--rose-ink); }
.pkg-look__tabs [aria-selected="true"] { background: var(--teal-ink); border-color: var(--teal-ink); color: var(--white); box-shadow: var(--shadow); }
.pkg-look__tabs [aria-selected="true"] b { color: var(--rose-light); }
.pkg-look__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; padding: clamp(1.3rem, 1rem + 1.5vw, 2.4rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); box-shadow: var(--shadow); }
.pkg-look__panel + .pkg-look__panel { margin-top: 1.2rem; } /* without JavaScript all four show */
.pkg-look__panel[hidden] { display: none; }
.pkg-look__panel:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.pkg-look__big { overflow: hidden; border-radius: var(--picture-radius); background: var(--sand-soft); }
.pkg-look__big > img, .pkg-look__big .pkg-fan { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pkg-look__big--course > img { aspect-ratio: 1; }
.pkg-look__text { display: grid; gap: 0.75rem; justify-items: start; }
.pkg-look__n { font: italic 400 1.3rem var(--font-serif); color: var(--rose-ink); }
.pkg-look__text h3 { font-size: var(--step-3); }
.pkg-look__text p { margin: 0; max-width: 52ch; color: var(--muted); }
.pkg-look__text .pkg-look__label { margin-top: 0.3rem; font-size: 0.85rem; font-weight: 700; color: var(--teal-ink); }
.pkg-look__stages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4rem; width: 100%; max-width: 420px; }
.pkg-look__stages img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: var(--shadow-s); }
.pkg-look__steps, .pkg-look__books { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; font-size: 0.93rem; }
.pkg-look__steps li { display: flex; align-items: center; gap: 0.6rem; color: var(--charcoal); }
.pkg-look__steps span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--teal); color: var(--white); font-size: 0.8rem; font-weight: 800; }
.pkg-look__books span { color: var(--muted); }
.pkg-look__topics { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.pkg-look__topics a { display: block; border-radius: 50%; transition: transform 0.2s var(--ease); }
.pkg-look__topics a:hover { transform: translateY(-2px); }
.pkg-look__topics img { display: block; width: 44px; height: 44px; border-radius: 50%; background: var(--sand-soft); box-shadow: var(--shadow-s); }
/* The four ebook covers fanned out */
.pkg-fan { position: relative; display: block; background: var(--sand-soft); }
.pkg-fan img:nth-child(2) { --i: 1; }
.pkg-fan img:nth-child(3) { --i: 2; }
.pkg-fan img:nth-child(4) { --i: 3; }
.pkg-fan img { --i: 0; position: absolute; top: 12%; left: calc(14% + var(--i) * 15%); width: auto; height: 76%; aspect-ratio: auto; object-fit: contain; border-radius: 3px; box-shadow: 0 8px 18px rgb(23 59 59 / 0.25); transform: rotate(calc((var(--i) - 1.5) * 6deg)); }
.pkg-fan--big img { top: 14%; height: 72%; left: calc(9% + var(--i) * 15%); }
.pkg-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.pkg-chips li { padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--sage-soft); color: var(--teal-ink); font-size: 0.8rem; font-weight: 700; }
.pkg-limits .box__label { display: flex; } /* the "Please note" label sits on its own line above the text (it ran into it) */
@media (max-width: 1100px) {
  .pkg-invite__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); }
  /* tablets: the price card spans the hero, the price on the left and what is in it on the right */
  .pkg-invite .pkg-card { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 1rem + 3vw, 3rem); }
  .pkg-invite .pkg-card > :not(.pkg-card__ticks) { grid-column: 1; }
  .pkg-invite .pkg-card__ticks { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; }
}
@media (max-width: 900px) {
  .pkg-look__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pkg-look__panel { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .pkg-invite__grid { grid-template-columns: 1fr; }
  .pkg-invite__photo { order: 2; width: min(60%, 220px); justify-self: center; }
  .pkg-invite .pkg-card { order: 3; grid-template-columns: 1fr; }
  .pkg-invite .pkg-card > :is(*, .pkg-card__ticks) { grid-column: auto; grid-row: auto; } /* :is() matches the specificity of the tablet rule */
}
@media (max-width: 380px) {
  .pkg-invite .pkg-invite__facts { grid-template-columns: repeat(2, max-content); gap: 0.7rem 2rem; }
}
@media (max-width: 480px) {
  .pkg-look__tabs [role="tab"] { flex-direction: column; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; }
  .pkg-look__tabs [role="tab"] > img, .pkg-look__tabs .pkg-fan--tab { width: 100%; height: 72px; }
  .pkg-fan--tab img { left: calc(14% + var(--i) * 17%); }
  .pkg-invite__facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0.6rem 1.1rem; }
}

/* What's inside */
.pkg-includes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(1rem, 0.6rem + 1.5vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.pkg-include { position: relative; display: grid; gap: 0.6rem; align-content: start; padding: 0 0 1.3rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); overflow: hidden; }
.pkg-include > :not(.pkg-include__pic) { margin-inline: 1.3rem; }
.pkg-include__pic { display: block; aspect-ratio: 3 / 2; background: var(--sand-soft); overflow: hidden; }
.pkg-include__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pkg-include--ebooks .pkg-include__pic img { object-fit: contain; padding: 0.8rem; }
.pkg-include__n { font-family: var(--font-serif); font-style: italic; color: var(--rose-ink); margin-top: 0.3rem; }
.pkg-include h3 { font-size: var(--step-1); }
.pkg-include p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.pkg-include--consult { border-color: var(--rose); }
.home-pkg__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: start; }
.pkg-includes--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pkg-includes--home .pkg-include__pic { aspect-ratio: 16 / 9; }
@media (max-width: 560px) { .pkg-includes--home { grid-template-columns: 1fr; } }

/* Who Kara is */
.pkg-kara { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(2rem, 1rem + 5vw, 5rem); align-items: center; }
.pkg-kara__photo { width: min(100%, 380px); justify-self: center; }
.pkg-kara__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--picture-radius); box-shadow: var(--shadow-l); }
.pkg-kara__role { color: var(--teal-ink); font-size: 0.95rem; }
.pkg-kara__lines { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; }
.pkg-kara__lines li { position: relative; padding-left: 1.4rem; color: var(--charcoal); }
.pkg-kara__lines li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--rose); }
.pkg-kara__skills { font-size: 0.93rem; color: var(--muted); }

/* What a consultation covers, and how it is arranged */
.pkg-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.pkg-topics li { padding: 1.2rem 1.3rem; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--sage); border-radius: var(--panel-radius); }
.pkg-topics h3 { font-size: var(--step-0); margin-bottom: 0.35rem; color: var(--teal-ink); }
.pkg-topics p { margin: 0; color: var(--muted); font-size: 0.93rem; }
.pkg-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; margin: 0 0 1.5rem; padding: 0; list-style: none; counter-reset: none; }
.pkg-steps li { display: grid; gap: 0.3rem; align-content: start; padding: 1.1rem 1.2rem; background: var(--sage-soft); border-radius: var(--panel-radius); color: var(--muted); font-size: 0.93rem; }
.pkg-steps li span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--teal); color: var(--white); font-weight: 800; }
.pkg-steps li b { color: var(--teal-ink); font-size: var(--step-0); }
.pkg-steps--small { grid-template-columns: 1fr; gap: 0.6rem; }
.pkg-limits { max-width: 72ch; }

/* The taster videos */
.pkg-taste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(1rem, 0.6rem + 1.5vw, 2rem); }
.pkg-taste__video h3 { margin-top: 0.6rem; }
.pkg-taste__more { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }

/* Closing band with the price card */
.pkg-end { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 380px); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; padding: clamp(1.5rem, 1rem + 2vw, 3rem); background: var(--sand-soft); border-radius: var(--panel-radius); }
.pkg-end h2 { font-size: var(--step-3); }

/* Consultations page */
.pkg-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(1rem, 0.6rem + 1.5vw, 2rem); align-items: start; }
.pkg-way { display: grid; gap: 0.9rem; padding: clamp(1.3rem, 1rem + 1vw, 2rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); }
.pkg-way--main { border-top: 4px solid var(--teal); box-shadow: var(--shadow); }
.pkg-way h3 { font-size: var(--step-2); }
.pkg-way p { margin: 0; color: var(--muted); }
.pkg-way .btn { justify-self: start; }
.consult-form-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.consult-kara { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
.consult-kara img { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; object-position: top; }
.consult-kara p { margin: 0; display: grid; font-size: 0.92rem; color: var(--muted); }
.consult-kara b { color: var(--teal-ink); }
.consult-card select { width: 100%; }

/* Homepage: the consultation and supplements bands */
.home-consult__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.home-consult__pic { margin: 0; }
.home-consult__pic img { display: block; width: 100%; height: auto; border-radius: var(--picture-radius); box-shadow: var(--shadow-l); }
.home-soon { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; padding: clamp(1.2rem, 1rem + 1.5vw, 2.2rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); }
.home-soon img { display: block; width: 100%; height: auto; border-radius: var(--picture-radius); }
.home-soon h2 { font-size: var(--step-3); }
.supplements-notify { margin-top: 0.6rem; }
/* 11 Nov 2026: in the narrow hero column the two-column box squeezed the email field to "you@exan" and broke
   the heading over four lines. Heading above, form full width below. */
.notify.supplements-notify { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.supplements-notify .notify__text h2 { font-size: var(--step-2); }

/* My package (members' home, upgraded 10 Nov 2026): a hero with the package facts and three first steps, then one
   compact card per part with a small picture and one button, then the ebook downloads */
.mine-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.mine-hero__copy { display: grid; gap: 0.9rem; justify-items: start; }
.mine-hero__copy h1 { font-size: var(--step-4); line-height: 1.12; text-wrap: balance; }
.mine-hero__copy .lead { margin: 0; overflow-wrap: anywhere; }
.mine-hero__facts { margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--teal) 18%, transparent); }
.mine-start { padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem); background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: var(--panel-radius); box-shadow: var(--shadow); }
.mine-start__h { margin: 0 0 0.9rem; font-size: var(--step-1); }
.mine-start__steps { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; counter-reset: mine-step; }
.mine-start__steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.75rem; counter-increment: mine-step; }
.mine-start__steps li::before { content: counter(mine-step); grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sage-soft); color: var(--teal-ink); font-family: var(--font-serif); font-weight: 700; }
.mine-start__steps b { font-size: 0.98rem; color: var(--teal-ink); }
.mine-start__steps span { font-size: var(--step--1); color: var(--muted); line-height: 1.5; }
.mine-main { padding-block: clamp(2rem, 1.4rem + 2.5vw, 3.75rem); }
.mine-main--white { background: var(--white); }
.mine-main__h { margin: 0 0 1.25rem; font-size: var(--step-3); }
.mine-main__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.5rem; margin-bottom: 1.25rem; }
.mine-main__head .mine-main__h { margin: 0; }
.mine-main__head p { margin: 0; }
.mine-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(0.9rem, 0.6rem + 1vw, 1.4rem); margin: 0; padding: 0; list-style: none; }
.mine-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 1rem; align-items: stretch; padding: 1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); box-shadow: var(--shadow-s); }
.mine-card > img { display: block; align-self: start; width: 104px; height: 104px; object-fit: cover; border-radius: var(--picture-radius); background: var(--sand-soft); }
.mine-card > img.mine-card__cover { object-fit: contain; padding: 6px; }
.mine-card > img.mine-card__still { object-position: left center; }
.mine-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; min-height: 104px; }
.mine-card h3 { margin: 0; font-size: var(--step-1); line-height: 1.25; }
.mine-card p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--muted); }
.mine-card .btn { margin-top: auto; }
.mine-card__body > :nth-last-child(2) { margin-bottom: 0.35rem; }
.mine-card--consult { border-top: 4px solid var(--rose); }
.mine-progress { display: grid; gap: 0.3rem; width: 100%; }
.mine-progress__bar { display: block; height: 6px; border-radius: 999px; background: var(--sage-soft); overflow: hidden; }
.mine-progress__bar i { display: block; height: 100%; width: 100%; background: var(--teal); transform-origin: left; transform: scaleX(var(--done, 0)); transition: transform 0.6s var(--ease); }
.mine-progress__text { font-size: var(--step--1); font-weight: 600; color: var(--teal-ink); }
.mine-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.mine-books li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0.9rem; align-items: start; padding: 0.9rem; background: var(--ivory); border: 1px solid var(--line); border-radius: var(--panel-radius); }
.mine-books img { width: 72px; height: auto; border-radius: 4px; box-shadow: var(--shadow-s); }
.mine-books__body { display: grid; gap: 0.3rem; justify-items: start; }
.mine-books__body h3 { margin: 0; font-size: var(--step-1); line-height: 1.3; }
.mine-books__body p { margin: 0; }
.mine-books__body .btn { margin-top: 0.3rem; }
.mine-books__label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-ink-deep); }
.mine-account { margin: 1.5rem 0 0; }
@media (max-width: 480px) {
  .mine-card { grid-template-columns: 76px minmax(0, 1fr); gap: 0.85rem; padding: 0.85rem; }
  .mine-card > img { width: 76px; height: 76px; }
  .mine-card__body { min-height: 0; }
  .mine-hero__facts { gap: 0.6rem 1.2rem; }
}

@media (max-width: 900px) {
  .pkg-hero__grid, .pkg-kara, .home-pkg__grid, .pkg-end, .consult-form-wrap, .home-consult__grid, .home-soon, .mine-hero { grid-template-columns: 1fr; }
  .pkg-kara__photo { width: min(70%, 300px); }
  .home-pkg__grid .pkg-card, .pkg-end .pkg-card { max-width: 480px; }
}

/* The videos page for visitors (10 Nov 2026): every picture shows, only the free episodes play */
.vfree { display: grid; gap: 0.8rem; margin-top: 1.2rem; background: var(--sage-soft); border-color: transparent; }
.vfree p { margin: 0; }
.vguide__tag { display: inline-block; margin-left: 0.5rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--teal); color: var(--white); font-size: 0.66rem; letter-spacing: 0.1em; vertical-align: 1px; }
.vguide__tag--lock { background: var(--sand-soft); color: var(--rose-ink-deep); box-shadow: inset 0 0 0 1px var(--sand); }
.vlock { position: relative; margin: 0 0 0.4rem; width: 100%; max-width: 760px; border-radius: var(--picture-radius); overflow: hidden; background: var(--teal-ink); }
.vlock img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(0.85); }
.vlock__veil { position: absolute; inset: 0 0 auto 0; display: grid; gap: 0.55rem; justify-items: start; padding: clamp(0.9rem, 0.6rem + 1.2vw, 1.5rem); background: linear-gradient(to bottom, rgb(23 59 59 / 0.92), rgb(23 59 59 / 0.75) 60%, rgb(23 59 59 / 0)); padding-bottom: 2.2rem; color: var(--white); }
.vlock__badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-light); }
.vlock__badge svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.vlock__text { font-size: 0.95rem; }
.vlock .btn-row { margin: 0; }
.btn--on-dark { --btn-fg: var(--white); --btn-bd: rgb(255 253 252 / 0.7); }
@media (max-width: 560px) { .vlock__text { display: none; } .vlock img { aspect-ratio: 4 / 3; } }

/* Homepage hero, option D (10 Nov 2026): Kara's story, credentials, the two ways in and the free Episode 1 */
.hero-d { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(3rem, 2rem + 3vw, 5rem); background: linear-gradient(165deg, var(--ivory), var(--ivory) 55%, var(--rose-soft)); }
.hero-d__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
.hero-d__copy { display: grid; gap: 1.1rem; }
.hero-d .hero-d__h { font-size: clamp(2.1rem, 1.5rem + 2.3vw, 3.2rem); line-height: 1.1; text-wrap: balance; }
.hero-d__creds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.hero-d__creds li { display: grid; align-content: start; padding: 0.7rem 0.8rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); font-size: 0.8rem; color: var(--muted); }
.hero-d__creds b { font-family: var(--font-serif); font-size: 1.15rem; color: var(--teal-ink); }
.hero-d__ways { display: grid; gap: 0.7rem; margin-top: 0.3rem; }
.hero-d__way { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; align-items: center; padding: 1rem 1.2rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); color: var(--muted); text-decoration: none; font-size: 0.92rem; transition: transform 0.2s, box-shadow 0.2s; }
.hero-d__way:hover { transform: translateY(-2px); box-shadow: var(--shadow-s); }
.hero-d__way b { color: var(--teal-ink); font-size: 1.08rem; }
.hero-d__way .arrow { grid-row: 1 / 3; grid-column: 2; font-size: 1.3rem; color: var(--teal); }
.hero-d__way--main { background: var(--teal); border-color: var(--teal); color: rgb(255 253 252 / 0.88); }
.hero-d__way--main b, .hero-d__way--main .arrow { color: var(--white); }
.hero-d__media { position: relative; padding-bottom: 5rem; }
.hero-d__photo { margin: 0 0 0 3rem; }
.hero-d__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--picture-radius); box-shadow: var(--shadow-l); }
.hero-d__video { position: absolute; left: 0; bottom: 0; width: 62%; display: grid; border-radius: var(--picture-radius); overflow: hidden; box-shadow: var(--shadow-l); border: 4px solid var(--white); background: var(--white); text-decoration: none; }
.hero-d__poster { position: relative; display: block; }
.hero-d__poster img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.hero-d__play { position: absolute; top: 50%; left: 50%; width: 3.4rem; height: 3.4rem; margin: -1.7rem 0 0 -1.7rem; border-radius: 50%; background: rgb(23 59 59 / 0.85); transition: transform 0.2s; }
.hero-d__play::after { content: ''; position: absolute; left: 1.3rem; top: 1rem; border-left: 1.1rem solid var(--white); border-block: 0.7rem solid transparent; }
.hero-d__video:hover .hero-d__play { transform: scale(1.08); }
.hero-d__cap { display: grid; padding: 0.6rem 0.8rem; font-size: 0.85rem; color: var(--muted); }
.hero-d__cap b { color: var(--teal-ink); }
@media (max-width: 960px) {
  .hero-d__grid { grid-template-columns: 1fr; }
  .hero-d__media { max-width: 520px; width: 100%; justify-self: center; }
}
@media (max-width: 560px) {
  .hero-d__creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-d__photo { margin-left: 1.5rem; }
  .hero-d__video { width: 72%; }
}

/* Homepage "What you get", option A "look inside" (11 Nov 2026): a picture row each for the ebooks, the library and the course */
.wyg { background: var(--ivory); }
.wyg__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; padding-block: clamp(1.6rem, 1rem + 2vw, 2.4rem); border-top: 1px solid var(--line); }
.wyg__row:first-child { border-top: 0; padding-top: 0.6rem; }
.wyg__row--flip .wyg__vis { order: 2; }
.wyg__vis { position: relative; min-width: 0; }
.wyg__txt { min-width: 0; }
.wyg__n { display: block; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-ink); }
.wyg__txt h3 { margin: 0.35rem 0 0.8rem; font-size: var(--step-3); line-height: 1.15; color: var(--teal-ink); }
.wyg__txt p { margin: 0 0 1rem; color: var(--muted); }
.wyg__stats { display: flex; gap: 1.6rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.wyg__stats li { display: grid; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.wyg__stats b { font-family: var(--font-serif); font-size: var(--step-3); font-weight: 500; line-height: 1; color: var(--teal); }
/* the books: two real sample pages behind the four covers */
.wyg__vis--books { height: clamp(300px, 22vw + 120px, 400px); }
.wyg__page { position: absolute; top: 0.9rem; width: 44%; margin: 0; }
.wyg__page img { width: 100%; height: auto; border-radius: 8px; background: var(--white); box-shadow: 0 14px 34px rgba(23, 59, 59, 0.18); }
.wyg__page--1 { left: 2%; transform: rotate(-5deg); }
.wyg__page--2 { right: 2%; transform: rotate(4deg); }
.wyg__page figcaption { position: absolute; top: -0.9rem; left: 0.6rem; padding: 0.2rem 0.55rem; font-size: 0.74rem; font-weight: 600; color: var(--teal-ink); background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.wyg__covers { position: absolute; left: 50%; bottom: 0; display: flex; width: 78%; transform: translateX(-50%); }
.wyg__covers img { width: 28%; height: auto; margin-left: -4%; border-radius: var(--panel-radius); box-shadow: 0 12px 28px rgba(23, 59, 59, 0.28); }
.wyg__covers img:first-child { margin-left: 0; transform: rotate(-6deg) translateY(10px); }
.wyg__covers img:nth-child(2) { transform: rotate(-2deg); }
.wyg__covers img:nth-child(3) { transform: rotate(2deg); }
.wyg__covers img:nth-child(4) { transform: rotate(6deg) translateY(10px); }
.wyg__books { display: grid; gap: 0.55rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.wyg__books li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; padding: 0.6rem 0.8rem; background: var(--white); border: 1px solid var(--line); border-radius: 8px; font-size: 0.86rem; color: var(--muted); }
.wyg__books img { width: 34px; height: auto; border-radius: 4px; }
.wyg__books b { display: block; font-size: 0.98rem; color: var(--teal-ink); }
.wyg__books em { font-style: normal; font-size: 0.8rem; font-weight: 700; color: var(--rose-ink); white-space: nowrap; }
/* the library: the twelve topic icons and three video posters */
.wyg__icons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.wyg__icons li { padding: 0.7rem 0.4rem; text-align: center; font-size: 0.78rem; font-weight: 600; line-height: 1.25; color: var(--teal-ink); background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.wyg__icons img { width: 52px; height: 52px; margin: 0 auto 0.35rem; }
.wyg__posters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.7rem; }
.wyg__posters img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
/* the course: three days of the first week and three lesson paintings */
.wyg__course { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.wyg__course li { position: relative; }
.wyg__course img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.wyg__course span { position: absolute; left: 0.4rem; bottom: 0.4rem; padding: 0.15rem 0.45rem; font-size: 0.72rem; font-weight: 600; color: var(--teal-ink); background: rgba(255, 253, 252, 0.94); border-radius: 8px; }
.wyg__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.wyg__chips li { padding: 0.35rem 0.7rem; font-size: 0.8rem; font-weight: 600; color: var(--teal-ink); background: var(--sage-soft); border-radius: 8px; }
/* the consultation strip */
.wyg__plus { display: flex; align-items: center; gap: 1.4rem; margin-top: 1.6rem; padding: 1.3rem 1.6rem; color: var(--ivory); background: var(--teal-ink); border-radius: var(--panel-radius); }
.wyg__plus img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: top; }
.wyg__plus p { flex: 1; margin: 0; }
.wyg__plus b { color: var(--white); }
.wyg__plus .btn-row { margin: 0; }
.wyg__plus .btn { --btn-bg: var(--rose-light); --btn-fg: var(--teal-ink); --btn-bd: var(--rose-light); }
@media (max-width: 900px) {
  .wyg__row { grid-template-columns: 1fr; }
  .wyg__row--flip .wyg__vis { order: 0; }
  .wyg__vis--books { max-width: 560px; width: 100%; margin-inline: auto; }
}
@media (max-width: 640px) {
  .wyg__icons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .wyg__books li { grid-template-columns: 30px minmax(0, 1fr); }
  .wyg__books em { grid-column: 2; }
  .wyg__stats { gap: 1.2rem; }
  .wyg__plus { flex-wrap: wrap; }
  .wyg__plus .btn-row { width: 100%; }
}

/* Homepage "Who is Kara?", option A (10 Nov 2026): her path, year by year, beside her photo */
.kpath__grid { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
.kpath__photo { margin: 0; }
.kpath__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--picture-radius); box-shadow: var(--shadow-l); }
.kpath__photo figcaption { display: grid; margin-top: 0.8rem; font-size: 0.88rem; color: var(--muted); }
.kpath__photo b { font-family: var(--font-serif); font-size: 1.3rem; color: var(--teal-ink); }
.kpath__line { position: relative; display: grid; gap: 0.9rem; margin: 0; padding: 0 0 0 2rem; list-style: none; }
.kpath__line::before { content: ''; position: absolute; left: 0.45rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--rose); }
.kpath__line li { position: relative; display: grid; grid-template-columns: 4rem minmax(0, 1fr); column-gap: 1rem; padding: 0.7rem 1rem; background: var(--ivory); border-radius: var(--panel-radius); }
.kpath__line li::before { content: ''; position: absolute; left: -1.85rem; top: 1.05rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px var(--white); }
.kpath__line li:last-child { background: var(--sage-soft); }
.kpath__y { grid-row: 1 / 3; font-family: var(--font-serif); font-size: 1.35rem; color: var(--rose-ink); }
.kpath__line b { color: var(--teal-ink); }
.kpath__line li > span:last-child { font-size: 0.88rem; color: var(--muted); }
.kpath__more { margin-top: 1.4rem; }
@media (max-width: 860px) {
  .kpath__grid { grid-template-columns: 1fr; }
  .kpath__photo { max-width: 280px; }
}
@media (max-width: 480px) { .kpath__line li { grid-template-columns: 3.2rem minmax(0, 1fr); column-gap: 0.7rem; } .kpath__y { font-size: 1.15rem; } }

/* Homepage consultations, option A (10 Nov 2026): what you can bring, beside the consultation painting */
.cbring { background: var(--ivory); }
.cbring__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: center; }
.cbring__pic { margin: 0; }
.cbring__pic img { display: block; width: 100%; height: auto; border-radius: var(--picture-radius); box-shadow: var(--shadow-l); }
.cbring__topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.cbring__topics li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 0.8rem; align-content: start; padding: 0.9rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); font-size: 0.87rem; color: var(--muted); }
.cbring__topics img { grid-row: 1 / 3; width: 48px; height: 48px; }
.cbring__topics b { color: var(--teal-ink); font-size: 0.98rem; }
.cbring__foot { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; margin-top: 1.8rem; padding: 1.1rem 1.4rem; background: var(--sage-soft); border-radius: var(--panel-radius); }
.cbring__foot p { margin: 0; max-width: 60ch; font-size: 0.9rem; color: var(--muted); }
.cbring__foot .btn-row { flex: none; margin: 0; }
@media (max-width: 960px) {
  .cbring__grid { grid-template-columns: 1fr; }
  .cbring__pic { max-width: 560px; }
  .cbring__foot { flex-wrap: wrap; }
}
@media (max-width: 600px) { .cbring__topics { grid-template-columns: 1fr; } }

/* Homepage topics, option B (10 Nov 2026): the 12 topics in three themes, Your Cycle marked free */
.tthemes { background: var(--ivory); }
.tthemes__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 0.6rem + 1.5vw, 1.4rem); align-items: start; }
.tthemes__col h3 { margin-bottom: 0.7rem; font-size: var(--step-1); color: var(--rose-ink); }
.tthemes__col ul { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.tthemes__topic { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0.7rem; align-items: start; padding: 0.8rem 2.1rem 0.8rem 0.8rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); font-size: 0.85rem; color: var(--muted); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.tthemes__topic:hover, .tthemes__topic:focus-visible { transform: translateY(-2px); border-color: var(--teal); box-shadow: var(--shadow-s); }
.tthemes__topic.is-free { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.tthemes__topic img { width: 44px; height: 44px; }
.tthemes__topic span { display: grid; }
.tthemes__topic b { color: var(--teal-ink); font-size: 1rem; }
.tthemes__free { position: absolute; top: 0.6rem; right: 0.6rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--teal); color: var(--white); font-style: normal; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.tthemes__lock { position: absolute; top: 0.7rem; right: 0.75rem; color: var(--rose-ink); }
.tthemes__lock svg { display: block; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 960px) { .tthemes__cols { grid-template-columns: 1fr; } }

/* Homepage "Where are you right now?", option B (10 Nov 2026): four stage cards */
.stages { background: var(--ivory); }
.stages__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.9rem, 0.6rem + 1vw, 1.2rem); }
.stages__card { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1.2rem; padding: 1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); }
.stages__pic { width: 100%; height: 100%; min-height: 200px; object-fit: cover; border-radius: var(--picture-radius); }
.stages__card > div { display: grid; gap: 0.5rem; align-content: start; }
.stages__card h3 { font-size: var(--step-1); }
.stages__free { margin: 0; font-size: 0.88rem; color: var(--teal); }
.stages__free b { color: var(--teal-ink); }
.stages__free a { color: var(--teal); }
.stages__list { display: grid; gap: 0.45rem; margin: 0.2rem 0 0; padding: 0; list-style: none; }
.stages__list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0.6rem; align-items: center; font-size: 0.86rem; }
.stages__list img { width: 26px; height: auto; border-radius: 2px; box-shadow: var(--shadow-s); }
.stages__list li > span:last-child { display: grid; }
.stages__list b { color: var(--rose-ink-deep); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
.stages__list a { color: var(--teal-ink); text-decoration: none; }
.stages__list a:hover { text-decoration: underline; }
.stages__ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sage-soft); color: var(--teal); font-size: 0.85rem; }
@media (max-width: 1000px) { .stages__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .stages__card { grid-template-columns: 1fr; } .stages__pic { min-height: 0; aspect-ratio: 3 / 2; height: auto; } }

/* Homepage "Inside the library", option A (10 Nov 2026): what every topic page gives you, beside the free Your Cycle page */
.tpeek { background: var(--white); }
.tpeek__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 1rem + 3vw, 3rem); align-items: center; }
.tpeek__parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.tpeek__parts li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); column-gap: 0.6rem; padding: 0.75rem 0.85rem; background: var(--ivory); border-radius: var(--panel-radius); font-size: 0.86rem; color: var(--muted); }
.tpeek__parts span { grid-row: 1 / 3; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--teal); color: var(--white); font-weight: 800; font-size: 0.8rem; }
.tpeek__parts b { color: var(--teal-ink); font-size: 0.98rem; }
.tpeek__page { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); overflow: hidden; box-shadow: var(--shadow-l); text-decoration: none; transition: transform 0.25s var(--ease); }
.tpeek__page:hover { transform: translateY(-3px); }
.tpeek__bar { display: flex; gap: 0.35rem; align-items: center; padding: 0.55rem 0.8rem; background: var(--ivory); border-bottom: 1px solid var(--line); }
.tpeek__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--sand); }
.tpeek__bar em { margin-left: 0.6rem; overflow: hidden; font-style: normal; font-size: 0.72rem; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.tpeek__page > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }
.tpeek__body { display: grid; gap: 0.5rem; padding: 1.1rem 1.3rem 1.4rem; }
.tpeek__title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 500; color: var(--teal-ink); }
.tpeek__sum { color: var(--muted); }
.tpeek__lines, .tpeek__box { display: grid; gap: 0.4rem; }
.tpeek__lines i, .tpeek__box i { display: block; height: 8px; border-radius: 999px; background: var(--line); }
.tpeek__lines i.s, .tpeek__box i.s { width: 60%; }
.tpeek__box { padding: 0.8rem; background: var(--sage-soft); border-radius: var(--panel-radius); }
.tpeek__box b { font-size: 0.75rem; color: var(--teal-ink); letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 900px) { .tpeek__grid { grid-template-columns: 1fr; } .tpeek__page { max-width: 520px; } }
@media (max-width: 520px) { .tpeek__parts { grid-template-columns: 1fr; } }

/* Homepage "Myths you will hear", option B (10 Nov 2026): six real myths from the topic pages */
.myths { background: var(--white); }
.myths__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.myths__grid li { display: grid; gap: 0.7rem; align-content: start; padding: 1.2rem; background: var(--ivory); border: 1px solid var(--line); border-radius: var(--panel-radius); }
.myths__grid p { display: grid; gap: 0.25rem; margin: 0; }
.myths__grid p > span { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.myths__myth { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.35; color: var(--charcoal); }
.myths__myth > span { color: var(--rose-ink-deep); }
.myths__ev { padding-top: 0.7rem; border-top: 1px dashed var(--sand); font-size: 0.92rem; color: var(--muted); }
.myths__ev > span { color: var(--teal); }
.myths__from { font-size: 0.85rem; font-style: italic; color: var(--rose-ink); }
@media (max-width: 960px) { .myths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .myths__grid { grid-template-columns: 1fr; } }

/* Homepage videos, option A (10 Nov 2026): "up next" says which episodes are free and which come with the package */
.upnext__tag { display: inline-flex; gap: 0.3rem; align-items: center; justify-self: start; margin-top: 0.15rem; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--sand-soft); color: var(--rose-ink-deep); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.upnext__tag svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.upnext__tag--free { background: var(--teal); color: var(--white); }

/* Homepage Starter Guide band, option A (10 Nov 2026): the next step after the free guide */
.guide-next { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; margin: 1.2rem 0 0; padding: 0.9rem 1.2rem; background: var(--sage-soft); border-radius: var(--panel-radius); color: var(--muted); }
.guide-next b { color: var(--teal-ink); }

/* Homepage closing band, option A (10 Nov 2026): four reassurances under the last price card */
.end-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.end-trust li { display: grid; padding: 0.8rem 1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); font-size: 0.85rem; color: var(--muted); }
.end-trust b { color: var(--teal-ink); }
@media (max-width: 900px) { .end-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .end-trust { grid-template-columns: 1fr; } }

/* ==========================================================================
   Links to pages in the package (10 Nov 2026 audit, WEB-04): a small lock after the link text for visitors,
   hidden for members by main.js (data-member-hide). Plus a line under the topic circle and the Learn hero.
   ========================================================================== */
.lock-tag { display: inline-flex; align-items: center; margin-left: 0.35em; vertical-align: -0.08em; color: var(--rose-ink); opacity: 0.85; }
.lock-tag svg { width: 0.78em; height: 0.78em; min-width: 11px; min-height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; }
/* 11 Nov 2026 design review: rose-ink on the teal footer was almost invisible; the light rose reads there. */
.site-footer .lock-tag, .pkg-invite .lock-tag { color: var(--rose-light); opacity: 1; }
.dial__free, .library-hero__free { margin: 0.6rem auto 0; max-width: 34rem; font-size: 0.92rem; color: var(--muted); text-align: center; }
.library-hero__free { margin: 0 0 1rem; text-align: left; }
.dial__free a, .library-hero__free a { color: var(--teal-ink); font-weight: 600; }
/* ==========================================================================
   Full audit 10 Nov 2026: phones, tablets, accessibility (Full Audit 2026-11-10/04, 06)
   ========================================================================== */
/* DEV-01 / A11Y-01: the "free to watch" box sits in the dark video hero but has a light background */
.vfree { color: var(--charcoal); }
.vfree a:not(.btn) { color: var(--teal-ink); }
/* DEV-02: the consultation buttons on the home page stay inside their panel on phones */
@media (max-width: 480px) {
  .cbring__foot .btn-row { flex: 1 1 100%; min-width: 0; }
  .cbring__foot .btn-row .btn { max-width: 100%; white-space: normal; text-align: center; }
}
/* DEV-05: the language drop-down on /contact and /consultations looks like the other fields */
.field select {
  width: 100%; min-height: 3.1rem; padding: 0.8rem 1.1rem; border-radius: var(--btn-radius);
  border: 1.5px solid var(--line); background-color: var(--white); color: var(--charcoal); font: inherit; font-size: 1rem;
}
.field select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgb(40 93 93 / 0.14); }
/* DEV-07: wide tables on the legal pages wrap instead of running off a phone screen */
.doc-paper td, .doc-paper th { overflow-wrap: anywhere; }
/* A11Y-02: the small rose labels on the FAQ cards pass 4.5:1 */
.faq-card__n { color: var(--rose-ink-deep); }
/* A11Y-04: the keyboard focus ring on the topic circle shows on teal segments too */
.dial__seg:focus-visible path { stroke: var(--white); stroke-width: 3.5; }
.dial__seg:focus-visible { filter: drop-shadow(0 0 2px var(--teal-ink)); }
/* DEV-03: on a phone held sideways the sticky header doesn't eat the short screen */
@media (orientation: landscape) and (max-height: 500px) { .site-header { position: relative; } }
/* A11Y-05: printed pages include the folded source lists (current Chrome hides closed details content) */
@media print {
  details > *, details::details-content { display: block !important; content-visibility: visible !important; }
  details > summary { list-style: none; }
  .box, .box * { color: #1d1d1d !important; }
}
/* Turnstile (10 Nov 2026): the box only takes space when Cloudflare shows a check */
.form-turnstile { max-width: 100%; }
.form-turnstile:empty { display: none; }
.form-turnstile iframe { max-width: 100%; }
/* The cycle wheel with its words as real text (10 Nov 2026 audit, DEV-09). The four phase names sit where the painted
   words were, sized to the picture (cqw); the notes are a list under the wheel, readable on every screen. */
.wheel-labels { position: relative; display: block; width: min(100%, 420px); margin-inline: auto; container-type: inline-size; }
.wheel-labels img { display: block; width: 100%; height: auto; max-height: none; }
.wheel-labels__l { position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; pointer-events: none; }
.wheel-labels__l b { font-family: var(--font-sans); font-weight: 700; font-size: 4cqw; line-height: 1.1; }
.wheel-labels__l small { display: none; }
.wheel-labels__l--menstrual { left: 50%; top: 35%; }
.wheel-labels__l--follicular { left: 60.5%; top: 49.5%; }
.wheel-labels__l--ovulation { left: 50%; top: 64%; }
.wheel-labels__l--luteal { left: 39.5%; top: 49.5%; }
.wheel-labels__l--menstrual b, .wheel-labels__l--ovulation b, .wheel-legend__menstrual b, .wheel-legend__ovulation b { color: var(--rose-ink-deep); }
.wheel-labels__l--follicular b, .wheel-legend__follicular b { color: #3d6449; }
.wheel-labels__l--luteal b, .wheel-legend__luteal b { color: #76601a; }
.wheel-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1rem; width: min(100%, 420px); margin: 0.8rem auto 0; padding: 0; list-style: none; font-size: 0.92rem; line-height: 1.35; color: var(--charcoal); }
.wheel-legend b { display: block; font-size: 0.98rem; }

/* ---------- 11 Nov 2026 audit ---------- */
/* Header drop-down arrows were 18x22 px; WCAG 2.2 target size wants 24x24 */
.nav-dropdown > summary { min-width: 24px; min-height: 24px; }
/* Resources glossary: the flip button sits in its own dd so the list stays a valid definition list */
.flashcard dd.flashcard__ctl { display: block; flex: none; margin: 0; }
.is-deck .flashcard:not(.is-flipped) dd.flashcard__ctl { display: block; }
.flashcard dd.flashcard__ctl:has(> [hidden]) { display: none; }
.is-deck .flashcard.is-flipped dd.flashcard__ctl { align-self: flex-start; }
/* Videos hero on tablets: the stage is the full window there, so the tilted tiles' negative offsets ran off both edges */
@media (min-width: 601px) and (max-width: 1023px) { .vhero__tile--1 { right: 2%; } .vhero__tile--2 { left: 2%; } .vhero__tile--3 { right: 2%; } .vhero__tile--4 { left: 2%; } }