/* ScanNod landing page and privacy page. "Zest" look.
   Tokens and fonts come from tokens.css (linked first). Light theme only.
   Motion: every animated start state sits behind html.m, which measure.js sets only when
   scripts run and the visitor has not asked for reduced motion. Without it the page is
   complete and still. No inline styles anywhere (the pages' Content-Security-Policy blocks them). */

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:var(--page);margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--fd);text-wrap:balance}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.nw{white-space:nowrap}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-70px;z-index:30;background:#fff;color:var(--blue-ink);padding:10px 14px;border-radius:var(--r-md);border:1px solid var(--edge);box-shadow:var(--lift)}
.skip:focus{top:12px}

/* Ad variants. B (record) is the default; A (automation, in preview) is set on <html> by measure.js. */
html[data-variant="a"] [data-v="b"],html:not([data-variant="a"]) [data-v="a"]{display:none}

/* ---------- type ---------- */
h1{font-weight:300;font-size:var(--fs-hero);line-height:var(--lh-tight);letter-spacing:-.012em}
h1 .w{display:inline-block}
.uline{position:relative;white-space:nowrap;display:inline-block}
.uline::after{content:"";position:absolute;left:0;right:.18em;bottom:-.02em;height:.065em;border-radius:1em;background:var(--scan);transform-origin:left center}
.sub{font-size:var(--fs-lead);line-height:1.45;color:var(--muted);max-width:30em}
.cap{font-size:var(--fs-small);line-height:1.4;color:var(--muted)}
.lab{font:600 18px/1.25 var(--fd)}
.tag{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font:400 var(--fs-mono-s)/1.5 var(--fm);color:var(--muted)}
.tag::before{content:"";flex:none;width:18px;height:3px;border-radius:2px;background:var(--scan)}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;gap:13px;font:500 18px/1 var(--f);letter-spacing:.005em;color:#fff;text-decoration:none;border:0;cursor:pointer;border-radius:var(--r-md);padding:16px 22px 17px;
  background:var(--btn);background-size:220% 100%;background-position:0 0;box-shadow:var(--glow);
  transition:background-position .6s var(--ease),transform .25s var(--ease),box-shadow .35s var(--ease)}
.btn:hover{background-position:100% 0;transform:translateY(-1px);box-shadow:var(--glow-hover)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:var(--t-fast)}
.btn:focus-visible{border-radius:var(--r-md)}
.btn[disabled]{opacity:.6;cursor:default;transform:none}
.btn span{font:400 var(--fs-mono)/1 var(--fm);padding-left:13px;border-left:1px solid rgba(255,255,255,.42)}
.link{font:400 18px/1.2 var(--f);color:var(--blue-ink);background:none;border:0;cursor:pointer;padding:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(31,111,214,.35);transition:text-decoration-color .3s,text-underline-offset .3s var(--ease)}
.link:hover{text-decoration-color:var(--blue-ink);text-underline-offset:7px}
.link.plain{color:var(--muted);text-decoration-color:rgba(102,114,129,.35)}
.link.plain:hover{text-decoration-color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center}
.pitch .cta::after{content:"";flex-basis:100%;order:1;margin-top:-18px}
.pitch .cta .try{order:2}

/* Watch the demo: a small preview tile of the walkthrough */
.watch{display:inline-flex;align-items:center;gap:13px;padding:6px 18px 6px 6px;border:1px solid var(--edge);border-radius:13px;background:#fff;cursor:pointer;font:inherit;color:var(--ink);text-align:left;text-decoration:none;
  box-shadow:var(--lift);transition:border-color .35s,transform .25s var(--ease),box-shadow .35s var(--ease)}
.watch:hover{border-color:var(--edge-hover);transform:translateY(-1px);box-shadow:var(--lift-hover)}
.watch:active{transform:scale(.985);transition-duration:var(--t-fast)}
.watch:focus-visible{border-radius:13px}
.watch-thumb{position:relative;display:block;flex:none;width:80px;height:51px;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,#F8FBFF,#EAF3FC)}
.watch-thumb img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.watch-thumb::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34px;opacity:0;background:linear-gradient(90deg,rgba(58,134,232,0),rgba(53,191,216,.3) 94%,var(--aqua))}
.play{position:absolute;inset:0;margin:auto;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(20,40,70,.2);display:grid;place-items:center;transition:transform .35s var(--ease),box-shadow .35s}
.play svg{width:10px;height:10px;margin-left:2px;fill:var(--blue)}
.watch:hover .play{transform:scale(1.12);box-shadow:0 3px 10px rgba(58,134,232,.35)}
.watch-t{display:flex;flex-direction:column;gap:4px}
.watch-l{font:500 17.5px/1.1 var(--f)}
.watch-m{font:400 var(--fs-mono-s)/1 var(--fm);color:var(--muted)}
.m .watch-thumb::after{animation:idle 5.5s var(--ease-io) 4s infinite}
.m .watch:hover .watch-thumb::after{animation-duration:1.6s;animation-delay:0s}
@keyframes idle{0%{opacity:0;transform:translateX(-40px)}6%{opacity:1}26%{opacity:1}30%,100%{opacity:0;transform:translateX(90px)}}

