/* Google Sans ships as a VARIABLE font (wght axis 400-700), so each
   subset is declared once with a weight RANGE. Declaring fixed weights
   instead (as two duplicated sets of blocks used to) pins every face to
   a single instance and makes a fluid weight impossible. */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/GoogleSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/GoogleSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/GoogleSans-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/GoogleSans-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Spirit';
  font-style: normal;
  font-weight: 400;
  /* block, not swap: the handwritten face has no passable fallback,
     a flash of cursive system type is worse than a beat of blank. */
  font-display: block;
  src: url('/assets/fonts/Spirit-Regular.woff2') format('woff2');
}

/* Design tokens — real Figma values. The fluid recipe and the 700→1440
   ramp live in CLAUDE.md; deliberate deviations from real source values
   and the per-section ramp exceptions live in decisions.md. */
:root {
  --color-text: #1c1c1c;
  --color-cards-bg: #ffffff;
  --color-bg: #f2f2f2;
  --color-accent: #cbffa0;
  --color-accent-buttons: #b8f685;
  /* Course format pills (her recolour, 2026-09-22). */
  --color-pill-online: #68ff81;
  --color-pill-offline: #e4c3ff;

  --opacity-secondary-text: 0.7;

  --radius-label: 3.75rem;

  --radius-big: 2rem;
  --radius-big-mobile: 1.5rem;

  --radius-medium: 1.5rem;
  --radius-medium-mobile: 1.25rem;

  --section-padding-x: max(3.75rem, calc((100vw - 105rem) / 2));
  --section-padding-x-mobile: 1.25rem;

  --section-spacing: clamp(7.5rem, calc(5.64313rem + 7.619vw), 14.21438rem);

  --section-name-to-section: clamp(1.5rem, calc(0.79056rem + 1.62162vw), 2.25rem);

  --gap-content-to-cta: clamp(0.625rem, calc(0.541px + 1.35135vw), 1.25rem);

  --gap-heading-to-subtitle: clamp(0.625rem, calc(0.27025rem + 0.81081vw), 1rem);

  --card-padding-m-block: 1.875rem;

  --header-height: 5.4375rem;
  --header-height-mobile: 3.9375rem;
  /* Under the header box to a page's first card: her 20 from the
     header's pills at 1440, which end 16 above the box (so 4), 0 at
     the mobile frame (recipe). Recompute if the header's padding changes. */
  --gap-header-to-hero: clamp(0px, calc(-0.2365rem + 0.5405vw), 0.25rem);

  --font-size-nav: 1.125rem;

  --font-size-h1-hero: clamp(1.75rem, calc(1.14312rem + 3.036vw), 3.875rem);
  --font-size-body-hero: clamp(1rem, calc(0.90687rem + 0.381vw), 1.25rem);
  --font-size-button-l: clamp(1rem, calc(0.92875rem + 0.357vw), 1.25rem);
  --font-size-label-m: clamp(0.75rem, calc(0.70375rem + 0.190vw), 0.875rem);

  --font-size-h2-section: clamp(1.75rem, calc(0.44931rem + 2.97297vw), 3.125rem);
  --font-size-label-accent: clamp(0.875rem, calc(0.6385rem + 0.54054vw), 1.125rem);
  --font-size-h3-card-l: clamp(1.25rem, calc(0.54056rem + 1.62162vw), 2rem);
  --font-size-body-card-l: clamp(0.875rem, calc(0.52025rem + 0.81081vw), 1.25rem);
  --font-size-h3-card-m: clamp(1.25rem, calc(0.777rem + 1.08108vw), 1.75rem);
  --font-size-body-card-s: clamp(0.875rem, calc(0.75675rem + 0.27027vw), 1rem);

  --font-size-button-cta: clamp(1.125rem, calc(1.00675rem + 0.27027vw), 1.25rem);

  --font-size-h3-card-xs: clamp(1.25rem, calc(1.0135rem + 0.54054vw), 1.5rem);
  --font-size-body-card-m: clamp(0.875rem, calc(0.6385rem + 0.54054vw), 1.125rem);

  --font-size-h3-card-xs-for-you-if: clamp(1.375rem, calc(1.25675rem + 0.27027vw), 1.5rem);

  --font-primary: 'Google Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --font-family-accent: 'Spirit', cursive;

  /* Spirit draws ~1.4x the old font: the old ramp (floor 28 over the frame's
     24, her call) scaled by 0.75, which keeps the widest name (Кодымский,
     0.80 of the panel at 1440) on one line. */
  --font-size-name-curator: clamp(1.3125rem, calc(-0.21422rem + 3.5715vw), 3rem);
  --font-size-body-curator: clamp(0.875rem, calc(0.51812rem + 0.9524vw), 1.375rem);

  --font-size-h4-under-card-m: clamp(0.875rem, calc(0.75675rem + 0.27027vw), 1rem);
  --font-size-h4-under-card-l: clamp(1.125rem, calc(0.8885rem + 0.54054vw), 1.375rem);

  /* The teacher's name in Spirit (her call, 2026-10-15: one line, never two). */
  --font-size-name-teacher: clamp(1.125rem, calc(0.44881rem + 1.5513vw), 1.84375rem); /* the above x0.82: Вашковец fit at 0.87 */

  --font-size-number-badge: clamp(1.25rem, calc(0.68537rem + 1.29054vw), 1.84688rem);

  --font-size-h5-curriculum: clamp(1.125rem, calc(0.53381rem + 1.35135vw), 1.75rem);
}

/* Outside the anchors the whole page scales instead of reflowing (her
   call): every size is rem, so this one value scales it all — above
   1440 the desktop design grows 1:1 up to a 16" MacBook Pro (1728,
   ×1.2) and stays there, wider screens gaining page gutters; below 390
   the mobile design shrinks, floored at 0.9 (351px). Do not go back to
   `zoom`: Chrome dropped clicks and hovers under it on some Macs. */
html { font-size: 16px; }
@media (min-width: 1441px) {
  html { font-size: min(calc(100vw / 90), 19.2px); }
}
@media (max-width: 389.98px) {
  html { font-size: max(calc(100vw / 24.375), 14.4px); }
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  /* Figma's canvas renders type this way; without it macOS browsers
     draw the same font visibly heavier. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-primary);
  color: var(--color-text);
  background: var(--color-bg);
}
/* Romanian copy carries no hand-placed non-breaking spaces: the short
   word rule binds prepositions (assets/js/typography.js) and the browser
   keeps a single word off the last line. Never bind the last two words
   by hand — the narrowest text box on the site holds 12 characters at
   360px, and a wider glued pair would push out of it. */
html[lang="ro"] body { text-wrap: pretty; }
/* A title is short enough to even out instead: balance never
   overflows, it only moves the break. */
/* Every title on the site is named *title in its own block. */
html[lang="ro"] :is(h1, h2, h3, h4, [class*="title"], [class*="heading"]) { text-wrap: balance; }

img { max-width: 100%; }
a { color: inherit; }

/* Every secondary text — section subtitles, card bodies, opened
   accordion content — carries this one class; the value is the token. */
.text-secondary { opacity: var(--opacity-secondary-text); }

/* A secondary text link, underlined by its own border so the rule stays
   put while the label rolls inside its mask. Each consumer owns only its
   spacing. Consumers: Facts, Reviews. */
.link-roll {
  display: inline-block;
  border-bottom: 1px solid currentColor;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-button-l);
  line-height: 1.3;
  text-decoration: none;
}
.link-roll .roll__mask { height: calc(var(--font-size-button-l) * 1.3); }

.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--gap-heading-to-subtitle);
}

/* Every section's H2. The weight is fluid: Medium at the ramp's low end,
   Regular at 1440, matching the real Figma pair. The stepped rules are
   the fallback for engines that cannot divide a length by a length
   inside calc(); the @supports block replaces them where it works. */
.section-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-h2-section);
  line-height: 1.05;
  font-weight: 400;
}
@media (max-width: 699.98px) {
  .section-title { font-weight: 500; }
}
@supports (font-weight: clamp(400, calc(500 - 100 * ((100vw - 700px) / 740px)), 500)) {
  .section-title {
    font-weight: clamp(400, calc(500 - 100 * ((100vw - 43.75rem) / 46.25rem)), 500);
  }
}

/* Lets the menu backdrop's fade transition; without it the fade
   simply switches. */
@property --fade {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 1rem var(--section-padding-x);
  background: rgba(242, 242, 242, 0.3);
  backdrop-filter: blur(0.25rem);
  -webkit-backdrop-filter: blur(0.25rem);

  transition: transform 0.3s ease;
}

.site-header--hidden {
  transform: translateY(-100%);
}

/* How much of the top edge the header covers right now, for anything that
   sticks under it. Keep in step with the hidden state above. */
:root { --header-offset: var(--header-height-mobile); }
html:has(.site-header--hidden) { --header-offset: 0rem; }

.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.site-header__logo-img { display: block; width: 7.39375rem; height: 2.0625rem; }

.logo-eye { transition: fill 0.8s ease; }

.site-header__group--desktop {
  display: flex;
  align-items: center;
  gap: 0;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 2rem;
  border-radius: 2rem;
  background: var(--color-cards-bg);
}
.site-header__nav a {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-nav);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}
.site-header__lang { text-transform: uppercase; }

.site-header__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  aspect-ratio: 1;
  border-radius: 6.25rem;
  background: var(--color-cards-bg);
}
.site-header__icon-btn img { width: 1.4375rem; height: 1.4375rem; display: block; }
/* The avatar fills the whole round button: 23px icon + 2×16px padding. */
.site-header__icon-btn--avatar { padding: 0; overflow: hidden; }
.site-header__icon-btn .site-header__avatar { width: 3.4375rem; height: 3.4375rem; object-fit: cover; }

/* Guest is the default, so the header is complete before the LMS
   answers — waiting for it used to drop the login button and shift the
   nav by its own width on every load. Only a known user hides it. */
:root:not([data-site-header-auth="user"]) .site-header__icon-btn { display: none; }
:root[data-site-header-auth="user"] .site-header__login { display: none; }

.site-header__login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 4.20019rem;
  background: var(--color-cards-bg);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-nav);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__group--mobile { display: none; }
.site-header__menu-backdrop,
.site-header__menu-panel { display: none; }

@media (max-width: 988px) {
  .site-header {
    padding: 0.75rem 1.25rem;
  }
  .site-header__logo-img { width: 5.31875rem; height: 1.48438rem; }

  .site-header__group--desktop { display: none; }
  .site-header__group--mobile {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .site-header__login--mobile {
    padding: 0.5rem 1.25rem;
    border-radius: 4.47831rem;

    box-shadow: 0.25rem 0.25rem 0.3875rem rgba(0, 0, 0, 0.02);
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 1.125rem;
  }

  /* Same box as the burger beside it: 23px icon + 2×8px padding. */
  .site-header__icon-btn--mobile { padding: 0.5rem; }
  .site-header__icon-btn--mobile.site-header__icon-btn--avatar { padding: 0; }
  .site-header__icon-btn--mobile .site-header__avatar { width: 2.4375rem; height: 2.4375rem; }

  .site-header__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4375rem;
    height: 2.4375rem;
    aspect-ratio: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 2rem;
    background: var(--color-cards-bg);
    cursor: pointer;
  }

  .site-header__burger-icon {
    position: relative;
    display: block;
    width: 1.4375rem;
    height: 1.4375rem;
  }
  .site-header__burger-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.0625rem;
    height: 0.0875rem;
    background: var(--color-text);
    border-radius: 1px;
    transform: translate(-50%, -50%) translateY(-0.15625rem);
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .site-header__burger-bar:nth-child(2) {
    transform: translate(-50%, -50%) translateY(0.15625rem);
  }
  .site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* On mobile the header's tint and blur live on this sibling instead
     of the header: at rest it is exactly the header's background,
     open it stretches down past the viewport with a progressive fade
     growing at its leading edge. Fade length is PROPOSED. */
  .site-header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-header__menu-backdrop {
    --fade: 0px;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height-mobile);
    z-index: 99;
    background: rgba(242, 242, 242, 0.3);
    backdrop-filter: blur(0.25rem);
    -webkit-backdrop-filter: blur(0.25rem);
    -webkit-mask-image: linear-gradient(#000 calc(100% - var(--fade)), transparent);
    mask-image: linear-gradient(#000 calc(100% - var(--fade)), transparent);
    pointer-events: none;
    /* GSAP's power2.out, so it moves like the site's hovers. */
    transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), --fade 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.3s ease;
  }
  body.mobile-menu-open .site-header__menu-backdrop {
    --fade: 3.75rem;
    height: calc(100vh + var(--fade));
    pointer-events: auto;
  }
  /* Follows the header when it hides on scroll. */
  .site-header--hidden + .site-header__menu-backdrop {
    transform: translateY(-100%);
  }

  /* Panel spans the content width under the header, above it in the
     stack. Figma butts it against the header; a card gap keeps its top
     corners clear of the header's edge — her call. */
  .site-header__menu-panel {
    position: fixed;
    top: calc(var(--header-height-mobile) + var(--gap-content-to-cta));
    left: var(--section-padding-x-mobile);
    right: var(--section-padding-x-mobile);
    z-index: 101;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.875rem;
    background: var(--color-cards-bg);
    border-radius: var(--radius-medium);
    /* Same shadow as the header's mobile pills. */
    box-shadow: 0.25rem 0.25rem 0.3875rem rgba(0, 0, 0, 0.02);
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.96);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .site-header__menu-panel[aria-hidden="false"] {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .site-header__menu-panel nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 1rem;
  }
  .site-header__menu-panel nav a {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: normal;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
  }

  .site-header__menu-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 1rem 2rem;
    border-radius: 4.20019rem;
    /* The buttons token, not the frame's #cbffa0 — her call. */
    background: var(--color-accent-buttons);
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 1.125rem;
    color: var(--color-text);
    text-decoration: none;
  }
}

