/* ===== Ultiself Sobriety Quiz Funnel — Liven-style (ported from ALCO/src/styles.css) ===== */
/* All design tokens scoped under .sobriety-funnel so they don't clobber the global :root / .or-container */
.sobriety-funnel{
  --bg:#EEF2F5;
  --bg-deep:#dfe6ea;
  --card:#ffffff;
  --ink:#16202b;
  --ink-soft:#3a4754;
  --muted:#7a8794;
  --line:#e7edf1;
  --green:#4CA31B;
  --green-d:#3f8d16;
  --green-tint:#eef7e6;
  --amber:#F5A623;
  --amber-tint:#fff4e0;
  --red:#e2533b;
  --shadow:0 10px 30px rgba(31,49,66,.08);
  --shadow-sm:0 4px 14px rgba(31,49,66,.06);
  --radius:22px;
  --radius-lg:26px;
  --font-h:"Sora",system-ui,sans-serif;
  --font-b:"Plus Jakarta Sans",system-ui,sans-serif;

  position:fixed;
  inset:0;
  z-index:0;
  font-family:var(--font-b);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, #e9eef2 0%, #d3dbe1 60%, #c9d2d9 100%);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.sobriety-funnel *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

/* vars consumed by the live alcohol PaymentForm overlay (fixed descendant of .sobriety-funnel) */
.sobriety-funnel{
  --Basic:#1E9013;
  --White:#FFFFFF;
  --Text-Black:#101010;
  --Elements-Grey:#808288;
}

.brand-logo{height:15px;width:auto;display:block;}

/* ---- frameless, responsive layout (no phone simulation) ---- */
.sobriety-funnel .stage{
  display:flex;align-items:center;justify-content:center;width:100vw;
  height:100vh;height:100svh;height:100dvh;
  padding:0;
}
.sobriety-funnel .phone{
  position:relative;width:100%;height:100%;
  background:transparent;border-radius:0;padding:0;box-shadow:none;
  display:flex;align-items:center;justify-content:center;
  background: var(--bg)
}
.sobriety-funnel .screen-wrap{
  position:relative;width:100%;height:100%;
  background:var(--bg);overflow:hidden;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}

/* mobile: full dynamic viewport (resizes with keyboard via interactive-widget=resizes-content) */
@media (max-width:759px){
  .sobriety-funnel:not(.sf-alco-host):not(.sf-scroll){
    height:100dvh;
    max-height:100dvh;
  }
  .sobriety-funnel:not(.sf-alco-host):not(.sf-scroll) .stage{
    height:100%;
  }
}

/* desktop: a clean centered web card — NOT a phone mockup */
@media (min-width:760px){
  .sobriety-funnel{
    background:radial-gradient(1200px 700px at 50% -10%, #eef3f7 0%, #cfd8df 58%, #bcc7cf 100%);
  }
  .sobriety-funnel .screen-wrap{
    width:480px;max-width:94vw;height:min(900px,94vh);
    padding-top:0;
    padding-bottom:0;
  }
  /* a touch more breathing room for the header on desktop */
  .appbar{padding-top:14px;}

  /* long pages (sales): drop the fixed 480x900 card, let the whole window scroll,
     keep the 480px content column centered */
  .sobriety-funnel.sf-scroll{
    position:static;inset:auto;height:auto;min-height:100vh;overflow:visible;display:block;
  }
  .sobriety-funnel.sf-scroll .stage{height:auto;min-height:100vh;display:block;width:100%;}
  .sobriety-funnel.sf-scroll .phone{height:auto;display:block;}
  .sobriety-funnel.sf-scroll .screen-wrap{
    width:480px;max-width:94vw;height:auto;min-height:100vh;margin:0 auto;overflow:visible;
  }
  .sobriety-funnel.sf-scroll .screen-host{min-height:0;}
  .sobriety-funnel.sf-scroll .content{overflow:visible;}
}

.screen-host{
  flex:1 1 auto;display:flex;flex-direction:column;min-height:0;
  background:var(--bg);
}
.screen-anim{
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

/* header */
.appbar{flex:0 0 auto;padding:6px 18px 0;position:relative;z-index:2;background:var(--bg);}
.appbar-row{display:flex;align-items:center;justify-content:space-between;height:40px;}
.backbtn{width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;}
.backbtn:active{background:rgba(0,0,0,.05);}
.backbtn[disabled]{opacity:0;pointer-events:none;}
.brand{display:flex;align-items:center;gap:7px;font-family:var(--font-h);font-weight:700;
  font-size:17px;letter-spacing:-.02em;color:var(--ink);}
.brand .mark{width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-tint);}
.appbar-spacer{width:38px;}
.progress{height:6px;border-radius:999px;background:#e1e8ed;margin:12px 4px 2px;overflow:hidden;}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,#5cb727,var(--green));
  border-radius:999px;transition:width .45s cubic-bezier(.4,0,.2,1);}

/* content + footer */
.content{
  flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:14px 22px 8px;-webkit-overflow-scrolling:touch;
}
.content::-webkit-scrollbar{width:0;}
.footer{flex:0 0 auto;padding:12px 22px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(238,242,245,0),var(--bg) 30%);}

/* email / name: form at top, CTA at bottom — gap via space-between, not flex-grow on .content */
.sf-text-screen{
  flex:1 1 auto;
  min-height:0;
  justify-content:space-between;
}
.sf-text-screen .content{
  flex:0 0 auto;
  overflow:visible;
}
.sf-text-screen .footer{
  flex:0 0 auto;
}

/* screen entrance animation — transform-only so paused/reduced-motion state stays visible */
@media (prefers-reduced-motion: no-preference){
  .screen-anim{animation:sf-slideIn .42s cubic-bezier(.22,.61,.36,1);}
  .fade-anim{animation:sf-fadeUp .5s ease both;}
}
@keyframes sf-slideIn{from{transform:translateX(24px);}to{transform:translateX(0);}}
@keyframes sf-fadeUp{from{transform:translateY(14px);}to{transform:translateY(0);}}

/* typography */
.kicker{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--green-d);background:var(--green-tint);
  padding:7px 13px;border-radius:999px;margin-bottom:14px;}
