/* ===========================================================
   EverFlow — Funnel design system v3
   Hebrew / RTL · "professional confidence" · deep navy ink +
   gentle sky accent on a cool off-white · B&W photos
   Font: Assistant (light body + bold emphasis) · Poppins (logo)
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600;700;800&family=Poppins:wght@500;600&display=swap');

:root{
  /* palette — "professional confidence": deep navy + gentle sky on off-white */
  --bg:#F4F6FB;
  --bg-2:#E8EEF8;
  --surface:#FFFFFF;
  --surface-warm:#F7FAFE;
  --ink:#16244F;          /* deep navy — headings + primary text */
  --ink-2:#454F6E;        /* slate-blue — body copy */
  --muted:#7A83A2;        /* muted blue-grey */
  --line:#E1E7F2;
  --line-2:#C7D3E8;
  --navy:#1B2B66;         /* brand navy — logo + CTAs */
  --cta:#1B2B66;
  --accent:#5A93E0;       /* gentle sky / תכלת — secondary + decorative */
  --accent-soft:#E5EEFB;
  --em:#2457C9;           /* emphasis — vivid brand blue so bold copy actually pops */
  --ok:#2E7D52;
  --ok-soft:#EAF3EE;
  --bad:#C24A30;
  --bad-soft:#F8EEE9;
  --star:#E89B3C;
  --track:#DDE5F1;

  /* type — Assistant carries text (weight does the work); Poppins is the wordmark */
  --font-display:'Assistant', system-ui, sans-serif;
  --font-body:'Assistant', system-ui, sans-serif;
  --font-logo:'Poppins', 'Assistant', system-ui, sans-serif;

  /* shape */
  --r:18px;
  --r-lg:22px;
  --r-pill:999px;
  --shadow-card:0 2px 10px rgba(20,30,70,.07), 0 1px 2px rgba(20,30,70,.05);
  --shadow-pop:0 16px 36px rgba(20,30,70,.14);
  --maxw:480px;
}

*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:clip kills any sideways scroll without turning html/body into a
   scroll container — so position:sticky CTAs keep working. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--font-body);
  font-weight:300;                 /* thin/light base — emphasis added where it counts */
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  min-height:100dvh;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font-family:inherit;color:inherit}
img{max-width:100%;display:block}

/* keep very small / legal copy readable despite the light base */
.finep,.co-footer,.legal,.info__note,.form-msg,.ba__val,.plan__sub,.vidrev__date,.lrev__date{font-weight:400}

/* subtle paper grain over the beige */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(20,30,70,.028) 1px, transparent 1px);
  background-size:4px 4px;
}

/* app shell --------------------------------------------------*/
.app{
  position:relative;z-index:1;
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  min-height:100dvh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  overflow-x:clip;          /* no sideways scroll on any funnel screen */
}
@media (min-width:540px){
  body{padding:26px 0}
  .app{
    min-height:calc(100dvh - 52px);
    border-radius:28px;
    box-shadow:0 30px 80px rgba(20,30,70,.16);
    overflow:hidden;
    border:1px solid var(--line);
  }
}

.screen{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:16px 22px 26px;
  animation:fadeUp .42s cubic-bezier(.2,.7,.3,1) both;
}
/* screens that own a sticky CTA bar let the bar provide the bottom space,
   so there's no dead scroll-room below it (which used to push content
   past the viewport). Question screens keep the small 26px above. */
.screen:has(.ctabar){padding-bottom:0}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* prevent flexbox horizontal overflow on narrow screens */
.screen,.qhead,.qhead__nav,.qprogress,.opts,.opt,.mopt,.opt__label,.mopt__label,.info,.stmt,.stmt__actions,.stmt__btn{min-width:0}
.opt__label,.mopt__label,.qtitle,.qtitle--sm,.info__title,.stmt__title{overflow-wrap:break-word}

