/* 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%;
}

/* First section: it offsets the fixed header itself, as Contacts. */
.about-hero {
  padding-top: calc(var(--header-height) + var(--gap-header-to-hero));
  padding-inline: var(--section-padding-x);
  padding-bottom: 6.25rem; /* her 100 to the facts below */
}
@media (max-width: 988px) {
  .about-hero {
    padding-top: calc(var(--header-height-mobile) + var(--gap-header-to-hero));
    padding-inline: var(--section-padding-x-mobile);
  }
}
/* Same height and radius as `.hero-card`; keep in step with it. Stacked,
   the photo takes its own ratio instead of the card's thin strip. */
.about-hero__card {
  height: min(28.47vw, 25.625rem);
  border-radius: var(--radius-big);
  overflow: hidden;
}
@media (max-width: 988px) {
  .about-hero__card { border-radius: var(--radius-big-mobile); }
}
@media (max-width: 799.98px) {
  .about-hero__card {
    height: auto;
    aspect-ratio: 2000 / 1333;
  }
}
.about-hero__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.facts {
  padding-inline: var(--section-padding-x);
  padding-bottom: var(--section-spacing); /* matches the gap the section above leaves */
}
@media (max-width: 988px) {
  .facts { padding-inline: var(--section-padding-x-mobile); }
}

/* serious.business's facts row at its 1440 sizes (PROPOSED, her "как у
   них"), the column scaled ×1.1 as one piece (her call): a 240 column
   of facts on the left, the statement on the right 144 away; below 900
   the statement goes first and the facts under it. */
.facts {
  display: flex;
  align-items: flex-start;
  gap: min(10vw, 9rem); /* the reference's 144 at 1440, scaled with the viewport */
  --facts-scale: 1.1;
}
.facts__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: none;
  width: calc(15rem * var(--facts-scale));
}
.facts__statement {
  flex: 1 1 auto;
  min-width: 0;
}
.facts__headline {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  /* PROPOSED: a notch under the shared section size, 44 at 1440 instead
     of its 50 (her call). The phone keeps the token's own 28. */
  font-size: clamp(1.75rem, calc(1.37856rem + 1.5238vw), 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 18em; /* her call: narrower from the right, no hanging last lines; em, so it scales with the size */
}
@media (max-width: 699.98px) {
  .facts__headline {
    line-height: 1.2;
    letter-spacing: 0;
  }
}
.facts__accent { font-weight: 500; }
/* PROPOSED: the frame has no such button. 40 at 390 → 60 at 1440, her
   range. The shared CTA fills its container, so the container hugs the
   label. */
.facts__cta {
  width: fit-content;
}
.facts__cta,
.facts__body {
  margin-top: clamp(2.5rem, calc(2.03569rem + 1.9048vw), 3.75rem);
}
.facts__body {
  margin-bottom: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-hero); /* her 20 at 1440 */
  line-height: 1.35;
}
@media (max-width: 899.98px) {
  .facts {
    flex-direction: column;
    gap: 4.5rem; /* her call: between the 36 that read as stuck and the 120 that read as too much */
  }
  .facts__block {
    order: 1; /* statement first when stacked */
    width: min(100%, calc(15rem * var(--facts-scale)));
  }
}

.facts__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  /* The reference's spacings (12 / 15 / 9 / 15), flat like its sizes. */
  padding-bottom: calc(0.75rem * var(--facts-scale));
  margin-bottom: calc(0.9375rem * var(--facts-scale));
  border-bottom: 1px solid rgba(0, 0, 0, 0.7); /* FAQ's rule */
}
.facts__title,
.facts__paging {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: calc(0.9375rem * var(--facts-scale)); /* the reference's; no token this small at 1440 */
  line-height: 1.3;
}
.facts__title { font-weight: 400; }
.facts__paging { font-variant-numeric: tabular-nums; }

