/*!
 * AntoPay — Public site "Red Classic" (landing, docs, demo, legal)   · loads after app.css
 * Light by default, follows the dark switch of the panel. Built on the same tokens as app.css.
 * Developed by Viraj Singh · Bangladesh
 */

body.site{margin:0;background:var(--bg);color:var(--ink-2);font-size:calc(15.5*var(--f));line-height:1.65;overflow-x:hidden}
.site .brand,.site .brand:hover{color:var(--ink)}
.wrap{width:min(73.75rem,calc(100% - 2.5rem));margin-inline:auto}
.skip{position:absolute;left:-624.9375rem;top:.625rem;z-index:99;padding:.625rem .875rem;border-radius:.625rem;background:var(--brand);color:#fff;font-weight:700}
.skip:focus{left:.75rem;color:#fff}

/* ───────── backdrop ───────── */
.site-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.site-bg .g1{position:absolute;width:61.25rem;height:61.25rem;left:-20rem;top:-28.75rem;border-radius:50%;background:radial-gradient(circle,rgba(223,32,48,.16),transparent 62%)}
.site-bg .g2{position:absolute;width:51.25rem;height:51.25rem;right:-18.75rem;top:36%;border-radius:50%;background:radial-gradient(circle,rgba(47,127,240,.1),transparent 62%)}
.site-bg .mesh{position:absolute;inset:0;background-image:radial-gradient(rgba(223,32,48,.16) 1px,transparent 1.4px);background-size:1.625rem 1.625rem;-webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 75%)}
.site canvas.fx{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:.7}

/* ───────── navigation ───────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(1rem) saturate(1.4);backdrop-filter:blur(1rem) saturate(1.4);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.nav.stuck,.nav-open .nav{box-shadow:0 .875rem 2.125rem -1.375rem rgba(110,24,38,.5)}
.nav-in{display:flex;align-items:center;gap:1.375rem;height:4.375rem}
.nav .brand{font-size:calc(21*var(--f))}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-links>a{padding:.5rem .8125rem;border-radius:.6875rem;font-weight:600;font-size:calc(14*var(--f));color:var(--ink-2);text-decoration:none;transition:color .15s,background .15s}
.nav-links>a:hover,.nav-links>a.on{color:var(--brand-d);background:var(--brand-soft)}
.nav-cta{display:flex;align-items:center;gap:.5rem}
.nav-cta-m,.nav-shade,.nav-m-head,.nav-m-cap,.nl-ic,.nl-go,.nl-t small{display:none}
.nav-theme{margin-left:-.625rem}
.nav-toggle{display:none;width:2.75rem;height:2.75rem;margin-left:auto;place-items:center;border-radius:.875rem;color:#fff;background:var(--grad);border:0;border-bottom:.1875rem solid var(--brand-dd);box-shadow:var(--glow);cursor:pointer}
.nav-toggle:active{transform:translateY(2px);border-bottom-width:1px}
@media (max-width:980px){
  /* 4.5.0 · the menu behind the three-line button is a drawer from the right: the site's name on top, one tile per page
     (icon, name, one line about it), sign-in and the contacts at the foot. (.nav has a backdrop filter, so "fixed" inside it is
     measured from the bar — that is why the height is written out.) */
  .nav-shade{display:block;position:fixed;z-index:1;top:0;left:0;width:100%;height:100vh;height:100dvh;background:rgba(28,10,15,.5);-webkit-backdrop-filter:blur(.1875rem);backdrop-filter:blur(.1875rem);opacity:0;pointer-events:none;transition:opacity .25s}
  .nav-open .nav-shade{opacity:1;pointer-events:auto}
  .nav-links{position:fixed;z-index:2;top:0;right:0;width:min(84vw,330PX);height:100vh;height:100dvh;flex-direction:column;align-items:stretch;gap:.4375rem;margin:0;padding:0 .75rem .875rem;overflow-y:auto;overscroll-behavior:contain;
    border-radius:1.5rem 0 0 1.5rem;background:var(--surface);border-left:1px solid var(--line-2);box-shadow:-1.875rem 0 3.75rem -1.625rem rgba(60,12,22,.55);transform:translateX(104%);visibility:hidden;transition:transform .32s var(--ease),visibility 0s .32s}
  .nav-open .nav-links{transform:none;visibility:visible;transition:transform .32s var(--ease),visibility 0s}
  .nav-m-head{display:flex;align-items:center;justify-content:space-between;gap:.625rem;position:sticky;top:0;z-index:1;margin:0 -.75rem 2px;padding:.6875rem .75rem .625rem .875rem;background:linear-gradient(180deg,var(--brand-soft),var(--surface));border-bottom:1px solid var(--line);box-shadow:0 .625rem 1rem -1rem rgba(110,24,38,.6)}
  .nav-m-head::after{content:"";position:absolute;left:0;right:0;top:0;height:.1875rem;background:var(--grad)}
  .nav-m-head .brand{font-size:calc(17*var(--f));gap:.5625rem;min-width:0}
  .nav-m-head .brand-logo,.nav-m-head .brand-logo img{height:2.125rem}
  .nav-m-head .brand-mark{width:2.125rem;height:2.125rem;border-radius:.6875rem}
  .nav-x{flex:none;display:grid;place-items:center;width:2.125rem;height:2.125rem;padding:0;border-radius:.6875rem;color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);border-bottom:.1875rem solid var(--edge-2);cursor:pointer;transition:transform .12s,color .15s}
  .nav-x:hover{color:var(--brand)}.nav-x:active{transform:translateY(2px);border-bottom-width:1px}
  .nav-x svg{width:1rem;height:1rem}
  .nav-m-cap{display:block;margin:.375rem .25rem 0;font:700 max(9.5px,calc(10.5*var(--f))) var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--label)}
  .nav-links>a{display:flex;align-items:center;gap:.6875rem;padding:.5rem .625rem .5rem .5rem;border-radius:.9375rem;font-size:calc(14*var(--f));font-weight:700;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-bottom:.1875rem solid var(--edge);
    opacity:0;transform:translateX(1.125rem);transition:opacity .3s,transform .3s var(--ease),background .15s,border-color .15s}
  .nav-open .nav-links>a{opacity:1;transform:none}
  .nav-open .nav-links>a:nth-of-type(1){transition-delay:.06s}.nav-open .nav-links>a:nth-of-type(2){transition-delay:.1s}.nav-open .nav-links>a:nth-of-type(3){transition-delay:.14s}
  .nav-open .nav-links>a:nth-of-type(4){transition-delay:.18s}.nav-open .nav-links>a:nth-of-type(5){transition-delay:.22s}.nav-open .nav-links>a:nth-of-type(n+6){transition-delay:.26s}
  .nav-links>a:hover{color:var(--ink);background:var(--surface-2)}
  .nav-links>a:active{transform:translateY(2px);border-bottom-width:1px;margin-bottom:2px}
  .nav-links>a.on{color:var(--brand-d);background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 36%,var(--line));border-bottom-color:color-mix(in srgb,var(--brand) 46%,var(--edge))}
  .nl-ic{--c:var(--brand);flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:.75rem;color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 76%,#fff),var(--c));border-bottom:.1875rem solid color-mix(in srgb,var(--c) 66%,#000);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 .5rem .75rem -.5rem var(--c)}
  .nl-ic svg{width:1.0625rem;height:1.0625rem;filter:drop-shadow(0 1px 0 rgba(0,0,0,.22))}
  .nl-t{flex:1;min-width:0;line-height:1.25}
  .nl-t small{display:block;margin-top:1px;font-size:max(9.5px,calc(11.5*var(--f)));font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nl-go{flex:none;display:grid;place-items:center;width:1.375rem;height:1.375rem;border-radius:50%;color:var(--muted);background:var(--surface-3)}
  .nl-go svg{width:.75rem;height:.75rem}
  .nav-links>a.on .nl-go{color:#fff;background:var(--brand)}
  .nav-cta{display:none}
  .nav-cta-m{display:grid;gap:.5rem;margin-top:auto;padding-top:.75rem;border-top:1px solid var(--line)}
  .nav-cta-m .btn{justify-content:center;text-align:center}
  .nl-contact{display:flex;align-items:center;justify-content:space-between;gap:.625rem;margin-top:2px;padding:.5rem .625rem;border-radius:.875rem;background:var(--surface-2);border:1px solid var(--line)}
  .nl-contact small{font:700 max(9.5px,calc(10.5*var(--f))) var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
  .nl-contact>span{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.375rem}
  .nl-c{--c:#64748b;display:grid;place-items:center;width:1.875rem;height:1.875rem;border-radius:.625rem;color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 82%,#fff),var(--c));border-bottom:2px solid color-mix(in srgb,var(--c) 66%,#000);box-shadow:inset 0 1px 0 rgba(255,255,255,.42)}
  .nl-c svg{width:.9375rem;height:.9375rem}
  .nl-c:hover{color:#fff;filter:brightness(1.07)}.nl-c:active{transform:translateY(2px);border-bottom-width:0}
  .nl-c[data-kind="instagram"]{background:linear-gradient(135deg,#f9a03c,#e1306c 52%,#8a3ab9);border-bottom-color:#7a2f8f}
  body.nav-open{overflow:hidden}
  .nav-toggle{display:grid;margin-left:0}
  .nav-theme{margin-left:auto}
  .nav-in{gap:.625rem}
}

/* ───────── shared pieces ───────── */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .875rem;border-radius:62.4375rem;font:700 calc(12*var(--f)) var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-d);background:var(--brand-soft);border:1px solid var(--bad-line)}
[data-theme="dark"] .eyebrow{color:var(--label)}
.eyebrow i{width:.4375rem;height:.4375rem;border-radius:50%;background:var(--brand);box-shadow:0 0 0 .25rem rgba(223,32,48,.18);animation:sitePulse 1.8s ease-in-out infinite}
@keyframes sitePulse{50%{box-shadow:0 0 0 .5rem rgba(223,32,48,0)}}
.btn-xl{height:3.5rem;padding:0 1.75rem;font-size:calc(15.5*var(--f));border-radius:1.0625rem}
.glass{position:relative;border-radius:1.375rem;background:var(--surface);border:1px solid var(--line);border-bottom:.3125rem solid var(--edge);box-shadow:var(--sh-2)}
.glass::before{content:"";position:absolute;left:1.125rem;right:1.125rem;top:-1px;height:.1875rem;border-radius:0 0 .375rem .375rem;background:linear-gradient(90deg,var(--brand),var(--brand-3) 45%,var(--accent));opacity:0;transition:opacity .25s}
.glass:hover::before{opacity:1}
.sec{position:relative;padding:5.75rem 0}
.sec.tight{padding:3.75rem 0}
.sec-head{max-width:46.25rem;margin:0 auto 3.375rem;text-align:center}
.sec-head h2,.h2{margin:1rem 0 .75rem;font:700 clamp(1.875rem,calc(3.9vw*var(--k)),2.875rem)/1.08 var(--display);letter-spacing:0;color:var(--ink)}
.sec-head h2 em,.h2 em{font-style:normal;color:var(--brand)}
.sec-head p{margin:0;font-size:calc(16.5*var(--f));color:var(--muted)}
/* 4.4.0 · icons as small 3D blocks: a thick side in their own dark shade, a glossy top, a floor shadow.
   They stand a little turned and straighten up when the card is touched. */
.ico3d{--side:#a3131f;--glow:rgba(223,32,48,.62);position:relative;width:3.375rem;height:3.375rem;border-radius:1.0625rem;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#ff6d7a,#c8182b);
  transform:perspective(20rem) rotateX(12deg) rotateY(-12deg);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -.4375rem .625rem -.375rem rgba(0,0,0,.28),1px 1px 0 var(--side),2px 2px 0 var(--side),.1875rem .1875rem 0 var(--side),.25rem .25rem 0 var(--side),.3125rem .3125rem 0 var(--side),.375rem .375rem 0 var(--side),.4375rem .4375rem 0 var(--side),.875rem 1.375rem 1.375rem -.625rem var(--glow)}
.ico3d::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(150deg,rgba(255,255,255,.52),rgba(255,255,255,0) 46%)}
.ico3d svg{position:relative;z-index:1;filter:drop-shadow(0 2px 1px rgba(0,0,0,.28))}
.ico3d svg rect,.ico3d svg circle,.ico3d svg ellipse,.ico3d svg polygon{fill:rgba(255,255,255,.26)}
.tilt:hover .ico3d,.step:hover .ico3d,.ico3d:hover{transform:perspective(20rem) rotateX(0) rotateY(0) translate(-.1875rem,-.25rem);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -.4375rem .625rem -.375rem rgba(0,0,0,.28),1px 1px 0 var(--side),2px 2px 0 var(--side),.1875rem .1875rem 0 var(--side),.25rem .25rem 0 var(--side),.3125rem .3125rem 0 var(--side),.375rem .375rem 0 var(--side),.4375rem .4375rem 0 var(--side),.5rem .5rem 0 var(--side),.5625rem .5625rem 0 var(--side),1.125rem 1.75rem 1.5rem -.625rem var(--glow)}
.ico3d.rose{--side:#9f1239;--glow:rgba(244,63,94,.6);background:linear-gradient(145deg,#fb7f93,#be123c)}
.ico3d.gold{--side:#b45309;--glow:rgba(245,158,11,.6);background:linear-gradient(145deg,#fcd34d,#d97706)}
.ico3d.sky{--side:#1553a8;--glow:rgba(47,127,240,.6);background:linear-gradient(145deg,#6db0ff,#1d66c9)}
.ico3d.vio{--side:#5b21b6;--glow:rgba(139,92,246,.6);background:linear-gradient(145deg,#b79dfb,#6d28d9)}
.ico3d.green{--side:#0b6b3f;--glow:rgba(16,185,129,.6);background:linear-gradient(145deg,#4ade9f,#0f8a4f)}

/* ───────── hero ───────── */
.hero{position:relative;padding:8.625rem 0 4rem;overflow:hidden}
#rain{display:none}
.floor{position:absolute;left:-30%;right:-30%;bottom:-12.5rem;height:26.25rem;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(223,32,48,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(223,32,48,.2) 1px,transparent 1px);background-size:4rem 4rem;transform:perspective(35rem) rotateX(64deg);-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,transparent 96%);mask-image:linear-gradient(180deg,transparent,#000 40%,transparent 96%);animation:floor 5s linear infinite}
@keyframes floor{to{background-position:0 4rem,0 0}}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:2.5rem;align-items:center}
.hero h1{margin:1.375rem 0 1.125rem;font:700 clamp(2.5rem,calc(4.9vw*var(--k)),4.125rem)/1.02 var(--display);letter-spacing:0;color:var(--ink)}
.hero h1 em{font-style:normal;white-space:nowrap;color:var(--brand);text-shadow:0 .625rem 1.875rem rgba(223,32,48,.25)}
.hero .lead{max-width:34.0625rem;margin:0;font-size:calc(17.5*var(--f));color:var(--muted)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.875rem 0 1.5rem}
.ticks{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:calc(13.5*var(--f));font-weight:600;color:var(--muted)}
.ticks span{display:inline-flex;align-items:center;gap:.4375rem}
.ticks svg{color:var(--ok);flex:none}

.hero-art{position:relative;height:33.75rem;perspective:93.75rem}
.hero-art .stage{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .3s ease-out}
.win3d{position:absolute;right:0;top:1.875rem;width:min(27.5rem,78%);transform:rotateY(-15deg) rotateX(7deg);transform-style:preserve-3d;animation:bob 7s ease-in-out infinite}
.win3d .term{box-shadow:0 .375rem 0 #0c0608,0 3.75rem 5.625rem -2.125rem rgba(110,24,38,.75),0 0 4.375rem -1.375rem rgba(223,32,48,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.win3d .term pre{min-height:15.625rem;font-size:calc(12.6*var(--f));line-height:1.85;overflow:hidden}
.win3d .resp{position:absolute;right:-.875rem;bottom:-11rem;width:86%;transform:translateZ(4.375rem);animation:bob 7s ease-in-out -2.5s infinite}
.win3d .resp .term pre{min-height:0;font-size:max(9.5px,calc(11.6*var(--f)));padding:.75rem .875rem}
@keyframes bob{50%{translate:0 -.625rem}}

.phone{position:absolute;left:-.375rem;bottom:0;width:14.25rem;padding:.875rem .875rem 1rem;border-radius:1.875rem;color:#231a1e;background:linear-gradient(180deg,#ffffff,#fbf3f4);border:1px solid #f0dfe2;border-bottom:.4375rem solid #dcc6cb;box-shadow:0 2.875rem 4.375rem -1.75rem rgba(110,24,38,.6),0 0 0 .375rem rgba(255,255,255,.6),inset 0 1px 0 #fff;transform:translateZ(9.375rem) rotateY(11deg) rotateX(4deg);animation:bob 6s ease-in-out -1.2s infinite}
.phone::before{content:"";position:absolute;left:50%;top:.4375rem;width:4rem;height:.3125rem;margin-left:-2rem;border-radius:.5625rem;background:#e8d6da}
.ph-h{display:flex;align-items:center;gap:.5625rem;margin-top:.625rem}
.ph-h .lg{width:2.125rem;height:2.125rem;border-radius:.6875rem;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#ff5a69,#c8182b);box-shadow:inset 0 -.1875rem 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.4)}
.ph-h .lg svg{width:1.0625rem;height:1.0625rem}
.ph-h b{display:block;font:700 calc(14*var(--f)) var(--display);color:#231a1e;line-height:1.2}
.ph-h span{font-size:max(9.5px,calc(10.5*var(--f)));color:#7c6c72}
.ph-amt{margin:.75rem 0 .5625rem;text-align:center;font:700 1.875rem var(--display);color:#231a1e}
.ph-amt small{font-size:calc(16*var(--f));color:#7c6c72;font-weight:700}
.ph-qr{position:relative;padding:.4375rem;border-radius:.9375rem;background:#fff;border:2px solid #df2030;overflow:hidden}
.ph-qr svg{display:block;width:100%;height:auto;border-radius:.375rem}
.ph-mark{position:absolute;left:50%;top:50%;width:15.4%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:26%;overflow:hidden;color:#fff;background:linear-gradient(145deg,#ff5a69,#c8182b);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.2)}
.ph-mark svg{width:62%;height:62%;border-radius:0}
.ph-mark.own{background:#fff;box-shadow:none}
.ph-mark.own img{width:100%;height:100%;object-fit:contain}
.ph-keys{display:grid;grid-template-columns:repeat(5,1fr);gap:.3125rem;margin-top:.625rem;justify-items:center}
.ph-keys span{position:relative;display:block;width:1.6875rem;height:1.6875rem;border-radius:.5rem;overflow:hidden;background:#fff;box-shadow:0 .1875rem 0 var(--d,#cfc3c7),0 .4375rem .5rem -.3125rem rgba(40,10,18,.5)}
.ph-keys img{display:block;width:100%;height:100%;object-fit:cover}
.ph-qr::after{content:"";position:absolute;left:0;right:0;top:0;height:34%;background:linear-gradient(180deg,rgba(223,32,48,0),rgba(223,32,48,.28));border-bottom:2px solid #df2030;animation:scan 2.6s ease-in-out infinite}
@keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(300%)}}
.ph-st{position:relative;height:2.5rem;margin-top:.6875rem}
.ph-st>div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.75rem;font-weight:700;font-size:calc(12*var(--f))}
.ph-st .w{color:#92400e;background:#fffbeb;border:1px solid #fde68a;animation:stW 7s infinite}
.ph-st .d{color:#fff;background:linear-gradient(180deg,#22c58b,#0f8a4f);box-shadow:inset 0 -.1875rem 0 rgba(0,0,0,.18),0 .625rem 1.125rem -.5rem rgba(5,150,105,.8);opacity:0;animation:stD 7s infinite}
.ph-st .w i{width:.375rem;height:.375rem;border-radius:50%;background:#d97706;animation:sitePulse 1s infinite}
@keyframes stW{0%,52%{opacity:1}58%,96%{opacity:0}100%{opacity:1}}
@keyframes stD{0%,52%{opacity:0;transform:scale(.94)}58%,96%{opacity:1;transform:none}100%{opacity:0}}

.chip3d{position:absolute;display:flex;align-items:center;gap:.5625rem;padding:.625rem .875rem .625rem .6875rem;border-radius:1rem;font-size:calc(12.5*var(--f));color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-bottom:.25rem solid var(--edge-2);box-shadow:0 1.375rem 2.25rem -1.125rem rgba(110,24,38,.6)}
.chip3d b{display:block;font:700 calc(15*var(--f)) var(--display);color:var(--ink)}
.chip3d span.s{display:block;font-size:max(9.5px,calc(11*var(--f)));color:var(--muted)}
.chip3d .dot{width:2rem;height:2rem;border-radius:.6875rem;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#34d399,#0f8a4f);box-shadow:inset 0 -.1875rem 0 rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.4)}
.chip3d.a{left:10%;top:-1%;transform:translateZ(6.875rem);animation:bob 5.5s ease-in-out infinite}
.chip3d.b{right:-3%;top:40%;transform:translateZ(10.625rem);animation:bob 6.5s ease-in-out -2s infinite}
.chip3d.b .dot{background:linear-gradient(145deg,#ff5a69,#c8182b)}
.chip3d.c{left:40%;bottom:-6%;transform:translateZ(3.75rem);animation:bob 7.5s ease-in-out -3s infinite}
.chip3d.c .dot{background:linear-gradient(145deg,#5aa2ff,#1d66c9)}

/* ───────── strip ───────── */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.875rem;margin-top:4rem}
.strip .glass{padding:1.25rem 1.375rem}
.strip b{display:block;font:700 2.25rem/1.05 var(--display);color:var(--ink)}
.strip b small{font-size:calc(19*var(--f));color:var(--brand)}
.strip span{font-size:calc(13.5*var(--f));color:var(--muted)}

/* ───────── pay methods ───────── */
.pay-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.625rem .75rem;margin-top:1.625rem}
.pay-row .cap{flex:1 1 100%;text-align:center;font:700 max(9.5px,calc(11.5*var(--f))) var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.pay-row .upi{display:flex;flex-direction:column;align-items:center;gap:.4375rem;width:3.875rem;font-size:max(9.5px,calc(11*var(--f)));font-weight:600;color:var(--muted);line-height:1.15;text-align:center}
.pay-row .upi i{position:relative;display:block;width:3.125rem;height:3.125rem;border-radius:.9375rem;overflow:hidden;background:#fff;box-shadow:0 .3125rem 0 var(--d,#cfc3c7),0 .875rem 1rem -.5625rem rgba(40,10,18,.55),0 0 0 1px rgba(60,20,28,.07);transition:transform .15s,box-shadow .15s}
.pay-row .upi i img{display:block;width:100%;height:100%;object-fit:cover}
.pay-row .upi i::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(155deg,rgba(255,255,255,.44),rgba(255,255,255,0) 44%,rgba(0,0,0,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.pay-row .upi:hover i{transform:translateY(-.1875rem)}
.pay-row .upi:active i{transform:translateY(.25rem);box-shadow:0 1px 0 var(--d,#cfc3c7),0 .25rem .375rem -.1875rem rgba(40,10,18,.5),0 0 0 1px rgba(60,20,28,.07)}
.pay-row .upi.more i{display:grid;place-items:center;background:var(--grad);font:700 calc(17*var(--f)) var(--display);font-style:normal;color:#fff;--d:var(--brand-dd)}
[data-theme="dark"] .pay-row .upi i{box-shadow:0 .3125rem 0 color-mix(in srgb,var(--d,#cfc3c7) 55%,#000),0 .875rem 1.125rem -.5625rem #000,0 0 0 1px rgba(255,255,255,.12)}

/* ───────── how it works ───────── */
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;counter-reset:how}
.how{padding:1.625rem 1.625rem 1.75rem;overflow:hidden}
.how::after{counter-increment:how;content:"0" counter(how);position:absolute;right:1rem;top:.25rem;font:700 5.75rem/1 var(--display);color:transparent;-webkit-text-stroke:1.5px rgba(223,32,48,.2);pointer-events:none}
.how h3{margin:1.25rem 0 .5rem;font:700 1.375rem var(--display);color:var(--ink)}
.how p{margin:0;font-size:calc(14.5*var(--f));color:var(--muted)}
.how .mini{margin-top:1.125rem;padding:.6875rem .8125rem;border-radius:.8125rem;font:500 calc(12*var(--f))/1.6 var(--mono);color:#ffb3bd;background:#190d11;border:1px solid #3a1f27;border-bottom:.1875rem solid #0c0608;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.how .mini i{font-style:normal;color:#8f727a}

/* pipeline */
.pipe{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.375rem;padding:1.625rem 1.5rem}
.pipe::before{opacity:1!important;content:"";position:absolute;left:8%;right:8%;top:3.25rem;height:2px;border-radius:0;background:repeating-linear-gradient(90deg,rgba(223,32,48,.45) 0 .5rem,transparent .5rem 1rem)}
.pipe::after{content:"";position:absolute;left:8%;top:2.9375rem;width:.75rem;height:.75rem;border-radius:50%;background:var(--brand);box-shadow:0 0 0 .3125rem rgba(223,32,48,.18),0 0 1.375rem .375rem rgba(223,32,48,.45);animation:travel 4.5s linear infinite}
@keyframes travel{0%{left:8%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:calc(92% - .75rem);opacity:0}}
.pipe div{position:relative;text-align:center}
.pipe .n{position:relative;z-index:1;width:3.375rem;height:3.375rem;margin:0 auto .75rem;border-radius:1.0625rem;display:grid;place-items:center;color:var(--brand);background:var(--surface);border:1px solid var(--bad-line);border-bottom:.25rem solid var(--edge-2);box-shadow:0 .75rem 1.375rem -.75rem rgba(223,32,48,.5)}
.pipe b{display:block;font:700 calc(16.5*var(--f)) var(--display);color:var(--ink)}
.pipe span{display:block;margin-top:.1875rem;font-size:calc(12.5*var(--f));color:var(--muted)}
.pipe em{display:inline-block;margin-top:.5rem;padding:2px .625rem;border-radius:62.4375rem;font:600 max(9.5px,calc(11*var(--f))) var(--mono);font-style:normal;color:var(--brand-d);background:var(--brand-soft);border:1px solid var(--bad-line)}
[data-theme="dark"] .pipe em{color:var(--label)}

/* ───────── features ───────── */
.feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.125rem}
.feat{padding:1.625rem;overflow:hidden}
.feat h3{margin:1.25rem 0 .5rem;font:700 calc(21*var(--f)) var(--display);color:var(--ink)}
.feat p{margin:0;font-size:calc(14.5*var(--f));color:var(--muted)}
.feat.wide{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:center}
.feat .tags{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.875rem}
.feat .tags span{padding:.1875rem .5625rem;border-radius:.5rem;font:500 max(9.5px,calc(11.5*var(--f))) var(--mono);color:var(--brand-d);background:var(--brand-soft);border:1px solid var(--bad-line)}
[data-theme="dark"] .feat .tags span{color:var(--label)}
.site .tilt{transition:transform .2s ease-out,box-shadow .25s}
.site .tilt:hover{box-shadow:var(--sh-3)}
.site .tilt .glare{background:radial-gradient(26.25rem circle at var(--gx,50%) var(--gy,0%),rgba(223,32,48,.1),transparent 45%)}

/* ───────── API ───────── */
.api-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:2.75rem;align-items:center}
.api-grid .h2{margin-top:1rem}
.api-list{list-style:none;margin:1.375rem 0 1.625rem;padding:0;display:grid;gap:.75rem}
.api-list li{display:flex;gap:.75rem;align-items:flex-start;font-size:calc(15*var(--f))}
.api-list svg{flex:none;margin-top:.1875rem;color:var(--ok)}
.api-list b{color:var(--ink)}
.ep{display:flex;align-items:center;gap:.625rem;padding:.625rem .75rem;border-radius:.875rem;font:500 calc(13*var(--f)) var(--mono);color:#f2dfe2;background:#190d11;border:1px solid #3a1f27;border-bottom:.1875rem solid #0c0608}
.ep+.ep{margin-top:.5rem}
.ep .m{flex:none;padding:.1875rem .5rem;border-radius:.4375rem;font-weight:700;font-size:max(9.5px,calc(11*var(--f)));color:#fff;background:var(--brand)}
.ep .m.get{background:var(--accent)}
.ep code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:0;padding:0;color:inherit;font:inherit}
.api-stack{position:relative}
.api-stack .term+.term{margin-top:1rem}

/* ───────── pricing ───────── */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16.875rem,1fr));gap:1.25rem;max-width:65rem;margin:0 auto}
.pcard{padding:1.75rem 1.625rem;display:flex;flex-direction:column;overflow:hidden}
.pcard h3{margin:0;font:700 calc(21*var(--f)) var(--display);color:var(--ink)}
.pcard .pr{margin:.875rem 0 .25rem;font:700 3.25rem/1 var(--display);color:var(--ink)}
.pcard .pr small{font:600 calc(14*var(--f)) var(--font);letter-spacing:0;color:var(--muted)}
.pcard .lim{font-size:calc(13*var(--f));color:var(--muted);line-height:1.5}
.pcard .alt{display:flex;align-items:center;gap:.5rem;margin:2px 0 .5rem;font-size:calc(13.5*var(--f));color:var(--ink-2)}
.pcard .alt svg{width:1.25rem;height:.8125rem;border-radius:.1875rem;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.pcard .alt b{font-family:var(--display);font-size:calc(16*var(--f))}
.pcard.hot .alt{color:rgba(255,255,255,.92)}
.pay-ways{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem .875rem;margin-top:1.625rem}
.pay-ways .lbl{font:700 calc(12*var(--f)) var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pay-ways .way{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem .625rem;max-width:100%;padding:.5625rem .875rem;border-radius:1rem;background:#fff;border:1px solid var(--line);border-bottom:.1875rem solid var(--line-2);box-shadow:0 .625rem 1.375rem -1rem rgba(60,20,30,.5)}
.pay-ways .way img{height:1.375rem;width:auto;max-width:4rem;object-fit:contain}
.pay-ways .fl svg{display:block;width:1.375rem;height:.875rem;border-radius:.1875rem;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.ph-h .lg.own{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06);overflow:hidden}
.ph-h .lg.own img{width:100%;height:100%;object-fit:contain}
.pcard ul{list-style:none;margin:1.25rem 0 1.5rem;padding:1.25rem 0 0;border-top:1px dashed var(--line-2);display:grid;align-content:start;gap:.625rem;flex:1}
.pcard li{display:flex;gap:.625rem;align-items:flex-start;font-size:calc(14.5*var(--f));color:var(--ink-2)}
.pcard li svg{flex:none;margin-top:.1875rem;color:var(--ok)}
.pcard .tag{position:absolute;right:1.125rem;top:1.125rem;padding:.25rem .6875rem;border-radius:62.4375rem;font:700 max(9.5px,calc(11*var(--f))) var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-d);background:#fff;box-shadow:0 .375rem .875rem -.375rem rgba(0,0,0,.4)}
.pcard.hot{border-color:transparent;border-bottom-color:var(--brand-dd);background:var(--grad);box-shadow:0 2.125rem 3.75rem -1.875rem rgba(223,32,48,.8),inset 0 1px 0 rgba(255,255,255,.3)}
.pcard.hot::before{display:none}
.pcard.hot::after{content:"";position:absolute;right:-4.375rem;top:-4.375rem;width:13.75rem;height:13.75rem;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.26),transparent 65%);pointer-events:none}
.pcard.hot h3,.pcard.hot .pr{color:#fff}
.pcard.hot .pr small,.pcard.hot .lim{color:rgba(255,255,255,.82)}
.pcard.hot ul{border-top-color:rgba(255,255,255,.3)}
.pcard.hot li{color:#fff}
.pcard.hot li svg{color:#fff}

/* ───────── FAQ ───────── */
.faq{max-width:51.25rem;margin:0 auto;display:grid;gap:.75rem}
.faq details{border-radius:1.125rem;background:var(--surface);border:1px solid var(--line);border-bottom:.25rem solid var(--edge);box-shadow:var(--sh-1);transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:var(--bad-line);border-bottom-color:var(--brand);box-shadow:var(--sh-2)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.125rem 1.375rem;cursor:pointer;list-style:none;font:700 calc(18.5*var(--f)) var(--display);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:1.875rem;height:1.875rem;border-radius:.625rem;display:grid;place-items:center;font:500 calc(20*var(--f))/1 var(--font);color:#fff;background:var(--grad);border-bottom:.1875rem solid var(--brand-dd);transition:transform .2s}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0;padding:0 1.375rem 1.25rem;font-size:calc(15*var(--f));color:var(--muted)}

/* ───────── developer + CTA ───────── */
.dev{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.375rem;align-items:center;padding:1.5rem 1.625rem}
.dev .av{width:4.125rem;height:4.125rem;border-radius:1.3125rem;display:grid;place-items:center;font:700 1.625rem var(--display);color:#fff;background:var(--grad);border-bottom:.3125rem solid var(--brand-dd);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),var(--glow)}
.dev b{display:block;font:700 calc(21*var(--f)) var(--display);color:var(--ink)}
.dev p{margin:.25rem 0 0;font-size:calc(14.5*var(--f));color:var(--muted)}
.cta{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:1.875rem;align-items:center;padding:3.25rem 3rem;border-radius:1.875rem;overflow:hidden;color:#fff;background:radial-gradient(32.5rem 18.75rem at 88% 10%,rgba(255,255,255,.2),transparent 62%),linear-gradient(125deg,#e62a3c 0%,#c8182b 55%,#9f1020 100%);border-bottom:.5rem solid var(--brand-dd);box-shadow:0 2.75rem 5rem -2.25rem rgba(223,32,48,.85),inset 0 1px 0 rgba(255,255,255,.3)}
.cta::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1.4px);background-size:1.375rem 1.375rem;-webkit-mask-image:linear-gradient(120deg,transparent 30%,#000);mask-image:linear-gradient(120deg,transparent 30%,#000);pointer-events:none}
.cta>*{position:relative}
.cta h2{margin:0 0 .75rem;font:700 clamp(1.875rem,calc(3.8vw*var(--k)),2.875rem)/1.06 var(--display);color:#fff}
.cta p{margin:0 0 1.625rem;max-width:32.5rem;font-size:calc(16.5*var(--f));color:rgba(255,255,255,.88)}
.cta .scene{height:14.375rem;margin:0}
.cta .hero-cta{margin:0}

/* ───────── footer ───────── */
.foot{margin-top:2.5rem;padding:3.5rem 0 1.625rem;color:#c9aeb4;background:radial-gradient(43.75rem 20rem at 10% 0%,rgba(223,32,48,.25),transparent 62%),#17090c;border-top:.25rem solid var(--brand)}
.foot .brand,.foot .brand:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:2.125rem}
.foot-about p{max-width:20.625rem;margin:.875rem 0 0;font-size:calc(14*var(--f));color:#b99aa1}
.foot h4{margin:0 0 .875rem;font:700 calc(12.5*var(--f)) var(--display);letter-spacing:.2em;text-transform:uppercase;color:#ff9aa5}
.foot-grid>div:not(.foot-about) a{display:block;padding:.3125rem 0;font-size:calc(14.5*var(--f));color:#d9c2c7;text-decoration:none}
.foot-grid a:hover{color:#fff}
.foot-social{display:flex;gap:.5rem;margin-top:1.125rem}
.foot-social a{width:2.5rem;height:2.5rem;border-radius:.8125rem;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-bottom:.1875rem solid rgba(0,0,0,.4);transition:transform .15s,border-color .15s}
.foot-social a:hover{transform:translateY(-2px);border-color:rgba(255,116,130,.7)}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.625rem;margin-top:2.5rem;padding-top:1.375rem;border-top:1px solid rgba(255,255,255,.1);font-size:calc(13*var(--f));color:#a98b92}
.foot-bar b,.foot-bar b a{color:#ff9aa5;text-decoration:none}

/* ───────── docs ───────── */
.page-hero{padding:8rem 0 2.125rem}
.page-hero h1{margin:1rem 0 .625rem;font:700 clamp(2.25rem,calc(4.8vw*var(--k)),3.5rem)/1.04 var(--display);color:var(--ink)}
.page-hero h1 em{font-style:normal;color:var(--brand)}
.page-hero p{max-width:42.5rem;margin:0;font-size:calc(17*var(--f));color:var(--muted)}
.docs{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:2.75rem;align-items:start;padding-bottom:4.375rem}
.docs-nav{position:sticky;top:5.75rem;max-height:calc(100vh - 6.875rem);overflow-y:auto;padding:.875rem;border-radius:1.25rem;background:var(--surface);border:1px solid var(--line);border-bottom:.3125rem solid var(--edge);box-shadow:var(--sh-2)}
.docs-nav h5{margin:.75rem .625rem .375rem;font:700 max(9.5px,calc(11.5*var(--f))) var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--label)}
.docs-nav h5:first-child{margin-top:2px}
.docs-nav a{display:block;padding:.5rem .6875rem;border-radius:.6875rem;font-size:calc(14*var(--f));font-weight:600;color:var(--ink-2);text-decoration:none}
.docs-nav a:hover{color:var(--brand-d);background:var(--brand-soft)}
.docs-nav a.on{color:#fff;background:var(--grad);box-shadow:0 .1875rem 0 var(--brand-dd),var(--glow)}
.docs-body{min-width:0}
.docs-body section{padding:.375rem 0 2.75rem;scroll-margin-top:5.75rem}
.docs-body section+section{padding-top:2.75rem;border-top:1px dashed var(--line-2)}
.docs-body h2{margin:0 0 .75rem;font:700 2rem var(--display);color:var(--ink)}
.docs-body h3{margin:1.875rem 0 .625rem;font:700 calc(21*var(--f)) var(--display);color:var(--ink)}
.docs-body p{margin:0 0 .875rem}
.docs-body ul,.docs-body ol{margin:0 0 1rem;padding-left:1.375rem}
.docs-body li{margin-bottom:.375rem}
.docs-body b,.docs-body strong{color:var(--ink)}
.docs-body code,.prose code{padding:2px .375rem;border-radius:.4375rem;font:500 .88em var(--mono);color:var(--brand-d);background:var(--brand-soft);border:1px solid var(--bad-line)}
[data-theme="dark"] .docs-body code,[data-theme="dark"] .prose code{color:var(--label)}
.docs-body .term{margin:0 0 1.125rem}
.docs-body .term code{padding:0;background:none;border:0;color:inherit}
.docs-body .ep{margin-bottom:1rem;font-size:calc(14*var(--f))}
.docs-body .ep code{padding:0;background:none;border:0;color:#f2dfe2}
.ptable{width:100%;margin:0 0 1.125rem;border-collapse:separate;border-spacing:0;font-size:calc(14*var(--f));background:var(--surface);border:1px solid var(--line);border-bottom:.25rem solid var(--edge);border-radius:1rem;overflow:hidden}
.ptable th{padding:.6875rem .875rem;text-align:left;font:700 calc(12*var(--f)) var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--label);background:var(--brand-soft)}
.ptable td{padding:.6875rem .875rem;border-top:1px solid var(--line);vertical-align:top}
.ptable td:first-child{white-space:nowrap}
.ptable .req{margin-left:.375rem;font-size:max(9.5px,calc(10.5*var(--f)));font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand)}
.ptable .opt{margin-left:.375rem;font-size:max(9.5px,calc(10.5*var(--f)));font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.ptable-wrap{overflow-x:auto}
.callout{display:flex;gap:.75rem;margin:0 0 1.125rem;padding:.875rem 1rem;border-radius:1rem;font-size:calc(14.5*var(--f));color:var(--ink-2);background:var(--info-bg);border:1px solid var(--info-line)}
.callout.warn{background:var(--warn-bg);border-color:var(--warn-line)}
.callout svg{flex:none;margin-top:2px;color:var(--info)}
.callout.warn svg{color:var(--warn)}
.callout p{margin:0}
.docs-hero{padding-bottom:1.625rem}
.docs-hero p b{color:var(--ink)}
.docs-cta{display:flex;flex-wrap:wrap;gap:.625rem;margin:1.375rem 0 1.125rem}
.docs-base{max-width:35rem}
.docs-body .lead{font-size:calc(17*var(--f));color:var(--muted);margin-bottom:1.375rem}
.docs-body h2 .badge{vertical-align:middle;margin-left:.375rem;font-size:max(9.5px,calc(11*var(--f)))}
.step{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:1rem;margin:0 0 1.625rem}
.step-n{position:relative;display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:1.0625rem;font:700 1.5rem var(--display);color:#fff;background:var(--grad);border-bottom:.25rem solid var(--brand-dd);box-shadow:var(--glow)}
.step-n::after{content:"";position:absolute;left:50%;top:4rem;bottom:-624.9375rem;width:2px;margin-left:-1px;background:repeating-linear-gradient(var(--line-2) 0 .375rem,transparent .375rem .75rem);pointer-events:none}
.step{position:relative;overflow:hidden}
.step:last-of-type .step-n::after{display:none}
.step-b{min-width:0;padding:1.125rem 1.25rem .375rem;border-radius:1.375rem;background:var(--surface);border:1px solid var(--line);border-bottom:.3125rem solid var(--edge);box-shadow:var(--sh-2)}
.docs-body .step-b h3{margin:0 0 .375rem;font-size:1.4375rem}
.step-b h3 .tag{display:inline-block;vertical-align:middle;margin-left:.5rem;padding:.1875rem .625rem;border-radius:62.4375rem;font:700 max(9.5px,calc(11*var(--f))) var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-d);background:var(--brand-soft);border:1px solid var(--bad-line)}
[data-theme="dark"] .step-b h3 .tag{color:var(--label)}
.step-b .after{font-size:calc(14.5*var(--f));color:var(--muted)}
.way-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.625rem;margin:.5rem 0 1rem}
.way-tabs button{display:flex;align-items:center;gap:.625rem;min-width:0;padding:.6875rem .8125rem;border-radius:1rem;text-align:left;font-family:var(--font);color:var(--ink-2);background:var(--surface-2);border:1.5px solid var(--line-2);border-bottom:.25rem solid var(--edge-2);cursor:pointer;transition:transform .12s,border-color .15s,background .15s}
.way-tabs button svg{flex:none;color:var(--brand)}
.way-tabs button span{min-width:0}
.way-tabs button b{display:block;font-size:calc(14.5*var(--f));color:var(--ink)}
.way-tabs button small{display:block;font-size:calc(12*var(--f));color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.way-tabs button:hover{border-color:var(--bad-line)}
.way-tabs button:active{transform:translateY(2px);border-bottom-width:2px}
.way-tabs button.on{color:#fff;background:var(--grad);border-color:transparent;border-bottom-color:var(--brand-dd);box-shadow:var(--glow)}
.way-tabs button.on b,.way-tabs button.on small,.way-tabs button.on svg{color:#fff}
.ways.js .way{display:none}
.ways.js .way.on{display:block;animation:wayIn .22s ease}
.ways:not(.js) .way+.way{margin-top:1.375rem;padding-top:1.125rem;border-top:1px dashed var(--line-2)}
@keyframes wayIn{from{opacity:0;transform:translateY(.375rem)}to{opacity:1;transform:none}}
.way p .badge{margin-right:.375rem;vertical-align:middle}
.pick-h{margin:1.125rem 0 .5625rem;font:700 calc(12*var(--f)) var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--label)}
.small-note{font-size:calc(13.5*var(--f));color:var(--muted)}
.mono-link{font:500 calc(12.5*var(--f)) var(--mono);word-break:break-all}
.docs-body ul.checks{list-style:none;padding-left:0}
.docs-body ul.checks li{position:relative;margin-bottom:.5625rem;padding:.6875rem .875rem .6875rem 2.75rem;border-radius:.875rem;background:var(--surface);border:1px solid var(--line);border-bottom:.1875rem solid var(--edge)}
.docs-body ul.checks li::before{content:"";position:absolute;left:.875rem;top:.8125rem;width:1.125rem;height:1.125rem;border-radius:.375rem;background:var(--grad);box-shadow:var(--glow)}
.docs-body ul.checks li::after{content:"";position:absolute;left:1.25rem;top:1rem;width:.3125rem;height:.5625rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.docs-body .term pre{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:1060px){
  .docs .docs-nav{display:flex;flex-wrap:nowrap;gap:.375rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:.5625rem;position:sticky;top:4.5rem;z-index:5;border-radius:1rem}
  .docs .docs-nav::-webkit-scrollbar{display:none}
  .docs .docs-nav a{flex:none;white-space:nowrap}
  .docs-body section{scroll-margin-top:8.875rem}       /* 4.2.0: the strip of tabs sticks under the header here — a heading must land below both */
}
@media (max-width:620px){
  .page-hero.docs-hero{padding-top:6.5rem}
  .docs-cta .btn{flex:1 1 auto;justify-content:center}
  .step{grid-template-columns:minmax(0,1fr);gap:.625rem}
  .step-n{width:2.75rem;height:2.75rem;border-radius:.875rem;font-size:calc(21*var(--f))}
  .step-n::after{display:none}
  .step-b{padding:.9375rem .875rem .25rem;border-radius:1.125rem}
  .docs-body .step-b h3{font-size:calc(20*var(--f))}
  .step-b h3 .tag{margin:.375rem 0 0;display:table}
  .way-tabs{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .docs-body h2{font-size:1.6875rem}
  .docs-body .term pre{font-size:max(9.5px,calc(11.6*var(--f)))}
}
.stack-pick{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.stack-pick button{padding:.5625rem .9375rem;border-radius:.8125rem;font:700 calc(13.5*var(--f)) var(--font);color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);border-bottom:.1875rem solid var(--edge-2);cursor:pointer;transition:transform .1s}
.stack-pick button:hover{color:var(--brand-d);border-color:var(--bad-line)}
.stack-pick button:active{transform:translateY(2px);border-bottom-width:1px}
.stack-pick button.on{color:#fff;background:var(--grad);border-color:transparent;border-bottom-color:var(--brand-dd);box-shadow:var(--glow)}
.prompt-box .term pre{max-height:28.75rem;overflow:auto;white-space:pre-wrap;word-break:break-word}

/* 4.2.0 · master prompt (docs) */
.docs-body .mp-steps{list-style:none;counter-reset:mp;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:0 0 1.25rem;padding:0}
.docs-body .mp-steps li{counter-increment:mp;position:relative;margin:0;padding:.875rem .875rem .9375rem 3.375rem;border-radius:1rem;background:var(--surface);border:1px solid var(--line-2);border-bottom:.1875rem solid var(--edge-2);font-size:calc(13.5*var(--f));line-height:1.45;color:var(--muted)}
.mp-steps li::before{content:counter(mp);position:absolute;left:.875rem;top:.875rem;width:1.75rem;height:1.75rem;border-radius:.5625rem;display:grid;place-items:center;font:800 calc(14*var(--f)) var(--display);color:#fff;background:var(--grad);box-shadow:var(--glow)}
.mp-steps li b{display:block;font-size:calc(15*var(--f));color:var(--ink)}
.docs-body .mp-term{margin-bottom:.875rem;box-shadow:0 .3125rem 0 #0c0608,0 2.125rem 4.375rem -1.875rem rgba(223,32,48,.55),0 0 0 1px rgba(239,51,64,.28),inset 0 1px 0 rgba(255,255,255,.07)}
.mp-term .ttl{color:#ffb3bb;font-weight:700;letter-spacing:.02em}
.mp-term .mp-size{margin-left:auto;font-size:max(9.5px,calc(11*var(--f)));color:#8d6f77;white-space:nowrap}
.mp-term .mp-copy{flex:none;display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .8125rem;border-radius:.5625rem;border:0;background:var(--grad);color:#fff;font:700 calc(12*var(--f)) var(--font);cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.35);transition:transform .1s}
.mp-term .mp-copy:active{transform:translateY(1px)}
.mp-copy.done,.btn.done{background:#12a150!important;border-color:#0d7e3e!important;color:#fff!important}
.docs-body .mp-term pre{max-height:19.875rem;overflow:hidden;font-size:calc(12.3*var(--f));line-height:1.72;color:#ead5d9}
.docs-body .mp-term.open pre{max-height:min(72vh,47.5rem);overflow:auto;overscroll-behavior:contain}
.mp-term:not(.open)::after{content:"";position:absolute;left:0;right:0;bottom:2.75rem;height:6rem;background:linear-gradient(rgba(25,13,17,0),#190d11 88%);pointer-events:none}
.mp-more{display:flex;align-items:center;justify-content:center;gap:.5625rem;width:100%;height:2.75rem;border:0;border-top:1px solid rgba(255,255,255,.08);background:#22131a;color:#f3dfe3;font:700 calc(13*var(--f)) var(--font);cursor:pointer;position:relative;z-index:1}
.mp-more:hover{color:#fff;background:#2a161f}
.mp-more .b,.mp-term.open .mp-more .a{display:none}
.mp-term.open .mp-more .b{display:inline}
.mp-more::after{content:"";width:.4375rem;height:.4375rem;margin-top:-.25rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.mp-term.open .mp-more::after{margin-top:.25rem;transform:rotate(-135deg)}
.mp-act{display:flex;flex-wrap:wrap;gap:.625rem;margin:0 0 1.375rem}
.docs-body .mp-facts{list-style:none;display:grid;gap:.625rem;margin:0 0 1.375rem;padding:0}
.docs-body .mp-facts li{display:flex;gap:.625rem;align-items:flex-start;margin:0;font-size:calc(14.5*var(--f));line-height:1.5;color:var(--ink-2)}
.mp-facts svg{flex:none;margin-top:.1875rem;color:var(--ok,#12a150)}
@media (max-width:760px){
  .docs-body .mp-steps{grid-template-columns:1fr;gap:.5rem;margin-bottom:1rem}
  .docs-body .mp-steps li{padding:.6875rem .75rem .75rem 3.125rem;font-size:calc(13.5*var(--f))}
  .mp-steps li::before{left:.75rem;top:.625rem}
  .mp-steps li b{display:inline;margin-right:.3125rem;font-size:calc(14.5*var(--f))}
  .mp-term .mp-size{display:none}
  .mp-term .mp-copy{margin-left:auto}
  .docs-body .mp-term pre{font-size:max(9.5px,calc(11.4*var(--f)));max-height:16.875rem}
  .mp-act .btn{flex:1 1 40%;min-width:0;justify-content:center;padding-left:.625rem;padding-right:.625rem}
  .mp-act .btn-primary{flex-basis:100%}
}
.codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.625rem,1fr));gap:.625rem;margin:0 0 1.125rem}
.codes div{padding:.75rem .875rem;border-radius:.875rem;background:var(--surface);border:1px solid var(--line);border-bottom:.1875rem solid var(--edge);font-size:calc(13.5*var(--f))}
.codes b{display:inline-block;min-width:2.75rem;margin-right:.5rem;padding:2px .5rem;border-radius:.4375rem;text-align:center;font:700 calc(12.5*var(--f)) var(--mono);color:#fff;background:var(--ok)}
[data-theme="dark"] .codes b{color:#06210f}
.codes b.c4{background:#d97706;color:#fff}.codes b.c5{background:var(--brand);color:#fff}

/* ───────── demo ───────── */
.demo-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.625rem;align-items:start;padding-bottom:4.375rem}
.demo-card{padding:1.625rem}
.demo-card h3{margin:0 0 .25rem;font:700 1.375rem var(--display);color:var(--ink)}
.demo-card>p{margin:0 0 1.25rem;font-size:calc(14.5*var(--f));color:var(--muted)}
.demo-out{margin-top:1.125rem}
.result-ok{display:flex;gap:.75rem;align-items:flex-start;padding:.875rem 1rem;margin-bottom:.875rem;border-radius:1rem;color:var(--ink-2);background:var(--ok-bg);border:1px solid var(--ok-line)}
.result-ok svg{flex:none;color:var(--ok)}
.result-ok.bad{background:var(--bad-bg);border-color:var(--bad-line)}
.result-ok.bad svg{color:var(--bad)}

/* ───────── legal / prose ───────── */
.prose{max-width:50rem;margin:0 auto;padding:2.125rem 2.375rem 2.5rem}
.prose h2{margin:1.875rem 0 .625rem;font:700 1.5625rem var(--display);color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.375rem 0 .5rem;font:700 calc(19*var(--f)) var(--display);color:var(--ink)}
.prose p,.prose li{font-size:calc(15.5*var(--f));color:var(--ink-2)}
.prose ul{padding-left:1.375rem}

/* ───────── error page ───────── */
.err{min-height:100vh;display:grid;place-items:center;padding:7.5rem 1.25rem 3.75rem;text-align:center}
.err .big{font:700 clamp(7.5rem,calc(24vw*var(--k)),15rem)/.86 var(--display);color:transparent;-webkit-text-stroke:2px rgba(223,32,48,.55);text-shadow:0 1.375rem 3.75rem rgba(223,32,48,.3);animation:bob 5s ease-in-out infinite}
.err h1{margin:.625rem 0 .625rem;font:700 2.125rem var(--display);color:var(--ink)}
.err p{max-width:27.5rem;margin:0 auto 1.625rem;color:var(--muted)}

/* ───────── responsive ───────── */
@media (max-width:1060px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:1.625rem}
  .hero{padding-top:7.375rem}
  .hero-art{height:32.5rem;max-width:37.5rem;width:100%;margin:.625rem auto 0}
  .api-grid,.demo-grid{grid-template-columns:minmax(0,1fr)}
  .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .docs{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .docs-nav{position:static;max-height:none;display:flex;flex-wrap:wrap;gap:.25rem}
  .docs-nav h5{display:none}
  .docs-nav a{padding:.375rem .75rem;background:var(--surface-2);border:1px solid var(--line)}
  .docs-nav a.on{border-color:transparent}
}
@media (max-width:820px){
  .sec{padding:4.25rem 0}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how-grid{grid-template-columns:minmax(0,1fr)}
  .pipe{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.625rem}
  .pipe::before,.pipe::after{display:none}
  .feat.wide{grid-column:auto;grid-template-columns:minmax(0,1fr)}
  .cta{grid-template-columns:minmax(0,1fr);padding:2.375rem 1.625rem}
  .cta .scene{display:none}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-about{grid-column:1/-1}
  .dev{grid-template-columns:auto minmax(0,1fr)}
  .dev .btn{grid-column:1/-1}
  .prose{padding:1.625rem 1.25rem 1.875rem}
}
@media (max-width:620px){
  .feat-grid{grid-template-columns:minmax(0,1fr)}
  .hero h1{font-size:clamp(2.375rem,calc(11.5vw*var(--k)),3.125rem)}
  .hero .lead{font-size:calc(16*var(--f))}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .win3d{width:100%;top:0;transform:rotateY(-8deg) rotateX(5deg)}
  .win3d .term pre{font-size:max(9.5px,calc(11.2*var(--f)));min-height:16.875rem;padding:.8125rem .875rem}
  .win3d .resp{display:none}
  .phone{width:12.25rem;left:.5rem;bottom:0;padding:.75rem .75rem .875rem;transform:translateZ(7.5rem) rotateY(9deg) rotateX(3deg)}
  .ph-amt{font-size:1.5625rem;margin:.5625rem 0 .4375rem}
  .chip3d.a{display:none}
  .chip3d.b{right:0;top:22%;bottom:auto}
  .hero-art{height:31.25rem}
  .chip3d.c{display:none}
  .strip b{font-size:1.8125rem}
  .strip .glass{padding:1rem}
  .nav-in{height:4rem}
}
@media (prefers-reduced-motion:reduce){
  .floor,.win3d,.phone,.chip3d,.pipe::after,.ph-qr::after,.err .big,.eyebrow i{animation:none}
  .ph-st .w{animation:none;opacity:0}.ph-st .d{animation:none;opacity:1}
}
/* ── 4.2.0 · the setup video and the "talk to a person" card on the home page ── */
.vid-stage{position:relative;max-width:56.25rem;margin:0 auto}
.vid-stage::before{content:"";position:absolute;inset:-1.125rem;z-index:-1;border-radius:2.5rem;background:radial-gradient(60% 60% at 50% 40%,color-mix(in srgb,var(--brand) 26%,transparent),transparent 70%);filter:blur(.875rem)}
.vid-stage .vid{border-radius:1.625rem;box-shadow:var(--sh-3)}
/* 4.2.0 · live system status (home page) */
.status-card{padding:1.375rem 1.625rem .625rem;overflow:hidden}
.status-card::before{content:"";position:absolute;left:0;right:0;top:0;height:.25rem;background:linear-gradient(90deg,#22c55e,#86efac 55%,transparent)}
.status-h{display:flex;align-items:center;gap:1rem;margin-bottom:.5rem}
.status-h .grow{flex:1;min-width:0}
.status-h h3{margin:0 0 .1875rem;font:700 1.4375rem/1.15 var(--display)}
.status-h p{margin:0;font-size:calc(13*var(--f));color:var(--muted)}
.status-live{flex:none;display:inline-flex;align-items:center;gap:.5rem;padding:.4375rem .8125rem;border-radius:62.4375rem;font:700 calc(12*var(--f)) var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ok);background:var(--ok-bg);border:1px solid rgba(22,163,74,.28)}
.status-live i,.status-list em.ok i{flex:none;width:.5rem;height:.5rem;border-radius:50%;background:#22c55e;animation:pulse 1.8s infinite}
.status-list{list-style:none;margin:0;padding:0}
.status-list li{display:flex;align-items:center;gap:.875rem;padding:.8125rem 0;border-top:1px dashed var(--line-2)}
.status-list .grow{flex:1;min-width:0}
.status-list b{display:block;font-size:calc(14.5*var(--f));color:var(--ink)}
.status-list span{display:block;margin-top:1px;font-size:calc(12.5*var(--f));line-height:1.45;color:var(--muted)}
.status-list em{flex:none;display:inline-flex;align-items:center;gap:.4375rem;font-style:normal;font-weight:700;font-size:calc(13*var(--f));white-space:nowrap}
.status-list em.ok{padding:.3125rem .6875rem;border-radius:62.4375rem;color:var(--ok);background:var(--ok-bg)}
@media (max-width:560px){.status-card{padding:1.125rem 1.125rem .375rem}.status-h{align-items:flex-start;flex-direction:column;gap:.625rem}.status-h h3{font-size:calc(21*var(--f))}}
@media (prefers-reduced-motion:reduce){.status-live i,.status-list em.ok i{animation:none}}
.help-card{display:flex;align-items:center;gap:1.25rem;padding:1.5rem 1.625rem}
.help-card h3{margin:0 0 .3125rem;font:700 1.4375rem/1.15 var(--display)}
.help-card p{margin:0;font-size:calc(14*var(--f));line-height:1.6;color:var(--muted)}
.help-card .grow{flex:1;min-width:0}
.help-btns{display:flex;flex-wrap:wrap;gap:.625rem;flex:none}
@media (max-width:820px){.help-card{flex-direction:column;align-items:flex-start;padding:1.25rem}.help-btns{width:100%}.help-btns .btn{flex:1 1 8.75rem}}