/* Frame homepage — globe hero, in the live site's menu, sizes, grid and type (v2)
   Light, tonal, lots of negative space. Brand palette only, solid colors (no gradients).
   Sections: nav, hero, stack, industries, payments, frameos tabs, onboarding, pricing, closing, footer. */

/* ---------- Brand serif: Martina Plantijn (Klim Type Foundry) ----------
   Only the Regular style is used (as on the live site), subset to Latin. Swap in Klim's web-licensed WOFF2
   files before launch (same names, .woff2, format("woff2")). */
@font-face{font-family:'Martina Plantijn';src:url(../fonts/MartinaPlantijn-Regular.woff) format('woff');font-weight:400;font-style:normal;font-display:swap}

/* ---------- Brand sans: Söhne (Klim Type Foundry) ----------
   Body text, buttons, menu and labels, in the three weights the team's update uses. Subset to Latin.
   Buch = 400 and below (all running text), Kräftig = 500 (button labels, menu titles),
   Halbfett = 600 and up (the small uppercase labels and the pill).
   The family name is plain ASCII ('Soehne') so the CSS never depends on file encoding.
   Söhne's built-in line spacing is tall (about 1.6), so every rule below that sets type with the
   font shorthand also gives a line height. */
@font-face{font-family:'Soehne';src:url(../fonts/Soehne-Buch.woff) format('woff');font-weight:100 400;font-style:normal;font-display:swap}
@font-face{font-family:'Soehne';src:url(../fonts/Soehne-Kraftig.woff) format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Soehne';src:url(../fonts/Soehne-Halbfett.woff) format('woff');font-weight:600 900;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --ink:#0F1C1B; --paper:#FDFDFB; --warm:#F7F8F4; --mist:#E6F4EF; --tile:#E7F1ED;
  --slate:#325054; --aqua:#8AF1D9; --pale-aqua:#D7F1E9; --muted:#56625E; --faint:#8A948F;
  --line:#DDE3DF; --line-2:#D7DFDB; --white:#FFFFFF; --alert:#9A3B2A;
  --f-display:'Martina Plantijn','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --f-body:'Soehne','Helvetica Neue',Arial,system-ui,sans-serif;
  --f-mono:'Soehne','Helvetica Neue',Arial,system-ui,sans-serif; /* the live site has no mono: small labels use the sans */
  /* the grid: a 1312px column between two hairline rails, content inset from the rails */
  --colw:1312px; --side:clamp(10px,calc(5.6vw - 16px),64px); --inset:clamp(12px,3.6vw,72px);
  --gutter:calc(var(--side) + var(--inset));
  --nav-h:68px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --f-label:var(--f-body);
  /* colourway tokens: blue (default) */
  --accent:#325054; --accent-hover:#28433F; --on-accent:#FFFFFF; --label:#325054; --dot:#8AF1D9;
  --lk:50 80 84;                /* line work (globe, flows, frames) as R G B, used with alpha */
  --rule:#D5DFDB; --strip:rgb(255 255 255 / .62); --navbg:#FFFFFF; --navlink:#6E7976; --btn-line:#D5DCD9;
  --line-3:#BFD6CD; --field:#D5DCD9; --line-hover:#C2D1CB; --mark-1:#E3EFEA; --mark-2:#D8E7E1;
  --bg-mist:230 244 239; --bg-paper:253 253 251; --bg-warm:247 248 244;   /* blend canvas tones */
  --tex-k:.7;                   /* texture strength on the blend canvas */
  color-scheme:light;
}
/* tan: the live site's palette. Off-white grounds, tan buttons and labels, warm line work. */
[data-color="tan"]{
  --mist:#FAF8F4; --warm:#F4EEE3; --tile:#F2EDE4; --pale-aqua:#F1E6CF; --aqua:#D2B988;
  --slate:#7A6644; --lk:122 102 68;
  --accent:#C4A974; --accent-hover:#B6995F; --label:#AD8E55; --dot:#C4A974;
  --line:#E7E3DC; --line-2:#E0DBD2; --line-3:#DAD2C3; --field:#DEDAD3; --line-hover:#CFC6B5; --btn-line:#DEDAD3;
  --rule:#E0DCD5; --mark-1:#F1ECE3; --mark-2:#E9E1D3;
  --bg-mist:250 248 244; --bg-paper:255 255 255; --bg-warm:244 238 227;
  --tex-k:.4;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
p,li{text-wrap:pretty}
h1,h2,h3,h4,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--slate);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:8px;font-size:14px}
.skip:focus{top:12px}
.wrap{width:min(var(--colw),calc(100% - var(--side) * 2));margin-inline:auto;padding-inline:var(--inset);box-sizing:border-box}
/* The grid (as on the live site): hairline rails at the column edges for the whole page, and a
   32px seam with a centre tick between sections. */
.rails{position:fixed;top:0;bottom:0;left:50%;transform-origin:50% 0;width:min(var(--colw),calc(100% - var(--side) * 2));transform:translateX(-50%);border-inline:1px solid var(--rule);pointer-events:none;z-index:40}
.seam{position:relative;height:32px;background:var(--strip)}
.seam::before{content:'';position:absolute;inset:0;border-block:1px solid var(--rule);pointer-events:none}
.seam::after{content:'';position:absolute;left:50%;top:0;bottom:0;border-left:1px solid var(--rule)}
html:not(.js) .seam,[data-sections="bands"] .seam{background:var(--white)}

/* ---------- Type ---------- */
.lab{font:600 11.5px/1.4 var(--f-label);letter-spacing:.06em;text-transform:uppercase;color:var(--label)}
.lab.ink{color:var(--ink)}
.lab.as-written{text-transform:none}
.h1{font:400 clamp(40px,4.7vw,60px)/1.3 var(--f-display);letter-spacing:-.005em;text-wrap:balance}
.h1 em,.h2 em{font-style:normal;color:inherit}
.h2{font:400 clamp(30px,3.2vw,44px)/1.16 var(--f-display);letter-spacing:-.005em;text-wrap:balance;margin-top:14px}
.h3{font:400 clamp(21px,1.75vw,25px)/1.2 var(--f-display);letter-spacing:-.005em;text-wrap:balance}
.lede{font-size:clamp(16px,1.2vw,17px);line-height:1.7;color:var(--muted);max-width:56ch}
.lede.center{text-align:center;margin-inline:auto}
.small{font-size:14px;color:var(--muted)}
.ul{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--ink);border-bottom:1px solid currentColor;padding-bottom:1px}
.ul .arr,.btn .arr{font-style:normal;transition:transform .25s var(--ease)}
.ul:hover .arr,.btn:hover .arr{transform:translateX(3px)}
.idx{font:400 11px/1 var(--f-mono);letter-spacing:.06em;color:var(--faint)}

