/* Aisha Live Alive — makeup course site
   Palette: kohl ink, powder base, blush blocks, rouge accent, bronze, mauve */

:root {
  --ink: #241a1c;
  --paper: #fbf6f3;
  --blush: #f3e2da;
  --blush-deep: #ecd3c8;
  --rouge: #a62639;
  --rouge-dark: #8a1f30;
  --bronze: #a97b50;
  --mauve: #7e5a66;
  --line: #e5d2c9;
  --max: 1080px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: "Karla", sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--rouge); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 3px;
}

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

/* ---------- header ---------- */

body { padding-top: 94px; } /* clear the fixed floating nav */

header {
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 200;
  border: 1px solid rgba(126, 90, 102, 0.14);
  border-radius: 16px;
  background: rgba(251, 246, 243, 0.72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 10px 30px rgba(15, 10, 11, 0.10);
  transition: transform 0.32s ease;
}
/* Slides the pill up out of the way on scroll-down, back in on scroll-up.
   Phone only (own request: "on the phone view") -- on a desktop-width screen
   there is no cramped-for-space problem this is solving, so the header just
   stays put there. initHeaderAutoHide() in interactions.js toggles the class. */
@media (max-width: 719.98px) {
  header.header-hide { transform: translateY(-140%); }
}
header .wrap { padding: 7px 12px; }

.brand {
  display: block;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  font-family: "Italiana", serif;
  font-size: 18px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 0 3px;
}
.brand span { color: var(--rouge); }

nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
}
nav::-webkit-scrollbar { display: none; }

nav ul {
  display: flex;
  justify-content: center;
  gap: 12px;
  list-style: none;
  padding: 5px 2px 3px;
  min-width: max-content;
  margin: 0 auto;
}

nav a {
  text-decoration: none;
  color: var(--mauve);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 0;
}
nav a:hover { color: var(--ink); }
nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom: 2px solid var(--rouge);
}

/* COURSE is the page that sells, so it carries the brand gradient in the nav.
   Plain rouge first as the fallback; the gradient only replaces it where
   background-clip: text is actually supported, so the word can never vanish. */
nav a[href="course.html"] { color: var(--rouge); font-weight: 700; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  nav a[href="course.html"] {
    background-image: linear-gradient(96deg, var(--rouge) 8%, #c04a58 52%, var(--bronze) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ---------- swatch smear (signature) ---------- */

.smear {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}
.smear::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -6%;
  bottom: 0.02em;
  height: 0.34em;
  z-index: -1;
  border-radius: 999px 6px 999px 10px;
  background: linear-gradient(93deg, var(--rouge) 8%, #c04a58 55%, rgba(192, 74, 88, 0) 99%);
  transform: skewX(-12deg) rotate(-0.6deg);
}

.stroke-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mauve);
}
.stroke-label::after {
  content: "";
  display: block;
  width: 44px;
  height: 7px;
  margin-top: 8px;
  border-radius: 999px 4px 999px 6px;
  background: linear-gradient(93deg, var(--bronze), rgba(169, 123, 80, 0));
  transform: skewX(-14deg);
}
.center .stroke-label::after { margin-left: auto; margin-right: auto; }

.stroke-label.particle-ready,
.pword.particle-ready {
  color: transparent;
}
.pword.craft-red.particle-ready {
  -webkit-text-stroke-color: transparent;
}
.stroke-label .particle-canvas,
.pword .particle-canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
/* Words that assemble from particles (whole hero headline) */
.pword {
  display: inline-block;
  position: relative;
}
/* Hide the animated words from the very first paint (before JS runs) so the real
   text never flashes in and then restarts. Removed once the particle JS takes over. */
html.js-anim .pword { color: transparent; }
html.js-anim .craft-red { -webkit-text-stroke-color: transparent; }
/* The single red, bolder word in the hero headline */
.craft-red {
  color: #e0566b;
  -webkit-text-stroke: 0.9px #e0566b;
}
/* keep the smear underline hidden until its word has assembled */
.smear::after { transition: opacity 0.4s ease; }
.smear.particle-ready::after { opacity: 0; }

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

.hero {
  position: relative;
  overflow: hidden;
  min-height: 72vh;
  display: flex;
  align-items: center;
  padding: 96px 0 64px;
  background: var(--ink);
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crop tight to her head so the dupatta sits close under the header, the way
     the reference shot frames it, instead of leaving empty background above her. */
  object-position: center 100%;
  z-index: 0;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(36, 26, 28, 0.32) 0%, rgba(36, 26, 28, 0.58) 100%);
}

.hero-dust {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-accent-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, black 35%, transparent 92%);
  mask-image: linear-gradient(to left, black 35%, transparent 92%);
}

.hero-accent-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  opacity: 0.4;
  filter: grayscale(0.25) contrast(1.05);
}

.hero .wrap { position: relative; z-index: 2; }

.hero-copy { margin-top: 58px; }

.video-frame {
  position: relative;
  width: 58vw;
  max-width: 300px;
  aspect-ratio: 3 / 4;
}

.video-frame video,
.video-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50% 50% 0 0 / 22% 22% 0 0;
  background: linear-gradient(160deg, var(--blush-deep), var(--rouge) 130%);
  box-shadow:
    0 8px 16px rgba(15, 10, 11, 0.18),
    22px 30px 48px rgba(15, 10, 11, 0.34);
}

.hero h1 {
  font-family: "Italiana", serif;
  font-weight: 400;
  font-size: clamp(42px, 11vw, 84px);
  line-height: 1.06;
  letter-spacing: 0.01em;
  max-width: 11ch;
  color: var(--paper);
}

.hero .lede {
  margin-top: 22px;
  max-width: 34em;
  font-size: 18px;
  color: rgba(251, 246, 243, 0.82);
}

.hero .actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