@media (max-width: 286px) {
  .site-header__login--mobile { display: none; }
}

.roll {
  display: block;
}
.roll__mask {
  display: block;
  position: relative;
  overflow: hidden;

  height: var(--roll-h, 1.4375rem);
}
.roll--icon .roll__mask {
  width: 100%;
  height: 100%;
}
.roll__track {
  display: block;
  height: 100%;
  will-change: transform;
}
.roll__line {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
}
.roll__line + .roll__line {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

.hero {
  position: relative;
  /* Hero's button uses its own slower ramp token (see decisions.md). */
  --button-cta-font-size: var(--font-size-button-l);
}

.hero__layout--mobile,
.hero__layout--desktop {
  padding-top: var(--header-height);
  padding-inline: var(--section-padding-x);
}
@media (max-width: 988px) {
  .hero__layout--mobile,
  .hero__layout--desktop {
    padding-top: var(--header-height-mobile);
    padding-inline: var(--section-padding-x-mobile);
  }
}

.hero__layout--mobile {
  display: none;
}

.hero__layout--desktop {
  display: flex;
  flex-direction: row;

  /* The media box takes the card's height from the row itself, so the
     first paint already has it; init() then sets the same number. */
  align-items: stretch;

  justify-content: center;

  gap: clamp(0.625rem, calc(-0.405px + 1.48649vw), 1.3125rem);
  /* The section-spacing token's phone end, flat (her call: less air
     under the hero) — not the token itself. */
  padding-bottom: 7.5rem;
}

.hero__card {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 7rem;

  flex: 0 1 40.625rem;
  min-width: 36.25rem;
  padding: clamp(1.875rem, calc(1.64312rem + 0.952vw), 2.5rem)
           clamp(1.875rem, calc(1.17875rem + 2.857vw), 3.75rem)
           clamp(1.875rem, calc(1.17875rem + 2.857vw), 3.75rem);
  background: var(--color-cards-bg);
  border-radius: var(--radius-big);
}

@media (max-width: 988px) {
  .hero__card {
    border-radius: var(--radius-big-mobile);
  }
}

.hero__card-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

  gap: 7rem;
}

.hero__tags {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.25rem;
}
.hero__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.9375rem;
  border-radius: var(--radius-label);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-label-m);
  white-space: nowrap;
}
.hero__tag--accent {
  background: var(--color-accent);
}
/* The course card's own offline colour, not a second purple. */
.hero__tag--offline {
  background: var(--color-pill-offline);
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  text-align: center;
  color: var(--color-text);
}
.hero__title {
  /* Two lines of a kind: without it the phone leaves "PRO" alone under
     a full line (her call, 2026-10-06). */
  text-wrap: balance;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-h1-hero);
  line-height: 0.97;
  letter-spacing: -0.01em;
}
.hero__body {
  margin: 0;
  width: 100%;
  max-width: 28.5rem;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-hero);
  line-height: 1.4;
}

.hero__actions {
  position: relative;
  width: 100%;
}

/* Layout-transparent: keeps .button-cta the actual flow child of
   .hero__actions, this only carries the enroll-modal trigger attributes. */
.hero__cta-trigger { display: contents; }

.hero__illustration {
  position: absolute;
  left: 1.25rem;
  top: -3.6875rem;
  width: 8.25rem;
  height: 4.4375rem;
  pointer-events: none;
}
.hero__illustration img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__video {
  flex: 1 1 18.75rem;
  min-width: 17.5rem;

  min-height: 0;
  /* The box's own shape until init() measures the card and takes over.
     Without it the first paint has no height of its own and the video
     is drawn to its file's size, then jumps. */
  aspect-ratio: 651 / 662;
  border-radius: 2rem;
  overflow: hidden;
  background: var(--color-bg);
}
.hero__video video,
.hero__video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Media that must not be cut: shown whole, the box's own background
   fills the rest (the page passes the colour). Her call: it sits on the
   bottom edge and runs 20% over each side — at 150% it starts cutting
   the ears, hers to re-judge if the picture changes. */
.hero__video--whole video,
.hero__video--whole img {
  object-fit: contain;
  object-position: bottom;
  width: 140%;
  /* base.css caps images at the box width; without this the 140% above
     does nothing for a page that passes an image. */
  max-width: none;
  margin-inline: -20%;
}

@media (max-width: 1100px) {
  .hero__layout--desktop {
    flex-direction: column;
  }
  .hero__card {
    flex: none;
    min-width: 0;
    width: 100%;
  }
  .hero__video {
    flex: none;
    min-width: 0;
    width: 100%;
    max-width: none;
    /* Stacked, init() caps the height at the media's own 662; the cap
       is here too, or a wide tablet paints a taller box first. */
    max-height: 41.375rem;
  }
}

@media (max-width: 700px) {
  .hero__layout--desktop {
    display: none;
  }
  .hero__layout--mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;

    padding-bottom: 7.5rem;
  }

  .hero__card {
    align-items: flex-start;
  }
  .hero__card-top {
    align-items: flex-start;

    gap: 2.25rem;
  }
  .hero__text {
    align-items: flex-start;
    text-align: left;
  }

  .hero__badges {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 100%;
  }
  .hero__badges-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
  }
  .hero__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;

    padding: 0.5rem min(1rem, 4.103vw);
    border-radius: 3.375rem;
    background: #ffffff;
    color: #0f0f10;
    font-family: var(--font-primary);
    font-weight: 400;

    font-size: clamp(0.75rem, 3.59vw, 0.875rem);
    white-space: nowrap;
  }
  .hero__badge--wide {
    flex: none;
    width: 100%;
    padding: 0.5rem min(0.625rem, 2.564vw);
  }
}

/* Under Hero, which ends on a flat 120: on desktop the strip's margin-top
   takes it back to the frame's 20; recompute if that 120 changes. Below
   the row the air above equals the air below, both the sitewide section
   spacing (her call): above, that token less Hero's own 120. */
.course-info {
  margin-top: -6.25rem;
  padding-inline: var(--section-padding-x);
  padding-bottom: var(--section-spacing);
}
@media (max-width: 988px) {
  .course-info {
    margin-top: calc(var(--section-spacing) - 7.5rem);
    padding-inline: var(--section-padding-x-mobile);
  }
}

.course-info__list {
  display: flex;
  gap: clamp(0.625rem, calc(0.39287rem + 0.9524vw), 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Row from the header breakpoint (the text wraps in its cards down to
   989, where a card is ~298), a stack below, cards the container's width. */
@media (max-width: 988px) {
  .course-info__list { flex-direction: column; }
}

.course-info__card {
  flex: 1 1 0;
  min-width: 0;
  /* Row: the text on the left, the icon on the right edge (her call, over
     the frame's icon on the left); the stack below swaps it back. */
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, calc(1.01788rem + 0.9524vw), 1.875rem) 2.5rem;
  background: var(--color-cards-bg);
  border-radius: var(--radius-medium); /* both frames say 24: flat, not the mobile token */
}

.course-info__icon {
  flex: none;
  display: block;
  width: auto;
}
.course-info__icon--calendar,
.course-info__icon--cap { height: clamp(2.375rem, calc(2.32856rem + 0.1905vw), 2.5rem); }
.course-info__icon--clock { height: clamp(2.375rem, calc(2.25894rem + 0.4762vw), 2.6875rem); }
/* The frame draws the cap turned to face the text. */
.course-info__icon--cap { transform: scaleX(-1); }

.course-info__text {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}
.course-info__title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 500; /* the frame mixes Medium and Geologica Regular; one weight */
  font-size: clamp(1.125rem, calc(1.07856rem + 0.1905vw), 1.25rem);
  line-height: 1.1;
}
.course-info__caption {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.2;
}

/* Stacked: the three cards share one text line and the icons sit centred
   in a common column as wide as the widest (the cap, 63→66) — her call;
   the frame lets each card's content find its own centre. Must stay after
   the card rule above. */
@media (max-width: 988px) {
  .course-info__card {
    display: grid;
    grid-template-columns: clamp(3.9375rem, calc(3.86788rem + 0.2857vw), 4.125rem) minmax(0, 1fr);
    align-items: center;
    justify-content: start;
    gap: 1rem;
    padding-left: 1.875rem;
  }
  .course-info__icon { justify-self: center; }
}

.label-pill {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  height: clamp(1.5625rem, calc(1.49313rem + 0.286vw), 1.75rem);
  padding-inline: 0.65625rem;
  border-radius: var(--radius-label);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Spirit', var(--font-primary);
  /* Spirit is drawn 1.4x larger than the first cut the token was tuned on. */
  font-size: calc(var(--font-size-label-accent) * 0.7143);
  line-height: 1;
  white-space: nowrap;
}

/* Spirit sets tighter than the first cut: 0.125em restores the old width
   (measured: pill 80.5px vs 81.2px). */
.label-pill:not([class*='label-pill--']) {
  letter-spacing: 0.125em;
}

.label-pill--l,
.label-pill--m {
  height: clamp(1.625rem, calc(1.21588rem + 0.93514vw), 2.0575rem);
  padding-inline: clamp(0.80725rem, calc(1.06069rem + -0.28162vw), 0.9375rem);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(0.75rem, calc(0.5135rem + 0.54054vw), 1rem);
}

.label-pill--s {
  height: clamp(1.3125rem, calc(1.19425rem + 0.27027vw), 1.4375rem);
  padding-inline: 0.625rem;
  background: var(--color-accent);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(0.625rem, calc(0.50675rem + 0.27027vw), 0.75rem);
}

/* Teachers' and Courses' small pill: the frame's 12px/25px badge. */
.label-pill--xs {
  height: auto;
  padding: 0.25rem 0.9375rem;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(0.75rem, calc(0.63175rem + 0.27027vw), 0.875rem);
  line-height: normal;
}

/* Consumers: Watch Free Video, Pricing. They set the font-size (fluid)
   and own the position and rotation; the box scales with it. */
.sticker {
  display: block;
  overflow: visible;
}
.sticker__text {
  font-family: var(--font-primary);
  font-weight: 400;
  dominant-baseline: central;
  fill: var(--color-text);
  stroke: #c5f99b;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke;
  white-space: pre;
}

.why-special__layout {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6875rem;
  padding-bottom: var(--section-spacing);
  padding-inline: var(--section-padding-x);
}

.why-special__layout--desktop { display: flex; }
.why-special__layout--mobile { display: none; }
@media (max-width: 988px) {
  .why-special__layout {
    padding-inline: var(--section-padding-x-mobile);
  }
  .why-special__layout--desktop { display: none; }
  .why-special__layout--mobile { display: flex; }
}

.why-special__title { width: 100%; }

.why-special__action-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;

  gap: clamp(0.625rem, calc(0.541px + 1.35135vw), 1.25rem);
}
.why-special__layout--mobile .why-special__action-row { gap: 0.625rem; }

.why-special__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;

  gap: clamp(0.625rem, calc(0.541px + 1.35135vw), 1.25rem);
}
.why-special__layout--mobile .why-special__stack { gap: 0.625rem; }

.why-special__intro {
  display: flex;

  align-items: stretch;
  width: 100%;

  gap: clamp(1.25rem, calc(-3.598rem + 11.0811vw), 6.375rem);

  padding-left: clamp(1.875rem, calc(0.10138rem + 4.05405vw), 3.75rem);
  background: var(--color-cards-bg);
  border-radius: var(--radius-medium);
}
/* Row until text (288) + gap + photo + paddings stop fitting at their
   floors; recompute if any of those change. */
@media (max-width: 697.98px) {
  .why-special__layout--mobile .why-special__intro {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 1.875rem;
  }
}

.why-special__intro-content {
  display: flex;
  flex-direction: column;

  gap: clamp(1.875rem, calc(1.28381rem + 1.35135vw), 2.5rem);

  padding-block: clamp(1.875rem, calc(0.10138rem + 4.05405vw), 3.75rem);

  flex: 1 1 0px;

  min-width: 18rem;
}
@media (max-width: 697.98px) {
  .why-special__layout--mobile .why-special__intro-content {
    flex: none;
    min-width: 0;
    width: 100%;
    gap: 1.875rem;
    padding-top: 1.875rem;
    padding-bottom: 1.875rem; /* the air between the text and the photo */
  }
}

.why-special__intro-text {
  display: flex;
  flex-direction: column;
  gap: 1.0625rem;
}
.why-special__intro-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--font-size-h3-card-l);
  line-height: 1.2;

  max-width: clamp(25rem, calc(10.81081rem + 32.4324vw), 40rem);
}
.why-special__intro-body {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-card-l);
  line-height: 1.4;

  max-width: clamp(25rem, calc(10.81081rem + 32.4324vw), 40rem);
}

