@import"https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@300;400;500;600;700&display=swap";:root{--violet-900: #150B34;--violet-800: #1A1035;--violet-700: #2D1B69;--violet-600: #3B1F6B;--violet-500: #5B21B6;--violet-400: #6A5EA8;--violet-200: #B7B2E0;--violet-100: #E9E7F6;--orange-600: #E8620A;--orange-500: #F97316;--orange-400: #FF823F;--orange-200: #FCD9BE;--ink: #111114;--ink-soft: #3A3A44;--muted: #7D7D93;--line: #E6E4EF;--cream: #FAF7F2;--paper: #FFFFFF;--paper-2: #F7F5FA;--grad-signal: linear-gradient(135deg, #2D1B69 0%, #5B21B6 45%, #F97316 115%);--grad-violet: linear-gradient(160deg, #1A1035 0%, #2D1B69 100%);--grad-heat: linear-gradient(90deg, #F97316 0%, #FF823F 100%);--grad-glow: radial-gradient(70% 90% at 50% 0%, rgba(124,58,237,.3) 0%, rgba(26,16,53,0) 70%);--font-display: "Anton", Impact, sans-serif;--font-ui: "Space Grotesk", "Inter", system-ui, sans-serif;--r-sm: 8px;--r-md: 14px;--r-lg: 18px;--r-xl: 24px;--r-pill: 100px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0}body{font-family:var(--font-ui);color:#fff;line-height:1.5;background:var(--grad-violet);min-height:100vh;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;background:var(--grad-glow);pointer-events:none;z-index:0;transition:opacity .5s ease}body.quiz-nurture{background:linear-gradient(160deg,#0b0620,#140a30)}body.quiz-nurture:before{opacity:.45}body.quiz-nurture .quiz-footer{background:linear-gradient(180deg,#0b062000,#0b0620 45%)}body.quiz-nurture .quiz-kicker{color:var(--orange-400)}body.quiz-nurture .quiz-stage:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px}.quiz-app{position:relative;z-index:1;max-width:600px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}.quiz-body-pad{padding:0 20px;display:flex;flex-direction:column;flex:1}.quiz-header{position:sticky;top:0;z-index:20;background:#fff;box-shadow:0 6px 20px #150b342e}.quiz-topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:15px 18px;gap:12px;min-height:56px}.quiz-back{display:flex;align-items:center;gap:6px;justify-self:start;color:var(--violet-900);font-size:16px;font-weight:700;background:none;border:0;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s;padding:0;font-family:var(--font-ui)}.quiz-back.show{opacity:1;pointer-events:auto}.quiz-back svg{flex:none}.quiz-brand{font-family:var(--font-display);text-transform:uppercase;letter-spacing:1.2px;color:var(--violet-900);font-size:19px;line-height:1;flex:1;text-align:center;white-space:nowrap}.quiz-stepcount{font-size:13px;color:var(--muted);font-weight:500;white-space:nowrap;min-width:56px;justify-self:end;text-align:right;letter-spacing:.03em;font-variant-numeric:tabular-nums}.quiz-stepcount b{color:var(--violet-900);font-weight:700;margin-right:3px;font-variant-numeric:tabular-nums}.quiz-back-spacer{min-width:52px}.quiz-progress{position:sticky;top:56px;z-index:19;height:8px;background:var(--violet-100);overflow:hidden;margin:0;border-radius:0}.quiz-progress-bar{display:block;height:100%;width:0%;background:var(--grad-heat);border-radius:100px;transition:width .45s cubic-bezier(.4,0,.2,1);min-width:4px}.quiz-stage{flex:1;display:flex;flex-direction:column;padding:16px 0 120px;animation:quiz-fade .4s ease}@keyframes quiz-fade{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.quiz-kicker{font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-400);margin:0 0 12px;display:flex;align-items:center;gap:8px}.quiz-kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--orange-500);box-shadow:0 0 0 4px #f9731640}.quiz-q{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.4px;font-size:clamp(26px,7vw,38px);line-height:1.05;color:#fff;margin:0 0 10px}.quiz-sub{color:var(--violet-200);font-size:15.5px;margin:0 0 24px;line-height:1.45}.quiz-opts{display:grid;gap:12px}.quiz-opts.two{grid-template-columns:1fr 1fr}.quiz-opt{display:flex;align-items:center;gap:14px;padding:15px 18px;border:1.5px solid rgba(255,255,255,.16);border-radius:var(--r-md);background:#ffffff0f;cursor:pointer;text-align:left;font-weight:500;font-size:15px;color:#fff;transition:all .16s ease;position:relative;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-family:var(--font-ui)}.quiz-opt:hover{background:#ffffff1f;border-color:#ffffff59;transform:translateY(-2px)}.quiz-opt.sel{background:#fff;color:var(--ink);border-color:var(--orange-500);box-shadow:0 14px 30px #f973164d}.quiz-opt .ico{width:46px;height:46px;border-radius:12px;background:var(--orange-200);display:grid;place-items:center;flex:none;color:var(--orange-600);overflow:hidden}.quiz-opt .ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.quiz-opt .ico.photo{background:var(--violet-100)}.quiz-opt .ico.photo img{width:100%;height:100%;object-fit:cover;display:block}.quiz-opt:has(.ico.photo){padding:0 18px 0 0;overflow:hidden;min-height:72px}.quiz-opt:has(.ico.photo) .ico.photo{width:84px;height:auto;align-self:stretch;border-radius:0;min-height:72px}.quiz-opt:has(.ico.photo) .opt-txt{padding:13px 4px 13px 0}.quiz-opt.sel .ico:not(.photo){background:var(--grad-heat);color:#fff}.quiz-opt .opt-txt{flex:1;padding-right:4px}.quiz-opt .opt-txt .lbl{font-weight:600;font-size:15px;line-height:1.3}.quiz-opt .opt-txt .desc{color:var(--violet-200);font-size:12.5px;margin-top:3px;font-weight:400;line-height:1.4}.quiz-opt.sel .opt-txt .desc{color:var(--muted)}.quiz-opt .check{width:24px;height:24px;border-radius:6px;border:2px solid rgba(255,255,255,.4);flex:none;display:grid;place-items:center;transition:all .16s;background:#ffffff14}.quiz-opt.multi .check{border-radius:6px}.quiz-opt:not(.multi) .check{border-radius:50%}.quiz-opt.sel .check{border-color:var(--orange-500);background:var(--orange-500)}.quiz-opt.sel .check:after{content:"✓";color:#fff;font-size:13px;font-weight:800}.quiz-opt.quiet{background:transparent;border-style:dashed;border-color:#ffffff38}.quiz-opt.quiet .opt-txt .lbl{font-weight:500;color:var(--violet-200);font-size:14px}.quiz-opt.quiet:hover{background:#ffffff0f}.quiz-opt.quiet.sel{background:#fff}.quiz-opt.quiet.sel .opt-txt .lbl{color:var(--ink)}.repair-chart{background:#ffffff0f;border:1.5px solid rgba(255,255,255,.16);border-radius:var(--r-xl);padding:18px 14px 16px;margin:6px -6px 14px}.rc-title{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--violet-100);text-align:center;margin-bottom:12px}.rc-wrap{position:relative}.rc-wrap svg{display:block;width:100%}.rc-badge{position:absolute;top:24%;right:5%;display:flex;flex-direction:column;align-items:center;gap:1px;background:linear-gradient(90deg,var(--orange-600),var(--orange-400));color:#fff;font-weight:800;font-size:19px;line-height:1;letter-spacing:.3px;padding:8px 13px;border-radius:var(--r-md);box-shadow:0 8px 20px #f9731666;pointer-events:none;opacity:0;animation:rcPop .4s ease 1.9s forwards}.rc-badge span{font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.9}.rc-line{stroke-dasharray:1;stroke-dashoffset:1;animation:rcDraw 1.6s cubic-bezier(.45,0,.3,1) .3s forwards}.rc-area{opacity:0;animation:rcFadeIn .8s ease 1.4s forwards}.rc-dot-start{opacity:0;animation:rcFadeIn .3s ease .3s forwards}.rc-dot-end{opacity:0;animation:rcFadeIn .3s ease 1.8s forwards}@keyframes rcDraw{to{stroke-dashoffset:0}}@keyframes rcFadeIn{to{opacity:1}}@keyframes rcPop{0%{opacity:0;transform:scale(.7)}70%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.rc-source-card{display:flex;align-items:center;gap:14px;background:#ffffff14;border:1.5px solid rgba(255,255,255,.16);border-left:4px solid var(--orange-500);border-radius:var(--r-md);padding:14px 16px;margin:0 0 18px}.rc-source-tag{flex:none;background:var(--orange-500);color:#fff;font-weight:800;font-size:10px;letter-spacing:.12em;padding:6px 10px;border-radius:6px}.rc-source-txt{min-width:0}.rc-source-journal{font-weight:700;font-size:14.5px;color:#fff;line-height:1.3;font-style:italic}.rc-source-detail{font-size:12.5px;color:var(--violet-200);margin-top:3px;line-height:1.4}.gender-card{position:relative;display:flex;flex-direction:column;border:0;padding:0;background:none;cursor:pointer;font-family:var(--font-ui);margin-top:46px;transition:transform .16s ease}.gender-card:hover{transform:translateY(-3px)}.gender-card:active{transform:translateY(1px)}.gender-photo{position:relative;z-index:2;height:150px;margin-bottom:-44px;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}.gender-photo img{height:190px;max-width:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 10px 22px rgba(21,11,52,.45))}.gender-card .gender-bar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-radius:var(--r-md);color:#fff;font-weight:700;font-size:17px;transition:all .16s ease}.gender-card.male .gender-bar{background:linear-gradient(90deg,var(--violet-700) 0%,var(--violet-500) 100%)}.gender-card.female .gender-bar{background:linear-gradient(90deg,var(--orange-600) 0%,var(--orange-400) 100%)}.gender-card:before{content:"";position:absolute;z-index:1;inset:44px 0 0;border-radius:var(--r-lg);background:#ffffff14;border:1.5px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:all .16s ease}.gender-card:hover:before{background:#ffffff24;border-color:#ffffff59}.gender-card.sel:before{background:#fff3;border-color:var(--orange-500);box-shadow:0 14px 30px #f973164d}.gender-lbl{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.8px;font-weight:400}.gender-arrow{font-size:22px;line-height:1;font-weight:400}.quiz-opt.gender{flex-direction:column;gap:10px;padding:22px 12px;text-align:center}.quiz-opt.gender .ico{width:56px;height:56px;border-radius:16px}.quiz-opt.gender .ico svg{width:30px;height:30px}.quiz-opt.gender .opt-txt .lbl{font-family:var(--font-display);letter-spacing:.5px;text-transform:uppercase;font-size:20px}.comm-collage{margin:4px 0 18px}.comm-collage img{width:100%;height:auto;display:block}.bridge-img{width:100%;margin:0 0 18px}.bridge-img img{width:100%;height:auto;display:block}.bridge-img.ph{background:repeating-linear-gradient(45deg,#ffffff0a,#ffffff0a 12px,#ffffff14 12px 24px)}.bridge-body{color:#edeaf7;font-size:18px;line-height:1.6}.bridge-body p{margin:0 0 14px}.bridge-body strong{color:#fff}.signal-viz{background:#00000038;border-radius:var(--r-lg);padding:22px;text-align:center;margin:0 0 18px}.signal{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:64px;margin-bottom:10px}.signal i{width:9px;border-radius:4px 4px 0 0;background:var(--grad-heat);animation:decay 2.2s ease-in-out infinite}.signal i:nth-child(1){height:60px}.signal i:nth-child(2){height:54px;animation-delay:.15s}.signal i:nth-child(3){height:46px;animation-delay:.3s}.signal i:nth-child(4){height:36px;animation-delay:.45s}.signal i:nth-child(5){height:28px;animation-delay:.6s}.signal i:nth-child(6){height:18px;animation-delay:.75s}.signal i:nth-child(7){height:11px;animation-delay:.9s}@keyframes decay{0%,to{opacity:1;transform:scaleY(1)}50%{opacity:.25;transform:scaleY(.55)}}.signal-viz .big{font-family:var(--font-display);font-size:clamp(40px,11vw,60px);line-height:.9;background:var(--grad-heat);-webkit-background-clip:text;background-clip:text;color:transparent}.signal-viz .cap{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet-200);margin-top:6px}.testi{background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:20px;margin:0 0 14px;box-shadow:0 8px 22px #0000001f}.testi .head{display:flex;align-items:center;gap:12px;margin-bottom:12px}.testi .avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--violet-100);flex:none;display:grid;place-items:center;color:var(--violet-400);font-size:10px;text-align:center}.testi .avatar img{width:100%;height:100%;object-fit:cover}.testi .who{font-weight:700;font-size:15px}.testi .stars{color:var(--orange-500);font-size:13px;letter-spacing:1px}.testi .quote{font-size:15px;line-height:1.5;color:var(--ink-soft)}.testi .verified{font-size:11px;color:#1a9d5a;font-weight:600;margin-top:8px;display:flex;align-items:center;gap:4px}.loader{text-align:center;padding:16px 0;overflow:hidden}@keyframes spin{to{transform:rotate(360deg)}}.donut-wrap{position:relative;width:210px;height:210px;margin:10px auto 26px}.donut-wrap svg{display:block}.donut-pct{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-ui);font-size:42px;font-weight:700;color:#fff}.load-pills{display:flex;gap:20px;width:max-content;transition:transform .5s cubic-bezier(.4,0,.2,1)}.load-pill{flex:none;width:220px;display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 18px;border-radius:100px;border:1.5px solid rgba(255,255,255,.18);background:#ffffff0d;color:var(--violet-200);font-size:14px;font-weight:600;opacity:.45;transition:opacity .4s;white-space:nowrap}.load-pill.active,.load-pill.done{opacity:1;color:#fff;background:#ffffff1a;border-color:#ffffff59}.pill-spin{width:16px;height:16px;flex:none;border-radius:50%;border:2.5px solid rgba(255,255,255,.25);border-top-color:var(--orange-500);animation:spin .8s linear infinite}.pill-done{width:18px;height:18px;flex:none;border-radius:50%;background:var(--orange-500);color:#fff;font-size:11px;display:grid;place-items:center}.tslider{margin:4px 0 8px}.ts-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none;margin:0 -4px;padding:0 4px}.ts-track::-webkit-scrollbar{display:none}.ts-card{flex:0 0 100%;scroll-snap-align:center;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg, 16px);padding:20px}.ts-card .stars{color:var(--orange, #F97316);letter-spacing:3px;font-size:15px;margin-bottom:10px}.ts-card .quote{font-size:16px;line-height:1.55;color:#edeaf7;font-style:italic}.ts-card .who{margin-top:12px;font-weight:700;color:#fff}.ts-card .verified{margin-top:4px;font-size:12px;color:#22c55e}.ts-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}.ts-dots span{width:8px;height:8px;border-radius:50%;background:#ffffff40;transition:background .2s,transform .2s}.ts-dots span.on{background:var(--orange, #F97316);transform:scale(1.25)}.qual-card{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;margin:0 0 16px;display:flex;flex-direction:column;gap:8px}.qual-row{display:flex;gap:12px;font-size:14.5px;line-height:1.45}.qual-row .k{flex:none;width:92px;color:var(--violet-200);font-weight:700;text-transform:uppercase;font-size:11.5px;letter-spacing:.05em;padding-top:2px}.qual-row .v{color:#fff}.qual-list{list-style:none;padding:0;margin:0 0 10px;display:flex;flex-direction:column;gap:10px}.qual-list li{display:flex;align-items:flex-start;gap:10px;font-size:16px;line-height:1.45;color:#edeaf7;font-weight:600}.qual-list .tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--orange, #F97316);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;margin-top:1px}.eg-video{position:relative;border-radius:var(--r-lg, 16px);overflow:hidden;aspect-ratio:16/9;background:#000;margin:6px 0 18px}.eg-video img{width:100%;height:100%;object-fit:cover;filter:blur(6px) brightness(.75);transform:scale(1.06)}.eg-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;background:#f97316f2;color:#fff;display:grid;place-items:center;font-size:22px;padding-left:5px;box-shadow:0 8px 30px #00000073}.eg-play-lbl{position:absolute;bottom:12px;left:50%;transform:translate(-50%);background:#0000008c;color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.eg-title,.eg-sub{text-align:center}.eg-why{font-size:14.5px;line-height:1.55;color:var(--violet-200);text-align:center;margin:0 0 12px}.eg-skip{display:block;width:100%;background:none;border:none;color:var(--violet-200);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px 0 2px;text-align:center}.eg-skip:hover{color:#fff}.eg-safe{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;color:var(--violet-200);margin:0 0 14px}.eg-safe svg{flex:none;margin-top:2px}.eg-agree{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;color:#edeaf7;cursor:pointer;margin:0 0 6px}.eg-agree input{position:absolute;opacity:0;width:0;height:0}.eg-agree .eg-box{flex:none;width:22px;height:22px;border-radius:6px;border:2px solid rgba(255,255,255,.35);display:grid;place-items:center;color:transparent;font-size:14px;font-weight:800;margin-top:1px;transition:background .15s,border-color .15s,color .15s}.eg-agree input:checked+.eg-box{background:var(--orange, #F97316);border-color:var(--orange, #F97316);color:#fff}.eg-agree b{color:var(--orange, #F97316);font-weight:700}.quiz-field{margin:0 0 14px}.quiz-field input{width:100%;padding:16px 18px;border:2px solid rgba(255,255,255,.2);border-radius:var(--r-md);font-family:var(--font-ui);font-size:16px;background:#fffffff2;color:var(--ink)}.quiz-field input:focus{outline:none;border-color:var(--orange-500);box-shadow:0 0 0 3px #f9731640}.quiz-privacy{display:flex;gap:8px;align-items:flex-start;color:var(--violet-200);font-size:12px;margin-top:-4px}.reassure{margin-top:16px;background:#ffffff12;border-radius:var(--r-md);padding:14px 16px;display:flex;gap:12px;align-items:center;border:1px solid rgba(255,255,255,.12)}.reassure .r-ico{width:38px;height:38px;border-radius:10px;background:var(--orange-200);color:var(--orange-600);display:grid;place-items:center;flex:none}.reassure .r-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.reassure .r-txt{font-size:12.5px;color:#edeaf7;line-height:1.45}.reassure .r-txt b{color:#fff}.quiz-footer{position:sticky;bottom:0;margin-top:auto;padding:14px 0 20px;background:linear-gradient(180deg,rgba(26,16,53,0) 0%,var(--violet-800) 45%)}.quiz-btn{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;cursor:pointer;font-family:var(--font-ui);font-weight:700;font-size:16px;letter-spacing:.02em;text-transform:uppercase;border-radius:var(--r-md);padding:18px 24px;border:3px solid #fff;background:var(--orange-500);color:#fff;box-shadow:0 8px 26px #f9731673;transition:all .18s ease}.quiz-btn:hover{filter:brightness(1.05);box-shadow:0 10px 34px #f9731699;transform:translateY(-1px)}.quiz-btn:active{transform:translateY(1px)}.quiz-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.quiz-btn.hidden{display:none}.quiz-trust{display:flex;justify-content:center;gap:18px;color:var(--violet-200);font-size:11px;margin-top:12px;flex-wrap:wrap;opacity:.85}.quiz-trust span{display:flex;align-items:center;gap:5px}.quiz-opt .ico.photo.ph:after{content:"IMG";font-size:9px;color:var(--violet-400)}.testi .avatar.ph:after{content:"foto";font-size:9px}@media(max-width:420px){.quiz-opt.gender .ico{width:50px;height:50px}}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;padding:0;min-height:100vh}

/* ===========================================================================
   Rebuild additions — new interstitial types.
   Written in the existing language: the same glass card, the same 1.5px
   rgba(255,255,255,.16) hairline, the same orange accent and tick as .qual-list,
   so a new screen never looks like it came from a different site.
   =========================================================================== */

/* PROOF — a cited excerpt. A card rather than a screenshot so it stays sharp at
   every width, is readable on a 320px phone, and can never 404. */
.proof-card {
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(255, 255, 255, .16);
  border-left: 4px solid var(--orange-500);
  border-radius: var(--r-lg);
  padding: 18px 18px 16px;
  margin: 2px 0 18px;
}
.proof-tag {
  display: inline-block;
  background: var(--orange-500);
  color: #fff;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.proof-quote {
  font-size: 17px;
  line-height: 1.5;
  color: #fff;
  font-style: italic;
}
.proof-quote strong { font-style: normal; color: var(--orange-400); }
.proof-src {
  font-size: 12.5px;
  color: var(--violet-200);
  margin-top: 10px;
  line-height: 1.4;
}

/* FIT — their own answers reflected back as a checklist. The last row is the
   open loop, so it gets the dashed treatment and no tick. */
.fit-list {
  list-style: none;
  padding: 0;
  margin: 2px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.fit-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 16px;
  line-height: 1.45;
  color: #edeaf7;
}
.fit-list .tick {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange-500);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  margin-top: 1px;
}
.fit-list li.open {
  margin-top: 3px;
  padding-top: 13px;
  border-top: 1px dashed rgba(255, 255, 255, .22);
  color: #fff;
  font-weight: 600;
}
.fit-list li.open .tick {
  background: transparent;
  border: 2px dashed rgba(255, 255, 255, .5);
  color: var(--orange-400);
}

