/* v21 mix: the live v19 hero + the live three-column strip, then the v20 page. Loaded after v20.css. */

/* ---------- 1 · hero: the live layout (site.css + v8.css v19), rules copied so the pixel scene sits where it does today ---------- */
.lhero{position:relative;overflow:hidden;isolation:isolate;min-height:min(880px,calc(100svh - 64px));display:flex;align-items:stretch;background:var(--hero);color:var(--text)}
.lhero canvas.lfield{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.lhero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.lhero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(238,243,255,.97) 0%,rgba(238,243,255,.82) 36%,rgba(238,243,255,0) 58%)}
.lhero-in{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;width:100%;padding-top:72px;padding-bottom:72px}
.lhero .h1{font-size:clamp(52px,7vw,112px);font-weight:500;letter-spacing:-.052em;line-height:.92;max-width:10.5ch}
.lhero .lead{margin-top:28px;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--text-2);max-width:30em;letter-spacing:-.01em}
.lhero .for{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.lhero .for b{font-weight:500;color:var(--ink-2);background:rgba(255,255,255,.75);border:1px solid rgba(11,16,32,.1);padding:6px 8px;border-radius:4px}
.lhero .for i{font-style:normal;color:var(--blue-3)}
.lhero .cta{margin-top:34px}
.cta-note{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:14px;color:var(--text-2)}
.cta-note i{width:6px;height:6px;border-radius:50%;background:var(--mint)}
/* scene labels drawn by the live script */
.hlabels{position:absolute;pointer-events:none;z-index:1;overflow:hidden}
.hlab{position:absolute;left:0;top:0;white-space:nowrap;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#0B1020;background:rgba(248,250,255,.86);border:1px solid rgba(11,16,32,.14);padding:5px 7px;border-radius:4px;will-change:transform,opacity;transition:opacity .25s}
.hlab.hot{color:#fff;background:#2440F0;border-color:#2440F0}
.hlab.tick{background:none;border:0;padding:0;color:rgba(11,16,32,.62);font-size:10px}
@media (max-width:900px){
  .lhero{min-height:0}
  .lhero::after{background:linear-gradient(180deg,rgba(238,243,255,.97) 0%,rgba(238,243,255,.85) 50%,rgba(238,243,255,0) 72%)}
  .lhero-in{justify-content:flex-start;padding-top:48px;padding-bottom:calc(min(92vw,420px) + 24px)}
}
@media (max-width:600px){
  .lhero{flex-direction:column;min-height:calc(100svh - 56px)}
  .lhero::after{display:none}
  .lhero-in{order:1;padding-top:28px;padding-bottom:0;flex:0 0 auto}
  .lhero .h1{font-size:clamp(40px,11.6vw,50px);line-height:.95;max-width:none}
  .lhero .lead{font-size:16.5px;line-height:1.45;margin-top:14px}
  .lhero .cta{margin-top:22px}
  .lhero canvas.lfield{order:2;position:relative;inset:auto;flex:1 1 auto;width:calc(100% - 2*var(--gut));margin:20px var(--gut);height:auto;min-height:240px;max-height:420px;border:1px solid var(--line-2);border-radius:6px;background:var(--hero)}
  .hlab{font-size:9.5px;padding:4px 6px}
}

/* ---------- 2 · the live three-column strip (v8.css v16/v17 rules), new subject ---------- */
.proof2{padding-top:8px}
.proof2 .stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.proof2 .stat{display:flex;flex-direction:column;gap:22px;padding:52px 40px 46px;border-left:1px solid var(--line)}
.proof2 .stat:first-child{border-left:0;padding-left:0}
.proof2 .st-top{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.proof2 .st-k{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.proof2 .st-tag{order:-1;font:600 clamp(30px,2.6vw,40px)/1 var(--sans);letter-spacing:-.02em;color:var(--blue-2)}
.proof2 .st-tag::after{content:".";color:#0B1020}
.proof2 .num{font:400 clamp(56px,5.8vw,96px)/.86 var(--mono);letter-spacing:-.07em;color:#0B1020;margin:4px 0 6px;white-space:nowrap}
.proof2 .viz{display:flex;flex-direction:column;gap:14px;min-height:96px}
.proof2 .vrow{display:grid;grid-template-columns:1fr;gap:7px;position:relative}
.proof2 .vrow>span{font:500 12px/1.2 var(--mono);letter-spacing:.04em;color:var(--text-2)}
.proof2 .bar{display:block;height:12px;width:0;border-radius:3px;background:#0B1020;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.proof2 .bar.acc{background:var(--blue-2)}
.proof2 .bar.rng{position:relative;overflow:visible}
.proof2 .bar.rng::after{content:"";position:absolute;left:66%;right:-33%;top:0;bottom:0;border-radius:0 3px 3px 0;background:repeating-linear-gradient(135deg,rgba(61,90,254,.45) 0 2px,transparent 2px 5px);opacity:0;transition:opacity .4s 1s}
.proof2 .stat.in .bar.rng::after{opacity:1}
.proof2 .stat.in .bar{width:var(--w)}
.proof2 .vrow .gap{position:absolute;right:0;bottom:-2px;font:600 13px/1 var(--mono);font-style:normal;color:var(--blue-2);opacity:0;transition:opacity .4s 1s}
.proof2 .stat.in .gap{opacity:1}
.proof2 .blocks{display:flex;gap:3px}
.proof2 .blocks i{flex:0 0 auto;width:calc((100% - 45px)/16);max-width:18px;min-width:12px;height:12px;border-radius:2px;background:#0B1020;opacity:0;transform:scaleY(.3);transition:opacity .3s,transform .3s;transition-delay:calc(var(--d)*70ms)}
.proof2 .blocks.acc i{background:var(--blue-2)}
.proof2 .blocks i.maybe{background:repeating-linear-gradient(135deg,rgba(61,90,254,.55) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 0 1px rgba(61,90,254,.6)}
.proof2 .stat.in .blocks i{opacity:1;transform:none}
.proof2 .stat>p{font-size:15px;line-height:1.45;color:var(--text-2);margin:0}
.proof2 .ql{display:block;margin-top:6px;font:500 11.5px/1.3 var(--mono);letter-spacing:.04em;color:var(--text-3)}
/* "Your format": three page layouts take turns, in a loop */
.proof2 .fmt{flex-direction:row;gap:12px;align-items:flex-end;min-height:0;margin-top:4px}
.fmt .fp{position:relative;flex:1 1 0;max-width:96px;aspect-ratio:3/4;background:#fff;border:1px solid var(--line-2);border-radius:3px;padding:9px 8px;display:flex;flex-direction:column;gap:5px;
  box-shadow:0 10px 24px -16px rgba(11,16,32,.5);transform-origin:50% 100%}
.fmt .fp i{display:block;font-style:normal}
.fmt .bd{height:4px;background:#0B1020;border-radius:1px;margin-bottom:3px}
.fmt .f2 .bd{background:#6B1E2E}.fmt .f3 .bd{background:var(--blue)}
.fmt .ln{height:3px;background:#DCE1EA;border-radius:1px}.fmt .ln.s{width:60%}
.fmt .k3{display:flex;gap:3px}.fmt .k3 b{flex:1;height:10px;background:#EEF1FF;border:1px solid #D3DAF5;border-radius:1px}
.fmt .ch{flex:1;min-height:10px;background:repeating-linear-gradient(90deg,#0B1020 0 5px,transparent 5px 8px);-webkit-mask-image:linear-gradient(0deg,#000 55%,transparent 56%);mask-image:linear-gradient(0deg,#000 55%,transparent 56%);opacity:.85}
.fmt .tb{height:6px;border-bottom:1px solid #EBD9DE;background:linear-gradient(90deg,#F3E7EA 0 55%,transparent 55% 70%,#E5CCD3 70%)}
.fmt .qq{height:8px;border-left:2px solid var(--blue);background:#F0F3FF}
.fmt em{position:absolute;left:0;right:0;bottom:-20px;text-align:center;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--text-3);white-space:nowrap}
.proof2 [data-viz=fit] .viz{padding-bottom:20px}
.proof2 .stat.in .fmt .fp{animation:fmtOn 6s cubic-bezier(.3,.7,.2,1) infinite;animation-delay:calc(var(--n)*2s)}
@keyframes fmtOn{0%,4%{transform:none;border-color:var(--line-2);box-shadow:0 10px 24px -16px rgba(11,16,32,.5)}
  10%,28%{transform:translateY(-8px) scale(1.06);border-color:var(--blue);box-shadow:0 0 0 2px rgba(36,64,240,.18),0 18px 30px -16px rgba(36,64,240,.55)}
  36%,100%{transform:none;border-color:var(--line-2);box-shadow:0 10px 24px -16px rgba(11,16,32,.5)}}
.proof2 .stat.in .fmt .fp em{animation:fmtEm 6s infinite;animation-delay:calc(var(--n)*2s)}
@keyframes fmtEm{0%,4%{color:var(--text-3)}10%,28%{color:var(--blue)}36%,100%{color:var(--text-3)}}
@media (max-width:900px){
  .proof2 .stats{grid-template-columns:1fr}
  .proof2 .stat{border-left:0;border-top:1px solid var(--line);padding:32px 0}
  .proof2 .stat:first-child{border-top:0}
  .proof2 .num{font-size:clamp(64px,19vw,96px)}
  .fmt .fp{max-width:90px}
}

/* ---------- products: no status words like "live", honest order words; each card has a pixel screen ---------- */
.pc-top{flex-direction:column;gap:16px;margin-bottom:10px}
.pc:not(.live) h3{color:#fff}
.scr{position:relative;width:100%;aspect-ratio:64/24;background:#0B1020;border:1px solid var(--dline);border-radius:6px;overflow:hidden}
.scr::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(124,147,255,.10) 1px,transparent 1.2px);background-size:6px 6px;pointer-events:none}
.scr .anim{position:relative;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.scr-k{position:absolute;left:8px;bottom:7px;font:500 9.5px/1 var(--mono);letter-spacing:.14em;color:var(--dtext-3)}
.scr::after{content:"";position:absolute;right:8px;top:8px;width:5px;height:5px;background:var(--blue-3);opacity:.7;animation:blink 1.4s steps(2,end) infinite}
.pc.ready .scr{border-color:rgba(20,184,132,.35)}
.pc.ready .scr::after{background:var(--mint)}
.pc.ready::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:linear-gradient(90deg,var(--mint),transparent)}
.st{display:inline-flex;align-items:center;gap:7px;font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;border-radius:3px;white-space:nowrap}
.st-ready{color:#04140E;background:var(--mint);border:1px solid var(--mint)}
.st-ready::before{content:"";width:6px;height:6px;background:#04140E}
.st-build{color:var(--blue-3);background:rgba(61,90,254,.08);border:1px solid rgba(124,147,255,.4)}
.st-build::before{content:"";width:6px;height:6px;border:1.5px solid currentColor;box-sizing:border-box}
.prods-note{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:22px;font-size:14.5px;color:var(--dtext-2)}
.prods-note p{display:flex;align-items:center;gap:12px}
@media (max-width:600px){.prods-note{flex-direction:column}.prods-note p{align-items:flex-start;flex-direction:column;gap:8px}}

/* ---------- the product loop, as its own section ---------- */
.howgrid{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);gap:clamp(32px,5vw,72px);align-items:center}
.howcopy{margin-bottom:0}
.howcopy .cta{margin-top:14px}
.howsec .loop{box-shadow:0 1px 0 #fff inset,0 2px 6px rgba(11,16,32,.05),0 40px 100px -40px rgba(24,40,140,.45)}
@media (max-width:1080px){.howgrid{grid-template-columns:1fr}}
@media (max-width:600px){.howcopy .cta .b{width:100%}.howcopy .cta .b .lbl{flex:1;justify-content:center}}

/* ---------- form field canvas (renamed from v20) ---------- */
.dfield{position:absolute;inset:0;width:100%;height:100%;z-index:-1;image-rendering:pixelated;opacity:.9}
.proof2 .bar.acc.rng{background:linear-gradient(90deg,var(--blue-2) 0 66.7%,transparent 66.7%)}
.proof2 .bar.rng::after{left:66.7%;right:0;border-radius:0 3px 3px 0}
.fmt .fp .k3{display:flex;gap:3px}
.fmt .fp .ch{height:22px;flex:0 0 auto;margin-top:auto}