/* ---------- Textures (brand guide pp.20–21, multiply) ---------- */
.tex,.tex2{position:relative;isolation:isolate}
.tex::before,.tex2::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:multiply}
.tex::before{background:var(--t) center/cover;opacity:var(--o,.3)}
.tex2::after{background:var(--t2) center/cover;opacity:var(--o2,.3)}
.t1{--t:url(../img/t1.png)} .t2{--t:url(../img/t2.png)} .t5{--t:url(../img/t5.png)} .t6{--t:url(../img/t6.png)}
.u1{--t2:url(../img/t1.png)}
.mist{background:var(--mist)} .warm{background:var(--warm)}

/* ---------- Buttons and forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:8px;border:1px solid transparent;font:500 15px/1 var(--f-body);white-space:nowrap;cursor:pointer;transition:transform .25s var(--ease),background-color .2s,box-shadow .25s}
.btn-ink{background:var(--accent);color:var(--on-accent)}
.btn-ink:hover{background:var(--accent-hover)}
.btn-line{border-color:var(--btn-line);color:var(--ink);background:var(--white)}
.btn-line:hover{border-color:var(--line-hover)}
.btn-sm{height:34px;padding:0 13px;border-radius:8px;font-size:14px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cap-form{position:relative;display:flex;gap:8px;width:min(100%,460px)}
.cap-form input{flex:1;min-width:0;height:44px;border:1px solid var(--field);border-radius:8px;background:var(--white);padding:0 18px;font:400 16px/1.18 var(--f-body);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.cap-form input::placeholder{color:var(--faint)}
.cap-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgb(var(--lk) / .15)}
.cap-form.err input{border-color:var(--alert)}
.form-msg{position:absolute;left:2px;top:calc(100% + 6px);font-size:13px;color:var(--alert);min-height:1em}
.secondary{position:relative;font-size:13px;color:var(--faint);transition:color .25s}
.secondary a{transition:color .25s,text-decoration-color .25s}
.secondary::after{content:attr(data-go);position:absolute;left:0;right:0;top:0;text-align:center;color:var(--ink);font-weight:500;opacity:0;transform:translateY(4px);transition:opacity .3s ease .1s,transform .35s var(--ease) .1s;pointer-events:none}
.secondary.going,.secondary.going a{color:transparent;text-decoration-color:transparent}
.secondary.going::after{opacity:1;transform:none}
.cap-form .btn{display:inline-grid;place-items:center}
.cap-form .btn>span{grid-area:1/1;display:inline-flex;align-items:center;gap:8px;transition:opacity .25s ease,transform .35s var(--ease)}
.cap-form .b-ok{gap:7px;opacity:0;transform:translateY(8px)}
.cap-form .b-ck{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cap-form.going .b-lab{opacity:0;transform:translateY(-8px)}
.cap-form.going .b-ok{opacity:1;transform:none}
.cap-form.going input{color:var(--muted)}
.secondary a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px}
/* headline variant switch (A/B) */
.hl{display:block}
[data-headline="complex"] .hl-compliance,[data-headline="compliance"] .hl-complex{display:none}
/* hero variant switch (A/B) */
[data-hero="email"] .cta-buttons{display:none}
[data-hero="buttons"] .cta-email,[data-hero="buttons"] .cta-email-inline{display:none}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--navbg);box-shadow:0 1px 0 var(--rule)}
.nav .nav-in{border-inline:1px solid var(--rule)} /* the rails run through the nav */

.nav-in{height:var(--nav-h);display:flex;align-items:center;gap:24px}
.nav-links{margin-left:clamp(12px,2.4vw,40px)}
.nav-acts{margin-left:auto}
.brand img{height:16px;width:auto}
.nav-links ul{display:flex;align-items:center;gap:clamp(18px,2vw,30px)}
.nav-links a,.dd-btn{font-size:14px;color:var(--navlink);transition:color .2s}
.nav-links a:hover,.dd-btn:hover,.dd-btn[aria-expanded="true"]{color:var(--ink)}
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:8px 0;cursor:pointer}
.nav-links>ul>li>a{display:inline-flex;align-items:center;padding:8px 0}
.dd-btn i{width:7px;height:7px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease)}
.dd-btn[aria-expanded="true"] i{transform:translateY(1px) rotate(-135deg)}
.dd-panel{position:absolute;left:-22px;top:calc(100% + 10px);width:540px;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:12px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(15,28,27,.08);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .25s var(--ease),visibility 0s .25s}
.dd-panel.dd-narrow{width:400px}
.dd-panel.dd-company{left:auto;right:-22px}
.dd.open .dd-panel{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s var(--ease)}
.dd-panel a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;color:var(--ink)}
.dd-panel a:hover{background:var(--warm)}
.dd-panel b{font-weight:500;font-size:14px}
.dd-panel span{font-size:13px;color:var(--faint)}
.nav-acts{display:flex;align-items:center;gap:10px}
.nav-acts .btn-line{color:var(--navlink)}
.nav-text{font-size:14px;color:var(--muted)}
.nav-text:hover{color:var(--ink)}
.burger{display:none;width:40px;height:40px;border:0;background:none;cursor:pointer;position:relative}
.burger span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease)}
.burger span:first-child{top:15px}.burger span:last-child{top:23px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mnav{position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;background:var(--navbg);overflow-y:auto;border-top:1px solid var(--line)}
.mnav-in{padding-block:12px 40px;display:flex;flex-direction:column}
.mnav details{border-bottom:1px solid var(--line)}
.mnav summary{list-style:none;cursor:pointer;padding:18px 0;font:400 26px/1.1 var(--f-display);display:flex;justify-content:space-between;align-items:center}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:'+';font:400 24px/1.18 var(--f-body);color:var(--slate)}
.mnav details[open] summary::after{content:'−'}
.mnav details a{display:block;padding:8px 0 8px 2px;font-size:16px;color:var(--muted)}
.mnav details[open]{padding-bottom:12px}
.mnav-link{display:block;padding:18px 0;border-bottom:1px solid var(--line);font:400 26px/1.1 var(--f-display)}
.mnav-ctas{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.mnav-ctas .btn{width:100%}
body.menu-open{overflow:hidden}

/* ---------- Hero ---------- */
.hero{background:var(--mist);padding-top:clamp(48px,8vh,88px);overflow:hidden}
.hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:2}
.hero .h1{margin-top:26px}
/* the live site's pill tag */
.tagpill{display:inline-flex;align-items:center;gap:8px;height:24px;padding:0 12px 0 10px;border-radius:999px;background:var(--ink);color:#FFFFFF;font:600 11px/1 var(--f-label);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.tagpill::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--dot)}
.h1 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.h1 .ln>*{display:block}
.hero .lede{margin-top:20px;max-width:660px;font-size:16px;line-height:1.75;text-wrap:balance}
.hero .cap-form,.hero .cta-row{margin-top:30px}
.hero .cta-row{justify-content:center}
.hero .secondary{margin-top:16px}
.hero .cap-form + .cta-row + .secondary{margin-top:16px}
/* The globe: a sphere --gd wide, of which the top --cap shows. On the colour bands the hero's
   bottom edge cuts it off like a horizon. site.js turns the meridians and places the chips,
   and sets --gy when the chips need room above the globe (phones). */
.horizon{--gd:min(1240px,86vw);--cap:calc(var(--gd) * .26);position:relative;height:calc(var(--cap) + var(--gy,0px));margin-top:clamp(28px,4vw,56px);pointer-events:none}
.gl{position:absolute;left:calc(50% - var(--gd) / 2);top:var(--gy,0px);width:var(--gd);height:calc(var(--gd) / 2)}
.globe{position:absolute;inset:0;width:100%;height:100%;max-width:none;color:var(--slate)}
.globe *{vector-effect:non-scaling-stroke}
.node{position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--paper);border:1px solid var(--slate)}
.node i{position:absolute;inset:3px;border-radius:50%;background:var(--slate)}
.node::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--slate);opacity:0}
.chip{position:absolute;left:0;top:0;display:flex;gap:8px;align-items:center;padding:6px 11px 6px 10px;border-radius:8px;background:var(--white);border:1px solid var(--field);font:500 12.5px/1.3 var(--f-body);color:var(--muted);white-space:nowrap;z-index:2}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--accent);transition:background-color .3s,box-shadow .3s}
.cst{display:inline-grid;font-weight:inherit}
.cst>span{grid-area:1/1}
.cst .s-from{visibility:hidden}
/* site.js places the chips, so without JS only the globe and its nodes show. */
html:not(.js) .horizon .chip{display:none}
/* pin line from a chip down to its node (phones and tablets; site.js sets the length) */
.chip::after{content:'';position:absolute;left:var(--pin-x,0);top:100%;width:1px;height:var(--pin,0);background:rgb(var(--lk) / .32);transform-origin:top}

