/* ===========================================================================
   test-sept-2026 — "Pain, Prolapse and Pelvic Tension" workshop page
   Built from Figma: RYC® Schubiner → frame "desktop" (2:3891), 1440 wide.

   Header and footer come from the live site (copied from the workshop page's
   build), so their CSS lives in the inlined <style> in index.html. Everything
   below is ONLY the new content sections. Class prefix `sb-` keeps it clear of
   Elementor's namespace.

   Every size/colour is the Figma value unless a comment says otherwise.
   =========================================================================== */

/* --- Fonts ------------------------------------------------------------------
   Self-hosted variable fonts (one file per family covers every weight used:
   Montserrat 400/500/700/800, Fraunces 600/700).

   Registered under their OWN family names ("Montserrat VF", "Fraunces VF"), not
   "Montserrat"/"Fraunces". The shell declares those two families too, from the
   live origin, with one static face per weight — and when both families share
   a name Chrome picked the shell's exact-weight faces over this variable one,
   then failed on CORS the moment the copy is served from anywhere but
   restoreyourcore.com, and the whole page fell back to Helvetica. A distinct
   name means nothing to compete with. The real family names stay in the stack
   as a fallback for the live origin, where the shell's faces do load. */
@font-face {
  font-family: "Montserrat VF";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces VF";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-variable.woff2") format("woff2");
}

/* --- Tokens ---------------------------------------------------------------- */
:root {
  --sb-red: #FF073B;
  --sb-text: #333333;
  --sb-black: #000000;
  --sb-white: #FFFFFF;
  --sb-container: 1200px;       /* 1440 - 120 - 120 */
  --sb-font: "Montserrat VF", "Montserrat", sans-serif;
  --sb-serif: "Fraunces VF", "Fraunces", serif;
}

/* --- Base ------------------------------------------------------------------ */
.sb-page { font-family: var(--sb-font); color: var(--sb-text); -webkit-font-smoothing: antialiased; }
.sb-page *, .sb-page *::before, .sb-page *::after { box-sizing: border-box; }
.sb-page p, .sb-page h1, .sb-page h2, .sb-page h3 { margin: 0; }
/* The shell (Elementor) declares `.elementor img { border-radius:0; box-shadow:none }`
   at (0,1,1), and every section here sits inside the wp-page div that carries
   `.elementor`. Image rules below are therefore scoped under .sb-page so they
   land at (0,2,0) and win — a bare `.sb-person__photo` would lose its circle. */
.sb-page img { display: block; max-width: 100%; }
.sb-page b, .sb-page strong { font-weight: 700; }
.sb-red { color: var(--sb-red); }

.sb-section { position: relative; width: 100%; overflow: hidden; }
.sb-container { width: 100%; max-width: var(--sb-container); margin: 0 auto; padding: 0 20px; }

/* Section heading: Montserrat 700 40/48, centred, black. */
.sb-h2 { font-size: 40px; line-height: 48px; font-weight: 700; color: var(--sb-black); text-align: center; }

/* Body copy: Montserrat 400 15/25. */
.sb-body { font-size: 15px; line-height: 25px; font-weight: 400; color: var(--sb-text); }
/* The shell's theme CSS sets `body, p { font-size: 18px }`, and a bare <p> matches
   that directly — so it would NOT inherit the 15px set on .sb-body. Force it. */
.sb-body p { font-size: inherit; line-height: inherit; color: inherit; }   /* colour too: the theme paints p #333 directly, and .sb-teacher__bio is #000 */
.sb-body p + p { margin-top: 14px; }   /* Figma paragraphSpacing: 14 on desktop (4 on mobile, below) */

/* CTA button: 191x40, gradient #FF073B→#FF7262, r=12, pad 0 18, gap 8,
   Montserrat 700 15/23 white, chevron 6x11. */
.sb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 12px;
  background: linear-gradient(90deg, #FF073B 0%, #FF7262 100%);
  color: var(--sb-white); font-family: var(--sb-font); font-size: 15px; line-height: 23px; font-weight: 700;
  text-decoration: none !important; white-space: nowrap;
  transition: filter .2s ease, transform .2s ease;
}
.sb-btn:hover { filter: brightness(1.06); transform: translateY(-1px); color: var(--sb-white); }
.sb-btn svg { width: 6px; height: 11px; flex: 0 0 auto; }

