/* ──────────────────────────────────────────────────────────────────
   Premium polish — iOS 26 Liquid Glass + Apple-snappy interactions
   Patch-file (additive). Safe to revert by deleting <link> from index.
   Author note: scoped to NOT touch ancestor of position:fixed children
   (filter/transform/backdrop-filter break coverage — known gotcha).
   ────────────────────────────────────────────────────────────────── */

:root{
  /* Apple "snappy" — release feels like a hardware key */
  --ease-snap: cubic-bezier(.32, .72, 0, 1);
  /* Apple "spring-back" — overshoot then settle */
  --ease-spring: cubic-bezier(.16, 1.36, .3, 1);
  /* Premium duration scale */
  --d-tap: 90ms;
  --d-snap: 220ms;
  --d-reveal: 480ms;

  /* Typography rhythm — 6-step scale (was scattered across ~20 values) */
  --fs-micro: 11px;   /* labels, eyebrow */
  --fs-caption: 13px; /* meta, secondary */
  --fs-body: 15px;    /* default */
  --fs-lead: 18px;    /* emphasized body */
  --fs-h3: 22px;      /* card titles */
  --fs-h2: 28px;      /* section heads */
  --fs-h1: clamp(34px, 8vw, 56px); /* hero */
}

/* ════════════════════════════════════════════════════════════════
   1. LIQUID GLASS v2 (iOS 26-style)
   ════════════════════════════════════════════════════════════════ */

/* Base liquid-glass surface — apply to cards, modals, sheets.
   NEVER apply to ancestor of position:fixed children. */
.lg{
  position:relative;
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(28px) saturate(180%) brightness(1.04);
  backdrop-filter:blur(28px) saturate(180%) brightness(1.04);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.18),
    inset 1px 0 0 rgba(255,255,255,.08),
    inset -1px 0 0 rgba(255,255,255,.05),
    0 24px 60px -16px rgba(0,0,0,.55),
    0 1px 2px rgba(0,0,0,.3);
  isolation:isolate;
  overflow:hidden;
}

/* Specular sheen — diagonal highlight, responds to hover/light-track JS */
.lg::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(
    var(--lg-angle, 125deg),
    rgba(255,255,255,.42) 0%,
    rgba(255,255,255,.06) 28%,
    rgba(255,255,255,0) 55%,
    rgba(255,255,255,0) 70%,
    rgba(255,255,255,.10) 100%
  );
  mix-blend-mode:overlay;
  opacity:var(--lg-sheen, .65);
  transition:opacity .35s var(--ease-snap), transform .55s var(--ease-snap);
  transform:translate3d(var(--lg-tx, 0), var(--lg-ty, 0), 0);
  z-index:1;
}

/* Chromatic edge fringe — Apple uses subtle teal/violet color-shift */
.lg::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  padding:1px;
  background:linear-gradient(135deg,
    rgba(91,165,169,.55) 0%,
    rgba(255,255,255,.08) 35%,
    rgba(255,255,255,0) 50%,
    rgba(255,255,255,.06) 65%,
    rgba(193,116,255,.32) 100%);
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.55;
  z-index:0;
}

/* Idle breathing — subtle opacity drift, not transform (safer for layouts) */
.lg-breathe{
  animation:lg-breathe 7s ease-in-out infinite;
}
@keyframes lg-breathe{
  0%, 100%{ filter:brightness(1) saturate(1) }
  50%     { filter:brightness(1.04) saturate(1.06) }
}

/* Hover: lift sheen, slight depth */
@media(hover:hover){
  .lg:hover{
    --lg-sheen: .85;
    --lg-tx: 6%;
    --lg-ty: -3%;
  }
}

/* Glass tint variants — teal-leaning (brand) and accent */
.lg-teal{
  background:linear-gradient(160deg, rgba(91,165,169,.16), rgba(11,44,48,.32));
  border-color:rgba(91,165,169,.28);
}
.lg-warm{
  background:linear-gradient(160deg, rgba(255,180,120,.12), rgba(40,20,15,.32));
  border-color:rgba(255,180,120,.22);
}

/* Slim variant — for chips, smaller pills */
.lg-slim{
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.1),
    0 4px 14px rgba(0,0,0,.25);
}

/* ════════════════════════════════════════════════════════════════
   2. APPLE-SNAPPY TAP FEEL
   Replace existing .97-scale tap with hardware-key release.
   Subtle haptic-feeling spring on release.
   ════════════════════════════════════════════════════════════════ */

.snap-tap, .btn-lg, .btn-gh, .opt, .qc, .paywall-btn, .ob-next-btn{
  transition-timing-function: var(--ease-snap);
  transition-duration: var(--d-snap);
  -webkit-tap-highlight-color: transparent;
}

.snap-tap:active,
.btn-lg:active,
.btn-gh:active,
.paywall-btn:active,
.ob-next-btn:active{
  transform: scale(.96) translateZ(0);
  transition-duration: var(--d-tap);
  transition-timing-function: var(--ease-snap);
}

/* Release: spring back with overshoot (Apple "boing") */
.snap-tap,
.btn-lg,
.btn-gh,
.paywall-btn,
.ob-next-btn{
  will-change: transform;
}

/* Ripple — softer, less obtrusive */
@keyframes snap-ripple{
  0%   { transform:scale(0); opacity:.55 }
  100% { transform:scale(2.6); opacity:0 }
}

/* ════════════════════════════════════════════════════════════════
   3. FOCUS-RING SYSTEM (a11y + premium look)
   ════════════════════════════════════════════════════════════════ */

/* Reset existing weak outlines */
button:focus, a:focus, input:focus, textarea:focus,
[role="button"]:focus, [tabindex]:focus{
  outline: none;
}

