/* =====================================================================
   onboarding.css — post-intro health questionnaire + paywall.
   Deliberately NOT the warm garden theme: white background, flat
   clinical green/blue, serious assessment vibe. English copy.
===================================================================== */
:root{
  --onb-white:#ffffff;
  --onb-bg:#f4f8fa;
  --onb-ink:#152430;
  --onb-muted:#5c6b78;
  --onb-line:#e4ebf0;
  --onb-green:#12b981;
  --onb-green-deep:#0a8f66;
  --onb-blue:#2f80ed;
  --onb-blue-deep:#1c63c4;
}
/* Same fixed 440x900 CONTAIN + letterbox contract as #app (scale.js v5):
   the overlay fills the real viewport only to host the letterbox fill;
   all actual content lives in .onb-stage, sized/scaled by --dw/--dh/--scale
   exactly like #app, so nothing here stretches or crops differently. */
.onb-overlay{position:fixed;inset:0;z-index:190000;overflow:hidden;background:linear-gradient(160deg,#0b3b2c,#0c2f4a);color:var(--onb-ink);font-family:"Segoe UI",system-ui,-apple-system,Roboto,Nunito,sans-serif;opacity:1;transition:opacity .25s ease}
.onb-overlay[hidden]{display:none}
.onb-overlay.closing{opacity:0;pointer-events:none}
.onb-stage{position:fixed;left:50%;top:50%;width:var(--dw,440px);height:var(--dh,900px);overflow:hidden;transform:translate(-50%,-50%) scale(var(--scale,1));transform-origin:center;display:flex;flex-direction:column;background:var(--onb-white);box-shadow:0 0 80px #05192a99}
body.onb-active{overflow:hidden}

.onb-progress[hidden]{display:none}
.onb-progress{display:flex;gap:6px;padding:max(16px,env(safe-area-inset-top)) 20px 0;flex:0 0 auto}
.onb-progress i{flex:1;height:5px;border-radius:4px;background:var(--onb-line);overflow:hidden}
.onb-progress i.done{background:linear-gradient(90deg,var(--onb-green),var(--onb-blue))}

.onb-slide{display:none;flex:1;min-height:0;flex-direction:column;padding:22px 24px 28px;overflow-y:auto}
.onb-slide.active{display:flex}

.onb-back{align-self:flex-start;flex:0 0 auto;width:56px;height:56px;margin-bottom:10px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--onb-green),var(--onb-blue));color:#fff;font-size:34px;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 6px 16px #12b98138}

.onb-icon{width:60px;height:60px;margin:6px 0 18px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--onb-green),var(--onb-blue));box-shadow:0 8px 20px #12b98133;flex:0 0 auto}
.onb-icon svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* On later slides the coloured badge sat directly below the Back control and
   looked like a second actionable button. Keep the landmark on the first slide
   only; subsequent slides are already identified by their heading. */
.onb-slide:has(.onb-back) > .onb-icon{display:none}

.onb-eyebrow{margin:0 0 8px;color:var(--onb-blue-deep);font-weight:800;font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.onb-title{margin:0 0 8px;font-size:25px;line-height:1.28;font-weight:800;color:var(--onb-ink)}
.onb-sub{margin:0 0 22px;color:var(--onb-muted);font-size:19px;line-height:1.45}

.onb-options{display:flex;flex-direction:column;gap:11px}
.onb-option{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 19px;border:2px solid var(--onb-line);border-radius:16px;background:var(--onb-white);color:var(--onb-ink);font-family:inherit;font-weight:700;font-size:20px;line-height:1.3;text-align:left;cursor:pointer;transition:border-color .15s,background .15s;min-height:62px}
.onb-option .onb-check{width:28px;height:28px;border-radius:50%;border:3px solid var(--onb-line);flex:0 0 28px;display:grid;place-items:center;transition:border-color .15s}
.onb-option .onb-check::after{content:"";width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--onb-green),var(--onb-blue));transform:scale(0);transition:transform .15s}
.onb-option.selected{border-color:var(--onb-blue);background:#eef6ff}
.onb-option.selected .onb-check{border-color:var(--onb-blue)}
.onb-option.selected .onb-check::after{transform:scale(1)}
.onb-option-copy{display:flex;flex-direction:column;gap:4px}
.onb-option-copy small{color:var(--onb-muted);font-size:14px;font-weight:600;line-height:1.35}
html[data-text-scale="1.15"] #onboardingOverlay .onb-title{font-size:28px}
html[data-text-scale="1.3"] #onboardingOverlay .onb-title{font-size:31px}
html[data-text-scale="1.15"] #onboardingOverlay .onb-sub{font-size:21px}
html[data-text-scale="1.3"] #onboardingOverlay .onb-sub{font-size:23px}
html[data-text-scale="1.15"] #onboardingOverlay .onb-option{font-size:22px}
html[data-text-scale="1.3"] #onboardingOverlay .onb-option{font-size:24px}

.onb-footer{flex:0 0 auto;padding:14px 24px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--onb-line);background:var(--onb-white)}
.onb-footer[hidden]{display:none}
.onb-cta{width:100%;padding:20px;border:0;border-radius:16px;color:#fff;font-family:inherit;font-weight:800;font-size:21px;min-height:64px;background:linear-gradient(135deg,var(--onb-green),var(--onb-blue));box-shadow:0 8px 20px #12b98140;cursor:pointer}
.onb-cta:disabled{opacity:.35;pointer-events:none;box-shadow:none}
.onb-cta:active{transform:translateY(2px)}

/* Building / fake-analysis slide */
.onb-building{align-items:center;text-align:center;justify-content:center}
.onb-spinner{width:52px;height:52px;margin-bottom:14px;border-radius:50%;border:5px solid var(--onb-line);border-top-color:var(--onb-blue);animation:onbspin 1s linear infinite}
@keyframes onbspin{to{transform:rotate(360deg)}}
.onb-building .onb-title{font-size:21px}
.onb-buildbar{width:100%;max-width:320px;height:9px;margin:18px 0 26px;border-radius:8px;background:var(--onb-line);overflow:hidden}
.onb-buildbar i{display:block;height:100%;width:0%;border-radius:8px;background:linear-gradient(90deg,var(--onb-green),var(--onb-blue));transition:width 2.2s linear}
.onb-checklist{list-style:none;margin:0;padding:0;width:100%;max-width:320px;text-align:left;display:flex;flex-direction:column;gap:10px}
.onb-checklist li{display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:14px;background:var(--onb-bg);color:var(--onb-muted);font-weight:700;font-size:14px;opacity:.5;transition:opacity .2s,background .2s,color .2s}
.onb-checklist li.done{opacity:1;background:#eafaf3;color:var(--onb-green-deep)}
.onb-checklist li i{width:19px;height:19px;flex:0 0 19px;border-radius:50%;border:2px solid var(--onb-line);display:grid;place-items:center;position:relative;background:var(--onb-white)}
.onb-checklist li.done i{border-color:var(--onb-green);background:var(--onb-green)}
.onb-checklist li.done i::after{content:"\2713";color:#fff;font-size:11px;font-weight:900}

/* Paywall */
.onb-paywall{position:relative;padding-top:20px}
.onb-close{position:absolute;right:16px;top:max(14px,env(safe-area-inset-top));z-index:2;width:34px;height:34px;border-radius:50%;border:0;background:var(--onb-bg);color:var(--onb-muted);font-size:15px;cursor:pointer}
.onb-paywall-badge{align-self:center;margin:8px auto 14px;width:68px;height:68px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,var(--onb-green),var(--onb-blue));box-shadow:0 10px 24px #2f80ed33}
.onb-paywall-badge svg{width:32px;height:32px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.onb-paywall h1{text-align:center;font-size:23px;margin:0 0 6px}
.onb-paywall .onb-sub{text-align:center;margin:0 0 20px}

.onb-features{display:flex;flex-direction:column;gap:11px;margin:0 0 22px;padding:0}
.onb-features li{display:flex;align-items:center;gap:11px;list-style:none;font-weight:700;font-size:14px;color:var(--onb-ink)}
.onb-features i{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#eafaf3;color:var(--onb-green-deep);display:grid;place-items:center;font-size:13px;font-weight:900;font-style:normal}

.onb-plan-card{position:relative;border:2px solid var(--onb-blue);border-radius:18px;padding:18px 18px 16px;background:#f3f9ff;margin-bottom:14px}
.onb-plan-badge{position:absolute;top:-11px;left:16px;padding:3px 10px;border-radius:999px;background:linear-gradient(135deg,var(--onb-green),var(--onb-blue));color:#fff;font-family:inherit;font-weight:800;font-size:12px;line-height:1.6;letter-spacing:.05em;text-transform:uppercase}
.onb-plan-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.onb-plan-row b{font-size:19px}
.onb-plan-row span{color:var(--onb-muted);font-size:12.5px;font-weight:700;text-align:right}
.onb-plan-price{margin-top:5px;color:var(--onb-muted);font-size:12.5px;font-weight:600}

.onb-trial-note{display:flex;align-items:flex-start;gap:9px;margin:0 0 16px;padding:11px 12px;border-radius:12px;background:var(--onb-bg);color:var(--onb-muted);font-size:12px;font-weight:700;line-height:1.45}
.onb-trial-note svg{flex:0 0 16px;width:16px;height:16px;margin-top:1px;stroke:var(--onb-blue-deep);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.onb-disclaimer-copy{
  margin:8px 0 22px;
  padding:18px;
  border:1px solid #d8e6d2;
  border-radius:16px;
  background:#f4f8f1;
  color:#35463b;
  font-size:17px;
  font-weight:650;
  line-height:1.55;
}
.onb-disclaimer-cta{
  width:100%;
  min-height:62px;
  margin-top:auto;
  flex:0 0 auto;
  font-size:19px;
  font-weight:900;
}

.onb-video-story{
  padding:0;
  overflow:hidden;
  background:#14231d;
}
.onb-video-frame{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#14231d;
}
.onb-video-frame video{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  opacity:1;
  transition:opacity .65s ease-in-out;
}
.onb-video-frame video.is-fading{
  opacity:0;
}
.onb-video-shade{
  position:absolute;
  inset:45% 0 0;
  background:linear-gradient(transparent,rgba(7,18,13,.88));
  pointer-events:none;
}
.onb-video-subtitle{
  position:absolute;
  left:20px;
  right:20px;
  bottom:76px;
  z-index:2;
  margin:0;
  color:#fff;
  font-size:19px;
  font-weight:800;
  line-height:1.36;
  text-align:center;
  text-wrap:balance;
  text-shadow:0 2px 8px #000,0 1px 2px #000;
}
.onb-video-count{
  position:absolute;
  top:18px;
  left:18px;
  z-index:2;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(11,32,23,.45);
  color:#fff;
  font-size:12px;
  font-weight:800;
  backdrop-filter:blur(8px);
}
.onb-video-skip{
  position:absolute;
  right:18px;
  top:18px;
  z-index:3;
  min-width:92px;
  min-height:42px;
  padding:8px 16px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  background:rgba(10,25,18,.28);
  color:#fff;
  font:800 14px/1 inherit;
  backdrop-filter:blur(8px);
}
@media (prefers-reduced-motion:reduce){
  .onb-video-frame video{transition-duration:.01ms}
}

.onb-below-cta{margin:9px 0 0;text-align:center;color:var(--onb-muted);font-size:12px;font-weight:700}
.onb-legal{margin:14px 0 0;color:var(--onb-muted);font-size:11px;line-height:1.55;text-align:center}
.onb-footlinks{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 16px;margin-top:10px}
.onb-footlinks button{border:0;background:none;padding:4px;color:var(--onb-muted);font-size:11.5px;font-weight:700;text-decoration:underline;cursor:pointer}

/* =====================================================================
   PAYWALL — matched to the supplied reference.

   Palette, type sizes and the bare ✕ come from the reference on purpose: the
   client asked for that screen, not a green translation of it. So the hero is
   sky blue, benefit copy is blue on a lighter blue card with green ticks, the
   trial headline is green and the call to action is the magenta pill.

   No hero illustration and no mascot: the three lines of copy ARE the offer,
   and every pixel spent on decoration pushed the button below the fold.

   Sizes follow the reference but never drop under the app's readability floor —
   16px for anything meaningful, 56px+ for anything tapped.
===================================================================== */
.onb-paywall.active {
  padding: 0 !important;
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #ffffff;
}

/* ---- hero: sky panel with the ✓ card ---- */
.pw-hero {
  /* the reference splits the screen in half at the ribbon; with the hero
     illustration gone, the panel grows to hold that half instead of collapsing
     onto the copy and leaving the bottom third empty */
  position: relative; flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(56px + env(safe-area-inset-top)) 16px 26px;
  background: #d9f3df;
}
/* the reference ✕ is a bare glyph, no button chrome behind it */
.pw-close {
  position: absolute; left: 10px; top: calc(8px + env(safe-area-inset-top)); z-index: 3;
  width: 56px; height: 56px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 26px; font-weight: 700; line-height: 1; color: #ffffff;
}
.pw-restore {
  position: absolute; right: 8px; top: calc(8px + env(safe-area-inset-top)); z-index: 3;
  min-height: 56px; padding: 0 10px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 700; color: #43a968;
}

.pw-benefits {
  list-style: none; margin: 0; padding: 20px 18px;
  border-radius: 20px; background: #ecf9ef;
  display: grid; gap: 18px;
}
.pw-benefits li { display: flex; align-items: flex-start; gap: 14px; }
/* green tick, drawn so it needs no icon font */
.pw-benefits i {
  flex: 0 0 24px; height: 24px; margin-top: 2px; background: #35c04a;
  clip-path: polygon(12% 48%, 38% 74%, 88% 16%, 100% 28%, 40% 96%, 0 60%);
}
.pw-benefits span {
  font-size: 17px; font-weight: 800; line-height: 1.32; color: #278f50;
}

/* ---- ribbon ---- */
.pw-ribbon {
  flex: 0 0 auto; padding: 13px 16px;
  text-align: center; font-size: 16px; font-weight: 900; letter-spacing: .06em;
  color: #ffffff; background: #61bd7b;
}

/* ---- offer ---- */
.pw-offer {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: 26px 22px calc(18px + env(safe-area-inset-bottom));
  background: #ffffff; text-align: center;
}
.pw-trial { margin: 0; font-size: 26px; font-weight: 800; color: #35c04a; line-height: 1.15; }
.pw-price { margin: 8px 0 26px; font-size: 17px; font-weight: 600; color: #43a968; }
.pw-cta {
  width: 100%; min-height: 64px; padding: 18px 20px;
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 21px; font-weight: 900; letter-spacing: .01em; color: #fff;
  background: #f28c28;
  box-shadow: 0 0 0 5px #ffd3a6, 0 8px 20px #f28c2840;
}
.pw-cta:active { transform: translateY(2px); }
.pw-cancel { margin: 20px 0 0; font-size: 16px; font-weight: 600; color: #9aa4ad; line-height: 1.4; }
.pw-legal { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: #b4bcc3; }
.pw-links { display: flex; justify-content: center; gap: 18px; margin-top: 6px; }
.pw-links button {
  min-height: 56px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700; color: #b4bcc3; text-decoration: underline;
}

/* The questionnaire's own chrome must not follow the player onto the paywall:
   the 5-step progress bar is finished by then, and the shared "Далі" footer
   button duplicates the CTA while overlapping the legal copy. */
.onb-stage:has(.onb-paywall.active) .onb-progress { display: none; }
.onb-slide.onb-paywall.active ~ .onb-footer { display: none; }

/* ---- first-run accessibility setup slides ---------------------------- */
/* The sample line is the whole point of the slide: it must be the biggest
   thing on screen so the choice is judged, not guessed. */
.onb-a11y-sample{margin:0 0 22px;padding:18px 16px;border:2px dashed var(--onb-line);border-radius:16px;
  background:var(--onb-bg);color:var(--onb-ink);font-size:22px;line-height:1.4;font-weight:700}
.onb-a11y-note{margin:16px 0 0;color:var(--onb-muted);font-size:17px;line-height:1.45}
/* Own button — the shared footer belongs to the questionnaire. It sticks to the
   bottom of the slide: at 160% the content is taller than the screen, and a
   player who has just made the text huge must not have to discover scrolling to
   find the way forward. */
.onb-a11y .onb-options{margin-bottom:0}
.onb-a11y .onb-options{flex:0 0 auto}

/* Enlarged text shortens the stage, so decoration becomes the reason the answers
   are off-screen: at 130% the badge and the back button together cost more than
   two options. The eyebrow already names the step, so the badge goes first. */
html[data-text-scale="1.3"] .onb-back {width:48px;height:48px;font-size:26px;margin-bottom:4px}

/* Above 100% the heading is itself rendered at the size being chosen, so the
   sample box only repeats it — and it costs the options their place on screen.
   At 160% the same is true of the explanatory line: the two choices below it
   ("soft colours" / "black on white") say it better than a paragraph. */

/* 160% already makes each option ~88 physical px tall — far past the 48px floor.
   Trading that surplus back as height is what puts the whole choice on screen. */