.why-special__intro-photo {
  /* Her mock: the team photo across the card's height, inset 16 from its
     right, top and bottom with the 8 radius of What You'll Learn's media
     (its 24 / 3). 46% is PROPOSED — the largest share at which the
     text's 288 floor still fits at the row's foot (698). */
  flex: 0 0 46%;
  align-self: stretch;
  margin: 1rem 1rem 1rem 0;
  position: relative; /* the picture fills the box, it never sets the card's height */
  border-radius: calc(var(--radius-medium) / 3);
  overflow: hidden;
}
@media (max-width: 697.98px) {
  .why-special__layout--mobile .why-special__intro-photo {
    flex: none;
    align-self: auto;
    width: calc(100% + 3.75rem); /* out of the card's 30 on both sides: edge to edge (her call) */
    margin: 0 -1.875rem;
    aspect-ratio: 1847 / 1256;
    border-radius: var(--radius-medium); /* the card's own, all four corners (her call) */
  }
}
/* Desktop: a smaller share, so the title keeps its two lines (her call):
   at 1440 the longer one is 568 wide, the text column 604 now, 554 at 46%. */
.why-special__layout--desktop .why-special__intro-photo { flex-basis: 42%; }
.why-special__intro-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-special__cards {
  display: flex;
  width: 100%;

  gap: clamp(0.625rem, calc(0.541px + 1.35135vw), 1.25rem);
}
.why-special__cards--carousel {
  gap: 0.625rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  position: relative;
  left: calc(-1 * var(--section-padding-x-mobile));
  width: calc(100% + 2 * var(--section-padding-x-mobile));
  scroll-padding-inline: var(--section-padding-x-mobile);
}
.why-special__cards--carousel .why-special__card--mobile:first-child {
  margin-left: var(--section-padding-x-mobile);
}
.why-special__cards--carousel .why-special__card--mobile:last-child {
  margin-right: var(--section-padding-x-mobile);
}
.why-special__cards--carousel::-webkit-scrollbar { display: none; }

.why-special__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0%;

  min-width: 13.75rem;
  gap: 0.5625rem;

  padding:
    clamp(1.36875rem, calc(0.31688rem + 1.870vw), 2rem)
    clamp(1.2875rem, calc(0.30812rem + 1.741vw), 1.875rem)
    clamp(2.05625rem, calc(0.48313rem + 2.796vw), 3rem);
  background: var(--color-cards-bg);
  border-radius: var(--radius-medium);
  text-align: center;
}

.why-special__card-badge {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  height: 1.4375rem;
  padding: 0 0.65625rem;
  border-radius: 62.4375rem;
  background: var(--color-bg);
  color: #0f0f10;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.875rem;
}
@media (max-width: 899.98px) {
  .why-special__card--mobile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: none;
    /* 450 where the strip starts (899, PROPOSED: two cards, the second's
       right edge just cut) down to the mobile frame's 280 at 390; below
       that the frame's 280-of-350 share. % is the bleeding track, i.e.
       the viewport; recompute if the strip's start or the cap changes. */
    width: min(
      calc(9.35875rem + 33.399%),
      calc(0.8 * (100% - 2 * var(--section-padding-x-mobile))),
      28.125rem
    );
    min-width: 0;
    /* The tallest card: the 336 picture, the card's 9, title 42, the 12,
       a 4-line body 73 and the 28. Recompute if any of those change. */
    height: 31.25rem;
    padding: 0;
    border-radius: var(--radius-medium-mobile);
    overflow: hidden;
    scroll-snap-align: start;
  }
  .why-special__card-badge {
    display: inline-flex;
  }
}

.why-special__card-illustration {
  width: 100%;
  max-width: 18.75rem;
  aspect-ratio: 300 / 377;

  min-height: 0;
}
@media (max-width: 899.98px) {
  .why-special__card--mobile .why-special__card-illustration {
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: auto;
    height: 21rem;
    padding: 0.625rem;
  }
}
.why-special__card-illustration img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain; /* never cover — these illustrations must not be cropped */
  border-radius: inherit;
}

.why-special__card-text {
  display: flex;
  flex-direction: column;
  gap: 1.0625rem;
  width: 100%;
}
@media (max-width: 899.98px) {
  .why-special__card--mobile .why-special__card-text {
    flex: none;
    gap: 0.75rem; /* her "a bit apart", 5 before */
    width: 12.875rem;

    padding-bottom: 1.75rem; /* her "a bit less" underneath, 48 before */
  }
}
.why-special__card-title {
  margin: 0 auto;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--font-size-h3-card-m);
  line-height: 1.05;

  max-width: 10.7em;
}
.why-special__card-body {
  margin: 0 auto;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-card-s);
  line-height: 1.3;

  max-width: 18.125em;
}


.wyl {
  --wyl-row-gap: clamp(0px, calc(-84.34594rem + 100vw), 5.65406rem);

  /* The carousel's edge-bleed math must read whichever page padding is
     actually live at that width — this section's carousel spans both the
     desktop- and mobile-padding ranges. Never hardcode the mobile one. */
  --wyl-current-padding-x: var(--section-padding-x);

  --wyl-card-padding-inline: clamp(1.875rem, calc(-0.5rem + 3.333vw), 2.5rem);
}

.wyl__layout {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-inline: var(--section-padding-x);
  padding-bottom: var(--section-spacing);
}
@media (max-width: 988px) {
  .wyl { --wyl-current-padding-x: var(--section-padding-x-mobile); }
  .wyl__layout { padding-inline: var(--section-padding-x-mobile); }
}
.wyl__layout--desktop { display: flex; }
.wyl__layout--mobile { display: none; }
@media (max-width: 700px) {
  .wyl__layout--desktop { display: none; }
  .wyl__layout--mobile { display: flex; }
}

.wyl__title {
  width: 100%;
  margin: 0 0 var(--section-name-to-section) 0;
}

.wyl__layout--desktop .wyl__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 var(--section-name-to-section) 0;
}
.wyl__layout--desktop .wyl__title {
  margin: 0;
  width: auto;
}

.wyl__carousel-nav {
  display: none;
  align-items: center;
  gap: 0.6875rem;
  flex: none;
}
.wyl__layout--mobile .wyl__title {
  max-width: 10.11em;
}

.wyl__layout--desktop .wyl__cards {
  display: flex;
  flex-direction: column;
  width: 100%;

  gap: clamp(0.625rem, calc(-0.20269rem + 1.89189vw), 1.5rem);
}
@media (max-width: 1140px) {
  .wyl__layout--desktop .wyl__cards {
    flex-direction: row;
    gap: 0.625rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
    left: calc(-1 * var(--wyl-current-padding-x));
    width: calc(100% + 2 * var(--wyl-current-padding-x));
    scroll-padding-inline: var(--wyl-current-padding-x);
  }
  .wyl__layout--desktop .wyl__cards::-webkit-scrollbar { display: none; }
  .wyl__layout--desktop .wyl__cards .wyl__card:first-child { margin-left: var(--wyl-current-padding-x); }
  .wyl__layout--desktop .wyl__cards .wyl__card:last-child { margin-right: var(--wyl-current-padding-x); }
  .wyl__carousel-nav { display: flex; }
}

.wyl__layout--desktop .wyl__card {
  display: flex;
  align-items: stretch;

  justify-content: space-between;
  gap: var(--wyl-row-gap);
  width: 100%;
  background: var(--color-cards-bg);
  border-radius: 1.5rem;
}
.wyl__layout--desktop .wyl__card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  flex: 0 1 41.75rem;
  min-width: 26.25rem;
  padding-block: var(--card-padding-m-block);
  padding-inline: var(--wyl-card-padding-inline);
}
@media (max-width: 1140px) {
  .wyl__layout--desktop .wyl__card {
    flex: 0 0 23.75rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    scroll-snap-align: start;
  }
  .wyl__layout--desktop .wyl__card-content {
    flex: none;
    min-width: 0;
    width: 100%;
    padding: var(--card-padding-m-block);
  }
}

.wyl__text-block {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
}
.wyl__card-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--font-size-h3-card-xs);
  line-height: 1.1;
}
.wyl__card-body {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-card-m);
  line-height: 1.3;

  max-width: 34.625rem;
}

.wyl__layout--desktop .wyl__card-media {
  display: flex;
  align-items: center;

  flex: 0 0 auto;
  padding: 1rem 1rem 1rem 0;
}
@media (max-width: 1140px) {
  .wyl__layout--desktop .wyl__card { overflow: hidden; }
  .wyl__layout--desktop .wyl__card-media {
    order: -1;
    width: 100%;
    padding: 0;
  }
}
.wyl__layout--desktop .wyl__card-media img,
.wyl__layout--desktop .wyl__card-media video {
  height: clamp(10.5625rem, calc(5.00506rem + 12.7027vw), 16.4375rem);
  width: auto;
}
@media (max-width: 1140px) {
  .wyl__layout--desktop .wyl__card-media img,
  .wyl__layout--desktop .wyl__card-media video {
    height: auto;
    width: 100%;
  }
}
.wyl__card-media img,
.wyl__card-media video {
  display: block;
  min-width: 0;
  aspect-ratio: var(--wyl-media-ratio, 545.535 / 263);
  border-radius: calc(1.5rem / 3);
  object-fit: cover;
}

.wyl__cards--paginated {
  margin-bottom: 1.25rem;
  position: relative;
  left: calc(-1 * var(--section-padding-x-mobile));
  width: calc(100% + 2 * var(--section-padding-x-mobile));
  overflow: hidden;
}
.wyl__card--mobile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute;
  top: 0;

  left: var(--section-padding-x-mobile);
  width: calc(100% - 2 * var(--section-padding-x-mobile));
  height: 100%;
  background: var(--color-cards-bg);
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.35s ease;
}
.wyl__card--mobile[hidden] { display: none; }
.wyl__card--mobile .wyl__card-media {
  padding: 0;
  width: 100%;
}
.wyl__card--mobile .wyl__card-media img,
.wyl__card--mobile .wyl__card-media video {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: var(--wyl-media-ratio, 545.535 / 263);
  border-radius: calc(1rem / 2);
}
.wyl__card--mobile .wyl__card-content {
  padding: var(--card-padding-m-block);

  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wyl__nav {
  display: flex;
  align-items: center;

  justify-content: space-between;
  width: 100%;
}
.wyl__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.375rem;
  height: 3.375rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.wyl__nav-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.wyl__nav-btn img { display: block; width: 100%; height: 100%; }
.wyl__nav-btn--prev img { transform: rotate(180deg); }
.wyl__nav-counter {
  color: #0f0f10;
  font-family: var(--font-primary);
  font-weight: 400;

  font-size: var(--font-size-button-l);
}

.button-cta {
  display: flex;
  align-items: center;
  width: 100%;
  text-decoration: none;
}
.button-cta__label {
  flex: 1 1 0%;

  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem clamp(1rem, 12.821vw, 3.125rem);
  border-radius: 4.20019rem;
  background: var(--color-accent-buttons);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  /* Consumers may override the size; Hero uses its own slower token. */
  font-size: var(--button-cta-font-size, var(--font-size-button-cta));
}
.button-cta__arrow-bubble {
  flex-shrink: 0;
  width: 3.375rem;
  height: 3.375rem;
  border-radius: 3.75rem;
  background: var(--color-accent-buttons);
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-cta__arrow-icon {
  display: block;
  width: 1.5625rem;
  height: 1.5625rem;
}

@media (max-width: 988px) {
  .button-cta__arrow-bubble {
    display: none;
  }
}

.course-for-you-if__layout {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;

  gap: var(--gap-content-to-cta);
  padding-bottom: var(--section-spacing);
  padding-inline: var(--section-padding-x);
}
.course-for-you-if__layout--desktop { display: flex; }
.course-for-you-if__layout--mobile { display: none; }

@media (max-width: 988px) {
  .course-for-you-if__layout {
    padding-inline: var(--section-padding-x-mobile);
  }
}

.course-for-you-if__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;

  gap: var(--section-name-to-section);
}

.course-for-you-if__title { width: 100%; }

/* Width-based, not per-layout-block: the 2-up vertical tier renders the
   mobile block at desktop widths, so a per-block radius jumped at 1326. */
.course-for-you-if__card { border-radius: var(--radius-medium); }
@media (max-width: 988px) {
  .course-for-you-if__card { border-radius: var(--radius-medium-mobile); }
}

.course-for-you-if__layout--desktop .course-for-you-if__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;

  gap: clamp(0.625rem, calc(0.541px + 1.35135vw), 1.25rem);
}
.course-for-you-if__layout--desktop .course-for-you-if__card {
  display: flex;
  align-items: center;

  justify-content: space-between;
  background: var(--color-cards-bg);

  padding-left: clamp(1.875rem, calc(0.10138rem + 4.05405vw), 3.75rem);

  gap: clamp(1.25rem, calc(-2.17906rem + 7.83784vw), 4.875rem);
}
.course-for-you-if__layout--desktop .course-for-you-if__card-title {
  margin: 0;

  flex: 0 0 15.5ch;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-h3-card-xs-for-you-if);
  line-height: 1.2;
}
.course-for-you-if__layout--desktop .course-for-you-if__card-media {
  flex: 0 0 16rem;
  aspect-ratio: var(--cfyi-media-ratio, 900 / 812);
  border-radius: inherit;
  overflow: hidden;
}

@media (max-width: 1325.98px) {
  .course-for-you-if__layout--desktop .course-for-you-if__cards {
    grid-template-columns: 1fr;
  }
  .course-for-you-if__layout--desktop .course-for-you-if__card {
    gap: clamp(0.625rem, calc(-2.03375rem + 7.6605vw), 4.315rem);
  }

  .course-for-you-if__layout--desktop { display: none; }
  .course-for-you-if__layout--mobile { display: flex; }
}