/* logo — "everflow" wordmark (navy on light · white on dark) -*/
.logo{
  display:inline-flex;align-items:baseline;direction:ltr;
  font-family:var(--font-logo);font-weight:500;
  font-size:24px;letter-spacing:-.4px;line-height:1;color:var(--navy);
  text-transform:lowercase;user-select:none;
}
.logo--lg{font-size:36px;letter-spacing:-.7px}
.logo--on-dark{color:#fff}

/* header (question screens) ---------------------------------*/
.qhead{padding-top:6px}
.qhead__section{
  text-align:center;color:var(--muted);
  font-weight:500;font-size:14px;letter-spacing:.06em;margin-bottom:11px;
}
.qhead__nav{display:flex;align-items:center;gap:13px}
.qback{
  flex:0 0 auto;width:30px;height:30px;border:none;background:none;
  cursor:pointer;display:grid;place-items:center;color:var(--ink);border-radius:50%;
  transition:background .15s;
}
.qback:hover{background:rgba(20,30,70,.06)}
.qback svg{width:21px;height:21px}
.qprogress{flex:1;display:flex;gap:6px;direction:rtl}
.seg{position:relative;flex:1;height:7px;border-radius:var(--r-pill);background:var(--track);overflow:hidden}
.seg>i{position:absolute;inset-block:0;inset-inline-start:0;width:calc(var(--p,0) * 100%);background:var(--ink);border-radius:var(--r-pill);transition:width .5s cubic-bezier(.2,.7,.3,1)}
.seg.done>i{width:100%}

/* question title --------------------------------------------*/
.qtitle{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(24px,6.2vw,31px);line-height:1.2;color:var(--ink);
  text-align:center;margin:18px 6px 22px;letter-spacing:-.2px;
  text-wrap:balance;
}
.qtitle--sm{font-size:clamp(21px,5.4vw,26px)}

/* option cards ----------------------------------------------*/
.opts{display:flex;flex-direction:column;gap:11px}
.opt{
  display:flex;align-items:center;gap:14px;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:17px 20px;text-align:start;cursor:pointer;
  box-shadow:var(--shadow-card);transition:transform .15s,border-color .15s,box-shadow .15s;
  animation:fadeUp .4s ease both;
}
.opt:hover{transform:translateY(-1px);border-color:var(--line-2);box-shadow:var(--shadow-pop)}
.opt:active{transform:scale(.99)}
.opt.sel{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink) inset, var(--shadow-card)}
.opt__icon{flex:0 0 auto;width:34px;height:34px;color:var(--ink);display:grid;place-items:center}
.opt__icon svg{width:30px;height:30px}
.opt__label{flex:1;font-weight:600;font-size:18px;color:var(--ink)}
.opt__label em{font-style:normal;color:var(--muted);font-weight:500;font-size:15px}
.opt__chev{flex:0 0 auto;color:var(--ink);display:grid;place-items:center}
.opt__chev svg{width:17px;height:17px}

/* rating scale ----------------------------------------------*/
.ratesub{text-align:center;color:var(--ink-2);font-weight:500;font-size:16px;margin:0 0 22px}
.rate{display:flex;direction:rtl;background:var(--track);border-radius:var(--r-pill);padding:6px;gap:4px}
.ratenum{
  flex:1;height:74px;border:none;background:transparent;border-radius:var(--r-pill);
  font-family:var(--font-body);font-weight:600;font-size:24px;color:#5B6488;cursor:pointer;
  transition:background .15s,box-shadow .15s,color .15s;
}
.ratenum:hover{background:rgba(255,255,255,.55)}
.ratenum.sel{background:var(--ink);color:#fff;box-shadow:var(--shadow-card)}
.ratelabels{display:flex;direction:rtl;justify-content:space-between;margin-top:15px;font-weight:600;font-size:15px;color:var(--ink-2)}
.ratelabels span{max-width:45%}
.ratelabels span:first-child{text-align:right}
.ratelabels span:last-child{text-align:left}

/* statement (yes/no) ----------------------------------------*/
.stmt{text-align:center}
.stmt__sub{color:var(--muted);font-weight:500;font-size:15px;margin:6px 0 16px}
.stmt__img{
  width:180px;height:180px;border-radius:50%;margin:0 auto 22px;overflow:hidden;
  background:var(--bg-2);
  display:grid;place-items:center;box-shadow:var(--shadow-pop);
  border:5px solid #fff;
}
.stmt__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.stmt__img svg{width:70px;height:70px;color:var(--ink-2)}
.stmt__title{
  font-family:var(--font-display);font-weight:700;font-size:clamp(22px,5.7vw,28px);
  line-height:1.26;color:var(--ink);margin:0 auto 24px;max-width:19ch;letter-spacing:-.2px;
}
.stmt__actions{display:flex;gap:13px}
.stmt__btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:21px 16px;cursor:pointer;box-shadow:var(--shadow-card);
  font-weight:700;font-size:19px;color:var(--ink);transition:transform .15s,border-color .15s,box-shadow .15s;
}
.stmt__btn:hover{transform:translateY(-1px);border-color:var(--line-2);box-shadow:var(--shadow-pop)}
.stmt__btn:active{transform:scale(.99)}

