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

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

/* The catalog hero card. Consumers: Course Catalog, Blog. The frame's
   410 at 1440, kept proportional to the viewport. Inside, a row: 62
   inset, a 390 picture slot, 132 gap, the 488 text column centred, a
   right inset equal to the gap (her call) and the rest free. The slot
   is the frames' — both put the text at 584 whatever the picture's
   width (her call) — and scales with the card; the picture sits
   centred in it at the card's height, its box the render's 1× ratio
   (set inline by the renderer), so it scales with the card and always
   shows the frame's crop — her call, over a width-driven picture that
   got cut deeper as the card lost height. Inset and gap ramp 700→1440
   (floors 30, PROPOSED), free space goes first, the text shrinks last.
   Stacks below 800. */
.hero-card {
  --hero-card-height: min(28.47vw, 25.625rem);
  display: flex;
  align-items: center;
  gap: clamp(1.875rem, calc(-4.15562rem + 13.784vw), 8.25rem);
  height: var(--hero-card-height);
  padding-left: clamp(1.875rem, calc(-0.27px + 4.3243vw), 3.875rem);
  padding-right: clamp(1.875rem, calc(-4.15562rem + 13.784vw), 8.25rem); /* as the gap, her call */
  border-radius: var(--radius-big);
  background: var(--color-cards-bg);
  overflow: hidden;
}
@media (max-width: 988px) {
  .hero-card { border-radius: var(--radius-big-mobile); }
}
.hero-card__media {
  flex: none;
  align-self: flex-start;
  display: flex;
  justify-content: center;
  width: calc(var(--hero-card-height) * 390 / 410);
  height: var(--hero-card-height);
}
/* A render fills its box exactly; a whole picture takes the same crop
   from the top. The ratio stays on the img in every mode. */
.hero-card__media img {
  display: block;
  width: calc(var(--hero-card-media-w) * 0.0625rem); /* the width attribute, in rem so it scales */
  height: 100%;
  aspect-ratio: var(--hero-card-media-w) / var(--hero-card-media-h);
  object-fit: cover;
  object-position: 50% 0;
}
.hero-card__text {
  flex: 1 1 30.5rem;
  max-width: 30.5rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-heading-to-subtitle); /* the frame's 11 → the token */
}
.hero-card__title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 500; /* the frame's Medium, flat — not the section title's fluid weight */
  /* The H2 token with a 32 low end over its 28 — her "a bit bigger" on
     the phone, 32 PROPOSED (recipe). */
  font-size: clamp(2rem, calc(0.93581rem + 2.4324vw), 3.125rem);
  line-height: 1.3;
}
.hero-card__body {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-hero);
  line-height: 1.35;
}
/* The shared button is width:100%; the wrapper hugs the label as in
   the Contacts frame, its 42 under the body (Free Consultation's 27
   at the ramp's foot, recipe) — less the column's own gap, which
   also applies. */
.hero-card__action {
  width: fit-content;
  margin-top: calc(clamp(1.6875rem, calc(0.80063rem + 2.027vw), 2.625rem) - var(--gap-heading-to-subtitle));
}
/* Stacked (PROPOSED, no frame): text with the card padding, capped at
   the frame's 488 column (her call: cap the line), then the
   illustration under it at its desktop width, flush with the card's
   right inset (her call), showing the same crop. */
@media (max-width: 799.98px) {
  .hero-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    padding: 0;
  }
  .hero-card__text {
    order: -1;
    flex: none;
    padding: var(--card-padding-m-block);
  }
  .hero-card__action {
    width: 100%; /* full width on the phone, as the consultation's button */
  }
  .hero-card__media {
    align-self: flex-end;
    height: auto;
    width: min(calc(100% - var(--card-padding-m-block)), calc(var(--hero-card-media-w) * 0.0625rem));
    margin: 0 var(--card-padding-m-block) 0 0;
    overflow: hidden; /* or the flex item grows to the image's own ratio */
  }
  .hero-card__media img {
    width: 100%;
    height: auto;
  }
}