/* Testimonial photo, when a card has a real face to show. */
.ts-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 0 0 12px;
  background: rgba(255, 255, 255, .06);
}
.ts-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The signal visual carries a caption instead of a hard number on the rebuilt
   quizzes, so it needs to breathe a little more. */
.signal-viz .cap { max-width: 30ch; margin-left: auto; margin-right: auto; }

/* REPAIR CURVE — replaces the age dot-ruler on the signal bridge. Full bleed on
   phones: the chart is the screen rather than an object sitting in a box on it, so
   there is no panel background here at all. Unnumbered on purpose — the bend is the
   argument, and a labelled axis would be claiming precision we do not have. */
.curve-viz {
  position: relative;
  width: 100vw;
  margin: 2px calc(50% - 50vw) 20px;
  text-align: center;
}
@media (min-width: 620px) {
  .curve-viz { width: auto; margin-left: -20px; margin-right: -20px; }
}
.curve-big {
  font-family: var(--font-display);
  font-size: clamp(34px, 9.5vw, 52px);
  line-height: .9;
  background: var(--grad-heat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0 18px;
  margin-bottom: 2px;
}
.curve-plot { position: relative; }
.curve-svg { display: block; width: 100%; height: auto; overflow: visible; }

.curve-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: curveDraw 1.5s cubic-bezier(.55, .1, .3, 1) .15s forwards;
}
@keyframes curveDraw { to { stroke-dashoffset: 0; } }
.curve-area { opacity: 0; animation: curveIn .9s ease 1s forwards; }
@keyframes curveIn { to { opacity: 1; } }
.curve-drop { opacity: 0; animation: curveDrop .5s ease 1.3s forwards; }
@keyframes curveDrop { to { opacity: .5; } }
.curve-dot {
  opacity: 0;
  transform: scale(.3);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: curvePop .55s cubic-bezier(.2, 1.5, .4, 1) 1.45s forwards;
}
@keyframes curvePop { to { opacity: 1; transform: scale(1); } }
.curve-halo {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: curveHalo 2.8s ease-out 2s infinite;
}
@keyframes curveHalo {
  0%        { transform: scale(.5); opacity: .5; }
  70%, 100% { transform: scale(2.9); opacity: 0; }
}