/* multi-select ----------------------------------------------*/
.mopt{
  display:flex;align-items:center;gap:14px;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 20px;cursor:pointer;box-shadow:var(--shadow-card);
  transition:border-color .15s,box-shadow .15s;animation:fadeUp .4s ease both;
}
.mopt:hover{border-color:var(--line-2)}
.mopt.sel{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink) inset, var(--shadow-card)}
.mopt__label{flex:1;font-weight:600;font-size:17px}
.mopt__box{
  flex:0 0 auto;width:26px;height:26px;border-radius:8px;border:2px solid var(--line-2);
  display:grid;place-items:center;color:#fff;transition:background .15s,border-color .15s;
}
.mopt.sel .mopt__box{background:var(--ink);border-color:var(--ink)}
.mopt__box svg{width:15px;height:15px;opacity:0;transition:opacity .15s}
.mopt.sel .mopt__box svg{opacity:1}

/* info / education screens ----------------------------------*/
.info{text-align:center;display:flex;flex-direction:column}
.info__top{display:flex;align-items:center;justify-content:center;position:relative;min-height:34px;margin-bottom:14px}
.info__top .qback{position:absolute;inset-inline-start:0;top:0}
.info__title{
  font-family:var(--font-display);font-weight:700;font-size:clamp(24px,6.2vw,30px);
  line-height:1.26;color:var(--ink);margin:6px auto 16px;max-width:20ch;letter-spacing:-.2px;text-wrap:balance;
}
.info__body{color:var(--ink-2);font-size:17px;line-height:1.65;max-width:38ch;margin:0 auto 22px}
/* emphasis used to be navy-on-navy and basically vanished — now a vivid
   brand blue so it clearly stands out from the body copy. */
.info__body strong,.info__body b{color:var(--em);font-weight:600}
.info__art{margin:8px auto 0;width:100%;max-width:330px}
.info__art--wide{max-width:430px}
.info__art img{border-radius:var(--r-lg);filter:grayscale(1) contrast(1.04)}
.info__art .art-photo{width:100%}
.info__art .art-svg,.info__art .art-svg svg,.info__art>svg{display:block;width:100%;height:auto}
/* real-photo block (education / reinforcement screens) — navy fallback,
   never line-art, until the Higgsfield photo is dropped in. */
.info__art .art-block{
  display:block;width:100%;aspect-ratio:4/3;border-radius:var(--r-lg);
  overflow:hidden;background:linear-gradient(140deg,#26397F,#16224C 70%);
  box-shadow:var(--shadow-card);
}
.info__art .art-block img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);border-radius:0}
.info__note{margin-top:18px;font-size:13px;color:var(--muted);max-width:40ch;margin-inline:auto;line-height:1.5}

/* checklists (results / plan) -------------------------------*/
.card-list{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:10px 22px;box-shadow:var(--shadow-card);text-align:start;
}
.card-list li{display:flex;align-items:center;gap:14px;padding:15px 0;font-weight:600;font-size:17px;list-style:none}
.card-list li+li{border-top:1px solid var(--line)}
.tick{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--ok);display:grid;place-items:center;color:#fff}
.tick svg{width:15px;height:15px}

