/* Shua landing. Brand tokens from design/tokens.json, unchanged. Saffron means "money is held" and nothing else. */
@font-face{font-family:'FiraGO';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/firago-sub2-400.woff2) format('woff2')}
@font-face{font-family:'FiraGO';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/firago-sub2-500.woff2) format('woff2')}
@font-face{font-family:'FiraGO';font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/firago-sub2-700.woff2) format('woff2')}
@font-face{font-family:'FiraGO';font-style:normal;font-display:swap;font-weight:900;src:url(/fonts/firago-sub2-900.woff2) format('woff2')}

:root{
  --ink:#0E2620;--paper:#F5F2EA;--surface:#FFFEFA;--soft:#EDE9DE;--line:#D9D4C7;
  --g70:#5E5A50;--g50:#8C877B;--g30:#B8B2A5;
  --saffron:#F2A93B;--green:#2FA36B;--red:#C8553D;
  --dsurface:#173A32;--dline:#244A40;
  --r-card:24px;--r-btn:16px;--r-input:14px;
  --shadow:0 1px 0 rgba(14,38,32,.04),0 22px 44px -26px rgba(14,38,32,.34);
  --shadow-up:0 1px 0 rgba(14,38,32,.04),0 30px 54px -26px rgba(14,38,32,.42);
  --ease:cubic-bezier(.2,.8,.2,1);
  --wrap:1180px;--gut:20px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'FiraGO','Fira Sans','Noto Sans Georgian',system-ui,sans-serif;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-wrap:pretty;line-height:1.5}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