/* The catalog grid. Consumers: Course Catalog, Blog. Three columns at
   1440 give the frame's 427 exactly. Tiers from fit math on the card's
   track floor (305, see Courses) plus the gap token: three columns fit
   from 1065, two from 660 (gutters switch at 988). Below 660 the
   single column is uncapped like Pricing's stacked cards — PROPOSED. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; /* every card the tallest one's height, her call */
  gap: var(--gap-content-to-cta);
}
@media (max-width: 1064.98px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Full-width cards, 20 apart — her calls. */
@media (max-width: 659.98px) {
  .card-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
}

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

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

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

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

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

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

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

/* Courses desktop frame (1440 only). The page has no hero section, so
   this one offsets the fixed header itself; the gap under it is the
   header-to-hero token. */
.course-catalog {
  padding-top: calc(var(--header-height) + var(--gap-header-to-hero));
  padding-inline: var(--section-padding-x);
  padding-bottom: 7.5rem; /* her flat 120 around Free Consultation, as FAQ */
}
@media (max-width: 988px) {
  .course-catalog {
    padding-top: calc(var(--header-height-mobile) + var(--gap-header-to-hero));
    padding-inline: var(--section-padding-x-mobile);
  }
}

/* The hero card is the shared `hero-card`. Its online render sits 8
   down in the frame; row mode only — stacked, the shared rule places it. */
@media (min-width: 800px) {
  .course-catalog .hero-card__media img {
    margin-top: 0.5rem;
    height: calc(100% - 0.5rem);
  }
}
/* On a switch the card stays put (her call): text and picture fade
   out, then the next ones fade in — the picture only once decoded. */
.course-catalog .hero-card__text {
  transition: opacity 0.2s ease;
}
.course-catalog .hero-card__text.is-switching {
  opacity: 0;
}
.course-catalog .hero-card__media img {
  transition: opacity 0.2s ease;
}
.course-catalog .hero-card__media img.is-hidden {
  opacity: 0;
}
@media (max-width: 799.98px) {
  .course-catalog .hero-card__media.is-flipped {
    transform: scaleX(-1); /* the online picture only, her call */
  }
}

/* Pills: the frame's 45 (10/20 padding around a 20/125% label), 10
   apart, dot 13 then 10; 56 under the card (30 on the phone), a flat
   20 above the grid — her numbers. The pills ramp to her mobile ends
   (label 14, padding 12, gap 0) — the 1440 values read as far apart
   on the phone.
   White shows under the pointer and travels with the pressed one (one
   moving element, her call). The row scrolls sideways rather than
   wrapping, bleeding to the screen edge on mobile (her call). */
/* No filter row (one format on sale): the row's own top margin. */
.course-catalog .hero-card + .card-grid {
  margin-top: clamp(1.875rem, calc(0.33781rem + 3.5135vw), 3.5rem);
}

.course-catalog__filters {
  position: relative;
  display: flex;
  gap: clamp(0px, calc(-0.59125rem + 1.3514vw), 0.625rem);
  --filters-top: clamp(1.875rem, calc(0.33781rem + 3.5135vw), 3.5rem);
  margin-top: var(--filters-top);
  margin-bottom: 1.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.course-catalog__filters::-webkit-scrollbar { display: none; }
/* A pressed pill paints its own background; nothing travels between
   them, because several can be pressed at once. */
.course-catalog__filter[aria-pressed="true"] {
  background: var(--color-cards-bg);
}
.course-catalog__filter {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1.25rem; /* her call: the frame's 20 at every width, not a ramp down to 12 */
  border: none;
  border-radius: var(--radius-label);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(0.875rem, calc(0.52025rem + 0.81081vw), 1.25rem);
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .course-catalog__filter:hover {
    background: var(--color-cards-bg);
  }
}
.course-catalog__filter--online::before,
.course-catalog__filter--offline::before {
  content: '';
  flex: none;
  /* 9 at 390 → the frame's 13 at 1440; it read huge next to 14px copy. */
  width: clamp(0.5625rem, calc(0.46963rem + 0.38095vw), 0.8125rem);
  height: clamp(0.5625rem, calc(0.46963rem + 0.38095vw), 0.8125rem);
  border-radius: 50%;
  background: var(--color-pill-online); /* the pills' colours, so the dots mean the same */
}
.course-catalog__filter--offline::before {
  background: var(--color-pill-offline);
}

/* On a phone the row wraps instead of scrolling, so no filter hides off
   the edge, and an unpressed pill carries its own grey (her calls).
   Pressed is white for every pill, formats included — the dots keep
   saying which is which. */
@media (max-width: 988px) {
  /* One row stuck under the header until the section ends (her call, over
     the wrapped rows): short labels fit, extra pills scroll sideways.
     z-index under the header's 100. */
  .course-catalog__filters {
    position: sticky;
    top: var(--header-offset, 0rem);
    transition: top 0.3s ease;
    z-index: 5;
    gap: 0.25rem;
    margin-top: calc(var(--filters-top) + 2.5rem); /* her call, over the hero card */
    margin-bottom: 0.625rem;
    margin-inline: calc(-1 * var(--section-padding-x-mobile));
    padding: 0.5rem var(--section-padding-x-mobile);
    background: rgba(242, 242, 242, 0.3); /* the header's own glass: keep in step with header.css */
    backdrop-filter: blur(0.25rem);
    -webkit-backdrop-filter: blur(0.25rem);
  }
  .course-catalog__filter-full { display: none; }
  /* PROPOSED: the tokens hold no grey between the page and white. */
  .course-catalog__filter { background: #e8e8e8; }
  .course-catalog__filter[aria-pressed="true"] { background: var(--color-cards-bg); }
}

@media (min-width: 989px) {
  .course-catalog__filter-short { display: none; }
}

/* The grid is the shared `card-grid`; pills at 14 on full-width cards
   (her call). */
@media (max-width: 659.98px) {
  .course-catalog .course-card .label-pill { font-size: 0.875rem; }
}
.course-catalog .card-grid .course-card[hidden] {
  display: none;
}

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

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