/* Shared stylesheet for the hand-built /new marketing pages.
   Tokens lifted from the /new Next export: Open Sans (same woff2 the export
   ships), cream #fafaf9, ink #182302, dark #0a0f0a, accent #aaff00. */

@font-face{
  font-family:"Open Sans";
  font-style:normal;
  font-weight:300 800;
  font-stretch:100%;
  font-display:swap;
  src:url(/_next/static/media/cf514f5d0007dafa-s.p.1wc2mf9hp9pav.woff2) format("woff2");
}

:root{
  --dark:#0a0a0b;
  --dark2:#101012;
  --dark3:#151517;
  --ink:#182302;
  --cream:#fafaf9;
  --accent:#aaff00;
  --accent-tx:#4a6f00;
  --line:rgba(24,35,2,.12);
  --wline:rgba(255,255,255,.09);
  --font:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --max:1728px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --r-xs:8px;--r-sm:14px;--r-md:22px;--r-lg:28px;
  --d-fast:.15s;--d-base:.25s;--d-slow:.45s;--ease-spring:cubic-bezier(.34,1.5,.64,1);
  --sh-1:0 0 #0000;
  --sh-2:0 0 #0000;
  --sh-3:0 0 #0000;
  --sh-d1:0 0 #0000;--sh-d2:0 0 #0000;--sh-d3:0 0 #0000; /* flat pass: card/mockup shadows off, 1px rings stay */
  --tx-dim:rgba(255,255,255,.72);--tx-mute:rgba(255,255,255,.55);
}
*{margin:0;padding:0;box-sizing:border-box}
/* full-page film grain: the texture layer that keeps large fields from reading flat */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
.home .sec,.home .hero.lime,.home .partners,.home footer,.home .cut{position:relative}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--dark);color:var(--ink);
  font-size:16px;line-height:1.5;overflow-x:hidden}
.sec.dark,.partners,footer,.hdr,.rundark,.door .vis{-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
@media(min-width:640px){.wrap{padding:0 32px}}
@media(min-width:1024px){.wrap{padding:0 48px}}
.home .wrap{max-width:1236px}
.home .hw{max-width:1236px;padding:0 20px}
@media(min-width:640px){.home .hw{padding:0 32px}}
@media(min-width:1024px){.home .hw{padding:0 48px}}

/* ---- scroll reveal (JS adds .in; stagger set inline by site.js) ---- */
[data-rv]{opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
[data-rv].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-rv]{transform:none;transition:opacity .25s var(--ease-out)}
}

/* ---- header (floating pill, matches the business page nav) ---- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:center;padding:14px 16px 0}
.hdr-in{display:flex;width:100%;max-width:1320px;align-items:center;justify-content:space-between;
  gap:16px;padding:9px 14px 9px 26px;border-radius:999px;
  background:rgba(10,10,11,.92);border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(12px);
  transition:max-width .25s var(--ease-spring),background-color .25s var(--ease-out),
    border-color .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.hdr.scrolled .hdr-in{max-width:1180px;background:rgba(10,10,11,.94);
  border-color:rgba(255,255,255,.09);box-shadow:var(--sh-d1)}
@media(prefers-reduced-motion:reduce){.hdr-in{transition:none}}
.hdr-logo{display:flex;align-items:center;padding:7px 0}
.hdr-logo img{height:30px;width:auto;filter:invert(1)}
.hdr-nav{display:none;align-items:center;gap:4px;padding:5px;border-radius:999px;
  background:rgba(255,255,255,.06)}
@media(min-width:768px){.hdr-nav{display:flex}}
/* hamburger: hidden on desktop, the only nav control on a phone */
.hdr-burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;border:0;background:none;cursor:pointer;border-radius:999px}
.hdr-burger span{display:block;height:2px;width:100%;border-radius:2px;background:#fff;
  transition:transform .22s var(--ease-out),opacity .18s var(--ease-out)}
.hdr.onlight .hdr-burger span{background:var(--ink)}
.hdr.navopen .hdr-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr.navopen .hdr-burger span:nth-child(2){opacity:0}
.hdr.navopen .hdr-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.hdr-burger span{transition:none}}


.hdr-nav a{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:#fff;padding:11px 16px;border-radius:999px;transition:background .15s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.hdr-nav a:hover{background:rgba(255,255,255,.09)}}
.hdr-nav a.on{background:#fff;color:var(--ink)}
.hdr-cta{border-radius:999px;background:var(--accent);padding:0 26px;min-height:44px;display:inline-flex;align-items:center;line-height:1;
  font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#000;
  transition:transform .15s var(--ease-out),box-shadow .15s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .hdr-cta:hover{transform:translateY(-1px)}}
.hdr-cta:active{transform:scale(.97)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:0 26px;min-height:48px;line-height:1;
  font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  transition:transform .15s var(--ease-out),box-shadow .15s var(--ease-out),background .15s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn .ar{display:inline-block;transition:transform .25s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .btn:hover .ar{transform:translateX(4px)}
  .btn.p:hover{transform:translateY(-1px)}
  .btn.g:hover{background:rgba(255,255,255,.12)}
  .btn.d:hover{background:rgba(24,35,2,.06)}
}
.btn.p{background:var(--accent);color:#000}
.btn.g{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff}
.btn.d{border:1px solid var(--line);background:transparent;color:var(--ink)}
.btn.ink{background:var(--ink);color:var(--cream)}
@media(hover:hover) and (pointer:fine){
  .btn.ink:hover{transform:translateY(-1px)}}

/* ---- hero ---- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--dark);
  padding:160px 0 0;text-align:center}
.hero::before{content:"";position:absolute;inset:auto -20% -55% -20%;height:120%;z-index:-2;
  background:radial-gradient(ellipse 55% 45% at 50% 100%,rgba(170,255,0,.10),transparent 70%)}

.hero h1{margin:0 auto;max-width:1350px;font-weight:800;text-transform:uppercase;
  line-height:.92;letter-spacing:-.05em;color:#fff;font-size:clamp(2.125rem,4.4vw,58px);
  text-wrap:balance}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.hero .sub{margin:26px auto 0;max-width:820px;color:rgba(255,255,255,.62);font-weight:400;
  font-size:clamp(16px,1.4vw,19px);line-height:1.45;text-wrap:balance}
.hero .ctas{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
/* load sequence */
.hero .seq{animation:heroUp .6s var(--ease-out) both}
.hero .seq:nth-of-type(2){animation-delay:.1s}
.hero .seq:nth-of-type(3){animation-delay:.25s}
.hero .seq:nth-of-type(4){animation-delay:.25s}
@keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .hero .seq{animation:heroFade .45s var(--ease-out) both}
  @keyframes heroFade{from{opacity:0}to{opacity:1}}
}

/* ---- lime hero (home): lime is the field, the real product is the artifact,
   and it straddles the hard cut where lime becomes dark. ---- */
.hero.lime{background:var(--accent);text-align:center;padding:160px 0 64px;overflow:visible}
.hero.lime::before{display:none}
.hero.lime .hw{max-width:1236px;margin:0 auto;padding:0 20px}
.hero.lime .hwx{max-width:1236px;margin:0 auto;padding:0 20px}
.hero.lime h1{margin:0 auto;max-width:1440px;color:var(--ink);
  font-size:clamp(2.25rem,5vw,68px);line-height:.92;letter-spacing:-.05em;text-wrap:balance}
.hero.lime .sub{margin:26px auto 0;max-width:760px;text-wrap:pretty;color:rgba(24,35,2,.68);
  font-size:clamp(17px,1.6vw,22px);line-height:1.45}
.hero.lime .ctas{margin-top:32px;gap:16px}
.hero.lime .sub.seq{animation-delay:.06s}
.hero.lime .ctas.seq{animation-delay:.12s}
.hero.lime .btn.ink{background:var(--ink);color:var(--cream)}
@media(hover:hover) and (pointer:fine){
  .hero.lime .btn.ink:hover{transform:translateY(-1px)}}
.hero.lime .tlink{color:var(--ink);border-color:rgba(24,35,2,.45)}
.hero.lime .tlink:hover{color:var(--ink);background:rgba(24,35,2,.06)}
.hero.lime :focus-visible,.cut :focus-visible{outline-color:var(--ink)}

/* the cut: gradient tracks the slab height, lime top 62%, dark below */
.cut{position:relative;background:var(--accent)}
.cut::before{content:"";position:absolute;inset:auto 0 0 0;height:240px;background:var(--dark)}
.cut .hw{max-width:1180px;margin:0 auto;padding:0 20px;position:relative;z-index:1}
.slab{display:block;position:relative}
.slab .dash2{width:100%;display:block;border-radius:10px 10px 0 0;
  box-shadow:0 0 0 1px rgba(24,35,2,.10);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 90px),transparent);
  mask-image:linear-gradient(#000 calc(100% - 90px),transparent);
  transition:transform .25s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.slab:hover .dash2{transform:translateY(-4px)}}
.phoneov{position:absolute;right:max(-40px,calc((1180px - 100vw)/2));bottom:-40px;width:210px;z-index:2; /* right side so the sidebar feature list stays readable; overhang stays inside the page margin */
  /* the mockup PNG already carries its own bezel and transparent rounded corners,
     so no wrapper frame and no clip here — that was drawing a second device edge */
  background:none;padding:0;border-radius:0;box-shadow:none;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.32))}
.phoneov img{display:block;width:100%;border-radius:0}
.slabSeq{animation:slabUp .7s var(--ease-out) both;animation-delay:.25s}
@keyframes slabUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .slabSeq{animation:heroFade .45s var(--ease-out) both}
}
.darkgap{height:52px;background:var(--dark)}
@media(max-width:1023px){
  .hero.lime{text-align:center;padding-top:140px}
  .hero.lime h1{margin:0 auto}
  .hero.lime .sub{font-size:17px;margin-left:auto;margin-right:auto}
  .hero.lime .ctas{justify-content:center}
  .hero.lime .btn{min-height:52px}
  .cut{overflow:visible}
  .slab .dash2{width:100%;max-width:100%;margin-left:0;border-radius:10px 10px 0 0}
  .phoneov{display:none}
  .darkgap{height:32px}
}

.tlink{display:inline-flex;align-items:center;gap:8px;align-self:center;padding:13px 24px;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;
  font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:rgba(255,255,255,.75);transition:color .15s var(--ease-out),background .15s var(--ease-out)}
