/* r20 design layer: tokens, hero, rhythm, cards, motion. Loaded after styles.css. */
:root{
--fs-xs:12px;--fs-sm:14px;--fs-base:16.5px;--fs-md:18px;--fs-lg:clamp(18px,1.5vw,20px);--fs-xl:clamp(22px,2vw,26px);
--fs-2xl:clamp(28px,3vw,36px);--fs-3xl:clamp(36px,4.8vw,60px);--fs-display:clamp(44px,7vw,104px);
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;
--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;
--violet:#b79bff;--grad:linear-gradient(100deg,#ff3d8f 0%,#ff6fae 45%,#b79bff 100%);
--glow:0 30px 90px -40px rgba(255,61,143,.45);--e2:cubic-bezier(.16,1,.3,1)}
body{text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11"}
.concept{font-size:11.5px;padding:6px var(--g);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr{transition:background .3s,box-shadow .3s,border-color .3s}
.hdr.scrolled{background:rgba(9,9,11,.9);box-shadow:0 10px 30px -20px rgba(0,0,0,.8)}
.nav a[aria-current=page]{background:rgba(255,255,255,.06)}
.nav a{position:relative}
/* rhythm */
.pad{padding:clamp(80px,9vw,136px) 0}
.sh{margin-bottom:clamp(36px,4.4vw,60px)}
.eb{font-size:var(--fs-xs);letter-spacing:.08em}
.h2{font-size:var(--fs-3xl);letter-spacing:-.04em;line-height:1.02}
.lede{font-size:var(--fs-lg);line-height:1.55}
/* buttons */
.btn{border-radius:var(--r-md);height:48px;padding:0 22px;transition:transform .25s var(--e2),box-shadow .25s,background .25s,border-color .25s}
.btn-sm{height:38px;padding:0 15px;border-radius:10px}
.btn-p{background:var(--grad);background-size:140% 100%;background-position:0 0;color:#0b0b0e;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 30px -12px rgba(255,61,143,.6)}
.btn-p:hover{background:var(--grad);background-size:140% 100%;background-position:100% 0;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 16px 40px -14px rgba(255,61,143,.75)}
.btn-g{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.14)}
.btn-g:hover{transform:translateY(-1px)}
.light .btn-g{color:var(--text);border-color:var(--pline)}
/* hero */
.hero{padding-top:clamp(36px,4.6vw,72px);isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(60% 50% at 78% 30%,rgba(255,61,143,.16),transparent 70%),radial-gradient(40% 40% at 95% 70%,rgba(183,155,255,.12),transparent 70%),
linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/56px 56px;
-webkit-mask-image:radial-gradient(80% 70% at 60% 30%,#000 30%,transparent 85%);mask-image:radial-gradient(80% 70% at 60% 30%,#000 30%,transparent 85%)}
.hero .eb{font:500 12.5px/1.2 var(--s)!important;padding:7px 13px;border:1px solid var(--line2);border-radius:999px;background:rgba(255,255,255,.03);letter-spacing:.01em!important;color:var(--bone2)}
.hero-g .eb i{width:6px!important;height:6px!important;border-radius:50%!important;background:var(--ok)!important;box-shadow:0 0 0 3px rgba(56,217,154,.18)}
.hero .h1{font-size:var(--fs-display);letter-spacing:-.055em;line-height:.93}
main .dark h1 em,main h1.h1 em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero .h1 em{display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.hero .lede{font-size:clamp(18px,1.6vw,21px);max-width:44ch;line-height:1.5}
.proof{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 36px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line);max-width:560px}
.proof div{display:flex;flex-direction:column;gap:4px}
.proof b{font:700 clamp(22px,2.2vw,28px)/1 var(--d);letter-spacing:-.035em;color:var(--bone)}
.proof span{font:500 11.5px/1.3 var(--m);color:var(--bone3);letter-spacing:.02em}
.proof small{grid-column:1/-1;font:400 11px/1.3 var(--m);color:#77736c}
.ledger{border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(24,24,28,.92),rgba(12,12,15,.96));border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 1px rgba(0,0,0,.5),var(--glow),inset 0 1px 0 rgba(255,255,255,.06);position:relative}
.ledger::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(255,61,143,.6),transparent 35%,transparent 65%,rgba(183,155,255,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.l-top{padding:14px 16px;background:rgba(255,255,255,.02)}
.ledger tr.new td{animation:r20row 1.4s var(--e2)}
@keyframes r20row{0%{background:rgba(255,61,143,.2);color:#fff}100%{background:transparent}}
.ledger.is-live .l-dot{animation:r20pulse 2.2s infinite}
@keyframes r20pulse{0%{box-shadow:0 0 0 0 rgba(56,217,154,.5)}70%{box-shadow:0 0 0 8px rgba(56,217,154,0)}100%{box-shadow:0 0 0 0 rgba(56,217,154,0)}}
@media (min-width:1041px){
.hero-g{grid-template-columns:minmax(0,1fr) minmax(0,540px);grid-template-areas:"eb eb" "h1 h1" "body led";column-gap:clamp(40px,5vw,72px);row-gap:0;align-items:start}
.hero .h1{margin-top:26px}
.hero-g>div:first-child{display:contents}
.hero .eb{grid-area:eb;justify-self:start}.hero .h1{grid-area:h1}.hero-b{grid-area:body}.hero .lede{margin-top:34px}
.hero .ledger{grid-area:led;margin-top:40px;align-self:start}}
/* doors as cards */
.doors{gap:14px;border-top:0;margin-top:clamp(56px,7vw,96px)}
.door,.door+.door{padding:26px 24px 26px;border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(255,255,255,.02)}
.door:last-child{border-right:1px solid var(--line)}
/* cards */
.door,.card,.app,.step{position:relative;transition:transform .35s var(--e2),border-color .3s,background .3s,box-shadow .35s}
.card{border-radius:var(--r-lg);border-color:var(--line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))}
.app{border-radius:var(--r-lg)}
.door::after,.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(255,61,143,.12),transparent 60%)}
.door:hover,.card:hover{border-color:rgba(255,255,255,.2);transform:translateY(-3px);box-shadow:0 24px 60px -36px rgba(0,0,0,.9)}
.door:hover::after,.card:hover::after{opacity:1}
.fact b{background:linear-gradient(180deg,var(--text),#3a3a40);-webkit-background-clip:text;background-clip:text;color:transparent}
.dark .fact b{background:linear-gradient(180deg,#fff,#a9a49b);-webkit-background-clip:text;background-clip:text}
/* motion */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--e2),transform .8s var(--e2)}
.js .reveal.in{opacity:1;transform:none}
.hero .eb,.hero .h1,.hero .lede,.hero .ctas,.hero .proof,.hero .ledger,.hero .doors{animation:r20up .9s var(--e2) both}
.hero .h1{animation-delay:.06s}.hero .lede{animation-delay:.14s}.hero .ctas{animation-delay:.2s}.hero .proof{animation-delay:.26s}.hero .ledger{animation-delay:.18s}.hero .doors{animation-delay:.32s}
@keyframes r20up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media print{.js .reveal{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1!important;transform:none!important}.hero *{animation:none!important}.door:hover,.card:hover,.btn:hover{transform:none}}
/* mobile */
@media (max-width:760px){
.hero .h1{font-size:clamp(42px,12vw,60px);line-height:.96}

.concept{font-family:var(--s);font-size:11px;letter-spacing:0}
.proof{display:grid;grid-template-columns:repeat(3,auto);justify-content:start}.proof b{font-size:21px}.proof span{font-size:10.5px}
.hero .lede{margin-top:18px;font-size:17.5px}
.hero .ctas{gap:10px}.hero .ctas .btn{height:52px}
.proof{gap:12px 20px;margin-top:26px;padding-top:18px}
.door,.door+.door{padding:20px}
.door h3{font-size:22px}
.pad{padding:72px 0}
.h2{font-size:clamp(32px,9vw,44px)}
.hero::after{background-size:auto,auto,40px 40px,40px 40px}}

/* ---- r23 (global): search results, mobile menu button, type details, micro-motion ---- */
.sr a .sr-t{display:flex;flex-direction:column;gap:4px;min-width:0;font:500 15px/1.3 var(--s);color:var(--bone);align-self:auto}
.sr a .sr-t small{font:400 12.5px/1.45 var(--s);color:var(--bone3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sr mark{background:rgba(255,61,143,.22);color:#fff;border-radius:3px;padding:0 1px}
.sr a.sel{box-shadow:inset 2px 0 0 #ff3d8f}
.sr-foot{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);font:500 11.5px var(--m);color:var(--bone3)}
.sr-foot kbd{display:inline-block;min-width:18px;padding:1px 5px;margin-right:3px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;font:500 11px var(--m);color:var(--bone2);text-align:center}
.sr-foot .sr-c{margin-left:auto}
@media (max-width:640px){.sr-foot span:not(.sr-c){display:none}}
.sb{animation:r23pop .22s var(--e2)}
@keyframes r23pop{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
.mnav a.btn{justify-content:center;padding:0 22px;border-bottom:0}
.h1,.h2,h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
.proof b,.ledger .num,.l-f,.lapps i{font-variant-numeric:tabular-nums}
.go b,.lnk{display:inline-block;transition:transform .25s var(--e2)}
.door:hover .go b,a.lnk:hover{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.sb{animation:none}.door:hover .go b,a.lnk:hover{transform:none}}

/* ---- r24 (global): nav indicator, Docs link, heading reveal ---- */
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1.5px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--e2)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.nav-docs i{font-style:normal;font-size:.78em;margin-left:3px;opacity:.6;display:inline-block;transition:transform .25s var(--e2)}
.nav-docs:hover i{transform:translate(2px,-2px)}
@media (min-width:1041px) and (max-width:1240px){.nav a{padding-left:7px!important;padding-right:7px!important;font-size:14px!important}.nav a::after{left:7px;right:7px}.hdr .kbtn{font-size:0!important;gap:6px!important;padding:0 10px!important}.hdr .kbtn svg{width:15px!important;height:15px!important;font-size:11px}.hdr .kbtn kbd{font-size:11px}}
@media (min-width:1041px) and (max-width:1120px){.nav .nav-docs{display:none}}
@media (prefers-reduced-motion:no-preference){
.js .reveal .h2{transition:clip-path .9s var(--e2),transform .9s var(--e2)}
.js .reveal:not(.in) .h2{clip-path:inset(0 0 100% 0);transform:translateY(.25em)}
.js .reveal.in .h2{clip-path:inset(-10% -5% -20% -5%)}}
@media (prefers-reduced-motion:reduce){.nav a::after{transition:none}}

/* ---- r25: small-print contrast (AA), type details ---- */
.proof small,.lapps small{color:#8f8a81}
.hero .lede b{color:var(--bone);font-weight:600}
.h2 em,.h1 em{font-style:normal}