.curve-lbl {
  position: absolute;
  top: 86%;
  transform: translateX(-50%);
  font-size: 12.5px;
  letter-spacing: .03em;
  color: var(--violet-200);
  white-space: nowrap;
}
.curve-lbl.on { color: #fff; font-weight: 700; }

.curve-flagwrap {
  position: absolute;
  transform: translate(-50%, -100%);
  margin-top: -15px;
  pointer-events: none;
}
.curve-flag {
  display: inline-block;
  white-space: nowrap;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--orange-500);
  padding: 3px 7px;
  border-radius: 999px;
  opacity: 0;
  animation: curveFlag .45s ease 1.7s forwards;
}
@keyframes curveFlag {
  from { opacity: 0; transform: translateY(-7px); }
  to   { opacity: 1; transform: translateY(0); }
}
.curve-flag::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--orange-500);
}
.curve-cap {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violet-200);
  margin: 18px auto 0;
  max-width: 30ch;
  padding: 0 18px;
}
@media (prefers-reduced-motion: reduce) {
  .curve-line { stroke-dashoffset: 0; }
  .curve-area, .curve-flag { opacity: 1; }
  .curve-drop { opacity: .5; }
  .curve-dot { opacity: 1; transform: none; }
  .curve-halo { animation: none; }
  .curve-line, .curve-area, .curve-drop, .curve-dot, .curve-flag { animation: none; }
}

