/* Montserrat, served from this domain. Going through Google Fonts cost two
   extra DNS lookups and TLS handshakes before a single word could be drawn.
   Only the Cyrillic and Latin subsets are shipped - the page is Bulgarian.
   Licensed under the SIL Open Font License. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/vsl/_shared/fonts/montserrat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/vsl/_shared/fonts/montserrat-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;
}

/* VSL pages — landing (A/B), video page, questionnaire, thank-you.
   Change the brand colour ramp below to restyle every page at once. */
:root {
  --p-50: #f0fdf4; --p-100: #dcfce7; --p-200: #bbf7d0; --p-300: #86efac; --p-400: #4ade80;
  --p-500: #22c55e; --p-600: #16a34a; --p-700: #15803d; --p-800: #166534; --p-900: #14532d;
  --bg-base: #ffffff; --bg-soft: #f4fdf7;
  --ink: #101c15; --ink-soft: #24382c; --text-2: #46604f; --text-3: #7d9187;
  /* The call-to-action colour. Green here; it used to be red. */
  --cta: #16a34a; --cta-bright: #22c55e; --cta-deep: #14532d;
  --danger: #dc2626;
  --hl-bg: rgba(34, 197, 94, .28);
  --sh-sm: 0 2px 8px rgba(16, 60, 34, .06);
  --sh-md: 0 8px 24px rgba(16, 60, 34, .10);
  --sh-lg: 0 20px 56px rgba(16, 60, 34, .12);
  --sh-cta: 0 14px 36px rgba(22, 163, 74, .32);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Montserrat', system-ui, -apple-system, sans-serif; background: var(--bg-base); color: var(--ink); font-size: 17px; line-height: 1.7; overflow-x: hidden; min-height: 100vh; }
button, input, textarea { font-family: inherit; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
strong { font-weight: 800; color: var(--p-800); }
::selection { background: var(--p-300); color: var(--ink); }

/* Background */
.cosmos { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg-base); }
.orb { display: none; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .4; animation: drift 30s ease-in-out infinite; pointer-events: none; }
.orb-1 { width: 520px; height: 520px; background: radial-gradient(circle, #8fa6ff 0%, transparent 70%); top: -120px; left: -120px; }
.orb-2 { width: 640px; height: 640px; background: radial-gradient(circle, #7690fa 0%, transparent 70%); top: 30%; right: -180px; animation-delay: -8s; }
.orb-3 { width: 460px; height: 460px; background: radial-gradient(circle, #a3b8ff 0%, transparent 70%); top: 65%; left: 12%; animation-delay: -16s; opacity: .3; }
@keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(60px, -40px) scale(1.05); } 66% { transform: translate(-40px, 60px) scale(.95); } }
.grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(16, 60, 34, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 60, 34, .07) 1px, transparent 1px); background-size: 46px 46px; }

/* Layout */
.container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.container.narrow { max-width: 760px; }
section { position: relative; padding: 56px 0 64px; }
@media (min-width: 640px) { section { padding: 72px 0 80px; } }

/* Hero */
.hero { padding-top: 36px; padding-bottom: 80px; text-align: center; }
.notice-pill {
  display: inline-flex; align-items: center; gap: 11px;
  max-width: 100%; margin: 0 auto 26px; padding: 12px 26px;
  background: var(--p-50);
  border: 2px solid var(--p-300);
  border-radius: 999px;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, .10), 0 6px 20px rgba(16, 60, 34, .07);
  color: var(--ink);
  font-size: clamp(12px, 1.1vw, 14px); font-weight: 600;
  letter-spacing: .035em; line-height: 1.45; text-align: left;
}
.notice-pill .warn { flex: none; font-size: 1.15em; line-height: 1; }
.notice-pill em { color: var(--text-2); }
.eyebrow-text { font-size: clamp(16px, 1.6vw, 19px); font-weight: 600; color: var(--ink-soft); margin-bottom: 32px; }
.marker, .hl { background: linear-gradient(180deg, transparent 55%, var(--hl-bg) 55%); padding: 0 4px; font-weight: 700; color: var(--p-800); }
.headline { font-size: clamp(22px, 2.75vw, 33px); font-weight: 700; line-height: 1.52; letter-spacing: -.006em; max-width: 1060px; margin: 0 auto 14px; text-wrap: normal; }
.grad { background: linear-gradient(95deg, var(--p-700) 0%, var(--cta-bright) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 900; }
/* Ways to emphasise a phrase in the headline. Swap the class on the span.
   .underline  green rule under the words
   .hl-box     solid green block behind black words
   .em-green   the words themselves in green
   .em-mark    uneven highlighter sweep, as if drawn by hand
   .em-ring    thin green outline around the phrase
   .em-shadow  green words lifted off a very pale tint            */
.em-green { color: var(--p-600); font-weight: 800; }
.em-mark {
  font-weight: 800; color: var(--ink);
  background: linear-gradient(104deg, rgba(34, 197, 94, 0) .5%, rgba(34, 197, 94, .38) 2%, rgba(34, 197, 94, .42) 96%, rgba(34, 197, 94, 0) 99%);
  padding: .08em .34em; margin: 0 -.1em; border-radius: .5em .3em .4em .25em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.em-ring {
  font-weight: 800; color: var(--ink);
  border: 2px solid var(--p-500); border-radius: 9px;
  padding: .04em .32em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.em-shadow {
  font-weight: 900; color: var(--p-700); background: var(--p-50);
  padding: .04em .28em; border-radius: 6px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hl-box { background: var(--p-200); color: var(--ink); font-weight: 800; padding: .04em .26em; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* A green rule under a phrase. Painted as a background so it survives a line
   break - the phrase can be several words long on a narrow screen. */
.underline {
  font-weight: 800;
  color: var(--ink);
  background-image: linear-gradient(180deg, var(--cta-bright), var(--cta-bright));
  background-repeat: no-repeat;
  background-size: 100% .13em;
  background-position: 0 1.12em;
  padding-bottom: .22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.gradient-text { background: linear-gradient(100deg, var(--p-700) 0%, var(--p-500) 25%, var(--p-400) 50%, var(--p-500) 75%, var(--p-700) 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 900; animation: flow 9s linear infinite; }
@keyframes flow { to { background-position: 220% center; } }
.subheadline { font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.6; color: var(--text-2); max-width: 700px; margin: 0 auto 44px; text-wrap: balance; }
.subheadline strong { color: var(--ink); }

/* Video thumbnail (opens the opt-in) */
.video-thumb { display: block; max-width: 760px; margin: 0 auto 44px; border-radius: 22px; overflow: hidden; position: relative; cursor: pointer; box-shadow: var(--sh-lg), 0 0 0 1px rgba(79, 106, 240, .12), 0 0 80px rgba(118, 144, 250, .2); transition: transform .35s cubic-bezier(.4, 0, .2, 1); }
.video-thumb:hover { transform: translateY(-4px); }
.thumb-bg { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--p-900), var(--p-600)); }
.thumb-bg img { width: 100%; height: 100%; object-fit: cover; }
.thumb-placeholder { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 18px; color: rgba(255, 255, 255, .55); font-size: 13px; font-weight: 600; }
.thumb-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(15, 22, 51, .3) 100%), linear-gradient(180deg, rgba(15, 22, 51, .18), transparent 34%, transparent 62%, rgba(15, 22, 51, .42)); }
.play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .12); backdrop-filter: blur(6px); border-radius: 50%; animation: pulse-play 2.4s ease-out infinite; }
.play-button svg { width: 96px; height: 96px; }
@keyframes pulse-play { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 100% { box-shadow: 0 0 0 30px rgba(255, 255, 255, 0); } }
.thumb-label { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; font-weight: 800; letter-spacing: .1em; font-size: 13.5px; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); white-space: nowrap; }

/* CTA */
.cta-wrap { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cta-wrap.big { margin-top: 64px; }
.cta-btn { display: inline-flex; width: 100%; max-width: 540px; align-items: center; justify-content: center; gap: 14px; padding: 22px 36px; background: linear-gradient(100deg, var(--p-700) 0%, var(--cta) 25%, var(--cta-bright) 50%, var(--cta) 75%, var(--p-700) 100%); background-size: 220% auto; color: #fff; font-weight: 900; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; border-radius: 14px; border: 2px solid var(--cta-deep); border-bottom-width: 6px; box-shadow: var(--sh-cta); cursor: pointer; text-align: center; line-height: 1.2; animation: flow 8s linear infinite; touch-action: manipulation; transition: transform .15s; }
.cta-btn:hover { transform: translateY(-2px); }
.cta-btn:active { transform: translateY(0); border-bottom-width: 2px; }
.cta-btn .arrows { letter-spacing: -2px; font-size: 18px; animation: arrows 1.8s ease-in-out infinite; }
@keyframes arrows { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.cta-btn.mega { padding: 28px 44px; font-size: 18px; max-width: 620px; }
.cta-eyebrow { font-size: clamp(17px, 2.4vw, 21px); font-weight: 800; color: var(--p-600); text-align: center; line-height: 1.3; }

/* Sections */
.section-title { font-size: clamp(26px, 4vw, 42px); font-weight: 800; line-height: 1.18; letter-spacing: -.02em; text-align: center; max-width: 880px; margin: 0 auto 48px; text-wrap: balance; }
.learn-list { display: flex; flex-direction: column; gap: 20px; }
.learn-list li { display: flex; gap: 16px; padding: 22px 26px; background: #fff; border: 1px solid var(--p-100); border-radius: 16px; box-shadow: var(--sh-sm); }
.learn-list li > div { font-size: 16.5px; line-height: 1.6; color: var(--text-2); flex: 1; }
.learn-list .paren { display: block; margin-top: 6px; font-size: 14.5px; color: var(--text-3); font-style: italic; }
.check { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: linear-gradient(135deg, var(--p-500), var(--p-700)); color: #fff; border-radius: 50%; font-weight: 900; font-size: 15px; margin-top: 2px; box-shadow: 0 4px 12px rgba(79, 106, 240, .32); }

.section-dark { background: radial-gradient(ellipse at 50% 0%, rgba(79, 106, 240, .2) 0%, transparent 55%), linear-gradient(180deg, #070b22 0%, #0c1233 50%, #070b22 100%); color: #dfe5f7; }
.section-dark .section-title { color: #fff; }
.section-dark strong { color: #fff; }
.section-dark .learn-list li { background: rgba(255, 255, 255, .04); border-color: rgba(118, 144, 250, .2); box-shadow: 0 4px 20px rgba(0, 0, 0, .2); }
.section-dark .learn-list li > div { color: #dfe5f7; }
.section-dark .learn-list li strong { color: #b7c6ff; }
.section-dark .learn-list .paren { color: #8f9abd; }

/* Host */
.host-card { display: grid; grid-template-columns: 280px 1fr; gap: 44px; align-items: center; background: #fff; border-radius: 24px; padding: 40px; box-shadow: var(--sh-md); border: 1px solid var(--p-100); max-width: 1020px; margin: 0 auto; }
.host-photo { width: 100%; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, var(--p-100), var(--p-300)); display: flex; align-items: center; justify-content: center; color: var(--p-700); font-weight: 700; font-size: 14px; }
.host-photo img { width: 100%; height: 100%; object-fit: cover; }
.host-name { font-size: clamp(26px, 3.2vw, 34px); font-weight: 900; line-height: 1.1; margin-bottom: 4px; }
.host-title { font-size: 15px; color: var(--p-700); font-weight: 600; margin-bottom: 24px; }
.host-wins { display: flex; flex-direction: column; gap: 12px; }
.host-wins li { font-size: 15.5px; line-height: 1.55; color: var(--text-2); padding-left: 22px; position: relative; }
.host-wins li::before { content: '◆'; position: absolute; left: 0; top: 1px; color: var(--p-500); font-size: 11px; line-height: 1.7; }

/* Video page */
.lede { max-width: 780px; margin: 0 auto 30px; text-align: center; font-size: clamp(17px, 2.2vw, 21px); font-weight: 600; line-height: 1.5; color: var(--ink-soft); }
.lede strong { color: var(--ink); }
.video-frame { position: relative; max-width: 860px; margin: 0 auto 40px; }
/* The glow is a blurred plate behind the frame. Only opacity and transform
   animate, so it runs on the compositor and never repaints the page. */
.video-frame::before {
  content: '';
  position: absolute; inset: -4px; z-index: -1;
  border-radius: 26px;
  background: var(--p-500);
  filter: blur(13px);
  animation: videoPulse 2.6s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes videoPulse {
  0%, 100% { opacity: .38; transform: scale(1); }
  50%      { opacity: .72; transform: scale(1.015); }
}
.video-player {
  position: relative; border-radius: 22px;
  overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink);
  border: 3px solid var(--p-500);
  box-shadow: var(--sh-lg);
}
@media (prefers-reduced-motion: reduce) {
  .video-frame::before { animation: none; opacity: .5; }
}
.video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-missing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; color: var(--p-200); font-size: 15px; font-weight: 600; }

/* Footer */
.site-footer { text-align: center; padding: 48px 28px 36px; border-top: 1px solid var(--p-100); margin-top: 32px; }
.site-footer p { font-size: 13.5px; color: var(--text-3); margin-bottom: 8px; }
.disclaimer { max-width: 720px; margin: 12px auto 0; font-size: 12px; font-style: italic; opacity: .8; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease-out, transform .6s cubic-bezier(.16, 1, .3, 1); }
.reveal.visible { opacity: 1; transform: none; }

/* Opt-in pop-up */
.optin-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6, 9, 26, .72); backdrop-filter: blur(8px); opacity: 0; transition: opacity .28s ease; }
.optin-overlay[hidden] { display: none; }
.optin-overlay.is-open { opacity: 1; }
.optin-modal { position: relative; width: 100%; max-width: 460px; background: linear-gradient(165deg, #151d45, #0b1030); border: 1px solid rgba(118, 144, 250, .35); border-radius: 22px; padding: clamp(26px, 5vw, 40px) clamp(22px, 5vw, 38px) clamp(22px, 4vw, 30px); box-shadow: 0 30px 80px rgba(4, 6, 20, .6); transform: translateY(14px) scale(.98); transition: transform .32s cubic-bezier(.16, 1, .3, 1); }
.optin-overlay.is-open .optin-modal { transform: none; }
.optin-close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #e4e9fb; font-size: 22px; line-height: 1; cursor: pointer; }
.optin-eyebrow { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; background: rgba(220, 38, 38, .16); color: #fca5a5; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.optin-title { margin: 0 0 8px; color: #fff; font-size: clamp(20px, 4.4vw, 25px); font-weight: 800; line-height: 1.28; }
.optin-sub { margin: 0 0 20px; color: #bfc9ea; font-size: 14px; line-height: 1.5; }
.optin-form { display: flex; flex-direction: column; gap: 11px; }
.optin-form input { width: 100%; border: 1.5px solid rgba(118, 144, 250, .3); border-radius: 12px; background: rgba(255, 255, 255, .05); padding: 14px 15px; font-size: 16px; color: #fff; outline: 0; }
.optin-form input::placeholder { color: #8f9abd; }
.optin-form input:focus { border-color: var(--p-400); box-shadow: 0 0 0 3px rgba(79, 106, 240, .22); }
.optin-form input.err { border-color: var(--danger); }
.optin-submit { margin-top: 6px; border: 0; border-radius: 12px; padding: 16px 18px; font-weight: 800; font-size: 15.5px; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, var(--cta-bright), var(--p-700)); box-shadow: var(--sh-cta); cursor: pointer; }
.optin-submit:disabled { opacity: .6; cursor: default; }
.optin-err { color: #fca5a5; font-size: 13px; text-align: center; }
.optin-err[hidden] { display: none; }
.optin-privacy { margin: 14px 0 0; color: #7f8aae; font-size: 11px; text-align: center; }
body.optin-locked { overflow: hidden; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Questionnaire */
body.apply-page { min-height: 100vh; padding: 28px 16px 56px; background: radial-gradient(circle at 50% 0, var(--p-100), var(--bg-base) 48%); font-size: 16px; }
.brand { text-align: center; color: var(--p-700); font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.program-title { max-width: 780px; margin: 12px auto 28px; text-align: center; font-size: clamp(20px, 4vw, 30px); line-height: 1.35; }
.apply-shell { --pad: clamp(22px, 6vw, 44px); max-width: 730px; margin: auto; background: #fff; border: 2px solid var(--p-500); border-radius: 24px; padding: var(--pad); box-shadow: 0 18px 48px rgba(16, 60, 34, .13); }
.progress { height: 6px; border-radius: 99px; background: var(--p-100); margin-bottom: 26px; overflow: hidden; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--p-500), var(--p-700)); transition: width .3s; }
.step h2 { font-size: clamp(20px, 4.5vw, 26px); line-height: 1.35; margin: 0 0 22px; }
.step .field { margin: 0 0 16px; }
.step label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.step input, .step textarea { width: 100%; border: 1.5px solid #d6dbe0; border-radius: 12px; background: #fff; padding: 14px 15px; font-size: 16px; color: var(--ink); outline: 0; transition: border-color .15s, box-shadow .15s; }
.step input::placeholder, .step textarea::placeholder { color: #9aa4ad; }
.step input:focus, .step textarea:focus { border-color: var(--p-500); box-shadow: 0 0 0 3px var(--p-100); }
.step textarea { min-height: 145px; resize: vertical; line-height: 1.5; }
.step input:focus, .step textarea:focus { border-color: var(--p-500); box-shadow: 0 0 0 3px var(--p-100); }
.step .err { border-color: var(--danger) !important; }
/* Answers read as plain choices until one is taken. Tinting every card green
   left nothing to mark the chosen one. */
.options { display: grid; gap: 10px; }
.option-card {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px;
  border: 1.5px solid #dfe4e8;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  line-height: 1.45; text-align: left;
  font-size: 15px; font-weight: 600; color: var(--ink);
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.option-card:hover { border-color: var(--p-400); background: var(--p-50); }
.option-card:focus-visible { outline: 2px solid var(--p-600); outline-offset: 2px; }
.option-radio {
  position: relative; flex: 0 0 auto;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #c6ced5; background: #fff;
  transition: border-color .14s;
}
.option-card.selected {
  border-color: var(--p-600);
  background: var(--p-50);
  box-shadow: 0 0 0 3px var(--p-100);
}
.option-card.selected .option-radio { border-color: var(--p-600); }
.option-card.selected .option-radio::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--p-600);
}
.actions { display: flex; gap: 10px; margin-top: 25px; }
.btn { border: 0; border-radius: 12px; padding: 15px 18px; font-weight: 800; font-size: 15px; cursor: pointer; }
.btn-next {
  flex: 1; color: #fff; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  background: linear-gradient(180deg, #c62828 0%, #ab1b1b 55%, #8c1111 100%);
  border: 2px solid #6b0f0f; border-bottom-width: 5px; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(139, 17, 17, .42);
  padding: 17px 20px;
  transition: transform .15s, box-shadow .15s;
}
.btn-next:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(139, 17, 17, .5); }
.btn-next:active { transform: translateY(1px); border-bottom-width: 2px; }
.btn-next .arrows { letter-spacing: -2px; margin-left: 8px; display: inline-block; animation: arrows 1.8s ease-in-out infinite; }
.btn-back { color: var(--ink-soft); background: var(--bg-soft); }
.btn:disabled { opacity: .55; }
.form-error { color: var(--danger); font-size: 13px; margin-top: 12px; text-align: center; min-height: 18px; }
.privacy { text-align: center; color: var(--text-3); font-size: 11px; margin: 20px 0 0; }
.cal-slot { padding: 30px 20px; border: 2px dashed var(--p-300); border-radius: 16px; text-align: center; color: var(--text-2); font-weight: 600; }
#cal-booking { min-height: 120px; }

/* Thank-you */
body.thanks-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 0, var(--p-100), var(--bg-base) 55%); }
.thanks-card { width: min(600px, 100%); padding: clamp(30px, 8vw, 60px); text-align: center; background: #fff; border: 1px solid var(--p-200); border-radius: 24px; box-shadow: var(--sh-lg); }
.thanks-card h1 { font-size: clamp(28px, 6vw, 42px); line-height: 1.2; margin: 0 0 18px; color: var(--p-800); }
.thanks-card p { font-size: 17px; line-height: 1.65; color: var(--text-2); }
.thanks-card .brand { margin-top: 34px; }

@media (max-width: 900px) {
  .host-card { grid-template-columns: 1fr; padding: 32px 28px; gap: 28px; }
  .host-photo { max-width: 240px; margin: 0 auto; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .container { padding: 0 20px; }
  .hero { padding-top: 24px; padding-bottom: 56px; }
  .notice-pill { font-size: 13.5px; padding: 12px 18px; border-radius: 18px; }
  .headline { font-size: 28px; line-height: 1.15; }
  .subheadline { font-size: 16px; margin-bottom: 32px; }
  .cta-btn { padding: 18px 22px; font-size: 14px; gap: 10px; }
  .cta-btn.mega { padding: 22px 26px; font-size: 16px; }
  .play-button, .play-button svg { width: 72px; height: 72px; }
  .thumb-label { font-size: 11.5px; bottom: 14px; }
  .learn-list li { padding: 18px 20px; gap: 12px; }
  .section-title { font-size: 24px; margin-bottom: 36px; }
  body.apply-page { padding: 20px 12px 40px; }
  .apply-shell { border-radius: 18px; padding: 24px 18px; }
  .actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* The one line of copy that introduces the form, sitting under the video. */
.apply-lede {
  max-width: 720px;
  margin: 0 auto 22px;
  text-align: center;
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}
.apply-lede-note { display: block; margin-top: 6px; font-size: .74em; font-weight: 600; color: var(--text-2); }

/* The list of things the model does not require. */
.lede-in {
  font-size: clamp(14.5px, 1.55vw, 17px);
  font-weight: 500;
  color: var(--ink);
  max-width: 1200px;
  margin: 0 auto 56px;
  line-height: 1.9;
}
/* Each "без" stays on one line with its cross mark, with room around it. */
.lede-in .nb { white-space: nowrap; margin-right: 14px; }
.lede-in .xm { font-style: normal; margin-right: 7px; font-size: .92em; }

/* The form card: stronger edge, its own heading, left-aligned fields. */
.apply-shell { text-align: left; }
.apply-shell .step h2 { text-align: center; }
.form-head {
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 28px;
  padding: 26px 18px 20px;
  background: var(--p-50);
  border-bottom: 2px solid var(--p-200);
  border-radius: 21px 21px 0 0;
  text-align: center;
}
.form-lede { font-size: clamp(15.5px, 1.9vw, 19px); font-weight: 800; line-height: 1.45; color: var(--ink); margin: 0 auto; max-width: 620px; text-wrap: balance; }
.form-lede-note { white-space: nowrap; }
.form-arrows { display: block; margin-top: 14px; font-size: 30px; line-height: 1; letter-spacing: 6px; color: var(--cta); font-weight: 900; animation: down 1.8s ease-in-out infinite; }
@keyframes down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* On a wide screen the headline and the clause run break where they are told
   to, so no line ends up longer than the ones around it. Narrower than that
   the breaks come out and the text finds its own, balanced. */
@media (max-width: 1160px) {
  br.lg { display: none; }
  .headline { text-wrap: balance; }
}

/* On a phone a clause is wider than the screen, so it has to be allowed to
   wrap - kept whole on one line it pushed the page sideways by 159px. */
@media (max-width: 720px) {
  .lede-in .nb { display: block; white-space: normal; margin-right: 0; }
  .lede-in { line-height: 1.7; }
}