/* ============================================================
   moondew — paywall.css (full brand stylesheet; default's selector set)
   Palette: green #22C55E / #16A34A, blue #3B82F6, warm cream page,
   deep-green hero card, orange accent for the "best value" plan.
   Font: Gilroy (self-hosted via /fonts/gilroy.css — no webfont CDN).
   Shared runtime hooks keep their names; only their styling changes.
   ============================================================ */

:root{
  --font:'Gilroy',-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;
  /* brand */
  --green:#22C55E; --green-2:#16A34A; --green-3:#15803D; --green-1:#34D27B;
  --blue:#3B82F6; --blue-2:#2563EB;
  --orange:#F59E0B; --orange-2:#EA580C;
  --cta:linear-gradient(135deg,#34D27B 0%,#22C55E 45%,#3B82F6 100%);
  --hero:linear-gradient(157deg,#0B3D2E 0%,#0F5132 42%,#1E7A4D 100%);
  --amber:linear-gradient(90deg,#F59E0B,#EA580C);
  /* surfaces */
  --bg:#F7F3ED; --bg-2:#EFEAE4; --surface:#FFFFFF; --surface-2:#FBF8F4;
  --ink:#1A1A2E; --ink-deep:#0F172A; --ink-2:#6B7280; --ink-3:#8E8E93;
  --line:#ECE6DE; --line-2:#E1E5EA;
  --shadow-sm:0 2px 12px rgba(2,32,71,.06);
  --shadow-md:0 6px 22px rgba(2,32,71,.09);
  --shadow-lg:0 18px 44px rgba(2,32,71,.18);
  --r-sm:14px; --r:18px; --r-lg:22px; --r-pill:999px;
  --btn-r:28px;
  /* page background: warm cream + soft green/blue glows */
  --page-bg:
    radial-gradient(circle at 88% 6%, rgba(34,197,94,.17), transparent 46%),
    radial-gradient(circle at 2% 92%, rgba(52,210,123,.10), transparent 48%),
    linear-gradient(180deg,#F8F4EE 0%,#F3EEE7 62%,#EFE9E1 100%);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; position:fixed; width:100%; overscroll-behavior:none; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font); background:var(--bg); color:var(--ink); }

/* ============================================================
   1. Onboarding shell (runtime recomputes track/slide widths)
   ============================================================ */
.ob-wrap { position:fixed; inset:0; z-index:100; background:var(--bg); background-image:var(--page-bg); }
.ob-wrap.hidden { display:none; }
.ob-track { display:flex; width:300%; height:100%; transition:transform .4s cubic-bezier(.4,0,.2,1); }
/* height:100% (not 100vh) — .ob-wrap is position:fixed/inset:0, so 100% is the
   real visible box on every engine; a 100vh fallback overshoots the large
   viewport and pushes .ob-bottom (the CTA) below the fold. */
.ob-slide { width:calc(100%/3); height:100%; display:flex; justify-content:center; }
.hide-gpt-promo .ob-slide.ob-gpt{display:none!important;}
.ob-inner { display:flex; flex-direction:column; width:100%; max-width:430px; height:100%; padding:calc(8px + max(env(safe-area-inset-top,0px),var(--sat,0px))) 22px calc(12px + max(env(safe-area-inset-bottom,0px),var(--sab,0px))); min-height:0; position:relative; overflow:hidden; }
/* justify-content:safe center — centred while the slide fits, but it degrades to
   flex-start the moment the content is taller than the scroll box (short screens,
   large text). Plain `center` would push the first rows past the scroll origin,
   where they are clipped and unreachable. */
.ob-top { flex:1; display:flex; flex-direction:column; justify-content:center; justify-content:safe center; align-items:center; gap:clamp(10px,3.6vw,18px); text-align:center; position:relative; z-index:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.ob-top::-webkit-scrollbar { display:none; }
.ob-bottom { position:relative; z-index:2; padding-top:clamp(8px,2.8vw,14px); flex-shrink:0; }
.ob-group { display:flex; flex-direction:column; align-items:center; width:100%; }

.ob-btn { width:100%; min-height:56px; border:none; border-radius:var(--btn-r); padding:clamp(13px,4vw,16px) 24px; font-family:inherit; background:var(--cta); color:#fff; cursor:pointer; text-align:center; -webkit-tap-highlight-color:transparent; box-shadow:0 10px 26px rgba(34,197,94,.26); position:relative; overflow:hidden; transition:transform .16s ease, box-shadow .16s ease; }
.ob-btn:active { transform:scale(.98); box-shadow:0 6px 18px rgba(34,197,94,.22); }
.ob-btn::after { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent); animation:shimmer 3.4s ease-in-out infinite; }
.ob-btn-text,.ob-btn-main,.ob-btn-sub { display:block; position:relative; z-index:1; font-weight:800; letter-spacing:-.01em; }
.ob-btn-text { font-size:clamp(16px,5vw,18px); }
.ob-btn-main { font-size:clamp(17px,5.6vw,20px); }
.ob-btn-sub { font-size:clamp(11px,3.6vw,13px); font-weight:600; opacity:.88; margin-top:2px; }
.ob-dots { display:flex; justify-content:center; gap:6px; margin-top:clamp(10px,3vw,14px); }
.ob-dot { width:6px; height:6px; border-radius:var(--r-pill); background:#D6D2CB; transition:all .3s; }
.ob-dot.active { width:22px; background:linear-gradient(90deg,var(--green),var(--blue)); }

/* soft decorative glows inside a slide */
.mw-glow { position:absolute; border-radius:50%; pointer-events:none; z-index:0; filter:blur(46px); }
.mw-glow-1 { top:-90px; right:-90px; width:300px; height:300px; background:radial-gradient(circle,rgba(34,197,94,.34) 0%,rgba(34,197,94,0) 70%); }
.mw-glow-2 { bottom:-100px; left:-90px; width:280px; height:280px; background:radial-gradient(circle,rgba(59,130,246,.22) 0%,rgba(59,130,246,0) 70%); }
/* legacy blob hooks (unused markup, kept so the selector set is complete) */
.ob-blob { position:absolute; border-radius:50%; pointer-events:none; z-index:0; filter:blur(40px); }
.ob-b1 { top:40px; right:-30px; width:130px; height:130px; background:radial-gradient(circle,rgba(34,197,94,.32),transparent 72%); }
.ob-b2 { bottom:80px; left:0; width:120px; height:120px; background:radial-gradient(circle,rgba(59,130,246,.22),transparent 72%); }
.ob-b3 { top:50%; right:0; width:80px; height:80px; background:radial-gradient(circle,rgba(34,197,94,.20),transparent 72%); }

/* brand.js hooks (hidden in markup, styled for completeness) */
.brand-logo { width:clamp(56px,22vw,84px); height:clamp(56px,22vw,84px); border-radius:22px; background:var(--cta); display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 12px 26px rgba(34,197,94,.28); }
.brand-name { font-size:clamp(20px,7vw,26px); font-weight:800; color:var(--ink); }
.brand-sub { font-size:clamp(12px,4vw,14px); font-weight:500; color:var(--ink-3); margin-top:2px; }

/* ============================================================
   2. Onboarding — shared pieces
   ============================================================ */
.mw-h1 { font-size:clamp(23px,7.4vw,30px); font-weight:800; letter-spacing:-.03em; line-height:1.12; color:var(--ink-deep); text-align:center; }
.mw-h1-tight { letter-spacing:-.035em; }
.mw-sub { font-size:clamp(13px,4.2vw,15px); font-weight:500; color:var(--ink-3); line-height:1.35; margin-top:5px; text-align:center; }
.mw-card { width:100%; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }

/* gradient icon tiles (shared by .mw-tile / .feature-icon / .ob-check-icon) */
.mw-tile,.feature-icon,.ob-check-icon { width:clamp(32px,9.6vw,38px); height:clamp(32px,9.6vw,38px); border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mw-tile svg,.feature-icon svg,.ob-check-icon svg { width:54%; height:54%; }
.mw-tile-sm { width:clamp(28px,8.4vw,34px); height:clamp(28px,8.4vw,34px); border-radius:10px; }
.mw-t-green  { background:linear-gradient(135deg,#34D27B,#16A34A); box-shadow:0 6px 14px rgba(34,197,94,.26); }
.mw-t-grass  { background:linear-gradient(135deg,#22C55E,#15803D); box-shadow:0 6px 14px rgba(21,128,61,.26); }
.mw-t-teal   { background:linear-gradient(135deg,#2DD4BF,#0D9488); box-shadow:0 6px 14px rgba(13,148,136,.24); }
.mw-t-blue   { background:linear-gradient(135deg,#60A5FA,#2563EB); box-shadow:0 6px 14px rgba(37,99,235,.24); }
.mw-t-indigo { background:linear-gradient(135deg,#818CF8,#4F46E5); box-shadow:0 6px 14px rgba(79,70,229,.24); }
.mw-t-violet { background:linear-gradient(135deg,#A78BFA,#7C3AED); box-shadow:0 6px 14px rgba(124,58,237,.24); }
.mw-t-orange { background:linear-gradient(135deg,#FBBF24,#EA580C); box-shadow:0 6px 14px rgba(234,88,12,.24); }
.mw-t-amber  { background:linear-gradient(135deg,#FBBF24,#D97706); box-shadow:0 6px 14px rgba(217,119,6,.24); }
.mw-t-pink   { background:linear-gradient(135deg,#F472B6,#DB2777); box-shadow:0 6px 14px rgba(219,39,119,.22); }

/* --- slide 1: hero + feature list + rating --- */
.mw-hero { position:relative; display:flex; align-items:center; justify-content:center; width:100%; padding:clamp(2px,1.6vw,10px) 0; }
.mw-hero-disc { position:relative; z-index:2; width:clamp(88px,27vw,116px); height:clamp(88px,27vw,116px); border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(140deg,#34D27B 0%,#22C55E 45%,#2563EB 100%); box-shadow:0 18px 40px rgba(34,197,94,.34), inset 0 1px 0 rgba(255,255,255,.35); }
.mw-hero-disc svg { width:46%; height:46%; }
.mw-hero-disc-green { background:linear-gradient(150deg,#34D27B 0%,#16A34A 58%,#15803D 100%); box-shadow:0 16px 36px rgba(22,163,74,.36), inset 0 1px 0 rgba(255,255,255,.3); }
.mw-ring { position:absolute; top:50%; left:50%; border-radius:50%; border:2px solid rgba(34,197,94,.35); transform:translate(-50%,-50%); pointer-events:none; z-index:1; }
.mw-ring-1 { width:clamp(112px,34vw,146px); height:clamp(112px,34vw,146px); animation:mwRing 2.8s ease-out infinite; }
.mw-ring-2 { width:clamp(136px,42vw,178px); height:clamp(136px,42vw,178px); animation:mwRing 2.8s ease-out infinite .9s; }

.mw-featlist { padding:clamp(2px,1.2vw,6px) clamp(13px,4.2vw,18px); text-align:left; }
.mw-feat-row { display:flex; align-items:center; gap:clamp(10px,3.2vw,13px); padding:clamp(9px,2.8vw,12px) 0; }
.mw-feat-row + .mw-feat-row { border-top:1px solid var(--line); }
.mw-feat-text { font-size:clamp(13px,4.1vw,15px); line-height:1.3; }
.mw-feat-lead { font-weight:800; color:var(--ink-deep); }
.mw-feat-tail { font-weight:600; color:var(--ink-3); }

.mw-rating { display:flex; align-items:center; padding:clamp(11px,3.4vw,15px) clamp(12px,4vw,18px); }
.mw-rating-l,.mw-rating-r { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; }
.mw-rating-r { flex-direction:column; gap:1px; }
.mw-rating-sep { width:1px; align-self:stretch; background:var(--line); margin:0 clamp(8px,3vw,14px); flex-shrink:0; }
.mw-rating-stars,.stars5 { display:inline-flex; align-items:center; gap:2px; }
.mw-rating-stars svg { width:clamp(13px,4.2vw,17px); height:clamp(13px,4.2vw,17px); }
.mw-rating-score { font-size:clamp(18px,5.6vw,22px); font-weight:800; color:var(--ink-deep); letter-spacing:-.02em; }
.mw-rating-num { font-size:clamp(15px,4.8vw,18px); font-weight:800; color:var(--ink-deep); letter-spacing:-.02em; }
.mw-rating-label { font-size:clamp(10px,3.4vw,12px); font-weight:600; color:var(--ink-3); }

/* --- slide 2: feature grid, highlight, stats --- */
.ob-title,.s2-title { font-size:clamp(23px,7.4vw,30px); font-weight:800; letter-spacing:-.03em; line-height:1.12; color:var(--ink-deep); }
.ob-sub,.s2-sub { font-size:clamp(13px,4.2vw,15px); font-weight:500; color:var(--ink-3); margin-top:5px; }
.features-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(7px,2.4vw,10px); width:100%; text-align:left; }
.feature-item { background:var(--surface); border-radius:var(--r); padding:clamp(9px,3vw,13px); display:flex; align-items:center; gap:clamp(8px,2.6vw,11px); box-shadow:var(--shadow-sm); }
.feature-label { display:flex; flex-direction:column; min-width:0; }
.feature-title { font-size:clamp(12px,3.9vw,14px); font-weight:800; color:var(--ink-deep); line-height:1.15; }
.feature-desc { font-size:clamp(11px,3.6vw,13px); font-weight:600; color:var(--ink-3); line-height:1.25; margin-top:2px; }
.ob-highlight { display:flex; align-items:center; gap:clamp(9px,3vw,12px); width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--green); border-radius:var(--r); padding:clamp(10px,3.2vw,13px) clamp(12px,3.8vw,15px); box-shadow:var(--shadow-sm); }
.ob-highlight svg { width:clamp(18px,6vw,22px); height:clamp(18px,6vw,22px); flex-shrink:0; }
.ob-highlight-text { font-size:clamp(11.5px,3.7vw,13px); font-weight:600; color:var(--ink-2); line-height:1.35; }
.ob-stats { display:flex; width:100%; background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-sm); overflow:hidden; }
.ob-stat { flex:1; text-align:center; padding:clamp(10px,3.2vw,14px) 4px; position:relative; }
.ob-stat:not(:last-child)::after { content:''; position:absolute; right:0; top:20%; height:60%; width:1px; background:var(--line); }
.ob-stat-num { font-size:clamp(15px,5vw,19px); font-weight:800; color:var(--ink-deep); line-height:1.15; letter-spacing:-.02em; }
.ob-stat-label { font-size:clamp(9.5px,3.2vw,11px); font-weight:600; color:var(--ink-3); margin-top:2px; }

/* --- slide 3: verified chip, checklist, live pill --- */
.mw-verified { display:flex; align-items:center; justify-content:center; gap:clamp(8px,2.8vw,12px); flex-wrap:wrap; }
.mw-verified-label { font-size:clamp(13px,4.2vw,15px); font-weight:600; color:var(--ink-3); }
.mw-chip { display:inline-flex; align-items:center; gap:7px; background:var(--surface); border-radius:var(--r-pill); padding:clamp(7px,2.4vw,9px) clamp(12px,3.8vw,16px); box-shadow:var(--shadow-sm); }
.mw-chip-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(34,197,94,.16); flex-shrink:0; }
.mw-chip b { font-size:clamp(13px,4.2vw,15px); font-weight:800; color:var(--ink-deep); letter-spacing:-.01em; }
.ob-checklist { display:flex; flex-direction:column; gap:clamp(7px,2.4vw,10px); width:100%; text-align:left; }
.ob-check-item { display:flex; align-items:center; gap:clamp(10px,3.2vw,13px); background:var(--surface); border-radius:var(--r); padding:clamp(9px,3vw,13px) clamp(11px,3.6vw,15px); box-shadow:var(--shadow-sm); }
.ob-check-name { font-size:clamp(13px,4.1vw,15px); font-weight:800; color:var(--ink-deep); line-height:1.15; }
.ob-check-desc { font-size:clamp(11.5px,3.7vw,13px); font-weight:600; color:var(--ink-3); line-height:1.25; margin-top:2px; }
.mw-live { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; background:linear-gradient(90deg,#22C55E,#16A34A); color:#fff; font-size:clamp(12px,3.9vw,14px); font-weight:800; padding:clamp(11px,3.4vw,14px) 14px; border-radius:var(--r-sm); box-shadow:0 10px 24px rgba(22,163,74,.26); }
.mw-live-dot { width:8px; height:8px; border-radius:50%; background:#fff; flex-shrink:0; animation:mwBlink 2s ease-in-out infinite; }
.ob-urgency { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(90deg,#22C55E,#16A34A); color:#fff; font-size:clamp(11px,3.8vw,13px); font-weight:800; padding:7px 14px; border-radius:var(--r-pill); }

/* legacy onboarding hooks kept stylable (not used by moondew markup) */
.ob-icons { display:flex; align-items:center; gap:clamp(5px,2vw,8px); flex-wrap:wrap; }
.ob-icon { width:clamp(30px,10vw,40px); height:clamp(30px,10vw,40px); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--shadow-sm); }
.ob-icon svg { width:clamp(15px,5.4vw,20px); height:clamp(15px,5.4vw,20px); }
.ob-icons-label,.ob-trust-text { font-size:clamp(11px,3.8vw,13px); font-weight:600; color:var(--ink-3); }
.ob-trust-card { background:var(--surface); border-radius:var(--r); padding:12px 16px; display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; box-shadow:var(--shadow-sm); }
.ob-pills { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.ob-pill { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 11px; font-size:clamp(10px,3.5vw,12px); font-weight:700; color:var(--ink-2); display:flex; align-items:center; gap:4px; }
.ob-stars,.s3-stars { display:flex; gap:3px; }
.ob-stars svg,.s3-stars svg { width:clamp(14px,5vw,18px); height:clamp(14px,5vw,18px); }
.s3-header { display:flex; align-items:center; gap:8px; }
.s3-score { font-size:clamp(24px,9vw,34px); font-weight:800; color:var(--ink-deep); }
.s3-count { font-size:clamp(11px,3.8vw,13px); font-weight:600; color:var(--ink-3); margin-top:2px; }
.reviews-wrap { position:relative; width:100%; }
.reviews-track { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:4px 0 6px; touch-action:pan-x; }
.reviews-track::-webkit-scrollbar { display:none; }
.review-card { flex-shrink:0; min-width:clamp(200px,78vw,244px); background:var(--surface); border-radius:var(--r); padding:13px; box-shadow:var(--shadow-sm); }
.review-top { display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.review-avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; background:var(--bg-2); flex-shrink:0; }
.review-info { flex:1; text-align:left; }
.review-name { font-size:clamp(12px,4.2vw,14px); font-weight:800; color:var(--ink-deep); }
.review-city { font-size:clamp(10px,3.5vw,12px); font-weight:600; color:var(--ink-3); }
.review-stars-small { color:var(--orange); font-size:clamp(11px,3.8vw,13px); letter-spacing:1px; flex-shrink:0; }
.review-text { font-size:clamp(11.5px,3.8vw,13px); font-weight:600; color:var(--ink-2); line-height:1.4; text-align:left; }
.scroll-hint { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:6px; font-size:clamp(10px,3.5vw,12px); font-weight:600; color:var(--ink-3); }
.scroll-hint svg { width:13px; height:13px; }
.s1-hero-title,.s1-hero-sub,.s1-checks,.s1-dual { display:none; }

/* ============================================================
   3. Animations
   ============================================================ */
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes scaleIn { from{opacity:0;transform:scale(.6)} to{opacity:1;transform:scale(1)} }
@keyframes shimmer { 0%{left:-100%} 55%,100%{left:100%} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.42)} 50%{box-shadow:0 0 0 7px rgba(34,197,94,0)} }
@keyframes mwRing { 0%{opacity:.55;transform:translate(-50%,-50%) scale(.82)} 70%{opacity:0;transform:translate(-50%,-50%) scale(1.08)} 100%{opacity:0} }
@keyframes mwBlink { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes mwMarquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.anim, .feat-anim { opacity:0; will-change:opacity, transform; }
.ob-slide.active .anim,
.ob-slide.active .feat-anim { opacity:0; animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) forwards; }
.ob-slide.active .anim-d1 { animation-delay:.07s; } .ob-slide.active .anim-d2 { animation-delay:.14s; }
.ob-slide.active .anim-d3 { animation-delay:.21s; } .ob-slide.active .anim-d4 { animation-delay:.28s; }
.ob-slide.active .anim-d5 { animation-delay:.35s; } .ob-slide.active .anim-d6 { animation-delay:.42s; }
.ob-slide.active .feat-anim:nth-child(1){animation-delay:.06s} .ob-slide.active .feat-anim:nth-child(2){animation-delay:.12s}
.ob-slide.active .feat-anim:nth-child(3){animation-delay:.18s} .ob-slide.active .feat-anim:nth-child(4){animation-delay:.24s}
.ob-slide.active .feat-anim:nth-child(5){animation-delay:.30s} .ob-slide.active .feat-anim:nth-child(6){animation-delay:.36s}
.ob-slide.active .anim-icon { opacity:0; animation:scaleIn .4s ease forwards; }
.ob-slide.active .anim-icon:nth-child(1){animation-delay:.12s} .ob-slide.active .anim-icon:nth-child(2){animation-delay:.18s}
.ob-slide.active .anim-icon:nth-child(3){animation-delay:.24s} .ob-slide.active .anim-icon:nth-child(4){animation-delay:.30s}
.ob-slide.active .anim-icon:nth-child(5){animation-delay:.36s} .ob-slide.active .anim-icon:nth-child(6){animation-delay:.42s}
.ob-slide.active .anim-icon:nth-child(7){animation-delay:.48s} .ob-slide.active .anim-icon:nth-child(8){animation-delay:.54s}
@media (prefers-reduced-motion: reduce){
  .ob-slide.active .anim,.ob-slide.active .feat-anim,.ob-slide.active .anim-icon{animation:none;opacity:1}
  .ob-btn::after,.cta-button::after,.mw-ring,.mw-live-dot,.mw-rev-track{animation:none}
}

/* ============================================================
   4. Paywall page
   ============================================================ */
/* height:100% — <body> is position:fixed/height:100%, so 100% is exactly the
   visible box; the old 100vh fallback measured the large viewport and hid the
   CTA behind the browser chrome. */
.page { display:none; flex-direction:column; height:100%; max-width:430px; margin:0 auto; padding:calc(8px + max(env(safe-area-inset-top,0px),var(--sat,0px))) 20px max(env(safe-area-inset-bottom,0px),var(--sab,0px)); position:relative; overflow-y:auto; overflow-x:hidden; background:var(--bg); background-image:var(--page-bg); }
.page.visible { display:flex; }
.decor-top-right { position:absolute; top:-40px; right:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(34,197,94,.26),transparent 70%); filter:blur(40px); pointer-events:none; }
.decor-bottom-left { position:absolute; bottom:40px; left:-70px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(59,130,246,.18),transparent 70%); filter:blur(40px); pointer-events:none; }
.decor-mid-right { position:absolute; top:46%; right:-40px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle,rgba(34,197,94,.16),transparent 70%); filter:blur(30px); pointer-events:none; }
/* autoScaleContent contract: .page > .content stays flex:1 + space-evenly */
.content { flex:1; display:flex; flex-direction:column; justify-content:space-evenly; position:relative; z-index:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.content::-webkit-scrollbar { display:none; }
/* NOTE: the .content-xs/-sm/-lg/-xl step-scale blocks were deleted — the shared
   runtime (runtime/paywall.js autoScaleContent) only ever REMOVES those classes;
   nothing adds them, so every rule keyed on them was dead. Fitting is done by the
   geometric transform there. The one live guard they used to carry
   (.headline padding-right:58px, clearing the floating 24/7 tab) lives on the
   base .headline rule below. */

.headline { font-size:clamp(22px,7.4vw,30px); font-weight:800; line-height:1.14; letter-spacing:-.035em; color:var(--ink-deep); padding-right:58px; /* clear the floating 24/7 support tab */ }
.mw-top1 { background:linear-gradient(90deg,#16A34A 0%,#22C55E 45%,#3B82F6 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
/* the subheadline text belongs to the fixed 1-device lineup — hidden, not removed */
.subheadline,#paySubheadline { display:none; }
/* laurel social proof: replaced by the reviews strip below */
#socialProof,.social-proof { display:none; }
.laurel-badge { display:flex; align-items:center; }
.laurel-wreath { height:clamp(28px,11vw,42px); width:auto; }
.laurel-text { text-align:center; padding:0 6px; }
.laurel-number { font-size:clamp(16px,5.6vw,22px); font-weight:800; color:var(--ink-deep); display:block; }
.laurel-label { font-size:clamp(10px,3.5vw,13px); font-weight:600; color:var(--ink-2); display:block; margin-top:2px; }
.stars-row { display:flex; gap:3px; margin-top:2px; }
.stars-row svg { width:clamp(14px,4.6vw,18px); height:clamp(14px,4.6vw,18px); }
/* social icon strip: small + muted, it is context, not a claim */
.social-row { display:flex; align-items:center; gap:clamp(4px,1.5vw,6px); flex-wrap:wrap; opacity:.62; }
.social-icon { width:clamp(19px,6.2vw,24px); height:clamp(19px,6.2vw,24px); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; filter:grayscale(.5); }
.social-icon svg { width:clamp(10px,3.4vw,13px); height:clamp(10px,3.4vw,13px); }
.social-more { font-size:clamp(10px,3.3vw,12px); font-weight:600; color:var(--ink-3); margin-left:2px; }
/* device rows/tabs: the flat lineup has no device tiers */
.devices-row,.device-selector,#deviceSelector { display:none !important; }
.device-opt { flex:1; padding:8px 12px; border-radius:12px; font-size:13px; font-weight:800; color:var(--ink-2); text-align:center; cursor:pointer; }
.device-opt.dev-active { background:var(--surface); color:var(--ink-deep); box-shadow:var(--shadow-sm); }

/* ============================================================
   5. Reviews marquee (design-only, auto-scrolling)
   ============================================================ */
/* .content clips overflow-x, so the strip stays inside the content box and the
   edge mask does the bleeding instead of a negative margin (which would be cut). */
.mw-reviews { position:relative; width:100%; overflow:hidden; padding:4px 0 6px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%); }
.mw-rev-track { display:flex; width:max-content; animation:mwMarquee 52s linear infinite; }
.mw-rev-card { flex-shrink:0; width:clamp(206px,58vw,244px); margin-right:10px; background:var(--surface); border-radius:var(--r); padding:clamp(10px,3.2vw,13px); box-shadow:var(--shadow-sm); text-align:left; }
.mw-rev-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.mw-rev-av { width:30px; height:30px; border-radius:50%; object-fit:cover; background:var(--bg-2); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:800; }
.mw-rev-av-ini { line-height:30px; text-align:center; }
.mw-rev-id { flex:1; min-width:0; display:flex; flex-direction:column; }
.mw-rev-name { font-size:clamp(12px,3.9vw,13.5px); font-weight:800; color:var(--ink-deep); line-height:1.2; }
.mw-rev-role { font-size:clamp(10px,3.2vw,11.5px); font-weight:600; color:var(--ink-3); line-height:1.2; }
.mw-rev-stars { color:var(--orange); font-size:clamp(9px,3vw,11px); letter-spacing:.5px; flex-shrink:0; }
.mw-rev-text { font-size:clamp(11px,3.6vw,12.5px); font-weight:600; color:var(--ink-2); line-height:1.4; }

/* ============================================================
   6. Plan cards (DOM built by the shared runtime)
   ============================================================ */
.pricing-cards { display:flex; flex-direction:column; gap:clamp(8px,2.6vw,12px); }
.pricing-card { position:relative; background:var(--surface); border:2px solid transparent; border-radius:var(--r); padding:clamp(13px,4.2vw,17px) clamp(14px,4.4vw,18px); cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; box-shadow:var(--shadow-sm); transition:border-color .2s ease, box-shadow .2s ease, transform .12s ease; }
.pricing-card:active { transform:scale(.995); }
.pricing-card.selected { border-color:var(--green); box-shadow:0 0 0 3px rgba(34,197,94,.12), var(--shadow-md); }
.radio-indicator { position:absolute; top:50%; right:clamp(14px,4.4vw,18px); transform:translateY(-50%); width:26px; height:26px; border-radius:50%; border:2px solid #D9DEE5; background:var(--surface); display:flex; align-items:center; justify-content:center; transition:all .2s; }
.radio-indicator svg { opacity:0; transform:scale(.5); transition:all .2s; }
.pricing-card.selected .radio-indicator { border-color:var(--green); background:var(--green); }
.pricing-card.selected .radio-indicator svg { opacity:1; transform:scale(1); }

.badge-row { display:flex; align-items:center; gap:6px; margin-bottom:6px; flex-wrap:wrap; }
/* the runtime writes a fixed badge string; moondew re-labels it in CSS */
.popular-badge { display:inline-flex; align-items:center; gap:6px; background:var(--amber); color:#fff; font-size:0; line-height:1; padding:6px 12px; border-radius:var(--r-pill); height:auto; }
.popular-badge::before { content:''; width:13px; height:11px; flex-shrink:0; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M3 7l4.6 3.6L12 4l4.4 6.6L21 7l-1.7 11H4.7L3 7z'/></svg>") center/contain no-repeat; }
.popular-badge::after { content:'Выбор большинства'; font-size:clamp(9.5px,3vw,11px); font-weight:800; letter-spacing:.01em; line-height:1; }
.discount-tag { display:inline-flex; align-items:center; background:var(--amber); color:#fff; font-size:clamp(10px,3.4vw,12px); font-weight:800; padding:3px 9px; border-radius:var(--r-pill); line-height:1.2; }
.discount-badge { display:inline-block; color:var(--green-2); background:rgba(34,197,94,.12); font-size:clamp(9.5px,3.2vw,11px); font-weight:800; padding:3px 9px; border-radius:var(--r-pill); }
.countdown-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(34,197,94,.12); color:var(--green-2); font-size:clamp(10px,3.4vw,12px); font-weight:800; padding:4px 9px; border-radius:var(--r-pill); font-variant-numeric:tabular-nums; animation:pulse 2.4s ease-in-out infinite; }
.countdown-badge svg { width:12px; height:12px; }

.card-price-row { display:flex; align-items:baseline; flex-wrap:wrap; column-gap:8px; row-gap:2px; }
.price-old { font-size:clamp(12px,4.2vw,15px); font-weight:600; color:#AEB4BD; text-decoration:line-through; }
.price-new { font-size:clamp(19px,6.4vw,24px); font-weight:800; color:var(--ink-deep); letter-spacing:-.02em; }
.price-period { font-size:clamp(12px,4vw,15px); font-weight:700; color:var(--ink-3); }
.price-period.period-bold { color:var(--ink-deep) !important; font-weight:800 !important; }
.price-yearly { font-size:clamp(12px,4.2vw,15px); font-weight:800; color:var(--green-2); margin-left:auto; white-space:nowrap; }
.card-standard { display:flex; justify-content:space-between; align-items:center; gap:8px; padding-right:clamp(30px,9.5vw,40px); }
.card-main-price { font-size:clamp(16px,5.4vw,20px); font-weight:800; color:var(--ink-deep); letter-spacing:-.02em; }
.card-per-week,.card-per-month { font-size:clamp(11px,3.6vw,13px); font-weight:600; color:var(--ink-3); }
.card-right { text-align:right; }
.card-savings,.card-savings-line { font-size:clamp(11px,3.6vw,13px); font-weight:800; color:var(--green-2); margin-top:3px; }
.card-per-day { font-size:clamp(10.5px,3.4vw,12px); font-weight:600; color:var(--ink-3); margin-top:2px; }
.pricing-card.card-first:not(.plan-card-hero) { padding:clamp(15px,4.6vw,19px) clamp(14px,4.4vw,18px); }
.pricing-card.card-first:not(.plan-card-hero) .price-new { font-size:clamp(22px,7.4vw,28px); }

/* --- hero (best-value) card: deep green + orange accent --- */
.pricing-card.plan-card-hero { background:var(--hero); border-color:rgba(255,255,255,.16); padding-top:clamp(34px,9.6vw,42px); box-shadow:0 14px 32px rgba(11,61,46,.26); overflow:hidden; }
.pricing-card.plan-card-hero.selected { border-color:var(--orange); box-shadow:0 0 0 3px rgba(245,158,11,.16), 0 16px 34px rgba(11,61,46,.3); }
.plan-card-hero .hero-top { position:absolute; top:0; right:0; margin:0; display:flex; align-items:center; }
.plan-card-hero .popular-badge { border-radius:0 calc(var(--r) - 2px) 0 var(--r); padding:7px 12px; gap:5px; }
.plan-card-hero.selected .popular-badge { box-shadow:0 6px 16px rgba(234,88,12,.4); }
.plan-card-hero .card-price-row { padding-right:44px; }
.plan-card-hero .price-new { font-size:clamp(28px,9.2vw,36px); color:#fff; line-height:1.05; }
.plan-card-hero .price-period { font-size:clamp(16px,5.2vw,20px); font-weight:800; color:rgba(255,255,255,.94); }
.plan-card-hero .price-old { order:1; flex-basis:100%; font-size:clamp(12.5px,4.2vw,15px); color:rgba(255,255,255,.58); margin-top:1px; }
.plan-card-hero .price-yearly,.plan-card-hero .card-savings,.plan-card-hero .card-savings-line { color:#A7F3C4; }
.plan-card-hero .card-main-price,.plan-card-hero .card-standard { color:#fff; }
.plan-card-hero .card-per-week,.plan-card-hero .card-per-month,.plan-card-hero .card-per-day { color:rgba(255,255,255,.72); }
.plan-card-hero .discount-tag { background:rgba(255,255,255,.18); color:#fff; }
.plan-card-hero .countdown-badge { background:rgba(255,255,255,.16); color:#fff; animation:none; }
.plan-card-hero .radio-indicator { border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.12); }
.plan-card-hero.selected .radio-indicator { border-color:var(--orange); background:var(--amber); box-shadow:0 4px 12px rgba(234,88,12,.4); }

/* ============================================================
   7. CTA + footer
   ============================================================ */
/* No safe-area inset here: .page already pads its bottom by
   max(env(safe-area-inset-bottom,0px),var(--sab,0px)) and .bottom-area is its last
   in-flow child, so adding it again reserved the home indicator TWICE (68px on
   iPhone 17 Pro) and squeezed the plan cards. */
.bottom-area { position:relative; z-index:2; padding:clamp(4px,1.6vw,8px) 0; }
.cta-button { width:100%; min-height:56px; border:none; border-radius:var(--btn-r); padding:clamp(10px,3.4vw,14px) 22px; background:var(--cta); color:#fff; font-family:inherit; cursor:pointer; text-align:center; position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; box-shadow:0 10px 26px rgba(34,197,94,.26); transition:transform .16s ease, box-shadow .16s ease; }
.cta-button:active { transform:scale(.985); box-shadow:0 6px 18px rgba(34,197,94,.22); }
.cta-button:disabled { opacity:.55; pointer-events:none; }
.cta-button::after { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent); animation:shimmer 3.4s ease-in-out infinite; }
.cta-line1 { display:block; position:relative; z-index:1; font-size:clamp(17px,5.4vw,20px); font-weight:800; letter-spacing:-.01em; }
.cta-line2 { display:block; position:relative; z-index:1; font-size:clamp(10.5px,3.4vw,12.5px); font-weight:600; opacity:.9; margin-top:2px; }
.guarantee-text { font-size:clamp(10px,3.5vw,13px); font-weight:600; color:var(--ink-2); text-align:center; margin-top:clamp(6px,2vw,9px); }
.bottom-meta { display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:clamp(5px,1.8vw,9px); }
.payment-logos img { height:clamp(24px,8.2vw,34px); width:auto; opacity:.9; }

/* ============================================================
   8. Payment-method bottom sheet
   ============================================================ */
.pm-overlay { position:fixed; inset:0; z-index:300; background:rgba(10,25,20,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .3s; }
.pm-overlay.visible { opacity:1; pointer-events:auto; }
.pm-sheet { position:fixed; bottom:0; left:50%; z-index:301; width:100%; max-width:430px; max-height:92vh; max-height:92dvh; transform:translateX(-50%) translateY(100%); background:var(--surface); border-radius:24px 24px 0 0; transition:transform .35s cubic-bezier(.32,.72,0,1); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 -12px 40px rgba(2,32,71,.2); }
.pm-overlay.visible .pm-sheet { transform:translateX(-50%) translateY(0); }
.pm-handle { width:40px; height:4px; background:#DDE2E8; border-radius:var(--r-pill); margin:10px auto 0; flex-shrink:0; }
.pm-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px 0; flex-shrink:0; }
.pm-title { font-size:18px; font-weight:800; color:var(--ink-deep); letter-spacing:-.02em; }
.pm-close { width:34px; height:34px; border:none; background:#F1F3F6; border-radius:50%; color:var(--ink-2); cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:700; -webkit-tap-highlight-color:transparent; }
.pm-plan { padding:4px 20px 0; font-size:17px; font-weight:600; color:var(--ink-2); letter-spacing:-.02em; }
.pm-plan-price { font-weight:800; color:var(--ink-deep); }
.pm-methods { padding:16px 20px 8px; display:flex; flex-direction:column; gap:8px; min-height:0; overflow-y:auto; }
.pm-secure-footer { text-align:center; width:100%; padding:14px 20px calc(10px + max(env(safe-area-inset-bottom,0px),var(--sab,0px))); border-top:1px solid var(--line-2); background:var(--surface-2); flex-shrink:0; }
.pm-secure-text { font-size:14px; font-weight:600; color:var(--ink-3); vertical-align:middle; margin:0 3px; }
.pm-secure-tbank { height:19px; vertical-align:middle; }
.pm-secure-footer svg { vertical-align:middle; position:relative; top:-2px; }
/* iPhone safe area: SBP full-screen back button clears the Dynamic Island, list clears the home indicator. */
.pm-sheet.sbp-mode .sbp-container { padding-top:max(env(safe-area-inset-top,0px),var(--sat,0px)); padding-bottom:max(env(safe-area-inset-bottom,0px),var(--sab,0px)); }
/* 100% (not 100vh): .pm-sheet is position:fixed, so 100% is the live visible
   height everywhere — a 100vh fallback overshoots and pushes the SBP list's
   footer under the home indicator. */
.pm-sheet.sbp-mode { height:100% !important; max-height:100% !important; border-radius:0 !important; padding:0 !important; overflow:hidden !important; display:flex !important; flex-direction:column !important; }
.pm-sheet.sbp-mode .pm-handle, .pm-sheet.sbp-mode .pm-header, .pm-sheet.sbp-mode .pm-plan { display:none !important; }
.pm-sheet.sbp-mode .pm-methods { flex:1 1 auto !important; min-height:0 !important; height:auto !important; overflow:hidden !important; padding:calc(8px + max(env(safe-area-inset-top,0px),var(--sat,0px))) 16px calc(8px + max(env(safe-area-inset-bottom,0px),var(--sab,0px))) !important; margin:0 !important; gap:0 !important; display:flex !important; flex-direction:column !important; }
.pm-sheet.sbp-mode .pm-secure-footer { border-top:1px solid var(--line-2); background:var(--surface); padding:10px 16px calc(10px + max(env(safe-area-inset-bottom,0px),var(--sab,0px))); }
.pm-btn { width:100%; border:none; border-radius:16px; padding:15px 16px; font-family:inherit; cursor:pointer; display:flex; align-items:center; gap:14px; background:#F5F7F9; transition:transform .15s, background .15s; -webkit-tap-highlight-color:transparent; }
.pm-btn:active { transform:scale(.98); background:#EBEFF3; }
.pm-btn-icon { width:52px; height:52px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--surface); border-radius:50%; overflow:hidden; box-shadow:var(--shadow-sm); }
.pm-btn-label { font-size:15px; font-weight:800; color:var(--ink-deep); text-align:left; flex-shrink:1000; }
.pm-btn-sub { font-size:12px; font-weight:600; color:var(--ink-3); margin-left:auto; white-space:normal; text-align:right; line-height:1.25; overflow-wrap:break-word; flex-shrink:1; min-width:0; }
.pm-error { display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 8px 8px; gap:10px; }
.pm-error-icon { width:56px; height:56px; border-radius:50%; background:#FEE2E2 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23EF4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") center/28px 28px no-repeat; margin-bottom:4px; }
.pm-error-title { font-size:16px; font-weight:800; color:var(--ink-deep); line-height:1.35; max-width:320px; }
.pm-error-btn { width:100%; max-width:320px; padding:14px 20px; border:none; border-radius:16px; font-family:inherit; font-size:15px; font-weight:800; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .15s, filter .15s; }
.pm-error-btn:active { transform:scale(.98); }
.pm-error-primary { background:var(--cta); color:#fff; box-shadow:0 6px 18px rgba(34,197,94,.24); margin-top:6px; }
.pm-error-secondary { background:#F1F3F6; color:var(--ink-2); }
.pm-error-secondary:active { background:#E6EAEF; }

/* ============================================================
   9. Payment waiting overlay
   ============================================================ */
.po-overlay { position:fixed; inset:0; z-index:1000; background:rgba(8,26,20,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; transition:opacity .3s; }
.po-hidden { display:none; }
.po-content { text-align:center; color:#fff; padding:40px 24px; max-width:340px; }
.po-close { position:fixed; top:16px; right:16px; z-index:1001; width:44px; height:44px; border-radius:50%; border:none; background:rgba(255,255,255,.15); color:#fff; font-size:24px; cursor:pointer; transition:background .2s; }
.po-close:hover { background:rgba(255,255,255,.25); }
.po-spinner { margin:0 auto 24px; }
.po-spin-ring { width:48px; height:48px; border:3px solid rgba(255,255,255,.2); border-top-color:var(--green-1); border-radius:50%; animation:spin 1s linear infinite; margin:0 auto; }
.po-check { display:none; margin:0 auto 24px; }
.po-cross { display:none; margin:0 auto 24px; }
.po-check-circle { stroke-dasharray:150; stroke-dashoffset:150; animation:po-circle .6s ease forwards; }
.po-check-mark { stroke-dasharray:50; stroke-dashoffset:50; animation:po-mark .4s ease forwards .4s; }
@keyframes po-circle { to { stroke-dashoffset:0; } }
@keyframes po-mark { to { stroke-dashoffset:0; } }
.po-title { font-size:20px; font-weight:800; margin:0 0 8px; letter-spacing:-.02em; }
.po-sub { font-size:14px; font-weight:500; opacity:.75; margin:0 0 4px; }
.po-refresh, .po-retry { display:none; margin:20px auto 0; padding:13px 28px; border:none; border-radius:var(--btn-r); background:var(--cta); color:#fff; font-family:inherit; font-size:15px; font-weight:800; cursor:pointer; transition:transform .15s; }
.po-refresh:active, .po-retry:active { transform:scale(.96); }
.po-btn-back { margin:24px auto 0; padding:12px 32px; border:none; border-radius:var(--btn-r); background:rgba(255,255,255,.15); color:#fff; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; transition:background .2s; display:block; }
.po-btn-back:active { background:rgba(255,255,255,.25); }
.po-btn-change { margin-top:10px; }
.po-btn-tariffs { margin:10px auto 0; padding:10px 24px; border:none; border-radius:10px; background:none; color:rgba(255,255,255,.55); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:color .2s; display:block; text-decoration:underline; }
.po-btn-tariffs:active { color:rgba(255,255,255,.75); }
.po-hidden-el { display:none; }
.po-overlay.po-success .po-spinner { display:none; }
.po-overlay.po-success .po-check { display:block; }
.po-overlay.po-success .po-btn-back { display:none; }
.po-overlay.po-success .po-btn-tariffs { display:none; }
.po-overlay.po-timeout .po-spinner { display:none; }
.po-overlay.po-timeout .po-refresh { display:block; }
/* Enrol-first charging grace: no back/change mid-charge — a second create
 * while the full amount is being taken is a double purchase invitation. */
.po-overlay.po-charging .po-btn-back { display:none; }
.po-overlay.po-charging .po-btn-tariffs { display:none; }
/* Enrol-first retry: the timeout screen offers the same retry the declined one does. */
.po-overlay.po-timeout .po-retry { display:block; }
/* Timeout hides only «Назад» — «Изменить способ оплаты» must stay reachable
 * (it shares the po-btn-back class, so a class-wide hide killed it too). */
.po-overlay.po-timeout #poBackBtn { display:none; }
.po-overlay.po-declined .po-spinner { display:none; }
.po-overlay.po-declined .po-cross { display:block; }
.po-overlay.po-declined .po-retry { display:block; }
.po-overlay.po-declined .po-btn-back { display:none; }

/* ============================================================
   10. Free-trial CTA + trial states + trial sheet
   ============================================================ */
.free-trial-cta { display:flex; align-items:center; gap:12px; background:var(--surface); border:2px solid var(--green); border-radius:var(--r); padding:clamp(9px,3vw,12px) clamp(11px,3.6vw,14px); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .15s, box-shadow .15s; box-shadow:0 6px 18px rgba(34,197,94,.14); }
.free-trial-cta:active { transform:scale(.98); }
.ft-icon { width:clamp(36px,12vw,44px); height:clamp(36px,12vw,44px); border-radius:13px; background:var(--cta); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ft-icon svg { width:22px; height:22px; }
.ft-body { flex:1; min-width:0; }
.ft-title { font-size:clamp(13px,4.4vw,15px); font-weight:800; color:var(--ink-deep); line-height:1.2; }
.ft-sub { font-size:clamp(10.5px,3.5vw,13px); font-weight:600; color:var(--green-2); margin-top:2px; line-height:1.3; }
.ft-arr { color:var(--green-2); flex-shrink:0; }
.ft-arr svg { width:18px; height:18px; }
.trial-section { margin-bottom:8px; text-align:center; }
.trial-btn { width:100%; border:none; border-radius:var(--btn-r); padding:clamp(13px,4.2vw,16px) 20px; font-family:inherit; font-size:clamp(14px,4.8vw,17px); font-weight:800; color:#fff; cursor:pointer; background:linear-gradient(135deg,#818CF8,#4F46E5); box-shadow:0 8px 20px rgba(79,70,229,.24); transition:transform .15s; -webkit-tap-highlight-color:transparent; display:flex; align-items:center; justify-content:center; }
.trial-btn:active { transform:scale(.98); }
.trial-btn:disabled { opacity:.6; pointer-events:none; }
.trial-btn-retry { margin-top:8px; }
.trial-desc { font-size:clamp(10px,3.5vw,12px); font-weight:600; color:var(--ink-3); margin-top:6px; }
.trial-active { background:#EAFBF1; border:2px solid var(--green); border-radius:var(--r); padding:14px; text-align:left; }
.trial-active-header { display:flex; align-items:center; gap:8px; font-size:clamp(14px,4.8vw,17px); font-weight:800; color:var(--green-2); margin-bottom:8px; }
.trial-active-desc { font-size:clamp(12px,4.2vw,14px); font-weight:600; color:var(--ink-2); margin-bottom:8px; }
.trial-link-box { display:flex; gap:6px; }
.trial-link-input { flex:1; border:1px solid var(--line-2); border-radius:12px; padding:9px 11px; font-family:inherit; font-size:13px; font-weight:600; color:var(--ink-deep); background:var(--surface); min-width:0; }
.trial-copy-btn { border:none; border-radius:12px; padding:9px 15px; font-family:inherit; font-size:13px; font-weight:800; color:#fff; background:var(--green); cursor:pointer; white-space:nowrap; transition:transform .15s; }
.trial-copy-btn:active { transform:scale(.97); }
.trial-copy-btn.copied { background:var(--green-2); }
.trial-info { font-size:clamp(10px,3.5vw,12px); font-weight:600; color:var(--ink-3); margin-top:6px; }
.trial-error { background:#FEF2F2; border:2px solid #FCA5A5; border-radius:var(--r); padding:14px; text-align:center; color:#991B1B; font-size:clamp(12px,4.2vw,14px); font-weight:700; }

.tp-overlay { position:fixed; inset:0; z-index:300; background:rgba(10,25,20,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .3s; }
.tp-overlay.visible { opacity:1; pointer-events:auto; }
.tp-sheet { position:fixed; bottom:0; left:50%; z-index:301; max-height:92vh; max-height:92dvh; width:100%; max-width:430px; transform:translateX(-50%) translateY(100%); background:var(--bg); border-radius:24px 24px 0 0; transition:transform .35s cubic-bezier(.32,.72,0,1); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 -12px 40px rgba(2,32,71,.2); }
.tp-overlay.visible .tp-sheet { transform:translateX(-50%) translateY(0); }
.tp-handle { width:40px; height:4px; background:#DDE2E8; border-radius:var(--r-pill); margin:10px auto 0; flex-shrink:0; }
.tp-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px 0; flex-shrink:0; }
.tp-title { font-size:18px; font-weight:800; color:var(--ink-deep); letter-spacing:-.02em; }
.tp-close { width:34px; height:34px; border:none; background:#F1F3F6; border-radius:50%; color:var(--ink-2); cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:700; -webkit-tap-highlight-color:transparent; }
.tp-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 20px calc(24px + max(env(safe-area-inset-bottom,0px),var(--sab,0px))); overscroll-behavior-y:contain; scrollbar-width:none; }
.tp-scroll::-webkit-scrollbar { display:none; }
.tp-desc { font-size:14px; font-weight:500; color:var(--ink-2); line-height:1.6; margin-bottom:20px; }
.tp-desc b { color:var(--ink-deep); font-weight:800; }
.tp-section { font-size:16px; font-weight:800; color:var(--ink-deep); margin-bottom:16px; }
.tp-steps { position:relative; padding-left:28px; margin-bottom:24px; }
.tp-steps::before { content:''; position:absolute; left:11px; top:12px; bottom:12px; width:2px; background:linear-gradient(to bottom,var(--green),var(--blue)); border-radius:1px; }
.tp-step { position:relative; padding-bottom:24px; }
.tp-step:last-child { padding-bottom:0; }
.tp-step-num { position:absolute; left:-28px; top:0; width:24px; height:24px; border-radius:50%; background:var(--cta); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; z-index:1; }
.tp-step-done .tp-step-num { background:var(--green); }
.tp-step-title { font-size:15px; font-weight:800; color:var(--ink-deep); margin-bottom:6px; line-height:1.3; }
.tp-step-desc { font-size:14px; font-weight:500; color:var(--ink-2); line-height:1.55; }
.tp-step-desc b { color:var(--ink-deep); font-weight:800; }
.tp-app-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.tp-app-icon { width:44px; height:44px; border-radius:11px; flex-shrink:0; box-shadow:var(--shadow-sm); overflow:hidden; }
.tp-app-icon img { width:100%; height:100%; display:block; }
.tp-app-info { flex:1; }
.tp-app-name { font-size:15px; font-weight:800; color:var(--ink-deep); }
.tp-app-sub { font-size:11px; font-weight:500; color:var(--ink-3); }
.tp-stores { display:flex; gap:8px; margin-top:10px; }
.tp-store { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--ink-deep); color:#fff; border:none; border-radius:14px; padding:11px 10px; text-decoration:none; transition:transform .15s; -webkit-tap-highlight-color:transparent; }
.tp-store:active { transform:scale(.96); }
.tp-store svg { width:18px; height:18px; flex-shrink:0; fill:#fff; }
.tp-store-info { display:flex; flex-direction:column; line-height:1.2; }
.tp-store-small { font-size:10px; font-weight:500; color:rgba(255,255,255,.7); }
.tp-store-name { font-size:15px; font-weight:800; color:#fff; white-space:nowrap; }
.tp-img { width:100%; max-width:100%; margin:10px 0 0; display:block; border-radius:12px; box-shadow:var(--shadow-sm); border:1px solid var(--line); }
.tp-divider { height:1px; background:var(--line); margin:20px 0; }
.tp-faq { margin-bottom:20px; }
.tp-faq-item { background:var(--surface); border-radius:12px; margin-bottom:6px; overflow:hidden; box-shadow:var(--shadow-sm); }
.tp-faq-q { padding:12px 14px; font-size:13px; font-weight:800; color:var(--ink-deep); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; -webkit-tap-highlight-color:transparent; }
.tp-faq-arr { width:14px; height:14px; color:var(--ink-3); transition:transform .2s; flex-shrink:0; }
.tp-faq-item.open .tp-faq-arr { transform:rotate(180deg); }
.tp-faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.tp-faq-item.open .tp-faq-a { max-height:300px; }
.tp-faq-a-inner { padding:0 14px 12px; font-size:13px; font-weight:500; color:var(--ink-2); line-height:1.6; }
.tp-tg { display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,#2AA3DE,#1E8EC5); border-radius:14px; padding:14px 16px; text-decoration:none; transition:transform .15s; }
.tp-tg:active { transform:scale(.97); }
.tp-tg svg { width:24px; height:24px; flex-shrink:0; fill:#fff; }
.tp-tg-text { color:#fff; font-size:14px; font-weight:800; }
.tp-tg-sub { color:rgba(255,255,255,.85); font-size:12px; margin-top:2px; }
.tp-ios-btn { display:block; width:100%; text-align:center; background:var(--cta); color:#fff; font-size:15px; font-weight:800; padding:13px 20px; border-radius:var(--btn-r); margin-top:10px; text-decoration:none; box-shadow:0 6px 18px rgba(34,197,94,.24); -webkit-tap-highlight-color:transparent; transition:transform .15s; }
.tp-ios-btn:active { transform:scale(.97); }

/* ============================================================
   11. Discount overlays (post-prices-render)
   ============================================================ */
.pw-discount-overlay { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:18px; box-sizing:border-box; }
.pw-discount-overlay-bg { position:absolute; inset:0; background:rgba(10,25,20,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
/* max-height + internal scroll: the overlay centres this sheet inside a fixed
   box with no escape valve, so a tall variant (gift sheet with perks + two
   Telegram buttons) used to bleed past both edges where it is unreachable.
   100% = the overlay's content box (viewport minus its 18px padding). */
.pw-discount-sheet { position:relative; z-index:1; width:100%; max-width:352px; max-height:100%; overflow-y:auto; background:var(--surface); border-radius:24px; padding:26px 22px 22px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; align-items:stretch; }
.pw-discount-close { position:absolute; top:12px; right:12px; width:34px; height:34px; border:none; background:#F1F3F6; border-radius:50%; color:var(--ink-2); cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; }
.pw-discount-badge-50 { align-self:center; font-size:38px; font-weight:800; letter-spacing:-.03em; color:#fff; background:var(--amber); padding:8px 22px; border-radius:var(--r-pill); margin-bottom:14px; box-shadow:0 10px 24px rgba(234,88,12,.3); }
.pw-discount-title { font-size:22px; font-weight:800; color:var(--ink-deep); text-align:center; line-height:1.2; margin-bottom:6px; letter-spacing:-.02em; }
.pw-discount-sub { font-size:14px; font-weight:500; color:var(--ink-2); text-align:center; line-height:1.4; margin-bottom:14px; }
.pw-discount-countdown { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:38px; font-weight:800; letter-spacing:.04em; color:var(--green-2); text-align:center; margin-bottom:18px; font-variant-numeric:tabular-nums; }
.pw-discount-btn-primary { width:100%; border:none; border-radius:var(--btn-r); padding:16px; background:var(--cta); color:#fff; font-family:inherit; font-size:17px; font-weight:800; cursor:pointer; box-shadow:0 8px 22px rgba(34,197,94,.26); -webkit-tap-highlight-color:transparent; margin-bottom:8px; transition:transform .15s; }
.pw-discount-btn-primary:active { transform:scale(.98); }
.pw-discount-btn-secondary { width:100%; border:none; background:none; padding:10px; font-family:inherit; font-size:13px; font-weight:700; color:var(--ink-3); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.pw-discount-gift-title { font-size:20px; font-weight:800; color:var(--ink-deep); text-align:center; line-height:1.25; margin:4px 0 6px; }
.pw-discount-gift-sub { font-size:13px; font-weight:500; color:var(--ink-2); text-align:center; line-height:1.4; margin-bottom:14px; }
.pw-discount-tg-row { display:flex; flex-direction:column; gap:10px; }
.pw-discount-tg-btn { display:flex; align-items:center; gap:12px; width:100%; background:var(--surface); border:1px solid var(--line-2); border-radius:16px; padding:12px 14px; text-decoration:none; color:var(--ink-deep); -webkit-tap-highlight-color:transparent; box-shadow:var(--shadow-sm); }
.pw-discount-tg-btn:active { transform:scale(.99); }
.pw-discount-tg-ico { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pw-discount-tg-ico-proxy { background:linear-gradient(135deg,#34D27B,#16A34A); }
.pw-discount-tg-ico-bot { background:#2AA3DE; }
.pw-discount-tg-label { font-size:15px; font-weight:800; color:var(--ink-deep); line-height:1.2; flex:1; min-width:0; }
.pw-discount-tg-sub { font-size:12px; font-weight:800; margin-left:auto; }
.pw-discount-tg-btn.pw-discount-tg-proxy .pw-discount-tg-sub { color:var(--green-2); }
.pw-discount-tg-btn.pw-discount-tg-bot .pw-discount-tg-sub { color:#2AA3DE; }
.pw-discount-sheet-2 { padding-top:44px; }
.pw-discount-gift-badge { align-self:center; width:48px; height:48px; border-radius:var(--r-pill); background:var(--cta); display:flex; align-items:center; justify-content:center; font-size:44px; line-height:1; margin-bottom:10px; }
.pw-discount-gift-perks { list-style:none; padding:0; margin:10px 0 14px; display:flex; flex-direction:column; gap:6px; }
.pw-discount-gift-perk { display:flex; gap:8px; align-items:center; font-size:13px; font-weight:600; color:var(--ink-2); }
.pw-discount-gift-perk-ico { width:14px; height:14px; flex-shrink:0; }
.pw-discount-gift-note { font-size:12px; font-weight:500; color:var(--ink-3); text-align:center; margin-top:4px; }