/* 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, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 60, 34, .04) 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-block;
  max-width: 100%; margin: 0 auto 26px; padding: 12px 26px;
  text-align: center;
  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(13px, 1.25vw, 15.5px); font-weight: 600;
  letter-spacing: .035em; line-height: 1.45;
}
.notice-pill .warn { margin-right: 8px; font-size: 1.1em; }
.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(25px, 3.1vw, 37.5px); font-weight: 700; line-height: 1.52; letter-spacing: -.006em; max-width: 1170px; 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; }
/* A solid green plate sitting behind the video, like a second card slightly
   larger than the first - not a glow. It breathes so the eye catches it.
   Only opacity and transform animate, so it stays on the compositor. */
.video-frame::before {
  content: '';
  position: absolute; inset: -12px; z-index: -1;
  border-radius: 30px;
  background: var(--p-400);
  opacity: .34;
  animation: videoPulse 1.7s ease-in-out infinite;
  will-change: opacity, transform;
}
/* A second, tighter plate gives the stack some depth. */
.video-frame::after {
  content: '';
  position: absolute; inset: -5px; z-index: -1;
  border-radius: 26px;
  background: var(--p-600);
  opacity: .5;
  animation: videoPulse 1.7s ease-in-out infinite .28s;
  will-change: opacity, transform;
}
/* The beat is in the brightness, not the size - the plates barely move. */
@keyframes videoPulse {
  0%, 100% { opacity: .14; transform: scale(1); }
  50%      { opacity: .92; transform: scale(1.004); }
}
.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, .video-frame::after { animation: none; opacity: .4; }
}
.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; overflow: hidden; 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(15.5px, 1.6vw, 18px);
  font-weight: 500;
  color: var(--ink);
  max-width: 1200px;
  margin: 0 auto 56px;
  line-height: 2.05;
}
/* The opening line sits on its own with a little air under it - same type,
   same weight, just a break. */
.lede-in .lede-head { display: block; margin-bottom: 7px; }

/* Each "без" stays on one line with its cross mark, with room around it. */
.lede-in .nb { white-space: nowrap; margin-right: 12px; }
.lede-in .xm { font-style: normal; margin-right: 8px; 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; }
.apply-shell .step h2.step-lead { text-align: left; }
.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);
  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; }
}

/* Phone sizing. The headline comes down so it stops running to ten lines, the
   clause run goes up and flows as one paragraph again - inline, but allowed to
   wrap mid-clause, since keeping one whole pushed the page 159px sideways. */
@media (max-width: 720px) {
  .headline { font-size: 24.5px; line-height: 1.34; }
  .lede-in {
    font-size: 17.5px;
    line-height: 1.85;
    margin-bottom: 40px;
  }
  .lede-in .nb { display: inline; white-space: normal; margin-right: 6px; }
  .lede-in .xm { margin-right: 5px; }
  .notice-pill { font-size: 14.5px; padding: 13px 18px; }
  .form-lede { font-size: 17px; }
  .form-head { padding: 22px 16px 18px; }
  .apply-shell { --pad: 18px; }
}

/* The booking calendar arrives as a white panel inside a white card, so it
   needs its own edge to read as a separate thing. */
/* The last nudge before the calendar. */
.book-note {
  max-width: 560px;
  margin: 10px auto 0;
  text-align: center;
  font-size: clamp(13px, 1.4vw, 14.5px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-2);
}
.step .form-arrows { margin-bottom: 18px; text-align: center; }

#cal-booking {
  border: 2px solid var(--p-300);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 22px rgba(16, 60, 34, .08), inset 0 0 0 1px rgba(255, 255, 255, .6);
  min-height: 420px;
}

/* ─────────────────────── Confirmation page ───────────────────────
   Four steps, each one a clearly separated block: a numbered tab on a
   tinted header, then its own white body. The point is that someone
   skimming can tell at a glance where one step ends and the next begins. */

.confirm-page .container.narrow { max-width: 760px; }