/* COMMUNITY WALL — replaces the single flat collage JPEG (white card, white gutters)
   with six cropped portraits sitting straight on the dark canvas, under a Trustpilot
   lockup. Tiles are all 324x432 so the rows line up without aspect-ratio tricks. */
.comm-wall {
  margin: 2px 0 18px;
}
.tp-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: fit-content;
  margin: 0 auto 7px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
}
.tp-stars {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.tp-row {
  display: flex;
  gap: 2px;
  width: max-content;
}
.tp-box {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-row.on .tp-box { background: #00b67a; }
.tp-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
}
.tp-sep {
  width: 1px;
  height: 17px;
  background: rgba(255, 255, 255, .18);
}
.tp-logo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tp-name {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
}
.tp-line {
  margin: 0 0 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--violet-200);
}
.tp-line strong { color: #fff; font-weight: 700; }
.comm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.comm-cell {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.comm-cell img {
  width: 100%;
  height: auto;
  display: block;
}
.comm-cell::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(to top, rgba(12, 6, 32, .5), rgba(12, 6, 32, 0));
  pointer-events: none;
}
.comm-cap {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violet-200);
}

/* TESTIMONIAL ATTRIBUTION — face, name and verified line as one block under the quote. */
.ts-by {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
}
.ts-photo {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
}
.ts-card .ts-by .who { margin-top: 0; }
.ts-card .ts-by .verified { margin-top: 2px; }

/* SEVERITY GAUGE — the profile step's read on how loaded their answers are. Same glass
   card, hairline and orange accent as the rest of the funnel, so it reads as one site. */
.sev-card {
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-lg, 18px);
  padding: 16px 16px 14px;
  margin: 0 0 16px;
}
.sev-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 42px;
}
.sev-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.sev-pill {
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.sev-pill.lv-low { background: rgba(34, 197, 94, .16); color: #4ade80; border-color: rgba(34, 197, 94, .38); }
.sev-pill.lv-mild { background: rgba(234, 179, 8, .16); color: #fbbf24; border-color: rgba(234, 179, 8, .38); }
.sev-pill.lv-moderate { background: rgba(249, 115, 22, .16); color: var(--orange-400); border-color: rgba(249, 115, 22, .38); }
.sev-pill.lv-high { background: rgba(239, 68, 68, .16); color: #fb7185; border-color: rgba(239, 68, 68, .40); }
.sev-bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e 0%, #eab308 38%, #f97316 70%, #ef4444 100%);
}
.sev-dot {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--violet-800, #1A1035);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .55);
}
.sev-tip {
  position: absolute;
  bottom: 22px;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: #2A1B4E;
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 5px 10px;
  border-radius: 8px;
}
.sev-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 11px;
  font-size: 11.5px;
  color: var(--violet-200);
}
.sev-scale .on { color: #fff; font-weight: 800; }
.sev-alert {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 13px 14px;
  border-radius: 12px;
  background: rgba(249, 115, 22, .10);
  border: 1px solid rgba(249, 115, 22, .28);
}
.sev-ico {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange-500);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  font-style: italic;
}
.sev-alert-t {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 3px;
}
.sev-alert-b {
  font-size: 15.5px;
  line-height: 1.5;
  color: #edeaf7;
}
.sev-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.sev-chip {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
  padding: 10px 12px;
}
.sev-chip .k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--violet-200);
}
.sev-chip .v {
  margin-top: 3px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}