/* Small note under a CTA: Montserrat 400 12/20. */
.sb-note { font-size: 12px; line-height: 20px; font-style: italic; text-align: center; color: var(--sb-text); }

/* ===========================================================================
   1. Top bar — 1440x58, gap 8, pad 15 0, centred
   =========================================================================== */
.sb-topbar {
  /* Sticky: stays pinned at the top while the page scrolls; the site header
     (z-index 11) and the mobile menu pass beneath it. */
  position: sticky; top: 0; z-index: 100;
  min-height: 58px; padding: 15px 20px;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  background:
    url("../images/top-banner.webp") center / cover no-repeat,
    linear-gradient(90deg, #F6F2F1 0%, #FAE5E0 41%, #FFD3C9 100%);
}
.sb-topbar__pill {
  display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 8px;
  background: var(--sb-red); color: var(--sb-white);
  font-size: 16px; line-height: 19.5px; font-weight: 700; letter-spacing: 0.16px; white-space: nowrap;
}
.sb-topbar__text { font-size: 18px; line-height: 26px; letter-spacing: 0.18px; color: var(--sb-text); text-align: center; }

/* ===========================================================================
   3. Hero — 1440x532, pad 60 358, gap 30
   =========================================================================== */
/* Desktop background is the supplied bg-hero.webp — the Figma frame's
   gradient, "R" logo mark and blurred ellipse baked into one 4320x1597 export
   (3x of 1440x532), covered and centred so wider screens crop the edges.
   Below 767px the supplied m-bg-hero.webp takes over. */
.sb-hero {
  padding: 60px 20px;
  background: url("../images/bg-hero.webp") center / cover no-repeat, #FFFBF8;
}
.sb-hero__inner { position: relative; z-index: 1; max-width: 815px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.sb-hero__title { font-size: 48px; line-height: 58.5px; font-weight: 800; color: var(--sb-black); text-align: center; }

/* Grid, not flex: the same four children (pill, para, people, cta) reorder
   between desktop and mobile. Desktop: 306px lead column | people column,
   lead items stacked with the 23px gap, people vertically centred beside them. */
.sb-hero__row {
  display: grid; grid-template-columns: 306px auto; column-gap: 43px; row-gap: 23px;
  grid-template-areas: "pill people" "para people" "cta people";
  justify-content: center; align-items: start; width: 100%;
}
.sb-hero__pill   { grid-area: pill;   justify-self: center; }
.sb-hero__para   { grid-area: para;   justify-self: center; }
.sb-hero__cta    { grid-area: cta;    justify-self: center; }
.sb-hero__people { grid-area: people; align-self: center; }

/* Date pill: white, r=32, shadow 0 1 12 rgba(255,7,59,.39), pad 3 12, gap 8. */
.sb-date-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px; border-radius: 32px;
  background: var(--sb-white); box-shadow: 0 1px 12px rgba(255, 7, 59, 0.39);
  color: var(--sb-red); font-size: 12px; line-height: 20px; font-weight: 700; white-space: nowrap;
}
.sb-date-pill img { width: 12px; height: 12px; }

.sb-hero__para { font-size: 18px; line-height: 26px; text-align: center; color: var(--sb-text); max-width: 306px; }
.sb-hero__cta { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 211px; }   /* Figma frame 211 wide: the note wraps to two lines */

/* Two people: each column 245 wide, columns overlap by 29px (Figma gap -29). */
.sb-hero__people { display: flex; align-items: flex-start; }
.sb-person { width: 245px; display: flex; flex-direction: column; align-items: center; }
.sb-person + .sb-person { margin-left: -29px; }
/* The <img> is a transparent cut-out; the #B8DAEE disc behind it is this
   background, exactly the solid fill Figma paints under the image fill. */
.sb-page .sb-person__photo {
  width: 170px; height: 170px; border-radius: 50%; object-fit: cover; background: #B8DAEE;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.10), 0 5px 7.5px rgba(0, 0, 0, 0.10);
}
.sb-person__meta { display: flex; flex-direction: column; align-items: center; gap: 9.5px; margin-top: -5px; }
.sb-person__name {
  display: inline-block; padding: 4.8px 19px; border-radius: 4.8px;
  background: rgba(255, 255, 255, 0.30); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--sb-black); font-size: 14.3px; line-height: 20.3px; font-weight: 700; white-space: nowrap;
}
.sb-person__role { font-size: 11px; line-height: 20px; color: var(--sb-black); text-align: center; max-width: 203px; }

