:root{
  --t:#2f767a;--tl:#6db8bc;--td:rgba(var(--t-rgb),.3);--tm:#3a8f93;
  --t-rgb:47,118,122;--tl-rgb:91,165,169;--gd-rgb:196,168,130;--accent-rgb:196,160,96;
  --dk:#0a2225;--dk2:#0d353a;--dk3:#071e22;
  --wh:#ffffff;--iv:#f0ece4;
  --gd:#c4a882;--gdl:#e2cba8;--gdd:#a08060;
  --accent:#e0a030;--accent-l:#f0be50;--accent-d:#c88820;--accent-rgb:224,160,48;
  --mu:rgba(255,255,255,.7);--mu2:rgba(255,255,255,.4);
  --gb:rgba(255,255,255,.07);--gbh:rgba(255,255,255,.12);
  --gbr:rgba(255,255,255,.13);--gbrh:rgba(255,255,255,.24);
  --sh:0 8px 32px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.2);
  --shg:0 0 40px rgba(var(--t-rgb),.22);
  --r:20px;--rs:14px;--rp:50px;
  /* Type scale — bumped for readability */
  --fs-xs:12px;--fs-sm:13px;--fs-base:15px;--fs-md:17px;--fs-lg:21px;--fs-xl:28px;--fs-2xl:36px;--fs-3xl:48px;
  /* Z-index scale */
  --z-ambient:0;--z-app:2;--z-overlay:100;--z-modal:500;--z-toast:999;
  /* Timing functions */
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-out-back:cubic-bezier(.34,1.56,.64,1);
  --ease-spring:cubic-bezier(.175,.885,.32,1.275);

  /* ── SEMANTIC DESIGN TOKENS ── */
  /* Surfaces */
  --color-bg-main:var(--dk);
  --color-bg-card:var(--gb);
  --color-bg-card-hover:var(--gbh);
  --color-border-subtle:var(--gbr);
  --color-border-hover:var(--gbrh);
  /* Text */
  --color-text-main:var(--wh);
  --color-text-muted:var(--mu);
  --color-text-faint:var(--mu2);
  /* Accents */
  --color-accent-primary:var(--accent);
  --color-accent-teal:var(--t);
  --color-accent-teal-light:var(--tl);
  --color-accent-gold:var(--gd);
  --color-accent-gold-light:var(--gdl);
  /* Radii */
  --radius-sm:10px;
  --radius-md:var(--rs);
  --radius-lg:var(--r);
  --radius-btn:var(--rp);
  /* Spacing scale */
  --space-xs:6px;
  --space-sm:10px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:36px;
  /* Transitions */
  --transition-base:all .25s var(--ease-out-expo);
  --transition-fast:all .15s ease;
  --transition-slow:all .4s var(--ease-out-expo);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;overflow-x:hidden;overscroll-behavior-x:none}
body{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;background:var(--dk);color:var(--wh);min-height:100vh;min-height:100dvh;overflow-x:hidden;overscroll-behavior-x:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;touch-action:pan-y;position:relative;width:100%}
/* ① Noise texture — premium surface feel */
body::after{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.038;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
/* Fixed notch cover — frosted glass over Dynamic Island/camera cutout while scrolling */
body::before{content:'';position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:rgba(6,20,24,0.6);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);z-index:200;pointer-events:none}
/* ── Splash screen ──────────────────────────────── */
#splash-s{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:#000}
#splash-s .splash-bg{position:absolute;inset:0;background:url('lang-bg.jpg') center/cover no-repeat;z-index:0}
#splash-s>*:not(.splash-bg){position:relative;z-index:1}
/* Exit transition */
#splash-s.exit .splash-bg{animation:splashBgZoom .9s cubic-bezier(.16,1,.3,1) forwards}
#splash-s.exit .splash-ring-wrap{animation:splashRingExit .5s ease forwards}
#splash-s.exit .splash-brand{animation:splashContentExit .4s .05s ease forwards}
#splash-s.exit .splash-sub{animation:splashContentExit .4s .1s ease forwards}
@keyframes splashBgZoom{to{transform:scale(1.15);opacity:0}}
@keyframes splashRingExit{to{transform:scale(1.8);opacity:0}}
@keyframes splashContentExit{to{transform:translateY(-20px);opacity:0}}
#splash-s.gone{display:none}
/* Ring */
.splash-ring-wrap{position:relative;width:130px;height:130px;margin-bottom:24px}
.splash-ring{width:100%;height:100%;transform:rotate(-90deg)}
.splash-ring-track{fill:none;stroke:rgba(255,255,255,.12);stroke-width:2.5}
.splash-ring-fill{fill:none;stroke:url(#splash-grad);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:339.292;stroke-dashoffset:339.292;animation:splashFill 2s cubic-bezier(.4,0,.2,1) forwards}
@keyframes splashFill{to{stroke-dashoffset:0}}
/* Logo reveal inside ring — opacity:1 baseline so it's visible even if
   animations fail (iOS Reduce Motion, slow CSS load, etc.). The scale
   animation still gives a subtle entrance. */
.splash-logo-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:1;transform:scale(1);animation:splashLogoIn .8s .3s cubic-bezier(.16,1,.3,1)}
@keyframes splashLogoIn{from{opacity:.4;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.splash-logo{width:52px;height:auto;color:#fff;filter:drop-shadow(0 0 24px rgba(var(--tl-rgb),.6)) drop-shadow(0 0 60px rgba(var(--tl-rgb),.25))}
/* Ring glow pulse after fill completes */
.splash-ring-wrap::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:1.5px solid rgba(var(--tl-rgb),.3);opacity:0;animation:splashRingGlow .8s 2s ease forwards}
@keyframes splashRingGlow{0%{opacity:0;transform:scale(.95)}50%{opacity:1}100%{opacity:0;transform:scale(1.12)}}
/* Text — opacity:1 baseline, animation purely additive */
.splash-brand{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:28px;font-weight:800;letter-spacing:.12em;color:#fff;opacity:1;transform:translateY(0);animation:splashTextIn .6s .7s ease;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.splash-sub{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;font-weight:500;letter-spacing:.15em;color:rgba(255,255,255,.6);text-transform:uppercase;margin-top:6px;opacity:1;transform:translateY(0);animation:splashTextIn .6s .9s ease;text-shadow:0 1px 10px rgba(0,0,0,.5)}
@keyframes splashTextIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* Eliminate 300ms tap delay on iOS Safari for all interactive elements */
button,[onclick],[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* Prevent accidental text selection when tapping UI elements */
button,.qc,.opt,.ob-slide,.ob-next-btn,.ob-skip-btn,.pw-tier,.sph-step,.result-ai-chip{user-select:none;-webkit-user-select:none}
/* Focus states for accessibility (Safari fallback) */
button:focus,a:focus{outline:2px solid var(--tl);outline-offset:3px}
@supports selector(:focus-visible){button:focus,a:focus{outline:none}}
:focus-visible{outline:2px solid var(--tl);outline-offset:2px;border-radius:4px}
button:focus-visible,a:focus-visible{outline:2px solid var(--tl);outline-offset:3px}
::selection{background:rgba(var(--t-rgb),.4);color:#fff}

/* ── Hook concern buttons ── */
.hook-concern-btn{box-shadow:0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.06)}
.hook-concern-btn:hover{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.25)!important;transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08)}
.hook-concern-btn:active{transform:scale(.95)!important;background:rgba(var(--accent-rgb),.15)!important;border-color:var(--accent)!important}
.hook-btn-arrow{position:absolute;top:8px;right:10px;font-size:11px;color:rgba(255,255,255,.25);transition:all .2s}
.hook-concern-btn:hover .hook-btn-arrow{color:rgba(255,255,255,.5);right:8px}
@keyframes hookHintPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ── AMBIENT ── */
.amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.5;animation:ofl 20s ease-in-out infinite;will-change:transform}
.o1{width:min(600px,80vw);height:min(600px,80vw);background:radial-gradient(circle,var(--t) 0%,rgba(var(--t-rgb),.3) 40%,transparent 70%);top:-180px;right:-120px;animation-duration:22s}
.o2{width:min(420px,60vw);height:min(420px,60vw);background:radial-gradient(circle,#1a5558 0%,rgba(26,85,88,.25) 40%,transparent 70%);bottom:-120px;left:-100px;animation-duration:28s;animation-delay:-10s}
.o3{width:min(300px,45vw);height:min(300px,45vw);background:radial-gradient(circle,#c4a882 0%,rgba(var(--gd-rgb),.2) 40%,transparent 70%);top:45%;left:55%;animation-duration:16s;animation-delay:-6s;opacity:.22}
@keyframes ofl{0%,100%{transform:translate(0,0) scale(1) rotate(0deg)}33%{transform:translate(32px,-40px) scale(1.08) rotate(2deg)}66%{transform:translate(-22px,26px) scale(.92) rotate(-1deg)}}

/* ── GLASS ── */
.gl{background:var(--gb);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--gbr);border-radius:var(--r);box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.09)}
.gl-t{background:rgba(var(--t-rgb),.14);backdrop-filter:blur(30px) saturate(200%);-webkit-backdrop-filter:blur(30px) saturate(200%);border:1px solid rgba(var(--t-rgb),.38);border-radius:var(--r);box-shadow:var(--sh),var(--shg),inset 0 1px 0 rgba(255,255,255,.11)}
.gl-g{background:rgba(var(--gd-rgb),.1);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid rgba(var(--gd-rgb),.32);border-radius:var(--r);box-shadow:var(--sh),0 0 36px rgba(var(--gd-rgb),.15),inset 0 1px 0 rgba(255,255,255,.1)}

/* ── SCREENS ── */
.screen{display:none}
.screen.active{display:block}
#lang-s{min-height:100vh;min-height:100dvh;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;gap:0;z-index:2;position:relative;overflow-y:auto;overflow-x:hidden}
#lang-s.active{display:flex}
/* lang-s background image */
#lang-s-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("lang-bg.jpg");
  background-size:cover;background-position:center top;
  filter:blur(2px) brightness(.38) saturate(1.3);
  transform:scale(1.04);
}
#lang-s-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(5,18,22,.55) 0%,
    rgba(5,18,22,.3) 30%,
    rgba(5,18,22,.4) 60%,
    rgba(5,18,22,.85) 100%
  );
}
#lang-s > *:not(#lang-s-bg):not(#lang-s-overlay){position:relative;z-index:3;}
.l-btns{position:relative;z-index:10;}
#load-s{min-height:100vh;min-height:100dvh;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;position:relative;z-index:2}
#load-s.active{display:flex}
#pay-s{min-height:100vh;min-height:100dvh;display:none;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:40px 16px calc(env(safe-area-inset-bottom,0px) + 80px);padding-top:calc(env(safe-area-inset-top,0px) + 40px);position:relative;z-index:2}
#pay-s.active{display:flex}
#pay-s{align-items:center}
#fomo-wrap{animation:fomoFadeIn .6s ease-out}
@keyframes fomoFadeIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
#fomo-clock.urgent{color:#ff3333;animation:fomoPulse 1s ease-in-out infinite}
@keyframes fomoPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.85}}

#app{position:relative;z-index:2;display:none}
.ai{max-width:520px;margin:0 auto;padding:0 16px 80px}
#res-wrap{display:none;position:relative;z-index:2}

/* ── LANG SCREEN ── */
.l-logo{margin-bottom:22px;animation:fdn .8s ease both}
.l-logo svg{width:110px;height:auto;color:#fff;filter:drop-shadow(0 0 20px rgba(var(--t-rgb),.45));animation:logoGlow 4s ease-in-out infinite}
@keyframes logoGlow{0%,100%{filter:drop-shadow(0 0 20px rgba(var(--t-rgb),.45))}50%{filter:drop-shadow(0 0 35px rgba(var(--tl-rgb),.65))}}
.l-brand{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--tl);margin-top:8px;font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;}
.l-title{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:clamp(34px,8vw,56px);font-weight:700;line-height:1.12;color:var(--wh);margin-bottom:8px;animation:fdn .8s .2s ease both}
.l-title em{font-style:italic;color:var(--tl)}
.l-sub{font-size:13px;color:var(--mu);letter-spacing:.06em;margin-bottom:40px;animation:fdn .8s .35s ease both}
.l-div{display:flex;align-items:center;gap:14px;margin-bottom:28px;width:160px;animation:fdn .8s .4s ease both}
.l-div::before,.l-div::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--t-rgb),.7),transparent)}
.l-dot{width:4px;height:4px;border-radius:50%;background:var(--t);flex-shrink:0}
.l-prompt{font-size:11px;color:var(--mu2);margin-bottom:18px;letter-spacing:.14em;text-transform:uppercase;animation:fdn .8s .44s ease both}
.l-btns{display:flex;flex-direction:column;gap:10px;animation:fdn .8s .5s ease both;padding:4px 0;width:100%;max-width:320px;margin:0 auto}
.btn-lg{padding:14px 18px;border-radius:var(--rp);border:1px solid var(--gbrh);background:var(--gb);backdrop-filter:blur(20px);font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;font-weight:500;color:var(--wh);cursor:pointer;transition:transform .3s,background .3s,border-color .3s,box-shadow .3s;letter-spacing:.04em;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px}
.lang-flag{font-size:16px;line-height:1;flex-shrink:0}
@media(hover:hover){.btn-lg:hover{background:rgba(var(--t-rgb),.28);border-color:var(--t);box-shadow:0 0 24px rgba(var(--t-rgb),.3);transform:translateY(-2px)}}
.btn-lg:active{transform:scale(.97);transition-duration:.1s}

/* ② Ambient light — teal glow from center */
#start-s::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(600px,120vw);height:520px;background:radial-gradient(ellipse at 50% 0%,rgba(47,118,122,.18) 0%,rgba(47,118,122,.06) 45%,transparent 72%);pointer-events:none;z-index:0}
#start-s>*{position:relative;z-index:1}

/* ── START SCREEN ── */
.s-head{text-align:center;padding:48px 0 28px;animation:fdu .6s ease both;position:relative}
.s-toplogo{display:flex;flex-direction:column;align-items:center;gap:7px;margin-bottom:22px}
.s-toplogo svg{width:40px;height:auto;color:var(--t)}
.s-topbrand{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--tl)}
/* ④ Typography — bolder, tighter headings */
.s-title{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:clamp(24px,5vw,36px);font-weight:800;line-height:1.15;letter-spacing:-.025em;color:var(--wh);margin-bottom:9px}
.s-title em{font-style:italic;color:var(--tl)}
.s-desc{font-size:14px;color:var(--mu);line-height:1.7;max-width:360px;margin:0 auto 14px}
/* Doctor credential bar */
.doc-bar{display:flex;align-items:center;gap:10px;background:rgba(var(--t-rgb),.1);border:1px solid rgba(var(--t-rgb),.25);border-radius:14px;padding:10px 14px;margin:0 auto 14px;max-width:320px;animation:fdu .6s .15s var(--ease-out-expo) both}
.doc-bar-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(var(--t-rgb),.4);flex-shrink:0}
.doc-bar-info{flex:1;min-width:0}
.doc-bar-name{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-bar-cred{font-size:11px;color:var(--tl);margin-top:1px}
.doc-bar-badge{width:28px;height:28px;border-radius:50%;background:rgba(var(--t-rgb),.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.s-rules{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.rp{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tl);padding:5px 14px;border-radius:20px;border:1px solid rgba(var(--t-rgb),.35);background:rgba(var(--t-rgb),.1)}

/* QUIZ GRID */
.qg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}

/* ── EMPTY STATE (shown before any quiz started) ── */
.qs-empty{
  display:none;
  flex-direction:column;align-items:center;
  padding:32px 20px 20px;text-align:center;
  animation:screenIn .5s var(--ease-out-expo) both;
}
.qs-empty.visible{display:flex}
.qs-empty-orb{
  width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(91,165,169,.35),rgba(47,118,122,.12));
  border:1.5px solid rgba(91,165,169,.25);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  box-shadow:0 0 40px rgba(47,118,122,.2),inset 0 1px 0 rgba(255,255,255,.08);
  animation:emptyOrbFloat 4s ease-in-out infinite;
}
@keyframes emptyOrbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.03)}}
.qs-empty-orb svg{width:38px;height:38px;color:var(--tl);filter:drop-shadow(0 0 10px rgba(91,165,169,.5))}
.qs-empty-title{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.025em;margin-bottom:8px;line-height:1.2}
.qs-empty-sub{font-size:14px;color:rgba(255,255,255,.45);line-height:1.6;max-width:280px;margin-bottom:24px}
.qs-empty-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:50px;
  background:linear-gradient(135deg,var(--t),var(--tl));
  color:#fff;font-size:15px;font-weight:700;letter-spacing:-.01em;
  border:none;cursor:pointer;
  box-shadow:0 4px 24px rgba(47,118,122,.4),0 1px 0 rgba(255,255,255,.15) inset;
  transition:transform .18s,box-shadow .18s;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.qs-empty-btn:active{transform:scale(.97)}
.qs-empty-steps{
  display:flex;gap:6px;margin-top:20px;
}
.qs-empty-step{
  width:7px;height:7px;border-radius:50%;
  background:rgba(91,165,169,.2);border:1px solid rgba(91,165,169,.25);
  transition:background .3s;
}
.qs-empty-step.active{background:var(--tl);box-shadow:0 0 6px rgba(91,165,169,.5)}

/* ③ Cards — flex column so progress bar always sits at bottom regardless of title length */
.qc{
  display:flex;flex-direction:column;
  min-height:148px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--rs);
  padding:16px 14px 14px;
  cursor:pointer;
  position:relative;overflow:visible;
  box-shadow:0 2px 14px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .3s var(--ease-out-back),border-color .25s,background .25s,box-shadow .35s;
}
.qc::before{content:'';position:absolute;inset:0;border-radius:var(--rs);background:linear-gradient(160deg,rgba(255,255,255,.06) 0%,transparent 50%);pointer-events:none;transition:opacity .3s}
@media(hover:hover){.qc:hover{border-color:var(--t);background:rgba(var(--t-rgb),.13);transform:translateY(-4px) scale(1.02);box-shadow:0 16px 32px rgba(0,0,0,.3),0 0 24px rgba(var(--t-rgb),.18)}}
.qc:active{transform:scale(.95);transition-duration:.1s;border-color:var(--t);background:rgba(var(--t-rgb),.15)}
.qc.sel{border:2px solid var(--tl)!important;background:rgba(var(--t-rgb),.22);box-shadow:0 0 20px rgba(var(--t-rgb),.35),0 0 50px rgba(var(--t-rgb),.12),inset 0 1px 0 rgba(255,255,255,.14);transform:translateY(-2px);animation:selPulse 3s ease-in-out infinite}

/* ── Progress bar — pinned to bottom ── */
.qc-prog-wrap{margin-top:auto;padding-top:12px}
.qc-prog-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.qc-prog-counter{
  font-size:11px;font-weight:700;
  color:rgba(255,255,255,.25);
  letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
  transition:color .4s;
}
.qc-prog-counter.in-progress{color:var(--tl)}
.qc-prog-counter.done{color:#3be89d}
.qc-prog-track{
  height:5px;
  background:rgba(255,255,255,.10);
  border-radius:6px;
  overflow:hidden;
}
.qc-prog-bar{
  height:100%;
  background:linear-gradient(90deg,rgba(var(--t-rgb),.6),var(--tl));
  border-radius:6px;
  width:0%;
  transition:width .8s cubic-bezier(.16,1,.3,1);
}
.qc-done .qc-prog-bar{
  width:100%!important;
  background:linear-gradient(90deg,#1a7a40,#2ec87a,#7fffc4);
  box-shadow:0 0 10px rgba(46,200,122,.4);
}
.qc-done .qc-prog-counter{color:#2ec87a!important}

/* ── State label (right side of progress row) ── */
.qc-prog-label{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;transition:color .3s,opacity .3s;line-height:1}
.qc-prog-label.not-started{color:rgba(255,255,255,.3)}
.qc-prog-label.in-progress{color:var(--tl);opacity:.85}
.qc-prog-label.done{color:#2ec87a}
/* In-progress card — warm amber border signals action needed */
.qc.qc-in-progress:not(.sel){border-color:rgba(210,150,60,.5)!important;box-shadow:0 2px 14px rgba(0,0,0,.25),0 0 16px rgba(210,150,60,.12),inset 0 1px 0 rgba(255,255,255,.07)}
/* 320px small screen — slightly reduce card */
@media(max-width:340px){.qc{min-height:132px;padding:13px 11px 11px}.ct{font-size:14px}}

/* ── Icon idle animations ── */
@keyframes ciFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes ciHeartbeat{0%,60%,100%{transform:scale(1)}15%{transform:scale(1.22)}30%{transform:scale(1.08)}}
@keyframes ciBob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-4px) rotate(-5deg)}}
@keyframes ciSparkle{0%,100%{transform:scale(1) rotate(0deg);opacity:1}50%{transform:scale(1.12) rotate(8deg);opacity:.85}}
@keyframes ciHourglass{0%,100%{transform:rotate(0deg)}45%,55%{transform:rotate(180deg)}}
@keyframes ciBreath{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.8}}
@keyframes ciGlowPulse{0%,100%{box-shadow:0 0 12px var(--ci-glow),inset 0 1px 0 rgba(255,255,255,.07)}50%{box-shadow:0 0 28px var(--ci-glow),0 0 48px var(--ci-glow),inset 0 1px 0 rgba(255,255,255,.14)}}

[data-quiz="skintype"] .ci   {animation:ciFloat 3.2s ease-in-out infinite}
[data-quiz="sensitivity"] .ci{animation:ciHeartbeat 2s ease-in-out infinite}
[data-quiz="homecare"] .ci   {animation:ciBob 3.4s ease-in-out infinite}
[data-quiz="glow"] .ci       {animation:ciSparkle 2.6s ease-in-out infinite, ciGlowPulse 2.6s ease-in-out infinite}
[data-quiz="aging"] .ci      {animation:ciHourglass 4s ease-in-out infinite}
[data-quiz="morphotype"] .ci {animation:ciBreath 3.8s ease-in-out infinite}
/* Pause on tap so animation doesn't fight touch feedback */
.qc:active .ci,.qc.sel .ci{animation:none!important;transition:transform .1s}
.qc-resume-badge{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#b8621a,#d4841a);color:#fff;font-size:8px;font-weight:800;letter-spacing:.1em;padding:3px 10px;border-radius:20px;white-space:nowrap;z-index:8;box-shadow:0 2px 8px rgba(180,90,20,.5)}
.qc.sel::after{content:'\2713';position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--t),var(--tl));display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(var(--t-rgb),.6);font-size:13px;font-weight:700;color:#fff;line-height:24px;text-align:center;animation:checkPop .35s var(--ease-out-back) both;z-index:5}
@keyframes checkPop{from{transform:scale(0) rotate(-45deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.qc.sel::before{background:linear-gradient(135deg,rgba(var(--tl-rgb),.12) 0%,transparent 60%) !important}
.qc.flagship{grid-column:1/-1;display:flex;align-items:center;gap:13px;padding:17px 18px;border-color:rgba(var(--gd-rgb),.35);background:linear-gradient(135deg,rgba(var(--gd-rgb),.07) 0%,rgba(var(--t-rgb),.08) 100%)}
@media(hover:hover){.qc.flagship:hover{border-color:var(--gd);box-shadow:0 0 26px rgba(var(--gd-rgb),.18)}}
.qc.flagship.sel{border:2px solid var(--gd) !important;box-shadow:0 0 30px rgba(var(--gd-rgb),.35),0 0 60px rgba(var(--gd-rgb),.12);animation:none}
.qc-badge{position:absolute;top:-10px;left:14px;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 12px;border-radius:20px;background:linear-gradient(135deg,var(--t),var(--tl));color:#fff;z-index:10;box-shadow:0 2px 10px rgba(var(--t-rgb),.45);white-space:nowrap}
/* Card icons — styled pill container */
.ci{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-bottom:11px;flex-shrink:0;
  border-radius:14px;
  background:linear-gradient(135deg,var(--ci-bg-a,rgba(47,118,122,.22)),var(--ci-bg-b,rgba(91,165,169,.09)));
  border:1px solid var(--ci-brd,rgba(91,165,169,.22));
  box-shadow:0 0 18px var(--ci-glow,rgba(91,165,169,.14)),inset 0 1px 0 rgba(255,255,255,.07);
  color:var(--ci-clr,var(--tl));
  transition:box-shadow .25s,border-color .25s;
}
.ci svg{width:22px;height:22px;flex-shrink:0}
.ci svg *{stroke-width:2}
.qc:hover .ci,.qc.sel .ci{box-shadow:0 0 28px var(--ci-glow,rgba(91,165,169,.3)),inset 0 1px 0 rgba(255,255,255,.1)}
.qc-profile-banner .ci{width:38px;height:38px;border-radius:11px}
/* Per-quiz accent colors */
[data-quiz="profile"] .ci{--ci-clr:#7bc5ca;--ci-bg-a:rgba(47,118,122,.2);--ci-bg-b:rgba(91,165,169,.08);--ci-brd:rgba(91,165,169,.24);--ci-glow:rgba(91,165,169,.18)}
[data-quiz="skintype"] .ci{--ci-clr:#68bce0;--ci-bg-a:rgba(48,130,190,.2);--ci-bg-b:rgba(80,170,220,.07);--ci-brd:rgba(60,150,200,.22);--ci-glow:rgba(48,130,190,.2)}
[data-quiz="sensitivity"] .ci{--ci-clr:#d47b8a;--ci-bg-a:rgba(180,65,90,.18);--ci-bg-b:rgba(200,90,115,.07);--ci-brd:rgba(190,75,100,.22);--ci-glow:rgba(180,65,90,.18)}
[data-quiz="homecare"] .ci{--ci-clr:#5cbf9a;--ci-bg-a:rgba(45,155,120,.18);--ci-bg-b:rgba(75,185,150,.07);--ci-brd:rgba(55,165,130,.22);--ci-glow:rgba(45,155,120,.18)}
[data-quiz="glow"] .ci{--ci-clr:#c4a060;--ci-bg-a:rgba(175,140,55,.2);--ci-bg-b:rgba(196,160,96,.07);--ci-brd:rgba(175,140,55,.26);--ci-glow:rgba(175,140,55,.22)}
[data-quiz="aging"] .ci{--ci-clr:#a880d8;--ci-bg-a:rgba(130,80,205,.2);--ci-bg-b:rgba(160,110,220,.07);--ci-brd:rgba(130,80,205,.24);--ci-glow:rgba(130,80,205,.2)}
[data-quiz="morphotype"] .ci{--ci-clr:#5ba5a9;--ci-bg-a:rgba(47,118,122,.22);--ci-bg-b:rgba(91,165,169,.08);--ci-brd:rgba(91,165,169,.28);--ci-glow:rgba(47,118,122,.22)}
.ct{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;font-weight:600;color:var(--wh);line-height:1.3;margin-bottom:4px}
.cs{font-size:12px;color:var(--mu)}
.cp{font-size:11px;font-weight:600;color:var(--tl);margin-top:8px;display:none;background:rgba(var(--t-rgb),.12);padding:3px 10px;border-radius:12px;border:1px solid rgba(var(--t-rgb),.2)}
.cp-free{display:inline-block}
.flagship .ci{font-size:26px;margin-bottom:0}
.flagship .cfi{flex:1}
.flagship .ct{font-size:15px;color:var(--gdl)}
.flagship .cs{font-size:11px;color:rgba(255,255,255,.45)}
.flagship .cp{color:var(--gd);font-size:12px;margin-top:4px}

/* BUNDLE */
@keyframes bc-shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes bc-glow{0%,100%{box-shadow:0 0 12px rgba(var(--gd-rgb),.18),0 0 32px rgba(var(--gd-rgb),.08)}50%{box-shadow:0 0 20px rgba(var(--gd-rgb),.32),0 0 48px rgba(var(--gd-rgb),.14)}}
.bc{position:relative;background:linear-gradient(135deg,rgba(var(--t-rgb),.18) 0%,rgba(11,44,48,.35) 100%);backdrop-filter:blur(20px);border:2px solid transparent;border-radius:var(--rs);padding:16px 18px;display:flex;align-items:center;gap:13px;cursor:pointer;transition:transform .3s,border-color .3s,box-shadow .3s;margin-bottom:22px;background-clip:padding-box;animation:bc-glow 3s ease-in-out infinite}
.bc::before{content:'';position:absolute;inset:-2px;border-radius:var(--rs);background:linear-gradient(135deg,rgba(var(--gd-rgb),.7),rgba(var(--t-rgb),.5),rgba(var(--gd-rgb),.7));background-size:200% 200%;animation:bc-shimmer 4s linear infinite;z-index:-1}
@media(hover:hover){.bc:hover{transform:translateY(-2px);box-shadow:0 0 28px rgba(var(--gd-rgb),.3),0 0 48px rgba(var(--t-rgb),.22)}}
.bc:active{transform:scale(.98);transition-duration:.1s}
.bc-badge{position:absolute;top:-10px;right:16px;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 12px;border-radius:20px;background:linear-gradient(135deg,#c4a882,#d4b892);color:#0b2c30;z-index:1;box-shadow:0 2px 8px rgba(var(--gd-rgb),.4)}
.bt{flex:1}
.btit{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;color:var(--wh);margin-bottom:2px}
.bde{font-size:11px;color:var(--mu)}
.bpw{text-align:right}
.bpn{font-size:18px;font-weight:500;color:var(--tl);display:block}
.bpo{font-size:11px;color:var(--mu);text-decoration:line-through}
.bsv{font-size:10px;color:var(--tl);background:rgba(var(--t-rgb),.18);padding:2px 8px;border-radius:10px;display:inline-block;margin-top:2px}

/* ── BUTTONS ── */
/* ⑤ CTA button — physical depth */
.btn-p{width:100%;padding:16px 24px;border-radius:var(--rp);border:none;background:linear-gradient(160deg,var(--accent-l) 0%,var(--accent) 55%,var(--accent-d) 100%);color:#1a1000;font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;font-weight:800;letter-spacing:.01em;cursor:pointer;transition:transform .25s var(--ease-out-back),box-shadow .3s ease,opacity .2s;box-shadow:0 8px 32px rgba(var(--accent-rgb),.5),0 2px 8px rgba(0,0,0,.28),inset 0 1.5px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.15);position:relative;overflow:hidden}
.btn-p::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .6s var(--ease-out-expo)}
@media(hover:hover){.btn-p:hover::after{left:100%}
.btn-p:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 16px 48px rgba(var(--accent-rgb),.6),0 4px 12px rgba(0,0,0,.2),inset 0 1.5px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.1)}}
.btn-p:active{transform:translateY(0) scale(.98);box-shadow:0 2px 10px rgba(var(--accent-rgb),.3);transition-duration:.1s}
.btn-p:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none}
.btn-p.gld{background:linear-gradient(135deg,#a8763a 0%,#c4a882 50%,#a8763a 100%);box-shadow:0 6px 22px rgba(var(--gd-rgb),.32),0 2px 6px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.18)}
@media(hover:hover){.btn-p.gld:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 12px 36px rgba(var(--gd-rgb),.45),0 4px 10px rgba(0,0,0,.15)}}
.btn-p.gld:active{transform:translateY(0) scale(.98)}
.btn-gh{width:100%;padding:13px 24px;border-radius:var(--rp);border:1px solid var(--gbrh);background:var(--gb);backdrop-filter:blur(16px);color:rgba(255,255,255,.65);font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .25s var(--ease-out-expo)}
@media(hover:hover){.btn-gh:hover{border-color:var(--t);color:var(--wh);background:rgba(var(--t-rgb),.1);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.15)}}
.btn-gh:active{transform:translateY(0) scale(.98)}
.bk{display:flex;align-items:center;gap:8px;background:none;border:none;color:var(--mu);font-size:12px;cursor:pointer;padding:14px 0;font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;transition:color .2s;letter-spacing:.04em}
@media(hover:hover){.bk:hover{color:var(--wh)}}
.bka{width:44px;height:44px;border-radius:50%;background:var(--gb);border:1px solid var(--gbr);display:flex;align-items:center;justify-content:center;font-size:13px}
.bk{min-height:44px}

/* ── PROGRESS ── */
.pw{margin-bottom:26px}
.pt{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;gap:8px}
.pl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tl)}
.pc{font-size:12px;color:var(--mu)}
.q-pct{font-size:11px;font-weight:700;color:var(--tl);background:rgba(var(--tl-rgb),.12);padding:2px 7px;border-radius:20px;letter-spacing:.02em;transition:all .3s;margin-left:auto}
.ptr{height:4px;border-radius:10px;overflow:hidden}
.ptr.prog-segments{display:flex;gap:3px;background:none;overflow:visible}
.pb{height:100%;width:100%;background:linear-gradient(90deg,var(--t),var(--tl),#7cc4c8);background-size:200% 100%;border-radius:10px;transform-origin:left;transition:transform .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px rgba(var(--tl-rgb),.6),0 0 20px rgba(var(--tl-rgb),.2);animation:progShine 3s linear infinite}
@keyframes progShine{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── QUESTION ── */
.qn{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tl);margin-bottom:11px}
.qt{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:clamp(21px,4.5vw,28px);font-weight:500;color:var(--wh);line-height:1.35;margin-bottom:26px}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{background:var(--gb);backdrop-filter:blur(16px);border:1px solid var(--gbr);border-radius:var(--rs);padding:16px 18px;cursor:pointer;transition:transform .25s var(--ease-out-back),border-color .2s,background .2s,box-shadow .3s,color .2s;display:flex;align-items:center;gap:13px;font-size:15px;color:rgba(255,255,255,.85);line-height:1.45;position:relative;overflow:hidden}
.opt::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,transparent 55%);pointer-events:none}
@media(hover:hover){.opt:hover{border-color:rgba(var(--t-rgb),.55);background:rgba(var(--t-rgb),.09);color:var(--wh);transform:translateX(4px) scale(1.01)}}
.opt:active{transform:translateX(2px) scale(.99);transition-duration:.1s}
.opt.sel{border-color:var(--tl);background:rgba(var(--t-rgb),.2);color:var(--wh);box-shadow:inset 0 0 0 1px rgba(var(--t-rgb),.3),0 4px 16px rgba(0,0,0,.2),0 0 28px rgba(var(--t-rgb),.22);transform:translateX(4px);animation:optSelect .35s var(--ease-out-back)}
@keyframes optSelect{0%{transform:translateX(0) scale(.96)}35%{transform:translateX(5px) scale(1.025)}100%{transform:translateX(4px) scale(1)}}
.orad{width:21px;height:21px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .3s var(--ease-spring)}
.opt.sel .orad{background:linear-gradient(135deg,var(--t),var(--tl));border-color:var(--tl);box-shadow:0 0 12px rgba(var(--t-rgb),.5)}
.orad::after{content:'';width:7px;height:7px;border-radius:50%;background:#fff;opacity:0;transform:scale(0);transition:all .3s var(--ease-out-back)}
.opt.sel .orad::after{opacity:1;transform:scale(1)}

/* ── LOADING — Splash-style Analysis ── */
#load-s.active{position:fixed;inset:0;z-index:9997;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
#load-s .load-bg{position:absolute;inset:0;background:url('lang-bg.jpg') center/cover no-repeat;z-index:0}
#load-s .load-bg::after{content:'';position:absolute;inset:0;background:rgba(6,18,22,.72)}
/* Canvas particles layer */
#load-s .load-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
/* Radial glow behind ring */
#load-s .load-glow{
  position:absolute;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,118,122,.22) 0%,rgba(47,118,122,.06) 50%,transparent 70%);
  pointer-events:none;z-index:0;
  animation:loadGlowPulse 2.4s ease-in-out infinite;
}
@keyframes loadGlowPulse{0%,100%{transform:scale(.9);opacity:.7}50%{transform:scale(1.15);opacity:1}}
/* Complete flash overlay */
#load-s .load-complete-flash{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 45%,rgba(91,165,169,.18) 0%,transparent 65%);
  opacity:0;pointer-events:none;z-index:2;
  transition:opacity .5s ease;
}
#load-s.complete .load-complete-flash{opacity:1}
/* Ring pulse on complete */
#load-s.complete .load-ring-fill{
  filter:drop-shadow(0 0 12px rgba(91,165,169,.8));
  transition:stroke-dashoffset .4s cubic-bezier(.4,0,.2,1), filter .3s ease;
}
/* Complete checkmark replaces logo */
.load-complete-check{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(0);
  transition:opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
  font-size:40px;color:#2ec87a;
}
#load-s.complete .load-complete-check{opacity:1;transform:scale(1)}
#load-s.complete .load-logo-img{opacity:0;transition:opacity .2s}
#load-s>*:not(.load-bg){position:relative;z-index:1}
/* Ring */
.load-ring-wrap{position:relative;width:140px;height:140px;margin-bottom:20px}
.load-ring{width:100%;height:100%;transform:rotate(-90deg)}
.load-ring-track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:2.5}
.load-ring-fill{fill:none;stroke:url(#load-grad);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:339.292;stroke-dashoffset:339.292;transition:stroke-dashoffset .4s cubic-bezier(.4,0,.2,1)}
.load-logo-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.load-logo-img{width:52px;height:auto;color:#fff;filter:drop-shadow(0 0 20px rgba(var(--tl-rgb),.5));opacity:0;transform:scale(.6);animation:splashLogoIn .7s .2s cubic-bezier(.16,1,.3,1) forwards}
/* Counter badge */
.load-counter{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:50px;background:rgba(var(--t-rgb),.2);border:1px solid rgba(var(--tl-rgb),.3);backdrop-filter:blur(10px);margin-bottom:18px;opacity:0;animation:splashTextIn .5s .4s ease forwards}
.load-counter-num{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:18px;font-weight:800;color:var(--tl);letter-spacing:.02em}
.load-counter-label{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:12px;font-weight:500;color:rgba(255,255,255,.55)}
/* Title & sub */
.load-title{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:clamp(17px,4vw,20px);font-weight:700;color:#fff;text-align:center;margin-bottom:6px;opacity:0;animation:splashTextIn .5s .5s ease forwards;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.load-sub{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;color:rgba(255,255,255,.5);text-align:center;margin-bottom:20px;opacity:0;animation:splashTextIn .5s .6s ease forwards;text-shadow:0 1px 8px rgba(0,0,0,.4)}
/* Steps */
.load-steps2{display:flex;flex-direction:column;gap:8px;text-align:start;width:220px;opacity:0;animation:splashTextIn .5s .7s ease forwards}
.load-step2{font-size:12px;color:rgba(255,255,255,.3);padding-left:22px;position:relative;transition:color .35s,transform .35s}
.load-step2::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(255,255,255,.12);transition:all .35s}
.load-step2.active{color:var(--tl);transform:translateX(3px)}
.load-step2.active::before{border-color:var(--tl);background:var(--tl);box-shadow:0 0 8px rgba(109,184,188,.5)}
.load-step2.done{color:rgba(255,255,255,.45)}
.load-step2.done::before{border-color:var(--tl);background:var(--tl)}
/* Exit animation */
#load-s.exit .load-bg{animation:splashBgZoom .8s cubic-bezier(.16,1,.3,1) forwards}
#load-s.exit .load-ring-wrap{animation:splashRingExit .5s ease forwards}
#load-s.exit .load-counter,#load-s.exit .load-title,#load-s.exit .load-sub,#load-s.exit .load-steps2{animation:splashContentExit .4s ease forwards}

/* ── PAYMENT SCREEN ── */
.pay-in{width:100%;max-width:420px;margin:0 auto}
.pay-hd{text-align:center;margin-bottom:26px}
.pay-logo{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:18px}
.pay-logo svg{width:36px;height:auto;color:var(--t)}
.pay-brand{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--tl)}
.pay-title{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:22px;font-weight:700;color:var(--wh);margin-bottom:3px}
.pay-sub{font-size:13px;color:var(--mu)}
.ord{background:rgba(var(--t-rgb),.11);border:1px solid rgba(var(--t-rgb),.3);border-radius:var(--rs);padding:17px 18px;margin-bottom:18px}
.ord-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--wh)}
.ord-lbl{color:var(--mu);font-size:12px}
.ord-price{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:28px;font-weight:700}
.ord-div{height:1px;background:rgba(255,255,255,.07);margin:12px 0}
.ord-items{display:flex;flex-direction:column;gap:5px}
.ord-item{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.7)}
.ord-item::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--t);flex-shrink:0}
.sec{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;color:var(--mu2);margin-bottom:14px}