.confirm-hero { padding: 46px 0 6px; text-align: center; }
/* The warning has to land before the headline does, so it is red, it pulses,
   and the words that carry the meaning are underlined. */
/* Not a flex container: flex would make each run of words between the spans
   its own item, and on a narrow screen the sentence breaks into columns
   instead of wrapping. It is one line of text that happens to start with a
   dot, so it is laid out as text. */
.confirm-alert {
  display: inline-block;
  margin: 0 0 18px; padding: 10px 20px;
  background: #fff1f1; color: #b91c1c;
  border: 2px solid #f4b4b4; border-radius: 999px;
  box-shadow: 0 0 0 5px rgba(220, 38, 38, .09), 0 6px 20px rgba(185, 28, 28, .12);
  font-size: clamp(16px, 1.7vw, 20px); font-weight: 800;
  letter-spacing: .02em; line-height: 1.45; text-align: center;
  text-wrap: balance;
  max-width: 100%;
  animation: alertPulse 1.9s ease-in-out infinite;
}
.alert-dot {
  display: inline-block; vertical-align: middle;
  margin-right: 10px; position: relative; top: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #dc2626; box-shadow: 0 0 0 0 rgba(220, 38, 38, .55);
  animation: alertDot 1.9s ease-in-out infinite;
}
.alert-no {
  white-space: nowrap;   /* the two words carry the meaning; never split them */
  color: #dc2626;
  background-image: linear-gradient(180deg, #dc2626, #dc2626);
  background-repeat: no-repeat; background-size: 100% .12em; background-position: 0 1.1em;
  padding-bottom: .16em;
}
@keyframes alertPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(220, 38, 38, .07), 0 6px 20px rgba(185, 28, 28, .10); }
  50%      { box-shadow: 0 0 0 9px rgba(220, 38, 38, .14), 0 6px 22px rgba(185, 28, 28, .18); }
}
@keyframes alertDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .confirm-alert, .alert-dot { animation: none; }
}
.confirm-title {
  font-size: clamp(21px, 2.6vw, 31px); font-weight: 800; line-height: 1.38;
  letter-spacing: -.008em; margin: 0 auto; max-width: 720px; text-wrap: balance;
}

.steps { display: flex; flex-direction: column; gap: 22px; padding: 30px 0 10px; }

.step-block {
  padding: 0;            /* the page's generic section padding does not apply here */
  background: #fff;
  border: 2px solid var(--p-200);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(16, 60, 34, .07);
}
.step-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 24px;
  background: var(--p-50);
  border-bottom: 2px solid var(--p-200);
}
.step-no {
  flex: none; display: grid; place-items: center; gap: 1px;
  width: 62px; padding: 9px 0;
  background: var(--cta); color: #fff;
  border-radius: 13px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  line-height: 1;
}
.step-no b { font-size: 24px; letter-spacing: 0; line-height: 1.05; }
.step-head h2 {
  margin: 2px 0 3px; font-size: clamp(17px, 2vw, 21px); font-weight: 800;
  line-height: 1.3; letter-spacing: -.01em;
}
.step-head p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.45; }
.step-body { padding: 24px; }
.step-block + .step-block { position: relative; }

/* A video that is not in yet, named so it is obvious which one is missing. */
.v-slot {
  display: grid; place-content: center; gap: 4px;
  aspect-ratio: 16 / 9; padding: 20px; text-align: center;
  background: var(--ink); color: var(--p-200);
  border: 2px dashed var(--p-500); border-radius: 14px;
}
.v-slot span { font-size: 15px; font-weight: 800; }
.v-slot small { font-size: 12.5px; opacity: .7; }
.v-slot-main { border-radius: 18px; }

