:root{
  --paper:#FFFFFF; --panel:#F5F8FB; --ink:#0E1F4D; --ink2:#3D4B6B; --ink3:#5A6684; --rule:#DFE4EC; --rule2:#C6CEDB;
  --orange:#C42A12; --orange-f:#F0451C; --orange-t:#FDE6E0;
  --blue:#08794A; --blue-f:#14B86A; --blue-t:#DCF5E8; --blue-x:#0E9A58;
  --night:#0B1736; --night2:#13224A; --nline:#26355E; --ntext:#E8EDF8; --ndim:#97A3C2;
  --display:"Outfit", "Helvetica Neue", Arial, sans-serif;
  --sans:"Figtree", "Helvetica Neue", Arial, sans-serif;
  --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --max:1240px; --pad:clamp(16px,4vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:9}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.mono{font-family:var(--mono)}
code{font-family:var(--mono);font-size:.92em}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.03em;text-wrap:balance}
p{text-wrap:pretty}

.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:60px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.logo .mk{width:30px;height:30px;mix-blend-mode:multiply}
.logo .wm{height:24px;width:auto;mix-blend-mode:multiply;margin-top:2px}
.nav nav{display:flex;gap:22px;margin-left:auto}
.nav nav a{font-size:14px;color:var(--ink2);text-decoration:none}
.nav nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:8px;font:500 15px/1 var(--sans);text-decoration:none;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:var(--paper);white-space:nowrap}
.btn:hover{background:#071331}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule2)}
.btn.ghost:hover{border-color:var(--ink)}
.nav .btn{min-height:36px;font-size:14px;padding:0 14px}
@media (max-width:860px){.nav nav{display:none}.nav .btn{margin-left:auto}}

.hero{padding:72px 0 0}
.eyebrow{font-family:var(--mono);font-size:13px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.eyebrow .tag{border:1px solid var(--rule2);border-radius:4px;padding:2px 8px;color:var(--ink)}
.hero h1{font-size:clamp(44px,7.2vw,104px);line-height:.94;letter-spacing:-.04em;margin:26px 0 0;max-width:13ch}
.hero h1 em{font-style:normal;color:var(--blue-x)}
.hero-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:32px 56px;align-items:end;margin-top:32px}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--ink2);max-width:46ch}
.lede strong{color:var(--ink);font-weight:500}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.cmd{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:0 8px 0 16px;border:1px solid var(--ink);border-radius:8px;background:var(--panel);font:500 15px var(--mono);cursor:pointer;color:var(--ink)}
.cmd .p{color:var(--ink3)}
.cmd .k{font:500 12px var(--sans);background:var(--ink);color:var(--paper);padding:7px 10px;border-radius:5px}
.cmd.done .k{background:var(--blue)}