/* PROJECTION — where this goes over the next few months. */
.plan { margin: 2px 0 8px; }
.plan-lead {
  color: #edeaf7;
  font-size: 18px;
  line-height: 1.6;
}
.plan-lead p { margin: 0 0 18px; }
.plan-lead strong { color: #fff; }
.plan-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 290px;
  padding: 36px 14px 14px;
  background: rgba(255, 255, 255, .05);
  border: 1.5px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg, 18px);
}
.plan-col {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.plan-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
}
.plan-fill {
  position: relative;
  width: 100%;
  border-radius: 14px;
  background: var(--grad-heat, linear-gradient(90deg, #F97316, #FF823F));
}
.plan-col.goal .plan-fill { box-shadow: 0 10px 26px rgba(249, 115, 22, .38); }
.plan-flag {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--orange-500);
  padding: 4px 9px;
  border-radius: 999px;
}
.plan-flag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}
.plan-x {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--violet-200);
}
.plan-note {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--violet-200);
}

/* PROMISE — the "what this assessment gets you" screen that sits right after the first
   question. Composed like the reference the user sent: headline, one line of plain
   sub-copy, then the portrait pair bleeding to both edges and cropped at the bottom.
   The art is a transparent PNG masked to fade out at its base so it dissolves into the
   page; a box or a hard rectangular edge here would undo the whole effect. */