/* 758.77 is derived from the real 324px illustration anchor, not from
   fit math — recompute if that anchor or the card gap changes. */
@media (max-width: 758.77px) {
  .course-for-you-if__layout--desktop { display: flex; }
  .course-for-you-if__layout--mobile { display: none; }
}

@media (max-width: 555.24px) {
  .course-for-you-if__layout--desktop { display: none; }
  .course-for-you-if__layout--mobile { display: flex; }
}

.course-for-you-if__layout--mobile .course-for-you-if__cards {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.625rem;
}
.course-for-you-if__layout--mobile .course-for-you-if__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background: var(--color-cards-bg);

  padding: 1.5rem 0 0 1.875rem;
  gap: 1.1875rem;
  overflow: hidden;
}
.course-for-you-if__layout--mobile .course-for-you-if__card-title {
  margin: 0;

  width: 15.5ch;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-h3-card-xs-for-you-if);
  line-height: 1.2;
}
.course-for-you-if__layout--mobile .course-for-you-if__card-media {
  width: 100%;
  max-width: 20.25rem;
  align-self: flex-end;
  aspect-ratio: var(--cfyi-media-ratio, 900 / 812);
  border-radius: inherit;
  overflow: hidden;
}

.course-for-you-if__card-media img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* These two blocks MUST stay below the mobile block's own base
   .course-for-you-if__cards rule — same specificity, later rule wins.
   Moved up, they silently stop applying and the 2-up grid disappears. */
@media (max-width: 1325.98px) {
  .course-for-you-if__layout--mobile .course-for-you-if__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: clamp(0.625rem, calc(0.541px + 1.35135vw), 1.25rem);
  }
}
@media (max-width: 555.24px) {
  .course-for-you-if__layout--mobile .course-for-you-if__cards {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
  /* Stacked: 324 wide at the tier's top down to 266 at 390 — her 240px
     height through the 900/812 ratio. Must stay after the base rule. */
  .course-for-you-if__layout--mobile .course-for-you-if__card-media {
    width: min(clamp(16.625rem, calc(8.06938rem + 35.1vw), 20.25rem), 100%);
  }
}

/* Horizontal scrolling card strip, the header row above it and the
   arrow buttons that drive it. Consumers: portfolio_gallery(), Teachers,
   Reviews. The arrows are also reused on their own by the portfolio
   lightbox, which has no track. */

.scroll-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: var(--section-padding-x);
  margin-bottom: var(--section-name-to-section);
}
@media (max-width: 988px) {
  .scroll-header { padding-inline: var(--section-padding-x-mobile); }
}

.scroll-track {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: var(--gap-content-to-cta);
  overflow-x: auto;
  /* Explicit: overflow-x:auto alone computes overflow-y to auto, which
     gave this a phantom vertical scroll. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--section-padding-x);
  scrollbar-width: none;
}
.scroll-track::-webkit-scrollbar { display: none; }
/* Inset at rest, cards bleeding to the real screen edge while scrolling.
   Must be margin on the cards plus scroll-padding — container padding or
   a spacer element both break scroll-snap-align. */
.scroll-track > :first-child { margin-inline-start: var(--section-padding-x); }
.scroll-track > :last-child { margin-inline-end: var(--section-padding-x); }
@media (max-width: 988px) {
  .scroll-track { scroll-padding-inline: var(--section-padding-x-mobile); }
  .scroll-track > :first-child { margin-inline-start: var(--section-padding-x-mobile); }
  .scroll-track > :last-child { margin-inline-end: var(--section-padding-x-mobile); }
}

.scroll-nav {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  flex: none;
}
/* The arrows take the shared flair hover (accent, as FAQ's rows). The
   icon file carries its own white disc, so the fill sits above it and
   multiplies through: green on the disc, black stays black. The
   button is rounded so the fill is clipped to the disc. */
.scroll-nav .nav-arrow {
  border-radius: 50%;
  --button-flair-color: var(--color-accent);
}
.scroll-nav .button-flair__fill {
  z-index: 1;
  mix-blend-mode: multiply;
}
/* At the track's start/end (set by carousel.js): greyed, no hover fill. */
.scroll-nav .nav-arrow[aria-disabled="true"] {
  filter: contrast(0.3) brightness(1.3);
  cursor: default;
}
.scroll-nav .nav-arrow[aria-disabled="true"] .button-flair__fill {
  display: none;
}
@media (max-width: 700px) {
  .scroll-nav { display: none; }
}

.nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(1.875rem, calc(0.45606rem + 3.2432vw), 3.375rem);
  height: clamp(1.875rem, calc(0.45606rem + 3.2432vw), 3.375rem);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.nav-arrow img { display: block; width: 100%; height: 100%; }
.nav-arrow--prev img { transform: scaleX(-1); }
.nav-arrow:disabled { opacity: 0.35; cursor: default; }

.portfolio-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

  gap: clamp(0.625rem, calc(-0.67569rem + 2.97297vw), 2rem);
}

.portfolio-gallery__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-inline: var(--section-padding-x);
}
@media (max-width: 988px) {
  .portfolio-gallery__header { padding-inline: var(--section-padding-x-mobile); }
}
.portfolio-gallery__card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: clamp(1rem, calc(0.527rem + 1.08108vw), 1.5rem);
  width: var(--portfolio-gallery-card-width);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.portfolio-gallery__photo {
  /* positioned: a film's play mark sits inside it. */
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--portfolio-gallery-card-ratio);
  border-radius: 1.5rem;
  overflow: hidden;
  transition: border-radius 0.3s ease;
}
@media (max-width: 988px) {
  .portfolio-gallery__photo {
    border-radius: 1.25rem;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 989px) {
  .portfolio-gallery__card:hover .portfolio-gallery__photo {
    border-radius: 3.75rem;
  }
}
.portfolio-gallery__card:focus-visible .portfolio-gallery__photo {
  border-radius: 3.75rem;
}
.portfolio-gallery__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-gallery__caption {
  display: flex;
  flex-direction: column;

  gap: clamp(0.5rem, calc(0.2635rem + 0.54054vw), 0.75rem);
}
.portfolio-gallery__studio {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-h4-under-card-m);
  color: var(--color-text);
  line-height: 1;
}
.portfolio-gallery__work {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-h4-under-card-l);
  color: var(--color-text);
  line-height: 1;
}

.portfolio-gallery__lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}
.portfolio-gallery__lightbox.is-visible {
  display: block;
}
body.portfolio-gallery-lightbox-open {
  overflow: hidden;
}
.portfolio-gallery__lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  backdrop-filter: blur(0.25rem);
  -webkit-backdrop-filter: blur(0.25rem);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.portfolio-gallery__lightbox[data-open="true"] .portfolio-gallery__lightbox-backdrop {
  opacity: 1;
}

.portfolio-gallery__lightbox-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);

  max-width: min(66vw, 49.5rem);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  background: var(--color-cards-bg);
  border-radius: var(--radius-medium);
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0.25rem 0.25rem 0.3875rem rgba(0, 0, 0, 0.04);
  opacity: 0;

  transition: opacity 0.4s ease, transform 0.4s ease, width 0.4s ease;
}
.portfolio-gallery__lightbox[data-open="true"] .portfolio-gallery__lightbox-panel {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.portfolio-gallery__lightbox-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-medium);
  overflow: hidden;
  flex: none;
  transition: aspect-ratio 0.4s ease;
}
.portfolio-gallery__lightbox-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The player takes the image's place for a film. Both need [hidden] to
   win over the display above, or the one left behind keeps the frame and
   pushes the other out of this clipped box. */
.portfolio-gallery__lightbox-video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.portfolio-gallery__lightbox-img[hidden],
.portfolio-gallery__lightbox-video[hidden] { display: none; }

/* A film's card says so: the play mark sits on the cover, on hover
   where there is one and always where there is not. */
.portfolio-gallery__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  background: rgba(28, 28, 32, 0.25);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.portfolio-gallery__play-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #fff;
  color: var(--color-text);
}
.portfolio-gallery__play-button svg { width: 1.375rem; height: 1.375rem; }
.portfolio-gallery__play-label {
  padding: 0.25rem 0.625rem;
  border-radius: 3.375rem;
  background: #fff;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: normal;
  color: var(--color-text);
}
@media (hover: hover) and (pointer: fine) {
  .portfolio-gallery__card:hover .portfolio-gallery__play,
  .portfolio-gallery__card:focus-visible .portfolio-gallery__play { opacity: 1; }
}
@media (hover: none) {
  .portfolio-gallery__play { opacity: 1; background: none; }
  .portfolio-gallery__play-label { display: none; }
}

.portfolio-gallery__lightbox-close {
  position: absolute;

  top: clamp(0.75rem, calc(0.57263rem + 0.40541vw), 0.9375rem);
  right: clamp(0.75rem, calc(0.57263rem + 0.40541vw), 0.9375rem);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(1.5rem, calc(0.49494rem + 2.29730vw), 2.5625rem);
  height: clamp(1.5rem, calc(0.49494rem + 2.29730vw), 2.5625rem);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}
.portfolio-gallery__lightbox-close img {
  display: block;

  width: clamp(0.75rem, calc(0.5135rem + 0.54054vw), 1rem);
  height: clamp(0.75rem, calc(0.5135rem + 0.54054vw), 1rem);
}

.portfolio-gallery__lightbox-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  padding-inline: 1.875rem;
}

.portfolio-gallery__lightbox-caption {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}
.portfolio-gallery__lightbox-studio {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-h4-under-card-m);
  color: var(--color-text);
}
.portfolio-gallery__lightbox-work {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-h4-under-card-l);
  color: var(--color-text);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.portfolio-gallery__lightbox-arrows {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex: none;
}

.portfolio-gallery__lightbox-dots {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  z-index: 1;
}
.portfolio-gallery__lightbox-dot {
  width: 0.48562rem;
  height: 0.48562rem;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0.4;
  padding: 0;
  border: none;
  cursor: default;
  transition: opacity 0.2s ease;
}
.portfolio-gallery__lightbox-dot[aria-current="true"] {
  opacity: 1;
}

@media (max-width: 988px) {
  .portfolio-gallery__lightbox-panel {
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    width: auto;
    max-width: none;
    transform: translate(-50%, calc(-50% + 2.5rem));
    max-height: 85vh;
    border-radius: var(--radius-medium-mobile);
    padding-bottom: 1.25rem;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .portfolio-gallery__lightbox[data-open="true"] .portfolio-gallery__lightbox-panel {
    transform: translate(-50%, -50%);
  }
  .portfolio-gallery__lightbox-media {
    border-radius: inherit;
  }
  .portfolio-gallery__lightbox-footer {
    padding-inline: 1.875rem;
  }
}
@media (max-width: 700px) {
  .portfolio-gallery__lightbox-arrows { display: none; }
  .portfolio-gallery__lightbox-dots { display: flex; }
}

/* Long page galleries: one card shape, and the page scrolls inside the
   card's own shape instead of paging between photos. */
.portfolio-gallery--scroll .portfolio-gallery__photo img {
  object-position: top;
}
/* Its own layer, so the close button (the media box's child) stays put
   while the page scrolls, and the bar can sit over the page. */
.portfolio-gallery--scroll .portfolio-gallery__lightbox-scroller {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Do not let the browser hold the old place when the image swaps. */
  overflow-anchor: none;

  scrollbar-width: none;
}
.portfolio-gallery--scroll .portfolio-gallery__lightbox-scroller::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.portfolio-gallery--scroll .portfolio-gallery__lightbox-img {
  height: auto;
  object-fit: fill;
}
/* PROPOSED: no frame for a scrollbar. The plate is translucent so the
   page shows through it, the thumb is white (her call). */
.portfolio-gallery--scroll .portfolio-gallery__lightbox-bar {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  bottom: 0.625rem;
  width: 0.5rem;
  border-radius: 62.4375rem;
  background: rgba(0, 0, 0, 0.18);
  z-index: 1;
}
.portfolio-gallery--scroll .portfolio-gallery__lightbox-bar-thumb {
  display: block;
  width: 100%;
  border-radius: 62.4375rem;
  background: #9e9e9e;
  cursor: grab;
  touch-action: none;
}
.portfolio-gallery--scroll .portfolio-gallery__lightbox-bar-thumb:active {
  cursor: grabbing;
}
.portfolio-gallery--scroll .portfolio-gallery__lightbox-arrows,
.portfolio-gallery--scroll .portfolio-gallery__lightbox-dots {
  display: none;
}

.teachers {
  padding-bottom: var(--section-spacing);
}

.teachers__text-block {
  min-width: 0;
}

.teachers__subtitle {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;

  font-size: clamp(1rem, calc(0.7635rem + 0.54054vw), 1.25rem);
  line-height: 1.3;

  max-width: 48ch;
}

.teachers__card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: clamp(19.0625rem, calc(11.90875rem + 16.3514vw), 26.625rem);

  /* The frame's height is the least a card is; a longer description grows
     every card to match, they stay one height (her call). */
  min-height: clamp(31.5625rem, calc(19.02875rem + 28.6486vw), 44.8125rem);
}
.teachers .scroll-track { align-items: stretch; }