/* Visible only via keyboard navigation */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid rgba(91,165,169,.85);
  outline-offset: 3px;
  box-shadow:
    0 0 0 4px rgba(91,165,169,.18),
    0 0 24px rgba(91,165,169,.35);
  transition: outline-offset .15s var(--ease-snap), box-shadow .2s var(--ease-snap);
}

/* ════════════════════════════════════════════════════════════════
   4. SKELETON SCREENS
   For async loads — reviews, AI consult, sb-fetch.
   Perceived-speed boost vs empty space.
   ════════════════════════════════════════════════════════════════ */

.skl{
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: skl-shimmer 1.4s ease-in-out infinite;
  border-radius: 10px;
}
@keyframes skl-shimmer{
  0%   { background-position: -100% 0 }
  100% { background-position:  100% 0 }
}

.skl-line{ height: 14px; margin: 8px 0; border-radius: 6px }
.skl-line.w-30{ width: 30% }
.skl-line.w-50{ width: 50% }
.skl-line.w-70{ width: 70% }
.skl-line.w-90{ width: 90% }
.skl-line.tall{ height: 20px }
.skl-block{ height: 80px; border-radius: 14px }
.skl-circle{ width: 40px; height: 40px; border-radius: 50% }

.skl-review-card{
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 10px;
}

/* ════════════════════════════════════════════════════════════════
   5. RESULT REVEAL CHOREOGRAPHY
   Staged reveal of result page elements.
   ════════════════════════════════════════════════════════════════ */

.reveal-stage{
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--d-reveal) var(--ease-snap),
    transform var(--d-reveal) var(--ease-snap);
  will-change: opacity, transform;
}
.reveal-stage.in{
  opacity: 1;
  transform: translateY(0);
}
.reveal-stage.r-2{ transition-delay: 80ms }
.reveal-stage.r-3{ transition-delay: 160ms }
.reveal-stage.r-4{ transition-delay: 240ms }
.reveal-stage.r-5{ transition-delay: 320ms }
.reveal-stage.r-6{ transition-delay: 400ms }

/* Counter pulse — when a number animates 0→N */
@keyframes counter-pulse{
  0%   { transform: scale(1) }
  35%  { transform: scale(1.08); text-shadow: 0 0 18px rgba(91,165,169,.55) }
  100% { transform: scale(1); text-shadow: 0 0 0 transparent }
}
.counter-pulse{
  animation: counter-pulse .8s var(--ease-spring) both;
}

/* ════════════════════════════════════════════════════════════════
   6. MAGNETIC CTA (desktop only — JS adds .mag class)
   Hint-state: glow halo that follows cursor proximity.
   ════════════════════════════════════════════════════════════════ */

@media(hover:hover) and (pointer:fine){
  .mag{
    transition: transform .25s var(--ease-snap);
    will-change: transform;
  }
  .mag.is-near::after{
    content:'';
    position:absolute;
    inset:-8px;
    border-radius:inherit;
    background:radial-gradient(circle at var(--mx,50%) var(--my,50%),
      rgba(91,165,169,.32) 0%,
      transparent 60%);
    pointer-events:none;
    opacity:1;
    transition: opacity .3s var(--ease-snap);
  }
}

/* ════════════════════════════════════════════════════════════════
   7. REDUCED MOTION — respect user setting
   ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce){
  .lg,
  .lg::before,
  .lg::after,
  .lg-breathe,
  .skl,
  .reveal-stage,
  .counter-pulse,
  .mag{
    animation: none !important;
    transition: none !important;
  }
  .reveal-stage{ opacity:1; transform:none }
}

/* ════════════════════════════════════════════════════════════════
   8. PAYWALL SPECIFIC POLISH
   Stronger glass + hierarchy on the most commercially-critical surface.
   ════════════════════════════════════════════════════════════════ */

.paywall-card.lg-applied{
  background:linear-gradient(160deg, rgba(28,52,58,.78), rgba(8,22,26,.92));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 32px 80px -20px rgba(0,0,0,.7),
    0 0 0 1px rgba(91,165,169,.12),
    0 0 60px -10px rgba(91,165,169,.25);
}
.paywall-card.lg-applied::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(135deg,
    rgba(255,255,255,.32) 0%,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,0) 50%,
    rgba(255,255,255,.04) 75%,
    rgba(193,116,255,.10) 100%);
  mix-blend-mode:overlay;
  opacity:.7;
  z-index:0;
}
.paywall-card.lg-applied > *{ position:relative; z-index:1 }