.v-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 14px; background: var(--ink);
  border: 2px solid var(--p-300);
}
.v-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Every question is on screen with its video. Each sits in its own card so
   twenty-seven of them read as separate items rather than one dense block. */
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 20px; }
.faq-item {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 18px;
  background: var(--p-50);
  border: 1.5px solid var(--p-200);
  border-radius: 16px;
}
.faq-q {
  display: flex; align-items: flex-start; gap: 11px; margin: 0;
  min-height: 2.8em;
  font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ink);
}
.faq-n {
  flex: none; display: grid; place-items: center;
  width: 25px; height: 25px; border-radius: 8px;
  background: var(--p-600); color: #fff;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* Step 3 proof videos */
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.proof-item { margin: 0; }
.proof-item figcaption { margin-top: 7px; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.proof-lede { margin: 26px 0 12px; font-size: 15.5px; font-weight: 600; line-height: 1.5; }

/* Step 4 checklist */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checklist label {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 15px 16px; cursor: pointer;
  background: #fff; border: 1.5px solid #dfe4e8; border-radius: 12px;
  font-size: 15px; line-height: 1.5; color: var(--ink);
  transition: border-color .14s, background .14s;
}
.checklist label:hover { border-color: var(--p-400); }
.checklist input {
  flex: none; appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; margin: 1px 0 0;
  border: 2px solid #c6ced5; border-radius: 7px; background: #fff;
  cursor: pointer; display: grid; place-content: center;
  transition: background .14s, border-color .14s;
}
.checklist input::after {
  content: '✓'; color: #fff; font-size: 14px; font-weight: 900;
  transform: scale(0); transition: transform .14s;
}
.checklist input:checked { background: var(--p-600); border-color: var(--p-600); }
.checklist input:checked::after { transform: scale(1); }
.checklist label:has(input:checked) { background: var(--p-50); border-color: var(--p-500); }
.checklist label:has(input:checked) span { color: var(--text-2); }

.confirm-close {
  margin: 34px auto 10px; text-align: center;
  font-size: clamp(16px, 1.9vw, 19px); line-height: 1.5; color: var(--ink);
}
.confirm-close strong { color: var(--p-700); }

@media (max-width: 720px) {
  .confirm-hero { padding-top: 26px; }
  /* Two lines of text in a 999px pill bulge at the ends; a softer radius and
     a little more room read better. */
  .confirm-alert { border-radius: 16px; padding: 12px 16px; }
  .step-head { padding: 18px 16px; gap: 13px; }
  .step-no { width: 54px; }
  .step-no b { font-size: 21px; }
  .step-body { padding: 18px 16px; }
  .faq-item summary { font-size: 14.5px; padding: 13px 14px; }
}

/* ─── The standalone question page at /faq ─── */
.faq-kicker {
  margin: 0 0 14px; font-size: 12px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--p-700);
}
.faq-sub {
  margin: 16px auto 0; max-width: 540px;
  font-size: clamp(14.5px, 1.5vw, 16.5px); color: var(--ink-soft); line-height: 1.6;
}
.faq-sub b { color: var(--p-700); font-weight: 800; }
.faq-main {
  padding: 34px 0 20px;
}
.faq-main .faq {
  background: #fff;
  border: 2px solid var(--p-200);
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: 0 8px 26px rgba(16, 60, 34, .07);
}
@media (max-width: 720px) {
  .faq-main { padding: 24px 0 12px; }
  .faq-main .faq { padding: 18px 16px; border-radius: 16px; }
}

.v-frame-main { border-radius: 18px; border-width: 3px; border-color: var(--p-500); }

/* ─── Testimonials: the video, then who said it and what they said ─── */
.proof { display: grid; grid-template-columns: 1fr; gap: 18px; }
.t-card {
  margin: 0; display: grid; gap: 18px; align-items: center;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  padding: 18px;
  background: var(--p-50);
  border: 1.5px solid var(--p-200);
  border-radius: 18px;
}
.t-card .v-frame { border-width: 2px; }
/* One testimonial was filmed on a phone and is genuinely 9:16. */
/* In a grid, margin:auto shrinks the item to its content - and the iframe is
   absolutely positioned, so there is none. Width has to be explicit. */
.v-frame-portrait { aspect-ratio: 9 / 16; width: 100%; max-width: 232px; justify-self: center; }
.t-said { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.t-name { font-size: clamp(16px, 1.9vw, 19px); font-weight: 800; color: var(--ink); line-height: 1.25; }
.t-role { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.t-quote {
  margin: 10px 0 0; padding: 0 0 0 14px;
  border-left: 3px solid var(--p-500);
  font-size: clamp(14.5px, 1.6vw, 16.5px); font-style: italic;
  line-height: 1.55; color: var(--ink-soft);
}

/* Bank statements */
.statements { margin: 0; }
.statements img {
  display: block; width: 100%; height: auto;
  border: 2px solid var(--p-300); border-radius: 14px;
  background: #fff;
}

@media (max-width: 720px) {
  .faq { grid-template-columns: 1fr; gap: 16px; }
  .faq-item { padding: 14px; }
  .faq-q { min-height: 0; }
  .t-card { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
}

/* The banner stands in for the main video until it is played. Nothing of the
   player is fetched before that. */
.v-facade {
  position: relative; display: block; width: 100%; padding: 0;
  aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer;
  border: 3px solid var(--p-500); border-radius: 18px;
  background: var(--ink);
}
.v-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.v-facade::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0), rgba(0,0,0,.16));
  transition: background .2s;
}
.v-facade:hover::after { background: radial-gradient(ellipse at center, rgba(0,0,0,0), rgba(0,0,0,.1)); }
/* The play button has one job: say "this is a video, press me". It is red
   like every other action on the site, it beats, and a ring keeps breaking
   out of it. Only transform and opacity animate, so it stays composited. */
.v-play {
  position: absolute; left: 50%; top: 50%;
  z-index: 2; display: grid; place-items: center;
  width: clamp(62px, 19%, 132px); aspect-ratio: 1;
  border: 4px solid rgba(255, 255, 255, .96); border-radius: 50%; cursor: pointer;
  background: linear-gradient(180deg, #ff5a5a 0%, #dc2626 52%, #a81616 100%);
  color: #fff;
  /* Heavy and layered, so it sits well clear of whatever is behind it. */
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .5),
    0 8px 18px rgba(0, 0, 0, .42),
    0 0 0 6px rgba(0, 0, 0, .1),
    0 0 56px rgba(220, 38, 38, .45);
  animation: playBeat 1.4s cubic-bezier(.22, 1, .36, 1) infinite;
  will-change: transform;
}
.v-play::before,
.v-play::after {
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%; border: 4px solid rgba(239, 68, 68, .9);
  animation: playRing 1.4s ease-out infinite;
  pointer-events: none;
}
.v-play::after { animation-delay: .7s; }
.v-play svg { position: relative; width: 42%; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }

/* A double thump rather than a gentle swell - it reads as urgent. */
@keyframes playBeat {
  0%        { transform: translate(-50%, -50%) scale(1); }
  12%       { transform: translate(-50%, -50%) scale(1.19); }
  26%       { transform: translate(-50%, -50%) scale(1.02); }
  38%       { transform: translate(-50%, -50%) scale(1.13); }
  62%, 100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes playRing {
  0%   { transform: scale(.9); opacity: .95; }
  100% { transform: scale(2.3); opacity: 0; }
}
/* Hovering hands control back to the pointer. */
.v-facade:hover .v-play { animation-play-state: paused; transform: translate(-50%, -50%) scale(1.18); }
.v-facade:hover .v-play::before,
.v-facade:hover .v-play::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .v-play { animation: none; transform: translate(-50%, -50%); }
  .v-play::before, .v-play::after { animation: none; opacity: 0; }
}
.v-facade:focus-visible { outline: 3px solid var(--p-600); outline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Inside the pulsing video frame, the facade brings no border of its own. */
.v-facade-bare { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; aspect-ratio: auto; z-index: 1; }