.teachers__card-media {
  width: 100%;

  height: clamp(20rem, calc(10.71813rem + 21.2162vw), 29.8125rem);
  margin-bottom: -2.5rem;
  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
  overflow: hidden;
  flex: none;
  position: relative;
  z-index: 0;
}
@media (max-width: 988px) {
  .teachers__card-media { border-radius: var(--radius-medium-mobile) var(--radius-medium-mobile) 0 0; }
}
.teachers__card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder until the photo arrives (PROPOSED grey). */
.teachers__card-media--empty { background: #d9d9d9; }

.teachers__card-panel {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-cards-bg);
  border-radius: var(--radius-medium);
  position: relative;
  z-index: 1;
  box-sizing: border-box;

  padding-block: clamp(1.5rem, calc(1.14525rem + 0.81081vw), 1.875rem);
  padding-left: clamp(1.875rem, calc(1.28381rem + 1.35135vw), 2.5rem);
  padding-right: clamp(1.875rem, calc(0.10138rem + 4.05405vw), 3.75rem);
}
@media (max-width: 988px) {
  .teachers__card-panel { border-radius: var(--radius-medium-mobile); }
}

.teachers__card-text {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.teachers__card-name {
  margin: 0;
  color: #0f0f10;
  font-family: var(--font-family-accent);
  font-weight: 400;
  font-size: var(--font-size-name-teacher);
  line-height: 1.1;
  text-transform: lowercase;

  letter-spacing: clamp(-0.4px, calc(-0.0886px + -0.02162vw), -0.24px);
}

.teachers__card-tail { white-space: nowrap; }
/* A micro icon ending the name, on its line, in the name's own size; the
   padding grows the tap area, the negative margin takes it back out. */
.teachers__card-social {
  display: inline-block;
  padding: 0.3125rem;
  margin: -0.3125rem -0.3125rem -0.3125rem 0.15em;
  line-height: 0;
  vertical-align: middle;
}
.teachers__card-social img { display: block; width: 0.7em; height: 0.7em; }
.teachers__card-name a { color: inherit; text-decoration: none; }
.teachers__card-name a:hover { text-decoration: underline; }

.teachers__card-bio {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-card-s);
  line-height: 1.3;
}

.teachers__card-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  /* Do not add max-width:100% — it re-imposes the label-wrapping bug. */
  align-self: flex-start;
  width: max-content;

  gap: clamp(0.3125rem, calc(0.076rem + 0.54054vw), 0.5625rem);
}
/* No pills: the card hugs its text instead of keeping the frame's height;
   the track still stretches them to the tallest. */
@media (max-width: 389.98px) {
  .teachers__card { min-height: 0; }
  .teachers__card-labels { display: none; }
}

.how-to-study__layout {
  padding-inline: var(--section-padding-x);
  padding-bottom: var(--section-spacing);
}
@media (max-width: 988px) {
  .how-to-study__layout {
    padding-inline: var(--section-padding-x-mobile);
  }
}

.how-to-study__cards {
  display: flex;
  flex-direction: column;

  gap: 0.75rem;
  margin-top: var(--section-name-to-section);
}

.how-to-study__card {
  display: flex;

  align-items: stretch;
}

.how-to-study__number {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 0.5625rem;
  flex: 0 0 auto;
}

.how-to-study__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: clamp(2.76469rem, calc(2.06906rem + 1.59257vw), 3.5rem);
  height: clamp(2.76469rem, calc(2.06906rem + 1.59257vw), 3.5rem);
  border-radius: 50%;
  background: var(--color-cards-bg);
  font-family: var(--font-family-accent);
  font-weight: 400;
  font-size: var(--font-size-number-badge);
  color: var(--color-text);
}

.how-to-study__card:last-child .how-to-study__line {
  visibility: hidden;
}

.how-to-study__line {
  /* 1 1 0, never auto: auto falls back to the SVG's intrinsic height and
     pins every card to a flat height. */
  flex: 1 1 0;
  min-height: 0;
  width: 0.125rem;
  overflow: hidden;
}
.how-to-study__line img {
  display: block;
  width: 100%;
  height: 100%;
}

.how-to-study__box {
  flex: 1 1 auto;
  display: flex;
  align-items: center;

  gap: clamp(1.875rem, calc(0.10138rem + 4.05405vw), 3.75rem);
  background: var(--color-cards-bg);
  border-radius: var(--radius-medium);
  overflow: hidden;

  --htp-frame-inset: clamp(0px, calc(-0.70944rem + 1.62162vw), 0.75rem);
}
@media (max-width: 988px) {
  .how-to-study__box {
    border-radius: var(--radius-medium-mobile);
  }
}

.how-to-study__media {
  flex: 0 0 auto;
  height: clamp(11.41205rem, calc(4.76638rem + 15.19016vw), 18.4375rem);
  aspect-ratio: 494 / 295;

  margin: var(--htp-frame-inset);
  border-radius: 1rem;
  overflow: hidden;
}
.how-to-study__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.how-to-study__text {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;

  box-sizing: content-box;

  font-size: var(--font-size-body-card-l);
  flex: 0 1 31.8ch;
  min-width: 15.36035rem;

  padding: 1.875rem 1.875rem 1.875rem 0;
}

.how-to-study__card-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--font-size-h3-card-l);
  line-height: 0.95;
  color: var(--color-text);
}

.how-to-study__card-body {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-card-l);
  line-height: 1.3;
  color: var(--color-text);
}

@media (max-width: 695.75px) {
  .how-to-study__box {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .how-to-study__media {
    flex: 0 0 auto;
    width: 100%;

    height: auto;

    aspect-ratio: 306 / 174;
    margin: 0;
  }
  .how-to-study__text {
    flex: 1 1 auto;
    /* Stretched, never 100%: the box is content-box, so 100% + padding
       overflowed the card. */
    width: auto;

    max-width: 31.8ch;
    min-width: 0;
    gap: 0.75rem;
    padding: 1.875rem;
  }
}

.student-works {
  padding-bottom: var(--section-spacing);
}

.student-works__title { max-width: 20.4ch; }

#section-student-works .portfolio-gallery {
  gap: var(--section-name-to-section);
}

#section-student-works .portfolio-gallery__header {
  align-items: flex-end;
}

/* Collapsible item: `.accordion` gets `is-open`, `.accordion__toggle` is
   the button, `.accordion__body > .accordion__body-inner` collapses.
   Consumers: Curriculum, FAQ. */
.accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.accordion.is-open .accordion__body {
  grid-template-rows: 1fr;
}
.accordion__body-inner {
  min-height: 0;
  overflow: hidden;
}

.curriculum {
  padding-inline: var(--section-padding-x);
  padding-bottom: var(--section-spacing);
}
@media (max-width: 988px) {
  .curriculum { padding-inline: var(--section-padding-x-mobile); }
}

.curriculum__description {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(1rem, calc(0.64525rem + 0.81081vw), 1.375rem);
  line-height: 1.3;
  /* 752px at the real 22px; holds the 2-line wrap. */
  max-width: 53.2ch;
}

.curriculum__columns {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.625rem, calc(0.541px + 1.35135vw), 1.25rem);
  margin-top: var(--section-name-to-section);
}

.curriculum__column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.625rem, calc(0.541px + 1.35135vw), 1.25rem);
}

.curriculum__card {
  background: var(--color-cards-bg);
  border-radius: 1.25rem;
  padding: 0.5rem 0.5rem 0.5rem clamp(1rem, calc(0.17231rem + 1.89189vw), 1.875rem);
}
@media (max-width: 988px) {
  .curriculum__card { border-radius: 1rem; }
}

.curriculum__card-heading {
  margin: 0;
  font: inherit;
}

.curriculum__card-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.curriculum__card-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.curriculum__card-title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-h5-curriculum);
  line-height: 1.1;
}

.curriculum__card-icon {
  flex: none;
  width: clamp(4.375rem, calc(2.01012rem + 5.40541vw), 6.875rem);
  height: clamp(4.375rem, calc(2.01012rem + 5.40541vw), 6.875rem);
}
.curriculum__card-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.curriculum__card-plus {
  flex: none;
  align-self: flex-start;
  position: relative;
  width: clamp(1.5625rem, calc(1.26687rem + 0.67568vw), 1.875rem);
  height: clamp(1.5625rem, calc(1.26687rem + 0.67568vw), 1.875rem);
  /* 10 + 2 = the 12px gap Figma keeps before the button. */
  margin-left: 0.125rem;
  border-radius: 50%;
  background: var(--color-bg);
  transition: transform 0.3s ease;
}
.curriculum__card-plus::before,
.curriculum__card-plus::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 53.4%;
  height: 1px;
  background: var(--color-text);
  transform: translate(-50%, -50%);
}
.curriculum__card-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.curriculum__card.is-open .curriculum__card-plus {
  transform: rotate(45deg);
}

.curriculum__topics {
  margin: clamp(0.5rem, calc(0.38175rem + 0.27027vw), 0.625rem) 0 0;
  /* Bottom: Figma's opened-card padding minus the card's own 8px. No
     top padding: it framed the divider, which is gone. */
  /* Left: the bullet sits on the title's left edge (her call), the text
     one em after it. */
  padding: 0 0 clamp(0.75rem, calc(0.15881rem + 1.35135vw), 1.375rem) 1em;
  list-style: none;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-card-m);
  line-height: 1.66;
}
/* The font's own bullet glyph, as Figma's list draws it; the browser's
   disc marker is visibly bigger. */
.curriculum__topics li {
  position: relative;
}
.curriculum__topics li::before {
  content: '\2022';
  position: absolute;
  left: -1em;
}

/* Two columns only while the longest title still fits on one line;
   recompute if a title, the icon size or the card padding changes. */
@media (max-width: 836.49px) {
  .curriculum__columns { flex-direction: column; align-items: stretch; }
}

/* Mobile composition (icon leads) from where the desktop one has no
   free space left between title and icon; same recompute rule. */
@media (max-width: 398.98px) {
  .curriculum__card-icon { order: -1; }
}

/* The link sits in the heading block, where the subtitle sits in the
   other strips, so the arrows ride down with it as they do there. */
.reviews__link { align-self: flex-start; }

.reviews {
  padding-bottom: var(--section-spacing);
}

.reviews__card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  gap: 1.375rem;
  width: clamp(20.625rem, calc(1.70606rem + 43.2432vw), 40.625rem);
  padding: clamp(1.5rem, calc(0.64863rem + 1.94595vw), 2.4rem)
    clamp(2rem, calc(0.34463rem + 3.78378vw), 3.75rem)
    clamp(1.875rem, calc(0.69256rem + 2.7027vw), 3.125rem)
    clamp(1rem, calc(0.17231rem + 1.89189vw), 1.875rem);
  background: var(--color-cards-bg);
  border-radius: 1.5rem;
}
@media (max-width: 988px) {
  .reviews__card { border-radius: 1rem; }
}

/* The glyph is taller than its 51px box on purpose (Figma). */
.reviews__quote {
  flex: none;
  display: block;
  height: 3.1875rem;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(3.625rem, calc(0.55069rem + 7.02703vw), 6.875rem);
  line-height: 1;
  color: var(--color-text);
}

.reviews__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.17813rem;
}

.reviews__author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.reviews__avatar {
  flex: none;
  display: block;
  width: clamp(2.125rem, calc(1.06081rem + 2.43243vw), 3.25rem);
  height: clamp(2.125rem, calc(1.06081rem + 2.43243vw), 3.25rem);
  border-radius: 50%;
  background: var(--color-bg);
  object-fit: cover;
}
/* Letter size copies the "G" placeholder's proportion: cap height 0.39
   of the circle. */
.reviews__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(1.15rem, calc(0.57063rem + 1.32432vw), 1.7625rem);
  line-height: 1;
  color: var(--color-text);
}

.reviews__name {
  margin: 0;
  font-family: var(--font-family-accent);
  font-weight: 400;
  font-size: clamp(0.875rem, calc(0.28381rem + 1.35135vw), 1.5rem);
  line-height: normal;
  text-transform: lowercase;
  color: var(--color-text);
}

.reviews__text {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-card-l);
  line-height: 1.4;
  color: var(--color-text);
}

.workplaces {
  padding-bottom: var(--section-spacing);
}

.workplaces__title {
  padding-inline: var(--section-padding-x);
  /* 734px at the real 50px; holds the 2-line wrap. */
  max-width: calc(22.8ch + 2 * var(--section-padding-x));
}
@media (max-width: 988px) {
  .workplaces__title {
    padding-inline: var(--section-padding-x-mobile);
    max-width: none;
  }
}

.workplaces__marquee {
  overflow: hidden;
  margin-top: var(--section-name-to-section);
}

/* Figma: the strip starts one logo set to the left and slides right by
   one set in 16s, looping. Percentages keep it set-relative at any size. */
.workplaces__track {
  display: flex;
  width: max-content;
  animation: workplaces-marquee 16s linear infinite;
}
@keyframes workplaces-marquee {
  from { transform: translateX(-33.3333%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .workplaces__track { animation: none; }
}

.workplaces__tile {
  flex: none;
  width: clamp(9.98125rem, calc(7.03125rem + 6.7432vw), 13.1rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-cards-bg);
}
.workplaces__tile img {
  display: block;
  width: 100%;
  height: 100%;
}

/* gsap.com's stroke-button hover: a circle grows from the pointer and
   fills the pill, following the pointer while it is inside. The host
   pill adds the class and the fill span; keeps its own stroke on a
   ::after so the fill does not paint over it. Driven by button-flair.js. */
.button-flair {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.button-flair__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transform-origin: 0 0;
  transform: scale(0);
  will-change: transform;
}
.button-flair__fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  /* Radius = the pill's width, so it covers the far end even when the
     pointer enters at an edge (gsap.com's 170% leaves a sliver on wide
     pills). */
  width: 200%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--button-flair-color, var(--color-accent-buttons));
  transform: translate(-50%, -50%);
}