.hero .btn-ghost {
  border-color: var(--paper);
  color: var(--paper);
}
.hero .btn-ghost:hover { background: var(--paper); color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .lede, .hero .actions {
    animation: rise 0.7s ease both;
  }
  .hero .lede { animation-delay: 0.12s; }
  .hero .actions { animation-delay: 0.24s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- wand brush (about page hero) ---------- */

.wand-brush {
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 46px;
  z-index: 5;
  pointer-events: none;
  transition-property: transform;
  transition-timing-function: ease-in-out;
  will-change: transform;
  filter: drop-shadow(0 3px 8px rgba(15, 10, 11, 0.45));
}
.wand-brush svg { width: 100%; height: 100%; display: block; }

.book-icon {
  position: fixed;
  top: 0;
  left: 0;
  width: 42px;
  height: 42px;
  z-index: 150;
  pointer-events: none;
  transition-property: transform;
  transition-timing-function: ease-in-out;
  will-change: transform;
  filter: drop-shadow(0 3px 8px rgba(15, 10, 11, 0.45));
}
.book-icon svg { width: 100%; height: 100%; display: block; }
.icon-glyph { transition: opacity 0.2s ease; }

.wand-trail-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.book-trail-layer { position: fixed; inset: 0; z-index: 149; pointer-events: none; }
.wand-sparkle {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0.95;
  box-shadow: 0 0 6px 1px currentColor;
  animation: sparkleFade 0.9s ease-out forwards;
}
.wand-sparkle.dot { border-radius: 50%; }
.wand-sparkle.star {
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}
@keyframes sparkleFade {
  0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.4); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) translateY(-14px); }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  padding: 15px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  border: 1.5px solid transparent;
}
.btn-rouge { background: var(--rouge); color: #fff; }
.btn-rouge:hover { background: var(--rouge-dark); }
.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* ---------- sections ---------- */

section { padding: 56px 0; }
section.tint { background: var(--blush); }

h2 {
  font-family: "Italiana", serif;
  font-weight: 400;
  font-size: clamp(30px, 6vw, 46px);
  line-height: 1.15;
  margin: 14px 0 18px;
}

.center { text-align: center; }
.center h2 { margin-left: auto; margin-right: auto; }

.prose { max-width: 38em; }
.prose p + p { margin-top: 1em; }

/* ---------- shade card / module list ---------- */

.modules { list-style: none; margin-top: 30px; }
.modules li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.modules li:first-child { border-top: 1px solid var(--line); }

.modules .num {
  font-family: "Italiana", serif;
  font-size: 26px;
  color: var(--bronze);
  min-width: 44px;
}

.day-colors .num { font-size: 21px; min-width: 74px; }

/* Per-day thumbnails: stills pulled from Aisha's own module footage, so each day
   shows the actual work it describes. Phone only — the desktop list stays text. */
.day-img { display: none; }
.day-colors li:nth-child(1) .num { color: #a62639; }
.day-colors li:nth-child(2) .num { color: #a97b50; }
.day-colors li:nth-child(3) .num { color: #7e5a66; }
.day-colors li:nth-child(4) .num { color: #8a1f30; }
.day-colors li:nth-child(5) .num { color: #6b3f5c; }
.day-colors li:nth-child(6) .num { color: #c08a3e; }
.day-colors li:nth-child(7) .num { color: #b5563a; }
.modules .name { font-weight: 700; font-size: 17px; }
.modules .desc { display: block; color: var(--mauve); font-size: 15px; margin-top: 3px; font-weight: 400; }

/* ---------- day tabs (online course) ---------- */

.day-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 30px;
  position: relative;
  z-index: 2;
}
.day-tab {
  font-family: "Karla", sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-bottom: none;
  background: var(--blush);
  color: var(--mauve);
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.day-tab:hover { color: var(--ink); }
.day-tab.active { background: var(--paper); color: var(--ink); border-color: var(--line); }

.day-panels {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0 14px 14px 14px;
  margin-top: -1px;
}
.day-panel { display: none; padding: 28px 30px; animation: dayFade 0.35s ease; }
.day-panel.active { display: block; }
@keyframes dayFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.day-name { display: block; font-weight: 700; font-size: 18px; }
.day-desc { display: block; color: var(--mauve); font-size: 15px; margin-top: 8px; }

/* ---------- swatch grid (gallery + accents) ---------- */

.swatches {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 30px;
}

.swatch {
  border-radius: 14px 4px 14px 4px;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 6px rgba(36, 26, 28, 0.35);
}
.swatch small { font-weight: 400; opacity: 0.85; display: block; letter-spacing: 0.02em; }

.sw-1 { background: radial-gradient(120% 120% at 20% 10%, #d98a94, var(--rouge) 70%); }
.sw-2 { background: radial-gradient(120% 120% at 80% 15%, #d9b48c, var(--bronze) 75%); }
.sw-3 { background: radial-gradient(130% 130% at 25% 85%, #b48a99, var(--mauve) 72%); }
.sw-4 { background: radial-gradient(120% 130% at 70% 80%, #6d4a52, var(--ink) 78%); }
.sw-5 { background: radial-gradient(120% 120% at 30% 20%, #e8b7ab, #c2705e 75%); }
.sw-6 { background: radial-gradient(130% 120% at 75% 25%, #caa1b4, #96607d 78%); }

/* ---------- stats row (about) ---------- */

.stats-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 34px;
  max-width: 640px;
}
.stat { padding-top: 22px; border-top: 1px solid var(--line); }
.stats-row .stat:first-child { padding-top: 0; border-top: none; }
.stat-num {
  display: block;
  font-family: "Italiana", serif;
  font-weight: 400;
  font-size: clamp(40px, 9vw, 56px);
  line-height: 1;
  color: var(--rouge);
}
.stat-label {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  color: var(--mauve);
  max-width: 34ch;
}

/* ---------- cards row (why us) ---------- */

.threes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin-top: 34px;
}
.threes h3 {
  font-family: "Italiana", serif;
  font-weight: 400;
  font-size: 24px;
  margin-bottom: 8px;
}
.threes p { color: var(--mauve); font-size: 15.5px; }

.reveal-group > div {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-group.in-view > div { opacity: 1; transform: none; }
.reveal-group.in-view > div:nth-child(2) { transition-delay: 0.12s; }
.reveal-group.in-view > div:nth-child(3) { transition-delay: 0.24s; }

/* ---------- meet Aisha (about page bento row) ---------- */

.meet-grid { display: flex; flex-direction: column; gap: 40px; }

/* The daub below sits outside the photo on purpose (right: -18px) and drifts a
   further 5px right mid-animation. On a 390px screen that lands past the viewport
   edge and gives the page a 7px horizontal scroll, so clip at the section: the
   bleed still reads, only the part already off-screen is cut. `clip` rather than
   `hidden` so no scroll container is created and sticky children still work. */
section:has(> .meet-grid) { overflow-x: clip; }

.meet-photo { position: relative; max-width: 360px; margin: 0 auto; width: 100%; }
.meet-daub {
  position: absolute;
  top: -22px;
  right: -18px;
  width: 76%;
  aspect-ratio: 1 / 1;
  border-radius: 42% 58% 62% 38% / 48% 42% 58% 52%;
  background: linear-gradient(150deg, var(--blush-deep), var(--rouge) 145%);
  opacity: 0.85;
  z-index: 0;
  cursor: pointer;
  animation: daubDrift 8s ease-in-out infinite alternate;
}
@keyframes daubDrift {
  0% { transform: translate(0, 0) scale(1); border-radius: 42% 58% 62% 38% / 48% 42% 58% 52%; }
  50% { transform: translate(5px, -8px) scale(1.03); border-radius: 55% 45% 40% 60% / 55% 60% 40% 45%; }
  100% { transform: translate(-5px, 5px) scale(0.98); border-radius: 48% 52% 55% 45% / 40% 55% 45% 60%; }
}

@property --ring-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.meet-wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 28px 8px 28px 8px;
  background: linear-gradient(135deg, var(--rouge), #f0a8b6 50%, var(--rouge));
  mix-blend-mode: color;
  opacity: 0;
  pointer-events: none;
}
.meet-wash.pulse { animation: washFade 1.6s ease-out; }
@keyframes washFade {
  0% { opacity: 0; }
  22% { opacity: 0.9; }
  100% { opacity: 0; }
}

.meet-ring {
  position: absolute;
  inset: -3px;
  z-index: 4;
  border-radius: 30px 10px 30px 10px;
  padding: 3px;
  background: conic-gradient(from var(--ring-angle), var(--rouge), #f0a8b6 30%, var(--rouge) 60%, #f0a8b6 85%, var(--rouge));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}
.meet-ring.pulse { animation: ringFade 1.6s ease-out, ringTravel 1.6s linear; }
@keyframes ringFade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ringTravel {
  from { --ring-angle: 0deg; }
  to { --ring-angle: 360deg; }
}
.meet-main {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 28px 8px 28px 8px;
  box-shadow: 0 8px 16px rgba(15, 10, 11, 0.18), 18px 24px 40px rgba(15, 10, 11, 0.26);
}
.meet-accent {
  position: absolute;
  z-index: 3;
  width: 42%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  bottom: -28px;
  left: -20px;
  border-radius: 16px 6px 16px 6px;
  border: 5px solid var(--blush);
  box-shadow: 0 10px 20px rgba(15, 10, 11, 0.22);
}

.meet-copy .prose { margin-top: 16px; }
.meet-tags {
  margin-top: 26px;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bronze);
}
.meet-tags span { color: var(--mauve); font-weight: 400; margin: 0 9px; letter-spacing: 0; text-transform: none; }

.ig-follow { margin-top: 22px; }
.ig-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rouge);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.ig-link:hover { color: var(--rouge-dark); }
.ig-icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- filmstrip (about page, off the clock) ---------- */

.film-section { overflow: hidden; }
.filmstrip {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.filmstrip figure { flex: 0 0 66%; margin: 0; scroll-snap-align: start; }
.filmstrip img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 22px 6px 22px 6px;
  box-shadow: 0 10px 20px rgba(15, 10, 11, 0.14);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.filmstrip figure:nth-child(2) img { border-radius: 6px 22px 6px 22px; }
.filmstrip img:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 18px 30px rgba(15, 10, 11, 0.22); }

/* ---------- facts table ---------- */

.facts { width: 100%; border-collapse: collapse; margin-top: 26px; max-width: 560px; }
.facts th, .facts td { text-align: left; padding: 13px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.facts th { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mauve); font-weight: 700; white-space: nowrap; padding-right: 22px; }

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

details { border-bottom: 1px solid var(--line); padding: 4px 0; }
details:first-of-type { border-top: 1px solid var(--line); }
/* `outside` strands the disclosure triangle against the viewport edge, far from
   the question text, so it reads as a stray glyph. `inside` keeps it attached. */
summary { cursor: pointer; font-weight: 700; padding: 14px 0; list-style-position: inside; }
details p { padding: 0 0 16px; color: var(--mauve); max-width: 44em; }

/* ---------- CTA band ---------- */

.cta-band { background: var(--ink); color: var(--paper); text-align: center; padding: 64px 0; }
.cta-band h2 { color: var(--paper); }
.cta-band p { color: #cbb4ba; max-width: 32em; margin: 0 auto 28px; }

.cta-mid { background: var(--blush-deep); color: var(--ink); }
.cta-mid h2 { color: var(--ink); }
.cta-mid p { color: var(--mauve); }

/* enrol / Razorpay pay button */
.rzp-slot { display: flex; justify-content: center; margin: 4px 0 2px; }
.rzp-slot form { margin: 0; }
.cta-band .pay-note { font-size: 13.5px; color: #cbb4ba; margin: 16px auto 0; }
.cta-band .pay-note a { color: #f0c9cf; font-weight: 700; text-decoration: none; }
.cta-band .pay-note a:hover { text-decoration: underline; }
.fee-label { display: inline; }
.cta-icon { display: inline-block; width: 48px; height: 48px; margin-bottom: 6px; }
.cta-icon svg { width: 100%; height: 100%; display: block; }
/* Icon sitting beside the label instead of on its own row */
.label-row { display: flex; align-items: center; gap: 11px; }
.cta-icon.icon-inline { width: 36px; height: 36px; margin-bottom: 0; flex: 0 0 auto; }

/* ---------- about teaser ---------- */

.about-teaser {
  display: flex;
  flex-direction: column-reverse;
  gap: 32px;
}
.about-media { display: flex; justify-content: center; }
.video-frame.small { width: 46vw; max-width: 210px; }
.about-copy .prose { margin: 16px 0 26px; }

/* ---------- module video cards ---------- */

/* A deck of five cards. Every card is position: sticky, so the browser does the
   entire effect on ordinary native scroll: each one rides up, parks just under the
   one before it, and the next slides over the top. Nothing here intercepts the
   wheel or the touch, which is why the section cannot snap back, refuse to release
   or trap the page the way the old scroll-driven stepper could. With no JS at all
   it still works, because sticky is pure CSS. */
.module-deck {
  margin-top: 30px;
  position: relative;
  --deck-top: 92px;               /* JS refines this from the real header height */
  --deck-peek: 11px;              /* sliver of each parked card left showing above the next */
  --card-h: clamp(330px, 62vh, 520px);
  /* A card holds the screen for its own height PLUS this gap, so this is the knob
     that decides how much scroll each one gets before the next slides over it. At
     24vh a card lasted about 720px, which one flick on a phone goes straight past. */
  --card-gap: 55vh;
  /* Card five's turn. It has no sixth card to end it, so its time comes from this
     spacer instead and it has to be set to match what the others get, or the last
     card flashes past in half the time. See the sticky note below. */
  --deck-tail: calc(var(--card-h) + var(--card-gap) * 0.62);
  --cta-h: 60px;
  --mname: 26px;                  /* one knob for the module title, see .mfont-* below */
}

/* The course button rides inside the deck instead of sitting under it. Outside, it
   landed in the empty run-out the deck needs for its last card, so it read as a lone
   button stranded in a field of nothing. Parked just below card five it becomes the
   close of the deck. The margin below is what makes it let go at the same instant the
   cards do: an element leaves the pile when top + height + margin runs past the deck,
   so matching that sum to a card's keeps them together. */
.deck-cta {
  position: sticky;
  top: calc(var(--deck-top) + 4 * var(--deck-peek) + var(--card-h) + 30px);
  margin-bottom: max(0px, calc(var(--card-gap) - 30px - var(--cta-h)));
  height: var(--cta-h);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;                     /* a card sliding over it should cover it, not sit under */
}
/* Card five's moment on screen. A sticky element is constrained by its own MARGIN
   box against the parent's content box, so a bigger margin-bottom on the last card
   cancels out exactly the room it adds and the card can never stick at all. The room
   has to come from a sibling instead, which is all this is. Every card keeps the
   same margin, so every card also releases at the same instant and the deck leaves
   as one block rather than peeling apart. */
.module-deck::after {
  content: "";
  display: block;
  height: var(--deck-tail);
}
.module-card {
  position: sticky;
  top: calc(var(--deck-top) + var(--i) * var(--deck-peek));
  z-index: calc(var(--i) + 1);    /* newest card on top of the pile */
  margin-bottom: var(--card-gap);
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.module-thumb {
  position: relative;
  height: var(--card-h);
  border-radius: 18px 5px 18px 5px;
  display: block;
  overflow: hidden;
  transform-origin: 50% 0%;       /* parked cards shrink away from their own top edge */
  will-change: transform;
  /* Upward shadow so an arriving card reads as lifting over the pile, not sliding under it */
  box-shadow: 0 -8px 26px rgba(15, 10, 11, 0.20), 0 16px 34px rgba(15, 10, 11, 0.16);
}

/* Darkens a card once others have landed on it. Sits above the caption so the whole
   card recedes together. JS sets the opacity; without JS it stays invisible. */
.module-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #150e0f;
  opacity: 0;
  pointer-events: none;
}
/* Bottom shadow the caption sits on. It carries both the name and the description
   now, so it rises higher and fades out slowly enough that there is no visible edge
   where the shadow starts. */
.module-thumb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  background: linear-gradient(to top,
    rgba(14, 9, 10, 0.94) 0%,
    rgba(14, 9, 10, 0.82) 24%,
    rgba(14, 9, 10, 0.52) 52%,
    rgba(14, 9, 10, 0.2) 76%,
    rgba(14, 9, 10, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Video spotlight reveal: zoom big into the viewport, ripple behind, page blurred */
.spotlight-backdrop {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: rgba(20, 14, 15, 0.30);
  backdrop-filter: blur(9px) saturate(1.05);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.spotlight-backdrop.on { opacity: 1; }
.spotlight-ripple {
  position: fixed;
  inset: 0;
  z-index: 321;
  pointer-events: none;
}
.spotlight {
  z-index: 322;
  background-size: cover;
  background-position: center;
  box-shadow: 0 34px 90px rgba(15, 10, 11, 0.55);
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}
.spotlight-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 16px 15px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.34) 55%, transparent);
  color: #fff;
}
.spotlight-cap .spotlight-name { font-size: 17px; line-height: 1.08; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.spotlight-cap .spotlight-desc { font-size: 10.5px; line-height: 1.45; margin-top: 6px; opacity: 0.92; }

.module-num {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  font-family: "Italiana", serif;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 1px 6px rgba(36, 26, 28, 0.4);
}

.play-badge {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(251, 246, 243, 0.92);
  color: var(--rouge);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  padding-left: 3px;
}

.module-card:hover .play-badge,
.module-card:focus-visible .play-badge { background: var(--paper); }

/* Name and description sit together on the shadow at the foot of the video */
.module-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 13px 13px;
}

/* Heading overlaid on the bottom of the video, each module its own font. The five
   faces need different sizes to read at the same weight, so they are expressed as
   ratios of --mname and one value on .module-deck scales the whole set. */
.module-name {
  display: block;
  color: #fff;
  line-height: 1.08;
  font-size: var(--mname, 16px);
  text-shadow: 0 2px 12px rgba(18, 12, 13, 0.55);
}
.mfont-1 { font-family: "Playfair Display", serif; font-style: italic; font-weight: 500; }
.mfont-2 { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: calc(var(--mname, 16px) * 1.12); }
.mfont-3 { font-family: "Parisienne", cursive; font-size: calc(var(--mname, 16px) * 1.3); }
.mfont-4 { font-family: "Great Vibes", cursive; font-size: calc(var(--mname, 16px) * 1.44); }
.mfont-5 { font-family: "Bodoni Moda", serif; font-weight: 500; font-size: calc(var(--mname, 16px) * 0.9); letter-spacing: 0.01em; }

.module-desc {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 11.5px;
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(18, 12, 13, 0.7);
}

/* Corner marks sized for the full-width deck card rather than the old half-width one */
.module-deck .module-num { font-size: 25px; top: 15px; left: 18px; }
.module-deck .play-badge { width: 44px; height: 44px; right: 16px; top: 16px; font-size: 16px; }

/* No deck for reduced motion: five cards in a plain column, nothing stacking */
@media (prefers-reduced-motion: reduce) {
  .module-card { position: static; margin-bottom: 16px; }
  .module-thumb { height: auto; aspect-ratio: 9 / 16; }
  .module-veil { display: none; }
  .module-deck::after { display: none; }
  .deck-cta { position: static; height: auto; margin-bottom: 0; padding: 14px 0 0; }
}

/* ---------- what you'll learn ---------- */

.learn-list {
  list-style: none;
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 28px;
  max-width: 640px;
}
.learn-list li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
}
.learn-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--bronze);
  font-weight: 700;
}

.learn-icons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 600px;
}
.learn-icons li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 0;
  position: static;
  width: 88%;
}
.learn-icons li:not(:first-child) {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.learn-icons li::before { content: none; }
.learn-icons li:nth-child(odd) { align-self: flex-start; }
.learn-icons li:nth-child(even) {
  align-self: flex-end;
  flex-direction: row-reverse;
  text-align: right;
}
.outcome-icon {
  position: static;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
}
.outcome-icon svg { width: 100%; height: 100%; display: block; }

/* ---------- video gallery (curvy frames) ---------- */

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 30px;
}

.video-card {
  border: none;
  padding: 0;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(15, 10, 11, 0.18);
}
.video-card video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- review videos ---------- */

/* Swipeable card deck (GSAP): cards stack with a peek behind; drag the front aside. */
.review-deck {
  position: relative;
  width: min(320px, 84vw);
  margin: 34px auto 0;
  touch-action: pan-y; /* let vertical page scroll through, horizontal drag to the card */
}

.rv-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 20px 6px 20px 6px;
  overflow: hidden;
  background: #241a1c;
  box-shadow: 0 18px 42px rgba(15, 10, 11, 0.30);
  will-change: transform;
  cursor: grab;
}
.rv-card:active { cursor: grabbing; }
.rv-card video { width: 100%; height: 100%; object-fit: cover; display: block; }

.rv-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 48px 20px 20px;
  background: linear-gradient(180deg, rgba(36, 26, 28, 0) 0%, rgba(36, 26, 28, 0.85) 78%);
  color: #fff;
}
.rv-stars { font-size: 13px; color: var(--bronze); margin-bottom: 6px; }
.rv-quote { font-weight: 700; font-size: 15.5px; line-height: 1.4; }
.rv-name { font-size: 12.5px; opacity: 0.85; margin-top: 6px; }

.deck-hint {
  text-align: center;
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--mauve);
  transition: opacity 0.4s ease;
}

/* Fallback if GSAP fails to load: show cards as a simple stack, not overlapping */
.review-deck.deck-fallback { height: auto !important; }
.review-deck.deck-fallback .rv-card { position: relative; margin-bottom: 20px; box-shadow: 0 12px 30px rgba(15, 10, 11, 0.22); }
.review-deck.deck-fallback + .deck-hint { display: none; }

/* ---------- fixed floating book bar (course page) ---------- */

.book-bar {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 250;
  border: 1px solid rgba(126, 90, 102, 0.14);
  border-radius: 16px;
  background: rgba(251, 246, 243, 0.9);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 -6px 30px rgba(15, 10, 11, 0.16);
}
.book-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 10px 9px 16px;
  max-width: var(--max);
  margin: 0 auto;
}
.book-bar-cta { display: flex; flex-direction: column; line-height: 1.08; min-width: 0; }
.bb-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mauve);
}
.bb-title {
  font-family: "Italiana", serif;
  font-size: 23px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.book-bar .rzp-bar { display: flex; align-items: center; min-height: 44px; }
.book-bar .bb-fallback,
.book-bar .rzp-pay-btn { padding: 12px 24px; font-size: 14px; white-space: nowrap; }

/* Keep the page clear of the fixed bar, and lift the chat button above it. */
body.has-book-bar { padding-bottom: 86px; }
body.has-book-bar .chat-widget { bottom: 92px; }

@media (min-width: 720px) {
  .bb-title { font-size: 26px; }
}

/* ---------- floating chat box ---------- */

.chat-widget {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.chat-fab {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--rouge);
  color: #fff;
  box-shadow: 0 12px 28px rgba(166, 38, 57, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background 0.25s ease;
}
.chat-fab:hover { background: var(--rouge-dark); transform: translateY(-2px); }
.chat-fab-close { display: none; }
.chat-open .chat-fab-open { display: none; }
.chat-open .chat-fab-close { display: block; }

.chat-panel {
  width: min(310px, calc(100vw - 36px));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px 6px 20px 6px;
  box-shadow: 0 22px 50px rgba(15, 10, 11, 0.24);
  overflow: hidden;
  transform: translateY(14px) scale(0.96);
  opacity: 0;
  transform-origin: bottom right;
  transition: transform 0.24s ease, opacity 0.24s ease;
  pointer-events: none;
}
.chat-open .chat-panel { transform: none; opacity: 1; pointer-events: auto; }
.chat-panel[hidden] { display: none; }

.chat-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 14px 13px;
  background: linear-gradient(135deg, var(--rouge), var(--rouge-dark));
  color: #fff;
}
.chat-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Italiana", serif;
  font-size: 20px;
}
.chat-head-text { line-height: 1.2; }
.chat-name { font-weight: 700; font-size: 14.5px; }
.chat-status { font-size: 11.5px; opacity: 0.85; margin-top: 1px; }
.chat-x {
  margin-left: auto;
  background: none;
  border: none;
  color: #fff;
  opacity: 0.85;
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.chat-x:hover { opacity: 1; }

.chat-body {
  padding: 16px 15px;
  background: var(--blush);
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-msg {
  background: var(--paper);
  border-radius: 4px 16px 16px 16px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  box-shadow: 0 3px 10px rgba(15, 10, 11, 0.06);
  max-width: 88%;
  align-self: flex-start;
}
.chat-msg.user {
  background: var(--rouge);
  color: #fff;
  border-radius: 16px 4px 16px 16px;
  align-self: flex-end;
}
.chat-inline-wa {
  display: block;
  margin-top: 9px;
  color: var(--rouge);
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: none;
}
.chat-inline-wa:hover { text-decoration: underline; }

.chat-input {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: var(--blush);
  border-top: 1px solid rgba(126, 90, 102, 0.14);
}
.chat-input input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 13.5px;
  background: var(--paper);
  color: var(--ink);
}
.chat-input input:focus { outline: none; border-color: var(--rouge); }
.chat-input button {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--rouge);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-input button:hover { background: var(--rouge-dark); }

.chat-chips { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.chat-chip {
  display: block;
  width: 100%;
  text-decoration: none;
  text-align: left;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 11px 14px;
  background: var(--paper);
  border-radius: 12px 4px 12px 4px;
  color: var(--rouge);
  font-weight: 700;
  font-size: 13.5px;
  transition: background 0.18s ease, color 0.18s ease;
}
.chat-chip:hover { background: var(--rouge); color: #fff; }
.chat-chip:last-child { color: var(--mauve); }
.chat-chip:last-child:hover { color: #fff; }

.chat-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px;
  background: var(--paper);
  color: var(--mauve);
  font-size: 11.5px;
  letter-spacing: 0.03em;
}
.chat-foot svg { color: #25d366; }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(36, 26, 28, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.open { opacity: 1; transform: none; }

.lightbox video {
  max-width: 90vw;
  max-height: 82vh;
  border-radius: 18px 5px 18px 5px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(251, 246, 243, 0.14);
  color: var(--paper);
  font-size: 16px;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(251, 246, 243, 0.26); }

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

footer { border-top: 1px solid var(--line); padding: 36px 0 44px; font-size: 14px; color: var(--mauve); }
footer .wrap { display: flex; flex-direction: column; gap: 8px; }
footer .fbrand { font-family: "Italiana", serif; font-size: 19px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }

/* ---------- wider screens ---------- */

@media (min-width: 720px) {
  .hero { min-height: 100vh; }
  /* The 100% crop above is tuned for narrow portrait viewports. On a wide desktop
     hero the same value anchors to the bottom of the frame and shows only her skirt,
     so pull the window back up to keep her face and dupatta in shot. */
  .hero-bg-video { object-position: center 32%; }
  .hero-accent-photo { width: 46%; }
  .stats-row { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .stat { padding-top: 0; border-top: none; padding-left: 28px; border-left: 1px solid var(--line); }
  .stats-row .stat:first-child { padding-left: 0; border-left: none; }
  .hero-copy { max-width: 560px; margin-top: 90px; }
  section { padding: 76px 0; }
  .swatches { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .threes { grid-template-columns: repeat(3, 1fr); }
  body { padding-top: 78px; }
  header { top: 14px; left: max(16px, calc(50vw - 620px)); right: max(16px, calc(50vw - 620px)); }
  header .wrap { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 18px; }
  .brand { text-align: left; padding: 15px 0; font-size: 22px; letter-spacing: 0.2em; }
  nav ul { justify-content: flex-end; gap: 26px; padding: 12px 6px; }
  nav a { font-size: 14px; letter-spacing: 0.12em; }

  .about-teaser { flex-direction: row; align-items: center; gap: 60px; }
  .about-media { flex: 0 0 auto; }
  .about-copy { flex: 1 1 auto; max-width: 520px; }
  .video-frame.small { width: min(300px, 24vw); max-width: none; }

  /* One centred column of cards. The footage is shot vertical, so a wide card would
     only crop her out of frame; the deck stays column width and the type grows. */
  .module-deck {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    --card-h: clamp(400px, 66vh, 600px);
    --card-gap: 58vh;
    --deck-peek: 13px;
    --cta-h: 64px;
    --mname: 36px;
  }
  .module-cap { padding: 0 20px 18px; }
  .module-desc { margin-top: 10px; font-size: 14.5px; }
  .module-deck .module-num { font-size: 30px; top: 17px; left: 21px; }
  .module-deck .play-badge { width: 50px; height: 50px; right: 18px; top: 18px; font-size: 18px; }
  .learn-list { grid-template-columns: repeat(2, 1fr); }
  .video-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .video-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .review-deck { width: 360px; }

  .meet-grid { flex-direction: row; align-items: center; gap: 64px; }
  .meet-photo { flex: 0 0 auto; width: 380px; max-width: none; }
  .meet-copy { flex: 1 1 auto; max-width: 480px; }

  .filmstrip { overflow: visible; }
  .filmstrip figure { flex: 1 1 0; }

  /* what you'll learn — column sized to the wrap instead of a narrow 600px strip */
  .learn-icons { max-width: 860px; }
  .outcome-icon { flex: 0 0 44px; width: 44px; height: 44px; }
  .learn-icons li { font-size: 17px; }
}

/* ---------- thank-you page ---------- */

.ty-hero {
  text-align: center;
  padding: 78px 0 56px;
  background: linear-gradient(180deg, var(--blush) 0%, var(--paper) 100%);
}
.ty-badge {
  width: 78px;
  height: 78px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rouge);
  color: #fff;
  box-shadow: 0 16px 34px rgba(166, 38, 57, 0.30);
  animation: ty-pop 0.55s cubic-bezier(0.18, 0.9, 0.32, 1.4) both;
}
.ty-badge svg { width: 40px; height: 40px; }
@keyframes ty-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.ty-hero h1 {
  font-family: "Italiana", serif;
  font-weight: 400;
  font-size: clamp(40px, 11vw, 68px);
  line-height: 1.03;
  color: var(--ink);
}
.ty-hero .lede { max-width: 30em; margin: 18px auto 0; color: var(--mauve); font-size: 18px; }
.ty-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.ty-note { margin-top: 20px; font-size: 13px; color: var(--mauve); }
.ty-steps { max-width: 680px; }
@media (min-width: 720px) {
  .ty-steps { grid-template-columns: 1fr; }
}

/* ---------- mobile-only tuning (phones) ----------
   Kept in its own max-width block so nothing here can reach the desktop layout,
   which is tuned separately in the min-width: 720px blocks above. */
@media (max-width: 719.98px) {

  /* The hero centres its copy in a 72vh box, so ~148px of dead space sat between
     the floating nav and the headline and no amount of padding change moved it.
     Anchor the copy to the top of the hero instead and let the padding set the
     distance, so the headline reads as part of the menu block above it. */
  .hero { align-items: flex-start; padding-top: 78px; }
  .hero-copy { margin-top: 0; }

  /* The base crop (100%) pushes her head up under the menu and drops the headline
     across her neck. Pulling the window to the top of the frame instead lets the
     headline sit on plain background and puts her face in the clear gap beneath it.
     Checked at 3s/20s/45s/70s so it holds for the whole clip, not one lucky frame. */
  .hero-bg-video { object-position: center 0%; }

  /* Text over video still needs its own contrast: darken the band the headline
     sits in, keep the middle lighter so the footage reads, close dark again
     under the buttons. */
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(36, 26, 28, 0.66) 0%,
      rgba(36, 26, 28, 0.6) 30%,
      rgba(36, 26, 28, 0.44) 58%,
      rgba(36, 26, 28, 0.62) 100%);
  }

  /* Menu was 11px, too small to read comfortably on a phone. */
  nav a { font-size: 13px; letter-spacing: 0.05em; }
  nav ul { gap: 14px; }
  .brand { font-size: 19.5px; }

  /* Seven-day list: a thumbnail per day, sitting to the right of the text so the
     day number keeps its column and the copy keeps its measure. `baseline` would
     hang the image off the first text baseline, so switch these rows to the top. */
  .day-colors li { align-items: flex-start; gap: 12px; }
  .day-colors .num { min-width: 56px; }
  .day-img {
    display: block;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    object-fit: cover;
    border-radius: 12px 3px 12px 3px;
    box-shadow: 0 4px 10px rgba(15, 10, 11, 0.16);
    margin-top: 2px;
  }

  /* Each card now owns the full width, so let the deck run wider than the text
     column and scale the caption to match the much larger frame. */
  .module-deck { margin-left: -13px; margin-right: -13px; }
  .module-cap { padding: 0 16px 15px; }
  .module-desc { margin-top: 8px; font-size: 13.5px; }
}

/* ---------- seven-day list -> card grid (course page) ----------
   Two layers stacked in one box. JS measures each at its natural height and
   scrubs the box height between them, so nothing below ever jumps. */
.days-morph { position: relative; margin-top: 30px; }
.days-morph .days-layer { margin-top: 0; }
.days-layer { position: absolute; inset: 0 0 auto 0; width: 100%; }
.days-layer-list { transform-origin: 50% 30%; }

/* The settled state: seven capsules that wrap and centre themselves, so the block
   sets its own ragged shape off the length of each day's title rather than sitting
   on a grid. Widths vary, which is what makes it read as a group of pills and not
   as a second, tidier list. */
.days-layer-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  transform-origin: 50% 30%;
}

.day-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 5px 17px 5px 5px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 10, 11, 0.12);
}
/* The day's own still, cropped round. Small, but it keeps the photography in the
   settled state instead of leaving seven identical text chips. */
.dp-media {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blush-deep);
}
.dp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dp-num {
  flex: none;
  font-family: "Italiana", serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--bronze);
}
.dp-name {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
}

/* Each pill takes the day's own accent, matching the list it grew out of. */
.days-layer-pills li:nth-child(1) .dp-num { color: #a62639; }
.days-layer-pills li:nth-child(2) .dp-num { color: #a97b50; }
.days-layer-pills li:nth-child(3) .dp-num { color: #7e5a66; }
.days-layer-pills li:nth-child(4) .dp-num { color: #8a1f30; }
.days-layer-pills li:nth-child(5) .dp-num { color: #6b3f5c; }
.days-layer-pills li:nth-child(6) .dp-num { color: #c08a3e; }
.days-layer-pills li:nth-child(7) .dp-num { color: #b5563a; }

@media (min-width: 720px) {
  .days-layer-pills { gap: 12px; }
  .day-pill { gap: 11px; padding: 6px 21px 6px 6px; }
  .dp-media { width: 40px; height: 40px; }
  .dp-num { font-size: 17px; }
  .dp-name { font-size: 15px; }
}

/* The module section used to take the scroll off the browser here (touch-action:
   none while a stepper played the videos one at a time). That whole approach is
   gone: the deck is position: sticky and rides native scroll, so nothing ever
   blocks a gesture and there is no lock left to strand anyone. */

/* ---------- launch band (homepage) ----------
   Full-bleed announcement sitting directly above the module deck.
   The brand gradient stays DEEP the whole way across on purpose: a genuinely
   pale end would drop cream text to about 2:1 contrast, which fails at the
   right-hand side on wide screens. So the "pale" is a separate radial bloom
   layered over the top — it reads the same and stays readable at every width. */
.launch-band {
  position: relative;
  overflow: hidden;
  color: var(--paper);
  padding: 54px 0;
  background-color: var(--rouge);
  background-image:
    radial-gradient(58% 120% at 86% 24%, rgba(243, 226, 218, 0.40), rgba(243, 226, 218, 0) 68%),
    linear-gradient(104deg, var(--rouge-dark) 0%, var(--rouge) 46%, #b83a4b 100%);
}
.lb-kicker {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f6d9de;
}
.lb-kicker::after {
  content: "";
  display: block;
  width: 44px;
  height: 7px;
  margin-top: 8px;
  border-radius: 4px;
  background: rgba(251, 246, 243, 0.55);
}
.launch-band h2 { color: var(--paper); max-width: 14em; }
.lb-lede { color: #f4dee1; max-width: 34em; margin-bottom: 26px; }

.lb-facts {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
  margin: 0 0 28px;
  padding: 0;
}
.lb-facts li { padding-top: 13px; border-top: 1px solid rgba(251, 246, 243, 0.3); }
.lb-num {
  display: block;
  font-family: "Italiana", serif;
  font-size: 27px;
  line-height: 1.12;
}
.lb-lab { display: block; font-size: 13.5px; color: #f0ccd1; }

.launch-band .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.launch-band .btn-rouge { background: var(--paper); color: var(--rouge-dark); }
.launch-band .btn-rouge:hover { background: #fff; }
.launch-band .btn-ghost { border-color: rgba(251, 246, 243, 0.7); color: var(--paper); }
.launch-band .btn-ghost:hover { background: var(--paper); color: var(--rouge-dark); }

@media (min-width: 720px) {
  .launch-band { padding: 76px 0; }
  .lb-facts { grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 660px; }
}

/* ---------- syllabus parts (pro-course) ----------
   The owner's own Overview message groups the ten subjects into three named
   parts, so the page keeps that structure rather than flattening it into one
   long grid. Each part is a labelled block with its own intro. */
.part { margin-top: 40px; }
.part:first-of-type { margin-top: 30px; }
.part + .part { padding-top: 36px; border-top: 1px solid var(--line); }
.part-num {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rouge);
}
/* Bigger only in the detailed breakdown below the zigzag summary -- the
   zigzag cards' own "Part one/two/three" label (.zig-card .part-num) stays at
   the base size, since that one sits beside a much smaller card heading and
   would overpower it at this scale. */
.part > .part-num { font-size: 16px; letter-spacing: 0.2em; }
h3.part-name {
  font-family: "Italiana", serif;
  font-weight: 400;
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.2;
  margin: 6px 0 8px;
}
.part-note { color: var(--mauve); max-width: 40em; font-size: 15.5px; }
.part .threes { margin-top: 26px; }
/* The running number is what makes it read as course material and not a
   feature list. Sits above its own heading, never beside it, so a long
   subject name cannot push it out of line. */
.tp-num {
  display: block;
  font-family: "Italiana", serif;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--bronze);
  margin-bottom: 4px;
}

/* ---------- typed hero line (pro-course) ----------
   The sentence is real markup, so with no JS or with reduced motion it simply
   sits there fully written. The caret only exists while it is being typed. */
/* ⚠️ This line sits in the DARK hero, not on paper. It was var(--ink) on a
   var(--ink) background: contrast 1.00, completely invisible. Rose measures
   9.7:1 here and reads as a deliberate highlight against the cream lede. */
.typeline { color: #f4b3bd; font-weight: 700; }
/* Armed but not yet typing: the words still hold their space so the
   paragraph never changes height, but they are not readable, so the
   sentence is never shown in full and then wiped. */
.typeline.is-armed { color: transparent; }
.typeline.is-typing::after,
.typeline.is-typed::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.14em;
  background: currentColor;
}
.typeline.is-typing::after { animation: tl-caret 0.85s steps(1, end) infinite; }
.typeline.is-typed::after { opacity: 0; }
@keyframes tl-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .typeline.is-typing::after, .typeline.is-typed::after { display: none; }
}

/* ---------- syllabus video squares (pro-course) ----------
   Four of the ten subjects carry a small rounded square of Aisha actually doing
   that work, reusing the homepage module clips. Poster plus a play badge rather
   than four autoplaying videos, which would be a real cost on a phone; tapping
   opens the same lightbox the homepage deck uses. */
.tp-clip {
  display: block;
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 26px;
  overflow: hidden;
  cursor: pointer;
  background: var(--blush-deep);
  box-shadow: 0 6px 18px rgba(36, 26, 28, 0.14);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tp-clip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-clip:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 24px rgba(36, 26, 28, 0.2); }
.tp-clip:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
.tp-play {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(251, 246, 243, 0.92);
  color: var(--rouge);
  font-size: 10px;
  line-height: 26px;
  text-align: center;
  padding-left: 2px;
}
@media (min-width: 720px) {
  .tp-clip { width: 116px; height: 116px; border-radius: 29px; }
}

/* ---------- centre-focused stat slider (pro-course) ----------
   Card is 4/6 of the frame, so the two strips left over are exactly 1/6 each:
   one sixth of the previous card on the left, one sixth of the next on the
   right, main card in between. The three transform values are 100% apart,
   which is one card width, so the cards sit edge to edge with no arithmetic.

   Everything below only applies once JS has added .is-live. Without it the
   three numbers stay a plain stacked column, which is also what a
   reduced-motion visitor gets. */
.stat-slider { margin-top: 26px; }
.stat-view { display: grid; gap: 14px; }

.stat-slider.is-live .stat-view {
  display: block;
  position: relative;
  overflow: hidden;
  /* Room for the lifted centre card's shadow, trimmed back off the sides so
     the 1/6 peeks still touch the frame edges. */
  padding: 10px 0 14px;
  margin: -10px 0 -14px;
}
.stat-slider.is-live .stat-card {
  position: absolute;
  top: 10px;
  left: 0;
  width: 66.6667%;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.45s ease, filter 0.45s ease;
  will-change: transform;
}
/* The visible surface is inset rather than the card being narrowed, so the
   1/6 maths above stays exact while the cards still read as separate. */
.stat-slider.is-live .stat-card > * { position: relative; }
.stat-slider.is-live .stat-card {
  padding: 22px 20px;
  margin: 0;
  border-radius: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(36, 26, 28, 0.05);
}
.stat-slider.is-live .stat-card.is-centre {
  transform: translateX(25%) scale(1);
  opacity: 1;
  z-index: 2;
  box-shadow: 0 10px 26px rgba(36, 26, 28, 0.14);
  cursor: default;
}
.stat-slider.is-live .stat-card.is-left {
  transform-origin: right center;
  transform: translateX(-75%) scale(0.94);
  opacity: 0.5;
  z-index: 1;
  cursor: pointer;
}
.stat-slider.is-live .stat-card.is-right {
  transform-origin: left center;
  transform: translateX(125%) scale(0.94);
  opacity: 0.5;
  z-index: 1;
  cursor: pointer;
}
.stat-slider.is-live .stat-num { display: block; }
.stat-slider.is-live .stat-label { display: block; }

.stat-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.stat-arrow {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--rouge);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.stat-arrow:hover { background: var(--rouge); color: var(--paper); border-color: var(--rouge); }
.stat-arrow:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }
.stat-dots { display: flex; gap: 8px; flex: 1 1 auto; justify-content: center; }
.stat-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.stat-dot.on { background: var(--rouge); transform: scale(1.35); }
.stat-dot:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }

/* ---------- who teaches you (pro-course) ----------
   The photo FLOATS, so the label, the heading and the prose all wrap around it:
   the lines beside it run short and the ones below it run the full width. It
   stays floated on a phone as well, deliberately, so this reads as one block at
   every size instead of collapsing into text-then-photo. Arch crop is the same
   one .video-frame uses elsewhere on the site. */
.teach::after { content: ""; display: block; clear: both; }
.teach-photo {
  float: right;
  width: 42%;
  max-width: 250px;
  margin: 2px 0 14px 18px;
  aspect-ratio: 4 / 5;
}
.teach-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 50% 50% 0 0 / 22% 22% 0 0;
}
/* The slider's cards are absolutely positioned, so it has to start below the
   float rather than sliding underneath the photo. */
.teach .stat-slider { clear: both; }
@media (min-width: 720px) {
  .teach-photo { width: 32%; margin: 4px 0 20px 30px; }
}

/* ---------- perk cards (pro-course "what you get") ----------
   Was eight plain checkmark bullets, which read as a list rather than as what
   you are buying. Six cards instead, each with its own stroke icon.
   Only THREE tints, rotating, rather than six different ones: six colours on
   one screen stops being a palette and starts being confetti. No accent
   borders or left rules — the tint is the separation. */
.perks {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 30px 0 0;
  padding: 0;
}
.perk {
  padding: 22px 20px 24px;
  border-radius: 22px;
  background: var(--blush);
}
.perk:nth-child(3n+2) { background: #f7ece1; }   /* warm bronze tint */
.perk:nth-child(3n)   { background: #f3e9ec; }   /* soft mauve tint  */
.perk-ico { display: block; width: 42px; height: 42px; }
.perk-ico svg { width: 100%; height: 100%; display: block; }
.perk h3 {
  font-family: "Italiana", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  margin: 12px 0 7px;
}
.perk p { color: var(--mauve); font-size: 15.5px; line-height: 1.6; }

@media (min-width: 560px) {
  .perks { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (min-width: 900px) {
  .perks { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .perk { padding: 28px 26px 30px; }
}

/* ---------- perk card photos ----------
   The picture is BLED into the card tint with a mask rather than dropped in as
   a rectangle: solid at the outer edge, gone before it reaches the words. That
   is the whole point — it should look like part of the card's background on one
   side, not like the card's whole background and not like a pasted-in photo.
   Side alternates so six cards do not march down the page identically. */
.perk { position: relative; overflow: hidden; }
.perk > *:not(.perk-photo) { position: relative; z-index: 1; }
.perk-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 54%;   /* wider than the visible strip on purpose, see the mask note below */
  z-index: 0;
  pointer-events: none;
}
.perk-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fades toward the text. Ends well before the words, so nothing is ever read
   against picture detail. */
.perk-photo {
  /* The box is 62% of the card, but the gradient is sized to a NARROWER 68%
     of that box, so by the time it reaches the box's own left edge it is
     already fully transparent -- the clip removes nothing visible, no seam.
     Curved on purpose (an ellipse, not a straight edge): the boundary line
     between "photo" and "gone" is an arc, so it reads as sunk into the card
     rather than cut out of it. */
  -webkit-mask-image: radial-gradient(95% 150% at 100% 50%, #000 50%, rgba(0,0,0,0.65) 70%, transparent 90%);
          mask-image: radial-gradient(95% 150% at 100% 50%, #000 50%, rgba(0,0,0,0.65) 70%, transparent 90%);
}
.perk:nth-child(even) .perk-photo {
  right: auto;
  left: 0;
  -webkit-mask-image: radial-gradient(95% 150% at 0% 50%, #000 50%, rgba(0,0,0,0.65) 70%, transparent 90%);
          mask-image: radial-gradient(95% 150% at 0% 50%, #000 50%, rgba(0,0,0,0.65) 70%, transparent 90%);
}
/* Keep the words clear of the solid part of the picture. */
.perk { padding-right: 40%; }
.perk:nth-child(even) { padding-right: 20px; padding-left: 40%; }

@media (min-width: 900px) {
  .perk { padding-right: 38%; }
  .perk:nth-child(even) { padding-right: 26px; padding-left: 38%; }
}

/* Per-card crop. These are 9:16 reel frames shown in a tall narrow strip, so
   the default centre crop does not always land on the subject. Card 5's centre
   is a white wardrobe, which vanishes against the cream tint and made the card
   look like it had no picture at all. */
.perk .perk-photo img { object-position: center 42%; }
.perk:nth-child(5) .perk-photo img { object-position: 38% 74%; }
.perk:nth-child(6) .perk-photo img { object-position: center 38%; }

/* ---------- payment details popup ---------- */
.lb-more {
  display: inline-block;
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14.5px;
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.launch-band .lb-more { color: #f6d9de; }
.launch-band .lb-more:hover { color: var(--paper); }
.tint .lb-more { color: var(--rouge); }
.tint .lb-more:hover { color: var(--rouge-dark); }

.pay-modal {
  position: fixed;
  inset: 0;
  z-index: 410;   /* one above .lightbox (400), so it always wins if both exist */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(36, 26, 28, 0.62);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.pay-modal[hidden] { display: none; }
.pay-modal.open { opacity: 1; }
.pay-modal-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--paper);
  border-radius: 26px;
  padding: 34px 26px 28px;
  transform: translateY(14px) scale(0.97);
  transition: transform 0.24s ease;
}
.pay-modal.open .pay-modal-card { transform: none; }
.pay-modal-card h2 { font-size: clamp(22px, 5.4vw, 28px); margin: 6px 0 22px; max-width: none; }
.pay-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
}
.pay-modal-close:hover { background: var(--blush); }

.pay-steps { list-style: none; margin: 0 0 20px; padding: 0; }
.pay-steps li { display: flex; gap: 14px; align-items: flex-start; }
.pay-steps li + li { margin-top: 16px; }
.pay-step-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rouge);
  color: var(--paper);
  font-weight: 700;
  font-size: 14px;
  line-height: 28px;
  text-align: center;
}
.pay-steps strong { font-size: 16.5px; }
.pay-steps p { margin-top: 3px; color: var(--mauve); font-size: 14.5px; line-height: 1.55; }

.pay-note-block {
  margin: 0 0 24px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--blush);
}
.pay-note-block p { font-size: 14px; line-height: 1.55; color: var(--ink); }
.pay-note-block p + p { margin-top: 10px; }
.pay-note-block strong { color: var(--rouge-dark); }

.pay-modal-card .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- fact feature list (pro-course "Everything in one place") ----------
   Owner sent a screenshot as a design reference: small photo with a round
   icon badge overlapping its top-left corner, a small caps label above the
   whole row, a divider line, then a heading and body text beside the photo.
   That HTML never actually existed on any deployed version of this site (checked
   all 50) -- almost certainly an old, un-refreshed browser tab (the screenshot
   shows 72 open tabs) showing a mockup, not a page that was ever live. Built
   fresh from the description/photo rather than restoring anything.
   Photos are REAL site assets, not staged prop shots like the reference's
   handwritten notepad or lettered mirror -- inventing that kind of prop photo
   would be fabricated content. Capped at 5 rows per the owner's "5-6 maximum".
   Fee and the cancel-policy facts are deliberately NOT here: both are already
   covered in full by the payment modal and the sticky book bar right below,
   and neither has a natural photo, so repeating them as a row would only
   duplicate the modal. */
.fact-feature { list-style: none; margin: 30px 0 0; padding: 0; max-width: 620px; }
.fact-feat { padding: 26px 0; border-top: 1px solid var(--line); }
.fact-feat:first-child { border-top: none; padding-top: 0; }
.fact-feat-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mauve);
  margin: 0 0 14px;
}
.fact-feat-row { display: flex; gap: 20px; align-items: flex-start; }
/* ⚠️ The badge deliberately overlaps this box's own top-left corner (see
   .fact-feat-badge below), so the CROP mask has to live on an INNER element,
   never on .fact-feat-photo itself — an overflow:hidden here would slice off
   the very part of the badge that is supposed to sit outside the photo. */
.fact-feat-photo {
  position: relative;
  flex: 0 0 auto;
  width: 104px;
  height: 104px;
}
.fact-feat-crop {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
}
.fact-feat-crop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fact-feat-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--rouge);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(36, 26, 28, 0.28);
}
.fact-feat-badge svg { width: 21px; height: 21px; }
.fact-feat-body {
  flex: 1 1 auto;
  padding-left: 20px;
  border-left: 1px solid var(--line);
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fact-feat-body h3 {
  font-family: "Italiana", serif;
  font-weight: 400;
  font-size: clamp(19px, 4.6vw, 23px);
  line-height: 1.2;
  margin: 0 0 6px;
}
.fact-feat-body p { color: var(--mauve); font-size: 14.5px; line-height: 1.55; margin: 0; }

@media (min-width: 560px) {
  .fact-feat-photo { width: 124px; height: 124px; }
  .fact-feat-crop { border-radius: 22px; }
  .fact-feat-body { min-height: 100px; }
}

/* ---------- zigzag syllabus summary (pro-course) ----------
   Three cards, one per part, sitting above the detailed ten-subject list as a
   short "at a glance" version. Owner asked for "different shapes... a little
   unique in terms of its own nature" compared to the .stat-card style already
   on the page: same paper/shadow elevation language, but each card gets ITS
   OWN corner treatment (one heavy top-left, one heavy bottom-right, one
   symmetric) so no two read as the same stamped-out component, and they
   stagger left/right down the page on desktop for the zigzag the name asks
   for. On a phone there is no room to stagger sideways, so they stack plainly
   -- the shape variation and shadow still carry the "unique per card" feel. */
.zig-parts {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.zig-card {
  position: relative;
  background: var(--paper);
  padding: 26px 24px 24px;
  box-shadow: 0 10px 28px rgba(36, 26, 28, 0.10);
}
.zig-card .part-num { margin: 0; }
.zig-card h3 {
  font-family: "Italiana", serif;
  font-weight: 400;
  font-size: 24px;
  margin: 6px 0 6px;
}
.zig-note { color: var(--mauve); font-size: 14.5px; margin: 0 0 14px; }
.zig-num {
  position: absolute;
  top: 20px;
  right: 22px;
  font-family: "Italiana", serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--bronze);
}
.zig-points {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.zig-points li {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  background: var(--blush);
  padding: 6px 12px;
  border-radius: 999px;
}

/* Each card's own corner shape. */
.zig-1 { border-radius: 8px 34px 8px 8px; }
.zig-2 { border-radius: 8px 8px 8px 34px; }
.zig-3 { border-radius: 20px; }
.zig-2 .zig-points li { background: #f7ece1; }   /* matches the .perk bronze tint */
.zig-3 .zig-points li { background: #f3e9ec; }   /* matches the .perk mauve tint */

@media (min-width: 800px) {
  .zig-parts { gap: 30px; }
  .zig-card { width: 82%; padding: 32px 30px 28px; }
  /* The zigzag: alternating side + a small rotation, so it reads as placed
     rather than as three copies of one card nudged sideways. */
  .zig-1 { align-self: flex-start; transform: rotate(-0.6deg); }
  .zig-2 { align-self: flex-end; transform: rotate(0.7deg); }
  .zig-3 { align-self: flex-start; margin-left: 9%; transform: rotate(-0.4deg); }
}

/* ---------- admissions band (pro-course) ----------
   The homepage announces this same batch in a full-bleed RED band. Repeating
   that here would read as one component pasted onto two pages, so this is
   deliberately its inverse: the page's own warm white (--paper), with the
   weight carried by cards of four different SIZES rather than by a colour
   block. Four rows, each a different kind of element -- heading, one big date
   card beside two small stat cards, a flat payment strip, then a closing line
   with the actions -- so it reads as a blend, not one card style repeated.
   Colour follows the .perk confetti rule: rouge fills exactly ONE card (the
   date, which should be the loudest thing here), the two minis reuse the
   blush and bronze tints already on this page, and the pay strip borrows the
   paper-and-shadow elevation of .zig-card. No accent borders, no left rules:
   surface and size do all the separating. */
.adm {
  position: relative;
  overflow: hidden;
  background-color: var(--paper);
  /* The homepage band gets its depth from a radial bloom over flat colour.
     Same trick, opposite key: a faint blush bloom over the warm white, so this
     reads as its own panel between two plain paper neighbours without adding
     another background colour to the site. */
  background-image: radial-gradient(74% 96% at 90% 2%, rgba(236, 211, 200, 0.62), rgba(236, 211, 200, 0) 60%);
}
.adm > .wrap { position: relative; z-index: 1; }
.adm-head h2 { max-width: 13em; }
.adm-lede { color: var(--mauve); max-width: 34em; }

/* One shared eyebrow for the cards. Not .stroke-label: that class carries the
   particle-assembly treatment and a drawn bar, which belongs to section
   headings, not to labels sitting inside a card. */
.adm-tag {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mauve);
}

/* Row 2: one large, two small. */
.adm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 30px;
}
.adm-date {
  position: relative;
  overflow: hidden;
  padding: 24px 22px 26px;
  border-radius: 26px 26px 26px 8px;
  color: var(--paper);
  background-color: var(--rouge);
  background-image:
    radial-gradient(62% 120% at 84% 16%, rgba(243, 226, 218, 0.34), rgba(243, 226, 218, 0) 66%),
    linear-gradient(104deg, var(--rouge-dark) 0%, var(--rouge) 62%, #b83a4b 100%);
}
.adm-date .adm-tag { color: #f0ccd1; }
.adm-day {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 12px 0 0;
}
.adm-dnum {
  font-family: "Italiana", serif;
  font-size: clamp(64px, 19vw, 94px);
  line-height: 0.86;
}
.adm-dmon {
  font-family: "Italiana", serif;
  font-size: clamp(24px, 6.4vw, 32px);
  line-height: 1.05;
}
.adm-dmon em {
  display: block;
  margin-top: 7px;
  font-family: "Karla", sans-serif;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #f0ccd1;
}
.adm-dnote {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(251, 246, 243, 0.32);
  max-width: 24em;
  font-size: 15px;
  line-height: 1.55;
  color: #f4dee1;
}
.adm-mini { padding: 20px 20px 22px; }
.adm-mini-a { background: var(--blush); border-radius: 18px 18px 18px 34px; }
.adm-mini-b { background: #f7ece1; border-radius: 34px 18px 18px 18px; }
.adm-mnum {
  display: block;
  font-family: "Italiana", serif;
  font-size: 40px;
  line-height: 1;
  color: var(--rouge);
}
.adm-mini-b .adm-mnum { color: var(--bronze); }
.adm-mlab {
  display: block;
  margin-top: 9px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mauve);
}

/* Row 3: the money, as a sequence rather than three equal cards, so it reads
   in the order it is actually paid. */
.adm-pay {
  margin-top: 14px;
  padding: 24px 22px 22px;
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 10px 28px rgba(36, 26, 28, 0.10);
}
.adm-steps {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 14px 0 0;
  padding: 0;
}
.adm-steps li { padding: 14px 0; border-top: 1px solid var(--line); }
.adm-steps li:first-child { padding-top: 0; border-top: none; }
.adm-amt {
  display: block;
  font-family: "Italiana", serif;
  font-size: 30px;
  line-height: 1.05;
}
.adm-total .adm-amt { color: var(--rouge); }
.adm-sub {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mauve);
}
.adm .lb-more { margin-top: 16px; color: var(--rouge); }
.adm .lb-more:hover { color: var(--rouge-dark); }

/* Row 4: the one thing here that is not a card. */
.adm-foot {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 26px;
}
.adm-foot-note { margin: 0; max-width: 30em; font-size: 15.5px; color: var(--mauve); }
.adm-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (min-width: 760px) {
  /* The size contrast lives here: the date card holds the left column across
     both rows, the two minis stack down the narrower right one. */
  .adm-grid {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 16px;
  }
  .adm-date { grid-column: 1; grid-row: 1 / span 2; padding: 32px 30px 34px; }
  .adm-mini { padding: 22px 22px 24px; }
  .adm-pay { margin-top: 16px; padding: 28px 30px 26px; }
  .adm-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .adm-steps li { padding: 14px 0 0; border-top: 1px solid var(--line); }
  .adm-steps li:first-child { padding-top: 14px; border-top: 1px solid var(--line); }
  .adm-foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    margin-top: 30px;
  }
}

/* The second mini is deliberately NOT the first one again: the number sits
   BESIDE its line rather than above it, so even the two smallest cards are two
   different elements instead of one component used twice. */
.adm-mini-b { display: flex; align-items: baseline; gap: 14px; }
.adm-mini-b .adm-mnum { flex: none; font-size: 32px; }
.adm-mini-b .adm-mlab { min-width: 0; margin-top: 0; }