.paywall-btn{
  background:linear-gradient(135deg, #5ba5a9 0%, #76c8cd 100%);
  color:#021317;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 8px 24px rgba(91,165,169,.4),
    0 2px 6px rgba(0,0,0,.3);
  transition: transform var(--d-snap) var(--ease-snap), box-shadow var(--d-snap) var(--ease-snap), filter .2s ease;
}
.paywall-btn:hover{
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 12px 32px rgba(91,165,169,.55),
    0 2px 8px rgba(0,0,0,.4);
}
.paywall-btn:active{
  transform: scale(.97);
}

/* ════════════════════════════════════════════════════════════════
   9. STICKY-PASSPORT + SUB-BADGE — Liquid Glass coat
   ════════════════════════════════════════════════════════════════ */

.sticky-passport.lg-applied,
.sub-badge.lg-applied{
  background:rgba(8,28,32,.62);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 -8px 28px rgba(0,0,0,.35);
}

/* ════════════════════════════════════════════════════════════════
   10. TYPOGRAPHY RHYTHM (Apple-level)
   Surgical overrides on top-impact surfaces — paywall, hero, modals,
   result page. Style.css untouched.

   Principles:
   - Display weights tightened: -0.02em on hero, -0.01em on titles
   - Body never below 13px (mobile readability)
   - Tabular-nums on prices and counters (digits don't shift width)
   - text-rendering: optimizeLegibility on body for kerning
   - Better fallback stack: SF on Apple, Inter elsewhere, no Helvetica
     Neue (broken on Windows)
   ════════════════════════════════════════════════════════════════ */

:root{
  --ff-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                'Segoe UI', system-ui, sans-serif;
  --ff-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
             'Segoe UI', system-ui, sans-serif;
  --ff-num: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
}

body{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03'; /* Inter stylistic sets — slashed-0 etc */
}

/* Hero / large display — tighten letter-spacing, weight 700 not 800
   (800 is heavy-handed on retina, 700 is Apple's choice on Big titles) */
.l-title,
.ob-title-xl,
.paywall-title,
.welcome-title,
.exit-title,
.sub-modal-title{
  font-family: var(--ff-display);
  letter-spacing: -0.022em;
  font-weight: 700;
  line-height: 1.08;
}

/* Card/section titles */
.ob-title,
.paywall-preview-title,
.s-head h1,
.s-head h2,
.testimonials-title,
.qc-title{
  font-family: var(--ff-display);
  letter-spacing: -0.014em;
  font-weight: 600;
}

/* Body / paragraph */
.ob-sub,
.paywall-sub,
.welcome-sub,
.qc-sub,
.tb-card-text,
.l-sub{
  font-family: var(--ff-body);
  letter-spacing: -0.003em;
  line-height: 1.5;
  font-weight: 400;
}

/* Eyebrow / micro labels — tracking opens up (Apple convention) */
.qc-badge,
.paywall-preview-title,
.tb-verified,
.l-prompt,
.ob-badge,
.paywall-timer-label{
  letter-spacing: 0.08em !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--fs-micro);
}

/* Prices & counters — tabular figures so digits don't shift width
   while live-counting (timer, fomo, paywall price) */
.paywall-price,
.paywall-timer-clock,
.fomo-clock,
.qc-prog-counter,
.result-score,
.result-percent,
[data-counter],
.pw-price,
.sub-price{
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv11' 1;
  letter-spacing: -0.01em;
}

/* Buttons — slightly tighter than body, weight up */
.btn-lg,
.btn-gh,
.paywall-btn,
.ob-next-btn,
.hook-concern-btn{
  font-family: var(--ff-display);
  letter-spacing: -0.005em;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   11. SCROLL PROGRESS — premium SaaS touch on result page
   1px teal bar at top showing how deep user scrolled into results.
   Pure CSS via @scroll-timeline (Chromium 115+) — falls back gracefully.
   ════════════════════════════════════════════════════════════════ */

#scroll-progress{
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #5ba5a9, #76c8cd 50%, #c174ff);
  z-index: 9990;
  transform-origin: 0 0;
  transform: scaleX(0);
  transition: transform .12s linear;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(91,165,169,.5);
  border-radius: 0 2px 2px 0;
}
#scroll-progress.active{ display: block }
@media (prefers-reduced-motion: reduce){
  #scroll-progress{ transition: none }
}

/* ════════════════════════════════════════════════════════════════
   12. EMPTY / ERROR STATES (reviews modal, AI consult)
   Premium-looking nothing instead of bare text.
   ════════════════════════════════════════════════════════════════ */