.pricing {
  padding-bottom: var(--section-spacing);
}

.pricing__heading {
  padding-inline: var(--section-padding-x);
}
@media (max-width: 988px) {
  .pricing__heading { padding-inline: var(--section-padding-x-mobile); }
}

/* PROPOSED: Teachers' subtitle type, no frame for this line. */
.pricing__lead {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(1rem, calc(0.7635rem + 0.54054vw), 1.25rem);
  line-height: 1.3;
  color: var(--color-text);
}

.pricing__cards {
  margin-top: var(--section-name-to-section);
  /* The tiers' copy differs in length; keeps the buttons on one line. */
  align-items: stretch;
}

.pricing__card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  cursor: pointer;
}

.pricing__panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* PROPOSED (2026-10-01 redesign for readability): name and price,
     who it's for, then what's included, evenly spaced. */
  gap: 1.5rem;
  padding: clamp(1.875rem, calc(1.28381rem + 1.35135vw), 2.5rem);
  background: var(--color-cards-bg);
  border-radius: var(--radius-medium);
  transition: border-radius 0.3s ease;
}
@media (hover: hover) and (pointer: fine) and (min-width: 989px) {
  .pricing__card:hover .pricing__panel { border-radius: 3.75rem; }
}
.pricing__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-text);
}

.pricing__meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pricing__title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(1.5rem, calc(1.027rem + 1.08108vw), 2rem);
  line-height: 1.2;
  color: var(--color-text);
}

/* PROPOSED: the redesign's reading sizes — 16→18 for the tagline and
   the list, 16 for "for whom" (the frame's 14 read too small). */
.pricing__tagline,
.pricing__prefix,
.pricing__feature {
  font-size: clamp(1rem, calc(0.88175rem + 0.27027vw), 1.125rem);
}
.pricing__tagline {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-text);
}

.pricing__subtitle {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-text);
}

.pricing__prefix {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
}

.pricing__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Geologica Light in the source; primary font at 400. */
.pricing__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: var(--font-primary);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text);
}
/* Centred on the first line (1.4em tall). */
.pricing__feature img {
  flex: none;
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: calc(0.7em - 0.5625rem);
}

.pricing__price-block {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}
/* The name sits on the price (one line in every tier, so the prices line
   up across the cards); the price's own top bearing gives the space. */
.pricing__title {
  margin-bottom: 0.25rem;
}

.pricing__price-row {
  display: flex;
  align-items: flex-end;
}

.pricing__price {
  font-family: var(--font-primary);
  font-weight: 500;
  /* PROPOSED: 44→64 (the frame's 70→90 made the card taller than the screen). */
  font-size: clamp(2.75rem, calc(1.56756rem + 2.7027vw), 4rem);
  line-height: 1;
  color: var(--color-text);
}

/* Figma: a 10px-padded box overlapping the price by 10px. */
.pricing__period {
  padding: 0.625rem;
  margin-left: -0.625rem;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: normal;
  white-space: nowrap;
  color: var(--color-text);
}

.pricing__note {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: normal;
  white-space: pre-wrap;
  color: var(--color-text);
}

.pricing__button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.375rem;
  border-radius: 4.20019rem;
  background: var(--color-cards-bg);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-button-cta);
  color: var(--color-text);
  text-decoration: none;
}
/* No stroke: the frame's #000 one dropped, nothing else on the site
   has one. */
.pricing__card--featured .pricing__button {
  background: var(--color-accent-buttons);
}
.pricing__button--disabled {
  cursor: default;
  opacity: var(--opacity-secondary-text);
}
/* The roll fills the pill (its 44px inline padding included) so the
   whole button, not just the label, triggers the shared roll hover. */
.pricing__button .roll {
  width: 100%;
  height: 100%;
}
.pricing__button .roll__mask {
  height: 100%;
}
.pricing__button .roll__line {
  justify-content: center;
  padding-inline: 2.75rem;
}

/* PROPOSED (her config, no frame): the feature text's type, louder
   than the footnotes under it. */
.pricing__guarantee {
  margin: 1.875rem 0 0;
  padding-inline: var(--section-padding-x);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-text);
}
.pricing__guarantee strong { font-weight: 500; }
.pricing__guarantee a { color: inherit; }
@media (max-width: 988px) {
  .pricing__guarantee { padding-inline: var(--section-padding-x-mobile); }
}

/* PROPOSED (her config, no frame): the note's type under the cards. */
.pricing__footnotes {
  list-style: none;
  margin: 0.75rem 0 0;
  padding-inline: var(--section-padding-x);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--color-text);
}
@media (max-width: 988px) {
  .pricing__footnotes { padding-inline: var(--section-padding-x-mobile); }
}

/* Scales with the card; PROPOSED 20px at the 424 card — the frame's 25
   stuck out too far (her call, 2026-10-03) — ×350/424 at the mobile
   width. */
.pricing__tag {
  font-size: clamp(1.03rem, calc(0.822rem + 0.47567vw), 1.25rem);
  position: absolute;
  top: clamp(0.90625rem, calc(2.14688rem - 1.3784vw), 1.54375rem);
  /* The frame's corner, but the long copy may stick out at most 16px
     (half its rotated width is 5.2em) — less than the cards' gap. */
  right: max(clamp(4.44375rem, calc(2.24437rem + 5.027vw), 6.76875rem), calc(5.2em - 1rem));
  transform: translate(50%, -50%) rotate(16.69deg);
}
/* Stacked: half the rotated badge in from the card's edge, or its long
   copy leaves the phone screen; recompute if the badge text changes. */
@media (max-width: 699.98px) {
  .pricing__tag { right: 5.2em; }
}

@media (max-width: 699.98px) {
  .pricing__cards {
    flex-direction: column;
    gap: 1.875rem;
    overflow: visible;
    padding-inline: var(--section-padding-x-mobile);
    scroll-snap-type: none;
  }
  .pricing__cards > :first-child { margin-inline-start: 0; }
  .pricing__cards > :last-child { margin-inline-end: 0; }
  .pricing__card {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* Three tiers: columns ≥ 1200 (her number), the shared scroll track
   between, stacked below 700 (where the tracks' own nav also gives up).
   The track's own rules are the default; the other two tiers undo them. */
@media (min-width: 1200px) {
  .pricing__cards {
    overflow: visible;
    gap: 1.25rem;
    padding-inline: var(--section-padding-x);
    scroll-snap-type: none;
  }
  .pricing__cards > :first-child { margin-inline-start: 0; }
  .pricing__cards > :last-child { margin-inline-end: 0; }
}
@media (min-width: 700px) and (max-width: 1199.98px) {
  .pricing__card {
    flex: 0 0 auto;
    width: clamp(21.875rem, calc(17.5rem + 10vw), 26.5rem);
    scroll-snap-align: start;
  }
  /* Room for the sticker, which sits 22px above the card and would be
     clipped by the track's overflow; the margin gives it back. */
  .pricing__cards {
    padding-top: 1.375rem;
    margin-top: calc(var(--section-name-to-section) - 1.375rem);
  }
}

/* The plan cards, from the "новые пакеты" frame (1440 only; the low
   ends are PROPOSED). The payment-schedule cards on the offline pages
   share this section and keep the sizes above. */
.pricing__card--plan { gap: 0.9375rem; }
.pricing__card--plan .pricing__panel {
  /* Her card's own 67 above the price, as a minimum — the cards are equal
     height, so space-between still lands every price on one line. It
     holds its share of the card: 67 of her 424, so 55 of the phone's
     350. */
  justify-content: space-between;
  gap: clamp(3.4375rem, calc(3.15894rem + 1.1429vw), 4.1875rem);
  /* The frame pads 36 down the sides of 40. */
  padding: clamp(1.875rem, calc(1.73569rem + 0.5714vw), 2.25rem) clamp(1.875rem, calc(1.28381rem + 1.35135vw), 2.5rem);
}
.pricing__top {
  display: flex;
  flex-direction: column;
  gap: 1.875rem; /* her call over the frame's 49 */
}
.pricing__card--plan .pricing__meta { gap: 0.75rem; }
.pricing__card--plan .pricing__content {
  gap: 1.375rem;
  padding-top: 0;
  border-top: none;
}
/* Nothing in this card ramps: the list, "Включено" and the note are
   14/16/14 at every width, so the name and the price hold their ratio to
   them at a flat size too. */
.pricing__card--plan .pricing__title {
  margin-bottom: 0;
  font-size: 1.75rem;
}
.pricing__card--plan .pricing__subtitle {
  font-size: 0.875rem;
  line-height: 1.35;
  /* Three lines are reserved whatever a text runs to, so "Включено"
     starts at the same height in every card (her call). Two lines are
     not reachable for all three: in the 3-column layout the card is
     342 wide and even the shortest of them needs three there. */
  min-height: calc(3 * 1.35em);
  opacity: var(--opacity-secondary-text);
}
.pricing__card--plan .pricing__prefix { font-size: 1rem; }
/* The list is descriptive text, like the subtitle and the note (her
   call, 2026-10-06). */
.pricing__card--plan .pricing__feature { font-size: 0.875rem; }
.pricing__card--plan .pricing__prefix { line-height: normal; }
.pricing__card--plan .pricing__feature { line-height: 1.3; }
.pricing__card--plan .pricing__price-block { gap: 0; }
.pricing__card--plan .pricing__price {
  font-size: 4rem; /* PROPOSED: her 80 read too big, 40 too small */
  line-height: 1.1;
}
/* On her card the period rides the price's baseline inside one line, so
   it lines up on the digits, not under them. The 8 beside it is
   PROPOSED. */
.pricing__card--plan .pricing__price-row { align-items: baseline; }
.pricing__card--plan .pricing__period {
  padding: 0 0 0 0.5rem;
  margin-left: 0;
  line-height: 1.1;
}
.pricing__card--plan .pricing__note { line-height: 1.65; }

/* Stacked, the button is read as part of its own card: 10 from it, 30 to
   the next one (her call, 2026-10-06). Must stay after
   .pricing__card--plan's own gap — same specificity. */
@media (max-width: 699.98px) {
  .pricing__card--plan { gap: 0.625rem; }
}

.next-start {
  padding-inline: var(--section-padding-x);
  padding-bottom: var(--section-spacing);
}
@media (max-width: 988px) {
  .next-start { padding-inline: var(--section-padding-x-mobile); }
}

.next-start__subtitle {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(1rem, calc(0.64525rem + 0.81081vw), 1.375rem);
  line-height: 1.3;
  color: var(--color-text);
}

.next-start__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "widgets image"
    "panel image";
  gap: clamp(0.625rem, calc(0.541px + 1.35135vw), 1.25rem);
  margin-top: var(--section-name-to-section);
}

/* ---- calendar widgets: everything in cqw of the widgets ROW (both
   widgets are 315/650 of it in both frames): Figma px / 650 * 100, so
   the widget scales as one piece. Below 700 the type drops to the
   mobile frame's fixed sizes (her call). The container must be the row,
   not the widget — cqw on the container itself falls back to the
   viewport. ---- */

.next-start__widgets {
  grid-area: widgets;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(0.625rem, calc(0.541px + 1.35135vw), 1.25rem);
}

.next-start__widget {
  aspect-ratio: 315 / 318;
  /* Stretch ignores aspect-ratio; this keeps the pair equal when one
     outgrows the ratio at the small end. */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-cards-bg);
  border-radius: var(--radius-medium);
  font-family: var(--font-primary);
  color: var(--color-text);
}
@media (max-width: 988px) {
  .next-start__widget { border-radius: var(--radius-medium-mobile); }
}

.next-start__day { padding: 4.483cqw; }
.next-start__month {
  justify-content: flex-start;
  padding: 4.075cqw 4.075cqw 3.26cqw;
}

.next-start__overline {
  font-weight: 500;
  font-size: 2.242cqw;
  line-height: normal;
}
.next-start__overline--day { color: #54b604; }

.next-start__day-head {
  display: flex;
  flex-direction: column;
  gap: 0.408cqw;
}

.next-start__day-number {
  font-weight: 400;
  font-size: 8.966cqw;
  line-height: 1.1;
}

.next-start__events {
  display: flex;
  flex-direction: column;
  gap: 2.038cqw;
}

.next-start__event {
  display: flex;
  flex-direction: column;
  gap: 0.408cqw;
  padding: 1.223cqw 2.038cqw;
  border-left: 0.815cqw solid var(--color-accent-buttons);
  border-radius: 1.631cqw;
  background: #ecffdd;
  color: #5cba0f;
}
.next-start__event-title {
  font-weight: 700;
  font-size: 2.445cqw;
  line-height: normal;
}
.next-start__event-time {
  font-weight: 600;
  font-size: 2.242cqw;
  line-height: normal;
  opacity: 0.8;
}


.next-start__weekdays,
.next-start__grid {
  display: grid;
  grid-template-columns: repeat(7, 4.891cqw);
  justify-content: space-between;
  font-size: 2.038cqw;
  line-height: normal;
  color: #8e8e93;
}
.next-start__weekdays {
  margin-top: 3.308cqw;
  font-weight: 700;
}
.next-start__weekdays span,
.next-start__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.075cqw;
}
.next-start__weekdays span { height: 3.668cqw; }
.next-start__grid {
  margin-top: 3.308cqw;
  row-gap: 0.815cqw;
  font-weight: 500;
}
.next-start__cell {
  border-radius: 62.4375rem;
}
.next-start__cell.is-start {
  font-weight: 700;
  background: #aae779;
  color: var(--color-text);
}
/* PROPOSED: the start day's green at a quarter, so the weekly rhythm
   reads without competing with the start itself. */
.next-start__cell.is-class {
  background: rgba(170, 231, 121, 0.25);
  color: var(--color-text);
}

/* ---- image card + badges (her call: badges under the card at every
   width, white, stretching across it like Hero's mobile badges) ---- */

.next-start__image-card {
  grid-area: image;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  /* Same gap as between the cards around it — her call. */
  gap: clamp(0.625rem, calc(0.541px + 1.35135vw), 1.25rem);
}

.next-start__image-body {
  position: relative;
  padding: clamp(3.6875rem, calc(2.15031rem + 3.51351vw), 5.3125rem) clamp(1.875rem, calc(0.10138rem + 4.05405vw), 3.75rem) 1.5rem;
  background: var(--color-cards-bg);
  border-radius: var(--radius-medium);
}

.next-start__laptop {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 530 / 384.2;
  object-fit: cover;
}

/* Scales with the card (cqw of its width): centre 207.6/650 in,
   94.7/650 down, 65.9/650 tall; the mobile frame's own proportions
   below 700. */
.next-start__soon {
  position: absolute;
  left: 31.94%;
  top: 14.57cqw;
  transform: translate(-50%, -50%) rotate(-18.74deg);
  font-family: var(--font-family-accent);
  font-weight: 400;
  font-size: 10.138cqw;
  line-height: 1;
  text-align: center;
  text-transform: lowercase;
  white-space: nowrap;
  color: var(--color-text);
}

.next-start__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  /* Hero's badge-row gap; the frame's 7→15 read as too loose — her call. */
  gap: 0.625rem;
}
.next-start__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  gap: clamp(0.375rem, calc(0.31588rem + 0.13514vw), 0.4375rem);
  height: 2.125rem;
  padding: 0.5rem 0.93125rem;
  border-radius: var(--radius-label);
  background: var(--color-cards-bg);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(0.875rem, calc(0.75675rem + 0.27027vw), 1rem);
  line-height: normal;
  white-space: nowrap;
  color: var(--color-text);
}
.next-start__badge img {
  display: block;
  width: clamp(0.625rem, calc(0.45356rem + 0.39189vw), 0.80625rem);
  height: clamp(0.5625rem, calc(0.38819rem + 0.39865vw), 0.74375rem);
}

