/* 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-video {
  /* Header→card gap: the token (her 20 over the desktop frame's 8). */
  padding-top: calc(var(--header-height) + var(--gap-header-to-hero));
  padding-inline: var(--section-padding-x);
  padding-bottom: 7.5rem; /* her flat 120, not the token — the token read as a hole */
  /* Insets shared by both compositions: the button's on desktop, the
     title's on mobile (48/51 → 26/28). */
  --hero-video-inset-x: clamp(1.625rem, calc(0.32438rem + 2.973vw), 3rem);
  --hero-video-inset-bottom: clamp(1.75rem, calc(0.39rem + 3.108vw), 3.1875rem);
  /* Hero's slower button ramp (see decisions.md), not the CTA token. */
  --button-cta-font-size: var(--font-size-button-l);
}
@media (max-width: 988px) {
  .hero-video {
    padding-top: calc(var(--header-height-mobile) + var(--gap-header-to-hero));
    padding-inline: var(--section-padding-x-mobile);
  }
}

/* Three rows: free space, title, button. The video spans all three at
   every width, the button inside it (her call, over the mobile frame's
   button under the card); its height sizes the fr row, so the card
   needs none. */
.hero-video__card {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 1fr auto auto;
}
/* The poster is a real <img> under the transparent video until it plays:
   the video, not the picture, was the LCP element and carried its mp4. */
.hero-video__poster,
.hero-video__video {
  grid-row: 1 / 4;
  grid-column: 1;
  width: 100%;
  height: clamp(32.8125rem, calc(28.37813rem + 10.135vw), 37.5rem);
  object-fit: cover;
  border-radius: var(--radius-big);
}
@media (max-width: 988px) {
  .hero-video__poster,
  .hero-video__video { border-radius: var(--radius-big-mobile); }
}
.hero-video__title {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  margin: 0 var(--hero-video-inset-x);
  color: var(--color-cards-bg);
  font-family: var(--font-primary);
  font-weight: 500;
  /* Ramps over 390→1440, not the sitewide 700→1440 — her call, as the
     course hero: the standard ramp shrank it too fast. */
  font-size: clamp(2.68rem, calc(1.81812rem + 3.535vw), 5rem);
  line-height: 0.87;
  letter-spacing: -0.03em;
  /* The frames' 4/4/5.4 at 80px and 2.1/2.1/2.9 at 42.88 — it scales. */
  text-shadow: 0.05em 0.05em 0.0675em rgba(0, 0, 0, 0.05);
}
/* The shared CTA fills its container, so the container hugs the label. */
.hero-video__cta {
  grid-row: 3;
  grid-column: 1;
  position: relative;
  width: fit-content;
  margin: 2.1875rem var(--hero-video-inset-x) var(--hero-video-inset-bottom);
}

/* Mobile: the title's air above the button is the desktop one; only
   its line height tightens, and the button takes the card's whole width
   between the insets (her call). */
@media (max-width: 699.98px) {
  .hero-video__title { line-height: 0.98; }
  .hero-video__cta { width: auto; }
}

/* The strip rides the shared scroll-track, so it keeps the page gutters
   and scrolls on a phone without its own rules. */
.course-highlights {
  /* 20 to the hero above it (her call): Hero Video ends on a flat 120,
     so the top takes that back down — recompute if that 120 changes. */
  margin-top: -6.25rem;
  padding-bottom: var(--section-spacing);
}

.course-highlights .scroll-track {
  align-items: flex-start;

  gap: clamp(0.75rem, calc(0.27703rem + 1.08108vw), 1.25rem);
  /* The track clips what leaves it, and the hover ring sits 5px outside
     the circle. The padding gives it room, the negative margin takes
     that room back out of the layout. */
  padding-block: 0.375rem;
  margin-block: -0.375rem;
}

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

  gap: clamp(0.625rem, calc(0.152rem + 1.0811vw), 1.125rem);
  width: clamp(5.75rem, calc(3.0675rem + 6.1297vw), 8.625rem);
  text-decoration: none;
  color: var(--color-text);
}

.course-highlights__media {
  display: block;
  width: clamp(4.75rem, calc(2.48rem + 5.8757vw), 7.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-cards-bg);
}
.course-highlights__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-highlights__title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-card-m);
  line-height: 1.25;
  text-align: center;
}

/* Desktop: the eight circles share the row, 30 apart (her call), so the
   last one ends on the video's right edge. The size follows the width. */
@media (min-width: 989px) {
  .course-highlights .scroll-track { gap: 1.875rem; }
  .course-highlights__item {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
  .course-highlights__media { width: 100%; }
}

/* A phone must always slice a circle, or the strip reads as finished and
   nothing says it scrolls sideways: three whole and the fourth cut off
   at the edge (her call, 2026-10-12; 88 at 390 over the frame's 76, so
   4 circles and 3 gaps always overrun the width up to 513). The circle
   scales with the width to the widest phone, above which the frame's
   ramp runs. The cell is the circle's width, so the 10 between circles
   is her flat 10 (a wider cell added its slack to it); a long caption
   overflows the cell, centred, into the gap. Captions are her 13 (14
   touched the neighbour) and never wrap inside the cell: their lines are
   the <br>s. */
@media (max-width: 440px) {
  .course-highlights .scroll-track { gap: 0.625rem; }
  .course-highlights__item,
  .course-highlights__media { width: calc(100vw * 88 / 390); }
  .course-highlights__title { font-size: 0.8125rem; white-space: nowrap; }
}

/* The ring the hover draws is the page background, so it reads as a gap
   rather than a stroke. */
@media (hover: hover) {
  .course-highlights__item:hover .course-highlights__media {
    outline: 0.125rem solid var(--color-text);
    outline-offset: 0.1875rem;
  }
}

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

/* 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);
}
/* The format pill sits on the cover, 16 into the top-left corner (her
   call — the format is what the card is picked by, and on a photo the
   colour reads calmer than on white). */
.course-card__pill {
  position: absolute;
  top: 1rem; /* her 16 into the corner, not the body's insets */
  left: 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);
}
.course-card__pill--online {
  background: var(--color-pill-online);
}
.course-card__pill--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;
}
.course-card__pill--soon {
  left: auto;
  right: 1rem;
  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));
}

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

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

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

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

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