.trace{margin-top:56px;background:var(--night);color:var(--ntext);border-radius:12px;overflow:hidden;font-family:var(--mono);font-size:13px}
.trace-head{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--nline);color:var(--ndim)}
.trace-head b{color:var(--ntext);font-weight:500}
.trace-head .live{margin-left:auto;display:flex;align-items:center;gap:8px}
.trace-head .live i{width:7px;height:7px;border-radius:50%;background:#2FD07F;display:block}
.trace-body{padding:18px 20px 8px;overflow-x:auto}
.tgrid{min-width:720px;padding-top:28px}
.trow{display:grid;grid-template-columns:200px 1fr 150px;gap:16px;align-items:center;height:34px}
.trow .q{color:var(--ndim);white-space:nowrap}
.trow .q b{color:var(--ntext);font-weight:400}
.lane{position:relative;height:100%}
.lane .bar{position:absolute;top:12px;height:10px;border-radius:2px;background:#2FD07F;transform-origin:left;animation:grow .9s cubic-bezier(.3,.7,.3,1) both}
.lane .bar.late{background:repeating-linear-gradient(135deg,var(--orange-f) 0 6px,#C9301A 6px 12px)}
.trow .out{text-align:right;color:var(--ndim);white-space:nowrap}
.trow .out.ok{color:#7EE2AE}
.trow .out.no{color:#FF8A6B}
.axis{display:grid;grid-template-columns:200px 1fr 150px;gap:16px;height:30px;color:#7F8BAA;font-size:11px}
.ticks{position:relative;border-top:1px solid var(--nline)}
.ticks span{position:absolute;top:6px;transform:translateX(-50%);white-space:nowrap}
.ticks span:last-of-type{transform:translateX(-100%)}
.mark{position:absolute;top:-198px;height:198px;width:0;border-left:1px dashed #97A3C2}
.mark-l{position:absolute;top:0;left:6px;white-space:nowrap;color:var(--ntext);font-size:11px;background:var(--night2);padding:2px 6px;border-radius:3px}
.trace-foot{border-top:1px solid var(--nline);padding:14px 20px;line-height:1.6;color:#7EE2AE}
.trace-foot span{color:var(--ndim)}
@keyframes grow{from{transform:scaleX(0)}}
.d1{animation-delay:.1s}.d2{animation-delay:.25s;animation-duration:2.6s}.d3{animation-delay:.4s}.d4{animation-delay:.55s}.d5{animation-delay:.7s}
.fade{animation:fade .5s ease both}
.f1{animation-delay:2.9s}
@keyframes fade{from{opacity:0}}
.cap{font-size:13px;color:var(--ink3);margin-top:12px}

.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);margin-top:72px}
.proof > div{padding:26px 24px 26px 0}
.proof > div + div{padding-left:24px;border-left:1px solid var(--rule)}
@media (max-width:540px){.proof > div + div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}}
.big{font-family:var(--display);font-size:clamp(40px,4.6vw,60px);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.proof p{font-size:14.5px;color:var(--ink2);margin-top:10px;max-width:28ch}
sup{font-family:var(--mono);font-size:11px;color:var(--ink3)}
.stacks{display:flex;flex-wrap:wrap;gap:6px 20px;padding:18px 0;font-family:var(--mono);font-size:13px;color:var(--ink3)}
.stacks b{color:var(--ink);font-weight:500}

section{padding:112px 0 0}
.sh{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px 40px;align-items:start;border-top:1px solid var(--ink);padding-top:20px}
.sh .no{font-family:var(--mono);font-size:13px;color:var(--ink2)}
.sh h2{font-size:clamp(34px,4.4vw,58px);line-height:1;letter-spacing:-.035em;grid-column:span 2}
@media (max-width:620px){.sh h2{grid-column:auto}}
.intro{font-size:18px;color:var(--ink2);max-width:60ch;margin:28px 0 0}
.intro strong{color:var(--ink);font-weight:500}

.tbl-wrap{overflow-x:auto;margin-top:40px}
table{width:100%;border-collapse:collapse;font-size:15px}
th{font:500 12px var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:0 16px 12px 0;border-bottom:1px solid var(--ink)}
td{padding:14px 16px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top}
td.k{font-family:var(--mono);font-size:14px;white-space:nowrap}
.spec td:nth-child(2){color:var(--ink2);min-width:280px}
.pill{display:inline-block;font:500 12px var(--mono);padding:3px 8px;border-radius:4px;margin:0 4px 4px 0;white-space:nowrap}
.pill.o{background:#E9EDF3;color:var(--ink)}
.pill.g{background:var(--blue-t);color:var(--blue)}
.pill.h{background:#E4E9F5;color:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:13px;color:var(--ink2);align-items:center}

.demo{margin-top:40px;border:1px solid var(--rule2);border-radius:12px;background:var(--panel);padding:24px}
.dtop{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.field{flex:1 1 280px;display:flex;flex-direction:column;gap:6px}
.field label{font:500 12px var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.06em}
.field input{font:400 18px var(--sans);min-height:48px;padding:0 14px;border:1px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink)}
.dtop .btns{display:flex;gap:8px;align-items:flex-end}
.lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px;margin-top:20px}
.lanebox{border:1px solid var(--rule);border-radius:10px;padding:18px;background:#fff;min-height:290px;display:flex;flex-direction:column}
.lanebox h3{font:600 15px var(--sans);letter-spacing:0;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.lanebox h3 span{font:400 12px var(--mono);color:var(--ink3)}
.for{font:13px var(--mono);color:var(--ink3);margin-top:12px}
.for b{color:var(--ink);font-weight:500}
.res{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:4px;flex:1}
.res li{padding:8px 10px;border-radius:6px;background:var(--paper)}
.lanebox.stale{border-color:var(--orange-f)}
.lanebox.stale .res li{background:var(--orange-t)}
.st{font:13px/1.5 var(--mono);margin-top:12px;min-height:40px;color:var(--ink3)}
.st .no{color:var(--orange)} .st .ok{color:var(--blue)}
.score{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);font-size:14px;color:var(--ink2);align-items:baseline}
.score b{font:700 28px var(--display);color:var(--ink);margin-right:6px;font-variant-numeric:tabular-nums}
.score .a b{color:var(--orange)} .score .c b{color:var(--blue)}
.reqs{margin-top:14px;display:flex;flex-direction:column;gap:4px;font:12.5px var(--mono);color:var(--ink3)}
.req{display:grid;grid-template-columns:minmax(120px,180px) 1fr 64px;gap:12px;align-items:center}
.req .q{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.req .t{height:6px;background:#E9EDF3;border-radius:2px;position:relative;overflow:hidden}
.req .t i{position:absolute;inset:0 auto 0 0;width:0;background:var(--blue-f)}
.req.late .t i{background:var(--orange-f)}
.req .ms{text-align:right}
.note{font-size:13.5px;color:var(--ink3);margin-top:16px;max-width:90ch}
.note a{color:var(--ink2)}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:0 40px;margin-top:40px}
.step{padding:22px 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:44px 1fr;gap:4px 8px;align-content:start}
.step .n{font:500 13px var(--mono);color:var(--ink3);padding-top:6px}
.step h3{font-size:22px;letter-spacing:-.02em}
.step p{grid-column:2;color:var(--ink2);font-size:15px}
.modes td:first-child{font-family:var(--mono);font-weight:500;white-space:nowrap}
.modes td{color:var(--ink2)}
.modes tr.def td{background:#EEF2F7}
.modes tr.def td:first-child{color:var(--ink);padding-left:10px}
.console{margin-top:40px;background:var(--night);color:var(--ntext);border-radius:12px;font:13px/1.65 var(--mono);padding:18px 20px;overflow-x:auto}
.console div{white-space:pre}
.console .d{color:var(--ndim)} .console .b{color:#7EE2AE} .console .o{color:#FF8A6B}

.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(520px,100%),1fr));gap:56px 48px;margin-top:48px}
figure{min-width:0}
figure .frame{border-top:1px solid var(--ink);padding-top:20px}
figcaption{font-size:14px;color:var(--ink2);margin-top:14px;max-width:62ch}
figcaption b{color:var(--ink);font-weight:600}
.ftitle{font:600 17px var(--sans);letter-spacing:-.01em}
.fsub{font-size:14px;color:var(--ink3);margin-top:2px}
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;height:240px;margin-top:28px;align-items:end;border-bottom:1px solid var(--ink)}
.colg{display:flex;justify-content:center;align-items:flex-end;gap:6px;height:100%}
.colg div{width:min(34px,38%);position:relative;border-radius:2px 2px 0 0}
.colg .dx{background:var(--ink)}
.colg .ax{background:var(--blue-f)}
.colg div span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font:11px var(--mono);color:var(--ink2);padding-bottom:4px;white-space:nowrap}
.xl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:10px;font-size:12.5px;color:var(--ink2);text-align:center;line-height:1.35}
.key{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.hbar{margin-top:18px}
.hbar .r{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;margin-bottom:6px}
.hbar .r span{color:var(--ink2)}
.hbar .r b{font:500 14px var(--mono)}
.hbar .t{height:12px;background:#E6EBF2;border-radius:2px;overflow:hidden}
.hbar .t i{display:block;height:100%;background:var(--ink)}
.hbar .t i.b{background:var(--blue-f)} .hbar .t i.o{background:var(--orange-f)} .hbar .t i.m{background:#AAB4C8}
.prof th:not(:first-child),.prof td:not(:first-child){text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.prof th.hl,.prof td.hl{background:#EEF2F7;padding-left:12px}
.prof td:first-child{color:var(--ink2)}
.pr td{font-family:var(--mono);font-size:14px}
.pr td:first-child{font-family:var(--sans);font-size:15px}
.mini{display:flex;align-items:center;gap:10px}
.mini .t{flex:1;height:6px;background:#E6EBF2;border-radius:2px;overflow:hidden;min-width:60px}
.mini .t i{display:block;height:100%;background:var(--ink)}
.mini .t i.b{background:var(--blue-f)}
svg.chart{width:100%;height:auto;margin-top:20px;display:block}
svg.chart text{font:11px var(--mono);fill:var(--ink3)}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));margin-top:20px;border-top:1px solid var(--rule)}
.pair > div{padding:22px 24px 4px 0}
.pair > div + div{border-left:1px solid var(--rule);padding-left:24px}
@media (max-width:620px){.pair > div + div{border-left:0;padding-left:0;border-top:1px solid var(--rule)}}
.pair p{font-size:14.5px;color:var(--ink2);margin-top:8px}

.data td.n{font-family:var(--mono);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.data td.bar{width:42%;min-width:160px}
.data td.bar div{height:10px;background:#E6EBF2;border-radius:2px;overflow:hidden;margin-top:6px}
.data td.bar i{display:block;height:100%;background:var(--ink)}
.data tr.ev i{background:var(--orange-f)}
.data tr.rl i{background:var(--blue-f)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:48px;margin-top:64px}
.cf{border:1px solid var(--rule2);border-radius:12px;background:var(--panel);padding:22px;margin-top:20px;font:13.5px/1.6 var(--mono)}
.cf .sit{color:var(--ink3)}
.cf .opt{display:grid;grid-template-columns:80px 1fr 96px;gap:12px;padding:10px 0;border-top:1px solid var(--rule);align-items:baseline}
.cf .opt:first-of-type{margin-top:12px}
.cf .opt .c{text-align:right;color:var(--orange)}
.cf .opt.win{color:var(--blue)}
.cf .opt.win .c{color:var(--blue);font-weight:500}
.tl{list-style:none;margin-top:20px;border-left:1px solid var(--ink)}
.tl li{position:relative;padding:0 0 18px 22px;font-size:15px;color:var(--ink2)}
.tl li::before{content:"";position:absolute;left:-4px;top:8px;width:7px;height:7px;background:var(--ink);border-radius:50%}
.tl li b{display:block;font:500 12.5px var(--mono);color:var(--ink)}

.code{background:var(--night);color:var(--ntext);border-radius:12px;overflow:hidden;margin-top:40px}
.tabs{display:flex;gap:4px;padding:10px 10px 0;border-bottom:1px solid var(--nline);overflow-x:auto}
.tabs button{all:unset;cursor:pointer;font:500 13px var(--mono);color:var(--ndim);padding:12px 14px;border-radius:6px 6px 0 0}
.tabs button[aria-selected="true"]{color:var(--ntext);background:var(--night2)}
.tabs button:focus-visible{outline:2px solid #2FD07F}
pre{font:14px/1.75 var(--mono);padding:22px 24px;overflow-x:auto}
pre .c{color:#7F8BAA} pre .k{color:#FF8A6B} pre .s{color:#7EE2AE}

.stat td:last-child{font-family:var(--mono);white-space:nowrap;text-align:right}
.stat th:last-child{text-align:right}
.met{color:var(--blue)} .nyet{color:var(--orange)}

.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:0 48px;margin-top:32px}
details{border-top:1px solid var(--rule)}
summary{cursor:pointer;list-style:none;padding:18px 0;font:600 17px var(--sans);display:flex;justify-content:space-between;gap:16px;min-height:44px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 20px var(--mono);color:var(--ink3);line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--ink2);padding:0 0 20px;font-size:15.5px}

.end{margin-top:128px;background:var(--panel);border-top:1px solid var(--rule);color:var(--ink);padding:88px 0 40px}
.end .lockup{display:block;width:min(420px,80%);height:auto;mix-blend-mode:multiply;margin-bottom:40px}
.end h2{font-size:clamp(40px,6vw,84px);line-height:.98;letter-spacing:-.04em;max-width:13ch}
.end .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.foot{display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between;align-items:center;margin-top:96px;padding-top:24px;border-top:1px solid var(--rule);font-size:14px;color:var(--ink3)}
.foot nav{display:flex;flex-wrap:wrap;gap:12px 22px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.data{min-width:640px}.spec{min-width:600px}

.hero-top{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-top:26px}
.hero-top h1{margin-top:0}
.hero-mark{width:clamp(180px,24vw,330px);height:auto;mix-blend-mode:multiply;flex:none}
@media (max-width:760px){.hero-mark{display:none}}
.eyebrow .tag{border-color:var(--blue-f);color:var(--blue)}

/* ---------- app-style components ---------- */
.nav nav a.on{color:var(--ink);font-weight:600}
.nav .gh{font-size:14px;color:var(--ink2);text-decoration:none}
.mnav{display:none;margin-left:auto;position:relative;border:0}
.mnav summary{list-style:none;cursor:pointer;min-height:40px;min-width:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule2);border-radius:8px;font:500 14px var(--sans);padding:0 12px}
.mnav summary::-webkit-details-marker{display:none}
.mnav .panel{position:absolute;right:0;top:48px;background:#fff;border:1px solid var(--rule2);border-radius:12px;padding:8px;display:flex;flex-direction:column;min-width:220px;box-shadow:0 18px 40px -18px rgba(14,31,77,.35)}
.mnav .panel a{padding:12px 14px;border-radius:8px;text-decoration:none;font-size:15px}
.mnav .panel a:hover{background:var(--panel)}
@media (max-width:860px){.mnav{display:block}.nav .btn{margin-left:0}.nav .gh{display:none}}

.crumbs{font:13px var(--mono);color:var(--ink3);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.crumbs a{color:var(--ink3);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.page-hero{padding:64px 0 8px}
.page-hero h1{font-size:clamp(40px,5.6vw,76px);line-height:.98;letter-spacing:-.04em;max-width:18ch}
.page-hero h1 em{font-style:normal;color:var(--blue-x)}
.page-hero .lede{margin-top:22px;max-width:58ch}
.page-hero .ctas{margin-top:28px}
.btn.green{background:var(--blue-f);border-color:var(--blue-f);color:var(--ink)}
.btn.green:hover{background:#0FA35D}
.badge{display:inline-flex;align-items:center;gap:6px;font:500 12px var(--mono);padding:4px 9px;border-radius:999px;background:var(--blue-t);color:var(--blue)}
.badge.n{background:#E4E9F5;color:var(--ink)}
.badge.o{background:var(--orange-t);color:var(--orange)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:12px;margin-top:56px}
.stat{border:1px solid var(--rule);border-radius:14px;padding:22px 22px 20px;background:#fff}
.stat .big{color:var(--ink)}
.stat .big.g{color:var(--blue-x)}
.stat p{font-size:14.5px;color:var(--ink2);margin-top:10px}
.stat small{display:block;font:12px var(--mono);color:var(--ink3);margin-top:10px}

/* product duo */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:16px;margin-top:40px}
.prod{border:1px solid var(--rule2);border-radius:16px;padding:28px;background:#fff;display:flex;flex-direction:column;gap:14px}
.prod.dark{background:var(--night);color:var(--ntext);border-color:var(--night)}
.prod.dark p,.prod.dark li{color:var(--ndim)}
.prod.dark .badge{background:#16305A;color:#7EE2AE}
.prod h3{font-size:30px;letter-spacing:-.03em}
.prod p{color:var(--ink2)}
.prod ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--ink2)}
.prod li{display:flex;gap:10px}
.prod li::before{content:"";flex:none;width:16px;height:16px;margin-top:4px;border-radius:50%;background:var(--blue-t) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%2308794A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.prod.dark li::before{background-color:#16305A}
.prod .foot2{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:8px}
.price{font:800 40px var(--display);letter-spacing:-.03em}
.price span{font:500 15px var(--sans);color:var(--ink3);letter-spacing:0}
.prod.dark .price span{color:var(--ndim)}

/* feature grid */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:12px;margin-top:40px}
.fcard{border:1px solid var(--rule);border-radius:14px;padding:22px;background:#fff}
.fcard .ic{width:36px;height:36px;border-radius:10px;background:var(--blue-t);display:grid;place-items:center;margin-bottom:16px}
.fcard .ic svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fcard .ic.r{background:var(--orange-t)} .fcard .ic.r svg{stroke:var(--orange)}
.fcard .ic.n{background:#E4E9F5} .fcard .ic.n svg{stroke:var(--ink)}
.fcard h3{font:600 18px var(--sans);letter-spacing:-.01em}
.fcard p{font-size:15px;color:var(--ink2);margin-top:6px}

/* dashboard (GenClass Cloud) */
.app{border:1px solid var(--rule2);border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 40px 80px -40px rgba(14,31,77,.35);margin-top:48px}
.app-top{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--rule);background:var(--panel);font-size:13px;color:var(--ink2);flex-wrap:wrap}
.app-top .dots{display:flex;gap:6px}.app-top .dots i{width:10px;height:10px;border-radius:50%;background:#D5DBE5;display:block}
.app-top .url{font:12.5px var(--mono);background:#fff;border:1px solid var(--rule);border-radius:6px;padding:4px 10px;color:var(--ink3)}
.app-top .sample{margin-left:auto}
.app-body{display:grid;grid-template-columns:220px minmax(0,1fr)}
@media (max-width:900px){.app-body{grid-template-columns:1fr}.app-side{display:none}}
.app-side{border-right:1px solid var(--rule);padding:16px 12px;display:flex;flex-direction:column;gap:2px;background:#FBFCFE}
.proj{display:flex;align-items:center;gap:10px;padding:8px 10px 16px;border-bottom:1px solid var(--rule);margin-bottom:10px}
.proj img{width:26px;height:26px}
.proj b{font:600 14px var(--sans);display:block}
.proj span{font:12px var(--mono);color:var(--ink3)}
.app-side button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font:500 14px var(--sans);color:var(--ink2)}
.app-side button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-side button:hover{background:var(--panel);color:var(--ink)}
.app-side button[aria-current="true"]{background:var(--blue-t);color:var(--blue)}
.app-side button:focus-visible{outline:2px solid var(--blue-f)}
.app-main{padding:22px;min-width:0}
.app-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.app-head h3{font:700 22px var(--display);letter-spacing:-.02em}
.app-head .ctl{display:flex;gap:8px;flex-wrap:wrap}
.sel{font:500 13px var(--sans);border:1px solid var(--rule2);border-radius:8px;padding:7px 10px;background:#fff;color:var(--ink)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:10px;margin-top:18px}
.kpi{border:1px solid var(--rule);border-radius:12px;padding:14px 16px}
.kpi .k{font:500 12.5px var(--sans);color:var(--ink3)}
.kpi .v{font:700 30px var(--display);letter-spacing:-.03em;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .d{font:12px var(--mono);margin-top:2px}
.up{color:var(--blue)} .dn{color:var(--orange)} .mut{color:var(--ink3)}
.panels{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:10px;margin-top:10px}
@media (max-width:900px){.panels{grid-template-columns:1fr}}
.pnl{border:1px solid var(--rule);border-radius:12px;padding:16px;min-width:0}
.pnl h4{font:600 14px var(--sans);display:flex;justify-content:space-between;gap:8px}
.pnl h4 span{font:12px var(--mono);color:var(--ink3);font-weight:400}
.spark{display:flex;align-items:flex-end;gap:3px;height:150px;margin-top:14px;border-bottom:1px solid var(--rule)}
.spark i{flex:1;background:var(--blue-f);border-radius:2px 2px 0 0;opacity:.9;min-height:2px}
.spark i.r{background:var(--orange-f)}
.axisx{display:flex;justify-content:space-between;font:11px var(--mono);color:var(--ink3);margin-top:6px}
.cat{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.cat .r{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:5px}
.cat .r b{font:500 13px var(--mono)}
.cat .t{height:8px;background:#E9EDF3;border-radius:8px;overflow:hidden}
.cat .t i{display:block;height:100%;background:var(--blue-f);border-radius:8px}
.feed{margin-top:10px;display:flex;flex-direction:column}
.ev{display:grid;grid-template-columns:70px 120px minmax(0,1fr) auto;gap:12px;padding:10px 0;border-top:1px solid var(--rule);font-size:13.5px;align-items:center}
.ev:first-child{border-top:0}
.ev .tm{font:12px var(--mono);color:var(--ink3)}
.ev .msg{color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:700px){.ev{grid-template-columns:1fr auto}.ev .tm,.ev .msg{display:none}}
.rel{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:8px}
.rel th{font:500 11.5px var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--rule)}
.rel td{padding:10px 10px 10px 0;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:13.5px}
.toggle i{width:34px;height:20px;border-radius:20px;background:var(--blue-f);position:relative;display:block}
.toggle i::after{content:"";position:absolute;right:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff}
.toggle.off i{background:#C6CEDB}.toggle.off i::after{right:auto;left:3px}
.view[hidden]{display:none}
.app-note{font-size:12.5px;color:var(--ink3);padding:10px 22px 16px}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px;margin-top:48px;align-items:stretch}
.tier{border:1px solid var(--rule2);border-radius:16px;padding:28px;background:#fff;display:flex;flex-direction:column;gap:16px;position:relative}
.tier.pop{border:2px solid var(--blue-f);box-shadow:0 30px 60px -36px rgba(20,184,106,.6)}
.tier .tag2{position:absolute;top:-13px;left:24px}
.tier h2{font-size:24px;letter-spacing:-.02em}
.tier .who{color:var(--ink2);font-size:15px;min-height:48px}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:15px;color:var(--ink2)}
.tier li{display:flex;gap:10px}
.tier li::before{content:"";flex:none;width:16px;height:16px;margin-top:4px;border-radius:50%;background:var(--blue-t) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%2308794A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.tier .btn{width:100%}
.tier .fine2{font-size:13px;color:var(--ink3)}
.cmp th:not(:first-child),.cmp td:not(:first-child){text-align:center}
.cmp td:first-child{color:var(--ink2)}
.yes{color:var(--blue);font-weight:600}.no2{color:#AAB4C8}

/* forms */
.formcard{border:1px solid var(--rule2);border-radius:16px;padding:28px;background:var(--panel);margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:28px}
.formcard h2{font-size:30px;letter-spacing:-.03em}
.formcard p{color:var(--ink2);margin-top:10px}
.wl{display:flex;flex-direction:column;gap:12px}
.wl label{font:500 13px var(--sans);color:var(--ink2);display:flex;flex-direction:column;gap:6px}
.wl input,.wl select,.wl textarea{font:400 16px var(--sans);min-height:46px;padding:10px 12px;border:1px solid var(--rule2);border-radius:8px;background:#fff;color:var(--ink)}
.wl textarea{min-height:90px;resize:vertical}
.wl input:focus,.wl select:focus,.wl textarea:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.wl .row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px}
.wl .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl .msg{font-size:14px;min-height:20px}
.wl .msg.ok{color:var(--blue)} .wl .msg.err{color:var(--orange)}
.wl small{font-size:12.5px;color:var(--ink3)}

/* architecture */
.arch{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:0;margin-top:40px;border:1px solid var(--rule2);border-radius:16px;overflow:hidden}
.arch > div{padding:24px;border-right:1px solid var(--rule)}
.arch > div:last-child{border-right:0}
@media (max-width:900px){.arch > div{border-right:0;border-bottom:1px solid var(--rule)}}
.arch .lvl{font:500 12px var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.06em}
.arch h3{font-size:22px;margin-top:8px;letter-spacing:-.02em}
.arch p{font-size:14.5px;color:var(--ink2);margin-top:8px}
.arch .free{background:#fff}.arch .link{background:var(--panel)}.arch .paid{background:var(--night);color:var(--ntext)}
.arch .paid p,.arch .paid .lvl{color:var(--ndim)}

/* docs + articles */
.doc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;margin-top:40px}
@media (max-width:900px){.doc{grid-template-columns:1fr;gap:24px}}
.toc{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:2px;font-size:14.5px}
@media (max-width:900px){.toc{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}}
.toc b{font:500 12px var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;margin:14px 0 6px}
.toc a{color:var(--ink2);text-decoration:none;padding:6px 10px;border-radius:6px}
.toc a:hover{background:var(--panel);color:var(--ink)}
.prose{max-width:74ch;font-size:17px;line-height:1.7;color:var(--ink2)}
.prose h2{font-size:32px;color:var(--ink);margin:56px 0 14px;letter-spacing:-.03em;line-height:1.1}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:21px;color:var(--ink);margin:32px 0 10px;letter-spacing:-.02em}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px 22px}
.prose li{margin-bottom:6px}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--blue);text-underline-offset:3px}
.prose code{background:#EEF2F7;color:var(--ink);padding:1px 6px;border-radius:5px;font-size:.88em}
.prose pre{background:var(--night);color:var(--ntext);border-radius:12px;margin:0 0 20px;font-size:14px}
.prose pre code{background:none;color:inherit;padding:0;font-size:inherit}
.prose blockquote{border-left:3px solid var(--blue-f);padding:4px 0 4px 18px;margin:0 0 16px;color:var(--ink)}
.prose table{font-size:15px;margin-bottom:20px}
.callout{border:1px solid var(--rule2);background:var(--panel);border-radius:12px;padding:16px 18px;margin:0 0 20px;font-size:15.5px}
.callout b{color:var(--ink)}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:12px;margin-top:40px}
.gcard{border:1px solid var(--rule);border-radius:14px;padding:22px;text-decoration:none;display:flex;flex-direction:column;gap:8px;background:#fff;transition:border-color .2s}
.gcard:hover{border-color:var(--ink)}
.gcard .k2{font:500 12px var(--mono);color:var(--ink3)}
.gcard h3{font:600 19px var(--sans);letter-spacing:-.01em;color:var(--ink)}
.gcard p{font-size:14.5px;color:var(--ink2)}
.gcard span.more{font-size:14px;color:var(--blue);margin-top:auto;font-weight:500}
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:0;border-top:1px solid var(--ink);margin-top:40px}
.principles > div{padding:22px 24px 22px 0;border-bottom:1px solid var(--rule)}
.principles h3{font:600 17px var(--sans)}
.principles p{font-size:15px;color:var(--ink2);margin-top:6px}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:24px;margin-top:72px;padding-top:32px;border-top:1px solid var(--rule)}
.foot-cols b{font:600 14px var(--sans);display:block;margin-bottom:10px}
.foot-cols a{display:block;font-size:14px;color:var(--ink2);text-decoration:none;padding:4px 0}
.foot-cols a:hover{color:var(--ink)}
.badge{white-space:nowrap}
.prod > .badge,.page-hero > .wrap > .badge{align-self:flex-start;justify-self:start}
.ev{grid-template-columns:70px auto minmax(0,1fr) auto}
@media (max-width:700px){.ev{grid-template-columns:1fr auto}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi .v{font-size:24px}}
@media (max-width:520px){.nav .btn{display:none}.nav .wrap{gap:12px}}
.logo .lk{height:37px;width:auto;display:block}
.end .lockup{width:220px;height:auto;mix-blend-mode:normal;margin-bottom:36px}
@media (max-width:520px){.logo .lk{height:32px}}

/* ---------- type scale v2: calmer, one column, product above the fold ---------- */
h1,h2,h3{font-weight:650;letter-spacing:-.02em}
.hero{padding:56px 0 0}
.hero-top{display:block;margin-top:18px}
.hero h1,.hero-top h1{font-size:clamp(34px,4.4vw,58px);line-height:1.06;letter-spacing:-.025em;max-width:20ch;margin:0}
.hero-mark{display:none}
.hero-row{display:block;margin-top:18px}
.lede{font-size:clamp(16px,1.25vw,18px);line-height:1.6;max-width:58ch}
.hero .ctas,.page-hero .ctas{margin-top:26px}
.app{margin-top:40px}
section{padding:88px 0 0}
.sh{display:block;border-top:0;padding-top:0}
.sh .no{display:block;font-size:12.5px;color:var(--blue);letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}
.sh h2{font-size:clamp(26px,2.7vw,36px);line-height:1.15;letter-spacing:-.02em;max-width:26ch}
.intro{font-size:16.5px;line-height:1.65;margin-top:14px;max-width:62ch}
.big{font-size:clamp(28px,2.6vw,36px);letter-spacing:-.025em}
.stat p{font-size:14px}
.page-hero{padding:52px 0 8px}
.page-hero h1{font-size:clamp(32px,3.8vw,50px);line-height:1.08;letter-spacing:-.025em;max-width:22ch}
.price{font-size:32px}
.prod h3{font-size:24px}
.tier h2{font-size:21px}
.formcard h2{font-size:26px}
.arch h3{font-size:19px}
.step h3{font-size:19px}
.fcard h3{font-size:17px}
.end{padding:72px 0 36px;margin-top:104px}
.end h2{font-size:clamp(28px,3.2vw,42px);line-height:1.1;letter-spacing:-.02em;max-width:22ch}
.end .lockup{width:160px;margin-bottom:28px}
.prose h2{font-size:26px;margin:44px 0 12px}
.prose h3{font-size:19px}
.prose{font-size:16.5px}
summary{font-size:16px}
@media (max-width:620px){section{padding:64px 0 0}.hero{padding:36px 0 0}}

/* ---------- home v3: centered hero + live lab ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.hero3{padding:64px 0 0;text-align:center}
.hero3 .announce{display:inline-flex;align-items:center;gap:8px;font:500 13px var(--sans);color:var(--ink2);border:1px solid var(--rule2);border-radius:999px;padding:5px 12px 5px 6px;text-decoration:none}
.hero3 .announce b{font:600 11.5px var(--mono);background:var(--blue-t);color:var(--blue);border-radius:999px;padding:2px 8px}
.hero3 .announce:hover{border-color:var(--ink3)}
.hero3 h1{font-size:clamp(34px,4.6vw,58px);line-height:1.06;letter-spacing:-.025em;max-width:19ch;margin:22px auto 0}
.hero3 h1 em{font-style:normal;color:var(--blue-x)}
.hero3 .lede{margin:18px auto 0;max-width:60ch}
.hero3 .ctas{justify-content:center;margin-top:26px}
.hero3 .install-line{margin-top:18px;display:flex;justify-content:center}
.fw{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:22px;font:500 13px var(--mono);color:var(--ink3)}
.fw b{color:var(--ink2);font-weight:500}
.fw .br{display:none}
.lab{margin:44px auto 0;border:1px solid var(--rule2);border-radius:16px;background:#fff;box-shadow:0 30px 70px -40px rgba(14,31,77,.35);overflow:hidden;text-align:left}
.lab-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:8px;border-bottom:1px solid var(--rule);background:var(--panel)}
.lab-tabs [role=tab]{all:unset;cursor:pointer;font:500 14px var(--sans);color:var(--ink2);padding:9px 14px;border-radius:8px}
.lab-tabs [role=tab][aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(14,31,77,.12)}
.lab-tabs [role=tab]:focus-visible{outline:2px solid var(--blue-f)}
.lab-live{margin-left:auto;display:flex;align-items:center;gap:8px;font:500 12.5px var(--mono);color:var(--blue);padding:0 8px}
.lab-live i{width:8px;height:8px;border-radius:50%;background:var(--blue-f);box-shadow:0 0 0 4px var(--blue-t)}
.lab-body{display:grid;grid-template-columns:minmax(0,1fr) 340px}
@media (max-width:980px){.lab-body{grid-template-columns:1fr}}
.lab-stage{padding:20px;min-width:0}
.lab-hint{font-size:14.5px;color:var(--ink2);margin-bottom:14px;max-width:70ch}
.lab-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.lab-ctl input{flex:1 1 240px;font:400 16px var(--sans);min-height:44px;padding:0 14px;border:1px solid var(--rule2);border-radius:8px;color:var(--ink)}
.lab-ctl input:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.lab-note{font:13px var(--mono);color:var(--ink3)}
.lab-lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px;margin-bottom:14px}
.lane2{border:1px solid var(--rule);border-radius:12px;padding:14px;min-height:210px;display:flex;flex-direction:column;gap:8px;background:#fff}
.lane2.gc{border-color:#BFE9D2;background:#FBFFFC}
.lane2.stale{border-color:var(--orange-f);background:#FFF9F7}
.lane2-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px}
.lane2-h span{font:12px var(--mono);color:var(--ink3)}
.lane2-for{font:12.5px var(--mono);color:var(--ink3)}
.lane2-for code{color:var(--ink)}
.lane2 ul{list-style:none;display:flex;flex-direction:column;gap:4px;font-size:14px}
.lane2 li{padding:6px 9px;border-radius:6px;background:var(--panel)}
.lane2.stale li{background:var(--orange-t)}
.lane2-st{font:12.5px var(--mono);color:var(--ink3);margin-top:auto}
.lane2.stale .lane2-st{color:var(--orange)}
.lane2-big{font-size:14px;color:var(--ink2)}
.lane2-big b{font:650 30px var(--display);color:var(--ink);margin-right:6px}
.lane2.stale .lane2-big b{color:var(--orange)}
.lane2 .btn{align-self:flex-start}
.lab-insp{border-left:1px solid var(--rule);background:#FAFBFD;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
@media (max-width:980px){.lab-insp{border-left:0;border-top:1px solid var(--rule)}}
.insp-h{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.pill2{font:500 11.5px var(--mono);padding:3px 9px;border-radius:999px;background:#E4E9F5;color:var(--ink)}
.pill2.ready{background:var(--blue-t);color:var(--blue)} .pill2.error,.pill2.unavailable{background:var(--orange-t);color:var(--orange)}
.insp-kv{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.insp-kv div{border:1px solid var(--rule);border-radius:8px;padding:8px 10px;background:#fff;min-width:0}
.insp-kv dt{font:11.5px var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}
.insp-kv dd{font:500 13px var(--sans);margin-top:2px;overflow-wrap:anywhere}
.insp-ctl{display:flex;gap:6px;flex-wrap:wrap}
.insp-ctl button{all:unset;cursor:pointer;font:500 12.5px var(--mono);padding:7px 10px;border:1px solid var(--rule2);border-radius:7px;background:#fff}
.insp-ctl button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.insp-ctl button:focus-visible{outline:2px solid var(--blue-f)}
.insp-ctl select{font:500 12.5px var(--mono);border:1px solid var(--rule2);border-radius:7px;padding:6px 8px;background:#fff;color:var(--ink)}
.insp-feed{list-style:none;display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto;font:12.5px/1.45 var(--mono)}
.insp-feed li{padding:8px 10px;border:1px solid var(--rule);border-radius:8px;background:#fff;overflow-wrap:anywhere}
.insp-feed li.act{border-color:#9FE0BE;background:var(--blue-t)}
.insp-feed li.exp{opacity:.75}
.insp-feed .k{color:var(--ink);font-weight:500} .insp-feed .ok{color:var(--blue);font-weight:600} .insp-feed .mut{color:var(--ink3)} .insp-feed .subj{display:block;color:var(--ink3);font-size:11.5px}
.insp-feed details summary{font:500 11.5px var(--mono);color:var(--blue);padding:4px 0 0;min-height:0;cursor:pointer}
.insp-feed details summary::after{content:""}
.insp-feed pre{font:11px/1.45 var(--mono);white-space:pre-wrap;background:var(--night);color:var(--ntext);border-radius:6px;padding:8px;margin-top:6px;max-height:220px;overflow:auto}
.insp-foot{font-size:12px;color:var(--ink3)}
.trust-note{font:12.5px var(--mono);color:var(--ink3);margin:10px auto 0;max-width:80ch}
.trust-note a{color:var(--ink2)}
.notice{display:block;border:1px solid var(--rule2);border-left:3px solid var(--orange);background:var(--panel);border-radius:10px;padding:12px 16px;font-size:15px;color:var(--ink);margin-top:16px;max-width:70ch}
.codetabs{margin-top:28px}
.final{margin-top:96px;background:var(--night);color:var(--ntext);border-radius:20px;padding:56px 32px;text-align:center}
.final h2{font-size:clamp(26px,3vw,38px);color:#fff;max-width:24ch;margin:0 auto}
.final p{color:var(--ndim);margin:12px auto 0;max-width:56ch}
.final .ctas{justify-content:center;margin-top:24px}
.final .cmd{background:transparent;color:#fff;border-color:#3A4A75}.final .cmd .k{background:#fff;color:var(--ink)}
.final .cmd .p{color:var(--ndim)}

/* ---------- lab v2: double-click invoice + problem radar ---------- */
.lab-title{font:600 14px var(--sans);color:var(--ink);padding:9px 8px}
.lab-chip{font:500 12px var(--mono);color:var(--orange);background:var(--orange-t);border-radius:999px;padding:4px 9px;white-space:nowrap}
.lab-chip span+span::before{content:"· "}
.lab-chip-link{font:500 12.5px var(--mono);color:var(--ink2);padding:0 6px}
.lab-intro{font-size:13.5px;color:var(--ink2);padding:12px 24px 0}
.dup{padding:24px;border-bottom:1px solid var(--rule)}
.dup-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.dup-head h3,.radar-app h3{font-size:clamp(20px,2.2vw,26px);line-height:1.15;letter-spacing:-.02em}
.dup-head p,.radar-app p{font-size:14.5px;color:var(--ink2);margin-top:6px;max-width:62ch}
.dup-go{min-width:180px}
.dup-go:disabled{opacity:.55;cursor:progress}
.dup-lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px}
.inv{border:1.5px solid var(--rule);border-radius:14px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:12px;transition:border-color .25s,background .25s}
.inv.bad{border-color:var(--orange-f);background:#FFF8F6}
.inv.good{border-color:var(--blue-f);background:#F6FDF9}
.inv-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tag-off,.tag-on{font:600 12px var(--mono);letter-spacing:.02em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.tag-off{background:var(--panel);color:var(--ink3)} .tag-on{background:var(--blue-t);color:var(--blue)}
.btn.sm{min-height:34px;font-size:13.5px;padding:0 12px}
.inv-box{border:1px solid var(--rule);border-radius:10px;overflow:hidden;min-height:170px;background:#fff}
.inv-box-h{font:500 12px var(--mono);color:var(--ink3);padding:8px 12px;border-bottom:1px solid var(--rule);background:var(--panel)}
.inv-box ul{list-style:none}
.inv-box li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;padding:10px 12px;border-bottom:1px solid var(--rule);font-size:14px;animation:inv-in .35s ease-out}
.inv-box li.inv-empty{display:block;color:var(--ink3);font-size:13.5px;border:0;animation:none}
.inv-from{font-weight:600;color:var(--ink)}
.inv-subj{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-t{font:12px var(--mono);color:var(--ink3)}
.inv-box li.dup{background:var(--orange-t)}
.inv-box li.dup .inv-t{color:var(--orange);font-weight:600}
@keyframes inv-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.inv-box li{animation:none}}
.inv-verdict{min-height:22px;font-size:14px;color:var(--ink2)}
.inv.bad .inv-verdict b{color:var(--orange)} .inv.good .inv-verdict b{color:var(--blue)}
.inv-verdict b{font:650 17px var(--display);margin-right:4px}
.dup-quote{margin-top:14px;font:13px/1.5 var(--mono);color:var(--ink2);background:var(--panel);border-left:3px solid var(--blue-f);border-radius:6px;padding:10px 12px;overflow-wrap:anywhere}
.dup-quote b{color:var(--blue)}
.radar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
@media (max-width:900px){.radar{grid-template-columns:1fr}}
.radar-app{padding:24px;min-width:0}
.radar-ctl{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 12px}
.radar-ctl input{flex:1 1 220px;font:400 16px var(--sans);min-height:44px;padding:0 14px;border:1px solid var(--rule2);border-radius:8px;color:var(--ink)}
.radar-ctl input:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.radar-mini{display:flex;flex-direction:column;gap:8px}
.radar-mini>div{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border:1px solid var(--rule);border-radius:10px;padding:10px 12px;font-size:14px}
.mini-k{font:12px var(--mono);color:var(--ink3);min-width:92px}
.radar-mini b{font-weight:600}
.radar-mini b.bad{color:var(--orange)}
.radar-mini .btn{margin-left:auto}
.mini-flag{font:12px var(--mono);border-radius:999px;padding:2px 8px}
.mini-flag.bad{background:var(--orange-t);color:var(--orange)} .mini-flag.good{background:var(--blue-t);color:var(--blue)}
.radar-feed{background:var(--night);color:var(--ntext);padding:18px;min-width:0;display:flex;flex-direction:column;gap:12px}
.radar-feed-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:12.5px var(--mono);color:var(--ndim)}
.radar-feed-h>b{font:600 14px var(--sans);color:#fff}
.radar-feed-h span b{color:#fff}
#gc-feed{list-style:none;display:flex;flex-direction:column;gap:8px;max-height:380px;overflow:auto}
#gc-feed .feed-empty{font-size:13.5px;color:var(--ndim);border:1px dashed var(--nline);border-radius:10px;padding:14px}
.bug{border:1px solid var(--nline);border-left:3px solid #F5A524;border-radius:10px;background:var(--night2);padding:11px 12px;font-size:13.5px;animation:inv-in .35s ease-out}
.bug.fixed{border-left-color:var(--blue-f)}
.bug-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.bug-top b{font-weight:600;color:#fff}
.bug-conf{font:12px var(--mono);color:#F5C66A;white-space:nowrap}
.bug.fixed .bug-conf{color:#6BE3A4}
.bug-bar{height:3px;border-radius:2px;background:var(--nline);margin:8px 0}
.bug-bar i{display:block;height:100%;border-radius:2px;background:#F5A524}
.bug.fixed .bug-bar i{background:var(--blue-f)}
.bug-subj{font:12px var(--mono);color:var(--ndim);overflow-wrap:anywhere}
.bug-ev{font-size:13px;color:var(--ntext);margin-top:6px}
.bug-out{font:12.5px var(--mono);color:var(--ndim);margin-top:6px}
.bug.fixed .bug-out{color:#6BE3A4}
.bug details summary{font:500 12px var(--mono);color:#8FB4FF;cursor:pointer;margin-top:6px;min-height:0}
.bug pre{font:11px/1.45 var(--mono);white-space:pre-wrap;background:#060E24;color:var(--ntext);border-radius:6px;padding:8px;margin-top:6px;max-height:220px;overflow:auto}
.lab-foot{font-size:13px;color:var(--ink3);padding:14px 24px;border-top:1px solid var(--rule);background:var(--panel)}
.bug-n{font:600 11.5px var(--mono);color:var(--ndim);margin-left:auto}
.bug-n:empty{display:none}
.bug-ev:empty{display:none}
.bug details{border:0;padding:0;margin:0;background:none}
.bug details summary{display:block;padding:0;border:0}
.bug details summary::after,.bug details summary::before{content:none}

/* ---------- home v5: short landing page ---------- */
#catches .fcard{display:flex;flex-direction:column}
.fcard .fnum{font:12px/1.5 var(--mono);color:var(--ink3);margin-top:auto;padding-top:12px;text-wrap:balance}
.fcard .fnum b{color:var(--ink);font-weight:600}
.disclose{font-size:14.5px;color:var(--ink2);margin-top:16px;max-width:76ch}
.disclose a{color:var(--ink);white-space:nowrap}
#faq summary>span{text-wrap:pretty}
#how .steps{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.console.first{margin-top:28px}
.console.first div{white-space:pre-wrap;overflow-wrap:anywhere}
.console.first div+div{margin-top:6px}
kbd{font:500 12.5px var(--mono);border:1px solid var(--rule2);border-bottom-width:2px;border-radius:5px;padding:1px 6px;background:#fff;color:var(--ink)}
.stats+.tbl-wrap{margin-top:28px}
.notice.planned{border-left-color:var(--orange);margin-top:0;margin-bottom:18px}

/* self-healing mesh behind the hero (public/mend.js) */
/* the stage fills most of the first screen, with the text in its upper part so open lattice shows around and below
   it; it stops a little short of the fold so the next section shows (61px is the header) */
.hero3 .mend-stage{position:relative;overflow:hidden;margin-top:-64px;padding:clamp(56px,10vh,112px) 0 clamp(64px,10vh,120px);min-height:min(calc(100vh - 133px),880px);min-height:min(calc(100svh - 133px),880px)}
.hero3+section{padding-top:40px}
.hero3 .mend-stage>.wrap{position:relative;z-index:1}
.hero3 .mend{position:absolute;inset:0;z-index:0;pointer-events:none;display:block}
.hero3 .mend-cap{position:absolute;right:16px;bottom:12px;z-index:1;margin:0;font:11px/1.4 var(--mono);color:var(--ink3);pointer-events:none}
.hero3 .mend-cap span+span::before{content:" · "}
.hero3 .mend-cap span:empty{display:none}
@media (max-width:640px){.hero3 .mend-cap{left:16px;right:16px}.hero3 .mend-cap span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero3 .mend-cap span+span::before{content:none}}

/* ---------- phones: the landing page (640px and under) ---------- */
/* The hero fills the first screen under the 61px header. The text sits high as one block, the same width edge to edge
   (two equal buttons, then the install line), and the rest of the screen is open lattice where the breaks happen.
   Below it, the boxed cards become ruled rows. */
@media (max-width:640px){
  .hero3 .mend-stage{display:flex;flex-direction:column;padding:28px 0 88px;min-height:calc(100vh - 61px);min-height:calc(100svh - 61px)}
  /* the screen's spare height goes one part above the text and five below it, where the breaks happen */
  .hero3 .mend-stage::before{content:"";flex:1 1 0;max-height:72px}
  .hero3 .mend-stage::after{content:"";flex:5 1 0}
  .hero3 .announce{font-size:12.5px;padding:4px 11px 4px 5px}
  .hero3 h1{font-size:clamp(34px,9.8vw,42px);line-height:1.04;margin-top:20px}
  .hero3 .lede{margin-top:16px;line-height:1.55}
  .hero3 .ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
  .hero3 .ctas .btn{padding:0 8px}
  .hero3 .install-line{margin-top:10px}
  .hero3 .install-line .cmd{width:100%;justify-content:space-between}
  .hero3 .fw{gap:4px 16px;margin-top:18px;font-size:12.5px}
  .hero3 .fw .br{display:block;flex-basis:100%;height:0}
  .hero3 .mend-cap{bottom:14px;text-align:center;line-height:1.5}
  /* the announcement keeps its size; its tap area is 45px tall */
  .hero3 .announce{position:relative}
  .hero3 .announce::after{content:"";position:absolute;inset:-8px -4px}

  .hero3~section .sh h2{font-size:clamp(25px,7.2vw,30px);line-height:1.14}

  /* what it catches: a ruled list, the line icon as the mark, label, sentence, then the number with its label */
  .hero3~#catches .fgrid{display:block;margin-top:24px;border-top:1px solid var(--ink)}
  .hero3~#catches .fcard{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:14px;align-content:start;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:15px 0 16px;background:none}
  .hero3~#catches .fcard .ic{grid-row:1/span 3;width:22px;height:22px;margin:0;background:none;border-radius:0;place-items:start}
  .hero3~#catches .fcard .ic svg{width:20px;height:20px;margin-top:1px}
  .hero3~#catches .fcard h3{font-size:16.5px;line-height:1.3}
  .hero3~#catches .fcard p{font-size:14.5px;line-height:1.5;margin-top:3px}
  .hero3~#catches .fcard .fnum{margin-top:0;padding-top:7px;font-size:11.5px}

  /* results: ruled rows, the number in a left column beside what it counts and where it comes from */
  .hero3~#proof .stats{gap:0;margin-top:24px;border-top:1px solid var(--ink)}
  .hero3~#proof .stat{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:14px;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:18px 0;background:none}
  .hero3~#proof .stat .big{grid-row:1/span 2;font-size:28px}
  .hero3~#proof .stat p{margin-top:0;font-size:14.5px;line-height:1.5}
  .hero3~#proof .stat small{margin-top:8px;font-size:11.5px;line-height:1.5}

  /* how it works */
  .hero3~#how .steps{margin-top:24px}
  .hero3~#how .step{padding:16px 0 18px;grid-template-columns:36px 1fr}
  .hero3~#how .step .n{padding-top:4px}
  .hero3~#how .step p{font-size:14.5px;line-height:1.55}

  /* install: the tabs stay one row and scroll sideways inside the block, like the code */
  .hero3~#install .codetabs{margin-top:24px}
  .hero3~#install .tabs{padding:8px 8px 0;scrollbar-width:none}
  .hero3~#install .tabs::-webkit-scrollbar{display:none}
  .hero3~#install .tabs button{white-space:nowrap;padding:0 12px;flex:none;box-sizing:border-box;display:flex;align-items:center;min-height:44px}
  .hero3~#install .tabs button:focus-visible{outline-offset:-2px}
  .hero3~#install pre:focus-visible{outline-offset:-3px}
  .hero3~#install pre{font-size:13px;padding:18px 16px}
  .hero3~#install .disclose{font-size:14px}

  /* the live demo: one 16px inset throughout, the run settings on their own lines, nothing wider than the screen */
  .lab{margin-top:28px;border-radius:14px}
  .lab-tabs{padding:10px 8px 12px;gap:6px 4px}
  .lab-chip{display:flex;flex-wrap:wrap;gap:2px 14px;border-radius:8px;line-height:1.45}
  .lab-chip span+span::before{content:none}
  .lab-live{margin-left:0;flex-basis:100%;padding:0 8px}
  .lab-intro{padding:14px 16px 0;font-size:14px}
  .dup{padding:18px 16px 20px}
  .dup-head{gap:14px;margin-bottom:16px}
  .dup-go{width:100%}
  .dup-lanes{gap:12px}
  .inv{padding:12px}
  .inv-box{min-height:118px}
  .radar-app{padding:18px 16px 20px}
  .radar-mini>div{gap:6px 10px}
  .mini-k{min-width:76px}
  .radar-feed{padding:16px}
  .radar-feed-h{flex-wrap:wrap}
  .radar-feed-h>span{white-space:nowrap}
  .lab-foot{padding:14px 16px}
  .lab button,.lab .btn{touch-action:manipulation}
  .lab .btn.sm{min-height:44px}
  .lab-chip-link{flex-basis:100%;display:flex;align-items:center;min-height:44px;padding:0 8px}

  /* FAQ and the closing call to action */
  .hero3~#faq .faq{margin-top:20px}
  .hero3~#faq summary{padding:16px 0}
  .final{margin-top:64px;border-radius:16px;padding:40px 16px}
  .final .ctas{flex-direction:column;align-items:stretch;gap:10px}
  .final .cmd{justify-content:space-between;gap:10px;font-size:13.5px;white-space:nowrap}

  /* footer: the install line and the GitHub button full width like the hero's; two link columns, each link 44px tall */
  .end{margin-top:72px;padding:48px 0 28px}
  .end .lockup{width:132px;margin-bottom:22px}
  .end .row{margin-top:24px;flex-direction:column;align-items:stretch;gap:10px}
  .end .row .cmd{justify-content:space-between}
  .foot-cols{grid-template-columns:1fr 1fr;gap:28px 16px;margin-top:44px;padding-top:28px}
  .foot-cols a{display:flex;align-items:center;min-height:44px;padding:0;line-height:1.35}
  .foot{margin-top:40px}

  /* the menu opens as a sheet the width of the screen, under the header */
  .mnav{position:static}
  .mnav summary{min-height:44px}
  .mnav .panel{left:0;right:0;top:100%;min-width:0;border-width:0 0 1px;border-radius:0 0 14px 14px;padding:4px 16px 16px;box-shadow:0 24px 40px -24px rgba(14,31,77,.35)}
  .mnav .panel a{padding:13px 2px;border-bottom:1px solid var(--rule);border-radius:0;font-size:16px}
  .mnav .panel a:hover{background:none}
  .mnav .panel a:last-child{border:0;margin-top:14px;background:var(--ink);color:var(--paper);border-radius:8px;text-align:center;font-weight:500}
}

/* Short phones (760px tall and under: most phones once the browser's bars are counted). The text block is tighter and
   starts just under the header, so the band under it keeps room for a break and its note: at least 140px between the
   framework names and the caption, more where the screen has it. */
@media (max-width:640px) and (max-height:760px){
  .hero3 .mend-stage{padding-top:10px;padding-bottom:176px}
  .hero3 .mend-stage::before{max-height:0;max-height:max(0px,calc(100svh - 700px))}
  .hero3 h1{line-height:1;margin-top:12px;font-size:clamp(30px,min(9.8vw,5.2vh),42px);font-size:clamp(30px,min(9.8vw,5.2svh),42px)}
  .hero3 .lede{margin-top:10px;font-size:16px;line-height:1.5}
  .hero3 .ctas{margin-top:16px}
  .hero3 .install-line{margin-top:8px}
  .hero3 .fw{margin-top:12px;line-height:1.4}
  .hero3 .mend-cap{bottom:6px;line-height:1.36}
}

/* under 360px: each install line stays on one line and inside its box, and the announcement on one line */
@media (max-width:359px){
  .cmd{font-size:13px;gap:8px;white-space:nowrap}
  .final{padding-left:12px;padding-right:12px}
  .final .cmd{font-size:12px;padding-left:12px}
  .hero3 .announce{font-size:11.5px;gap:6px}
  .hero3 .announce b{font-size:11px;padding:2px 6px}
}

/* ---------- pricing v2: the plans as one ruled comparison, built from billing/plans.json ---------- */
.price-hero h1{max-width:26ch}
.price-sec{padding-top:40px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.plan{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;padding:18px 28px 12px;border-left:1px solid var(--rule);min-width:0}
.plan:first-child{border-left:0;padding-left:0}
.plan:last-child{padding-right:0}
.plan-k{font:500 12.5px var(--mono);color:var(--ink3)}
.plan h3{font:650 26px/1.1 var(--display);letter-spacing:-.02em;margin-top:8px}
.plan-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:16px}
.plan-price b{font:700 48px/1 var(--display);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.plan-price span{font:500 14px var(--sans);color:var(--ink3)}
.plan-sum{font-size:15px;color:var(--ink2);margin-top:14px;max-width:36ch}
.plan-cta{margin-top:22px}
.plan-cta .btn{width:100%}
.plan-cta .btn.off{cursor:default;color:var(--ink3);border-style:dashed}
.plan-cta .btn.off:hover{border-color:var(--rule2)}
.plan-cta p{font-size:13.5px;line-height:1.5;color:var(--ink3);margin-top:10px;max-width:38ch}
.plan-feat{list-style:none;margin-top:24px;border-top:1px solid var(--ink);font-size:15px;color:var(--ink2)}
.plan-feat li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--rule)}
.plan-feat li:last-child{border-bottom:0}
.plan-feat li::before{content:"";flex:none;width:14px;height:14px;margin-top:5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.1L13 4.6' fill='none' stroke='%230E1F4D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.plan-feat li.inc{font:500 12px/1.5 var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;padding:12px 0 10px}
.plan-feat li.inc::before{display:none}
.plan-feat li.soon{color:var(--ink3)}
.plan-feat li.soon::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.2' fill='none' stroke='%235A6684' stroke-width='1.4' stroke-dasharray='2.2 2'/%3E%3C/svg%3E")}
.plan-feat li.soon em{font:500 12.5px var(--mono);font-style:normal;white-space:nowrap}
.plans-more{padding:16px 0 0;font-size:15.5px;color:var(--ink2)}
.plans-more a{color:var(--ink);font-weight:500;text-underline-offset:3px}
@media (max-width:860px){
  .plans{grid-template-columns:1fr;border-top:0;border-bottom:0}
  .plan{display:block;padding:18px 0 4px;border-left:0;border-top:1px solid var(--ink)}
  .plan + .plan{margin-top:36px}
  .plan:last-child{border-bottom:1px solid var(--ink)}
  .plan-sum,.plan-cta p{max-width:none}
}
.pnotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));border-top:1px solid var(--ink);margin-top:32px}
.pnotes > div{padding:20px 24px 20px 0}
.pnotes > div + div{padding-left:24px;border-left:1px solid var(--rule)}
@media (max-width:620px){.pnotes > div + div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}}
.pnotes h3{font:600 17px/1.35 var(--sans);letter-spacing:-.01em}
.pnotes p{font-size:15px;color:var(--ink2);margin-top:6px}
.ent{margin-top:32px;border-top:1px solid var(--ink)}
.ent-h,.ent-r{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(0,2fr) minmax(0,1.3fr);gap:8px 32px}
.ent-h{font:500 12px var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;padding:12px 0;border-bottom:1px solid var(--ink)}
.ent-r{padding:18px 0;border-bottom:1px solid var(--rule)}
.ent-r h3{font:600 17px/1.4 var(--sans);letter-spacing:-.01em}
.ent-r p{font-size:15px;color:var(--ink2)}
.ent-r a{color:var(--ink)}
.ent-l{display:none}
@media (max-width:760px){.ent-h{display:none}.ent-r{grid-template-columns:1fr;gap:6px}.ent-l{display:block;font:500 11.5px var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;margin-top:6px}}
/* the header with Pricing in it: no wrapped links between the phone menu (860px) and wide screens */
.nav nav a,.nav .gh{white-space:nowrap}
@media (max-width:1080px){.nav .wrap{gap:18px}.nav nav{gap:16px}.nav .gh:not(.signin){display:none}}
/* docs on a phone: long code lines scroll inside their block instead of widening the page */
@media (max-width:900px){.doc{grid-template-columns:minmax(0,1fr)}}
.prose code{overflow-wrap:anywhere}

/* ---------- visual bugs: the homepage section (partials/visual.html), /visual (pages/visual.html) and the scan box
   (public/scan-box.js); markup from site/visual.py. One block, appended last, so it merges beside other lanes. ---------- */
.vis .sh h2{font-size:clamp(30px,4.3vw,54px);line-height:1.06;letter-spacing:-.03em;max-width:21ch}
.vis .intro{font-size:clamp(16.5px,1.35vw,18.5px);max-width:62ch}
.scanbox{margin-top:30px;max-width:780px}
.scanbox label{display:block;font:500 12px var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.scanbox-row{display:flex;gap:10px}
.scanbox input{flex:1 1 auto;min-width:0;font:400 19px var(--sans);min-height:58px;padding:0 18px;border:1px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink)}
.scanbox input::placeholder{color:var(--ink3);opacity:1}
.scanbox input:focus{outline:2px solid var(--blue);outline-offset:2px}
.scanbox input[aria-invalid="true"]{border-color:var(--orange)}
.scanbox .btn{min-height:58px;padding:0 30px;font-size:17px;border-radius:10px;flex:none}
.scanbox-msg{min-height:22px;margin-top:8px;font-size:14.5px;color:var(--ink2)}
.scanbox-msg[data-state="error"]{color:var(--orange)}
.scanbox-help{font-size:14px;color:var(--ink2);max-width:72ch}
.scanbox-help a{color:var(--ink);white-space:nowrap}
.vart{display:block;width:100%;height:auto}
.vspec-fig{margin-top:56px}
.vspec{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 20px;border-top:1px solid var(--ink);padding-top:22px}
.vspec h3{font:600 15.5px/1.3 var(--sans);letter-spacing:-.005em;min-height:2.6em;margin-bottom:10px;text-wrap:balance}
.vspec p{font-size:14px;line-height:1.5;color:var(--ink2);margin-top:10px}
.vspec code{display:block;font:12px var(--mono);color:var(--ink3);margin-top:6px;overflow-wrap:anywhere}
.vspec .vnone{font:500 12px var(--mono);color:var(--orange);margin-top:4px}
.vspec-fig figcaption,.vfam-fig figcaption{max-width:90ch;margin-top:22px}
.vspec-fig figcaption a,.vfam-fig figcaption a{color:var(--ink);white-space:nowrap}
.vnote{margin-top:22px}
.vstate{margin-top:30px;max-width:780px;border-top:1px solid var(--ink)}
.vstate>div{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:4px 20px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule)}
.vstate dt{font:500 12px var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.06em}
.vstate dd{font-size:15.5px;line-height:1.45;color:var(--ink)}
.vstate dd a{color:var(--ink)}
.vstate .due{padding:16px 0 18px}
.vstate .due dd{font:700 clamp(26px,2.7vw,36px)/1.1 var(--display);letter-spacing:-.025em;font-variant-numeric:tabular-nums;text-wrap:balance}
.vstate .due dd .vsample{font-family:var(--mono);letter-spacing:0}
.vwhen{white-space:nowrap}
.vlive{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px 56px;margin-top:56px;align-items:start}
.vbars{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.vrow{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:6px 18px;align-items:center}
.vrow .vn{font-size:14.5px;line-height:1.35;color:var(--ink)}
.vpair{display:flex;flex-direction:column;gap:2px}
.vb{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:10px;align-items:center}
.vb .t{height:10px;background:#E6EBF2;border-radius:0 2px 2px 0;overflow:hidden}
.vb .t i{display:block;height:100%;border-radius:0 2px 2px 0;min-width:2px}
.vb .t i.a{background:var(--ink)} .vb .t i.c{background:#7A879F} /* 3:1 on the track and on white; #AAB4C8 is 1.7:1 on the track */
.vb b{font:500 13px var(--mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
details.tview{border-top:0;margin-top:14px}
details.tview summary{display:inline-flex;justify-content:flex-start;align-items:center;gap:8px;min-height:44px;padding:0;font:500 13px var(--mono);color:var(--ink2)}
details.tview summary::after{font-size:15px}
details.tview .tbl-wrap{margin-top:4px}
.vtbl td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.vtbl td.n,.vtbl th:not(:first-child){text-align:right}
.vtbl.vspec-t td:last-child{color:var(--ink2);font-size:14px;text-align:left}
.vtfig{margin-top:40px}
.vtfig + .vtfig{margin-top:48px}
.vtfig figcaption{font-size:14px;color:var(--ink2);max-width:90ch;margin:0}
.vtfig figcaption b{color:var(--ink);font-weight:600}
.vtfig .tbl-wrap{margin-top:16px}
.vmodel{border-top:1px solid var(--ink);padding-top:20px}
.vmodel p{font-size:15px;color:var(--ink2)}
.vmodel p + p{margin-top:12px}
.vmodel b{color:var(--ink);font-weight:600}
.vmodel a{color:var(--ink)}
.vsample{display:inline-block;margin-left:8px;font:500 11.5px var(--mono);color:var(--orange);background:var(--orange-t);border-radius:4px;padding:2px 7px;vertical-align:1px;white-space:nowrap}
.vstatus{margin-top:28px}
.vfam-fig{margin-top:40px}
.vfam{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(480px,100%),1fr));gap:0 48px;border-top:1px solid var(--ink)}
.vfam > div{display:grid;grid-template-columns:168px minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:6px 22px;padding:22px 0;border-bottom:1px solid var(--rule);align-content:start}
.vfam .vart{grid-row:1/span 3}
.vfam h3{font:600 17px/1.3 var(--sans);letter-spacing:-.005em}
.vfam p{font-size:14.5px;line-height:1.55;color:var(--ink2)}
.vfam p.chk{font:12px/1.7 var(--mono);color:var(--ink3);align-self:start}
.vfam p.chk code{color:var(--ink);font-size:12px;white-space:nowrap}
.vsteps .step p code{font-size:.88em;background:#EEF2F7;padding:1px 5px;border-radius:4px}
.vlim{list-style:none;margin-top:28px;border-top:1px solid var(--ink);max-width:900px}
.vlim li{padding:14px 0;border-bottom:1px solid var(--rule);font-size:15.5px;color:var(--ink2)}
.vlim li b{color:var(--ink);font-weight:600}
.vsrc{margin-top:36px;font-size:14px;color:var(--ink2);max-width:900px}
.vsrc b{display:block;font:500 12px var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.vsrc ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.vsrc a{color:var(--ink)}
.vsrc span{color:var(--ink3)}
.vsrc span::before{content:"· "}
#visual .vspec{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.vspec,#visual .vspec{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.vlive{grid-template-columns:1fr}}
@media (max-width:640px){
  #visual .sh h2{font-size:clamp(28px,8.2vw,34px);line-height:1.1}
  .scanbox{margin-top:24px}
  .vstate{margin-top:24px}
  .vstate>div{grid-template-columns:1fr;padding:11px 0}
  .vstate .due{padding:12px 0 14px}
  .scanbox input{font-size:17px;min-height:54px;padding:0 14px}
  .scanbox .btn{min-height:54px;padding:0 20px;font-size:16px}
  .vspec-fig{margin-top:40px}
  .vspec,#visual .vspec{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px;padding-top:18px}
  .vspec h3{font-size:14.5px}
  .vspec p{font-size:13.5px}
  .vrow{grid-template-columns:1fr}
  .vtbl{font-size:14px}
  .vtbl th{letter-spacing:.04em}
  .vtbl th,.vtbl td{padding-right:10px}
  .vfam > div{grid-template-columns:112px minmax(0,1fr);gap:4px 14px;padding:18px 0}
  .vfam .vart{grid-row:1/span 2}
  .vfam p.chk{grid-column:1/-1;margin-top:4px}
}
/* the measured checks' numbers: four on the homepage (visual.py checks_nums), the tables and key lines on /visual */
.vnums-fig{margin-top:56px}
.vnums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.vnums>div{padding:20px 24px 22px 0;min-width:0}
.vnums>div+div{padding-left:24px;border-left:1px solid var(--rule)}
.vnums b{display:block;font:700 clamp(36px,3.6vw,52px)/1 var(--display);letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.vnums p{font-size:15px;line-height:1.5;color:var(--ink2);margin-top:12px}
.vnums small{display:block;font:12px/1.5 var(--mono);color:var(--ink3);margin-top:10px}
.vnums-fig figcaption{font-size:14px;color:var(--ink2);max-width:90ch;margin-top:14px}
.vnums-fig figcaption a{color:var(--ink);white-space:nowrap}
.vkey{margin-top:24px}
.vtbl tr.hl td{background:var(--panel)}
.vtfig .note{margin-top:12px}
.vview{font:500 11.5px var(--mono);color:var(--ink3);margin-left:4px;white-space:nowrap}
.vcrawl{margin-top:48px}
.vcrawl+.vmodel{margin-top:36px}
.vmodel-none{margin-top:48px;max-width:900px}
.vsh2{margin-top:72px}
@media (max-width:1000px){
  .vnums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vnums>div:nth-child(3){padding-left:0;border-left:0}
  .vnums>div:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:640px){
  .vnums-fig{margin-top:36px}
  .vnums{grid-template-columns:1fr}
  .vnums{border-bottom:0}
  .vnums>div,.vnums>div+div,.vnums>div:nth-child(n+3){padding:16px 0 18px;border-left:0;border-top:0;border-bottom:1px solid var(--rule)}
  .vnums b{font-size:36px}
  .vnums p{margin-top:8px;font-size:14.5px}
  .vnums small{margin-top:6px;font-size:11.5px}
}
/* ---------- before and after: the homepage section under "Check any page." (partials/before-after.html, dragged by
   public/before-after.js). One made-up page, Acme Cloud, drawn twice in one frame: the broken build under the fixed
   one, which is clipped to the right of the divider (--pos, 0 to 100; the line moves by transform, so dragging and the
   first-view sway are not layout shifts). The page is laid out in its own unit, --u: 1/72.5 of the frame's width
   (1/22.5 on phones, where it switches to a phone layout), so it scales without a script. ---------- */
.ba .sh h2{font-size:clamp(30px,4.3vw,54px);line-height:1.06;letter-spacing:-.03em}
.ba-fig{margin-top:32px}
.ba-frame{border:1px solid var(--rule2);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 32px 64px -40px rgba(14,31,77,.45)}
.ba-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:40px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--rule);font:500 12px var(--mono)}
.ba-bar b{display:flex;align-items:center;gap:7px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.ba-bar b::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.ba-lb{color:var(--orange)}
.ba-la{color:var(--blue)}
.ba-url{min-width:0;overflow:hidden;white-space:nowrap;color:var(--ink3);background:#fff;border:1px solid var(--rule);border-radius:99px;padding:3px 16px}
.ba-view{--pos:50;position:relative;container-type:inline-size;aspect-ratio:72.5/38.5;overflow:hidden;touch-action:pan-y pinch-zoom;cursor:ew-resize;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ba-pg{--u:calc(100cqw / 72.5);position:absolute;inset:0;overflow:hidden;font-size:var(--u);line-height:1.4}
.ba-pg>*{position:absolute}
.ba-a{clip-path:inset(0 0 0 calc(var(--pos) * 1%))}
.ba-nav{left:0;right:0;top:0;height:3.3em;padding:0 3em;display:flex;align-items:center;gap:2.4em}
.ba-logo{display:flex;align-items:center;gap:.5em;font-size:1.1em;font-weight:700;white-space:nowrap}
.ba-links{display:flex;gap:1.7em;font-size:.88em}
.ba-in{position:relative;margin-left:auto;font-size:.85em;line-height:1;padding:.62em 1.3em;border-radius:.5em;white-space:nowrap}
.ba-h1{left:calc(var(--u)*3);top:calc(var(--u)*5.3);width:calc(var(--u)*33);font-size:calc(var(--u)*3.2);line-height:1.04}
.ba-sub{left:calc(var(--u)*3);top:calc(var(--u)*13.5);width:calc(var(--u)*29);font-size:calc(var(--u)*1.12);line-height:1.5}
.ba-cta{left:3em;top:18em;display:flex;gap:.8em}
.ba-cta span{display:flex;align-items:center;height:2.9em;padding:0 1.5em;font-size:.95em;white-space:nowrap}
.ba-img{left:37.5em;top:5.2em;width:32em;height:15.6em}
.ba-img svg{display:block;width:100%;height:100%}
.ba-h2{left:calc(var(--u)*3);top:calc(var(--u)*22.8);font-size:calc(var(--u)*1.5);line-height:1.3;white-space:nowrap}
.ba-cards{left:3em;top:25.6em;width:44em;height:8.4em;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2em}
.ba-card{display:flex;flex-direction:column;gap:.3em;padding:1.1em 1.2em}
.ba-card i{display:grid;place-items:center;width:2em;height:2em;margin-bottom:.35em}
.ba-card b{font-size:1em;line-height:1.2}
.ba-card span{font-size:.8em;line-height:1.35}
.ba-price{left:50em;top:22.8em;width:19.5em;height:11.2em;display:flex;flex-direction:column;align-items:flex-start;gap:.3em;padding:1.3em 1.5em}
.ba-price b{font-size:2.6em;line-height:1.05;white-space:nowrap}
.ba-price small{font-size:.36em;font-weight:500}
.ba-li{font-size:.82em}
.ba-buy{align-self:stretch;margin-top:auto;display:flex;align-items:center;justify-content:center;height:2.9em;font-size:.86em}
.ba-cookie{display:flex;align-items:center}
/* before: the build as it shipped */
.ba-b{background:linear-gradient(180deg,#6A11CB 3.3em,#2575FC 10em,#C9D6FF 12.6em,#E2E9FF 14em,#EDF1FF 17em,#fff 21em);font-family:"Times New Roman",Times,serif;color:#222}
.ba-b .ba-nav{background:#111;color:#fff}
.ba-b .ba-logo i{width:1.1em;height:1.1em;border-radius:50%;background:linear-gradient(135deg,#6A11CB,#2575FC)}
.ba-b .ba-links span{color:#8AB4F8;text-decoration:underline}
.ba-b .ba-in{background:#fff;color:#FAFAFA;border-radius:2em}
.ba-b .ba-h1{font-weight:700;color:#fff;text-shadow:0 .06em .12em rgba(0,0,0,.35)}
.ba-b .ba-sub{color:#fff}
.ba-b .ba-cta span{background:linear-gradient(90deg,#6A11CB,#2575FC);color:#fff;border-radius:2em}
.ba-b .ba-img{border:1px solid #A9A9A9}
.ba-broken{display:flex;align-items:center;gap:.3em;padding:.2em;font-size:.85em;color:#fff}
.ba-broken svg{width:1.15em;height:1.15em}
.ba-b .ba-h2{left:calc(var(--u)*2.2);font-weight:700;color:#222}
.ba-b .ba-card{background:#fff;border:1px solid #DDD;border-radius:1.4em;box-shadow:0 .6em 1.6em rgba(106,17,203,.35)}
.ba-b .ba-card i{border-radius:50%;background:linear-gradient(135deg,#6A11CB,#2575FC)}
.ba-b .ba-card:nth-child(2){margin-top:1.3em;align-items:center;text-align:center;border-radius:.3em}
.ba-b .ba-card:nth-child(3){width:84%;margin-left:.6em}
.ba-b .ba-card:nth-child(3) b{font-size:1.12em;white-space:nowrap}
.ba-b .ba-price{left:49.4em;top:23.6em;border:2px solid #6A11CB;border-radius:1.4em;background:#fff;align-items:center}
.ba-b .ba-price b{font-size:2.2em;color:#6A11CB}
.ba-b .ba-buy{background:linear-gradient(90deg,#6A11CB,#2575FC);color:#fff;border-radius:2em}
.ba-b .ba-cookie{left:calc(var(--u)*7);top:calc(var(--u)*17);width:calc(var(--u)*28);flex-wrap:wrap;gap:.55em .6em;padding:.9em 1em;background:#fff;border:1px solid #CCC;box-shadow:0 .4em 1.6em rgba(0,0,0,.3);font:.8em/1.35 Arial,Helvetica,sans-serif;color:#333}
.ba-b .ba-cookie span:first-child{flex-basis:100%}
.ba-b .ba-cookie i{font-style:normal}
.ba-b .ba-cookie span+span{padding:.45em 1em;background:#E4E4E4}
.ba-b .ba-cookie .ba-ok{background:#2563EB;color:#fff}
/* after: the same page with the fixes in */
.ba-a{background:radial-gradient(30em 13em at 54em 13em,rgba(167,139,250,.5),rgba(167,139,250,0) 70%),linear-gradient(180deg,#120D38 3.3em,#2B2391 7em,#4B3BC9 11em,#8F82F3 12.5em,#DAD5FF 13.4em,#F6F4FF 14.8em,#fff 20em);font-family:var(--sans);color:#14123A}
.ba-a .ba-nav{background:#0D0B26;color:#fff}
.ba-a .ba-logo{font-family:var(--display);font-weight:600;letter-spacing:-.01em}
.ba-a .ba-logo svg{width:1.3em;height:1.3em}
.ba-a .ba-links span{color:#B7B4E0}
.ba-a .ba-in{border:1px solid rgba(255,255,255,.32);color:#fff;font-weight:600}
.ba-a .ba-h1{font-family:var(--display);font-weight:700;letter-spacing:-.035em;color:#fff}
.ba-a .ba-h1 span{background:linear-gradient(90deg,#C7D2FE,#F5D0FE);-webkit-background-clip:text;background-clip:text;color:transparent}
.ba-a .ba-sub{color:#2B2672}
.ba-a .ba-cta span{font-weight:600;border-radius:.6em;background:#fff;color:#2B2672;border:1px solid #DAD6F5}
.ba-a .ba-cta .ba-go{background:#4F46E5;color:#fff;border-color:#4F46E5;box-shadow:0 .6em 1.2em -.5em rgba(79,70,229,.8)}
.ba-a .ba-img{border-radius:.9em;box-shadow:0 0 0 1px rgba(255,255,255,.6),0 1.8em 3.4em -1.2em rgba(20,10,80,.55)}
.ba-a .ba-img svg{border-radius:.9em;font-family:var(--display)}
.ba-a .ba-h2{font-family:var(--display);font-weight:600;letter-spacing:-.02em}
.ba-a .ba-card{background:#fff;border:1px solid #E8E6F6;border-radius:.9em;box-shadow:0 .3em .9em rgba(20,10,80,.05)}
.ba-a .ba-card i{border-radius:.55em;background:#EEF0FF}
.ba-a .ba-card svg{width:1.15em;height:1.15em;fill:none;stroke:#4F46E5;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ba-a .ba-card b{font-family:var(--display);font-weight:600}
.ba-a .ba-card span{color:#5B5880}
.ba-a .ba-price{background:#fff;border:1px solid #E8E6F6;border-radius:1em;box-shadow:0 1em 2.4em -.8em rgba(20,10,80,.22)}
.ba-a .ba-plan{font-size:.72em;font-weight:600;color:#4338CA;background:#EEF0FF;border-radius:2em;padding:.2em .7em}
.ba-a .ba-price b{font-family:var(--display);letter-spacing:-.03em}
.ba-a .ba-price small{color:#6B6890;letter-spacing:0}
.ba-a .ba-li{color:#4A4770}
.ba-a .ba-buy{background:#4F46E5;color:#fff;border-radius:.55em;font-weight:600}
.ba-a .ba-cookie{left:calc(var(--u)*3);bottom:calc(var(--u)*.9);gap:.8em;padding:.4em .45em .4em 1.1em;background:#14123A;color:#E9E7FF;border-radius:2em;font-size:.8em;white-space:nowrap}
.ba-a .ba-ok{background:#fff;color:#14123A;font-weight:600;border-radius:2em;padding:.3em .9em}
/* the tags: green for what GenClass fixes in the visitor's browser, outlined for what the developer fixed from its report */
.ba-tag{display:inline-flex;align-items:center;gap:.45em;font:600 12.5px/1 var(--sans);font-style:normal;letter-spacing:0;color:var(--ink);background:#fff;border:1.5px solid var(--blue-f);border-radius:99px;padding:.34em .72em;white-space:nowrap;vertical-align:.12em;text-shadow:none;-webkit-text-fill-color:currentColor}
.ba-tag.ba-live{background:var(--blue-f)}
.ba-tag.ba-live::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--ink)}
.ba-pg .ba-tag{position:absolute;z-index:2;font-size:max(8.5px,.88cqw);box-shadow:0 1px 3px rgba(14,31,77,.18)}
.ba-pg .ba-sub .ba-tag,.ba-pg .ba-h2 .ba-tag{position:static;margin-left:.3em}
.ba-in .ba-tag{right:calc(100% + .7em);top:50%;transform:translateY(-50%)}
.ba-h1 .ba-tag{left:0;bottom:100%;margin-bottom:.6em}
.ba-img .ba-tag,.ba-price .ba-tag,.ba-cards>.ba-tag{top:-1em;right:1.2em}
.ba-cookie .ba-tag{left:calc(100% + .7em);top:50%;transform:translateY(-50%)}
/* the divider: a line with a handle; the range input under it is what keyboards and screen readers use */
.ba-line{position:absolute;top:0;bottom:0;left:0;width:0;z-index:3;pointer-events:none;transform:translateX(calc(var(--pos) * 1cqw))}
.ba-line::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(14,31,77,.3),0 0 14px rgba(14,31,77,.3)}
.ba-knob{position:absolute;top:50%;left:0;width:46px;height:46px;margin:-23px 0 0 -23px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--ink);border:1px solid rgba(14,31,77,.18);box-shadow:0 8px 22px -6px rgba(14,31,77,.5)}
.ba-knob svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ba-range{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.ba-range:focus-visible~.ba-line .ba-knob{outline:3px solid var(--blue-f);outline-offset:3px}
.ba-view.is-drag .ba-knob{background:var(--panel)}
.ba-key{display:flex;flex-wrap:wrap;align-items:center;gap:10px;max-width:none;margin-top:16px}
.ba-key a{margin-left:auto;font-size:14.5px;color:var(--ink);white-space:nowrap}
@media (max-width:640px){
  #before-after .sh h2{font-size:clamp(28px,8.2vw,34px);line-height:1.1}
  .ba-fig{margin-top:22px}
  .ba-frame{border-radius:12px}
  .ba-bar{height:36px;padding:0 12px;font-size:11px}
  .ba-view{aspect-ratio:22.5/42}
  .ba-pg{--u:calc(100cqw / 22.5)}
  .ba-nav{height:3em;padding:0 1.25em}
  .ba-links{display:none}
  .ba-logo{font-size:1em}
  .ba-in{font-size:.8em}
  .ba-h1{left:calc(var(--u)*1.25);top:calc(var(--u)*4.6);width:calc(var(--u)*20);font-size:calc(var(--u)*1.85);line-height:1.06}
  .ba-sub{left:calc(var(--u)*1.25);top:calc(var(--u)*9.6);width:calc(var(--u)*20);font-size:calc(var(--u)*.92);line-height:1.45}
  .ba-cta{left:1.25em;top:13.3em;gap:.6em}
  .ba-cta span{height:2.6em;padding:0 1.2em;font-size:.9em}
  .ba-img{left:1.25em;top:16.8em;width:20em;height:8em}
  .ba-h2{left:calc(var(--u)*1.25);top:calc(var(--u)*26);font-size:calc(var(--u)*1.05)}
  .ba-b .ba-h2{left:calc(var(--u)*.8)}
  .ba-cards{left:1.25em;top:28.3em;width:20em;height:5.6em;gap:.6em}
  .ba-card{padding:.75em .7em}
  .ba-card i{width:1.6em;height:1.6em;margin-bottom:.25em}
  .ba-card b{font-size:.85em}
  .ba-b .ba-card:nth-child(3) b{font-size:.9em}
  .ba-card span,.ba-li{display:none}
  .ba-b .ba-card:nth-child(2){margin-top:.8em}
  .ba-b .ba-card:nth-child(3){margin-left:.3em}
  .ba-price{left:1.25em;top:34.9em;width:20em;height:3.6em;flex-direction:row;align-items:center;gap:.7em;padding:0 .7em 0 1em}
  .ba-b .ba-price{left:.9em;top:35.3em}
  .ba-price b{font-size:1.7em}
  .ba-b .ba-price b{font-size:1.5em}
  .ba-buy{align-self:auto;margin:0 0 0 auto;height:2.3em;padding:0 .9em}
  .ba-b{background:linear-gradient(180deg,#6A11CB 3em,#2575FC 7.4em,#C9D6FF 9em,#E2E9FF 10em,#EDF1FF 12.5em,#fff 15em)}
  .ba-a{background:radial-gradient(18em 8em at 15em 9.5em,rgba(167,139,250,.5),rgba(167,139,250,0) 70%),linear-gradient(180deg,#120D38 3em,#2B2391 5.4em,#4B3BC9 8em,#8F82F3 8.8em,#DAD5FF 9.5em,#F6F4FF 10.6em,#fff 14em)}
  .ba-b .ba-cookie{left:calc(var(--u)*3.4);top:calc(var(--u)*12.7);width:calc(var(--u)*18.6);padding:.65em .8em}
  .ba-b .ba-cookie i{display:none}
  .ba-broken{color:#444}
  .ba-a .ba-cookie{left:calc(var(--u)*1.25);bottom:calc(var(--u)*.7)}
  .ba-pg .ba-tag{font-size:max(8.5px,2.65cqw)}
  .ba-cards>.ba-tag{right:auto;left:50%;transform:translateX(-50%)}
  .ba-key{gap:8px}
  .ba-key .ba-tag{font-size:12px}
  .ba-key a{margin-left:0;flex-basis:100%;margin-top:4px}
}
@media (max-width:420px){.ba-url{display:none}}