/* ---- sign-up panel ---- */

.next-start__panel {
  grid-area: panel;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.375rem;
  padding: 1.875rem;
  background: var(--color-cards-bg);
  border-radius: var(--radius-medium);
}

.next-start__panel-text {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(1.25rem, calc(1.0135rem + 0.54054vw), 1.5rem);
  line-height: 1.2;
  color: var(--color-text);
  /* 446px at the real 24px: the frame's longest line ("количество
     людей в группе ограничено"), 0.76 of the panel — her call. */
  max-width: 29ch;
}

.next-start__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.375rem;
}

.next-start__button {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Grows from its label up to Figma's width, so the avatars stay on
     the same line as long as the label fits. */
  flex: 1 1 auto;
  max-width: clamp(11.675rem, calc(8.76688rem + 6.64865vw), 14.75rem);
  height: 2.8125rem;
  border-radius: 3.75rem;
  background: var(--color-accent-buttons);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(1rem, calc(0.88175rem + 0.27027vw), 1.125rem);
  color: var(--color-text);
  text-decoration: none;
}
/* The roll fills the pill so the whole button triggers the shared roll
   hover; the label's width still sets the pill's minimum. */
.next-start__button .roll {
  width: 100%;
  height: 100%;
}
.next-start__button .roll__mask {
  height: 100%;
}
.next-start__button .roll__line {
  justify-content: center;
}

.next-start__avatars {
  display: flex;
}
.next-start__avatars img {
  display: block;
  width: clamp(1.5525rem, calc(0.95181rem + 1.37297vw), 2.1875rem);
  height: clamp(1.5525rem, calc(0.95181rem + 1.37297vw), 2.1875rem);
  border-radius: 50%;
  border: 1px solid #fff;
  object-fit: cover;
}
.next-start__avatars img + img {
  margin-left: clamp(-0.375rem, calc(-0.16337rem - 0.23514vw), -0.26625rem);
}

/* ---- stacked: widgets, image, panel (the mobile frame) ---- */
@media (max-width: 1019.98px) {
  .next-start__layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "widgets"
      "image"
      "panel";
  }
  /* The mobile frame's event strip has no time line. */
  .next-start__event-time { display: none; }
}

/* Mobile frame's fixed type sizes and sticker proportion. */
@media (max-width: 699.98px) {
  .next-start__overline { font-size: 0.875rem; }
  .next-start__day-number { font-size: 3.375rem; }
  /* "Скоро" is five characters where a date is two: at the flat 54 it
     fills the widget edge to edge. 43 leaves the same air a date has. */
  .next-start__day-number--soon { font-size: 2.6875rem; }
  .next-start__event-title { font-size: 0.75rem; }
  .next-start__weekdays,
  .next-start__grid { font-size: 0.625rem; }
  .next-start__soon {
    left: 29.1%;
    top: 19.29cqw;
    font-size: 8.571cqw;
  }
}

.faq {
  padding-inline: var(--section-padding-x);
  /* Her call: 120 flat around Free Consultation, not the token. */
  padding-bottom: 7.5rem;
}
@media (max-width: 988px) {
  .faq { padding-inline: var(--section-padding-x-mobile); }
}

.faq__list {
  margin-top: var(--section-name-to-section);
}

/* Figma's rules are #000, not the text token; at the secondary-text
   opacity — her call. */
.faq__item {
  border-top: 1px solid rgba(0, 0, 0, 0.7);
}
.faq__item.is-open {
  cursor: pointer;
}
.faq__item:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
}

.faq__heading {
  margin: 0;
  font: inherit;
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  margin: 0;
  padding: 1.25rem 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  /* Added interaction, her call: the shared flair fills a closed
     question's row accent green from the pointer; an open one stays
     plain. */
  --button-flair-color: var(--color-accent);
}
.faq__item.is-open .faq__question {
  --button-flair-color: transparent;
}

.faq__question-text {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--font-size-h5-curriculum);
  line-height: 1.05;
}

.faq__arrow {
  flex: none;
}
.faq__arrow img {
  transition: transform 0.3s ease;
}
.faq__item.is-open .faq__arrow img {
  transform: rotate(90deg);
}

.faq__answer {
  margin: 0;
  padding-bottom: 1.875rem;
  /* 753px at the real 18px; holds the frame's wrap. */
  max-width: 65ch;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(1rem, calc(0.88175rem + 0.27027vw), 1.125rem);
  line-height: 1.4;
  color: var(--color-text);
}

/* The course card. Consumers: Courses (home track), Course Catalog
   (grid). Width, flex and snap belong to the consumer. */
.course-card {
  display: flex;
  flex-direction: column;
  border-radius: 1.25rem; /* her flat 20 at every width, not the medium token */
  background: var(--color-cards-bg);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.course-card__media {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 427 / 265;
  border-radius: 1.25rem; /* the frame's; not a token — ask before changing */
  overflow: hidden;
}
.course-card__media img,
.course-card__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
/* Added interaction, her call: the cover grows a little under the pointer. */
@media (hover: hover) and (pointer: fine) and (min-width: 989px) {
  .course-card:hover .course-card__media img,
  .course-card:hover .course-card__media video {
    transform: scale(1.05);
  }
}

/* The pill reads it off the body; keep it above that rule's own use. */
.course-card {
  --course-card-padding-y: 1.5rem; /* her 24 above the title and under the pills */
}

.course-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Her rule: the air above the pills is a multiple of the padding
     under them — 1.5, which reads as double once the text's line
     spacing and the pill's own padding are counted. */
  gap: calc(1.5 * var(--course-card-padding-y));
  /* The frame's fixed 262 body, scaled with the card below 1440. */
  min-height: clamp(11.6875rem, calc(7.25312rem + 10.135vw), 16.375rem);
  padding: var(--course-card-padding-y) var(--card-padding-m-block);
}
.course-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-heading-to-subtitle);
}
.course-card__title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 500; /* her call, as How To Study's card title */
  /* The card-L token with her 24 low end instead of its 20 (recipe). */
  font-size: clamp(1.5rem, calc(1.027rem + 1.0811vw), 2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.course-card__description,
.course-card__facts {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-card-s);

  /* PROPOSED: wider than the 1.3 the two-line card had, her call once
     the offline card grew a third line. */
  line-height: 1.6;
}
/* The facts' labels are Medium, their values Regular; the online card's
   description is Regular throughout — do not fold these back together. */
.course-card__facts {
  font-weight: 500;
}
.course-card__fact-value {
  font-weight: 400;
}

.course-card__labels {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.3125rem, calc(0.076rem + 0.54054vw), 0.5625rem);
}
.course-card__format--online {
  background: var(--color-pill-online);
}
.course-card__format--offline {
  background: var(--color-pill-offline);
}

/* A card with no page yet: still a card, plainly not a link. */
.course-card--soon {
  cursor: default;
}
.course-card--soon .course-card__media {
  opacity: 0.55;
}
/* "Скоро" sits on the cover, 16 into the top-right corner. */
.course-card__soon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1; /* above the cover's hover zoom */
  /* A micro shadow so the pill holds on a light cover (her call). */
  box-shadow: 0 1px 0.25rem rgb(0 0 0 / 0.15);
  background: var(--color-text);
  color: var(--color-cards-bg);
}

.courses {
  padding-bottom: var(--section-spacing);
}
/* On a course page it closes the page, after Free Consultation: her flat 120. */
.courses--other {
  padding-bottom: 7.5rem;
}
.courses__cta {
  margin-top: var(--gap-content-to-cta);
  padding-inline: var(--section-padding-x);
}
@media (max-width: 988px) {
  .courses__cta { padding-inline: var(--section-padding-x-mobile); }
}
/* Equal card heights so the pill rows line up; the shared track hugs. */
.courses .scroll-track {
  align-items: stretch;
}
.courses .course-card {
  flex: none;
  scroll-snap-align: start;
  /* PROPOSED mobile anchor: 340 at 390, her main mobile width (her
     call — 305, borrowed from Teachers, read too narrow). The frame is
     1440 only, so the ramp runs 340@390 → 427@1440; recompute both ends
     together. The min keeps 20 of the next card showing below 390, where
     the page scales instead of reflowing — it binds under 351 only. */
  width: min(calc(100vw - 3.125rem), clamp(21.25rem, calc(19.23037rem + 8.2857vw), 26.6875rem));
}

.free-consultation {
  display: flex;
  align-items: center;
  /* Figma's 97 at 1440, scaled with the viewport (her call). */
  gap: clamp(2.9375rem, 6.7568vw, 6.0625rem);
  padding-inline: var(--section-padding-x);
  /* Her call: 120 flat, not the token. */
  padding-bottom: 7.5rem;
}
@media (max-width: 988px) {
  .free-consultation { padding-inline: var(--section-padding-x-mobile); }
}

.free-consultation__media {
  flex: none;
  width: clamp(19.25rem, calc(9.61313rem + 22.02703vw), 29.4375rem);
  max-width: 100%;
}
.free-consultation__media img {
  display: block;
  width: 100%;
  height: auto;
}

.free-consultation__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.6875rem, calc(1.2145rem + 1.08108vw), 2.1875rem);
  min-width: 0;
}

.free-consultation__text-block {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6875rem, calc(-0.08106rem + 1.75676vw), 1.5rem);
}

/* Her call: tighter than the sitewide H2's 1.05. */
.free-consultation .section-title {
  line-height: 0.95;
}

.free-consultation__text {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(1rem, calc(0.64525rem + 0.81081vw), 1.375rem);
  line-height: 1.3;
  /* 603px at the real 22px; holds the frame's 2-line wrap. */
  max-width: 42.6ch;
  color: var(--color-text);
}

/* The shared button is width:100%; a fit-content wrapper makes it hug
   its label as in the desktop frame. */
.free-consultation__action {
  width: fit-content;
}

/* Stacked, centred, image between text and button (the mobile frame).
   Row until the title's first line ("Закажи бесплатную") no longer fits
   beside the image; recompute if the title, its ramp, the image floor
   or the gap changes. */
@media (max-width: 667.98px) {
  .free-consultation {
    flex-direction: column;
    gap: 1.5625rem;
  }
  .free-consultation__content {
    display: contents;
  }
  .free-consultation__media { order: 1; }
  .free-consultation__action {
    order: 2;
    width: 100%;
  }
  .free-consultation__text-block {
    align-items: center;
    text-align: center;
  }
  /* 304px at the real 16px — the mobile frame's text box. */
  .free-consultation__text {
    max-width: 29.6ch;
  }
}

.site-footer {
  display: flex;
  flex-direction: column;
  gap: clamp(0.625rem, calc(0.50675rem + 0.27027vw), 0.75rem);
  padding: 0 var(--section-padding-x) 0.625rem;
  --site-footer-radius: var(--radius-big);
}
@media (max-width: 988px) {
  .site-footer {
    padding-inline: var(--section-padding-x-mobile);
    --site-footer-radius: var(--radius-medium-mobile);
  }
}

