/* Paid Up. Deep ink, cobalt, cool paper; green and red for status only. Manrope + JetBrains Mono (self-hosted, OFL). */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/Manrope-var.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/JetBrainsMono-var.woff2) format('woff2')}

@view-transition { navigation: auto; }

:root{
  --ink:#070A12;--ink-1:#0B0F1A;--ink-2:#10172A;--ink-3:#18213A;
  --line-d:rgba(255,255,255,.08);--line-d2:rgba(255,255,255,.15);
  --tx-d:#EAF0FA;--mu-d:#95A1B8;--mu-d2:#616C84;
  --paper:#F3F5F9;--paper-2:#E7EBF2;--card:#FFFFFF;
  --tx:#0A0F1C;--mu:#58637A;--line:#DEE3EB;--line-2:#CBD2DD;
  /* cobalt: the one accent */
  --ac:#2E6BFF;--ac-2:#1F55E6;--ac-3:#1640B8;--ac-ink:#FFFFFF;--ac-soft:rgba(46,107,255,.12);--ac-lt:#A9C4FF;
  /* status only: paid, live, void */
  --ok:#2BB673;--ok-2:#16804F;--ok-lt:#8FE3B8;--live:#5B8CFF;--red:#EF5B57;
  --grad:linear-gradient(92deg,#B5CCFF 0%,#6E98FF 45%,#2E6BFF 100%);
  --ease:cubic-bezier(.2,.7,.1,1);--out:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --font:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gut:24px;--maxw:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.55;font-weight:450;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
body.theme-dark{background:var(--ink);color:var(--tx-d)}
body.theme-light{background:var(--paper);color:var(--tx)}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
.mono,code{font-family:var(--mono);font-feature-settings:'zero' 0}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
[hidden]{display:none!important}
::selection{background:rgba(46,107,255,.3)}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:6px}

/* ---------- type ---------- */
.h-hero{font-size:clamp(44px,6.3vw,86px);line-height:.98;letter-spacing:-.048em;font-weight:800;margin:22px 0 22px;text-wrap:balance}
.h-xl{font-size:clamp(34px,4.4vw,60px);line-height:1.02;letter-spacing:-.042em;font-weight:800;margin:10px 0 18px;text-wrap:balance}
.lede{font-size:clamp(16px,1.35vw,19px);line-height:1.6;max-width:36em;margin:0 0 28px}
.theme-dark .lede,.hero .lede,.final .lede,.msg .lede{color:var(--mu-d)}
.theme-dark .lede b{color:var(--tx-d);font-weight:650}
.theme-light .lede,.story .lede,.create .lede{color:var(--mu)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac-3);margin:0;font-weight:500}
.eyebrow--d,.theme-dark .eyebrow:not(.create .eyebrow):not(.story .eyebrow){color:#86A8FF}
.grad,.grad-d{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad .w>span{background:var(--grad);background-size:220% 100%;background-position:calc(var(--i) * 18%) 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-d{background-image:linear-gradient(92deg,#1F55E6,#3D8BFF)}
.mute-d{color:var(--mu-d2)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em;margin-bottom:-.1em}
.w>span{display:inline-block;animation:wordIn 1s var(--out) both;animation-delay:calc(var(--i) * 65ms + 120ms)}
@keyframes wordIn{from{transform:translateY(108%) rotate(5deg);opacity:0}to{transform:none;opacity:1}}
.intro{animation:fadeUp 1s var(--out) both;animation-delay:calc(var(--d) * 80ms + 160ms)}
@keyframes fadeUp{from{transform:translateY(18px);opacity:0;filter:blur(6px)}to{transform:none;opacity:1;filter:none}}

/* scroll reveals: hidden only when the script is there to reveal them */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--out),transform .9s var(--out);transition-delay:var(--rd,0ms)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- CA bar ---------- */
.cabar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:7px var(--gut);background:#000;color:#fff;font-size:12.5px;border-bottom:1px solid var(--line-d);position:relative;z-index:60}
.cabar .sym{font-family:var(--mono);font-weight:600;color:var(--ac-lt)}
.cabar code{font-size:12px;color:#cfd8e3;overflow-wrap:anywhere;min-width:0}
.cabar button,.cabar a{font-size:12px;font-weight:650;padding:4px 10px;border-radius:7px;border:1px solid var(--line-d2);background:transparent;color:#fff;cursor:pointer;text-decoration:none}
.cabar .ca-buy{background:var(--ac);border-color:var(--ac);color:var(--ac-ink)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.top--dark{background:rgba(7,10,18,.72);border-bottom-color:var(--line-d)}
.top--light{background:rgba(243,245,249,.82);border-bottom-color:var(--line)}
.top-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.top .brand{view-transition-name:brand}
.brand .logo{width:30px;height:30px}
.brand .word{font-weight:800;font-size:18px;letter-spacing:-.03em}
.nav{display:flex;align-items:center;gap:6px}
.nav>a:not(.btn){text-decoration:none;font-size:14.5px;font-weight:550;padding:8px 12px;border-radius:9px;opacity:.78;transition:opacity .2s,background .2s}
.nav>a:not(.btn):hover,.nav>a[aria-current]{opacity:1}
.top--dark .nav>a:not(.btn):hover{background:rgba(255,255,255,.06)}
.top--light .nav>a:not(.btn):hover{background:rgba(0,0,0,.05)}

/* ---------- buttons ---------- */
.btn{--mx:0px;--my:0px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;border:1px solid transparent;font-weight:650;font-size:15px;letter-spacing:-.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transform:translate3d(var(--mx),var(--my),0);transition:transform .35s var(--out),background .25s,box-shadow .3s,border-color .25s,color .25s;-webkit-tap-highlight-color:transparent;position:relative}
.btn>span{display:inline-block;transform:translate3d(calc(var(--mx) * .35),calc(var(--my) * .35),0);transition:transform .35s var(--out)}
.btn:active{transform:translate3d(var(--mx),var(--my),0) scale(.97)}
.btn--em{background:linear-gradient(180deg,#4A80FF,#2A62F0);color:var(--ac-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 0 rgba(0,0,0,.2),0 8px 24px -8px rgba(46,107,255,.55)}
.btn--em:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 1px 0 rgba(0,0,0,.2),0 14px 38px -10px rgba(46,107,255,.8)}
.btn--ghost{background:transparent;border-color:color-mix(in srgb,currentColor 20%,transparent)}
.btn--ghost:hover{border-color:color-mix(in srgb,currentColor 42%,transparent);background:color-mix(in srgb,currentColor 5%,transparent)}
.btn--lg{height:54px;padding:0 26px;font-size:16px;border-radius:14px}
.btn--sm{height:34px;padding:0 12px;font-size:13.5px;border-radius:10px}
.btn--block{width:100%}
.btn[disabled]{opacity:.55;cursor:progress}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 0 rgba(46,107,255,.6);animation:ping 2s var(--ease) infinite;flex:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(46,107,255,.55)}80%,100%{box-shadow:0 0 0 9px rgba(46,107,255,0)}}

/* ---------- dark section backdrops ---------- */
.spot{position:relative;isolation:isolate}
.spot::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(600px circle at var(--sx,50%) var(--sy,-20%),rgba(46,107,255,.07),transparent 60%);opacity:var(--so,0);transition:opacity .5s}
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.grid-bg{position:absolute;inset:-1px;background-image:linear-gradient(var(--line-d) 1px,transparent 1px),linear-gradient(90deg,var(--line-d) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 60% 30%,#000 10%,transparent 75%);opacity:.55}
.aurora{position:absolute;width:1100px;height:800px;right:-260px;top:-360px;background:radial-gradient(closest-side,rgba(46,107,255,.26),transparent),radial-gradient(closest-side at 30% 70%,rgba(90,180,255,.16),transparent);filter:blur(30px);animation:drift 18s ease-in-out infinite alternate;will-change:transform}
.aurora--soft{opacity:.6}
@keyframes drift{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(-120px,60px,0) rotate(8deg)}}

/* ---------- hero ---------- */
.hero{padding:56px 0 0;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center;min-height:min(calc(100svh - 64px),760px);position:relative;z-index:1}
.chip{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 12px;border-radius:999px;border:1px solid var(--line-d2);background:rgba(255,255,255,.03);font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--mu-d);margin:0}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);font-size:12px;color:var(--mu-d)}
.trust li{display:flex;align-items:center;gap:8px}
.trust li::before{content:'';width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,var(--ac) 0 3px,rgba(46,107,255,.18) 3.5px)}

/* the hero visual */
.hero-visual{position:relative}
.hv{position:relative;width:100%;max-width:450px;margin-left:auto;aspect-ratio:440/560}
.hv-glow{position:absolute;inset:4% 5%;border-radius:24px;box-shadow:0 50px 100px -30px rgba(0,0,0,.8),0 30px 60px -40px rgba(46,107,255,.35),0 0 0 1px rgba(255,255,255,.06)}
.hv-svg{position:relative;width:100%;height:100%;overflow:visible;font-family:var(--font)}
.hv .paper{fill:#FBFCFE}
.hv .mono-bg{fill:#0A0F1C}
.hv .t-mono-i{font-size:12px;font-weight:800;fill:#A9C4FF;letter-spacing:.02em}
.hv .t-from{font-size:15px;font-weight:750;fill:#0A0F1C;letter-spacing:-.01em}
.hv .t-sub{font-size:11.5px;fill:#69738A;font-weight:500}
.hv .t-sub2{font-size:13px;fill:#58637A;font-weight:600}
.hv .t-kick{font-family:var(--mono);font-size:10px;letter-spacing:.18em;fill:#69738A}
.hv .t-id{font-family:var(--mono);font-size:12px;fill:#0A0F1C;font-weight:500}
.hv .t-title{font-size:22px;font-weight:800;fill:#0A0F1C;letter-spacing:-.025em}
.hv .t-row{font-size:13px;fill:#2A3346;font-weight:500}
.hv .t-num{font-family:var(--mono);font-size:13px;fill:#0A0F1C}
.hv .hair{stroke:#E3E7EE;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0}
.hv .t-total{font-family:var(--mono);font-size:27px;font-weight:600;fill:#0A0F1C;letter-spacing:-.02em}
.hv .t-tok{font-family:var(--mono);font-size:12px;fill:#69738A;font-weight:600}
.hv .hv-tile{fill:#fff;stroke:#E3E7EE}
.hv .qr-mods path{fill:#0A0F1C;transition:opacity .45s var(--out)}
.hv .qr-mods{transition:opacity .6s var(--out)}
.hv .hv-scan{opacity:0;fill:var(--ac);fill-opacity:.35}
.hv .seal-bg{fill:var(--ac)}
.hv .hv-qr.dim .qr-mods,html:not(.js) .hv .qr-mods{opacity:.1}
.hv .hv-pill{fill:#F1F4F8;stroke:#E3E7EE;transition:fill .4s,stroke .4s}
.hv .pill-dot{fill:#9AA4B5;transition:fill .3s}
.hv .t-pill{font-size:12.5px;font-weight:700;fill:#0A0F1C;opacity:0;transition:opacity .3s}
.hv [data-st="wait"] .st-wait,.hv [data-st="seen"] .st-seen,.hv [data-st="paid"] .st-paid{opacity:1}
.hv [data-st="seen"] .pill-dot{fill:var(--live)}
.hv [data-st="paid"] .pill-dot{fill:var(--ok)}
.hv [data-st="paid"] .hv-pill{fill:#E6F6EE;stroke:#BDE8D1}
.hv-seal .seal-in{transform-box:fill-box;transform-origin:center}
.seal-halo{fill:rgba(46,107,255,.16)}
.seal-ring{fill:none;stroke:#1F55E6;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0}
.seal-check{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.t-seal{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.2em;fill:#FFFFFF}
.burst{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* the hero timeline: hidden only when the script is there to play it */
.js .hv [data-s]:not(.hv-seal){opacity:0;transform:translateY(10px);transition:opacity .6s var(--out),transform .7s var(--out)}
.js .hv [data-s].on:not(.hv-seal){opacity:1;transform:none}
.js .hv .hv-row .hair{stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--out) .1s}
.js .hv .hv-row.on .hair{stroke-dashoffset:0}
.js .hv .qr-mods path:not(.on){opacity:0}
.js .hv .hv-qr.on .hv-scan{animation:scan 1.1s var(--ease) .1s 1 both}
@keyframes scan{0%{opacity:0;transform:translateY(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(90px)}}
.js .hv .hv-seal{opacity:0;transition:opacity .2s}
.js .hv .hv-seal.on{opacity:1}
.js .hv .hv-seal .seal-in{transform:scale(1.9) rotate(-14deg);opacity:0;transition:transform .7s var(--spring),opacity .25s}
.js .hv .hv-seal.on .seal-in{transform:none;opacity:1}
.js .hv .hv-seal .seal-ring{stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--out) .25s}
.js .hv .hv-seal.on .seal-ring{stroke-dashoffset:0}
.js .hv .hv-seal .seal-check{stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--out) .35s}
.js .hv .hv-seal.on .seal-check{stroke-dashoffset:0}
.hv .hv-card{transition:opacity .5s}
.hv.out [data-s],.hv.out .hv-card{opacity:0!important;transition:opacity .6s var(--ease)!important}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:0;background:linear-gradient(var(--line-d),var(--line-d)) top center/calc(100% - 2 * var(--gut)) 1px no-repeat;margin-top:56px;position:relative;z-index:1}
.stat{padding:28px 24px 34px 0}
.stat+.stat{padding-left:24px;border-left:1px solid var(--line-d)}
.stat-l{margin:0 0 6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mu-d)}
.stat-n{margin:0;font-family:var(--mono);font-size:clamp(30px,3.4vw,44px);font-weight:600;letter-spacing:-.03em;color:var(--tx-d);display:flex;align-items:baseline;gap:10px;line-height:1.1}
.stat-n small{font-size:12px;letter-spacing:.06em;color:var(--ac-lt);font-weight:500;text-transform:uppercase}
.stats-live{align-self:start;margin:30px 0 0;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu-d)}
.odo{display:inline-flex;font-variant-numeric:tabular-nums}
.odo .dg{display:inline-block;height:1.1em;overflow:hidden;position:relative}
.odo .dg>span{display:flex;flex-direction:column;transition:transform 1.2s var(--out);transition-delay:var(--dd,0ms)}
.odo .dg>span>i{font-style:normal;height:1.1em;line-height:1.1em}
.odo .sep{display:inline-block}

/* ---------- story (pinned, scrubbed) ---------- */
.story{background:var(--paper);color:var(--tx);position:relative}
.story-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start;padding:120px var(--gut) 90px}
.story-copy{position:sticky;top:120px}
.story .eyebrow{color:var(--ac-3)}
.story-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:6px}
.story-step{display:grid;grid-template-columns:44px 1fr;gap:6px;padding:16px 0;border-top:1px solid var(--line);transition:opacity .5s var(--out)}
.js .story-step:not(.on){opacity:.4}
.story-step h3,.slot-cap h3{margin:0 0 4px;font-size:20px;letter-spacing:-.025em;font-weight:750}
.story-step p,.slot-cap p{margin:0;color:var(--mu);font-size:15.5px;max-width:30em}
.story-n{font-family:var(--mono);font-size:12px;color:var(--ac-3);padding-top:6px;font-weight:600}
.story-rail{height:2px;background:var(--line);margin-top:18px;border-radius:2px;overflow:hidden}
.story-rail i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#1F55E6,#3D8BFF);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .2s linear}
.story-stage{display:grid}
.slot{min-height:min(64vh,580px);display:grid;align-content:center;padding:28px 0}
.slot-cap{display:none}
.js .slot .frame{transition:opacity .7s var(--out),transform .9s var(--out)}
.js .slot:not(.on) .frame{opacity:.55;transform:scale(.97)}
.frame{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 30px 60px -36px rgba(10,15,28,.35),0 1px 0 rgba(10,15,28,.04)}
.frame-k{margin:0 0 18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.ff{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:10px;display:grid;gap:2px;min-width:0}
.ff span,.ff.two span{font-size:11.5px;color:var(--mu);font-weight:600}
.ff b{font-weight:650;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:1.4em}
.ff b.mono{font-size:13.5px;font-weight:500}
.ff.two{grid-template-columns:1fr auto;gap:16px;align-items:end}
.ff.two>div{display:grid;gap:2px}
.tokseg{display:inline-flex;gap:2px;background:var(--paper-2);border-radius:8px;padding:2px}
.tokseg i{font-style:normal;font-size:12.5px;padding:3px 10px;border-radius:6px;color:var(--mu)}
.tokseg i.on{background:#fff;color:var(--tx);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.fbtn{margin-top:16px;height:46px;border-radius:12px;display:grid;place-items:center;font-weight:700;background:linear-gradient(180deg,#4A80FF,#2A62F0);color:var(--ac-ink)}
.linkchip{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;min-width:0}
.linkchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkchip em{font-style:normal;font-size:12px;font-weight:700;color:var(--ac-3);background:var(--ac-soft);padding:3px 9px;border-radius:999px}
.chat{display:grid;gap:8px;margin:18px 0;justify-items:end}
.bubble{background:#0A84FF;color:#fff;border-radius:18px 18px 4px 18px;padding:10px 14px;font-size:14px;max-width:80%}
.bubble.card-b{background:var(--paper);color:var(--tx);border:1px solid var(--line);display:grid;gap:2px;border-radius:14px;width:80%}
.bubble.card-b span{font-size:13px;color:var(--mu)}
.bubble.card-b i{font-style:normal;font-size:11px;color:var(--mu)}
.walletrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--mu)}
.walletrow b{font-weight:650;color:var(--tx);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12.5px}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:14.5px;font-weight:600;transition:background .4s,border-color .4s}
.checks i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;display:grid;place-items:center;transition:background .35s var(--out),border-color .35s}
.checks i::after{content:'';width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg) scale(.4);opacity:0;transition:transform .4s var(--spring),opacity .2s}
.checks li.hit,html:not(.js) .checks li{background:#EEF9F3;border-color:#C5EBD6}
.checks li.hit i,html:not(.js) .checks li i{background:var(--ok);border-color:var(--ok)}
.checks li.hit i::after,html:not(.js) .checks li i::after{opacity:1;transform:translateY(-1px) rotate(-45deg) scale(1)}
.paidrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;font-size:12.5px;color:var(--mu);flex-wrap:wrap}
.paidpill{font-family:var(--mono);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;background:var(--ok-2);color:#fff;padding:6px 12px;border-radius:999px;transition:transform .5s var(--spring),opacity .4s}

/* scroll-scrubbed parts: hidden only when the script is there to bring them in */
.f-share [data-at],.paidrow,.fbtn{transition:opacity .5s var(--out),transform .6s var(--out),box-shadow .5s}
.js .f-share [data-at]:not(.hit){opacity:0;transform:translateY(10px)}
.js .paidrow:not(.hit){opacity:0;transform:translateY(8px)}
.js .fbtn:not(.hit){opacity:.55}
.fbtn.hit{box-shadow:0 12px 30px -10px rgba(46,107,255,.7)}

/* ---------- features (dark bento) ---------- */
.features{padding:120px 0;background:var(--ink);position:relative}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.feat{--rx:0deg;--ry:0deg;position:relative;border-radius:22px;background:linear-gradient(180deg,var(--ink-2),var(--ink-1));border:1px solid var(--line-d);padding:28px;overflow:hidden;transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--out),border-color .3s;min-height:220px}
.js .feat.reveal.in{transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry))}
.feat:hover{border-color:var(--line-d2)}
.feat h3{margin:0 0 8px;font-size:20px;letter-spacing:-.025em;font-weight:750;position:relative;z-index:1}
.feat p{margin:0;color:var(--mu-d);font-size:15px;position:relative;z-index:1;max-width:32em}
.feat--wide{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.flow{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0;padding:12px 0 40px}
.node{border:1px solid var(--line-d2);border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.03);display:grid;font-size:13px;position:relative;z-index:1}
.node b{font-weight:700}
.node span{font-family:var(--mono);font-size:11px;color:var(--mu-d)}
.node--em{border-color:rgba(46,107,255,.45);background:rgba(46,107,255,.08)}
.node--em span{color:var(--ac-lt)}
.wire{height:2px;background:linear-gradient(90deg,var(--line-d2),rgba(46,107,255,.5));position:relative;margin:0 -1px}
.wire i{position:absolute;inset:0;animation:travel 2.6s var(--ease) infinite}
.wire i::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--ac);box-shadow:0 0 12px 2px rgba(46,107,255,.7)}
@keyframes travel{0%{transform:translateX(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(100%);opacity:0}}
.watch{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-family:var(--mono);font-size:11px;color:var(--mu-d);border:1px dashed var(--line-d2);border-radius:999px;padding:4px 10px;white-space:nowrap}
.toks{display:flex;gap:8px;margin-top:20px;position:relative;z-index:1}
.tk{font-family:var(--mono);font-weight:600;font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--line-d2)}
.tk-usdc{color:#7FB8FF;border-color:rgba(39,117,202,.5);background:rgba(39,117,202,.12)}
.tk-sol{color:#D6A8FF;border-color:rgba(153,69,255,.45);background:rgba(153,69,255,.12)}
.mini-checks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:6px;font-family:var(--mono);font-size:12px;color:var(--mu-d);position:relative;z-index:1}
.mini-checks li::before{content:'\2713';color:var(--ok);margin-right:8px}
.mini-rcp{margin-top:20px;border:1px solid var(--line-d2);border-radius:14px;padding:12px 14px;display:grid;gap:2px;max-width:220px;background:rgba(255,255,255,.03);position:relative;z-index:1}
.mini-rcp span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu-d)}
.mini-rcp b{font-size:16px;color:var(--tx-d)}
.mini-rcp i{font-style:normal;font-size:11px;color:var(--ac-lt)}
.mini-key{margin-top:20px;display:flex;align-items:center;gap:6px;position:relative;z-index:1}
.mini-key span{font-size:11px;color:var(--mu-d);margin-right:6px}
.mini-key i{width:9px;height:9px;border-radius:50%;background:var(--ac);opacity:.25;animation:keyDot 2.4s var(--ease) infinite}
.mini-key i:nth-child(3){animation-delay:.15s}.mini-key i:nth-child(4){animation-delay:.3s}.mini-key i:nth-child(5){animation-delay:.45s}.mini-key i:nth-child(6){animation-delay:.6s}.mini-key i:nth-child(7){animation-delay:.75s}
@keyframes keyDot{0%,100%{opacity:.25}30%{opacity:1}}
.feat.spot::after{background:radial-gradient(380px circle at var(--sx,50%) var(--sy,0%),rgba(46,107,255,.12),transparent 65%)}

/* ---------- create (paper) ---------- */
.create{background:var(--paper);color:var(--tx);padding:110px 0}
.create--page{padding:56px 0 96px}
.create-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.create .eyebrow{color:var(--ac-3)}
.form{display:grid;gap:16px;margin-top:8px}
.field{display:grid;gap:7px;min-width:0;margin:0;border:0;padding:0}
.field-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start}
.field label,.field legend,.items summary span{font-size:13.5px;font-weight:700;letter-spacing:-.005em;padding:0}
.field label small,.items summary small{font-weight:500;color:var(--mu);margin-left:6px;font-size:12.5px}
.form input,.form select,.form textarea{width:100%;height:48px;border-radius:12px;border:1px solid var(--line-2);background:#fff;padding:0 14px;font-size:15px;transition:border-color .2s,box-shadow .2s;outline:none;color:var(--tx)}
.form textarea{height:auto;padding:12px 14px;resize:vertical;min-height:72px;line-height:1.5}
.form input.mono{font-size:14px}
.form input::placeholder,.form textarea::placeholder{color:#9AA4B5}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--ac-2);box-shadow:0 0 0 4px rgba(46,107,255,.16)}
.form input[type=date]{min-width:170px}
.hint{margin:0;font-size:12.5px;color:var(--mu);min-height:0}
.hint:empty{display:none}
.field.bad input,.field.bad textarea,.items.bad .items-list input{border-color:var(--red);box-shadow:0 0 0 4px rgba(239,97,87,.12)}
.field.bad .hint,.items.bad .hint{color:#C7392F}
.field.good input{border-color:#A7DFC1}
.amount{position:relative}
.amount input{padding-right:70px;font-size:18px!important;font-weight:600;height:52px}
.amount-tok{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:13px;font-weight:600;color:var(--mu);pointer-events:none}
.amount input[readonly]{background:var(--paper-2)}
.seg-f legend{margin-bottom:7px}
.seg{display:grid;grid-template-columns:1fr 1fr}
.seg>label{display:block;position:relative;cursor:pointer}
.seg>label input{position:absolute;opacity:0;pointer-events:none}
.seg>label span{display:grid;place-items:center;height:52px;padding:0 18px;border:1px solid var(--line-2);background:#fff;font-weight:700;font-size:14px;font-family:var(--mono);transition:background .2s,color .2s,border-color .2s}
.seg>label:first-of-type span{border-radius:12px 0 0 12px;border-right:0}
.seg>label:last-of-type span{border-radius:0 12px 12px 0}
.seg>label input:checked+span{background:var(--tx);color:#fff;border-color:var(--tx)}
.seg>label input:focus-visible+span{box-shadow:0 0 0 4px rgba(46,107,255,.25)}
.items{border:1px solid var(--line-2);border-radius:14px;background:#fff}
.items summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;gap:6px}
.items summary::-webkit-details-marker{display:none}
.items summary::before{content:'+';font-family:var(--mono);font-weight:700;width:20px;height:20px;border-radius:6px;background:var(--paper-2);display:grid;place-items:center;font-size:13px;transition:transform .3s var(--out)}
.items[open] summary::before{transform:rotate(45deg)}
.items-in{padding:0 16px 16px;display:grid;gap:10px}
.items-head,.items-list li{display:grid;grid-template-columns:1fr 70px 120px 34px;gap:8px;align-items:center}
.items-head{font-size:11.5px;color:var(--mu);font-weight:600}
.items-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.items-list li{animation:rowIn .45s var(--out) both}
@keyframes rowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.items-list input{height:40px!important;font-size:14px!important;padding:0 10px!important}
.items-list .rm{width:34px;height:40px;border-radius:10px;border:1px solid var(--line-2);background:#fff;cursor:pointer;color:var(--mu);font-size:18px;line-height:1}
.items-list .rm:hover{color:var(--red);border-color:var(--red)}
.form-go{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.form-err{margin:0;color:#C7392F;font-weight:600;font-size:14px}
.fine{margin:0;font-size:12.5px;color:var(--mu)}
.theme-dark .fine{color:var(--mu-d)}
.create-preview{position:sticky;top:96px}
.preview-l{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.preview-card{--rx:0deg;--ry:0deg;transform:perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--out);view-transition-name:invoice}

/* ---------- the invoice card ---------- */
.inv{position:relative;background:#FBFCFE;color:var(--tx);border-radius:22px;padding:30px 30px 22px;box-shadow:0 40px 80px -40px rgba(10,15,28,.45),0 0 0 1px rgba(10,15,28,.06);overflow:hidden}
.theme-dark .inv{box-shadow:0 50px 100px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}
.inv-h{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:26px}
.inv-from{display:flex;gap:12px;align-items:center;min-width:0}
.inv-mono{width:40px;height:40px;border-radius:50%;background:#0A0F1C;color:#A9C4FF;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.inv-from-n{margin:0;font-weight:750;font-size:15.5px;letter-spacing:-.01em;overflow-wrap:anywhere}
.inv-from-s{margin:0;font-size:12px;color:var(--mu)}
.inv-id{text-align:right;flex:none}
.inv-kicker{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mu)}
.inv-no{margin:2px 0 0;font-family:var(--mono);font-size:13px;font-weight:500}
.inv-title{margin:0 0 6px;font-size:clamp(22px,2.2vw,27px);letter-spacing:-.03em;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.inv-desc{margin:0 0 4px;color:var(--mu);font-size:14.5px;white-space:pre-line;overflow-wrap:anywhere}
.inv-desc:empty{display:none}
.inv-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 22px;padding:0}
.inv-meta div{display:grid;gap:1px}
.inv-meta dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.inv-meta dd{margin:0;font-size:13.5px;font-weight:600}
.inv-items{width:100%;border-collapse:collapse;font-size:14px}
.inv-items th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mu);font-weight:500;text-align:left;padding:0 0 8px;border-bottom:1px solid var(--line)}
.inv-items td{padding:11px 0;border-bottom:1px solid var(--line);vertical-align:top}
.inv-items .d{padding-right:10px;overflow-wrap:anywhere}
.inv-items .q,.inv-items .u,.inv-items .a{text-align:right;font-family:var(--mono);font-size:13px;white-space:nowrap;padding-left:12px}
.inv-items th.q,.inv-items th.u,.inv-items th.a{text-align:right}
.inv-items .u{color:var(--mu)}
.inv-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:18px 0 4px}
.inv-total>span{font-weight:700;color:var(--mu);font-size:14px}
.inv-total b{font-family:var(--mono);font-size:clamp(24px,2.6vw,31px);font-weight:600;letter-spacing:-.025em;white-space:nowrap}
.inv-total .tok{font-size:13px;color:var(--mu);font-weight:600;letter-spacing:0}
.inv-f{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line-2);font-size:12px;color:var(--mu)}
.inv--preview .inv-items tr.row-new{animation:rowIn .45s var(--out) both}
.stamp{position:absolute;left:33%;bottom:64px;transform:rotate(-11deg);pointer-events:none}
.stamp span{display:block;font-family:var(--mono);font-weight:800;font-size:28px;letter-spacing:.2em;text-transform:uppercase;color:#1F55E6;border:3px solid #1F55E6;border-radius:10px;padding:4px 14px 4px 20px;box-shadow:inset 0 0 0 3px #FBFCFE,inset 0 0 0 5px #1F55E6;opacity:.9;mix-blend-mode:multiply}
.stamp.go span{animation:stampIn .7s var(--spring) both}
@keyframes stampIn{0%{transform:scale(2.4);opacity:0;filter:blur(4px)}60%{opacity:1;filter:none}100%{transform:scale(1);opacity:.9}}

/* ---------- invoice page ---------- */
.ivp{padding:28px 0 80px;min-height:calc(100svh - 64px);overflow:hidden}
.ivp>.wrap{position:relative;z-index:1}
.ivp-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:8px 0 22px;flex-wrap:wrap}
.crumbs{margin:0;font-size:12px;color:var(--mu-d);letter-spacing:.04em}
.crumbs a{text-decoration:none;color:var(--tx-d)}
.status-pill{margin:0;display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;border:1px solid var(--line-d2);font-weight:700;font-size:13.5px;background:rgba(255,255,255,.03);transition:background .5s,border-color .5s,color .5s}
.status-pill[data-status="open"] .dot{background:#C9D2DC;animation:pingw 2s var(--ease) infinite}
@keyframes pingw{0%{box-shadow:0 0 0 0 rgba(201,210,220,.5)}80%,100%{box-shadow:0 0 0 9px rgba(201,210,220,0)}}
.status-pill[data-status="detected"]{border-color:rgba(91,140,255,.5);color:#B9CCFF}
.status-pill[data-status="detected"] .dot{background:var(--live);animation:pinga 1s var(--ease) infinite}
@keyframes pinga{0%{box-shadow:0 0 0 0 rgba(91,140,255,.6)}80%,100%{box-shadow:0 0 0 9px rgba(91,140,255,0)}}
.status-pill[data-status="paid"]{border-color:rgba(43,182,115,.5);background:rgba(43,182,115,.12);color:var(--ok-lt)}
.status-pill[data-status="paid"] .dot{animation:none;background:var(--ok)}
.status-pill[data-status="void"] .dot,.status-pill[data-status="expired"] .dot{background:var(--red);animation:none}
.ivp-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:28px;align-items:start}
.ivp-card{--rx:0deg;--ry:0deg;transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--out);view-transition-name:invoice}
.ivp-card .inv{animation:cardIn 1s var(--out) both .05s}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
.pay{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid var(--line-d2);border-radius:24px;padding:26px;position:relative;animation:cardIn 1s var(--out) both .15s;box-shadow:0 40px 80px -50px rgba(0,0,0,.9)}
.pay-amt{padding-bottom:18px;border-bottom:1px solid var(--line-d);margin-bottom:20px}
.pay-l{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu-d)}
.pay-n{margin:6px 0 0;font-size:clamp(30px,3.4vw,42px);font-weight:600;letter-spacing:-.03em;line-height:1.1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pay-n .num{font-weight:600}
.tok{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:0;padding:3px 9px;border-radius:999px;border:1px solid var(--line-d2);color:var(--mu-d)}
.tok--usdc{color:#8EC2FF;border-color:rgba(39,117,202,.5)}
.tok--sol{color:#D9B2FF;border-color:rgba(153,69,255,.45)}
.pay-to{margin:6px 0 0;color:var(--mu-d);font-size:14px}
.pay-body{display:grid;position:relative}
.pay-body>*{grid-area:1/1}
.pay-qr{display:grid;gap:14px;justify-items:center;transition:opacity .5s var(--out),transform .6s var(--out),filter .5s}
.pay-qr.leaving{opacity:0;transform:scale(.9);filter:blur(8px)}
.qr-tile{display:block;position:relative;width:min(100%,280px);aspect-ratio:1;background:#fff;border-radius:20px;padding:22px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 20px 50px -20px rgba(46,107,255,.35);overflow:hidden}
.qr-tile .qr{width:100%;height:100%}
.qr-tile .qr path{fill:#070A12}
.js .qr-tile .qr path{animation:qrIn .5s var(--out) both;animation-delay:calc(var(--q,0) * 110ms + 250ms)}
.qr-tile .qr path[data-q="1"]{--q:1}.qr-tile .qr path[data-q="2"]{--q:2}.qr-tile .qr path[data-q="3"]{--q:3}.qr-tile .qr path[data-q="4"]{--q:4}
@keyframes qrIn{from{opacity:0}to{opacity:1}}
.qr-scan{position:absolute;left:0;right:0;top:0;height:40px;background:linear-gradient(180deg,rgba(46,107,255,0),rgba(46,107,255,.32),rgba(46,107,255,0));opacity:0;animation:qrScan 4.5s var(--ease) 1s infinite;pointer-events:none}
@keyframes qrScan{0%{transform:translateY(-40px);opacity:0}8%{opacity:1}30%{transform:translateY(272px);opacity:0}100%{transform:translateY(272px);opacity:0}}
.pay-copy{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pay-fine{margin:4px 0 0;font-size:12.5px;color:var(--mu-d);text-align:center;max-width:34em}
.pay-fine b{color:var(--tx-d);font-weight:600}
.pay-closed{padding:24px;border:1px dashed var(--line-d2);border-radius:16px;text-align:center;color:var(--mu-d)}
.closed-t{color:var(--tx-d);font-weight:700;font-size:17px;margin:0 0 4px}
.seal-wrap{position:relative;display:grid;place-items:center;padding:10px 0 4px;min-height:230px}
.seal{width:210px;height:210px;overflow:visible}
.seal .seal-bg{fill:var(--ac)}
.seal .seal-halo{fill:rgba(46,107,255,.14)}
.seal-wrap .burst{inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px)}
.seal-wrap.go .seal-halo{animation:halo 1.6s var(--out) both}
.seal-wrap.go .seal-bg{transform-box:fill-box;transform-origin:center;animation:sealIn .8s var(--spring) both .1s}
.seal-wrap.go .seal-ring{stroke-dashoffset:1;animation:draw 1.1s var(--out) forwards .25s}
.seal-wrap.go .seal-check{stroke-dashoffset:1;animation:draw .55s var(--out) forwards .55s}
.seal-wrap.go .t-seal{animation:fadeUp .6s var(--out) both .7s}
.seal .seal-ring{stroke:#6E98FF}
@keyframes sealIn{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
@keyframes halo{0%{transform:scale(.4);opacity:0}40%{opacity:1}100%{transform:scale(1);opacity:1}}
.seal-wrap.go .seal-halo{transform-box:fill-box;transform-origin:center}
@keyframes draw{to{stroke-dashoffset:0}}
.timeline{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--line-d);display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:28px 1fr;gap:12px;position:relative;padding-bottom:16px;opacity:.45;transition:opacity .5s}
.timeline li:last-child{padding-bottom:0}
.timeline li:not(:last-child)::before{content:'';position:absolute;left:13px;top:26px;bottom:2px;width:2px;background:var(--line-d2);border-radius:2px}
.timeline li:not(:last-child)::after{content:'';position:absolute;left:13px;top:26px;bottom:2px;width:2px;background:var(--ok);border-radius:2px;transform:scaleY(0);transform-origin:top;transition:transform .7s var(--out)}
.timeline li b{display:block;font-size:14.5px;font-weight:700}
.timeline li small{color:var(--mu-d);font-size:12.5px}
.tl-dot{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line-d2);display:grid;place-items:center;transition:border-color .4s,background .4s}
.tl-dot i{width:8px;height:8px;border-radius:50%;background:var(--mu-d2);transition:background .3s,transform .4s var(--spring)}
.timeline li.active{opacity:1}
.timeline li.active .tl-dot{border-color:var(--tx-d)}
.timeline li.active .tl-dot i{background:var(--tx-d);animation:pingw 1.6s var(--ease) infinite}
.timeline li[data-k="seen"].active .tl-dot{border-color:var(--live)}
.timeline li[data-k="seen"].active .tl-dot i{background:var(--live);animation:pinga 1s var(--ease) infinite}
.timeline li.done{opacity:1}
.timeline li.done .tl-dot{background:var(--ok);border-color:var(--ok)}
.timeline li.done .tl-dot i{width:10px;height:6px;border-radius:0;background:none;border:2px solid var(--ac-ink);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.timeline li.done:not(:last-child)::after{transform:scaleY(1)}
.pay-note{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:rgba(239,91,87,.1);border:1px solid rgba(239,91,87,.35);color:#FFB8B4;font-size:13.5px}
.receipt-rows{margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line-d);display:grid;gap:10px}
.receipt-rows div{display:flex;justify-content:space-between;gap:16px;font-size:13.5px}
.receipt-rows dt{color:var(--mu-d)}
.receipt-rows dd{margin:0;text-align:right;min-width:0;overflow-wrap:anywhere}
.receipt-rows a{color:#A9C4FF;text-decoration:none}
.receipt-rows a:hover{text-decoration:underline}
.receipt-rows.go div{animation:fadeUp .6s var(--out) both;animation-delay:calc(var(--r,0) * 90ms + 500ms)}
.receipt-rows div:nth-child(2){--r:1}.receipt-rows div:nth-child(3){--r:2}.receipt-rows div:nth-child(4){--r:3}
.pay-after{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.pay-after.go{animation:fadeUp .7s var(--out) both .9s}
.pay-after .btn{flex:1}
.ivp-fine{margin:28px 0 0;color:var(--mu-d2);font-size:12.5px;max-width:60em}
.owner-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 14px 12px 18px;border-radius:16px;background:rgba(46,107,255,.08);border:1px solid rgba(46,107,255,.3);margin:8px 0 6px;animation:fadeUp .7s var(--out) both}
.owner-bar p{margin:0;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mu-d)}
.owner-bar b{color:var(--tx-d)}
.owner-btns{display:flex;gap:8px;flex-wrap:wrap}
.ivp-grid[data-status="paid"] .ivp-card .inv{box-shadow:0 50px 100px -40px rgba(0,0,0,.85),0 0 0 1px rgba(46,107,255,.35),0 0 80px -20px rgba(46,107,255,.35);transition:box-shadow 1s}
.pay[data-status="paid"]{border-color:rgba(46,107,255,.4)}
.flash{position:fixed;inset:0;pointer-events:none;z-index:70;background:radial-gradient(circle at var(--fx,70%) var(--fy,40%),rgba(46,107,255,.25),transparent 55%);animation:flash 1.2s var(--out) both}
@keyframes flash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}

/* ---------- receipt (paper, printable) ---------- */
.rcp-page{padding:40px 0 90px}
.rcp-wrap{max-width:860px}
.rcp-actions{display:flex;justify-content:space-between;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.rcp{background:#fff;border:1px solid var(--line);border-radius:24px;padding:44px 48px;box-shadow:0 40px 80px -50px rgba(10,15,28,.35);animation:cardIn .9s var(--out) both}
.rcp-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.rcp-id{text-align:right}
.rcp-id p{margin:0}
.rcp-k{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu)}
.rcp-hero{display:flex;gap:22px;align-items:center;padding:30px 0}
.rcp-seal svg{width:76px;height:76px}
.rcp-seal .seal-bg{fill:var(--ac)}
.seal-check.done{stroke-dashoffset:0}
.rcp-amt{margin:4px 0 2px;font-size:clamp(30px,4vw,44px);font-weight:700;letter-spacing:-.035em;font-family:var(--mono)}
.rcp-sub{margin:0;color:var(--mu);font-size:14px}
.rcp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;margin:0 0 28px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rcp-grid div{display:grid;gap:3px;min-width:0}
.rcp-grid .wide{grid-column:1/-1}
.rcp-grid dt,.rcp-chain dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.rcp-grid dd,.rcp-chain dd{margin:0;font-size:14.5px;font-weight:550}
.brk{overflow-wrap:anywhere;word-break:break-all;font-size:13px!important}
.rcp-items{width:100%;border-collapse:collapse;font-size:14.5px;margin-bottom:28px}
.rcp-items th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mu);font-weight:500;padding-bottom:8px;border-bottom:1px solid var(--line)}
.rcp-items td{padding:10px 0;border-bottom:1px solid var(--line)}
.rcp-items .r{text-align:right;padding-left:14px;white-space:nowrap}
.rcp-items tfoot td{font-weight:700;border-bottom:0;padding-top:12px}
.rcp-items tfoot tr+tr td{color:var(--ok-2)}
.rcp-chain{background:var(--paper);border-radius:16px;padding:22px 24px}
.rcp-chain h2{margin:0 0 14px;font-size:15px;letter-spacing:-.01em}
.rcp-chain dl{margin:0;display:grid;gap:12px}
.rcp-chain div{display:grid;grid-template-columns:120px 1fr;gap:16px}
.rcp-chain a{color:var(--ac-3)}
.rcp-f{margin-top:26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--mu)}
.rcp-f p{margin:0;max-width:44em}
.rcp-f a{color:var(--ac-3)}

/* ---------- your links ---------- */
.links-page{padding:56px 0 100px;min-height:70svh}
.links-bar{margin:-6px 0 26px}
.links-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.links-list>li{display:grid;grid-template-columns:1fr auto auto auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;animation:fadeUp .6s var(--out) both;animation-delay:calc(var(--i,0) * 50ms);transition:border-color .2s,box-shadow .3s}
.links-list>li:hover{border-color:var(--line-2);box-shadow:0 20px 40px -30px rgba(10,15,28,.3)}
.links-list .lt{min-width:0}
.links-list .lt a{font-weight:700;text-decoration:none;font-size:15.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.links-list .lt small{color:var(--mu);font-family:var(--mono);font-size:12px}
.links-list .la{font-family:var(--mono);font-weight:600;white-space:nowrap}
.links-list .lb{display:flex;gap:6px}
.links-list .pill{justify-self:start}
.links-list.settled>li{animation:none}
.links-empty{display:block!important;text-align:center;color:var(--mu);padding:40px!important}
.links-empty p{margin:0 0 14px}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap;border:1px solid var(--line-2);color:var(--mu)}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.pill--paid{background:#E6F6EE;border-color:#BDE8D1;color:var(--ok-2)}
.pill--detected{background:#EAF0FF;border-color:#C4D4FF;color:#1F4FD1}
.pill--void,.pill--expired{background:#FBEDEC;border-color:#F2C7C3;color:#B23A31}

/* ---------- message, final, footer ---------- */
.msg{padding:120px 0;min-height:70svh;overflow:hidden}
.msg-in{position:relative;z-index:1}
.msg-in>*{max-width:720px}
.final{padding:130px 0;text-align:center;overflow:hidden;background:radial-gradient(ellipse 60% 70% at 50% 100%,rgba(46,107,255,.16),transparent 70%),var(--ink)}
.final-in{display:grid;justify-items:center}
.final .lede{margin-left:auto;margin-right:auto}
.foot{border-top:1px solid var(--line-d);background:var(--ink);color:var(--tx-d);padding:56px 0 40px}
.theme-light .foot{background:#0A0F1C}
.foot-in{display:grid;grid-template-columns:1.2fr 1fr;gap:28px 48px}
.foot-brand p{color:var(--mu-d);font-size:14px;max-width:26em;margin:14px 0 0}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 22px;align-content:start;justify-content:flex-end}
.foot-links a{text-decoration:none;color:var(--mu-d);font-size:14px;transition:color .2s}
.foot-links a:hover{color:var(--tx-d)}
.foot-fine{grid-column:1/-1;margin:12px 0 0;padding-top:22px;border-top:1px solid var(--line-d);color:var(--mu-d2);font-size:12px;line-height:1.65}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#0A0F1C;color:#fff;border:1px solid var(--line-d2);padding:11px 16px;border-radius:12px;font-size:14px;font-weight:600;opacity:0;transition:opacity .3s,transform .4s var(--out);z-index:90;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{border-color:rgba(239,97,87,.6)}
dialog.confirm{border:1px solid var(--line-d2);border-radius:20px;background:var(--ink-1);color:var(--tx-d);padding:26px;max-width:420px;width:calc(100% - 32px)}
dialog.confirm::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
dialog.confirm h2{margin:0 0 8px;font-size:20px;letter-spacing:-.02em}
dialog.confirm p{margin:0 0 20px;color:var(--mu-d);font-size:14.5px}
dialog.confirm .row{display:flex;gap:10px;justify-content:flex-end}
.btn--danger{background:var(--red);color:#fff}

/* ---------- OG card (1200x630) ---------- */
body.og{width:1200px;height:630px;margin:0;overflow:hidden;background:radial-gradient(ellipse 60% 80% at 85% 10%,rgba(46,107,255,.22),transparent 65%),radial-gradient(ellipse 40% 50% at 10% 100%,rgba(90,180,255,.12),transparent 70%),var(--ink);color:var(--tx-d)}
.og-in{display:grid;grid-template-columns:1fr 470px;gap:56px;align-items:center;height:100%;padding:0 70px}
.og .brand .logo{width:44px;height:44px}.og .brand .word{font-size:28px}
.og h1{font-size:66px;line-height:1;letter-spacing:-.05em;font-weight:800;margin:34px 0 22px}
.og-copy p{color:var(--mu-d);font-size:21px;line-height:1.5;margin:0}
.og-copy .og-url{margin-top:30px;color:var(--ac-lt);font-size:18px}
.og-card .inv{transform:rotate(2.5deg);padding:26px 26px 18px}
.og-card .inv-f{display:none}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-in{grid-template-columns:1fr;min-height:0;gap:36px;padding-top:8px}
  .hv{margin:0 auto;max-width:400px}
  .story-in,.create-in,.ivp-grid{grid-template-columns:1fr}
  .story-in{gap:20px}
  .story-copy{position:static}
  .story-steps,.story-rail{display:none}
  .slot{min-height:0;padding:20px 0}
  .slot-cap{display:grid;grid-template-columns:40px 1fr;margin-bottom:16px}
  .slot-cap .story-n{grid-row:span 2}
  .js .slot:not(.on) .frame{opacity:1;transform:none}
  .create-preview{position:static}
  .bento{grid-template-columns:1fr 1fr}
  .feat--wide{grid-column:1/-1}
  .ivp-grid .pay{order:-1}
}
@media (max-width:640px){
  :root{--gut:16px}
  .top-in{height:58px}
  .nav>a:not(.btn){display:none}
  .h-hero{font-size:clamp(40px,11.4vw,54px)}
  .hero{padding-top:28px}
  .stats{grid-template-columns:1fr 1fr;margin-top:36px}
  .stat{padding:20px 12px 22px 0}
  .stat+.stat{padding-left:14px}
  .stat:nth-child(3){grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid var(--line-d)}
  .stats-live{grid-column:1/-1;order:-1;margin:16px 0 0}
  .chip .lg{display:none}
  .bento{grid-template-columns:1fr}
  .feat--wide{grid-template-columns:1fr}
  .features,.create,.final{padding:80px 0}
  .story-in{padding:72px var(--gut) 48px}
  .field-row{grid-template-columns:1fr}
  .seg-f{width:100%}
  .items-head,.items-list li{grid-template-columns:1fr 54px 92px 34px;gap:6px}
  .inv{padding:22px 18px 18px;border-radius:18px}
  .inv-items .u,.inv-items th.u{display:none}
  .stamp{left:auto;right:14px;bottom:12px}
  .stamp span{font-size:22px}
  .pay{padding:20px 16px}
  .links-list>li{grid-template-columns:1fr auto;gap:10px 14px}
  .links-list .lb{grid-column:1/-1}
  .rcp{padding:26px 18px;border-radius:18px}
  .rcp-grid{grid-template-columns:1fr}
  .rcp-chain{padding:16px}
  .rcp-chain div{grid-template-columns:1fr;gap:2px}
  .foot-in{grid-template-columns:1fr}
  .foot-links{justify-content:flex-start}
  .frame{padding:20px}
  .ivp-head{margin-top:2px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  .aurora,.wire i,.qr-scan{display:none}
  @view-transition{navigation:none}
}

/* ---------- print (receipts) ---------- */
@media print{
  @page{margin:14mm}
  body,body.theme-light{background:#fff!important;color:#000}
  .top,.foot,.cabar,.no-print,.toast{display:none!important}
  .rcp-page{padding:0}
  .rcp-wrap{max-width:none;padding:0}
  .rcp{border:0;box-shadow:none;padding:0;animation:none;border-radius:0}
  .rcp-chain{background:#F2F4F8;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rcp-seal svg,.logo{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a{color:#000!important;text-decoration:none}
}

/* ---------- page-to-page transitions (cross-document View Transitions) ---------- */
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,.7,.1,1)}
::view-transition-group(invoice){animation-duration:.7s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-group(brand){animation-duration:.45s}

/* CA bar: always one line; the CA itself shortens with an ellipsis when space runs out */
.cabar{flex-wrap:nowrap}
.cabar .sym{flex:none;white-space:nowrap}
.cabar code{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cabar button,.cabar a{flex:none}