/* plan-ready comparison: ❌ before  →  ✅ with EverFlow -------------*/
.cmp__lead{color:var(--ink-2);font-size:15.5px;line-height:1.5;max-width:32ch;margin:-4px auto 18px}
.cmp__lead bdi{font-weight:700;color:var(--em)}
.cmp{display:flex;flex-direction:column;gap:11px;width:100%;max-width:440px;margin:0 auto;list-style:none}
.cmp__row{
  display:grid;grid-template-columns:1fr auto 1.05fr;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:13px 13px;box-shadow:var(--shadow-card);text-align:start;
}
.cmp__bad,.cmp__good{display:flex;align-items:center;gap:8px;min-width:0}
.cmp__txt{min-width:0;overflow-wrap:break-word;line-height:1.25}
.cmp__bad .cmp__txt{font-size:13px;font-weight:500;color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(122,131,162,.55)}
.cmp__good .cmp__txt{font-size:14.5px;font-weight:700;color:var(--ink)}
.cmp__ic{flex:0 0 auto;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;color:#fff}
.cmp__bad .cmp__ic{background:var(--bad);opacity:.85}
.cmp__good .cmp__ic{background:var(--ok)}
.cmp__ic svg{width:11px;height:11px}
.cmp__arrow{flex:0 0 auto;color:var(--accent);display:grid;place-items:center}
.cmp__arrow svg{width:19px;height:19px}

/* feature rows ----------------------------------------------*/
.frow{display:flex;gap:15px;text-align:start;padding:15px 0;align-items:flex-start}
.frow+.frow{border-top:1px solid var(--line)}
.frow__ic{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;color:var(--navy)}
.frow__ic svg{width:23px;height:23px}
.frow__t{font-family:var(--font-display);font-weight:700;font-size:17px;margin-bottom:2px}
.frow__d{color:var(--ink-2);font-size:15px;line-height:1.55}

/* loading / analyzing ---------------------------------------*/
.load__title{font-family:var(--font-display);font-weight:700;font-size:clamp(23px,6vw,29px);line-height:1.26;text-align:center;margin:22px auto 30px;max-width:18ch;letter-spacing:-.2px}
.loadrow{margin:22px 4px}
.loadrow__top{display:flex;justify-content:space-between;font-weight:600;font-size:15px;margin-bottom:9px}
.loadrow__top b{font-weight:700;font-variant-numeric:tabular-nums;direction:ltr}
.loadbar{height:8px;border-radius:var(--r-pill);background:var(--track);overflow:hidden}
.loadbar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--cta));border-radius:var(--r-pill);transition:width 2.9s cubic-bezier(.35,.6,.35,1)}
.trustline{text-align:center;color:var(--muted);font-weight:600;margin:28px 0 16px;font-size:14px}

/* loading reviews carousel */
.lrev{position:relative;margin-top:6px}
.lrev__card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-card);padding:18px;text-align:start;min-height:172px;
  animation:pop .35s ease both;
}
.lrev__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.lrev__who{display:flex;align-items:center;gap:10px}
.lrev__av{width:38px;height:38px;border-radius:50%;background:var(--bg-2);color:var(--ink-2);display:grid;place-items:center;font-weight:700;font-size:15px}
.lrev__name{font-weight:700;font-size:14px}
.lrev__date{color:var(--muted);font-size:12px}
.lrev__stars{display:flex;gap:2px;margin:6px 0 8px}
.lrev__stars i{width:19px;height:19px;background:var(--ok);display:grid;place-items:center;color:#fff;font-style:normal;font-size:12px}
.lrev__t{font-weight:700;font-size:14.5px;margin-bottom:4px}
.lrev__txt{color:var(--ink-2);font-size:14px;line-height:1.55}
.lrev__dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
.lrev__dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:background .2s}
.lrev__dots i.on{background:var(--ink)}

/* entry / age gate ------------------------------------------*/
.entry{text-align:center;padding-top:10px}
.entry__logo{margin:6px auto 26px}
.entry__title{font-family:var(--font-display);font-weight:800;font-size:clamp(27px,7.6vw,36px);line-height:1.18;letter-spacing:-.4px;color:var(--ink)}
.entry__title b{font-weight:800}
.entry__sub{color:var(--muted);font-weight:600;letter-spacing:.16em;font-size:12.5px;margin:16px 0 6px;text-transform:uppercase}
.entry__lead{color:var(--ink-2);font-size:16px;margin-bottom:22px}
.ages{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.age{
  position:relative;border:none;cursor:pointer;border-radius:var(--r);overflow:hidden;
  aspect-ratio:3/3.4;background:#101A3D;
  display:flex;align-items:flex-end;box-shadow:var(--shadow-card);transition:transform .15s,box-shadow .15s;
}
.age:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop)}
.age__photo{position:absolute;inset:0}
.age__photo img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(1) contrast(1.05)}
.age__ph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.16)}
.age__ph svg{width:60%;height:60%}
.age__label{
  position:relative;z-index:2;width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:34px 15px 14px;background:linear-gradient(0deg,rgba(0,0,0,.82) 38%,transparent);
  color:#fff;font-family:var(--font-body);font-weight:600;font-size:18px;
}
.age__label svg{width:17px;height:17px;opacity:.85}