.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 48px 24px;
  text-align:center;
  gap: 14px;
}
.empty-state-icon{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(91,165,169,.28),
    rgba(91,165,169,.04) 70%);
  border: 1px solid rgba(91,165,169,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
}
.empty-state-icon::after{
  content:'';
  position:absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(91,165,169,.12);
  animation: empty-pulse 2.4s ease-in-out infinite;
}
@keyframes empty-pulse{
  0%, 100%{ transform:scale(.95); opacity:.5 }
  50%     { transform:scale(1.05); opacity:.9 }
}
.empty-state-title{
  font-size: var(--fs-lead);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.empty-state-sub{
  font-size: var(--fs-caption);
  color: rgba(255,255,255,.55);
  max-width: 280px;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════
   13. SELECTION COLOR — matches brand (small touch but premium-feel)
   ════════════════════════════════════════════════════════════════ */

::selection{
  background: rgba(91,165,169,.45);
  color: #fff;
  text-shadow: none;
}
::-moz-selection{
  background: rgba(91,165,169,.45);
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════
   14. SCROLLBAR (desktop) — thin, brand-tinted
   ════════════════════════════════════════════════════════════════ */

@media (hover:hover) and (pointer:fine){
  ::-webkit-scrollbar{ width: 8px; height: 8px }
  ::-webkit-scrollbar-track{ background: transparent }
  ::-webkit-scrollbar-thumb{
    background: rgba(91,165,169,.28);
    border-radius: 100px;
    transition: background .2s;
  }
  ::-webkit-scrollbar-thumb:hover{ background: rgba(91,165,169,.55) }
  *{ scrollbar-width: thin; scrollbar-color: rgba(91,165,169,.28) transparent }
}

/* ════════════════════════════════════════════════════════════════
   15. IMAGE LOAD — fade-in instead of pop
   Applied to large hero / morpho / avatar images so they don't snap in.
   ════════════════════════════════════════════════════════════════ */

img.fade-in{
  opacity: 0;
  transition: opacity .5s var(--ease-snap);
}
img.fade-in.loaded{ opacity: 1 }

/* ════════════════════════════════════════════════════════════════
   16. VIEW TRANSITIONS — opt-in for browsers that support it
   When ANZH swaps between screens (#screen-onboarding → #screen-quiz →
   #screen-result), use native View Transitions API for a smooth cross-fade.
   Falls back silently in unsupporting browsers.
   ════════════════════════════════════════════════════════════════ */

@supports (view-transition-name: anzh-screen){
  ::view-transition-old(root){
    animation: vt-out .35s var(--ease-snap) both;
  }
  ::view-transition-new(root){
    animation: vt-in .42s var(--ease-snap) both;
  }
  @keyframes vt-out{
    to{ opacity:0; transform: translateY(-6px) scale(.995) }
  }
  @keyframes vt-in{
    from{ opacity:0; transform: translateY(8px) scale(1.005) }
  }
}

/* ════════════════════════════════════════════════════════════════
   17. NARRATED PRE-RESULT REVEAL
   Full-screen overlay with breathing rings + cascading micro-copy
   beats. Plays once per session before the result page becomes visible.
   ════════════════════════════════════════════════════════════════ */

.narrated-reveal{
  position: fixed;
  inset: 0;
  z-index: 9997;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center,
    rgba(8,28,32,.92) 0%,
    rgba(2,12,15,.98) 60%,
    #020a0d 100%);
  opacity: 0;
  transition: opacity .42s var(--ease-snap);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.narrated-reveal.in{ opacity: 1 }
.narrated-reveal.out{ opacity: 0; pointer-events: none }

.nr-stage{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
  padding: 24px;
  max-width: 480px;
  width: 90%;
  text-align: center;
}

.nr-rings{
  position: relative;
  width: 120px;
  height: 120px;
}
.nr-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(91,165,169,.45);
  animation: nr-pulse 2.4s ease-in-out infinite;
}
.nr-ring-1{ animation-delay: 0s }
.nr-ring-2{ animation-delay: .8s; border-color: rgba(118,200,205,.4) }
.nr-ring-3{ animation-delay: 1.6s; border-color: rgba(193,116,255,.32) }
@keyframes nr-pulse{
  0%   { transform: scale(.4); opacity: 0 }
  20%  { opacity: 1 }
  100% { transform: scale(1.6); opacity: 0 }
}
.nr-core{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #76c8cd);
  box-shadow:
    0 0 24px rgba(91,165,169,.85),
    0 0 60px rgba(91,165,169,.55),
    inset 0 -2px 4px rgba(0,0,0,.3);
  animation: nr-core-breathe 2.8s ease-in-out infinite;
}
@keyframes nr-core-breathe{
  0%,100%{ transform: scale(1) }
  50%    { transform: scale(1.15) }
}

.nr-beats{
  position: relative;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.nr-beat{
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .35s var(--ease-snap),
    transform .35s var(--ease-snap);
  will-change: opacity, transform;
}
.nr-beat.in{ opacity: 1; transform: translateY(0) }
.nr-beat.gone{ opacity: 0; transform: translateY(-6px); color: rgba(255,255,255,.4) }

/* RTL adjust for Hebrew narrated beats */
[dir="rtl"] .nr-beat{ direction: rtl; text-align: right }

@media (prefers-reduced-motion: reduce){
  .narrated-reveal, .nr-ring, .nr-core, .nr-beat{
    animation: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   18. SHIMMER on the colored italic part of headlines
   Target: <em> inside .s-title / .l-title — "Skin Passport" in
   the "Собери свой Skin Passport" hero. A specular highlight glides
   across the teal text every ~5s. Subtle Apple/Linear-style.

   Cascade note: style.css line 978 has
     .l-title em,.s-title em{-webkit-text-fill-color:var(--tl)}
   This rule overrides it with a moving gradient + background-clip:text
   so the highlight actually sweeps the glyphs (not just an overlay).
   ════════════════════════════════════════════════════════════════ */

/* Layered backgrounds: highlight gradient ON TOP of solid teal.
   When the highlight is off-screen the solid teal layer keeps the
   text fully visible. Previous version used a single gradient whose
   background-position moved off the element, leaving the text-fill
   transparent area with NO background → text disappeared.

   Mobile-first: em is inline (wraps naturally). Desktop adds the
   inline-block + padding-right trick for italic overhang on one-line
   layouts where wrap isn't an option. */
.s-title em,
.l-title em{
  background-image:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 40%,
      rgba(255,255,255,.55) 47%,
      rgba(255,255,255,.85) 50%,
      rgba(255,255,255,.55) 53%,
      transparent 60%,
      transparent 100%
    ),
    linear-gradient(#6db8bc, #6db8bc);
  background-size: 220% 100%, 100% 100%;
  background-position: 220% 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer-em 5.4s cubic-bezier(.4, 0, .2, 1) infinite;
  animation-delay: 1.2s;
  will-change: background-position;
}
@keyframes shimmer-em{
  0%      { background-position: 220% 0, 0 0 }
  18%     { background-position: 220% 0, 0 0 }
  /* Sweep window: 18% → 50% of cycle (~1.7s of glide) */
  50%     { background-position: -120% 0, 0 0 }
  100%    { background-position: -120% 0, 0 0 }
}

/* Hover speeds the next sweep */
@media (hover: hover){
  .s-title:hover em,
  .l-title:hover em{
    animation-duration: 2.4s;
    animation-delay: 0s;
  }
}

/* Desktop only — has room, add italic-overhang padding without
   killing wrap on mobile/tablet. 768px is the standard tablet upper bound. */
@media (min-width: 768px){
  .s-title em,
  .l-title em{
    display: inline-block;
    padding-right: 0.18em;     /* slightly more breathing room */
    margin-right: -0.09em;
  }
}

/* Phone + small tablet — force wrap onto its own line so italic glyph
   never touches viewport edge. Lang screen and start screen both use
   "Skin <em>X</em>" patterns where this reads beautifully as a
   wordmark stacked on a second line. */
@media (max-width: 767px){
  .s-title em,
  .l-title em{
    display: block;
    margin-top: 4px;
    padding-right: 0;
    /* Slight bump in size so wordmark feels intentional on its own line */
    font-size: 1.05em;
  }
  /* Center each line within the title */
  #lang-s .l-title,
  #start-s .s-title{
    text-align: center;
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (prefers-reduced-motion: reduce){
  .s-title em,
  .l-title em{
    animation: none !important;
    background-image: none !important;
    -webkit-text-fill-color: #6db8bc !important;
    color: #6db8bc !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   22. iOS 26 / iPadOS 26 / macOS Liquid Glass — applied to the
   ACTUAL surfaces users look at: quiz cards, Skin Profile banner,
   bundle card, passport progress steps and rows.

   Apple's Liquid Glass recipe (visible on apple.com/os/ios):
   - Heavy backdrop blur + saturate + brightness boost: glass
     LUMINATES what's behind it instead of just dimming it
   - Very low white-tint base (5-8%): you can almost see through
   - Bright top-edge highlight (~40% white inset): catches light
     like a chrome rim
   - Strong bottom-edge dark inset: depth pooling
   - Big soft drop shadow (no harsh cutoff): elevation
   - Subtle teal→violet chromatic edge: signature shimmer (we add
     via colored shadows because the cards keep overflow:visible
     so absolutely-positioned badges still escape)

   Specificity: !important on background / box-shadow only where
   style.css rules win without it (line 254 has bare .qc{}).
   ════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   Unified glass token — one consistent substrate language across
   ALL interactive cards / buttons. Edit values here, change everywhere.
   ──────────────────────────────────────────────────────────────── */
:root{
  /* Base glass */
  --glass-bg-top:    rgba(255,255,255,.07);
  --glass-bg-bot:    rgba(255,255,255,.025);
  --glass-border:    rgba(255,255,255,.13);
  --glass-blur:      28px;
  --glass-sat:       180%;
  --glass-bright:    1.06;
  /* Edge highlights */
  --glass-rim-top:   rgba(255,255,255,.28);
  --glass-rim-bot:   rgba(0,0,0,.20);
  /* Drop shadow */
  --glass-drop-1:    0 18px 44px -16px rgba(0,0,0,.5);
  --glass-drop-2:    0 4px 12px -4px rgba(0,0,0,.3);
  /* Hover state — teal-leaning */
  --glass-h-bg-top:  rgba(91,165,169,.12);
  --glass-h-bg-bot:  rgba(255,255,255,.03);
  --glass-h-border:  rgba(91,165,169,.55);
  --glass-h-glow:    0 0 32px -8px rgba(91,165,169,.35);
  /* Selected state */
  --glass-sel-bg-top:rgba(91,165,169,.20);
  --glass-sel-bg-bot:rgba(91,165,169,.06);
  --glass-sel-border:rgba(91,165,169,.85);
  --glass-sel-ring:  0 0 0 3px rgba(91,165,169,.18);
  --glass-sel-glow:  0 0 36px -10px rgba(91,165,169,.45);
  /* Motion — smooth, NO overshoot/back easing */
  --glass-trans:     transform .28s cubic-bezier(.32,.72,0,1),
                     background-color .25s ease,
                     border-color .22s ease,
                     box-shadow .32s cubic-bezier(.32,.72,0,1);
}

/* ────────────────────────────────────────────────────────────────
   Universal glass class — apply to any card/button to inherit the
   substrate. Selectors below adopt this via the same property stack.
   ──────────────────────────────────────────────────────────────── */

#start-s .qc{
  background:
    linear-gradient(180deg, var(--glass-bg-top) 0%, var(--glass-bg-bot) 100%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)) !important;
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    var(--glass-drop-1),
    var(--glass-drop-2),
    inset 0 1px 0 var(--glass-rim-top),
    inset 0 -1px 0 var(--glass-rim-bot) !important;
  /* CRITICAL — override existing ease-out-back (overshoot) transition
     that was causing the "slide" artifact on hover. Pure smooth easing
     keeps the inset highlights from drifting past target. */
  transition: var(--glass-trans) !important;
  will-change: transform;
  isolation: isolate;
}

/* ::before specular — gentle 135deg highlight, no mix-blend-mode
   (overlay was tinting the dark teal background yellow-green) */
#start-s .qc::before{
  background: linear-gradient(135deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.03) 25%,
    transparent 50%,
    transparent 100%) !important;
  opacity: 1;
  transition: opacity .25s ease !important;
}

/* Hover — translateY only, NO scale. Scale + back-easing was the slide
   bug. Lift comes from the box-shadow change, not transform expansion. */
@media (hover: hover){
  #start-s .qc:hover{
    background:
      linear-gradient(180deg, var(--glass-h-bg-top) 0%, var(--glass-h-bg-bot) 100%) !important;
    border-color: var(--glass-h-border) !important;
    transform: translateY(-3px) !important;
    box-shadow:
      0 24px 56px -18px rgba(0,0,0,.6),
      0 8px 18px -6px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.38),
      inset 0 -1px 0 rgba(0,0,0,.20),
      var(--glass-h-glow) !important;
  }
}

/* Active press — quick scale-down for tactile feedback (no Y-shift,
   no back-easing) */
#start-s .qc:active{
  transform: scale(.97) !important;
  transition-duration: 90ms !important;
}

/* Selected — clear teal accent ring */
#start-s .qc.sel{
  background:
    linear-gradient(180deg, var(--glass-sel-bg-top) 0%, var(--glass-sel-bg-bot) 100%) !important;
  border: 1.5px solid var(--glass-sel-border) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 22px 50px -16px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.22),
    var(--glass-sel-ring),
    var(--glass-sel-glow) !important;
}