.tlink:hover{color:#fff;background:rgba(255,255,255,.07)}
.sec.cream .tlink,.ctas .tlink[style]{border-color:rgba(24,35,2,.24)}
.tlink .ar{transition:transform .25s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.tlink:hover .ar{transform:translateX(4px)}}



.sec{padding:112px 0}
.home .sec.cream + .sec.cream{padding-top:0}
.home .sec.cream + .sec.cream>.wrap{padding-top:80px;position:relative}
.home .sec.cream + .sec.cream>.wrap::before{content:"";position:absolute;left:20px;right:20px;top:0;border-top:1px solid var(--line)}
@media(min-width:640px){.home .sec.cream + .sec.cream>.wrap::before{left:32px;right:32px}}
@media(min-width:1024px){.home .sec.cream + .sec.cream>.wrap::before{left:48px;right:48px}}
.sec.cream{background:var(--cream)}
.sec.dark{color:#fff;position:relative;isolation:isolate;overflow:hidden;background:var(--dark)}
/* the export theme's own texture: fine dot grid on flat near-black */
.sec.dark.tornbg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(/images/bg-torn-bills.avif) center/cover no-repeat;opacity:.88;
  filter:blur(18px);transform:scale(1.12);/* scale hides the soft edge the blur leaves */
  -webkit-mask-image:radial-gradient(130% 110% at 50% 45%,#000 72%,transparent 99%);
  mask-image:radial-gradient(130% 110% at 50% 45%,#000 72%,transparent 99%)}
.sec.tornbg .sticky{position:relative!important;top:auto!important}
.sec.tornbg .sticky::before{content:"";position:absolute;inset:-60px -80px;z-index:-1;
  background:radial-gradient(85% 95% at 35% 50%,rgba(10,10,11,.62),rgba(10,10,11,.26) 60%,transparent 85%)}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.13em;color:var(--accent-tx)}
.sec.dark .kicker{color:var(--accent)}
.sec h2{margin-top:16px;font-weight:800;text-transform:uppercase;letter-spacing:-.04em;
  line-height:.95;font-size:clamp(1.9rem,3.6vw,48px);text-wrap:balance}
.sec .lede{margin-top:16px;max-width:620px;font-size:clamp(16px,1.4vw,19px);
  line-height:1.55;color:rgba(24,35,2,.62);font-weight:400}
.sec.dark .lede{color:rgba(255,255,255,.66)}

/* section head: headline left, lede right */
.sechead{display:grid;gap:24px}
@media(min-width:1024px){
  .sechead{grid-template-columns:1fr 1fr;align-items:end;gap:64px}
  .sechead .lede{margin-top:0;justify-self:end;max-width:540px;padding-bottom:6px}
}

/* two-column section head: text left, content right */
.cols2{display:grid;gap:48px}
.cols2>*{min-width:0}
/* the rails headline runs long, so it sits a step below the global h2 size */
.cols2 h2{font-size:clamp(1.6rem,2.9vw,40px)}
.trow>div{min-width:0}
.trow .l1{overflow:hidden;text-overflow:ellipsis}
@media(min-width:1024px){.cols2{grid-template-columns:5fr 7fr;gap:72px}
  .cols2 .sticky{position:sticky;top:120px;align-self:start}}

/* ---- door cards (home) ---- */
.doors{display:grid;gap:16px;margin-top:64px}
@media(min-width:900px){.doors{grid-template-columns:repeat(3,1fr)}}
.door{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r-lg);background:#fff;overflow:hidden;
  transition:border-color .25s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .door:hover{border-color:rgba(24,35,2,.28)}
  .door:hover .vis img,.door:hover .vis .term{transform:translateY(-8px) scale(1.02)}
  .door:hover .go .ar{transform:translateX(4px)}
}
.door .vis{position:relative;aspect-ratio:1.6;overflow:hidden;background:var(--dark2);
  display:flex;align-items:flex-end;justify-content:center}
.door .vis img{width:68%;position:relative;z-index:1;transform-origin:bottom center;
  transition:transform .45s var(--ease-out)}
.door .vis img.phone{width:78%;align-self:flex-start;margin:7% 0 0} /* cut lands just under Add/Send at every width */
.door .vis img.dash{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:left top;margin:0;border-radius:0;box-shadow:none}
.door .vis .term{position:relative;z-index:1;width:88%;align-self:center;border-radius:var(--r-sm);
  background:#000;border:1px solid rgba(255,255,255,.12);padding:14px 16px;text-align:left;
  font-family:var(--mono);font-size:12px;line-height:1.8;color:#e5e5e5;
  transition:transform .45s var(--ease-out)}
.door .vis .term .g{color:var(--accent)}
.door .vis .term .c{color:rgba(255,255,255,.55)}
.door .bd{display:flex;flex-direction:column;gap:0;padding:26px 26px 24px;flex:1}
.door .tag{margin-bottom:8px}
.door .tag{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--accent-tx)}
.door h3{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
.door p{font-size:15px;line-height:1.5;color:rgba(24,35,2,.7);flex:1;margin-top:8px;padding-bottom:22px}
.door .go-legacy{margin-top:auto;align-self:flex-start;position:relative;display:inline-flex;
  align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;
  border:1px solid rgba(24,35,2,.18);
  font-size:13.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
  transition:background .15s var(--ease-out),border-color .15s var(--ease-out),color .15s var(--ease-out)}
.door .go .ar{transition:transform .25s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .door:hover .go .ar{transform:translateX(4px)}}

/* ---- rails grid ---- */
#globe-mount .avvio-globe-wrap{margin:0 auto}
@media(min-width:1024px){#globe-mount{align-self:center}
  #globe-mount .avvio-globe-wrap{width:560px;height:560px;margin:-48px auto}}
.rail{display:flex;align-items:center;gap:12px;border:1px solid var(--wline);border-radius:var(--r-sm);
  padding:13px 15px;background:var(--dark3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  transition:transform .25s var(--ease-out),border-color .25s var(--ease-out)}
.rail .wm{display:flex;align-items:center;min-height:21px}
.rail .wordmark{height:14px;width:auto;filter:brightness(0) invert(1);opacity:.92}
@media(hover:hover) and (pointer:fine){
  .rail:hover{border-color:rgba(170,255,0,.4)}}
.rail img{width:26px;height:26px;border-radius:999px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.rail b{display:block;font-size:15px;font-weight:800;color:#fff;letter-spacing:-.01em}
.rail span{font-size:12px;color:rgba(255,255,255,.55)}
.rail .fast{color:var(--accent);font-weight:700}
.rails-note{margin-top:16px;font-size:13.5px;color:rgba(255,255,255,.55)}

/* rails as a ledger table: data, not boxes */
.rail .ic{width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:#fff;flex:0 0 26px;
  box-shadow:0 0 0 1px rgba(255,255,255,.14)}

/* ---- cobe globe (rules lifted from the export CSS, .avvio-globe-*) ---- */
.avvio-globe-wrap{position:relative;width:520px;height:520px;max-width:92vw;max-height:92vw;
  pointer-events:none;flex-shrink:0;margin:36px auto 0}
.avvio-globe-wrap canvas{width:100%;height:100%}
.avvio-globe-labels{position:absolute;inset:0;overflow:hidden}
.avvio-globe-label{position:absolute;transform:translate(-50%,-100%);background:#aaff00;color:#0a0f0a;
  font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--r-xs);white-space:nowrap;will-change:transform,opacity;transition:opacity .25s var(--ease-out)}
.avvio-globe-label:after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#aaff00}
.avvio-globe-dot{position:absolute;width:6px;height:6px;margin:-3px;border-radius:999px;
  background:#aaff00;box-shadow:0 0 0 3px rgba(170,255,0,.25)}

/* ---- stats band ---- */
.stats{display:grid;gap:0;margin-top:64px;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--wline);border-bottom:1px solid var(--wline)}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:32px 26px;border-left:0;display:flex;flex-direction:column;justify-content:flex-start}
.stat:first-child{border-left:0}
@media(max-width:899px){.stat:nth-child(3){border-left:0}.stat{padding:26px 18px 4px}}
.stat b{display:flex;align-items:flex-end;font-size:clamp(34px,3.8vw,52px);font-weight:800;letter-spacing:-.04em;
  color:#fff;font-variant-numeric:tabular-nums}
.stat b.ccy{font-size:clamp(19px,1.6vw,26px);line-height:1.15;padding-top:0;white-space:nowrap}
.stat .flr{display:flex;margin-bottom:10px}
.stat .flr img{width:26px;height:26px;border-radius:999px;object-fit:cover;
  box-shadow:0 0 0 2px var(--dark)}
.stat .flr img+img{margin-left:-9px}
.stat b em{font-style:normal;color:#fff}
.stat span{display:block;margin-top:8px;font-size:13.5px;color:rgba(255,255,255,.62)}

/* ---- mirrored pay / get-paid split ---- */
.split{display:grid;gap:16px;margin-top:64px}
@media(min-width:960px){.split{grid-template-columns:1fr 1fr}}
.half{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);padding:38px;
  background:#fff;overflow:hidden}
.half .dir{position:absolute;top:34px;right:34px;width:44px;height:44px;border-radius:999px;
  display:grid;place-items:center;background:rgba(170,255,0,.16);color:var(--accent-tx)}
.half.outb .dir{background:var(--ink);color:var(--accent)}
.half h3{font-size:clamp(24px,2.2vw,32px);font-weight:800;text-transform:uppercase;letter-spacing:-.04em;line-height:1.05}
.half .sub{margin-top:8px;max-width:88%;font-size:15px;color:rgba(24,35,2,.68)}
.half .fl{display:flex;gap:8px;margin-top:16px}
.half .fl img{width:26px;height:26px;border-radius:999px;object-fit:cover;
  box-shadow:0 0 0 2px #fff}
.half .fl img+img{margin-left:-6px}
.half ul{margin-top:24px;list-style:none;display:flex;flex-direction:column;gap:16px}
.half li{display:flex;gap:12px;font-size:15px;line-height:1.5}
.half li::before{content:"";flex:0 0 7px;height:7px;margin-top:8px;border-radius:999px;background:var(--accent-tx)}
.half li b{font-weight:700}

/* ---- ledger feed (payments page) ---- */
.ledger{border:1px solid var(--wline);border-radius:var(--r-md);padding:20px;align-self:start;
  background:linear-gradient(rgba(255,255,255,.035),rgba(255,255,255,.01))}
.ledger .cap{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.13em;color:rgba(255,255,255,.62);margin-bottom:12px}
.ledger .trows{min-height:288px}
.trow .dirIc{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;flex:0 0 26px;
  background:rgba(170,255,0,.13);color:var(--accent);font-size:13.5px}
.trow .dirIc.out{background:rgba(255,255,255,.08);color:#fff}

/* ---- payout run (mass payments) ---- */
.run{max-width:760px;margin:64px auto 0;border:1px solid var(--wline);border-radius:22px;
  background:linear-gradient(rgba(255,255,255,.035),rgba(255,255,255,.01));padding:22px;text-align:left}
.run .cap{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.run .cap b{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.01em}
.run .cap span{font-size:12px;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.run .rrow{display:flex;align-items:center;gap:12px;padding:10px 6px;border-top:1px solid rgba(255,255,255,.06)}
.run .rrow:first-of-type{border-top:0}
.run .rrow img{width:24px;height:24px;border-radius:999px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.run .who{font-size:13.5px;font-weight:700;color:#fff}
.run .via{font-size:12px;color:rgba(255,255,255,.55)}
.run .r{margin-left:auto;display:flex;align-items:center;gap:16px}
.run .amt{font-size:13.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.run .pill{min-width:76px;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;letter-spacing:.04em;
  border-radius:999px;padding:4px 10px;
  color:rgba(255,255,255,.6);background:rgba(255,255,255,.07);
  transition:background-color .25s var(--ease-out),color .25s var(--ease-out)}
.run .rrow.sent .pill{color:#fff;background:rgba(255,255,255,.16)}
.run .rrow.done .pill{color:var(--accent);background:rgba(170,255,0,.13)}
.run .pill .ck{width:0;height:10px;margin-right:0;stroke-dasharray:16;stroke-dashoffset:16;
  transition:width .25s var(--ease-out) .06s,margin-right .25s var(--ease-out) .06s,stroke-dashoffset .25s var(--ease-out) .06s}
.run .rrow.done .pill .ck{width:10px;margin-right:5px;stroke-dashoffset:0}
.run .plabel{font-style:normal}
.run .landed{font-style:normal;opacity:0;display:inline-block;margin-left:4px;transform:translateY(4px);
  transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
.run .rrow.done .landed{opacity:1;transform:none}
.run .rrow{transition:background-color .7s var(--ease-out);border-radius:var(--r-xs)}
.run .rrow.fresh{background-color:rgba(170,255,0,.045)}
.run .bar{height:3px;border-radius:999px;background:rgba(255,255,255,.08);margin-top:16px;overflow:hidden}
.run .bar i{display:block;height:100%;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-in-out)}
.run .bar i.snap{transition:none}
.run.resetting .pill,.run.resetting .landed,.run.resetting .bar i,.run.resetting .cap span{opacity:0;transition:opacity .45s var(--ease-out)}
.run.returning .pill,.run.returning .bar i,.run.returning .cap span{opacity:1;transition:opacity .45s var(--ease-out)}

/* ---- checklist / mechanics rows ---- */
.mech{margin-top:64px;display:flex;flex-direction:column}
.mech .row{display:grid;gap:8px;padding:26px 0;border-top:1px solid var(--line)}
@media(min-width:768px){.mech .row{grid-template-columns:300px 1fr;column-gap:32px;row-gap:8px}}
.mech .row:last-child{border-bottom:1px solid var(--line)}
.mech b{font-size:17px;font-weight:800;letter-spacing:-.01em}
.mech b .n{color:var(--accent-tx);margin-right:10px;font-variant-numeric:tabular-nums}
.mech p{font-size:15px;color:rgba(24,35,2,.62);max-width:640px}
.sec.dark .mech .row{border-color:var(--wline)}
.sec.dark .mech p{color:rgba(255,255,255,.74)}
.sec.dark .mech b .n{color:var(--accent)}

/* ---- vertical cards (mass payments) ---- */
.verts{display:grid;gap:16px;margin-top:64px}
@media(min-width:900px){.verts{grid-template-columns:repeat(3,1fr)}}
.vert{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:#fff;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .vert:hover{border-color:rgba(24,35,2,.28)}
  .vert:hover .ph img{transform:scale(1.04)}}
.vert .ph{display:block;height:170px;overflow:hidden}
.vert .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.vert .bd{padding:24px}
.vert .tag{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--accent-tx)}
.vert h3{margin-top:8px;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.vert p{margin-top:8px;font-size:15px;line-height:1.5;color:rgba(24,35,2,.66)}

/* ---- terminal (developers) ---- */
.termwrap{max-width:760px;margin:56px auto 0;text-align:left;padding-bottom:80px}
.term{border-radius:var(--r-md);background:#0e0e10;border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--sh-d2),0 0 0 1px rgba(170,255,0,.06);overflow:hidden}
.term .bar2{display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.term .bar2 i{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.14)}
.term .bar2 span{margin-left:8px;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.55)}
.term pre{padding:20px 22px;font-family:var(--mono);font-size:13.5px;line-height:1.85;
  color:#e5e5e5;white-space:pre-wrap;word-break:break-word;min-height:210px}
.term .g{color:var(--accent)}
.term .c{color:rgba(255,255,255,.52)}
.term .y{color:#ffd866}
.term .cur{display:inline-block;width:7px;height:15px;vertical-align:-2px;background:var(--accent);
  animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.term .cur{animation:none}}

/* ---- tool cards (developers, dark) ---- */
.tools{display:grid;gap:16px;margin-top:64px}
@media(min-width:900px){.tools{grid-template-columns:repeat(3,1fr)}}
.tool{border:1px solid var(--wline);border-radius:var(--r-lg);padding:28px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  transition:transform .25s var(--ease-out),border-color .25s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .tool:hover{transform:translateY(-4px);border-color:rgba(170,255,0,.35)}}
.tool .tag{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--accent)}
.tool h3{margin-top:8px;font-size:19px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.15}
.tool p{margin-top:8px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.52)}

/* ---- guarantees list on cream (same voice as the payments-page halves) ---- */
.checks{margin-top:32px;list-style:none;display:flex;flex-direction:column;gap:16px;max-width:560px}
.checks li{display:flex;gap:12px;font-size:15px;line-height:1.55;color:rgba(24,35,2,.75)}
.checks li::before{content:"";flex:0 0 8px;height:8px;margin-top:8px;border-radius:999px;background:var(--accent-tx);
  box-shadow:0 0 0 3px rgba(170,255,0,.25)}
.checks li b{color:var(--ink)}

/* ---- dark run panel on a cream field (artifact-on-field, like the slab) ---- */
.rundark{background:var(--dark3);border:1px solid var(--wline);border-radius:var(--r-lg);padding:10px;align-self:start;
  max-width:560px;width:100%;justify-self:center;
  box-shadow:var(--sh-3)}
.rundark .run{max-width:none;margin:0;border:0}
.rundark .run .rrow{padding:12px 8px}

/* ---- live demo iframe (business page) ---- */

/* ---- book-a-demo form (on the lime field) ---- */
.demoform{display:flex;flex-direction:column;gap:16px;max-width:520px;justify-self:center;width:100%}
.demoform label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:800;
  color:var(--ink);text-transform:uppercase;letter-spacing:.13em}
.demoform input,.demoform textarea{font:inherit;padding:13px 15px;border-radius:var(--r-sm);
  border:1px solid rgba(24,35,2,.22);background:#fff;color:var(--ink);resize:vertical}
.demoform input:focus-visible,.demoform textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.demoform button{margin-top:4px;align-self:flex-start;border:0;cursor:pointer}

/* ---- lime closing bookend ---- */
.sec.limeend{background:var(--accent)}
.sec.limeend h2{color:var(--ink)}
.sec.limeend .btn.ink{background:var(--ink);color:var(--cream)}
.sec.limeend .btn.d{border-color:rgba(24,35,2,.3);color:var(--ink)}
.sec.limeend :focus-visible{outline-color:var(--ink)}

/* ---- closing CTA ---- */
.close{padding:130px 0;text-align:center}
.close h2{font-size:clamp(2rem,4.4vw,58px)}
.close .ctas{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.close .under{margin-top:16px;font-size:13.5px;color:rgba(24,35,2,.66)}
.sec.dark .close .under{color:var(--tx-mute)}

/* ---- footer ---- */
footer{background:var(--dark);color:rgba(255,255,255,.62);padding:64px 0 44px;font-size:15px;
  border-top:1px solid var(--wline)}
footer .cols{display:grid;gap:36px 48px;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){footer .cols{grid-template-columns:2.2fr 1fr 1fr 1.2fr .9fr}}
/* FAQ on the cream field after a dark section: keep the house rows, drop the extra top gap */
#faq .faq-side{margin-top:0}
#faq .faq p{max-width:none}
@media(max-width:1023px){#faq .faq-side{margin-top:8px}}
footer h3{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.13em;
  color:rgba(255,255,255,.55);margin-bottom:14px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:0}
footer li a{display:inline-block;padding:13px 0}
footer a{transition:color .15s var(--ease-out)}
footer a:hover{color:#fff}
footer .logo img{height:28px;filter:invert(1)}
footer .fnote{margin-top:16px;max-width:280px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.52)}
footer .legal{margin-top:48px;padding-top:26px;border-top:1px solid var(--wline);
  font-size:13.5px;color:rgba(255,255,255,.52);line-height:1.7}

.rail .brandic{width:26px;height:26px;border-radius:var(--r-xs);flex:0 0 26px}

/* brand tiles: app-icon convention for the non-flag rails */
.rail .tile{width:26px;height:26px;border-radius:var(--r-xs);background:#fff;flex:0 0 26px;
  display:grid;place-items:center;box-shadow:0 0 0 1px rgba(255,255,255,.12)}

/* hero proof strip: ink marks on the lime field */

/* settled toast: one payment lands on the slab, once */
.settletoast{position:absolute;right:36px;top:-26px;z-index:3;display:flex;align-items:center;gap:8px;
  background:#0c0c0d;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 14px;
  box-shadow:var(--sh-3);
  animation:toastIn .6s var(--ease-out) 1.4s both}
.settletoast img{width:22px;height:22px;border-radius:999px}
.settletoast .st-l{display:flex;flex-direction:column;line-height:1.25}
.settletoast .st-l b{font-size:13.5px;color:#fff;font-weight:700}
.settletoast .st-l i{font-style:normal;font-size:12px;color:rgba(255,255,255,.55)}
.settletoast .st-chip{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:none;
  color:var(--accent);background:rgba(170,255,0,.13);border-radius:999px;padding:3px 9px}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.settletoast{animation:heroFade .45s var(--ease-out) 1s both}}
@media(max-width:820px){.settletoast{display:none}}

/* developers use-case grid: trigger line in the product's own language */
.ucgrid{grid-template-columns:1fr}
@media(min-width:600px){.ucgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.ucgrid{grid-template-columns:repeat(3,1fr)}}
.tool{min-width:0}
.tool .uc{max-width:100%;overflow-wrap:anywhere}
.tool .uc{display:inline-block;font-family:var(--mono);font-size:12px;color:var(--accent);
  background:rgba(170,255,0,.08);border:1px solid rgba(170,255,0,.18);border-radius:var(--r-xs);
  padding:5px 10px;margin-bottom:14px}

/* ==== business page (native rebuild) ==== */
.home .wrap.wide{max-width:1440px}
.hero.biz{padding:158px 0 84px;isolation:isolate}
.hero.biz::before{inset:0;height:auto;background:
  radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.2px) 0 0/26px 26px,
  radial-gradient(ellipse 55% 45% at 50% 110%,rgba(170,255,0,.10),transparent 70%);
  -webkit-mask-image:linear-gradient(#000 84%,transparent);
  mask-image:linear-gradient(#000 84%,transparent)}
.hero.biz::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background-image:var(--grain);opacity:.05;mix-blend-mode:screen}
.hero.biz h1{font-size:clamp(2.25rem,5vw,68px)}
.hero.biz .sub{max-width:1030px;text-wrap:initial}
@media(max-width:479px){.hero.biz h1{font-size:34px;line-height:.98;letter-spacing:-.04em}}
.hero.biz .sub b{color:#fff;font-weight:600}
@media(max-width:1023px){.hero.biz .sub br{display:none}}

/* ---- four-bundle accordion: one open, pane crossfade ---- */
.bundles{display:grid;gap:48px;margin-top:72px;align-items:center;text-align:left}
@media(min-width:1024px){.bundles{grid-template-columns:5fr 7fr;gap:64px}}
.blist{border-bottom:1px solid var(--wline)}
.bit{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font:inherit;color:#fff;border-top:1px solid var(--wline);padding:18px 4px}
.bit .bt{display:flex;align-items:center;gap:8px;
  font-size:clamp(17px,1.6vw,22px);font-weight:700;letter-spacing:-.01em}
.bit .bt::before{content:"";flex:0 0 6px;height:6px;border-radius:999px;background:var(--accent);
  opacity:0;transition:opacity .25s var(--ease-out)}
.bit[aria-expanded="true"] .bt::before{opacity:1}
.bit .bb{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s var(--ease-out)}
.bit[aria-expanded="true"] .bb{grid-template-rows:1fr}
.bit .bb>span{overflow:hidden;visibility:hidden;transition:visibility 0s linear .25s;display:block;min-height:0}
.bit[aria-expanded="true"] .bb>span{visibility:visible;transition-delay:0s}
.bit .bp{display:block;padding:8px 0 2px 16px;font-size:15px;line-height:1.55;
  color:rgba(255,255,255,.62)}
.bpanes{display:grid;background:var(--ink);border-radius:var(--r-md);padding:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.bpanes > img{grid-area:1/1;width:100%;height:auto;aspect-ratio:2632/1400;border-radius:var(--r-sm);
  opacity:0;transform:translateY(10px);
  transition:opacity .25s var(--ease-out),transform 0s .25s}
.bpanes > img.on{opacity:1;transform:none;
  transition:opacity .45s var(--ease-out) .06s,transform .45s var(--ease-out) .06s}
@media(prefers-reduced-motion:reduce){.bit .bb,.bit .bt::before,.bpanes > img,.bpanes > img.on{transition:none}}

/* ---- five providers collapse into the one ink account card (cream) ---- */
.collapse{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:64px}
.collapse .chips{display:flex;flex-direction:column;gap:8px;align-items:flex-end;flex:0 0 auto}
.collapse .chips span{font-size:13.5px;font-weight:600;color:rgba(24,35,2,.65);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:#fff;
  white-space:nowrap;text-decoration:line-through;
  text-decoration-color:rgba(24,35,2,.35);text-decoration-thickness:1px}
.collapse>svg{flex:0 0 auto}
.collapse .one{flex:1;min-width:0;background:var(--ink);border-radius:var(--r-lg);padding:30px 32px;
  box-shadow:var(--sh-3)}
.collapse .one .oh{display:flex;align-items:center;gap:12px;padding-bottom:20px}
.collapse .one .oh img{height:22px;width:auto;filter:invert(1)}
.collapse .one .oh b{font-size:13.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent)}
.collapse .one .orow{padding:18px 0;border-top:1px solid var(--wline)}
.collapse .one .orow:last-child{padding-bottom:2px}
.collapse .one .orow b{display:block;font-size:15px;font-weight:800;color:#fff;letter-spacing:-.01em}
.collapse .one .orow p{margin-top:4px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.62)}
@media(max-width:899px){
  .collapse{flex-direction:column;gap:16px}
  .collapse .chips{align-items:center}
  .collapse>svg{transform:rotate(90deg);height:48px}
  .collapse .one{width:100%}}

/* ---- six capability props: three columns of numbered mech rows (dark) ---- */
@media(min-width:900px){
  .mech.grid3{display:grid;grid-template-columns:repeat(3,1fr);column-gap:64px}
  .mech.grid3 .row{grid-template-columns:1fr}
  .sec.dark .mech.grid3 .row:nth-last-child(-n+3){border-bottom:1px solid var(--wline)}}

/* ---- trust rows: the lime mark from .checks, on the dark field ---- */
.trustmech .row b{display:flex;gap:12px;align-items:baseline}
.trustmech .row b::before{content:"";flex:0 0 8px;height:8px;border-radius:999px;
  background:var(--accent);box-shadow:0 0 0 3px rgba(170,255,0,.22);transform:translateY(-1px)}

/* ---- segment ledger: the money each segment actually moves ---- */
.lrows{display:block;padding:16px;border-bottom:1px solid var(--line);
  background:linear-gradient(rgba(24,35,2,.035),rgba(24,35,2,.01))}
.lrow{display:flex;align-items:center;gap:8px;padding:9px 2px;min-width:0}
.lrow+.lrow{border-top:1px solid var(--line)}
.lrow img{width:22px;height:22px;border-radius:999px;flex:0 0 22px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(24,35,2,.1)}
.lrow>span{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.lrow .who{font-size:13.5px;font-weight:700;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .via{font-size:12px;color:rgba(24,35,2,.66)}
.lrow .amt{margin-left:auto;flex:0 0 auto;font-size:13.5px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- demo form status + honeypot + anchor offset ---- */
.demoform .fmsg{margin:2px 0 0;font-size:15px;line-height:1.5;color:rgba(24,35,2,.78)}
.demoform .fmsg:empty{display:none}
.demoform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#request-access{scroll-margin-top:96px}

/* ---- six props: digestible icon grid on the dark field ---- */
.props{display:grid;gap:52px 64px;margin-top:72px}
@media(min-width:900px){.props{grid-template-columns:repeat(3,1fr)}}
.prop svg{width:26px;height:26px;color:rgba(255,255,255,.82)}
.prop h3{margin-top:16px;font-size:19px;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
.prop p{margin-top:8px;font-size:15px;line-height:1.55;color:rgba(24,35,2,.7);max-width:340px}
.sec.dark .prop p{color:rgba(255,255,255,.62)}

/* ---- demo form on the dark field ---- */
.sec.dark .demoform.darkform label{color:#fff}
.demoform.darkform input,.demoform.darkform textarea{background:var(--dark2);
  border-color:rgba(255,255,255,.14);color:#fff}
.demoform.darkform input::placeholder,.demoform.darkform textarea::placeholder{color:var(--tx-mute)}
.demoform.darkform input:focus-visible,.demoform.darkform textarea:focus-visible{outline-color:var(--accent)}
.demoform.darkform .fmsg{color:rgba(255,255,255,.75)}


/* ---- collapse choreography: strike, converge, assert (one-shot via .in) ---- */
.collapse .chips span{position:relative;text-decoration:none}
.collapse .chips span::after{content:"";position:absolute;left:14px;right:14px;top:50%;
  height:1px;background:rgba(24,35,2,.35);transform:scaleX(0);transform-origin:left}
.collapse svg path{stroke-dasharray:1;stroke-dashoffset:1}
.collapse .one>*{opacity:0;transform:translateY(8px)}
.collapse.in .chips span::after{transform:scaleX(1);transition:transform .25s var(--ease-out)}
.collapse.in .chips span:nth-child(1)::after{transition-delay:.08s}
.collapse.in .chips span:nth-child(2)::after{transition-delay:.12s}
.collapse.in .chips span:nth-child(3)::after{transition-delay:.15s}
.collapse.in .chips span:nth-child(4)::after{transition-delay:.20s}
.collapse.in .chips span:nth-child(5)::after{transition-delay:.25s}
.collapse.in svg path{stroke-dashoffset:0;transition:stroke-dashoffset .45s var(--ease-out)}
.collapse.in svg path:nth-child(1){transition-delay:.20s}
.collapse.in svg path:nth-child(2){transition-delay:.23s}
.collapse.in svg path:nth-child(3){transition-delay:.25s}
.collapse.in svg path:nth-child(4){transition-delay:.29s}
.collapse.in svg path:nth-child(5){transition-delay:.32s}
.collapse.in .one>*{opacity:1;transform:none;
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.collapse.in .one>:nth-child(1){transition-delay:.15s}
.collapse.in .one>:nth-child(2){transition-delay:.25s}
.collapse.in .one>:nth-child(3){transition-delay:.30s}
.collapse.in .one>:nth-child(4){transition-delay:.36s}
@media(prefers-reduced-motion:reduce){
  .collapse .chips span::after{transform:none;transition:none!important}
  .collapse svg path{stroke-dashoffset:0;transition:none!important}
  .collapse .one>*{opacity:1;transform:none;transition:none!important}
}

/* ---- segment ledgers: rows settle like payments ---- */
.vert[data-rv] .lrow{opacity:0;transform:translateY(6px)}
.vert.in .lrow{opacity:1;transform:none;
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.vert.in .lrow:nth-child(1){transition-delay:.15s}
.vert.in .lrow:nth-child(2){transition-delay:.27s}
.vert.in .lrow:nth-child(3){transition-delay:.39s}
@media(prefers-reduced-motion:reduce){
  .vert[data-rv] .lrow{opacity:1;transform:none;transition:none}
}

/* ---- accordion: auto-advance progress hairline + hover answer ---- */
.bit{position:relative}
[data-bundles][data-auto] .bit[aria-expanded="true"]::before{content:"";position:absolute;
  left:0;top:-1px;width:100%;height:1px;background:var(--accent);opacity:.5;
  transform:scaleX(0);transform-origin:left;animation:bprog 5.5s linear both}
@keyframes bprog{to{transform:scaleX(1)}}
.bit .bt{transition:transform .25s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .bit:not([aria-expanded="true"]):hover .bt{transform:translateX(3px)}
  .bit:not([aria-expanded="true"]):hover .bt::before{opacity:.35}
}
@media(prefers-reduced-motion:reduce){
  [data-bundles][data-auto] .bit[aria-expanded="true"]::before{animation:none}
  .bit .bt{transition:none}
}

/* ---- demo form feedback ---- */
.demoform input,.demoform textarea{transition:border-color .15s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .demoform.darkform input:hover,.demoform.darkform textarea:hover{border-color:rgba(255,255,255,.28)}}
@keyframes fmsgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.demoform .fmsg.ok{animation:fmsgIn .45s var(--ease-out) both}
@keyframes fmsgShake{20%{transform:translateX(-4px)}45%{transform:translateX(3px)}70%{transform:translateX(-2px)}}
.demoform .fmsg.err{animation:fmsgShake .25s var(--ease-out)}
@keyframes fmsgFade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .demoform .fmsg.ok{animation:fmsgFade .25s var(--ease-out) both}
  .demoform .fmsg.err{animation:none}
}

/* ---- trust dots settle ---- */
.trustmech .row b::before{transform:translateY(-1px) scale(.4);
  transition:transform .25s var(--ease-spring) .12s}
.trustmech .row.in b::before{transform:translateY(-1px) scale(1)}
@media(prefers-reduced-motion:reduce){
  .trustmech .row b::before{transform:translateY(-1px);transition:none}}

/* ---- reduced motion: no smooth full-page jumps ---- */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ==== design-sweep punch list (type, spacing, alignment, states) ==== */
/* T0-1: props headline never clips; T1-4: two h2 tiers, no inline sizes */
.sec.dark .props-h2{text-wrap:balance}
/* T0-2: mobile nav override actually wins; 44px targets */
/* superseded by the full-screen mobile menu below */
/* T1-6: secheads align on the last baseline, not box bottoms */
@media(min-width:1024px){
  .sechead{align-items:end;align-items:last baseline}
  .sechead .lede{padding-bottom:0}
}
/* T1-7/13: heading leading + accordion title joins the 800 family */
.prop h3{line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.bit .bt{font-size:clamp(17px,1.5vw,20px);font-weight:800}
/* T1-8: one body size for one role */
.mech p{font-size:15px;line-height:1.55}
.vert p{font-size:15px;line-height:1.55}
/* T1-9: one eyebrow treatment */
.vert .tag{font-size:12px;letter-spacing:.13em}
footer h3{letter-spacing:.13em}
.demoform label{font-size:12px;letter-spacing:.13em}
/* T1-10: fields stop inheriting label type; no iOS zoom */
.demoform input,.demoform textarea{font:400 16px/1.5 var(--font);letter-spacing:normal;
  text-transform:none;padding:12px 15px;border-radius:var(--r-sm)}
/* T1-11: measures */
.collapse .one .orow p{max-width:62ch}
footer .legal{max-width:none;font-size:12px;line-height:1.6;text-wrap:pretty}
/* T1-12: trust rows stack; dot is the true left edge */
.trustmech .row{grid-template-columns:1fr;row-gap:8px}
.trustmech .row p{padding-left:20px;max-width:58ch}
/* T1-14: seller counts in tabular figures */
.lrow .who{font-variant-numeric:tabular-nums}
/* T2-15/16: one head-to-content gap; grid rows breathe like columns */
.props{margin-top:64px;gap:64px}
.verts{margin-top:64px}
.bundles{margin-top:64px}
/* T2-17: dark meets dark on a hairline, not 224px of void */
.home .sec.dark + .sec.dark{padding-top:0}
.home .sec.dark + .sec.dark>.wrap{padding-top:80px;border-top:1px solid var(--wline)}
#request-access{padding-bottom:72px}
/* T2-18/19: mobile header clearance + h1 scale */
@media(max-width:767px){
  .hero.biz{padding-top:176px}
  #request-access{scroll-margin-top:148px}
}
/* T2-20: slack pools in the ledger, not under short copy */
.vert{display:flex;flex-direction:column}
.lrows{flex:1;display:flex;flex-direction:column;justify-content:center}
/* T2-21/23: form sits on the column spine; on-scale gaps */
.demoform{justify-self:start;gap:24px}
.demoform label{gap:8px}
/* T3-24: one left edge inside the ledger card; full-bleed hairlines */
.lrows{padding:8px 0}
.lrow{padding:9px 24px}
/* T3-25/26: the connector touches what it connects */
.collapse{gap:0}
.collapse>svg{flex:0 0 64px;width:64px}
.collapse .chips span{line-height:18px}
@media(max-width:899px){
  .collapse{gap:24px}
  .collapse>svg{display:none}
  .collapse .chips{position:relative;padding-bottom:24px}
  .collapse .chips::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:24px;background:rgba(24,35,2,.3)}
}
/* T3-27: optical size correction on the odd icons */
/* T3-28: header rests on the page spine; state carried by bg+shadow */
/* T4-29: resting shadow so hover growth reads as light */
/* T4-30: focus rings visible on lime and white */
.sec.dark .btn.p:focus-visible,.hero .btn.p:focus-visible,.hdr-cta:focus-visible{outline-color:#fff}
.sec.cream .btn.p:focus-visible,.sec.limeend .btn.p:focus-visible{outline-color:var(--ink)}
.hdr-nav a.on:focus-visible{outline-color:var(--ink)}
/* T4-31: footer links get real hit areas */
footer li a{display:block}
/* T4-32: reserve the tallest description; the hero never twitches */
@media(min-width:1024px){.bit .bp{min-height:3lh}}
/* T4-34: progress hairline belongs to the open item */
[data-bundles][data-auto] .bit[aria-expanded="true"]::before{top:auto;bottom:-1px}
/* T4-35: texture survives into the section's bottom padding */
.sec.dark::before{-webkit-mask-image:linear-gradient(#000 90%,transparent);mask-image:linear-gradient(#000 90%,transparent)}

/* ==== full-site audit fixes ==== */
/* sub-page heroes share one bottom padding (inline styles removed) */
.hero.sub-page{padding-bottom:88px}
/* home closing bookend loses its inline sizes */
.sec.limeend.close{padding:88px 0}
/* six props: numbered spec list, no icon salad */
.prop .n{display:block;font-size:13.5px;font-weight:800;letter-spacing:.04em;
  color:var(--accent-tx);font-variant-numeric:tabular-nums}
.sec.dark .prop .n{color:var(--accent)}
/* inline code chip (developers lede) */
.lede code{font-family:var(--mono);font-size:.85em;color:var(--ink);
  background:rgba(24,35,2,.06);padding:2px 7px;border-radius:var(--r-xs)}
.lede a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* stacked mech rows (developers, payments) replace inline grid overrides */
.mech.stack .row{grid-template-columns:1fr}
/* payments: live cap dot matches the home ticker pulse */
.ledger .cap i{width:7px;height:7px;border-radius:999px;background:var(--accent);
  animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.ledger .cap i{animation:none}}
/* payments: both direction pucks share the ink weight */
.half .dir,.half.outb .dir{background:var(--ink);color:var(--accent)}
/* darkform labels are field labels, not eyebrows */
.demoform.darkform label{font-size:13.5px;font-weight:700;text-transform:none;
  letter-spacing:normal;color:rgba(255,255,255,.8)}

/* ---- partners band + marquees --------------------------------------------
   Two auto-scrolling rows: the partner logos and the payout networks. Each
   track carries the same set twice, so animating it to -50% loops seamlessly
   with no visible seam or reset. Slow on purpose: it should read as ambient
   motion, not a slideshow demanding attention. ---- */
.partners{background:var(--dark);padding:38px 0 42px}
/* band and next section share a background, so the full .sec pad reads as dead space */
.home .partners + .sec{padding-top:74px}
.pcap{text-align:center;font-size:12px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tx-mute);margin:0 0 34px;padding:0 20px}

.mq{position:relative;overflow:hidden}
.mq-track{display:flex;width:max-content;animation:mqscroll var(--mq-dur,64s) linear infinite}
.mq-set{display:flex;align-items:center;flex:0 0 auto}
@keyframes mqscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(hover:hover) and (pointer:fine){.mq:hover .mq-track{animation-play-state:paused}}
/* edge fades so items enter and leave the field instead of being chopped off */
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;
  width:clamp(48px,10vw,170px);z-index:2;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--dark) 12%,transparent)}
.mq::after{right:0;background:linear-gradient(270deg,var(--dark) 12%,transparent)}

.plogos{gap:clamp(46px,6vw,88px);padding-right:clamp(46px,6vw,88px)}
.plogos img{height:24px;width:auto;flex:0 0 auto;
  filter:brightness(0) invert(1);opacity:.55;
  transition:opacity .25s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.plogos img:hover{opacity:1}}

.rails-cap{margin:56px 0 16px;font-size:12px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tx-mute)}

/* honour the OS setting: no drift, just a normal swipeable strip */
@media(prefers-reduced-motion:reduce){
  .mq{overflow-x:auto;scrollbar-width:none}
  .mq::-webkit-scrollbar{display:none}
  .mq-track{animation:none}
  .mq-set[aria-hidden="true"]{display:none}
}

/* ---- rails grid: one card per way money can land ------------------------
   Three lines of decreasing weight (where / which network / what you need
   from the recipient) plus the settlement currency held right. The third
   line is the one that earns the card: it turns a list of scheme names into
   something you can act on. ---- */
/* two stacked rows drifting opposite ways: enough motion to read as one
   moving system, slow enough that any single card stays readable */
.railmq{display:flex;flex-direction:column;gap:8px;--mq-dur:96s}
.railmq .mq-track.rev{animation-direction:reverse}
/* stretch, not center: a card whose identifier line wraps sets the row
   height and every sibling matches it */
.railset{gap:8px;padding-right:10px;align-items:stretch}
.railset .rail{flex:0 0 auto;width:248px}
.rail{align-items:flex-start;gap:12px;padding:15px 15px 14px}
.rail>img,.rail>.tile,.rail>.brandic{margin-top:4px}
.rl{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.rail .rnet{font-size:12px;color:rgba(255,255,255,.62);line-height:1.35}
.rail .rneed{font-size:12px;color:var(--tx-mute);line-height:1.35;text-wrap:pretty}
.rail{position:relative}
.rccy{position:absolute;top:14px;right:14px;
  font-size:12px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.06);border:1px solid var(--wline);
  border-radius:999px;padding:3px 8px;font-variant-numeric:tabular-nums}
.rl b{padding-right:48px}
@media(hover:hover) and (pointer:fine){
  .rail:hover .rneed{color:rgba(255,255,255,.62)}
  .rail:hover .rccy{color:var(--accent);border-color:rgba(170,255,0,.35)}}

/* ---- partner-program band on the home page ----
   Sits between the payout close and the final CTA: a second, different ask
   for readers who won't buy but can introduce someone who will. */
.pband-in{display:grid;gap:48px;align-items:center}
@media(min-width:980px){.pband-in{grid-template-columns:1.15fr .85fr;gap:72px}}
.pband h2{text-wrap:balance}
.pband-stats{display:grid;gap:0;border-top:1px solid var(--wline)}
.pband-stats>div{padding:20px 0;border-bottom:1px solid var(--wline)}
.pband-stats b{display:block;font-size:17px;font-weight:800;color:#fff;letter-spacing:-.01em}
.pband-stats span{display:block;margin-top:4px;font-size:13.5px;color:rgba(255,255,255,.58)}

/* three-up stats (partner program) and a tighter band for a lone stats row */
.stats.three{grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.stats.three{grid-template-columns:repeat(3,1fr)}}
@media(max-width:899px){.stats.three .stat:nth-child(3){border-left:0}}
.sec.band{padding:66px 0}
.sec.band .stats{margin-top:0}

/* ---- partner earnings calculator ---- */
.calc{display:grid;gap:0;margin-top:64px;border:1px solid var(--wline);
  border-radius:var(--r-lg);overflow:hidden;background:var(--dark2)}
@media(min-width:900px){.calc{grid-template-columns:1.25fr .75fr}}
.calc-ctl{padding:34px 32px 30px;display:flex;flex-direction:column;gap:24px}
.crow{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:8px}
.clab{font-size:13.5px;color:rgba(255,255,255,.62)}
.cval{font-size:19px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.crow input[type=range]{grid-column:1/-1;-webkit-appearance:none;appearance:none;
  width:100%;height:4px;border-radius:999px;margin-top:12px;cursor:pointer;
  background:linear-gradient(90deg,var(--accent) var(--fill,50%),rgba(255,255,255,.14) var(--fill,50%))}
.crow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:999px;background:var(--accent);
  border:3px solid var(--dark2);box-shadow:0 0 0 1px rgba(170,255,0,.5);cursor:grab}
.crow input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:999px;
  background:var(--accent);border:3px solid var(--dark2);cursor:grab}
.crow input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.crate{align-items:center}
.rates{display:flex;gap:8px}
.rate-pill{font-size:13.5px;font-weight:800;padding:5px 12px;border-radius:999px;
  border:1px solid var(--wline);color:var(--tx-mute);transition:all .25s var(--ease-out);
  /* the pills are real buttons now (tapping one picks that rate), so reset the UA styles */
  background:transparent;font-family:inherit;line-height:inherit;cursor:pointer}
.rate-pill.active{background:var(--accent);border-color:var(--accent);color:#000}
.rate-pill:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* fingers need a bigger target than a mouse: Apple's 44px minimum */
@media(pointer:coarse){.rate-pill{min-height:44px;padding:10px 18px}}
.calc-note{font-size:13.5px;line-height:1.5;color:var(--tx-mute);text-wrap:pretty}
.calc-out{padding:34px 32px;display:flex;flex-direction:column;justify-content:center;
  background:var(--ink);border-top:1px solid var(--wline)}
@media(min-width:900px){.calc-out{border-top:0;border-left:1px solid var(--wline)}}
.calc-cap{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent)}
.calc-big{display:block;margin-top:8px;font-size:clamp(36px,4.4vw,54px);font-weight:800;
  letter-spacing:-.04em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.calc-per{margin-top:8px;font-size:13.5px;color:rgba(255,255,255,.55)}
.calc-sub{margin-top:16px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.66);text-wrap:pretty}

/* ---- chip questions on the partner application ---- */
.qgrp{border:0;padding:0;margin:0}
.qgrp legend{font-size:13.5px;font-weight:700;color:rgba(255,255,255,.8);
  padding:0;margin-bottom:11px;line-height:1.4}
.qgrp legend i{font-style:normal;font-weight:400;color:var(--tx-mute)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;margin:0}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-block;font-size:13.5px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--wline);background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.72);cursor:pointer;transition:all .15s var(--ease-out)}
.chip input:checked+span{background:var(--accent);border-color:var(--accent);
  color:#000;font-weight:700}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
@media(hover:hover) and (pointer:fine){
  .chip input:not(:checked)+span:hover{border-color:rgba(255,255,255,.28);color:#fff}}
.partnerform{gap:24px}

/* ---- FAQ disclosure list ---- */
.faq{margin-top:64px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  margin-top:-7px;border-right:2px solid rgba(24,35,2,.45);border-bottom:2px solid rgba(24,35,2,.45);
  transform:rotate(45deg);transition:transform .25s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-3px}
.faq details p{padding:0 44px 24px 0;font-size:15px;line-height:1.6;
  color:rgba(24,35,2,.72);max-width:76ch;text-wrap:pretty}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:-3px;border-radius:var(--r-xs)}
.faq-foot{margin-top:32px;font-size:15px;color:rgba(24,35,2,.66)}
.faq-foot a{font-weight:700;text-decoration:underline;text-underline-offset:3px;color:inherit}

/* the partner band now closes the page: give it closing presence so it does
   not read as a mid-page band that ran into the footer */
.home .pband{padding-bottom:104px}

/* ==== calm variant: flat fields, pill kickers, left-aligned business hero, stats
   band, product cards. House type (Open Sans 800 caps) untouched. Scoped to body.calm so the other /new pages keep the
   display system; add the class to another page's <body> to roll it out. ==== */
@media(min-width:1024px){body.calm .sechead{grid-template-columns:1.15fr 1fr}}
body.calm .pcard{min-height:260px}
body.calm .sec .lede{line-height:1.6}
body.calm .sec.dark .kicker{color:rgba(255,255,255,.8)}
/* flat fields: no grain, dot grid or torn bills behind text */
body.calm .hero.biz::after,body.calm .sec::after,body.calm footer::after,
body.calm .sec.dark::before,body.calm .sec.dark.tornbg::before,body.calm .sec.tornbg .sticky::before{display:none}
body.calm .hero.biz::before{background:radial-gradient(ellipse 55% 45% at 50% 110%,rgba(170,255,0,.08),transparent 70%)}
body.calm .sec{padding:128px 0}
/* hero: centered like the home page, short measure, product framed in a neutral card */
body.calm .hero.biz{padding:160px 0 96px}
/* dashboard window sits 200px higher (was 64px below the CTAs) — scoped to the
   business hero so the home page window keeps its own spacing */
/* The -36px pull only works where the window is tilted (>=1024px): rotateX(7deg)
   about its bottom edge drops the visible top edge ~40px, so the layout overlap
   reads as a hairline gap under the CTAs. From 768-1023px the tilt is off
   (transform:none below 1024), so the same pull put the window straight over the
   buttons — that band gets a real gap instead.
   The tilt's drop grows with the window (~31px at 1024, ~43px once the wrap caps
   out at 1236), so the pull steps up with it rather than clipping the buttons on
   a 13" laptop. */
@media(min-width:768px) and (max-width:1023px){.hero.biz .bundles{margin-top:24px}}
@media(min-width:1024px){.hero.biz .bundles{margin-top:-24px}}
@media(min-width:1280px){.hero.biz .bundles{margin-top:-36px}}
body.calm .hero.biz .sub{margin:24px auto 0;max-width:820px;text-wrap:balance;font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:rgba(255,255,255,.7)}
body.calm .hero.biz .sub br{display:none}
body.calm .hero.biz .ctas{margin-top:32px}
@media(max-width:1023px){body.calm .hero.biz h1 br{display:none}}
body.calm .bundles{margin-top:96px}
/* hero product tabs: a pill row, one caption, the product shot full width beneath.
   Same markup and site.js as the old accordion; only the CSS changed. */
body.calm .bundles{grid-template-columns:1fr;justify-items:center;text-align:center;gap:0;margin-top:64px}
body.calm .blist{position:relative;display:flex;gap:4px;padding:5px;border:0;border-radius:999px;
  background:rgba(255,255,255,.06);width:max-content;max-width:100%;margin:0 auto 92px}
body.calm .bit{position:static;width:auto;border:0;padding:11px 18px;border-radius:999px;color:rgba(255,255,255,.72);
  transition:background-color .25s var(--ease-out),color .25s var(--ease-out)}
body.calm .bit .bt{font-size:15px;font-weight:700;letter-spacing:0;gap:0}
body.calm .bit .bt::before{display:none}
body.calm .bit[aria-expanded="true"]{background:#fff;color:var(--ink)}
@media(hover:hover) and (pointer:fine){body.calm .bit:not([aria-expanded="true"]):hover{background:rgba(255,255,255,.08);color:#fff}
  body.calm .bit:not([aria-expanded="true"]):hover .bt{transform:none}}
body.calm [data-bundles][data-auto] .bit[aria-expanded="true"]::before{display:none}
body.calm .bit .bb{position:absolute;left:50%;top:calc(100% + 22px);width:min(640px,calc(100vw - 48px));transform:translateX(-50%)}
body.calm .bit .bp{padding:0;font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:rgba(255,255,255,.66);text-align:center}
body.calm .bpanes{padding:0;background:none;border:0;position:relative;isolation:isolate;width:100%}
body.calm .bpanes > img,body.calm .bpanes > video{display:block;width:100%;height:auto;border-radius:var(--r-md);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
@media(max-width:767px){
  body.calm .blist{max-width:calc(100vw - 40px);overflow-x:auto;scrollbar-width:none;margin-bottom:96px}
  body.calm .bit .bb{top:calc(100% + 16px)}
  body.calm .blist::-webkit-scrollbar{display:none}
  body.calm .bit{padding:10px 14px;flex:0 0 auto}
  body.calm .bit .bt{font-size:13.5px;white-space:nowrap}}
 /* bleeds toward the viewport edge; the hero clips it */
}
/* stats band under the hero */
body.calm .statsband{padding:0}
body.calm .statsband .stats{margin-top:0;padding:40px 0 48px;border-top:1px solid var(--wline)}
@media(min-width:900px){body.calm .statsband .stats{grid-template-columns:1.4fr 1fr 1fr 1fr}}
body.calm .statsband .statlead{padding:32px 26px 32px 0}
body.calm .statlead{max-width:340px;font-size:clamp(16px,1.4vw,19px);line-height:1.4;font-weight:500;letter-spacing:-.01em;color:#fff}
/* six props as cards */
body.calm .props{gap:16px;margin-top:64px}
body.calm .prop{padding:28px 28px 30px;border-radius:var(--r-md);background:rgba(255,255,255,.035);border:1px solid var(--wline)}
/* two product cards */
body.calm .pcards{display:grid;gap:16px;margin-top:64px}
@media(min-width:768px){body.calm .pcards{grid-template-columns:1fr 1fr}}
body.calm .pcard{display:flex;flex-direction:column;gap:12px;min-height:300px;padding:32px;border-radius:var(--r-lg);
  background:rgba(24,35,2,.035);border:1px solid var(--line);color:var(--ink);
  transition:transform .25s var(--ease-out),background .25s var(--ease-out)}
body.calm .pcard .kicker{align-self:flex-start}
body.calm .pcard h3{margin-top:8px;max-width:440px;font-size:clamp(20px,1.8vw,26px);line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
body.calm .pcard p{max-width:460px;font-size:15px;line-height:1.55;color:rgba(24,35,2,.66)}
body.calm .pcard .go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:24px;font-size:15px;font-weight:600}
body.calm .pcard .go .ar{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;
  background:var(--ink);color:var(--cream);font-size:15px;transition:transform .25s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  body.calm .pcard:hover{background:rgba(24,35,2,.06);transform:translateY(-3px)}
  body.calm .pcard:hover .go .ar{transform:translateX(4px)}}

/* ==== header glass: translucent pill that takes the tint of the field under it.
   site.js toggles .onlight when the section beneath is light (luminance > .9). ==== */
.hdr-in{background:rgba(10,10,11,.55);border-color:rgba(255,255,255,.08)}
/* desktop only: on mobile this would make the bar the containing block for the
   fixed full-screen menu, so the overlay would collapse into the bar once scrolled */
@media(min-width:768px){.hdr.scrolled .hdr-in{-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1)}}
.hdr.scrolled .hdr-in{background:rgba(10,10,11,.66)}
.hdr-logo img,.hdr-nav,.hdr-nav a{transition-property:background-color,border-color,box-shadow,color,filter;
  transition-duration:.25s;transition-timing-function:var(--ease-out)}
.hdr.onlight .hdr-in{background:rgba(250,250,249,.66);border-color:rgba(24,35,2,.08)}
.hdr.onlight.scrolled .hdr-in{background:rgba(250,250,249,.78);box-shadow:0 10px 34px rgba(24,35,2,.10)}
.hdr.onlight .hdr-logo img{filter:none}
.hdr.onlight .hdr-nav{background:rgba(24,35,2,.06)}
.hdr.onlight .hdr-nav a{color:var(--ink)}
@media(hover:hover) and (pointer:fine){.hdr.onlight .hdr-nav a:hover{background:rgba(24,35,2,.08)}}
.hdr.onlight .hdr-nav a.on{background:var(--ink);color:#fff}
.hdr.onlight .hdr-nav a.on:focus-visible{outline-color:#fff}
@media(prefers-reduced-motion:reduce){.hdr-in,.hdr-logo img,.hdr-nav,.hdr-nav a{transition:none}}

/* ==== header motion (from the feat/new-personal-business-pages nav): full-width and
   transparent at rest, springs into a compact glass pill once scrolled. ==== */
.hdr{padding:0 16px}
.hdr-in{max-width:1236px;margin-top:0;padding:17px 0;background:transparent;border-color:transparent;box-shadow:none;
  transition:max-width .25s var(--ease-spring),margin-top .25s var(--ease-spring),
    padding .25s var(--ease-spring),background-color .25s var(--ease-out),border-color .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.hdr.scrolled .hdr-in{max-width:890px;margin-top:12px;padding:8px 8px 8px 22px;background:rgba(10,10,11,.86);
  border-color:rgba(255,255,255,.1);box-shadow:var(--sh-d1)}
.hdr.onlight .hdr-in{background:transparent;border-color:transparent;box-shadow:none}
.hdr.onlight.scrolled .hdr-in{background:rgba(245,245,245,.92);border-color:rgba(24,35,2,.08);box-shadow:0 10px 34px rgba(24,35,2,.10)}
@media(max-width:767px){.hdr-in{padding:12px 6px}.hdr.scrolled .hdr-in{margin-top:8px;padding:9px 14px}}
@media(prefers-reduced-motion:reduce){.hdr-in{transition:background-color .25s var(--ease-out),border-color .25s var(--ease-out)}}
.hdr.onlight .hdr-cta{background:var(--ink);color:var(--cream)}
@media(hover:hover) and (pointer:fine){.hdr.onlight .hdr-cta:hover{box-shadow:var(--sh-2)}}

/* ==== micro polish: cards keep their reveal fade AND a responsive hover; header CTA tint tweens ==== */
.vert{transition:opacity .45s var(--ease-out),transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
body.calm .prop{transition:opacity .45s var(--ease-out),transform .25s var(--ease-out),background-color .25s var(--ease-out),border-color .25s var(--ease-out)}
body.calm .pcard{transition:opacity .45s var(--ease-out),transform .25s var(--ease-out),background-color .25s var(--ease-out),box-shadow .25s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  body.calm .prop:hover{transform:translateY(-3px);background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.16)}
  body.calm .pcard:hover{border-color:rgba(24,35,2,.28)}}
body.calm .pcard:focus-visible{border-radius:var(--r-lg);outline-color:var(--ink);outline-offset:4px}
body.calm .pcard .go .ar{transition:transform .25s var(--ease-out),background-color .25s var(--ease-out)}
.hdr-cta{transition:transform .15s var(--ease-out),box-shadow .15s var(--ease-out),background-color .25s var(--ease-out),color .25s var(--ease-out)}
body.calm .stat .num em{transition:color .25s var(--ease-out)}
@media(prefers-reduced-motion:reduce){
  body.calm .prop:hover,body.calm .pcard:hover{transform:none}}

/* prop cards: Dave's line icons, number kept as a small index on the right */
body.calm .prop .ph{display:flex;align-items:center;justify-content:space-between}
body.calm .prop .ph svg{width:28px;height:28px;transform:none;transition:transform .25s var(--ease-out)}
body.calm .prop .ph .n{margin:0;font-size:12px;color:var(--tx-mute)}
body.calm .prop h3{margin-top:32px}
@media(hover:hover) and (pointer:fine){body.calm .prop:hover .ph svg{transform:translateY(-2px)}}

/* three-jobs row (cream): icon cards on the product-card base */
@media(min-width:900px){body.calm .pcards.three{grid-template-columns:repeat(3,1fr)}}
body.calm .pcard.job{min-height:0;gap:8px;padding:30px 28px 32px}
body.calm .pcard.job svg{width:28px;height:28px;color:var(--accent-tx);margin-bottom:14px}
body.calm .pcard.job h3{margin-top:0;font-size:clamp(19px,1.5vw,22px)}
body.calm .trustmech .tnote{margin-top:24px;font-size:13.5px;line-height:1.6;color:var(--tx-mute)}

/* ---- the money field, restored ----
   .calm switches off every texture at once: the dot grid, the page grain and
   the torn-bills field. Flattening the incidental noise is right, but the
   bills are a deliberate image, not noise, so let a section opt back in. The
   dot grid and grain stay off. */
body.calm .sec.dark.tornbg::before{display:block}
body.calm .sec.tornbg .sticky::before{display:block}

/* ---- partner program: the live page's tighter rhythm ----
   calm runs 128px sections, which left this page mostly air. The original
   partners page runs 64px; this sits just above it and touches no other page. */
body.partners .sec{padding:76px 0}
body.partners .sec.band{padding:44px 0}
body.partners .props{margin-top:48px}
body.partners .calc{margin-top:40px}
body.partners .faq{margin-top:40px}
body.partners .hero.sub-page{padding-bottom:64px}
body.partners .rails-note{margin-top:24px}
/* on a phone the refer cards have no visible chrome (white card on cream), so
   their 28px padding reads as dead air between the numbered items. Collapse the
   card box and run the list at editorial rhythm. Desktop keeps the 3-up grid. */
@media(max-width:767px){
  body.partners .props{margin-top:24px;gap:8px}
  body.partners .prop{padding:16px 0 18px;background:none;border:0}
  body.partners .prop h3{margin-top:10px}
}

/* ==== /join: the app download page. One screen, two badges, a QR that beats them. ==== */
body.join{min-height:100svh;display:flex;flex-direction:column;background:var(--dark);color:#fff}
.join-main{flex:1;display:grid;align-content:center;position:relative;isolation:isolate;overflow:hidden;padding:56px 0}
.join-main::before{content:"";position:absolute;inset:auto -20% -55% -20%;height:120%;z-index:-1;
  background:radial-gradient(ellipse 55% 45% at 50% 100%,rgba(170,255,0,.10),transparent 70%)}
.join-grid{width:100%;max-width:1180px;margin:0 auto;padding:0 24px;display:grid;gap:48px;align-items:center}
@media(min-width:640px){.join-grid{padding:0 32px}}
@media(min-width:1024px){.join-grid{grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:64px}}
.join-logo{display:inline-block}
.join-logo img{height:30px;width:auto;filter:invert(1)}
.join h1{margin-top:40px;font-weight:800;text-transform:uppercase;letter-spacing:-.05em;line-height:.92;font-size:clamp(2.5rem,6vw,76px)}
.join .sub{margin-top:24px;max-width:480px;font-size:clamp(16px,1.5vw,20px);line-height:1.45;color:rgba(255,255,255,.62)}
.join .qr{margin-top:32px;display:flex;align-items:center;gap:24px}
.join .qr .card{flex:0 0 168px;width:168px;height:168px;padding:14px;border-radius:var(--r-md);background:var(--cream)}
.join .qr .card img{display:block;width:140px;height:140px}
.join .qr p{max-width:200px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.62)}
.join .onphone{display:none;margin-top:24px;font-size:15px;color:rgba(255,255,255,.7)}
.join .badges{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.join .badges a{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-xs)}
.join .badges img{display:block;width:auto}
.join .badges .ios img{height:48px}
.join .badges .play img{height:56px;margin:-4px} /* Play's artwork bakes in its own padding */
.join .legal{margin-top:48px;max-width:520px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.52)}
.join .phonewrap{display:none}
@media(min-width:1024px){.join .phonewrap{display:block;justify-self:center}
  .join .phone{display:block;width:auto;height:auto;max-height:min(72svh,640px)}}
/* phone: the desktop layout stacked. No QR (you can't scan your own screen),
   badges a size up. The Worker normally sends phones straight to their store. */
@media(max-width:767px){
  .join-main{padding:32px 0 0;align-content:start}
  .join-grid{gap:32px}
  .join h1{margin-top:32px}
  .join .qr{display:none}
  .join .badges{margin-top:32px;gap:12px}
  .join .badges .ios img{height:56px}
  .join .badges .play img{height:66px;margin:-5px}
  .join .legal{margin-top:24px;font-size:12px}
  .join .phonewrap{display:block;height:280px;overflow:hidden;
    -webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
  .join .phone{display:block;width:min(78vw,300px);height:auto;margin:0 auto}}
.join-foot{flex:0 0 auto;padding:22px 0;border-top:1px solid var(--wline)}
.join-foot .legal{margin:0;padding:0;border:0;max-width:none;font-size:12px;color:rgba(255,255,255,.52)}
.join-foot a{color:rgba(255,255,255,.62);transition:color .15s var(--ease-out)}
.join-foot a:hover{color:#fff}
@media(prefers-reduced-motion:no-preference){.join .join-copy>*{animation:heroUp .6s var(--ease-out) both}
  .join .join-copy>:nth-child(2){animation-delay:.06s}.join .join-copy>:nth-child(3){animation-delay:.12s}
  .join .join-copy>:nth-child(4){animation-delay:.15s}.join .join-copy>:nth-child(6){animation-delay:.25s}}

/* ledger rows (payments page feed). Restored from 798f89e; dropped by mistake in the audit sweep. */
.trows{display:flex;flex-direction:column;gap:8px;min-height:232px}
.trow{display:flex;align-items:center;gap:12px;border:1px solid var(--wline);border-radius:var(--r-sm);
  padding:11px 14px;background:linear-gradient(rgba(255,255,255,.045),rgba(255,255,255,.02));
  animation:rowIn .45s var(--ease-out)}
@keyframes rowIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.trow{animation:rowFade .45s var(--ease-out)}@keyframes rowFade{from{opacity:0}to{opacity:1}}}
.trow.gone{opacity:0;transform:translateY(8px);transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
.trow img{width:26px;height:26px;border-radius:999px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.trow .l1{font-size:13.5px;font-weight:700;color:#fff;white-space:nowrap}
.trow .l2{font-size:12px;color:var(--tx-mute);white-space:nowrap}
.trow .r{margin-left:auto;text-align:right;flex:0 0 auto}
.trow .amt{font-size:13.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.trow .st{display:inline-flex;margin-top:4px;font-size:12px;font-weight:800;letter-spacing:.04em;
  text-transform:none;color:var(--accent);background:rgba(170,255,0,.12);
  border-radius:999px;padding:2px 8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger-inline{margin-top:24px}
.hero.nf{padding:200px 0 140px;min-height:70svh;display:grid;align-content:center}
.hero.nf .kicker{margin-bottom:18px}
.hero.nf .sub{max-width:560px}

/* founder story (home) */
.story .lede{max-width:600px}
.story .lede+.lede{margin-top:16px}
.story .byline{margin-top:24px;font-size:15px;font-weight:700;color:rgba(24,35,2,.55)}

.bpanes > video{aspect-ratio:2880/1800;background:#f6f7f5}

/* hero window: browser chrome, tilted slightly away, cut by the fold (the Mercury shot) */
body.calm .bpanes.window{display:block;padding:0;border-radius:var(--r-md);background:#fff;overflow:hidden;
  box-shadow:var(--sh-d3),0 0 0 1px rgba(255,255,255,.1);
  transform:perspective(1800px) rotateX(7deg);transform-origin:50% 100%;will-change:transform}
body.calm .bpanes.window > video{border-radius:0;box-shadow:none;display:block}
.wchrome{display:flex;align-items:center;gap:8px;padding:11px 16px;background:#f3f3f1;border-bottom:1px solid rgba(24,35,2,.08)}
.wchrome span{width:11px;height:11px;border-radius:50%;background:#dadad6}
.wchrome i{margin:0 auto;font-style:normal;font-size:13.5px;color:rgba(24,35,2,.55);background:#fff;border-radius:var(--r-xs);padding:5px 16px;letter-spacing:.01em;transform:translateX(-14px)}
@media(min-width:1024px){
  body.calm .hero.biz{padding-bottom:0;overflow:visible;z-index:2} /* the window runs past the hero, over the band below */
  body.calm .bpanes.window{margin-bottom:-140px}}
@media(max-width:1023px){body.calm .bpanes.window{transform:none}}

/* stats band on cream (the hero window runs off into it) */
body.calm .sec.cream.statsband .stats{border-top:0;padding-top:64px}
.sec.cream .stat{border-left-color:var(--line)}
.sec.cream .stat b,.sec.cream .stat b em{color:var(--ink)}
.sec.cream .stat span{color:rgba(24,35,2,.62)}
.sec.cream .statlead{color:var(--ink)}

/* scroll-driven version of the hero window settle: runs on the compositor where
   supported; site.js only takes over when it isn't. Same range as the script. */
@supports (animation-timeline: view()){
  @media(min-width:1024px) and (prefers-reduced-motion:no-preference){
    body.calm .bpanes.window{animation:heroWin linear both;animation-timeline:view();animation-range:entry 30% entry 92%}
    body.calm .bpanes.window.js-settle{animation:none}
    @keyframes heroWin{
      from{transform:perspective(1800px) rotateX(11deg) translateY(72px) scale(.955);box-shadow:var(--sh-d2),0 0 0 1px rgba(255,255,255,.1)}
      to{transform:perspective(1800px) rotateX(0deg) translateY(0) scale(1);box-shadow:var(--sh-d3),0 0 0 1px rgba(255,255,255,.1)}}
  }
}

/* ==== phone pass (jas 2026-09-01): what reads on a 390px screen ==== */
@media(max-width:767px){
  /* sections breathe less; the desktop rhythm leaves whole screens empty on a phone */
  body.calm .sec{padding:72px 0}
  body.calm .sec.cream.statsband .stats{padding:32px 0 40px}
  /* home hero: keep the full composition on a phone — dashboard, phone and toast —
     just scaled down, instead of hiding the dashboard entirely */
  .slab .dash2{display:block;width:100%;max-width:100%;margin-left:0;
    border-radius:10px 10px 0 0}
  /* hero visual (dashboard + phone + toast) hidden on phones for now — a replacement
     image is coming. .darkgap still carries the lime -> dark transition. */
  .cut{display:none}
  .phoneov img{border-radius:0;box-shadow:none}
  .cut::before{height:200px}
  /* business hero window: zoom into the balance + accounts region instead of showing the whole dashboard */
  body.calm .bpanes.window{aspect-ratio:1/1;overflow:hidden}
  body.calm .bpanes.window > video{width:196%;max-width:none;height:auto;margin-left:-37%;aspect-ratio:1920/1200}
  /* stats: one row per stat (number, then label), no orphan cell */
  .stats,.stats.three,body.calm .statsband .stats{grid-template-columns:1fr;gap:0}
  .stat{display:flex;flex-direction:row;align-items:baseline;gap:16px;padding:14px 0;border-left:0;border-top:1px solid var(--wline)}
  .stat:first-child,.stats .statlead + .stat{border-top:0}
  .stat b{min-height:0;font-size:32px;flex:0 0 118px;justify-content:flex-start;text-align:left;letter-spacing:-.04em}
  .stat span{flex:1;text-align:left}
  .stat b.ccy{font-size:19px;flex-basis:auto}
  .stat span{margin:0;max-width:none}
  .sec.cream .stat{border-top-color:var(--line)}
  body.calm .statsband .statlead{padding:0 0 18px;max-width:none}
}

/* card rows: reserve the tallest heading so body copy starts on one line */
.vert h3,.tool h3{min-height:2lh}
body.calm .prop h3{min-height:2lh}
body.calm .pcard h3{min-height:3lh}
.door .vis{border-bottom:1px solid var(--line)}
.vert .ph img{filter:saturate(.85) contrast(1.05) brightness(.98)}

/* two-column sections: a short sticky column centres instead of leaving a void */
@media(min-width:1024px){.cols2 .sticky{align-self:center}}
.door .go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:24px;font-size:15px;font-weight:600;text-transform:none;letter-spacing:0;border:0;background:none;color:var(--ink)}
.door .go .ar{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;background:var(--ink);color:var(--cream);font-size:15px;transition:transform var(--d-base) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.door:hover .go .ar{transform:translateX(4px)}}
.run .pill,.trow .st,.settletoast .st-chip,.rccy{font-size:12px;letter-spacing:.04em;font-weight:700;padding:3px 9px;border-radius:999px}

/* ==== alive: ambient depth, word reveals, cards that answer the cursor ==== */
/* 1. hero headline rises word by word behind a mask (site.js splits it) */
.hero h1.split{display:block;animation:none;opacity:1;transform:none}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .l>span{display:block;transform:translateY(108%);animation:lineUp .8s var(--ease-out) forwards;animation-delay:calc(var(--i) * 110ms)}
@keyframes lineUp{to{transform:none}}
/* 3. dark sections breathe: two lime pools drifting slowly, on the compositor */
body.calm .sec.dark:not(.tornbg)::before{content:"";display:block;position:absolute;inset:-25%;z-index:-2;pointer-events:none;
  background:radial-gradient(38% 34% at 28% 38%,rgba(170,255,0,.075),transparent 62%),radial-gradient(32% 30% at 72% 68%,rgba(170,255,0,.055),transparent 62%);
  animation:drift 32s var(--ease-in-out,ease-in-out) infinite alternate;will-change:transform}
@keyframes drift{from{transform:translate3d(-3%,-2%,0) rotate(0deg)}to{transform:translate3d(3%,3%,0) rotate(4deg)}}
/* 5. primary buttons: a live edge */
@media(hover:hover) and (pointer:fine){
  .btn.p:hover{transform:translateY(-1px) scale(1.02)}
  .btn.ink:hover{transform:translateY(-1px) scale(1.02)}}
/* 2. the settled toast re-fires for each new payment */
.settletoast.live{animation:toastIn .5s var(--ease-out) both}
@media(prefers-reduced-motion:reduce){
  .hero h1 .l>span{transform:none;animation:none}
  body.calm .sec.dark:not(.tornbg)::before{animation:none}
  .settletoast.live{animation:none}}

/* ==== phone pass 2 (design audit at 390) ==== */
html{-webkit-tap-highlight-color:rgba(170,255,0,.18)}
@media(max-width:767px){
  /* (the nav row no longer folds away on scroll — the burger menu owns mobile nav) */
  /* 2. heroes read centred on a phone */
  .hero{text-align:center}
  .hero h1,.hero .sub,body.calm .hero.biz .sub{margin-left:auto;margin-right:auto}
  .hero .ctas{justify-content:center}
  .hero.lime{padding-top:168px;padding-bottom:32px}
  /* 5. heading reservations only make sense in rows */
  .vert h3,.tool h3,body.calm .prop h3,body.calm .pcard h3{min-height:0}
  /* 7. stat number column: one fixed edge for the labels. Content-sized
     columns go ragged the moment a wide number ("150+") outgrows the 76px
     floor, and a block-level number gives the baseline-aligned label a real
     text baseline to sit on (Safari synthesizes one for flex containers). */
  .stat{gap:20px}.stat b{display:block;flex:0 0 76px;min-width:76px}
  /* 8. marquees keep drifting on a phone, same as desktop (was a swipe strip).
     The duplicated set has to stay in the flow or the -50% loop shows a seam. */
  .mq{overflow:hidden;scroll-snap-type:none}
  .mq-track{animation:mqscroll var(--mq-dur,64s) linear infinite}
  .mq-set[aria-hidden="true"]{display:flex}
  .rail,.plogos img{scroll-snap-align:none}
  /* narrower fades so the strip still reads as moving past an edge */
  .railmq::before,.railmq::after,.mq::before,.mq::after{display:block;width:clamp(28px,9vw,64px)}
  /* the OS setting still wins — see the reduced-motion block above */
  @media(prefers-reduced-motion:reduce){
    .mq{overflow-x:auto}
    .mq-track{animation:none}
    .mq-set[aria-hidden="true"]{display:none}
  }
  /* 11. hero video: show the whole frame on a phone (was cropped into the balance region);
     dave: the dashboard card read too rounded at 390px, so tighten the corners */
  body.calm .bpanes.window{aspect-ratio:auto;border-radius:10px}
  body.calm .bpanes.window > video{width:100%;max-width:100%;margin-left:0;aspect-ratio:2880/1800}
  .wchrome{display:none}
  /* 12/13. caption balance, footer brand column full width */
  .pcap{text-wrap:balance;margin-inline:auto}
  footer .cols{grid-template-columns:1fr 1fr}
  footer .cols > :first-child{grid-column:1/-1}
  /* 17. ambient drift is invisible behind full-width text; save the layer */
  body.calm .sec.dark:not(.tornbg)::before{animation:none}
  /* 19. door visuals: crop on the numbers, no void above the terminal */
  .door .vis{height:200px}
  .door .vis .dash{object-position:left center}
  /* 6b. form submit spans the column */
  .demoform button{width:100%;align-self:stretch}
}
@media(max-width:479px){
  /* one bigger size for every hero headline on a phone — listed explicitly so the
     per-hero desktop rules (.hero.biz, .hero.lime) do not outrank it */
  .hero h1{font-size:30px}
  /* 6. hero CTAs sit side by side when both labels fit; a long one ("See what
     you'd earn") drops to its own full-width row instead of spilling out */
  /* .hero.lime .ctas sets its own gap, so name it here too */
  .hero .ctas,.hero.lime .ctas{flex-direction:row;align-items:stretch;justify-content:center;
    flex-wrap:wrap;gap:8px 4px}
  .hero .ctas > *{width:auto;flex:1 1 auto;min-width:0;justify-content:center;
    padding-inline:14px;white-space:nowrap}
  /* the arrow costs width the two side-by-side buttons need */
  .hero .ctas .ar{display:none}
  /* .btn and .tlink are different components — pin both to one height */
  .hero .ctas > *{min-height:52px;height:52px;padding-block:0;
    display:inline-flex;align-items:center;line-height:1}
  /* 4. payout-run rows: two lines, amounts never wrap */
  .run .rrow{display:grid;grid-template-columns:24px 1fr auto;column-gap:10px;row-gap:2px}
  .run .rrow img{grid-row:1/3;align-self:center}
  .run .who{grid-column:2;grid-row:1}
  .run .via{grid-column:2;grid-row:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .run .r{grid-column:3;grid-row:1/3;flex-direction:column;align-items:flex-end;gap:2px;margin:0}
  .run .amt{white-space:nowrap}
}
@media(pointer:coarse){
  .join-foot a,.join-logo{display:inline-flex;align-items:center;min-height:44px}
  .lede a,.sub a,p a{padding-block:8px}
}

/* header capsule: progressive blur behind it, so passing content softens instead of being sheared.
   No tint: a coloured gradient reads as a band wherever the field under it is a different colour. */
.hdr.scrolled::before{content:"";position:absolute;inset:0 0 -28px;z-index:-1;pointer-events:none;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.hdr{isolation:isolate}

/* ==== mobile menu — last in the file so nothing downstream overrides it ==== */
@media(max-width:767px){
  /* bar: logo left, then Book a demo and the burger together on the right */
  /* backdrop-filter makes an element the containing block for fixed children,
     which would trap the full-screen menu inside the bar — so drop it here */
  .hdr-in,.hdr.scrolled .hdr-in{-webkit-backdrop-filter:none;backdrop-filter:none}
  .hdr-in{position:relative;z-index:70;flex-wrap:nowrap;gap:8px;padding:9px 10px 9px 18px;border-radius:999px}
  .hdr-cta{order:2;margin-left:auto;padding:0 18px;min-height:40px;font-size:13px}
  /* the overlay is a child of the bar, so lift the logo and the X above it */
  .hdr-burger{display:flex;order:3;position:relative;z-index:80}
  .hdr-logo{position:relative;z-index:80}
  .hdr.navopen .hdr-cta{opacity:0;pointer-events:none;transition:opacity .18s var(--ease-out)}
  .hdr.navopen .hdr-burger span{background:#fff}
  /* cream and lime pages: the X has to read against a light overlay */
  .hdr.onlight.navopen .hdr-burger span{background:var(--ink)}
  .hdr-logo img{height:26px}

  /* open menu fills the screen */
  .hdr-nav{position:fixed;inset:0;z-index:60;
    display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:4px;
    padding:120px 20px 48px;margin:0;border:0;border-radius:0;
    background:#0b0b0c;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .24s var(--ease-out),visibility .24s}
  .hdr.navopen .hdr-nav{opacity:1;visibility:visible;pointer-events:auto}
  .hdr .hdr-nav a{padding:20px 18px;font-size:36px;line-height:1.05;font-weight:800;letter-spacing:-.02em;
    text-align:left;border-radius:var(--r-md);color:#fff;text-transform:uppercase}
  .hdr-nav a.on{background:#fff;color:var(--ink)}

  /* cream and lime pages get the light version */
  .hdr.onlight .hdr-nav{background:var(--cream,#f7f7f5)}
  .hdr.onlight .hdr-nav a{color:var(--ink)}
  .hdr.onlight .hdr-nav a.on{background:var(--ink);color:#fff}

  @media(prefers-reduced-motion:reduce){.hdr-nav{transition:none}}
}
/* no page scroll behind the full-screen menu */
html.navlock,html.navlock body{overflow:hidden}

/* section headings sit closer to their intro on a phone (was 24px gap + 16px margin) */
@media(max-width:767px){
  .sechead{gap:10px}
  .sechead .lede{margin-top:0}
}

/* the 01–06 counters on the prop cards are decorative; the icon carries the slot */
.prop .ph .n{display:none}

/* ---- hairlines removed: the stats band and the two-column fact rows ----
   (footer, FAQ, cards and the ledger keep theirs) */
.stats,
body.calm .statsband .stats,
body.calm .sec.cream.statsband .stats{border-top:0;border-bottom:0}
.mech .row,
.mech .row:last-child,
.sec.dark .mech.grid3 .row:nth-last-child(-n+3){border-top:0;border-bottom:0}
@media(max-width:767px){
  .stat{border-top:0}
}

/* the rule between two consecutive sections (cream + cream, dark + dark) */
.home .sec.cream + .sec.cream>.wrap::before{display:none}
.home .sec.dark + .sec.dark>.wrap{border-top:0}

/* the closing subtext now sits under the title, so it reads as a lede not a footnote */
.close .under{margin-top:18px;font-size:clamp(16px,1.4vw,19px);line-height:1.5;
  max-width:640px;margin-inline:auto;text-wrap:pretty}
.close .under + .ctas{margin-top:30px}


/* guides: link rows into the blog (home + business) */
.guides{display:grid;gap:0 40px;margin-top:56px;grid-template-columns:1fr}
@media(min-width:768px){.guides{grid-template-columns:1fr 1fr}}
.guides a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-top:1px solid var(--line);
  font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);text-decoration:none;transition:color .2s var(--ease-out)}
.guides a:hover{color:var(--accent-tx)}
.guides a .ar{flex:none;transition:transform .25s var(--ease-out)}
.guides a:hover .ar{transform:translateX(4px)}
.guides-sec .ctas .tlink{color:var(--ink);border-color:rgba(24,35,2,.24)}