:root{
  --orange:#FF5A2E; --orange-dark:#E8431B; --teal:#12B5A6; --teal-dark:#0E7E73; --green:#22B07D;
  --mint:#E8F8F4; --ink:#18142B; --ink-2:#3F4456; --muted:#6E7280; --line:#E4E2EC;
  --focus:#2563EB;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden;font-size:16px;}
button{font-family:inherit;cursor:pointer;}
a{color:inherit;}

/* focus visible for keyboard users */
.btn:focus-visible,.opt:focus-visible,.yn-opt:focus-visible,.plan:focus-visible,.q-back:focus-visible,
.ts-btn:focus-visible,.restart-btn:focus-visible,.slider-alt button:focus-visible,.text-skip:focus-visible,
input:focus-visible,.card-arrow:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:12px;}

/* empty calm background + centered phone-like card */
.survey-bg{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(180deg,#FBF8F5,#F3F7F5);}
.survey-card{width:100%;max-width:430px;height:min(800px,calc(100dvh - 48px));background:#fff;
  border-radius:28px;box-shadow:0 8px 36px rgba(24,20,43,.10);overflow:hidden;display:flex;flex-direction:column;}

/* persistent card tools (text size + help) — outside the per-screen stage */
.card-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 0;flex:none;}
.restart-btn{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--muted);
  background:none;border:none;padding:8px 6px;min-height:40px;}
.restart-btn:hover{color:var(--ink-2);}
.restart-btn svg{width:16px;height:16px;}
.ts-btn{min-width:48px;min-height:40px;padding:6px 12px;border:1.5px solid var(--line);background:#fff;
  border-radius:999px;font-weight:800;font-size:15px;color:var(--ink);line-height:1;}
.ts-btn:hover{border-color:var(--ink-2);}

.survey-stage{flex:1;min-height:0;display:flex;flex-direction:column;}
.screen{flex:1;min-height:0;display:flex;flex-direction:column;animation:surveyIn .2s ease;}
@keyframes surveyIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* shared building blocks */
.btn{width:100%;border:1.5px solid var(--orange);background:var(--orange);color:#fff;font-weight:700;font-size:17px;
  min-height:56px;border-radius:14px;box-shadow:none;transition:background .15s ease,border-color .15s ease;}
.btn:hover{background:var(--orange-dark);border-color:var(--orange-dark);}
.btn:active{background:var(--orange-dark);}
.btn:disabled{opacity:.5;cursor:default;}
.sub{color:var(--ink-2);font-size:16px;line-height:1.5;}
.dot{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--mint);
  color:var(--teal-dark);font-size:13px;font-weight:800;flex:none;}
.disclaimer{color:var(--muted);font-size:12.5px;line-height:1.55;margin-top:14px;}

.boot{flex:1;display:grid;place-items:center;}
.spinner{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--orange);border-radius:50%;animation:spin .9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* top bar (back + progress) */
.q-top{display:flex;align-items:center;gap:12px;padding:14px 20px 4px;}
.q-back{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink-2);
  display:grid;place-items:center;flex:none;}
.q-back:hover{border-color:var(--ink-2);}
.q-back svg{width:20px;height:20px;}
.q-back-spacer{width:44px;flex:none;}
.q-prog{flex:1;height:6px;border-radius:999px;background:#EDECF1;overflow:hidden;}
.q-prog span{display:block;height:100%;background:var(--orange);border-radius:999px;transition:width .25s ease;}

/* scroll area + sticky bottom footer (thumb zone, safe-area aware) */
.q-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 22px 14px;}
.q-foot{padding:14px 22px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;flex:none;
  border-top:1px solid transparent;}

/* intro */
.intro{flex:1;display:flex;flex-direction:column;padding:22px 22px calc(22px + env(safe-area-inset-bottom));}
.intro .brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:-.3px;margin-bottom:22px;}
.brand-logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--orange);color:#fff;font-weight:800;font-size:17px;}
img.brand-logo{background:none;object-fit:cover;}
.eyebrow{display:inline-block;align-self:flex-start;font-size:12.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--teal-dark);background:var(--mint);padding:6px 12px;border-radius:999px;margin-bottom:16px;}
.intro h1{font-size:30px;line-height:1.14;letter-spacing:-.6px;font-weight:800;}
.intro .sub{margin-top:14px;font-size:17px;}
.cred{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:13px;}
.cred li{display:flex;align-items:center;gap:11px;font-size:16px;font-weight:600;color:var(--ink);}
.grow{flex:1;min-height:18px;}