svg{display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.nobr{white-space:nowrap}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.on-ink a:focus-visible,.on-ink button:focus-visible,.on-ink input:focus-visible{outline-color:var(--paper)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;background:rgba(245,242,234,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.nav.scrolled{border-bottom-color:var(--line);box-shadow:0 10px 30px -24px rgba(14,38,32,.5)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.logo{display:flex;align-items:center;gap:10px;min-height:44px;font-size:24px;font-weight:900;letter-spacing:-.05em;line-height:1}
.nav-links{display:none;gap:30px;font-size:15px;font-weight:500;color:var(--g70)}
.nav-links a{padding:10px 0;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}

/* ---------- buttons, inputs, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 26px;border-radius:var(--r-btn);border:0;background:var(--ink);color:var(--paper);font:inherit;font-size:16px;font-weight:500;white-space:nowrap;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(14,38,32,.6)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.btn-sm{height:44px;padding:0 18px;border-radius:12px;font-size:14px}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn svg{transition:transform .2s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.field{height:56px;padding:0 18px;border-radius:var(--r-input);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:16px;min-width:0;width:100%;transition:border-color .2s,box-shadow .2s}
.field::placeholder{color:var(--g50)}
.field:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,38,32,.08)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 12px;border-radius:16px;background:var(--soft);font-size:13px;font-weight:500;color:var(--g70)}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--g30)}
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 7px;border-radius:11px;font-size:11px;font-weight:500}
.chip i{width:5px;height:5px;border-radius:50%;background:currentColor}
.chip-held{background:var(--saffron);color:var(--ink)}
.chip-soon{background:transparent;border:1px solid var(--g30);color:var(--g70);padding:0 9px}

/* ---------- sections ---------- */
section{padding:clamp(56px,8vw,112px) 0}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2{font-size:clamp(30px,4vw,44px);font-weight:900;letter-spacing:-.035em;line-height:1.08}
.sec-head p{font-size:16px;color:var(--g70);max-width:460px}
.label{font-size:12px;letter-spacing:.12em;color:var(--g70)}

/* ---------- hero ---------- */
.hero{padding:clamp(28px,5vw,64px) 0 clamp(56px,7vw,96px)}
.hero .wrap{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(34px,3.6vw,52px);font-weight:900;letter-spacing:-.04em;line-height:1.04;margin:18px 0 0}
.hero .sub{margin-top:14px;max-width:520px;font-size:clamp(15px,1.15vw,17px);line-height:1.5;color:var(--g70)}
.wl{display:flex;flex-direction:column;gap:8px;margin-top:clamp(16px,1.8vw,20px);max-width:520px}
.wl-row{display:flex;flex-wrap:wrap;gap:10px}
.wl-row .field{flex:1 1 210px}
.wl-msg{min-height:20px;font-size:14px;line-height:1.4}
.wl-note{font-size:12px;color:var(--g70);line-height:1.5}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;order:2}
.hero .stage{order:3}
.stat{border-radius:16px;padding:10px 13px 9px;display:flex;flex-direction:column;gap:3px}
.stat b{font-size:clamp(18px,1.7vw,22px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.stat span{font-size:12px;line-height:1.35}
.stat-1{background:var(--soft)}
.stat-2{background:var(--surface);border:1px solid var(--line)}
.stat-3{background:var(--ink);color:var(--paper)}
.stat-3 span{color:var(--g30)}
.stat-1 span,.stat-2 span{color:var(--g70)}

.stage{position:relative;border-radius:32px;background:var(--ink);color:var(--paper);aspect-ratio:1.08/1;box-shadow:var(--shadow-up);overflow:hidden;display:flex;align-items:center;justify-content:center}
.stage::before,.stage::after{content:"";position:absolute;border-radius:50%;border:1.5px solid rgba(245,242,234,.09)}
.stage::before{width:78%;aspect-ratio:1;left:-24%;top:-30%}
.stage::after{width:64%;aspect-ratio:1;right:-20%;bottom:-34%}
.stage svg.rings{width:min(86%,520px);overflow:visible;position:relative}
.stage-labels{position:absolute;left:0;right:0;bottom:15%;display:flex;justify-content:center;gap:24%;font-size:clamp(12px,1.1vw,14px);font-weight:500;color:var(--g30)}
.stage-cap{position:absolute;left:0;right:0;bottom:7%;height:22px;text-align:center;font-size:clamp(13px,1.2vw,15px);color:var(--g30)}
.stage-cap span{position:absolute;left:0;right:0}
.float{position:absolute;background:var(--surface);color:var(--ink);border-radius:20px;box-shadow:0 24px 40px -20px rgba(0,0,0,.55);padding:14px 16px}
.float-deal{left:5%;top:7%;min-width:170px;animation:bob 6s ease-in-out infinite}
.float-deal small{display:block;font-size:12px;color:var(--g70)}
.float-deal strong{display:block;font-size:24px;font-weight:500;letter-spacing:-.03em;line-height:1.1;margin:2px 0 8px}
.float-pay{right:5%;top:15%;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;animation:bob 7s ease-in-out -2s infinite}
.float-pay .tick{width:30px;height:30px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center}
.float-pay span{font-size:13px;font-weight:500;line-height:1.2}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------- how it works ---------- */
.steps{display:grid;gap:clamp(14px,1.8vw,20px)}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-up)}
.step-art{background:var(--soft);padding:24px 20px 0;height:292px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.step-art>div{width:100%;max-width:260px;border-radius:18px 18px 0 0;padding:16px 15px 16px}
.step-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px}
.step-title{display:flex;align-items:center;gap:12px}
.num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;flex:none}
.step h3{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.step p{font-size:14.5px;color:var(--g70);line-height:1.55}
.mock-light{background:var(--surface);border:1px solid var(--line);border-bottom:0}
.mock-ink{background:var(--ink);color:var(--paper)}
.mock small{display:block;font-size:12px;color:var(--g70)}
.mock .big{font-size:30px;font-weight:500;letter-spacing:-.03em;line-height:1}
.mock .amt{display:flex;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:6px;margin-top:3px}
.mock .amt .c{color:var(--g50)}
.mock .amt .cur{margin-left:auto;font-size:17px;color:var(--g70)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:11px}
.seg span{height:32px;border-radius:10px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500}
.seg span.on{border-color:var(--ink);background:var(--soft)}
.mock .go{height:42px;border-radius:12px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;margin-top:12px}
.codecells{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 12px}
.codecells span{height:52px;border-radius:12px;background:var(--dsurface);border:1px solid var(--dline);display:flex;align-items:center;justify-content:center}
.codecells span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--paper)}
.mock-ink p{font-size:12.5px;line-height:1.45;color:var(--g30)}
.mock .paid{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-top:10px}
.mock .math{font-size:12px;color:var(--g70);margin-top:5px;line-height:1.4}

/* ---------- calculator ---------- */
.calc{background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);overflow:hidden}
.calc-head{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--soft)}
.calc-head .dot{width:36px;height:36px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;flex:none}
.calc-head b{display:block;font-size:16px;font-weight:700;line-height:1.2}
.calc-head small{font-size:12px;color:var(--g70)}
.calc-grid{display:grid}
.calc-col{padding:22px 24px 26px;display:flex;flex-direction:column;gap:12px}
.calc-col+.calc-col{border-top:1px solid var(--soft)}
.calc-col h3{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700}
.calc-col h3 .num{width:26px;height:26px;font-size:12px;background:var(--soft)}
.calc-col>p{font-size:13px;color:var(--g70);margin-top:-6px}
.price{position:relative}
.price .field{padding-right:48px;font-size:22px;font-weight:500;letter-spacing:-.02em;height:60px}
.price span{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--g70);pointer-events:none}
.quick{display:flex;flex-wrap:wrap;gap:8px}
.quick button,.pick button{height:40px;padding:0 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);font:inherit;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.quick button:hover,.pick button:hover{border-color:var(--ink)}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pick button{height:48px}
.pick button[aria-pressed="true"]{border-color:var(--ink);background:var(--soft)}
.rows{display:flex;flex-direction:column}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--soft);font-size:15px;color:var(--g70)}
.row b{font-weight:500;color:var(--ink);white-space:nowrap}
.row.total{border-bottom:0;padding-top:14px;color:var(--ink);font-weight:500}
.row.total b{font-size:clamp(26px,2.4vw,32px);letter-spacing:-.02em;font-weight:500}
.calc-note{font-size:12.5px;color:var(--g70);line-height:1.5}
.calc-err{min-height:18px;font-size:13px;color:var(--red)}