/* ────────────────────────────────────────────────────────────────
   Scale the same glass language to other repeating substrates:
   .opt          — quiz answer options
   .hook-concern-btn — landing concern picker buttons
   .hook-benefit — landing benefit chips
   .doc-bar      — doctor credential bar
   .hook-doc     — full doctor card
   Each gets the same substrate; states (hover/active) follow same
   smooth easing — no overshoots, no slides.
   ──────────────────────────────────────────────────────────────── */

.opt{
  background:
    linear-gradient(180deg, var(--glass-bg-top) 0%, var(--glass-bg-bot) 100%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)) !important;
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    0 12px 28px -12px rgba(0,0,0,.4),
    inset 0 1px 0 var(--glass-rim-top),
    inset 0 -1px 0 var(--glass-rim-bot) !important;
  transition: var(--glass-trans) !important;
  /* NO will-change here — would create a stacking context that
     interferes with .opt-ripple's absolutely-positioned scale anim,
     which caused selected options to balloon to 800px+ tall. */
}
@media (hover: hover){
  .opt:hover{
    background:
      linear-gradient(180deg, var(--glass-h-bg-top) 0%, var(--glass-h-bg-bot) 100%) !important;
    border-color: var(--glass-h-border) !important;
    /* Smooth X-shift, NO scale (the old translateX(4px) scale(1.01) was overshooting via ease-out-back) */
    transform: translateX(4px) !important;
    box-shadow:
      0 16px 36px -14px rgba(0,0,0,.5),
      inset 0 1px 0 rgba(255,255,255,.38),
      inset 0 -1px 0 rgba(0,0,0,.20),
      var(--glass-h-glow) !important;
  }
}
.opt:active{
  transform: scale(.98) !important;
  transition-duration: 90ms !important;
}
.opt.sel{
  background:
    linear-gradient(180deg, var(--glass-sel-bg-top) 0%, var(--glass-sel-bg-bot) 100%) !important;
  border: 1.5px solid var(--glass-sel-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.22),
    var(--glass-sel-ring),
    var(--glass-sel-glow) !important;
}