.site-footer__card {
  display: flex;
  flex-direction: column;
  gap: clamp(5.3125rem, calc(0.10981rem + 11.8919vw), 10.8125rem);
  /* Bottom takes the top's ramp (her call): it used to narrow to 20
     while the top grew to 40, and the socials sat on the card's edge. */
  padding: clamp(1.875rem, calc(1.28381rem + 1.35135vw), 2.5rem)
           1.875rem
           clamp(1.875rem, calc(1.28381rem + 1.35135vw), 2.5rem)
           clamp(1.875rem, calc(0.10138rem + 4.05405vw), 3.75rem);
  background: var(--color-cards-bg);
  border-radius: var(--site-footer-radius);
}

.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4.3125rem;
}

.site-footer__columns {
  display: flex;
  align-items: flex-start;
  gap: 4.3125rem;
}

.site-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.site-footer__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.site-footer__label {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.15;
  color: var(--color-text);
}

.site-footer__value {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-h3-card-xs);
  line-height: 1.15;
  color: var(--color-text);
  text-decoration: none;
}

.site-footer__menu-link {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--color-text);
  text-decoration: none;
}

.site-footer__logo {
  flex: none;
  width: clamp(2.05625rem, calc(-0.07806rem + 4.8784vw), 4.3125rem);
  height: auto;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-footer__social a {
  display: block;
  width: clamp(2rem, calc(1.11319rem + 2.02703vw), 2.9375rem);
}
.site-footer__social img {
  display: block;
  width: 100%;
  height: auto;
}

.site-footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.875rem;
  padding: clamp(1rem, calc(0.7635rem + 0.54054vw), 1.25rem) 1.875rem;
  background: var(--color-cards-bg);
  border-radius: var(--radius-label);
}

.site-footer__copy {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(0.625rem, calc(0.3885rem + 0.54054vw), 0.875rem);
  line-height: normal;
  color: var(--color-text);
  white-space: nowrap;
}
.site-footer__copy > a {
  text-decoration: none;
}

/* Only maib, Visa and Mastercard (no Amex, her call); the flex row
   spaces them across the frame's 316. */
.site-footer__payments {
  display: flex;
  flex: none;
  justify-content: space-between;
  align-items: center;
  width: 19.75rem;
  /* The old Amex 20→27 ramp; each logo keeps its desktop ratio to it. */
  --site-footer-pay: clamp(1.25rem, calc(0.83613rem + 0.94595vw), 1.6875rem);
}
/* Both sizes explicit: Safari sizes a flex-item image from its file's
   intrinsic width otherwise, ignoring the height. */
.site-footer__payments img {
  display: block;
  flex: none;
  width: calc(var(--site-footer-pay) * var(--w) / 27);
  height: calc(var(--site-footer-pay) * var(--h) / 27);
}
.site-footer__payments img:nth-child(1) { --w: 110; --h: 31; }
.site-footer__payments img:nth-child(2) { --w: 68; --h: 22.1; }
.site-footer__payments img:nth-child(3) { --w: 42.333; --h: 26.609; }

/* Bottom bar stacked (the mobile frame): the payments pill alone, the
   copyright line under it, centred and muted. Row from 1054, where the
   copyright line (with the legal links) + 30 + the 316 payments row
   first fit for good (measured); recompute if any of those change. */
@media (max-width: 1053.98px) {
  .site-footer__bar {
    display: contents;
  }
  .site-footer__payments {
    width: 100%;
    padding: clamp(1rem, calc(0.7635rem + 0.54054vw), 1.25rem) 1.875rem;
    background: var(--color-cards-bg);
    border-radius: var(--radius-label);
  }
  .site-footer__copy {
    order: 1;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.75rem;
    opacity: var(--opacity-secondary-text);
  }
  .site-footer__copy-sep {
    display: none;
  }
}

/* Card stacked (the mobile frame): logo on top, then contacts, then
   menu, all left-packed. Row until address + 69 + menu + 69 + logo
   stop fitting at their floors; recompute if any of those change. */
@media (max-width: 604.98px) {
  .site-footer__top {
    flex-direction: column;
    gap: 3.375rem;
  }
  .site-footer__logo {
    order: -1;
  }
  .site-footer__columns {
    flex-direction: column;
    gap: 2.5rem;
  }
}

/* Popup opened from any [data-enroll-trigger] button — see
   assets/js/enroll-modal.js. No Figma frame exists for it: values not in
   tokens.css are PROPOSED (decisions.md, "Enroll popup"). */
.enroll-modal[hidden] { display: none; }

.enroll-modal {
  --enroll-error: #e5484d;
  --enroll-field-h: 3.5rem;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.enroll-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 28, 0.5);
  animation: enroll-fade 0.25s ease-out;
}

/* Mobile: a bottom sheet; the submit button stays pinned to its bottom. */
.enroll-modal__panel {
  position: relative;
  width: 100%;
  max-height: calc(100dvh - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-cards-bg);
  border-radius: var(--radius-big-mobile) var(--radius-big-mobile) 0 0;
  padding: 1.75rem 1.25rem 0;
  outline: none;
  animation: enroll-sheet-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.enroll-modal__panel::before {
  content: '';
  position: absolute;
  top: 0.5rem;
  left: 50%;
  width: 2.25rem;
  height: 0.25rem;
  margin-left: -1.125rem;
  border-radius: 0.125rem;
  background: var(--color-text);
  opacity: 0.15;
}

@media (min-width: 700px) {
  .enroll-modal { align-items: center; }
  .enroll-modal__panel {
    max-width: 32.5rem;
    max-height: 92dvh;
    border-radius: var(--radius-big);
    padding: 2.5rem;
    animation-name: enroll-pop-in;
  }
  .enroll-modal__panel::before { content: none; }
}

@keyframes enroll-fade { from { opacity: 0; } }
@keyframes enroll-sheet-in { from { transform: translateY(100%); } }
@keyframes enroll-pop-in { from { opacity: 0; transform: translateY(0.75rem) scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
  .enroll-modal__backdrop, .enroll-modal__panel { animation: none; }
}

.enroll-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.enroll-modal__title {
  margin: 0 0 1.25rem;
  padding-right: 3.25rem;
  font-family: var(--font-primary);
  font-size: var(--font-size-h3-card-m);
  font-weight: 500;
  line-height: 1.15;
}

.enroll-modal__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.enroll-modal__form[hidden] { display: none; }
/* Lead-only vs checkout-only parts, switched on open. */
.enroll-modal [data-mode][hidden] { display: none; }

.enroll-modal__honeypot {
  position: absolute;
  left: -624.9375rem;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Floating label: the label must follow its input in the markup. 16px
   text: iOS zooms the page into any smaller field. */
.enroll-modal__control {
  position: relative;
  flex: 1;
  min-width: 0;
}
.enroll-modal__control input {
  width: 100%;
  height: var(--enroll-field-h);
  padding: 1.375rem 1rem 0.375rem;
  border: 0.09375rem solid transparent;
  border-radius: var(--radius-medium-mobile);
  background: var(--color-bg);
  font-family: var(--font-primary);
  font-size: 1rem;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s;
}
.enroll-modal__control input::placeholder { color: inherit; opacity: 0.4; }
.enroll-modal__control input:not(:focus)::placeholder { color: transparent; }
.enroll-modal__control label {
  position: absolute;
  top: 50%;
  left: 1.09375rem;
  right: 1rem;
  transform: translateY(-50%);
  font-size: 1rem;
  opacity: var(--opacity-secondary-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: top 0.15s, transform 0.15s, font-size 0.15s;
}
.enroll-modal__control input:focus + label,
.enroll-modal__control input:not(:placeholder-shown) + label {
  top: 0.5rem;
  transform: none;
  font-size: 0.75rem;
}
.enroll-modal__control input:focus,
.enroll-modal__country:focus-within { border-color: var(--color-text); }
.enroll-modal__field.is-invalid input,
.enroll-modal__field.is-invalid .enroll-modal__country { border-color: var(--enroll-error); }

.enroll-modal__phone {
  display: flex;
  gap: 0.5rem;
}
/* The native select covers the chip invisibly: the phone's own picker. */
.enroll-modal__country {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  height: var(--enroll-field-h);
  padding: 0 0.75rem 0 0.875rem;
  border: 0.09375rem solid transparent;
  border-radius: var(--radius-medium-mobile);
  background: var(--color-bg);
  font-size: 1rem;
  white-space: nowrap;
}
.enroll-modal__country::after {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  margin: -0.1875rem 0 0 0.125rem;
  border-right: 0.09375rem solid currentColor;
  border-bottom: 0.09375rem solid currentColor;
  transform: rotate(45deg);
  opacity: var(--opacity-secondary-text);
}
.enroll-modal__country select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  font-size: 1rem;
  cursor: pointer;
}

/* Native select with a drawn arrow, field-sized like the inputs. */
.enroll-modal__course { position: relative; }
.enroll-modal__course::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1.125rem;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: -0.3125rem;
  border-right: 0.09375rem solid currentColor;
  border-bottom: 0.09375rem solid currentColor;
  transform: rotate(45deg);
  opacity: var(--opacity-secondary-text);
  pointer-events: none;
}
.enroll-modal__course select {
  width: 100%;
  height: var(--enroll-field-h);
  padding: 0 2.5rem 0 1rem;
  border: 0.09375rem solid transparent;
  border-radius: var(--radius-medium-mobile);
  background: var(--color-bg);
  font-family: var(--font-primary);
  font-size: 1rem;
  color: var(--color-text);
  outline: none;
  appearance: none;
  cursor: pointer;
}
.enroll-modal__course select:focus { border-color: var(--color-text); }
.enroll-modal__field.is-invalid .enroll-modal__course select { border-color: var(--enroll-error); }
.enroll-modal [data-general][hidden] { display: none; }

.enroll-modal__field-error {
  display: block;
  margin: 0.375rem 0 0 0.25rem;
  color: var(--enroll-error);
  font-size: 0.8125rem;
}
.enroll-modal__field-error[hidden] { display: none; }

.enroll-modal__group {
  margin: 0.5rem 0 0;
  padding: 0;
  border: none;
  min-width: 0;
}
.enroll-modal__group-label {
  margin-bottom: 0.625rem;
  padding: 0;
  font-size: var(--font-size-body-card-s);
  font-weight: 500;
}

/* Segmented control: one row at every width. */
.enroll-modal__channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.375rem;
}
.enroll-modal__channel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  border-radius: var(--radius-label);
  background: var(--color-bg);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.enroll-modal__channel input,
.enroll-modal__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.enroll-modal__channel:has(input:checked) {
  background: var(--color-text);
  color: var(--color-cards-bg);
}

.enroll-modal__intent {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.enroll-modal__option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 0.09375rem solid var(--color-bg);
  border-radius: var(--radius-medium-mobile);
  font-size: var(--font-size-body-card-s);
  cursor: pointer;
  transition: border-color 0.15s;
}
.enroll-modal__option::before {
  content: '';
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 0.09375rem solid currentColor;
  border-radius: 50%;
  opacity: 0.35;
}
.enroll-modal__option:has(input:checked) { border-color: var(--color-text); }
.enroll-modal__option:has(input:checked)::before {
  border-width: 0.375rem;
  opacity: 1;
}
.enroll-modal__channel:has(input:focus-visible),
.enroll-modal__option:has(input:focus-visible) { outline: 0.125rem solid var(--color-text); outline-offset: 0.125rem; }

/* PROPOSED: the plan's terms under the options, in the checkbox type. */
.enroll-modal__hint {
  margin: 0.5rem 0 0 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  opacity: var(--opacity-secondary-text);
}

.enroll-modal__consent { margin-top: 0.25rem; }
.enroll-modal__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  cursor: pointer;
}
.enroll-modal__checkbox input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--color-text);
}
.enroll-modal__checkbox a { color: var(--color-text); text-decoration: underline; }
.enroll-modal__consent.is-invalid .enroll-modal__checkbox input { outline: 0.09375rem solid var(--enroll-error); outline-offset: 1px; }

.enroll-modal__error {
  margin: 0;
  color: var(--enroll-error);
  font-size: 0.875rem;
}
.enroll-modal__error[hidden] { display: none; }

.enroll-modal__actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: 0.25rem -1.25rem 0;
  padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--color-cards-bg);
  box-shadow: 0 -0.625rem 0.75rem -0.75rem rgba(28, 28, 28, 0.25);
}
@media (min-width: 700px) {
  .enroll-modal__actions {
    position: static;
    margin: 0.5rem 0 0;
    padding: 0;
    box-shadow: none;
  }
}

.enroll-modal__submit {
  width: 100%;
  height: var(--enroll-field-h);
  border: none;
  border-radius: var(--radius-label);
  background: var(--color-accent-buttons);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-button-l);
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.1s;
}
.enroll-modal__submit:active:not(:disabled) { transform: scale(0.98); }
.enroll-modal__submit:disabled { opacity: var(--opacity-secondary-text); cursor: default; }

.enroll-modal__success { padding: 0.5rem 0 calc(1.75rem + env(safe-area-inset-bottom)); }
@media (min-width: 700px) {
  .enroll-modal__success { padding-bottom: 0.75rem; }
}
.enroll-modal__success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--color-accent);
}
.enroll-modal__success h3 { margin: 0 0 0.5rem; font-size: var(--font-size-h3-card-m); font-weight: 500; }
.enroll-modal__success p { margin: 0; opacity: var(--opacity-secondary-text); }

/* The page behind the popup shouldn't scroll or bounce on mobile while it's open. */
body.enroll-modal-open { overflow: hidden; }