:root{
  --ink:#101720; --ink2:#4A576B; --ink3:#7C8AA0;
  --blue:#1D9047; --cyan:#3ED47E; --green:#0BA45C; --amber:#F59E0B;
  --bandb:rgba(29,144,71,.08); --bandg:rgba(62,212,126,.09); --line:#E2E8F3; --white:#FFFFFF;
  --grad:linear-gradient(90deg,var(--blue),var(--cyan));
  --blueink:#0E7A38; --accdeep:#0A4423; --acclight:#A8F0C8;
  --gradbtn:linear-gradient(90deg,#0B6B31,#0E7A38);
  --gradpanel:linear-gradient(150deg,#0A4423,#0E7A38 58%,#178A42);
  --icline:#9BD8B4; --acc2ink:#117A44; --oncap:#A9E5C2; --onsub:#CDEFD9;
  --tintcard:#F2FBF5; --tintcard2:#E7F6EC; --gatetint1:#D8F2E1; --gatetint2:#C2E8D2;
  --bandbStrong:rgba(29,144,71,.12); --accshadow:rgba(14,122,56,.45);
  --f-d:"Manrope","Helvetica Neue",Arial,sans-serif;
  --f-m:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --gut:clamp(20px,4vw,74px);
}
.st-a{stop-color:var(--blue)} .st-b{stop-color:var(--cyan)}
#sp-ic{stroke:var(--icline)} #sp-us{stroke:var(--cyan)} #d-dot{fill:var(--blue)}
#sp-lab4 text{fill:var(--blueink)} #sp-lab5 text{fill:var(--acc2ink)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
.pnx{font-family:var(--f-d);color:var(--ink);background:var(--white);font-size:16px;line-height:1.5;overflow-x:clip;position:relative;-webkit-font-smoothing:antialiased}
.pnx img,.pnx svg{max-width:100%;display:block}
.pnx a{color:inherit;text-decoration:none}
.pnx button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.pnx ::selection{background:#BFE6FB;color:var(--ink)}
.pnx :focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--f-m)}
.gut{padding-left:var(--gut);padding-right:var(--gut)}
.grad-t{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- fixed stream canvas ---------- */
#stream-wrap{position:fixed;inset:0;z-index:0;pointer-events:none}
#stream-wrap canvas{width:100%;height:100%;display:block}
#stream-fb{position:fixed;inset:0;z-index:0;pointer-events:none;display:none;background:
  radial-gradient(60% 30% at 18% 42%,rgba(33,184,240,.14),transparent 70%),
  radial-gradient(50% 26% at 72% 58%,rgba(18,87,214,.12),transparent 70%)}
html:not(.wgl) #stream-fb{display:block}

/* ---------- cursor ---------- */
#cur{position:fixed;left:0;top:0;z-index:400;pointer-events:none;opacity:0}
#cur.on{opacity:1}
#cur .c-dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
#cur .c-ring{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(18,87,214,.65);display:flex;align-items:center;justify-content:center;transition:width .25s,height .25s,left .25s,top .25s,background .25s}
#cur .c-rip{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.5px solid rgba(33,184,240,.7);animation:cur-rip 2.4s ease-out infinite}
@keyframes cur-rip{0%{transform:scale(.5);opacity:0}12%{opacity:.9}60%{transform:scale(1.9);opacity:0}100%{transform:scale(1.9);opacity:0}}
#cur .c-lab{font:600 10px/1 var(--f-m);letter-spacing:.14em;color:#fff;opacity:0}
#cur.big .c-ring{width:64px;height:64px;left:-32px;top:-32px;background:rgba(18,87,214,.92);border-color:transparent}
#cur.big .c-lab{opacity:1}
#cur.big .c-rip{display:none}
@media (hover:none),(pointer:coarse){#cur{display:none}}

/* ---------- preloader ---------- */
#pre{position:fixed;inset:0;z-index:500;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
#pre .p-word{font:800 clamp(30px,4.6vw,54px)/1 var(--f-d);letter-spacing:-.02em}
#pre .p-word em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
#pre svg{width:min(420px,72vw);height:44px;overflow:visible}
#pre .p-line{stroke:url(#g-stream);stroke-width:3;fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
#pre .p-dotb{fill:var(--cyan)}
#pre .p-n{font:500 12px/1 var(--f-m);letter-spacing:.22em;color:var(--ink3)}
#pre .p-n b{color:var(--ink);font-weight:600}
html:not(.js) #pre{display:none}


/* ---------- nav ---------- */
#nav{position:fixed;left:0;right:0;top:0;z-index:300;display:flex;align-items:center;justify-content:space-between;padding:14px var(--gut);transition:background .3s,box-shadow .3s}
#nav.scrolled{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
#nav .n-logo{display:flex;align-items:center;gap:10px;font:800 19px/1 var(--f-d);letter-spacing:-.02em;min-height:44px}
#nav .n-logo .lg{width:30px;height:30px;flex:none}
#nav .n-links{display:flex;gap:6px;align-items:center}
#nav .n-links a{font:700 13.5px/1 var(--f-d);padding:14px 16px;border-radius:99px;color:var(--ink2);position:relative}
#nav .n-links a:hover{color:var(--ink)}
#nav .n-links a.act{color:var(--blueink)}
#nav .n-links a.act::after{content:"";position:absolute;left:16px;right:16px;bottom:9px;height:2px;border-radius:2px;background:var(--grad)}
#nav .n-right{display:flex;gap:10px;align-items:center}
#nav .n-phone{font:600 12.5px/1 var(--f-m);color:var(--ink2);padding:14px 10px}
#nav .n-cta{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font:700 13.5px/1 var(--f-d);padding:14px 20px;border-radius:99px}
#nav .n-cta:hover{background:var(--blue)}
#nav #nburger{display:none;width:46px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:12px}
#nav #nburger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s,opacity .3s}
#sheet{position:fixed;inset:0;z-index:290;background:linear-gradient(160deg,var(--accdeep),var(--blue) 60%,var(--cyan));color:#fff;display:none;flex-direction:column;justify-content:flex-start;padding:96px 8vw 40px;gap:2px;overflow-y:auto}
#sheet.open{display:flex}
#sheet > a{font:800 clamp(24px,6.6vw,30px)/1.3 var(--f-d);letter-spacing:-.02em;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.18)}
#sheet .s-meta{margin-top:26px;display:flex;flex-direction:column;gap:8px;font:500 13px/1.5 var(--f-m);color:var(--onsub)}
@media (max-width:900px){
  #nav .n-links,#nav .n-phone{display:none}
  #nav #nburger{display:flex}
  #nav.menu-open #nburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #nav.menu-open #nburger span:nth-child(2){opacity:0}
  #nav.menu-open #nburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  #nav.menu-open #nburger span{background:#fff}
  #nav.menu-open .n-cta{display:none}
}
html:not(.js) #nav .n-links{display:flex}

/* ---------- badge / rail / top bar ---------- */
#tbar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:310;background:transparent}
#tbar i{display:block;height:100%;background:var(--grad);transform:scaleX(0);transform-origin:0 50%}
#rail{position:fixed;right:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:280;display:flex;flex-direction:column;gap:10px;align-items:center}
#rail button{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%}
#rail button i{width:6px;height:6px;border-radius:50%;background:#C4CFDF;transition:background .3s,transform .3s;display:block}
#rail button.on i{background:var(--blue);transform:scale(1.5)}
#rail .r-idx{font:600 10px/1 var(--f-m);color:var(--ink3);letter-spacing:.1em;writing-mode:vertical-rl;margin-bottom:6px}
@media (max-width:900px){#rail{display:none}}

/* ---------- shared section furniture ---------- */
main{position:relative;z-index:1}
.ch{position:relative}
.idx{display:inline-flex;align-items:center;gap:10px;font:600 11px/1 var(--f-m);letter-spacing:.2em;color:var(--ink3);text-transform:uppercase}
.idx::before{content:"";width:34px;height:1px;background:var(--ink3);display:block}
.idx b{color:var(--blueink);font-weight:600}
.kick{font:700 12px/1 var(--f-d);letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
.h2{font:800 clamp(38px,5.6vw,88px)/1.02 var(--f-d);letter-spacing:-.03em}
.h3{font:800 clamp(24px,2.6vw,38px)/1.1 var(--f-d);letter-spacing:-.02em}
.lead{font-size:clamp(16px,1.25vw,19px);color:var(--ink2);max-width:56ch}
.btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font:700 15px/1 var(--f-d);padding:17px 28px;border-radius:99px;min-height:48px;position:relative;transition:box-shadow .3s}
.btn.pri{background:var(--gradbtn);color:#fff;box-shadow:0 10px 30px -10px var(--accshadow)}
.btn.pri:hover{box-shadow:0 14px 34px -8px var(--accshadow)}
.btn.ghost{border:1.5px solid var(--ink);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.grn{background:var(--green);color:#fff}
.btn .arr{transition:transform .3s}
.btn:hover .arr{transform:translateX(4px)}
.mini-cta{display:inline-flex;align-items:center;gap:10px;font:700 14px/1 var(--f-d);color:var(--blueink);padding:12px 0;min-height:44px}
.mini-cta .arr{transition:transform .3s}
.mini-cta:hover .arr{transform:translateX(5px)}
.tick{color:var(--green);font-weight:800}

/* ============================================================ HOME */
/* ---------- hero ---------- */
.hero{min-height:100vh}
.hero-pin{height:100vh;min-height:660px;display:flex;flex-direction:column;justify-content:space-between;padding-top:80px;padding-bottom:58px;position:relative}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.h-kick{font:700 12px/1.5 var(--f-d);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.h-kick b{color:var(--blueink)}
.h-live{font:500 12px/1.6 var(--f-m);color:var(--ink2);text-align:right;letter-spacing:.04em}
.h-live .dotlive{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:8px;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(11,164,92,.5)}55%{box-shadow:0 0 0 7px rgba(11,164,92,0)}}
.h-live b{display:block;font-size:clamp(19px,1.9vw,27px);font-weight:600;color:var(--ink);letter-spacing:-.01em}
.hero-h{display:flex;flex-direction:column;font:800 clamp(46px,8.7vw,144px)/0.96 var(--f-d);letter-spacing:-.045em}
.hero-h .hl{display:flex;align-items:baseline;gap:clamp(14px,2vw,40px);white-space:nowrap}
.hero-h .l2{justify-content:flex-start;padding-left:clamp(0px,7vw,120px)}
.hero-h .l3{justify-content:space-between;align-items:center}
.hero-h .hw{display:inline-block}
.hero-h .hw.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.h-chip{font:500 clamp(10px,0.85vw,13px)/1.5 var(--f-m);letter-spacing:.06em;color:var(--green);border:1.5px solid #BFE9D4;background:#F0FBF5;padding:10px 16px;border-radius:99px;white-space:nowrap}
.h-sub{font:600 clamp(13px,1.15vw,17px)/1.5 var(--f-d);letter-spacing:0;color:var(--ink2);max-width:34ch;white-space:normal;text-shadow:0 0 8px #fff,0 0 16px #fff,0 0 24px #fff}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:clamp(18px,3vw,52px)}
.hstat .n{font:600 clamp(18px,1.75vw,25px)/1 var(--f-m);letter-spacing:-.02em}
.hstat .n em{font-style:normal;color:var(--green)}
.hstat .l{font:600 11px/1.5 var(--f-d);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-top:6px}
.h-scroll{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font:600 10px/1 var(--f-m);letter-spacing:.3em;color:var(--ink3);display:flex;align-items:center;gap:8px}
.h-scroll i{display:block;width:1px;height:34px;background:linear-gradient(var(--blue),transparent);animation:drip 1.8s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- proof band ---------- */
.proof{background:var(--bandb);padding:26px 0 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof .p-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.proof .p-cap{font:600 11px/1.4 var(--f-m);letter-spacing:.2em;color:var(--ink2);text-transform:uppercase}
.mq{overflow:hidden;width:100%}
.mq .mq-in{display:flex;gap:0;width:max-content;will-change:transform;animation:mq 34s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.mq .m-item{display:flex;align-items:center;gap:14px;padding:0 26px;font:800 clamp(17px,1.6vw,24px)/1 var(--f-d);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.mq .m-item .sep{width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.mq .m-item small{font:500 11px/1 var(--f-m);color:var(--ink3);letter-spacing:.08em}

/* ---------- journey (pinned) ---------- */
.journey{background:transparent}
.jn-pin{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,44px);padding-top:80px;padding-bottom:40px;position:relative;overflow:clip}
.jn-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.jn-timer{font:500 clamp(12px,1vw,15px)/1.7 var(--f-m);color:var(--ink2);text-align:right}
.jn-timer b{display:block;font-size:clamp(22px,2.2vw,32px);font-weight:600;color:var(--ink);letter-spacing:0}
.jn-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,26px);align-items:stretch}
.jn-line{position:absolute;left:2%;right:2%;top:44px;height:4px;border-radius:4px;background:#E7EDF6;z-index:0}
.jn-line i{display:block;height:100%;border-radius:4px;background:var(--grad);transform:scaleX(0);transform-origin:0 50%}
.jn-pulse{position:absolute;top:38px;left:2%;width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--cyan);box-shadow:0 0 0 6px rgba(33,184,240,.2);z-index:2;transform:translateX(-8px)}
.jst{position:relative;z-index:1;background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:clamp(14px,1.6vw,24px);display:flex;flex-direction:column;gap:10px;transition:border-color .4s,box-shadow .4s;opacity:.45}
.jst.lit{opacity:1;border-color:var(--blue);box-shadow:0 18px 44px -20px rgba(18,87,214,.35)}
.jst.lit.grn{border-color:var(--green);box-shadow:0 18px 44px -20px rgba(11,164,92,.4)}
.jst .j-ico{width:56px;height:56px;border-radius:16px;background:var(--bandb);display:flex;align-items:center;justify-content:center}
.jst.lit .j-ico{background:linear-gradient(135deg,#E3EEFF,#D7F3FE)}
.jst.grn .j-ico{background:var(--bandg)}
.jst .j-ico svg{width:32px;height:32px}
.jst .j-tag{font:600 10.5px/1 var(--f-m);letter-spacing:.2em;color:var(--ink3)}
.jst h3{font:800 clamp(19px,1.8vw,27px)/1.05 var(--f-d);letter-spacing:-.02em}
.jst .j-time{font:600 clamp(13px,1.05vw,15px)/1.3 var(--f-m);color:var(--blueink)}
.jst.grn .j-time{color:var(--green)}
.jst p{font-size:clamp(12.5px,0.95vw,14.5px);color:var(--ink2)}
.jn-verdict{display:flex;gap:clamp(12px,2vw,28px);align-items:stretch;flex-wrap:wrap}
.jv{flex:1;min-width:260px;border-radius:18px;padding:18px 22px;display:flex;flex-direction:column;gap:10px}
.jv .jv-l{font:600 11px/1 var(--f-m);letter-spacing:.18em;text-transform:uppercase}
.jv .jv-bar{height:10px;border-radius:6px;background:#E7EDF6;overflow:hidden}
.jv .jv-bar i{display:block;height:100%;border-radius:6px;transform:scaleX(0);transform-origin:0 50%}
.jv .jv-n{font:800 clamp(18px,1.7vw,25px)/1.1 var(--f-d);letter-spacing:-.02em}
.jv.them{background:#F3F5F9;color:var(--ink2)}
.jv.them .jv-bar i{background:#A6B2C4}
.jv.us{background:var(--bandg);border:1.5px solid #BFE9D4}
.jv.us .jv-l{color:var(--green)}
.jv.us .jv-bar i{background:linear-gradient(90deg,var(--green),var(--cyan))}

/* ---------- split (pinned) ---------- */
.split{background:var(--bandb);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sp-pin{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,3vh,30px);padding-top:84px;padding-bottom:30px;overflow:clip}
.sp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.sp-viz{width:100%}
.sp-mrows{display:none}
.sp-viz svg{width:100%;height:auto;display:block;overflow:visible}
.sp-lab{font:600 12px/1.35 var(--f-m);letter-spacing:.02em}
.sp-amount{font:600 16px/1 var(--f-m)}
.sp-note{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}
.sp-note p{font:700 clamp(15px,1.35vw,20px)/1.45 var(--f-d);max-width:52ch}
.sp-note p b{color:var(--blueink)}

/* ---------- dashboard bento ---------- */
.dash{background:var(--bandg);border-bottom:1px solid var(--line);padding:clamp(60px,9vh,110px) 0}
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(24px,4vh,44px);flex-wrap:wrap}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.1vw,18px);padding-left:clamp(12px,1.6vw,30px);padding-right:clamp(12px,1.6vw,30px)}
.tile{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(16px,1.6vw,26px);position:relative;overflow:hidden;box-shadow:0 14px 40px -28px rgba(16,23,32,.25)}
.tile .t-cap{font:600 10.5px/1 var(--f-m);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.t-sales{grid-column:span 5;grid-row:span 2;display:flex;flex-direction:column}
.t-feed{grid-column:span 4;grid-row:span 2;display:flex;flex-direction:column}
.t-payout{grid-column:span 3;background:var(--gradpanel);color:#fff;border:0}
.t-save{grid-column:span 3}
.t-mix{grid-column:span 4}
.t-disp{grid-column:span 3}
.t-cta{grid-column:span 5;display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--ink);color:#fff;border:0}
.t-sales .big{font:600 clamp(34px,3.2vw,52px)/1 var(--f-m);letter-spacing:-.03em}
.t-sales .sub{font:600 12.5px/1.5 var(--f-d);color:var(--green);margin-top:6px}
.t-sales svg{width:100%;height:auto;margin-top:auto}
.feed{display:flex;flex-direction:column;gap:8px;overflow:hidden;flex:1;min-height:240px}
.frow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#fff}
.frow .f-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--f-d);color:#fff;flex:none}
.frow .f-b{flex:1;min-width:0}
.frow .f-b b{display:block;font:700 13.5px/1.3 var(--f-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow .f-b span{font:500 10.5px/1.4 var(--f-m);color:var(--ink3)}
.frow .f-amt{font:600 14px/1 var(--f-m);color:var(--ink)}
.frow .f-ok{font:600 9.5px/1 var(--f-m);color:var(--green);letter-spacing:.1em;background:var(--bandg);padding:5px 8px;border-radius:6px}
.t-payout .big{font:600 clamp(26px,2.4vw,38px)/1 var(--f-m);letter-spacing:-.02em}
.t-payout .t-cap{color:var(--oncap)}
.t-payout .sub{font:600 12.5px/1.6 var(--f-d);color:var(--onsub);margin-top:8px}
.t-payout .p-track{margin-top:14px;height:6px;border-radius:4px;background:rgba(255,255,255,.22);overflow:hidden}
.t-payout .p-track i{display:block;height:100%;width:78%;background:linear-gradient(90deg,var(--cyan),#7CE7B7);border-radius:4px}
.t-save .big{font:800 clamp(30px,2.8vw,44px)/1 var(--f-d);letter-spacing:-.03em;color:var(--green)}
.t-save .sub{font-size:13px;color:var(--ink2);margin-top:6px}
.t-save .s-bar{margin-top:14px;height:10px;border-radius:6px;background:#EAF0F8;overflow:hidden}
.t-save .s-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--cyan));border-radius:6px}
.t-mix .mixrow{display:flex;gap:8px;margin-top:8px;height:52px;align-items:flex-end}
.t-mix .mixrow i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--cyan),var(--blue));transform:scaleY(0);transform-origin:bottom}
.t-mix .mixlab{display:flex;gap:8px;font:500 10px/1.6 var(--f-m);color:var(--ink3);margin-top:6px}
.t-mix .mixlab span{flex:1;text-align:center}
.t-disp .big{font:600 clamp(30px,2.8vw,44px)/1 var(--f-m);color:var(--ink)}
.t-disp .sub{font-size:13px;color:var(--ink2);margin-top:6px}
.t-cta .h3{color:#fff}
.t-cta p{color:#B9C6D9;font-size:13.5px;margin-top:6px}
@media (max-width:1080px){
  .t-sales{grid-column:span 7}.t-feed{grid-column:span 5}
  .t-payout,.t-save{grid-column:span 4}.t-mix{grid-column:span 4}
  .t-disp{grid-column:span 5}.t-cta{grid-column:span 7}
}
@media (max-width:760px){
  .bento{grid-template-columns:1fr;padding-left:14px;padding-right:14px}
  .t-sales,.t-feed,.t-payout,.t-save,.t-mix,.t-disp,.t-cta{grid-column:auto;grid-row:auto}
  .feed{min-height:0}
  .t-cta{flex-direction:column;align-items:flex-start}
}

/* ---------- hardware rail (home) ---------- */
.hwrail{padding:clamp(60px,9vh,110px) 0;overflow:clip}
.hwrail .hr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(22px,4vh,40px);flex-wrap:wrap}
.hr-track{display:flex;gap:clamp(12px,1.6vw,24px);width:max-content;padding-left:var(--gut);will-change:transform}
.hr-card{width:clamp(220px,19vw,290px);border:1.5px solid var(--line);border-radius:22px;padding:20px;background:linear-gradient(180deg,#fff,var(--tintcard2));position:relative}
.hr-card .dock{height:150px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:6px}
.hr-card .dock svg{height:140px;width:auto}
/* 2026-09-26 — the drop-shadow ellipse that sat under the old fixed 150px dock
   (top:172px) is removed. The dock is now a fluid 1:1 plate whose bottom edge
   moves with the card width, so a hard-coded offset can no longer track it —
   and neither the siblings frame nor the Bento plate carries one, so dropping
   it is what makes the three product frames consistent. */
.hr-card h3{font:800 17px/1.2 var(--f-d);letter-spacing:-.01em}
.hr-card p{font:500 12px/1.5 var(--f-d);color:var(--ink2);margin-top:4px}
.hr-card .tagf{display:inline-block;font:600 9.5px/1 var(--f-m);letter-spacing:.14em;color:var(--blue);background:var(--bandb);border-radius:6px;padding:5px 8px;margin-top:10px;text-transform:uppercase}

/* ---------- stories (testimonials) ---------- */
.stories{position:relative;padding:clamp(70px,10vh,130px) 0 clamp(70px,10vh,120px);background:linear-gradient(180deg,rgba(240,246,255,0) 0%,rgba(240,246,255,.55) 18%,rgba(240,246,255,.55) 82%,rgba(240,246,255,0) 100%)}
.st-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(30px,5vh,60px);flex-wrap:wrap}
.st-band{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,40px);padding-left:clamp(14px,3vw,56px);padding-right:clamp(14px,3vw,56px)}
.story{position:relative}
.story:nth-child(2){transform:translateY(clamp(20px,5vh,64px))}
.story:nth-child(3){transform:translateY(clamp(-18px,-2vh,-8px))}
.st-frame{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 30px 70px -30px rgba(13,44,102,.45);width:100%;display:block;text-align:left;padding:0;border:0}
.st-frame .sc{position:absolute;inset:0}
.st-frame .sc svg{width:100%;height:100%;object-fit:cover}
.st-frame .grain{position:absolute;inset:0;opacity:.3;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
.st-frame .chy{position:absolute;left:18px;bottom:16px;display:flex;flex-direction:column;gap:3px;color:#fff;z-index:2}
.st-frame .chy b{font:800 clamp(15px,1.3vw,20px)/1.15 var(--f-d);letter-spacing:-.01em;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.st-frame .chy span{font:500 10.5px/1.4 var(--f-m);letter-spacing:.1em;color:rgba(255,255,255,.85);text-transform:uppercase}
.st-frame .dur{position:absolute;right:16px;top:14px;font:600 10.5px/1 var(--f-m);color:#fff;background:rgba(9,14,22,.55);backdrop-filter:blur(6px);padding:7px 10px;border-radius:8px;z-index:2}
.st-frame .ring{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.65);display:flex;align-items:center;justify-content:center;z-index:2;transition:transform .35s}
.st-frame .ring::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);animation:cur-rip 2.6s ease-out infinite}
.st-frame .ring svg{width:22px;height:22px;margin-left:3px}
.st-frame:hover .ring{transform:scale(1.12)}
.st-meta{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-top:16px}
.st-quote{font:700 clamp(15px,1.3vw,19px)/1.45 var(--f-d);max-width:44ch}
.st-stat{flex:none;text-align:right}
.st-stat b{display:block;font:600 clamp(18px,1.7vw,25px)/1 var(--f-m);color:var(--green)}
.st-stat span{font:600 10px/1.6 var(--f-m);letter-spacing:.12em;color:var(--ink3);text-transform:uppercase}
.st-people{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(40px,7vh,72px);padding-left:clamp(14px,3vw,56px);padding-right:clamp(14px,3vw,56px);align-items:center}
.st-people .pp{font:600 12px/1 var(--f-d);color:var(--ink2);border:1px solid var(--line);background:#fff;border-radius:99px;padding:10px 16px}
.st-people .pcap{font:600 10px/1.5 var(--f-m);letter-spacing:.16em;color:var(--ink3);text-transform:uppercase;margin-right:8px}
@media (max-width:820px){.st-band{grid-template-columns:1fr}.story:nth-child(2),.story:nth-child(3){transform:none}}
@media (max-width:860px){.sp-viz{display:none}.sp-mrows{display:flex;flex-direction:column;gap:9px}.sp-mrow{display:flex;justify-content:space-between;align-items:center;gap:10px;border-radius:14px;padding:14px 16px;font:600 12.5px/1.4 var(--f-m)}.sp-mrow b{font-size:15px;white-space:nowrap}.sp-mrow.g1{background:#E8ECF2;color:#4A5568}.sp-mrow.g2{background:#EDF0F5;color:#5A6678}.sp-mrow.g3{background:#F1F4F8;color:#6A7688}.sp-mrow.ic{background:rgba(18,87,214,.09);color:#1257D6}.sp-mrow.us{background:rgba(33,184,240,.12);color:#0E93C4;border:1.5px solid rgba(33,184,240,.4)}}

/* ---------- lightbox ---------- */
#lb{position:fixed;inset:0;z-index:420;background:rgba(8,13,22,.9);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:4vh 4vw}
#lb.open{display:flex}
#lb .lb-card{width:min(1080px,94vw);position:relative}
#lb .lb-stage{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:#0B1220}
#lb .lb-stage svg{width:100%;height:100%}
#lb .lb-cap{position:absolute;left:0;right:0;bottom:74px;text-align:center;color:#fff;font:600 clamp(14px,1.6vw,22px)/1.5 var(--f-d);padding:0 8%;text-shadow:0 2px 16px rgba(0,0,0,.5)}
#lb .lb-bar{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;display:flex;align-items:center;gap:14px;background:linear-gradient(transparent,rgba(5,9,16,.85));color:#fff}
#lb .lb-play{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;flex:none}
#lb .lb-play svg{width:15px;height:15px}
#lb .lb-scrub{flex:1;height:5px;border-radius:4px;background:rgba(255,255,255,.22);overflow:hidden}
#lb .lb-scrub i{display:block;height:100%;width:0;background:var(--grad)}
#lb .lb-t{font:500 11.5px/1 var(--f-m);letter-spacing:.05em}
#lb .lb-samp{position:absolute;left:16px;top:14px;font:600 9.5px/1 var(--f-m);letter-spacing:.16em;color:#FFDF9E;background:rgba(120,72,6,.5);border:1px solid rgba(245,158,11,.5);padding:7px 10px;border-radius:8px}
#lb .lb-who{display:flex;justify-content:space-between;align-items:center;color:#C7D2E4;margin-top:14px;font:600 13px/1.4 var(--f-d)}
#lb .lb-close{position:absolute;right:-6px;top:-52px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;font:400 20px/1 var(--f-d);display:flex;align-items:center;justify-content:center}

/* ---------- outro / footer ---------- */
.outro{padding:clamp(80px,14vh,160px) 0 clamp(30px,5vh,60px);position:relative;overflow:clip}
.outro .o-head{text-align:left;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.outro .h2{max-width:14ch}
.footer{margin-top:clamp(60px,10vh,120px);border-top:1px solid var(--line);padding-top:clamp(30px,5vh,52px)}
.f-giant{font:800 clamp(64px,17.4vw,320px)/0.95 var(--f-d);letter-spacing:-.065em;color:var(--ink);white-space:nowrap;text-align:center;user-select:none}
.f-giant .fg-nex{background:linear-gradient(92deg,var(--blue) 0%,var(--cyan) 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.f-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(18px,3vw,44px);padding-top:clamp(26px,5vh,50px);padding-bottom:26px}
.f-cols h4{font:600 11px/1 var(--f-m);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px}
.f-cols p,.f-cols a{font:500 13.5px/1.9 var(--f-d);color:var(--ink2);display:block}
.f-cols a:hover{color:var(--blueink)}
.f-brand{font:800 20px/1.3 var(--f-d)}
.f-brand small{display:block;font:500 12px/1.6 var(--f-d);color:var(--ink2);max-width:30ch;margin-top:8px}
.f-legal{display:flex;justify-content:space-between;gap:14px;padding-top:18px;padding-bottom:26px;border-top:1px solid var(--line);font:500 11px/1.6 var(--f-m);color:var(--ink3);flex-wrap:wrap}
@media (max-width:820px){.f-cols{grid-template-columns:1fr 1fr}}

/* ============================================================ PRICING */
.pr-hero{min-height:78vh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:120px;padding-bottom:clamp(30px,6vh,64px);gap:clamp(20px,4vh,40px)}
.pr-hero .pr-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.pr-h1{font:800 clamp(44px,7.6vw,124px)/1 var(--f-d);letter-spacing:-.04em;max-width:12ch}
.cur-tog{display:inline-flex;border:1.5px solid var(--line);border-radius:99px;padding:4px;background:#fff}
.cur-tog button{font:700 13px/1 var(--f-d);padding:12px 20px;border-radius:99px;color:var(--ink2);min-height:44px}
.cur-tog button.on{background:var(--ink);color:#fff}
.rate-wall{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px);padding-left:clamp(12px,1.6vw,30px);padding-right:clamp(12px,1.6vw,30px)}
.rcard{border-radius:26px;padding:clamp(22px,2.6vw,40px);position:relative;overflow:hidden}
.rcard.rp{background:var(--gradpanel);color:#fff}
.rcard.rk{background:#fff;border:1.5px solid var(--line)}
.rcard .r-tag{font:600 10.5px/1 var(--f-m);letter-spacing:.2em;text-transform:uppercase;opacity:.75;margin-bottom:14px;display:block}
.rcard .r-big{font:800 clamp(30px,3.6vw,58px)/1 var(--f-d);letter-spacing:-.035em}
.rcard .r-big .ic{font-size:.5em;font-weight:700;opacity:.8;letter-spacing:0}
.rcard .r-sub{font:500 13.5px/1.6 var(--f-d);opacity:.85;margin-top:10px;max-width:44ch}
.rcard ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:8px}
.rcard li{font:600 13px/1.5 var(--f-d);display:flex;gap:10px;align-items:baseline}
.rcard.rp li::before{content:"✓";color:#7CE7B7;font-weight:800}
.rcard.rk li::before{content:"✓";color:var(--green);font-weight:800}
@media (max-width:820px){.rate-wall{grid-template-columns:1fr}}
/* calculator */
.calc{padding:clamp(70px,11vh,130px) 0;background:var(--bandb);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.calc-grid{display:grid;grid-template-columns:minmax(300px,5fr) 7fr;gap:clamp(20px,3vw,54px);align-items:center}
.cf{display:flex;flex-direction:column;gap:22px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(18px,2vw,30px)}
.cf .cf-top{display:flex;justify-content:space-between;align-items:baseline;font:700 14px/1.3 var(--f-d)}
.cf .cf-top output{font:600 16px/1 var(--f-m);color:var(--blueink)}
.cf input[type=range]{width:100%;appearance:none;-webkit-appearance:none;height:44px;background:transparent}
.cf input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.cf input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--blue);margin-top:-10px;box-shadow:0 4px 12px rgba(18,87,214,.35)}
.cf input[type=range]::-moz-range-track{height:6px;border-radius:4px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.cf input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--blue)}
.co .co-cap{font:600 11px/1 var(--f-m);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.co .co-big{font:600 clamp(56px,7vw,110px)/1 var(--f-m);letter-spacing:-.05em;color:var(--ink);margin:10px 0 2px}
.co .co-big em{font-style:normal;color:var(--green)}
.co .co-sub{font:600 14px/1.6 var(--f-d);color:var(--ink2)}
.chan{margin-top:26px}
.chan .ch-lab{display:flex;justify-content:space-between;font:600 10.5px/1.4 var(--f-m);letter-spacing:.1em;color:var(--ink3);text-transform:uppercase;margin-bottom:8px}
.chan .ch-bed{position:relative;height:92px;border-radius:16px;overflow:hidden;background:#E9EEF7}
.chan .ch-kept{position:absolute;left:0;top:0;bottom:0;width:70%;background:linear-gradient(90deg,var(--blue),var(--cyan) 70%,#3BD68F);border-radius:16px 0 0 16px;display:flex;align-items:center;padding-left:18px;color:#fff;font:700 13px/1.3 var(--f-d)}
.chan .ch-lost{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;color:var(--ink3);font:600 11px/1.3 var(--f-m);text-align:center;padding:0 8px}
.co-row{display:flex;gap:clamp(14px,2vw,34px);margin-top:22px;flex-wrap:wrap}
.co-row div b{display:block;font:600 clamp(19px,1.8vw,26px)/1 var(--f-m)}
.co-row div span{font:600 10.5px/1.8 var(--f-m);letter-spacing:.1em;color:var(--ink3);text-transform:uppercase}
@media (max-width:900px){.calc-grid{grid-template-columns:1fr}}
/* bill + zeros */
.bill{padding:clamp(70px,10vh,120px) 0}
.bill-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,40px);align-items:stretch}
.bl.zero{color:#9AA6B8}
.bl.zero span{text-decoration:line-through}
.bl.zero b{color:var(--green);font-weight:600}
.bill-card{border-radius:22px;padding:clamp(18px,2vw,30px);font-family:var(--f-m)}
.bill-card.ours{background:#fff;border:1.5px solid #BFE9D4;box-shadow:0 24px 60px -30px rgba(11,164,92,.35)}
.bill-card.theirs{background:#F3F5F9;color:var(--ink3);position:relative;overflow:hidden}
.bill-card h3{font:800 16px/1.3 var(--f-d);letter-spacing:-.01em;color:var(--ink);margin-bottom:14px}
.bill-card.theirs h3{color:var(--ink2)}
.bl{display:flex;justify-content:space-between;gap:10px;font:500 13px/2.2 var(--f-m);border-bottom:1px dashed var(--line)}
.bl b{font-weight:600}
.bl.total{border-bottom:0;font-weight:600;color:var(--ink);padding-top:6px}
.bl.junk{filter:blur(0.6px);opacity:.75}
.zeros{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px);margin-top:clamp(30px,5vh,54px)}
.z{border:1.5px solid var(--line);border-radius:20px;padding:20px;text-align:left;background:#fff}
.z b{font:800 clamp(34px,3.4vw,54px)/1 var(--f-d);letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.z span{display:block;font:600 12px/1.5 var(--f-d);color:var(--ink2);margin-top:8px}
@media (max-width:820px){.bill-grid{grid-template-columns:1fr}.zeros{grid-template-columns:1fr 1fr}}
/* faq */
.faq{padding:clamp(60px,9vh,110px) 0;background:var(--bandg);border-top:1px solid var(--line)}
.faq-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(20px,3vw,60px);align-items:start}
.acc{display:flex;flex-direction:column;gap:10px}
.qa{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:left;font:700 15px/1.4 var(--f-d);padding:18px 20px;min-height:44px}
.qa button .pm{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font:400 15px/1 var(--f-d);color:var(--blueink);transition:transform .3s}
.qa .qa-b{max-height:0;overflow:hidden}
.qa .qa-b p{padding:0 20px 18px;font-size:14px;color:var(--ink2);max-width:62ch}
.qa.open .pm{transform:rotate(45deg);background:var(--blue);color:#fff;border-color:var(--blue)}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}}
.cta-band{padding:clamp(70px,11vh,130px) 0;text-align:left}
.cta-band .cb-in{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;background:var(--gradpanel);border-radius:28px;padding:clamp(26px,4vw,60px);color:#fff;margin-left:clamp(12px,1.6vw,30px);margin-right:clamp(12px,1.6vw,30px);position:relative;overflow:hidden}
.cta-band .cb-in::after{content:"";position:absolute;right:-8%;top:-40%;width:46%;height:180%;z-index:0;background:radial-gradient(closest-side,rgba(33,184,240,.5),transparent);pointer-events:none}
.cta-band .cb-in > *{position:relative;z-index:1}
.cta-band .h2{color:#fff;max-width:16ch}
.cta-band p{color:var(--onsub);margin-top:10px;font-size:15px}

/* ============================================================ HARDWARE */
.hw-hero{min-height:46vh;display:flex;flex-direction:column;justify-content:center;padding-top:130px;padding-bottom:clamp(26px,5vh,50px);gap:18px}
.hw-h1{font:800 clamp(44px,8vw,132px)/0.98 var(--f-d);letter-spacing:-.045em}
.hw-hero .hh-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.f3d-sec{background:linear-gradient(180deg,rgba(255,255,255,0),var(--bandb) 28%,var(--bandbStrong) 72%,rgba(255,255,255,0));overflow:clip}
.f3d-pin{min-height:100vh;display:flex;align-items:center;position:relative;padding-top:70px;padding-bottom:40px}
.f3d-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(20px,3vw,60px);align-items:center;width:100%}
.f3d-copy{display:flex;flex-direction:column;gap:16px}
.f3d-stage{perspective:1400px;display:flex;align-items:center;justify-content:center;min-height:60vh}
.f3d-dev{transform-style:preserve-3d;position:relative;width:min(340px,60vw)}
.f3d-dev > svg{width:100%;height:auto;filter:drop-shadow(0 40px 60px rgba(13,44,102,.35))}
.f3d-call{position:absolute;font:600 11px/1.5 var(--f-m);color:var(--ink);background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:12px;padding:10px 14px;box-shadow:0 14px 34px -16px rgba(13,44,102,.35);opacity:0;white-space:nowrap}
.f3d-call b{color:var(--blueink)}
.f3d-call.c1{left:-34%;top:16%}
.f3d-call.c2{right:-30%;top:38%}
.f3d-call.c3{left:-28%;bottom:20%}
.f3d-call.c4{right:-26%;bottom:6%}
@media (max-width:900px){.f3d-grid{grid-template-columns:1fr}.f3d-stage{min-height:0;padding:20px 0}.f3d-dev{display:flex;flex-direction:column;gap:10px;width:100%;align-items:center}.f3d-dev > svg{width:min(220px,56vw)}.f3d-call{position:static;opacity:1;white-space:normal;align-self:stretch;text-align:center}}
.hw-cat{padding-top:clamp(50px,8vh,100px);padding-bottom:clamp(50px,8vh,100px)}
.hw-filt{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 30px}
.hw-filt button{font:700 13px/1 var(--f-d);padding:13px 20px;border-radius:99px;border:1.5px solid var(--line);color:var(--ink2);min-height:44px;background:#fff;transition:all .25s}
.hw-filt button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.hw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,20px)}
.hw-card{border:1.5px solid var(--line);border-radius:20px;background:#fff;padding:18px;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,opacity .3s}
.hw-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(13,44,102,.3)}
.hw-card.hide{display:none}
.hwc-media{height:150px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:linear-gradient(160deg,var(--tintcard),var(--tintcard2));margin-bottom:14px}
.hwc-media svg{height:124px;width:auto}
.hw-card h3{font:800 15.5px/1.25 var(--f-d);letter-spacing:-.01em}
.hw-card p{font:500 12px/1.5 var(--f-d);color:var(--ink2);margin-top:4px;flex:1}
.hwc-tags{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.hwc-tags span{font:600 9px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);background:#F1F4FA;border-radius:6px;padding:5px 8px}
.hwc-tags span:first-child{color:var(--blueink);background:var(--bandb)}
@media (max-width:1080px){.hw-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.hw-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.hw-grid{grid-template-columns:1fr 1fr}.hwc-media{height:110px}.hwc-media svg{height:92px}}

/* ============================================================ SWITCH */
.sw-hero{min-height:54vh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:120px;padding-bottom:clamp(24px,4vh,44px);gap:16px}
.sw-h1{font:800 clamp(42px,7.4vw,118px)/1 var(--f-d);letter-spacing:-.04em;max-width:14ch}
.sw-body{padding:clamp(30px,6vh,70px) 0 clamp(70px,10vh,120px)}
.sw-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(20px,3vw,56px);align-items:start}
.gates{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
.gate{position:relative;height:74px;border-radius:16px;overflow:hidden;background:var(--bandb);border:1.5px solid var(--line)}
.gate .g-l,.gate .g-r{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(180deg,var(--gatetint1),var(--gatetint2));transition:transform .6s cubic-bezier(.7,0,.2,1)}
.gate .g-l{left:0;border-right:2px solid #fff}
.gate .g-r{right:0;border-left:2px solid #fff}
.gate .g-lab{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;z-index:2;font:700 12px/1.2 var(--f-d);color:var(--ink2)}
.gate .g-lab b{font:600 10px/1 var(--f-m);letter-spacing:.18em;color:var(--ink3)}
.gate .g-stream{position:absolute;left:-10%;top:50%;height:4px;width:120%;transform:translateY(-50%) scaleX(0);transform-origin:0 50%;background:var(--grad);border-radius:4px}
.gate.open .g-l{transform:translateX(-86%)}
.gate.open .g-r{transform:translateX(86%)}
.gate.open .g-stream{transform:translateY(-50%) scaleX(1)}
.gate.open .g-lab{color:var(--blueink)}
.gate.done .g-stream{background:var(--green)}
.gate.done .g-lab{color:var(--green)}
.sw-form{background:#fff;border:1.5px solid var(--line);border-radius:26px;padding:clamp(20px,2.4vw,36px);box-shadow:0 30px 80px -40px rgba(13,44,102,.3)}
.swf-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:20px}
.swf-head h3{font:800 clamp(19px,1.9vw,26px)/1.2 var(--f-d);letter-spacing:-.02em}
.swf-head .cnt{font:600 12px/1 var(--f-m);color:var(--ink3)}
.fstep{display:none;flex-direction:column;gap:16px}
.fstep.on{display:flex}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.frow2{grid-template-columns:1fr}}
.ff{display:flex;flex-direction:column;gap:7px}
.ff label{font:700 12.5px/1 var(--f-d);color:var(--ink2)}
.ff input,.ff select{font:500 15px/1.3 var(--f-d);color:var(--ink);border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;background:#fff;min-height:48px;width:100%}
.ff input:focus,.ff select:focus{outline:2.5px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.ff .err{display:none;font:600 11.5px/1.4 var(--f-d);color:#D6403A}
.ff.bad input,.ff.bad select{border-color:#D6403A}
.ff.bad .err{display:block}
.swf-foot{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.swf-note{font:500 11.5px/1.6 var(--f-m);color:var(--ink3);margin-top:14px}
.sw-success{display:none;text-align:center;padding:30px 10px;flex-direction:column;align-items:center;gap:14px}
.sw-success.on{display:flex}
.sw-success .ok-ring{width:92px;height:92px;border-radius:50%;background:var(--bandg);display:flex;align-items:center;justify-content:center}
.sw-success .ok-ring svg{width:44px;height:44px}
.sw-success .ok-ring path{stroke:var(--green);stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.sw-success h3{font:800 clamp(22px,2.2vw,30px)/1.15 var(--f-d)}
.sw-success p{color:var(--ink2);max-width:44ch}
.sw-rail{display:flex;flex-direction:column;gap:16px;position:sticky;top:96px}
.rail-card{border:1.5px solid var(--line);border-radius:20px;padding:20px;background:#fff}
.rail-card.hi{background:var(--bandg);border-color:#BFE9D4}
.rail-card h4{font:800 15px/1.3 var(--f-d);margin-bottom:10px}
.rail-card ol{list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:12px}
.rail-card ol li{counter-increment:st;display:flex;gap:12px;font:500 13px/1.5 var(--f-d);color:var(--ink2)}
.rail-card ol li::before{content:counter(st,decimal-leading-zero);font:600 11px/1 var(--f-m);color:var(--blueink);border:1.5px solid var(--gatetint2);border-radius:8px;padding:6px 7px;height:fit-content}
.rail-card .rc-line{display:flex;align-items:center;gap:10px;font:600 13.5px/1.4 var(--f-d);padding:8px 0}
.rail-card .rc-line svg{width:18px;height:18px;flex:none}
.rail-card p{font:500 13px/1.6 var(--f-d);color:var(--ink2)}
.rail-card p b{color:var(--ink)}
@media (max-width:900px){.sw-grid{grid-template-columns:1fr}.sw-rail{position:static}}

/* ---------- shared reveals / velocity ---------- */
.rv{opacity:0;transform:translateY(16px)}
html:not(.js) .rv,html.rm .rv{opacity:1;transform:none}
html.rm *{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}
html.rm .mq .mq-in{animation:none}
@media (prefers-reduced-motion:reduce){
  .mq .mq-in{animation:none}
  #cur,.h-scroll i{display:none}
  .rv{opacity:1;transform:none}
}
/* mobile type + layout adjustments */
@media (max-width:900px){
  .hero-h{font-size:clamp(44px,12.5vw,80px);gap:6px}
  .hero-h .l2{padding-left:6vw}
  .hero-h .l3{flex-direction:column;align-items:flex-start;gap:10px}
  .h-sub{order:2}
  .h-chip{display:none}
  .h-live{text-align:left}
  .hero-top{flex-direction:column}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .jn-track{grid-template-columns:1fr;gap:12px}
  .jn-line{left:14px;right:auto;top:2%;bottom:2%;width:4px;height:auto}
  .jst{margin-left:34px}
  .jn-line i{transform-origin:50% 0;transform:scaleY(0);width:100%;height:100%}
  .jn-pulse{display:none}
  .jst{opacity:1;flex-direction:row;align-items:center;gap:14px}
  .jst .j-ico{width:46px;height:46px;flex:none}
  .jst h3{font-size:18px}
  .jst .j-body{display:flex;flex-direction:column;gap:3px}
  .jn-pin,.sp-pin{min-height:0;padding-top:90px;padding-bottom:50px}
  .hero-pin{height:auto;min-height:100vh;padding-top:96px;padding-bottom:92px}
  .h-scroll{display:none}
  .hero-stats{flex-wrap:wrap;row-gap:14px}
  .zeros{grid-template-columns:1fr 1fr}
  .gates{grid-template-columns:1fr;gap:8px}
  .gate{height:58px}
  .f-cols{grid-template-columns:1fr 1fr}
  .f-giant{font-size:19vw}
  .stories{padding-bottom:110px}
  .st-people{padding-bottom:10px}
}

/* ---------- hero visual slot (terminal / card / dashboard) ---------- */
.hero-mid{position:relative}
.hero-h{position:relative;z-index:1}
.hv-slot{--hvw:clamp(270px,min(19vw,36vh),400px);position:absolute;left:58%;margin-left:calc(var(--hvw)*-0.5);top:50%;margin-top:calc(var(--hvw)*-0.9375);width:var(--hvw);aspect-ratio:320/600;z-index:0;perspective:1400px}
.hero-h .l3 .hw{text-shadow:-3px -3px 0 #fff,3px -3px 0 #fff,-3px 3px 0 #fff,3px 3px 0 #fff,0 -4px 0 #fff,0 4px 0 #fff,-4px 0 0 #fff,4px 0 0 #fff,0 14px 34px rgba(13,44,102,.18)}
.h-subwrap{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.h-subwrap .h-chip{margin:0}
.hv-slot .ht-shadow{position:absolute;left:50%;bottom:-24px;width:150%;height:30px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(13,44,102,.28),rgba(13,44,102,0) 70%);border-radius:50%}
.hv{position:absolute;inset:0;opacity:0;pointer-events:none;transform:scale(.94);transition:opacity .45s ease,transform .45s ease}
.hv.on{opacity:1;transform:scale(1)}
.hv .ht-rig{width:100%;height:100%}
.ht-rig{position:relative;width:100%;aspect-ratio:320/600;transform-style:preserve-3d}
.ht-rig>.hl{position:absolute;inset:0}
.hl-back{transform:translateZ(-26px)}
.hl-body{transform:translateZ(0)}
.hl-glow{transform:translateZ(30px)}
.ht-screen{position:absolute;left:14.5%;top:11.5%;width:71%;height:60%;border-radius:11px;overflow:hidden;background:linear-gradient(165deg,#0E1626 0%,#122448 100%);transform:translateZ(24px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.ht-rig .scr{position:absolute;inset:0;padding:11% 10%;display:flex;flex-direction:column;opacity:0;color:#fff}
html:not(.js) .ht-rig .scr.s-tap,html.rm .ht-rig .scr.s-tap{opacity:1}
.ht-rig .scr .sk{font:600 8.5px/1 var(--f-m);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ht-rig .scr .sv{font:800 clamp(20px,1.9vw,30px)/1.1 var(--f-d);letter-spacing:-.03em;margin-top:6px;color:#fff}
.s-tap .waves{margin:auto auto 0;width:58%;display:flex;justify-content:center}
.s-tap .waves svg{width:66px;height:auto}
.s-tap .waves path{stroke:var(--cyan);stroke-width:2.4;stroke-linecap:round;fill:none;animation:wv 1.6s ease-out infinite}
.s-tap .waves path:nth-child(2){animation-delay:.25s}
.s-tap .waves path:nth-child(3){animation-delay:.5s}
@keyframes wv{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
.s-tap .tapline{margin-top:9px;text-align:center;font:600 8.5px/1.4 var(--f-m);letter-spacing:.14em;color:rgba(255,255,255,.7);text-transform:uppercase}
.s-ok .okring{margin:auto auto 4px;width:52px;height:52px;align-self:center;border-radius:50%;background:rgba(11,164,92,.18);display:flex;align-items:center;justify-content:center}
.s-ok .okring svg{width:24px;height:24px}
.s-ok .okline{text-align:center;font:700 12px/1.3 var(--f-d);color:#3ECD8B;letter-spacing:.02em;margin-bottom:8px}
.s-dep .depcard{margin-top:auto;background:rgba(11,164,92,.16);border:1px solid rgba(62,205,139,.4);border-radius:9px;padding:9px 11px}
.s-dep .depcard .da{font:700 clamp(12px,1.05vw,16px)/1.2 var(--f-d);color:#3ECD8B}
.s-dep .depcard .dk{font:500 7.5px/1.5 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-top:3px}
@media (max-width:1100px) and (min-width:901px){.hv-slot{--hvw:clamp(200px,min(20vw,34vh),250px);left:auto;right:26px;margin-left:0;margin-top:calc(var(--hvw)*-0.9375)}}
@media (max-width:900px){
  .hero-mid{display:flex;flex-direction:column}
  .hv-slot{--hvw:min(48vw,200px);position:static;order:2;width:var(--hvw);margin:18px auto 2px;aspect-ratio:320/560}
  .hv-slot .ht-shadow{bottom:-12px}
}

/* ---------- statement strike (home) ---------- */
.stm{background:transparent}
.stm-pin{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.6vh,26px);padding-top:84px;padding-bottom:36px;position:relative;overflow:clip}
.stm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.stm-count{font:600 11px/1.5 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);border:1px solid var(--line);background:#fff;border-radius:99px;padding:9px 14px}
.stm-paper{width:calc(100% - 2*var(--gut));margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 70px -34px rgba(13,44,102,.35);padding:22px clamp(16px,2.6vw,42px) 18px;position:relative;z-index:2}
.stm-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:12px;border-bottom:1.5px solid var(--ink);margin-bottom:4px}
.stm-top .tt{font:600 clamp(11px,1vw,14px)/1.3 var(--f-m);color:var(--ink);letter-spacing:.06em}
.stm-top .td{font:500 10px/1.4 var(--f-m);letter-spacing:.18em;color:var(--ink3)}
.sl{display:flex;align-items:baseline;gap:12px;padding:.42em 2px;border-bottom:1px solid var(--line);position:relative;font:500 clamp(11px,1vw,14.5px)/1.5 var(--f-m)}
.sl .n{color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl .dots{flex:1;border-bottom:1px dotted rgba(16,23,32,.25);transform:translateY(-4px)}
.sl .a{color:var(--ink);white-space:nowrap;font-weight:500}
.sl .s0{color:var(--green);font-weight:600;white-space:nowrap;opacity:0;margin-left:2px}
.sl .strike{position:absolute;left:-4px;right:-4px;top:50%;height:2.5px;background:var(--blue);border-radius:2px;transform:scaleX(0);transform-origin:0 50%;z-index:1}
html:not(.js) .sl .strike,html.rm .sl .strike{transform:scaleX(1)}
html:not(.js) .sl .s0,html.rm .sl .s0{opacity:1}
.sl.keep .n{color:var(--ink);font-weight:600}
.sl.keep .a{font-weight:600}
.sl.keep .n b{color:var(--blueink)}
.sl.total{border-top:1.5px solid var(--ink);border-bottom:0;margin-top:4px;padding-top:.6em}
.sl.total .a{font-weight:600;color:var(--green)}
.stm-big{position:absolute;right:var(--gut);bottom:31vh;z-index:3;text-align:right;opacity:0;pointer-events:none}
html:not(.js) .stm-big,html.rm .stm-big{opacity:1;position:static;text-align:left;padding:10px var(--gut) 0}
.stm-big .v{font:800 clamp(80px,9.5vw,170px)/0.9 var(--f-d);letter-spacing:-.05em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 6px 24px rgba(255,255,255,.9))}
.stm-big .k{font:600 11px/1.6 var(--f-m);letter-spacing:.24em;text-transform:uppercase;color:var(--ink2);margin-top:10px}
@media (max-width:900px){
  .stm-pin{min-height:0;padding-top:90px;padding-bottom:40px}
  .stm-paper{width:calc(100% - 28px)}
  .stm-big{position:static;text-align:left;padding:14px var(--gut) 0}
  .stm-big .v{font-size:clamp(64px,19vw,110px)}
}

/* ---------- device detail page ---------- */
.dv-hero{overflow:clip}
.dv-pin{height:100vh;min-height:620px;position:relative;display:flex;align-items:center;justify-content:center}
.dv-name{position:absolute;left:0;right:0;top:50%;transform:translateY(-54%);text-align:center;font:800 clamp(90px,17vw,300px)/0.86 var(--f-d);letter-spacing:-.05em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9;z-index:0;user-select:none}
.dv-rigwrap{position:relative;z-index:2;width:clamp(200px,19vw,300px);perspective:1600px}
.dv-rigwrap .ht-shadow{position:absolute;left:50%;bottom:-30px;width:150%;height:34px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(13,44,102,.3),rgba(13,44,102,0) 70%);border-radius:50%}
.dv-kick{position:absolute;left:0;top:96px;z-index:3}
.dv-chips{position:absolute;left:0;right:0;bottom:9vh;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;z-index:3}
.dv-chips span{font:600 10.5px/1 var(--f-m);letter-spacing:.14em;color:var(--ink2);background:#fff;border:1px solid var(--line);border-radius:99px;padding:9px 14px}
.dv-strip{position:sticky;top:64px;z-index:60;display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,26px);flex-wrap:wrap;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px var(--gut);font:600 11px/1.4 var(--f-m);letter-spacing:.1em;color:var(--ink2)}
.dv-strip b{color:var(--ink);font-weight:600}
.dv-strip .sep{width:5px;height:5px;border-radius:50%;background:var(--cyan)}
.dv-strip a{color:var(--blueink);font-weight:600;white-space:nowrap}
.dv-feat{background:var(--bandb);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:clip}
.dvf-pin{min-height:100vh;display:flex;align-items:center;position:relative;padding-top:70px;padding-bottom:40px}
.dvf-grid{display:grid;grid-template-columns:6fr 5fr;gap:clamp(20px,3vw,64px);align-items:center;width:100%}
.dvf-stage{display:flex;align-items:center;justify-content:center;position:relative;min-height:62vh;perspective:1500px}
.dvf-stage .dv-holder{width:clamp(190px,17vw,270px);position:relative}
.dvf-caps{position:relative;min-height:300px}
.dv-cap{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;max-width:44ch}
html:not(.js) .dv-cap,html.rm .dv-cap{position:static;transform:none;opacity:1;margin-bottom:26px}
.dv-cap .dc-line{width:64px;height:2.5px;background:var(--grad);border-radius:2px;transform-origin:0 50%;margin-bottom:16px}
.dv-cap .dc-k{font:600 10.5px/1 var(--f-m);letter-spacing:.22em;color:var(--blueink);text-transform:uppercase}
.dv-cap h3{font:800 clamp(24px,2.6vw,40px)/1.08 var(--f-d);letter-spacing:-.02em;margin:10px 0 10px}
.dv-cap p{font-size:clamp(13.5px,1.1vw,16px);color:var(--ink2);max-width:40ch}
.dvf-idx{position:absolute;right:var(--gut);bottom:40px;font:600 12px/1 var(--f-m);letter-spacing:.2em;color:var(--ink3)}
.dv-receipt{position:absolute;left:19%;top:93%;width:62%;height:0;background:repeating-linear-gradient(180deg,#fff 0 10px,#EDF1F7 10px 12px);border-radius:0 0 6px 6px;box-shadow:0 10px 22px -10px rgba(13,44,102,.4);overflow:hidden;z-index:-1}
.dv-hotspot{position:absolute;border:2px solid var(--cyan);border-radius:12px;opacity:0;box-shadow:0 0 0 5px rgba(33,184,240,.18);pointer-events:none}
.hs-scr{left:13%;top:10.5%;width:74%;height:62%}
.hs-cam{left:36%;top:2.6%;width:28%;height:5%;border-radius:99px}
.hs-bat{left:20%;top:38%;width:60%;height:26%;border-radius:16px}
.hs-prn{left:17%;top:87%;width:66%;height:6%;border-radius:99px}
.hs-nfc{left:30%;top:74.5%;width:40%;height:12%;border-radius:50%}
.dv-turn{padding:0;overflow:clip}
.dvt-pin{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;position:relative}
.dvt-pin .dv-holder{width:clamp(190px,17vw,280px);perspective:1600px;position:relative}
.dvt-deg{font:600 clamp(15px,1.4vw,20px)/1 var(--f-m);color:var(--ink2)}
.dvt-cap{font:600 11px/1 var(--f-m);letter-spacing:.24em;color:var(--ink3);text-transform:uppercase}
.hl-backface{position:absolute;inset:0;transform:translateZ(-27px) rotateY(180deg);backface-visibility:hidden}
.ht-rig .bf-hide{backface-visibility:hidden}
.dv-wild{padding-top:clamp(60px,9vh,110px);padding-bottom:clamp(60px,9vh,110px);background:var(--bandg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px);margin-top:clamp(20px,3.4vh,36px)}
.dw-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(16px,1.8vw,26px)}
.dw-card .dw-ic{width:46px;height:46px;border-radius:14px;background:var(--bandb);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.dw-card .dw-ic svg{width:24px;height:24px}
.dw-card h3{font:800 17px/1.25 var(--f-d)}
.dw-card p{font:500 13px/1.55 var(--f-d);color:var(--ink2);margin-top:6px}
.dw-card .tagf{display:inline-block;font:600 9.5px/1 var(--f-m);letter-spacing:.14em;color:var(--blueink);background:var(--bandb);border-radius:6px;padding:5px 8px;margin-top:12px;text-transform:uppercase}
.dv-comp{padding-top:clamp(60px,9vh,110px);padding-bottom:clamp(60px,9vh,110px)}
.dc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px);margin-top:clamp(20px,3.4vh,36px)}
.dc-card{border:1.5px solid var(--line);border-radius:20px;padding:clamp(16px,1.8vw,26px);background:#fff;display:flex;flex-direction:column}
.dc-card.hero-pick{border-color:var(--blue);box-shadow:0 24px 54px -26px var(--accshadow)}
/* 2026-09-26 — approved square product frame: 1:1, radius 20px, product capped at
   80% of the frame (10% clearance every side), always contain, never crop. The
   plate matches .tb-dev .tb-plate so every product placeholder reads as one
   system. This replaces the per-instance inline styles that used to carry it on
   all 78 markup instances across the 26 device pages. */
.dc-card .dcc-media{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:20px;overflow:hidden;background:#ECECEC;background-image:radial-gradient(112% 86% at 50% 24%,#F4F4F4 0%,#EAEAEA 58%,#E0E0E0 100%);margin-bottom:14px}
.dc-card .dcc-media img{max-width:80%;max-height:80%;width:auto;height:auto;object-fit:contain;display:block}
.dc-card .dcc-media svg{max-width:80%;max-height:80%;width:auto;height:auto}
.dc-card h3{font:800 16px/1.25 var(--f-d)}
.dc-card .bfor{font:600 10.5px/1.5 var(--f-m);letter-spacing:.14em;color:var(--blueink);text-transform:uppercase;margin-top:4px}
.dc-card ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:7px;flex:1}
.dc-card li{font:500 12.5px/1.5 var(--f-d);color:var(--ink2);display:flex;gap:8px}
.dc-card li::before{content:"·";color:var(--blueink);font-weight:800}
.dc-card li.yes::before{content:"✓";color:var(--green);font-weight:800}
@media (max-width:900px){
  .dv-name{font-size:clamp(64px,20vw,120px)}
  .dv-pin{min-height:0;height:auto;padding:110px 0 60px;flex-direction:column;gap:22px}
  .dv-kick{position:static;padding:0 var(--gut);align-self:flex-start}
  .dv-chips{position:static;padding:0 16px}
  .dvf-grid{grid-template-columns:1fr}
  .dvf-pin{min-height:0;padding-top:80px;padding-bottom:50px}
  .dvf-stage{min-height:0;padding:10px 0}
  .dvf-caps{min-height:0;display:flex;flex-direction:column;gap:20px}
  .dv-cap{position:static;transform:none;opacity:1}
  .dv-cap .dc-line{transform:scaleX(1)!important}
  .dvf-idx{display:none}
  .dvt-pin{min-height:0;padding:70px 0}
  .dw-grid,.dc-grid{grid-template-columns:1fr}
  .dv-strip{position:static}
}
/* ---------- production additions ---------- */
.hp-field{position:absolute!important;left:-9999px!important;top:-9999px!important;height:1px;width:1px;overflow:hidden}
.consent{display:flex;gap:10px;align-items:flex-start;font:500 13px/1.5 var(--f-d);color:var(--ink2);margin-top:6px}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--blue);flex:none;min-height:0}
.form-error{display:none;background:#FDF0EF;border:1.5px solid #E8B4B0;color:#A03530;border-radius:12px;padding:12px 16px;font:600 13px/1.5 var(--f-d);margin-bottom:16px}
.form-error.on{display:block}
html:not(.js) .fstep{display:flex}
html:not(.js) #sw-back{display:none}
html:not(.js) .gates{display:none}
.st-frame .chy .prod-tag{display:inline-block;font:600 9.5px/1 var(--f-m);letter-spacing:.18em;color:#FFDF9E;background:rgba(120,72,6,.55);border:1px solid rgba(245,158,11,.5);padding:6px 9px;border-radius:7px;margin-bottom:7px}
.legal-wrap{max-width:860px;margin:0 auto 40px;padding:130px var(--gut) 50px;position:relative;background:#fff;border-radius:0 0 24px 24px;box-shadow:0 40px 80px -60px rgba(10,68,35,.35)}
.legal-wrap h1{font:800 clamp(34px,4.6vw,60px)/1.05 var(--f-d);letter-spacing:-.03em;margin-bottom:10px}
.legal-wrap .upd{font:500 12px/1.6 var(--f-m);color:var(--ink3);margin-bottom:34px}
.legal-wrap h2{font:800 clamp(19px,1.8vw,24px)/1.3 var(--f-d);margin:34px 0 10px}
.legal-wrap p,.legal-wrap li{font:500 14.5px/1.75 var(--f-d);color:var(--ink2);margin-bottom:12px}
.legal-wrap ul{padding-left:22px;margin-bottom:12px}
.util-hero{min-height:70vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;padding-top:110px}
.util-hero .h1{font:800 clamp(40px,6.4vw,96px)/1 var(--f-d);letter-spacing:-.04em;max-width:14ch}
.util-hero p{font-size:clamp(15px,1.2vw,18px);color:var(--ink2);max-width:52ch}
.ty-ring{width:92px;height:92px;border-radius:50%;background:var(--bandg);display:flex;align-items:center;justify-content:center}
.ty-ring svg{width:44px;height:44px}
.ty-ring path{stroke:var(--green);stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* posnexus brand wordmark — recreated from official vector logo (Archivo Black, dash + dot) */
.wm{font:400 21px/1 'Archivo Black',var(--f-d),sans-serif;letter-spacing:-.015em;display:inline-flex;align-items:center;color:#1F232A;text-transform:lowercase}
.wm b,.wm em{font-weight:400;font-style:normal}
.wm b{color:#1F232A}
.wm em{color:var(--blue)}
.wm .wm-dash{display:inline-block;width:.58em;height:.185em;border-radius:.06em;background:#1F232A;margin-right:.14em;transform:translateY(-.02em)}
.wm .wm-dot{display:inline-block;width:.23em;height:.23em;border-radius:50%;background:#1F232A;margin-left:.12em;align-self:flex-end;transform:translateY(-.06em)}

/* ---------- real product media tiles ---------- */
.hwc-media.real{background:#ECECEC;overflow:hidden;padding:0;position:relative}
.hwc-media.real img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.hwc-media.real img.fit-contain{object-fit:contain;padding:10px}
.hwc-media.real img.pos-top{object-position:50% 16%}
.hwc-media.real img.zoom{transform:scale(1.5);object-position:50% 46%}
/* 2026-09-26 — same approved square frame on the home hardware rail. height:auto
   cancels the 150px from .hr-card .dock above; contain is now the single
   behaviour for all six cards (the Kiosk card no longer crops), so the
   .fit-contain opt-in class is gone from the markup. */
.hr-card .dock.real{height:auto;aspect-ratio:1/1;border-radius:20px;background:#ECECEC;background-image:radial-gradient(112% 86% at 50% 24%,#F4F4F4 0%,#EAEAEA 58%,#E0E0E0 100%);overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.hr-card .dock.real img{max-width:80%;max-height:80%;width:auto;height:auto;object-fit:contain;display:block}

/* ---------- device detail: centred stream hero + overlapping video card ---------- */
/* 2026-09-21 — single uniform treatment for all 26 device pages. Lifted from the
   approved v5/native.html hero: green radial wash on the page's own transaction
   stream, centred copy, and a rounded video card that overlaps the band edge. */
.dvh{
  --ov:clamp(122px,11.4vw,172px);
  position:relative;text-align:center;
  padding:clamp(106px,13vh,146px) var(--gut) clamp(36px,4.4vw,64px);
}
/* the green band: stops --ov short of the section floor, so the card crosses it */
.dvh::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:var(--ov);z-index:0;pointer-events:none;
  background:radial-gradient(128% 74% at 50% 30%,var(--bandbStrong) 0%,var(--bandb) 40%,rgba(255,255,255,0) 74%);
  border-bottom:1px solid var(--line);
}
.dvh-in{position:relative;z-index:2;max-width:1180px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.dvh .idx{justify-content:center}
.dvh h1{font:800 clamp(33px,5.4vw,84px)/0.99 var(--f-d);letter-spacing:-.045em;color:var(--ink);margin-top:18px;display:flex;flex-direction:column;align-items:center}
.dvh h1 .hl{display:block}
.dvh h1 .hw{display:inline-block}
.dvh-sub{font:600 clamp(14px,1.2vw,17.5px)/1.55 var(--f-d);color:var(--ink2);max-width:62ch;margin:clamp(15px,1.5vw,20px) auto 0;text-shadow:0 0 8px #fff,0 0 16px #fff,0 0 24px #fff}
.dvh .h-chip{display:inline-block;margin-top:16px}
.dvh-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:clamp(18px,2vw,24px)}

/* the card */
.dvh-media{width:100%;max-width:880px;margin:clamp(26px,2.8vw,40px) auto 0;position:relative;z-index:3}
.dvh-media.portrait{max-width:clamp(250px,26vw,340px)}
.vcard{position:relative;width:100%;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#ECECEC;border:1px solid rgba(255,255,255,.7);box-shadow:0 44px 90px -40px rgba(10,40,25,.55),0 2px 0 rgba(255,255,255,.6)}
.dvh-media.portrait .vcard{aspect-ratio:3/5;border-radius:26px}
.vcard .vcard-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:5%;display:block;z-index:1}
.dvh-media.portrait .vcard .vcard-poster{padding:8%}
.vcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#ECECEC;pointer-events:none;opacity:0;transition:opacity .8s ease;z-index:2}
.vcard video.on{opacity:1}
html.rm .vcard video{transition:none}
.vcard video::-webkit-media-controls,
.vcard video::-webkit-media-controls-enclosure,
.vcard video::-webkit-media-controls-panel,
.vcard video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
/* the shade only makes sense once moving footage is on screen */
.vcard-shade{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .8s ease;
  background:linear-gradient(180deg,rgba(8,14,24,.42) 0%,rgba(8,14,24,0) 28%,rgba(8,14,24,0) 58%,rgba(8,14,24,.5) 100%)}
.vcard video.on ~ .vcard-shade{opacity:1}

/* LIVE COUNTER tag — autoplay cards only, and only while the loop is actually running */
.v-tag{position:absolute;left:16px;top:15px;z-index:4;display:none;align-items:center;gap:8px;
  font:600 9.5px/1 var(--f-m);letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:rgba(9,20,14,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);padding:8px 11px;border-radius:8px}
.vcard video.on ~ .v-tag{display:inline-flex}
.v-tag i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(62,212,126,.7);animation:vtagpulse 2.4s ease-out infinite}
@keyframes vtagpulse{0%{box-shadow:0 0 0 0 rgba(62,212,126,.7)}70%{box-shadow:0 0 0 9px rgba(62,212,126,0)}100%{box-shadow:0 0 0 0 rgba(62,212,126,0)}}
@media (prefers-reduced-motion:reduce){.v-tag i{animation:none}}

/* play ring bottom-right — also the WCAG pause control for autoplaying loops */
.pnx .v-ring{position:absolute;right:16px;bottom:16px;z-index:4;width:46px;height:46px;border-radius:50%;
  background:rgba(10,20,14,.62);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.62);
  display:flex;align-items:center;justify-content:center;flex:none;padding:0}
.v-ring svg{width:15px;height:15px;fill:#fff}
.v-ring .ic-play{margin-left:3px}
.v-ring .ic-pause{display:none}
html.vh-playing .v-ring .ic-pause{display:block}
html.vh-playing .v-ring .ic-play{display:none}
html:not(.js) .v-ring{display:none}
/* on a tap-to-play card the big centre button is the affordance; the ring only
   takes over as the pause control once the loop is actually running */
.pnx .vcard .dvh-bigplay ~ .v-ring{display:none}
.pnx .vcard .dvh-bigplay.gone ~ .v-ring{display:flex}

/* big tap-to-play affordance on the heavy videos */
.pnx .dvh-bigplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;
  background:rgba(10,20,32,.68);border:1.5px solid rgba(255,255,255,.7);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;color:#fff;z-index:5;padding:0}
.dvh-bigplay svg{width:26px;height:26px;margin-left:3px}
.dvh-bigplay .spin{display:none;width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:vspin .8s linear infinite;margin:0}
@keyframes vspin{to{transform:rotate(360deg)}}
.dvh-bigplay.loading svg.tri{display:none}
.dvh-bigplay.loading .spin{display:block}
.dvh-bigplay.gone{display:none}
html:not(.js) .dvh-bigplay{display:none}

/* caption under the card */
.vcap{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:15px;
  max-width:640px;font:500 11.5px/1.6 var(--f-m);letter-spacing:.04em;color:var(--ink3);text-align:center;
  text-shadow:0 0 7px #fff,0 0 14px #fff,0 0 20px #fff}
.vcap b{color:var(--ink2);font-weight:600}
.vcap .sep{width:5px;height:5px;border-radius:50%;background:var(--cyan);flex:none}

@media (max-width:900px){
  .dvh{--ov:clamp(140px,24vw,164px);padding-top:clamp(98px,12vh,124px)}
  .dvh-media.portrait{max-width:min(64vw,264px)}
  .v-tag{left:12px;top:11px;padding:7px 9px;font-size:9px}
  .v-ring{right:12px;bottom:12px;width:42px;height:42px}
  .dvh-bigplay{width:64px;height:64px}
  .dvh-bigplay svg{width:22px;height:22px}
}

/* ---------- device detail: feature scenes ---------- */
.dfx{padding-top:clamp(60px,9vh,110px);padding-bottom:clamp(60px,9vh,110px)}
/* ---------- device detail: 01 · the tour (bento) ---------- */
/* Modular grid: the product photo anchors one tile, every capability beside it carries a
   drawn CSS/SVG micro-diagram. Layout is chosen per device by capability count (.tb-n3…n6),
   so a 3-spec device composes as deliberately as a 6-spec one. Vanilla IntersectionObserver. */
.tb-sec{background:var(--bandb);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:clamp(46px,7vh,86px);padding-bottom:clamp(50px,8vh,96px);overflow:clip}
.tb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.tb-head .lead{max-width:44ch}
.tb-grid{display:grid;gap:10px;margin-top:clamp(22px,3.6vh,42px);grid-template-columns:repeat(2,1fr)}
.tb{background:var(--white);border:1.5px solid var(--line);border-radius:16px;padding:13px 13px 15px;display:flex;flex-direction:column;min-width:0;position:relative}
.tb-dev,.tb-fig,.tb-wide{grid-column:span 2}

/* label row — same register as .spec labels */
.tb-lab{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font:600 9px/1 var(--f-m);letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:auto}
.tb-lab i{font-style:normal;color:var(--blueink)}
.tb-t{font:800 14.5px/1.22 var(--f-d);letter-spacing:-.02em;margin:0 0 5px}
.tb-p{font:500 11.6px/1.5 var(--f-d);color:var(--ink2);margin:0}
.tb-copy{margin-top:auto;padding-top:10px}

/* diagram well */
.tb-well{flex:1;display:flex;align-items:center;justify-content:center;padding:4px 0 0;min-height:0}
.tb-well .tb-dg{width:100%;max-width:140px;height:auto;display:block;overflow:visible}
/* in-diagram annotations are sub-legible on a phone; the tile's own label carries them */
.tb-dg .tb-an{display:none}
/* text-only tile (a spec with no drawn diagram) */
.tb-fact{margin-top:14px;padding-top:12px;border-top:2px solid var(--cyan)}
.tb-fact span{display:block;font:500 13px/1.45 var(--f-m);letter-spacing:-.01em;color:var(--ink)}

/* the device photo tile — aspect-agnostic: contain on a plate, no positional claims */
.tb-dev .tb-plate{flex:1;margin-top:11px;background:var(--plate,#ECECEC);background-image:radial-gradient(112% 86% at 50% 24%,#F2F2F2 0%,#E9E9E9 58%,#DFDFDF 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:14px;min-height:176px;max-height:min(46vh,360px)}
.tb-dev .tb-plate img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.tb-cap{display:flex;justify-content:space-between;gap:10px;margin-top:11px;font:500 9px/1.4 var(--f-m);letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}

/* the lead tile — the one dark statement tile, carrying the device's real figure in mono */
.tb-fig{background:var(--ink);border-color:var(--ink);color:#fff;display:grid;grid-template-columns:auto auto;grid-template-areas:"n dr" "mid mid";justify-content:space-between;align-items:center;row-gap:14px;padding:15px 14px 16px}
.tb-a{grid-area:n}
.tb-mid{grid-area:mid;border-top:1px solid rgba(255,255,255,.16);padding-top:13px}
.tb-draw{grid-area:dr;width:74px;height:auto;flex:none;justify-self:end}
.tb-n{display:block;font:600 clamp(30px,9vw,44px)/.92 var(--f-m);letter-spacing:-.045em;color:#fff;white-space:nowrap}
.tb-n.tb-word{font-size:clamp(19px,5.6vw,26px);letter-spacing:-.02em}
.tb-sub{font:500 9px/1.7 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.52);margin-top:8px}
.tb-sub b{color:var(--cyan);font-weight:500}
.tb-fig .tb-t{color:#fff;margin-bottom:6px}
.tb-fig .tb-p{color:rgba(255,255,255,.66);max-width:52ch}

/* wallets — the quiet tile */
.tb-wal{background:var(--tintcard);border-color:#D6EEE0}
.tb-wal .tb-lab{border-bottom-color:#D6EEE0;margin-bottom:0}
.tb-wl{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column}
.tb-wl li{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid #D6EEE0;font:600 12px/1.3 var(--f-d);color:var(--ink)}
.tb-wl li:last-child{border-bottom:0}
.tb-wl em{font-style:normal;font:500 10px/1 var(--f-m);letter-spacing:.1em;color:var(--ink3);flex:none}

/* ---- drawn diagram ink ---- */
.tb-dg .tb-st,.tb-dg .tb-st path,.tb-dg .tb-st rect{fill:none;stroke:var(--ink3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tb-panel,.tb-osdev,.tb-dbody,.tb-dtray{fill:#fff;stroke:var(--ink3);stroke-width:1.6;stroke-linejoin:round}
.tb-dg-prn .tb-pbody{fill:#fff;stroke:var(--ink3);stroke-width:1.6}
.tb-dg-prn .tb-paper{fill:#FCFDFE;stroke:var(--ink3);stroke-width:1.4;stroke-linejoin:round}
.tb-dg-prn .tb-pdetail{fill:none;stroke:var(--ink3);stroke-width:1.5;opacity:.45;stroke-linecap:round}
.tb-dg-prn .tb-pled{fill:var(--cyan)}
.tb-dg-prn .tb-pslot{fill:var(--ink)}
.tb-plines path{fill:none;stroke:var(--ink3);stroke-width:2.2;stroke-linecap:round;opacity:.42}
.tb-plines .tb-ptotal{stroke:var(--blue);opacity:1;stroke-width:3.2}
.tb-dg-scn .tb-brk path{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tb-dg-scn .tb-tick path{fill:none;stroke:var(--ink3);stroke-width:1.5;opacity:.6;stroke-linecap:round}
.tb-dg-scn .tb-bars rect{fill:var(--ink);opacity:.82}
.tb-dg-scn .tb-guard{fill:var(--ink3);opacity:.5}
.tb-dg-scn .tb-sline{fill:var(--cyan)}
.tb-dg-scn .tb-sglow{fill:url(#tbSweep)}
.tb-dg-pay .tb-card{fill:#fff;stroke:var(--ink3);stroke-width:1.6}
.tb-dg-pay .tb-stripe{fill:var(--ink);opacity:.84}
.tb-chipbox{fill:var(--tintcard);stroke:var(--blue);stroke-width:1.5}
.tb-chipl,.tb-chipl path,.tb-chipl rect{fill:none;stroke:var(--blue);stroke-width:1.4;stroke-linecap:round}
.tb-arc{fill:none;stroke:var(--blue);stroke-linecap:round;opacity:.9}
.tb-dg-net .tb-bar{fill:var(--blue)}
.tb-dg-net .tb-b4{fill:var(--cyan)}
.tb-base{fill:none;stroke:var(--ink3);stroke-width:1.4;opacity:.5;stroke-linecap:round}
.tb-wv{fill:none;stroke:var(--blue);stroke-linecap:round}
.tb-wv.tb-w3{stroke:var(--cyan)}
.tb-wdot{fill:var(--blue)}
.tb-hop{fill:none;stroke:var(--ink3);stroke-width:1.5;stroke-dasharray:4 5;stroke-linecap:round;opacity:.75}
.tb-an text{font:500 8.5px/1 var(--f-m);letter-spacing:.14em;fill:var(--ink3)}
.tb-jack{fill:none;stroke:var(--ink3);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.tb-osbar{fill:none;stroke:var(--ink3);stroke-width:2;opacity:.4;stroke-linecap:round}
.tb-osdot{fill:var(--ink3);opacity:.5}
.tb-app{fill:var(--tintcard);stroke:var(--blue);stroke-width:1.3;opacity:.85}
.tb-app-on{fill:var(--cyan);stroke:var(--blue);opacity:1}
.tb-upd{fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round}
.tb-updh{fill:var(--blue)}
.tb-updc{fill:var(--cyan)}
.tb-key{fill:var(--tintcard);stroke:var(--ink3);stroke-width:1.3}
.tb-pdot{fill:none;stroke:var(--ink3);stroke-width:1.6}
.tb-pdot-on{fill:var(--blue);stroke:var(--blue)}
.tb-sigline{fill:none;stroke:var(--ink3);stroke-width:1.4;stroke-dasharray:3 4;opacity:.7}
.tb-sig{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round}
.tb-sigtip{fill:var(--cyan)}
.tb-kk rect{fill:#fff;stroke:var(--ink3);stroke-width:1.5}
.tb-kk path{fill:none;stroke:var(--ink3);stroke-width:1.4;opacity:.38;stroke-linecap:round}
.tb-knib{fill:var(--ink3)}
.tb-kenter{fill:var(--tintcard);stroke:var(--blue);stroke-width:1.5}
.tb-kenterl{fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tb-dslot{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;opacity:.82}
.tb-dtray{fill:#FCFDFE}
.tb-bill{fill:var(--tintcard);stroke:var(--ink3);stroke-width:1.3}
.tb-coin{fill:none;stroke:var(--blue);stroke-width:1.5}
.tb-dhandle{fill:none;stroke:var(--ink3);stroke-width:3;stroke-linecap:round;opacity:.6}
.tb-dedge{fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round}
.tb-scr{fill:var(--tintcard);stroke:var(--blue);stroke-width:1.3}
.tb-kdots circle{fill:var(--ink3);opacity:.6}
/* lead drawings (on ink) */
.tb-draw .tb-dpanel{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.5);stroke-width:1.5}
.tb-draw .tb-dpanel2,.tb-draw .tb-dbase,.tb-draw .tb-dphone{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.42);stroke-width:1.4}
.tb-draw .tb-dgrid{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1}
.tb-draw .tb-dim{fill:none;stroke:rgba(255,255,255,.46);stroke-width:1.3;stroke-linecap:round}
.tb-draw .tb-dext{fill:none;stroke:rgba(255,255,255,.26);stroke-width:1;stroke-dasharray:2.5 3.5}
.tb-draw .tb-diag{fill:none;stroke:var(--cyan);stroke-width:1.7;stroke-linecap:round}
.tb-draw .tb-dtip{fill:var(--cyan)}
.tb-draw .tb-dtiph{fill:var(--cyan)}
.tb-draw text{font:500 8.5px/1 var(--f-m);letter-spacing:.12em;fill:rgba(255,255,255,.62)}
.tb-draw .tb-drow{fill:rgba(255,255,255,.22)}
.tb-draw .tb-sw rect{stroke:rgba(255,255,255,.4);stroke-width:1.2}
.tb-draw .tb-sw rect:nth-child(1){fill:var(--cyan)}
.tb-draw .tb-sw rect:nth-child(2){fill:var(--blue)}
.tb-draw .tb-sw rect:nth-child(3){fill:rgba(255,255,255,.16)}
.tb-draw .tb-dkey{fill:rgba(62,212,126,.3);stroke:var(--cyan);stroke-width:1.2}
.tb-draw .tb-base,.tb-draw .tb-dstem,.tb-draw .tb-dstand,.tb-draw .tb-dcord{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.5;stroke-linecap:round;opacity:1}
.tb-draw .tb-dslot{stroke:rgba(255,255,255,.5);stroke-width:2.4;opacity:1}
.tb-draw .tb-dhandle{stroke:rgba(255,255,255,.4);stroke-width:2.4;opacity:1}
.tb-draw .tb-kdots circle{fill:rgba(255,255,255,.5);opacity:1}
.tb-draw .tb-dcust{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.5}
.tb-draw .tb-dcustb{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.5;stroke-linecap:round}
.tb-draw .tb-mov{fill:none;stroke:rgba(62,212,126,.55);stroke-width:1.5;stroke-linecap:round}
.tb-draw .tb-batt{fill:rgba(62,212,126,.4);stroke:none}
.tb-draw .tb-st,.tb-draw .tb-st rect,.tb-draw .tb-st path{stroke:rgba(255,255,255,.42)}
.tb-draw .tb-arc{stroke:var(--cyan)}
.tb-draw .tb-hop{stroke:rgba(255,255,255,.4);opacity:1}
.tb-draw .tb-updc{fill:var(--cyan)}

/* ---- reveal (composed order; delays come from --d on each tile) ---- */
html.js .tb{opacity:0;transform:translateY(20px) scale(.988);transition:opacity .74s cubic-bezier(.22,1,.36,1) var(--d,0ms),transform .74s cubic-bezier(.22,1,.36,1) var(--d,0ms),border-color .35s,box-shadow .35s}
html.js .tb.in{opacity:1;transform:none}
html.js .tb-paperclip{transform:scaleY(0);transform-box:fill-box;transform-origin:50% 0;transition:transform 1.05s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) + 190ms)}
html.js .tb.in .tb-paperclip{transform:scaleY(1)}
html.js .tb-dg-net .tb-bar{transform:scaleY(0);transform-box:fill-box;transform-origin:50% 100%;transition:transform .6s cubic-bezier(.22,1,.36,1) var(--bd,0ms)}
html.js .tb.in .tb-dg-net .tb-bar{transform:scaleY(1)}
html.js .tb-draw .tb-dim,html.js .tb-draw .tb-diag{stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.1s ease calc(var(--d,0ms) + 240ms)}
html.js .tb.in .tb-draw .tb-dim,html.js .tb.in .tb-draw .tb-diag{stroke-dashoffset:0}
html.js .tb-draw .tb-dext{opacity:0;transition:opacity .6s ease calc(var(--d,0ms) + 620ms)}
html.js .tb.in .tb-draw .tb-dext{opacity:1}
html.js .tb-draw .tb-dtip,html.js .tb-draw .tb-dtiph{opacity:0;transition:opacity .4s ease calc(var(--d,0ms) + 900ms)}
html.js .tb.in .tb-draw .tb-dtip,html.js .tb.in .tb-draw .tb-dtiph{opacity:1}
html.js .tb-sig{stroke-dasharray:180;stroke-dashoffset:180;transition:stroke-dashoffset 1s ease calc(var(--d,0ms) + 260ms)}
html.js .tb.in .tb-sig{stroke-dashoffset:0}
.tb.in .tb-sweep{animation:tbSweep 3.1s cubic-bezier(.45,0,.55,1) infinite alternate}
.tb.in .tb-dg-pay .tb-arc,.tb.in .tb-dg-pair .tb-arc{animation:tbPulse 2.5s ease-out infinite}
.tb.in .tb-a2{animation-delay:.16s}.tb.in .tb-a3{animation-delay:.32s}.tb.in .tb-a4{animation-delay:.48s}
.tb.in .tb-hop{animation:tbMarch 2.6s linear infinite}
.tb.in .tb-wv{animation:tbWave 2.6s ease-out infinite}
.tb.in .tb-w2{animation-delay:.2s}.tb.in .tb-w3{animation-delay:.4s}
.tb.in .tb-upd{animation:tbSpin 9s linear infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes tbSweep{from{transform:translateY(0)}to{transform:translateY(94px)}}
@keyframes tbPulse{0%{opacity:.3}28%{opacity:1}100%{opacity:.3}}
@keyframes tbWave{0%{opacity:.38}30%{opacity:1}100%{opacity:.38}}
@keyframes tbMarch{to{stroke-dashoffset:-36}}
@keyframes tbSpin{to{transform:rotate(360deg)}}
html.rm .tb,html.rm .tb-paperclip,html.rm .tb-dg-net .tb-bar,html.rm .tb-draw .tb-dim,html.rm .tb-draw .tb-diag,html.rm .tb-draw .tb-dext,html.rm .tb-draw .tb-dtip,html.rm .tb-draw .tb-dtiph,html.rm .tb-sig{opacity:1;transform:none;transition:none;stroke-dashoffset:0}
html.rm .tb-sweep,html.rm .tb-arc,html.rm .tb-wv,html.rm .tb-hop,html.rm .tb-upd{animation:none}
html.rm .tb-sweep{transform:translateY(46px)}
@media (prefers-reduced-motion:reduce){
  html.js .tb,html.js .tb-paperclip,html.js .tb-dg-net .tb-bar,html.js .tb-draw .tb-dim,html.js .tb-draw .tb-diag,html.js .tb-draw .tb-dext,html.js .tb-draw .tb-dtip,html.js .tb-draw .tb-dtiph,html.js .tb-sig{opacity:1!important;transform:none!important;transition:none!important;stroke-dashoffset:0!important}
  .tb-sweep,.tb-arc,.tb-wv,.tb-hop,.tb-upd{animation:none!important}
  .tb-sweep{transform:translateY(46px)}
}

/* ---- hover / focus: enhancement only ---- */
.tb-dev:hover,.tb-wal:hover,.tb:not(.tb-fig):not(.tb-dev):not(.tb-wal):hover{border-color:#C6E6D3;box-shadow:0 16px 38px -26px rgba(14,122,56,.5)}
.tb-fig:hover{box-shadow:0 18px 40px -24px rgba(14,122,56,.55)}
.tb-dg-scn:hover .tb-bars rect{opacity:1}

/* ---- ≥641: tiles gain room, label rows go back to one line ---- */
@media (min-width:641px){
  .tb-grid{gap:clamp(10px,1.05vw,15px)}
  .tb{border-radius:20px;padding:clamp(14px,1.35vw,20px)}
  .tb-lab{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.2em;padding-bottom:10px}
  .tb-lab i{white-space:nowrap}
  .tb-t{font-size:clamp(15px,1.15vw,18px)}
  .tb-p{font-size:clamp(12px,.92vw,13.5px)}
  .tb-copy{padding-top:12px}
  .tb-well{padding:6px 0 2px}
  .tb-well .tb-dg{max-width:200px}
  .tb-dg .tb-an{display:initial}
  .tb-fact span{font-size:clamp(13px,1vw,15px)}
  .tb-dev .tb-plate{min-height:230px;margin-top:14px;border-radius:14px;padding:clamp(14px,2vw,30px)}
  .tb-cap{font-size:10px;letter-spacing:.16em;margin-top:12px}
  .tb-fig{padding:clamp(16px,2.4vw,22px);row-gap:clamp(14px,2.4vw,20px)}
  .tb-n{font-size:clamp(40px,4.3vw,56px)}
  .tb-n.tb-word{font-size:clamp(24px,2.5vw,32px)}
  .tb-sub{font-size:10px;letter-spacing:.2em;margin-top:10px}
  .tb-draw{width:104px}
  .tb-wl{margin-top:14px}
  .tb-wl li{padding:7px 0;font-size:clamp(12px,.94vw,13.5px)}
  .tb-fact{margin-top:16px}
}

/* ---- ≥1101: the 12-column composition, one layout per capability count ---- */
@media (min-width:1101px){
  .tb-head{gap:clamp(16px,3vw,48px)}
  .tb-head .lead{max-width:40ch;padding-bottom:6px}
  .tb-grid{grid-template-columns:repeat(12,1fr)}
  .tb-dev,.tb-fig,.tb-wide{grid-column:auto}
  .tb-dev{grid-area:dev}.tb-fig{grid-area:fig}
  .tb-p1{grid-area:c1}.tb-p2{grid-area:c2}.tb-p3{grid-area:c3}.tb-p4{grid-area:c4}.tb-p5{grid-area:c5}.tb-p6{grid-area:c6}
  .tb-n3{grid-template-rows:minmax(150px,auto) minmax(228px,auto) auto;grid-template-areas:
    "dev dev dev dev dev fig fig fig fig fig fig fig"
    "dev dev dev dev dev c1  c1  c1  c1  c2  c2  c2 "
    "c3  c3  c3  c3  c3  c3  c3  c3  c3  c3  c3  c3 "}
  .tb-n4{grid-template-rows:minmax(150px,auto) minmax(228px,auto) minmax(206px,auto);grid-template-areas:
    "dev dev dev dev dev fig fig fig fig fig fig fig"
    "dev dev dev dev dev c1  c1  c1  c2  c2  c2  c2 "
    "c3  c3  c3  c3  c3  c4  c4  c4  c4  c4  c4  c4 "}
  .tb-n5{grid-template-rows:minmax(150px,auto) minmax(228px,auto) minmax(206px,auto);grid-template-areas:
    "dev dev dev dev dev fig fig fig fig fig fig fig"
    "dev dev dev dev dev c1  c1  c1  c2  c2  c2  c2 "
    "c3  c3  c3  c3  c3  c4  c4  c4  c4  c5  c5  c5 "}
  .tb-n6{grid-template-rows:minmax(150px,auto) minmax(228px,auto) minmax(206px,auto) auto;grid-template-areas:
    "dev dev dev dev dev fig fig fig fig fig fig fig"
    "dev dev dev dev dev c1  c1  c1  c2  c2  c2  c2 "
    "c3  c3  c3  c3  c4  c4  c4  c4  c5  c5  c5  c5 "
    "c6  c6  c6  c6  c6  c6  c6  c6  c6  c6  c6  c6 "}
  .tb-fig{grid-template-columns:auto 1fr auto;grid-template-areas:"n mid dr";gap:clamp(13px,1.8vw,30px);padding:clamp(16px,1.5vw,24px) clamp(18px,1.9vw,30px)}
  .tb-mid{border-top:0;border-left:1px solid rgba(255,255,255,.16);padding-top:0;padding-left:clamp(14px,2vw,30px)}
  .tb-fig .tb-p{max-width:36ch}
  .tb-draw{width:126px}
  .tb-lab{font-size:9.5px;letter-spacing:.14em}
  /* a diagram is sized for the slot its layout gives it, so wide tiles are never sparse */
  .tb-n3 .tb-p1 .tb-dg,.tb-n4 .tb-p2 .tb-dg,.tb-n5 .tb-p2 .tb-dg,.tb-n5 .tb-p4 .tb-dg,
  .tb-n6 .tb-p2 .tb-dg,.tb-n6 .tb-p3 .tb-dg,.tb-n6 .tb-p4 .tb-dg,.tb-n6 .tb-p5 .tb-dg{max-width:256px}
  .tb-n4 .tb-p3 .tb-dg,.tb-n5 .tb-p3 .tb-dg{max-width:300px}
  .tb-n4 .tb-p4 .tb-dg{max-width:340px}
  /* wallets adapts to the width its layout gives it */
  .tb-strip{display:grid;grid-template-columns:minmax(200px,38%) 1fr;grid-template-areas:"lab list" "copy list";align-items:center;column-gap:clamp(18px,2.6vw,44px);row-gap:6px}
  .tb-strip .tb-lab{grid-area:lab;border-bottom:0;padding-bottom:0;margin-bottom:0}
  .tb-strip .tb-copy{grid-area:copy;margin-top:0;padding-top:0}
  .tb-strip .tb-wl{grid-area:list;margin-top:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;column-gap:clamp(12px,1.6vw,26px);border-left:1px solid #D6EEE0;padding-left:clamp(18px,2.4vw,40px)}
  .tb-n4 .tb-strip{grid-template-columns:minmax(180px,42%) 1fr}
  .tb-n4 .tb-strip .tb-wl{grid-auto-flow:row;grid-template-columns:1fr 1fr;row-gap:clamp(10px,1.4vh,18px)}
  .tb-strip .tb-wl li{border-bottom:0;padding:0;flex-direction:column;align-items:flex-start;gap:6px}
}
@media (min-width:1101px) and (max-width:1320px){
  .tb-n{font-size:clamp(34px,3.7vw,48px)}
  .tb-draw{width:104px}
}

/* ---------- device detail: specs ---------- */
.spec-strip{display:flex;justify-content:center;gap:clamp(10px,2vw,26px);flex-wrap:wrap;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px var(--gut);font:600 11px/1.4 var(--f-m);letter-spacing:.1em;color:var(--ink2);position:sticky;top:64px;z-index:60}
.spec-strip b{color:var(--ink);font-weight:600}
.spec-strip .sep{width:5px;height:5px;border-radius:50%;background:var(--cyan);align-self:center}
.spec-strip a{color:var(--blueink);font-weight:600;white-space:nowrap}
@media (max-width:900px){.spec-strip{position:static}}
.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(10px,1.2vw,16px);margin-top:clamp(20px,3.4vh,34px)}
.spec{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:16px 18px}
.spec b{display:block;font:600 10px/1 var(--f-m);letter-spacing:.2em;color:var(--ink3);text-transform:uppercase;margin-bottom:7px}
.spec span{font:600 13.5px/1.5 var(--f-d);color:var(--ink)}

/* nav over dark video hero (device pages, before scroll) */
body[data-hero="dark"] #nav:not(.scrolled) .n-links a{color:rgba(255,255,255,.82)}
body[data-hero="dark"] #nav:not(.scrolled) .n-links a:hover,
body[data-hero="dark"] #nav:not(.scrolled) .n-links a.act{color:#fff}
body[data-hero="dark"] #nav:not(.scrolled) .n-phone{color:rgba(255,255,255,.85)}
body[data-hero="dark"] #nav:not(.scrolled) .wm,
body[data-hero="dark"] #nav:not(.scrolled) .wm b{color:#fff}
body[data-hero="dark"] #nav:not(.scrolled) .wm .wm-dash,
body[data-hero="dark"] #nav:not(.scrolled) .wm .wm-dot{background:#fff}
body[data-hero="dark"] #nav:not(.scrolled) .wm em{color:var(--cyan)}
body[data-hero="dark"] #nav:not(.scrolled) #nburger span{background:#fff}

/* featured real-photo scene (hardware.html) */
.f3d-photo{width:min(500px,40vw);border-radius:26px;box-shadow:0 40px 84px -36px rgba(10,40,25,.4);background:#ECECEC;display:block}
@media (max-width:900px){.f3d-photo{width:min(78vw,420px)}}

/* ---------- brand dropdown nav ---------- */
.n-dd{position:relative}
.n-ddbtn{display:inline-flex;align-items:center;gap:6px;font:700 13.5px/1 var(--f-d);padding:14px 13px;border-radius:99px;color:var(--ink2);min-height:44px;cursor:pointer}
.n-ddbtn .car{width:9px;height:6px;flex:none;transition:transform .25s;opacity:.6}
.n-ddbtn:hover,.n-dd.open .n-ddbtn,.n-dd:focus-within .n-ddbtn{color:var(--ink)}
.n-ddbtn.act{color:var(--blueink)}
.n-dd.open .n-ddbtn .car,.n-dd:hover .n-ddbtn .car{transform:rotate(180deg)}
.n-panel{position:absolute;left:50%;top:100%;transform:translate(-50%,10px);min-width:252px;background:rgba(255,255,255,.93);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 64px -26px rgba(10,40,25,.38);padding:8px;visibility:hidden;opacity:0;transition:opacity .2s ease,transform .2s ease,visibility 0s .2s;z-index:40}
.n-dd:hover .n-panel,.n-dd.open .n-panel,.n-dd:focus-within .n-panel{visibility:visible;opacity:1;transform:translate(-50%,4px);transition:opacity .2s ease,transform .2s ease}
#nav .n-panel a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9.5px 12px;border-radius:10px;font:700 13px/1.3 var(--f-d);color:var(--ink);min-height:0;position:static}
#nav .n-panel a:hover,#nav .n-panel a:focus-visible{background:var(--bandb);color:var(--ink)}
#nav .n-panel a span{font:500 9px/1 var(--f-m);letter-spacing:.08em;color:var(--ink3);text-transform:uppercase;white-space:nowrap}
body[data-hero="dark"] #nav:not(.scrolled) .n-ddbtn{color:rgba(255,255,255,.82)}
body[data-hero="dark"] #nav:not(.scrolled) .n-ddbtn:hover,
body[data-hero="dark"] #nav:not(.scrolled) .n-dd.open .n-ddbtn{color:#fff}
body[data-hero="dark"] #nav:not(.scrolled) .n-ddbtn.act{color:#fff}
body[data-hero="dark"] #nav:not(.scrolled) .n-panel{background:rgba(255,255,255,.97)}
body[data-hero="dark"] #nav:not(.scrolled) .n-panel a{color:var(--ink)}
body[data-hero="dark"] #nav:not(.scrolled) .n-panel a span{color:var(--ink3)}
/* mobile sheet accordions */
.s-grp{border-bottom:1px solid rgba(255,255,255,.18)}
.s-grp > button{width:100%;display:flex;justify-content:space-between;align-items:center;font:800 clamp(24px,6.6vw,30px)/1.3 var(--f-d);letter-spacing:-.02em;color:#fff;padding:12px 0;min-height:44px}
.s-grp .car{width:15px;height:9px;transition:transform .3s;opacity:.7}
.s-grp.open .car{transform:rotate(180deg)}
.s-list{max-height:0;overflow:hidden;transition:max-height .35s ease}
.s-grp.open .s-list{max-height:460px;padding-bottom:10px}
.s-list a{display:block;font:600 16px/1.5 var(--f-d);color:#D9F2E2;padding:8px 0 8px 16px;min-height:40px}
html:not(.js) .s-list{max-height:none}
/* rail cards are links now */
.hr-card{display:block;color:inherit}

/* ============================================================
   Contact · About · Home lead form — added 2026-09-23
   Built from the existing tokens/components; no new colours.
   ============================================================ */

/* ---------- select caret (consistent across every form) ---------- */
.ff select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1 L5 5 L9 1' fill='none' stroke='%237C8AA0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:11px 7px}
.ff select::-ms-expand{display:none}
.ff textarea{font:500 15px/1.55 var(--f-d);color:var(--ink);border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;background:#fff;width:100%;min-height:128px;resize:vertical}
.ff textarea:focus{outline:2.5px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.ff.bad textarea{border-color:#D6403A}
.ff label.consent{font:500 13px/1.6 var(--f-d);color:var(--ink2);letter-spacing:0}
.ff label.consent b{color:var(--ink)}
.consent a{color:var(--blueink);font-weight:700;text-decoration:underline}
.consent input{width:20px;height:20px;margin-top:1px}

/* ---------- home: paid-ads lead band ---------- */
.lead-band{position:relative;background:var(--bandg);border-bottom:1px solid var(--line);padding:clamp(40px,6.5vh,82px) 0}
.lb-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(22px,3.2vw,56px);align-items:center}
.lb-copy .h3{margin:12px 0 12px;max-width:16ch}
.lb-copy .lead{max-width:44ch}
.lb-pts{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:20px}
.lb-pts li{display:flex;gap:10px;align-items:flex-start;font:600 13.5px/1.5 var(--f-d);color:var(--ink2)}
.lb-pts li::before{content:"✓";flex:none;width:21px;height:21px;border-radius:50%;background:var(--gatetint1);color:var(--blueink);font:800 11px/21px var(--f-d);text-align:center}
.lead-band .lb-call{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font:700 14px/1 var(--f-d);color:var(--blueink);min-height:44px}
.lead-band .lb-call svg{width:17px;height:17px;flex:none}
.lead-form{background:#fff;border:1.5px solid var(--line);border-radius:26px;padding:clamp(18px,2.2vw,32px);box-shadow:0 30px 80px -40px rgba(13,44,102,.3)}
.lead-form .lf-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:16px}
.lead-form .lf-head h3{font:800 clamp(18px,1.7vw,23px)/1.2 var(--f-d);letter-spacing:-.02em}
.lead-form .lf-head .cnt{font:600 11px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.lead-form .ff{margin-bottom:12px}
.lead-form .frow2{margin-bottom:12px}
.lead-form .frow2 .ff{margin-bottom:0}
.lead-form .btn{width:100%;justify-content:center;margin-top:6px}
.lf-note{font:500 12px/1.6 var(--f-d);color:var(--ink3);text-align:center;margin-top:11px}
@media (max-width:900px){.lb-grid{grid-template-columns:1fr;gap:26px}.lb-copy .lead{max-width:none}}

/* ---------- contact: methods row ---------- */
.cm-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,18px)}
.cm{display:flex;flex-direction:column;gap:7px;border:1.5px solid var(--line);border-radius:20px;padding:20px;background:#fff;color:inherit;transition:border-color .25s,box-shadow .25s,transform .25s}
a.cm:hover{border-color:var(--blue);box-shadow:0 22px 48px -28px rgba(11,164,92,.42);transform:translateY(-3px)}
.cm .cm-ico{width:34px;height:34px;border-radius:11px;background:var(--bandb);display:flex;align-items:center;justify-content:center;margin-bottom:5px}
.cm .cm-ico svg{width:19px;height:19px}
.cm .cm-k{font:600 10px/1 var(--f-m);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.cm .cm-v{font:800 clamp(16px,1.4vw,20px)/1.25 var(--f-d);letter-spacing:-.02em;color:var(--ink);word-break:break-word}
.cm .cm-s{font:500 12.5px/1.55 var(--f-d);color:var(--ink2)}
@media (max-width:980px){.cm-row{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cm-row{grid-template-columns:1fr}}

/* ---------- contact: body band ---------- */
.ct-body{padding:clamp(30px,5vh,58px) 0 clamp(50px,8vh,96px)}
.ct-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(20px,3vw,56px);align-items:start;margin-top:clamp(26px,4vh,46px)}
@media (max-width:900px){.ct-grid{grid-template-columns:1fr}}
@media (max-width:620px){#ct-form .swf-head{flex-direction:column;align-items:flex-start;gap:6px}}
.hours-note{display:inline-block;font:500 12.5px/1.7 var(--f-d);color:var(--ink2);
  background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:12px;padding:9px 14px}
.hours-note b{color:var(--ink)}

/* ---------- about ---------- */
.ab-body{padding:clamp(34px,6vh,78px) 0 0}
.ab-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(20px,3vw,60px);align-items:start}
.ab-grid p{font-size:clamp(15px,1.15vw,17.5px);line-height:1.75;color:var(--ink2);max-width:62ch}
.ab-grid p + p{margin-top:16px}
.ab-grid p b{color:var(--ink)}
@media (max-width:900px){.ab-grid{grid-template-columns:1fr;gap:18px}}
.ab-band{padding:clamp(48px,8vh,104px) 0;border-top:1px solid var(--line)}
.ab-band.tint{background:var(--bandg)}
.ab-brands{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,18px);margin-top:clamp(24px,4vh,42px)}
.ab-brand{border:1.5px solid var(--line);border-radius:20px;background:#fff;padding:20px;display:flex;flex-direction:column;gap:7px;color:inherit;transition:border-color .25s,box-shadow .25s,transform .25s}
.ab-brand:hover{border-color:var(--blue);box-shadow:0 22px 48px -28px rgba(11,164,92,.42);transform:translateY(-3px)}
.ab-brand b{font:800 17px/1.2 var(--f-d);letter-spacing:-.01em}
.ab-brand span{font:500 12.5px/1.55 var(--f-d);color:var(--ink2);flex:1}
.ab-brand .tagf{display:inline-block;font:600 9.5px/1 var(--f-m);letter-spacing:.14em;color:var(--blue);background:var(--bandb);border-radius:6px;padding:5px 8px;text-transform:uppercase;align-self:flex-start}
@media (max-width:980px){.ab-brands{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ab-brands{grid-template-columns:1fr}}
.ab-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(24px,4vh,42px)}
.ab-3 .rail-card h4{font-size:16px}
.ab-3 .rail-card p{font-size:13.5px}
.ab-cov{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(24px,4vh,42px)}
.ab-cov .z{display:flex;flex-direction:column;gap:6px}
.ab-cov .z span{margin-top:auto;padding-top:10px}
.ab-cov .z b{font-size:clamp(26px,2.6vw,40px);line-height:1.05}
@media (max-width:820px){.ab-3,.ab-cov{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ab-3,.ab-cov{grid-template-columns:1fr}}

/* HIDDEN 2026-09-29: merchant stories, no videos yet. Delete these 2 lines to restore. */
#ch-stories{display:none !important}

/* PNX-LOGO-BLOCK-START v2 */
/* ============================================================================
   BRAND WORDMARK — corrected 2026-09-29 against the source vector
   (POSnexus_logo_color_platte.pdf, page 1 of the colour-palette sheet).

   The site had been drawing the wordmark from memory: two-tone (pos ink /
   nexus green), tracking -.015em, and a dash nearly twice as wide as the real
   one.  The real logo is Archivo Black, lowercase, ONE colour, tracked
   -.102em, with a chunky rounded dash and a dot on the baseline.

   Measured off the vector, in em of the wordmark's own font-size:
     dash   .332 x .171, radius .0275, centred .2567 above the baseline
     dot    .2542 diameter, sitting ON the baseline
     gaps   dash -> word .052   |   word -> dot .150
     total lockup width 5.195em

   Wordmark = brand green (--blue #1D9047).  Dash + dot = ink (#101720).
   Appended as one block so it can be lifted out again in one piece.
   ============================================================================ */
.wm,.f-brand,#pre .p-word,.f-giant{font-family:'Archivo Black',var(--f-d),sans-serif;font-weight:400;text-transform:lowercase}

/* the two drawn marks, shared by every lockup on the site */
.wm .wm-dash,.f-brand::before,#pre .p-word::before,.f-giant::before{content:"";display:inline-block;width:.332em;height:.171em;border-radius:.0275em;background:var(--ink);margin:0 .052em .171em 0;vertical-align:baseline;letter-spacing:0;transform:none}
.wm .wm-dot,.f-brand .grad-t::after,#pre .p-word::after,.f-giant::after{content:"";display:inline-block;width:.2542em;height:.2542em;border-radius:50%;background:var(--ink);margin:0 0 0 .15em;vertical-align:baseline;letter-spacing:0;align-self:auto;transform:none}

/* header lockup */
.wm{font-size:24px;line-height:1;letter-spacing:0;display:inline-block;white-space:nowrap;color:var(--blue)}
.wm b,.wm em{font-weight:400;font-style:normal;letter-spacing:-.102em;color:var(--blue)}

/* footer brand lockup */
.f-brand{font-size:21px;line-height:1.3;letter-spacing:-.102em;color:var(--blue)}
.f-brand .grad-t{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--blue)}
.f-brand small{font-family:var(--f-d);font-weight:500;letter-spacing:normal;text-transform:none}

/* giant footer wordmark — decorative (aria-hidden); keeps its green gradient */
.f-giant{font-size:clamp(56px,18.2vw,460px);line-height:.95;letter-spacing:-.102em}
/* v2 fix: at -.102em tracking the final s of "nexus" overhangs its own inline box by
   .068em.  .fg-nex paints its gradient with -webkit-background-clip:text, and that clip
   stops at the box, so the overhanging sliver of the s was being painted with nothing and
   read as a vertical cut.  Pad the box out past the ink and pull the same amount back off
   the margin so nothing moves. */
.f-giant .fg-nex{padding-right:.09em;margin-right:-.09em}

/* preloader word */
#pre .p-word{font-size:clamp(34px,5.2vw,60px);line-height:1;letter-spacing:-.102em;color:var(--blue)}
#pre .p-word em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--blue)}

/* dark hero pages: wordmark goes light green, the two marks go white */
body[data-hero~="dark"] #nav:not(.scrolled) .wm,
body[data-hero~="dark"] #nav:not(.scrolled) .wm b,
body[data-hero~="dark"] #nav:not(.scrolled) .wm em{color:var(--cyan)}
body[data-hero~="dark"] #nav:not(.scrolled) .wm .wm-dash,
body[data-hero~="dark"] #nav:not(.scrolled) .wm .wm-dot{background:#fff}
/* ===================== end brand wordmark block ============================ */
/* PNX-LOGO-BLOCK-END */

/* PNX-WA-BLOCK-START v2 */
/* ============================================================================
   WhatsApp chat button + 3-field pre-chat - added 2026-09-30.

   Clicking the bubble opens a small panel asking for name, business type and
   current processor; those three answers are written into the WhatsApp message
   so the first thing your team sees is a qualified opener rather than "hi".

   The button is a REAL link to wa.me with a generic message, and the panel is
   layered on top by script. With JavaScript off it still works - it just opens
   WhatsApp without the three answers. No field is free-text except the name,
   so filling it in is one type and two taps.

   No phone number or email is collected here, and the customer initiates the
   message themselves, so this needs no TCPA/CASL consent checkbox - it is not
   permission for PosNexus to contact them.

   z-index 270 sits under the mobile sheet (290) and the nav (300), so an open
   mobile menu covers the bubble rather than the other way round.
   ============================================================================ */
.wa-fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:270;
  display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 15px;border-radius:999px;
  background:#25D366;color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent;
  box-shadow:0 10px 26px -10px rgba(16,23,32,.45),0 2px 6px rgba(16,23,32,.12);
  transition:transform .18s ease,box-shadow .18s ease}
.wa-fab:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(16,23,32,.5),0 2px 6px rgba(16,23,32,.12)}
.wa-fab:focus-visible{outline:3px solid #101720;outline-offset:3px}
.wa-fab svg{width:26px;height:26px;flex:none;display:block;fill:currentColor}
.wa-fab .wa-lab{font:800 14.5px/1 var(--f-d),sans-serif;letter-spacing:-.01em;white-space:nowrap;
  max-width:0;opacity:0;overflow:hidden;transition:max-width .22s ease,opacity .18s ease}
.wa-fab:hover .wa-lab,.wa-fab:focus-visible .wa-lab{max-width:180px;opacity:1}
.wa-fab[aria-expanded="true"] .wa-lab{max-width:0;opacity:0}

/* ---- pre-chat panel ---- */
.wa-panel{position:fixed;right:18px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:271;
  width:322px;max-width:calc(100vw - 36px);background:#fff;border:1px solid #E7EBEF;border-radius:18px;
  box-shadow:0 26px 60px -18px rgba(16,23,32,.4),0 4px 12px rgba(16,23,32,.08);
  overflow:hidden;display:none;font-family:var(--f-d),sans-serif}
.wa-panel.open{display:block;animation:wa-in .2s ease both}
@keyframes wa-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.wa-hd{background:#25D366;color:#fff;padding:15px 16px 14px;position:relative}
.wa-hd b{display:block;font:800 15.5px/1.2 var(--f-d),sans-serif;letter-spacing:-.015em}
.wa-hd span{display:block;margin-top:4px;font:500 12.5px/1.45 var(--f-d),sans-serif;opacity:.93}
.wa-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;border-radius:50%;
  background:transparent;color:#fff;font-size:19px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0}
.wa-x:hover{background:rgba(255,255,255,.18)}
.wa-x:focus-visible{outline:2px solid #fff;outline-offset:1px}
.wa-bd{padding:14px 16px 16px;max-height:calc(100vh - 170px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.wa-f{margin-bottom:11px}
.wa-f label{display:block;font:700 11px/1 var(--f-d),sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:#6B7684;margin-bottom:6px}
.wa-f input,.wa-f select{width:100%;height:44px;padding:0 12px;border:1px solid #DDE3E9;border-radius:10px;
  background:#fff;color:#101720;font:600 16px/1.2 var(--f-d),sans-serif;-webkit-appearance:none;appearance:none}
.wa-f select{background-image:linear-gradient(45deg,transparent 50%,#6B7684 50%),linear-gradient(135deg,#6B7684 50%,transparent 50%);
  background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.wa-f input:focus,.wa-f select:focus{outline:none;border-color:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.18)}
.wa-f.err input,.wa-f.err select{border-color:#D8442F;box-shadow:0 0 0 3px rgba(216,68,47,.14)}
.wa-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;
  margin-top:3px;border-radius:11px;background:#25D366;color:#fff;text-decoration:none;
  font:800 15px/1 var(--f-d),sans-serif;letter-spacing:-.01em;border:0;cursor:pointer}
.wa-go:hover{background:#1FBE5A}
.wa-go:focus-visible{outline:3px solid #101720;outline-offset:2px}
.wa-go svg{width:19px;height:19px;fill:currentColor;flex:none}
.wa-note{margin:9px 0 0;font:500 11px/1.45 var(--f-d),sans-serif;color:#8A94A2;text-align:center}
@media(max-width:860px){
  .wa-fab{height:54px;padding:0 14px}
  .wa-fab .wa-lab{display:none}
  .wa-panel{right:14px;left:14px;width:auto;max-width:none;bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){
  .wa-fab,.wa-fab .wa-lab{transition:none}
  .wa-fab:hover{transform:none}
  .wa-panel.open{animation:none}
}
@media print{.wa-fab,.wa-panel{display:none !important}}
/* PNX-WA-BLOCK-END */

/* PNX-TM-BLOCK-START v1 */
/* ============================================================================
   Third-party trademark attribution - added 2026-10-01.
   Sits directly above the copyright line in the site-wide footer, and above
   the disclosure paragraph in the ads landing page's own dark footer.
   ============================================================================ */
.f-tm{margin:0 0 16px;font:500 11.5px/1.7 var(--f-d),sans-serif;color:var(--ink2,#6B7684);
  max-width:none;letter-spacing:0}
#lpst .f-tm{font-size:11px;line-height:1.7;color:#6B7D8C;margin:0 0 12px}
@media(max-width:700px){.f-tm{font-size:11px;margin-bottom:14px}}
/* PNX-TM-BLOCK-END */

/* PNX-ER-BLOCK-START v1 */
/* ============================================================================
   switch.html - effective-rate calculator hero and supporting sections.
   Added 2026-10-01, replacing the one-screen hero + form page.
   All selectors are prefixed .er- so nothing here can collide with the rest of
   the stylesheet. Tokens come from :root; no new colours are introduced.
   ============================================================================ */
.er-hero{padding-block:clamp(40px,4.6vw,76px) clamp(30px,3.4vw,52px)}
.er-hero .er-k{display:block;margin-bottom:16px}
.er-k{font:600 11px/1 var(--f-m);letter-spacing:.17em;text-transform:uppercase;color:var(--ink3)}
.er-h1{font:800 clamp(32px,5vw,66px)/1.05 var(--f-d);letter-spacing:-.04em;margin:0;
  text-wrap:balance;max-width:21ch}
.er-lead{margin:18px 0 0;font:500 clamp(16px,1.35vw,19px)/1.6 var(--f-d);color:var(--ink2);
  max-width:60ch}
.er-h2{font:800 clamp(25px,3.3vw,46px)/1.1 var(--f-d);letter-spacing:-.035em;margin:0;
  text-wrap:balance}
.er-p{margin:0;font:500 clamp(15px,1.1vw,16.5px)/1.65 var(--f-d);color:var(--ink2)}
.er-note{margin-top:20px;font:500 12.5px/1.6 var(--f-m);color:var(--ink3);max-width:76ch}
.er-sec{padding-block:clamp(50px,6vw,98px)}
.er-band{background:#F7F9FB;border-block:1px solid var(--line)}

/* --- calculator --- */
.er-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);
  gap:clamp(22px,3.2vw,54px);align-items:start;margin-top:clamp(24px,3vw,42px)}
@media(max-width:1000px){.er-calc{grid-template-columns:1fr}}
.er-in{border:1px solid var(--line);border-radius:20px;padding:clamp(18px,2.2vw,28px);
  background:var(--white)}
.er-ig{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.er-ig{grid-template-columns:1fr}}
.er-f{display:flex;flex-direction:column;gap:7px;min-width:0}
.er-f.w{grid-column:1/-1}
.er-f label{font:700 10.5px/1.35 var(--f-m);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3)}
.er-f label em{display:block;margin-top:3px;font:500 11.5px/1.4 var(--f-d);font-style:normal;
  letter-spacing:0;text-transform:none;color:var(--ink3)}
.er-pre{position:relative}
.er-pre>span{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font:600 16px/1 var(--f-m);color:var(--ink3);pointer-events:none}
.er-pre input{padding-left:30px!important}
.er-in input{height:52px;width:100%;padding:0 14px;border:1px solid #DDE3E9;border-radius:11px;
  background:var(--white);color:var(--ink);font:600 16px/1.2 var(--f-m);
  font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none}
.er-in input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,144,71,.16)}
.er-ex{display:block;margin-top:16px;padding:11px 14px;border-radius:11px;background:#F7F9FB;
  font:500 12px/1.5 var(--f-d);color:var(--ink3)}
.er-ex b{color:var(--ink2)}

.er-out{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--white);
  box-shadow:0 30px 60px -42px rgba(16,23,32,.4)}
@media(min-width:1001px){.er-out{position:sticky;top:96px}}
.er-top{padding:clamp(20px,2.3vw,28px);border-bottom:1px solid var(--line)}
.er-big{font:800 clamp(48px,6.6vw,82px)/.95 var(--f-d);letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;margin-top:10px}
.er-cap{margin-top:9px;font:600 11px/1.5 var(--f-m);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3)}
.er-gauge{margin-top:22px}
.er-track{height:10px;border-radius:99px;position:relative;
  background:linear-gradient(90deg,#CFEBD9,#F5D9A6 52%,#F2B8A8)}
.er-track i{position:absolute;top:-5px;width:4px;height:20px;border-radius:3px;background:var(--ink);
  transform:translateX(-2px);transition:left .5s cubic-bezier(.22,1,.36,1)}
.er-gl{display:flex;justify-content:space-between;margin-top:9px;font:500 10.5px/1 var(--f-m);
  color:var(--ink3)}
.er-rows{padding:6px 0}
.er-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;
  padding:12px clamp(20px,2.3vw,28px)}
.er-r .er-rk{font:500 13.5px/1.4 var(--f-d);min-width:0}
.er-r .er-rk small{display:block;margin-top:3px;font:500 10.5px/1.4 var(--f-m);letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink3)}
.er-r .er-rv{font:600 15px/1 var(--f-m);white-space:nowrap;font-variant-numeric:tabular-nums}
.er-r.hi{background:var(--tintcard)}
.er-r.hi .er-rv{color:var(--blueink)}
.er-r.tot{background:var(--ink);color:#fff;margin-top:6px}
.er-r.tot .er-rk{font-weight:800;font-size:15px}
.er-r.tot .er-rk small{color:#8FA0B0}
.er-r.tot .er-rv{font-size:19px}
.er-foot{padding:14px clamp(20px,2.3vw,28px);background:#F7F9FB;border-top:1px solid var(--line);
  font:500 11px/1.6 var(--f-m);color:var(--ink3)}
.er-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* --- scale --- */
.er-scale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:clamp(24px,3vw,40px)}
@media(max-width:760px){.er-scale{grid-template-columns:1fr}}
.er-sc{background:var(--white);padding:24px 22px;min-width:0}
.er-sc b{display:block;font:800 26px/1 var(--f-d);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.er-sc .er-lab{margin-top:8px;font:600 10.5px/1 var(--f-m);letter-spacing:.1em;text-transform:uppercase}
.er-sc.lo .er-lab{color:var(--blueink)}
.er-sc.mid .er-lab{color:#9A6B16}
.er-sc.hg .er-lab{color:#9A3A24}
.er-sc .er-p{margin-top:11px;font-size:13.5px}

/* --- cards / steps --- */
.er-c3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);
  margin-top:clamp(24px,3vw,42px)}
@media(max-width:880px){.er-c3{grid-template-columns:1fr}}
.er-card{border:1px solid var(--line);border-radius:16px;padding:clamp(20px,2.2vw,28px);
  background:var(--white);min-width:0}
.er-card .er-tag{font:600 10.5px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3)}
.er-card h3{margin:13px 0 9px;font:800 clamp(17px,1.5vw,21px)/1.25 var(--f-d);letter-spacing:-.02em}
.er-card .er-p{font-size:14.5px}
.er-step{border-top:2px solid var(--ink);padding-top:18px;min-width:0}
.er-step b{font:600 11px/1 var(--f-m);letter-spacing:.14em;color:var(--blueink)}
.er-step h3{margin:12px 0 8px;font:800 clamp(17px,1.5vw,21px)/1.25 var(--f-d);letter-spacing:-.02em}
.er-step .er-p{font-size:14.5px}

/* --- faq --- */
.er-faq{margin-top:26px;max-width:88ch}
.er-faq details{border-bottom:1px solid var(--line)}
.er-faq summary{list-style:none;cursor:pointer;position:relative;padding:20px 40px 20px 0;
  font:700 clamp(15px,1.3vw,17.5px)/1.4 var(--f-d);letter-spacing:-.01em}
.er-faq summary::-webkit-details-marker{display:none}
.er-faq summary::after{content:"+";position:absolute;right:6px;top:18px;font:400 22px/1 var(--f-d);
  color:var(--ink3)}
.er-faq details[open] summary::after{content:"\2212"}
.er-faq details .er-p{padding:0 0 20px;font-size:15px;max-width:72ch}

/* --- carried-over notice inside the existing form --- */
.er-carry{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;padding:13px 16px;
  border-radius:12px;background:var(--tintcard);border:1px solid #CFEBD9;
  font:500 13px/1.5 var(--f-d);color:var(--accdeep)}
.er-carry svg{width:16px;height:16px;flex:none;margin-top:2px}
@media(prefers-reduced-motion:reduce){.er-track i{transition:none}}
/* PNX-ER-BLOCK-END */

/* PNX-CALC-BLOCK-START v1 */
/* effective-rate-calculator.html — a handful of additions on top of the
   .er-* block the switch page already installed. Nothing here is new colour. */
.erc-sel{height:52px;width:100%;padding:0 14px;border:1px solid #DDE3E9;border-radius:11px;
  background:var(--white);color:var(--ink);font:600 15px/1.2 var(--f-d);-webkit-appearance:none;
  appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),
  linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 23px,calc(100% - 15px) 23px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.erc-sel:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,144,71,.16)}
.erc-read{margin-top:clamp(20px,2.4vw,30px);padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);
  border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:14px;
  background:var(--tintcard);max-width:92ch}
.erc-read b{display:block;font:600 11px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;
  color:var(--blueink);margin-bottom:9px}
.erc-read .er-p{font-size:15px}
/* PNX-CALC-BLOCK-END */

/* PNX-LEARN-BLOCK-START v2 */
/* The Learn section: /learn.html and the twelve explainers.
   Introduces no new colour and no new font — everything below is built from
   the site's existing custom properties. Three deliberate fixes are encoded
   here and are the reason the block exists at all:
     1. .lrn-wrap caps the reading container. The site's .gut is full-bleed,
        which gave a twelve-item grid seven columns on a wide screen.
     2. body[data-page] hides the fixed particle canvas on these pages. It
        reads as atmosphere behind a hero and as a rendering fault behind a
        column of body copy; the hero here paints its own, masked out before
        any text begins.
     3. The reading column is centred and measured, not left-aligned against
        an empty half-screen. */

body[data-page="hub"] #stream-wrap,
body[data-page="article"] #stream-wrap{display:none!important}

/* A class that sets display beats the user agent's [hidden] rule, so every
   element the script hides needs this or it stays on screen. */
.lrn-item[hidden],.lrn-feat[hidden],.lrn-found[hidden],.lrn-none[hidden],
.lrn-stmt[hidden]{display:none!important}

.lrn-wrap{max-width:1240px; margin-inline:auto; padding-inline:clamp(18px,4vw,56px)}
.lrn-k{font:600 10.5px/1 var(--f-m); letter-spacing:.15em; text-transform:uppercase; color:var(--ink3)}
.lrn-h1{font:800 clamp(29px,4.1vw,51px)/1.04 var(--f-d); letter-spacing:-.045em; margin:15px 0 0;
  text-wrap:balance; color:var(--ink)}
.lrn-h1 .grad-t{background:linear-gradient(95deg,var(--blue),var(--mint,#3ED47E));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.lrn-lead{margin:17px 0 0; max-width:60ch; font:500 clamp(15px,1.35vw,17.5px)/1.62 var(--f-d);
  color:var(--ink2)}
.lrn-h2{font:800 clamp(19px,2.1vw,26px)/1.18 var(--f-d); letter-spacing:-.03em; color:var(--ink);
  margin:clamp(32px,3.4vw,50px) 0 0; scroll-margin-top:110px; text-wrap:balance}
.lrn-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:700 14px/1 var(--f-d); padding:14px 24px; border-radius:999px; text-decoration:none;
  transition:transform .15s}
.lrn-btn:hover{transform:translateY(-1px)}
.lrn-btn.pri{background:var(--blue); color:#fff}
.lrn-btn.gho{border:1px solid var(--line); color:var(--ink); background:var(--white)}
.lrn-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:clamp(28px,3vw,40px)}
.lrn-crumb{font:500 11.5px/1.5 var(--f-m); color:var(--ink3); margin-bottom:14px}
.lrn-crumb a{color:var(--ink3); text-decoration:none}
.lrn-crumb a:hover{color:var(--blueink)}
.lrn-meta{display:flex; gap:11px; align-items:center; flex-wrap:wrap; margin-top:18px;
  font:500 11.5px/1.6 var(--f-m); color:var(--ink3)}
.lrn-meta b{color:var(--ink2); font-weight:600}
.lrn-meta i{width:3px; height:3px; border-radius:50%; background:var(--ink3); flex:none}

/* ---- hero: the particle field, confined and masked out before any copy ---- */
/* The site header is position:fixed and 72px tall, and <main> starts at the top of the
   viewport underneath it, so a first section has to clear it itself. The rest of the
   site uses 120-130px here; this matches. */
.lrn-hero,.lrn-ihero{position:relative; overflow:hidden;
  padding-block:clamp(96px,7vw,124px) clamp(30px,3.6vw,56px)}
/* same fault on the calculator page, which is also a first section under that header */
body[data-page="tool"] .er-hero{padding-top:clamp(96px,7vw,124px)}
.lrn-hero::before,.lrn-ihero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(29,144,71,.16) 1.2px, transparent 1.3px),
    radial-gradient(circle at 70% 18%, rgba(62,212,126,.22) 1.1px, transparent 1.2px),
    radial-gradient(circle at 42% 72%, rgba(29,144,71,.12) 1.3px, transparent 1.4px);
  background-size:38px 34px, 52px 46px, 66px 58px;
  -webkit-mask-image:linear-gradient(185deg,rgba(0,0,0,.8),transparent 76%);
  mask-image:linear-gradient(185deg,rgba(0,0,0,.8),transparent 76%)}
.lrn-hero>*,.lrn-ihero>*{position:relative}
.lrn-hsplit{display:grid; grid-template-columns:1.14fr .86fr; gap:clamp(26px,3.4vw,56px);
  align-items:center}

/* ---- the stat card ---- */
.lrn-stat{border:1px solid var(--tintline,#CFEBD9); border-radius:20px; overflow:hidden;
  background:var(--white); box-shadow:0 10px 34px rgba(16,23,32,.07)}
.lrn-st-top{background:linear-gradient(130deg,var(--tintcard),#E8F6EE); padding:24px;
  border-bottom:1px solid var(--tintline,#CFEBD9)}
.lrn-st-lab{font:600 10px/1.3 var(--f-m); letter-spacing:.14em; text-transform:uppercase;
  color:var(--blueink); display:block}
.lrn-st-big{margin-top:12px; font:800 clamp(34px,4.6vw,56px)/1 var(--f-d); letter-spacing:-.05em;
  color:var(--accdeep,var(--blueink)); font-variant-numeric:tabular-nums}
.lrn-st-cap{margin:9px 0 0; font:500 13.5px/1.55 var(--f-d); color:var(--ink2)}
.lrn-st-rows{padding:6px 24px 20px}
.lrn-sr{display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--line2,#F0F3F8)}
.lrn-sr:last-child{border-bottom:0}
.lrn-sr span{font:500 13.5px/1.4 var(--f-d); color:var(--ink2)}
.lrn-sr b{font:700 13.5px/1.4 var(--f-m); color:var(--ink); font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* ---- the green band ---- */
.lrn-band{background:linear-gradient(103deg,var(--accdeep,#0A4423),var(--blueink) 52%,var(--blue));
  color:#fff; overflow:hidden; position:relative}
.lrn-band::after{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 20% 40%, rgba(255,255,255,.14) 1.1px, transparent 1.2px);
  background-size:30px 26px; opacity:.6}
.lrn-band-in{position:relative; padding-block:clamp(28px,3.2vw,48px); display:grid;
  grid-template-columns:.74fr 1.36fr; gap:clamp(20px,3vw,46px); align-items:center}
.lrn-band h2{margin:0; font:800 clamp(20px,2.4vw,29px)/1.12 var(--f-d); letter-spacing:-.035em;
  color:#fff}
.lrn-band p{margin:11px 0 0; font:500 14px/1.6 var(--f-d); color:#CDEBD9; max-width:34ch}
.lrn-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.lrn-step{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  border-radius:13px; padding:16px 15px}
.lrn-sn{font:700 10px/1 var(--f-m); letter-spacing:.1em; color:#9FE3BC}
.lrn-step b{display:block; margin-top:8px; font:800 14.5px/1.2 var(--f-d); color:#fff}
.lrn-step span{display:block; margin-top:6px; font:500 11.5px/1.5 var(--f-d); color:#BFE4CF}

/* ---- the two rails ---- */
.lrn-rails{display:grid; grid-template-columns:196px minmax(0,1fr) 262px;
  gap:clamp(22px,2.8vw,48px); align-items:start;
  padding-block:clamp(28px,3.2vw,50px) clamp(40px,5vw,78px)}
.lrn-toc,.lrn-rail{position:sticky; top:24px}
.lrn-rh{margin:0 0 12px; font:700 10px/1 var(--f-m); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink3)}
.lrn-toc ol{list-style:none; margin:0; padding:0; border-left:2px solid var(--line)}
.lrn-toc a{display:block; padding:7px 0 7px 14px; margin-left:-2px;
  border-left:2px solid transparent; font:600 12.5px/1.4 var(--f-d); color:var(--ink3);
  text-decoration:none}
.lrn-toc a:hover{color:var(--ink2)}
.lrn-toc a[aria-current="true"]{color:var(--blueink); border-left-color:var(--blue)}
.lrn-prog{position:fixed; left:0; top:0; height:3px; width:0; z-index:60;
  background:linear-gradient(90deg,var(--blue),var(--mint,#3ED47E)); pointer-events:none}

/* ---- the prose ---- */
.lrn-body{max-width:68ch; min-width:0}
.lrn-body>h2:first-child{margin-top:0}
.lrn-body h3{font:800 clamp(16px,1.6vw,19px)/1.3 var(--f-d); letter-spacing:-.022em;
  color:var(--ink); margin:clamp(24px,2.6vw,32px) 0 0}
.lrn-body p{margin:14px 0 0; font:500 clamp(15.5px,1.2vw,17px)/1.72 var(--f-d); color:var(--ink2)}
.lrn-body h2+p,.lrn-body h3+p{margin-top:12px}
.lrn-body strong{color:var(--ink); font-weight:700}
.lrn-body em{font-style:italic}
.lrn-body a{color:var(--blueink); font-weight:600; text-decoration:underline;
  text-decoration-color:var(--tintline,#CFEBD9); text-decoration-thickness:2px;
  text-underline-offset:3px}
.lrn-body a:hover{text-decoration-color:var(--blue)}
.lrn-body ul,.lrn-body ol{margin:14px 0 0; padding-left:22px}
.lrn-body li{margin:9px 0; font:500 clamp(15.5px,1.2vw,17px)/1.68 var(--f-d); color:var(--ink2)}
.lrn-body li::marker{color:var(--ink3)}
.lrn-note{margin:clamp(22px,2.4vw,32px) 0 0!important; padding:18px 22px; border-radius:14px;
  background:var(--tintcard); border:1px solid var(--tintline,#CFEBD9);
  font:500 15px/1.65 var(--f-d)!important; color:var(--accdeep,var(--blueink))!important}
.lrn-note a{color:var(--accdeep,var(--blueink))}
.lrn-tw{margin:clamp(22px,2.6vw,32px) 0 0; overflow-x:auto; border:1px solid var(--line);
  border-radius:14px; background:var(--white)}
.lrn-body table{border-collapse:collapse; width:100%; min-width:460px}
.lrn-body th{text-align:left; font:700 10.5px/1.3 var(--f-m); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink3); padding:14px 16px;
  border-bottom:1px solid var(--line); background:var(--wash,#F7F9FB); white-space:nowrap}
.lrn-body td{padding:13px 16px; border-bottom:1px solid var(--line2,#F0F3F8);
  font:500 14.5px/1.55 var(--f-d); color:var(--ink2); vertical-align:top}
.lrn-body tr:last-child td{border-bottom:0}
.lrn-body td:first-child{color:var(--ink); font-weight:600}
/* The comparison tables carry a published figure plus the footnote that makes it
   honest ("under $50K a month", "on the free plan"). The footnote has to read as
   subordinate to the figure or the cell turns into a paragraph. */
.lrn-body .lrn-sub{display:block; margin-top:4px;
  font:500 11.5px/1.45 var(--f-m); color:var(--ink3); letter-spacing:-.005em}
.lrn-body td:first-child .lrn-sub{font-weight:500}

/* --grad is defined on the live site but not in every context this block is
   loaded in, and an unresolved var() in a background makes the whole
   declaration invalid rather than falling back to anything. Every use carries
   the literal gradient as a fallback for that reason. */

/* ---- figures ----
   Drawn in HTML and CSS, not SVG, so they reflow on a phone instead of
   shrinking into illegibility, and so their text stays real text. The one
   exception is the proportion ring, which has to be drawn to scale. */
.lrn-fig{margin:clamp(26px,3vw,38px) 0 0; padding:0;
  border:1px solid var(--line); border-radius:16px; background:var(--white);
  overflow:hidden}
.lrn-fig figcaption{display:block; padding:16px 18px 14px;
  border-bottom:1px solid var(--line2,#F0F3F8); background:var(--wash,#F7F9FB)}
.lrn-fig figcaption b{display:block; font:800 14.5px/1.35 var(--f-d);
  letter-spacing:-.015em; color:var(--ink)}
.lrn-fig figcaption span{display:block; margin-top:4px;
  font:500 12.5px/1.5 var(--f-d); color:var(--ink3)}

/* bars */
.lrn-bars{display:flex; flex-direction:column; gap:12px; padding:18px}
.lrn-bar{display:grid; grid-template-columns:minmax(78px,30%) minmax(0,1fr) auto;
  align-items:center; gap:12px}
.lrn-bl{font:600 12.5px/1.35 var(--f-d); color:var(--ink2)}
.lrn-bt{display:block; height:12px; border-radius:7px;
  background:var(--line2,#F0F3F8); overflow:hidden}
.lrn-bt i{display:block; height:100%; border-radius:7px; background:var(--grad,linear-gradient(90deg,#1D9047,#3ED47E))}
/* `hi` marks the bar the caption is about. Deliberately a deeper green rather
   than the ink black, because a different colour family reads as a different
   category — "recommended", or "bad" — and it is neither. */
.lrn-bar.hi .lrn-bt i{background:var(--accdeep)}
.lrn-bv{font:700 13px/1 var(--f-m); color:var(--ink); white-space:nowrap}

/* flow */
.lrn-flow{display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; padding:18px}
.lrn-fs{position:relative; flex:1 1 128px; min-width:128px;
  border:1px solid var(--line); border-radius:12px; padding:12px 13px;
  background:var(--white)}
.lrn-fs b{display:block; font:800 12.5px/1.3 var(--f-d); color:var(--ink);
  letter-spacing:-.01em}
.lrn-fs span{display:block; margin-top:4px; font:500 11.5px/1.45 var(--f-d);
  color:var(--ink3)}
.lrn-fs + .lrn-fs::before{content:""; position:absolute; left:-10px; top:50%;
  width:10px; height:1px; background:var(--line)}

/* timeline */
.lrn-tline{display:flex; flex-wrap:wrap; gap:0; padding:18px}
.lrn-tl-i{flex:1 1 118px; min-width:118px; padding:0 14px 0 0; position:relative}
/* 18px for the date label and its margin, + 4px of the heading's padding, + half
   the 11px dot = the line lands on the dot centres rather than just above them. */
.lrn-tl-i::after{content:""; position:absolute; left:0; top:27px; right:0; height:2px;
  background:var(--line2,#F0F3F8)}
.lrn-tl-i:last-child::after{display:none}
.lrn-tl-d{display:inline-block; font:700 10px/1 var(--f-m); letter-spacing:.1em;
  text-transform:uppercase; color:var(--blueink); margin-bottom:8px}
.lrn-tl-i b{display:block; position:relative; padding-top:16px;
  font:800 12.5px/1.3 var(--f-d); color:var(--ink)}
.lrn-tl-i b::before{content:""; position:absolute; left:0; top:4px; width:11px;
  height:11px; border-radius:50%; background:var(--blue);
  box-shadow:0 0 0 3px var(--white)}
.lrn-tl-s{display:block; margin-top:4px; font:500 11.5px/1.45 var(--f-d);
  color:var(--ink3)}

/* split */
.lrn-split{display:flex; flex-wrap:wrap; align-items:center; gap:22px; padding:20px}
.lrn-split svg{flex:0 0 132px; width:132px; height:132px}
.lrn-split .s0{stroke:var(--accdeep)}
.lrn-split .s1{stroke:var(--blue)}
.lrn-split .s2{stroke:var(--mint,#3ED47E)}
.lrn-split .s3{stroke:var(--line)}
.lrn-lg{flex:1 1 200px; display:flex; flex-direction:column; gap:9px}
.lrn-lg-i{display:grid; grid-template-columns:auto 1fr auto; align-items:baseline;
  gap:9px; padding-left:16px; position:relative}
.lrn-lg-i::before{content:""; position:absolute; left:0; top:5px; width:9px; height:9px;
  border-radius:3px}
.lrn-lg-i.s0::before{background:var(--accdeep)}
.lrn-lg-i.s1::before{background:var(--blue)}
.lrn-lg-i.s2::before{background:var(--mint,#3ED47E)}
.lrn-lg-i.s3::before{background:var(--line)}
.lrn-lg-i b{font:700 12.5px/1.35 var(--f-d); color:var(--ink)}
.lrn-lg-i span{font:500 11.5px/1.4 var(--f-d); color:var(--ink3)}
.lrn-lg-i i{font:700 12.5px/1 var(--f-m); font-style:normal; color:var(--ink)}

@media (max-width:560px){
  .lrn-bar{grid-template-columns:1fr auto; gap:6px 10px}
  .lrn-bl{grid-column:1/3}
  .lrn-fs + .lrn-fs::before{display:none}
  .lrn-tl-i::after{display:none}
  .lrn-tl-i{flex:1 1 100%; padding:0 0 14px}
}

/* ---- product photography ----
   The images are already on the site; the Learn package ships none of its own.
   object-fit:contain on a wash keeps a 2560x1707 studio shot and a 500x500
   cut-out looking like they belong on the same page. */
.lrn-shots{display:grid; gap:14px; padding:18px; background:var(--wash,#F7F9FB)}
.lrn-shot-2 .lrn-shots{grid-template-columns:1fr 1fr}
.lrn-shot-3 .lrn-shots{grid-template-columns:repeat(3,1fr)}
.lrn-shots img{display:block; width:100%; height:auto; max-height:260px;
  object-fit:contain; border-radius:10px; background:var(--white)}
.lrn-shot-1 .lrn-shots img{max-height:320px}
@media (max-width:560px){
  .lrn-shot-2 .lrn-shots,.lrn-shot-3 .lrn-shots{grid-template-columns:1fr}
  .lrn-shots img{max-height:220px}
}

/* ---- the offer rail ---- */
.lrn-offer{border:1px solid var(--tintline,#CFEBD9); background:var(--tintcard);
  border-radius:16px; padding:22px}
.lrn-oh{margin:0; font:800 16px/1.25 var(--f-d); letter-spacing:-.02em; color:var(--ink)}
.lrn-offer p{margin:9px 0 0; font:500 13px/1.58 var(--f-d); color:var(--ink2)}
.lrn-offer .lrn-btn{margin-top:15px; width:100%; padding:12px 16px; font-size:13px}
.lrn-fine{display:block; margin-top:10px; font:500 10.5px/1.4 var(--f-m); color:var(--ink3);
  text-align:center}
.lrn-next{margin-top:14px; border:1px solid var(--line); border-radius:16px; padding:20px}
.lrn-next a{display:block; padding:9px 0; border-bottom:1px solid var(--line2,#F0F3F8);
  text-decoration:none}
.lrn-next a:last-child{border-bottom:0}
.lrn-next b{display:block; font:700 13px/1.35 var(--f-d); color:var(--ink)}
.lrn-next a:hover b{color:var(--blueink)}
.lrn-next span{display:block; margin-top:3px; font:500 11.5px/1.45 var(--f-d); color:var(--ink3)}

/* ---- FAQ ---- */
.lrn-faq-s{margin-top:clamp(34px,3.6vw,52px)}
.lrn-faq{margin-top:18px; border-top:1px solid var(--line)}
.lrn-faq details{border-bottom:1px solid var(--line)}
.lrn-faq summary{cursor:pointer; list-style:none; padding:17px 30px 17px 0; position:relative;
  font:700 15.5px/1.45 var(--f-d); color:var(--ink)}
.lrn-faq summary::-webkit-details-marker{display:none}
.lrn-faq summary::after{content:"+"; position:absolute; right:4px; top:14px;
  font:400 21px/1 var(--f-d); color:var(--ink3)}
.lrn-faq details[open] summary::after{content:"\2212"}
.lrn-faq summary:hover{color:var(--blueink)}
.lrn-fa p{margin:0; padding:0 0 19px; font:500 15px/1.68 var(--f-d); color:var(--ink2); max-width:70ch}

/* ================= /learn.html ================= */
.lrn-ihero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,3.6vw,60px);
  align-items:center}
.lrn-ask{display:flex; align-items:center; gap:12px; border:1.5px solid var(--tintline,#CFEBD9);
  background:var(--white); border-radius:999px; padding:4px 6px 4px 20px; margin-top:24px;
  box-shadow:0 4px 18px rgba(16,23,32,.05); transition:border-color .15s, box-shadow .15s}
.lrn-ask:focus-within{border-color:var(--blue); box-shadow:0 6px 24px rgba(29,144,71,.14)}
.lrn-ask input{flex:1; min-width:0; border:0; outline:0; background:transparent; padding:14px 0;
  font:500 15.5px/1.3 var(--f-d); color:var(--ink)}
.lrn-ask input::placeholder{color:var(--ink3)}
.lrn-ask button{background:var(--blue); border:0; cursor:pointer; border-radius:999px;
  width:42px; height:42px; display:grid; place-items:center; flex:none}
.lrn-sugg{display:flex; gap:7px; flex-wrap:wrap; margin-top:14px}
.lrn-sugg button{font:500 12.5px/1 var(--f-d); color:var(--ink2); background:var(--white);
  border:1px solid var(--line); border-radius:999px; padding:9px 14px; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s}
.lrn-sugg button:hover{border-color:var(--tintline,#CFEBD9); color:var(--blueink);
  background:var(--tintcard)}

.lrn-stmt{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--white);
  box-shadow:0 10px 32px rgba(16,23,32,.07)}
.lrn-stmt-h{display:flex; justify-content:space-between; align-items:center; padding:12px 18px;
  background:var(--wash,#F7F9FB); border-bottom:1px solid var(--line)}
.lrn-stmt-h span{font:600 10px/1 var(--f-m); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink3)}
.lrn-row{display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:11px 18px; border-bottom:1px solid var(--line2,#F0F3F8); width:100%; text-align:left;
  background:none; border-left:0; border-right:0; border-top:0; font-family:inherit}
.lrn-row .n{font:500 14px/1.35 var(--f-d); color:var(--ink2)}
.lrn-row .v{font:600 14px/1 var(--f-m); color:var(--ink); font-variant-numeric:tabular-nums}
button.lrn-row{cursor:pointer; background:var(--tintcard); transition:background .14s}
button.lrn-row .n{font-weight:800; color:var(--blueink); text-decoration:underline;
  text-decoration-color:var(--tintline,#CFEBD9); text-decoration-thickness:2px;
  text-underline-offset:3px}
button.lrn-row .v{color:var(--blueink); font-weight:700}
button.lrn-row:hover{background:#E1F2E8}
button.lrn-row:hover .n{text-decoration-color:var(--blue)}
.lrn-row.tot{background:var(--ink); border-bottom:0}
.lrn-row.tot .n,.lrn-row.tot .v{color:#fff; font-weight:800}
.lrn-stmt-f{display:flex; gap:9px; align-items:center; padding:11px 18px;
  border-top:1px solid var(--line); background:var(--wash,#F7F9FB);
  font:500 11.5px/1.45 var(--f-d); color:var(--ink3)}
.lrn-stmt-f i{width:11px; height:11px; border-radius:3px; background:var(--tintcard);
  border:1px solid var(--tintline,#CFEBD9); flex:none}

.lrn-feat{display:grid; grid-template-columns:1.18fr .88fr; gap:clamp(22px,3vw,46px);
  align-items:center; padding:clamp(22px,2.6vw,34px); border:1px solid var(--tintline,#CFEBD9);
  border-radius:20px; background:linear-gradient(120deg,var(--tintcard),#FAFDFB);
  text-decoration:none; margin-top:clamp(16px,1.8vw,26px)}
.lrn-fk{font:600 10px/1.4 var(--f-m); letter-spacing:.14em; text-transform:uppercase;
  color:var(--blueink)}
.lrn-feat h2{margin:13px 0 0; font:800 clamp(22px,2.7vw,33px)/1.1 var(--f-d);
  letter-spacing:-.036em; color:var(--ink)}
.lrn-feat p{margin:12px 0 0; font:500 15px/1.6 var(--f-d); color:var(--ink2); max-width:50ch}
.lrn-feat .art{display:grid; place-items:center}
.lrn-feat .art svg{width:100%; max-width:300px; height:auto}

.lrn-found{margin-top:clamp(30px,3.2vw,44px); font:600 11px/1 var(--f-m); letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink3)}
.lrn-list{margin-top:16px; border-top:1px solid var(--line)}
.lrn-item{display:flex; gap:clamp(12px,1.6vw,22px); align-items:baseline; padding:18px 12px;
  margin-inline:-12px; border-bottom:1px solid var(--line2,#F0F3F8); border-radius:10px;
  text-decoration:none; transition:background .14s}
.lrn-item:hover{background:var(--tintcard)}
.lrn-item:hover .t{color:var(--blueink)}
.lrn-item .num{font:600 12px/1.6 var(--f-m); color:var(--ink3); min-width:22px}
.lrn-item .bd{flex:1; min-width:0}
.lrn-item .t{display:block; font:800 clamp(16px,1.7vw,20px)/1.26 var(--f-d); letter-spacing:-.025em;
  color:var(--ink)}
.lrn-item .d{display:block; margin-top:6px; font:500 14px/1.55 var(--f-d); color:var(--ink2);
  max-width:72ch}
.lrn-item .m{font:500 11px/1.6 var(--f-m); color:var(--ink3); white-space:nowrap}
.lrn-none{margin-top:20px; padding:26px; border:1px dashed var(--line); border-radius:14px;
  color:var(--ink2); font:500 14.5px/1.6 var(--f-d)}
.lrn-none a{color:var(--blueink); font-weight:700}

.lrn-closer{background:var(--wash,#F7F9FB); border-block:1px solid var(--line);
  padding-block:clamp(38px,4.6vw,70px)}
.lrn-closer-in{display:flex; gap:28px; align-items:center; flex-wrap:wrap;
  justify-content:space-between}
.lrn-closer h2{margin:12px 0 0; font:800 clamp(20px,2.4vw,29px)/1.14 var(--f-d);
  letter-spacing:-.032em; color:var(--ink)}

/* ---- responsive ---- */
@media (max-width:1120px){
  .lrn-rails{grid-template-columns:minmax(0,1fr) 262px}
  .lrn-toc{display:none}
}
@media (max-width:980px){ .lrn-ihero-grid{grid-template-columns:1fr} }
@media (max-width:900px){ .lrn-hsplit{grid-template-columns:1fr} }
@media (max-width:860px){
  .lrn-rails{grid-template-columns:minmax(0,1fr)}
  .lrn-rail{display:none}
  .lrn-band-in{grid-template-columns:1fr}
  .lrn-feat{grid-template-columns:1fr}
}
@media (max-width:560px){ .lrn-steps{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .lrn-btn,.lrn-item,button.lrn-row,.lrn-sugg button{transition:none}
  html{scroll-behavior:auto}
}
/* The Learn index pages itself: 20 rows, then 10 at a time. The button is the
   real control — the observer in learn.js just presses it early as you near
   the bottom — so this has to look and behave like a button, keyboard focus
   ring and all, not like a decorative spinner. */
.lrn-more{display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:26px 0 8px}
.lrn-more[hidden]{display:none!important}
.lrn-morebtn{font:700 14px/1 var(--f-d); color:var(--ink); background:var(--white);
  border:1px solid var(--line); border-radius:999px; padding:13px 26px; cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s}
.lrn-morebtn:hover{background:var(--tintcard); border-color:var(--tintline,#CFEBD9);
  transform:translateY(-1px)}
.lrn-morebtn:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
.lrn-morenote{font:500 11px/1.6 var(--f-m); color:var(--ink3);
  letter-spacing:.08em; text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.lrn-morebtn{transition:none}}
/* PNX-LEARN-BLOCK-END */