/* ===========================================================================
   4. Living with pelvic pain — 1440x555, white, pad 70 0, gap 30
   =========================================================================== */
.sb-living { padding: 70px 20px; background: var(--sb-white); }
.sb-living__inner { max-width: 1124px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.sb-living .sb-h2 { max-width: 790px; }
.sb-living__row { display: flex; align-items: center; justify-content: center; gap: 62px; width: 100%; }
.sb-page .sb-living__photo {
  width: 401px; height: 289px; flex: 0 0 401px; border-radius: 27px; object-fit: cover;
  box-shadow: 0 0 21px rgba(251, 44, 54, 0.20);
}
.sb-living__text { max-width: 581px; }

/* ===========================================================================
   5. Quote strip — 1440x130, pad 40 0
   =========================================================================== */
.sb-quote {
  padding: 40px 20px;
  background:
    url("../images/bg-section-2.webp") center / cover no-repeat,
    linear-gradient(90deg, #FFF1EF 0%, #E2F4FF 100%);
}
/* Figma's base style on this node says 18/26, but every character carries a
   15/25 override — the effective size is 15/25, and that is what makes it fit
   two lines in 829px. */
.sb-quote p { max-width: 829px; margin: 0 auto; font-size: 15px; line-height: 25px; font-weight: 700; color: #2E2E2E; text-align: center; }

/* ===========================================================================
   6. In this workshop you will — 1440x428, pad 70 0, gap 29
   =========================================================================== */
.sb-will {
  padding: 70px 20px;
  background: var(--sb-white);   /* Figma: #FFFFFF; the supplied bg-section-3.webp was blank white */
}
.sb-will__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 29px; }
.sb-will__cols { display: flex; justify-content: space-between; gap: 30px; width: 100%; }
.sb-will__col { width: 563px; flex: 0 1 563px; display: flex; flex-direction: column; gap: 12px; }
.sb-will__item { display: flex; align-items: flex-start; gap: 9px; }
.sb-will__item img { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 3px; }

/* ===========================================================================
   7. This workshop is for you if — 1440x345, pad 70 120, gap 35
   =========================================================================== */
/* Figma: solid #E2F4FF at 40%. The supplied bg-section-4.webp was that same flat
   colour exported as a bitmap — layered over this it doubled the tint. */
.sb-foryou {
  padding: 70px 120px;
  background: rgba(226, 244, 255, 0.40);
}
.sb-foryou__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 35px; }
.sb-foryou__cols { display: flex; justify-content: space-between; gap: 12px; width: 100%; }
.sb-foryou__col { width: 254px; flex: 0 1 254px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sb-foryou__icon {
  width: 30px; height: 30px; border-radius: 50%; background: #CAEBFF;
  display: flex; align-items: center; justify-content: center;
}
.sb-foryou__icon img { width: 30px; height: 30px; }
.sb-foryou__col p { font-size: 12px; line-height: 20px; text-align: center; color: var(--sb-text); }
.sb-foryou__col b { color: var(--sb-red); }

/* ===========================================================================
   8. What happens in the two hours — 1440x520, pad 70 0, gap 39
   =========================================================================== */
/* Figma handles (0.74,0.56)→(0.76,0.00): the gradient runs UPWARD — solid white
   from 56% down to the bottom, fading to #E2F4FF at the top edge. That top edge
   is the same blue as the section above, which is why the two read as one
   continuous background in the design. */
.sb-hours { padding: 70px 20px; background: linear-gradient(180deg, #EDF8FF 0%, #FFFFFF 40%); }
/* Measured off Figma's own render rather than the handles: R channel 237 at the
   top edge → 255 (white) by 40% of the height, then white to the bottom.
   #EDF8FF is #E2F4FF at 62% over white. The handles alone would give a darker,
   longer fade (full #E2F4FF at the top, white only by 56%). */
.sb-hours__inner { display: flex; flex-direction: column; align-items: center; gap: 39px; }
.sb-hours__head { display: flex; flex-direction: column; align-items: center; gap: 13px; }
.sb-hours__sub { font-size: 18px; line-height: 26px; font-weight: 700; color: var(--sb-text); text-align: center; }
.sb-hours__cards { display: flex; justify-content: center; align-items: flex-start; gap: 19px; width: 100%; }

/* Card: 492 wide, white 80%, r=20, 1px #FCCABA, shadow 0 0 10 #FFD1CC, pad 28, gap 9. */
.sb-card {
  width: 492px; flex: 0 1 492px; padding: 28px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.80); border: 1px solid #FCCABA; box-shadow: 0 0 10px #FFD1CC;
  display: flex; flex-direction: column; gap: 9px;
}
.sb-card__head { display: flex; align-items: center; gap: 12px; }
.sb-page .sb-card__avatar {
  width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex: 0 0 50px; background: #B8DAEE;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.10), 0 5px 7.5px rgba(0, 0, 0, 0.10);
}
.sb-card__label { font-size: 12px; line-height: 20px; font-weight: 700; letter-spacing: 1.56px; text-transform: uppercase; color: var(--sb-red); }
.sb-card__title { font-family: var(--sb-serif); font-size: 20px; line-height: 24.7px; font-weight: 700; color: var(--sb-text); margin-top: -1px; }
.sb-card__body { font-size: 12px; line-height: 20px; color: var(--sb-text); }

/* ===========================================================================
   9. Your teachers — 1440x762, pad 70 0, gap 39
   =========================================================================== */
.sb-teachers {
  padding: 70px 20px;
  background:
    url("../images/bg-section-6.webp") center / cover no-repeat,
    linear-gradient(188deg, #F5F1F1 0%, #FFFFFF 56%);   /* Figma handles (0.50,0)→(0.42,0.56) */
}
.sb-teachers__inner { max-width: 1135px; margin: 0 auto; display: flex; flex-direction: column; gap: 39px; }
.sb-teacher { display: flex; align-items: center; gap: 102px; }
.sb-teacher__text { flex: 1 1 786px; max-width: 786px; display: flex; flex-direction: column; gap: 14px; }
.sb-page .sb-teacher__photo { width: 247px; height: 268px; flex: 0 0 247px; border-radius: 30px; object-fit: cover; }

/* "YOUR TEACHERS" label: white pill, r=10, shadow 0 12 24 rgba(0,0,0,.05),
   pad 6 13, Montserrat 700 12/14.6, ls 4. */
.sb-teacher__label {
  align-self: flex-start; display: inline-block; padding: 6px 13px; border-radius: 10px;
  background: var(--sb-white); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
  color: var(--sb-red); font-size: 12px; line-height: 14.6px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
}
.sb-teacher__name { font-family: var(--sb-serif); font-size: 30px; line-height: 37px; font-weight: 600; color: var(--sb-black); }
.sb-teacher__bio { color: var(--sb-black); }

/* ===========================================================================
   10. Closing CTA — 1440x478, pad 70 358, image bg
   =========================================================================== */
.sb-closing {
  padding: 70px 20px;
  background: url("../images/bg-last-section.webp") center / cover no-repeat, #89A9BB;
}
/* Glass card: 724 wide, #212121 @40%, r=30, blur, pad 29 17, gap 26. */
.sb-closing__card {
  max-width: 724px; margin: 0 auto; padding: 29px 17px; border-radius: 30px;
  background: rgba(33, 33, 33, 0.40); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: flex; flex-direction: column; align-items: center; gap: 26px; color: var(--sb-white);
}
.sb-closing__head { display: flex; flex-direction: column; align-items: center; gap: 11px; max-width: 607px; }
/* "Join us live" pill: gradient #F9E7E3→#FFF, r=20.4, 1.28px white border,
   white glow, pad 7 16, gap 7, Montserrat 500 12/20 red. */
.sb-closing__pill {
  /* Figma frame is a fixed 23px tall with the 20px line centred in it (its
     declared 7px padding cannot apply — 7+20+7 would be 34). */
  display: inline-flex; align-items: center; gap: 7px; height: 23px; padding: 0 16px; border-radius: 20.4px;
  background: linear-gradient(90deg, #F9E7E3 0%, #FFFFFF 100%);
  border: 1.28px solid #FFFFFF; box-shadow: 0 0 12.8px #FFFFFF;
  color: var(--sb-red); font-size: 12px; line-height: 20px; font-weight: 500; white-space: nowrap;
}
.sb-closing__pill img { width: 12px; height: 12px; }
.sb-closing__title { font-size: 24px; line-height: 34px; font-weight: 800; text-align: center; color: var(--sb-white); }
.sb-closing__sub { font-size: 18px; line-height: 26px; font-weight: 700; text-align: center; color: var(--sb-white); }
.sb-closing__date {
  display: inline-block; padding: 0 16px; border-radius: 32px; border: 1px solid #FFFFFF;
  font-size: 15px; line-height: 25px; font-weight: 700; color: var(--sb-white); white-space: nowrap;
}
.sb-closing__cta { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sb-closing__cta .sb-note { color: var(--sb-white); }

/* ===========================================================================
   Responsive
   ---------------------------------------------------------------------------
   MOBILE (≤767px) is a 1:1 port of the Figma mobile frame (node 30:170, 430
   wide, content 390): every size, gap and background below comes from it.
   Backgrounds swap to the m-*.webp files supplied for that frame.

   TABLET (768–1239px) is NOT in the Figma file. Those rules are judgement:
   they narrow the desktop layout without letting anything overflow.
   =========================================================================== */

/* ---------------------------------------------------------------- tablet -- */
@media (max-width: 1239px) {
  .sb-foryou { padding-left: 20px; padding-right: 20px; }
  .sb-will__cols { gap: 24px; }
  .sb-will__col { flex: 1 1 0; width: auto; }
  .sb-foryou__cols { flex-wrap: wrap; justify-content: center; gap: 24px 12px; }
  .sb-foryou__col { flex: 0 1 calc(50% - 6px); width: auto; }
  .sb-teacher { gap: 48px; }
  .sb-teacher__text { flex: 1 1 0; }
}
@media (max-width: 1023px) {
  .sb-h2 { font-size: 34px; line-height: 42px; }
  .sb-hero__title { font-size: 40px; line-height: 50px; }
  .sb-hero__row { grid-template-columns: 1fr; grid-template-areas: "pill" "para" "people" "cta"; row-gap: 24px; }
  .sb-hero__people { justify-self: center; }
  .sb-living__row { flex-direction: column; gap: 32px; }
  .sb-living__photo { flex-basis: auto; width: 100%; max-width: 401px; height: auto; aspect-ratio: 401 / 289; }
  .sb-hours__cards { flex-direction: column; align-items: center; }
  .sb-card { width: 100%; flex-basis: auto; max-width: 492px; }
  .sb-teacher { gap: 32px; }
}

/* ---------------------------------------------------------------- mobile -- */
@media (max-width: 767px) {
  .sb-h2 { font-size: 24px; line-height: 32px; }
  .sb-body { font-size: 13px; line-height: 21px; }
  .sb-note { font-size: 10px; line-height: 16px; }

  /* 1. Top bar — 430x69, VERTICAL, gap 8, pad 10 0 */
  .sb-topbar {
    min-height: 69px; padding: 10px 6px; flex-direction: column; gap: 8px;   /* Figma pad 10 19; the line needs ~415px here vs 392 in Figma, so side padding gives way */
    background-image: url("../images/m-top-banner.webp"), linear-gradient(90deg, #F6F2F1 0%, #FAE5E0 41%, #FFD3C9 100%);
  }
  .sb-topbar__pill { font-size: 15px; line-height: 18px; letter-spacing: 0.15px; }
  .sb-topbar__text { font-size: 14px; line-height: 20px; letter-spacing: 0.14px; max-width: 360px; }

  /* 3. Hero — 430x658, pad 30 16, gap 14; pill → para → people → cta, gap 16 */
  .sb-hero { padding: 30px 16px; background: url("../images/m-bg-hero.webp") center / cover no-repeat, #FFFBF8; }
  .sb-hero::before, .sb-hero::after { display: none; }   /* the supplied mobile image already carries the mark and the blob */
  .sb-hero__inner { gap: 14px; }
  .sb-hero__title { font-size: 30px; line-height: 36.6px; font-weight: 700; }
  .sb-hero__row { row-gap: 16px; }
  .sb-date-pill { font-size: 13px; line-height: 21px; }
  .sb-date-pill img { width: 16px; height: 16px; }
  .sb-hero__para { font-size: 16px; line-height: 25px; max-width: 356px; }
  .sb-hero__people { gap: 18px; }
  .sb-person { width: 188px; }
  .sb-person + .sb-person { margin-left: 0; }
  .sb-page .sb-person__photo { width: 132px; height: 132px; box-shadow: 0 1.6px 2.3px rgba(0,0,0,.10), 0 3.9px 5.8px rgba(0,0,0,.10); }
  .sb-person__name { font-size: 13px; line-height: 21px; padding: 5px 19px; }
  .sb-person__role { max-width: 173px; }
  .sb-hero__cta { margin-top: -2px; }   /* Figma: 14px above the button, row-gap is 16 */

  /* 4. Living — 430x728, pad 20, gap 30; text ABOVE the photo, photo 384x276.
     The heading box is 354 wide in the frame (not the full 390), which is what
     puts "means" on the second line. */
  .sb-living .sb-h2 { max-width: 354px; }
  .sb-living { padding: 20px; }   /* m-bg-living.webp was blank white; the desktop white stays */
  .sb-living__row { flex-direction: column-reverse; gap: 30px; }
  .sb-living__text { max-width: 390px; }
  .sb-page .sb-living__photo { flex-basis: auto; width: 100%; max-width: 384px; height: auto; aspect-ratio: 384 / 276; }

  /* 5. Quote — 430x144, pad 30 20, 700 13/21 */
  .sb-quote { padding: 30px 20px; background-image: url("../images/m-bg-quote.webp"), linear-gradient(90deg, #FFF1EF 0%, #E2F4FF 100%); }
  .sb-quote p { font-size: 13px; line-height: 21px; }

  /* 6. You will — 430x493, pad 20, gap 13; one column, items gap 12 */
  .sb-will { padding: 20px; }   /* m-bg-will.webp was blank white */
  .sb-will__inner { gap: 13px; }
  .sb-will__cols { flex-direction: column; gap: 12px; }
  .sb-will__col { flex-basis: auto; width: 100%; }
  .sb-will__item img { margin-top: 1px; }

  /* 7. For you if — 430x479, pad 20, gap 14; stacked, gap 12 */
  .sb-foryou { padding: 20px; }   /* m-bg-foryou.webp was the flat 40% blue; the desktop rgba stays */
  .sb-foryou__inner { gap: 14px; }
  .sb-foryou__cols { flex-direction: column; gap: 12px; }
  .sb-foryou__col { flex-basis: auto; width: 100%; }
  .sb-foryou__col p { font-size: 13px; line-height: 21px; }
  /* The Figma frame sizes these four text boxes individually (390/296/281/270),
     which is what makes items 2 and 4 run to three lines. */
  .sb-foryou__col:nth-child(2) p { max-width: 296px; }
  .sb-foryou__col:nth-child(3) p { max-width: 281px; }
  .sb-foryou__col:nth-child(4) p { max-width: 270px; }

  /* 8. Hours — 430x626, pad 20, gap 15; sub 700 16/24; cards stacked gap 10.
     Heading box 248 wide ("What happens in / the two hours"), sub 323 wide. */
  .sb-hours .sb-h2 { max-width: 248px; }
  .sb-hours__sub { max-width: 323px; }
  .sb-hours { padding: 20px; background-image: url("../images/m-bg-hours.webp"); background-size: cover; background-position: center; }
  .sb-hours__inner { gap: 15px; }
  .sb-hours__sub { font-size: 16px; line-height: 24px; }
  .sb-hours__cards { flex-direction: column; gap: 10px; }
  .sb-card { width: 100%; flex-basis: auto; max-width: none; }
  .sb-card__title { font-size: 18px; line-height: 22.2px; }
  .sb-card__body { font-size: 10px; line-height: 16px; }

  /* 9. Teachers — 430x1399, pad 20, gap 39; text then centred 247x268 photo, gap 24 */
  .sb-teachers { padding: 20px; background-image: url("../images/m-bg-teachers.webp"), linear-gradient(180deg, #F5F1F1 0%, #FFFFFF 100%); }
  .sb-teacher, .sb-teacher--reverse { flex-direction: column; align-items: center; gap: 24px; }
  .sb-teacher__text { flex-basis: auto; max-width: 100%; width: 100%; }
  .sb-page .sb-teacher__photo { flex-basis: auto; order: 1; }   /* --reverse is photo-first in the DOM; mobile is text then photo for both */
  .sb-body p + p { margin-top: 4px; }   /* Figma mobile paragraphSpacing: 4 */

  /* 10. Closing — 430x494, pad 70 20; card full width, pad 29 0; sub 700 16/24 */
  .sb-closing { padding: 70px 20px; background-image: url("../images/m-bg-closing.webp"); }
  .sb-closing__card { padding: 29px 0; max-width: none; }
  .sb-closing__head { padding: 0 16px; }
  .sb-closing__sub { font-size: 16px; line-height: 24px; }
  .sb-closing__date { white-space: normal; text-align: center; }
}