/* ============================================================
   CREDIT RANK · THE CHECK — the ad + ManyChat lander
   Built from the website's own material (V3): paper / ink / sapphire,
   lime only for actions, chrome rims, machined medallions, the wave
   field, the pledge groove. Mobile first; the console splits into
   screen | deck from 900px.
   ============================================================ */

@font-face{font-family:"Geist";src:url("/fonts/geist-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";src:url("/fonts/geist-latin-ext.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --blue:#2458FF; --blue-2:#1746F5; --cyan:#7DF9FF; --cyan-2:#36C9F0;
  --ink:#0B2246; --lime:#C7FF3C; --paper:#F7FAFF; --paper-2:#EEF3FC; --gold:#F5B400; --red:#C4363B;
  --mute:rgba(11,34,70,.66); --mute-2:rgba(11,34,70,.52); --line:rgba(11,34,70,.10); --line-2:rgba(11,34,70,.16);
  --f:"Geist",system-ui,sans-serif;
  --gut:16px; --max:1080px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --sil-b:#C9D6F5; --sil-c:#9DB4E8;
  --shadow-card:0 28px 60px -34px rgba(11,34,70,.35),0 2px 0 rgba(255,255,255,.9) inset;
  --steel:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.08) 0deg .5deg,rgba(0,0,0,.08) .5deg 1deg),
    conic-gradient(from -20deg at 50% 50%,#f4f7fc 0deg,#aab4c8 28deg,#5f6a84 52deg,#dfe5f0 84deg,#f8fafd 110deg,#8d97ad 140deg,#4f5970 168deg,#c9d1e0 200deg,#f6f8fc 230deg,#9aa4ba 262deg,#5a6480 292deg,#d7dde9 322deg,#f4f7fc 360deg);
  --sapphire:radial-gradient(circle at 50% 28%,#1649C9 0%,#0C2F96 36%,#061B66 70%,#030F44 100%);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:12px}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font:450 16px/1.5 var(--f);overflow-x:clip;-webkit-font-smoothing:antialiased;font-synthesis:none;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
b,strong{font-weight:700}
button,input{font:inherit;color:inherit}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:3px solid var(--blue-2);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.wrap{width:min(100% - var(--gut)*2,var(--max));margin-inline:auto}

/* ---------- the field: the website's wave ribbons, fixed behind everything ---------- */
.field{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(120% 70% at 50% 0%,#fff 0%,var(--paper) 62%)}
.wave{position:absolute;display:block;border-radius:50%;filter:blur(var(--wb,36px));opacity:var(--wa,1);will-change:transform;animation:waveDrift var(--wd,30s) ease-in-out var(--wo,0s) infinite alternate}
@keyframes waveDrift{0%{transform:translate(-50%,-50%) rotate(var(--wr,0deg)) translate(-5%,-7%) scale(1)}100%{transform:translate(-50%,-50%) rotate(var(--wr,0deg)) translate(5%,7%) scale(1.07)}}
.wave--1{--wr:-7deg;--wd:32s;--wo:-9s;left:44%;top:22%;width:160%;height:22%;background:linear-gradient(90deg,rgba(36,88,255,0) 0%,rgba(36,88,255,.15) 28%,rgba(54,201,240,.2) 58%,rgba(125,249,255,0) 100%)}
.wave--2{--wr:5deg;--wd:38s;--wo:-20s;--wb:40px;left:58%;top:52%;width:150%;height:16%;background:linear-gradient(90deg,rgba(125,249,255,0) 0%,rgba(54,201,240,.16) 35%,rgba(36,88,255,.12) 70%,rgba(36,88,255,0) 100%)}
.wave--3{--wr:-4deg;--wd:44s;--wo:-5s;--wb:44px;left:36%;top:80%;width:140%;height:16%;background:linear-gradient(90deg,rgba(36,88,255,0) 0%,rgba(36,88,255,.1) 40%,rgba(54,201,240,.12) 70%,rgba(36,88,255,0) 100%)}
.wave--4{--wr:12deg;--wd:36s;--wo:-14s;--wb:48px;--wa:.9;left:14%;top:10%;width:70%;height:30%;background:radial-gradient(50% 50% at 50% 50%,rgba(125,249,255,.22),rgba(125,249,255,0) 70%)}
.wave--lime{--wr:-10deg;--wd:42s;--wo:-11s;--wb:50px;left:80%;top:62%;width:70%;height:34%;background:radial-gradient(50% 50% at 50% 50%,rgba(199,255,60,.26),rgba(199,255,60,.07) 45%,rgba(199,255,60,0) 72%)}

/* ---------- small shared objects ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:999px;font:700 11px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 1.6s ease-in-out infinite}
.pill--ink{background:var(--ink);color:#fff;box-shadow:0 10px 24px -14px rgba(11,34,70,.7)}
.pill--ink i{background:var(--lime)}
.pill--glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pill--glass i{background:var(--lime)}
.pill--xs{height:24px;padding:0 10px;font-size:9.5px;letter-spacing:.12em;gap:6px}
.pill--xs i{width:5px;height:5px}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.55}}

.stars{display:inline-flex;gap:2px}
.stars i{width:13px;height:13px;background:var(--gold);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;border:0;border-radius:999px;text-decoration:none;font:700 16px/1 var(--f);letter-spacing:-.01em;overflow:hidden;isolation:isolate;cursor:pointer;white-space:nowrap;min-width:44px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .2s;-webkit-tap-highlight-color:transparent}
.btn--lime{background:var(--lime);color:var(--ink);box-shadow:0 16px 36px -14px rgba(11,34,70,.45),0 0 0 1px rgba(11,34,70,.06),inset 0 1px 0 rgba(255,255,255,.8)}
.btn--lime:hover{box-shadow:0 22px 44px -14px rgba(11,34,70,.5),0 0 0 1px rgba(11,34,70,.08),inset 0 1px 0 rgba(255,255,255,.9)}
.btn:active{filter:brightness(.95);transform:scale(.985)}
.btn::after{content:"";position:absolute;inset:-40%;z-index:-1;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.85) 50%,transparent 58%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(120%)}
.btn .arr{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn > span{position:relative;z-index:1}
.btn--sm{height:44px;padding:0 18px;font-size:14px;gap:8px}
.btn--wide{width:100%}
.btn--hero{height:60px;font-size:17px}
.btn--hero::before{content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-2;animation:ctaring 2.8s ease-out 1.2s infinite}
@keyframes ctaring{0%{box-shadow:0 0 0 0 rgba(199,255,60,.75)}70%,100%{box-shadow:0 0 0 18px rgba(199,255,60,0)}}
.btn[aria-busy=true]{pointer-events:none;filter:saturate(.7)}

/* chrome rim (the website's silver edge) */
.chrome{position:relative}
.chrome::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(135deg,#fff 0%,var(--sil-b) 22%,#fff 42%,var(--sil-c) 62%,#fff 82%,#B9C8EC 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* machined medallions (the website's badges) */
@property --hb-ra{syntax:"<angle>";inherits:false;initial-value:0deg}
.badge-art{position:relative;flex:none;width:var(--hb,64px);height:var(--hb,64px);border-radius:50%}
.badge-glow{position:absolute;inset:-18%;border-radius:50%;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(36,88,255,.30) 0%,rgba(125,200,255,.14) 45%,transparent 70%);filter:blur(6px);opacity:.55;animation:hb-breathe 4.2s ease-in-out infinite;animation-delay:calc(var(--i,0)*-1.4s)}
.badge-bezel{position:absolute;inset:0;border-radius:50%;background:var(--steel);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.4),0 10px 22px -10px rgba(11,34,70,.6),0 1px 0 rgba(255,255,255,.6)}
.badge-bezel::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(160deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 36%,rgba(0,0,0,0) 62%,rgba(0,0,0,.3) 100%)}
.badge-face{position:absolute;inset:9%;border-radius:50%;background:var(--sapphire);box-shadow:inset 0 6px 12px rgba(0,0,0,.6),inset 0 -3px 8px rgba(60,120,255,.2),0 0 0 1px rgba(0,0,0,.5),inset 0 0 0 1px rgba(125,170,255,.16)}
.badge-svg{position:absolute;inset:10%;width:80%;height:80%;overflow:visible;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.badge-art::after{content:"";position:absolute;inset:9%;border-radius:50%;pointer-events:none;background:radial-gradient(90% 55% at 50% -10%,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 45%,rgba(255,255,255,0) 70%)}
.badge-rim{position:absolute;inset:-1px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from var(--hb-ra),transparent 0 62%,rgba(199,255,60,0) 66%,rgba(199,255,60,.95) 78%,#fff 83%,rgba(125,249,255,.6) 88%,transparent 94%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 2.5px));
  animation:hb-rim 7s linear infinite;animation-delay:calc(var(--i,0)*-2.3s)}
@keyframes hb-rim{to{--hb-ra:360deg}}
@keyframes hb-breathe{0%,100%{opacity:.45;transform:scale(.96)}50%{opacity:.9;transform:scale(1.06)}}
.hb-num{font:800 15px/1 var(--f);letter-spacing:-.03em;fill:#fff}
.hb-num--sm{font-size:10.5px;letter-spacing:-.02em}
.hb-num--shadow{fill:#020A2E;opacity:.9}
.hb-spark{transform-box:fill-box;transform-origin:center;animation:hb-spark 4.2s ease-in-out infinite}
@keyframes hb-spark{0%,100%{transform:scale(.6) rotate(0);opacity:.5}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
.hb-ribbon{filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}
.hb-tick{stroke-dasharray:12;stroke-dashoffset:12;animation:hb-tick 5.5s var(--ease) infinite}
.hb-tick-bg{transform-box:fill-box;transform-origin:center;animation:hb-tickbg 5.5s var(--ease) infinite}
@keyframes hb-tick{0%,12%{stroke-dashoffset:12}30%,82%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:12}}
@keyframes hb-tickbg{0%,12%{transform:scale(.85)}30%{transform:scale(1.08)}40%,82%{transform:scale(1)}92%,100%{transform:scale(.85)}}
.hb-person{transform-box:fill-box;transform-origin:50% 100%}
.hb-person--c{filter:drop-shadow(0 0 3px rgba(199,255,60,.55))}
.hb-live-ring{transform-box:fill-box;transform-origin:center;animation:hb-live 2.2s ease-out infinite}
.hb-live{filter:drop-shadow(0 0 3px rgba(199,255,60,.9))}
@keyframes hb-live{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.4);opacity:0}}

/* ---------- top ---------- */
.top{position:relative;z-index:2}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:52px}
.top .logo{height:21px;width:auto}
.rate{display:inline-flex;align-items:center;gap:7px;font:500 12.5px/1 var(--f);color:var(--mute);white-space:nowrap}
.rate b{color:var(--ink);font-weight:800}
.rate .stars i{width:12px;height:12px}

/* ---------- hook ---------- */
.hero{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 0 16px}
.hello{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 10px;margin-bottom:12px;border-radius:999px;background:var(--ink);color:#fff;font:600 12.5px/1 var(--f);box-shadow:0 10px 24px -14px rgba(11,34,70,.7)}
.hello i{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:pulse 1.6s ease-in-out infinite}
.hello b{font-weight:800}
.h1{font:800 32px/1.04 var(--f);letter-spacing:-.04em;max-width:15ch;text-wrap:balance}
.acc,.kin .w.acc .c,.acc-t{background:linear-gradient(180deg,#2E63FF 0%,var(--blue-2) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.kin .w.acc .c{padding-bottom:.08em;margin-bottom:-.08em}
.sub{margin-top:12px;max-width:31ch;font:500 15.5px/1.42 var(--f);color:var(--mute);text-wrap:balance}
.sub b{color:var(--ink);font-weight:700}

/* kinetic headline (the website's) */
.kin .w{display:inline-block;white-space:nowrap}
.kin .c{display:inline-block;will-change:transform}
.js .kin .c{opacity:0;transform:translateY(.9em) rotate(5deg)}
.js .kin.in .c{opacity:1;transform:none;transition:transform .9s var(--ease),opacity .45s linear;transition-delay:calc(var(--i)*14ms)}
.js .reveal{opacity:0;transform:translateY(20px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .7s linear,transform 1s var(--ease);transition-delay:calc(var(--r,0)*90ms)}

/* ---------- THE CONSOLE ---------- */
.console{position:relative;z-index:1}
.cs-bloom{position:absolute;left:50%;top:40%;width:130%;height:80%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(36,88,255,.16) 0%,rgba(125,249,255,.10) 38%,rgba(199,255,60,.06) 56%,transparent 72%);filter:blur(20px)}
.cs{position:relative;padding:7px;border-radius:30px;
  background:linear-gradient(165deg,#fff 0%,#F6F9FF 55%,#EEF3FC 100%);
  box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(11,34,70,.05),0 24px 44px -26px rgba(11,34,70,.34),inset 0 2px 0 #fff}
/* a soft ground shadow drawn as its own element: one huge negative-spread box-shadow leaves a seam in Chrome */
.console::after{content:"";position:absolute;left:10%;right:10%;bottom:-26px;height:90px;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(11,34,70,.26),rgba(11,34,70,0) 72%);filter:blur(14px)}
.cs::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(135deg,#fff 0%,var(--sil-b) 22%,#fff 42%,var(--sil-c) 62%,#fff 82%,#B9C8EC 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cs-screen-col{min-width:0}
.cs-assure,.cs-ledger{display:none}

/* --- the screen: VSL. Sized in cqw so the poster scales as one picture. --- */
.screen{position:relative;margin:0;aspect-ratio:16/9;border-radius:23px;overflow:hidden;isolation:isolate;cursor:pointer;container-type:inline-size;
  background:radial-gradient(120% 95% at 28% 0%,#1649C9 0%,#0C2F96 38%,#061B66 72%,#030F44 100%);
  box-shadow:inset 0 0 0 1px rgba(125,170,255,.2),0 1px 0 #fff,0 18px 40px -24px rgba(6,27,102,.75)}
.screen::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4.5cqw),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4.5cqw);
  -webkit-mask:radial-gradient(80% 80% at 50% 40%,#000,transparent 85%);mask:radial-gradient(80% 80% at 50% 40%,#000,transparent 85%)}
.sc-app{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:33cqw 1fr;align-items:center;gap:7cqw;padding:10cqw 5.5cqw 9.5cqw 6.5cqw}
.sc-dial{position:relative;width:100%;aspect-ratio:1;filter:drop-shadow(0 3cqw 4cqw rgba(0,0,0,.45))}
.sc-dial svg{width:100%;height:100%}
.sc-arc,.sc-arc-glow{stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--sv,78))}
.sc-arc-glow{opacity:.55;filter:blur(3px)}
.sc-read{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9cqw;padding-bottom:2cqw}
.sc-lbl,.sc-ill{font:700 1.45cqw/1 var(--f);letter-spacing:.24em;color:rgba(255,255,255,.62)}
.sc-ill{color:var(--lime)}
.sc-num{font:800 9.4cqw/1 var(--f);letter-spacing:-.045em;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 3cqw rgba(125,249,255,.35)}
.sc-side{display:flex;flex-direction:column;gap:2.2cqw;min-width:0;padding-top:3cqw}
.sc-rows{display:flex;flex-direction:column;gap:1.6cqw}
.sc-rows li{display:flex;align-items:center;justify-content:space-between;gap:2cqw;height:8.6cqw;padding:0 1.8cqw 0 2.6cqw;border-radius:2.2cqw;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11)}
.sc-rows b{display:block;font:700 2.35cqw/1.1 var(--f);color:#fff}
.sc-rows div span{display:block;margin-top:.5cqw;font:500 1.8cqw/1.1 var(--f);color:rgba(255,255,255,.58);white-space:nowrap}
.sc-st{position:relative;flex:none;width:13.5cqw;height:4.6cqw}
.sc-st em{position:absolute;inset:0;display:grid;place-items:center;border-radius:99px;font:800 1.55cqw/1 var(--f);font-style:normal;letter-spacing:.08em;text-transform:uppercase;opacity:0}
.st-r{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.26)}
.st-d{background:rgba(125,249,255,.18);color:var(--cyan);border:1px solid rgba(125,249,255,.45)}
.st-x{background:var(--lime);color:var(--ink);box-shadow:0 0 2.4cqw rgba(199,255,60,.55)}
/* poster state: one removed, one disputing, one in review */
.sc-rows li:nth-child(1) .st-x,.sc-rows li:nth-child(2) .st-d,.sc-rows li:nth-child(3) .st-r{opacity:1}

.sc-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .6s;
  background:radial-gradient(42% 52% at 50% 50%,rgba(3,12,52,.62) 0%,rgba(3,12,52,.3) 60%,rgba(3,12,52,0) 100%),linear-gradient(180deg,rgba(3,12,52,.18) 0%,rgba(3,12,52,0) 30%,rgba(3,12,52,.12) 55%,rgba(3,12,52,.86) 100%)}
.sc-watch{position:absolute;z-index:4;left:3.6cqw;top:3.6cqw;height:max(24px,6cqw);padding:0 max(9px,2.4cqw);font-size:max(9.5px,1.75cqw);gap:max(6px,1.3cqw)}
.sc-ph{position:absolute;z-index:4;right:3.6cqw;top:3.6cqw;display:inline-flex;align-items:center;height:max(22px,5.2cqw);padding:0 max(8px,1.8cqw);border-radius:99px;border:1px dashed rgba(199,255,60,.6);color:var(--lime);font:700 max(8.5px,1.5cqw)/1 var(--f);letter-spacing:.14em}
.screen[data-src]:not([data-src=""]) .sc-ph{display:none}
.sc-play{position:absolute;z-index:5;left:50%;top:47%;width:clamp(58px,17cqw,92px);aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 40% 30%,#EFFFB8 0%,var(--lime) 55%,#AEE822 100%);color:var(--ink);
  box-shadow:0 0 0 max(5px,1.4cqw) rgba(255,255,255,.18),0 0 0 max(6px,1.6cqw) rgba(255,255,255,.12),0 14px 34px -8px rgba(0,0,0,.6),0 0 46px rgba(199,255,60,.45),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .4s var(--ease)}
.sc-play::before{content:"";position:absolute;inset:-4px;border-radius:50%;animation:playring 2.6s ease-out infinite}
@keyframes playring{0%{box-shadow:0 0 0 0 rgba(199,255,60,.7)}75%,100%{box-shadow:0 0 0 22px rgba(199,255,60,0)}}
.sc-play svg{width:38%;height:38%;margin-left:7%;fill:currentColor}
.screen:hover .sc-play{transform:translate(-50%,-50%) scale(1.06)}
.sc-cap{position:absolute;z-index:4;left:4.2cqw;right:4.2cqw;bottom:4.4cqw;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;pointer-events:none}
.sc-cap b{font:700 max(13px,3.15cqw)/1.15 var(--f);letter-spacing:-.02em;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5);max-width:62%;text-wrap:balance}
.sc-dur{flex:none;height:max(22px,4.6cqw);padding:0 max(8px,1.6cqw);display:inline-flex;align-items:center;border-radius:6px;background:rgba(0,0,0,.42);color:#fff;font:700 max(11px,2cqw)/1 var(--f);font-variant-numeric:tabular-nums}
.sc-prog{position:absolute;z-index:4;left:0;right:0;bottom:0;height:max(3px,.7cqw);background:rgba(255,255,255,.16)}
.sc-prog i{position:absolute;inset:0;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--blue),var(--cyan-2),var(--lime))}
.sc-glass{position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;background:radial-gradient(90% 60% at 30% -18%,rgba(255,255,255,.16),rgba(255,255,255,0) 60%)}
.sc-end{position:absolute;z-index:7;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:max(12px,2.6cqw);padding:6cqw;text-align:center;background:rgba(3,12,52,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s linear .5s}
.sc-end b{font:700 max(15px,3.4cqw)/1.2 var(--f);color:#fff;letter-spacing:-.02em}
.screen.is-end .sc-end{opacity:1;visibility:visible;transition-delay:0s}
.screen video{position:absolute;inset:0;z-index:8;width:100%;height:100%;object-fit:cover;background:#000}

/* demo: tapping the poster before the real video exists plays the app for a few seconds */
.screen.is-demo{cursor:default}
.screen.is-demo .sc-scrim{opacity:.25}
.screen.is-demo .sc-play,.screen.is-demo .sc-watch,.screen.is-demo .sc-cap b{opacity:0;pointer-events:none;transition:opacity .35s}
.screen.is-demo .sc-prog i{transform:scaleX(1);transition:transform 9s linear}
.screen.is-demo .sc-rows em{opacity:0;animation:stCycle 9s var(--ease) both;animation-delay:calc(var(--d)*.7s)}
.screen.is-demo .sc-rows .st-r{animation-name:stR}
.screen.is-demo .sc-rows .st-d{animation-name:stD}
.screen.is-demo .sc-rows .st-x{animation-name:stX}
@keyframes stR{0%,28%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-40%)}}
@keyframes stD{0%,28%{opacity:0;transform:translateY(40%)}34%,58%{opacity:1;transform:none}64%,100%{opacity:0;transform:translateY(-40%)}}
@keyframes stX{0%,58%{opacity:0;transform:translateY(40%) scale(.9)}66%,100%{opacity:1;transform:none}}
.screen.is-demo .sc-arc,.screen.is-demo .sc-arc-glow{transition:stroke-dashoffset 6s var(--ease)}

/* --- the deck: the quiz --- */
.deck{position:relative;padding:14px 9px 9px}
.dk-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;min-height:30px;padding:0 4px}
.dk-back{justify-self:start;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px 0 6px;margin-left:-4px;border:0;border-radius:99px;background:transparent;color:var(--mute);font:600 13px/1 var(--f);cursor:pointer}
.dk-back:hover{background:rgba(11,34,70,.05);color:var(--ink)}
.dk-back svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dk-k{grid-column:2;font:700 10.5px/1 var(--f);letter-spacing:.17em;color:var(--blue-2);white-space:nowrap;text-align:center}
.dk-n{grid-column:3;justify-self:end;font:600 12.5px/1 var(--f);color:var(--mute-2);font-variant-numeric:tabular-nums}
.dk-n b{font-weight:800;color:var(--ink);font-size:14px}

/* the pledge groove, as the progress */
.groove{position:relative;height:24px;margin:8px 12px 14px 6px;--gf:.07}
.gv-track{position:absolute;left:0;right:0;top:6px;height:12px;border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#C9D3E6,#E9EEF8 40%,#F7F9FD);box-shadow:inset 0 2px 3px rgba(11,34,70,.28),inset 0 -1px 0 #fff,0 1px 0 #fff}
.gv-fill{position:absolute;inset:0;border-radius:12px;transform:scaleX(var(--gf));transform-origin:0 50%;transition:transform .9s var(--ease);
  background:linear-gradient(90deg,var(--blue-2),var(--cyan-2) 55%,var(--lime));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.12)}
.gv-glow{position:absolute;left:0;right:0;top:0;bottom:0;transform:scaleX(var(--gf));transform-origin:0 50%;transition:transform .9s var(--ease);background:linear-gradient(90deg,rgba(36,88,255,0) 55%,rgba(199,255,60,.85));filter:blur(8px);opacity:.75;pointer-events:none}
.gv-stops{position:absolute;inset:0;pointer-events:none}
.gv-stops i{position:absolute;top:9px;left:calc(var(--p)*100%);width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(11,34,70,.12),0 1px 2px rgba(11,34,70,.2)}
.gv-head{position:absolute;top:12px;left:calc(var(--gf)*100%);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;transition:left .9s var(--ease),opacity .3s;
  background:radial-gradient(circle at 40% 35%,#fff,#E6FF9E 55%,#C7FF3C);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 16px 3px rgba(199,255,60,.75)}
.gv-end{position:absolute;right:-12px;top:12px;width:30px;height:30px;margin-top:-15px;display:grid;place-items:center;border-radius:50%;z-index:2;
  background:linear-gradient(180deg,#E4FF86,#C7FF3C 55%,#AEE822);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(66,110,0,.25),0 0 0 3px rgba(255,255,255,.95),0 10px 24px -8px rgba(94,150,0,.7);transform:scale(0);opacity:0;transition:transform .6s var(--ease),opacity .3s}
.gv-end svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.groove.is-done .gv-end{transform:scale(1);opacity:1}
.groove.is-done .gv-head{opacity:0}

/* steps */
.steps{position:relative}
.step{animation:stepIn .55s var(--ease) both}
.step.is-back{animation-name:stepBack}
@keyframes stepIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes stepBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.q{font:800 22px/1.14 var(--f);letter-spacing:-.03em;text-align:center;text-wrap:balance;padding:0 8px;outline:none}
.q em{font-style:normal;background:linear-gradient(180deg,#2E63FF 0%,var(--blue-2) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.q-sub{margin:6px auto 14px;max-width:34ch;text-align:center;font:500 14.5px/1.4 var(--f);color:var(--mute);text-wrap:balance}

/* keys: machined ivory plates with a sapphire medallion */
.keys{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.key{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;min-height:106px;padding:12px 12px 13px;border:0;border-radius:20px;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;min-width:0;
  background:linear-gradient(150deg,#fff 0%,#F7FAFF 55%,#EEF3FC 100%);
  box-shadow:0 0 0 1px var(--line),0 14px 28px -22px rgba(11,34,70,.6),inset 0 1px 0 #fff;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s}
.key::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(80% 70% at 20% 0%,rgba(36,88,255,.08),transparent 70%)}
.key-t{display:block;font:700 15.5px/1.2 var(--f);letter-spacing:-.015em;color:var(--ink)}
.key-t small{display:block;margin-top:3px;font:500 12.5px/1.25 var(--f);letter-spacing:0;color:var(--mute)}
.key-ck{position:absolute;top:11px;right:11px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:background .3s,box-shadow .3s,transform .4s var(--ease)}
.key-ck svg{width:12px;height:12px;fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s var(--ease) .05s}
@media (hover:hover){
  .key:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-2),0 22px 36px -24px rgba(11,34,70,.65),inset 0 1px 0 #fff}
  .key:hover::after{opacity:1}
}
.key:active{transform:scale(.975)}
.key[aria-checked=true]{background:linear-gradient(150deg,#FBFFEC 0%,#EFFFC8 100%);box-shadow:0 0 0 2px var(--lime),0 0 0 6px rgba(199,255,60,.3),0 18px 34px -22px rgba(94,150,0,.6),inset 0 1px 0 #fff}
.key[aria-checked=true] .key-ck{background:var(--lime);box-shadow:inset 0 0 0 1px rgba(66,110,0,.25),0 4px 10px -4px rgba(94,150,0,.8);transform:scale(1.08)}
.key[aria-checked=true] .key-ck svg{stroke-dashoffset:0}
.key--wide{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;min-height:68px;gap:12px}
.key--wide .key-ck{position:static;margin-left:auto;flex:none}
.keys--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.keys--3 .key{align-items:center;justify-content:center;text-align:center;min-height:116px;gap:11px;padding:16px 6px 14px}
.keys--3 .key-ck{top:8px;right:8px;width:20px;height:20px}

/* mini medallion */
.md{position:relative;flex:none;width:44px;height:44px;border-radius:50%}
.md-bz{position:absolute;inset:0;border-radius:50%;background:var(--steel);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.4),0 8px 16px -8px rgba(11,34,70,.6)}
.md-bz::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(160deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 36%,rgba(0,0,0,0) 62%,rgba(0,0,0,.3) 100%)}
.md-fc{position:absolute;inset:9%;border-radius:50%;background:var(--sapphire);box-shadow:inset 0 4px 9px rgba(0,0,0,.6),inset 0 -2px 6px rgba(60,120,255,.2),0 0 0 1px rgba(0,0,0,.5)}
.md::after{content:"";position:absolute;inset:9%;border-radius:50%;pointer-events:none;background:radial-gradient(90% 55% at 50% -10%,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 45%,rgba(255,255,255,0) 70%)}
.md-g{position:absolute;inset:26%;width:48%;height:48%;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));transition:stroke .3s}
.md--lime .md-g{stroke:var(--lime)}
.md-dial{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-linecap:round}
.md-tr{stroke:rgba(255,255,255,.16);stroke-width:3.6}
.md-ar{stroke:url(#cr-liquid-s);stroke-width:3.6;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--v)*100);filter:drop-shadow(0 0 2px rgba(125,249,255,.5))}
.md-rim{position:absolute;inset:-1px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .3s;
  background:conic-gradient(from var(--hb-ra),transparent 0 62%,rgba(199,255,60,0) 66%,rgba(199,255,60,.95) 78%,#fff 83%,rgba(125,249,255,.6) 88%,transparent 94%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  animation:hb-rim 2.4s linear infinite}
.key[aria-checked=true] .md-rim{opacity:1}
.key[aria-checked=true] .md-g{stroke:var(--lime)}

/* contact */
.ready{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 8px;margin:0 0 8px;font:500 13.5px/1.3 var(--f);color:var(--mute)}
.ready b{color:var(--ink);font-weight:700}
.ready-ck{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:var(--lime);box-shadow:0 4px 10px -4px rgba(94,150,0,.8)}
.ready-ck svg{width:11px;height:11px;fill:none;stroke:var(--ink);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:12px 0 16px}
.chips li{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:rgba(36,88,255,.07);box-shadow:inset 0 0 0 1px rgba(36,88,255,.12);color:var(--blue-2);font:700 12px/1 var(--f)}
.lead{position:relative;display:grid;gap:10px}
.fld{display:block;text-align:left}
.fld > span{display:block;margin:0 0 6px 4px;font:700 10.5px/1 var(--f);letter-spacing:.15em;text-transform:uppercase;color:var(--mute)}
.fld input{width:100%;height:54px;padding:0 16px;border:0;border-radius:16px;outline:none;font:600 16px/1 var(--f);color:var(--ink);
  background:linear-gradient(180deg,#EDF1F9,#F8FAFE);box-shadow:inset 0 2px 3px rgba(11,34,70,.14),inset 0 0 0 1px rgba(11,34,70,.07),0 1px 0 #fff;transition:box-shadow .25s,background .25s}
.fld input::placeholder{color:rgba(11,34,70,.32);font-weight:500}
.fld input:focus{background:#fff;box-shadow:inset 0 1px 2px rgba(11,34,70,.08),0 0 0 2px var(--blue-2),0 0 0 6px rgba(36,88,255,.14)}
.fld em{display:block;margin:6px 0 0 4px;font:600 12.5px/1.3 var(--f);font-style:normal;color:var(--red)}
.fld em:empty{display:none}
.fld.bad input{box-shadow:inset 0 1px 2px rgba(11,34,70,.08),0 0 0 2px #E5484D,0 0 0 6px rgba(229,72,77,.12)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.btn--go{margin-top:4px}
.calm{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font:500 12.5px/1.3 var(--f);color:var(--mute);text-align:center}
.calm svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.consent{margin:6px 4px 2px;font:400 11px/1.45 var(--f);color:var(--mute-2);text-align:center}
.form-err{margin:2px 0 0;padding:10px 12px;border-radius:12px;background:rgba(229,72,77,.08);color:var(--red);font:600 13px/1.35 var(--f);text-align:center}

/* building */
.step--build{display:flex;flex-direction:column;align-items:center;padding:10px 0 18px}
.bd-inst{position:relative;width:132px;height:132px;margin:6px 0 18px;filter:drop-shadow(0 18px 24px rgba(11,34,70,.35))}
.bd-inst svg{width:100%;height:100%}
.bd-inst img{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-56%);opacity:.95}
.bd-arc{stroke-dasharray:100;stroke-dashoffset:100}
.step--build:not([hidden]) .bd-arc{animation:bdArc 2s var(--ease) .1s forwards}
@keyframes bdArc{to{stroke-dashoffset:0}}
.bd-list{display:grid;gap:10px;margin-top:16px;width:100%;max-width:300px}
.bd-list li{display:flex;align-items:center;gap:10px;font:600 14.5px/1.3 var(--f);color:var(--mute);opacity:.35;transition:opacity .4s,color .4s}
.bd-list li.done{opacity:1;color:var(--ink)}
.bd-ck{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:rgba(11,34,70,.07);transition:background .35s}
.bd-ck svg{width:12px;height:12px;fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .3s}
.bd-list li.done .bd-ck{background:var(--lime)}
.bd-list li.done .bd-ck svg{opacity:1}

/* plan */
.step--plan{display:flex;flex-direction:column;align-items:stretch}
.plan-pill{align-self:center;margin:2px 0 12px}
.q--plan{font-size:25px}
.plan{position:relative;overflow:hidden;isolation:isolate;margin:2px 0 14px;padding:16px;border-radius:22px;background:linear-gradient(165deg,#fff 0%,#FAFCFF 60%,#F2F6FD 100%);box-shadow:0 0 0 1px var(--line),0 24px 46px -30px rgba(11,34,70,.45),inset 0 1px 0 #fff}
.plan-sheen{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 46% at 50% -8%,rgba(36,88,255,.09),transparent 60%),radial-gradient(40% 30% at 100% 100%,rgba(199,255,60,.14),transparent 70%)}
.plan-goal{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.plan-goal .md{width:48px;height:48px}
.plan-goal .md-g{stroke:var(--lime)}
.plan-k{display:block;font:700 10px/1 var(--f);letter-spacing:.2em;color:var(--blue-2);margin-bottom:5px}
.plan-goal b{font:800 18px/1.15 var(--f);letter-spacing:-.02em}
.plan-rows{display:grid;gap:11px;padding:13px 0}
.plan-rows li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.plan-rows b{display:block;font:800 15.5px/1.2 var(--f);letter-spacing:-.01em}
.plan-rows div > span{display:block;margin-top:2px;font:500 13.5px/1.4 var(--f);color:var(--mute)}
.chk{position:relative;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(36,88,255,.08)}
.chk svg{width:28px;height:28px;fill:none;stroke:var(--blue-2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chk circle{stroke:rgba(36,88,255,.45)}
.chk--lime{background:rgba(199,255,60,.35)}
.chk--lime svg{stroke:#3E6B00}
.chk--lime circle{stroke:rgba(94,150,0,.45)}
.plan-price{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 14px;padding-top:14px;border-top:1px solid var(--line)}
.price{display:flex;align-items:flex-start;gap:2px;line-height:1;flex:none}
.price-cur{font:700 20px/1 var(--f);margin-top:5px;color:var(--ink)}
.price b{font:800 48px/.9 var(--f);letter-spacing:-.055em;background:linear-gradient(180deg,var(--ink) 0%,#163A8A 62%,var(--blue-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em}
.price-per{align-self:flex-end;margin:0 0 5px 4px;font:600 14px/1 var(--f);color:var(--mute)}
.price-note{flex:1 1 100%;font:500 11.5px/1.35 var(--f);color:var(--mute)}
.plan-promise{display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px 14px 10px 10px;border-radius:16px;background:linear-gradient(135deg,rgba(199,255,60,.3),rgba(199,255,60,.1));box-shadow:inset 0 0 0 1px rgba(94,150,0,.16)}
.plan-promise .badge-art{--hb:46px}
.plan-promise p{font:500 14px/1.3 var(--f);color:var(--ink)}
.plan-promise b{font-weight:800}
.plan-proof{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font:500 12.5px/1 var(--f);color:var(--mute)}
.plan-proof b{color:var(--ink);font-weight:700}
.plan-proof .stars i{width:12px;height:12px}

.dk-foot{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 0 6px;font:500 12px/1.3 var(--f);color:var(--mute-2)}
.dk-foot svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- sections below the console ---------- */
.sec{position:relative;z-index:1;padding:64px 0 0}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:24px}
.kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;font:700 11px/1.2 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2);text-align:center}
.kicker::before,.kicker::after{content:"";width:18px;height:2px;flex:none;background:currentColor;border-radius:2px;opacity:.6}
.h2{font:800 29px/1.06 var(--f);letter-spacing:-.035em;text-wrap:balance;max-width:18ch}
.fine{font-size:12px;line-height:1.5;color:var(--mute)}
.sec-fine{max-width:62ch;margin:18px auto 0;text-align:center}

/* proof: the case */
.case{position:relative;overflow:hidden;isolation:isolate;display:grid;gap:22px;padding:24px 20px 18px;border-radius:28px;background:linear-gradient(165deg,#fff 0%,#F6F9FF 55%,#EEF3FC 100%);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(11,34,70,.05),0 24px 44px -26px rgba(11,34,70,.34),inset 0 2px 0 #fff}
.case-sheen{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 50% at 100% 30%,rgba(125,249,255,.18),transparent 70%),radial-gradient(50% 40% at 0% 100%,rgba(199,255,60,.14),transparent 70%)}
.case-h{display:flex;flex-direction:column;gap:4px}
.case-big{font:800 46px/.95 var(--f);letter-spacing:-.05em;background:linear-gradient(180deg,var(--ink) 0%,#163A8A 62%,var(--blue-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em}
.case-sub{font:700 19px/1.2 var(--f);letter-spacing:-.02em;color:var(--ink)}
.case-sub em{font-style:normal;color:var(--blue-2)}
.case-q{margin-top:14px;font:500 16px/1.45 var(--f);color:var(--ink);max-width:38ch}
.case-who{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:12px;font:500 13px/1.3 var(--f);color:var(--mute)}
.case-who b{color:var(--ink);font-weight:800}
.case-dials{display:flex;justify-content:center;gap:16px}
.dial{position:relative;width:132px;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dial-rim{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 210deg,#fff 0,#C9D6F5 12%,#fff 26%,#9DB4E8 44%,#F3F6FF 58%,#AEBFEA 76%,#fff 90%,#C9D6F5 100%);box-shadow:0 26px 50px -24px rgba(9,36,72,.5),0 0 0 1px rgba(9,36,72,.06)}
.dial-rim::after{content:"";position:absolute;inset:5px;border-radius:50%;background:radial-gradient(100% 100% at 50% 28%,#fff,#F0F4FF 68%,#E2E9FB);box-shadow:inset 0 2px 8px rgba(9,36,72,.14)}
.dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dial-track{fill:none;stroke:rgba(9,36,72,.1);stroke-width:10;stroke-linecap:round}
.dial-arc{fill:none;stroke:url(#pf-grad);stroke-width:10;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--df)*100);filter:drop-shadow(0 0 4px rgba(125,249,255,.6))}
.js .case:not(.in) .dial-arc{stroke-dashoffset:100}
.js .case.in .dial-arc{transition:stroke-dashoffset 1.8s var(--ease) .5s}
.dial b{position:relative;font:800 36px/1 var(--f);letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.dial > span:not(.dial-rim){position:relative;margin-top:6px;font:700 9.5px/1 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--blue-2)}
.case-foot{font-size:11.5px;color:var(--mute);text-align:center}

/* proof: reviews (a row you swipe on phones) */
.reviews{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:10px;margin:14px calc(var(--gut)*-1) 0;padding:6px var(--gut) 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);scrollbar-width:none}
.reviews::-webkit-scrollbar{display:none}
.rv{scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;padding:20px 18px 18px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--line),0 24px 44px -32px rgba(11,34,70,.5),inset 0 1px 0 #fff}
.rv-stars{width:96px;height:17px;fill:url(#pf-gold);overflow:visible}
.rv blockquote{font:600 16px/1.4 var(--f);letter-spacing:-.01em;color:var(--ink);flex:1}
.rv-who{font:700 12px/1.3 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-2)}
.rv-who span{color:var(--mute);font-weight:500}

/* what happens next */
.how-list{display:grid;gap:10px;max-width:760px;margin:0 auto}
.how-step{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:18px 18px 18px 16px;border-radius:22px;background:linear-gradient(150deg,#fff 0%,#F7FAFF 55%,#EEF3FC 100%);box-shadow:0 0 0 1px var(--line),0 24px 44px -32px rgba(11,34,70,.5),inset 0 1px 0 #fff}
.how-n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sapphire);color:#fff;font:800 13px/1 var(--f);letter-spacing:.02em;box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(11,34,70,.1),0 10px 18px -8px rgba(6,27,102,.6)}
.how-step:last-child .how-n{background:linear-gradient(180deg,#E4FF86,#C7FF3C 55%,#AEE822);color:var(--ink)}
.how-step b{display:block;font:800 17px/1.2 var(--f);letter-spacing:-.02em;margin-top:2px}
.how-step p{margin-top:4px;font:500 14.5px/1.45 var(--f);color:var(--mute)}
.how-logos{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:12px}
.how-logos img{height:15px;width:auto;opacity:.85}
.how-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.how-pills em{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:99px;font:800 9.5px/1 var(--f);font-style:normal;letter-spacing:.1em;text-transform:uppercase}
.hp-r{background:rgba(11,34,70,.06);color:var(--mute)}
.hp-d{background:rgba(54,201,240,.14);color:#0A7EA6}
.hp-x{background:var(--lime);color:var(--ink);box-shadow:0 4px 12px -4px rgba(94,150,0,.7)}

/* the promise */
.pledge{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;max-width:760px;margin:0 auto;padding:30px 22px 24px;border-radius:30px;background:linear-gradient(165deg,#fff 0%,#F6F9FF 55%,#EEF3FC 100%);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(11,34,70,.05),0 24px 44px -26px rgba(11,34,70,.34),inset 0 2px 0 #fff}
.pledge-bloom{position:absolute;left:50%;top:20%;width:120%;height:90%;transform:translate(-50%,-50%);border-radius:50%;z-index:-1;background:radial-gradient(50% 50% at 50% 50%,rgba(199,255,60,.32),rgba(125,249,255,.12) 45%,transparent 70%);filter:blur(16px)}
.pledge-medal{--hb:96px}
.pledge-line{display:flex;flex-direction:column;font:800 26px/1.08 var(--f);letter-spacing:-.035em;text-wrap:balance}
.pledge-note{max-width:44ch;font-size:12.5px;line-height:1.5;color:var(--mute)}

/* quick answers */
.faq-in{max-width:760px}
.qa{display:grid;gap:8px}
.qa details{border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line),0 18px 34px -30px rgba(11,34,70,.5);overflow:hidden}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:58px;padding:14px 16px 14px 18px;cursor:pointer;list-style:none;font:700 16px/1.3 var(--f);letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:rgba(36,88,255,.08);transition:transform .4s var(--ease),background .3s}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;border-radius:2px;background:var(--blue-2)}
.qa summary i::after{transform:rotate(90deg);transition:transform .4s var(--ease)}
.qa details[open] summary i{background:var(--lime)}
.qa details[open] summary i::before,.qa details[open] summary i::after{background:var(--ink)}
.qa details[open] summary i::after{transform:rotate(0)}
.qa details p{padding:0 18px 18px;font:500 14.5px/1.5 var(--f);color:var(--mute)}

/* last call */
.final{padding-bottom:12px}
.final-in{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.final-h{font-size:31px}
.final .btn{width:100%;max-width:420px}
.final-note{display:flex;flex-direction:column;gap:3px;font:500 13.5px/1.35 var(--f);color:var(--mute)}
.final-note b{font:800 17px/1.2 var(--f);color:var(--ink)}

/* footer */
.foot{position:relative;z-index:1;padding:48px 0 calc(110px + env(safe-area-inset-bottom,0px))}
.foot-in{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;max-width:720px}
.foot .logo{height:20px;width:auto;opacity:.9}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}
.foot-links a{display:inline-block;padding:10px 0;font:600 13px/1 var(--f);color:var(--blue-2);text-decoration:none}
.foot p{font-size:11.5px;line-height:1.55;color:var(--mute-2)}

/* the dock */
.dock{position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:50;transform:translateY(150%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s linear .6s}
.dock.show{transform:none;visibility:visible;transition-delay:0s}
.dock-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 7px 7px 18px;border-radius:999px;background:rgba(255,255,255,.88);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 20px 50px -20px rgba(11,34,70,.55),0 0 0 1px var(--line-2),inset 0 1px 0 #fff}
.dock-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.dock-t b{font:800 14.5px/1.1 var(--f);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-t span{font:500 11.5px/1.1 var(--f);color:var(--mute);white-space:nowrap}
.dock .btn{flex:none;height:46px}

/* ---------- small phones ---------- */
@media (max-width:359px){
  .h1{font-size:29px}
  .key{min-height:100px;padding:11px 10px 12px}
  .key-t{font-size:14.5px}
  .keys--3 .key-t{font-size:13.5px}
  .md{width:40px;height:40px}
  .rate > span:last-child{display:none}
}

/* ---------- tablets ---------- */
@media (min-width:600px){
  :root{--gut:28px}
  .h1{font-size:44px;max-width:17ch}
  .sub{font-size:17.5px;max-width:40ch}
  .console{max-width:640px}
  .deck{padding:20px 16px 12px}
  .q{font-size:26px}
  .keys{gap:10px}
  .reviews{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr 1fr;margin:14px 0 0;padding:6px 0 0;overflow:visible}
  .case{grid-template-columns:1fr auto;align-items:center;padding:30px 30px 20px}
  .case-foot{grid-column:1/-1}
  .case-dials{flex-direction:column}
  .h2{font-size:36px}
  .final-h{font-size:40px}
  .pledge-line{font-size:32px}
}

/* ---------- desktop: the console splits into screen | deck ---------- */
@media (min-width:900px){
  :root{--gut:40px}
  .top-in{height:72px}
  .top .logo{height:24px}
  .rate{font-size:14px;gap:9px}
  .rate .stars i{width:14px;height:14px}
  .hero{padding:10px 0 34px}
  .h1{font-size:clamp(50px,5vw,66px);max-width:20ch}
  .sub{margin-top:16px;font-size:19px;max-width:46ch}
  .console{max-width:var(--max)}
  .cs{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start;gap:4px;padding:9px;border-radius:36px}
  .screen{border-radius:28px}
  .cs-screen-col{position:sticky;top:16px;display:flex;flex-direction:column;gap:16px}
  .cs-assure{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 6px 10px}
  .cs-assure li{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 10px;border-radius:20px;background:rgba(255,255,255,.65);box-shadow:0 0 0 1px var(--line),inset 0 1px 0 #fff}
  .cs-assure .badge-art{--hb:48px}
  .cs-assure li > span:last-child{display:flex;flex-direction:column;gap:3px;font:500 12px/1.25 var(--f);color:var(--mute);min-width:0}
  .cs-assure b{font:800 16px/1 var(--f);letter-spacing:-.02em;color:var(--ink)}
  .cs-ledger{display:grid;grid-template-columns:auto 1fr;align-items:stretch;margin:0 6px 10px;border-radius:20px;background:rgba(255,255,255,.65);box-shadow:0 0 0 1px var(--line),inset 0 1px 0 #fff;overflow:hidden}
  .lg-k{display:flex;align-items:center;padding:0 16px;font:700 10px/1.25 var(--f);letter-spacing:.18em;color:var(--blue-2);writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;background:rgba(36,88,255,.05)}
  .cs-ledger ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .cs-ledger li{position:relative;display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:70px;padding:10px 12px 10px 14px;border-left:1px solid var(--line)}
  .cs-ledger li:first-child{border-left:0}
  .cs-ledger li span{font:700 9.5px/1.2 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:18px}
  .cs-ledger li b{font:700 14.5px/1.15 var(--f);letter-spacing:-.01em;color:rgba(11,34,70,.25);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cs-ledger li i{position:absolute;top:10px;right:10px;width:16px;height:16px;border-radius:50%;background:rgba(11,34,70,.06)}
  .cs-ledger li.set b{color:var(--ink)}
  .cs-ledger li.set i{background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.6l4 4 8-9' fill='none' stroke='%230B2246' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;box-shadow:0 3px 8px -3px rgba(94,150,0,.8)}
  .cs-ledger li.set.fresh i{animation:lgPop .5s var(--ease)}
  @keyframes lgPop{0%{transform:scale(.4)}60%{transform:scale(1.15)}100%{transform:none}}
  /* the deck fills the row; short questions sit in the middle of it */
  .cs{align-items:stretch}
  .cs-screen-col{align-self:start}
  .deck{display:flex;flex-direction:column}
  .steps{flex:1;display:flex;flex-direction:column;justify-content:center}
  .deck{padding:22px 18px 12px 22px}
  .q{font-size:25px}
  .key{min-height:104px}
  .key--wide{min-height:68px}
  .sec{padding-top:110px}
  .sec-head{margin-bottom:34px}
  .h2{font-size:clamp(38px,3.6vw,48px)}
  .case{grid-template-columns:1fr auto;gap:40px;padding:44px 48px 22px}
  .case-dials{flex-direction:row;gap:22px}
  .dial{width:176px}
  .dial b{font-size:46px}
  .case-big{font-size:72px}
  .case-sub{font-size:24px}
  .case-q{font-size:18px}
  .reviews{grid-template-columns:repeat(4,1fr);gap:12px}
  .rv blockquote{font-size:15.5px}
  .how-list{grid-template-columns:repeat(3,1fr);max-width:none;gap:12px}
  .how-step{grid-template-columns:1fr;gap:16px;padding:24px}
  .pledge{flex-direction:row;text-align:left;gap:30px;padding:38px 44px;flex-wrap:wrap;justify-content:center}
  .pledge-medal{--hb:120px}
  .pledge-line{font-size:42px}
  .pledge > div{min-width:0}
  .pledge-note{flex-basis:100%;text-align:center}
  .final-h{font-size:clamp(42px,4.4vw,58px)}
  .dock{left:50%;right:auto;width:min(520px,100% - 32px);transform:translate(-50%,150%)}
  .dock.show{transform:translate(-50%,0)}
}

/* ---------- motion preferences + review captures ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .kin .c,.js .reveal{opacity:1;transform:none}
}
html.static{scroll-behavior:auto}
html.static *,html.static *::before,html.static *::after{animation:none!important;transition:none!important}
html.static.js .kin .c,html.static.js .reveal{opacity:1;transform:none}
html.static .badge-rim,html.static .md-rim{--hb-ra:300deg}
html.static .hb-tick{stroke-dashoffset:0}
html.static .hb-live-ring{opacity:0}
html.static .badge-glow{opacity:.7}
html.static.js .case .dial-arc{stroke-dashoffset:calc(100 - var(--df)*100)}
html.static .bd-arc{stroke-dashoffset:0}