/* ── RESULT SCREEN ── */
/* Right col header — hidden on mobile, shown via 1200px media query */
.res-col-r-label{display:none}
.res-top{text-align:center;padding:36px 0 22px}
.res-eb{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tl);margin-bottom:11px}
.res-tt{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:clamp(28px,6vw,42px);font-weight:500;color:var(--wh);line-height:1.2;margin-bottom:9px;animation:blurClear .8s .35s ease both}
@keyframes blurClear{from{filter:blur(12px)}to{filter:blur(0)}}
.res-tt em{font-style:italic;color:var(--tl)}
@keyframes txtShimmer{0%{background-position:200% center}100%{background-position:-200% center}}
.res-tt.gd-txt em{color:var(--gdl)}
.res-desc{font-size:clamp(13px,3.2vw,15px);color:var(--mu);line-height:1.7;max-width:380px;margin:0 auto}

/* RESULT TABS */
.res-tab{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:12px 28px;border-radius:50px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.45);cursor:pointer;transition:all .25s;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.res-tab.active{background:var(--t);border-color:var(--t);color:#fff}

/* RESULT CARD */
#result-card{margin:0;border-radius:22px;overflow:hidden;position:relative}
.rc-bg{background:linear-gradient(148deg,#0e3d42 0%,#0b2c30 45%,#071e22 100%);padding:30px 24px 26px;position:relative;overflow:hidden}
.rc-bg.gold-card{background:linear-gradient(148deg,#1a1200 0%,#0f1a0a 30%,#0b2c30 70%,#071e22 100%)}
.rc-glow1{position:absolute;top:-50px;right:-50px;width:180px;height:180px;background:radial-gradient(circle,rgba(var(--t-rgb),.32) 0%,transparent 70%);border-radius:50%}
.rc-glow2{position:absolute;bottom:-35px;left:-35px;width:130px;height:130px;background:radial-gradient(circle,rgba(var(--gd-rgb),.14) 0%,transparent 70%);border-radius:50%}
.gold-card .rc-glow1{background:radial-gradient(circle,rgba(var(--gd-rgb),.28) 0%,transparent 70%)}
.gold-card .rc-glow2{background:radial-gradient(circle,rgba(var(--t-rgb),.18) 0%,transparent 70%)}
.rc-border{position:absolute;inset:0;border-radius:22px;border:1px solid rgba(var(--t-rgb),.38);pointer-events:none}
.gold-card+.rc-border,.gold-card .rc-border{border-color:rgba(var(--gd-rgb),.35)}
.rci{position:relative;z-index:1}

.rc-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.rc-hd-brand{display:flex;align-items:center;gap:9px}
.rc-hd-brand svg{width:26px;height:auto}
.rc-hd-bn{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--tl)}
.rc-hd-ic{font-size:22px}

.rc-eb{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--tl);opacity:.75;margin-bottom:5px}
.rc-name{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:clamp(24px,5.5vw,34px);font-weight:700;color:var(--wh);line-height:1.15;margin-bottom:3px}
.rc-name em{font-style:italic;color:var(--tl)}
.rc-name.gn em{color:var(--gdl)}
.rc-sub{font-size:11px;color:var(--mu);margin-bottom:18px}
.rc-div{height:1px;background:linear-gradient(90deg,rgba(var(--t-rgb),.55),rgba(255,255,255,.06),transparent);margin:14px 0}
.gold-card .rc-div{background:linear-gradient(90deg,rgba(var(--gd-rgb),.45),rgba(255,255,255,.06),transparent)}
.rc-sl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent,#c4a060);font-weight:700;margin-bottom:10px}
.gold-card .rc-sl{color:var(--gd)}
/* Section blocks for visual separation */
.rc-section{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:16px;margin-bottom:14px;animation:fdu .55s var(--ease-out-expo) both}
#result-card .rc-section:nth-child(1){animation-delay:.22s}
#result-card .rc-section:nth-child(2){animation-delay:.36s}
#result-card .rc-section:nth-child(3){animation-delay:.50s}
#result-card .rc-section:nth-child(4){animation-delay:.64s}
.rc-traits{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:0}
.tr{font-size:12px;padding:6px 14px;border-radius:20px;background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.2);color:rgba(255,255,255,.85);font-weight:500}
.rc-prods{display:flex;flex-direction:column;gap:8px}
.rcp{display:flex;align-items:flex-start;gap:10px;background:rgba(255,255,255,.04);border-radius:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.06)}
.rcpm{width:5px;height:5px;border-radius:50%;background:var(--accent,#c4a060);flex-shrink:0;margin-top:6px}
.gold-card .rcpm{background:var(--gd)}
.rcpn{font-size:14px;font-weight:600;color:var(--wh)}
.rcpd{font-size:12px;color:var(--mu);margin-top:2px;line-height:1.5}
.rcp-cat-lbl{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--accent,#c4a060);margin:18px 0 6px;padding:5px 10px 5px 8px;background:rgba(196,168,130,.08);border-left:2px solid var(--accent,#c4a060);border-radius:0 6px 6px 0}
.rcp-cat-lbl:first-child{margin-top:4px}
.rcp-sec-lbl{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tl);margin:10px 0 5px;padding-left:2px}
.rcp-sec-lbl:first-child{margin-top:0}
.rc-ft{margin-top:18px;display:flex;justify-content:space-between;align-items:center}
.rc-ftb{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:10px;font-style:italic;color:rgba(255,255,255,.28)}
.rc-ftd{display:flex;gap:4px}
.dot{width:4px;height:4px;border-radius:50%;background:var(--t)}
.dot:nth-child(2){opacity:.5}
.dot:nth-child(3){opacity:.22}
.gold-card .dot{background:var(--gd)}

/* SHARE */
.sw{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.sr{display:flex;gap:9px}
.sr .btn-gh{flex:1;padding:11px}

/* PROCESSING OVERLAY */
.proc{position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(7,30,33,.92);backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;animation:procFadeIn .3s ease both}
.proc.show{display:flex}
@keyframes procFadeIn{from{opacity:0}to{opacity:1}}
.proc-sp{width:44px;height:44px;border:2px solid rgba(var(--t-rgb),.15);border-top-color:var(--tl);border-radius:50%;animation:spin .7s linear infinite;filter:drop-shadow(0 0 8px rgba(var(--tl-rgb),.4))}
@keyframes spin{to{transform:rotate(360deg)}}
.proc-t{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:18px;font-weight:600;color:var(--wh);letter-spacing:-.01em}
.proc-s{font-size:12px;color:var(--mu);font-weight:400}

/* TOAST */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(80px);background:rgba(var(--t-rgb),.92);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(var(--tl-rgb),.3);color:#fff;padding:12px 24px;border-radius:50px;font-size:13px;font-weight:500;transition:transform .4s var(--ease-out-back),opacity .3s;z-index:var(--z-toast);white-space:nowrap;opacity:0;box-shadow:0 8px 32px rgba(0,0,0,.3),0 0 20px rgba(var(--t-rgb),.2)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ANIM */
@keyframes fdn{from{opacity:0;transform:translateY(-18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fdu{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.au{animation:fdu .6s var(--ease-out-expo) both}
.au1{animation:fdu .6s .07s var(--ease-out-expo) both}
.au2{animation:fdu .6s .14s var(--ease-out-expo) both}
.au3{animation:fdu .6s .21s var(--ease-out-expo) both}
.au4{animation:fdu .6s .28s var(--ease-out-expo) both}
.au5{animation:fdu .6s .35s var(--ease-out-expo) both}

/* ── SWIPE TRANSITIONS ── */
.quiz-slide-out{animation:slideOut .2s var(--ease-out-expo) forwards}
.quiz-slide-in{animation:slideIn .35s var(--ease-out-expo) both}
@keyframes slideOut{from{opacity:1;transform:translateX(0) scale(1)}to{opacity:0;transform:translateX(-50px) scale(.96)}}
@keyframes slideIn{from{opacity:0;transform:translateX(50px) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}

/* ── MISSING CLASSES ── */
.opt-ripple{position:absolute;border-radius:50%;background:rgba(var(--t-rgb),.28);width:80px;height:80px;margin-left:-40px;margin-top:-40px;transform:scale(0);animation:rippleOut .55s ease-out forwards;pointer-events:none}
@keyframes rippleOut{to{transform:scale(4);opacity:0}}
.flagship-idle{animation:flagshipPulse 3s ease-in-out infinite}
@keyframes flagshipPulse{0%,100%{border-color:rgba(var(--gd-rgb),.35)}50%{border-color:rgba(var(--gd-rgb),.55);box-shadow:0 0 20px rgba(var(--gd-rgb),.12)}}
.ig-handle-link{color:var(--tl);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;position:relative;z-index:10;transition:opacity .2s}
.ig-handle-link:hover{opacity:.8}
.rcp-proc-lbl{font-size:7px;letter-spacing:.14em;text-transform:uppercase;color:var(--gd);margin-bottom:4px}
.rcp-proc-title{font-size:12px;font-weight:600;color:var(--gdl)}
.rcp-proc-desc{font-size:10px;color:var(--mu);margin-top:2px;line-height:1.4}

/* ── Lifehacks ── */
.lh-title{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tl);opacity:.6;margin-bottom:14px;text-align:center}
.lh-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;padding:6px 12px;border-radius:8px;display:inline-block}
.lh-do{color:#4ade80;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.15)}
.lh-dont{color:#f87171;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.15)}
.lh-item{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:12px;margin-bottom:6px;font-size:13px;line-height:1.55;transition:transform .2s}
.lh-item-do{background:rgba(74,222,128,.05);border:1px solid rgba(74,222,128,.1);color:rgba(255,255,255,.8)}
.lh-item-dont{background:rgba(248,113,113,.05);border:1px solid rgba(248,113,113,.1);color:rgba(255,255,255,.8)}
.lh-icon{flex-shrink:0;font-size:14px;font-weight:700;margin-top:1px;width:18px;text-align:center}
.lh-item-do .lh-icon{color:#4ade80}
.lh-item-dont .lh-icon{color:#f87171}

/* ── PROGRESS BAR COMPLETION PULSE ── */
.pb.done{animation:progShine 3s linear infinite,progDone .7s ease-out forwards}
@keyframes progDone{0%{box-shadow:0 0 10px rgba(var(--tl-rgb),.6),0 0 20px rgba(var(--tl-rgb),.2)}50%{box-shadow:0 0 24px rgba(var(--tl-rgb),.95),0 0 56px rgba(var(--tl-rgb),.5)}100%{box-shadow:0 0 16px rgba(var(--tl-rgb),.75),0 0 36px rgba(var(--tl-rgb),.35)}}

/* ── INPUT FOCUS GLOW ── */
input:focus,textarea:focus,select:focus{outline:none;border-color:rgba(var(--tl-rgb),.65)!important;box-shadow:0 0 0 3px rgba(var(--t-rgb),.18),0 0 20px rgba(var(--tl-rgb),.14)!important;transition:border-color .2s,box-shadow .3s}

/* ── RC-NAME CARD ENTRANCE ── */
.rc-name{animation:fdu .55s .12s var(--ease-out-expo) both}

@media(max-width:320px){.qg{grid-template-columns:1fr}.sr{flex-direction:column}}
@media(min-width:321px) and (max-width:768px){.qg{grid-template-columns:1fr 1fr;gap:10px}}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(var(--t-rgb),.35);border-radius:2px}

/* ── HOOK SCREEN ──────────────────────────────────────────── */
#hook-s {
  background:
    radial-gradient(ellipse at 75% 10%, rgba(180,50,50,.13) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(var(--t-rgb),.18) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(var(--gd-rgb),.06) 0%, transparent 60%),
    linear-gradient(180deg, #0a2528 0%, var(--dk) 40%, #081c20 100%);
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  z-index: 2;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Animated light blobs for hook screen — fixed position so they don't affect scroll */
#hook-s::before{
  content:'';position:fixed;top:-10%;right:-10%;
  width:min(550px,80vw);height:min(550px,80vw);
  background:radial-gradient(circle,rgba(220,70,70,.14) 0%,rgba(180,40,40,.06) 35%,transparent 65%);
  border-radius:50%;filter:blur(40px);
  animation:hookOrb1 16s ease-in-out infinite;pointer-events:none;z-index:-1;
}
#hook-s::after{
  content:'';position:fixed;bottom:-5%;left:-10%;
  width:min(500px,75vw);height:min(500px,75vw);
  background:radial-gradient(circle,rgba(var(--tl-rgb),.16) 0%,rgba(var(--t-rgb),.08) 35%,transparent 65%);
  border-radius:50%;filter:blur(40px);
  animation:hookOrb2 20s ease-in-out infinite;pointer-events:none;z-index:-1;
}
@keyframes hookOrb1{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-40px,50px) scale(1.15)}70%{transform:translate(25px,-30px) scale(.88)}}
@keyframes hookOrb2{0%,100%{transform:translate(0,0) scale(1)}30%{transform:translate(30px,-40px) scale(1.12)}65%{transform:translate(-20px,30px) scale(.9)}}
.hook-in {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 20px 32px;
  position: relative;
  z-index: 1;
}

/* Hook blocks: start invisible, animate in with .visible */
.hook-block {
  border-radius: 18px;
  padding: 18px;
  opacity: 1;
  transform: none;
}
.hook-block.visible {
  opacity: 1;
  transform: none;
}
.hook-block.pain {
  background: linear-gradient(145deg,rgba(180,40,40,.14) 0%,rgba(120,20,20,.08) 100%);
  border: 1px solid rgba(220,80,80,.25);
  position:relative;overflow:hidden;
}
.hook-block.pain::before{
  content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;
  background:radial-gradient(circle,rgba(248,113,113,.12) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.hook-block.error {
  background: linear-gradient(145deg,rgba(160,120,30,.14) 0%,rgba(120,80,10,.08) 100%);
  border: 1px solid rgba(200,160,50,.25);
  position:relative;overflow:hidden;
}
.hook-block.error::before{
  content:'';position:absolute;top:-20px;left:-20px;width:100px;height:100px;
  background:radial-gradient(circle,rgba(251,191,36,.1) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.hook-block.solution {
  background: linear-gradient(145deg,rgba(var(--t-rgb),.18) 0%,rgba(20,80,85,.1) 100%);
  border: 1px solid rgba(var(--tl-rgb),.3);
  position:relative;overflow:hidden;
}
.hook-block.solution::before{
  content:'';position:absolute;bottom:-25px;right:-25px;width:110px;height:110px;
  background:radial-gradient(circle,rgba(var(--tl-rgb),.15) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.hook-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.hook-label-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hook-block.pain .hook-label-dot   { background:#f87171; box-shadow:0 0 8px rgba(248,113,113,.6); }
.hook-block.error .hook-label-dot  { background:#fbbf24; box-shadow:0 0 8px rgba(251,191,36,.5); }
.hook-block.solution .hook-label-dot{ background:var(--tl); box-shadow:0 0 8px rgba(var(--tl-rgb),.6); }
.hook-text {
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 8px;
}
.hook-sub {
  font-family: 'Inter','Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12.5px;
  color: rgba(255,255,255,.55);
  line-height: 1.5;
}
.hook-stat {
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size: clamp(42px, 12vw, 68px);
  font-weight: 700;
  font-style: italic;
  line-height: .95;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, #ffd580 0%, #ffc054 45%, #e89020 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(255,180,50,.3));
  margin-bottom: 10px;
}

/* CTA button: always visible (no class toggle needed) */
.hook-cta {
  width: 100%;
  padding: 18px 24px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--t), var(--tl));
  font-family: 'Inter','Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  letter-spacing: .02em;
  box-shadow: 0 8px 32px rgba(var(--t-rgb),.4);
  transition: background .3s, box-shadow .3s, transform .2s;
  opacity: 1;
  transform: none;
  margin-top: 4px;
}
.hook-cta.visible { opacity: 1; }
.hook-cta:hover {
  background: linear-gradient(135deg, var(--tl), #6bbfc3);
  box-shadow: 0 12px 40px rgba(var(--t-rgb),.55);
  transform: translateY(-2px) !important;
}
.hook-cta:active { transform: scale(.97) !important; }

/* Skip link */
.hook-skip {
  display: block;
  text-align: center;
  font-family: 'Inter','Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,.38);
  cursor: pointer;
  padding: 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 1;
  transition: color .2s;
}
.hook-skip.visible { opacity: 1; }
.hook-skip:hover { color: rgba(255,255,255,.7); }

/* Back-to-lang button */
.hook-back-lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 13px 24px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
  color: rgba(255,255,255,.65);
  font-family: 'Inter','Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
  margin-bottom: 10px;
  touch-action: manipulation;
  opacity: 1;
}
.hook-back-lang.visible { opacity: 1; }
.hook-back-lang:hover {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.1);
  color: #fff;
}

/* hook-about block */
.hook-about {
  margin: 0 0 12px;
  padding: 14px 15px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 1;
  transform: none;
}
.hook-about.visible { opacity: 1; transform: none; }
.hab-header { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.hab-avatar { width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(var(--tl-rgb),.5); flex-shrink:0; overflow:hidden; box-shadow:0 0 0 3px rgba(var(--t-rgb),.15),0 4px 12px rgba(0,0,0,.4); }
.hab-name { font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:14px; font-weight:700; font-style:italic; color:rgba(255,255,255,.92); letter-spacing:-.01em; line-height:1.1; }
.hab-title { font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--tl); margin-top:2px; }
.hab-quote { font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12.5px; font-weight:400; line-height:1.6; color:rgba(255,255,255,.62); margin-bottom:10px; }
.hab-pills { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.hab-pill { font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:10px; font-weight:600; color:rgba(255,255,255,.7); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:3px 9px; }
.hab-insight { display:flex; align-items:flex-start; gap:8px; padding:9px 11px; background:rgba(var(--t-rgb),.13); border:1px solid rgba(var(--t-rgb),.28); border-radius:10px; }
.hab-insight-icon { color:var(--tl); font-size:12px; font-weight:700; flex-shrink:0; margin-top:2px; }
#hab-result { font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; font-weight:500; color:rgba(255,255,255,.82); line-height:1.5; }

/* Force hook elements visible */
#hook-pain, #hook-error, #hook-solution { opacity:1 !important; transform:none !important; }
.hook-cta { opacity:1 !important; }

/* ── SENIOR-LEVEL POLISH ── */

/* Smooth page transitions — cover-based (no blank flash) */
@keyframes slideUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes screenBackIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}
.screen.active{animation:screenIn .28s ease both}
.screen.screen-back-in{animation:screenBackIn .28s ease both}

/* ── SKELETON SCREENS ── */
.skel{border-radius:10px;background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:skelShimmer 1.8s ease-in-out infinite}
@keyframes skelShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-result{display:flex;flex-direction:column;gap:16px;padding:24px}
.skel-title{height:28px;width:60%;border-radius:8px}
.skel-sub{height:16px;width:40%;border-radius:6px}
.skel-block{height:80px;border-radius:12px}
.skel-line{height:14px;border-radius:6px}
.skel-line-short{width:75%}
.skel-line-xs{width:50%}
.skel-circle{width:64px;height:64px;border-radius:50%}
.skel-pills{display:flex;gap:8px}
.skel-pill{height:32px;width:80px;border-radius:20px}

/* ── SEGMENTED PROGRESS ── */
.prog-segments{display:flex;gap:3px;height:4px;flex:1}
.prog-seg{flex:1;border-radius:4px;background:rgba(255,255,255,.08);transition:background .4s var(--ease-out-expo),box-shadow .4s}
.prog-seg.done{background:linear-gradient(90deg,var(--t),var(--tl));box-shadow:0 0 8px rgba(var(--tl-rgb),.4)}
.prog-seg.current{background:linear-gradient(90deg,var(--tl),#7cc4c8);box-shadow:0 0 12px rgba(var(--tl-rgb),.6);animation:segPulse 2s ease-in-out infinite}
@keyframes segPulse{0%,100%{box-shadow:0 0 8px rgba(var(--tl-rgb),.4)}50%{box-shadow:0 0 16px rgba(var(--tl-rgb),.7)}}

/* ── MORPHOTYPE PHOTO PREVIEW ── */
.morpho-pvw-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;margin-left:auto;background:rgba(47,118,122,.12);border:1px solid rgba(47,118,122,.25);border-radius:7px;cursor:pointer;opacity:.6;transition:opacity .2s,background .2s;padding:0;color:var(--tl)}
.morpho-pvw-btn:hover,.morpho-pvw-btn:active{opacity:1;background:rgba(47,118,122,.28)}
.opt.sel .morpho-pvw-btn{opacity:.85;border-color:rgba(var(--tl-rgb),.5)}
#morpho-pvw-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .15s ease}
.morpho-pvw-card{background:#0d3237;border:1px solid rgba(47,118,122,.3);border-radius:16px;width:100%;max-width:320px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.6);animation:morphoPvwIn .22s var(--ease-out-back)}
@keyframes morphoPvwIn{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.morpho-pvw-img{width:100%;height:144px;object-fit:cover;object-position:center 15%;display:block}
.morpho-pvw-body{padding:12px 14px 14px}
.morpho-pvw-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.morpho-pvw-title{font-size:13px;font-weight:700;color:#fff;line-height:1.3}
.morpho-pvw-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:none;border-radius:50%;color:rgba(255,255,255,.55);cursor:pointer;flex-shrink:0;transition:background .15s;padding:0}
.morpho-pvw-close:hover,.morpho-pvw-close:active{background:rgba(255,255,255,.18);color:#fff}
.morpho-pvw-traits{list-style:none;padding:0;margin:0}
.morpho-pvw-traits li{font-size:11.5px;color:rgba(255,255,255,.68);padding:2.5px 0 2.5px 13px;position:relative;line-height:1.45}
.morpho-pvw-traits li::before{content:'•';position:absolute;left:0;color:#5ba5a9}
.morpho-pvw-celeb{font-size:10px;color:rgba(255,255,255,.28);margin-top:8px;font-style:italic}

/* ── MORPHOTYPE PHOTO QUESTION GRID ── */
.opts.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:100%}
.opt.opt-photo{flex-direction:column;padding:0;overflow:hidden;border-radius:14px;border:2.5px solid rgba(47,118,122,.15);background:#0a2a2e;gap:0;align-items:stretch;cursor:pointer;transition:border-color .18s,transform .15s,box-shadow .18s;position:relative}
.opt.opt-photo::before{display:none}
.opt.opt-photo:hover{border-color:rgba(47,118,122,.5);transform:scale(1.025);box-shadow:0 6px 22px rgba(0,0,0,.35)}
.opt.opt-photo.sel{border-color:var(--tl);box-shadow:0 0 0 3px rgba(47,118,122,.3),0 6px 20px rgba(0,0,0,.3)}
.opt.opt-photo.sel::after{content:'✓';position:absolute;top:8px;right:9px;width:22px;height:22px;background:var(--tl);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;line-height:22px;text-align:center}
.opt-photo-img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 10%;display:block;border-radius:11px}

/* ── ANSWER DISMISS ANIMATION ── */
.opt-dismiss{animation:optDismiss .3s var(--ease-out-expo) forwards}
@keyframes optDismiss{to{opacity:0;transform:translateX(-20px) scale(.95)}}
.opt-stay{animation:optStay .4s var(--ease-out-back) both}
@keyframes optStay{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}

/* ── BOTTOM SHEET PAYWALL ── */
.pw-sheet-backdrop{position:fixed;inset:0;z-index:9998;background:rgba(5,18,22,0);transition:background .35s ease}
.pw-sheet-backdrop.visible{background:rgba(5,18,22,.8)}
.pw-sheet{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:linear-gradient(160deg,rgba(20,40,45,.99),rgba(10,25,30,.99));border-top-left-radius:28px;border-top-right-radius:28px;border:1px solid rgba(var(--tl-rgb),.15);border-bottom:none;box-shadow:0 -10px 60px rgba(0,0,0,.5);max-height:92vh;max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateY(100%);transition:transform .4s var(--ease-out-expo);padding:0 18px calc(env(safe-area-inset-bottom,0px) + 16px);will-change:transform}
.pw-sheet.open{transform:translateY(0)}
.pw-sheet-handle{width:36px;height:4px;border-radius:4px;background:rgba(255,255,255,.2);margin:10px auto 16px;flex-shrink:0}
.pw-sheet .paywall-close{position:absolute;top:12px;right:14px}

/* ── SCROLL-SNAP RESULT SECTIONS ── */
.res-snap-container{scroll-snap-type:y proximity;overflow-y:auto;-webkit-overflow-scrolling:touch}
.res-snap-section{scroll-snap-align:start;min-height:auto;padding-bottom:24px}

/* ── SCROLL-DRIVEN HEADER ── */
.res-header-compact{position:sticky;top:0;z-index:10;padding:12px 18px;background:rgba(10,34,37,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(var(--tl-rgb),.1);transform:translateY(-100%);transition:transform .3s var(--ease-out-expo),opacity .3s;opacity:0}
.res-header-compact.visible{transform:translateY(0);opacity:1}
.res-header-compact-title{font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-header-compact-sub{font-size:11px;color:var(--tl);margin-top:1px}

/* ── FIRST-VISIT GUIDE ARROW ── */
.guide-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--tl);font-size:13px;font-weight:600;animation:guideArrowBounce 2s ease-in-out infinite}
@keyframes guideArrowBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Premium glass depth - subtle inner light on cards */
.gl::before,.gl-t::before,.gl-g::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);border-radius:var(--r) var(--r) 0 0;pointer-events:none}

/* Subtle text gradient for headings */
.l-title,.s-title,.res-tt,.pay-title{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.82) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.l-title em,.s-title em{-webkit-text-fill-color:var(--tl)}
.res-tt em{background:linear-gradient(90deg,var(--tl) 0%,#a8e6ea 35%,#e0f4f5 50%,#7cc4c8 65%,var(--tl) 100%)!important;background-size:300% auto!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;animation:txtShimmer 5s linear infinite}
.res-tt.gd-txt em{background:linear-gradient(90deg,var(--gdl) 0%,#e2cba8 40%,#fff 50%,#c4a882 65%,var(--gdl) 100%)!important;background-size:300% auto!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}


/* ── ANIMATED GRADIENT BORDER on selected quiz card (via box-shadow, no pseudo conflict) ── */
@keyframes selPulse{0%,100%{box-shadow:0 0 20px rgba(var(--t-rgb),.35),0 0 50px rgba(var(--t-rgb),.12),inset 0 1px 0 rgba(255,255,255,.16)}50%{box-shadow:0 0 30px rgba(var(--t-rgb),.5),0 0 60px rgba(var(--t-rgb),.18),inset 0 1px 0 rgba(255,255,255,.16)}}

/* ── GLOW PULSE on primary buttons ── */
.btn-p::before{
  content:'';position:absolute;inset:-1px;border-radius:var(--rp);
  background:linear-gradient(135deg,var(--accent),var(--accent-l));
  filter:blur(16px);opacity:0;
  transition:opacity .4s;z-index:-1;
}
.btn-p:hover::before{opacity:.45}
.btn-p.gld::before{background:linear-gradient(135deg,#a8763a,#c4a882);filter:blur(18px)}

/* ── FLOATING PARTICLES (CSS only) ── */
.amb::after{
  content:'';position:absolute;
  width:3px;height:3px;border-radius:50%;
  background:rgba(var(--tl-rgb),.6);
  box-shadow:
    40vw 15vh 0 0 rgba(var(--tl-rgb),.3),
    75vw 45vh 0 0 rgba(var(--gd-rgb),.25),
    20vw 70vh 0 0 rgba(var(--tl-rgb),.2),
    60vw 80vh 0 0 rgba(var(--gd-rgb),.2),
    85vw 25vh 0 0 rgba(var(--tl-rgb),.15),
    10vw 40vh 0 0 rgba(var(--gd-rgb),.18),
    50vw 55vh 0 0 rgba(var(--tl-rgb),.22),
    30vw 90vh 0 0 rgba(var(--gd-rgb),.15);
  animation:particleDrift 25s ease-in-out infinite alternate;
}
@keyframes particleDrift{
  0%{transform:translate(0,0)}
  25%{transform:translate(12px,-18px)}
  50%{transform:translate(-8px,14px)}
  75%{transform:translate(16px,8px)}
  100%{transform:translate(-6px,-12px)}
}

/* ── LIGHT STREAK on landing ── */
#lang-s::after{
  content:'';position:absolute;top:-20%;left:-10%;
  width:120%;height:60%;
  background:radial-gradient(ellipse at 30% 50%, rgba(var(--tl-rgb),.08) 0%, transparent 60%);
  transform:rotate(-12deg);
  pointer-events:none;z-index:1;
  animation:lightBreath 8s ease-in-out infinite alternate;
}
@keyframes lightBreath{0%{opacity:.6;transform:rotate(-12deg) scale(1)}100%{opacity:1;transform:rotate(-10deg) scale(1.05)}}

/* ── CARD HOVER GLOW (via box-shadow, keeps ::after free for checkmark) ── */
@media(hover:hover){.qc:hover{box-shadow:0 16px 32px rgba(0,0,0,.3),0 0 20px rgba(var(--t-rgb),.2)}}

/* ── ANSWER OPTION selected — teal line accent ── */
.opt.sel::after{
  content:'';position:absolute;left:0;top:15%;height:70%;width:3px;
  background:linear-gradient(180deg,transparent,var(--tl),transparent);
  border-radius:2px;
  animation:lineGrow .3s var(--ease-out-expo) both;
}
@keyframes lineGrow{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}

/* ── HOOK BLOCKS — richer glow ── */
.hook-block.pain{box-shadow:inset 0 0 40px rgba(180,40,40,.06),0 0 30px rgba(180,40,40,.04)}
.hook-block.error{box-shadow:inset 0 0 40px rgba(160,120,30,.06),0 0 30px rgba(160,120,30,.04)}
.hook-block.solution{box-shadow:inset 0 0 40px rgba(var(--t-rgb),.08),0 0 30px rgba(var(--t-rgb),.05)}

/* ── HOOK STAT — bigger glow ── */
.hook-stat{filter:drop-shadow(0 0 14px rgba(255,180,50,.35)) drop-shadow(0 0 40px rgba(255,160,30,.15))}

/* ── BUNDLE CARD — richer border animation ── */
.bc{box-shadow:0 0 12px rgba(var(--gd-rgb),.18),0 0 32px rgba(var(--gd-rgb),.08),0 8px 24px rgba(0,0,0,.3)}
.bc:hover{box-shadow:0 0 28px rgba(var(--gd-rgb),.35),0 0 60px rgba(var(--t-rgb),.2),0 12px 32px rgba(0,0,0,.3)}

/* ── RESULT CARD — premium depth ── */
#result-card{box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(var(--t-rgb),.08);transition:box-shadow .4s}
.rc-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,transparent 60%,rgba(0,0,0,.2) 100%);
  pointer-events:none;
}

/* ── LANDING TITLE — entrance drama ── */
.l-title{animation:titleReveal 1s .2s var(--ease-out-expo) both}
@keyframes titleReveal{from{opacity:0;transform:translateY(-20px) scale(.95);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
.l-sub{animation:fdn 1s .5s var(--ease-out-expo) both}

/* ── LANGUAGE BUTTONS — stagger entrance ── */
.l-btns .btn-lg:nth-child(1){animation:fdu .5s .55s var(--ease-out-expo) both}
.l-btns .btn-lg:nth-child(2){animation:fdu .5s .62s var(--ease-out-expo) both}
.l-btns .btn-lg:nth-child(3){animation:fdu .5s .69s var(--ease-out-expo) both}
.l-btns .btn-lg:nth-child(4){animation:fdu .5s .76s var(--ease-out-expo) both}
.l-btns .btn-lg:nth-child(5){animation:fdu .5s .83s var(--ease-out-expo) both}
.l-btns .btn-lg:nth-child(6){animation:fdu .5s .9s var(--ease-out-expo) both}

/* ── LOGO — enhanced glow ── */
.l-logo svg{filter:drop-shadow(0 0 20px rgba(var(--t-rgb),.5)) drop-shadow(0 0 60px rgba(var(--tl-rgb),.2))}
@keyframes logoGlow{0%,100%{filter:drop-shadow(0 0 20px rgba(var(--t-rgb),.5)) drop-shadow(0 0 60px rgba(var(--tl-rgb),.2))}50%{filter:drop-shadow(0 0 35px rgba(var(--tl-rgb),.7)) drop-shadow(0 0 80px rgba(var(--tl-rgb),.3))}}

/* ── PRICE TAGS — subtle glow ── */
.cp,.bpn{text-shadow:0 0 20px rgba(var(--tl-rgb),.4)}
.flagship .cp,.flagship .ct{text-shadow:0 0 16px rgba(var(--gd-rgb),.25)}

/* ── ORDER CARD on payment — depth ── */
.ord{box-shadow:0 4px 20px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.06);transition:box-shadow .3s}

/* ── RESULT TABS — pill glow when active ── */
.res-tab.active{box-shadow:0 0 16px rgba(var(--t-rgb),.4),0 2px 8px rgba(0,0,0,.2)}

/* Enhanced scrollbar */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--t),var(--tl));border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--tl)}

/* ═══════════════════════════════════════════
   SKIN PASSPORT — Start Screen Header
   ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
   SKIN PASSPORT HEADER — Gold premium block
   ═══════════════════════════════════════════ */
.start-passport-hdr{
  background:linear-gradient(135deg,rgba(196,168,130,.13) 0%,rgba(212,184,146,.07) 100%);
  border:1px solid rgba(196,168,130,.32);
  border-radius:18px;
  padding:16px 18px;
  margin-bottom:14px;
  animation:fdu .5s ease both;
  text-align:start;
  box-shadow:0 4px 24px rgba(196,168,130,.1),inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;
  overflow:hidden;
}
.start-passport-hdr::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,184,146,.5),transparent);
}
[dir="rtl"] .start-passport-hdr{text-align:right}
.sph-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.sph-title{font-family:'Inter','Helvetica Neue',sans-serif;font-size:15px;font-weight:700;color:var(--gd);letter-spacing:.01em;flex:1}
.sph-pct{
  font-family:'Inter','Helvetica Neue',sans-serif;font-size:14px;font-weight:800;
  color:#fff;
  background:linear-gradient(135deg,rgba(196,168,130,.3),rgba(196,168,130,.15));
  border:1px solid rgba(196,168,130,.4);
  border-radius:20px;padding:2px 10px;letter-spacing:.02em;
}
.sph-toggle{font-size:12px;color:rgba(196,168,130,.5);margin-left:4px}
.sph-bar{height:5px;background:rgba(255,255,255,.08);border-radius:5px;overflow:hidden;margin-bottom:8px}
.sph-motiv-compact{font-size:11px;font-weight:500;color:rgba(196,168,130,.85);text-align:center;margin-bottom:0;line-height:1.4}
.sph-fill{
  height:100%;
  background:linear-gradient(90deg,#a07840,#c4a882,#e8d4a8,#c4a882);
  background-size:200% auto;
  border-radius:5px;
  transition:width .6s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 10px rgba(196,168,130,.45);
  animation:goldShimmer 3s linear infinite;
}
@keyframes goldShimmer{0%{background-position:200% center}100%{background-position:-200% center}}
.sph-text{font-size:12px;color:rgba(255,255,255,.45);text-align:center;margin:4px 0 8px}

/* Passport header — value proposition (always visible) */
.sph-value-prop{font-size:11px;font-weight:500;color:rgba(196,168,130,.7);text-align:center;margin:3px 0 6px;letter-spacing:.01em;line-height:1.3}

/* Passport header — explanation for new users */
.sph-explain{font-size:13px;line-height:1.6;color:rgba(255,255,255,.65);margin-bottom:10px;padding:12px 14px;background:rgba(196,168,130,.06);border:1px solid rgba(196,168,130,.15);border-radius:12px;animation:fdu .5s ease both}

/* Passport header — step roadmap */
.sph-steps{display:flex;gap:6px;margin-bottom:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0}
.sph-steps::-webkit-scrollbar{display:none}
.sph-step{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;cursor:pointer;transition:all .25s;-webkit-tap-highlight-color:transparent}
.sph-step:active{transform:scale(.95)}
@media(hover:hover){.sph-step:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15)}}
.sph-step-num{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:rgba(255,255,255,.35);transition:all .3s;flex-shrink:0}
.sph-step-label{font-size:10px;font-weight:600;color:rgba(255,255,255,.5);text-align:center;line-height:1.2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.sph-step-done{background:rgba(var(--t-rgb),.15);border-color:rgba(var(--t-rgb),.35)}
.sph-step-done .sph-step-num{background:rgba(var(--t-rgb),.3);border-color:var(--tl);color:var(--tl)}
.sph-step-done .sph-step-label{color:var(--tl)}
.sph-step-next{background:rgba(196,168,130,.1);border-color:rgba(196,168,130,.35);animation:recPulse 3s ease-in-out infinite}
.sph-step-next .sph-step-num{background:linear-gradient(135deg,#c4a882,#e8d4a8);border-color:#c4a882;color:#1a1a1a;box-shadow:0 0 8px rgba(196,168,130,.4)}
.sph-step-next .sph-step-label{color:rgba(212,184,146,.9);font-weight:700}

/* Action buttons row */
.sph-actions-row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.sph-profile-link{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 12px;
  background:linear-gradient(135deg,rgba(196,168,130,.18),rgba(196,168,130,.08));
  border:1px solid rgba(196,168,130,.35);border-radius:12px;
  color:#d4b892;font-family:'Inter','Helvetica Neue',sans-serif;
  font-size:12px;font-weight:600;cursor:pointer;
  transition:all .2s;white-space:nowrap;
}
.sph-profile-link:active{transform:scale(.97)}
@media(hover:hover){.sph-profile-link:hover{background:linear-gradient(135deg,rgba(196,168,130,.28),rgba(196,168,130,.14));border-color:rgba(196,168,130,.55)}}
.sph-profile-link-done{
  background:linear-gradient(135deg,rgba(196,168,130,.22),rgba(196,168,130,.1));
  border-color:rgba(196,168,130,.4);
}
.sph-view-all{
  display:flex;align-items:center;justify-content:center;
  padding:9px 12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);border-radius:12px;
  color:rgba(255,255,255,.5);font-family:'Inter','Helvetica Neue',sans-serif;
  font-size:12px;font-weight:500;cursor:pointer;
  transition:all .2s;white-space:nowrap;
}
.sph-view-all:active{transform:scale(.97)}
@media(hover:hover){.sph-view-all:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8)}}
.sph-dots{display:flex;gap:6px;justify-content:center;margin-bottom:6px}
.sph-dot{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;transition:all .3s;color:rgba(255,255,255,.3)}
.sph-dot.sph-done{background:rgba(var(--t-rgb),.25);border-color:var(--tl);color:var(--tl)}

/* ═══════════════════════════════════════════
   SKIN PASSPORT — Quiz Card States
   ═══════════════════════════════════════════ */
/* Step number now lives inside .qc-prog-row (no longer absolute) */
.qc-step{display:none}
.qc-prog-num{
  font-size:9px;font-weight:800;
  color:rgba(255,255,255,.2);
  letter-spacing:-.01em;line-height:1;
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.qc-done .qc-prog-num{color:rgba(46,200,122,.45)}
.qc-in-progress .qc-prog-num{color:rgba(var(--tl-rgb),.5)}
/* Completed quiz card — teal tinted, clearly "done" */
.qc-done{position:relative;background:rgba(var(--t-rgb),.12) !important;border-color:rgba(var(--t-rgb),.35) !important}
.qc-done .ct{color:var(--tl)}
.qc-done .cs{color:rgba(109,184,188,.6)}
.qc-done .qc-done-check{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#2a9d5c,#1e8449);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;z-index:5;line-height:24px;box-shadow:0 2px 8px rgba(30,132,73,.4)}
/* Done card — hide CSS sel-checkmark, .qc-done-check JS element covers it */
.qc-done.sel::after{display:none}
/* Recommended next quiz — bright pulsing border */
.qc-recommended{border-color:var(--gbr) !important;box-shadow:none;animation:none;background:var(--gb) !important}
@keyframes recPulse{0%,100%{box-shadow:0 0 16px rgba(var(--t-rgb),.2)}50%{box-shadow:0 0 28px rgba(var(--t-rgb),.4)}}
.qc-owned-badge{position:absolute;top:8px;left:8px;font-size:7.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--t),var(--tl));padding:2px 7px;border-radius:8px;z-index:4;box-shadow:0 1px 4px rgba(var(--t-rgb),.3)}
.qc-fomo-badge{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(135deg,rgba(255,90,40,.9),rgba(220,60,20,.9));border-radius:0 0 14px 14px;padding:4px 8px;display:flex;align-items:center;justify-content:center;gap:4px;z-index:6}
.qc-fomo-badge .fomo-txt{font-size:9px;font-weight:700;color:#fff;letter-spacing:.04em}
.qc-fomo-badge .fomo-clock{font-size:11px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.qc-done .qc-owned-badge{background:linear-gradient(135deg,#2a9d5c,#1e8449);box-shadow:0 1px 4px rgba(30,132,73,.35)}

/* ═══════════════════════════════════════════
   FUNNEL PROGRESS DOTS
   ═══════════════════════════════════════════ */
.fp-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.15);transition:all .3s}
.fp-dot.done{background:var(--t);border-color:var(--tl);box-shadow:0 0 6px rgba(var(--t-rgb),.4)}
.fp-dot.active{background:var(--tl);border-color:var(--tl);box-shadow:0 0 10px rgba(var(--tl-rgb),.5);transform:scale(1.2)}

/* ═══════════════════════════════════════════
   SKIN PASSPORT — Result Screen Card
   ═══════════════════════════════════════════ */
.result-passport-card{
  background:rgba(var(--t-rgb),.08);border:1px solid rgba(var(--t-rgb),.25);border-radius:16px;
  padding:20px;margin:16px auto;max-width:400px;animation:fdu .4s ease both
}
.sp-header{margin-bottom:12px}
.sp-title-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.sp-title{font-family:'Inter','Helvetica Neue',sans-serif;font-size:16px;font-weight:700;color:var(--wh);letter-spacing:.01em}
.sp-progress-text{font-size:11px;color:var(--mu)}
.sp-bar-wrap{height:4px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden;margin-bottom:14px}
.sp-bar{height:100%;background:linear-gradient(90deg,var(--t),var(--tl),#7cc4c8);border-radius:4px;transition:width .6s cubic-bezier(.4,0,.2,1);box-shadow:0 0 8px rgba(var(--tl-rgb),.5)}
.sp-slots{display:flex;flex-direction:column;gap:6px}
.sp-slot{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;transition:all .25s}
.sp-slot.sp-done{background:rgba(var(--t-rgb),.12);border-color:rgba(var(--t-rgb),.25)}
.sp-slot:not(.sp-done){cursor:pointer;border-color:rgba(var(--accent-rgb),.15)}
.sp-slot:not(.sp-done):active{background:rgba(var(--accent-rgb),.06)}
.sp-slot-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(255,255,255,.2)}
.sp-done .sp-slot-icon{color:var(--tl)}
.sp-slot-label{font-size:13px;font-weight:500;color:rgba(255,255,255,.45);flex:1}
.sp-done .sp-slot-label{color:rgba(255,255,255,.85);font-weight:600}
.sp-slot-result{font-size:11px;color:var(--tl);font-weight:600;max-width:140px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══════════════════════════════════════════
   SKIN PASSPORT — Action Buttons
   ═══════════════════════════════════════════ */
.sp-actions{display:flex;gap:6px;margin-top:14px}
.sp-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 8px;border:1px solid rgba(var(--t-rgb),.3);border-radius:10px;background:rgba(var(--t-rgb),.1);color:var(--tl);font-family:'Inter','Helvetica Neue',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:all .25s;white-space:nowrap}
@media(hover:hover){.sp-action-btn:hover{background:rgba(var(--t-rgb),.2);border-color:var(--tl);transform:translateY(-1px)}}
.sp-action-btn:active{transform:scale(.97)}

/* ═══════════════════════════════════════════
   BEFORE / AFTER — Progress Card
   ═══════════════════════════════════════════ */
.result-progress-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;
  padding:16px 18px;margin:14px auto;max-width:400px;animation:fdu .4s ease both
}

/* Reduced motion support */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .orb{animation:none !important}
  body::after{display:none}
}

/* ═══════════════════════════════════════════
   RTL SUPPORT (Hebrew)
   ═══════════════════════════════════════════ */
[dir="rtl"] .qc-step{right:auto;left:8px}
[dir="rtl"] .qc-badge{left:auto;right:14px}
[dir="rtl"] .opt.sel::after{left:auto;right:0}
[dir="rtl"] .opt:hover{transform:translateX(-4px)}
[dir="rtl"] .opt.sel{transform:translateX(-4px)}
[dir="rtl"] .sp-slot-result{text-align:left}
[dir="rtl"] .bk{direction:ltr}
[dir="rtl"] .sph-row{flex-direction:row-reverse}
[dir="rtl"] .sp-title-row{flex-direction:row-reverse}
[dir="rtl"] .qc-owned-badge{left:auto;right:8px}
[dir="rtl"] .qc-done .qc-done-check{right:auto;left:6px}
[dir="rtl"] .s-desc,[dir="rtl"] .sp-progress-text,[dir="rtl"] .sph-text{text-align:right}
[dir="rtl"] .skin-dna-logo{flex-direction:row-reverse}
[dir="rtl"] .skin-dna-row{flex-direction:row-reverse}
[dir="rtl"] .skin-dna-bottom{flex-direction:row-reverse}
[dir="rtl"] .skin-dna-code{letter-spacing:.1em;direction:ltr;text-align:center}
[dir="rtl"] .skin-dna-topbar{flex-direction:row-reverse}
[dir="rtl"] .paywall-close{right:auto;left:8px}
[dir="rtl"] .pw-sheet .paywall-close{right:auto;left:14px}
[dir="rtl"] .sub-badge{right:auto;left:12px}
[dir="rtl"] .paywall-preview-item{flex-direction:row-reverse;text-align:right}
[dir="rtl"] .paywall-preview-item::before{margin-right:0;margin-left:0}

/* ═══════════════════════════════════════════
   SAFE-AREA PADDING (iPhone notch/Dynamic Island)
   ═══════════════════════════════════════════ */
#lang-s{padding-top:calc(env(safe-area-inset-top,0px) + 40px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px)}
.ai{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 80px)}
#start-s .s-head{padding-top:calc(env(safe-area-inset-top,0px) + 48px)}
#quiz-s{padding-top:env(safe-area-inset-top,0px)}

/* ── Account badge (avatar top-left when signed in) ───────── */
#account-badge{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:50%;transform:translateX(-50%);z-index:300;width:36px;height:36px;border-radius:50%;border:2px solid rgba(91,165,169,.5);background:linear-gradient(135deg,rgba(91,165,169,.25),rgba(91,165,169,.1));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:none;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 4px 16px rgba(0,0,0,.3);transition:transform .2s,box-shadow .2s;}
#account-badge:active{transform:translateX(-50%) scale(.92);}
#account-badge img{width:32px;height:32px;border-radius:50%;object-fit:cover;}

/* ── Bottom nav bar ──────────────────────────────────────────── */
#bottom-nav button{min-height:44px;min-width:60px;}
#bottom-nav button:active{opacity:.7;}
/* When nav visible — push content up so it's not hidden behind nav */
body.has-nav .ai{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 80px + 60px);}
body.has-nav .sticky-passport{bottom:calc(env(safe-area-inset-bottom,0px) + 60px);}
/* Float FABs above bottom-nav so the navbar buttons stay tappable */
body.has-nav .dr-fab{bottom:calc(env(safe-area-inset-bottom,0px) + 60px + 16px) !important;}
body.has-nav .ai-fab{bottom:calc(env(safe-area-inset-bottom,0px) + 60px + 16px) !important;}

/* ═══════════════════════════════════════════
   TOUCH TARGETS & CONTRAST FIXES
   ═══════════════════════════════════════════ */
/* Ensure minimum 44px tap targets */
.sp-action-btn{min-height:44px;min-width:44px}
.bk{min-height:44px;min-width:44px}
.opt{min-height:48px}

/* Improve contrast on subtle text */
.cs{color:rgba(255,255,255,.6)}
.s-desc{color:rgba(255,255,255,.6)}
.sec{color:rgba(255,255,255,.4)}
.l-prompt{color:rgba(255,255,255,.45)}

/* ═══════════════════════════════════════════
   MOBILE SP-ACTIONS FIX — wrap on small screens
   ═══════════════════════════════════════════ */
@media(max-width:420px){
  .sp-actions{flex-wrap:wrap}
  .sp-action-btn{flex:1 1 calc(50% - 4px);font-size:10px;padding:10px 6px}
}

/* ═══════════════════════════════════════════
   PROFILE CARD — FREE quiz styling
   ═══════════════════════════════════════════ */
/* Profile banner — full-width like bundle card */
.qc-profile-banner{grid-column:1/-1;position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-radius:var(--rs);border:1.5px solid rgba(var(--tl-rgb),.45);background:linear-gradient(135deg,rgba(var(--t-rgb),.15),rgba(var(--tl-rgb),.06));backdrop-filter:blur(20px);cursor:pointer;transition:all .3s;overflow:visible}
.qc-profile-banner:hover{border-color:rgba(var(--tl-rgb),.65);background:linear-gradient(135deg,rgba(var(--t-rgb),.22),rgba(var(--tl-rgb),.1))}
.qc-profile-banner:active{transform:scale(.98)}
.qc-profile-banner .ci{width:36px;height:36px;flex-shrink:0}
.qc-profile-banner .ct{font-size:15px;font-weight:700}
.qc-profile-banner .cs{font-size:12px;color:var(--mu);margin-top:1px}
.qc-profile-left{display:flex;align-items:center;gap:12px}
.qc-badge-free{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--t),var(--tl));color:#fff;font-family:'Inter','Helvetica Neue',sans-serif;font-size:9px;font-weight:800;letter-spacing:.12em;padding:3px 12px;border-radius:20px;white-space:nowrap;z-index:3;box-shadow:0 2px 10px rgba(var(--t-rgb),.4)}
.cp-free{background:linear-gradient(135deg,var(--t),var(--tl));color:#fff!important;font-weight:700;border-radius:6px;padding:2px 8px;font-size:11px}
.qc-profile-banner .cp,.qc-profile-banner .cp-free{display:none!important}
.qc-profile-banner.sel{border-color:rgba(var(--tl-rgb),.7);background:linear-gradient(135deg,rgba(var(--t-rgb),.22),rgba(var(--tl-rgb),.1));box-shadow:0 0 22px rgba(var(--t-rgb),.3),0 0 50px rgba(var(--t-rgb),.1);transform:translateY(-2px);animation:selPulse 3s ease-in-out infinite}
.qc-profile-banner.profile-done{opacity:.72;pointer-events:none;border-color:rgba(var(--tl-rgb),.3)}
.qc-profile-banner.profile-done .qc-badge-free{background:rgba(47,118,122,.6);box-shadow:none}
.qc-profile-banner.profile-done .cs{color:var(--tl)!important;font-weight:600}

/* ═══════════════════════════════════════════
   PAYWALL OVERLAY
   ═══════════════════════════════════════════ */
.paywall-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background:rgba(5,18,22,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:flex-start;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 8px) 14px calc(env(safe-area-inset-bottom,0px) + 8px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.paywall-card{width:100%;max-width:400px;border-radius:24px;background:linear-gradient(160deg,rgba(20,40,45,.95),rgba(10,25,30,.98));border:1px solid rgba(var(--tl-rgb),.2);padding:24px 18px;text-align:center;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.5);margin:auto 0}
.paywall-icon{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,rgba(var(--t-rgb),.2),rgba(var(--tl-rgb),.1));border:1px solid rgba(var(--tl-rgb),.3);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.paywall-title{font-family:'Inter','Helvetica Neue',sans-serif;font-size:clamp(18px,4.5vw,22px);font-weight:700;color:#fff;margin-bottom:8px;line-height:1.3}
.paywall-sub{font-family:'Inter','Helvetica Neue',sans-serif;font-size:clamp(12px,3vw,14px);color:rgba(255,255,255,.55);line-height:1.5;margin-bottom:20px}
.paywall-preview{text-align:start;padding:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;margin-bottom:20px}
.paywall-preview-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tl);margin-bottom:10px}
.paywall-preview-item{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.65);padding:5px 0}
.paywall-preview-item::before{content:'✓';color:var(--tl);font-weight:700;font-size:14px}
.paywall-divider{height:1px;background:rgba(255,255,255,.08);margin:16px 0}
.paywall-timer{background:linear-gradient(135deg,rgba(220,50,50,.12),rgba(180,40,40,.06));border:1px solid rgba(220,60,60,.25);border-radius:12px;padding:12px;margin-bottom:20px}
.paywall-timer-label{font-size:9px;font-weight:700;letter-spacing:1.5px;color:rgba(255,255,255,.45);margin-bottom:4px}
.paywall-timer-clock{font-size:28px;font-weight:700;color:#ff3333;letter-spacing:2px}
.paywall-timer-hint{font-size:10px;color:rgba(255,255,255,.35);margin-top:4px}
.paywall-btn{width:100%;padding:16px;border:none;border-radius:50px;font-family:'Inter','Helvetica Neue',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:all .25s;margin-bottom:8px}
.paywall-btn-primary{background:linear-gradient(160deg,var(--accent-l) 0%,var(--accent) 55%,var(--accent-d) 100%);color:#1a1000;box-shadow:0 8px 28px rgba(var(--accent-rgb),.5),inset 0 1.5px 0 rgba(255,255,255,.3)}
.paywall-btn-primary:active{transform:scale(.97);box-shadow:0 3px 12px rgba(var(--accent-rgb),.3)}
.paywall-btn-sub{background:linear-gradient(135deg,rgba(255,200,50,.15),rgba(255,180,30,.08));border:1.5px solid rgba(255,200,50,.35);color:#ffd566}
.paywall-btn-sub .paywall-best{display:inline-block;background:linear-gradient(135deg,#ffc832,#ffb020);color:#1a1a2e;font-size:8px;font-weight:800;letter-spacing:.1em;padding:2px 7px;border-radius:10px;margin-left:6px;vertical-align:middle}
.paywall-social{font-size:11px;color:rgba(255,255,255,.35);margin-top:12px;text-align:center}
.paywall-close{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:none;color:rgba(255,255,255,.4);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* Live social proof */
.paywall-live{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:rgba(255,255,255,.5);margin-bottom:12px}
.paywall-live-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}

/* Social proof */
.pw-social-proof{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 14px;margin-bottom:16px;text-align:center}
.pw-sp-count{font-size:11px;font-weight:700;letter-spacing:.5px;color:rgba(255,255,255,.5);margin-bottom:6px}
.pw-sp-user{font-size:13px;color:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;gap:6px}
.pw-sp-dot{width:7px;height:7px;border-radius:50%;background:#4cde80;flex-shrink:0;box-shadow:0 0 6px #4cde80}
/* 3-tier pricing */
.pw-tiers{display:flex;gap:8px;margin-bottom:14px;align-items:stretch}
.pw-tiers-2col .pw-tier{flex:1}
.pw-fomo-save{background:rgba(255,100,60,.2)!important;border-color:rgba(255,100,60,.4)!important;color:#ff7a50!important}
.pw-tier{flex:1;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.12);border-radius:16px;padding:16px 8px 14px;text-align:center;cursor:pointer;transition:all .25s;position:relative;display:flex;flex-direction:column;align-items:center;-webkit-tap-highlight-color:transparent}
.pw-tier:active{transform:scale(.96);border-color:rgba(var(--tl-rgb),.4)}
@media(hover:hover){.pw-tier:hover{border-color:rgba(var(--tl-rgb),.45);background:rgba(255,255,255,.08)}}
.pw-tier-popular{flex:1.3;background:linear-gradient(165deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.04));border:2px solid rgba(var(--accent-rgb),.55);box-shadow:0 4px 24px rgba(var(--accent-rgb),.25),inset 0 1px 0 rgba(255,255,255,.08);padding:18px 10px 14px;z-index:1;transform:scale(1.03)}
.pw-tier-tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--accent-d),var(--accent));color:#1a1000;font-size:9px;font-weight:800;letter-spacing:.12em;padding:3px 10px;border-radius:10px;white-space:nowrap;text-transform:uppercase}
.pw-tier-tag-sub{background:linear-gradient(135deg,#ffc832,#ffb020);color:#1a1a2e}
.pw-tier-label{font-size:10px;font-weight:700;color:rgba(255,255,255,.55);margin-bottom:6px;letter-spacing:.03em}
.pw-tier-popular .pw-tier-label{font-size:11px;color:rgba(255,255,255,.8)}
.pw-tier-anchor{font-size:11px;color:rgba(255,255,255,.25);text-decoration:line-through;margin-bottom:1px;line-height:1}
.pw-tier-price{font-size:20px;font-weight:800;color:#fff;line-height:1.2}
.pw-tier-popular .pw-tier-price{font-size:26px;color:var(--accent-l);text-shadow:0 0 20px rgba(var(--accent-rgb),.4)}
.pw-tier-price-sm{font-size:16px}
.pw-tier-per{font-size:10px;font-weight:500;color:rgba(255,255,255,.4)}
.pw-tier-save{display:inline-block;background:linear-gradient(135deg,rgba(74,222,128,.18),rgba(74,222,128,.06));border:1px solid rgba(74,222,128,.3);color:#4ade80;font-size:9px;font-weight:800;padding:2px 8px;border-radius:8px;margin-top:5px}
.pw-tier-unit{font-size:9px;color:rgba(255,255,255,.35);margin-top:3px;line-height:1.2}
.pw-tier-popular .pw-tier-unit{color:rgba(var(--accent-rgb),.7)}
.pw-tier-desc{font-size:9px;color:rgba(255,255,255,.35);margin-top:auto;padding-top:6px;line-height:1.3}
.pw-tier-popular .pw-tier-desc{font-size:10px;color:rgba(255,255,255,.5)}
.pw-tier-btn{width:100%;margin-top:10px;padding:9px 0;border:1px solid rgba(255,255,255,.15);border-radius:8px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}
.pw-tier-btn:active{transform:scale(.96)}
.pw-tier-btn-pop{background:linear-gradient(160deg,var(--accent-l) 0%,var(--accent) 55%,var(--accent-d) 100%);border-color:transparent;color:#1a1000;font-size:13px;font-weight:700;padding:10px 0}

/* Instagram discount on paywall */
.pw-ig-disc{margin-bottom:14px;padding:12px;background:rgba(var(--t-rgb),.06);border:1px solid rgba(var(--t-rgb),.15);border-radius:12px}
.pw-ig-disc a{transition:opacity .2s}
.pw-ig-disc a:hover{opacity:.8}
.pw-ig-disc input{font-family:'Inter','Helvetica Neue',sans-serif;min-height:44px}
.pw-ig-disc input::placeholder{color:rgba(255,255,255,.3)}
.pw-ig-disc button{transition:all .2s;font-family:'Inter','Helvetica Neue',sans-serif}
.pw-ig-disc button:active{transform:scale(.95)}

/* Promo code input */
.pw-promo{margin-top:14px;text-align:center}
.pw-promo-toggle{font-size:12px;color:rgba(255,255,255,.4);cursor:pointer;transition:color .2s;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.pw-promo-toggle:hover{color:rgba(255,255,255,.6)}
.pw-promo-form{display:none;flex-direction:row;gap:8px;margin-top:10px;align-items:center}
.pw-promo.open .pw-promo-form{display:flex}
.pw-promo-input{flex:1;padding:10px 14px;min-height:44px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:12px;color:#fff;font-family:'Inter','Helvetica Neue',sans-serif;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;outline:none;transition:border-color .25s}
.pw-promo-input:focus{border-color:var(--tl)}
.pw-promo-input::placeholder{color:rgba(255,255,255,.25);text-transform:none;letter-spacing:normal;font-weight:400}
.pw-promo-input:disabled{opacity:.5}
.pw-promo-btn{padding:10px 18px;min-height:44px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--t),var(--tl));color:#fff;font-family:'Inter','Helvetica Neue',sans-serif;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .25s}
.pw-promo-btn:active{transform:scale(.97)}
.pw-promo-msg{font-size:12px;margin-top:8px;min-height:16px;transition:all .3s}
.pw-promo-ok{color:#4ade80}
.pw-promo-fail{color:#ff5252}

/* Blurred result behind paywall */
/* Paywall blur: apply to each section individually, not the parent.
   filter:none on a child cannot cancel a parent's filter — so we blur
   the children directly and leave .res-top (result type header) sharp
   as the "hook" that shows what result they're about to unlock. */
.result-blurred #result-s{pointer-events:none;user-select:none;position:relative}
.result-blurred #result-s>*:not(.res-top){filter:blur(7px);transition:filter .4s ease}
/* Gradient fade at the boundary between sharp header and blurred content */
.result-blurred #result-s::after{content:'';position:absolute;left:0;right:0;top:100%;height:0;pointer-events:none}

/* ═══════════════════════════════════════════
   PROFILE RESULT SCREEN
   ═══════════════════════════════════════════ */
/* Profile Result — Patient Card */
.profile-result-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9998;background:rgba(5,18,22,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:flex-start;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px calc(env(safe-area-inset-bottom,0px) + 12px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.prc-card{width:100%;max-width:400px;border-radius:20px;background:linear-gradient(160deg,rgba(20,40,45,.97),rgba(10,25,30,.99));border:1px solid rgba(var(--tl-rgb),.2);padding:20px 16px;text-align:start;box-shadow:0 20px 60px rgba(0,0,0,.5);margin:auto 0;position:relative}
.prc-close-btn{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:none;background:rgba(255,255,255,.08);color:rgba(255,255,255,.45);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;z-index:1}
.prc-close-btn:hover{background:rgba(255,255,255,.15);color:rgba(255,255,255,.8)}
/* Header — badge + title side by side */
.prc-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.prc-badge{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,rgba(var(--t-rgb),.3),rgba(var(--tl-rgb),.15));border:2px solid var(--tl);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--tl);flex-shrink:0;box-shadow:0 0 16px rgba(var(--t-rgb),.3)}
.prc-title{font-family:'Inter','Helvetica Neue',sans-serif;font-size:18px;font-weight:700;color:#fff;line-height:1.2}
.prc-subtitle{font-size:12px;color:rgba(255,255,255,.5);margin-top:2px}
/* Progress bar */
.prc-progress{margin-bottom:14px}
.prc-progress-segs{display:flex;gap:3px;margin-bottom:4px}
.prc-seg{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.08)}
.prc-seg.done{background:linear-gradient(135deg,var(--t),var(--tl));box-shadow:0 0 6px rgba(var(--t-rgb),.4)}
.prc-progress-label{font-size:11px;color:var(--tl);font-weight:600;letter-spacing:.04em}
/* Fields — 2-column grid */
.prc-fields{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.prc-field{padding:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;min-width:0}
.prc-field-icon{font-size:16px;margin-bottom:4px}
.prc-field-label{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.35);margin-bottom:2px}
.prc-field-val{font-size:13px;font-weight:600;color:rgba(255,255,255,.85);overflow:hidden;text-overflow:ellipsis}
/* Wide field for concern (3rd item, spans full width) */
.prc-field:nth-child(3){grid-column:1/-1}
/* Unlock preview */
.prc-unlocks{background:rgba(var(--t-rgb),.08);border:1px solid rgba(var(--t-rgb),.18);border-radius:12px;padding:10px 12px;margin-bottom:14px}
.prc-unlocks-title{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tl);margin-bottom:6px}
.prc-unlocks-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
.prc-unlock-item{display:flex;align-items:center;gap:5px;font-size:11px;color:rgba(255,255,255,.55);padding:3px 0;line-height:1.3}
/* CTA + hook */
.profile-cta{width:100%;padding:14px;border:none;border-radius:50px;background:linear-gradient(135deg,var(--t),var(--tl));font-family:'Inter','Helvetica Neue',sans-serif;font-size:15px;font-weight:700;color:#fff;cursor:pointer;box-shadow:0 8px 28px rgba(var(--t-rgb),.4);transition:all .25s}
.profile-cta:active{transform:scale(.97)}
.profile-hook{font-size:11px;color:rgba(255,255,255,.35);margin-top:10px;line-height:1.4;text-align:center}

/* Mobile inline start button (under selected card) */
/* inline-start-btn lives OUTSIDE the grid — no layout disruption */
.inline-start-btn{display:block;width:100%;padding:15px;border:none;border-radius:50px;background:linear-gradient(160deg,var(--accent-l) 0%,var(--accent) 55%,var(--accent-d) 100%);font-family:'Inter','Helvetica Neue',sans-serif;font-size:15px;font-weight:700;color:#1a1000;cursor:pointer;box-shadow:0 6px 24px rgba(var(--accent-rgb),.45),inset 0 1px 0 rgba(255,255,255,.25);opacity:0;transform:translateY(10px);transition:opacity .28s ease,transform .28s cubic-bezier(.16,1,.3,1);margin:8px 0 2px}
.inline-start-btn.inline-start-visible{opacity:1;transform:translateY(0)}
.inline-start-btn:active{transform:scale(.97);transition-duration:.1s}
@media(min-width:601px){.inline-start-btn{display:none!important}}

/* ═══ PHOTO CAPTURE OVERLAY (fullscreen) ═══ */
@keyframes pqDotBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
@keyframes pcoIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes pcoOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(12px)}}
@keyframes pcoRingPulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@keyframes pcoGlow{0%,100%{opacity:.4}50%{opacity:.85}}
@keyframes pcoScanLine{0%{top:-5px;opacity:0}4%{opacity:1}50%{top:calc(100% + 5px);opacity:.7}96%{opacity:1}100%{top:-5px;opacity:0}}
@keyframes pcoFaceIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}

.pco-overlay{
  position:fixed;inset:0;z-index:2000;
  background:linear-gradient(180deg,#030c10 0%,#061318 55%,#040f14 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:max(env(safe-area-inset-top,0px),24px) 24px max(env(safe-area-inset-bottom,0px),28px);
  animation:pcoIn .42s cubic-bezier(.22,1,.36,1) both;
  overflow:hidden;
}
.pco-overlay::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 40% at 50% 55%,rgba(47,180,140,.07) 0%,transparent 70%);
  pointer-events:none;
}
.pco-overlay.pco-exit{animation:pcoOut .28s ease both}

/* ── Top section ── */
.pco-top{width:100%;display:flex;flex-direction:column;align-items:center;gap:11px;padding-top:4px}
.pco-ai-pill{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:900;letter-spacing:.2em;color:#3be89d;background:rgba(59,232,157,.08);border:1px solid rgba(59,232,157,.22);padding:6px 18px;border-radius:20px}
.pco-ai-dot{width:7px;height:7px;border-radius:50%;background:#3be89d;box-shadow:0 0 8px rgba(59,232,157,.8);animation:pqDotBlink 1.2s ease infinite}
.pco-title{font-size:24px;font-weight:900;color:#fff;text-align:center;line-height:1.2;letter-spacing:-.02em}
.pco-sub{font-size:13px;color:rgba(255,255,255,.42);text-align:center;line-height:1.5;max-width:280px}

/* ── Face zone ── */
.pco-face-zone{
  position:relative;flex-shrink:0;
  width:min(210px,56vw);height:min(210px,56vw);
  display:flex;align-items:center;justify-content:center;
}
.pco-face-glow{
  position:absolute;inset:-24px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,180,140,.1) 0%,transparent 68%);
  animation:pcoGlow 3s ease infinite;pointer-events:none;
}
.pco-face-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px dashed rgba(59,232,157,.38);
  animation:pcoRingPulse 2.6s ease infinite;
}
.pco-face-ring2{
  position:absolute;inset:-12px;border-radius:50%;
  border:1px solid rgba(59,232,157,.1);
  animation:pcoRingPulse 2.6s ease .9s infinite;
}
.pco-face-inner{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:rgba(47,100,100,.08);
  display:flex;align-items:center;justify-content:center;
}
.pco-face-placeholder{color:rgba(59,232,157,.28);animation:pcoFaceIn .6s ease both}
.pco-scan-guide{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none}
.pco-scan-line{position:absolute;left:0;right:0;height:3px;top:-5px;background:linear-gradient(90deg,transparent,rgba(59,232,157,.85),transparent);box-shadow:0 0 12px rgba(59,232,157,.9),0 0 28px rgba(59,232,157,.4);animation:pcoScanLine 2.2s ease-in-out infinite}
/* Corner brackets */
.pco-corner{position:absolute;width:20px;height:20px}
.pco-tl{top:0;left:0;border-top:2px solid #3be89d;border-left:2px solid #3be89d;border-radius:3px 0 0 0}
.pco-tr{top:0;right:0;border-top:2px solid #3be89d;border-right:2px solid #3be89d;border-radius:0 3px 0 0}
.pco-bl{bottom:0;left:0;border-bottom:2px solid #3be89d;border-left:2px solid #3be89d;border-radius:0 0 0 3px}
.pco-br{bottom:0;right:0;border-bottom:2px solid #3be89d;border-right:2px solid #3be89d;border-radius:0 0 3px 0}
/* Photo preview inside face zone */
.pco-preview-img{
  position:absolute;inset:0;width:100%;height:100%;border-radius:50%;
  object-fit:cover;display:none;z-index:2;
  border:2px solid #3be89d;box-shadow:0 0 32px rgba(59,232,157,.45);
  animation:pcoFaceIn .35s ease both;
}

/* ── Buttons ── */
.pco-btns{width:100%;max-width:340px;display:flex;flex-direction:column;gap:11px}
.pco-btn-cam{
  width:100%;padding:18px 20px;border:none;border-radius:18px;
  font-family:'Inter','Helvetica Neue',sans-serif;font-size:15px;font-weight:800;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:11px;
  background:linear-gradient(135deg,#1b6e5e 0%,#27b07a 55%,#3be89d 100%);
  color:#fff;box-shadow:0 10px 28px rgba(59,232,157,.28);
  letter-spacing:.01em;transition:all .18s;
}
.pco-btn-cam:active{transform:scale(.97);box-shadow:0 4px 14px rgba(59,232,157,.18)}
.pco-btn-gal{
  width:100%;padding:16px 20px;border-radius:16px;
  font-family:'Inter','Helvetica Neue',sans-serif;font-size:14px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.1);transition:all .18s;
}
.pco-btn-gal:active{transform:scale(.97);background:rgba(255,255,255,.09)}
.pco-skip-btn{
  background:none;border:none;font-family:'Inter','Helvetica Neue',sans-serif;
  font-size:13px;color:rgba(255,255,255,.28);cursor:pointer;
  padding:6px;text-align:center;transition:color .2s;width:100%;
}
.pco-skip-btn:active{color:rgba(255,255,255,.55)}
.pco-privacy{font-size:10.5px;color:rgba(255,255,255,.16);text-align:center;letter-spacing:.02em}

/* ═══ PHOTO ANALYSIS OVERLAY ═══ */
@keyframes paOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes paOverlayOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.04)}}
@keyframes paScanLine{0%{top:0%;opacity:1}88%{top:calc(100% - 3px);opacity:1}89%{top:calc(100% - 3px);opacity:0}90%{top:0;opacity:0}100%{top:0%;opacity:1}}
@keyframes paBracketIn{0%{opacity:0;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
@keyframes paGlowPulse{0%,100%{box-shadow:0 0 0 1px rgba(47,200,150,.5),0 0 24px rgba(47,200,150,.3)}50%{box-shadow:0 0 0 1px rgba(47,200,150,.8),0 0 50px rgba(47,200,150,.5),0 0 100px rgba(47,200,150,.12)}}
@keyframes paDotPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.7}50%{transform:translate(-50%,-50%) scale(2.2);opacity:1}}
@keyframes paCompleteIn{0%{opacity:0;transform:translateY(12px) scale(.92)}60%{opacity:1;transform:translateY(-4px) scale(1.03)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes paGridFade{0%{opacity:0}40%{opacity:1}80%{opacity:.7}100%{opacity:.3}}
@keyframes paAiBlink{0%,100%{opacity:1}50%{opacity:.3}}
.pa-overlay{position:fixed;inset:0;z-index:9999;background:rgba(4,14,18,.97);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden;animation:paOverlayIn .4s ease both}
.pa-overlay.pa-exit{animation:paOverlayOut .5s ease both}
.pa-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.pa-content{position:relative;z-index:1;width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;padding:env(safe-area-inset-top,20px) 20px 20px;gap:16px;height:100%;overflow-y:auto}
.pa-header{display:flex;align-items:center;gap:10px;align-self:flex-start;margin-top:8px}
.pa-ai-pill{background:rgba(47,180,140,.18);border:1px solid rgba(47,180,140,.4);border-radius:20px;padding:4px 12px;font-size:10px;font-weight:900;letter-spacing:.18em;color:#3be89d;display:flex;align-items:center;gap:6px}
.pa-ai-blink{animation:paAiBlink 1.1s ease infinite}
.pa-scanning-txt{font-size:10px;font-weight:800;letter-spacing:.14em;color:rgba(47,200,150,.7)}
.pa-photo-wrap{position:relative;width:min(220px,62vw);height:min(220px,62vw);border-radius:16px;overflow:hidden;animation:paGlowPulse 2.4s ease-in-out infinite;flex-shrink:0}
.pa-photo-img{width:100%;height:100%;object-fit:cover;display:block}
.pa-scan-line{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent 0%,rgba(47,200,150,.1) 10%,rgba(47,200,150,.9) 50%,rgba(47,200,150,.1) 90%,transparent 100%);box-shadow:0 0 10px rgba(47,200,150,.8),0 0 24px rgba(47,200,150,.4);animation:paScanLine 1.8s linear infinite;z-index:3}
.pa-corner{position:absolute;width:22px;height:22px;z-index:4;animation:paBracketIn .5s ease-out both}
.pa-tl{top:0;left:0;border-top:2.5px solid #3be89d;border-left:2.5px solid #3be89d;border-radius:3px 0 0 0;animation-delay:.1s}
.pa-tr{top:0;right:0;border-top:2.5px solid #3be89d;border-right:2.5px solid #3be89d;border-radius:0 3px 0 0;animation-delay:.2s}
.pa-bl{bottom:0;left:0;border-bottom:2.5px solid #3be89d;border-left:2.5px solid #3be89d;border-radius:0 0 0 3px;animation-delay:.15s}
.pa-br{bottom:0;right:0;border-bottom:2.5px solid #3be89d;border-right:2.5px solid #3be89d;border-radius:0 0 3px 0;animation-delay:.25s}
.pa-grid-overlay{position:absolute;inset:0;background:linear-gradient(rgba(47,180,140,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(47,180,140,.06) 1px,transparent 1px);background-size:22px 22px;z-index:2;animation:paGridFade 2s ease both}
.pa-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(59,232,157,.9);box-shadow:0 0 8px rgba(59,232,157,.9),0 0 16px rgba(59,232,157,.4);transform:translate(-50%,-50%);animation:paDotPulse 1.8s ease-in-out infinite;z-index:5}
.pa-dot:nth-child(2){animation-delay:.3s}.pa-dot:nth-child(3){animation-delay:.6s}.pa-dot:nth-child(4){animation-delay:.9s}.pa-dot:nth-child(5){animation-delay:1.2s}.pa-dot:nth-child(6){animation-delay:1.5s}
.pa-dets{width:100%;display:flex;flex-direction:column;gap:8px}
.pa-det{background:rgba(47,118,122,.1);border:1px solid rgba(47,118,122,.2);border-radius:10px;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;opacity:0;transform:translateX(-14px);transition:opacity .4s ease,transform .4s ease}
.pa-det.pa-det-visible{opacity:1;transform:translateX(0)}
.pa-det-key{font-size:11px;color:rgba(255,255,255,.5);font-weight:600;white-space:nowrap;flex-shrink:0}
.pa-det-right{flex:1;display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0}
.pa-det-val{font-size:12px;font-weight:800;color:#3be89d;white-space:nowrap}
.pa-det-bar{width:100%;height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.pa-det-bar-fill{height:100%;background:linear-gradient(90deg,var(--t),#3be89d);border-radius:2px;transition:width .8s cubic-bezier(.16,1,.3,1)}
.pa-progress-area{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px}
.pa-pct-num{font-size:32px;font-weight:900;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.pa-pbar-wrap{width:100%;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.pa-pbar-fill{height:100%;background:linear-gradient(90deg,var(--t),#3be89d);border-radius:2px;transition:width .1s linear;width:0%}
.pa-status-txt{font-size:12px;color:rgba(255,255,255,.4);letter-spacing:.06em;font-weight:600}
.pa-complete-wrap{width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;pointer-events:none}
.pa-complete-wrap.pa-complete-visible{opacity:1;animation:paCompleteIn .6s var(--ease-out-back) both}
.pa-complete-text{font-size:15px;font-weight:900;letter-spacing:.12em;color:#3be89d;text-shadow:0 0 20px rgba(59,232,157,.6)}
.pa-complete-sub{font-size:12px;color:rgba(255,255,255,.45)}
.pa-overlay.pa-done .pa-photo-wrap{animation:none;box-shadow:0 0 0 1px #3be89d,0 0 40px rgba(59,232,157,.5),0 0 80px rgba(59,232,157,.2)}

/* ── Profile tip card ── */
.prc-tip{background:linear-gradient(135deg,rgba(47,118,122,.15),rgba(47,180,140,.08));border:1px solid rgba(47,150,122,.3);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;margin-bottom:2px}
.prc-tip-icon{font-size:22px;flex-shrink:0;margin-top:1px}
.prc-tip-title{font-size:11px;font-weight:800;color:var(--tl);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
.prc-tip-text{font-size:13px;line-height:1.55;color:rgba(255,255,255,.72)}

/* Report download button — prominent */
#t-dl-report{background:linear-gradient(135deg,#c4a882,#d4b892)!important;color:#0b2c30!important;box-shadow:0 8px 28px rgba(var(--gd-rgb),.45);font-size:17px!important;font-weight:800!important;letter-spacing:.02em;animation:pulse-report 2s ease-in-out infinite}
@keyframes pulse-report{0%,100%{box-shadow:0 8px 28px rgba(var(--gd-rgb),.45)}50%{box-shadow:0 8px 36px rgba(var(--gd-rgb),.7)}}
@keyframes igShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
#t-dl-report:active{transform:scale(.97);animation:none}

/* Multi-select hint + checkbox style */
.multi-hint{font-size:11px;color:rgba(255,255,255,.4);text-align:center;margin-bottom:8px;font-style:italic}
.opt-multi .orad{border-radius:4px!important}
.opt-multi.sel .orad{border-radius:4px!important}
/* Exact age input */
.age-exact-wrap{margin-top:12px}
.age-exact-sep{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.age-exact-sep::before,.age-exact-sep::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1)}
.age-exact-sep span{font-size:11px;color:rgba(255,255,255,.3);white-space:nowrap;font-style:italic}
.age-exact-input{width:100%;box-sizing:border-box;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 18px;font-size:17px;font-weight:600;color:#fff;outline:none;text-align:center;font-family:inherit;-moz-appearance:textfield;transition:border-color .2s,background .2s}
.age-exact-input::-webkit-inner-spin-button,.age-exact-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.age-exact-input::placeholder{color:rgba(255,255,255,.25);font-weight:400;font-size:14px}
.age-exact-input:focus{border-color:rgba(91,165,169,.6);background:rgba(91,165,169,.07)}

/* ═══════════════════════════════════════════
   WELCOME MODAL
   ═══════════════════════════════════════════ */
.welcome-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;background:rgba(5,18,22,.96);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .4s ease}
.welcome-modal-visible{opacity:1}
.welcome-modal-hiding{opacity:0}
.welcome-modal-card{width:100%;max-width:380px;max-height:calc(100dvh - 32px);overflow-y:auto;overflow-x:hidden;border-radius:24px;background:linear-gradient(170deg,rgba(16,38,42,.99) 0%,rgba(10,28,32,1) 50%,rgba(14,34,38,.99) 100%);border:1px solid rgba(var(--tl-rgb),.18);padding:32px 24px 28px;text-align:center;position:relative;box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 0 1px rgba(var(--tl-rgb),.08),inset 0 1px 0 rgba(255,255,255,.04);transform:translateY(16px) scale(.97);transition:transform .4s cubic-bezier(.16,1,.3,1);-ms-overflow-style:none;scrollbar-width:none}
.welcome-modal-card::-webkit-scrollbar{display:none}
.welcome-modal-card::before{content:'';position:absolute;top:-60px;left:-40px;width:160px;height:160px;background:radial-gradient(circle,rgba(var(--t-rgb),.2) 0%,transparent 70%);pointer-events:none}
.welcome-modal-card::after{content:'';position:absolute;bottom:-40px;right:-40px;width:140px;height:140px;background:radial-gradient(circle,rgba(var(--gd-rgb),.1) 0%,transparent 70%);pointer-events:none}
.welcome-modal-visible .welcome-modal-card{transform:translateY(0) scale(1)}
.welcome-modal-close{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.3);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:2}
.welcome-modal-close:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
.welcome-modal-emoji{font-size:48px;margin-bottom:16px;position:relative;z-index:1;animation:welcomePulse 3s ease-in-out infinite;filter:drop-shadow(0 4px 16px rgba(var(--gd-rgb),.25))}
@keyframes welcomePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.welcome-modal-hi{font-family:'Inter','Helvetica Neue',sans-serif;font-size:20px;font-weight:700;color:#fff;margin-bottom:2px;position:relative;z-index:1}
.welcome-modal-title{font-family:'Inter','Helvetica Neue',sans-serif;font-size:22px;font-weight:800;color:#fff;line-height:1.3;margin-bottom:10px;background:linear-gradient(135deg,#fff 0%,#c4a882 60%,var(--tl) 100%);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:welcomeTitleShift 4s ease-in-out infinite alternate;position:relative;z-index:1}
@keyframes welcomeTitleShift{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.welcome-modal-sub{font-family:'Inter','Helvetica Neue',sans-serif;font-size:13px;color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:20px;position:relative;z-index:1;max-width:320px;margin-left:auto;margin-right:auto}
.welcome-modal-what{font-family:'Inter','Helvetica Neue',sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tl);margin-bottom:10px;position:relative;z-index:1;opacity:.7}
.welcome-modal-items{text-align:start;margin-bottom:16px;position:relative;z-index:1;background:rgba(255,255,255,.02);border-radius:14px;padding:6px 14px;border:1px solid rgba(255,255,255,.05)}
.welcome-modal-item{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:rgba(255,255,255,.7);padding:9px 0;line-height:1.45;border-bottom:1px solid rgba(255,255,255,.04)}
.welcome-modal-item:last-child{border-bottom:none}
.welcome-modal-check{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,rgba(var(--t-rgb),.25),rgba(var(--t-rgb),.15));border:1px solid rgba(var(--t-rgb),.35);color:var(--tl);font-weight:700;font-size:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px}
.welcome-modal-reward{font-size:12px;color:#c4a882;font-weight:600;margin-bottom:20px;padding:12px 16px;background:linear-gradient(135deg,rgba(var(--gd-rgb),.08),rgba(var(--gd-rgb),.03));border:1px solid rgba(var(--gd-rgb),.18);border-radius:12px;position:relative;z-index:1}
.welcome-modal-btn{width:100%;padding:16px;border:none;border-radius:14px;background:linear-gradient(135deg,var(--t),#3a9ca0,var(--tl));background-size:200% 200%;font-family:'Inter','Helvetica Neue',sans-serif;font-size:16px;font-weight:700;color:#fff;cursor:pointer;box-shadow:0 8px 28px rgba(var(--t-rgb),.4);transition:all .25s;position:relative;overflow:hidden;z-index:1;animation:welcomeBtnGlow 3s ease-in-out infinite alternate;letter-spacing:.01em}
@keyframes welcomeBtnGlow{0%{background-position:0% 50%;box-shadow:0 8px 28px rgba(var(--t-rgb),.4)}100%{background-position:100% 50%;box-shadow:0 10px 36px rgba(var(--t-rgb),.55)}}
.welcome-modal-btn:active{transform:scale(.97)}
.welcome-modal-btn::after{content:'';position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transform:rotate(25deg);animation:welcomeShine 3s ease-in-out infinite}
@keyframes welcomeShine{0%,100%{left:-60%}50%{left:120%}}
.welcome-modal-skip{font-size:12px;color:rgba(255,255,255,.25);margin-top:16px;cursor:pointer;transition:color .2s;letter-spacing:.02em}
.welcome-modal-skip:hover{color:rgba(255,255,255,.45)}

/* Gamification — motivational text in passport header */
.sph-motiv{font-size:12px;font-weight:600;color:#d4b892;margin-top:6px;padding:8px 14px;background:rgba(var(--gd-rgb),.1);border:1px solid rgba(var(--gd-rgb),.2);border-radius:10px;animation:motivFadeIn .5s ease}
@keyframes motivFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════
   SHARE & REFERRAL BLOCK
   ═══════════════════════════════════════════ */
.share-block{margin-top:20px;margin-bottom:60px;display:flex;flex-direction:column;gap:10px;max-width:520px;margin-left:auto;margin-right:auto;padding:0 16px;box-sizing:border-box}
.share-row{display:flex;align-items:center;gap:14px;padding:14px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;cursor:pointer;transition:all .25s}
.share-row:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.share-row:active{transform:scale(.98)}
.share-row-gold{background:rgba(var(--gd-rgb),.06);border-color:rgba(var(--gd-rgb),.18)}
.share-row-gold:hover{background:rgba(var(--gd-rgb),.1);border-color:rgba(var(--gd-rgb),.28)}
.share-icon{font-size:24px;flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.04)}
.share-row-gold .share-icon{background:rgba(var(--gd-rgb),.08)}
.share-info{flex:1;min-width:0}
.share-title{font-size:14px;font-weight:600;color:#fff;margin-bottom:2px}
.share-desc{font-size:11.5px;color:rgba(255,255,255,.45);line-height:1.4}
.share-arrow{font-size:18px;color:rgba(255,255,255,.25);flex-shrink:0;transition:transform .2s}
.share-row:hover .share-arrow{transform:translateX(3px);color:rgba(255,255,255,.5)}
.share-gift{display:flex;flex-direction:column;gap:10px;padding:18px;background:linear-gradient(135deg,rgba(var(--t-rgb),.12),rgba(var(--tl-rgb),.06));border:1px solid rgba(var(--tl-rgb),.25);border-radius:18px;cursor:pointer;transition:all .25s;position:relative;overflow:hidden}
.share-gift::before{content:'';position:absolute;top:-30%;right:-20%;width:120px;height:120px;background:radial-gradient(circle,rgba(var(--tl-rgb),.15),transparent 70%);pointer-events:none}
.share-gift:active{transform:scale(.98)}
.share-gift-text{position:relative;z-index:1}
.share-gift-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:4px}
.share-gift-desc{font-size:12px;color:rgba(255,255,255,.5);line-height:1.5}
.share-gift-btn{align-self:flex-start;padding:10px 20px;border:none;border-radius:50px;background:linear-gradient(135deg,var(--t),var(--tl));color:#fff;font-family:'Inter','Helvetica Neue',sans-serif;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(var(--t-rgb),.35);transition:all .25s;position:relative;z-index:1}
.share-gift-btn:active{transform:scale(.97)}
.share-gift-code-row{display:flex;justify-content:center;margin:6px 0 4px}
.share-gift-code{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px dashed rgba(var(--tl-rgb),.4);border-radius:10px;cursor:pointer;transition:all .25s;background:rgba(var(--tl-rgb),.06)}
.share-gift-code:active{transform:scale(.97)}
.share-gift-code-label{font-size:11px;color:rgba(255,255,255,.4)}
.share-gift-code-val{font-size:15px;font-weight:800;color:var(--tl);letter-spacing:.12em;font-variant-numeric:tabular-nums}

/* ═══════════════════════════════════════════
   EXIT INTENT MODAL
   ═══════════════════════════════════════════ */
.exit-modal-overlay{position:fixed;inset:0;z-index:10000;background:rgba(5,18,22,.9);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 20px) 20px calc(env(safe-area-inset-bottom,0px) + 20px);opacity:0;transition:opacity .35s ease;pointer-events:none}
.exit-modal-visible{opacity:1;pointer-events:auto}
.exit-modal-card{width:100%;max-width:360px;border-radius:28px;background:linear-gradient(165deg,rgba(22,45,48,.98),rgba(10,28,32,.99));border:1px solid rgba(var(--gd-rgb),.25);padding:36px 28px 28px;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 60px rgba(var(--gd-rgb),.08);transform:translateY(24px) scale(.94);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.exit-modal-visible .exit-modal-card{transform:translateY(0) scale(1)}
.exit-modal-badge{display:inline-block;font-size:36px;font-weight:900;color:#c4a882;background:linear-gradient(135deg,#c4a882,#e2cba8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;letter-spacing:-.02em}
.exit-modal-title{font-size:24px;font-weight:800;color:#fff;margin-bottom:6px}
.exit-modal-sub{font-size:15px;font-weight:600;color:rgba(255,255,255,.8);margin-bottom:8px;line-height:1.4}
.exit-modal-desc{font-size:12px;color:rgba(255,255,255,.4);margin-bottom:16px;line-height:1.5}
.exit-modal-timer{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:18px;display:flex;align-items:center;justify-content:center;gap:6px}
.exit-modal-timer span:last-child{font-weight:700;font-variant-numeric:tabular-nums;color:#c4a882;font-size:15px}
.exit-modal-btn{width:100%;padding:16px;border:none;border-radius:50px;background:linear-gradient(135deg,#c4a882,#e2cba8);font-family:'Inter','Helvetica Neue',sans-serif;font-size:16px;font-weight:700;color:#0b2c30;cursor:pointer;box-shadow:0 8px 28px rgba(var(--gd-rgb),.35);transition:all .25s;position:relative;overflow:hidden}
.exit-modal-btn:active{transform:scale(.97)}
.exit-modal-btn::after{content:'';position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:rotate(25deg);animation:exitShine 3s ease-in-out infinite}
@keyframes exitShine{0%,100%{left:-60%}50%{left:120%}}
.exit-modal-skip{font-size:13px;color:rgba(255,255,255,.3);margin-top:14px;cursor:pointer;transition:color .2s}
.exit-modal-skip:hover{color:rgba(255,255,255,.5)}

/* ═══════════════════════════════════════════
   STICKY PASSPORT PROGRESS BAR
   ═══════════════════════════════════════════ */
.sticky-passport{position:fixed;bottom:0;left:0;right:0;z-index:800;background:rgba(11,44,48,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(var(--tl-rgb),.15);padding:8px 16px calc(env(safe-area-inset-bottom,0px) + 10px);box-shadow:0 -4px 20px rgba(0,0,0,.3);animation:stickySlideUp .4s cubic-bezier(.16,1,.3,1)}
@keyframes stickySlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sp-mini-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.sp-mini-label{font-size:11px;font-weight:600;color:rgba(255,255,255,.7);white-space:nowrap}
.sp-mini-dots{display:flex;gap:5px}
.sp-mini-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);transition:all .3s}
.sp-mini-done{background:var(--tl);border-color:var(--tl);box-shadow:0 0 6px rgba(var(--t-rgb),.4)}
.sp-mini-bar{height:3px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.sp-mini-fill{height:100%;background:linear-gradient(90deg,var(--t),var(--tl));border-radius:3px;transition:width .5s cubic-bezier(.16,1,.3,1)}
@keyframes ctaPulse{0%,100%{box-shadow:0 8px 32px rgba(var(--t-rgb),.45)}50%{box-shadow:0 8px 32px rgba(var(--t-rgb),.45),0 0 0 8px rgba(var(--t-rgb),.12)}}
/* ── Subscription badge ─────────────────────────── */
.sub-badge{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;z-index:9990;display:flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:50px;background:linear-gradient(135deg,rgba(var(--t-rgb),.25),rgba(var(--tl-rgb),.12));border:1px solid rgba(var(--tl-rgb),.35);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);cursor:pointer;transition:transform .25s var(--ease-out-back),box-shadow .3s;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.sub-badge:active{transform:scale(.95)}
.sub-badge-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,.5);flex-shrink:0;animation:subDotPulse 2s ease-in-out infinite}
@keyframes subDotPulse{0%,100%{opacity:1}50%{opacity:.5}}
.sub-badge-text{font-size:11px;font-weight:600;color:rgba(255,255,255,.8);white-space:nowrap}
/* ── Subscription modal ─────────────────────────── */
.sub-modal-overlay{position:fixed;inset:0;z-index:9995;background:rgba(5,18,22,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .3s}
.sub-modal-overlay.visible{opacity:1}
.sub-modal{width:100%;max-width:360px;border-radius:24px;background:linear-gradient(165deg,rgba(18,42,46,.98),rgba(10,30,34,.99));border:1px solid rgba(var(--tl-rgb),.25);padding:32px 24px 24px;text-align:center;position:relative;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.sub-modal-close{position:absolute;top:6px;right:8px;width:44px;height:44px;border:none;background:rgba(255,255,255,.06);border-radius:50%;color:rgba(255,255,255,.4);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.sub-modal-status{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:50px;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.25);margin-bottom:16px}
.sub-modal-status-dot{width:8px;height:8px;border-radius:50%;background:#4ade80}
.sub-modal-status-text{font-size:12px;font-weight:600;color:#4ade80}
.sub-modal h3{font-size:20px;font-weight:700;color:#fff;margin-bottom:6px}
.sub-modal p{font-size:13px;color:rgba(255,255,255,.55);line-height:1.6;margin-bottom:16px}
.sub-modal-info{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;margin-bottom:20px;text-align:start}
.sub-modal-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,.6);padding:4px 0}
.sub-modal-row span:last-child{color:rgba(255,255,255,.85);font-weight:600}
.sub-modal-cancel{width:100%;padding:14px;border:1px solid rgba(255,82,82,.25);background:rgba(255,82,82,.06);border-radius:14px;color:rgba(255,82,82,.8);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;margin-bottom:10px}
.sub-modal-cancel:active{background:rgba(255,82,82,.12)}
.sub-modal-keep{width:100%;padding:14px;border:none;background:linear-gradient(135deg,var(--t),#1e5b5f);border-radius:14px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 16px rgba(var(--t-rgb),.3);margin-bottom:10px}
.sub-modal-gift{display:flex;align-items:center;gap:10px;background:rgba(var(--t-rgb),.1);border:1px solid rgba(var(--t-rgb),.25);border-radius:12px;padding:12px;margin-bottom:16px;text-align:start}
.sub-modal-gift-icon{font-size:24px;flex-shrink:0}
.sub-modal-gift-text{font-size:12px;color:rgba(255,255,255,.7);line-height:1.5}
.sub-modal-gift-text strong{color:var(--tl)}

/* ═══════════════════════════════════════════
   AI CONSULTANT CHAT
   ═══════════════════════════════════════════ */
/* FAB button */
/* ai-fab sits at bottom-LEFT so it never overlaps with dr-fab (bottom-right avatar) */
.ai-fab{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);left:16px;z-index:9987;display:flex;align-items:center;gap:8px;padding:12px 18px;border:none;border-radius:50px;background:linear-gradient(135deg,#c4a882,#e2cba8);color:#0b2c30;font-family:'Inter','Helvetica Neue',sans-serif;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 8px 32px rgba(var(--gd-rgb),.4),0 0 0 1px rgba(var(--gd-rgb),.3);transition:all .25s;animation:aiFabPulse 3s ease-in-out infinite}
.ai-fab:active{transform:scale(.95)}
.ai-fab svg{flex-shrink:0}
@keyframes aiFabPulse{0%,100%{box-shadow:0 8px 32px rgba(var(--gd-rgb),.4)}50%{box-shadow:0 8px 32px rgba(var(--gd-rgb),.4),0 0 0 8px rgba(var(--gd-rgb),.1)}}

/* ════════════════════════════════════════════════
   AI CHAT — BULLETPROOF LAYOUT
   Key iOS fixes:
   1. overlay uses width/height 100% (not right:0/bottom:0) so horizontal page
      overflow doesn't shift the overlay and clip buttons on the right
   2. input font-size:16px prevents iOS auto-zoom on focus (zoom shifts
      vv.offsetTop by hundreds of px → entire chat disappears)
   3. panel.style.height = vv.height via JS handles keyboard height
   ════════════════════════════════════════════════ */
/* Overlay: inset:0 guarantees full-screen coverage including safe areas.
   Body is position:fixed when chat is open so horizontal page overflow
   cannot shift right:0 — safe to use inset:0 again. */
.ai-chat-overlay{
  position:fixed;
  top:0;right:0;bottom:0;left:0;
  z-index:10010;
  background:#051216;
  overflow:hidden;
  touch-action:none;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .28s ease,transform .28s cubic-bezier(.16,1,.3,1);
}
.ai-chat-overlay.visible{opacity:1;transform:translateY(0)}
.ai-chat-overlay *{box-sizing:border-box}

/* Panel: full-screen container. JS adjusts bottom when keyboard opens.
   Children use position:absolute so header/footer CANNOT be scrolled away.
   touch-action:none — not inherited, must be explicit on each child. */
.ai-chat-panel{
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  overflow:hidden;
  touch-action:none;
}

/* Header: absolutely pinned to top — NEVER scrolls, NEVER moves.
   touch-action:none: prevent iOS rubber-band on the page behind when dragging header. */
.ai-chat-header{
  position:absolute;
  top:0;left:0;right:0;
  z-index:2;
  display:flex;
  align-items:center;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 14px;
  background:#051216;
  border-bottom:1px solid rgba(255,255,255,.08);
  touch-action:none;
}
/* Left group: avatar + text, clips only the text if name too long */
.ai-chat-header-left{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  overflow:hidden;
  padding-right:12px;                   /* gap before close button */
}
.ai-chat-avatar{flex:0 0 42px;width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:center top;border:2px solid rgba(91,165,169,.35)}
.ai-chat-name{font-size:15px;font-weight:700;color:#fff;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-chat-sub{font-size:11px;color:rgba(255,255,255,.4);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Close ×: explicit 40×40 tap target, flex:none so it NEVER shrinks or disappears */
.ai-chat-close{
  flex:none;
  width:40px;height:40px;
  border:none;
  background:rgba(255,255,255,.06);
  border-radius:50%;
  color:rgba(255,255,255,.5);
  font-size:22px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.ai-chat-close:active{background:rgba(255,255,255,.14);color:#fff}

/* Messages: fills the gap between header and footer — top/bottom set by JS after render.
   ONLY this element scrolls. Header and footer are position:absolute so they cannot
   be dragged by scroll propagation. */
.ai-chat-messages{
  position:absolute;
  left:0;right:0;
  /* top and bottom set via JS: msgs.style.top = headerH; msgs.style.bottom = footerH */
  overflow-y:scroll;
  overflow-x:hidden;
  padding:16px 16px 8px;
  display:flex;
  flex-direction:column;
  gap:10px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;                   /* allow vertical swipe to scroll messages */
  scroll-behavior:smooth;
}
.ai-chat-messages>*:last-child{margin-bottom:4px}

/* Message bubbles */
.ai-msg{display:flex;gap:10px;max-width:88%;animation:aiMsgIn .28s ease both}
.ai-msg-ai{align-self:flex-start}
.ai-msg-user{align-self:flex-end;flex-direction:row-reverse}
.ai-msg-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:center top;flex-shrink:0;margin-top:2px}
.ai-msg-bubble{padding:11px 15px;border-radius:18px;font-size:14px;line-height:1.6;word-break:break-word}
.ai-msg-ai .ai-msg-bubble{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.88);border-bottom-left-radius:4px}
.ai-msg-user .ai-msg-bubble{background:linear-gradient(135deg,var(--t),#1a5558);color:#fff;border-bottom-right-radius:4px}
@keyframes aiMsgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Typing dots */
.ai-dots{display:inline-flex;gap:4px;padding:4px 0}
.ai-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);animation:aiDot 1.4s ease-in-out infinite}
.ai-dots span:nth-child(2){animation-delay:.2s}
.ai-dots span:nth-child(3){animation-delay:.4s}
@keyframes aiDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* Suggestion chips — vertical column like Telegram bot suggestions */
.ai-chat-chips{display:flex;flex-direction:column;gap:8px;padding:4px 0}
.ai-chat-chip{padding:11px 16px;border:1px solid rgba(var(--tl-rgb),.28);background:rgba(var(--tl-rgb),.07);border-radius:14px;color:var(--tl);font-family:'Inter','Helvetica Neue',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .18s;text-align:left;width:100%;white-space:normal;line-height:1.4}
.ai-chat-chip:active{transform:scale(.98);background:rgba(var(--tl-rgb),.18)}

/* Quiz upsell CTA inside AI bubble */
.ai-quiz-cta-wrap{margin-top:10px}
.ai-quiz-cta{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:50px;background:linear-gradient(135deg,rgba(47,118,122,.5),rgba(91,165,169,.35));border:1px solid rgba(91,165,169,.4);color:#7cc4c8;font-family:'Inter','Helvetica Neue',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;animation:aiMsgIn .35s ease both}
.ai-quiz-cta:active{transform:scale(.96);background:rgba(91,165,169,.3)}
.ai-quiz-cta-name{color:#fff;font-weight:600}

/* Cosmetologist summary copy button */
.ai-copy-wrap{margin-top:12px}
.ai-copy-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:20px;background:rgba(47,118,122,.12);border:1px solid rgba(91,165,169,.25);color:#7cc4c8;font-family:'Inter','Helvetica Neue',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}
.ai-copy-btn:active{background:rgba(47,118,122,.28);transform:scale(.97)}

/* Daily limit countdown */
.ai-limit-countdown{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px}
.ai-limit-reset-label{font-size:12px;color:rgba(255,255,255,.4)}
.ai-countdown-timer{font-size:18px;font-weight:700;color:#7cc4c8;letter-spacing:.08em;font-variant-numeric:tabular-nums}

/* Footer: absolutely pinned to panel bottom — always above keyboard.
   JS moves it up (footer.style.bottom = kbHeight) when keyboard opens.
   touch-action:none: prevent iOS rubber-band when dragging footer area. */
.ai-chat-footer{
  position:absolute;
  bottom:0;left:0;right:0;
  z-index:2;
  padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 12px);
  border-top:1px solid rgba(255,255,255,.08);
  background:#051216;
  touch-action:none;
}
.ai-chat-powered{font-size:10px;color:rgba(255,255,255,.2);text-align:center;margin-bottom:8px;letter-spacing:.02em}
/* Input row: no explicit width (flex column child auto-stretches to parent width) */
.ai-chat-input-row{display:flex;gap:10px;align-items:flex-end}
/* Textarea: flex:1 + min-width:0 = fills remaining space, never overflows */
.ai-chat-input{
  flex:1 1 0;
  min-width:0;
  padding:11px 16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  border-radius:23px;
  color:#fff;
  font-family:'Inter','Helvetica Neue',sans-serif;
  font-size:16px;   /* CRITICAL: must be ≥16px — iOS Safari auto-zooms inputs <16px,
                       causing vv.offsetTop to shift hundreds of px → chat disappears */
  line-height:1.45;
  outline:none;
  transition:border-color .25s,background .25s;
  -webkit-appearance:none;
  resize:none;
  min-height:46px;
  max-height:120px;
  overflow-y:auto;
  display:block;
}
.ai-chat-input:focus{border-color:rgba(91,165,169,.6);background:rgba(255,255,255,.09)}
.ai-chat-input::placeholder{color:rgba(255,255,255,.22)}
.ai-chat-input:disabled{opacity:.4}
/* Send →: flex:none = NEVER shrinks. Explicit 46×46. */
.ai-chat-send{
  flex:none;
  width:46px;height:46px;
  border:none;
  border-radius:50%;
  background:linear-gradient(135deg,#c4a882,#e2cba8);
  color:#0b2c30;
  font-size:19px;font-weight:700;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s,opacity .2s;
}
.ai-chat-send:active{transform:scale(.9)}
.ai-chat-send:disabled{opacity:.35;cursor:default}
/* Message timestamp */
.ai-msg-col{display:flex;flex-direction:column;min-width:0}
.ai-msg-ai .ai-msg-col{align-items:flex-start}
.ai-msg-user .ai-msg-col{align-items:flex-end}
.ai-msg-time{font-size:10px;color:rgba(255,255,255,.25);margin-top:3px;padding:0 4px;white-space:nowrap}

/* ═══════════════════════════════════════════
   ACCESSIBILITY: REDUCED MOTION
   ═══════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .screen,.screen.screen-exit,.screen.screen-back-in{animation:none!important}
  .opt-dismiss,.opt-stay{animation:none!important}
  .skel{animation:none!important;background:rgba(255,255,255,.06)}
  .prog-seg.current{animation:none!important}
  .guide-arrow{animation:none!important}
  .pw-sheet{transition:none!important}
  .ctaPulse,.selPulse,.flagshipPulse,.logoGlow{animation:none!important}
  .ofl{animation:none!important}
}
/* ═══════════════════════════════════════════
   TABLET LAYOUT (768px – 1023px)
   ═══════════════════════════════════════════ */
@media(min-width:768px){
  body{font-size:17px}

  /* ── Main container — wider ── */
  .ai{max-width:720px;margin:0 auto;padding:0 28px 80px}

  /* ── Typography — breathe ── */
  .s-title{font-size:clamp(32px,4.5vw,44px)}
  .s-desc{font-size:16px;max-width:520px}
  .qt{font-size:clamp(22px,3vw,28px)}
  .opt{font-size:16px;padding:18px 22px}
  .res-tt{font-size:clamp(28px,3.5vw,36px)}
  .res-desc{font-size:16px;max-width:540px}
  .sp-slot-label{font-size:14px}
  .sp-title{font-size:18px}

  /* ── Start screen header — more space ── */
  .s-head{padding:56px 0 36px}
  .doc-bar{max-width:400px}

  /* ── Quiz grid — bigger cards ── */
  .qg{gap:12px}
  .qc{padding:22px 18px 20px}
  .ct{font-size:16px}
  .cs{font-size:13px}

  /* ── Bundle card ── */
  .bc{padding:20px 24px}

  /* ── Hook screen — wider ── */
  .hook-in{max-width:600px !important;padding:28px 28px 40px}

  /* ── Payment screen — wider card ── */
  .pay-in{max-width:520px}

  /* ── Result card — wider ── */
  #result-card{max-width:600px;margin:0 auto}
  .rc-bg{padding:36px 32px 30px}
  .res-top{padding:44px 0 28px}

  /* ── Passport card ── */
  .result-passport-card{max-width:520px}
  .result-progress-card{max-width:520px}

  /* ── Paywall — wider ── */
  .paywall-card{max-width:480px}
  .pw-sheet{max-width:560px;margin:0 auto;border-radius:28px 28px 0 0}

  /* ── Profile result ── */
  .prc-card{max-width:480px}

  /* ── Welcome modal ── */
  .welcome-modal-card{max-width:440px;padding:40px 32px 36px}

  /* ── Quiz screen — all elements aligned to same column ── */
  #quiz-s.active{display:flex!important;flex-direction:column;align-items:center}
  #quiz-s.active > *,#quiz-s .opts{width:100%;max-width:600px;box-sizing:border-box}
  /* Options keep their own gap / display */
  .opts{max-width:600px}

  /* ── Share row ── */
  .sr{max-width:600px}
  .sw{max-width:600px}

  /* ── Lang screen — bigger buttons ── */
  .l-btns{max-width:380px}
  .btn-lg{padding:16px 20px;font-size:15px}
  .l-title{font-size:clamp(38px,7vw,52px)}

  /* ── Override inline styles for wider screens ── */
  #hook-s > div{max-width:600px !important}
  #hook-s .hook-benefits-wrap,
  #hook-s #hook-doc,
  #hook-s #hook-concerns,
  #hook-s #hook-sub{max-width:480px !important}
  #fomo-wrap{max-width:520px !important}
  #result-s > div:first-child{max-width:520px !important}
  #passport-progress-bar{max-width:420px !important}
}

/* ═══════════════════════════════════════════
   DESKTOP LAYOUT (1024px+)
   ═══════════════════════════════════════════ */
@media(min-width:1024px){
  /* ── Main container — full desktop width ── */
  .ai{max-width:900px;padding:0 40px 80px}

  /* ── Typography — larger, more spacious ── */
  body{font-size:18px;line-height:1.7}
  .s-title{font-size:clamp(38px,4vw,56px)}
  .s-desc{font-size:18px;max-width:620px;line-height:1.8}
  .qt{font-size:clamp(26px,2.8vw,34px)}
  .opt{font-size:18px;padding:22px 26px;line-height:1.5}
  .res-tt{font-size:clamp(34px,3.2vw,44px)}
  .res-desc{font-size:18px;max-width:620px;line-height:1.7}
  .res-eb{font-size:13px}
  .ct{font-size:18px}
  .cs{font-size:15px;line-height:1.5}
  .rc-sl{font-size:14px}
  .rc-sub{font-size:15px}
  .tr{font-size:13px;padding:7px 14px}

  /* ── Start screen — more breathing room ── */
  .s-head{padding:64px 0 40px}
  .s-toplogo svg{width:48px}
  .s-topbrand{font-size:10px;letter-spacing:.3em}
  .doc-bar{max-width:440px;padding:14px 18px;border-radius:16px}
  .doc-bar-avatar{width:48px;height:48px}
  .doc-bar-name{font-size:15px}
  .doc-bar-cred{font-size:12px}
  .s-rules .rp{font-size:12px;padding:6px 16px}

  /* ── Quiz grid — 3 columns on desktop ── */
  .qg{grid-template-columns:1fr 1fr 1fr;gap:14px}
  .qc{padding:24px 20px 22px;border-radius:18px}
  .qc-profile-banner{grid-column:1/-1;padding:20px 28px}
  .ci{width:52px;height:52px;border-radius:16px}
  .ci svg{width:26px;height:26px;flex-shrink:0}
  .cp{font-size:12px}
  .qc-badge{font-size:10px;padding:5px 14px}

  /* ── Bundle — wider, more prominent ── */
  .bc{padding:22px 28px;border-radius:18px;max-width:700px;margin:0 auto 24px}
  .btit{font-size:17px}
  .bde{font-size:13px}
  .bpn{font-size:22px}

  /* ── Start button ── */
  .btn-p{max-width:440px;margin-left:auto;margin-right:auto;display:block;font-size:16px;padding:18px 28px}

  /* ── Hook screen — desktop hero layout ── */
  .hook-in{max-width:720px !important;padding:40px 40px 48px}
  #hook-s .hook-benefit span:last-child{font-size:16px}
  #hook-s #hook-doc-quote{font-size:15px}
  #hook-s #hook-doc-bottom{font-size:14px}
  .hook-concern-btn span:not(.hook-btn-arrow){font-size:15px !important}

  /* ── Quiz screen — centered, comfortable width ── */
  .opts{max-width:640px;margin:0 auto}
  .pw{max-width:640px}
  .qt{max-width:640px}
  .qn{max-width:640px}

  /* ── Payment screen ── */
  .pay-in{max-width:560px}
  .pay-title{font-size:26px}
  .pay-sub{font-size:15px}
  .ord{padding:22px 24px;border-radius:18px}

  /* ── Result screen — wider card ── */
  #result-card{max-width:700px}
  .rc-bg{padding:40px 36px 34px}
  .rc-name{font-size:clamp(28px,4vw,38px)}
  .rc-section{padding:20px;border-radius:16px}
  .res-top{padding:52px 0 32px}
  .rcpn{font-size:16px}
  .rcpd{font-size:13px;line-height:1.6}
  .rc-hd-ic{width:64px;height:64px;border-radius:20px}
  .rc-hd-ic svg{width:30px!important;height:30px!important}

  /* ── Passport card — wider ── */
  .result-passport-card{max-width:600px;padding:24px}
  .result-progress-card{max-width:600px}
  .sp-slot{padding:14px 16px}
  .sp-slot-label{font-size:15px}
  .sp-slot-result{font-size:12px;max-width:180px}

  /* ── Paywall ── */
  .paywall-card{max-width:520px;padding:32px 28px}
  .paywall-title{font-size:24px}
  .pw-sheet{max-width:640px}
  .pw-tiers{gap:12px}
  .pw-tier{padding:20px 12px 18px;border-radius:18px}
  .pw-tier-popular{padding:22px 14px 18px}

  /* ── Share ── */
  .sr{max-width:700px}
  /* Action buttons container — match btn-p max-width so all buttons align */
  .sw{max-width:440px;margin-left:auto;margin-right:auto}

  /* ── Lifehacks — wider ── */
  .lh-item{padding:12px 18px;font-size:14px}

  /* ── Lang screen ── */
  .l-btns{max-width:420px;gap:12px}
  .btn-lg{padding:18px 24px;font-size:16px;border-radius:60px}
  .l-title{font-size:clamp(42px,5vw,60px)}
  .l-sub{font-size:15px}
  .l-prompt{font-size:12px}

  /* ── Profile result ── */
  .prc-card{max-width:520px;padding:28px 24px}
  .prc-title{font-size:20px}
  .prc-fields{gap:10px}
  .prc-field{padding:14px}
  .prc-field-val{font-size:14px}

  /* ── Welcome modal ── */
  .welcome-modal-card{max-width:480px;padding:44px 36px 40px}

  /* ── Override inline styles for desktop ── */
  #hook-s > div{max-width:720px !important}
  #hook-s .hook-benefits-wrap,
  #hook-s #hook-doc,
  #hook-s #hook-concerns,
  #hook-s #hook-sub{max-width:560px !important}
  #fomo-wrap{max-width:560px !important}
  /* result columns fill naturally */
  #passport-progress-bar{max-width:480px !important}

  /* ── Start screen: wider hero, bigger doctor bar ── */
  .s-head{padding:72px 0 44px}
  .doc-bar{max-width:520px;padding:16px 22px;border-radius:18px}
  .doc-bar-avatar{width:54px;height:54px}
  .doc-bar-name{font-size:16px}
  .doc-bar-cred{font-size:13px}
  .s-title{font-size:clamp(40px,4.2vw,58px)}
  .s-desc{font-size:18px;max-width:660px;line-height:1.8}

  /* ── Quiz question: wider, more comfortable ── */
  .opts{max-width:680px}
  .pw{max-width:680px}
  .qt{max-width:680px}
  .qn{max-width:680px}
  #quiz-s.active > *{max-width:680px}

  /* ── Hook concerns: bigger grid ── */
  #hook-s #hook-concerns{grid-template-columns:1fr 1fr !important;gap:12px !important;max-width:420px !important}

  /* ── Hover polish for desktop ── */
  .qc{transition:transform .3s var(--ease-out-back),border-color .25s,background .25s,box-shadow .35s}
  .opt{transition:transform .25s var(--ease-out-back),border-color .2s,background .2s,box-shadow .3s,color .2s}

  /* ── Back button — bigger hit area ── */
  .bk{font-size:13px}
  .bka{width:48px;height:48px}
}

/* ═══════════════════════════════════════════
   WIDE DESKTOP (1440px+) — extra breathing room
   ═══════════════════════════════════════════ */
@media(min-width:1440px){
  body{font-size:19px;line-height:1.75}
  .ai{max-width:1100px;padding:0 48px 80px}
  .qg{gap:16px}
  .qc{padding:28px 22px 24px}
  .ci{width:56px;height:56px}
  .ci svg{width:28px;height:28px}
  .ct{font-size:19px}
  .cs{font-size:15px}
  .qt{font-size:clamp(28px,2.6vw,38px)}
  .opt{font-size:18px;padding:22px 28px}
  .s-title{font-size:clamp(42px,4vw,60px)}
  .s-desc{font-size:19px;max-width:680px}
  .res-tt{font-size:clamp(36px,3vw,48px)}
  .res-desc{font-size:18px;max-width:680px;line-height:1.75}
  .hook-in{max-width:800px !important}
  #result-card{max-width:760px}
  .rc-bg{padding:44px 40px 38px!important}
  .rc-hd-ic{width:72px;height:72px;border-radius:22px}
  .rc-hd-ic svg{width:34px!important;height:34px!important}
  .result-passport-card{max-width:660px}
  .result-progress-card{max-width:660px}
  .paywall-card{max-width:560px}
  .pw-sheet{max-width:700px}
  .s-head{padding:72px 0 48px}
  #hook-s > div{max-width:800px !important}
  #hook-s .hook-benefits-wrap,
  #hook-s #hook-doc,
  #hook-s #hook-concerns,
  #hook-s #hook-sub{max-width:620px !important}
  #res-wrap .ai{max-width:1300px;padding:0 56px 80px}
  #result-s{grid-template-columns:minmax(320px,520px) minmax(0,1fr)}
}

/* ═══════════════════════════════════════════
   DESKTOP TWO-COLUMN RESULT LAYOUT (1200px+)
   Left: result card | Right: recommendations
   Equal 1:1 grid — full-page scroll
   ═══════════════════════════════════════════ */
@media(min-width:1200px){
  /* Container — wider, breathing room */
  #res-wrap .ai{max-width:1360px;padding:0 56px 100px}

  /* Equal-width two-column grid, no gap (padding handles spacing + divider) */
  #result-s{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:0;
    align-items:start;
    position:relative;
  }

  /* Vertical divider line between columns */
  #result-s::before{
    content:'';position:absolute;
    left:50%;top:16px;bottom:48px;width:1px;
    transform:translateX(-50%);
    background:linear-gradient(to bottom,
      transparent 0%,
      rgba(255,255,255,.07) 6%,
      rgba(255,255,255,.07) 94%,
      transparent 100%);
    pointer-events:none;z-index:0;
  }

  /* Column assignments */
  #result-col-l{grid-column:1;grid-row:1;padding:36px 52px 36px 0;position:relative;z-index:1}
  #result-col-r{
    grid-column:2;grid-row:1;
    padding:36px 0 36px 52px;
    position:relative;z-index:1;
    display:flex;flex-direction:column;gap:14px;
    /* No internal scroll — full page scrolls */
    overflow-y:visible;max-height:none;
  }

  /* Right column label (visual counterweight to res-top) */
  .res-col-r-label{
    display:flex;align-items:center;gap:10px;
    padding-bottom:22px;
    border-bottom:1px solid rgba(255,255,255,.06);
    margin-bottom:6px;
  }
  .res-col-r-label-icon{
    width:36px;height:36px;border-radius:10px;flex-shrink:0;
    background:linear-gradient(135deg,rgba(196,160,96,.14),rgba(196,160,96,.04));
    border:1px solid rgba(196,160,96,.25);
    display:flex;align-items:center;justify-content:center;
  }
  .res-col-r-label-text{display:flex;flex-direction:column;gap:3px}
  .res-col-r-label-main{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(196,160,96,.85)}
  .res-col-r-label-sub{font-size:13px;font-weight:600;color:rgba(255,255,255,.6)}

  /* Full-width elements below the grid */
  #result-s > .sw.au2{grid-column:1/-1;max-width:520px;margin:32px auto 0}
  #result-passport{grid-column:1/-1;max-width:none!important;margin:32px 0 0!important}
  #result-progress-wrap{grid-column:1/-1;max-width:none!important}

  /* Clear all inline max-width/margin constraints */
  #result-col-l > *,#result-col-r > *{max-width:none!important;margin-left:0!important;margin-right:0!important}
  #result-card{max-width:none!important;margin:0!important}
  .res-top{max-width:none;padding-bottom:28px}
  .res-desc{max-width:none}

  /* Left — result card spacious padding */
  .rc-bg{padding:40px 36px 32px!important}

  /* Right — clear all individual margin hacks (flex gap handles everything) */
  #rc-diagnosis,#rc-procedures-wrap,#morpho-disclaimer,
  #lifehacks-section,#next-quiz-cta,#cosmo-share-wrap,
  #funnel-next-wrap,#funnel-progress{margin-top:0!important;margin-bottom:0!important}

  /* Right — unify all card blocks into consistent style */
  #result-col-r .rc-section{border-radius:16px;padding:22px}

  /* Right — share button full alignment */
  .btn-cosmo{margin-top:0}

  /* Hero text: left-align on desktop */
  .res-top{text-align:left}
  .res-eb,.res-tt,.res-desc{text-align:left;margin-left:0;margin-right:0}
}

/* ═══════════════════════════════════════════
   RESULT REVEAL — staggered entrance animation
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.btn-shake{animation:shake .38s ease both}

/* ── Next-question button: forward pulse hint (replaces shake) ── */
@keyframes btnPulseHint{
  0%  {transform:scale(1);box-shadow:0 6px 24px rgba(var(--gd-rgb),.25)}
  30% {transform:scale(1.04);box-shadow:0 0 0 7px rgba(var(--gd-rgb),.14),0 8px 28px rgba(var(--gd-rgb),.35)}
  65% {transform:scale(.98)}
  100%{transform:scale(1);box-shadow:0 6px 24px rgba(var(--gd-rgb),.25)}
}
.btn-pulse-hint{animation:btnPulseHint .5s var(--ease-out-back) both!important}
/* Flash unanswered options when next is tapped prematurely */
@keyframes optsNeedAnswer{
  0%  {opacity:1}
  20% {opacity:.45;filter:brightness(.75)}
  55% {opacity:1;filter:brightness(1.08)}
  75% {opacity:.85}
  100%{opacity:1;filter:brightness(1)}
}
.opts-need-answer{animation:optsNeedAnswer .5s ease both}
/* Sticky PDF button */
#sticky-pdf-btn{position:fixed;bottom:24px;right:16px;z-index:90;background:var(--tl);color:#000;font-family:'Inter','Helvetica Neue',sans-serif;font-size:13px;font-weight:700;border:none;border-radius:50px;padding:11px 18px;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.35);transform:translateY(120px);opacity:0;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s;-webkit-tap-highlight-color:transparent;white-space:nowrap}
#sticky-pdf-btn.visible{transform:translateY(0);opacity:1}
/* Pre-quiz sheet */
.prequiz-sheet{position:fixed;bottom:0;left:0;right:0;z-index:210;background:#181818;border-radius:28px 28px 0 0;padding:24px 20px 32px;max-width:480px;margin:0 auto;transform:translateY(100%);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.prequiz-sheet.open{transform:translateY(0)}
.prequiz-backdrop{position:fixed;inset:0;z-index:209;background:rgba(0,0,0,.6);opacity:0;transition:opacity .3s}
.prequiz-backdrop.open{opacity:1}
.prequiz-handle{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.15);margin:0 auto 20px}
.prequiz-title{font-size:20px;font-weight:700;color:#fff;margin-bottom:4px}
.prequiz-meta{font-size:12px;color:rgba(255,255,255,.4);margin-bottom:20px}
.prequiz-items{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.prequiz-item{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:rgba(255,255,255,.8)}
.prequiz-item-icon{flex-shrink:0;width:18px;height:18px;border-radius:50%;background:rgba(var(--tl-rgb),.15);display:flex;align-items:center;justify-content:center;margin-top:1px}
.prequiz-go-btn{width:100%;padding:15px;background:var(--tl);color:#000;font-family:'Inter','Helvetica Neue',sans-serif;font-size:15px;font-weight:700;border:none;border-radius:50px;cursor:pointer;-webkit-tap-highlight-color:transparent}
@keyframes resReveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.res-reveal .rc-bg{animation:resReveal .5s var(--ease-out-expo) both}
.res-reveal .rc-section{opacity:0;animation:resReveal .45s var(--ease-out-expo) both}
.res-reveal .rc-section:nth-child(1){animation-delay:.06s}
.res-reveal .rc-section:nth-child(2){animation-delay:.14s}
.res-reveal .rc-section:nth-child(3){animation-delay:.22s}
.res-reveal .rc-section:nth-child(4){animation-delay:.30s}
.res-reveal .rc-section:nth-child(5){animation-delay:.38s}
.res-reveal .rc-section:nth-child(6){animation-delay:.46s}
.res-reveal .rc-section:nth-child(7){animation-delay:.54s}

/* Skeleton loader for rc-name typewriter */
@keyframes skelShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.rc-name.skel-pulse{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:skelShimmer 1.4s ease-in-out infinite;border-radius:6px;min-width:130px;min-height:26px;display:inline-block;vertical-align:middle}

/* Profile-aware personalized intro in result card */
.rc-profile-intro{font-size:13px;line-height:1.55;color:rgba(255,255,255,.6);font-style:italic;margin:10px 0 14px;padding:10px 14px;border-left:2px solid rgba(91,165,169,.4);background:rgba(91,165,169,.06);border-radius:0 8px 8px 0}
.res-reveal .rc-profile-intro{opacity:0;animation:resReveal .45s var(--ease-out-expo) .08s both}

/* Passport Completion Sheet */
.cmplt-backdrop{position:fixed;inset:0;z-index:4500;background:rgba(0,0,0,.6);opacity:0;transition:opacity .3s}
.cmplt-sheet{position:fixed;bottom:0;left:0;right:0;z-index:4501;background:#1a1a1a;border-radius:28px 28px 0 0;padding:20px 20px calc(env(safe-area-inset-bottom,0px) + 24px);max-width:480px;margin:0 auto;transform:translateY(100%);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.cmplt-sheet.open{transform:translateY(0)}
.cmplt-handle{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.15);margin:0 auto 22px}
.cmplt-icon{width:54px;height:54px;border-radius:50%;background:rgba(91,165,169,.12);border:2px solid rgba(91,165,169,.4);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.cmplt-icon.complete{background:rgba(91,165,169,.2);border-color:#5ba5a9;box-shadow:0 0 24px rgba(91,165,169,.3)}
.cmplt-title{font-size:19px;font-weight:700;color:#fff;text-align:center;margin-bottom:6px;font-family:'Inter','Helvetica Neue',sans-serif}
.cmplt-progress{font-size:13px;color:rgba(255,255,255,.4);text-align:center;margin-bottom:20px;font-family:'Inter','Helvetica Neue',sans-serif}
.cmplt-dots{display:flex;gap:8px;justify-content:center;margin-bottom:24px}
.cmplt-dot-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;width:34px}
.cmplt-dot{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cmplt-dot.done{background:rgba(91,165,169,.15);border-color:#5ba5a9}
.cmplt-dot.current{box-shadow:0 0 14px rgba(91,165,169,.45);border-color:#5ba5a9;background:rgba(91,165,169,.2)}
.cmplt-dot-lbl{font-size:7.5px;text-align:center;width:34px;line-height:1.2;font-weight:500;font-family:'Inter','Helvetica Neue',sans-serif;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cmplt-btn{width:100%;padding:15px;background:var(--tl);color:#000;font-family:'Inter','Helvetica Neue',sans-serif;font-size:15px;font-weight:700;border:none;border-radius:50px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .2s}
.cmplt-btn:active{opacity:.85}

/* ═══════════════════════════════════════════
   ANSWER MICRO-FEEDBACK — confirm pulse
   ═══════════════════════════════════════════ */
@keyframes optConfirm{
  0%  {transform:translateX(4px) scale(1.04);box-shadow:inset 0 0 0 2px var(--tl),0 0 0 4px rgba(var(--t-rgb),.2),0 0 28px rgba(var(--t-rgb),.5)}
  45% {transform:translateX(4px) scale(1.01);box-shadow:inset 0 0 0 1.5px var(--tl),0 0 0 2px rgba(var(--t-rgb),.1),0 0 22px rgba(var(--t-rgb),.3)}
  100%{transform:translateX(4px) scale(1);  box-shadow:inset 0 0 0 1px rgba(var(--t-rgb),.3),0 4px 16px rgba(0,0,0,.2),0 0 24px rgba(var(--t-rgb),.15)}
}
.opt.sel-confirm{animation:optConfirm .42s var(--ease-out-back) forwards}

/* ═══════════════════════════════════════════
   NEXT QUIZ CTA — core loop booster
   ═══════════════════════════════════════════ */
.next-quiz-cta{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:linear-gradient(135deg,rgba(var(--t-rgb),.1),rgba(var(--tl-rgb),.05));border:1.5px solid rgba(var(--tl-rgb),.3);cursor:pointer;transition:all .25s;animation:screenIn .5s var(--ease-out-expo) both}
.next-quiz-cta:hover{border-color:var(--tl);background:linear-gradient(135deg,rgba(var(--t-rgb),.18),rgba(var(--tl-rgb),.1));transform:translateY(-1px)}
.next-quiz-cta:active{transform:scale(.98)}
.nqc-label{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--tl);text-transform:uppercase;margin-bottom:3px}
.nqc-title{font-size:15px;font-weight:700;color:var(--tx)}
.nqc-sub{font-size:12px;color:var(--mu);margin-top:2px}
.nqc-arrow{font-size:22px;flex-shrink:0;margin-left:auto;color:var(--tl);font-weight:300}

/* ═══════════════════════════════════════════
   SHARE WITH COSMETOLOGIST
   ═══════════════════════════════════════════ */
.btn-cosmo{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:14px;background:rgba(var(--tl-rgb),.1);border:1.5px solid rgba(var(--tl-rgb),.25);color:var(--tl);font-size:13px;font-weight:600;cursor:pointer;transition:all .25s;width:100%;font-family:inherit;margin-top:10px}
.btn-cosmo:hover{background:rgba(var(--tl-rgb),.18);border-color:var(--tl)}
.btn-cosmo:active{transform:scale(.98)}

/* ═══════════════════════════════════════════
   RETEST REMINDER BANNER
   ═══════════════════════════════════════════ */
.retest-banner{display:flex;align-items:center;gap:12px;padding:14px 16px;background:rgba(196,168,130,.07);border:1px solid rgba(196,168,130,.18);border-radius:14px;margin-bottom:12px;cursor:pointer;animation:screenIn .5s var(--ease-out-expo) both;transition:background .2s}
.retest-banner:hover{background:rgba(196,168,130,.12)}
.retest-banner-icon{font-size:22px;flex-shrink:0}
.retest-banner-body{flex:1;min-width:0}
.retest-banner-title{font-size:13px;font-weight:700;color:var(--gd)}
.retest-banner-sub{font-size:12px;color:var(--mu);line-height:1.4;margin-top:2px}
.retest-banner-close{flex-shrink:0;padding:4px 8px;color:var(--mu);font-size:18px;cursor:pointer;line-height:1}

/* ── Reduced motion — accessibility ──────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MASTER BUTTON SYSTEM — Design Token Components
   Zero-regression: additive aliases over existing .btn-p / .btn-gh / .opt
   ═══════════════════════════════════════════════════════════ */

/* .btn-primary — Primary CTA: filled teal gradient, full-width pill
   Same visual as .btn-p but via semantic name.
   Usage: "Начать тест", "Оплатить", "Скачать PDF" */
.btn-primary{
  display:block;width:100%;
  padding:16px 24px;
  border-radius:var(--radius-btn);
  border:none;
  background:linear-gradient(135deg,var(--accent-l) 0%,var(--accent) 50%,var(--accent-d) 100%);
  color:#1a1000;
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:15px;font-weight:700;letter-spacing:.02em;
  cursor:pointer;
  transition:var(--transition-base),box-shadow .3s ease;
  box-shadow:0 6px 24px rgba(var(--accent-rgb),.45),0 2px 6px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.3);
  position:relative;overflow:hidden;text-align:center;
}
.btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .6s var(--ease-out-expo)}
@media(hover:hover){
  .btn-primary:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 12px 40px rgba(var(--accent-rgb),.55),0 4px 10px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.25)}
  .btn-primary:hover::after{left:100%}
}
.btn-primary:active{transform:translateY(0) scale(.98);box-shadow:0 2px 10px rgba(var(--accent-rgb),.3);transition-duration:.1s}
.btn-primary:disabled,.btn-primary[disabled]{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}

/* Variant: teal fill (used for "Продолжить", hook CTA) */
.btn-primary--teal{
  background:linear-gradient(135deg,var(--t),var(--tl));
  color:#fff;
  box-shadow:0 6px 24px rgba(var(--t-rgb),.4),0 2px 6px rgba(0,0,0,.2);
}
@media(hover:hover){.btn-primary--teal:hover{box-shadow:0 12px 40px rgba(var(--t-rgb),.55),0 4px 10px rgba(0,0,0,.15)}}

/* Variant: gold fill (used for "Скачать PDF") */
.btn-primary--gold{
  background:linear-gradient(135deg,#a8763a 0%,#c4a882 50%,#a8763a 100%);
  color:#0b2c30;
  box-shadow:0 6px 22px rgba(var(--gd-rgb),.45),0 2px 6px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.18);
}
@media(hover:hover){.btn-primary--gold:hover{box-shadow:0 12px 36px rgba(var(--gd-rgb),.55),0 4px 10px rgba(0,0,0,.15)}}

/* ─────────────────────────────────────────────────────────── */

/* .btn-secondary — Outline ghost button: transparent with border
   Same visual as .btn-gh but via semantic name.
   Usage: "Назад", "Поделиться", "Посмотреть позже" */
.btn-secondary{
  display:block;width:100%;
  padding:13px 24px;
  border-radius:var(--radius-btn);
  border:1px solid var(--color-border-hover);
  background:var(--color-bg-card);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:rgba(255,255,255,.65);
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:13px;font-weight:500;letter-spacing:.02em;
  cursor:pointer;
  transition:var(--transition-base);
  text-align:center;
}
@media(hover:hover){
  .btn-secondary:hover{border-color:var(--color-accent-teal);color:var(--color-text-main);background:rgba(var(--t-rgb),.1);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.15)}
}
.btn-secondary:active{transform:translateY(0) scale(.98);transition-duration:.1s}
.btn-secondary:disabled,.btn-secondary[disabled]{opacity:.3;cursor:not-allowed;transform:none;pointer-events:none}

/* ─────────────────────────────────────────────────────────── */

/* .btn-answer — Answer option button in quizzes
   Extends .opt visually — same look, semantic name for new HTML.
   States: default → :hover → .selected → :disabled */
.btn-answer{
  display:flex;align-items:center;gap:13px;
  width:100%;min-height:48px;
  padding:16px 18px;
  border-radius:var(--radius-md);
  border:1px solid var(--color-border-subtle);
  background:var(--color-bg-card);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:rgba(255,255,255,.85);
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.45;
  cursor:pointer;
  transition:var(--transition-base),box-shadow .3s;
  position:relative;overflow:hidden;text-align:left;
}
.btn-answer::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,transparent 55%);pointer-events:none}
@media(hover:hover){
  .btn-answer:hover{border-color:rgba(var(--t-rgb),.55);background:rgba(var(--t-rgb),.09);color:var(--color-text-main);transform:translateX(4px) scale(1.01)}
}
.btn-answer:active{transform:translateX(2px) scale(.99);transition-duration:.1s}
/* Selected state */
.btn-answer.selected{
  border-color:var(--color-accent-teal-light);
  background:rgba(var(--t-rgb),.2);
  color:var(--color-text-main);
  box-shadow:inset 0 0 0 1px rgba(var(--t-rgb),.3),0 4px 16px rgba(0,0,0,.2),0 0 24px rgba(var(--t-rgb),.15);
  transform:translateX(4px);
  animation:optSelect .35s var(--ease-out-back);
}
/* The radio dot inside btn-answer */
.btn-answer .btn-answer-dot{
  width:21px;height:21px;border-radius:50%;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  transition:all .3s var(--ease-spring);
}
.btn-answer.selected .btn-answer-dot{
  background:linear-gradient(135deg,var(--t),var(--tl));
  border-color:var(--tl);
  box-shadow:0 0 12px rgba(var(--t-rgb),.5);
}
.btn-answer.selected .btn-answer-dot::after{
  content:'';width:7px;height:7px;border-radius:50%;background:#fff;
}
.btn-answer:disabled,.btn-answer[disabled]{opacity:.4;cursor:not-allowed;transform:none;pointer-events:none}

/* ─────────────────────────────────────────────────────────── */

/* TYPOGRAPHY BASELINE — consistent vertical rhythm
   These are new rules that don't conflict with existing component classes.
   Applies only to prose-style containers created in JS (result text blocks) */
.rc-section h2,.rc-section h3,
.paywall-card h2,.paywall-card h3,
.prc-card h2,.prc-card h3,
.result-passport-card h2,.result-passport-card h3{
  margin-bottom:8px;
  line-height:1.3;
  font-weight:700;
  color:var(--color-text-main);
}
.rc-section p,.paywall-card p,.prc-card p,.result-passport-card p{
  margin-bottom:10px;
  line-height:1.6;
  color:var(--color-text-muted);
}
.rc-section p:last-child,.paywall-card p:last-child,.prc-card p:last-child{margin-bottom:0}

/* MOBILE-FIRST SAFETY — all .btn-primary/.btn-secondary full-width on mobile */
@media(max-width:600px){
  .btn-primary,.btn-secondary{width:100%;padding-left:20px;padding-right:20px}
  /* Ensure safe horizontal padding everywhere */
  .ai{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  /* Quiz option touch target — comfortable minimum */
  .btn-answer{min-height:52px}
}

/* CARD CONSISTENCY — unified look for quiz cards, result blocks, paywall
   All share the same glass surface, border, and corner radius.
   Only applied via @layer-style additions so existing specificity wins */
.qc,.sp-slot,.rc-section,.result-passport-card,.result-progress-card,.prc-field{
  --card-border-radius:var(--radius-md);
}
/* Ensure result section blocks visually match quiz cards */
.rc-section{border-radius:var(--radius-md)}
.prc-field{border-radius:var(--radius-sm)}

/* ═══════════════════════════════════════════
   WELCOME CLIENT OVERLAY — post-payment moment
   ═══════════════════════════════════════════ */
@keyframes wcPulse{0%{transform:scale(0) rotate(-30deg);opacity:0}60%{transform:scale(1.15) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0deg);opacity:1}}
@keyframes wcFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* PWA standalone — bottom safe area nearly invisible in chat + FAQ */
@media (display-mode: standalone) {
  .ai-chat-footer { padding-bottom: max(env(safe-area-inset-bottom, 0px), 20px); }
  .dr-faq-body    { padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px); }
}

/* ── Disclaimer glow animation ─────────────────── */
@keyframes disclaimerGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(196,117,148,0); border-color: rgba(196,117,148,.28); }
  50%     { box-shadow: 0 0 18px 3px rgba(196,117,148,.18); border-color: rgba(196,117,148,.55); }
}
.disclaimer-block {
  animation: disclaimerGlow 3.5s ease-in-out infinite;
  border-radius: 14px;
  border: 1px solid rgba(196,117,148,.28);
  background: rgba(196,117,148,.06);
  padding: 13px 16px;
  text-align: center;
  margin: 20px auto 0;
  max-width: 400px;
}
.disclaimer-block p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #c47594;
  font-weight: 500;
}
.disclaimer-block a {
  color: #d48fa8;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Morphotype (result screen) disclaimer — same style but slightly smaller text */
#morpho-disclaimer.disclaimer-block {
  margin: 16px auto;
}
#morpho-disclaimer.disclaimer-block #morpho-disclaimer-text {
  font-size: 12px;
  color: #c47594;
  line-height: 1.7;
}

/* ── Morphotype top-5: show-all button + priority label ── */
.rcp-priority-lbl{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(91,165,169,.7);margin:0 0 8px;padding:0 2px;
}
.rcp-additional-lbl{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.3);margin:12px 0 6px;padding:2px 0;
  border-top:1px solid rgba(255,255,255,.06);padding-top:10px;
}
.rcp-show-all-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;margin:8px 0 4px;padding:10px 16px;min-height:44px;
  background:rgba(91,165,169,.08);border:1px solid rgba(91,165,169,.2);
  border-radius:12px;color:rgba(91,165,169,.85);font-size:13px;font-weight:600;
  cursor:pointer;transition:background .2s,border-color .2s;font-family:inherit;
}
.rcp-show-all-btn:active{background:rgba(91,165,169,.16);transform:scale(.98)}

/* ── Top-pick highlight on result items (green, like lifehacks) ── */
.rcp.rcp-top{background:rgba(74,222,128,.05);border:1px solid rgba(74,222,128,.22)}
.rcp.rcp-top .rcpm{background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,.5)}
.rcp.rcp-top .rcpn{color:#e6fff2}
.rcp-top-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#4ade80;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2);border-radius:20px;padding:2px 8px;margin-bottom:6px}

/* ── Bundle offer modal — shown after Skin Profile quiz ── */
.bom-overlay{position:fixed;inset:0;z-index:8000;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .35s ease;pointer-events:none}
.bom-overlay.open{opacity:1;pointer-events:all}
.bom-card{width:100%;max-width:460px;background:linear-gradient(160deg,#0b2426 0%,#102e32 60%,#0b2426 100%);border:1px solid rgba(91,165,169,.28);border-bottom:none;border-radius:28px 28px 0 0;padding:28px 24px 40px;padding-bottom:max(40px,env(safe-area-inset-bottom,0px));position:relative;transform:translateY(100%);transition:transform .38s cubic-bezier(.32,1.12,.48,1);max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.bom-overlay.open .bom-card{transform:translateY(0)}
.bom-close{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:50%;border:none;background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.bom-close:active{background:rgba(255,255,255,.16)}
.bom-icon-wrap{display:flex;justify-content:center;margin-bottom:14px}
.bom-headline{font-family:'Inter',sans-serif;font-size:20px;font-weight:800;color:#fff;text-align:center;margin-bottom:8px;letter-spacing:-.02em}
.bom-sub{font-size:13px;color:rgba(255,255,255,.55);text-align:center;line-height:1.5;margin-bottom:20px;max-width:320px;margin-left:auto;margin-right:auto}
.bom-what{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(91,165,169,.7);margin-bottom:10px}
.bom-tests{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}
.bom-test-item{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.8);line-height:1.4}
.bom-test-item svg{flex-shrink:0}
.bom-price-block{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px 18px;margin-bottom:18px;display:flex;flex-direction:column;align-items:center;gap:4px}
.bom-old-price{font-size:13px;color:rgba(255,255,255,.35);text-decoration:line-through}
.bom-new-price{font-size:34px;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1}
.bom-save-badge{margin-top:4px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#4ade80;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2);border-radius:20px;padding:3px 12px}
.bom-buy-btn{width:100%;padding:16px;border:none;border-radius:14px;background:linear-gradient(135deg,#2f767a,#3a8f94);color:#fff;font-family:'Inter',sans-serif;font-size:16px;font-weight:700;cursor:pointer;margin-bottom:10px;letter-spacing:-.01em;box-shadow:0 6px 22px rgba(47,118,122,.45);transition:transform .15s,box-shadow .15s}
.bom-buy-btn:active{transform:scale(.97);box-shadow:0 3px 12px rgba(47,118,122,.3)}
.bom-skip-btn{width:100%;padding:12px;border:none;background:none;color:rgba(255,255,255,.35);font-family:'Inter',sans-serif;font-size:13px;cursor:pointer;transition:color .2s}
.bom-skip-btn:active{color:rgba(255,255,255,.6)}

/* ── AI Quick Chips on result screen ── */
.result-ai-chips-wrap{
  margin:16px 0 8px;padding:16px;
  background:linear-gradient(135deg,rgba(91,165,169,.07),rgba(91,165,169,.03));
  border:1px solid rgba(91,165,169,.18);border-radius:18px;
}
.result-ai-chips-hdr{
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(91,165,169,.75);margin-bottom:12px;
}
.result-ai-chips{display:flex;flex-direction:column;gap:8px}
.result-ai-chip{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:12px 14px;min-height:44px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:13px;cursor:pointer;transition:background .18s,border-color .18s,transform .15s;
  font-family:inherit;text-align:left;
}
.result-ai-chip:active{background:rgba(91,165,169,.12);border-color:rgba(91,165,169,.3);transform:scale(.98)}
.result-ai-chip-icon{font-size:16px;flex-shrink:0;line-height:1}
.result-ai-chip-text{font-size:13px;font-weight:600;color:rgba(255,255,255,.8);line-height:1.3}

/* ── Onboarding animations ── */
@keyframes ob-float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18px,-28px) scale(1.08)}}
@keyframes ob-float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-14px,22px) scale(.92)}}
@keyframes ob-float3{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(12px,-18px) scale(1.05)}66%{transform:translate(-8px,12px) scale(.96)}}
@keyframes ob-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes ob-pulse-gold{0%,100%{box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 30px rgba(196,160,96,.1)}50%{box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 55px rgba(196,160,96,.25)}}
@keyframes ob-avatar-pulse{0%,100%{box-shadow:0 0 0 0 rgba(196,160,96,.35)}60%{box-shadow:0 0 0 14px rgba(196,160,96,0)}}
@keyframes ob-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ── Onboarding screen ── */
#onboard-s{
  position:fixed;inset:0;z-index:1000;
  background:linear-gradient(160deg,#061418 0%,#0a2428 55%,#071b1e 100%);
  display:flex;flex-direction:column;align-items:center;
  overflow:hidden;
}

/* Floating background orbs */
.ob-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;}
.ob-orb-1{width:340px;height:340px;background:rgba(47,118,122,.28);top:-100px;right:-80px;animation:ob-float1 9s ease-in-out infinite;}
.ob-orb-2{width:280px;height:280px;background:rgba(91,165,169,.18);bottom:18%;left:-90px;animation:ob-float2 12s ease-in-out infinite;}
.ob-orb-3{width:220px;height:220px;background:rgba(196,160,96,.16);bottom:8%;right:-50px;animation:ob-float3 15s ease-in-out infinite;}

.ob-slides{
  flex:1;display:flex;width:100%;overflow:hidden;position:relative;
  touch-action:pan-y;align-items:stretch;z-index:1;
}
.ob-slide{
  flex:0 0 100%;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:max(env(safe-area-inset-top,0px) + 20px, 44px) 24px 20px;
  text-align:center;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}

/* Slide content always visible — no opacity animation that could fail on mobile */

.ob-badge{
  display:inline-flex;align-items:center;
  padding:5px 14px;border-radius:20px;
  background:rgba(91,165,169,.1);
  border:1px solid rgba(91,165,169,.3);
  box-shadow:0 0 18px rgba(91,165,169,.15);
  font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(91,165,169,.95);margin-bottom:14px;
}
.ob-title{
  font-size:clamp(22px,6vw,34px);font-weight:800;line-height:1.18;
  color:#fff;margin-bottom:10px;letter-spacing:-.02em;
}
.ob-title em{color:var(--accent,#c4a060);font-style:normal}
.ob-sub{
  font-size:14px;color:rgba(255,255,255,.5);line-height:1.6;
  max-width:320px;margin-bottom:20px;
}

/* Slide 0 — remove side padding so hero goes edge-to-edge */
#ob-slide-0{padding-left:0;padding-right:0;padding-top:0}
/* Mobile slide-0: photo fills screen, name block at bottom — no extra space */
@media(max-width:899px){
  #ob-slide-0{justify-content:flex-start;overflow:hidden}
  .ob-hero{height:clamp(320px,65vh,520px)}
  /* Slide-0b: content slide — same look as other slides */
  #ob-slide-0b{justify-content:center;padding-top:32px;padding-bottom:24px}
}

/* ── Full-bleed hero ── */
.ob-hero{
  display:block;width:100%;flex-shrink:0;
  height:clamp(320px,60vh,500px);
  position:relative;overflow:hidden;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.ob-hero-img{
  width:100%;height:100%;
  object-fit:cover;
  /* show face + upper body — not just the crown */
  object-position:50% 18%;
  display:block;
}
/* Overlay removed — photo has built-in vignette matching background color */
.ob-hero-overlay{
  position:absolute;inset:0;pointer-events:none;
}
/* IG pill — top right, behind overlay so it sits on scrim */
.ob-hero-top{
  position:absolute;top:0;left:0;right:0;z-index:2;
  padding:max(env(safe-area-inset-top,0px),14px) 16px 0;
  display:flex;justify-content:flex-end;
}
.ob-hero-ig-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:20px;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.18);
  font-size:12px;font-weight:600;color:rgba(255,255,255,.9);
  pointer-events:none;
}
.ob-hero-ig-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,.7);
  animation:livePulse 2s ease-in-out infinite;
}
/* Name block — below photo, on dark bg */
.ob-desktop-name{display:none}
.ob-s0-nameblock .ob-hero-name{font-size:clamp(20px,5.5vw,26px)}
.ob-hero-nameblock{
  width:100%;
  padding:14px 22px 0;
  display:flex;flex-direction:column;gap:3px;
}
.ob-hero-name{
  font-size:clamp(22px,5.5vw,30px);font-weight:800;
  color:#fff;line-height:1.1;letter-spacing:-.025em;
}
.ob-hero-cred{
  font-size:12.5px;font-weight:500;
  color:rgba(255,255,255,.45);letter-spacing:.01em;
}
/* Tap feedback */
.ob-hero:active .ob-hero-img{filter:brightness(.88);transition:filter .1s}

/* ── Content below hero ── */
.ob-s0-content{
  display:flex;flex-direction:column;align-items:center;
  padding:14px 24px 0;text-align:center;width:100%;
}
.ob-title-xl{font-size:clamp(24px,6.5vw,34px) !important;margin-bottom:8px}
/* Benefits */
.ob-s0-benefits{
  width:100%;max-width:340px;
  display:flex;flex-direction:column;gap:8px;
}
.ob-s0-benefit{
  display:flex;align-items:flex-start;gap:12px;
  padding:11px 14px;
  background:rgba(91,165,169,.07);
  border:1px solid rgba(91,165,169,.15);
  border-radius:14px;
  text-align:left;
}
.ob-s0-benefit span{
  font-size:13.5px;color:rgba(255,255,255,.75);line-height:1.5;
}
.ob-s0-benefit svg{flex-shrink:0;margin-top:1px}
.ob-s0-trust-sep{color:rgba(255,255,255,.18)}

/* Stats — slide 0 */
.ob-stats{
  display:flex;gap:8px;justify-content:center;margin-bottom:18px;
  flex-wrap:nowrap;width:100%;
}
.ob-stat{
  flex:1 1 0;min-width:0;
  padding:12px 10px;
  background:rgba(91,165,169,.07);
  border:1px solid rgba(91,165,169,.22);
  border-radius:18px;text-align:center;
  position:relative;overflow:hidden;
}
.ob-stat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(91,165,169,.5),transparent);
}
.ob-stat-num{
  font-size:36px;font-weight:900;color:var(--tl,#5ba5a9);line-height:1;
  letter-spacing:-.02em;
  text-shadow:0 0 24px rgba(91,165,169,.55);
}
.ob-stat-lbl{font-size:10px;font-weight:700;letter-spacing:.07em;color:rgba(255,255,255,.4);margin-top:5px;text-transform:uppercase}

/* Mock result card — slide 1 */
.ob-mock-card{
  width:100%;max-width:340px;
  background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.13);border-radius:22px;
  overflow:hidden;
  margin-bottom:12px;text-align:left;
  box-shadow:0 28px 64px rgba(0,0,0,.5),0 8px 20px rgba(0,0,0,.3);
}
.ob-mock-card-stripe{
  height:3px;
  background:linear-gradient(90deg,#1d5c60,#5ba5a9,#8fd4d8,#5ba5a9,#1d5c60);
  background-size:200% 100%;
  animation:ob-shimmer 3s linear infinite;
}
.ob-mock-card-type{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(91,165,169,.75);margin-bottom:10px;
  padding:18px 22px 0;
}
.ob-mock-card-name{
  font-size:22px;font-weight:800;color:#fff;margin-bottom:8px;
  padding:0 22px;
}
.ob-mock-card-desc{
  font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.6;margin-bottom:16px;
  padding:0 22px;
}
.ob-mock-traits{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;padding:0 22px}
.ob-mock-trait{
  padding:5px 11px;background:rgba(91,165,169,.1);
  border:1px solid rgba(91,165,169,.22);border-radius:20px;
  font-size:11px;font-weight:600;color:rgba(91,165,169,.95);
}
.ob-mock-prods{display:flex;flex-direction:column;gap:7px;padding:0 22px 20px}
.ob-mock-prod{
  padding:10px 13px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
}
.ob-mock-prod-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.85)}
.ob-mock-prod-desc{font-size:11.5px;color:rgba(255,255,255,.4);margin-top:2px}

/* Passport preview — slide 2 */
.ob-passport{
  width:100%;max-width:340px;
  background:linear-gradient(145deg,rgba(196,160,96,.13),rgba(196,160,96,.04));
  border:1px solid rgba(196,160,96,.28);border-radius:22px;
  padding:18px;margin-bottom:0;
  animation:ob-pulse-gold 4s ease-in-out infinite;
}
.ob-passport-hdr{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.ob-passport-title{
  font-size:16px;font-weight:800;color:var(--accent,#c4a060);letter-spacing:.04em;
}
.ob-passport-sub{
  font-size:11px;color:rgba(255,255,255,.4);margin-top:2px;
}
.ob-stamps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ob-stamp{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 8px;border-radius:16px;
  border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);
}
.ob-stamp.done{border-color:rgba(91,165,169,.35);background:rgba(91,165,169,.08);}
.ob-stamp.done .ob-stamp-icon{color:rgba(91,165,169,.9)}
.ob-stamp-icon{font-size:22px;color:rgba(255,255,255,.25);transition:color .3s;}
.ob-stamp-label{font-size:9.5px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.4);text-align:center;text-transform:uppercase;line-height:1.3}

/* SVG icon stamp variants — onboarding passport slide */
@keyframes ob-stamp-pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}}
.ob-stamp-svg-wrap{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  animation:ob-stamp-pulse 3s ease-in-out infinite;
}
/* Each stamp has unique color + glow + staggered pulse */
.ob-stamp-teal-wrap{background:rgba(91,165,169,.18);border:1px solid rgba(91,165,169,.4);box-shadow:0 0 12px rgba(91,165,169,.35);animation-delay:0s}
.ob-stamp-rose-wrap{background:rgba(212,116,138,.15);border:1px solid rgba(212,116,138,.35);box-shadow:0 0 12px rgba(212,116,138,.3);animation-delay:.5s}
.ob-stamp-green-wrap{background:rgba(106,184,122,.15);border:1px solid rgba(106,184,122,.35);box-shadow:0 0 12px rgba(106,184,122,.3);animation-delay:1s}
.ob-stamp-amber-wrap{background:rgba(212,176,84,.15);border:1px solid rgba(212,176,84,.35);box-shadow:0 0 12px rgba(212,176,84,.3);animation-delay:1.5s}
.ob-stamp-violet-wrap{background:rgba(123,142,212,.15);border:1px solid rgba(123,142,212,.35);box-shadow:0 0 12px rgba(123,142,212,.3);animation-delay:2s}
.ob-stamp-orange-wrap{background:rgba(212,136,90,.15);border:1px solid rgba(212,136,90,.35);box-shadow:0 0 12px rgba(212,136,90,.3);animation-delay:2.5s}
/* Stamp borders match icon color */
.ob-stamp-teal{border-color:rgba(91,165,169,.2);background:rgba(91,165,169,.05)}
.ob-stamp-rose{border-color:rgba(212,116,138,.18);background:rgba(212,116,138,.04)}
.ob-stamp-green{border-color:rgba(106,184,122,.18);background:rgba(106,184,122,.04)}
.ob-stamp-amber{border-color:rgba(212,176,84,.18);background:rgba(212,176,84,.04)}
.ob-stamp-violet{border-color:rgba(123,142,212,.18);background:rgba(123,142,212,.04)}
.ob-stamp-orange{border-color:rgba(212,136,90,.18);background:rgba(212,136,90,.04)}
/* Stagger animation delays on each stamp */
.ob-stamp{animation:ob-stamp-fadeIn .4s ease both}
@keyframes ob-stamp-fadeIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.ob-stamp.done .ob-stamp-label{color:rgba(91,165,169,.7)}
.ob-stamp-check{
  width:16px;height:16px;border-radius:50%;
  background:rgba(91,165,169,.9);display:flex;align-items:center;justify-content:center;
  font-size:9px;color:#0b2c30;font-weight:800;
}

/* Onboarding dots + nav */
.ob-dots{display:flex;gap:6px;justify-content:center;padding:12px 0;position:relative;z-index:1;}
.ob-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.18);transition:all .35s cubic-bezier(.4,0,.2,1);
}
.ob-dot.active{width:22px;border-radius:3px;background:var(--tl,#5ba5a9);box-shadow:0 0 8px rgba(91,165,169,.5)}
.ob-nav{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:12px 28px calc(env(safe-area-inset-bottom,0px) + 20px);
  width:100%;position:relative;z-index:1;
}
.ob-next-btn{
  width:100%;max-width:340px;padding:16px 24px;
  border:none;border-radius:50px;
  background:linear-gradient(135deg,#2a6a6e,#5ba5a9);
  color:#fff;font-family:inherit;font-size:16px;font-weight:700;
  cursor:pointer;transition:transform .15s,box-shadow .15s;
  box-shadow:0 10px 32px rgba(47,118,122,.5);
  letter-spacing:.01em;
}
.ob-next-btn:active{transform:scale(.97);box-shadow:0 5px 18px rgba(47,118,122,.35)}
.ob-next-btn.ob-cta{
  background:linear-gradient(135deg,#9a6a2e,#c4a060,#d4b47a);
  box-shadow:0 10px 32px rgba(196,160,96,.5);
  font-size:17px;letter-spacing:.01em;
}
.ob-next-btn.ob-cta:active{box-shadow:0 5px 18px rgba(196,160,96,.35)}
.ob-skip-btn{
  background:none;border:none;padding:8px 16px;
  font-family:inherit;font-size:13px;font-weight:500;
  color:rgba(255,255,255,.28);cursor:pointer;
}
.ob-skip-btn:active{color:rgba(255,255,255,.55)}

/* Passport insights — slide 2 */
.ob-passport-insights{
  width:100%;max-width:340px;
  display:flex;flex-direction:column;gap:8px;
  margin-top:14px;
}
.ob-insight-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;
  background:rgba(91,165,169,.06);
  border:1px solid rgba(91,165,169,.12);
  border-radius:12px;
  text-align:left;
}
.ob-insight-item span{
  font-size:12.5px;color:rgba(255,255,255,.65);line-height:1.4;
}
.ob-insight-item svg{flex-shrink:0}

/* Slide 3 — Profile invite */
.ob-slide-profile{justify-content:flex-start;padding-top:max(env(safe-area-inset-top,0px) + 20px, 48px)}
.ob-profile-avatar{
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(145deg,rgba(196,160,96,.18),rgba(196,160,96,.06));
  border:1.5px solid rgba(196,160,96,.4);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  animation:ob-avatar-pulse 2.8s ease-in-out infinite;
}
.ob-s3-benefits{
  width:100%;max-width:340px;
  display:flex;flex-direction:column;gap:9px;
  margin-bottom:18px;
}
.ob-s3-benefit{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 16px;
  background:rgba(91,165,169,.07);
  border:1px solid rgba(91,165,169,.18);
  border-radius:14px;
  text-align:left;
}
.ob-s3-benefit svg{flex-shrink:0;margin-top:2px}
.ob-s3-benefit span{font-size:13.5px;color:rgba(255,255,255,.78);line-height:1.5}
.ob-s3-hint-box{
  width:100%;max-width:340px;
  padding:14px 18px;
  border:1px solid rgba(196,160,96,.38);
  border-radius:14px;
  background:rgba(196,160,96,.07);
  font-size:13px;font-weight:600;
  color:rgba(196,160,96,.92);
  text-align:center;
  line-height:1.5;
}

/* Slide 3 — compact mobile layout (fit one screen, no scroll) */
@media (max-width: 899px){
  .ob-slide-profile{
    padding-top:max(env(safe-area-inset-top,0px) + 12px, 24px);
    padding-bottom:16px;
  }
  .ob-slide-profile .ob-profile-avatar{
    width:64px;height:64px;margin-bottom:12px;
  }
  .ob-slide-profile .ob-profile-avatar svg{width:34px;height:34px}
  .ob-slide-profile .ob-badge{margin-bottom:10px;padding:4px 12px;font-size:9.5px}
  .ob-slide-profile .ob-title{font-size:clamp(20px,5.6vw,28px);margin-bottom:8px;line-height:1.16}
  .ob-slide-profile .ob-sub{font-size:13px;margin-bottom:14px;line-height:1.5;max-width:300px}
  .ob-slide-profile .ob-s3-benefits{gap:7px;margin-bottom:12px;max-width:330px}
  .ob-slide-profile .ob-s3-benefit{padding:9px 14px;border-radius:12px}
  .ob-slide-profile .ob-s3-benefit span{font-size:12.5px;line-height:1.4}
  .ob-slide-profile .ob-s3-benefit svg{width:14px;height:14px;margin-top:1px}
  .ob-slide-profile .ob-s3-hint-box{padding:10px 14px;font-size:12px;line-height:1.45;border-radius:12px;max-width:330px}
}

/* ── Merged-screen animation keyframes ── */
@keyframes ob-merge-left-in{from{transform:translateX(-48px);opacity:0}to{transform:none;opacity:1}}
@keyframes ob-merge-right-in{from{transform:translateX(48px);opacity:0}to{transform:none;opacity:1}}
@keyframes ob-merge-up{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}
@keyframes ob-merge-stamp-pop{from{transform:scale(.35) rotate(-18deg);opacity:0}70%{transform:scale(1.1) rotate(2deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes ob-merge-card-float{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-7px) rotate(.3deg)}}
@keyframes ob-merge-teal-glow{0%,100%{box-shadow:0 0 40px rgba(91,165,169,.18),0 24px 64px rgba(0,0,0,.55)}50%{box-shadow:0 0 90px rgba(91,165,169,.42),0 24px 64px rgba(0,0,0,.55)}}
@keyframes ob-merge-gold-glow{0%,100%{box-shadow:0 0 30px rgba(196,160,96,.2),0 20px 54px rgba(0,0,0,.5)}50%{box-shadow:0 0 75px rgba(196,160,96,.46),0 20px 54px rgba(0,0,0,.5)}}
@keyframes ob-merge-btn-pulse{0%,100%{box-shadow:0 8px 36px rgba(196,160,96,.5)}50%{box-shadow:0 12px 64px rgba(196,160,96,.8),0 0 90px rgba(196,160,96,.18)}}
@keyframes ob-merge-orb1{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(28px,-22px) scale(1.1)}80%{transform:translate(-14px,18px) scale(.92)}}
@keyframes ob-merge-orb2{0%,100%{transform:translate(0,0) scale(1)}35%{transform:translate(-24px,18px) scale(.88)}70%{transform:translate(18px,-28px) scale(1.08)}}
@keyframes ob-merge-shine{from{transform:translateX(-200%) skewX(-15deg)}to{transform:translateX(350%) skewX(-15deg)}}
@keyframes ob-merge-dot-blink{0%,100%{opacity:.38}50%{opacity:1}}

/* ═══════════════════════════════════════════
   ONBOARDING MERGED VIEW — PREMIUM REDESIGN
   Triggered when .ob-merged class added to #onboard-s
   ═══════════════════════════════════════════ */
@media(min-width:900px){

  /* ── Master container — deep premium dark ── */
  #onboard-s.ob-merged{
    position:relative;overflow:hidden;
    background:linear-gradient(150deg,#061418 0%,#0b2830 45%,#071a20 100%);
    display:flex;flex-direction:column;
  }

  /* Animated ambient teal+gold orbs — layer 1 */
  #onboard-s.ob-merged::before{
    content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(ellipse 700px 480px at 18% 65%,rgba(47,118,122,.2) 0%,transparent 65%),
      radial-gradient(ellipse 500px 400px at 82% 20%,rgba(196,160,96,.14) 0%,transparent 60%),
      radial-gradient(ellipse 320px 320px at 55% 88%,rgba(47,118,122,.07) 0%,transparent 55%);
    animation:ob-merge-orb1 14s ease-in-out infinite;
  }
  /* Animated ambient orbs — layer 2 */
  #onboard-s.ob-merged::after{
    content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(ellipse 420px 300px at 88% 72%,rgba(196,160,96,.1) 0%,transparent 60%),
      radial-gradient(ellipse 360px 260px at 12% 18%,rgba(91,165,169,.07) 0%,transparent 55%);
    animation:ob-merge-orb2 18s ease-in-out infinite;
  }

  /* ── Slides strip — horizontal flex ── */
  .ob-merged .ob-slides{
    overflow:visible;flex:1;
    display:flex;flex-direction:row;align-items:stretch;
    position:relative;z-index:1;min-height:0;
  }

  /* Hide slide 0 and slide 3 */
  .ob-merged #ob-slide-0{display:none!important}
  .ob-merged #ob-slide-3{display:none!important}

  /* Common reset for visible columns */
  .ob-merged #ob-slide-1,
  .ob-merged #ob-slide-2{
    transform:none!important;
    overflow:visible;text-align:left;
  }

  /* ═══ LEFT COLUMN — mock result preview ═══ */
  .ob-merged #ob-slide-1{
    flex:0 0 46%;
    display:flex;flex-direction:column;justify-content:center;
    padding:60px 40px 60px 72px;
    border-right:1px solid rgba(255,255,255,.05);
    position:relative;overflow:hidden;
    animation:ob-merge-left-in .72s cubic-bezier(.16,1,.3,1) both;
  }
  /* Teal atmosphere glow — bottom left */
  .ob-merged #ob-slide-1::after{
    content:'';position:absolute;
    bottom:-80px;left:-60px;
    width:380px;height:380px;
    background:radial-gradient(circle,rgba(91,165,169,.11) 0%,transparent 70%);
    pointer-events:none;border-radius:50%;
  }

  /* Badge — teal pill with live dot */
  .ob-merged #ob-slide-1 .ob-badge{
    display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
    background:rgba(91,165,169,.09);border:1px solid rgba(91,165,169,.26);
    color:rgba(91,165,169,.95);font-size:10.5px;letter-spacing:.18em;font-weight:700;
    padding:6px 14px;border-radius:30px;margin-bottom:20px;
    animation:ob-merge-up .5s cubic-bezier(.16,1,.3,1) .18s both;
  }
  .ob-merged #ob-slide-1 .ob-badge::before{
    content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;
    background:rgba(91,165,169,.9);
    animation:ob-merge-dot-blink 2.2s ease-in-out infinite;
  }

  /* Title */
  .ob-merged #ob-slide-1 .ob-title{
    text-align:left;font-size:clamp(26px,3.1vw,44px)!important;
    font-weight:900;line-height:1.12;letter-spacing:-.025em;
    margin-bottom:12px;
    animation:ob-merge-up .55s cubic-bezier(.16,1,.3,1) .28s both;
  }

  /* Sub */
  .ob-merged #ob-slide-1 .ob-sub{
    text-align:left;font-size:15px;color:rgba(255,255,255,.48);
    max-width:390px;margin-bottom:28px;line-height:1.7;
    animation:ob-merge-up .55s cubic-bezier(.16,1,.3,1) .38s both;
  }

  /* Mock card — levitating with teal glow */
  .ob-merged .ob-mock-card{
    max-width:none;width:100%;
    border-color:rgba(91,165,169,.22);
    animation:
      ob-merge-up .65s cubic-bezier(.16,1,.3,1) .48s both,
      ob-merge-card-float 6s ease-in-out 1.4s infinite,
      ob-merge-teal-glow 4.5s ease-in-out 1.4s infinite;
  }

  /* Hide small disclaimer on desktop */
  .ob-merged #ob-mock-disclaimer{display:none}

  /* ═══ RIGHT COLUMN — passport preview ═══ */
  .ob-merged #ob-slide-2{
    flex:1;
    display:flex;flex-direction:column;justify-content:center;
    padding:60px 72px 60px 40px;
    position:relative;overflow:hidden;
    animation:ob-merge-right-in .72s cubic-bezier(.16,1,.3,1) .1s both;
  }
  /* Gold atmosphere glow — top right */
  .ob-merged #ob-slide-2::after{
    content:'';position:absolute;
    top:-60px;right:-50px;
    width:340px;height:340px;
    background:radial-gradient(circle,rgba(196,160,96,.12) 0%,transparent 68%);
    pointer-events:none;border-radius:50%;
  }

  /* Badge — gold pill with live dot */
  .ob-merged #ob-slide-2 .ob-badge{
    display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
    background:rgba(196,160,96,.09);border:1px solid rgba(196,160,96,.28);
    color:rgba(196,160,96,.95);font-size:10.5px;letter-spacing:.18em;font-weight:700;
    padding:6px 14px;border-radius:30px;margin-bottom:20px;
    animation:ob-merge-up .5s cubic-bezier(.16,1,.3,1) .32s both;
  }
  .ob-merged #ob-slide-2 .ob-badge::before{
    content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;
    background:rgba(196,160,96,.9);
    animation:ob-merge-dot-blink 2.2s ease-in-out .55s infinite;
  }

  /* Title */
  .ob-merged #ob-slide-2 .ob-title{
    text-align:left;font-size:clamp(24px,2.7vw,38px)!important;
    font-weight:900;line-height:1.12;letter-spacing:-.025em;
    margin-bottom:12px;
    animation:ob-merge-up .55s cubic-bezier(.16,1,.3,1) .42s both;
  }

  /* Sub */
  .ob-merged #ob-slide-2 .ob-sub{
    text-align:left;font-size:14px;color:rgba(255,255,255,.48);
    max-width:360px;margin-bottom:22px;line-height:1.7;
    animation:ob-merge-up .55s cubic-bezier(.16,1,.3,1) .52s both;
  }

  /* Passport widget — gold-glowing */
  .ob-merged .ob-passport{
    width:100%;max-width:none;margin-bottom:18px;
    border-color:rgba(196,160,96,.35);
    animation:
      ob-merge-up .65s cubic-bezier(.16,1,.3,1) .62s both,
      ob-merge-gold-glow 4.5s ease-in-out 1.5s infinite;
  }

  /* Stamps — staggered spring pop */
  .ob-merged .ob-stamps .ob-stamp:nth-child(1){animation:ob-merge-stamp-pop .52s cubic-bezier(.34,1.56,.64,1) .78s both}
  .ob-merged .ob-stamps .ob-stamp:nth-child(2){animation:ob-merge-stamp-pop .52s cubic-bezier(.34,1.56,.64,1) .88s both}
  .ob-merged .ob-stamps .ob-stamp:nth-child(3){animation:ob-merge-stamp-pop .52s cubic-bezier(.34,1.56,.64,1) .98s both}
  .ob-merged .ob-stamps .ob-stamp:nth-child(4){animation:ob-merge-stamp-pop .52s cubic-bezier(.34,1.56,.64,1) 1.08s both}
  .ob-merged .ob-stamps .ob-stamp:nth-child(5){animation:ob-merge-stamp-pop .52s cubic-bezier(.34,1.56,.64,1) 1.18s both}
  .ob-merged .ob-stamps .ob-stamp:nth-child(6){animation:ob-merge-stamp-pop .52s cubic-bezier(.34,1.56,.64,1) 1.28s both}
  .ob-merged .ob-stamps .ob-stamp:nth-child(7){animation:ob-merge-stamp-pop .52s cubic-bezier(.34,1.56,.64,1) 1.38s both}

  /* Insights — staggered fade-up */
  .ob-merged .ob-passport-insights{width:100%;max-width:none;gap:10px}
  .ob-merged .ob-insight-item{padding:10px 16px}
  .ob-merged .ob-insight-item span{font-size:13.5px;color:rgba(255,255,255,.72)}
  .ob-merged .ob-insight-item:nth-child(1){animation:ob-merge-up .5s cubic-bezier(.16,1,.3,1) .95s both}
  .ob-merged .ob-insight-item:nth-child(2){animation:ob-merge-up .5s cubic-bezier(.16,1,.3,1) 1.05s both}
  .ob-merged .ob-insight-item:nth-child(3){animation:ob-merge-up .5s cubic-bezier(.16,1,.3,1) 1.15s both}
  .ob-merged .ob-insight-item:nth-child(4){animation:ob-merge-up .5s cubic-bezier(.16,1,.3,1) 1.25s both}

  /* Dots hidden in merged */
  .ob-merged ~ .ob-dots,.ob-merged .ob-dots{display:none}

  /* ── CTA bar at bottom ── */
  #onboard-s.ob-merged > .ob-nav{
    display:flex;flex-direction:column;align-items:center;
    padding:18px 72px calc(env(safe-area-inset-bottom,0px) + 24px);
    background:linear-gradient(to top,rgba(6,18,22,.97) 0%,rgba(6,18,22,.72) 100%);
    border-top:1px solid rgba(255,255,255,.05);
    position:relative;z-index:2;gap:0;
    animation:ob-merge-up .5s cubic-bezier(.16,1,.3,1) .9s both;
  }

  /* CTA button — gold, wide, pulsing */
  #onboard-s.ob-merged > .ob-nav .ob-next-btn{
    max-width:520px;width:100%;
    font-size:17px;font-weight:800;
    padding:18px 36px;letter-spacing:.05em;
    position:relative;overflow:hidden;
    animation:ob-merge-btn-pulse 3s ease-in-out 1.8s infinite;
  }

  /* Shine sweep across CTA button */
  #onboard-s.ob-merged > .ob-nav .ob-next-btn::after{
    content:'';position:absolute;
    top:0;left:0;width:38%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
    pointer-events:none;
    animation:ob-merge-shine 4s ease-in-out 2.8s infinite;
  }

  #onboard-s.ob-merged > .ob-nav .ob-skip-btn{display:none}
}

/* Dots hidden when merged (direct child of #onboard-s) */
#onboard-s.ob-merged > .ob-dots{display:none!important}

/* ── Landscape & compact-height fixes ──────────────── */
@media (max-height: 600px) {
  /* Onboarding */
  .ob-slide{padding-top:max(env(safe-area-inset-top,0px) + 8px, 16px);padding-bottom:8px}
  .ob-badge{margin-bottom:8px}
  .ob-title{font-size:clamp(18px,5vw,26px);margin-bottom:6px}
  .ob-sub{font-size:13px;margin-bottom:10px}
  .ob-stats{margin-bottom:8px}
  .ob-stat{padding:8px 14px}
  .ob-stat-num{font-size:24px}
  .ob-passport{padding:12px}
  .ob-passport-hdr{margin-bottom:8px}
  .ob-dots{margin:4px 0}
  .ob-nav{padding:4px 24px}
  /* Quiz screen */
  .qn{margin-bottom:6px}
  .qt{font-size:clamp(17px,4vw,22px);margin-bottom:14px}
  .opt{padding:10px 14px;min-height:40px}
  #quiz-s{padding-top:0}
  /* Paywall sheet */
  .pw-sheet{max-height:92vh}
  .pw-sheet-handle{margin:6px auto 10px}
  /* Result screen */
  #res-wrap{padding-top:8px}
}
@media (max-height: 600px) and (orientation: landscape) {
  .ob-slide{padding-left:max(env(safe-area-inset-left,0px) + 16px, 24px);padding-right:max(env(safe-area-inset-right,0px) + 16px, 24px)}
  /* Quiz: two-column options in landscape if enough width */
  #quiz-s{display:flex;flex-direction:column;height:100vh;overflow-y:auto}
  .pw-sheet{border-radius:16px 16px 0 0}
}

/* ── Overscroll: no rubber-band on scrollable content areas ── */
#res-wrap,#quiz-s{overscroll-behavior-y:contain}

/* ═══════════════════════════════════════════
   ONBOARDING SLIDE 0 — DESKTOP TWO-COLUMN LAYOUT
   Photo left (full height) | Content right
   ═══════════════════════════════════════════ */

/* Desktop CTA block — hidden on mobile */
.ob-s0-desktop-cta{display:none}

@media(min-width:900px){
  /* Hide mobile name block, hide external nav on slide 0 */
  .ob-mobile-name{display:none}
  .ob-desktop-name{display:flex;flex-direction:column;gap:5px;margin-bottom:28px}
  .ob-s0-nameblock .ob-hero-name{font-size:clamp(22px,2.6vw,32px)}
  .ob-s0-nameblock .ob-hero-cred{font-size:14px;color:rgba(255,255,255,.5)}

  /* Hide external .ob-nav and dots on desktop when slide 0 is active — CTA is in content column */
  #onboard-s:not(.ob-merged) > .ob-nav{display:none}
  #onboard-s:not(.ob-merged) > .ob-dots{display:none}

  /* Show embedded desktop CTA */
  .ob-s0-desktop-cta{
    display:flex;flex-direction:column;align-items:flex-start;
    gap:10px;margin-top:28px;width:100%;max-width:420px;
  }
  .ob-s0-next-btn{
    width:100%;padding:17px 28px;border:none;border-radius:50px;
    background:linear-gradient(135deg,#2a6a6e,#5ba5a9);
    color:#fff;font-family:inherit;font-size:16px;font-weight:700;
    cursor:pointer;letter-spacing:.01em;
    box-shadow:0 10px 32px rgba(47,118,122,.45);
    transition:transform .15s,box-shadow .15s;
  }
  .ob-s0-next-btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(47,118,122,.55)}
  .ob-s0-next-btn:active{transform:translateY(1px) scale(.99);box-shadow:0 5px 16px rgba(47,118,122,.3)}
  .ob-s0-skip-btn{
    background:none;border:none;padding:4px 8px;
    font-family:inherit;font-size:13px;font-weight:500;
    color:rgba(255,255,255,.28);cursor:pointer;
    transition:color .2s;
  }
  .ob-s0-skip-btn:hover{color:rgba(255,255,255,.5)}

  /* Slide 0: full-height two-column row */
  #ob-slide-0{
    flex-direction:row;
    align-items:stretch;
    padding:0;
    overflow:hidden;
    min-height:100vh;
    min-height:100dvh;
  }

  /* Left: photo — fixed width, fills container exactly (no overflow clip) */
  .ob-hero{
    flex:0 0 44%;
    height:100%;
    min-height:0;
    max-height:none;
    position:relative;
    align-self:stretch;
  }
  .ob-hero-img{
    width:100%;height:100%;
    object-fit:cover;
    object-position:50% 20%;
  }

  /* Desktop: photo has built-in vignette — no overlay needed */
  .ob-hero-overlay{ background:none; }

  /* IG pill stays visible on desktop */
  .ob-hero-top{pointer-events:none}

  /* Mobile nameblock: hidden (shown in content col) */
  .ob-hero-nameblock{display:none}

  /* Right column: content */
  .ob-s0-content{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding:48px 56px 48px 52px;
    text-align:left;
    overflow-y:auto;
  }

  /* Badge */
  .ob-s0-content .ob-badge{margin-bottom:18px}

  /* Headline */
  .ob-title-xl{
    font-size:clamp(32px,3.6vw,50px)!important;
    text-align:left;
    line-height:1.12;
    margin-bottom:14px;
  }

  /* Sub */
  .ob-sub{
    font-size:16px;
    max-width:440px;
    text-align:left;
    margin-bottom:28px;
    color:rgba(255,255,255,.52);
    line-height:1.65;
  }

  /* Stats row */
  .ob-stats{
    justify-content:flex-start;
    gap:10px;
    margin-bottom:28px;
  }
  .ob-stat{min-width:88px;padding:14px 20px}
  .ob-stat-num{font-size:38px}

  /* Benefits */
  .ob-s0-benefits{max-width:440px;gap:9px}
  .ob-s0-benefit{padding:12px 16px}
  .ob-s0-benefit span{font-size:14px;color:rgba(255,255,255,.78)}
}

@media(min-width:1200px){
  .ob-hero{flex-basis:46%}
  .ob-s0-content{padding:52px 72px 52px 60px}
  .ob-title-xl{font-size:clamp(38px,3.5vw,54px)!important}
  .ob-s0-next-btn{font-size:17px;padding:18px 32px}
}

/* ── Morphotype preview close button tap target ── */
.morpho-pvw-btn{min-width:36px;min-height:36px}

/* ── Bundle offer modal — desktop: centered dialog ── */
@keyframes bomFadeIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(min-width:768px){
  .bom-overlay{align-items:center}
  .bom-card{border-radius:24px!important;border-bottom:1px solid rgba(91,165,169,.28)!important;padding-bottom:32px;transform:translateY(20px) scale(.95);max-height:90vh}
  .bom-overlay.open .bom-card{transform:translateY(0) scale(1)}
}
/* Urgency badge */
.bom-urgency{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fbbf24;text-align:center;margin-bottom:10px;opacity:.9}
/* Enhanced price block */
.bom-new-price{font-size:38px;font-weight:900;color:#fff;letter-spacing:-.04em;line-height:1;text-shadow:0 0 30px rgba(255,255,255,.15)}
.bom-save-badge{font-size:12px;padding:4px 14px}
/* CTA glow pulse */
@keyframes bomBtnGlow{0%,100%{box-shadow:0 6px 22px rgba(47,118,122,.45)}50%{box-shadow:0 6px 32px rgba(47,118,122,.7),0 0 0 4px rgba(47,118,122,.12)}}
.bom-buy-btn{animation:bomBtnGlow 2.4s ease-in-out infinite}

/* ── Premium press effect — replaces scale jiggle on all interactive elements ── */
/* Press-in: slight downward movement + darken + subtle inner shadow */
.btn-p:active,.btn-lg:active,.btn-gh:active,
.welcome-modal-btn:active,.paywall-btn-primary:active,
.pw-tier-btn:active,.pw-promo-btn:active,
.profile-cta:active,.inline-start-btn:active,
.bom-buy-btn:active,.bom-skip-btn:active,
.sp-action-btn:active,.share-gift-btn:active,
.share-gift:active,.share-row:active,
.prequiz-go-btn:active,.ob-next-btn:active,
#t-dl-report:active,.hook-cta:active{
  transform:translateY(2px) scale(.99)!important;
  filter:brightness(.82)!important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.18),0 0 14px rgba(var(--tl-rgb),.18)!important;
  transition-duration:.08s!important;
  animation:none!important;
}
.qc:active,.qc-profile-banner:active{
  transform:translateY(3px) scale(.98)!important;
  filter:brightness(.86)!important;
  transition-duration:.08s!important;
}
.opt:active{
  transform:translateY(2px) scale(.99)!important;
  filter:brightness(.88)!important;
  transition-duration:.08s!important;
}
.bc:active{
  transform:translateY(2px) scale(.99)!important;
  filter:brightness(.88)!important;
  transition-duration:.08s!important;
}
.pw-tier:active{
  transform:translateY(2px) scale(.99)!important;
  filter:brightness(.88)!important;
  border-color:rgba(var(--tl-rgb),.4)!important;
  transition-duration:.08s!important;
}

/* ═══════════════════════════════════════════
   RESULT SCREEN — VISUAL UPGRADE v206
   ═══════════════════════════════════════════ */

/* Bolder result type title */
.res-tt{font-weight:800;letter-spacing:-.03em}

/* Accent divider line under header */
.res-top{position:relative}
.res-top::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:52px;height:1.5px;background:linear-gradient(90deg,transparent,var(--tl) 40%,var(--tl) 60%,transparent);border-radius:2px}

/* Premium result card: ambient border + glow */
.rc-bg{border:1px solid rgba(91,165,169,.2)!important;box-shadow:0 0 52px rgba(47,118,122,.12),0 4px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07)!important}

/* Result card name: heavier weight */
.rc-name{font-weight:800;letter-spacing:-.025em}

/* Icon container: pill style like quiz cards */
.rc-hd-ic{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,rgba(47,118,122,.22),rgba(91,165,169,.1));border:1px solid rgba(91,165,169,.28);box-shadow:0 0 20px rgba(47,118,122,.25),inset 0 1px 0 rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}

/* Section labels: more authority */
.rc-sl{font-weight:800;letter-spacing:.12em}
.rc-eb{letter-spacing:.22em;font-weight:600}

/* Section inner highlight */
.rc-section{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}

/* ═══════════════════════════════════════════
   DESKTOP: SHEETS → CENTERED DIALOGS (768px+)
   Bottom sheets convert to centered modal dialogs
   ═══════════════════════════════════════════ */
@media(min-width:768px){
  /* Paywall sheet — backdrop gets blur on desktop */
  .paywall-overlay.pw-sheet-backdrop{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
  .pw-sheet{
    left:50%;right:auto;bottom:auto;top:50%;margin:0;
    transform:translate(-50%,-46%) scale(.95);
    opacity:0;
    max-height:85vh;max-height:85dvh;
    border-radius:28px!important;
    border-bottom:1px solid rgba(var(--tl-rgb),.15)!important;
    padding-bottom:24px!important;
    transition:transform .38s var(--ease-out-expo),opacity .28s ease;
  }
  .pw-sheet.open{transform:translate(-50%,-50%) scale(1);opacity:1}
  .pw-sheet-handle{display:none}

  /* Pre-quiz sheet */
  .prequiz-backdrop{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
  .prequiz-sheet{
    left:50%;right:auto;bottom:auto;top:50%;margin:0;
    transform:translate(-50%,-46%) scale(.95);
    opacity:0;
    border-radius:28px!important;
    transition:transform .38s var(--ease-out-expo),opacity .28s ease;
  }
  .prequiz-sheet.open{transform:translate(-50%,-50%) scale(1);opacity:1}
  .prequiz-handle{display:none}

  /* Completion sheet */
  .cmplt-backdrop{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
  .cmplt-sheet{
    left:50%;right:auto;bottom:auto;top:50%;margin:0;
    transform:translate(-50%,-46%) scale(.95);
    opacity:0;
    border-radius:28px!important;
    padding-bottom:28px!important;
    transition:transform .38s var(--ease-out-expo),opacity .28s ease;
  }
  .cmplt-sheet.open{transform:translate(-50%,-50%) scale(1);opacity:1}
  .cmplt-handle{display:none}

  /* Dr FAQ sheet — centered modal on desktop */
  .dr-faq-overlay{backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;align-items:center!important}
  .dr-faq-sheet{border-radius:28px!important;max-height:85vh!important;transform:scale(.95) translateY(20px)!important;opacity:0;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .25s ease!important}
  .dr-faq-overlay.dr-faq-vis .dr-faq-sheet{transform:scale(1) translateY(0)!important;opacity:1!important}
  .dr-faq-handle{display:none}
}

/* ── Focus-visible ring — keyboard navigation ── */
:focus-visible{
  outline:2px solid rgba(var(--tl-rgb),.85);
  outline-offset:3px;
  border-radius:8px;
}
button:focus-visible,.btn-p:focus-visible,.btn-lg:focus-visible,.btn-gh:focus-visible,
.opt:focus-visible,.qc:focus-visible,.pw-tier:focus-visible{
  outline:2px solid rgba(var(--tl-rgb),.85);
  outline-offset:3px;
}
/* Remove default outline — :focus-visible handles it */
:focus:not(:focus-visible){outline:none}

/* ── Push permission ask card ── */
#push-ask-card{
  position:fixed;bottom:-140px;left:50%;transform:translateX(-50%);
  z-index:8500;width:calc(100% - 32px);max-width:440px;
  background:linear-gradient(135deg,rgba(15,40,45,.98),rgba(10,28,32,.98));
  border:1px solid rgba(var(--tl-rgb),.3);border-radius:20px;
  padding:14px 16px 12px;
  box-shadow:0 8px 40px rgba(0,0,0,.55),0 0 0 1px rgba(var(--tl-rgb),.06);
  transition:bottom .4s var(--ease-out-expo);pointer-events:all;
}
#push-ask-card.visible{bottom:calc(max(env(safe-area-inset-bottom,0px),16px) + 8px)}
.push-ask-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.push-ask-icon{width:40px;height:40px;border-radius:12px;background:rgba(var(--tl-rgb),.12);border:1px solid rgba(var(--tl-rgb),.25);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.push-ask-title{font-size:13px;font-weight:700;color:#fff;margin-bottom:2px}
.push-ask-text{font-size:12px;color:rgba(255,255,255,.5);line-height:1.4}
.push-ask-btns{display:flex;gap:8px}
.push-ask-yes{flex:1;padding:11px;background:linear-gradient(135deg,var(--t),var(--tl));color:#000;font-family:inherit;font-size:13px;font-weight:700;border:none;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.push-ask-no{padding:11px 18px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.4);font-family:inherit;font-size:13px;font-weight:500;border:1px solid rgba(255,255,255,.07);border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* ═══════════════════════════════════════════════════════════
   SCREEN READER ONLY + SKIP TO CONTENT (accessibility)
══════════════════════════════════════════════════════════ */
.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;
}
.skip-to-content{
  position:absolute;top:-60px;left:16px;z-index:9999;
  background:var(--tl);color:#000;font-weight:700;font-size:14px;
  padding:10px 18px;border-radius:8px;text-decoration:none;
  transition:top .2s;
}
.skip-to-content:focus{ top:16px; }

/* ═══════════════════════════════════════════════════════════
   NETWORK STATUS INDICATOR
══════════════════════════════════════════════════════════ */
.network-status-bar{
  position:fixed;bottom:-48px;left:50%;transform:translateX(-50%);
  z-index:calc(var(--z-toast) + 1);
  background:rgba(30,30,30,.95);border:1px solid rgba(255,255,255,.12);
  border-radius:50px;padding:9px 18px;
  font-size:12px;font-weight:600;color:rgba(255,255,255,.7);
  white-space:nowrap;pointer-events:none;
  transition:bottom .35s var(--ease-out-expo);
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.network-status-bar.nsb-visible{ bottom:calc(max(env(safe-area-inset-bottom,0px),16px) + 56px) }

/* Georgian font support */
:lang(ka), [lang="ka"] *{ font-family:'Noto Sans Georgian','Inter','Helvetica Neue',Helvetica,Arial,sans-serif }

/* Contrast fix: social proof labels — boost opacity for WCAG AA */
.spb-lbl{ color:rgba(255,255,255,.5) }

/* ═══════════════════════════════════════════════════════════
   SOCIAL PROOF BAR
══════════════════════════════════════════════════════════ */
.social-proof-bar{
  display:flex;align-items:center;justify-content:center;gap:0;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:10px 16px;margin-bottom:16px;
}
.spb-item{display:flex;flex-direction:column;align-items:center;flex:1;gap:2px}
.spb-num{font-size:16px;font-weight:800;color:var(--tl);letter-spacing:-.02em;line-height:1}
.spb-lbl{font-size:10px;color:rgba(255,255,255,.35);font-weight:500;text-align:center;line-height:1.2}
.spb-divider{width:1px;height:32px;background:rgba(255,255,255,.08);flex-shrink:0;margin:0 4px}

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════════════════ */
.testimonials-block{
  overflow:hidden;margin-bottom:16px;
}
/* Edge fade only when the carousel actually overflows horizontally.
   JS toggles .tb-overflows; without it, all cards stay fully visible
   without the mask cropping their text/borders. */
.testimonials-block.tb-overflows{
  mask-image:linear-gradient(to right,transparent 0%,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 6%,#000 94%,transparent 100%);
}
.tb-scroll{
  display:flex;gap:10px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:4px 2px;
}
.tb-scroll::-webkit-scrollbar{ display:none }
.tb-card{
  flex:0 0 260px;scroll-snap-align:start;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:14px 16px;
}
.tb-stars{ font-size:12px;color:var(--accent);margin-bottom:7px;letter-spacing:.05em }
.tb-text{ font-size:12px;color:rgba(255,255,255,.65);line-height:1.5;margin-bottom:8px;font-style:italic }
.tb-author{ font-size:11px;color:rgba(255,255,255,.35);font-weight:600 }
/* Verified testimonial — softly gold-tinted so the real entry stands
   out from placeholder reviews without screaming */
.tb-card-verified{
  background:linear-gradient(135deg,rgba(226,203,168,.10),rgba(255,255,255,.04));
  border-color:rgba(226,203,168,.35);
}
.tb-verified{
  display:inline-block;margin-left:6px;
  color:#4ade80;font-size:10px;font-weight:700;letter-spacing:.04em;
  vertical-align:middle;
}
.tb-card-verified .tb-text{color:rgba(255,255,255,.78);}
.tb-author-result{color:rgba(226,203,168,.65);font-weight:500;}

/* ═══════════════════════════════════════════════════════════
   RTL SUPPORT (Hebrew / dir="rtl")
══════════════════════════════════════════════════════════ */
/* Core: flex rows auto-reverse in RTL — only fix absolute positioned elements */
[dir="rtl"] .bk { flex-direction: row-reverse }
[dir="rtl"] .bk svg { transform: scaleX(-1) }
[dir="rtl"] .qc-profile-left { flex-direction: row-reverse }
[dir="rtl"] .qpe-item { flex-direction: row-reverse; text-align: right }
[dir="rtl"] .doc-bar-info { flex-direction: row-reverse; text-align: right }
[dir="rtl"] .wa-booking-btn { flex-direction: row-reverse }
[dir="rtl"] .wa-booking-arrow svg { transform: scaleX(-1) }
[dir="rtl"] .wa-booking-text { text-align: right }
[dir="rtl"] .ai-banner-block { flex-direction: row-reverse }
[dir="rtl"] .ai-banner-body { text-align: right }
[dir="rtl"] .ai-banner-btn { margin-right: auto; margin-left: 0 }
[dir="rtl"] .email-capture-hdr { flex-direction: row-reverse; text-align: right }
[dir="rtl"] .passport-progress-header { flex-direction: row-reverse }
[dir="rtl"] .pph-left { flex-direction: row-reverse }
[dir="rtl"] .pph-title, [dir="rtl"] .pph-sub { text-align: right }
[dir="rtl"] .referral-block { flex-direction: row-reverse }
[dir="rtl"] .ref-body { text-align: right }
[dir="rtl"] .ref-code-row { flex-direction: row-reverse }
[dir="rtl"] .quick-retake-banner { flex-direction: row-reverse }
[dir="rtl"] .qrb-text { text-align: right }
[dir="rtl"] .seasonal-tip-banner { flex-direction: row-reverse }
[dir="rtl"] .stb-body { text-align: right }
[dir="rtl"] .stb-close { right: auto; left: 8px }
[dir="rtl"] .push-ask-row { flex-direction: row-reverse }
[dir="rtl"] #result-col-l, [dir="rtl"] #result-col-r { text-align: right }
[dir="rtl"] .ob-ins-item { flex-direction: row-reverse }
[dir="rtl"] .social-proof-bar { direction: ltr } /* keep numbers LTR */
[dir="rtl"] .pwa-prompt { flex-direction: row-reverse }
[dir="rtl"] .pwa-prompt-body { text-align: right }
/* Navigation labels */
[dir="rtl"] nav .nav-btn-inner, [dir="rtl"] #bottom-nav > button { direction: rtl }
/* Form inputs */
[dir="rtl"] .email-capture-inp { text-align: right; direction: rtl }
/* Directional arrows — flip in RTL */
[dir="rtl"] .share-arrow { transform: scaleX(-1); }
[dir="rtl"] .share-row:hover .share-arrow { transform: scaleX(-1) translateX(-3px); }
[dir="rtl"] .hook-btn-arrow { right: auto; left: 10px; }

/* ═══════════════════════════════════════════════════════════
   SKIN PROFILE EXPLAINER PANEL
══════════════════════════════════════════════════════════ */
.qc-profile-info-btn{
  position:absolute;top:10px;right:10px;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s;
  -webkit-tap-highlight-color:transparent;flex-shrink:0;
}
.qc-profile-info-btn:hover,.qc-profile-info-btn.qpe-info-active{
  background:rgba(var(--tl-rgb),.15);border-color:rgba(var(--tl-rgb),.4);color:var(--tl);
}
.qc-profile-banner{position:relative}

.qc-profile-explainer{
  grid-column:1/-1;
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .38s var(--ease-out-expo), opacity .3s ease;
  margin-top:0;
}
.qc-profile-explainer.qpe-open{
  max-height:320px;opacity:1;margin-top:10px;
}
.qpe-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  background:rgba(var(--t-rgb),.07);
  border:1px solid rgba(var(--tl-rgb),.18);border-radius:16px;
  padding:14px;margin-bottom:10px;
}
.qpe-item{display:flex;align-items:flex-start;gap:10px}
.qpe-icon{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:rgba(var(--tl-rgb),.1);border:1px solid rgba(var(--tl-rgb),.18);
  display:flex;align-items:center;justify-content:center;
  color:var(--tl);margin-top:1px;
}
.qpe-label{font-size:12px;font-weight:700;color:#fff;margin-bottom:2px}
.qpe-sub{font-size:11px;color:rgba(255,255,255,.4);line-height:1.3}
.qpe-start-btn{
  display:block;width:100%;
  padding:12px;text-align:center;
  background:linear-gradient(135deg,var(--t),var(--tl));
  color:#000;font-family:inherit;font-size:13px;font-weight:700;
  border:none;border-radius:12px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:opacity .2s;
}
.qpe-start-btn:hover{opacity:.85}
@media(max-width:480px){
  .qpe-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════
   WHATSAPP BOOKING BUTTON
══════════════════════════════════════════════════════════ */
.wa-booking-btn{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,#075e54 0%,#128c7e 100%);
  border:1px solid rgba(37,211,102,.25);border-radius:16px;
  padding:16px 18px;margin:20px 0;
  text-decoration:none;color:#fff;
  cursor:pointer;transition:transform .2s,box-shadow .2s;
  box-shadow:0 4px 20px rgba(7,94,84,.35);
}
.wa-booking-btn:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(7,94,84,.5)}
.wa-booking-btn:active{transform:translateY(0)}
.wa-booking-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;color:#25d366;
}
.wa-booking-text{flex:1;min-width:0}
.wa-booking-cta{font-size:14px;font-weight:700;color:#fff;margin-bottom:2px}
.wa-booking-sub{font-size:12px;color:rgba(255,255,255,.65);line-height:1.3}
.wa-booking-arrow{color:rgba(255,255,255,.5);flex-shrink:0}

/* ═══════════════════════════════════════════════════════════
   AI CONSULTANT BANNER
══════════════════════════════════════════════════════════ */
.ai-banner-block{
  display:flex;flex-direction:column;gap:0;
  background:linear-gradient(135deg,rgba(var(--t-rgb),.12) 0%,rgba(var(--t-rgb),.06) 100%);
  border:1px solid rgba(var(--tl-rgb),.3);border-radius:16px;
  padding:14px 16px 12px;margin:0 0 20px;
  position:relative;overflow:hidden;
}
.ai-banner-top{display:flex;align-items:center;gap:12px;width:100%}
.ai-banner-block::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--tl-rgb),.05) 0%,transparent 60%);
  pointer-events:none;
}
.ai-banner-left{
  position:relative;width:40px;height:40px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--tl-rgb),.12);border-radius:12px;
  border:1px solid rgba(var(--tl-rgb),.2);color:var(--tl);
}
.ai-banner-pulse{
  position:absolute;top:6px;right:6px;
  width:8px;height:8px;border-radius:50%;
  background:#4caf50;
  box-shadow:0 0 0 0 rgba(76,175,80,.6);
  animation:ai-pulse 2s infinite;
}
@keyframes ai-pulse{
  0%{box-shadow:0 0 0 0 rgba(76,175,80,.6)}
  70%{box-shadow:0 0 0 6px rgba(76,175,80,0)}
  100%{box-shadow:0 0 0 0 rgba(76,175,80,0)}
}
.ai-banner-body{flex:1;min-width:0}
/* Chips inside banner */
.result-ai-chips-inline .result-ai-chips{display:flex;flex-wrap:wrap;gap:7px;padding-top:10px;border-top:1px solid rgba(var(--tl-rgb),.15);margin-top:10px}
.result-ai-chips-inline .result-ai-chip{flex:1 1 auto;min-width:0;padding:8px 12px;font-size:12px;background:rgba(var(--t-rgb),.15);border:1px solid rgba(var(--tl-rgb),.25);border-radius:10px;color:rgba(255,255,255,.8);cursor:pointer;font-family:inherit;text-align:left;display:flex;align-items:center;gap:7px;transition:background .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.result-ai-chips-inline .result-ai-chip:active{background:rgba(var(--t-rgb),.28)}
.ai-banner-h{font-size:13px;font-weight:700;color:#fff;margin-bottom:2px}
.ai-banner-s{font-size:11px;color:rgba(255,255,255,.5);line-height:1.3}
.ai-banner-btn{
  flex-shrink:0;padding:9px 14px;
  background:linear-gradient(135deg,var(--t),var(--tl));
  color:#000;font-family:inherit;font-size:12px;font-weight:700;
  border:none;border-radius:10px;cursor:pointer;
  white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:opacity .2s;
}
.ai-banner-btn:hover{opacity:.85}

/* ═══════════════════════════════════════════════════════════
   EMAIL CAPTURE BLOCK
══════════════════════════════════════════════════════════ */
.email-capture-block{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);border-radius:16px;
  padding:16px;margin:20px 0;
}
.email-capture-hdr{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.email-capture-hdr svg{margin-top:2px;flex-shrink:0}
.email-capture-h{font-size:13px;font-weight:700;color:#fff;margin-bottom:3px}
.email-capture-s{font-size:11px;color:rgba(255,255,255,.45);line-height:1.4}
.email-capture-row{display:flex;gap:8px;margin-bottom:8px}
.email-capture-inp{
  flex:1;min-width:0;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:10px 12px;
  color:#fff;font-family:inherit;font-size:13px;
  outline:none;transition:border-color .2s;
  -webkit-appearance:none;
}
.email-capture-inp::placeholder{color:rgba(255,255,255,.3)}
.email-capture-inp:focus{border-color:rgba(var(--tl-rgb),.5)}
.email-capture-submit{
  padding:10px 16px;
  background:linear-gradient(135deg,var(--t),var(--tl));
  color:#000;font-family:inherit;font-size:13px;font-weight:700;
  border:none;border-radius:10px;cursor:pointer;
  white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:opacity .2s;
}
.email-capture-submit:hover{opacity:.85}
.email-capture-skip{
  display:block;background:none;border:none;
  color:rgba(255,255,255,.3);font-family:inherit;font-size:11px;
  cursor:pointer;padding:0;text-decoration:underline;
  -webkit-tap-highlight-color:transparent;
}
.email-capture-ok{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--tl);font-weight:500;padding:4px 0;
}

/* ═══════════════════════════════════════════════════════════
   PASSPORT PROGRESS HEADER
══════════════════════════════════════════════════════════ */
.passport-progress-header{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,rgba(var(--gd-rgb),.08) 0%,rgba(var(--gd-rgb),.04) 100%);
  border:1px solid rgba(var(--gd-rgb),.2);border-radius:16px;
  padding:14px 18px;margin-bottom:20px;
}
.pph-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.pph-title{font-size:13px;font-weight:700;color:var(--gd);margin-bottom:2px}
.pph-sub{font-size:11px;color:rgba(255,255,255,.4);line-height:1.3}
.pph-bar-wrap{
  width:80px;height:6px;flex-shrink:0;
  background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;
}
.pph-bar{
  height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--gd),var(--accent));
  transition:width .6s var(--ease-out-expo);
}

/* ═══════════════════════════════════════════════════════════
   QUIZ CARD RESULT TIMER
══════════════════════════════════════════════════════════ */
.qc-timer{
  font-size:10px;color:rgba(var(--tl-rgb),.7);
  font-weight:500;margin-top:6px;text-align:center;
  letter-spacing:.01em;
}

/* ═══════════════════════════════════════════════════════════
   QUICK RETAKE BANNER
══════════════════════════════════════════════════════════ */
.quick-retake-banner{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:rgba(var(--t-rgb),.08);
  border:1px solid rgba(var(--tl-rgb),.2);border-radius:14px;
  padding:14px 16px;margin-bottom:20px;
}
.qrb-text{flex:1;min-width:0}
.qrb-h{font-size:13px;font-weight:700;color:#fff;margin-bottom:3px}
.qrb-s{font-size:11px;color:rgba(255,255,255,.45);line-height:1.4}
.qrb-btns{display:flex;gap:8px;flex-shrink:0}
.qrb-yes{
  padding:9px 14px;
  background:linear-gradient(135deg,var(--t),var(--tl));
  color:#000;font-family:inherit;font-size:12px;font-weight:700;
  border:none;border-radius:10px;cursor:pointer;
  white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:opacity .2s;
}
.qrb-yes:hover{opacity:.85}
.qrb-no{
  padding:9px 14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.5);font-family:inherit;font-size:12px;font-weight:500;
  border-radius:10px;cursor:pointer;
  white-space:nowrap;-webkit-tap-highlight-color:transparent;
}

/* ═══════════════════════════════════════════════════════════
   PWA INSTALL PROMPT
══════════════════════════════════════════════════════════ */
.pwa-prompt{
  position:fixed;bottom:-180px;left:50%;transform:translateX(-50%);
  z-index:var(--z-toast);width:calc(100% - 32px);max-width:440px;
  background:linear-gradient(135deg,rgba(10,34,38,.98),rgba(6,22,26,.98));
  border:1px solid rgba(var(--tl-rgb),.3);border-radius:20px;
  padding:16px;
  box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 0 1px rgba(var(--tl-rgb),.06);
  transition:bottom .4s var(--ease-out-expo);
  display:flex;align-items:center;gap:12px;
}
.pwa-prompt.pwa-prompt-visible{bottom:calc(max(env(safe-area-inset-bottom,0px),16px) + 8px)}
.pwa-prompt-icon{
  width:48px;height:48px;flex-shrink:0;
  background:rgba(var(--t-rgb),.1);border:1px solid rgba(var(--tl-rgb),.2);
  border-radius:14px;display:flex;align-items:center;justify-content:center;
}
.pwa-prompt-body{flex:1;min-width:0}
.pwa-prompt-h{font-size:13px;font-weight:700;color:#fff;margin-bottom:2px}
.pwa-prompt-s{font-size:11px;color:rgba(255,255,255,.45);line-height:1.3}
.pwa-prompt-btns{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.pwa-install-btn{
  padding:9px 14px;
  background:linear-gradient(135deg,var(--t),var(--tl));
  color:#000;font-family:inherit;font-size:12px;font-weight:700;
  border:none;border-radius:10px;cursor:pointer;
  white-space:nowrap;-webkit-tap-highlight-color:transparent;
}
.pwa-skip-btn{
  padding:6px 14px;
  background:none;border:none;
  color:rgba(255,255,255,.3);font-family:inherit;font-size:11px;
  cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent;
}

/* ═══════════════════════════════════════════════════════════
   REFERRAL BLOCK
══════════════════════════════════════════════════════════ */
.referral-block{
  display:flex;align-items:flex-start;gap:12px;
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.07) 0%,rgba(var(--accent-rgb),.03) 100%);
  border:1px solid rgba(var(--accent-rgb),.2);border-radius:16px;
  padding:16px;margin-top:20px;
}
.ref-icon{
  width:36px;height:36px;flex-shrink:0;
  background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.2);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.ref-body{flex:1;min-width:0}
.ref-h{font-size:13px;font-weight:700;color:var(--gd);margin-bottom:3px}
.ref-s{font-size:11px;color:rgba(255,255,255,.45);line-height:1.4;margin-bottom:10px}
.ref-code-row{display:flex;align-items:center;gap:8px}
.ref-code{
  font-size:13px;font-weight:700;font-family:monospace;
  color:var(--accent-l);letter-spacing:.08em;
  background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.15);
  border-radius:8px;padding:5px 10px;
}
.ref-share-btn{
  padding:8px 14px;
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.25),rgba(var(--accent-rgb),.15));
  border:1px solid rgba(var(--accent-rgb),.3);
  color:var(--accent-l);font-family:inherit;font-size:12px;font-weight:700;
  border-radius:10px;cursor:pointer;
  white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:opacity .2s;
}
.ref-share-btn:hover{opacity:.85}

/* ═══════════════════════════════════════════════════════════
   SEASONAL TIP BANNER
══════════════════════════════════════════════════════════ */
.seasonal-tip-banner{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,rgba(var(--t-rgb),.1) 0%,rgba(var(--t-rgb),.05) 100%);
  border:1px solid rgba(var(--tl-rgb),.22);border-radius:16px;
  padding:14px 16px;margin-bottom:16px;
  position:relative;
}
.stb-icon{font-size:22px;flex-shrink:0;line-height:1}
.stb-body{flex:1;min-width:0}
.stb-t{font-size:13px;font-weight:700;color:#fff;margin-bottom:2px}
.stb-b{font-size:11px;color:rgba(255,255,255,.45);line-height:1.4}
.stb-cta{
  flex-shrink:0;padding:9px 14px;
  background:linear-gradient(135deg,var(--t),var(--tl));
  color:#000;font-family:inherit;font-size:12px;font-weight:700;
  border:none;border-radius:10px;cursor:pointer;
  white-space:nowrap;-webkit-tap-highlight-color:transparent;
}
.stb-close{
  position:absolute;top:8px;right:8px;
  width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.06);border:none;
  color:rgba(255,255,255,.3);font-size:14px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}