/* ---------- Section transitions: "blend" variant (data-sections="blend") ----------
   One fixed canvas sits behind the whole page and the sections drop their own bands. site.js
   eases the canvas colour and texture from one section to the next as you scroll, so there is
   never a hard edge between sections. Every colour is solid at any moment (no gradients).
   Without JS the page falls back to the normal bands. */
.page-canvas{display:none}
.js[data-sections="blend"] body{background:rgb(var(--canvas,230 244 239))}
.js[data-sections="blend"] .page-canvas{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;background:rgb(var(--canvas,230 244 239))}
.js[data-sections="blend"] .page-canvas{opacity:var(--tex-k,.7)} /* the body shows the same colour, so only the textures fade */
.page-canvas i{position:absolute;inset:0;background-position:center;background-size:cover;mix-blend-mode:multiply;opacity:0}
.page-canvas .cv-t1{background-image:url(../img/t1.png)} .page-canvas .cv-t2{background-image:url(../img/t2.png)}
.page-canvas .cv-t5{background-image:url(../img/t5.png)} .page-canvas .cv-t6{background-image:url(../img/t6.png)}
.js[data-sections="blend"] .hero,.js[data-sections="blend"] .sec,.js[data-sections="blend"] .close,.js[data-sections="blend"] .foot{background:transparent}
.js[data-sections="blend"] .tex::before,.js[data-sections="blend"] .tex2::after{content:none}