/* research-proof carousel (shown right after the age gate) -----*/
.proofscreen .info__title{margin-bottom:8px}
.proof__lead{margin-bottom:16px;max-width:34ch}
.proof{width:100%;max-width:440px;margin:4px auto 0}
.proof__track{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:6px 2px 8px;margin-inline:-2px;
}
.proof__track::-webkit-scrollbar{display:none}
.pcard{
  flex:0 0 86%;scroll-snap-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);overflow:hidden;text-align:start;
  display:flex;flex-direction:column;
}
.pcard__media{
  position:relative;aspect-ratio:16/10;
  background:linear-gradient(140deg,#26397F,#16224C 70%);
}
.pcard__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 28%;filter:grayscale(1) contrast(1.05);
}
.pcard__stat{
  position:absolute;inset-block-end:12px;inset-inline-start:12px;
  background:rgba(255,255,255,.94);color:var(--navy);
  font-family:var(--font-display);font-weight:800;font-size:25px;line-height:1;
  padding:8px 13px;border-radius:12px;box-shadow:var(--shadow-pop);letter-spacing:-.4px;
}
.pcard__stat--ic{padding:8px 10px}
.pcard__stat svg{width:26px;height:26px;display:block;stroke-width:3}
.pcard__body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:7px}
.pcard__title{font-family:var(--font-display);font-weight:700;font-size:17.5px;line-height:1.3;color:var(--ink)}
.pcard__txt{color:var(--ink-2);font-size:14px;line-height:1.6;font-weight:400}
.pcard__src{color:var(--muted);font-size:11.5px;font-weight:500;margin-top:3px}
.proof__dots{display:flex;justify-content:center;gap:8px;margin-top:13px}
.proof__dot{
  width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:var(--line-2);transition:background .2s,transform .2s;
}
.proof__dot.on{background:var(--ink);transform:scale(1.3)}

/* CTA --------------------------------------------------------*/
.ctabar{
  position:sticky;bottom:0;margin-top:auto;padding:16px 22px calc(16px + env(safe-area-inset-bottom));
  margin-inline:-22px;
  background:linear-gradient(180deg,rgba(244,246,251,0),var(--bg) 32%);
}
.cta{
  width:100%;background:var(--cta);color:#fff;border:none;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:18px;letter-spacing:.02em;
  padding:20px;border-radius:var(--r-pill);box-shadow:0 10px 24px rgba(20,30,70,.25);
  transition:transform .15s,opacity .15s;
}
.cta:hover{transform:translateY(-1px)}
.cta:active{transform:scale(.99)}
.cta:disabled{opacity:.32;cursor:not-allowed;transform:none}

.legal{margin-top:14px;text-align:center;color:var(--muted);font-size:12px;line-height:1.5;max-width:42ch;margin-inline:auto}

/* helpers ----------------------------------------------------*/
.center{text-align:center}
.spacer{flex:1}
.fade-slow{animation:fadeUp .6s ease both}
.muted{color:var(--muted)}

/* ===========================================================
   CHECKOUT PAGE — The Coach layout · EverFlow brand
   =========================================================== */