/* question */
.q{flex:1;display:flex;flex-direction:column;min-height:0;}
.q-head h2{font-size:24px;line-height:1.2;letter-spacing:-.4px;font-weight:800;margin:6px 0 0;}
.q-head .sub{margin-top:8px;font-size:16px;}
.why{margin-top:14px;font-size:13.5px;color:var(--ink-2);line-height:1.45;background:rgba(18,181,166,.08);border-radius:10px;padding:10px 12px;}
.why span{font-weight:700;color:var(--teal-dark);}
.opts{display:flex;flex-direction:column;gap:12px;margin-top:20px;}
.opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);
  border-radius:14px;padding:16px;font-size:17px;font-weight:600;color:var(--ink);min-height:60px;
  transition:border-color .15s ease,background .15s ease;}
.opt:hover{border-color:#CFCBDA;}
.opt:active{background:#FBF3EF;}
.opt.selected{border-color:var(--orange);background:#FFF3EE;}
.opt-emoji{font-size:22px;flex:none;}
.opt .tick{margin-left:auto;color:var(--orange);font-weight:800;opacity:0;}
.opt.check.selected .tick{opacity:1;}

/* yes / no — large buttons in the sticky bottom area */
.yn-head{text-align:center;}
.yn-foot{display:grid;grid-template-columns:1fr;gap:12px;}
.yn-opt{width:100%;min-height:60px;border:1.5px solid var(--line);background:#fff;border-radius:14px;
  font-size:18px;font-weight:700;color:var(--ink);transition:border-color .15s ease,background .15s ease;}
.yn-opt:hover{border-color:#CFCBDA;}
.yn-opt:active{background:#FBF3EF;}
.yn-opt.selected{border-color:var(--orange);background:#FFF3EE;color:var(--orange-dark);}

/* input */
.field{margin-top:22px;}
.field input{width:100%;font-family:inherit;font-size:17px;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:14px;padding:16px;min-height:56px;transition:border-color .15s;}
.field input:focus{outline:none;border-color:var(--orange);}
.field .err{color:#B5331B;font-size:14px;font-weight:700;margin-top:8px;}

/* slider + alternative buttons (not drag-only) */
.slider-wrap{margin-top:26px;text-align:center;}
.slider-val{font-size:38px;font-weight:800;letter-spacing:-1px;color:var(--orange);margin-bottom:14px;}
.slider-wrap input[type=range]{width:100%;accent-color:var(--orange);height:34px;}
.slider-labels{display:flex;justify-content:space-between;margin-top:6px;color:var(--muted);font-size:13px;font-weight:600;}
.slider-alt{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:18px;}
.slider-alt button{min-height:52px;border:1.5px solid var(--line);background:#fff;border-radius:12px;font-weight:700;font-size:15px;color:var(--ink);}
.slider-alt button.selected{border-color:var(--orange);background:#FFF3EE;color:var(--orange-dark);}

/* info */
.info-screen .info-body{display:flex;flex-direction:column;justify-content:center;min-height:100%;text-align:center;padding:10px 4px;}
.info-body h2{font-size:26px;letter-spacing:-.4px;font-weight:800;}
.info-text{margin-top:14px;font-size:17px;line-height:1.55;color:var(--ink-2);}

/* impact_score */
.impact .q-scroll{padding-top:14px;}
.impact-top{font-size:13px;font-weight:600;color:var(--muted);}
.impact-head{font-size:28px;letter-spacing:-.5px;font-weight:800;margin:4px 0 20px;}
.impact-bar{height:44px;border-radius:13px;background:#EFECF3;overflow:hidden;display:flex;}
.impact-fill{height:100%;border-radius:13px;background:linear-gradient(90deg,#FF8A5B,var(--orange));
  display:flex;align-items:center;justify-content:flex-end;min-width:44px;transition:width .7s ease;}
.impact-fill b{color:#fff;font-size:17px;font-weight:800;padding-right:14px;}
.impact-chip{display:inline-block;margin-top:14px;font-size:13px;font-weight:700;color:var(--teal-dark);background:var(--mint);padding:6px 12px;border-radius:999px;}
.impact-text{margin-top:14px;font-size:16px;line-height:1.55;color:var(--ink-2);}
.impact-text.bold{color:var(--ink);font-weight:700;}

/* comparison */
.cmp-lead{margin-top:8px;}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px;}
.cmp-card{border:1.5px solid var(--line);border-radius:14px;padding:16px 14px;}
.cmp-card.pro{border-color:var(--teal);background:#EAF8F4;}
.cmp-title{font-weight:800;font-size:15px;margin-bottom:10px;}
.cmp-card.pro .cmp-title{color:var(--teal-dark);}
.cmp-card ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
.cmp-card li{font-size:14px;color:var(--ink-2);font-weight:600;padding-left:18px;position:relative;}
.cmp-card.con li::before{content:"–";position:absolute;left:0;color:var(--muted);font-weight:800;}
.cmp-card.pro li::before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:800;}

/* trust / social proof */
.trust-body{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:10px 4px;min-height:100%;}
.trust-badge{width:60px;height:60px;border-radius:50%;background:var(--mint);color:var(--teal-dark);font-size:26px;display:grid;place-items:center;margin:0 auto 18px;}
.trust-disclaimer .trust-badge{background:#FFF3EE;color:var(--orange);}
.trust-body h2{font-size:25px;letter-spacing:-.4px;font-weight:800;}
.trust-body .sub{margin-top:12px;font-size:16px;}
.trust-items{list-style:none;margin:22px auto 0;display:flex;flex-direction:column;gap:12px;text-align:left;max-width:300px;}
.trust-items li{display:flex;align-items:center;gap:11px;font-size:16px;font-weight:600;}
.testimonial{margin:20px auto 0;max-width:320px;font-style:italic;color:var(--ink-2);background:#F6F6F9;border-radius:14px;padding:16px;font-size:15px;}
.testimonial cite{display:block;margin-top:8px;font-style:normal;font-weight:700;color:var(--ink);font-size:13px;}

/* registration */
.reg-note{margin-top:14px;font-size:13.5px;color:var(--ink-2);background:rgba(18,181,166,.08);border-radius:10px;padding:10px 12px;line-height:1.45;}
.legal-mini{margin-top:14px;font-size:13px;color:var(--muted);line-height:1.5;}
.legal-mini a{color:var(--teal-dark);font-weight:600;}
.text-skip{background:none;border:none;color:var(--muted);font-weight:600;font-size:15px;width:100%;min-height:44px;}

/* result */
.result{flex:1;display:flex;flex-direction:column;min-height:0;}
.result .q-scroll{padding-top:26px;}
.result-badge{width:62px;height:62px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:30px;font-weight:800;margin-bottom:16px;}
.result h1{font-size:28px;letter-spacing:-.5px;font-weight:800;}
.result .sub{margin-top:12px;}
.plan-bullets{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:12px;}
.plan-bullets li{display:flex;align-items:center;gap:11px;font-size:16px;font-weight:600;}
.profile-cards{display:flex;flex-direction:column;gap:12px;margin-top:18px;}
.pcard{border:1px solid var(--line);border-radius:14px;padding:15px 16px;}
.pcard-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.pcard-top b{font-size:16px;font-weight:700;}
.pstatus{font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:4px 9px;border-radius:999px;}
.pstatus.rec{color:#fff;background:var(--orange);}
.pstatus.inc{color:var(--teal-dark);background:var(--mint);}
.pcard p{margin-top:6px;font-size:14px;color:var(--ink-2);}
.rblock{margin-top:20px;}
.rblock-t{font-size:13px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--orange);margin-bottom:10px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip2{background:var(--mint);color:var(--teal-dark);font-weight:700;font-size:14px;padding:8px 13px;border-radius:999px;}
.rlist{list-style:none;display:flex;flex-direction:column;gap:11px;}
.rlist li{display:flex;align-items:center;gap:11px;font-size:16px;font-weight:600;}

/* loading (minimal) */
.loading{flex:1;display:flex;flex-direction:column;min-height:0;}
.load-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 28px;}
.load-ring{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin-bottom:22px;
  background:conic-gradient(var(--orange),#FF8A5B,var(--orange));animation:spin 1.8s linear infinite;}
.load-ring svg{width:40px;height:40px;}
.loading h2{font-size:22px;letter-spacing:-.3px;font-weight:800;max-width:280px;}
.steps{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:14px;max-width:320px;margin-left:auto;margin-right:auto;}
.steps li{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--muted);font-weight:600;transition:color .2s;}
.steps .sdot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;transition:all .2s;}
.steps li.active{color:var(--ink);}
.steps li.active .sdot{border-color:var(--orange);}
.steps li.done{color:var(--ink);}
.steps li.done .sdot{background:var(--teal);border-color:var(--teal);}

/* paywall */
.paywall{flex:1;display:flex;flex-direction:column;min-height:0;}
.paywall .q-scroll{padding-top:24px;}
.paywall h1{font-size:26px;letter-spacing:-.5px;font-weight:800;}
.paywall .sub{margin-top:10px;font-size:15px;}
.plans{display:flex;flex-direction:column;gap:12px;margin-top:20px;}
.plan{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);
  border-radius:14px;padding:15px 16px;min-height:64px;transition:border-color .15s,background .15s;}
.plan.selected{border-color:var(--orange);background:#FFF3EE;}
.plan-radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;position:relative;}
.plan.selected .plan-radio{border-color:var(--orange);}
.plan.selected .plan-radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--orange);}
.plan-main{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;}
.plan-main b{font-size:16px;font-weight:700;}
.plan-main small{font-size:12.5px;color:var(--muted);font-weight:500;line-height:1.4;}
.plan-badge{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:#fff;background:var(--orange);padding:3px 8px;border-radius:999px;}
.plan-price{font-weight:800;font-size:17px;text-align:right;flex:none;}
.plan-price small{display:block;font-size:12px;font-weight:600;color:var(--muted);}
.fineprint{color:var(--muted);font-size:12.5px;line-height:1.5;margin-top:16px;}
.legal-links{font-size:13px;margin-top:8px;}
.legal-links a{color:var(--teal-dark);font-weight:600;text-decoration:none;}

/* ============ text size control (senior-friendly) ============ */
body.ts-l .q-head h2,body.ts-l .info-body h2{font-size:27px;}
body.ts-l .intro h1{font-size:33px;}
body.ts-l .trust-body h2,body.ts-l .paywall h1,body.ts-l .result h1{font-size:30px;}
body.ts-l .impact-head{font-size:30px;}
body.ts-l .sub,body.ts-l .info-text,body.ts-l .impact-text,body.ts-l .cred li,body.ts-l .trust-items li,body.ts-l .rlist li,body.ts-l .plan-bullets li{font-size:18px;}
body.ts-l .opt{font-size:19px;}
body.ts-l .yn-opt,body.ts-l .btn{font-size:19px;}
body.ts-l .why,body.ts-l .reg-note{font-size:15px;}
body.ts-l .disclaimer,body.ts-l .fineprint,body.ts-l .legal-mini{font-size:14px;}
body.ts-l .chip2{font-size:15.5px;}
body.ts-l .plan-main b{font-size:17.5px;}
body.ts-l .field input{font-size:18px;}

body.ts-xl .q-head h2,body.ts-xl .info-body h2{font-size:30px;}
body.ts-xl .intro h1{font-size:35px;}
body.ts-xl .trust-body h2,body.ts-xl .paywall h1,body.ts-xl .result h1{font-size:33px;}
body.ts-xl .impact-head{font-size:32px;}
body.ts-xl .sub,body.ts-xl .info-text,body.ts-xl .impact-text,body.ts-xl .cred li,body.ts-xl .trust-items li,body.ts-xl .rlist li,body.ts-xl .plan-bullets li{font-size:20px;}
body.ts-xl .opt{font-size:21px;}
body.ts-xl .yn-opt,body.ts-xl .btn{font-size:21px;}
body.ts-xl .why,body.ts-xl .reg-note{font-size:16px;}
body.ts-xl .disclaimer,body.ts-xl .fineprint,body.ts-xl .legal-mini{font-size:15px;}
body.ts-xl .chip2{font-size:17px;}
body.ts-xl .plan-main b{font-size:19px;}
body.ts-xl .field input{font-size:19px;}

/* ============ responsive ============ */
@media (min-width:430px){ .yn-foot{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){
  .survey-bg{padding:0;background:#fff;}
  .survey-card{max-width:none;height:100dvh;border-radius:0;box-shadow:none;}
}

/* ============ reduced motion: disable all non-essential animation ============ */
@media (prefers-reduced-motion:reduce){
  .screen{animation:none;}
  .q-prog span,.impact-fill,.opt,.yn-opt,.btn,.plan,.steps li,.steps .sdot{transition:none;}
  .load-ring{animation-duration:2.4s;}  /* keep a slow, calm spinner only */
}