/* Try it on one case: the hands-on companion, a quiet tinted button */
.try{display:inline-flex;align-items:center;gap:9px;font:500 17px/1 var(--f);color:var(--blue-ink);text-decoration:none;background:var(--faint);border:0;border-radius:var(--r-md);padding:13px 16px 14px;cursor:pointer;transition:background .3s,transform .2s var(--ease)}
.try svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.try:hover{background:var(--faint-hover)}
.try:hover svg{transform:translateX(3px)}
.try:active{transform:scale(.98)}
.try:focus-visible{border-radius:var(--r-md)}

/* Walkthrough player bar */
.player{position:fixed;z-index:20;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(560px,calc(100% - 32px));background:#fff;border:1px solid var(--edge);border-radius:14px;box-shadow:var(--soft),0 0 0 1px rgba(255,255,255,.6);
  padding:13px 14px 14px 18px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"cnt cap btns" "line line line";column-gap:14px;row-gap:11px;align-items:center}
.player .cnt{grid-area:cnt;font:400 12px/1 var(--fm);color:var(--muted);white-space:nowrap}
.player .pcap{grid-area:cap;font:500 var(--fs-ui)/1.2 var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbtns{grid-area:btns;display:flex;gap:4px}
.pb{font:500 15.5px/1 var(--f);color:var(--blue-ink);background:none;border:0;border-radius:8px;padding:10px 10px;min-height:36px;cursor:pointer;transition:background .25s}
.pb:hover{background:var(--faint)}
.pb:focus-visible{border-radius:8px}
.pline{grid-area:line;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.pline i{display:block;height:100%;background:var(--scan);transform-origin:left center;transform:scaleX(0)}
.m .player{animation:pin .5s var(--ease)}
@keyframes pin{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
.m .steps .step{transition:opacity .6s var(--ease)}
.m .steps.playing .step:not(.cur){opacity:.32}
.steps.noanim *,.steps.noanim *::before,.steps.noanim *::after{transition:none!important;animation:none!important}

/* ---------- header + logo ---------- */
.top{position:relative;z-index:2;padding-block:24px}
.word{display:inline-flex;align-items:center;gap:9px;font:500 23px/1 var(--fd);letter-spacing:.005em;color:var(--ink);text-decoration:none}
.word svg{display:block;flex:none}
.logo-line{stroke-dasharray:1;stroke-dashoffset:0}

/* ---------- hero ---------- */
/* On the home page the header lies over the top of the hero, so the wash can run up behind it. */
body[data-page="home"] .top{position:absolute;left:0;right:0;top:0}
/* clip, not hidden: the wash runs past the right edge, and a hidden box could still be scrolled sideways by focus or find-in-page */
.hero{position:relative;overflow:hidden;overflow:clip;padding-top:78px}
.lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:72px;align-items:center;padding-block:28px 104px}
.pitch{display:flex;flex-direction:column;gap:26px;padding-bottom:40px}
.stage{position:relative}
.wash{position:absolute;z-index:0;left:132px;right:-50vw;top:-700px;bottom:74px;background:var(--wash)}
.rep-col{position:relative;z-index:1;max-width:380px}
.join{position:relative;z-index:1;width:2px;height:46px;margin-left:calc(75% - 9px);border-radius:2px;background:var(--scan-v);transform-origin:top center;transition:transform .4s var(--ease)}
.join::after{content:"";position:absolute;left:-3px;bottom:-4px;width:8px;height:8px;border-radius:50%;background:var(--aqua)}
.rec{position:relative;z-index:1;margin-left:min(120px,14%)}

/* ---------- product cards ---------- */
.card{background:#fff;border:1px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--soft);padding:22px;display:flex;flex-direction:column;gap:16px;min-width:0}
.shot{position:relative;border-radius:var(--r-sm);overflow:hidden;background:var(--shot)}
.shot img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.shot::after{content:"";position:absolute;top:0;bottom:0;left:0;width:84px;opacity:0;pointer-events:none;background:linear-gradient(90deg,rgba(58,134,232,0),rgba(58,134,232,.08) 60%,rgba(53,191,216,.35) 97%,var(--aqua))}
/* a ring that opens once around the numbered mark in the screenshot (motion only) */
.ping{position:absolute;width:0;height:0;pointer-events:none}
.ping::before{content:"";position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;border:1.6px solid var(--blue);opacity:0}
.ping-overview{left:81.1%;top:82.8%}
.ping-closeup{left:66.7%;top:70.8%}
.ping-closeup::before{left:-13px;top:-13px;width:26px;height:26px}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-ui);line-height:1.3;font-weight:500}
.ticks li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.ticks li::before{content:"";width:18px;height:18px;border-radius:var(--r-xs);border:1.5px solid var(--blue);background:var(--tick) center/100% no-repeat;margin-top:2px;transition:border-color .3s var(--d,0s),background-size .4s var(--ease) var(--d,0s)}
.ticks li.off{color:var(--muted);font-weight:400}
.ticks li.off::before{border-color:var(--edge-off);background:none}
.ask{font:500 22px/1.2 var(--fd)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pick{font:500 var(--fs-ui)/1.1 var(--f);border-radius:10px;padding:15px 8px 16px;border:1px solid var(--edge);background:#fff;color:var(--ink);cursor:pointer;transition:background .35s var(--ease),color .35s,border-color .35s,transform .2s var(--ease),box-shadow .35s}
.pick:hover{border-color:#B9CDE6}
.pick:active{transform:scale(.975)}
.pick:focus-visible{border-radius:10px}
.pick[aria-pressed="true"]{background:var(--btn-a);border-color:var(--btn-a);color:#fff;box-shadow:0 10px 18px -12px rgba(37,115,218,.8)}
.rec{gap:8px;padding-bottom:18px}
.rec-k{display:flex;align-items:center;gap:9px;font-size:var(--fs-small);color:var(--muted)}
.rec-k::before{content:"";flex:none;width:18px;height:3px;border-radius:2px;background:var(--scan)}
.rec-d{font:500 29px/1.1 var(--fd)}
.rec-m{font:400 var(--fs-mono-s)/18px var(--fm);color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin-top:6px;transition:opacity .5s .3s}
.thumbs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.thumbs .add{border:1px dashed var(--edge-off);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:var(--fs-small);color:var(--muted);min-height:60px}
.rows{display:flex;flex-direction:column;font-size:15.5px}
.rows div{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:11px 0;border-top:1px solid var(--line)}
.rows span:last-child{grid-column:2;grid-row:1 / span 2;align-self:center;white-space:nowrap;text-align:right;font:400 var(--fs-mono-s)/1.4 var(--fm)}
.rows div:first-child{border-top:0;padding-top:0;border-radius:4px}
.rows div:last-child{padding-bottom:0}
.rows b{font:500 var(--fs-mono)/1.5 var(--fm)}
.rows span{color:var(--muted)}
.msg{font-size:var(--fs-ui);line-height:1.45;gap:8px}
.msg .url{color:var(--blue-ink);font:500 var(--fs-mono)/1.5 var(--fm);overflow-wrap:anywhere}

/* ---------- steps: a diagonal walk ---------- */
.steps{list-style:none;margin:0 auto;display:flex;flex-direction:column;gap:44px;padding-block:24px 120px;outline:0}
.step{--sw:640px;--i:0;width:min(100%,var(--sw));margin-left:calc(var(--i) * (100% - var(--sw)) / 2);display:grid;grid-template-columns:118px minmax(0,1fr);align-items:start}
.step:nth-child(2){--i:1}
.step:nth-child(3){--i:2}
.num{font:200 var(--fs-numeral)/.74 var(--fd);letter-spacing:-.04em;background:var(--numeral);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em;user-select:none}
.step h3{font-weight:400;font-size:var(--fs-h3);line-height:var(--lh-head);padding-top:6px;margin-bottom:18px}

/* ---------- why ---------- */
.why{padding-block:0 96px}
.why p{position:relative;font:300 var(--fs-statement)/1.22 var(--fd);padding-block:26px;max-width:26em}
.why p::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--edge);transform-origin:left center;transition:transform 1.1s var(--ease)}

/* ---------- price ---------- */
.buy{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:52px;padding-block:56px 72px;border-top:1px solid var(--edge)}
.amount{font:200 var(--fs-price)/.76 var(--fd);letter-spacing:-.05em;margin-left:-.04em;font-variant-numeric:lining-nums}
.terms{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-bottom:14px}
.terms .sub{max-width:15em}

/* ---------- footer ---------- */
.foot{padding-block:26px 40px;font-size:var(--fs-small);color:var(--muted);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.foot-row{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot a,.doc a,.sheet .cap a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.foot a:hover,.doc a:hover,.sheet .cap a:hover{color:var(--ink)}
.todo{color:var(--ink);font-weight:500;background:var(--faint);border:1px dashed var(--edge-hover);border-radius:6px;padding:0 6px}

/* ---------- Start plan dialog ---------- */
.sheet{border:1px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--soft);padding:0;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:#fff;color:var(--ink)}
.sheet::backdrop{background:rgba(236,244,252,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sheet-in{position:relative;display:flex;flex-direction:column;gap:18px;padding:30px 28px 28px}
.sheet-in::before{content:"";position:absolute;left:28px;top:0;width:44px;height:3px;border-radius:0 0 2px 2px;background:var(--scan)}
.sheet h2{font-weight:400;font-size:1.75rem;line-height:1.15;padding-right:36px}
.sheet .x{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:background .25s,color .25s}
.sheet .x:hover{color:var(--ink);background:var(--faint)}
.sheet .x:focus-visible{border-radius:50%}
.sheet .btn{align-self:flex-start}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:500 15.5px/1.3 var(--f)}
.field .opt{color:var(--muted);font-weight:400}
.field input{font:400 18px/1.2 var(--f);color:var(--ink);background:#fff;border:1px solid #C3CEDB;border-radius:var(--r-md);padding:13px 14px;width:100%;-webkit-appearance:none;appearance:none;transition:border-color .25s,box-shadow .25s}
.field input:hover{border-color:var(--edge-hover)}
.field input:focus-visible{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--ring)}
.field input[aria-invalid="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.field input[aria-invalid="true"]:focus-visible{box-shadow:inset 0 0 0 1px var(--ink),0 0 0 3px var(--ring)}
.field .err{font-size:var(--fs-small);line-height:1.35;font-weight:500;color:var(--ink)}
.field .err:empty{display:none}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.done p{color:var(--muted)}
.done p b{color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.done h2:focus{outline:0}
.m .sheet[open]{animation:sheet-in .45s var(--ease)}
.m .sheet[open]::backdrop{animation:fade .35s ease}
@keyframes sheet-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- privacy page ---------- */
.doc{max-width:calc(720px + 2 * var(--gutter));margin-left:max(0px,calc((100% - var(--page)) / 2));padding-block:36px 72px;display:flex;flex-direction:column;gap:14px}
.doc h1{font-size:clamp(2.4rem,5vw,3.4rem);margin-bottom:10px;padding-bottom:22px;position:relative}
.doc h1::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;border-radius:2px;background:var(--scan)}
.doc h2{font-weight:500;font-size:1.35rem;line-height:1.25;margin-top:24px}
.doc p,.doc li{color:var(--muted)}
.doc ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.doc li::marker{color:var(--blue)}
.doc b{color:var(--ink);font-weight:500}
.doc .back{margin-top:18px}

/* ---------- motion: only under html.m; every start state below is undone by .on ---------- */
.m .r{transition:opacity .8s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
.m .seq:not(.on) .r{opacity:0;transform:translateY(18px)}
.m .seq:not(.on) .uline::after{transform:scaleX(0)}
.m .uline::after{transition:transform .9s var(--ease) .85s}
.m .wash{transition:clip-path 1.3s var(--ease) .1s;clip-path:inset(0)}
.m .seq:not(.on) .wash{clip-path:inset(0 0 0 100%)}
.m .logo-line{animation:draw 1s var(--ease) .15s both}
@keyframes draw{from{stroke-dashoffset:1;opacity:0}15%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
.m .hero.on .report .shot::after{animation:sweep 1s var(--ease-io) .75s both}
@keyframes sweep{0%{opacity:0;transform:translateX(-90px)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(460%)}}
.m .seq.on .ping::before{animation:ping 1.1s var(--ease) var(--ad,0s) both}
@keyframes ping{0%{opacity:0;transform:scale(.4)}30%{opacity:1}100%{opacity:0;transform:scale(1.5)}}
.m .seq:not(.on) .ticks li:not(.off)::before{border-color:var(--edge-off);background-size:0}
/* stagger */
.hl .w:nth-child(1){--d:0s}.hl .w:nth-child(2){--d:.04s}.hl .w:nth-child(3){--d:.08s}.hl .w:nth-child(4){--d:.12s}
.hl .w:nth-child(5){--d:.16s}.hl .w:nth-child(6){--d:.2s}.hl .w:nth-child(7){--d:.24s}.hl .w:nth-child(8){--d:.28s}
.hl .uline .w:nth-child(1){--d:.32s}.hl .uline .w:nth-child(2){--d:.36s}
.pitch .tag{--d:0s}
.pitch .sub{--d:.42s}
.pitch .cta{--d:.55s}
.report{--d:.3s;--ad:1.6s}
.report .ticks li:nth-child(1){--d:1.75s}.report .ticks li:nth-child(2){--d:1.95s}
.build{--ad:.45s}
.build .ticks li:nth-child(1){--d:.7s}.build .ticks li:nth-child(2){--d:.95s}
.msg .r:nth-child(1){--d:.2s}.msg .r:nth-child(2){--d:.35s}.msg .r:nth-child(3){--d:.6s}
/* hero: the tap, then the record stamping in */
.m .hero:not(.tapped) .pick[aria-pressed="true"]{background:#fff;color:var(--ink);border-color:var(--edge);box-shadow:none}
.m .hero.tapped .pick[aria-pressed="true"]{animation:tap .45s var(--ease)}
@keyframes tap{0%{transform:scale(1)}35%{transform:scale(.955)}100%{transform:scale(1)}}
.m .hero:not(.tapped) .join{transform:scaleY(0)}
.m .hero:not(.stamped) .rec{opacity:0;transform:translateY(12px) scale(.985)}
.m .hero:not(.stamped) .rec-m{opacity:0}
.m .hero.stamped .rec{animation:stamp .9s var(--ease) both}
.m .hero .rec.again{animation:again .7s var(--ease)}
@keyframes stamp{0%{opacity:0;transform:translateY(12px) scale(.985);box-shadow:var(--soft),0 0 0 0 var(--ring)}55%{opacity:1;transform:none;box-shadow:var(--soft),0 0 0 6px rgba(58,134,232,.13)}100%{opacity:1;transform:none;box-shadow:var(--soft),0 0 0 12px rgba(58,134,232,0)}}
@keyframes again{0%{box-shadow:var(--soft),0 0 0 0 var(--ring)}100%{box-shadow:var(--soft),0 0 0 12px rgba(58,134,232,0)}}
/* scroll reveals start from a visible, dimmed resting state */
.m .io .card{transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.m .io:not(.on) .card{opacity:.3;transform:translateY(22px)}
.m .io:not(.on) .rows div:first-child{opacity:0;transform:translateY(-6px)}
.m .io .rows div:first-child{transition:opacity .5s .55s,transform .7s var(--ease) .55s}
.m .io.on .rows div:first-child{animation:flash 1.8s ease .55s both}
@keyframes flash{0%,25%{background:rgba(58,134,232,.10);box-shadow:0 0 0 7px rgba(58,134,232,.10)}100%{background:rgba(58,134,232,0);box-shadow:0 0 0 7px rgba(58,134,232,0)}}
.m .why.io:not(.on) p::before{transform:scaleX(0)}
.m .why p:nth-of-type(2)::before{transition-delay:.15s}.m .why p:nth-of-type(3)::before{transition-delay:.3s}
.m .buy .amount{transition:opacity 1s var(--ease),transform 1.3s var(--ease)}
.m .buy.io:not(.on) .amount{opacity:.25;transform:translateY(.12em)}

/* ---------- smaller screens ---------- */
@media (max-width:900px){
  .lead{grid-template-columns:minmax(0,1fr);row-gap:40px;padding-block:20px 72px}
  .pitch{padding-bottom:0;gap:22px}
  .stage{max-width:460px}
  .wash{left:30%;top:-22px}
  .steps{gap:48px;padding-block:8px 80px}
  .step{margin-left:0;width:100%;grid-template-columns:62px minmax(0,1fr)}
  .num{font-size:5.4rem}
  .step h3{font-size:1.45rem;padding-top:2px}
  .why{padding-block:0 64px}
  .buy{grid-template-columns:minmax(0,1fr);row-gap:30px;padding-block:44px 56px}
  .terms{padding-bottom:0}
}
@media (max-width:560px){
  .player{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"cnt btns" "cap cap" "line line";row-gap:6px;padding:8px 8px 14px 16px}
  .player .pcap{white-space:normal;padding-right:8px}
  .pline{margin-top:6px;margin-right:8px}
  .sheet-in{padding:26px 22px 22px}
  .sheet-in::before{left:22px}
}
@media (max-width:380px){
  .card{padding:18px}
  .step{grid-template-columns:50px minmax(0,1fr)}
  .num{font-size:4.6rem}
}
@media print{
  .player,.skip{display:none!important}
}