.facts__number {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: calc(4.5rem * var(--facts-scale)); /* the reference's, flat: the column is fixed too */
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
/* All four captions stay in one grid cell, so the column reserves the
   tallest one and the page never jumps as the facts advance. Do not
   render only the active caption. */
.facts__texts {
  display: grid;
  width: 100%;
  margin-top: calc(0.5625rem * var(--facts-scale));
}
.facts__text {
  grid-area: 1 / 1;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: calc(0.875rem * var(--facts-scale)); /* the reference's 13.5 */
  line-height: 1.2;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0s 0.15s;
}
/* Must stay after the base rule: the active caption fades in only once
   the outgoing one is gone. */
.facts__text.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s 0.15s, visibility 0s;
}

/* The scroll strips' arrows, without .scroll-nav: that class is wired
   to a .scroll-track by carousel.js and hidden below 700. */
.facts__nav {
  display: flex;
  align-items: center;
  gap: calc(0.5rem * var(--facts-scale));
  margin-top: calc(0.9375rem * var(--facts-scale));
}
.facts__nav .nav-arrow {
  position: relative;
  width: calc(2.0625rem * var(--facts-scale)); /* the reference's, flat — not the arrows' ramp */
  height: calc(2.0625rem * var(--facts-scale));
  border-radius: 50%;
  --button-flair-color: var(--color-accent);
}
/* Progress ring on the next arrow: facts.js runs the dash offset from
   the full circumference (102.1) to 0 over each fact's 3.5s. */
.facts__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.facts__ring circle {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 1.5;
  stroke-dasharray: 102.1;
  stroke-dashoffset: 102.1;
}
.facts__nav .button-flair__fill {
  z-index: 1;
  mix-blend-mode: multiply;
}

/* Phone: the title row and its rule run the full width (same 20 gutter on
   both sides); the number, caption and arrows keep the 264 column. Must
   stay last: after the 899 block and the base rules it overrides. */
@media (max-width: 699.98px) {
  .facts__block { width: 100%; }
  .facts__texts { width: min(100%, calc(15rem * var(--facts-scale))); }
  .facts__cta,
  .facts__body { margin-top: 1.25rem; } /* PROPOSED: closer to the text than the 40 at 390 */
}

.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;
}

/* 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; }

/* 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%);
}

.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;
}


.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;
  }
}

.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;
}

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

.curator__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-inline: var(--section-padding-x);

  gap: clamp(1rem, calc(-0.18244rem + 2.7027vw), 2.25rem);
}
@media (max-width: 988px) {
  .curator__intro {
    padding-inline: var(--section-padding-x-mobile);
  }
}

.curator__title { width: 100%; }

.curator__profile {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;

  --curator-card-radius: var(--radius-big);
}
@media (max-width: 988px) {
  .curator__profile { --curator-card-radius: var(--radius-medium-mobile); }
}

/* Do not add position/z-index here: it creates a stacking context and
   inverts the -30px overlap the panel's rounded corner depends on. */
.curator__profile-media {
  flex: 1 1 28.75rem;
  min-width: 17.5rem;
  aspect-ratio: 624.875 / 636.216;
  overflow: hidden;
  border-radius: var(--curator-card-radius) 0 0 var(--curator-card-radius);
  margin-inline-end: -1.875rem;
}

.curator__profile-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.curator__profile-panel {
  flex: 1 1 33.75rem;
  min-width: 18.75rem;
  display: flex;
  flex-direction: column;

  justify-content: space-between;
  background: var(--color-cards-bg);
  border-radius: var(--curator-card-radius);

  position: relative;
  z-index: 1;

  /* Top and bottom cap at 40 (her call), the sides still at 60: the
     pills and the marks sit nearer the card's edges than the gaps
     between the blocks. Same ramp, so mobile is unchanged. */
  padding: clamp(1.875rem, calc(0.10138rem + 4.05405vw), 2.5rem) clamp(1.875rem, calc(0.10138rem + 4.05405vw), 3.75rem);

  gap: clamp(1.5rem, calc(-0.924rem + 5.5405vw), 4.0625rem);
}