.promise-pair {
  width: 100vw;
  margin: 8px calc(50% - 50vw) 0;
  line-height: 0;
}
.promise-img {
  display: block;
  width: 100%;
  max-width: 520px;
  max-height: 38vh;
  object-fit: cover;
  object-position: 50% 0;
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 74%, rgba(0, 0, 0, 0) 100%);
}
.promise-note {
  margin: 14px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: right;
  color: var(--violet-200);
  opacity: .68;
}
@media (min-width: 620px) {
  .promise-pair {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ── PROFILE FIGURE ────────────────────────────────────────────────────────────
   Lives inside the severity card, above the scale, the way the reference lays it
   out. The figure and the reading it belongs to then read as one object, instead
   of the figure floating loose at the foot of the screen with the card's verdict
   scrolled off above it.

   The head's original 42px gap existed only to clear the "Your level" tooltip,
   which is absolutely positioned 22px above the bar. The figure now sits in that
   space, so the clearance moves to the bottom of the figure and the head closes
   up. The base of the image fades so the cut-off torso dissolves into the card
   instead of ending on a hard horizontal edge. */
.sev-card .sev-head {
  margin-bottom: 8px;
}

.sev-figure {
  margin: 0 0 46px;
  line-height: 0;
  text-align: center;
}

.sev-figure-img {
  width: auto;
  max-width: 47%;
  max-height: 25vh;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, rgba(0, 0, 0, 0) 99%);
  mask-image: linear-gradient(to bottom, #000 70%, rgba(0, 0, 0, 0) 99%);
}

/* ── VIDEO POSTER ──────────────────────────────────────────────────────────────
   The poster is the most click-looking thing on the email screen, so it now
   behaves like the control it already resembles. It is a div acting as a button,
   so the focus ring has to be declared by hand: keyboard users get nothing for
   free from a non-native control. */
.eg-video {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.eg-video:active {
  transform: scale(.992);
}

.eg-video:focus-visible {
  outline: 3px solid var(--orange, #f97316);
  outline-offset: 3px;
}