/* Landing concern buttons + benefits — smaller surfaces, lighter touch */
.hook-concern-btn,
.hook-benefit{
  background:
    linear-gradient(180deg, var(--glass-bg-top) 0%, var(--glass-bg-bot) 100%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) brightness(1.04) !important;
          backdrop-filter: blur(22px) saturate(170%) brightness(1.04) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    0 8px 22px -10px rgba(0,0,0,.4),
    inset 0 1px 0 var(--glass-rim-top),
    inset 0 -1px 0 var(--glass-rim-bot) !important;
  transition: var(--glass-trans) !important;
  will-change: transform;
}
@media (hover: hover){
  .hook-concern-btn:hover{
    background:
      linear-gradient(180deg, var(--glass-h-bg-top) 0%, var(--glass-h-bg-bot) 100%) !important;
    border-color: var(--glass-h-border) !important;
    transform: translateY(-2px) !important;
    box-shadow:
      0 14px 30px -12px rgba(0,0,0,.5),
      inset 0 1px 0 rgba(255,255,255,.35),
      var(--glass-h-glow) !important;
  }
}

/* Doctor card + doc-bar — credentials surfaces */
.doc-bar,
#hook-doc{
  background:
    linear-gradient(180deg, var(--glass-bg-top) 0%, var(--glass-bg-bot) 100%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)) !important;
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    0 12px 28px -12px rgba(0,0,0,.4),
    inset 0 1px 0 var(--glass-rim-top),
    inset 0 -1px 0 var(--glass-rim-bot) !important;
}

/* ────────────────────────────────────────────────────────────────
   Brand-tinted variants of the glass language so the .qc-profile-
   banner (teal), .bc (gold), and .sph-* surfaces feel like family
   instead of standing apart. Variant tokens preserve identity color
   while inheriting the same recipe (blur/sat/bright + rim insets +
   drop shadow stack).
   ──────────────────────────────────────────────────────────────── */

/* Teal-tinted glass — Skin Profile banner. The hero free-tier card
   needs visual weight without losing teal identity. */
#start-s .qc-profile-banner{
  background:
    linear-gradient(180deg,
      rgba(91,165,169,.20) 0%,
      rgba(91,165,169,.07) 100%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)) !important;
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)) !important;
  border: 1px solid rgba(91,165,169,.40) !important;
  box-shadow:
    var(--glass-drop-1),
    var(--glass-drop-2),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 0 32px -10px rgba(91,165,169,.30) !important;
  transition: var(--glass-trans) !important;
  will-change: transform;
}
@media (hover: hover){
  #start-s .qc-profile-banner:hover{
    background:
      linear-gradient(180deg,
        rgba(91,165,169,.28) 0%,
        rgba(91,165,169,.10) 100%) !important;
    border-color: rgba(118,200,205,.65) !important;
    transform: translateY(-2px) !important;
    box-shadow:
      0 24px 56px -18px rgba(0,0,0,.6),
      inset 0 1px 0 rgba(255,255,255,.40),
      inset 0 -1px 0 rgba(0,0,0,.20),
      0 0 50px -10px rgba(91,165,169,.45) !important;
  }
}
#start-s .qc-profile-banner:active{
  transform: scale(.985) !important;
  transition-duration: 90ms !important;
}

/* Gold-tinted glass — Bundle "Все 6 тестов" premium upsell.
   Same recipe with gold (--accent-rgb 196,168,130) brand color. */
#start-s .bc{
  background:
    linear-gradient(180deg,
      rgba(196,168,130,.18) 0%,
      rgba(196,168,130,.05) 100%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)) !important;
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)) !important;
  border: 1px solid rgba(196,168,130,.42) !important;
  box-shadow:
    var(--glass-drop-1),
    var(--glass-drop-2),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 0 28px -8px rgba(196,168,130,.28) !important;
  transition: var(--glass-trans) !important;
  will-change: transform;
}
@media (hover: hover){
  #start-s .bc:hover{
    background:
      linear-gradient(180deg,
        rgba(196,168,130,.26) 0%,
        rgba(196,168,130,.08) 100%) !important;
    border-color: rgba(226,203,168,.70) !important;
    transform: translateY(-2px) !important;
    box-shadow:
      0 24px 56px -18px rgba(0,0,0,.6),
      inset 0 1px 0 rgba(255,255,255,.40),
      inset 0 -1px 0 rgba(0,0,0,.20),
      0 0 50px -10px rgba(196,168,130,.42) !important;
  }
}
#start-s .bc:active{
  transform: scale(.985) !important;
  transition-duration: 90ms !important;
}