.kicker.amber{color:#b5740a;background:var(--amber-tint);}
.kicker.neutral{color:var(--ink-soft);background:#eef2f5;}
h1.q{font-family:var(--font-h);font-weight:700;font-size:26px;line-height:1.18;letter-spacing:-.02em;
  margin:2px 0 8px;text-wrap:balance;}
h1.q.sm{font-size:23px;}
/* EN reg-page test v2 commit screen: full-size question with the ask highlighted, as in Figma */
.sf-commit h1.q{font-size:26px;margin-bottom:26px;}
/* fixed-height bar pinned to the bottom of the line, so it reads as an underline and not a fill */
.sf-commit h1.q mark{background:linear-gradient(rgba(76,163,27,.22),rgba(76,163,27,.22)) 0 100%/100% 10px no-repeat;
  color:inherit;padding:0;border-radius:0;}
.sub{color:var(--muted);font-size:15px;line-height:1.5;margin:0 0 18px;text-wrap:pretty;}
.sub em{font-style:normal;color:var(--ink-soft);}
.prompt-label{font-family:var(--font-h);font-weight:700;font-size:18px;color:var(--ink);margin:4px 0 14px;letter-spacing:-.01em;}
.center{text-align:center;}
.center .kicker{margin-left:auto;margin-right:auto;}

/* option cards */
.opts{display:flex;flex-direction:column;gap:11px;}
.opts.grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.opt{display:flex;align-items:center;gap:13px;background:var(--card);border:2px solid transparent;
  border-radius:18px;padding:15px 16px;cursor:pointer;box-shadow:var(--shadow-sm);
  transition:transform .12s ease,border-color .15s ease,background .15s ease;text-align:left;width:100%;font-family:var(--font-b);}
.opt:active{transform:scale(.985);}
.opt .ico{width:42px;height:42px;flex:0 0 auto;border-radius:13px;background:var(--amber-tint);
  display:flex;align-items:center;justify-content:center;font-size:21px;}
.opt .lbl{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.3;}
.opt.grid-cell{flex-direction:column;align-items:flex-start;gap:10px;padding:16px 15px;}
.opt .check{margin-left:auto;width:24px;height:24px;border-radius:50%;border:2px solid #d9e1e7;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;transition:.15s;}
.opt.sel{border-color:var(--green);background:var(--green-tint);}
.opt.sel .check{background:var(--green);border-color:var(--green);}
.opt.sel .ico{background:#fff;}

/* photo cards (gender) */
.photo-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;}
.photo-card{position:relative;aspect-ratio:1/1;border-radius:20px;overflow:hidden;border:0;padding:0;cursor:pointer;
  box-shadow:var(--shadow-sm);background:#dfe6ea;transition:transform .12s ease;}
.photo-card:active{transform:scale(.985);}
.photo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.photo-card .photo-pill{position:absolute;left:10px;right:10px;bottom:10px;background:#fff;border-radius:13px;
  padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;box-shadow:0 6px 16px rgba(16,28,40,.18);}
.photo-card .photo-pill span{font-family:var(--font-h);font-weight:700;font-size:15px;color:var(--ink);}
.photo-card .photo-pill .arr{color:var(--muted);font-size:18px;font-weight:700;line-height:1;}
.photo-card.sel{outline:3px solid var(--green);outline-offset:-3px;}
.photo-card.sel .photo-pill{background:var(--green-tint);}
.photo-card.sel .photo-pill .arr{color:var(--green-d);}

/* agreement scale */
.stmt{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 22px;margin-bottom:22px;}
.stmt .quote{font-family:var(--font-h);font-weight:600;font-size:22px;line-height:1.32;letter-spacing:-.01em;text-wrap:balance;}
.scale-track{position:relative;margin:6px 2px 8px;}
.scale-bar{height:7px;border-radius:999px;
  background:linear-gradient(90deg,#e2533b,#f0a93f,#dfce4a,#9fc83e,#4CA31B);margin:0 22px 18px;opacity:.9;}
.hands{display:flex;justify-content:space-between;gap:6px;padding:0 2px;}
.hand{flex:1;border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--font-b);}
.hand .bubble{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:22px;background:#fff;border:2px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .14s ease,border-color .14s,box-shadow .14s;}
.hand:active .bubble{transform:scale(.9);}
.hand.sel .bubble{transform:scale(1.12);}
.hand:nth-child(1).sel .bubble{border-color:#e2533b;box-shadow:0 0 0 4px rgba(226,83,59,.18);}
.hand:nth-child(2).sel .bubble{border-color:#f0a93f;box-shadow:0 0 0 4px rgba(240,169,63,.18);}
.hand:nth-child(3).sel .bubble{border-color:#c9bf3a;box-shadow:0 0 0 4px rgba(201,191,58,.18);}
.hand:nth-child(4).sel .bubble{border-color:#9fc83e;box-shadow:0 0 0 4px rgba(159,200,62,.2);}
.hand:nth-child(5).sel .bubble{border-color:var(--green);box-shadow:0 0 0 4px rgba(76,163,27,.2);}
.scale-ends{display:flex;justify-content:space-between;margin-top:4px;font-size:12px;color:var(--muted);font-weight:600;}

/* CTA */
.cta{width:100%;border:0;border-radius:16px;background:var(--green);color:#fff;font-family:var(--font-b);
  font-weight:700;font-size:17px;padding:17px;cursor:pointer;box-shadow:0 10px 22px -8px rgba(76,163,27,.7);
  transition:transform .12s ease,filter .15s;}
.cta:active{transform:translateY(1px) scale(.99);}
.cta:disabled{background:#cdd6dd;color:#fff;box-shadow:none;cursor:not-allowed;}
.cta.ghost{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm);font-weight:600;}
.cta.amber{background:var(--amber);box-shadow:0 10px 22px -8px rgba(245,166,35,.7);}
.linkbtn{display:block;width:100%;text-align:center;background:none;border:0;color:var(--muted);
  font-family:var(--font-b);font-weight:600;font-size:14px;padding:12px;cursor:pointer;margin-top:4px;}

/* interstitial illustration */
.illus{width:128px;height:128px;border-radius:36px;display:flex;align-items:center;justify-content:center;
  font-size:62px;margin:8px auto 22px;background:var(--green-tint);box-shadow:inset 0 0 0 1px rgba(76,163,27,.12);}
.illus.amber{background:var(--amber-tint);box-shadow:inset 0 0 0 1px rgba(245,166,35,.16);}
.illus.blue{background:#e8f0f7;box-shadow:inset 0 0 0 1px rgba(80,130,180,.14);}
.illus.red{background:#fdecea;box-shadow:inset 0 0 0 1px rgba(226,83,59,.16);}
.illus-img{width:52%;max-width:240px;height:auto;display:block;margin:0 auto 18px;mix-blend-mode:multiply;}
.top-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:24px;display:block;margin:2px 0 22px;}
.loop-img{width:100%;max-width:360px;height:auto;display:block;margin:6px auto 18px;}

/* community scale map */
.counter-box{border:2px dashed var(--green);background:var(--green-tint);border-radius:18px;padding:15px 18px;text-align:center;margin:8px 0 14px;}
.counter-box .lab{font-family:var(--font-h);font-weight:700;font-size:18px;color:var(--ink);}
.counter-box .big{font-family:var(--font-h);font-weight:800;font-size:27px;color:var(--green-d);}
.commap{position:relative;width:auto;margin:10px -20px 4px;height:290px;
  background:url("https://assets.ultiself.com/img/sobriety-funnel/worldmap.png") center / auto 100% no-repeat;}
.commap .av{position:absolute;border-radius:50%;overflow:hidden;transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--green),0 6px 14px rgba(16,28,40,.16);}
.commap .av img{width:100%;height:100%;object-fit:cover;display:block;}
.commap .av.sil{display:flex;align-items:center;justify-content:center;}

/* text input */
.field{width:100%;border:2px solid var(--line);border-radius:16px;background:#fff;padding:17px 16px;
  font-family:var(--font-b);font-size:16.5px;color:var(--ink);box-shadow:var(--shadow-sm);outline:none;transition:border-color .15s;}
.field:focus{border-color:var(--green);}
.field::placeholder{color:#aeb8c1;}
.fine{font-size:11.5px;color:#9aa6b0;line-height:1.45;margin-top:14px;text-align:center;}

/* stat list (reality check) */
.statlist{display:flex;flex-direction:column;gap:10px;margin:4px 0 8px;}
.statrow{display:flex;align-items:center;gap:13px;background:#fff;border-radius:15px;padding:13px 15px;box-shadow:var(--shadow-sm);}
.statrow .big{font-family:var(--font-h);font-weight:700;font-size:20px;color:var(--red);min-width:64px;white-space:nowrap;flex:0 0 auto;}
.statrow .txt{font-size:14px;color:var(--ink-soft);line-height:1.3;font-weight:500;}
.sticky-note{background:var(--ink);color:#fff;border-radius:16px;padding:16px 18px;font-family:var(--font-h);
  font-weight:600;font-size:18px;text-align:center;margin-top:6px;line-height:1.3;}

/* profile */
.profile-hero{border-radius:24px;padding:20px 20px 22px;color:#fff;box-shadow:0 14px 30px -12px rgba(31,49,66,.4);margin-bottom:14px;}
.profile-hero .ph-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:rgba(255,255,255,.22);padding:7px 12px;border-radius:999px;}
.profile-hero h1{font-family:var(--font-h);font-weight:700;font-size:23px;line-height:1.2;margin:14px 0 0;color:#fff;letter-spacing:-.02em;text-wrap:balance;}
.hero-gauge{margin-top:26px;}
.hero-gauge .track{position:relative;height:8px;border-radius:999px;background:rgba(255,255,255,.28);}
.hero-gauge .fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:rgba(255,255,255,.92);}
.hero-gauge .marker{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;
  border:3px solid rgba(0,0,0,.18);transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.35);}
.hero-gauge .ylab{position:absolute;bottom:calc(100% + 9px);transform:translateX(-50%);font-size:10px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;background:#fff;color:#1f6d12;padding:3px 8px;border-radius:7px;box-shadow:0 3px 8px rgba(0,0,0,.25);}
.hero-gauge .ylab:after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#fff;}
.hero-gauge .labels{display:flex;justify-content:space-between;margin-top:11px;font-size:11px;font-weight:700;}
.hero-gauge .labels span{opacity:.6;}
.hero-gauge .labels span.active{opacity:1;}

.profile-desc{display:flex;gap:11px;background:var(--green-tint);border-radius:18px;padding:15px 16px;margin-bottom:14px;}
.profile-desc .ic{flex:0 0 auto;width:28px;height:28px;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:var(--shadow-sm);}
.profile-desc p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-soft);text-wrap:pretty;}

.metrics{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:2px;}
.metric{display:flex;gap:11px;align-items:flex-start;background:#fff;border-radius:16px;padding:14px;box-shadow:var(--shadow-sm);}
.metric .mi{flex:0 0 auto;width:32px;height:32px;border-radius:10px;background:var(--green-tint);display:flex;align-items:center;justify-content:center;font-size:16px;}
.metric .mtxt{min-width:0;}
.metric .k{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:5px;overflow-wrap:break-word;word-break:break-word;}
.metric .v{font-family:var(--font-h);font-weight:700;font-size:15.5px;color:var(--ink);line-height:1.2;overflow-wrap:break-word;word-break:break-word;}
.metric.full{grid-column:1/-1;}
.metric .v.green{color:var(--green-d);}
.metric .v.amber{color:#c47e0c;}
.metric .v.red{color:var(--red);}

/* charts */
.chartcard{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 18px 14px;margin-bottom:18px;}
.bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:8px;}
.bars .barcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end;}
.bars .bar{width:100%;flex:0 0 auto;border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,#bcdca0,#4CA31B);transform-origin:bottom;}
.bars .barlab{flex:0 0 auto;}
@media (prefers-reduced-motion: no-preference){
  .bars .bar.grow{animation:sf-barGrow .7s cubic-bezier(.4,0,.2,1) backwards;}
}
@keyframes sf-barGrow{from{transform:scaleY(.25);}to{transform:scaleY(1);}}
.bars .bar.first{background:linear-gradient(180deg,#f3b6ab,#e2533b);}
.bars .barlab{font-size:11px;color:var(--muted);font-weight:600;text-align:center;}
.bars .goalflag{font-size:10px;font-weight:700;color:var(--green-d);background:var(--green-tint);padding:2px 7px;border-radius:999px;}
.linechart{position:relative;height:160px;overflow:visible;}
.lc-dot{position:absolute;width:11px;height:11px;border-radius:50%;border:2.5px solid #fff;
  transform:translate(-50%,-50%);box-shadow:0 1px 5px rgba(0,0,0,.22);z-index:2;}
.lc-bubble{position:absolute;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;
  white-space:nowrap;color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.16);z-index:3;}
.lc-bubble.red{background:#E2533B;}
.lc-bubble.green{background:var(--green);}
.lc-axis{display:flex;justify-content:space-between;margin-top:12px;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--muted);}

/* loading */
.loadwrap{display:flex;flex-direction:column;height:100%;justify-content:center;gap:26px;padding:0 4px;}
.loadtitle{font-family:var(--font-h);font-weight:700;font-size:22px;text-align:center;line-height:1.3;text-wrap:balance;}
.pstages{display:flex;flex-direction:column;gap:16px;}
.pstage-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px;}
.pstage .plabel{font-size:14.5px;font-weight:600;color:var(--muted);transition:color .3s;}
.pstage.done .plabel{color:var(--ink);}
.pstage .pval{font-family:var(--font-h);font-weight:700;font-size:15px;color:var(--green-d);font-variant-numeric:tabular-nums;}
.pstage .pbar{height:9px;border-radius:999px;background:#e1e8ed;overflow:hidden;}
.pstage .pbar > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#5cb727,var(--green));transition:width .12s linear;}

/* review card */
.review{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:18px;margin-top:8px;text-align:left;}
.review .stars{color:#f5b50a;font-size:16px;letter-spacing:2px;}
.review .tp{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:9px;}
.review h4{font-family:var(--font-h);font-weight:700;font-size:17px;margin:8px 0 7px;line-height:1.3;}
.review p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin:0;}
.review .who{font-size:12.5px;color:var(--muted);font-weight:700;margin-top:10px;text-align:right;}

/* popup (loading micro-question) */
.popup-veil{position:absolute;inset:0;background:rgba(16,28,40,.42);backdrop-filter:blur(2px);
  display:flex;align-items:flex-end;justify-content:center;z-index:30;animation:sf-fadeUp .25s ease;}
.popup{background:#fff;width:100%;border-radius:26px 26px 0 0;padding:24px 22px calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(0,0,0,.18);}
@media (prefers-reduced-motion: no-preference){
  .popup{animation:sf-sheetUp .35s cubic-bezier(.22,.61,.36,1);}
}
@keyframes sf-sheetUp{from{transform:translateY(40px);}to{transform:translateY(0);}}
.popup .ph{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px;text-align:center;}
.popup h3{font-family:var(--font-h);font-weight:700;font-size:21px;line-height:1.25;margin:0 0 16px;text-wrap:balance;text-align:center;}
.popup .prow{display:flex;gap:10px;}
.popup .prow .cta{font-size:16px;padding:15px;}

/* expert / science */
.logos{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px;}
.logos .lg{font-family:var(--font-h);font-weight:700;font-size:12.5px;color:var(--ink-soft);
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 13px;box-shadow:var(--shadow-sm);}
.loop-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0 18px;}
.loop-chip{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 13px;font-weight:700;
  font-size:13px;color:var(--ink);box-shadow:var(--shadow-sm);}
.loop-arrow{color:var(--green);font-size:18px;font-weight:700;}
.expert{display:flex;gap:14px;align-items:center;background:#fff;border-radius:18px;padding:16px;box-shadow:var(--shadow-sm);margin-bottom:16px;}
.expert .av{width:56px;height:56px;border-radius:50%;background:var(--green-tint);display:flex;align-items:center;justify-content:center;font-size:26px;flex:0 0 auto;}
.expert .en{font-family:var(--font-h);font-weight:700;font-size:15.5px;line-height:1.2;}
.expert .er{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:3px;line-height:1.3;}
.qcard{background:var(--green-tint);border-radius:18px;padding:18px;font-family:var(--font-h);font-weight:600;
  font-size:17px;line-height:1.4;color:var(--ink);text-wrap:pretty;}
.cite{font-family:var(--font-b);font-weight:600;font-size:12.5px;color:var(--green-d);margin-top:12px;}

/* bubbles social proof */
.bubbles{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:6px 0 20px;}
.bub{background:#fff;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:600;color:var(--ink-soft);box-shadow:var(--shadow-sm);}
.bub.g{background:var(--green-tint);color:var(--green-d);}

/* scratch card */
.scratch-shell{position:relative;width:100%;aspect-ratio:1.45/1;border-radius:22px;overflow:hidden;
  box-shadow:var(--shadow);margin:6px 0 8px;}
.scratch-prize{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 0%,#fff 0%,var(--green-tint) 100%);text-align:center;padding:18px;}
.scratch-prize .big{font-family:var(--font-h);font-weight:800;font-size:52px;color:var(--green-d);line-height:1;}
.scratch-prize .small{font-size:14px;color:var(--ink-soft);font-weight:600;margin-top:6px;}
.scratch-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;}
.scratch-hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:13px;font-weight:700;
  color:#fff;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.25);}

/* coupon */
.coupon{background:linear-gradient(135deg,#4CA31B,#5cb727);color:#fff;border-radius:22px;padding:26px 22px;text-align:center;
  box-shadow:0 18px 40px -14px rgba(76,163,27,.7);margin:8px 0 16px;position:relative;overflow:hidden;}
.coupon .lab{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.9;}
.coupon .pct{font-family:var(--font-h);font-weight:800;font-size:clamp(44px,11vw,58px);line-height:1.05;margin:8px 0;overflow-wrap:break-word;}
.coupon .desc{font-size:14px;opacity:.95;line-height:1.45;font-weight:500;}

/* sales sticky urgency bar */
.sales-content{padding-top:0;}
.sales-sticky{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 -22px 14px;padding:9px 18px;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 5px 18px -6px rgba(16,28,40,.16);}
.ss-timer{display:flex;flex-direction:column;line-height:1;}
.ss-clock{font-family:var(--font-h);font-weight:800;font-size:25px;color:var(--green-d);
  font-variant-numeric:tabular-nums;letter-spacing:.5px;}
.ss-lab{font-size:9.5px;font-weight:600;color:var(--muted);margin-top:3px;letter-spacing:.04em;text-transform:uppercase;}
.ss-cta{background:var(--green);color:#fff;border:0;font-family:var(--font-h);font-weight:700;font-size:13.5px;
  letter-spacing:.04em;padding:13px 20px;border-radius:13px;cursor:pointer;white-space:nowrap;
  box-shadow:0 6px 16px -6px rgba(76,163,27,.7);transition:transform .12s;}
.ss-cta:active{transform:scale(.97);}
.sales-rule{height:1px;background:var(--line);margin:8px 0;}

/* before / after transformation cards */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px;}
.ba-card{background:#fff;border-radius:18px;box-shadow:var(--shadow);overflow:hidden;position:relative;display:flex;flex-direction:column;}
.ba-tag{position:absolute;top:10px;left:10px;z-index:2;font-size:10px;font-weight:700;letter-spacing:.05em;
  padding:4px 9px;border-radius:999px;color:#fff;}
.ba-tag.red{background:#E2533B;}
.ba-tag.green{background:var(--green);}
.ba-photo{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 16%;display:block;}
.ba-metrics{padding:12px 12px 14px;display:flex;flex-direction:column;gap:9px;}
.ba-metric{display:flex;flex-direction:column;gap:5px;}
.ba-mrow{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--ink-soft);}
.ba-val{font-weight:700;}
.ba-val.red{color:#E2533B;}
.ba-val.green{color:var(--green-d);}
.ba-bar{height:6px;border-radius:999px;background:#eef1f4;overflow:hidden;}
.ba-bar > i{display:block;height:100%;border-radius:999px;}
.ba-bar > i.red{background:linear-gradient(90deg,#ef6a52,#E2533B);}
.ba-bar > i.green{background:linear-gradient(90deg,#5cb727,var(--green));}

/* payment modal */
.pay-sheet{position:relative;max-height:88%;overflow-y:auto;}
.pay-sheet::-webkit-scrollbar{width:0;}
.pay-close{position:absolute;top:15px;right:15px;width:30px;height:30px;border-radius:50%;border:0;
  background:#eef1f4;color:var(--ink-soft);font-size:13px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.pay-plan{display:flex;align-items:baseline;gap:9px;margin:0 38px 13px 0;}
.pay-plan-name{font-family:var(--font-h);font-weight:800;font-size:18px;flex:1 1 auto;min-width:0;}
.pay-was{font-size:14px;color:var(--muted);text-decoration:line-through;}
.pay-now{font-family:var(--font-h);font-weight:800;font-size:18px;color:var(--green-d);}
.pay-save{background:var(--green-tint);border:1.5px solid #5b8ed6;border-radius:12px;
  padding:9px 12px;text-align:center;font-size:13px;font-weight:700;color:var(--green-d);margin-bottom:14px;}
.pay-save b{font-variant-numeric:tabular-nums;}
.pay-fast{display:flex;gap:10px;}
.pay-fast button{flex:1 1 0;height:46px;border-radius:12px;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:17px;}
.pay-fast .gpay{background:#000;color:#fff;font-family:var(--font-h);font-weight:700;}
.pay-fast .paypal{background:#FFC439;}
.pay-fast .paypal i{font-style:italic;font-weight:800;color:#003087;}
.pay-fast .paypal i.pal{color:#0096d9;}
.pay-or{display:flex;align-items:center;gap:11px;color:var(--muted);font-size:12px;font-weight:600;margin:13px 0;}
.pay-or::before,.pay-or::after{content:"";flex:1 1 auto;height:1px;background:var(--line);}
.pay-field{margin-bottom:11px;flex:1 1 0;min-width:0;}
.pay-field label{display:block;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:6px;}
.pay-input{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:12px 13px;
  font-size:15px;font-family:var(--font-b);color:var(--ink);outline:none;background:#fff;box-sizing:border-box;}
.pay-input::placeholder{color:#aeb9c2;}
.pay-input:focus{border-color:var(--green);}
.pay-row2{display:flex;gap:10px;}
.cvc-wrap{position:relative;}
.cvc-q{position:absolute;right:11px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;
  background:#eef1f4;color:var(--muted);font-size:11px;font-weight:700;cursor:help;
  display:flex;align-items:center;justify-content:center;}
.pay-guarantee{display:flex;justify-content:center;margin-top:13px;}
.pay-guarantee span{background:var(--green-tint);color:var(--green-d);font-size:11px;font-weight:800;
  letter-spacing:.05em;padding:7px 13px;border-radius:999px;}
.pay-ssl{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:12px;}
.pay-ssl .t{font-size:11px;color:var(--muted);font-weight:600;}
.pay-ssl img{width:min(250px,80%);height:auto;}

/* pricing */
.pay-badges{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:13px;}
.pay-badges .pay-safe{height:25px;width:auto;}
.pay-badges .pay-methods{width:min(284px,90%);height:auto;}
.card-layer-img {display: block;max-width: 284px;width: 100%;margin: 10px auto 0;}
.promo-card{background:#e3f0d3;border-radius:18px;padding:13px 13px 14px;margin-bottom:18px;}
.promo-head{display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-h);font-size:15px;font-weight:800;color:var(--ink);
  padding:2px 0 11px;border-bottom:1px dashed rgba(76,163,27,.35);margin-bottom:12px;}
.promo-head .promo-ico{font-size:17px;}
.promo-row{display:flex;gap:10px;align-items:stretch;}
.promo-field{flex:1 1 auto;display:flex;align-items:center;gap:9px;background:#fff;
  border:1.5px solid var(--green);border-radius:13px;padding:11px 13px;min-width:0;}
.promo-check{width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;}
.promo-code{font-family:var(--font-h);font-weight:800;font-size:15.5px;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.promo-timer{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(255,255,255,.5);border-radius:13px;padding:6px 12px 7px;}
.pt-digits{display:flex;align-items:baseline;}
.pt-digits b{font-family:var(--font-h);font-weight:800;font-size:21px;color:var(--green-d);
  font-variant-numeric:tabular-nums;line-height:1;}
.pt-colon{color:var(--green-d);font-weight:800;margin:0 5px;font-size:16px;}
.pt-labs{display:flex;gap:9px;margin-top:3px;}
.pt-labs span{font-size:9px;font-weight:600;color:var(--ink-soft);}
.plan{display:flex;align-items:center;gap:13px;background:#fff;border:2px solid var(--line);border-radius:18px;
  padding:18px 16px 16px;cursor:pointer;box-shadow:var(--shadow-sm);position:relative;transition:.15s;text-align:left;width:100%;}
.plan.sel{border-color:var(--green);}
.plan .tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;
  font-size:10.5px;font-weight:700;padding:3px 12px;border-radius:999px;letter-spacing:.05em;white-space:nowrap;}
.plan .radio{width:24px;height:24px;border-radius:50%;border:2px solid #d3dce3;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;line-height:1;}
.plan.sel .radio{border-color:var(--green);background:var(--green);}
.plan .pleft{flex:1 1 auto;min-width:0;}
.plan .pname-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.plan .pname{font-family:var(--font-h);font-weight:800;font-size:16.5px;color:var(--ink);}
.plan .save{font-size:10px;font-weight:800;letter-spacing:.03em;color:#5a6675;background:#eef1f4;
  padding:2px 8px;border-radius:999px;}
.plan.sel .save{color:#9a6b00;background:#ffe9a6;}
.plan .pprices{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:13px;}
.plan .pwas{color:var(--muted);text-decoration:line-through;}
.plan .parrow{color:var(--muted);font-size:11px;}
.plan .pnow{font-weight:700;color:var(--ink);}
.plan .pright{display:flex;flex-direction:column;align-items:center;gap:1px;flex:0 0 auto;
  border-left:1px solid var(--line);padding-left:14px;align-self:stretch;justify-content:center;}
.plan .pright b{font-family:var(--font-h);font-weight:800;font-size:27px;color:var(--green-d);line-height:1;}
.plan .pright span{font-size:10.5px;color:var(--muted);font-weight:600;}
.feat{display:flex;align-items:flex-start;gap:11px;margin-bottom:12px;}
.feat .fi{width:24px;height:24px;border-radius:50%;background:var(--green-tint);color:var(--green-d);display:flex;
  align-items:center;justify-content:center;font-size:13px;flex:0 0 auto;margin-top:1px;font-weight:700;}
.feat .ft{font-size:14.5px;color:var(--ink-soft);line-height:1.45;}
.feat .ft b{color:var(--ink);font-weight:700;}
.guarantee{background:var(--green-tint);border-radius:18px;padding:18px;text-align:center;margin:6px 0 16px;}
.guarantee .gi{font-size:34px;}
.guarantee h4{font-family:var(--font-h);font-weight:700;font-size:18px;margin:6px 0 7px;}
.guarantee p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin:0;}
.bonus{background:#fff;border-radius:16px;padding:15px 16px;box-shadow:var(--shadow-sm);margin-bottom:11px;}
.bonus .bt{font-family:var(--font-h);font-weight:700;font-size:14.5px;color:var(--ink);margin-bottom:5px;display:flex;gap:8px;align-items:baseline;}
.bonus .bt .n{color:var(--green-d);white-space:nowrap;flex:0 0 auto;}
.bonus .bd{font-size:13px;color:var(--ink-soft);line-height:1.45;}
.section-head{font-family:var(--font-h);font-weight:700;font-size:22px;line-height:1.25;margin:2px 0 16px;letter-spacing:-.01em;text-wrap:balance;}

/* confetti */
#confetti{position:absolute;inset:0;pointer-events:none;z-index:40;border-radius:42px;}
.opt .ico--svg {
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.opt .ico--svg svg {
  width: 42px;
  height: 42px;
  display: block;
}
.opt .ico--svg svg rect {
  transition: fill .15s ease;
}
.opt.sel .ico--svg svg rect {
  fill: #fff;
}
.opt.sel .ico--svg {
  background: transparent;
}

/* misc */
.spacer8{height:8px;}.spacer16{height:16px;}.spacer24{height:24px;}
.muted-link{color:var(--green-d);font-weight:700;text-decoration:none;}
.echo{background:#fff;border-left:3px solid var(--green);border-radius:0 14px 14px 0;padding:13px 15px;
  font-size:14px;color:var(--ink-soft);line-height:1.5;box-shadow:var(--shadow-sm);margin:6px 0 0;}
.echo b{color:var(--ink);}

/* ===== reused alcohol upsell / TY pages host =====
   These pages are the live AlcoholFunnel components. They are full-bleed and
   depend on the .or-container CSS variables (normally defined in AlcoholRoutine/index.vue,
   which we do NOT mount here). Re-declare them so the components render correctly. */
/* override the fixed/clipped quiz shell so reused upsell pages can scroll naturally */
.sf-alco-host{
  position:static;
  inset:auto;
  overflow:visible;
  height:auto;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  display:block;
  align-items:initial;
  justify-content:initial;
  background:#fff;
}
.sf-alco-host .or-container{
  --Basic: #1E9013;
  --BG-Light-Grey: #EEE;
  --Text-Black: #101010;
  --Elements-Grey: #808288;
  --White: #FFFFFF;
  --Green: #1E9013;
  --Yellow: #FFDA60;
  --Blue: #1F4BAC;

  --Elements-Dark: #232C3D;
  --Light-Blue-BG: #A0AABB33;
  --Light-Blue: #7DB4C9;

  --Green-Gradient: linear-gradient(180deg, #5BD69B 0%, #1B7240 124.84%);
  --White-Gradient: linear-gradient(180deg, #FBFBFB 0%, #DEFBED 100%);
  --BG-White: #F5FBF8;
  --Basic-V2: #10834D;
  --Border-Color:#8FA8BD;
  --Border-Color-Green:#41C2A6;
  --BG-Light-Green: #C3F0DB;
  --Text-Grey: #797979;
  --Text-Color: #282828;
  --Stroke-Grey: #A3A3A3;
  --Color-Red: #B20202;
  --BG-Green: #99EA48;
  --BG-Light-Green-IPF: #DFF8C6;
  --BG-Dark: #010205;
  --IPF-Text-Grey: #BCC1C8;
  --Elements-Dark-Grey: #111720;
  --Text-Dark-Grey: #28374D;
  --Text-Light-Grey: #EAEBED;
  --footer-height: 89px;

  font-family: Rubik, sans-serif;
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
}
.sf-alco-host .fw-bold{font-weight:700 !important;}
.sf-alco-host .fw-700{font-weight:700 !important;}
.sf-alco-host .fw-600{font-weight:700 !important;}
.sf-alco-host .green{color:var(--Green) !important;}
.sf-alco-host .blue{color:var(--Blue) !important;}
.sf-alco-host .color-basic{color:var(--Basic-V2) !important;}
.sf-alco-host .color-red{color:var(--Color-Red);}
.sf-alco-host .basic-green{color:var(--green) !important;}

/* transparent wrapper — children keep their own layout (Vue 2 single root) */
.sf-root{
  display:contents;
}

.through {
    text-decoration: line-through;
}