@media (min-width: 1440px) {
  .curator__profile-panel {
    padding-left: clamp(3.75rem, calc(-3.75rem + 8.333vw), 6.25rem);
  }
}
.curator__profile-labels {
  display: flex;
  align-items: center;

  gap: clamp(0.3125rem, calc(-0.10138rem + 0.94595vw), 0.75rem);
}
.curator__profile-labels--mobile {
  display: none;

  order: 1;
}

.curator__profile-text {
  display: flex;
  flex-direction: column;

  gap: clamp(0.75rem, calc(0.15881rem + 1.35135vw), 1.375rem);

  max-width: clamp(23.24rem, calc(13.75625rem + 25.28vw), 36.51rem);
}

.curator__profile-name {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-family-accent);
  font-weight: 400;
  font-size: var(--font-size-name-curator);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

.curator__profile-bio {
  display: flex;
  flex-direction: column;

  gap: clamp(0.625rem, calc(0.32937rem + 0.67568vw), 0.9375rem);
}
.curator__profile-bio p {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-curator);
  line-height: 1.3;
}

.curator__profile-social {
  display: flex;
  align-items: center;
  order: 2;

  gap: clamp(0.625rem, calc(0.32937rem + 0.7879vw), 1rem);
}
.curator__profile-social img {
  width: calc(var(--font-size-name-curator) * 2.188);
  height: auto;
}
/* Icons track the name's size (43/48 and 105/48 of it), so they shrink with it. */
.curator__profile-social-link img {
  width: auto;
  height: calc(var(--font-size-name-curator) * 0.896);
}

@media (max-width: 700px) {
  .curator__profile {
    flex-direction: column;
  }
  .curator__profile-media {
    flex-basis: auto;
    width: 100%;
    aspect-ratio: 350 / 366;

    border-radius: var(--curator-card-radius) var(--curator-card-radius) 0 0;

    margin-bottom: -2.5rem;
  }
  /* All four corners stay: the panel overlaps the photo by 40 (the
     frame's), so its top corners show against it. */
  .curator__profile-panel {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.5rem 1.875rem;
    gap: 2.6875rem; /* the frame's text→labels gap */
  }
  .curator__profile-labels--desktop { display: none; }
  .curator__profile-labels--mobile { display: flex; }

  .curator__profile-social { display: none; }
}

.curator > .portfolio-gallery {
  margin-top: clamp(0.625rem, calc(-0.67569rem + 2.97297vw), 2rem);
}

@media (max-width: 700px) {
  .curator .portfolio-gallery__header { display: none; }
}

.curator__portfolio-heading {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-family-accent);
  font-weight: 400;

  font-size: clamp(2rem, calc(1.527rem + 1.08108vw), 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.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; }
}

.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;
}

.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; }

/* About page overrides of shared sections. The facts statement is 36 at
   1440 (her call) on the home one's 28 phone end, and keeps the home
   one's line length: 18em at its 44 is 791px, which is 22em at 36. */
.facts__headline {
  font-size: clamp(1.75rem, calc(1.56431rem + 0.7619vw), 2.25rem);
  max-width: 22em;
}
.facts__body { max-width: 40em; } /* the same ~800px line at its 20 */
/* Closer to the statement than the home link's 40→60: 30 at 1440 (PROPOSED,
   she asked for less), the phone's 20 kept. */
.facts__body {
  margin-top: clamp(1.25rem, calc(1.01788rem + 0.9524vw), 1.875rem);
}
/* The three cards start their pictures and their text on the same lines:
   top-aligned, not centred, so a card with a longer body no longer lifts
   its picture above the others. The pictures share one bottom line (the
   centaur's, her base) in the files themselves. */
.why-special__card { justify-content: flex-start; }