/* Skin Passport top container + progress steps — gold-leaning glass
   to keep the brand passport identity but at lower intensity than the
   bundle (it's a status widget, not a buy CTA). */
.sticky-passport,
.sticky-passport.lg-applied,
#passport-progress-bar{
  background:
    linear-gradient(180deg,
      rgba(196,168,130,.10) 0%,
      rgba(8,28,32,.62) 100%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)) !important;
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)) !important;
  border: 1px solid rgba(196,168,130,.28) !important;
  box-shadow:
    var(--glass-drop-1),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.18) !important;
}
.sph-step{
  background:
    linear-gradient(180deg,
      var(--glass-bg-top) 0%,
      var(--glass-bg-bot) 100%) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    inset 0 1px 0 var(--glass-rim-top),
    inset 0 -1px 0 var(--glass-rim-bot) !important;
  transition: var(--glass-trans) !important;
}
.sph-step.sph-step-done{
  background:
    linear-gradient(180deg,
      rgba(91,165,169,.22) 0%,
      rgba(91,165,169,.05) 100%) !important;
  border-color: rgba(91,165,169,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 18px -6px rgba(91,165,169,.45) !important;
}
.sph-step.sph-step-next{
  background:
    linear-gradient(180deg,
      rgba(196,168,130,.22) 0%,
      rgba(196,168,130,.05) 100%) !important;
  border-color: rgba(196,168,130,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 18px -6px rgba(196,168,130,.55) !important;
}

/* ────────────────────────────────────────────────────────────────
   RTL fix — .opt:hover translateX direction reversed for Hebrew
   so the hover lift moves AWAY from text-start instead of into it.
   ──────────────────────────────────────────────────────────────── */

[dir="rtl"] .opt:hover{
  transform: translateX(-4px) !important;
}
[dir="rtl"] .opt:active{
  transform: scale(.98) !important;
}

/* ────────────────────────────────────────────────────────────────
   Smooth background swap on hover via ::before opacity-fade.
   background-image:linear-gradient(...) doesn't interpolate between
   states in standard CSS — the bg snaps instantly. To get smooth
   color transition between idle and hover, layer a teal-tinted
   pseudo-element on top and fade IT in/out.
   ──────────────────────────────────────────────────────────────── */

/* Smooth bg fade on .qc ONLY — .opt is excluded because style.css
   already uses .opt.sel::after for a 3px left-marker line, and my
   ::after override + child position:relative rule broke .opt-ripple's
   absolutely-positioned scaling animation, making selected .opt
   stretch to ~800px tall on iPad/desktop. */
#start-s .qc::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg,
      var(--glass-h-bg-top) 0%,
      var(--glass-h-bg-bot) 100%);
  opacity: 0;
  transition: opacity .28s var(--ease-snap, ease-out);
  pointer-events: none;
  z-index: 0;
}
@media (hover: hover){
  #start-s .qc:hover::after{ opacity: 1; }
}
/* Content stays above the ::after via z-index on direct children.
   Scoped to .qc only — .opt rule was removed (see comment above). */
#start-s .qc > *{ position: relative; z-index: 1 }

/* Reduced motion — kill all transforms and transitions */
@media (prefers-reduced-motion: reduce){
  #start-s .qc,
  #start-s .qc:hover,
  #start-s .qc.sel,
  #start-s .qc-profile-banner,
  #start-s .qc-profile-banner:hover,
  #start-s .bc,
  #start-s .bc:hover,
  .opt, .opt:hover, .opt.sel,
  .hook-concern-btn, .hook-concern-btn:hover,
  .sph-step, .sph-step.sph-step-done, .sph-step.sph-step-next{
    transition: none !important;
    transform: none !important;
  }
  #start-s .qc::after{ display: none }
}

/* ════════════════════════════════════════════════════════════════
   23. Cleaner done-card UI — filled progress bar is enough
   Was: two loud green elements floating above the card
     • .qc-done-check  — green circle with white ✓ at top-right
     • .qc-owned-badge — green gradient pill "ПРОЙДЕН" at top-left
   Roch's note: the filled 100% progress bar already tells the story.
   Keep the badge for status (it carries i18n — "ПРОЙДЕН/PASSED/...")
   but relocate it OPPOSITE the 100% counter on the same row as the
   progress bar, and quiet its visual loudness.
   ════════════════════════════════════════════════════════════════ */

/* Kill the floating ✓ circle */
.qc-done .qc-done-check{
  display: none !important;
}

/* Relocate the i18n badge from top-left floating pill into the
   progress row, on the opposite side from "100%" counter. */
.qc-done .qc-owned-badge{
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  bottom: 28px !important;     /* ~ aligned with the counter row above the bar */
  right: 14px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  padding: 3px 9px !important;
  /* Quiet, brand-green chip instead of loud green-gradient pill */
  background: rgba(46, 200, 122, .14) !important;
  border: 1px solid rgba(46, 200, 122, .38) !important;
  color: #3be89d !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    0 0 14px -4px rgba(46, 200, 122, .35) !important;
  z-index: 4;
}

[dir="rtl"] .qc-done .qc-owned-badge{
  right: auto !important;
  left: 14px !important;
}

/* Done-card overall colour stays in style.css (line 1211) — teal-tint
   bg + 100% green progress bar. The badge now anchors the right side of
   the progress row, "100%" the left, balanced. */

/* ════════════════════════════════════════════════════════════════
   Kill the gold decorative strips around hero photo on slide-0
   (client-fixes.js:1016 added ::after horizontal under photo,
    client-fixes.js:1054 added ::before vertical right of photo).
   Roch's call — visual noise, not needed.
   ════════════════════════════════════════════════════════════════ */