/* ---------- why ---------- */
.why{display:grid;gap:clamp(14px,1.8vw,20px)}
.why-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-up)}
.why-top{height:132px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.why-top::before,.why-top::after{content:"";position:absolute;border-radius:50%;border:1.5px solid currentColor;opacity:.2}
.why-top::before{width:150px;height:150px;left:-46px;top:-30px}
.why-top::after{width:150px;height:150px;right:-50px;bottom:-70px}
.why-ico{width:60px;height:60px;border-radius:18px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 12px 24px -12px rgba(0,0,0,.35)}
.t-held{background:var(--saffron);color:var(--ink)}
.t-held .why-ico{background:rgba(14,38,32,.12)}
.t-paid{background:var(--green);color:#fff}
.t-ink{background:var(--ink);color:var(--paper)}
.t-dispute{background:var(--red);color:#fff}
.t-soft{background:var(--soft);color:var(--ink)}
.t-soft .why-ico{background:var(--surface)}
.t-deep{background:var(--dsurface);color:var(--paper)}
.why-body{padding:20px 22px 24px}
.why-body h3{font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.why-body p{font-size:14.5px;color:var(--g70);line-height:1.55}
.why-score{display:inline-flex;align-items:center;gap:8px;margin-top:12px;height:30px;padding:0 12px;border-radius:15px;border:1px solid var(--line);font-size:12px;font-weight:500}

/* ---------- faq ---------- */
.faq{display:grid;gap:0 clamp(32px,5vw,64px)}
details{border-top:1px solid var(--line);padding:6px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;cursor:pointer;list-style:none;font-size:clamp(16px,1.3vw,18px);font-weight:500;line-height:1.35}
summary::-webkit-details-marker{display:none}
summary svg{flex:none;transition:transform .25s var(--ease)}
details[open] summary svg{transform:rotate(45deg)}
details p{font-size:15px;color:var(--g70);line-height:1.6;max-width:560px;padding:0 0 18px}

/* ---------- closing card ---------- */
.close{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);border-radius:32px;padding:clamp(44px,7vw,88px) clamp(22px,5vw,64px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.close::before,.close::after{content:"";position:absolute;border-radius:50%;border:1.5px solid rgba(245,242,234,.1)}
.close::before{width:360px;height:360px;left:-120px;top:-150px}
.close::after{width:420px;height:420px;right:-150px;bottom:-230px}
.close>*{position:relative}
.close h2{font-size:clamp(30px,4.2vw,56px);font-weight:900;letter-spacing:-.04em;line-height:1.05}
.close .wl{align-items:stretch;width:100%;max-width:460px;margin:8px 0 0}
.close .wl label{font-size:15px;color:var(--g30);line-height:1.5}
.close .btn{background:var(--paper);color:var(--ink)}
.close .btn:hover{box-shadow:0 16px 30px -16px rgba(0,0,0,.7)}
.close .field{background:var(--dsurface);border-color:var(--dline);color:var(--paper)}
.close .field:focus{border-color:var(--paper);box-shadow:0 0 0 4px rgba(245,242,234,.12)}
.close .wl-note{color:var(--g70)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--g30);padding:22px 0 20px;font-size:13px}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 28px}
footer .logo{color:var(--paper);font-size:22px}
.foot-links{display:flex;flex-wrap:wrap;gap:0 26px}
.foot-links a{display:flex;align-items:center;min-height:44px;font-size:14px;font-weight:500;color:var(--paper);opacity:.85;transition:opacity .15s}
.foot-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;margin-top:6px;padding-top:14px;border-top:1px solid var(--dline);font-size:12px;color:var(--g30)}

/* ---------- scroll reveal ---------- */
.js .rise{opacity:0;transform:translateY(14px);transition:opacity .5s ease-out,transform .5s var(--ease);transition-delay:var(--d,0ms)}
.js .rise.in{opacity:1;transform:none}

/* ---------- breakpoints ---------- */
@media (min-width:640px){
  :root{--gut:28px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:820px){
  .nav-links{display:flex}
}
@media (min-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:stretch}
  .hero-copy{display:flex;flex-direction:column;justify-content:space-between}
  .hero .stage{order:0}
  .hero .wrap{row-gap:clamp(24px,2.6vw,36px)}
  .stats{grid-column:1/-1;gap:16px}
  .calc-grid{grid-template-columns:1fr 1fr 1.1fr}
  .calc-col+.calc-col{border-top:0;border-left:1px solid var(--soft)}
  .faq{grid-template-columns:1fr 1fr;align-items:start}
}
@media (min-width:900px) and (max-width:1279px){
  /* narrower columns make the text taller than the box's own shape, so here the box follows the text */
  .stage{aspect-ratio:auto;width:100%;min-width:0}
}
@media (min-width:1100px){
  :root{--gut:32px}
  .steps{grid-template-columns:repeat(4,1fr)}
  .why{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:480px){
  .foot-links{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .foot-row .btn{width:100%}
  .wl-row .btn{width:100%}
  .stats{gap:8px}
  .stat{padding:12px 11px 10px}
  .float-deal{left:4%;top:5%;min-width:150px;padding:11px 13px}
  .float-deal strong{font-size:20px}
  .float-pay{top:auto;bottom:25%;right:4%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rise{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  /* the loop collapses to its most meaningful frame: the money held in the middle */
  .a-fill,.a-check,.a-coin,.a-w1,.a-w3{display:none}
}

/* ---------- conversion layer: offer, count, share, sticky bar ---------- */
.perk{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:14px;font-weight:500;line-height:1.4;color:var(--ink)}
.perk svg{flex:none;margin-top:1px;color:var(--green)}
.on-ink .perk{color:var(--paper)}
.on-ink .perk svg{color:#58D49A}
.hero .perk{margin-top:0}
.wl-count{margin:8px 0 0;font-size:13px;color:var(--g70)}
.wl-count b{color:var(--ink);font-weight:700}
.ulink{text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:11px 0;margin:-11px 0}
.ulink:hover{text-decoration-thickness:2px}
.on-ink .wl-note{color:var(--g30)}
.wl-note{color:var(--g70)}

.btn.loading{pointer-events:none}
.btn.loading svg{display:none}
.btn.loading::after{content:"";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wl-msg .ok{display:inline-flex;align-items:center;gap:8px;font-weight:500}
.wl-msg .ok svg path{stroke-dasharray:26;stroke-dashoffset:26;animation:draw .5s .05s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.share>span{flex:1 1 100%;font-size:13px;color:var(--g70)}
.on-ink .share>span{color:var(--g30)}
.share a,.share button{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:border-color .15s,transform .2s var(--ease)}
.share a:hover,.share button:hover{border-color:var(--ink);transform:translateY(-1px)}
.on-ink .share a,.on-ink .share button{background:var(--dsurface);border-color:var(--dline);color:var(--paper)}
.on-ink .share a:hover,.on-ink .share button:hover{border-color:var(--paper)}

.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(245,242,234,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s var(--ease);visibility:hidden}
.sticky-cta.show{transform:none;visibility:visible}
.sticky-cta .btn{width:100%}
@media (min-width:640px){.sticky-cta{display:none}}
@media (max-width:639px){footer{padding-bottom:calc(20px + 76px)}}

/* ---------- trust layer ---------- */
.story{display:flex;flex-wrap:wrap;gap:22px 28px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:clamp(22px,4vw,44px)}
.story-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;background:var(--soft)}
.story-body{flex:1 1 320px;min-width:0}
.story-body h2{font-size:clamp(26px,3vw,36px);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-bottom:14px}
.story-body p{font-size:clamp(16px,1.3vw,18px);line-height:1.65;color:var(--g70);max-width:640px;white-space:pre-line}
.story-name{display:block;margin-top:16px;font-size:14px;font-weight:500}
.by{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(24px,3.4vw,36px) 0}
.by .label{display:block;margin-bottom:8px}
.by p{font-size:clamp(16px,1.4vw,19px);font-weight:500;line-height:1.45;letter-spacing:-.005em;max-width:560px}
.by-links{display:flex;flex-wrap:wrap;gap:8px}
.by-links a{display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:22px;border:1.5px solid var(--line);background:var(--surface);font-size:14px;font-weight:500;transition:border-color .15s,transform .2s var(--ease)}
.by-links a:hover{border-color:var(--ink);transform:translateY(-1px)}
.label{color:var(--g70)}

/* ---------- privacy page ---------- */
.doc{max-width:720px;margin:0 auto;padding:clamp(36px,6vw,72px) var(--gut) clamp(56px,8vw,96px)}
.doc h1{font-size:clamp(32px,4.4vw,48px);font-weight:900;letter-spacing:-.035em;line-height:1.08;margin-bottom:10px}
.doc .lead{font-size:18px;color:var(--g70);line-height:1.6;margin-bottom:8px}
.doc h2{font-size:21px;font-weight:700;letter-spacing:-.01em;margin:36px 0 10px}
.doc p,.doc li{font-size:16px;line-height:1.7;color:var(--g70)}
.doc ul{margin:8px 0 0;padding-left:22px}
.doc li{margin:6px 0}
.doc b{color:var(--ink);font-weight:700}
.doc a{text-decoration:underline;text-underline-offset:3px}
.doc .when{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--g70)}
.row b.tick{animation:tick .35s var(--ease)}
@keyframes tick{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:none}}

/* ---------- copy update: multi-paragraph cards, fee intro, closing line ---------- */
.step p+p,.why-body p+p{margin-top:8px}
.step p.strong{font-weight:500;color:var(--ink)}
.hero .sub2{margin-top:10px}
.hero .sub{margin-top:12px}
.fee-intro{display:grid;gap:clamp(20px,3vw,40px);align-items:center;margin-bottom:clamp(20px,3vw,32px)}
.fee-intro h3{font-size:clamp(26px,3.2vw,40px);font-weight:900;letter-spacing:-.035em;line-height:1.1;margin-bottom:12px}
.fee-intro p{font-size:16px;color:var(--g70);line-height:1.55;max-width:520px}
.fee-intro .perk{margin-top:14px;color:var(--ink)}
.facts{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:6px 24px}
.facts div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--soft)}
.facts div:last-child{border-bottom:0}
.facts dt{font-size:15px;color:var(--g70)}
.facts dd{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.by-sub{margin-top:6px;font-size:15px!important;font-weight:400!important;color:var(--g70);line-height:1.55!important}
.by-right{display:flex;flex-direction:column;gap:10px}
.by-right .label{margin:0}
.close-sub{font-size:clamp(18px,1.8vw,22px);font-weight:700;letter-spacing:-.01em;margin-top:-6px}
@media (min-width:900px){.fee-intro{grid-template-columns:1.1fr .9fr}}

.close .wl-row .btn{width:100%}
.fee-intro h2{font-size:clamp(26px,3.2vw,40px);font-weight:900;letter-spacing:-.035em;line-height:1.1;margin-bottom:12px}
.sec-head .label.solo{font-size:13px;letter-spacing:.12em}

/* ---------- hero story: one 10 second loop, transform and opacity only ----------
   0-12% the coin appears in the buyer ring | 12-34% it slides along the middle line
   34-62% HELD: the lens opens and breathes | 62-84% the coin goes on to the seller
   72-90% the seller ring fills green and the check draws | 94-100% it all lets go */
.hero .stage svg.rings *{transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
.a-coin{animation:coin 10s infinite}
.a-lens{animation:lens 10s infinite}
.a-ripple-s{animation:rippleS 10s infinite;opacity:0}
.a-fill{animation:fill 10s infinite;transform:scale(0);opacity:0}
.a-ripple-g{animation:rippleG 10s infinite;opacity:0}
.a-check{animation:check 10s infinite;stroke-dasharray:40;stroke-dashoffset:40;opacity:0}
.a-w1,.a-w2,.a-w3{opacity:0;transform:translateY(6px)}
.a-w1{animation:w1 10s infinite}
.a-w2{animation:w2 10s infinite;color:var(--paper);font-weight:500}
.a-w3{animation:w3 10s infinite;color:#58D49A;font-weight:500}
.float-pay{animation:bob 7s ease-in-out -2s infinite,heldPill 10s infinite}
@keyframes coin{
  0%{transform:translateX(-30px) scale(.4);opacity:0;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
  6%{transform:translateX(-30px) scale(1);opacity:1}
  12%{transform:translateX(-30px) scale(1);opacity:1;animation-timing-function:cubic-bezier(.65,0,.25,1)}
  34%{transform:translateX(0) scale(1);opacity:1}
  62%{transform:translateX(0) scale(1);opacity:1;animation-timing-function:cubic-bezier(.65,0,.25,1)}
  84%{transform:translateX(30px) scale(1);opacity:1;animation-timing-function:ease-in}
  90%{transform:translateX(30px) scale(.5);opacity:0}
  100%{transform:translateX(30px) scale(.5);opacity:0}}
@keyframes lens{
  0%,30%{transform:scale(.5);opacity:0;animation-timing-function:cubic-bezier(.2,.9,.2,1)}
  40%{transform:scale(1);opacity:1;animation-timing-function:ease-in-out}
  47%{transform:scale(1.045);opacity:1;animation-timing-function:ease-in-out}
  54%{transform:scale(1);opacity:1;animation-timing-function:ease-in-out}
  60%{transform:scale(1.035);opacity:1;animation-timing-function:ease-in}
  74%{transform:translateX(10px) scale(.7);opacity:0}
  100%{transform:translateX(10px) scale(.7);opacity:0}}
@keyframes rippleS{
  0%,34%{transform:scale(1);opacity:0}
  36%{transform:scale(1);opacity:.7;animation-timing-function:cubic-bezier(.2,.6,.3,1)}
  52%{transform:scale(3.1);opacity:0}
  100%{transform:scale(3.1);opacity:0}}
@keyframes fill{
  0%,72%{transform:scale(0);opacity:1;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
  86%{transform:scale(1);opacity:1}
  94%{transform:scale(1);opacity:1;animation-timing-function:ease-in-out}
  99%,100%{transform:scale(1);opacity:0}}
@keyframes rippleG{
  0%,84%{transform:scale(1);opacity:0}
  85%{transform:scale(1);opacity:.55;animation-timing-function:cubic-bezier(.2,.6,.3,1)}
  95%{transform:scale(1.22);opacity:0}
  100%{transform:scale(1.22);opacity:0}}
@keyframes check{
  0%,82%{stroke-dashoffset:40;opacity:0}
  83%{stroke-dashoffset:40;opacity:1;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  90%{stroke-dashoffset:0;opacity:1}
  94%{stroke-dashoffset:0;opacity:1}
  98%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes w1{
  0%{opacity:0;transform:translateY(6px);animation-timing-function:ease-out}
  4%{opacity:1;transform:none}
  28%{opacity:1;transform:none;animation-timing-function:ease-in}
  33%{opacity:0;transform:translateY(-6px)}100%{opacity:0;transform:translateY(-6px)}}
@keyframes w2{
  0%,34%{opacity:0;transform:translateY(6px);animation-timing-function:ease-out}
  39%{opacity:1;transform:none}
  58%{opacity:1;transform:none;animation-timing-function:ease-in}
  63%{opacity:0;transform:translateY(-6px)}100%{opacity:0;transform:translateY(-6px)}}
@keyframes w3{
  0%,80%{opacity:0;transform:translateY(6px);animation-timing-function:ease-out}
  86%{opacity:1;transform:none}
  95%{opacity:1;transform:none;animation-timing-function:ease-in}
  99%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes heldPill{
  0%,34%{opacity:0}
  41%{opacity:1}
  60%{opacity:1}
  67%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  /* the loop collapses to its most meaningful frame: the money held in the middle */
  .a-fill,.a-check,.a-coin,.a-ripple-s,.a-ripple-g,.a-w1,.a-w3{display:none}
  .a-lens{opacity:1;transform:none}
  .a-w2{opacity:1;transform:none}
  .float-pay{opacity:1}
}

/* no signup form: the top bar keeps its links on the right, the closing card is a statement */
.nav .nav-links{margin-left:auto}
.close{padding-block:clamp(48px,7vw,96px)}
.close-sub{margin-top:0}
@media (min-width:900px){.hero-copy{justify-content:center;gap:14px}.hero .perk{margin-top:2px}}

/* desktop hero: text on the left half, dark box on the right half */
@media (min-width:900px){
  /* two equal halves: the dark box starts at the middle of the page and keeps its own height */
  .hero .wrap{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .hero-copy{grid-column:1;padding-right:28px}
  .hero .stage{grid-column:2;aspect-ratio:auto;min-height:468px;width:100%}
  .stats{grid-column:1/-1}
}
@media (min-width:640px) and (max-width:899px){.hero .stage{aspect-ratio:16/10}}

/* how-it-works cards: one short sentence up front, the rest under "details" */
.step details.more{border:0;padding:0;margin-top:2px}
.step details.more summary{min-height:44px;justify-content:flex-start;gap:6px;font-size:14px;font-weight:500;color:var(--ink)}
.step details.more summary svg{transition:transform .25s var(--ease)}
.step details.more[open] summary svg{transform:rotate(180deg)}
.step details.more summary:hover span,.step details.more summary:hover{text-decoration:underline;text-underline-offset:3px}
.step details.more p{padding:0;margin-top:8px;font-size:14.5px;max-width:none}
.step details.more p:first-of-type{margin-top:2px}
.step .step-body>p{margin:0}
.step-art{height:268px}