/* with no band edge to cut it off, more of the globe shows and its lines fade out into the page */
.js[data-sections="blend"] .horizon{--cap:calc(var(--gd) * .36)}
.js[data-sections="blend"] .gl{-webkit-mask-image:linear-gradient(#000 calc(var(--cap) * .42),transparent calc(var(--cap) - 6px));mask-image:linear-gradient(#000 calc(var(--cap) * .42),transparent calc(var(--cap) - 6px))}

/* ---------- Review switch (team only; site.js decides when it shows) ----------
   Fixed colours, so it looks the same in both colourways. */
.review-bar{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:#FFFFFF;border:1px solid #D7DFDB;box-shadow:0 10px 30px rgba(15,28,27,.12);font:500 13px/1.18 var(--f-body);color:#0F1C1B;max-width:calc(100vw - 32px)}
.review-bar span{font:600 10px/1.18 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:#56625E;padding:0 8px 0 10px;white-space:nowrap}
.review-bar button{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:inherit;font:inherit;padding:7px 13px;border-radius:999px;cursor:pointer;white-space:nowrap}
.review-bar [data-v] i{width:9px;height:9px;border-radius:50%}
.review-bar [data-v="blue"] i{background:#325054}
.review-bar [data-v="tan"] i{background:#C4A974}
.review-bar [aria-pressed="true"]{background:#0F1C1B;color:#FDFDFB}
.review-bar .rb-x{padding:6px 10px;color:#8A948F;font-size:16px;line-height:1}
.review-bar .rb-x:hover{color:#0F1C1B}
@media (max-width:520px){.review-bar span{display:none}}
@media print{.review-bar{display:none}}

/* ---------- Generic section ---------- */
.sec{padding-block:clamp(64px,7vw,104px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px 64px;align-items:end}
.sec-head .lede{justify-self:end;max-width:440px}
.hair{display:block;height:1px;background:var(--line);transform-origin:left}

/* ---------- Stack ---------- */
.stack{position:relative;margin-top:clamp(48px,6vw,80px);padding:clamp(18px,2.2vw,24px)}
/* the box around the tools. With motion it draws itself clockwise from the tag: a conic mask
   opens from --fr-from (the top-left corner) as --draw goes from 0% to 100% (see the motion block) */
@property --draw{syntax:'<percentage>';inherits:false;initial-value:100%}
.fr{position:absolute;inset:0;border:1px solid var(--line);border-radius:16px;pointer-events:none;--fr-from:-70deg}
.stack-tag{position:absolute;left:clamp(18px,2.2vw,24px);top:0;transform:translateY(-50%);display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--paper);border:1px solid var(--line-2);border-radius:999px}
.stack-tag b{font:400 10px/1.4 var(--f-mono);letter-spacing:.06em;color:var(--slate)}
.stack-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.9vw,24px)}
.ptile{height:100%;min-height:155px;display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:10px;background:rgba(255,255,255,.72);border:1px solid var(--line);transition:transform .35s var(--ease),border-color .25s,background-color .25s}
a.ptile:hover{transform:translateY(-3px);border-color:var(--line-hover);background:var(--white)}
.ptile .idx{margin-bottom:auto}
.pt-n{font:400 21px/1.15 var(--f-display);letter-spacing:-.005em;margin-top:18px}
.pt-d{font-size:13.5px;line-height:1.45;color:var(--muted)}
.props{display:grid;grid-template-columns:1fr 1fr;gap:40px 64px;margin-top:clamp(56px,6vw,88px)}
.prop .h3{margin-top:22px}
.prop p{margin-top:10px;color:var(--muted);max-width:46ch}

/* ---------- Collapse the stack: scroll-driven sequence ----------
   Default (phones, small screens, reduced motion, no JS): a normal section with the grid.
   site.js adds .scrolly-on on large screens; the stage then pins while you scroll and
   --p1 (collapse), --p2 (reveal), --p2f (frame) and --c1..--c3 (captions) drive it. */
.sc-head{display:grid;grid-template-columns:minmax(0,1fr);gap:32px 64px;align-items:end}
.scrolly-on:not(.sc-narrow) .sc-head{grid-template-columns:minmax(0,1fr) auto} /* the counters sit to the right only on desktop */
.sc-caps{display:grid;margin-top:16px}
.sc-cap{grid-area:1/1}
.sc-cap .h2{margin-top:0;max-width:18ch}
.sc-cap .lede{margin-top:16px;max-width:54ch}
.sc-cap.c1,.sc-cap.c2,.sc-count,.vend{display:none}
.sc-visual{position:relative}
.stack-sec:not(.is-scrolly){overflow:hidden} /* the static tiles fly in from the side; never clip the pinned stage (it would stop sticking) */
.stack-sec.is-scrolly{padding-top:0}
.scrolly-on{height:300vh}
.scrolly-on .scrolly-stage{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow:hidden}
.scrolly-on .scrolly-in{height:100%;display:flex;flex-direction:column;padding-block:clamp(28px,6vh,64px) clamp(20px,4vh,40px)}
.scrolly-on .sc-visual{flex:1;min-height:0;margin-top:clamp(20px,4vh,44px)}
.scrolly-on .sc-cap.c1,.scrolly-on .sc-cap.c2{display:block}
.scrolly-on .sc-static{display:none} /* the first caption already names the five vendors */
.scrolly-on .sc-cap{opacity:var(--co);transform:translateY(calc((1 - var(--co)) * 14px))}
.scrolly-on .c1{--co:var(--c1,1)} .scrolly-on .c2{--co:var(--c2,0)} .scrolly-on .c3{--co:var(--c3,0)}
.scrolly-on .sc-count{display:flex;gap:44px;padding-bottom:6px}
.sc-count div{display:flex;flex-direction:column;gap:8px}
.sc-count .lab{font-size:11px;color:var(--faint)}
.sc-count .pl{opacity:var(--pl,1)} /* the plural "s", faded by scroll (site.js sets --pl) */
.sc-count b{font:400 clamp(52px,5vw,76px)/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--ink)}
.scrolly-on .vend{display:flex}
.vend{position:absolute;left:var(--x);top:var(--y);width:clamp(176px,16.5vw,232px);flex-direction:column;gap:4px;padding:16px 18px 16px;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(15,28,27,.07);pointer-events:none;z-index:calc(6 - var(--i));
  transform:translate(calc(var(--dx,0px) * var(--p1,0)),calc(var(--dy,0px) * var(--p1,0))) rotate(calc(var(--r) * (1 - var(--p1,0)) + (var(--i) - 2) * 1.6deg * var(--p1,0))) scale(calc(1 - .08 * var(--p1,0)));
  opacity:clamp(0,calc(1 - var(--p2,0) * 1.8),1)}
.vend-n{font:400 21px/1.15 var(--f-display);letter-spacing:-.005em;margin-top:8px}
.vend-d{font-size:13.5px;color:var(--muted)}
.vend-k{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-2);font:400 10px/1.18 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.scrolly-on .stack{position:absolute;left:0;right:0;top:50%;margin:0;opacity:clamp(0,calc(var(--p2,0) * 2.5),1);transform:translateY(calc(-50% + var(--sy,0px))) scale(calc(.95 + .05 * var(--p2,0)));pointer-events:none}
.scrolly-on.sc-done .stack{pointer-events:auto}
.scrolly-on .ptile{min-height:clamp(88px,12vh,140px)}
.scrolly-on:not(.sc-narrow) .stack{padding:clamp(14px,1.6vw,24px)}
.scrolly-on .pt-n{margin-top:12px}
.js .scrolly-on .stack .ptile{--tv:clamp(0,calc(var(--p2,0) * 12 - var(--i) * .8 - 1),1);opacity:var(--tv);transform:translateY(calc((1 - var(--tv)) * 16px));transition:border-color .25s,background-color .25s}
.js .scrolly-on .fr{--draw:calc(var(--p2f,0) * 100%);transition:none}
.js .scrolly-on .stack-tag{opacity:var(--p2f,0);transform:translateY(-50%);transition:none}
/* Phones and tablets (.sc-narrow): the same sequence, stacked. The stage is sized to the small
   viewport (svh) so the browser toolbars never cover it. If the tools don't fit with their
   descriptions, site.js adds .sc-tight (names only); if they still don't fit, it turns the
   sequence off and the static section shows instead. */
.sc-narrow{height:260vh}
.sc-narrow .scrolly-stage{height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h))}
.sc-narrow .scrolly-in{padding-block:clamp(16px,3.2vh,40px) clamp(14px,2.6vh,28px);justify-content:center}
.sc-narrow .sc-head{grid-template-columns:minmax(0,1fr);gap:14px}
.sc-narrow .sc-caps{margin-top:12px}
.sc-narrow .sc-cap .h2{max-width:none;font-size:clamp(28px,7.4vw,44px)}
.sc-narrow .sc-cap .lede{margin-top:10px;font-size:15px;line-height:1.5}
.sc-narrow .sc-count{gap:28px;padding-bottom:0}
.sc-narrow .sc-count div{flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:8px}
.sc-narrow .sc-count b{font-size:30px}
.sc-narrow .sc-count .lab{font-size:10px}
.sc-narrow .sc-visual{margin-top:clamp(14px,2.4vh,28px);max-height:600px} /* tablets: keep the cards close together */
.sc-narrow .vend{--vw:min(46%,250px);width:var(--vw);left:calc((100% - var(--vw)) * var(--nx));top:calc((100% - var(--cardh,110px)) * var(--ny));padding:12px 14px;border-radius:12px}
.sc-narrow .vend-n{font-size:18px;margin-top:6px}
.sc-narrow .vend-d{font-size:12.5px;line-height:1.35}
.sc-narrow .vend-k{margin-top:8px;padding-top:8px;font-size:9px}
.sc-narrow .stack{padding:14px}
.sc-narrow .stack-tag{left:14px}
.sc-narrow .stack-grid{gap:6px}
.sc-narrow .ptile{min-height:0;padding:10px 12px 11px;gap:3px;border-radius:10px;justify-content:center}
.sc-narrow .ptile .idx{display:none}
.sc-narrow .pt-n{margin-top:0;font-size:16px}
.sc-narrow .pt-d{font-size:12px;line-height:1.35}
.sc-narrow.sc-tight .pt-d{display:none}
.sc-narrow.sc-tight .ptile{min-height:46px;justify-content:center}
.sc-narrow.sc-tight .pt-n{margin-top:0}

/* ---------- Footer mark: the logomark's three frames, cropped by the page bottom ---------- */
.foot-mark{margin-top:clamp(48px,6vw,80px)}
.foot-mark svg{width:100%;height:auto;display:block}
.foot-mark rect{transform-box:fill-box;--s:clamp(0,calc(var(--fp,1) * 2 - var(--k) * .2),1)}
.foot-mark .mh{fill:var(--mark-1);transform-origin:left center;transform:scaleX(var(--s))}
.foot-mark .mv{fill:var(--mark-2);transform-origin:center top;transform:scaleY(var(--s))}

/* ---------- Industries ---------- */
.segs{margin-top:clamp(48px,6vw,80px);border-bottom:1px solid var(--line-3)}
.seg{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:baseline;padding:24px 0;border-top:1px solid var(--line-3)}
.seg-n{font:400 clamp(28px,3vw,32px)/1.08 var(--f-display);letter-spacing:-.008em;transition:transform .4s var(--ease)}
.seg:hover .seg-n{transform:translateX(8px)}
.seg-d p{color:var(--muted);max-width:52ch}
.tags{display:block;margin-top:10px;font:400 11px/1.6 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.also{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:40px}
.also-links{display:flex;flex-wrap:wrap;gap:8px}
.also-links a{padding:8px 14px;border-radius:999px;border:1px solid var(--line-3);background:rgba(255,255,255,.55);font-size:14px;transition:background-color .2s,border-color .2s}
.also-links a:hover{background:var(--white);border-color:var(--slate)}
.also .small{margin-left:auto}
.also .small a{color:var(--ink)}

/* ---------- Payments flow ---------- */
.flow{position:relative;margin-top:clamp(56px,6vw,88px);aspect-ratio:1312/380}
.flow-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow-lines path{stroke:var(--slate);stroke-opacity:.35;stroke-width:1;vector-effect:non-scaling-stroke}
.flow-dots circle{fill:var(--slate);opacity:0;transition:opacity .6s ease 1.4s}
.flow.in .flow-dots circle{opacity:.85}
.fnode{position:absolute;left:0;top:calc(var(--y) / 380 * 100%);transform:translateY(-50%);width:14.18%;height:36px;display:flex;align-items:center;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--white);font:400 11px/1.18 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.fnode.r{left:auto;right:0;justify-content:flex-end}
.fpill{position:absolute;left:50%;top:48.68%;transform:translate(-50%,-50%);height:46px;padding:0 22px;display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;border-radius:999px;background:var(--white);border:1px solid var(--line-2);z-index:2}
.fpill img{height:15px;width:auto}
.fpill i{width:1px;height:16px;background:var(--line-2)}
.fpill span{font:400 11px/1.18 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.flab{position:absolute;top:calc(58 / 380 * 100% - 52px);font:400 11px/1.18 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.flab-l{left:0}.flab-r{right:0}
.vflow{display:none}
.feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:clamp(56px,6vw,96px)}
.feat h3{font:400 20px/1.2 var(--f-display);letter-spacing:-.005em;margin-top:20px}
.feat p{margin-top:8px;font-size:15px;color:var(--muted)}
.more{margin-top:40px}

/* ---------- FrameOS tabs ---------- */
.tabs{margin-top:clamp(48px,6vw,80px)}
.tablist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.tablist button{position:relative;display:flex;align-items:center;gap:12px;padding:20px 0 18px;background:none;border:0;text-align:left;cursor:pointer;font:400 15px/1.18 var(--f-body);color:var(--muted);transition:color .2s}
.tablist button[aria-selected="true"]{color:var(--ink)}
.tablist button:hover{color:var(--ink)}
.tablist .prog{position:absolute;left:0;right:12px;top:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left}
.tablist button[aria-selected="true"] .prog{transform:scaleX(1)}
.tablist .prog{transition:transform .5s var(--ease)}
.tabs.auto .tablist button[aria-selected="true"] .prog{transform:scaleX(0);animation:prog var(--dur,7s) linear forwards;transition:none}
.tabs.auto.paused .tablist button[aria-selected="true"] .prog{animation-play-state:paused}
@keyframes prog{to{transform:scaleX(1)}}
.panels{display:grid;padding-top:clamp(32px,4vw,56px)}
.panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px 72px;align-items:center}
.panel[hidden]{display:none} /* no JS: only the first panel shows */
/* site.js sets --pch / --uih to the tallest copy block and card, so every panel is the same size */
.pan-copy{min-height:var(--pch,0)}
.ui-card{min-height:var(--uih,0)}
/* crossfade: the new panel fades in as the old one fades out */
.js .panel{transition:opacity .45s ease,visibility 0s linear .45s}
.js .panel:not(.is-active){opacity:0;visibility:hidden;pointer-events:none}
.js .panel.is-active{transition:opacity .5s ease .12s,visibility 0s}
.pan-h{font:400 clamp(30px,3vw,42px)/1.08 var(--f-display);letter-spacing:-.01em;text-wrap:balance}
.pts{margin:24px 0 28px;display:flex;flex-direction:column;gap:12px}
.pts li{position:relative;padding-left:22px;color:var(--muted)}
.pts li::before{content:'';position:absolute;left:0;top:.75em;width:10px;height:1px;background:var(--slate)}
.ui{display:flex;justify-content:center}
.ui-card{width:min(100%,520px);background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px 24px 24px;box-shadow:0 20px 50px rgba(15,28,27,.06)}
.ui-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line)}
.ui-top .lab{font-size:10px}
/* Illustrations. Default = finished state (no JS, reduced motion).
   With JS, the inactive panel resets to its start state; adding .run plays it. */
/* identity */
.status{position:relative;display:inline-grid;font:400 10px/1.18 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.status b{grid-area:1/1;font-weight:400;padding:4px 10px;border-radius:999px;text-align:center;transition:opacity .4s}
.status .s1{background:var(--warm);color:var(--muted);opacity:0}
.status .s2{background:var(--pale-aqua);color:var(--ink)}
.idv-who{display:flex;gap:14px;align-items:center;padding:18px 0}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--tile);border:1px solid var(--line)}
.idv-who b{display:block;font-weight:500;font-size:15px}
.idv-who small{font-size:13px;color:var(--faint)}
.checks li{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.checks i{position:relative;width:20px;height:20px;border-radius:50%;border:1px solid var(--pale-aqua);background:var(--pale-aqua);transition:background-color .35s,border-color .35s}
.checks i::after{content:'';position:absolute;left:6px;top:3px;width:5px;height:9px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);transition:transform .35s var(--ease)}
.js .panel:not(.run) .checks i{background:transparent;border-color:var(--line-2)}
.js .panel:not(.run) .checks i::after{transform:rotate(45deg) scale(0)}
.js .panel:not(.run) .status .s1{opacity:1}
.js .panel:not(.run) .status .s2{opacity:0}
.run .checks i{transition-delay:calc(.5s + var(--k) * .55s)}
.run .checks i::after{transition-delay:calc(.55s + var(--k) * .55s)}
.run .status b{transition-delay:2.9s}
/* billing */
.bars{display:flex;align-items:flex-end;gap:8px;height:150px;padding:22px 0 14px;border-bottom:1px solid var(--line)}
.bars i{flex:1;height:calc(var(--h) * 1%);background:var(--tile);border-radius:3px 3px 0 0;transform-origin:bottom;transition:transform .7s var(--ease)}
.bars i:last-child{background:var(--slate)}
.js .panel:not(.run) .bars i{transform:scaleY(.08)}
.run .bars i{transition-delay:calc(var(--k) * 70ms)}
.credit{padding-top:16px;position:relative}
.credit-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;min-height:22px}
.credit-row .lab{font-size:10px}
.meter{height:8px;border-radius:999px;background:var(--warm);margin-top:12px;overflow:hidden}
.meter i{display:block;height:100%;width:90%;background:var(--slate);border-radius:999px}
.run .meter i{animation:meter 4.2s var(--ease) .6s both}
@keyframes meter{0%{width:82%}55%{width:14%}70%{width:14%}100%{width:90%}}
.topup{position:absolute;right:0;top:12px;font:400 10px/1.18 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;background:var(--pale-aqua);padding:4px 10px;border-radius:999px}
.js .panel:not(.run) .topup{opacity:0}
.run .topup{animation:topup 4.2s ease .6s both}
@keyframes topup{0%,62%{opacity:0;transform:translateY(6px)}72%,100%{opacity:1;transform:none}}
/* fraud */
.rows li{display:grid;grid-template-columns:1.2fr .9fr 1fr auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line);font-size:13.5px;transition:opacity .4s,transform .4s var(--ease)}
.rows li:first-child{border-top:0}
.js .panel:not(.run) .rows li{opacity:0;transform:translateY(-8px)}
.run .rows li{transition-delay:calc(.2s + var(--k) * .45s)}
.amt{font-variant-numeric:tabular-nums;color:var(--muted)}
.score{height:4px;border-radius:999px;background:var(--warm);overflow:hidden}
.score i{display:block;height:100%;width:calc(var(--s) * 1%);background:var(--slate)}
.flag .score i{background:var(--ink)}
.pill{font:400 10px/1.18 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap}
.pill.ok{background:var(--warm);color:var(--muted)}
.pill.bad{background:var(--ink);color:var(--paper)}
.pill.tds{background:var(--pale-aqua);color:var(--ink)}
/* platforms */
.subs li{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-top:1px solid var(--line);font-size:14px}
.subs li:first-child{border-top:0}
.sq{width:28px;height:28px;border-radius:7px;background:var(--tile)}
.st{display:inline-grid;font:400 10px/1.18 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.st b{grid-area:1/1;font-weight:400;padding:4px 10px;border-radius:999px;text-align:center;transition:opacity .4s}
.st .a{background:var(--warm);color:var(--muted);opacity:0}
.st .b{background:var(--pale-aqua);color:var(--ink)}
.js .panel:not(.run) .st .a{opacity:1}
.js .panel:not(.run) .st .b:not(.only){opacity:0}
.run .subs li b{transition-delay:calc(1.2s + var(--k) * .7s)}
.split{margin-top:14px;padding-top:16px;border-top:1px solid var(--line)}
.split-row{display:flex;justify-content:space-between;font-size:14px}
.split-row .lab{font-size:10px}
.split-bar{display:flex;gap:3px;height:10px;margin-top:12px}
.split-bar i{display:block;height:100%;border-radius:3px;transition:flex-grow 1s var(--ease)}
.split-bar .m{flex:9 1 0;background:var(--slate)}
.split-bar .p{flex:1 1 0;background:var(--aqua)}
.js .panel:not(.run) .split-bar i{flex-grow:1}
.run .split-bar i{transition-delay:.4s}
.split-key{display:flex;gap:18px;margin-top:10px;font-size:12px;color:var(--muted)}
.split-key span{display:flex;align-items:center;gap:6px}
.split-key i{width:8px;height:8px;border-radius:2px}
.split-key .m{background:var(--slate)}.split-key .p{background:var(--aqua)}

/* ---------- Onboarding ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:clamp(56px,6vw,96px);padding-top:44px}
.steps-line{position:absolute;left:0;right:0;top:7px;height:1px;background:rgb(var(--lk) / .35);transform-origin:left}
.step{position:relative}
.step .dot{position:absolute;top:-44px;left:0;width:15px;height:15px;border-radius:50%;background:var(--paper);border:1px solid var(--slate)}
.step .dot::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--slate)}
.step .h3{margin-top:12px}
.step p{margin-top:10px;color:var(--muted);max-width:36ch}
#onboarding .cta-row{margin-top:56px}

/* ---------- Pricing ---------- */
.price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 80px;align-items:center}
.price-copy .lede{margin:22px 0 26px}
.price-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:clamp(26px,3vw,40px);box-shadow:0 20px 50px rgba(15,28,27,.05)}
.price-card>.lab{font-size:11px}
.rate{margin-top:22px;font:400 clamp(40px,4.4vw,60px)/1 var(--f-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.rate small{display:block;font:400 11px/1.18 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.rate-sub{margin-top:8px;color:var(--muted)}
.incl{position:relative;margin:24px 0 28px;padding-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.incl li{position:relative;padding-left:24px;font-size:14.5px}
.incl::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left}
.incl .ck{position:absolute;left:0;top:.18em;width:15px;height:15px;fill:none;stroke:var(--slate);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Closing ---------- */
.close{position:relative;overflow:hidden;padding-block:clamp(110px,12vw,170px)}
.tracks{position:absolute;z-index:0;width:min(32vw,460px);height:auto;overflow:visible}
.tracks-r{right:0;top:0}
.tracks-l{left:0;bottom:0}
.tracks-mr,.tracks-ml{display:none}
.tracks path{stroke:var(--slate);stroke-opacity:.42;stroke-width:1.1;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.close-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.close .h2{max-width:16ch;margin-top:0}
.close .lede{margin-top:18px}
.close .cap-form,.close .cta-row{margin-top:34px}
.close .cta-row{justify-content:center}
.close .secondary{margin-top:16px}

/* ---------- Footer ---------- */
.foot{padding-block:64px 0;background:var(--paper);overflow:hidden}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:48px;padding-bottom:56px}
.foot-brand img{height:18px;width:auto}
.foot-brand .lab{margin-top:16px;font-size:11px;color:var(--faint)}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.foot-cols h4{font-size:11px;font-weight:400;margin-bottom:14px;color:var(--faint)}
.foot-cols a{display:block;padding:5px 0;font-size:14px;color:var(--muted)}
.foot-cols a:hover,.foot-legal a:hover{color:var(--ink)}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:24px;border-top:1px solid var(--line);font:400 11px/1.6 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.foot-legal{display:flex;flex-wrap:wrap;gap:20px}

/* ==========================================================
   Motion. Everything is visible without JS and with reduced motion.
   site.js adds .in when an element scrolls into view.
   ========================================================== */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
  .js [data-reveal].in{opacity:1;transform:none}
  /* headline lines rise out of a mask */
  .js .h1 .ln>*{transform:translateY(108%);transition:transform 1.1s cubic-bezier(.2,.7,.1,1) var(--d,0s)}
  .js .h1.in .ln>*{transform:none}
  /* globe: rises into place like a horizon, then the nodes appear and pulse */
  .js .gl{opacity:0;transform:translateY(56px);transition:opacity 1.4s ease .45s,transform 1.8s var(--ease) .45s}
  .js .horizon.in .gl{opacity:1;transform:none}
  .js .node{opacity:0;transition:opacity .6s ease calc(1.1s + var(--d) * .25)}
  .js .horizon.in .node{opacity:1}
  .js .horizon.in .node::after{animation:gring 3.2s ease-out calc(1.6s + var(--d)) infinite}
  .js .chip{opacity:0;transform:translateY(16px)}
  .js .horizon.in .chip{animation:rise .9s var(--ease) var(--d) both,bob 5s ease-in-out calc(var(--d) + 1s + var(--ph,0s)) infinite}
  /* live chips: while a check is pending the dot is an outline that blinks and the word is the
     in-progress state; then it settles, the word flips and the chip's node pings */
  .js .cst .s-from{visibility:visible;opacity:0;transform:translateY(5px)}
  .js .cst>span{transition:opacity .35s ease,transform .4s var(--ease)}
  .js .chip.pending .cst .s-from{opacity:1;transform:none}
  .js .chip.pending .cst .s-to{opacity:0;transform:translateY(-5px)}
  .js .chip.pending i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--accent);animation:cblink 1s ease-in-out infinite}
  .js .node.ping::before{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--slate);animation:gping 1.1s ease-out both}
  /* pricing checklist: the line above the list draws across, then each check draws in turn
     and its text darkens from grey to ink as it's checked (about 2.2s in all) */
  .js .incl::before{transform:scaleX(0);transition:transform .8s var(--ease)}
  .js .incl li{color:var(--faint);transition:color .45s ease calc(.6s + var(--k) * .32s)}
  .js .incl .ck path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s ease calc(.45s + var(--k) * .32s)}
  .js .incl.in::before{transform:none}
  .js .incl.in li{color:var(--ink)}
  .js .incl.in .ck path{stroke-dashoffset:0}
  /* the grid draws itself: rails down on load, each seam outward from its centre tick */
  .js .rails{animation:railsIn 1.6s var(--ease) .1s both}
  .js .seam::after{transform:scaleY(0);transition:transform .45s var(--ease)}
  .js .seam::before{transform:scaleX(0);transition:transform 1.2s var(--ease) .3s}
  .js .seam.in::after,.js .seam.in::before{transform:none}
  /* stack: ten tools fly in and settle, then the frame draws around them */
  .js .stack .ptile{opacity:0;transform:translate(var(--sx),var(--sy)) rotate(var(--sr))}
  .js .stack.in .ptile{opacity:1;transform:none;transition:opacity .7s ease calc(var(--i) * 60ms),transform 1s var(--ease) calc(var(--i) * 60ms)}
  .js .stack.in a.ptile:hover{transform:translateY(-3px);transition-delay:0s}
  .js .fr{--draw:0%;-webkit-mask:conic-gradient(from var(--fr-from),#000 var(--draw),transparent 0);mask:conic-gradient(from var(--fr-from),#000 var(--draw),transparent 0);transition:--draw 1.7s cubic-bezier(.45,0,.25,1)}
  .js .stack.in .fr{--draw:100%;transition-delay:1s}
  .js .stack-tag{opacity:0;transform:translateY(-50%) scale(.9);transition:opacity .5s,transform .5s var(--ease)}
  .js .stack.in .stack-tag{opacity:1;transform:translateY(-50%);transition-delay:1.1s}
  /* FrameOS tabs: the incoming copy rises a touch as it fades in */
  .js .panel .pan-copy{transition:transform .6s var(--ease) .1s}
  .js .panel:not(.is-active) .pan-copy{transform:translateY(10px)}
  /* hairlines draw */
  .js [data-reveal] .hair{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.6,0,.2,1) calc(var(--d,0s) + .1s)}
  .js [data-reveal].in .hair{transform:none}
  /* payments: lines draw, then money moves */
  .js .flow-lines path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) .4s}
  .js .flow.in .flow-lines path{stroke-dashoffset:0}
  .js .fnode,.js .fpill{opacity:0;transition:opacity .6s ease calc(var(--i,0) * 70ms)}
  .js .flow.in .fnode,.js .flow.in .fpill{opacity:1}
  .js .vline i{animation:vdrop 2.4s ease-in-out infinite}
  /* mobile money flow: chips arrive, then the One balance capsule */
  .js .vflow .vchips span{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s var(--ease)}
  .js .vflow.in .vchips span{opacity:1;transform:none}
  .js .vflow .vchips span:nth-child(2){transition-delay:.06s}.js .vflow .vchips span:nth-child(3){transition-delay:.12s}.js .vflow .vchips span:nth-child(4){transition-delay:.18s}
  .js .vflow .vchips + .vline ~ .vchips span{transition-delay:.7s}
  .js .vflow .fpill{transform:scale(.94);transition:opacity .6s ease .35s,transform .6s var(--ease) .35s}
  .js .vflow.in .fpill{opacity:1;transform:none}
  /* onboarding: line draws, nodes pop */
  .js .steps-line{transform:scaleX(0);transition:transform 1.6s cubic-bezier(.6,0,.2,1) .2s}
  .js .steps.in .steps-line{transform:none}
  .js .step{opacity:0;transform:translateY(18px);transition:opacity .8s ease calc(.4s + var(--i) * .45s),transform .8s var(--ease) calc(.4s + var(--i) * .45s)}
  .js .steps.in .step{opacity:1;transform:none}
  .js .step .dot{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1) calc(.4s + var(--i) * .45s)}
  .js .steps.in .step .dot{transform:none}
  /* closing: the chalk tracks are scroll-linked. site.js draws each line (stroke-dashoffset) and
     sets --cq (0 → 1) as the band scrolls toward the middle of the screen; the tracks slide in
     from their corners toward the CTA and come to rest where they sit with motion off. */
  .js .tracks path{stroke-dashoffset:1}
  .js .tracks-r{transform:translate(calc((1 - var(--cq,1)) * 24%),calc((1 - var(--cq,1)) * -20%))}
  .js .tracks-l{transform:translate(calc((1 - var(--cq,1)) * -24%),calc((1 - var(--cq,1)) * 20%))}
  .js .tracks-mr{transform:translateX(calc((1 - var(--cq,1)) * 40%))}
  .js .tracks-ml{transform:translateX(calc((1 - var(--cq,1)) * -40%))}
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:none}50%{transform:translateY(-5px)}}
@keyframes cblink{50%{opacity:.35}}
@keyframes gping{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes railsIn{from{transform:translateX(-50%) scaleY(0)}}
@keyframes gring{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.2);opacity:0}}
@keyframes tring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
@keyframes vdrop{0%{transform:translateY(-6px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(46px);opacity:0}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
  .run .meter i,.run .topup{animation:none}
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width:1180px){
  .nav-links ul{gap:22px}
  .nav-acts{gap:16px}
  .nav-login{display:none}
  .stack-grid{gap:16px}
  .ptile{padding:16px 14px 18px}
  .pt-n{font-size:19px}
}
@media (max-width:1023px){
  .nav-links,.nav-text,.nav-login{display:none}
  .burger{display:block}
  .nav-acts{gap:6px}
  .horizon{--gd:115vw;--cap:calc(var(--gd) * .3)}
  .js[data-sections="blend"] .horizon{--cap:calc(var(--gd) * .38)}
  .sec-head{grid-template-columns:1fr;align-items:start}
  .sec-head .lede{justify-self:start;max-width:56ch}
  .flow{display:none}
  .vflow{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:48px;text-align:center}
  .vchips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
  .vchips span{padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--white);font:400 11px/1.18 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
  .vline{position:relative;width:1px;height:46px;background:rgb(var(--lk) / .35);overflow:visible}
  .vline i{position:absolute;left:-3px;top:0;width:7px;height:7px;border-radius:50%;background:var(--slate)}
  .vflow .fpill{position:static;transform:none;width:auto;padding:0 22px}
  .feats{grid-template-columns:1fr 1fr;gap:36px 32px}
  .panel{grid-template-columns:1fr;gap:36px}
  .price{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  /* closing band: smaller chalk tracks tucked into the corners */
  .tracks{width:min(18vw,170px)}
  .close{padding-block:clamp(120px,16vw,170px)}
}
@media (max-width:760px){
  :root{--nav-h:60px}
  .h1{font-size:clamp(30px,9.2vw,44px)}
  .hero .lede{font-size:16px;line-height:1.7}
  .tracks-r,.tracks-l{display:none}
  .tracks-mr,.tracks-ml{display:block;width:min(58vw,330px)}
  .tracks-mr{right:0;top:20px}
  .tracks-ml{left:0;bottom:20px}
  .horizon{--gd:150vw;--cap:calc(var(--gd) * .34)} /* a bigger globe, cropped by the screen edges */
  .js[data-sections="blend"] .horizon{--cap:calc(var(--gd) * .42)}
  .stack-grid{grid-template-columns:1fr 1fr;gap:12px}
  .fr{--fr-from:-35deg}
  .ptile{min-height:128px}
  .props{grid-template-columns:1fr;gap:36px}
  .seg{grid-template-columns:1fr;gap:10px;padding:24px 0}
  .also .small{margin-left:0;width:100%}
  /* all four tabs visible: a 2 × 2 grid, each with its own progress line */
  .tablist{grid-template-columns:1fr 1fr;column-gap:20px;border-top:0}
  .tablist button{align-items:baseline;gap:10px;padding:12px 0 20px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.3}
  .tablist .prog{right:0}
  .rows li{grid-template-columns:1.2fr .8fr auto;font-size:13px}
  .rows .score{display:none}
  .steps{grid-template-columns:1fr;gap:34px;padding-top:0;padding-left:34px}
  .steps-line{left:7px;right:auto;top:0;bottom:0;width:1px;height:auto;transform-origin:top}
  .js .steps-line{transform:scaleY(0)} .js .steps.in .steps-line{transform:none}
  .step .dot{top:4px;left:-34px}
  .incl{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .cap-form{flex-direction:column}
  .cap-form input{flex:none;width:100%}
  .cap-form .btn{width:100%}
  .form-msg{position:static;margin-top:2px;text-align:left}
  .form-msg:empty{display:none}
  .cta-row .btn{flex:1 1 100%}
  .hero .cta-row,.close .cta-row{width:100%}
  .chip{gap:6px;padding:5px 9px 5px 8px;font-size:11.5px}
  .chip i{width:5px;height:5px}
  .close{padding-block:136px 140px}
  .ui-card{padding:18px 16px 20px}
  .feats{grid-template-columns:1fr}
}
@media (max-width:400px){
  .chip{gap:5px;padding:4px 8px 4px 7px;font-size:11px}
}