#ob-slide-0 .ob-hero::after,
#ob-slide-0 .ob-hero::before{
  display: none !important;
  content: none !important;
}

/* ════════════════════════════════════════════════════════════════
   QA: tap-target compliance
   .morpho-pvw-btn was 28×28 (below iOS 44×44 minimum). Visual size
   stays the same; transparent ::before extends the hit area to 44×44
   so taps land reliably without resizing the icon.
   ════════════════════════════════════════════════════════════════ */
.morpho-pvw-btn{ position: relative }
.morpho-pvw-btn::before{
  content: '';
  position: absolute;
  inset: -8px;
  /* keeps total hit area ≥44×44 */
}

/* ════════════════════════════════════════════════════════════════
   24. AVIF-first backgrounds via image-set()
   style.css declares lang-bg.jpg as background-image in 3 places
   (splash, ambient, load screen). Override each with AVIF first +
   JPG fallback so modern browsers (Safari 17+, Chrome 113+, FF 113+)
   pull the 31KB AVIF instead of the 112KB JPG. Older browsers fall
   through to JPG via the image-set type-detection cascade.
   ════════════════════════════════════════════════════════════════ */

#splash-s .splash-bg,
#load-s .load-bg{
  background-image: url('lang-bg.jpg') !important;        /* legacy fallback */
  background-image: image-set(
    url('lang-bg.avif') type('image/avif'),
    url('lang-bg.jpg')  type('image/jpeg')
  ) !important;
  background-image: -webkit-image-set(
    url('lang-bg.avif') type('image/avif'),
    url('lang-bg.jpg')  type('image/jpeg')
  ) !important;
}

/* Doctor avatar references — anywhere style.css uses doctor-avatar.jpg */
.doc-bar-avatar,
#hook-doc img[src*="doctor-avatar"]{
  /* JS swaps src in pdf-fix.js to .avif if supported; CSS fallback below */
}

/* ════════════════════════════════════════════════════════════════
   19. KILL THE DUPLICATE REVIEWS BLOCK
   Two review systems were shipping in parallel:
   • .testimonials-block (top carousel, Supabase-backed via reviews-modal.js)
   • #reviews-section (legacy _renderReviews() in app.js, localStorage-backed)
   The lower one duplicates the functionality with different fake names
   and a separate Add-review modal. Hiding it eliminates the duplicate
   "Оставить отзыв" button and the stacked second list visible after the
   "Начать тест" CTA. The single source of truth is now the carousel.
   ════════════════════════════════════════════════════════════════ */

#reviews-section{ display: none !important }

/* ════════════════════════════════════════════════════════════════
   20. REORDER FLOW so CTA sits right under quiz cards
   JS moves .testimonials-block to AFTER #start-btn so the user goes:
   cards → bundle → CTA (when selected) → social proof. Smooth glide
   on the move keeps the layout from snapping.
   ════════════════════════════════════════════════════════════════ */

#start-s .testimonials-block{
  margin-top: 28px;
  transition: opacity .3s var(--ease-snap);
}

/* ════════════════════════════════════════════════════════════════
   21. "ВСЕ ОТЗЫВЫ →" turns from drab text-link into a real button
   reviews-modal.js v3 ships it as 12px tan text — looks like accidental
   copy, not interactive. Promote to a centered glass pill with a clear
   tappable surface, brand-teal border, hover lift, animated arrow.
   Hard override of reviews-modal.js inline styles via !important.
   ════════════════════════════════════════════════════════════════ */

.tb-all-link{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 22px auto 8px !important;
  padding: 12px 26px !important;
  font-family: var(--ff-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border: 1px solid rgba(91, 165, 169, .42) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg,
      rgba(91, 165, 169, .18) 0%,
      rgba(91, 165, 169, .08) 100%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 6px 20px -6px rgba(91, 165, 169, .35),
    0 1px 2px rgba(0, 0, 0, .25) !important;
  cursor: pointer !important;
  transition:
    transform .22s var(--ease-snap),
    box-shadow .22s var(--ease-snap),
    border-color .22s var(--ease-snap),
    background .22s var(--ease-snap) !important;
  position: relative;
  /* center within parent .start-s (block layout) */
  width: auto;
  align-self: center;
  /* Strip the bullet/underline that some browsers add to <a> */
  text-align: center;
}

/* Wrap .tb-all-link in a centered row — display:inline-flex with auto
   margins on a sibling-only positioned element doesn't always center on
   block parents. Force a wrapping flex container via :has-style sibling
   hack — but cleaner: just make it block-level inline-flex centered. */
.tb-all-link::before{
  /* Tiny sparkle dot, gives the button visual gravity */
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #c8f0f4, #5ba5a9);
  box-shadow: 0 0 8px rgba(91, 165, 169, .8);
}

.tb-all-link:hover,
.tb-all-link:focus-visible{
  color: #ffffff !important;
  border-color: rgba(118, 200, 205, .75) !important;
  background:
    linear-gradient(180deg,
      rgba(91, 165, 169, .28) 0%,
      rgba(91, 165, 169, .14) 100%) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 10px 28px -8px rgba(91, 165, 169, .55),
    0 2px 6px rgba(0, 0, 0, .3) !important;
}
.tb-all-link:active{
  transform: scale(.97);
  transition-duration: .09s !important;
}

/* Center the inline-flex pill inside its block parent without changing
   the existing reviews-modal.js display:block declaration cascade. */
.tb-all-link{
  /* override the display:block from reviews-modal.js */
}
#start-s .tb-all-link,
.testimonials-block + .tb-all-link{
  display: flex !important;
  width: fit-content;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (prefers-reduced-motion: reduce){
  .tb-all-link{ transition: none !important }
}