.app--wide{max-width:660px}
@media (min-width:700px){.app--wide{min-height:auto}}
.co{display:block;padding:0 22px 50px}
.co-top{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:center;
  padding:14px 22px;margin:0 -22px 8px;background:rgba(244,246,251,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.co-top .secure{position:absolute;inset-inline-end:38px;font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:5px;white-space:nowrap}
.co-top .secure svg{width:14px;height:14px}

/* hero banner — black plate, outline word */
.hero-banner{
  margin:18px auto 22px;max-width:560px;
  background:linear-gradient(115deg,#26397F,#16224C 55%);
  border-radius:14px;padding:18px 20px;text-align:center;
  box-shadow:0 14px 34px rgba(20,30,70,.30);
}
.hero-banner h1{
  font-family:var(--font-display);font-weight:800;color:#fff;
  font-size:clamp(21px,5.6vw,30px);line-height:1.25;letter-spacing:.01em;text-wrap:balance;
}
.hero-banner .outline{
  color:#9FC2F2;
}

/* before / after (now vs goal) */
.ba{max-width:480px;margin:0 auto}
.ba__tabs{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.ba__tab{flex:1;max-width:170px;text-align:center;padding:11px 14px;border-radius:12px;font-weight:600;font-size:14.5px;border:1px solid var(--line);background:var(--surface-warm);color:var(--muted)}
.ba__tab--on{background:var(--cta);color:#fff;border-color:var(--cta)}
.ba__img{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-card);display:grid;grid-template-columns:1fr 1fr;background:var(--bg-2)}
.ba__img img{width:100%;height:228px;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.ba__img .half--now img{opacity:.92}
.ba__chev{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:rgba(20,30,70,.82);color:#fff;
  display:grid;place-items:center;
}
.ba__chev svg{width:22px;height:22px}
.ba__cols{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:16px}
.ba__row{padding:9px 0;border-bottom:1px solid var(--line)}
.ba__row:nth-last-child(-n+2){border-bottom:none}
.ba__label{font-weight:700;font-size:13.5px;color:var(--ink)}
.ba__val{color:var(--ink-2);font-size:13.5px;margin-top:1px}
.ba__val--goal{font-weight:600;color:var(--ink)}
.bars{display:flex;gap:3px;margin-top:7px}
.bars i{height:7px;flex:1;border-radius:3px;background:var(--ink);opacity:.14}
.bars i.on{opacity:1}

/* chevrons divider */
.chevs{display:flex;flex-direction:column;align-items:center;gap:0;margin:18px 0 6px;color:var(--line-2)}
.chevs svg{width:74px;height:20px;display:block;margin-top:-9px}

/* section headings */
.co h1.co-head, .offer-head{
  font-family:var(--font-display);font-weight:800;font-size:clamp(23px,5.8vw,29px);line-height:1.3;
  text-align:center;letter-spacing:-.2px;margin:30px auto 16px;text-wrap:balance;max-width:24ch;
}
.section-title{
  font-family:var(--font-display);font-weight:800;font-size:clamp(20px,5vw,25px);
  text-align:center;margin:44px 0 20px;letter-spacing:.02em;text-wrap:balance;
}

/* special-offer card + timer */
.sp-offer{
  max-width:420px;margin:0 auto 22px;background:var(--surface-warm);
  border:1.5px solid var(--ink);border-radius:14px;padding:13px 16px 15px;text-align:center;
  box-shadow:var(--shadow-card);
}
.sp-offer__t{font-weight:700;font-size:14px;letter-spacing:.02em;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.sp-offer__row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.coupon-chip{
  display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line-2);
  border-radius:10px;padding:8px 14px;font-weight:700;font-size:14px;direction:ltr;
}
.coupon-chip svg{width:15px;height:15px;color:var(--ok)}
.timer{display:inline-flex;gap:5px;align-items:center;font-variant-numeric:tabular-nums;direction:ltr;background:var(--bad-soft);border:1px solid #ECD5C9;border-radius:10px;padding:4px 7px}
.timer b{display:flex;flex-direction:column;align-items:center;background:var(--cta);color:#fff;border-radius:7px;padding:4px 7px 3px;font-weight:700;min-width:38px;font-size:15px;line-height:1.1}
.timer b small{font-size:8.5px;font-weight:500;opacity:.75;letter-spacing:.04em}
.timer .colon{font-weight:800;color:var(--ink)}

/* plans — The Coach rows */
.plans{display:flex;flex-direction:column;gap:12px;max-width:560px;margin:0 auto}
.plan{
  position:relative;display:flex;align-items:center;gap:14px;width:100%;text-align:start;
  background:var(--bg-2);border:1.5px solid transparent;border-radius:12px;
  padding:18px 18px;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s;
}
.plan:hover{border-color:var(--line-2)}
.plan__main{flex:1}
.plan__name{display:block;font-weight:700;font-size:17px;color:var(--ink)}
.plan__sub{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.plan__price{text-align:end;flex:0 0 auto;display:flex;align-items:center;gap:8px}
.plan__was{font-size:13.5px;color:var(--muted);text-decoration:line-through}
.plan__now{font-size:16px;color:var(--ink);font-weight:700}
.plan .save{
  flex:0 0 auto;background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;
  border-radius:999px;padding:4px 11px;letter-spacing:.02em;
}
.plan.sel{background:#fff;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.plan--pop{padding-top:32px}
.plan .pop{
  display:none;position:absolute;top:0;inset-inline:0;height:21px;border-radius:10px 10px 0 0;
  background:var(--cta);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-align:center;line-height:21px;
}
.plan--pop .pop{display:block}

.gline{
  text-align:center;font-weight:700;letter-spacing:.1em;font-size:13px;color:var(--ink);
  margin:22px 0 16px;text-transform:uppercase;
}
.buy{
  display:block;width:100%;max-width:560px;margin:24px auto 0;background:var(--cta);color:#fff;border:none;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:17px;letter-spacing:.08em;padding:19px;border-radius:10px;
  box-shadow:0 10px 24px rgba(20,30,70,.22);transition:transform .15s;
}
.buy:hover{transform:translateY(-1px)}
.buy:active{transform:scale(.99)}
.finep{font-size:10.5px;color:var(--muted);line-height:1.6;margin:13px auto 0;text-align:center;max-width:60ch}

/* why unique — serif titles + thin icons */
.why{max-width:560px;margin:0 auto}
.why__item{display:flex;gap:15px;align-items:flex-start;padding:13px 0}
.why__ic{flex:0 0 auto;width:34px;height:34px;color:var(--ink);display:grid;place-items:center}
.why__ic svg{width:28px;height:28px;stroke-width:1.4}
.why__t{font-family:var(--font-display);font-weight:700;font-size:16.5px;margin-bottom:3px}
.why__d{color:var(--ink-2);font-size:14px;line-height:1.6}

/* video review card */
.vidrev{
  max-width:420px;margin:0 auto;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-card);overflow:hidden;
}
.vidrev__head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700;font-size:14px;direction:ltr;justify-content:flex-start}
.vidrev__head svg{width:17px;height:17px;color:var(--accent)}
.vidrev__media{position:relative}
.vidrev__media img{width:100%;height:330px;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.vidrev__play{
  position:absolute;bottom:14px;inset-inline-start:14px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--ink);box-shadow:var(--shadow-pop);
}
.vidrev__play svg{width:18px;height:18px;margin-inline-start:2px}
.vidrev__body{padding:14px 16px 18px;text-align:start}
.vidrev__handle{font-weight:700;font-size:13.5px;margin-bottom:6px;direction:ltr;text-align:end}
.vidrev__txt{color:var(--ink-2);font-size:14.5px;line-height:1.65}

/* stats */
.stats{max-width:430px;margin:0 auto;text-align:center}
.stat{margin:26px 0}
.stat__num{font-family:var(--font-display);font-weight:800;font-size:30px;color:var(--ok)}
.stat__txt{color:var(--ink-2);font-size:14.5px;line-height:1.55;max-width:34ch;margin:4px auto 0}
.stat__txt b{color:var(--em);font-weight:600}

/* without / with cards */
.wcards{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.wcard{border-radius:16px;padding:22px 22px}
.wcard--bad{background:var(--bg-2)}
.wcard--good{background:#fff;border:1.5px solid var(--ok)}
.wcard__h{font-family:var(--font-display);font-weight:800;font-size:17px;text-align:center;margin-bottom:14px;letter-spacing:.04em;line-height:1.45}
.wcard__h .hl-bad{color:var(--bad)}
.wcard__h .hl-good{color:var(--ok)}
.wcard ul{list-style:none}
.wcard li{display:flex;gap:11px;padding:7px 0;font-size:14.5px;line-height:1.5;color:var(--ink-2);align-items:flex-start}
.wcard li .dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:7px;background:var(--line-2)}
.wcard--good li .dot{background:var(--ok)}
.wcard--good li{color:var(--ink)}

/* faq — People often ask */
.faq{max-width:520px;margin:0 auto}
.faq__item{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;box-shadow:var(--shadow-card)}
.faq__q{width:100%;background:none;border:none;text-align:start;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px 18px;font-weight:600;font-size:15px;cursor:pointer;font-family:inherit;color:var(--ink)}
.faq__q .pm{flex:0 0 auto;color:var(--muted);font-size:22px;line-height:1;transition:transform .2s;font-weight:400}
.faq__item.open .faq__q .pm{transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq__a p{padding:0 18px 17px;color:var(--ink-2);font-size:14px;line-height:1.65}

/* success stories */
.stories{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.story{background:var(--bg-2);border-radius:14px;padding:18px 20px;text-align:start}
.story__txt{color:var(--ink);font-size:14.5px;line-height:1.7}
.story__meta{display:flex;align-items:center;gap:8px;margin-top:12px}
.story__stars{color:var(--star);font-size:14px;letter-spacing:2px}
.story__name{color:var(--muted);font-size:13px;font-weight:600}

/* 100% money back */
.mbg{
  max-width:560px;margin:0 auto;background:var(--bg-2);border-radius:16px;padding:24px 22px;
  display:flex;gap:16px;align-items:flex-start;
}
.mbg__ic{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:var(--accent-soft);border:1.5px solid var(--accent);display:grid;place-items:center;color:var(--navy)}
.mbg__ic svg{width:27px;height:27px}
.mbg__t{font-family:var(--font-display);font-weight:800;font-size:16.5px;letter-spacing:.05em;margin-bottom:6px}
.mbg__d{color:var(--ink-2);font-size:14px;line-height:1.65}

.co-footer{text-align:center;color:var(--muted);font-size:12px;line-height:1.7;margin-top:40px;padding-top:22px;border-top:1px solid var(--line)}
.co-footer a{color:var(--ink-2)}

/* ===== forms (registration) ===== */
.form{margin-top:10px;text-align:start}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:7px;color:var(--ink)}
.field input{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:15px 16px;font-family:var(--font-body);font-size:16px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,30,70,.1)}
.field input::placeholder{color:#A6AEC6}
.form .cta{margin-top:6px}
.form-msg{font-size:14px;margin:2px 0 10px;font-weight:600;min-height:1px}
.form-msg--err{color:var(--bad)}

/* ===========================================================
   MOTION SYSTEM — cinematic reveals for images & graphs
   Focus-pull entrances · SVG draw-in · Ken-Burns on photos ·
   count-ups · bar fills · gentle ambient float.
   Only where a visual already exists. Honors reduced-motion.
   =========================================================== */

/* Reveal: hidden state applies ONLY when JS is live (no FOUC, graceful
   fallback if JS fails — content stays visible). */
.reveal{
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),
             transform .8s cubic-bezier(.2,.7,.2,1),
             filter .8s cubic-bezier(.2,.7,.2,1);
}
html.has-js .reveal{
  opacity:0;
  transform:translateY(18px) scale(.985);
  filter:blur(7px);
  will-change:opacity,transform,filter;
}
.reveal.in{opacity:1;transform:none;filter:blur(0)}

/* stagger helpers */
.reveal.d1{transition-delay:.07s}
.reveal.d2{transition-delay:.14s}
.reveal.d3{transition-delay:.21s}
.reveal.d4{transition-delay:.28s}
.reveal.d5{transition-delay:.35s}

/* cinematic variant — stronger focus-pull for hero imagery / illustrations */
html.has-js .rv-cine{transform:translateY(24px) scale(1.05);filter:blur(11px)}
.rv-cine{transition-duration:1.05s}

/* ambient float for line-art illustrations (separate node from .reveal,
   delayed so it begins after the entrance settles) */
.floaty{animation:floaty 7s ease-in-out .9s infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Ken-Burns: a slow settle from a hair zoomed-in to the exact original
   frame — adds life without changing how the photo finally looks. */
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}

/* endurance bars on checkout = a graph → fill in on reveal */
.ba .bars i{transition:opacity .55s ease,transform .55s ease}
html.has-js .ba.reveal:not(.in) .bars i.on{opacity:.14}
.ba.in .bars i.on{opacity:1}
.ba.in .bars i.on:nth-child(2){transition-delay:.12s}
.ba.in .bars i.on:nth-child(3){transition-delay:.24s}
.ba.in .bars i.on:nth-child(4){transition-delay:.36s}
.ba.in .ba__img img{animation:kenburns 6s cubic-bezier(.2,.6,.2,1) both}
.vidrev.in .vidrev__media img{animation:kenburns 7s cubic-bezier(.2,.6,.2,1) both}

/* numbers animate cleanly without layout shift */
.stat__num{font-variant-numeric:tabular-nums}

/* checkout chevrons — gentle downward pulse */
.chevs svg{animation:chevpulse 2.6s ease-in-out infinite}
.chevs svg:nth-child(2){animation-delay:.18s}
.chevs svg:nth-child(3){animation-delay:.36s}
@keyframes chevpulse{0%,100%{opacity:.45;transform:translateY(0)}50%{opacity:1;transform:translateY(3px)}}

/* statement photo: a soft breathing ring once revealed */
.stmt__img.in{animation:ringpop .7s cubic-bezier(.2,.7,.3,1) both}
@keyframes ringpop{0%{box-shadow:0 0 0 0 rgba(20,30,70,.12),var(--shadow-pop)}60%{box-shadow:0 0 0 12px rgba(20,30,70,0),var(--shadow-pop)}100%{box-shadow:var(--shadow-pop)}}

/* registration success — draw the checkmark when the panel is shown */
#reg-done:not([hidden]){animation:fadeUp .55s cubic-bezier(.2,.7,.3,1) both}
#reg-done:not([hidden]) .info__art path[pathLength]{stroke-dasharray:1;stroke-dashoffset:1;animation:drawcheck .85s cubic-bezier(.4,.6,.25,1) .18s forwards}
@keyframes drawcheck{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion: reduce){
  html.has-js .reveal{opacity:1;transform:none;filter:none}
  .floaty,.chevs svg,.ba.in .ba__img img,.vidrev.in .vidrev__media img,.stmt__img.in,.screen,#reg-done:not([hidden]){animation:none}
  #reg-done:not([hidden]) .info__art path[pathLength]{animation:none;stroke-dashoffset:0}
  .ba .bars i.on{opacity:1 !important}
}