/* ============================================================
   DigiDoe — shared shell (tokens + components)
   Linked by index.html + solution-*.html + compliance.html.
   Palette = OFFICIAL digidoe.com brand (orange #E8752A + warm near-black/grey).
   v7 (2026-06-11): retired the unapproved INDIGO palette; type stays
   Spectral + Hanken Grotesk (digidoe.com's Playfair/Outfit are on the
   anti-SaaS ban list, and the brief was a colour swap only).
   ============================================================ */
:root{
  --bg:#FAFAF7; --surface:#FFFFFF; --surface2:#F6F1EA; --lav:#FBEADB;
  --ink:#141418; --soft:#3E3E46; --faint:#6B6B76;
  --brand:#E8752A; --brand-soft:#F09952; --brand-deep:#A8500F; --brand-ink:#A8500F; --brand-btn:#B5530F; --brand-bright:#FF931E;
  /* --brand = bright, decorative fills only · --brand-ink = AA text/links on light · --brand-btn = AA white-text buttons */
  --dark:#0A0A0C; --dark2:#16151A; --dark-ink:#FAFAF7; --dark-soft:#B0B0BA;
  --line:#EBE3D9; --line-d:#2E2E35;
  --q-unlit:#D8D1C6;
  --maxw:1180px; --nav-h:58px;
  --s--1:clamp(.82rem,.8rem + .12vw,.92rem); --s-0:clamp(1rem,.97rem + .18vw,1.1rem);
  --s-1:clamp(1.12rem,1.04rem + .32vw,1.3rem); --s-2:clamp(1.5rem,1.28rem + .9vw,2.05rem);
  --s-3:clamp(1.85rem,1.5rem + 1.5vw,2.7rem); --s-4:clamp(2.25rem,1.8rem + 2.6vw,3.6rem);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--s-0);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:400;line-height:1.07;letter-spacing:-.012em;margin:0}
p{margin:0}a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.2rem,5vw,3rem)}
.eyebrow{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-ink);font-weight:700}
.muted{color:var(--faint)}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:var(--s-0);padding:.72rem 1.4rem;border-radius:100px;cursor:pointer;border:1.5px solid transparent;transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn-primary{background:var(--brand-btn);color:#fff}
.btn-primary:hover{background:var(--brand-deep);transform:translateY(-1px)}
.btn-ghost{border-color:var(--brand);color:var(--brand-ink);background:none}
.btn-ghost:hover{background:var(--brand-btn);color:#fff}
.btn-d{border-color:#4a4a52;color:var(--dark-ink)}.btn-d:hover{background:#fff;color:var(--dark)}
.mark{display:inline-block;color:var(--brand-ink)}
section{padding:clamp(2.4rem,4.5vw,4.2rem) 0}
.band-dark{background:var(--dark);color:var(--dark-ink)}
.band-soft{background:var(--surface2)}
.lead{font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:300;font-size:var(--s-1);color:var(--soft);line-height:1.45}
.center{text-align:center}

/* reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.stagger>.reveal:nth-child(2){transition-delay:.07s}.stagger>.reveal:nth-child(3){transition-delay:.14s}
.stagger>.reveal:nth-child(4){transition-delay:.21s}.stagger>.reveal:nth-child(5){transition-delay:.28s}

/* ===== RIBBON ===== */
.ribbon{background:var(--dark);color:var(--dark-ink);font-size:var(--s--1);text-align:center;padding:.55rem 1rem;display:flex;align-items:center;justify-content:center;gap:.7rem;position:relative}
.ribbon.hide{display:none}
.ribbon .pill{background:var(--brand-btn);color:#fff;font-weight:700;border-radius:100px;padding:.12rem .6rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}
.ribbon a{color:var(--dark-ink);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.ribbon .x{position:absolute;right:1rem;background:none;border:0;color:var(--dark-soft);cursor:pointer;font-size:1.1rem;line-height:1}

/* ===== NAV ===== */
header.site{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:1.4rem;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:.5rem}
.brand .mark{width:26px;height:30px}.brand .word{font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:500;font-size:1.25rem;color:var(--ink)}
.menu{display:none;list-style:none;margin:0;padding:0;gap:.3rem;flex:1}
@media(min-width:940px){.menu{display:flex}}
.menu>li{position:static}
.menu>li>a,.menu>li>button{display:inline-flex;align-items:center;gap:.3rem;background:none;border:0;font:inherit;font-size:var(--s--1);font-weight:600;color:var(--ink);padding:.5rem .8rem;cursor:pointer;text-decoration:none}
.menu>li>a:hover,.menu>li>a.active,.menu>li.has-mega:hover>button,.menu>li.has-mega:focus-within>button{color:var(--brand-ink)}
.caret{width:.42em;height:.42em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .2s var(--ease)}
.has-mega:hover .caret,.has-mega:focus-within .caret{transform:rotate(225deg) translateY(-2px)}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 26px 50px -28px rgba(26,22,18,.30);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:90}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding:1.8rem 0}
.mega-col h5{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 .8rem;font-weight:700}
.mega-col a{display:block;color:var(--ink);padding:.4rem 0;font-size:var(--s--1)}
.mega-col a:hover{color:var(--brand-ink)}
.mega-col a small{display:block;color:var(--faint);font-size:.8em;margin-top:.1rem}
.mega-col a .new{background:var(--brand-btn);color:#fff;font-size:.56rem;font-weight:700;padding:.06rem .34rem;border-radius:100px;text-transform:uppercase;margin-left:.35rem;letter-spacing:.05em}
.mega-feat{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:1.2rem}
.mega-feat .mark{width:28px;height:32px;margin-bottom:.5rem;color:var(--brand-ink)}
.mega-feat p{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--s-0);line-height:1.4;margin-bottom:.8rem;color:var(--ink)}
.nav-cta{display:none;align-items:center;gap:.7rem}@media(min-width:940px){.nav-cta{display:flex}}
.nav-cta .txt{font-size:var(--s--1);font-weight:600;color:var(--soft)}.nav-cta .txt:hover{color:var(--brand-ink)}
.nav-cta .btn{padding:.4rem .95rem;font-size:var(--s--1);min-height:0}
/* region / currency selector (Apple-style pill) */
.ccysel{position:relative}
.ccysel-btn{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--s--1);font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:.34rem .72rem;cursor:pointer;transition:border-color .2s var(--ease),background .2s}
.ccysel-btn:hover{border-color:var(--brand-soft)}
.ccysel-btn .ccysel-flag{font-size:1rem;line-height:1}
.ccysel-btn .ccysel-c{letter-spacing:.02em}
.ccysel-btn .ccysel-cv{opacity:.55;transition:transform .2s var(--ease)}
.ccysel.open .ccysel-btn .ccysel-cv{transform:rotate(180deg)}
.ccysel-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 44px -20px rgba(26,22,18,.3);padding:.4rem;margin:0;list-style:none;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:130}
.ccysel.open .ccysel-menu{opacity:1;visibility:visible;transform:none}
.ccysel-menu li{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:9px;cursor:pointer;font-size:var(--s--1)}
.ccysel-menu li:hover{background:var(--surface)}
.ccysel-menu li[aria-selected="true"]{background:var(--lav)}
.ccysel-menu .ccysel-flag{font-size:1.15rem}
.ccysel-menu .ccysel-c{font-weight:700;color:var(--ink);min-width:2.6em}
.ccysel-menu .ccysel-lab{color:var(--faint)}
/* mobile drawer variant */
.ccysel-m{padding:.2rem .2rem 1rem;border-bottom:1px solid var(--line);margin-bottom:.6rem}
.ccysel-m .ccysel-btn{width:100%;justify-content:space-between;padding:.7rem 1rem;font-size:1rem}
.ccysel-m .ccysel-menu{right:auto;left:0;width:100%}
.burger{display:inline-flex;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;padding:.45rem .65rem;cursor:pointer;color:var(--ink)}
@media(min-width:940px){.burger{display:none}}
.mobile{display:none;border-top:1px solid var(--line);padding:.5rem 0 1rem}.mobile.open{display:block}
.mobile a{display:block;padding:.65rem 0;border-bottom:1px solid var(--line);font-weight:600}
.mobile .btn{margin-top:.9rem;width:100%;justify-content:center}

/* ===== HERO ===== */
.hero{padding:clamp(3rem,7vw,5.5rem) 0}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:940px){.hero-grid{grid-template-columns:1.05fr .95fr;align-items:start}}
.hero-grid>*{min-width:0}
.hero h1{font-size:var(--s-4);max-width:14ch;font-weight:300;margin:.9rem 0}
.hero .sub{max-width:46ch}
.hero .cta-row{margin-top:1.8rem;display:flex;gap:.7rem;flex-wrap:wrap}
.hero .trust{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;font-size:var(--s--1);color:var(--faint)}
.hero .trust a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px;font-weight:600}
/* floating account card */
.acard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 60px -30px rgba(26,22,18,.35);padding:1.4rem;max-width:420px;margin-inline:auto}
.acard .h{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.acard .h b{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:1.1rem}
.acard .chip{background:var(--lav);color:var(--brand-deep);font-size:.66rem;font-weight:700;padding:.2rem .55rem;border-radius:100px;text-transform:uppercase;letter-spacing:.05em}
.bal{display:flex;justify-content:space-between;align-items:center;padding:.7rem 0;border-top:1px solid var(--line)}
.bal .cur{display:flex;align-items:center;gap:.6rem;font-weight:600}
.bal .flag{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;color:#fff}
.bal b{font-family:"Hanken Grotesk",system-ui,sans-serif}
.acard .float{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 30px -16px rgba(26,22,18,.4);padding:.6rem .85rem;font-size:var(--s--1);font-weight:600;display:flex;align-items:center;gap:.5rem}
.acard .f1{top:-16px;right:6px}.acard .f2{bottom:-14px;left:6px}
.acard .dot{width:9px;height:9px;border-radius:50%;background:var(--brand)}
@media(prefers-reduced-motion:no-preference){.acard .float{animation:bob 5s var(--ease) infinite alternate}.acard .f2{animation-delay:1.2s}@keyframes bob{to{transform:translateY(-8px)}}}

/* ===== SOCIAL PROOF ===== */
.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 2rem;align-items:center;margin-top:1.8rem}
@media(min-width:640px){.logos{grid-template-columns:repeat(4,1fr)}}
@media(min-width:980px){.logos{grid-template-columns:repeat(6,1fr)}}
.logos .lg{height:30px;border-radius:7px;background:var(--surface2);display:grid;place-items:center;color:var(--faint);font-size:.66rem;font-weight:700;letter-spacing:.04em;border:1px solid var(--line)}

/* ===== SWITCHER (scroll-driven) ===== */
.tabbar{position:sticky;top:var(--nav-h);z-index:50;background:color-mix(in oklab,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:.8rem 0}
.tabbar .tabinner{display:grid;grid-template-columns:1fr;gap:.4rem}
@media(min-width:760px){.tabbar .tabinner{grid-template-columns:repeat(3,1fr)}}
.tab{font:inherit;font-weight:700;font-size:var(--s--1);text-align:left;padding:.8rem 1rem;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--soft);cursor:pointer;transition:all .25s var(--ease);text-decoration:none;display:block}
.tab small{display:block;font-weight:500;color:var(--faint);margin-top:.15rem}
.tab.active{background:var(--lav);border-color:var(--brand-soft);color:var(--brand-deep);box-shadow:0 6px 18px -10px rgba(232,117,42,.4)}
.tab.active small{color:var(--brand-ink)}
.scene{display:flex;align-items:center;padding:clamp(2.5rem,6vh,5rem) 0;border-top:1px solid var(--line)}
.scene:first-child{border-top:0}
.pgrid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;width:100%}
@media(min-width:900px){.pgrid{grid-template-columns:.85fr 1.15fr}}
.scene h3{font-size:var(--s-2);font-weight:400;margin-bottom:.7rem}
.scene .link{color:var(--brand-ink);font-weight:700;margin-top:1rem;display:inline-block}
/* light mock UI */
.mock{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 50px -30px rgba(26,22,18,.3);overflow:hidden}
.mock .bar{display:flex;gap:.4rem;padding:.7rem .9rem;border-bottom:1px solid var(--line);background:var(--surface2)}
.mock .bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.mock .body{padding:1.1rem 1.2rem;display:grid;gap:.7rem}
.mock .row{display:flex;justify-content:space-between;align-items:center;padding:.6rem .8rem;border:1px solid var(--line);border-radius:9px}
.mock .row .k{font-weight:600;font-size:var(--s--1)}.mock .row .v{font-family:"Hanken Grotesk",system-ui,sans-serif;color:var(--brand-deep)}
.mock .qbar{display:flex;gap:.5rem;align-items:center;padding:.7rem .8rem;border:1.5px solid var(--brand-soft);border-radius:10px;background:var(--lav)}
.mock .qbar input{flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--ink);font-size:var(--s--1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock .qbar .v{flex:0 0 auto}
/* dark node flow */
.flow{background:var(--dark);border-radius:16px;padding:1.6rem;color:var(--dark-ink);display:grid;gap:.8rem}
.node{display:flex;align-items:center;gap:.8rem;background:var(--dark2);border:1px solid var(--line-d);border-radius:10px;padding:.8rem 1rem}
.node .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-weight:700;color:#fff;flex:0 0 auto}
.node .ord{font-size:1.7rem;font-weight:250;line-height:1;color:var(--brand);opacity:.55;flex:0 0 2.3ch;font-variant-numeric:tabular-nums}
.flow .node+.node{margin-top:.6rem}
.node .t b{display:block}.node .t small{color:var(--dark-soft)}
.flowline{height:18px;width:2px;background:var(--brand-soft);margin-left:1.4rem;opacity:.6}

/* ===== VIDEO ===== */
.video{aspect-ratio:16/9;background:linear-gradient(135deg,var(--dark),#2A1A10);border-radius:18px;display:grid;place-items:center;color:var(--dark-ink);position:relative;overflow:hidden;border:1px solid var(--line-d)}
.video .play{width:84px;height:84px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.video .play::after{content:"";border-left:22px solid var(--brand);border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:5px}
.video .cap{position:absolute;bottom:1.2rem;left:1.4rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.72rem;color:var(--dark-soft)}

/* ===== HOW IT WORKS — numbered timeline (redesigned) ===== */
.howline{position:relative;display:grid;grid-template-columns:1fr;gap:2.2rem}
@media(min-width:860px){
  .howline{grid-template-columns:repeat(3,1fr);gap:2.6rem}
  .howline::before{content:"";position:absolute;top:28px;left:calc(16.66% );right:calc(16.66%);height:2px;background:linear-gradient(90deg,var(--brand-soft),var(--brand),var(--brand-deep))}
}
.hstep{position:relative;text-align:left}
.hstep .num{width:58px;height:58px;border-radius:50%;background:var(--bg);border:2px solid var(--brand);color:var(--brand-ink);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:1.6rem;display:grid;place-items:center;position:relative;z-index:1;margin-bottom:1.2rem;transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.hstep .lab{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-ink);font-weight:700;display:block;margin-bottom:.35rem}
.hstep h3{font-size:var(--s-1);font-weight:500;margin-bottom:.5rem}
.hstep:hover .num{background:var(--brand-btn);color:#fff;transform:translateY(-3px)}
.hstep .ghost{position:absolute;top:-.6rem;right:0;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:5rem;line-height:1;color:var(--lav);z-index:0;pointer-events:none;user-select:none}
@media(min-width:860px){.hstep .ghost{display:none}}

/* ===== METRICS — sophisticated bento (redesigned) ===== */
.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2.4rem}
@media(min-width:860px){.bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}}
.tile{position:relative;background:var(--dark2);border:1px solid var(--line-d);border-radius:16px;padding:1.5rem 1.5rem 1.4rem;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:140px;transition:transform .25s var(--ease),border-color .25s var(--ease)}
.tile::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--brand),transparent 70%)}
.tile:hover{transform:translateY(-3px);border-color:var(--brand-soft)}
.tile.big{grid-column:span 2;background:linear-gradient(140deg,#23160C,#16151A 60%)}
.tile b{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--s-3);font-weight:400;display:block;color:#fff;letter-spacing:-.01em;line-height:1}
.tile.big b{font-size:var(--s-4);color:var(--brand)}
.tile .unit{color:var(--brand-soft);font-size:.5em;font-family:"Hanken Grotesk",sans-serif;font-weight:600;margin-left:.15em}
.tile span{color:var(--dark-soft);font-size:var(--s--1);margin-top:.55rem}
.tile .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brand);margin-right:.45rem;vertical-align:middle}
.tile a{color:var(--brand-soft);text-decoration:underline;text-underline-offset:3px}

/* ===== QUOTE — scroll-paint (strengthened) ===== */
.quote-wrap{border-block:1px solid var(--line);padding:clamp(3rem,6vw,5rem) 0}
.quote-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:820px){.quote-grid{grid-template-columns:.3fr .7fr;align-items:start}}
.quote-grid .who{font-size:var(--s--1);color:var(--faint)}.quote-grid .who b{display:block;color:var(--ink);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--s-0)}
.bigq{font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:300;font-size:var(--s-2);line-height:1.32;color:var(--q-unlit)}
.bigq .w{color:var(--q-unlit);transition:color .3s linear}
.bigq .w.lit{color:var(--ink)}
.bigq .w.edge{color:var(--brand-ink)}
.bigq.in{color:var(--ink)}
.bigq .mk{color:var(--brand-ink);font-size:1.4em;line-height:0;vertical-align:-.2em}

/* ===== TEAM ===== */
.team-grid{display:grid;grid-template-columns:1fr;gap:2.4rem;align-items:center}
@media(min-width:900px){.team-grid{grid-template-columns:1.1fr .9fr}}
.team-photo{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px;border:1px solid var(--line);display:block}
.team-links{list-style:none;margin:1.3rem 0 0;padding:0}
.team-links li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.team-links .who{font-family:"Hanken Grotesk",system-ui,sans-serif}.team-links .role{color:var(--faint);font-size:var(--s--1)}
.team-links a{color:var(--brand-ink);font-size:var(--s--1);font-weight:700}

/* ===== PLAYS (kept for reuse on solution pages) ===== */
.plays{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media(min-width:680px){.plays{grid-template-columns:1fr 1fr}}
.play{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .2s var(--ease),border-color .2s var(--ease)}
.play:hover{transform:translateY(-3px);border-color:var(--brand-soft)}
.play .top{background:var(--dark);padding:1rem 1.2rem;display:flex;gap:.5rem}
.play .top i{width:24px;height:24px;border-radius:7px}
.play .top i:nth-child(1){background:var(--brand-soft)}
.play .top i:nth-child(2){background:var(--brand)}
.play .top i:nth-child(3){background:var(--brand-deep)}
.play .bd{padding:1.2rem}
.play .tag{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink);background:var(--lav);padding:.18rem .5rem;border-radius:100px}
.play h3{font-size:var(--s-1);font-weight:500;margin:.7rem 0 .5rem}

/* ===== VALUE PROP (dark) — cycling currencies ===== */
.value{text-align:center}
.value .arc{display:flex;justify-content:center;gap:.7rem;margin-bottom:1.6rem;flex-wrap:wrap}
.value .coin{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:1.4rem;color:#fff;border:1px solid var(--line-d);background:var(--dark2);perspective:320px}
.value .coin .sym{display:block;transition:transform .38s var(--ease),opacity .38s var(--ease)}
.value .coin.flip .sym{transform:rotateX(-90deg);opacity:0}
.value .coin.total{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;font-size:1.05rem;letter-spacing:.01em}
.value h2{font-size:var(--s-3);font-weight:300;max-width:22ch;margin:0 auto 1rem;color:#fff}

/* ===== COMPLIANCE seals ===== */
.seals{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2rem}
@media(min-width:820px){.seals{grid-template-columns:repeat(4,1fr)}}
.seal{text-align:center}
.seal .ring{width:78px;height:78px;border-radius:50%;margin:0 auto .8rem;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,var(--lav),#fff);border:1px solid var(--brand-soft);color:var(--brand-deep)}
.seal .ring .mark{width:34px;height:auto}
.seal b{font-family:"Hanken Grotesk",system-ui,sans-serif;display:block}.seal span{font-size:var(--s--1);color:var(--faint)}
.seal a{color:var(--brand-ink);font-weight:600}

/* ===== TESTIMONIALS ===== */
.tpick{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin:1.8rem 0}
.tpick button{width:48px;height:48px;border-radius:12px;border:2px solid transparent;cursor:pointer;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:500;color:#fff;font-size:1rem;opacity:.5;transition:all .2s var(--ease)}
.tpick button.active{opacity:1;border-color:var(--brand);transform:scale(1.08)}
.tcard{max-width:760px;margin:0 auto;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(1.8rem,4vw,3rem)}
.tcard .q{font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:300;font-size:var(--s-1);line-height:1.4;color:var(--ink)}
.tcard .by{margin-top:1.2rem;font-size:var(--s--1);color:var(--faint)}.tcard .by b{color:var(--ink)}

/* ===== FINAL CTA ===== */
.finalcta{background:var(--dark);border-radius:22px;text-align:center;padding:clamp(2.5rem,6vw,4.5rem)}
.finalcta h2{font-size:var(--s-3);font-weight:300;color:#fff;max-width:22ch;margin:0 auto 1.5rem}
.finalcta .cta-row{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* ===== FOOTER ===== */
footer.site{background:var(--surface2);border-top:1px solid var(--line);padding:3rem 0 2.4rem;font-size:var(--s--1);color:var(--faint)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
@media(min-width:820px){.fgrid{grid-template-columns:1.4fr repeat(3,1fr)}}
footer .fh{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--soft);margin:0 0 .6rem;font-weight:700}
footer .fcol a{display:block;padding:.22rem 0;color:var(--faint)}footer .fcol a:hover{color:var(--brand-ink)}
.footapps{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
/* feedback-july3 #32: footer social row */
.fsocial{margin-top:.8rem}
.fsocial a{display:inline-flex;align-items:center;gap:.45rem;color:var(--soft);text-decoration:none;font-size:var(--s--1);font-weight:600}
.fsocial a:hover{color:var(--ink)}
.fsocial svg{width:16px;height:16px}
.footapps .appbtn{display:inline-flex;align-items:center;gap:.55rem;background:var(--dark);color:#fff;border-radius:11px;padding:.5rem .85rem;text-decoration:none;transition:transform .2s var(--ease),opacity .2s}
.footapps .appbtn:hover{transform:translateY(-2px);opacity:.94}
.footapps .appbtn-ic{width:20px;height:20px;flex-shrink:0;color:#fff}
.footapps .appbtn-tx{display:flex;flex-direction:column;line-height:1.04;text-align:left}
.footapps .appbtn-tx small{font-size:.55rem;letter-spacing:.02em;opacity:.85}
.footapps .appbtn-tx b{font-size:.9rem;font-weight:600;font-family:"Hanken Grotesk",system-ui,sans-serif}
.footapps{align-items:center}
.footapps .appbtn-img{display:inline-flex;align-items:center;transition:transform .2s var(--ease),opacity .2s}
.footapps .appbtn-img:hover{transform:translateY(-2px);opacity:.94}
.footapps .appbtn-img img{display:block;height:40px;width:auto}
/* google-play PNG was trimmed to its content box (564x168) on 2026-07-02 — both badges now render at an equal 40px height */
.logochip{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem}
.logochip img{display:block;height:50px;width:auto}
.compliance{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line);line-height:1.7}
.compliance p{margin:.5rem 0}.compliance strong{color:var(--soft)}.compliance a{color:var(--brand-ink)}

/* ===== SOLUTION / SUBPAGE shared bits ===== */
.subhero{padding:clamp(2rem,3.5vw,3.5rem) 0 clamp(2.2rem,4vw,3.2rem)}
.crumb{font-size:var(--s--1);color:var(--faint);margin-bottom:1rem}
.crumb a{color:var(--brand-ink);font-weight:600}
.split{display:grid;grid-template-columns:1fr;gap:2.4rem;align-items:center}
@media(min-width:900px){.split{grid-template-columns:.95fr 1.05fr;gap:3.4rem}}
.split.rev>*:first-child{order:2}@media(max-width:899px){.split.rev>*:first-child{order:0}}
/* problem -> solution: a heavy DARK squarish 'problem' card -> arrow -> a light 'DigiDoe way' card that relieves it. Equal height (aligned). */
.psol .split{align-items:stretch}
@media(min-width:900px){.psol .split{grid-template-columns:1fr auto 1fr;gap:1.6rem}}
.psol-card{border-radius:12px;padding:1.7rem 1.8rem;display:flex;flex-direction:column}
.psol-problem{background:#1b1610;color:#e6dccd}
.psol-problem h2{color:#fff}
.psol-problem .muted{color:#c2b4a2}
.psol-solution{background:var(--surface2);border:1px solid var(--line);color:var(--ink)}
.psol-tag{align-self:flex-start;display:inline-flex;align-items:center;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.32rem .72rem;border-radius:100px;margin-bottom:.55rem}
.psol-problem .psol-tag{color:#f4a896;background:rgba(255,255,255,.09)}
.psol-solution .psol-tag{color:#fff;background:var(--brand)}
.psol-arrow{align-self:center;justify-self:center;display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--surface);border:1.5px solid color-mix(in oklab,var(--ink) 22%,var(--line));color:var(--brand);flex:0 0 auto;box-shadow:0 10px 22px -12px rgba(26,22,18,.5)}
.psol-arrow svg{width:25px;height:25px}
@media(max-width:899px){.psol-arrow{transform:rotate(90deg);margin:.2rem auto}}
.featrow{display:grid;grid-template-columns:1fr;gap:2.6rem}
.feat{display:grid;grid-template-columns:1fr;gap:1.8rem;align-items:center;padding:clamp(1.6rem,3vw,2.4rem) 0;border-top:1px solid var(--line)}
@media(min-width:820px){.feat{grid-template-columns:.88fr 1fr;gap:3rem}.feat.rev .fmedia{order:2}}
.feat .ftag{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink);background:var(--lav);padding:.2rem .55rem;border-radius:100px;display:inline-block}
.feat h3{font-size:var(--s-2);font-weight:400;margin:.8rem 0 .6rem}
.feat ul{margin:1rem 0 0;padding:0;list-style:none}
.feat li{position:relative;padding-left:1.5rem;margin:.5rem 0;color:var(--soft)}
.feat li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.fmedia{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 50px -30px rgba(26,22,18,.3);overflow:hidden}
.mini-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media(min-width:760px){.mini-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mm{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.3rem}
.mm b{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--s-2);color:var(--brand-deep);display:block;line-height:1}
.mm span{font-size:var(--s--1);color:var(--faint);margin-top:.4rem;display:block}

/* ===== COMPLIANCE PAGE ===== */
.cred-grid{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media(min-width:760px){.cred-grid{grid-template-columns:1fr 1fr}}
.cred{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.7rem;transition:transform .2s var(--ease),border-color .2s var(--ease)}
.cred:hover{transform:translateY(-3px);border-color:var(--brand-soft)}
.cred .ic{width:46px;height:46px;border-radius:12px;background:var(--lav);display:grid;place-items:center;color:var(--brand-deep);margin-bottom:1rem}
.cred .ic .mark{width:24px;height:auto}
.cred h3{font-size:var(--s-1);font-weight:500;margin-bottom:.45rem}
.cred .meta{font-size:var(--s--1);color:var(--faint);margin-top:.7rem}
.cred .meta a{color:var(--brand-ink);font-weight:600}
.faqs{max-width:760px;margin:0 auto}
.faq{border-top:1px solid var(--line);padding:1.3rem 0}
.faq h3{font-size:var(--s-1);font-weight:500;margin-bottom:.5rem}
.calloutbar{background:var(--lav);border:1px solid var(--brand-soft);border-radius:14px;padding:1.2rem 1.4rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:space-between}
.calloutbar p{color:var(--brand-deep);font-weight:600}

/* === feedback round-2 components (feature tiles · core-account blocks · cookie bar) === */
/* #offer — asymmetric editorial ledger (replaces the 7 equal cards; denser, less dead space) */
.offer-grid{display:grid;grid-template-columns:1fr;gap:1.6rem}
@media(min-width:900px){.offer-grid{grid-template-columns:.68fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}.offer-head{position:sticky;top:104px}}
.offer-head h2{margin:.4rem 0 .5rem}
.offer-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.offer-item{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;padding:1.05rem .1rem;border-top:1px solid var(--line)}
.offer-list .offer-item:last-child{border-bottom:1px solid var(--line)}
.offer-item .oi-ic{width:26px;height:26px;color:var(--brand-ink);flex-shrink:0}
.offer-item .oi-ic svg{width:100%;height:100%;display:block}
.offer-item .oi-tx{font-size:var(--s--1);color:var(--faint);line-height:1.5}
.offer-item .oi-tx b{display:block;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--s-0);color:var(--ink);font-weight:600;margin-bottom:.12rem;letter-spacing:-.01em}
.ftiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;margin-top:1.9rem}
.ftile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.5rem 1.4rem;transition:transform .2s var(--ease),border-color .2s var(--ease)}
.ftile:hover{transform:translateY(-3px);border-color:var(--brand-soft)}
.ft-ic{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:10px;background:var(--lav);color:var(--brand-ink);margin-bottom:.9rem}
.ft-ic svg{width:21px;height:21px}
.ftile h3{font-weight:600;font-size:var(--s-1);margin:0 0 .35rem}
.ftile p{color:var(--faint);font-size:var(--s--1);line-height:1.5}
.accounts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.1rem;margin-top:1.9rem;align-items:start}
.acctblock{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.6rem 1.7rem}
.acct-head{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.acct-ccy{font-weight:700;font-size:.72rem;letter-spacing:.06em;color:var(--brand-ink);background:var(--lav);border-radius:8px;padding:.4em .6em}
.acct-head h3{font-weight:600;font-size:var(--s-1)}
.acct-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.acct-list li{position:relative;padding-left:1.5rem;color:var(--soft);font-size:var(--s--1);line-height:1.5}
.acct-list li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.cookiebar{position:fixed;left:clamp(.7rem,3vw,1.4rem);right:auto;bottom:clamp(.7rem,3vw,1.4rem);max-width:min(430px,calc(100vw - 2*clamp(.7rem,3vw,1.4rem)));z-index:2147482000;background:var(--dark);color:var(--dark-ink);border-radius:14px;padding:1rem 1.2rem;display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;justify-content:space-between;box-shadow:0 18px 44px -16px rgba(10,10,12,.6);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.cookiebar.dd-hide{transform:translateY(140%);opacity:0;pointer-events:none}
.cookiebar p{font-size:var(--s--1);color:#d3d3db;max-width:60ch;line-height:1.5}
.cookiebar a{color:var(--brand-soft);font-weight:600;text-decoration:underline}
.cookiebar .cb-actions{display:flex;gap:.6rem;flex-shrink:0}
.cookiebar .cb-btn{font-size:var(--s--1);font-weight:600;border-radius:100px;padding:.5rem 1.1rem;cursor:pointer;border:1.5px solid transparent}
.cookiebar .cb-accept{background:var(--brand-btn);color:#fff}
.cookiebar .cb-decline{background:none;border-color:#4a4a52;color:var(--dark-ink)}
@media(max-width:560px){.cookiebar{right:clamp(.7rem,3vw,1.4rem);max-width:none;bottom:calc(clamp(.7rem,3vw,1.4rem) + 76px);flex-direction:column;align-items:flex-start}.cookiebar .cb-actions{width:100%}.cookiebar .cb-btn{flex:1}}
/* === /feedback round-2 === */

@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.bigq,.bigq .w{color:var(--ink)}.value .coin .sym{transform:none;opacity:1}html{scroll-behavior:auto}}


/* ============================================================
   v7.1 additions — certifications strip, feature visualizations,
   scene-embedded metrics, use-case + team-photo grids.
   ============================================================ */

/* ===== CERTIFICATIONS strip (sits directly below the hero) ===== */
.certstrip{border-block:1px solid var(--line);background:var(--surface)}
.certrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.9rem 2rem;padding:1.1rem 0}
.cert{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--s--1);font-weight:700;color:var(--soft);letter-spacing:.01em}
.cert .b{width:36px;height:36px;border-radius:10px;background:var(--lav);display:grid;place-items:center;color:var(--brand-deep);flex:0 0 auto}
.cert .b .mark{width:19px;height:auto}.cert .b svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}
.certrow .sep{width:1px;height:26px;background:var(--line)}
.certrow .more{font-size:var(--s--1);font-weight:700;color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px}
@media(max-width:720px){.certrow .sep{display:none}}

/* ===== SCENE-embedded metrics (main features section is packed) ===== */
.scenestats{display:flex;gap:1.8rem 2.4rem;flex-wrap:wrap;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.ss b{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--s-1);color:var(--brand-deep);display:block;line-height:1}
.ss span{font-size:.76rem;color:var(--faint)}

/* ===== CHARGE viz — Multi-currency = fast funding ===== */
.charge{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 50px -30px rgba(26,22,18,.3);padding:1.5rem 1.6rem}
.charge .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.charge .top b{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:1.05rem}
.charge .bolt{display:inline-flex;align-items:center;gap:.35rem;color:var(--brand-ink);font-weight:700;font-size:var(--s--1)}
.charge .bolt svg{width:15px;height:15px;fill:var(--brand)}
.charge .meter{height:15px;border-radius:100px;background:var(--surface2);border:1px solid var(--line);overflow:hidden}
.charge .meter i{display:block;height:100%;width:88%;border-radius:100px;background:linear-gradient(90deg,var(--brand-soft),var(--brand))}
.charge .metarow{display:flex;justify-content:space-between;margin-top:.55rem;font-size:var(--s--1);color:var(--faint)}
.charge .metarow b{color:var(--brand-deep);font-family:"Hanken Grotesk",system-ui,sans-serif}
.charge .rows{margin-top:1.2rem;display:grid;gap:.55rem}
.charge .crow{display:flex;justify-content:space-between;align-items:center;padding:.55rem .8rem;border:1px solid var(--line);border-radius:9px}
.charge .crow .k{font-weight:600;font-size:var(--s--1);display:flex;align-items:center;gap:.55rem}
.charge .crow .v{font-family:"Hanken Grotesk",system-ui,sans-serif;color:var(--brand-deep)}
.charge .pin{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.68rem;font-weight:700}
@media(prefers-reduced-motion:no-preference){.charge .meter i{width:0}.charge.in .meter i{animation:charge 2.1s var(--ease) .25s forwards}@keyframes charge{from{width:0}to{width:88%}}}

/* ===== DEVICES viz — Payments on desktop OR mobile ===== */
.devices{position:relative;min-height:240px;display:flex;align-items:flex-end;justify-content:center;padding-top:1rem}
.devices .mac{width:min(100%,480px);height:auto;display:block;filter:drop-shadow(0 30px 38px rgba(26,22,18,.28))}
.devices .phone{position:absolute;right:2%;bottom:-7%;width:min(27%,116px);height:auto;filter:drop-shadow(0 22px 30px rgba(26,22,18,.34))}
@media(prefers-reduced-motion:no-preference){.devices .phone{animation:bob 5s var(--ease) infinite alternate}}
.devcap{text-align:center;font-size:var(--s--1);color:var(--faint);margin-top:1.6rem}
.railchips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;justify-content:center}
.railchips span{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--soft);background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:.34rem .72rem}

/* ===== ORBIT viz — EMIaaS global connectivity + money ===== */
.orbitwrap{background:radial-gradient(circle at 50% 38%,#22160d,var(--dark) 70%);border:1px solid var(--line-d);border-radius:18px;padding:clamp(1.6rem,4vw,2.6rem);overflow:hidden}
.orbit{position:relative;width:100%;aspect-ratio:1/1;max-width:360px;margin:0 auto}
.orbit .ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px dashed rgba(255,255,255,.16);border-radius:50%}
.orbit .r1{width:48%;height:48%}.orbit .r3{width:100%;height:100%}
.orbit .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;background:#0b0b0d;border:1px solid var(--line-d);display:grid;place-items:center;box-shadow:0 0 36px rgba(232,117,42,.45);z-index:3}
.orbit .core .mark{width:38px;color:var(--brand)}
.orbit .spin{position:absolute;inset:13%}
.orbit .spin.outer{inset:0}
.orbit .sat{position:absolute;width:38px;height:38px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:500;color:var(--brand-deep);font-size:.85rem;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.orbit .sat.t{top:-19px;left:calc(50% - 19px)}.orbit .sat.b{bottom:-19px;left:calc(50% - 19px)}
.orbit .sat.l{top:calc(50% - 19px);left:-19px}.orbit .sat.r{top:calc(50% - 19px);right:-19px}
@media(prefers-reduced-motion:no-preference){
  .orbit .spin{animation:spin 30s linear infinite}
  .orbit .spin.outer{animation:spin 46s linear infinite reverse}
  .orbit .sat{animation:spin 30s linear infinite reverse}
  .orbit .spin.outer .sat{animation:spin 46s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
}

/* ===== USE-CASE grid (solution pages) ===== */
.ucgrid{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:1.8rem}
@media(min-width:760px){.ucgrid{grid-template-columns:repeat(3,1fr)}}
.uc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.5rem;transition:transform .2s var(--ease),border-color .2s var(--ease)}
.uc:hover{transform:translateY(-3px);border-color:var(--brand-soft)}
.uc .t{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink)}
.uc h3{font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:500;font-size:var(--s-1);margin:.45rem 0}
.uc p{color:var(--faint);font-size:var(--s--1)}

/* ===== ABOUT US — people grid ===== */
.people{display:grid;grid-template-columns:1fr;gap:1.6rem;margin-top:2rem}
@media(min-width:520px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:820px){.people{grid-template-columns:repeat(4,minmax(0,1fr))}}
.person .ph,.person .phph{width:100%;aspect-ratio:1/1;border-radius:14px;border:1px solid var(--line);display:block;object-fit:cover}
.person .phph{background:linear-gradient(140deg,var(--surface2),var(--lav));display:grid;place-items:center;color:var(--brand-deep);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:1.6rem}
.person b{font-family:"Hanken Grotesk",system-ui,sans-serif;display:block;margin-top:.8rem;font-size:var(--s-0)}
.person .role{color:var(--faint);font-size:var(--s--1)}
.person .pl{color:var(--brand-ink);font-size:var(--s--1);font-weight:700;display:inline-block;margin-top:.4rem}


/* ============================================================
   v7.2 — premium logo, hero badge tokens, improved feature viz.
   ============================================================ */

/* Brand logo (navbar + footer) — official SVG (shield + wordmark) */
.brand-logo{height:32px;width:auto;display:block}
.logochip img{height:46px}
.foot-logo{height:40px;width:auto;display:block}

/* Microsoft Bookings embed (contact page) */
.bookingframe{margin-top:1.6rem;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:0 24px 50px -30px rgba(26,22,18,.3)}
.bookingframe iframe{width:100%;height:1100px;border:0;display:block}
@media(max-width:640px){.bookingframe iframe{height:1450px}}

/* Hero badge tokens (first fold; cert tokens sit by the FRN verify) */
.hbadges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem;align-items:center}
.htoken{display:inline-flex;align-items:center;gap:.42rem;font-size:.72rem;font-weight:700;color:var(--soft);background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:.34rem .72rem;letter-spacing:.01em;white-space:nowrap}
.htoken .d{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:0 0 auto}
.htoken.link{color:var(--brand-ink);border-color:var(--brand-soft)}
.htoken.link:hover{background:var(--lav)}

/* Multi-currency (homepage) viz — fast onboarding completion + versatility */
.acctspeed{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 50px -30px rgba(26,22,18,.3);padding:1.5rem 1.6rem}
.acctspeed .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:.9rem}
.acctspeed .hd b{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:1.05rem}
.acctspeed .hd .tick{display:inline-flex;align-items:center;gap:.35rem;color:var(--brand-ink);font-weight:700;font-size:var(--s--1)}
.acctspeed .steps3{display:flex;gap:.5rem;margin-bottom:.5rem}
.acctspeed .st{flex:1;text-align:center;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--brand-deep)}
.acctspeed .track{height:8px;border-radius:100px;background:var(--surface2);border:1px solid var(--line);overflow:hidden;margin-bottom:.5rem}
.acctspeed .track i{display:block;height:100%;width:100%;border-radius:100px;background:linear-gradient(90deg,var(--brand-soft),var(--brand))}
.acctspeed .cap{font-size:var(--s--1);color:var(--faint);margin-bottom:1.1rem}
.acctspeed .cap b{color:var(--brand-deep);font-family:"Hanken Grotesk",system-ui,sans-serif}
.acctspeed .chips{display:flex;flex-wrap:wrap;gap:.4rem}
.acctspeed .chip2{font-size:.76rem;font-weight:700;min-width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--surface2);border:1px solid var(--line);color:var(--soft);padding:0 .4rem}
.acctspeed .chip2.more{background:var(--brand-btn);border-color:var(--brand-btn);color:#fff;padding:0 .6rem}
@media(prefers-reduced-motion:no-preference){.acctspeed .track i{width:0}.acctspeed.in .track i{animation:fill100 1.8s var(--ease) .2s forwards}@keyframes fill100{from{width:0}to{width:100%}}}
@media(prefers-reduced-motion:reduce){.acctspeed .track i{width:100%}}

/* Device screens — render a UI INSIDE the iPhone + MacBook so users see desktop AND mobile */
.devices{position:relative;min-height:240px;display:flex;align-items:flex-end;justify-content:center;padding-top:1rem}
.dframe{position:relative;display:block}
.dframe.mac{width:min(100%,480px)}
.dframe.phone{position:absolute;right:1%;bottom:-7%;width:min(27%,118px)}
.dframe img{display:block;width:100%;height:auto}
.dframe.mac img{filter:drop-shadow(0 30px 38px rgba(26,22,18,.28))}
.dframe.phone img{filter:drop-shadow(0 22px 30px rgba(26,22,18,.34))}
.dscreen{position:absolute;overflow:hidden;background:linear-gradient(180deg,#fff,var(--surface2));color:var(--ink);padding:6px 7px;font-family:"Hanken Grotesk",sans-serif}
/* [FE: fine-tune these insets to the exact device screen cutout] */
.dscreen.macs{top:7%;left:12.5%;width:75%;height:78%;border-radius:3px;font-size:9.6px;line-height:1.32}
.dscreen.phones{top:2.4%;left:4.6%;width:90.8%;height:95.2%;border-radius:13px;font-size:8.6px;line-height:1.28;padding-top:13%}
.ds-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:5px}
.ds-top b{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:11px}.ds-top span{color:var(--faint);font-size:7px}
.ds-row{display:flex;justify-content:space-between;gap:4px;padding:3px 4px;border:1px solid var(--line);border-radius:3px;margin-bottom:3px;background:#fff}
.ds-row .ds-v{font-weight:700;color:var(--brand-deep);white-space:nowrap}
.ds-ptop{text-align:center;margin-bottom:6px}.ds-ptop b{color:var(--brand-ink);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:11px}
.ds-pcard{display:flex;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:5px;padding:5px 6px;margin-bottom:4px}
.ds-pcard b{color:var(--brand-deep)}
.ds-pbtn{margin-top:6px;background:var(--brand-btn);color:#fff;text-align:center;border-radius:100px;padding:5px;font-weight:700}

/* EMI-as-a-Service (homepage) viz — explanatory "build on our licence" stack */
.emstack{background:radial-gradient(circle at 50% 0%,#22160d,var(--dark) 72%);border:1px solid var(--line-d);border-radius:18px;padding:clamp(1.5rem,3.5vw,2.2rem);color:var(--dark-ink)}
.emstack .lyr{border-radius:12px;padding:.85rem 1rem;text-align:center}
.emstack .your{background:#fff;color:var(--ink);max-width:80%;margin:0 auto;box-shadow:0 12px 26px rgba(0,0,0,.45)}
.emstack .your b{font-family:"Hanken Grotesk",system-ui,sans-serif;display:block}
.emstack .your span{font-size:var(--s--1);color:var(--faint)}
.emstack .conn{width:2px;height:18px;background:var(--brand);margin:.45rem auto;opacity:.75}
.emstack .infra{background:var(--dark2);border:1px solid var(--line-d)}
.emstack .infra .t{font-family:"Hanken Grotesk",system-ui,sans-serif;color:#fff;margin-bottom:.6rem;font-size:var(--s-0)}
.emstack .pills{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.emstack .pill{font-size:.68rem;font-weight:700;background:rgba(232,117,42,.16);color:var(--brand-soft);border:1px solid rgba(232,117,42,.42);border-radius:100px;padding:.28rem .62rem}
.emstack .cust{display:flex;justify-content:center;gap:.55rem}
.emstack .u{width:32px;height:32px;border-radius:50%;background:var(--dark2);border:1px solid var(--line-d);display:grid;place-items:center}
.emstack .u svg{width:17px;height:17px;stroke:var(--brand-soft);fill:none;stroke-width:2}
.emstack .lbl{text-align:center;color:var(--dark-soft);font-size:var(--s--1);margin-top:.5rem}



/* ============================================================
   v8 (2026-06-16) — hero currency arc (moved up from the dark
   value band), pricing module (Lusha-style, [DATA] placeholders —
   regulated, never invent), interactive impact estimators,
   YouTube product video. Tagline → "Protect, move & deal money…".
   ============================================================ */

/* ---- Hero currency arc (light; replaces the old account card) ---- */
.heroccy{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 60px -30px rgba(26,22,18,.35);padding:1.9rem 1.7rem;max-width:420px;margin-inline:auto;text-align:center}
.heroccy .hc-eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-ink);font-weight:700;margin-bottom:1.3rem}
.heroccy .arc{display:flex;justify-content:center;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:1.3rem}
.heroccy .coin{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:1.45rem;color:var(--brand-deep);background:var(--surface2);border:1px solid var(--line);perspective:320px}
.heroccy .coin .sym{display:block;transition:transform .38s var(--ease),opacity .38s var(--ease)}
.heroccy .coin.flip .sym{transform:rotateX(-90deg);opacity:0}
.heroccy .coin.total{background:var(--brand-btn);border-color:var(--brand-btn);color:#fff;font-weight:600;font-size:1.05rem}
.heroccy .hc-cap{font-size:var(--s--1);color:var(--faint);line-height:1.55}
.heroccy .hc-cap b{color:var(--brand-deep);font-family:"Hanken Grotesk",system-ui,sans-serif}
@media(prefers-reduced-motion:reduce){.heroccy .coin .sym{transform:none;opacity:1}}

/* ---- YouTube product video (16:9 responsive) ---- */
.ytembed{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--line-d);background:var(--dark)}
.ytembed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ---- PRICING module (numbers are [DATA] placeholders) ---- */
.pricewrap{max-width:var(--maxw)}
.pricehead{text-align:center;max-width:60ch;margin:0 auto}
.pricetoggle{display:inline-flex;align-items:center;gap:.3rem;background:var(--surface2);border:1px solid var(--line);border-radius:100px;padding:.3rem;margin:1.1rem auto 0}
.pricetoggle button{font:inherit;font-weight:700;font-size:var(--s--1);border:0;background:none;color:var(--soft);padding:.5rem 1.15rem;border-radius:100px;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.pricetoggle button.active{background:var(--brand-btn);color:#fff}
.pricetoggle .save{font-size:.64rem;font-weight:700;color:var(--brand-deep);text-transform:uppercase;letter-spacing:.05em;padding:0 .7rem}
.tiers{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:2.2rem;align-items:stretch}
@media(min-width:640px){.tiers{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.tiers{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.tiers.t3{grid-template-columns:repeat(3,1fr)}}
.bespoke{margin-top:1.4rem;display:flex;gap:1.2rem 1.6rem;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.15rem 1.5rem}
.bespoke .bespoke-h{font-weight:600;color:var(--ink);font-size:var(--s-0)}
.bespoke .bespoke-p{font-size:var(--s--1);color:var(--faint);max-width:74ch;margin-top:.2rem;line-height:1.5}
.bespoke .btn{flex-shrink:0}
.tier{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.7rem 1.5rem;transition:transform .2s var(--ease),border-color .2s var(--ease)}
.tier:hover{transform:translateY(-3px);border-color:var(--brand-soft)}
.tier.feat{border-color:var(--brand);box-shadow:0 24px 50px -30px rgba(232,117,42,.5)}
.tier .pop{align-self:flex-start;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#fff;background:var(--brand-btn);border-radius:100px;padding:.2rem .6rem;margin-bottom:.7rem}
.tier h3{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--s-1);font-weight:500;margin-bottom:.3rem}
.tier .blurb{font-size:var(--s--1);color:var(--faint);min-height:2.8em;margin-bottom:1.1rem}
.tier .price{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--s-3);color:var(--ink);line-height:1;display:flex;align-items:baseline;gap:.1rem}
.tier .price .per{font-family:"Hanken Grotesk",sans-serif;font-size:var(--s--1);font-weight:600;color:var(--faint)}
.tier .pricenote{font-size:.7rem;color:var(--faint);margin-top:.45rem;min-height:1.2em}
.tier .btn{margin:1.2rem 0;justify-content:center;width:100%}
.tier ul{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.55rem}
.tier li{position:relative;padding-left:1.5rem;font-size:var(--s--1);color:var(--soft)}
.tier li::before{content:"\2713";position:absolute;left:0;color:var(--brand-ink);font-weight:700}
.tier li.no{color:var(--faint)}.tier li.no::before{content:"\00d7";color:var(--line-d);font-weight:500}
.pricedisc{margin-top:1.8rem;font-size:.74rem;color:var(--faint);text-align:center;line-height:1.65;max-width:80ch;margin-inline:auto}
.pricedisc b{color:var(--brand-deep)}

/* feature comparison matrix (pricing page) */
.pmscroll{overflow-x:auto;margin-top:1rem}
.pmatrix{width:100%;border-collapse:collapse;font-size:var(--s--1);min-width:680px}
.pmatrix th,.pmatrix td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.pmatrix thead th{font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:500;font-size:var(--s-0);vertical-align:bottom}
.pmatrix thead th.feat{color:var(--brand-deep);display:table-cell;grid-template-columns:none}
.pmatrix td.c,.pmatrix th.c{text-align:center}
.pmatrix tbody th{font-weight:600;color:var(--soft)}
.pmatrix .yes{color:var(--brand-ink);font-weight:700}
.pmatrix .nodot{color:var(--line-d)}
.pmatrix tr:hover td,.pmatrix tr:hover th{background:var(--surface2)}

/* ---- INTERACTIVE IMPACT estimator (solution pages) ---- */
/* premium slider: hairline track + orange fill + grippy thumb */
/* output: light warm card, ONE orange hero number + quiet supporting */
@media(prefers-reduced-motion:no-preference){.impact .ores.hero.bump b{animation:imp-bump .4s var(--ease)}}
@keyframes imp-bump{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}



/* ============================================================
   v8.1 (2026-06-16) — honest trust treatments (no fabricated
   client logos / testimonials), production polish.
   ============================================================ */

/* "Built for" band — replaces the fake client-logo strip */
.builtfor{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:1.6rem}
.bf{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--s-0);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:.5rem 1.15rem}
.bfstat{margin-top:1.6rem;font-size:var(--s--1);color:var(--faint);letter-spacing:.01em}

/* Value triad — replaces fabricated testimonials (rules, not identical cards) */
.valuetriad{display:grid;grid-template-columns:1fr;gap:1.8rem 2.4rem;margin-top:.5rem}
@media(min-width:760px){.valuetriad{grid-template-columns:repeat(3,1fr)}}
.vt{border-top:2px solid var(--brand);padding-top:1.1rem}
.vt .vt-n{font-family:"Hanken Grotesk",system-ui,sans-serif;color:var(--brand-ink);font-size:var(--s-1);font-weight:500;display:block;margin-bottom:.3rem}
.vt h3{font-size:var(--s-1);font-weight:500;margin:.1rem 0 .5rem}

/* small "illustrative" tag for product mockups */
.illus{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);background:var(--surface2);border:1px solid var(--line);border-radius:100px;padding:.1rem .5rem;margin-top:.2rem}



/* ===== BLOG (now on the shared shell) ===== */
.bloghero{padding:clamp(2.6rem,6vw,4.6rem) 0 clamp(1.2rem,3vw,2rem)}
.bloghero h1{font-size:var(--s-4);font-weight:300;max-width:18ch;margin:.4rem 0 0}
.bloghero p{color:var(--soft);font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:300;font-size:var(--s-1);margin-top:1rem;max-width:58ch}
.feature{display:grid;grid-template-columns:1fr;gap:1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(1.6rem,3vw,2.6rem);box-shadow:0 24px 50px -30px rgba(26,22,18,.3)}
@media(min-width:860px){.feature{grid-template-columns:1.3fr .7fr;align-items:center}}
.feature .tag{display:inline-block;background:var(--brand-btn);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;border-radius:100px}
.feature h2{font-size:var(--s-2);font-weight:400;margin:.8rem 0 .6rem}
.feature p{color:var(--soft)}
.feature .fmark{text-align:center}.feature .fmark .mark{width:120px;height:auto;opacity:.4}
.bloggrid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:.5rem}
@media(min-width:680px){.bloggrid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.bloggrid{grid-template-columns:repeat(3,1fr)}}
.bcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.5rem;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.bcard:hover{border-color:var(--brand-soft);transform:translateY(-3px)}
.bcard .cat{align-self:flex-start;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-ink);font-weight:700;background:var(--lav);padding:.2rem .55rem;border-radius:100px}
.bcard h3{font-size:var(--s-1);font-weight:500;margin:.55rem 0;line-height:1.2}
.bcard p{color:var(--faint);font-size:var(--s--1);flex:1}
.bcard .more{margin-top:1rem;color:var(--brand-ink);font-size:var(--s--1);font-weight:700}
.subscribe{text-align:center}
.subscribe h2{font-size:var(--s-2);font-weight:300}



/* ============================================================
   v8.2 (2026-06-17) — header production pass: skip link, scroll
   elevation, active-page indicator, click/keyboard megas, and a
   real mobile menu (grouped accordion mirroring the desktop megas).
   ============================================================ */

/* skip-to-content (a11y) */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:.65rem 1.1rem;border-radius:0 0 8px 0;font-weight:700;font-size:var(--s--1)}
.skip:focus{left:0}

/* sticky header gains a soft shadow once the page scrolls under it */
header.site{transition:box-shadow .25s var(--ease)}
header.site.scrolled{box-shadow:0 10px 30px -18px rgba(26,22,18,.45)}

/* active-page indicator (underline marker, not just colour) */
.menu>li>a,.menu>li>button{position:relative}
.menu>li>a.active,.menu>li>button.active{color:var(--brand-ink)}
.menu>li>a.active::after,.menu>li>button.active::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:-2px;height:2px;background:var(--brand);border-radius:2px}

/* megas also open on click/tap + keyboard (JS toggles .open; hover still works) */
.has-mega.open>.mega{opacity:1;visibility:visible;transform:none}

/* ===== MOBILE MENU — grouped accordion (native <details>), mirrors the desktop megas ===== */
.mobile .m-grp{border-bottom:1px solid var(--line)}
.mobile .m-grp summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:.7rem 0;font-weight:600;font-size:var(--s-0);color:var(--ink)}
.mobile .m-grp summary::-webkit-details-marker{display:none}
.mobile .m-grp summary::after{content:"";width:.5em;height:.5em;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);transition:transform .2s var(--ease)}
.mobile .m-grp[open] summary::after{transform:rotate(-135deg)}
.mobile .m-grp a{padding:.5rem 0 .5rem 1rem;border-bottom:0;font-weight:500;color:var(--soft)}
.mobile .m-grp a:hover{color:var(--brand-ink)}
.mobile .m-cta{display:grid;gap:.6rem;margin-top:1.1rem}
.mobile .m-cta a{border-bottom:0;padding:0}
.mobile .m-cta .btn{width:100%;justify-content:center;padding:.72rem 1.4rem}
.mobile .m-cta .txt{text-align:center;color:var(--soft);font-weight:600;padding:.3rem 0}



/* ============================================================
   v8.3 (2026-06-17) — "Built for" role carousel, desktop↔mobile
   money-transfer device visual, tighter footer.
   ============================================================ */

/* ===== ROLE CAROUSEL ("Built for") — auto-scrolling, clickable, pauses on hover ===== */
.m-rolemarquee{display:none}   /* [v66] mobile-only marquee; hidden on desktop (was missing this base rule -> leaked onto desktop) */
.rolecarousel{overflow:hidden;margin-top:1.9rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.roletrack{display:flex;gap:.8rem;width:max-content;animation:rolescroll 46s linear infinite}
.rolecarousel:hover .roletrack,.rolecarousel:focus-within .roletrack{animation-play-state:paused}
.role{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--s-1);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:.65rem 1.35rem;white-space:nowrap;transition:border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.role::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);flex:0 0 auto;opacity:.55;transition:opacity .2s var(--ease)}
.role:hover,.role:focus-visible{border-color:var(--brand);color:var(--brand-ink);transform:translateY(-2px);box-shadow:0 10px 24px -16px rgba(232,117,42,.6);outline:none}
.role:hover::before,.role:focus-visible::before{opacity:1}
@keyframes rolescroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.roletrack{animation:none;flex-wrap:wrap;justify-content:center;width:auto}.rolecarousel{-webkit-mask-image:none;mask-image:none}}

/* ===== DEVICE TRANSFER VISUAL — money moves desktop → mobile (one account, anywhere) ===== */
.devices{position:relative;min-height:300px;padding-top:1.4rem}
.devices .xfer-lane{position:absolute;left:9%;right:11%;top:46%;height:0;border-top:2px dashed var(--brand-soft);opacity:.6;z-index:1}
.devices .xfer-pkt{position:absolute;top:46%;left:9%;z-index:3;width:34px;height:34px;border-radius:50%;background:var(--brand-btn);color:#fff;display:grid;place-items:center;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:500;font-size:.92rem;box-shadow:0 8px 22px -6px rgba(181,83,15,.7);transform:translate(-50%,-50%)}
.devices .xfer-pkt small{position:absolute;inset:0;border-radius:50%;border:2px solid var(--brand-soft);opacity:0}
@media(prefers-reduced-motion:no-preference){
  .devices .xfer-pkt{animation:pktmove 3.6s var(--ease) infinite}
  @keyframes pktmove{0%{left:9%;top:42%;opacity:0}10%{opacity:1}50%{top:50%}90%{opacity:1}100%{left:89%;top:64%;opacity:0}}
}
@media(prefers-reduced-motion:reduce){.devices .xfer-pkt{left:49%;top:50%}}
.devices .dframe{z-index:2}
.devices .xfer-badge{position:absolute;right:2%;bottom:2%;z-index:4;font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-ink);background:var(--surface);border:1px solid var(--brand-soft);border-radius:100px;padding:.2rem .6rem;box-shadow:0 6px 16px -8px rgba(26,22,18,.4)}

/* ===== FOOTER — tighter, more professional ===== */
footer.site{padding:2.6rem 0 1.6rem}
.foot-logo{height:30px}
.fgrid{gap:1.4rem 2rem;align-items:start}
@media(min-width:820px){.fgrid{grid-template-columns:1.5fr repeat(3,1fr)}}
footer .fcol a{padding:.16rem 0}
.compliance{margin-top:1.7rem;padding-top:1.2rem;font-size:.72rem;line-height:1.6;max-width:96ch}
.compliance p{margin:.4rem 0}



/* ============================================================
   v8.4 (2026-06-17) — belief statement enlarged (Q2) + feature-scene
   visuals refined toward editorial/on-brand (less "generated"):
   onboarding meter + EMI "build-on-our-licence" flow.
   ============================================================ */

/* ----- Belief statement: bigger & more prominent ----- */
.quote-wrap{padding:clamp(4.5rem,10vw,8rem) 0;background:var(--surface2)}
.quote-grid{grid-template-columns:1fr;max-width:1000px;margin:0 auto;gap:1rem}
@media(min-width:820px){.quote-grid{grid-template-columns:1fr}}
.quote-grid .who{order:2;color:var(--faint)}
.quote-grid .who b{font-size:var(--s-1)}
.bigq{font-size:var(--s-3);line-height:1.2}

/* ----- Onboarding meter: editorial, less dashboard-chrome ----- */
.acctspeed{padding:clamp(1.8rem,3.6vw,2.5rem);border-radius:20px}
.acctspeed .hd{margin-bottom:1.25rem;padding-bottom:1.05rem;border-bottom:1px solid var(--line)}
.acctspeed .hd b{font-size:var(--s-1)}
.acctspeed .cap{font-size:var(--s-0);margin:1.15rem 0 1.25rem;color:var(--soft)}
.acctspeed .cap b{font-size:var(--s-1);color:var(--brand-ink)}
.acctspeed .chip2{background:transparent;color:var(--faint);min-width:28px;height:28px}
.acctspeed .chip2.more{background:var(--brand-btn);color:#fff;border-color:var(--brand-btn)}

/* ----- EMI "build-on-our-licence" flow: left-aligned, serif labels, refined ----- */
.emstack{padding:clamp(1.9rem,4vw,2.8rem);border-radius:20px}
.emstack .lyr{border-radius:14px;padding:1.05rem 1.15rem;text-align:left}
.emstack .your{max-width:none;display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.emstack .your b{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--s-1)}
.emstack .your span{color:var(--faint)}
.emstack .infra{padding:1.2rem}
.emstack .infra .t{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--s-1);text-align:left;margin-bottom:.8rem}
.emstack .pills{justify-content:flex-start;gap:.45rem}
.emstack .pill{background:rgba(232,117,42,.12);border-color:rgba(232,117,42,.36);padding:.34rem .72rem}
.emstack .lbl{text-align:left;margin-top:1rem;font-size:var(--s-0)}

/* ----- EMIaaS page node flow (Onboard → Operate → Protect): refined ----- */
.flow{border-radius:16px;padding:1.8rem}
.flow .node{border-radius:12px;padding:.95rem 1.1rem;background:var(--dark2);border-color:var(--line-d)}
.flow .node .t b{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--s-1)}
.flowline{margin-left:1.55rem}



/* ============================================================
   v8.5 (2026-06-17) — "Built for…" role carousel upgrade:
   tailored hover popup (per-role micro-pitch) + rotating CTA line.
   ============================================================ */
.rolewrap{position:relative}
.rolepop{position:absolute;z-index:30;width:min(300px,82vw);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 26px 54px -22px rgba(26,22,18,.5);padding:1.1rem 1.2rem;text-align:left;opacity:0;visibility:hidden;cursor:pointer;transform:translate(-50%,calc(-100% - 4px));transition:opacity .2s var(--ease),transform .2s var(--ease);pointer-events:none}
.rolepop.show{opacity:1;visibility:visible;transform:translate(-50%,calc(-100% - 11px));pointer-events:auto}
.rolepop::after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.rolepop .rp-k{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink)}
.rolepop .rp-r{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--s-1);font-weight:500;display:block;margin:.2rem 0 .45rem;color:var(--ink)}
.rolepop .rp-b{color:var(--soft);font-size:var(--s--1);line-height:1.5;margin:0}
.rolepop .rp-t{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.75rem}
.rolepop .rp-t span{font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-ink);background:var(--lav);border-radius:100px;padding:.18rem .55rem}
.rolepop .rp-cta{display:inline-block;margin-top:.8rem;color:var(--brand-ink);font-weight:700;font-size:var(--s--1)}
@media(prefers-reduced-motion:reduce){.rolepop{transition:none}}

/* rotating capability CTA line */
.rolerotate{margin-top:1.4rem;color:var(--soft);font-size:var(--s-1);font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:300}
.rolerotate .rotw{color:var(--brand-ink);font-weight:400;font-style:italic;display:inline-block;transition:opacity .32s var(--ease),transform .32s var(--ease)}
.rolerotate .rotw.swap{opacity:0;transform:translateY(-7px)}
@media(prefers-reduced-motion:reduce){.rolerotate .rotw{transition:none}}



/* ============================================================
   v9 (2026-06-17) — hero scale-up, carousel popup fixes, refined
   trust seal, fixed-prefix rotating line, multi-currency device flow.
   ============================================================ */

/* ----- HERO: bigger, more designed, typography-led ----- */
.hero{padding:clamp(3.5rem,8vw,7rem) 0}
@media(min-width:940px){.hero-grid{grid-template-columns:1.15fr .85fr;gap:3rem}}
.hero .eyebrow{font-size:.78rem;display:inline-flex;align-items:center;gap:.5rem}
.hero h1{font-size:clamp(3rem,2rem + 5.4vw,6rem);max-width:16ch;line-height:1.0;letter-spacing:-.022em;font-weight:300;margin:1.1rem 0 1.2rem}
.hero .lead.sub{font-size:var(--s-1);max-width:50ch}
.hero .cta-row{margin-top:2rem}

/* ----- "Built for…" carousel: popup now opens BELOW the chip (no top clipping) ----- */
.rolepop{transform:translate(-50%,6px)}
.rolepop.show{transform:translate(-50%,12px)}
.rolepop::after{top:-7px;bottom:auto;border-right:0;border-bottom:0;border-left:1px solid var(--line);border-top:1px solid var(--line)}

/* refined trust seal (closes the section, leads to features) */
.bfstat{display:inline-block;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}

/* rotating line: prefix is fixed (own line); only the phrase animates */
.rolerotate{margin-top:1.5rem;font-size:var(--s-1);line-height:1.3}
.rolerotate .rotw{margin-top:.15rem;font-size:var(--s-2)}

/* ----- DEVICE VISUAL: a stream of currencies flowing desktop → mobile ----- */
.devices .xfer{position:absolute;inset:0;z-index:1;pointer-events:none}
.devices .xfer-lane{position:absolute;left:11%;right:13%;top:44%;border-top:2px dashed var(--brand-soft);opacity:.4}
.devices .xfer b{position:absolute;left:11%;top:44%;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:500;font-size:.88rem;color:#fff;background:var(--brand-btn);box-shadow:0 8px 20px -5px rgba(181,83,15,.55);opacity:0;transform:translate(-50%,-50%)}
.devices .xfer b:nth-of-type(2){background:#3E3E46}
.devices .xfer b:nth-of-type(3){background:var(--brand)}
.devices .xfer b:nth-of-type(4){background:var(--brand-deep)}
.devices .xfer b:nth-of-type(5){background:#5A4632}
@media(prefers-reduced-motion:no-preference){
  .devices .xfer b{animation:coinflow 4s var(--ease) infinite;animation-delay:var(--d)}
  @keyframes coinflow{
    0%{left:11%;top:40%;opacity:0;transform:translate(-50%,-50%) scale(.55)}
    12%{opacity:1;transform:translate(-50%,-50%) scale(1)}
    50%{top:54%}
    86%{opacity:1;transform:translate(-50%,-50%) scale(1)}
    100%{left:87%;top:66%;opacity:0;transform:translate(-50%,-50%) scale(.55)}
  }
}
@media(prefers-reduced-motion:reduce){.devices .xfer b:nth-of-type(1){left:49%;top:50%;opacity:1}.devices .xfer b:nth-of-type(n+2){display:none}}



/* device visual — larger & more prominent (per request) */
.devices{min-height:360px}
.dframe.mac{width:min(100%,560px)}
.devices .dframe.phone{width:min(28%,132px)}
.devcap{font-size:var(--s-0);margin-top:2rem}



/* ============================================================
   v10 (2026-06-17) — presence + sophistication pass (from the
   live full-page render): commanding hero, real card depth,
   belief-as-a-moment, editorial value triad.
   ============================================================ */

/* ----- HERO: command the fold ----- */
.hero{padding:clamp(1.4rem,2.5vw,2.6rem) 0 clamp(2.4rem,4.5vw,3.8rem)}
@media(min-width:940px){.hero-grid{grid-template-columns:1.28fr .72fr;gap:3.5rem;align-items:center}}
.hero .eyebrow{font-size:.74rem}
.hero h1{font-size:clamp(3.3rem,2rem + 7vw,7.2rem);line-height:.95;letter-spacing:-.028em;font-weight:400;max-width:20ch;margin:1.3rem 0 1.5rem}
.hero h1 em{font-style:normal;font-weight:400;color:var(--soft)}
.hero .lead.sub{font-size:var(--s-1);max-width:46ch;color:var(--soft)}
.hero .cta-row{margin-top:2.2rem}
.hero .cta-row .btn{padding:.85rem 1.7rem}

/* ----- premium depth: kills the flat "wireframe" look on the key cards ----- */
.heroccy,.acctspeed,.charge,.emstack,.tier,.acard{
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 44px 82px -44px rgba(26,22,18,.42),0 10px 26px -18px rgba(26,22,18,.2);
}
.heroccy{padding:2rem 1.9rem;border-radius:22px}
.heroccy .coin{width:52px;height:52px}

/* ----- BELIEF statement: make it a real moment ----- */
.quote-wrap{padding:clamp(5rem,11vw,9rem) 0}
.bigq{font-size:clamp(2.1rem,1.3rem + 3.2vw,3.8rem);line-height:1.16}

/* ----- VALUE TRIAD: editorial, not generic ----- */
.valuetriad{gap:2.2rem 3rem}
.vt{border-top:1px solid var(--line);padding-top:1.5rem}
.vt .vt-n{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--s-2);font-weight:300;color:var(--brand-deep);margin-bottom:.5rem}
.vt h3{font-size:var(--s-1);font-weight:500;margin:.2rem 0 .6rem}

/* ----- "Our leadership" people row (replaces the video) ----- */
.facerow .people{max-width:920px;margin-inline:auto}
.facerow .person .phph{background:linear-gradient(150deg,var(--surface2),var(--lav));font-size:1.4rem}


/* ===== HERO ACCOUNT OBJECT (v10 — layered multi-currency account) ===== */
.accountobj{position:relative;max-width:430px;margin-inline:auto;padding:14px 18px 4px 0}
@media(min-width:940px){.accountobj{margin-right:0;margin-left:auto}}
.accountobj .ao-back{position:absolute;inset:36px -8px 4px 30px;background:var(--surface2);border:1px solid var(--line);border-radius:22px;transform:rotate(1.6deg);z-index:0}
.ao-card{position:relative;z-index:1;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:0 44px 84px -38px rgba(26,22,18,.5),0 6px 18px -10px rgba(26,22,18,.22);padding:1.5rem 1.5rem 1.4rem}
.ao-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.1rem}
.ao-label{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:1.34rem;line-height:1.1;color:var(--ink)}
.ao-sub{font-size:.72rem;color:var(--faint);margin-top:.28rem;letter-spacing:.01em}
.ao-live{display:inline-flex;align-items:center;gap:.42rem;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--brand-ink);background:var(--lav);border-radius:100px;padding:.32rem .62rem;white-space:nowrap}
.ao-live .d{width:7px;height:7px;border-radius:50%;background:var(--brand)}
@media(prefers-reduced-motion:no-preference){.ao-live .d{animation:aopulse 2.4s var(--ease) infinite}@keyframes aopulse{0%{box-shadow:0 0 0 0 rgba(232,117,42,.5)}70%{box-shadow:0 0 0 7px rgba(232,117,42,0)}100%{box-shadow:0 0 0 0 rgba(232,117,42,0)}}}
.ao-rows{display:flex;flex-direction:column}
.ao-row{display:flex;justify-content:space-between;align-items:center;padding:.72rem 0;border-top:1px solid var(--line)}
.ao-row:first-child{border-top:0;padding-top:.2rem}
.ao-cur{display:flex;align-items:center;gap:.62rem;font-size:.86rem;font-weight:600;color:var(--soft)}
.ao-flag{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.84rem;color:#fff;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:500}
.ao-flag.f-gbp{background:#3a4a5c}.ao-flag.f-usd{background:#2f6b4f}.ao-flag.f-eur{background:#4a5478}
.ao-row b{font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:500;font-size:1.14rem;color:var(--ink);letter-spacing:-.01em}
.ao-rail{display:flex;align-items:center;gap:.7rem;margin:.95rem 0 1.1rem;padding-top:1rem;border-top:1px solid var(--line)}
.ao-rail-lab{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--faint);white-space:nowrap}
.ao-coins{display:flex;align-items:center;gap:.4rem}
.ao-coins .coin{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:500;font-size:.9rem;color:var(--brand-deep);background:var(--surface2);border:1px solid var(--line);perspective:300px}
.ao-coins .coin .sym{display:block;transition:transform .38s var(--ease),opacity .38s var(--ease)}
.ao-coins .coin.flip .sym{transform:rotateX(-90deg);opacity:0}
.ao-coins .coin.total{background:var(--brand-btn);border-color:var(--brand-btn);color:#fff;font-size:.74rem;font-weight:600}
.ao-fx{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:.95rem 1.05rem}
.ao-fx-row{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;font-weight:600;color:var(--soft)}
.ao-fx-row b{font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:500;font-size:1.08rem;color:var(--ink)}
.ao-fx-note{font-size:.7rem;color:var(--faint);margin:.45rem 0 .85rem;display:flex;align-items:center;gap:.4rem}
.ao-fx-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex:0 0 auto}
.ao-fx-btn{display:block;text-align:center;background:var(--brand-btn);color:#fff;font-weight:700;font-size:.82rem;border-radius:100px;padding:.62rem 1rem;cursor:pointer}
.ao-float{position:absolute;right:-4px;bottom:34px;z-index:3;display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--line);border-radius:100px;box-shadow:0 18px 34px -16px rgba(26,22,18,.45);padding:.5rem .9rem .5rem .55rem;font-size:.74rem;font-weight:700;color:var(--ink)}
.ao-shield{width:18px;height:18px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:.6rem;font-weight:700;flex:0 0 auto}
.ao-illus{text-align:right;font-size:.62rem;color:var(--faint);margin-top:.55rem;letter-spacing:.03em;font-style:normal}
@media(prefers-reduced-motion:no-preference){.ao-float{animation:aofloat 5s var(--ease) infinite alternate}@keyframes aofloat{to{transform:translateY(-9px)}}}



/* ============================================================
   v11 (2026-06-18) — QA design pass. Authoritative overrides.
   Goals: legible belief moment, ONE light editorial register for
   the 3 feature scenes (no fake progress meter / flying-coin
   animation / dark slab), asymmetric value triad, editorial CTA,
   quieter eyebrows, and overflow/mobile hardening.
   ============================================================ */

/* eyebrows: private-bank weight, not startup-bold */
.eyebrow{font-weight:600}

/* HERO — ease the headline off its maximum and rebalance so the card has presence */
.hero h1{font-size:clamp(2.4rem,1.7rem + 3vw,4.2rem);line-height:1.06;letter-spacing:-.022em;font-weight:600}
@media(min-width:940px){.hero-grid{grid-template-columns:1.12fr .88fr;gap:3.2rem;align-items:center}}
.accountobj{max-width:468px}

/* BELIEF STATEMENT — was near-invisible pale text at rest; make it readable always + editorial 2-col */
.bigq{color:var(--soft)}
.bigq .w{color:#B3A998}
.bigq .w.lit{color:var(--ink)}
.bigq .w.edge{color:var(--brand-ink)}
.quote-grid .who{order:0;color:var(--faint)}
.quote-grid .who b{font-family:"Hanken Grotesk",system-ui,sans-serif;color:var(--ink)}
@media(min-width:820px){.quote-grid{grid-template-columns:.26fr .74fr;gap:2.6rem;align-items:start;max-width:1040px}}

/* VALUE TRIAD — asymmetric + staggered, kills the "three identical numbered columns" tell */
.vt .vt-n{font-size:var(--s-1);letter-spacing:.01em}
@media(min-width:760px){
  .valuetriad{grid-template-columns:1.18fr 1fr 1fr;gap:0 3rem}
  .valuetriad .vt:nth-child(2){margin-top:1.6rem}
  .valuetriad .vt:nth-child(3){margin-top:3.2rem}
}

/* ===== FEATURE SCENES — unify into one light, editorial language ===== */
/* Scene 1 · onboarding: drop the SaaS progress bar; keep an Apply → Verify → Live sequence */
.acctspeed .track{display:none}
.acctspeed .steps3{margin:.5rem 0 1.1rem}
.acctspeed .steps3 .st{position:relative}
.acctspeed .steps3 .st:not(:last-child)::after{content:"\2192";position:absolute;right:-.35em;top:0;color:var(--line-d);font-weight:400}
/* Scene 2 · devices: kill the flying-coin gimmick + "Synced" badge; let the mockups sit still */
.devices .xfer,.devices .xfer-badge{display:none}
@media(max-width:760px){.dframe.phone,.devices .dframe.phone{bottom:0;right:0}}
/* Scene 3 · EMI stack: off the dark gradient onto the same light surface as scenes 1 & 2 */
.emstack{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.emstack .your{background:var(--surface2);border:1px solid var(--line)}
.emstack .your b{color:var(--ink)}
.emstack .your span{color:var(--faint)}
.emstack .conn{background:var(--brand-soft);opacity:1}
.emstack .infra{background:var(--lav);border:1px solid var(--brand-soft)}
.emstack .infra .t{color:var(--ink)}
.emstack .pill{background:#fff;color:var(--brand-deep);border:1px solid var(--brand-soft)}
.emstack .u{background:var(--surface2);border:1px solid var(--line)}
.emstack .u svg{stroke:var(--brand-deep)}
.emstack .lbl{color:var(--soft)}

/* CHARGE viz (multi-currency hero) — remove the consumer-fintech progress meter */
.charge .meter,.charge .metarow{display:none}
.charge .top{margin-bottom:.4rem}

/* FINAL CTA — editorial left-aligned 2-col instead of generic centered dark slab */
.finalcta{text-align:left;display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:center}
@media(min-width:780px){.finalcta{grid-template-columns:1.5fr auto;gap:3rem}}
.finalcta h2{margin:0;max-width:20ch}
.finalcta .cta-row{justify-content:flex-start;margin:0}

/* ===== overflow + mobile hardening ===== */
.mm b{font-size:var(--s-1);line-height:1.05;overflow-wrap:anywhere}
.tier .price{overflow-wrap:anywhere}
@media(max-width:560px){.tier .price{font-size:var(--s-2)}}
@media(max-width:859px){.feature .fmark{display:none}}
.orbitwrap{padding:clamp(2rem,5vw,2.8rem)}
@media(max-width:520px){.orbit{max-width:280px}}
.bookingframe{background:var(--surface2);position:relative;min-height:520px}
.bookingfallback{position:absolute;inset:0;display:grid;place-content:center;gap:.5rem;text-align:center;padding:1.5rem;color:var(--faint);font-size:var(--s--1)}
.bookingfallback a{color:var(--brand-ink);font-weight:600}
.bookingframe iframe{position:relative;z-index:1;background:var(--surface)}

/* graceful "to be confirmed" placeholder state */
.tbd{color:var(--faint);font-style:italic;font-weight:400}

/* pricing: audience-led "best for" line + annual-billing note (Lusha-style self-select) */
.tier .tierfit{font-size:var(--s--1);color:var(--brand-ink);font-weight:600;line-height:1.4;margin:.15rem 0 1.1rem;min-height:2.7em}
.billann{display:none}
[data-pricing].annual .billann{display:inline}


/* text-only prices ("On enquiry" / "Custom") render as a label, not at numeric display size */
.tier .price.text{font-size:var(--s-1);font-weight:500;color:var(--soft);line-height:1.2}
/* comparison matrix: a little more row definition (was reading faint) */
.pmatrix tbody tr:nth-child(odd) td,.pmatrix tbody tr:nth-child(odd) th{background:color-mix(in oklab,var(--surface2) 55%,transparent)}


/* FIX: the "Most popular" pricing card uses class "tier feat" — the `feat` token
   collided with the solution-page `.feat` row component (which sets gap:3rem),
   injecting a 48px flex-gap between every child and ballooning the card to 887px,
   which `align-items:stretch` then forced onto all four tiers. Neutralise it. */
.tier.feat{display:flex;flex-direction:column;gap:0;grid-template-columns:none}
.tier.feat h3{margin:0 0 .3rem}  /* kill the .feat (solution-row) h3 margin that leaks into the featured pricing card */



/* ============================================================
   v12 (2026-06-18) — DESIGN-LANGUAGE pass. A consistent, bespoke
   system so components read as one mature brand, not a template:
   · signature: a short orange rule precedes every eyebrow
   · left-aligned editorial section headers (no centered monotony)
   · calmer, classic hero (one proof line + trust strip)
   · refined leadership row; readable measure; restrained motion
   ============================================================ */

/* — Signature eyebrow: short brand rule, refined tracking — */
.eyebrow{display:inline-flex;align-items:center;gap:.65rem;font-size:.7rem;letter-spacing:.2em}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--brand);flex:0 0 auto}

/* — Editorial section header (asymmetric, left) — */
.sechead{max-width:40ch;margin:0 0 clamp(2rem,4.5vw,3.2rem)}
.sechead h2{margin-top:.85rem;line-height:1.08;letter-spacing:-.014em}
.sechead .lead,.sechead .muted,.sechead p:not(.eyebrow){margin-top:.85rem;font-size:var(--s-0);color:var(--soft);max-width:50ch;line-height:1.55}

/* — HERO: left as original per feedback (kept headline, full sub, trust line + badges) — */

/* role carousel: give the hover-lift vertical room so pills aren't clipped at the top by the overflow mask */
.rolecarousel{padding-block:.9rem}
.rolecarousel .roletrack{padding-block:2px}

/* calmer motion: stop the infinite phone "bob" (read as gimmicky, not convincing) */
@media(prefers-reduced-motion:no-preference){.devices .dframe.phone,.devices .phone{animation:none}}

/* — Readable measure on body copy (mature typography) — */
.lead{max-width:60ch}
.scene .muted,.feat .muted,.tcard .q{max-width:54ch}

/* — Component sensations: ONE restrained, consistent motion language — */
.tier,.mm,.cred,.bcard,.play,.uc,.acctspeed,.emstack,.charge,.accountobj,.mock{transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease)}
.facerow .person{transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease)}
.facerow .person:hover{transform:translateY(-3px);border-color:var(--brand-soft)}

/* — Leadership: a refined 3-card row (Founder · COO · Account managers) — */
.facerow .people{grid-template-columns:1fr;gap:1.2rem;max-width:none;margin-top:0}
@media(min-width:680px){.facerow .people{grid-template-columns:repeat(3,minmax(0,1fr))}}
.facerow .person{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.6rem 1.5rem;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 22px 44px -34px rgba(26,22,18,.4)}
.facerow .person .phph{width:52px;height:52px;border-radius:50%;font-size:1.05rem;display:grid;place-items:center}
.facerow .person .phph .mark{color:var(--brand-ink)}
.facerow .person b{display:block;margin-top:1.1rem;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--s-0)}
.facerow .person .role{color:var(--faint);font-size:var(--s--1)}



/* ============================================================
   v13 (2026-06-18) — PRODUCT PANEL system. The 3 feature scenes
   become real product surfaces (like the hero account card),
   not steppers / device mockups / box diagrams. Shared language:
   status pill, hairline data rows, Spectral numerals, toast.
   ============================================================ */
.ppanel{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 42px 80px -44px rgba(26,22,18,.42),0 9px 24px -18px rgba(26,22,18,.2);
  padding:1.45rem 1.55rem;max-width:466px;margin-inline:auto}
@media(min-width:940px){.ppanel{margin-right:0;margin-left:auto}}
.ppanel .pp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.05rem}
.ppanel .pp-title{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:1.24rem;color:var(--ink);line-height:1.15}
.ppanel .pp-sub{font-size:.72rem;color:var(--faint);margin-top:.26rem;letter-spacing:.01em}
.ppanel .pp-pill{display:inline-flex;align-items:center;gap:.42rem;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;border-radius:100px;padding:.32rem .62rem;white-space:nowrap}
.ppanel .pp-pill.ok{color:#2f6b4f;background:rgba(47,107,79,.11)}
.ppanel .pp-pill.live{color:var(--brand-ink);background:var(--lav)}
.ppanel .pp-pill .d{width:7px;height:7px;border-radius:50%;background:currentColor}
@media(prefers-reduced-motion:no-preference){.ppanel .pp-pill.live .d{animation:aopulse 2.4s var(--ease) infinite}}
.ppanel .pp-rows{display:flex;flex-direction:column}
.ppanel .pp-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.72rem 0;border-top:1px solid var(--line)}
.ppanel .pp-row:first-child{border-top:0;padding-top:.2rem}
.ppanel .pp-k{display:flex;align-items:center;gap:.62rem;font-size:.85rem;font-weight:600;color:var(--soft);min-width:0}
.ppanel .pp-k .col{display:flex;flex-direction:column;min-width:0}
.ppanel .pp-k small{font-weight:500;color:var(--faint);font-size:.72rem;margin-top:.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppanel .pp-v{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:1rem;color:var(--ink);white-space:nowrap;text-align:right;letter-spacing:-.01em}
.ppanel .pp-v.ok{color:#2f6b4f;font-family:"Hanken Grotesk",sans-serif;font-size:.74rem;font-weight:700;letter-spacing:0}
.ppanel .pp-v.act{color:var(--brand-ink)}
.ppanel .pp-ic{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;background:var(--surface2);color:var(--brand-deep);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:.82rem;font-weight:500}
.ppanel .pp-foot{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);font-size:.74rem;color:var(--faint);display:flex;align-items:center;gap:.5rem;line-height:1.45}
.ppanel .pp-foot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex:0 0 auto}
.ppanel .pp-cta{display:block;text-align:center;background:var(--brand-btn);color:#fff;font-weight:700;font-size:.82rem;border-radius:100px;padding:.62rem 1rem;margin-top:1.05rem}
.ppanel .pp-toast{position:absolute;right:20px;bottom:-15px;display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--line);border-radius:100px;box-shadow:0 18px 34px -16px rgba(26,22,18,.45);padding:.45rem .85rem .45rem .5rem;font-size:.72rem;font-weight:700;color:var(--ink)}
.ppanel .pp-v .adot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--brand);margin-right:.42rem;vertical-align:middle}
.ppanel .pp-toast .s{width:18px;height:18px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:.58rem;flex:0 0 auto}
.ppanel .pp-illus{text-align:left;font-size:.62rem;color:var(--faint);margin-top:.5rem;letter-spacing:.03em}
/* layered architecture variant (scene 3) */
.ppanel .pp-layer{padding:.85rem 0;border-top:1px solid var(--line)}
.ppanel .pp-layer:first-of-type{border-top:0}
.ppanel .pp-layer.core{background:var(--lav);border:1px solid var(--brand-soft);border-radius:13px;padding:.95rem 1.05rem;margin:.45rem 0}
.ppanel .pp-layer .lh{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.ppanel .pp-layer .lh b{font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:500;font-size:1rem;color:var(--ink)}
.ppanel .pp-layer .lh span{font-size:.72rem;color:var(--faint);white-space:nowrap}
.ppanel .pp-layer .ll{font-size:.74rem;color:var(--faint);margin-top:.25rem}
.ppanel .pp-caps{display:grid;grid-template-columns:1fr;gap:.5rem;margin-top:.75rem}
.ppanel .pp-cap{display:flex;align-items:center;gap:.45rem;font-size:.76rem;color:var(--soft)}
.ppanel .pp-cap::before{content:"\2713";color:var(--brand-ink);font-weight:700;flex:0 0 auto}




/* v14 — pricing "Most popular" badge floats above the card so it doesn't push
   the featured tier's content down (keeps CTAs + feature lists aligned across cards) */
.tier{position:relative}
.tier .pop{position:absolute;top:-11px;left:1.5rem;margin:0;box-shadow:0 8px 18px -10px rgba(181,83,15,.6)}
.tier.feat{padding-top:1.7rem}



/* v15 — audience hub pages (Companies / Teams): typographic ICP cards
   (kicker + serif headline + line), NOT icon+heading card grids */
.icpgrid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.9rem}
@media(min-width:620px){.icpgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:920px){.icpgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.icpgrid.four{grid-template-columns:1fr}
@media(min-width:620px){.icpgrid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.icpgrid.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
.icp{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.5rem;transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.icp:hover{transform:translateY(-3px);border-color:var(--brand-soft);box-shadow:0 22px 44px -34px rgba(26,22,18,.4)}
.icp .k{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-ink)}
.icp h3{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--s-1);font-weight:500;margin:.5rem 0 .45rem;line-height:1.15}
.icp p{color:var(--soft);font-size:var(--s--1);line-height:1.55}



/* v16 — pricing card alignment: fixed-height "best for" zone + a shared price
   baseline so all four prices AND all four CTAs line up regardless of copy length
   (fixes the staircased prices/buttons). Featured tier gets a subtle earned tint. */
.tier .tierfit{min-height:3.5em}
.tier .price{min-height:3.3rem;display:flex;align-items:flex-end}
.tier .pricenote{min-height:2.5em}
.tier.feat{background:linear-gradient(180deg,var(--surface),color-mix(in oklab,var(--lav) 32%,var(--surface)))}



/* ============================================================
   v17 (2026-06-18) — Lusha-inspired: a trust strip under the hero,
   a dark "by the numbers" band, and the belief moment on dark —
   for institutional proof + a light/dark page rhythm.
   ============================================================ */

/* trust / rails strip (regulated-safe: no fabricated client logos) */
.trustbar{border-block:1px solid var(--line);background:var(--surface)}
.trustrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.7rem 1.8rem;padding:1.05rem 0}
.trustrow .tb-lab{font-size:var(--s--1);font-weight:600;color:var(--soft);letter-spacing:.01em}
.trustrow .tb-lab a{color:var(--brand-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.trustrow .tb-sep{width:1px;height:22px;background:var(--line)}
.trustrow .tb-rails{display:inline-flex;flex-wrap:wrap;gap:.45rem 1.3rem;align-items:center}
.trustrow .tb-rails b{font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:500;font-size:var(--s-0);color:var(--ink);letter-spacing:.02em}
@media(max-width:680px){.trustrow .tb-sep{display:none}}

/* dark "by the numbers" band — editorial hairline bento, not metric slabs */
.numbers .sechead .eyebrow{color:var(--brand-soft)}
.numbers .sechead .eyebrow::before{background:var(--brand-soft)}
.numbers .sechead h2{color:#fff}
.numbers .sechead .muted{color:var(--dark-soft)}
.numgrid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-d);border:1px solid var(--line-d);border-radius:16px;overflow:hidden;margin-top:1.6rem}
@media(min-width:560px){.numgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.numgrid{grid-template-columns:repeat(4,1fr)}}
.num{background:var(--dark2);padding:1.7rem 1.5rem}
.num b{display:block;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:400;font-size:var(--s-3);color:#fff;line-height:1;letter-spacing:-.01em}
.num:first-child b{color:var(--brand-soft)}
.num span{display:block;margin-top:.55rem;font-size:var(--s--1);color:#c2c2cb;line-height:1.45}

/* belief statement moved onto dark ground (second premium moment + rhythm) */
.quote-wrap{background:var(--dark);padding:clamp(3.5rem,7vw,6rem) 0}
.quote-grid .who{color:var(--dark-soft)}
.quote-grid .who b{color:#fff}
.bigq{color:var(--dark-soft)}
.bigq .w{color:#9293a0}
.bigq .w.lit{color:#fff}
.bigq .w.edge{color:var(--brand-soft)}
.bigq .mk{color:var(--brand-soft)}



/* ============================================================
   v18 (2026-06-18) — ONE font (Hanken Grotesk) everywhere; hierarchy
   now carried by weight + size, not serif/sans contrast. Lean belief.
   ============================================================ */
h1,h2,h3{font-weight:600;letter-spacing:-.022em;line-height:1.12}
.finalcta h2,.value h2,.bloghero h1,.subscribe h2,.feature h2,.sechead h2,.pp-title,.tier h3,.icp h3,.num b,.ao-label,.ao-row b,.mm b,.cred h3,.faq h3,.bcard h3,.hstep h3{font-weight:600}
.lead,.hero .lead.sub,.rolerotate,.tcard .q{font-weight:400}
/* belief statement: smaller + more noticeable grey→white scroll-paint (note 8) */
.bigq{font-size:clamp(1.5rem,1.05rem + 1.9vw,2.45rem);line-height:1.28;font-weight:400}
.bigq .w{color:#6a6a75;transition:color .25s linear}
.bigq .w.lit{color:#fff}
.bigq .w.edge{color:var(--brand-bright)}



/* ============================================================
   v19 (2026-06-18) — client notes: drop the leading eyebrow rule
   (read as an em dash), redesign the switcher tabs (no flat peach
   box), align the value triad (no stagger).
   ============================================================ */

/* note 1 — remove the orange leading rule before eyebrows (it reads as a dash) */
.eyebrow::before{content:none}
.eyebrow{gap:0}

/* note 6 — switcher tabs: one consistent border system + a designed active state
   (white card, ink border, 2px orange top accent) instead of a flat peach box */
.tab{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--surface);transition:border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.tab:hover{border-color:var(--brand-soft)}
.tab.active{background:var(--surface);border-color:var(--ink);color:var(--ink);box-shadow:0 12px 28px -18px rgba(26,22,18,.5)}
.tab.active small{color:var(--soft)}
.tab.active::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--brand)}

/* note 10 — value triad: align to a shared baseline (kill the stagger), bolder numerals */
.valuetriad .vt:nth-child(2),.valuetriad .vt:nth-child(3){margin-top:0}
.valuetriad{align-items:start}
.vt{border-top:1px solid var(--line);padding-top:1.4rem}
.vt .vt-n{font-size:var(--s-2);color:var(--brand-ink);font-weight:600;letter-spacing:-.01em}



/* v20 — pricing: "Patented · free onboarding" signal above the tiers */
.onboard-signal{display:flex;align-items:center;gap:.55rem;width:fit-content;max-width:100%;margin:.3rem auto 1.9rem;background:var(--lav);border:1px solid var(--brand-soft);border-radius:100px;padding:.5rem 1.15rem;font-size:var(--s--1);color:var(--brand-deep);text-align:center}
.onboard-signal b{color:var(--brand-ink)}
.onboard-signal .ob-mark{width:17px;height:19px;color:var(--brand-ink);flex:0 0 auto}
.onboard-signal .ob-mark .mark{width:15px;height:auto;display:block}



/* v21 — Meet the team: centred avatars with an Instagram-status brand-gradient ring */
.facerow .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem 1.2rem;max-width:560px;margin:0 auto}
@media(min-width:760px){.facerow .people{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}}
.facerow .person{background:none;border:0;box-shadow:none;padding:0;text-align:center}
.facerow .person:hover{transform:none}
.facerow .person .phph{width:90px;height:90px;border-radius:50%;margin:0 auto 1rem;display:grid;place-items:center;background:var(--surface);color:var(--brand-deep);font-weight:600;font-size:1.3rem;position:relative;isolation:isolate;border:1px solid var(--line)}
.facerow .person .phph::after{content:"";position:absolute;inset:-6px;border-radius:50%;padding:3px;background:conic-gradient(from 150deg,var(--brand-bright),var(--brand),var(--brand-soft),var(--brand-bright));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}
.facerow .person .phph .mark{color:var(--brand-ink)}
.facerow .person b{display:block;margin-top:0;font-size:var(--s-0)}
.facerow .person .role{color:var(--faint);font-size:var(--s--1)}



/* v21 fix — the carousel ".role" pill style (nowrap, border, pad) leaks into person ".role"
   spans; reset them to plain wrapping text (fixes mobile overflow + any pill bleed) */
.person .role{white-space:normal;background:none;border:0;padding:0;border-radius:0;font-weight:400;display:block}



/* ============================================================
   v22 (2026-06-18) — signature brand animation: complexity (left)
   dissolving into one clean money transfer (right). Lean, on-brand.
   ============================================================ */
.flowwrap{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(1.4rem,4vw,2.6rem);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 64px -44px rgba(26,22,18,.4);max-width:680px;margin:0 auto}
.flowviz{width:100%;height:auto;display:block}
.flowviz .fv-cx{stroke:var(--faint);stroke-width:1.4;fill:none}
.flowviz .fv-cx-dots{fill:var(--soft)}
.flowviz .fv-arc{stroke:var(--brand-soft);fill:none}
.flowviz .fv-hub{fill:var(--dark)}
.flowviz .fv-shield{color:#fff}
.flowviz .fv-target{stroke:var(--brand);fill:none}
.flowviz .fv-check{stroke:var(--brand-ink);fill:none}
.flowviz .fv-coin circle{fill:var(--brand-btn)}
.flowviz .fv-coin text{fill:#fff}
.flowviz .fv-lab{fill:var(--faint);font-size:11px;font-weight:600;letter-spacing:.04em}
@media(prefers-reduced-motion:no-preference){
  .flowviz .fv-cx{animation:fvDissolve 5s var(--ease) infinite}
}
@keyframes fvDissolve{0%,16%{opacity:.9}56%,100%{opacity:.14}}
@media(prefers-reduced-motion:reduce){.flowviz .fv-cx{opacity:.18}.flowviz .fv-coin{display:none}}
/* TBA team members: muted grey ring (not the full orange status ring) so they read as pending */
.facerow .person:has(.tbd) .phph::after{background:var(--line-d);opacity:.55}



/* ============================================================
   v23 (2026-06-19) — FLAGSHIP device→mobile asset. CSS-drawn
   laptop + phone (crisp at any size), real legible UI, and a
   payment that travels desktop→phone and lands "Cleared".
   Proves: clears-not-freezes · desktop+mobile · rate-before-confirm.
   ============================================================ */
.flagship{position:relative;width:100%;max-width:540px;margin-inline:auto;aspect-ratio:1/1}
@media(min-width:560px){.flagship{aspect-ratio:5/4}}
/* laptop */
.fl-mac{position:absolute;top:2%;left:0;width:86%}
.fl-screen{background:#15141a;border:1px solid #2c2c34;border-radius:14px 14px 5px 5px;padding:9px;box-shadow:0 34px 64px -36px rgba(26,22,18,.55)}
.fl-base{height:13px;width:117%;margin:0 -8.5%;background:linear-gradient(180deg,#d3ccc1,#a8a195);border-radius:2px 2px 8px 8px;position:relative}
.fl-base::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:20%;height:5px;background:#8b8478;border-radius:0 0 7px 7px}
.fl-ui{background:#fff;border-radius:7px;overflow:hidden;aspect-ratio:16/10;display:flex;flex-direction:column}
.fl-ui .u-top{display:flex;justify-content:space-between;align-items:baseline;padding:.6rem .8rem;border-bottom:1px solid var(--line);background:var(--surface2)}
.fl-ui .u-top b{font-weight:700;font-size:clamp(.62rem,1.5vw,.82rem)}
.fl-ui .u-top span{color:var(--faint);font-size:clamp(.5rem,1.1vw,.64rem)}
.fl-ui .u-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem .8rem;border-bottom:1px solid var(--line);font-size:clamp(.55rem,1.25vw,.72rem)}
.fl-ui .u-row:last-child{border-bottom:0}
.fl-ui .u-row .uk{color:var(--soft)}
.fl-ui .u-row .uv{color:var(--brand-ink);font-weight:700;white-space:nowrap}
.fl-ui .u-row.send .uv{background:var(--brand-btn);color:#fff;border-radius:100px;padding:.12rem .6rem}
/* phone */
.fl-phone{position:absolute;bottom:0;right:0;width:30%;min-width:118px;background:#15141a;border-radius:22px;padding:5px;box-shadow:0 28px 46px -26px rgba(26,22,18,.6);z-index:4}
.fl-pscreen{background:#fff;border-radius:17px;overflow:hidden}
.fl-pscreen .p-top{text-align:center;padding:.7rem 0 .55rem;color:var(--brand-ink);font-weight:700;font-size:clamp(.58rem,1.3vw,.74rem);border-bottom:1px solid var(--line);position:relative}
.fl-pscreen .p-top::before{content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);width:26%;height:4px;background:#15141a;border-radius:100px}
.fl-pc{display:flex;justify-content:space-between;align-items:center;margin:.5rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:9px;font-size:clamp(.52rem,1.15vw,.66rem)}
.fl-pc .uk{color:var(--soft)}
.fl-cleared .chk{color:#2f6b4f;font-weight:700;white-space:nowrap}
.fl-pc .uv{color:var(--brand-ink);font-weight:700}
/* traveling coin */
.fl-coin{position:absolute;top:42%;left:30%;width:clamp(30px,7.5%,40px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 36% 30%,#f4b277,#c2691b 56%,#8a3f0a);color:#fff;display:grid;place-items:center;font-weight:700;font-size:clamp(.82rem,2vw,1.05rem);z-index:6;border:1.5px solid rgba(255,255,255,.45);box-shadow:0 12px 22px -6px rgba(138,63,10,.55),inset 0 1.5px 0 rgba(255,255,255,.45),inset 0 -2px 4px rgba(0,0,0,.25);transform:translate(-50%,-50%)}
@media(prefers-reduced-motion:no-preference){
  .fl-coin{animation:flCoin 4.4s var(--ease) infinite}
  .fl-cleared{animation:flClear 4.4s var(--ease) infinite}
}
@keyframes flCoin{
  0%{top:42%;left:30%;opacity:0;transform:translate(-50%,-50%) scale(.5)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  52%{top:13%;left:51%}
  84%{top:49%;left:66%;opacity:1;transform:translate(-50%,-50%) scale(.92)}
  100%{top:53%;left:69%;opacity:0;transform:translate(-50%,-50%) scale(.42)}
}
@keyframes flClear{0%,82%{background:#fff;border-color:var(--line)}88%{background:rgba(47,107,79,.14);border-color:#9fc3ae}100%{background:#fff;border-color:var(--line)}}
@media(prefers-reduced-motion:reduce){.fl-coin{display:none}}



/* ============================================================
   v24 (2026-06-19) — ABOUT US page (Sikorsky/pioneer narrative,
   company timeline, ISO badges, offices). On-brand, no copyrighted
   imagery; the aviation motif is recreated as a clean line graphic.
   ============================================================ */
.flightpath{width:100%;max-width:430px;margin-inline:auto;display:block;overflow:visible}
.flightpath .fp-globe,.flightpath .fp-lat{stroke:var(--line);fill:none}
.flightpath .fp-arc{stroke:var(--brand-soft);fill:none;stroke-dasharray:3 7;stroke-linecap:round}
.flightpath .fp-dot{fill:var(--brand-deep)}
.flightpath .fp-plane{fill:var(--brand-btn)}
.flightpath .fp-hub{fill:var(--dark)}
.flightpath .fp-shield{color:#fff}
@media(prefers-reduced-motion:reduce){.flightpath .fp-plane-g{display:none}}

/* timeline */
.timeline{max-width:920px;margin:2.4rem auto 0;border-top:1px solid var(--line)}
.tl-row{display:grid;grid-template-columns:1fr;gap:.5rem 2rem;padding:1.7rem 0;border-bottom:1px solid var(--line)}
@media(min-width:740px){.tl-row{grid-template-columns:.3fr .7fr}}
.tl-year{font-size:var(--s-2);font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.02em}
.tl-stage{display:block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--brand-ink);margin-top:.45rem}
.tl-points{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.tl-points li{position:relative;padding-left:1.4rem;color:var(--soft);font-size:var(--s--1);line-height:1.5}
.tl-points li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.tl-row.now .tl-year{color:var(--brand-ink)}
.tl-row.now .tl-stage::after{content:" \00b7 in progress";color:var(--faint);font-weight:600}
.tl-row.now .tl-points li::before{background:none;border:1.5px solid var(--brand)}

/* ISO badges */
.isobadges{display:flex;gap:1.1rem;flex-wrap:wrap;margin:.2rem 0 1.3rem}
.isobadge{width:106px;height:106px;border-radius:50%;border:1px solid var(--brand-soft);background:radial-gradient(circle at 50% 32%,var(--lav),#fff 72%);display:grid;place-items:center;text-align:center;padding:.7rem;box-shadow:0 16px 30px -22px rgba(26,22,18,.4)}
.isobadge b{font-size:.92rem;font-weight:700;color:var(--brand-deep);display:block}
.isobadge span{font-size:.5rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-top:.25rem;line-height:1.25}

/* offices */
.offices{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:1.9rem}
@media(min-width:720px){.offices{grid-template-columns:repeat(3,minmax(0,1fr))}}
.office{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.5rem;transition:transform .25s var(--ease),border-color .25s var(--ease)}
.office:hover{transform:translateY(-3px);border-color:var(--brand-soft)}
.office .ent{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--brand-ink)}
.office .city{font-size:var(--s-1);font-weight:600;margin:.35rem 0 .55rem}
.office .addr{font-size:var(--s--1);color:var(--soft);line-height:1.55}



/* ============================================================
   v25 (2026-06-21) — homepage ELEGANCE pass. "Small & elegant"
   = restraint + air + lighter weight (not literally tiny).
   Per side-by-side analysis vs the reference: lighter/smaller
   headline, uniform colour, more whitespace, quieter chrome,
   fewer competing elements. The long tagline stays intact.
   ============================================================ */
.hero h1{font-size:clamp(2.05rem,1.4rem + 2.5vw,3.45rem);font-weight:500;line-height:1.1;letter-spacing:-.02em;margin:1rem 0 1.7rem}
.hero h1 em{font-style:normal;font-weight:500;color:var(--ink)}   /* uniform, no two-tone */
.hero{padding:clamp(2.25rem,4vw,4rem) 0 clamp(2.6rem,5vw,4.4rem)}  /* headline ~30% down, more air */
.hero .lead.sub{font-size:var(--s-0);color:var(--soft);max-width:46ch}  /* smaller, quieter sub */
.hero .hbadges{margin-top:1.5rem}
/* quieter top chrome (nav + announcement ribbon) */
.menu>li>a,.menu>li>button{font-weight:500}
.ribbon{padding:.42rem 1rem;font-size:.7rem}



/* v26 — hero account card RECEDES to a glimpse (per request): it bleeds off the
   bottom/right, loses its heavy shadow and the tilted backing, and sits lower-
   contrast, so it reads as an airy accent (reference style), not a product demo. */
.hero .accountobj{margin-left:auto}
.hero .ao-card{box-shadow:0 30px 66px -54px rgba(26,22,18,.28);border-color:color-mix(in oklab,var(--line) 60%,transparent)}
.hero .accountobj .ao-back{opacity:.38}
.hero .accountobj .ao-float{box-shadow:0 14px 28px -20px rgba(26,22,18,.28)}
@media(min-width:940px){
  .hero .accountobj{margin-right:-2rem}
  .hero-grid > div:last-child{overflow:visible}
}



/* ============================================================
   v27 (2026-06-21) — MOBILE-ONLY hardening. Every rule is scoped to
   @media(max-width) or to .mobile (hidden >=940px). Desktop (1440)
   cascade is physically untouched; proven via desktop pixel-diff.
   ============================================================ */
/* mobile menu sub-headers (mobile-only element) */
.mobile .m-grp .m-sub{margin:.7rem 0 .15rem;padding-left:1rem;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:700}

@media(max-width:899px){
  /* lead subpage heroes with the product visual (it's the proof), not a screenful of copy */
  .subhero .split > div:last-child{order:-1;margin-bottom:1.7rem}
}
@media(max-width:760px){
  .tabbar{position:static;backdrop-filter:none}            /* don't pin + dominate the mobile fold */
  footer .fcol a{padding:.45rem 0}                         /* tap targets >=44px */
  .railchips span,.htoken{padding:.5rem .8rem}
  .mobile .m-grp a{padding:.65rem 0 .65rem 1rem}
  .mobile .m-cta .txt{padding:.6rem 0}
  .impact input[type=range]{height:11px}
}
@media(max-width:640px){
  .bookingframe iframe{height:1180px}
  .bookingframe{min-height:320px}
}
@media(max-width:560px){
  section{padding:2.1rem 0}                                 /* tighter vertical rhythm when stacked */
  /* announcement ribbon: stop the 3-line wrap colliding with the dismiss X */
  .ribbon{font-size:.76rem;padding:.5rem 2.4rem .5rem .95rem;line-height:1.4;text-align:left;gap:.5rem}
  .ribbon a{display:inline-block;padding:.1rem 0}
  /* role carousel: stop the marquee so chips are tappable; wrap them */
  .roletrack{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:.5rem}
  .rolecarousel{-webkit-mask-image:none;mask-image:none}
  .role{font-size:var(--s-0)}
  /* FLAGSHIP device asset: real mobile layout (was overlap + ~8px UI) */
  .flagship{aspect-ratio:auto;max-width:340px}
  .fl-mac{position:relative;width:100%;top:0}
  .fl-base{width:100%;margin:0}                            /* the 117% bleed overflows once the mac is full-width */
  .fl-phone{position:relative;width:44%;min-width:0;margin:-9% 0 0 auto;right:auto;bottom:auto}
  .fl-coin{display:none}
  .fl-ui .u-row{font-size:.72rem;padding:.45rem .7rem}
  .fl-ui .u-top b{font-size:.8rem}
  .devcap{margin-top:1.2rem}
  /* flow SVG labels legible after scale-down */
  .flowviz .fv-lab{font-size:15px}
  .flowwrap{padding:1.2rem}
  /* compliance callout stacks; product-panel values may wrap */
  .calloutbar{flex-direction:column;align-items:flex-start;gap:.9rem}
  .calloutbar .btn{width:100%;justify-content:center}
  .ppanel .pp-v{white-space:normal;text-align:right}
  /* pricing: remove the desktop card-alignment min-heights (dead space when stacked) + wrap toggle */
  .tier .tierfit,.tier .price,.tier .pricenote{min-height:0}
  .pricetoggle{flex-wrap:wrap;justify-content:center}
}
@media(max-width:480px){
  .subhero h1{font-size:clamp(1.9rem,5.5vw,2.25rem) !important;line-height:1.14}  /* inline var(--s-4) leaks; step down */
  .ppanel{padding:1.25rem 1.2rem}
  .ppanel .pp-k small{white-space:normal}
}



/* ============================================================
   v28 (2026-06-21) — MOBILE carousels + sticky CTA. Mobile-only:
   on desktop these containers stay their original grid (every rule
   is max-width-scoped or targets JS-injected mobile-only elements).
   ============================================================ */
@media(max-width:760px){
  /* a stacked grid becomes a horizontal snap-carousel with edge-to-edge peek */
  .mcarousel{display:flex !important;grid-template-columns:none !important;justify-content:flex-start !important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:0;gap:.9rem;padding:.3rem 0 1rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .mcarousel::-webkit-scrollbar{display:none}
  .mcarousel > *{flex:0 0 84% !important;scroll-snap-align:start;min-width:0;margin-top:0 !important;opacity:1 !important;transform:none !important}
  .tiers.mcarousel > *{flex-basis:82% !important}
  /* swipe dots */
  .mdots{display:flex;justify-content:center;gap:.5rem;margin:1rem 0 2rem}   /* clear breathing room before the next section (was cramped against the dark band) */
  .mdots button{width:7px;height:7px;border-radius:50%;border:0;background:var(--line-d);opacity:.4;padding:0;cursor:pointer;transition:opacity .2s,background .2s,width .2s}
  .mdots button.on{opacity:1;background:var(--brand);width:18px;border-radius:100px}
}
@media(min-width:761px){.mdots{display:none}}   /* dots never render on desktop */
/* (removed 2026-07-02) legacy .mcta-bar — superseded by .stickycta (see end of file). */



/* ============================================================
   v29 (2026-06-21) — MOBILE production redesign. Mobile-only:
   every rule is max-width-scoped or targets .mobile (the drawer,
   which only renders below 940px via the burger). Desktop frozen.
   ============================================================ */

/* --- 1 · Mobile menu: a real full-height drawer, thumb-sized --- */
body:has(.mobile.open){overflow:hidden}                 /* lock page scroll behind the drawer */
body:has(.mobile.open) .mcta-bar{display:none}          /* hide sticky CTA while menu is open */
body:has(.mobile.open) .m-login{display:none}           /* hide the top-bar Log in when the menu is open */
body:has(.mobile.open) .burger{display:none}   /* the in-drawer "MENU ✕" header is the close; no duplicate burger-X */
.m-login{display:none}                                  /* desktop uses nav-cta Log in; this is the mobile-bar one */
@media(max-width:939px){
  .mobile.open{position:fixed;left:0;right:0;top:var(--drawer-top,0px);bottom:0;z-index:200;overflow-y:auto;-webkit-overflow-scrolling:touch;   /* [v67] opens beneath the promo bar; dvh height keeps the CTA footer on-screen */   /* [v62] full-screen overlay (was top:var(--nav-h)/z90) so it never collides with the navbar+ribbon; its own .m-head is the header */
    background:var(--bg);border-top:1px solid var(--line);padding:1rem clamp(1.2rem,5vw,2rem) 2.4rem}
  .burger{position:relative;z-index:95;margin-left:.7rem;transition:background .18s var(--ease),color .18s var(--ease)}   /* above the drawer; sits right after Log in */
  .m-login{display:inline-flex;align-items:center;margin-left:auto;font-size:var(--s--1);font-weight:600;color:var(--soft);text-decoration:none;white-space:nowrap}
  .mobile > a{padding:1rem 0;font-size:1.12rem;font-weight:600}
  .mobile .m-grp summary{padding:1.05rem 0;font-size:1.12rem}
  .mobile .m-grp a{padding:.82rem 0 .82rem 1rem;font-size:1.02rem;color:var(--soft)}
  .mobile .m-grp .m-sub{font-size:.62rem;margin:.95rem 0 .3rem;padding-left:1rem}
  .mobile .m-cta{margin-top:1.7rem;gap:.7rem}
  .mobile .m-cta .btn{padding:.98rem 1.4rem;font-size:1.02rem}
  .mobile .m-cta .txt{padding:.7rem 0;font-size:.95rem}
}

/* --- 2 · Built for: KEEP the marquee moving on mobile (smaller pills, a touch faster) --- */
@media(max-width:760px){
  .rolecarousel{overflow:hidden;padding-block:.35rem;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 90%,transparent)}
  .roletrack{animation:rolescroll 34s linear infinite;flex-wrap:nowrap;width:max-content;justify-content:flex-start;gap:.55rem}
  .role{font-size:var(--s-0);padding:.55rem 1.05rem}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .roletrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .rolecarousel{-webkit-mask-image:none;mask-image:none}
}

/* --- 2b · Hero: drop the account-card visual on mobile (lean, conversion-first) --- */
@media(max-width:939px){ .hero-grid > div:last-child{display:none} }

/* --- 2c · MOBILE-ONLY self-serve flow: "open an account from your phone" --- */
.m-flow{display:none}
@media(max-width:760px){
  .m-flow{display:block;padding:2.2rem 0 2.8rem}   /* [v64] more bottom room so the next section's rounded overlap never clips "Open my account" */
  .m-flow h2{font-size:var(--s-2);font-weight:600;margin:.35rem 0 .55rem;line-height:1.14}
  .m-flow .muted{font-size:var(--s-0)}
  /* v34 · self-explanatory connected stepper (orange spine fills grey -> live) */
  .mf-steps{list-style:none;margin:1.7rem 0 0;padding:0;position:relative}
  .mf-steps::before{content:"";position:absolute;left:15px;top:14px;bottom:62px;width:2px;background:var(--line)}
  .mf-steps::after{content:"";position:absolute;left:15px;top:14px;width:2px;height:0;background:linear-gradient(var(--brand-soft),var(--brand-btn))}
  .mf-step{position:relative;display:grid;grid-template-columns:32px 1fr;gap:.95rem;padding-bottom:1.6rem}
  .mf-step:last-child{padding-bottom:0}
  .mf-node{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;background:var(--bg);border:2px solid var(--line);display:grid;place-items:center;transition:border-color .4s var(--ease),background .4s var(--ease)}
  .mf-tick{width:9px;height:9px;border-radius:50%;background:var(--line);transition:background .4s var(--ease),transform .4s var(--ease)}
  .mf-when{display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:.18rem}
  .mf-when-live{color:var(--brand-ink)}
  .mf-body b{display:block;font-weight:600;font-size:1.06rem}
  .mf-desc{display:block;color:var(--soft);font-size:.92rem;margin-top:.15rem}
  .mf-step.is-live .mf-node{border-color:var(--brand);background:var(--brand-btn)}
  .mf-step.is-live .mf-tick{background:#fff}
  .m-flow .btn{margin-top:1.5rem;width:100%;justify-content:center}
}

/* --- 3 · The 3 solutions: compact cards in the proper carousel --- */
@media(max-width:760px){
  .scenes.mcarousel{align-items:stretch}
  .scenes.mcarousel > .scene{border-top:0;padding:0;align-items:stretch;display:block}
  .scenes.mcarousel .scene > .wrap{max-width:none;width:100%;padding:0;margin:0}
  .scenes.mcarousel .pgrid{gap:1.1rem;grid-template-columns:1fr}
  .scenes.mcarousel .scene h3{font-size:var(--s-1);margin-bottom:.5rem}
  .scenes.mcarousel .scene .muted{font-size:var(--s-0)}
  .scenes.mcarousel .scenestats{gap:.7rem 1.4rem;margin-top:1rem;padding-top:.9rem}
  .scenes.mcarousel .scene .ppanel,.scenes.mcarousel .scene .accountobj{margin-top:.2rem}
  .switchhead{text-align:left}
}

/* --- 4 · Trust quote: a designed statement card for mobile --- */
@media(max-width:760px){
  .quote-wrap{padding:2.8rem 0}
  .quote-grid{gap:1.1rem;text-align:left;max-width:none}
  .quote-grid .who{order:0;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
  .quote-grid .who b{font-size:.98rem;margin-bottom:.1rem}
  .bigq{font-size:1.4rem !important;line-height:1.36 !important;font-weight:400;position:relative;padding-top:2.6rem}
  .bigq::before{content:"\201C";position:absolute;top:-.4rem;left:-.1rem;font-family:Georgia,"Times New Roman",serif;font-size:4.2rem;line-height:1;color:var(--brand-bright);opacity:.9}
}

/* --- 5 · Final dark CTA: centered on mobile --- */
@media(max-width:760px){
  .finalcta{text-align:center}
  .finalcta h2{margin-left:auto;margin-right:auto}
  .finalcta .cta-row{justify-content:center}
}



/* --- 2d · mobile copy swaps + hero gap (desktop keeps full copy verbatim, pixel-identical) --- */
.m-only{display:none}
@media(max-width:760px){ .m-only{display:inline} .d-only{display:none} .hero .cta-row{margin-top:1.35rem} }

/* --- 3 · research-backed mobile hero: stacked full-width CTAs + one trust line (PLG) --- */
.m-trust{display:none}
@media(max-width:760px){
  .hero .cta-row{flex-direction:column;align-items:stretch;gap:.6rem;flex-wrap:nowrap}
  .hero .cta-row .btn{width:100%;justify-content:center;padding:.7rem 1.25rem;font-size:var(--s--1)}
  .hero .hbadges{display:none}                 /* 5-pill badge wall → one trust line under the CTAs */
  .m-trust{display:block;margin-top:1.05rem;font-size:.78rem;line-height:1.45;color:var(--faint);font-weight:600}
  .m-trust b{color:var(--soft)}
}



/* --- v30 (2026-06-22) · Phase 2 mobile: subpage heroes stack CTAs (PLG pattern) --- */
@media(max-width:760px){
  .subhero .cta-row{flex-direction:column;align-items:stretch;gap:.6rem}
  .subhero .cta-row .btn{width:100%;justify-content:center;padding:.7rem 1.25rem;font-size:var(--s--1)}
}



/* --- v30b · About timeline becomes a "swipe our story" carousel on mobile --- */
@media(max-width:760px){
  .timeline.mcarousel{border-top:0;margin-top:1.6rem;align-items:flex-start}
  .timeline.mcarousel > .tl-row{border-bottom:0;display:block;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.3rem 1.5rem;box-shadow:0 18px 40px -34px rgba(26,22,18,.35)}
  .timeline.mcarousel .tl-when{margin-bottom:.8rem}
  .timeline.mcarousel .tl-year{font-size:var(--s-1)}
}



/* ============================================================
   v31 (2026-06-22) · Phase 3 mobile build (A+B). Mobile-only.
   ============================================================ */
@media(max-width:760px){
  /* A1 · "By the numbers" → compact 2x2 with the lead figure emphasised (kills the 4-slab stack) */
  .numgrid{grid-template-columns:1fr 1fr}
  .num{padding:1.3rem 1.1rem}
  .num b{font-size:var(--s-2)}
  .num:first-child b{font-size:var(--s-3)}

  /* A2 · pricing carousel: recommended tier (.feat) leads on mobile (2026-07-02, Yuval-approved conversion change; supersedes the earlier natural-ladder decision); headroom so the "Most popular" badge isn't clipped by the carousel overflow */
  .tiers.mcarousel{padding-top:18px}
  /* Mobile carousel leads with the recommended tier (Core .feat); Free Trial second. Visual order only — DOM/tab order unchanged. */
  .tiers.mcarousel .tier.feat{order:-1}

  /* A3 · orange section tick removed — superseded by v61 rounded section transitions (see end of file) */
  .band-dark{position:relative}

  /* A4 · slim the "Built for…" band so it doesn't dominate the pre-conversion scroll */
  .rolewrap{margin-block:.2rem}
  .rolerotate{font-size:var(--s-1);margin-top:1rem}
  .bfstat{font-size:.68rem;line-height:1.5}

  /* B7 · value-triad gets oversized ghost numerals (editorial, anti-card-grid) */
  .valuetriad{gap:2.2rem}
  .vt{position:relative;border-top-color:var(--brand-soft);padding-top:1.3rem}
  .vt .vt-n{position:absolute;top:.5rem;right:0;font-size:var(--s-3);color:var(--lav);font-weight:700;z-index:0;line-height:1}
  .vt h3,.vt p{position:relative;z-index:1}

  /* B8 · drop the redundant belief quote on mobile (the triad carries "clears, not freezes") */
  .quote-wrap{display:none}

  /* team · don't show "To be announced" seats to a mobile prospect */
  .facerow .person:has(.tbd){display:none}
}

/* B5 · hero phone-frame (mobile-only): the open-from-your-phone USP gets a product face */
.m-herophone{display:none}
@media(max-width:760px){
  .m-herophone{display:none}   /* removed: the literal mini-phone didn't communicate; a stronger hero visual is being designed */
  .m-herophone .mhp-screen{background:var(--surface);border-radius:19px;padding:.85rem .8rem;display:grid;gap:.5rem}
  .m-herophone .mhp-row{display:flex;justify-content:space-between;align-items:center;font-size:.8rem}
  .m-herophone .mhp-row span{color:var(--faint);font-weight:600}
  .m-herophone .mhp-row b{font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:600;color:var(--ink)}
  .m-herophone .mhp-chip{margin-top:.15rem;font-size:.62rem;font-weight:700;letter-spacing:.03em;color:var(--brand-ink);background:var(--lav);border:1px solid #efd3b6;border-radius:100px;padding:.32rem .6rem;text-align:center}
}



/* ============================================================
   v32 (2026-06-22) · Visualization system — EMIaaS white-label stack
   (replaces the weak orbit hero). Family rule: warm-neutral surface,
   ONE orange = the value (the API call + the licence foundation),
   product-fidelity, labeled. Inherently vertical → mobile-native.
   ============================================================ */
.wlstack{display:grid;gap:0;max-width:380px;margin:0 auto;width:100%;align-self:center}
.wl-base .wl-reg{color:var(--brand-ink);background:var(--bg);border-color:var(--brand-soft)}
/* claim-first on mobile: family visuals follow the headline (overrides the global subhero visual-first order) */
@media(max-width:899px){ .subhero .split > div.wlstack,.subhero .split > div.vault,.subhero .split > div.consol{order:1 !important;margin-bottom:0 !important;margin-top:1.6rem} }
.wl-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;box-shadow:0 18px 40px -34px rgba(26,22,18,.42)}
.wl-yours{position:relative;z-index:2}
.wl-head{display:flex;align-items:center;gap:.55rem;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:600;color:var(--ink)}
.wl-head .wl-dot{width:9px;height:9px;border-radius:50%;background:var(--ink);flex:0 0 auto}
.wl-head .mark{color:var(--brand-ink);flex:0 0 auto}
.wl-tag{margin-left:auto;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);background:var(--bg);border:1px solid var(--line);border-radius:100px;padding:.15rem .5rem}
.wl-rows{margin-top:.85rem;display:grid;gap:.5rem}
.wl-row{display:flex;justify-content:space-between;align-items:center;font-size:.86rem;color:var(--soft)}
.wl-row b{color:var(--ink);font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:600}
.wl-api{justify-self:center;margin:.55rem 0;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.72rem;color:var(--brand-ink);background:var(--lav);border:1px solid #efd3b6;border-radius:100px;padding:.32rem .85rem;display:inline-flex;align-items:center;gap:.5rem;position:relative;z-index:3;box-shadow:0 6px 16px -10px rgba(181,83,15,.5)}
.wl-api .wl-verb{font-weight:700}
.wl-api .wl-arrow{color:var(--brand);font-weight:700}
.wl-base{border-color:var(--brand-soft);background:linear-gradient(180deg,var(--surface),color-mix(in oklab,var(--lav) 30%,var(--surface)))}
.wl-base .wl-head .mark{color:var(--brand)}
.wl-chips{margin-top:.75rem;display:flex;flex-wrap:wrap;gap:.4rem}
.wl-chips span{font-size:.66rem;font-weight:600;color:var(--brand-ink);background:var(--bg);border:1px solid var(--brand-soft);border-radius:100px;padding:.25rem .6rem;white-space:nowrap}
@media(prefers-reduced-motion:no-preference){
  .wlstack.in .wl-api{animation:wlpulse 2.6s var(--ease) .4s 2}
}
@keyframes wlpulse{0%,100%{box-shadow:0 6px 16px -10px rgba(181,83,15,.5)}50%{box-shadow:0 6px 22px -6px rgba(181,83,15,.95)}}



/* ============================================================
   v33 (2026-06-22) · Visualization system batch 1 — compliance
   safeguarding VAULT + multi-currency CONSOLIDATION. Same family:
   warm-neutral, ONE orange = the value, product-fidelity, labeled.
   Both vertical → mobile-native.
   ============================================================ */
/* --- compliance: two separated vaults, client money ring-fenced (orange = the protected vault) --- */
.vault{max-width:380px;margin:0 auto;width:100%;align-self:center}
.vlt-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem 1.15rem;box-shadow:0 18px 40px -34px rgba(26,22,18,.42)}
.vlt-h{display:flex;align-items:center;gap:.5rem;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:600;color:var(--ink)}
.vlt-h .mark{color:var(--brand);flex:0 0 auto}
.vlt-tag{margin-left:auto;font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);background:var(--bg);border:1px solid var(--line);border-radius:100px;padding:.15rem .5rem;white-space:nowrap}
.vlt-tag.on{color:var(--brand-ink);border-color:var(--brand-soft)}
.vlt-op .vlt-row{margin-top:.5rem;font-size:.8rem;color:var(--faint)}
.vlt-client{border-color:var(--brand-soft);background:linear-gradient(180deg,var(--surface),color-mix(in oklab,var(--lav) 30%,var(--surface)))}
.vlt-rows{margin-top:.7rem;display:grid;gap:.45rem}
.vlt-r{display:flex;justify-content:space-between;font-size:.84rem;color:var(--soft)}
.vlt-r b{color:var(--ink);font-weight:600}
.vlt-wall{display:flex;align-items:center;gap:.6rem;margin:.55rem 0;color:var(--brand-ink)}
.vlt-wall .vlt-line{flex:1;height:0;border-top:2px dashed var(--brand-soft)}
.vlt-wall .vlt-label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.vlt-foot{margin-top:.7rem;font-size:.72rem;color:var(--faint);line-height:1.45}

/* --- multi-currency: many currencies collapse into one account (orange = the one account) --- */
.consol{max-width:360px;margin:0 auto;width:100%;align-self:center}
.cns-tokens{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.cns-tokens span{font-size:.74rem;font-weight:600;color:var(--soft);background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:.3rem .65rem}
.cns-tokens span:last-child{color:var(--faint)}
.cns-arrow{font-size:1.5rem;color:var(--brand);margin:.45rem 0;font-weight:700;text-align:center;line-height:1}
.cns-account{background:linear-gradient(180deg,var(--surface),color-mix(in oklab,var(--lav) 32%,var(--surface)));border:1px solid var(--brand-soft);border-radius:16px;padding:1.05rem 1.2rem;box-shadow:0 18px 40px -34px rgba(181,83,15,.5)}
.cns-h{display:flex;align-items:center;gap:.5rem;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:600;color:var(--ink)}
.cns-tag{margin-left:auto;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--brand-ink);background:var(--bg);border:1px solid var(--brand-soft);border-radius:100px;padding:.15rem .5rem;white-space:nowrap}
.cns-row{margin-top:.55rem;display:flex;justify-content:space-between;gap:1rem;font-size:.82rem;color:var(--soft)}
.cns-row b{color:var(--ink);font-weight:600;text-align:right}
.cns-foot{margin-top:.7rem;font-size:.72rem;color:var(--faint);text-align:center}



/* ============================================================
   v34 (2026-06-22) · craft pass — P2 hero treatment + P3 stepper motion.
   Mobile-only. Desktop frozen.
   ============================================================ */
/* P2 · hero: typographic hierarchy + one orange <em> + a living proof strip */
@media(max-width:760px){
  .hero{padding-block:2.4rem 1.6rem}
  .hero h1{font-size:clamp(2.1rem,7.5vw,3rem);line-height:1.05;font-weight:500;letter-spacing:-.02em}
  .hero h1 em{font-style:normal;color:var(--brand-ink)}        /* the ONE orange element of the hero */
  .hero .lead{font-size:1.06rem;color:var(--soft);max-width:36ch}
  .hero .cta-row{display:grid;gap:.7rem;margin-top:1.4rem}
  .hero .cta-row .btn{width:100%;justify-content:center;padding:1rem 1.4rem;font-size:1.05rem}
}
.m-hero-proof{display:none}
@media(max-width:760px){
  .m-hero-proof{display:flex;align-items:center;gap:.6rem;margin-top:1.3rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.8rem .9rem;box-shadow:0 18px 40px -34px rgba(26,22,18,.35);font-size:.9rem}
  .m-hero-proof .mhp-dot{width:9px;height:9px;border-radius:50%;background:var(--brand);flex:0 0 auto}
  .m-hero-proof .mhp-txt b{font-weight:700;color:var(--ink)}
  .m-hero-proof .mhp-chip{margin-left:auto;font-size:.66rem;font-weight:700;letter-spacing:.03em;color:var(--brand-ink);background:var(--lav);border-radius:100px;padding:.32rem .6rem;white-space:nowrap}
}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .m-hero-proof .mhp-dot{animation:mhpPulse 2.4s var(--ease) infinite}
  @keyframes mhpPulse{0%{box-shadow:0 0 0 0 rgba(232,117,42,.45)}70%,100%{box-shadow:0 0 0 8px rgba(232,117,42,0)}}
}
/* P3 · stepper motion — spine fills + nodes light sequentially on scroll-in; completed steps STAY lit (both) */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .m-flow .mf-steps.in::after{animation:mfFill 1.6s var(--ease) .2s forwards}
  @keyframes mfFill{from{height:0}to{height:calc(100% - 76px)}}
  .mf-steps.in .mf-node{animation:mfNode .5s var(--ease) both}
  .mf-steps.in .mf-step:nth-child(1) .mf-node{animation-delay:.25s}
  .mf-steps.in .mf-step:nth-child(2) .mf-node{animation-delay:.75s}
  .mf-steps.in .mf-step:nth-child(3) .mf-node{animation-delay:1.25s}
  @keyframes mfNode{from{border-color:var(--line);background:var(--bg)}to{border-color:var(--brand);background:var(--lav)}}
  .mf-steps.in .mf-step.is-live .mf-node{animation:mfLive .5s var(--ease) 1.25s both}
  @keyframes mfLive{from{border-color:var(--line);background:var(--bg)}to{border-color:var(--brand);background:var(--brand-btn)}}
  .mf-steps.in .mf-tick{animation:mfTick .4s var(--ease) both}
  .mf-steps.in .mf-step:nth-child(1) .mf-tick{animation-delay:.35s}
  .mf-steps.in .mf-step:nth-child(2) .mf-tick{animation-delay:.85s}
  .mf-steps.in .mf-step:nth-child(3) .mf-tick{animation-delay:1.35s}
  @keyframes mfTick{from{transform:scale(.4);background:var(--line)}to{transform:scale(1);background:var(--brand)}}
  .mf-steps.in .mf-step.is-live .mf-tick{animation:none;background:#fff}   /* live tick is white on the orange node */
}
/* reduced-motion / no-JS: render the finished, fully-orange state statically */
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .mf-steps::after{height:calc(100% - 76px)}
  .mf-node{border-color:var(--brand);background:var(--lav)} .mf-tick{background:var(--brand);transform:scale(1)}
  .mf-step.is-live .mf-node{background:var(--brand-btn)} .mf-step.is-live .mf-tick{background:#fff}
}



/* ============================================================
   v35 (2026-06-22) · P1 premium menu drawer + P4 mobile switcher
   + hero refinements. Mobile-only. Desktop frozen.
   ============================================================ */
/* --- P1 · menu drawer: header + grouped nav + pinned CTA footer --- */
@media(max-width:939px){
  .mobile.open{padding:0 0 env(safe-area-inset-bottom,0px)}
  .m-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:1rem clamp(1.2rem,5vw,2rem);background:var(--bg);border-bottom:1px solid var(--line)}
  .m-head-lab{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);font-weight:700}
  .m-close{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--ink);cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}
  .m-close:active{background:var(--ink);color:#fff}
  .mobile.open > :not(.m-head){margin-inline:clamp(1.2rem,5vw,2rem)}
  .mobile .m-grp,.mobile > a{border-bottom:0}
  .mobile .m-grp summary,.mobile > a{font-size:1.16rem;font-weight:600;padding:1.05rem .1rem;border-bottom:1px solid var(--line);color:var(--ink)}
  .mobile .m-grp[open] summary{color:var(--brand-ink)}
  .mobile .m-grp a{padding:.8rem 0 .8rem 1rem;font-size:1rem;color:var(--soft);border-bottom:0}
  .mobile .m-grp .m-sub{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:1rem 0 .3rem;padding-left:1rem}
  .mobile .m-cta{position:sticky;bottom:0;margin:.8rem 0 0;padding:.8rem clamp(1.2rem,5vw,2rem) calc(.9rem + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--bg) 78%,transparent);display:grid;gap:.5rem}
  .mobile .m-pp{display:flex;align-items:center;gap:.5rem}
  .mobile .m-new{font-size:.56rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--brand-btn);border-radius:100px;padding:.08rem .4rem}
  .mobile .m-cta .btn{width:100%;justify-content:center;padding:.72rem 1.3rem;font-size:.95rem}
}
@media(max-width:939px) and (prefers-reduced-motion:no-preference){
  .mobile.open > *{animation:mItem .4s var(--ease) backwards}
  .mobile.open > :nth-child(2){animation-delay:.04s}.mobile.open > :nth-child(3){animation-delay:.08s}
  .mobile.open > :nth-child(4){animation-delay:.12s}.mobile.open > :nth-child(5){animation-delay:.16s}.mobile.open > :nth-child(6){animation-delay:.2s}
  @keyframes mItem{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
/* --- P4 · solutions switcher → sticky chip row + clean scene cards (one nav model, not two) --- */
@media(max-width:760px){
  .tabbar{display:block;position:sticky;top:var(--nav-h);z-index:50;padding:.6rem 0;background:color-mix(in oklab,var(--bg) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .tabbar .tabinner{display:flex;gap:.5rem;grid-template-columns:none;overflow-x:auto;padding:0 clamp(1.2rem,5vw,2rem);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabbar .tabinner::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto;display:inline-flex;align-items:center;padding:.6rem 1rem;border-radius:100px;border:1px solid var(--line);background:var(--surface);color:var(--soft);font-size:.92rem;font-weight:600;white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);box-shadow:none}
  .tab::after{display:none}
  .tab small{display:none}
  .tab.active{background:var(--lav);border-color:var(--brand-soft);color:var(--brand-ink);box-shadow:none}
  .scenes.mcarousel > .scene{flex:0 0 100% !important;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 44px -34px rgba(26,22,18,.35);padding:1.3rem !important;display:block}   /* one full-width scene per chip (no peeking second panel) */
  .scenes.mcarousel .scene h3{font-size:var(--s-1);margin-bottom:.5rem}
  .scenes.mcarousel .scene .ppanel,.scenes.mcarousel .scene .accountobj{box-shadow:none}
  .scenes.mcarousel + .mdots{display:none}
}
/* --- hero refinements: smaller headline (one line shorter) + quieter secondary CTA --- */
@media(max-width:760px){
  .hero h1{font-size:clamp(1.9rem,6.6vw,2.6rem)}
  .hero .cta-row .btn-ghost{border-color:var(--line);color:var(--ink)}
}



/* ============================================================
   v36 (2026-06-22) · mobile AHA — fast regulated onboarding +
   mobile management, made visceral via a time contrast.
   The wow: weeks (the regulatory norm) vs hours, from your phone.
   Mobile-only. The ONE orange element = the "hours · from your phone" win.
   ============================================================ */
.m-aha{display:none}
@media(max-width:760px){
  .m-aha{display:block;margin-top:1.4rem;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1rem 1.1rem;box-shadow:0 20px 44px -34px rgba(26,22,18,.42)}
  .aha-head{display:flex;align-items:center;gap:.5rem;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:600;font-size:.95rem;color:var(--ink);padding-bottom:.75rem;border-bottom:1px solid var(--line)}
  .aha-dot{width:9px;height:9px;border-radius:50%;background:var(--brand);flex:0 0 auto}
  .aha-time{margin-left:auto;font-weight:700;color:var(--brand-ink);font-variant-numeric:tabular-nums}
  .aha-rows{margin-top:.75rem;display:grid;gap:.5rem}
  .aha-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:.88rem}
  .aha-old .aha-lab{color:var(--faint)}
  .aha-old .aha-val{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--line-d)}
  .aha-new .aha-lab{color:var(--soft);font-weight:600}
  .aha-new .aha-val{color:var(--brand-ink);font-weight:700;text-align:right}
}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .m-aha .aha-dot{animation:mhpPulse 2.4s var(--ease) infinite}
}


/* === dd-viz: nav-dropdown (Lusha-lean) ============================================
   Owner /dd-viz. Steal-and-adapt of Lusha's mega-menu (brand-os/inspiration/nav-dropdown-*.png).
   Goal: kill the "too-packed" feel. Three moves, all CSS, all here in the seam.
   NOTE: the un-spread allocation below touches .nav/.menu (the main agent's structural surface);
   logged as an intentional seam crossing in agent_context/viz-ledger.md + web state. ================= */

/* MOVE 1 - lean allocation: nav items hug left next to the logo, CTAs pushed right, air between.
   Was: .menu{flex:1} spread the items across the whole bar so they floated. */
.nav .menu{flex:initial}
.nav .nav-cta{margin-left:auto}

/* MOVE 1b - use the full screen like Lusha: the nav bar + dropdown content span far wider than the
   1180 body container, so the logo hugs the left edge, CTAs the right, and the dropdown fills the width.
   Page body content stays at --maxw (1180) for readability; only the header chrome goes wide. */
.wrap.nav{max-width:1600px}
.mega>.wrap{max-width:1600px}

/* MOVE 3a - asymmetric panel: two wide content columns + a quiet narrow right rail (was 3 equal cols).
   align-items:stretch so the rail's hairline seam runs the full panel height (was orphaned/short). */
.mega-grid{grid-template-columns:1fr 1.1fr .72fr;gap:2.4rem;align-items:stretch;padding:2.1rem 0 2.7rem}

/* MOVE 3b - seal the panel as a clean floating object. Soft downward shadow PLUS a full-viewport dim
   scrim. The scrim lives at BODY level (position:fixed inset:0) so it cannot be clipped by the panel's
   stacking/overflow context (a child ::after only reached ~1/3 down). z-index:99 dims the whole page;
   header.site is z:100 and the panel is inside it, so the bar + panel float above the dim. :has() opens
   the scrim whenever any mega is hovered/focused/open. pointer-events:none so it never blocks input. */
.mega{box-shadow:0 24px 42px -22px rgba(26,22,18,.22)}
body::after{content:"";position:fixed;inset:0;background:rgba(18,18,22,.34);opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility .2s;z-index:99;pointer-events:none}
body:has(.has-mega:hover)::after,body:has(.has-mega:focus-within)::after,body:has(.has-mega.open)::after{opacity:1;visibility:visible}

/* MOVE 3c - de-card the featured tile: no fill, no border-box, no radius, no icon. A borderless text
   rail; the full-height faint hairline seam anchors it; content top-aligned (Lusha's rail is top-set). */
.mega-feat{background:none;border:0;border-left:1px solid var(--line);border-radius:0;padding:.2rem 0 .2rem 1.9rem}
.mega-feat .mark{display:none}
.mega-feat p{color:var(--soft);font-size:var(--s--1);line-height:1.5;margin-bottom:.9rem}
.mega-feat p strong{color:var(--ink);font-weight:600}
/* === /dd-viz ===================================================================== */



/* ============================================================
   v37 (2026-06-22) · Mobile UX pass: drawer CTAs, proof beat,
   section restructure, switcher heading, stepper polish,
   valuetriad carousel, finalcta 3-line heading, text-wrap balance.
   Mobile-only unless noted. Desktop frozen for items 1,2,4,5.
   Items 3 + 6 apply to both viewports intentionally.
   ============================================================ */

/* === Item 3 + extras: text-wrap balance (both viewports) === */
h1,h2,h3{text-wrap:balance}

/* === Item 6: final CTA heading, 3 balanced lines (both viewports) === */
.finalcta h2{text-wrap:balance;max-width:18ch}
/* Mobile thumb zone: final-fold CTAs stack full-width (PLG; demo-verified pattern) */
@media(max-width:480px){
  .finalcta .cta-row{flex-direction:column;align-items:stretch;gap:.6rem}
  .finalcta .cta-row .btn{width:100%;justify-content:center}
}

/* --- Mobile sticky conversion bar (2026-07-02 · Airwallex-teardown P0 steal; injected by dd-shell.js, mobile only) --- */
.stickycta{display:none}
@media(max-width:760px){
  .stickycta{position:fixed;left:0;right:0;bottom:0;z-index:2147482500;display:flex;align-items:center;gap:.8rem;justify-content:space-between;background:var(--dark);color:#fff;padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom));box-shadow:0 -12px 30px -18px rgba(10,10,12,.55);transform:translateY(110%);transition:transform .32s var(--ease)}
  .stickycta.on{transform:translateY(0)}
  .stickycta .sc-tx{min-width:0}
  .stickycta .sc-tx b{display:block;font-size:.86rem;font-weight:600;line-height:1.25;color:#fff}
  .stickycta .sc-tx span{display:block;font-size:.68rem;color:var(--dark-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stickycta .btn{flex:none;padding:.6rem 1.05rem;font-size:.9rem}
  /* chatbot FAB + panel + cookiebar ride above the bar while it's shown */
  body.dd-stickycta-on .ddbot .ddbot-fab{bottom:calc(clamp(14px,4vw,26px) + 64px + env(safe-area-inset-bottom))}
  body.dd-stickycta-on .ddbot .ddbot-panel{bottom:calc(clamp(14px,4vw,26px) + 138px + env(safe-area-inset-bottom))}
  body.dd-stickycta-on .cookiebar{bottom:calc(clamp(.7rem,3vw,1.4rem) + 140px)}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.stickycta{transition:none}}

/* --- v65 (2026-07-02) · .m-flow restored to the dark premium treatment (Yuval: "used to be black and premium").
   Overrides both the static and .scrollic node states so nothing renders cream-on-dark. --- */
@media(max-width:760px){
  .m-flow{background:var(--dark)}
  .m-flow .eyebrow{color:var(--brand)}
  .m-flow h2{color:#fff}
  .m-flow .mf-body b{color:#fff}
  .m-flow .mf-desc{color:var(--dark-soft)}
  .m-flow .mf-when{color:var(--dark-soft)}
  .m-flow .mf-when-live{color:var(--brand)}
  .m-flow .mf-steps::before{background:rgba(255,255,255,.16)}
  .m-flow .mf-node,.m-flow .mf-steps.scrollic .mf-node{border-color:rgba(255,255,255,.28);background:color-mix(in oklab,#fff 6%,var(--dark))}
  .m-flow .mf-tick,.m-flow .mf-steps.scrollic .mf-tick{background:rgba(255,255,255,.35)}
  .m-flow .mf-steps.scrollic .mf-step.mf-on .mf-node{border-color:var(--brand);background:color-mix(in oklab,var(--brand) 22%,var(--dark));box-shadow:0 0 0 4px color-mix(in oklab,var(--brand) 18%,transparent)}
  .m-flow .mf-steps.scrollic .mf-step.mf-on .mf-tick{background:var(--brand)}
  .m-flow .mf-step.is-live .mf-node,.m-flow .mf-steps.scrollic .mf-step.is-live.mf-on .mf-node{background:var(--brand-btn);border-color:var(--brand)}
  .m-flow .mf-step.is-live .mf-tick,.m-flow .mf-steps.scrollic .mf-step.is-live.mf-on .mf-tick{background:#fff}
}

/* --- Mobile fold cuts (2026-07-03, Yuval-approved): "Built for…" band hidden ≤760 (ICP router carries it);
   testimonials ride the standard mcarousel (one quote per swipe) --- */
@media(max-width:760px){
  .builtfor-band{display:none}
}

/* --- Mobile de-texting (2026-07-02 · PLG density pass): progressive disclosure, copy stays in DOM --- */
.acct-more{display:none}
@media(max-width:760px){
  /* accounts: 3 bullets visible per card; the full compliant list opens on tap */
  .acctblock .acct-list li:nth-child(n+4){display:none}
  .acctblock.dd-open .acct-list li{display:list-item}
  .acct-more{display:inline-flex;align-items:center;gap:.35rem;margin-top:.7rem;border:0;background:none;padding:.4rem 0;font:inherit;font-size:.82rem;font-weight:700;color:var(--brand-ink);cursor:pointer}
  .acct-more svg{width:14px;height:14px;transition:transform .2s var(--ease)}
  .acctblock.dd-open .acct-more svg{transform:rotate(180deg)}
  /* FAQ: accordion — questions only until tapped */
  .faq h3{display:flex;justify-content:space-between;align-items:center;gap:.6rem;cursor:pointer;margin-bottom:0}
  .faq h3::after{content:"";width:9px;height:9px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);flex:none;margin-right:.15rem;transition:transform .2s var(--ease)}
  .faq p{display:none;margin-top:.55rem}
  .faq.dd-open p{display:block}
  .faq.dd-open h3::after{transform:rotate(225deg)}
}

/* === Item 3: rolerotate, lone rotating phrase is the focal statement (both viewports) === */
.rolerotate{text-align:center;display:block}
.rolerotate .rotw{font-style:italic;font-weight:500;display:block;margin:0 auto}

/* === Item 1: drawer CTAs always reachable, flex column + safe-area bottom (mobile only) === */
@media(max-width:939px){
  .mobile.open{
    display:flex;
    flex-direction:column;
    min-height:calc(100dvh - var(--nav-h));
  }
  .mobile.open > :not(.m-head):not(.m-cta){
    flex-shrink:0;
  }
  .mobile .m-cta{
    margin-top:auto;
    padding-bottom:calc(1.6rem + env(safe-area-inset-bottom,0px));
  }
}

/* === Item 2: proof beat, numbers + team read as one section on mobile === */
@media(max-width:760px){
  .band-dark.numbers{padding-bottom:0}
  .band-soft.facerow{
    background:var(--surface2);
    border-top:0;
    margin-top:-1px;
    padding-top:clamp(1.6rem,4vw,2.4rem);
  }
}

/* === Item 4a: stepper live-node glow (mobile only, motion-respecting) === */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .mf-step.is-live .mf-node{
    box-shadow:0 0 0 5px rgba(232,117,42,.16);
  }
}

/* === Item 4b: switcher compact, scene cards fit one viewport (mobile only) === */
@media(max-width:760px){
  #switcher{padding-bottom:0}
  .scenes.mcarousel > .scene{padding:1.15rem !important}
  .scenes.mcarousel .scene h3{margin-bottom:.6rem}
  .scenes.mcarousel .scene .muted{line-height:1.5}
  .scenes.mcarousel .scenestats{margin-top:.95rem;padding-top:.9rem;gap:.8rem 1.5rem}
  .scenes.mcarousel .scenestats .ss b{font-size:var(--s-0)}
  .scenes.mcarousel .scenestats .ss span{font-size:.72rem}
}

/* === Item 5: valuetriad horizontal snap carousel on mobile === */
@media(max-width:760px){
  .valuetriad{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:.9rem;
    padding:.3rem 0 1rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    align-items:flex-start;
  }
  .valuetriad::-webkit-scrollbar{display:none}
  .valuetriad > .vt{
    flex:0 0 84% !important;
    scroll-snap-align:start;
    min-width:0;
    margin-top:0 !important;
    background:var(--surface);
    border:1px solid var(--line);
    border-top:2px solid var(--brand);
    border-radius:14px;
    padding:1.2rem 1.2rem 1.4rem;
    box-shadow:0 18px 40px -34px rgba(26,22,18,.35);
  }
   .valuetriad > .vt .vt-n{
     position:static !important;
     font-size:var(--s-1);
     color:var(--faint);
     font-weight:600;
     margin-bottom:.3rem;
   }
  .valuetriad > .vt h3,.valuetriad > .vt p{position:static;z-index:auto}
}


/* ============================================================
   v54 (2026-06-22) — round-2 refinements:
   · desktop hero: more air + push "Built for…" below the fold
   · desktop switcher: alternating bento rows, tighter header,
     visuals fill their column (no floating in whitespace)
   · mobile switcher: all 3 scenes are contained cards of parity
     height (condensed inner panels) so none overflows
   · on-brand scroll affordances: carousel arrows + a scroll cue
   ============================================================ */

/* ---- DESKTOP HERO: spaciousness; "Built for…" only on scroll ---- */
@media(min-width:940px){
  .hero{position:relative;min-height:calc(80svh - var(--nav-h));display:flex;align-items:center;padding-block:clamp(2rem,4vw,3.6rem)}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(400px,.92fr);gap:clamp(2.8rem,5vw,5rem)}
  .hero-grid .accountobj{margin-left:auto}   /* hold the card to the far right so the gap reads as deliberate space */
}
.hero{position:relative}

/* ---- DESKTOP SWITCHER: alternating bento + tighter header ---- */
@media(min-width:900px){
  #switcher{padding-top:clamp(2rem,3.5vw,3rem)}
  #switcher .sechead{margin-bottom:.3rem}
  .scene{padding:clamp(2rem,4.6vh,3.4rem) 0}
  .pgrid{align-items:center;gap:clamp(2.6rem,5vw,5.2rem)}
  .scene .ppanel{max-width:560px;width:100%}
  /* scene 2 reversed: visual-left, text-right (alternation) */
  #sc-pay .pgrid{grid-template-columns:1.15fr .85fr}
  #sc-pay .pgrid > div:not(.reveal){order:2}
  #sc-pay .pgrid > .reveal{order:1}
  #sc-pay .ppanel{margin-left:0;margin-right:auto}
}
@media(min-width:760px){
  .tabbar .tabinner{gap:.6rem}
  .tab{padding:.95rem 1.15rem;border-radius:14px}
}

/* ---- MOBILE SWITCHER: scene parity, contained, condensed visuals ---- */
@media(max-width:760px){
  .scenes.mcarousel > .scene{padding:1.15rem !important;display:flex !important;flex-direction:column}
  .scenes.mcarousel .pgrid{gap:.9rem}
  .scenes.mcarousel .scene .link{margin-top:.55rem}
  .scenes.mcarousel .ppanel{padding:1rem 1.05rem;max-width:none}
  .scenes.mcarousel .ppanel .pp-title{font-size:1.06rem}
  .scenes.mcarousel .ppanel .pp-row{padding:.5rem 0}
  #sc-pay .railchips{gap:.35rem;margin:.5rem 0 .1rem}
  #sc-pay .railchips span{font-size:.66rem;padding:.3rem .6rem}
  #sc-pay .ppanel .pp-row:nth-of-type(n+4){display:none}   /* trim feed to 3 rows so the card fits */
  #sc-api .pp-layer{padding:.7rem .9rem}
  #sc-api .pp-caps{gap:.35rem;margin-top:.5rem}
  #sc-api .pp-cap{font-size:.64rem;padding:.26rem .55rem}
}

/* ---- ON-BRAND scroll affordances ---- */
/* horizontal carousel arrows (mobile only; sit in a row with the dots) */
.mcar-arrow{display:none}
@media(max-width:760px){
  .mcar-stage{position:relative}
  .mcar-arrow{display:grid;place-items:center;position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:1.5px solid var(--brand);background:var(--surface);color:var(--brand-ink);cursor:pointer;z-index:4;-webkit-tap-highlight-color:transparent;box-shadow:0 8px 20px -10px rgba(232,117,42,.5),0 2px 6px -2px rgba(26,22,18,.18);transition:opacity .25s var(--ease),transform .15s var(--ease)}
  .mcar-arrow svg{width:15px;height:15px}
  .mcar-prev{left:4px}
  .mcar-next{right:4px}
  .mcar-arrow:active{transform:translateY(-50%) scale(.9)}
  .mcar-arrow[disabled]{opacity:0;pointer-events:none}   /* fade out the unavailable direction at the ends */
  #switcher .mdots{display:none}   /* scenes use the tab strip for position; arrows only */
}
/* scroll-down cue anchored to the hero */
.scrollcue{position:absolute;left:50%;transform:translateX(-50%);bottom:1.15rem;width:40px;height:40px;border-radius:50%;border:1px solid var(--brand-soft);background:color-mix(in oklab,var(--surface) 82%,transparent);color:var(--brand-ink);display:grid;place-items:center;opacity:.92;z-index:6;backdrop-filter:blur(5px);box-shadow:0 8px 22px -14px rgba(232,117,42,.5);transition:opacity .35s var(--ease)}
.scrollcue svg{width:18px;height:18px}
.scrollcue.hide{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:no-preference){.scrollcue svg{animation:cueBob 1.9s var(--ease) infinite}@keyframes cueBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}}


/* ============================================================
   v55 (2026-06-22) — round-3 surgical fixes:
   New chip in dropdown · ribbon prominence · premium scroll cue
   · remove orphan eyebrow dash on the dark Numbers band
   · mobile hero: smaller CTAs + drop the comparison card
   ============================================================ */

/* "New" chip now renders inside the Platform dropdown feature box (was unstyled text) */
.mega-feat .new,.mega-feat .m-new{display:inline-block;background:var(--brand-btn);color:#fff;font-size:.56rem;font-weight:700;padding:.08rem .42rem;border-radius:100px;text-transform:uppercase;letter-spacing:.05em;margin-left:.1rem;vertical-align:middle;transform:translateY(-1px)}

/* Ribbon: more present (the new-feature promo read too small) */
.ribbon{font-size:var(--s-0);padding:.62rem 1rem;font-weight:500}
.ribbon strong{color:#fff;font-weight:700}
.ribbon .pill{font-size:.72rem;padding:.16rem .66rem}
@media(max-width:760px){.ribbon{font-size:.88rem;padding:.6rem 2.4rem .6rem .95rem;line-height:1.4}}

/* Premium, restrained scroll cue: drop the heavy circle for a quiet hairline chevron */
.scrollcue{width:30px;height:30px;border:0;background:none;box-shadow:none;backdrop-filter:none;opacity:.45;color:var(--faint)}
.scrollcue svg{width:22px;height:22px}
.scrollcue svg path{stroke-width:1.4}
.scrollcue:hover{opacity:.9;color:var(--brand-ink)}
@media(prefers-reduced-motion:no-preference){.scrollcue svg{animation:cueBob 2.6s var(--ease) infinite}@keyframes cueBob{0%,100%{transform:translateY(-1px)}50%{transform:translateY(4px)}}}
@media(max-width:760px){.scrollcue{display:none !important}}  /* no scroll-down cue on mobile */

/* Remove the orphan orange eyebrow dash on the dark Numbers band */
.numbers .sechead .eyebrow::before{display:none}

/* Mobile hero: drop the comparison card (the "Live in hours" stepper below carries the speed story) + right-size CTAs */
@media(max-width:760px){
  .m-aha{display:none !important}
  .hero .cta-row{display:flex;flex-direction:column;gap:.55rem;margin-top:1.25rem}
  .hero .cta-row .btn{width:100%;justify-content:center;padding:.78rem 1.3rem;font-size:.96rem}
  .hero .lead.sub{font-size:var(--s-0)}
}


/* Mobile "Live in hours" stepper: scroll-linked spine fill + progressive node focus (premium) */
@media(max-width:760px){
  .mf-steps.scrollic::after{animation:none !important;height:calc(var(--mfp,0) * (100% - 62px)) !important;transition:height .12s linear}
  .mf-steps.scrollic .mf-node{animation:none !important;border-color:var(--line);background:var(--bg);transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .4s var(--ease)}
  .mf-steps.scrollic .mf-tick{animation:none !important;background:var(--line);transition:background .35s var(--ease),transform .35s var(--ease)}
  .mf-steps.scrollic .mf-step.mf-on .mf-node{border-color:var(--brand);background:var(--lav);box-shadow:0 0 0 4px color-mix(in oklab,var(--brand) 13%,transparent)}
  .mf-steps.scrollic .mf-step.mf-on .mf-tick{background:var(--brand);transform:scale(1)}
  .mf-steps.scrollic .mf-step.is-live.mf-on .mf-node{background:var(--brand-btn)}
  .mf-steps.scrollic .mf-step.is-live.mf-on .mf-tick{background:#fff}
}


/* ============================================================
   v56 (2026-06-22) — PLAYABLE switcher widgets
   sc-acc = live currency converter · sc-pay = payments-at-volume
   stepper · sc-api = toggleable licence stack. All ILLUSTRATIVE,
   labelled "not a quote". Tap/stepper controls only (no drag
   slider) so they never fight the mobile carousel swipe.
   ============================================================ */
.ddw{display:flex;flex-direction:column}
.ddw .pp-illus{margin-top:.9rem;margin-bottom:0}

/* converter */
.ddw-field{display:flex;flex-direction:column;gap:.4rem;margin-top:.85rem}
.ddw-field label{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.ddw-amtrow{display:flex;gap:.55rem;align-items:stretch}
.ddw-amt,.ddw-out{flex:1;min-width:0;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:1.45rem;font-weight:600;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:.62rem .85rem;line-height:1.1}
.ddw-out{display:flex;align-items:center;background:var(--lav);border-color:var(--brand-soft);color:var(--brand-ink);font-variant-numeric:tabular-nums}
.ddw-amt{font-variant-numeric:tabular-nums}
.ddw-amt:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 16%,transparent)}
.ddw-ccy{flex:0 0 auto;min-width:5rem;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:600;font-size:.92rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.5rem .95rem;cursor:pointer}
.ddw-ccy:focus{outline:none;border-color:var(--brand)}
.ddw-swap{align-self:flex-end;width:34px;height:34px;margin:1.25rem 23px -.15rem 0;border-radius:50%;border:1px solid var(--brand-soft);background:var(--surface);color:var(--brand-ink);cursor:pointer;display:grid;place-items:center;transition:transform .3s var(--ease),background .2s var(--ease)}
.ddw-swap:hover{background:var(--lav)}
.ddw-swap:active{transform:rotate(180deg)}
.ddw-swap svg{width:16px;height:16px}
.ddw-rate{margin-top:.8rem;font-size:.8rem;color:var(--soft);font-variant-numeric:tabular-nums}

/* payments stepper */
.ddw-pay{display:flex;flex-direction:column;gap:.7rem;margin-top:.5rem}
.ddw-step{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ddw-step-lab{font-size:.84rem;color:var(--soft);font-weight:600}
.ddw-stepper{display:flex;align-items:center;gap:.15rem;background:var(--bg);border:1px solid var(--line);border-radius:100px;padding:.2rem}
.ddw-stepper b{min-width:5rem;text-align:center;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:600;font-size:1rem;color:var(--ink);font-variant-numeric:tabular-nums}
.ddw-dec,.ddw-inc{width:30px;height:30px;flex:0 0 auto;border-radius:50%;border:0;background:var(--surface);color:var(--brand-ink);font-size:1.15rem;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 1px 4px -2px rgba(26,22,18,.3);transition:background .15s var(--ease)}
.ddw-dec:hover,.ddw-inc:hover{background:var(--lav)}
.ddw-dec:disabled,.ddw-inc:disabled{opacity:.32;cursor:default;box-shadow:none}
.ddw-payout{margin-top:.55rem;border-top:1px solid var(--line);padding-top:.8rem;display:flex;flex-direction:column;gap:.5rem}
.ddw-payout-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:.9rem;color:var(--soft)}
.ddw-payout-row b{font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ddw-payout-row.hl b{color:var(--brand-ink)}

/* toggleable licence stack */
.ddw-caps .ddw-cap{font:inherit;cursor:pointer;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:.5rem .7rem .5rem 1.75rem;color:var(--faint);transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);position:relative}
.ddw-caps .ddw-cap::before{content:"";position:absolute;left:.62rem;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;border:1.5px solid var(--line-d);transition:background .2s var(--ease),border-color .2s var(--ease)}
.ddw-caps .ddw-cap.on{color:var(--ink);border-color:var(--brand-soft);background:var(--lav)}
.ddw-caps .ddw-cap.on::before{background:var(--brand);border-color:var(--brand)}
.ddw-caps .ddw-cap:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media(min-width:560px){.ddw-caps{grid-template-columns:1fr 1fr}}


/* ============================================================
   v57 (2026-06-22) — round-3 follow-ups:
   stepper spine ends AT the 3rd circle (JS-pinned span);
   center the mobile "By the numbers" band
   ============================================================ */
@media(max-width:760px){
  /* spine spans first-node-center to last-node-center (vars set in dd-shell.js); no tail past the last circle */
  .mf-steps.scrollic::before{top:var(--mf-y0,14px) !important;bottom:auto !important;height:var(--mf-h,calc(100% - 62px)) !important}
  .mf-steps.scrollic::after{top:var(--mf-y0,14px) !important;bottom:auto !important;height:calc(var(--mfp,0) * var(--mf-h,0px)) !important}

  /* center the stats band on mobile */
  .numbers .sechead{text-align:center}
  .numbers .sechead .muted{margin-left:auto;margin-right:auto}
  .numbers .numgrid{justify-items:center;text-align:center}
  .numbers .num{align-items:center}
}


/* Platform dropdown: Privacy permissions now lives in the By-need list (with its New chip);
   the side box becomes a small brand visual (show the shield mark on desktop) */
@media(min-width:940px){
  .mega-feat .mark{display:block;width:40px;height:auto;color:var(--brand-ink);opacity:.92;margin-bottom:.7rem}
}


/* ============================================================
   v58 (2026-06-23) — Platform/Who-it's-for dropdown: contained
   card anchored UNDER its trigger (per Yuval's reference), not
   the full-bleed left-hugging bar. Overrides the /dd-viz Lusha-
   style MOVE 1b/3b. Desktop only (mobile drawer untouched).
   ============================================================ */
@media(min-width:940px){
  .menu>li.has-mega{position:relative}              /* anchor the panel to the trigger, not the header */
  .mega{left:0;right:auto;width:min(720px,90vw);max-width:calc(100vw - 2rem);
    border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:.4rem;
    box-shadow:0 30px 64px -28px rgba(26,22,18,.42),0 8px 20px -12px rgba(26,22,18,.18)}
  .mega>.wrap{max-width:none;width:auto;padding:0;margin:0}
  .mega-grid{grid-template-columns:1fr 1fr .7fr;gap:1.5rem;padding:1.5rem 1.6rem 1.7rem}
  /* drop the full-viewport dim scrim for the clean contained look */
  body:has(.has-mega:hover)::after,body:has(.has-mega:focus-within)::after,body:has(.has-mega.open)::after{opacity:0 !important;visibility:hidden !important}
}


/* ============================================================
   v59 (2026-06-23) — TRUST-LED dropdown (replaces the card-grid):
   left = solutions as icon+title+desc links + a "by need" row;
   right = a quiet TRUST panel (the visual). Regulated-EMI fit:
   clarity + credibility over product eye-candy. Desktop only.
   ============================================================ */
@media(min-width:940px){
  .mega{width:min(800px,92vw)}
  .mega .mega-inner.mega-trust{display:grid;grid-template-columns:1.6fr .85fr;padding:0;max-width:none;gap:0;align-items:stretch}
  .msol-tx small{white-space:nowrap}   /* descriptions stay single-line so all rows sit at a fixed even rhythm */
  .mega-trust .mega-main{padding:1.4rem 1.5rem 1.5rem;min-width:0}
  .mega-trust .mega-flabel{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:0 0 .55rem}
  .mega-trust .mega-flabel2{margin-top:1.1rem;padding-top:.95rem;border-top:1px solid var(--line)}
  .msol{display:flex;gap:.8rem;align-items:flex-start;padding:.55rem;border-radius:12px;transition:background .15s var(--ease)}
  .msol:hover{background:var(--surface2)}
  .msol-ic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--lav);color:var(--brand-ink)}
  .msol-ic svg{width:21px;height:21px}
  .msol-tx{display:flex;flex-direction:column;gap:.12rem;min-width:0}
  .msol-tx b{font-weight:600;color:var(--ink);font-size:var(--s-0);line-height:1.2}
  .msol-tx small{color:var(--faint);font-size:.82rem;line-height:1.4}
  .mega-needs{display:flex;flex-wrap:wrap;align-content:flex-start;gap:.4rem;min-height:8rem}   /* reserve the busier column's chip height so the grey divider aligns across both dropdowns */
  .mega-needs a{padding:.28rem .62rem}
  .mega-needs a{font-size:var(--s--1);color:var(--soft);font-weight:600;display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .7rem;border:1px solid var(--line);border-radius:100px;background:var(--surface);transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease)}
  .mega-needs a:hover{color:var(--brand-ink);border-color:var(--brand-soft);background:var(--lav)}
  .mega-needs .new{background:var(--brand-btn);color:#fff;font-size:.52rem;font-weight:700;padding:.06rem .34rem;border-radius:100px;text-transform:uppercase;letter-spacing:.05em}
  /* TRUST panel = the right-side visual */
  .mega-trustpanel{background:var(--surface2);border-left:1px solid var(--line);padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column}
  .mt-label{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:0 0 .85rem}
  .mt-list{list-style:none;margin:0;padding:0;display:grid;gap:.62rem}
  .mt-list li{font-size:var(--s--1);color:var(--soft);font-weight:600;display:flex;align-items:center;gap:.5rem;line-height:1.3}
  .mt-mark{width:17px;height:19px;color:var(--brand-ink);flex:0 0 auto}
  .mt-link{margin-top:auto;padding-top:1.1rem;color:var(--brand-ink);font-weight:700;font-size:var(--s--1)}
}


/* v60 (2026-06-23) — dropdown polish: crisp consistent check marks on trust lines, thicker solution icons */
@media(min-width:940px){
  .msol-ic svg{stroke-width:1.9}
  .mt-list li{padding-left:0}
  .mt-list li::before{content:"\2713";color:var(--brand-ink);font-weight:800;font-size:.95em;line-height:1;flex:0 0 auto}
}



/* ============================================================
   v61 (2026-06-23) — mobile-only polish
   1) ribbon: smaller + its own concise mobile copy (not desktop-length)
   2) hero eyebrow "For complex, cross-border businesses" hidden on mobile
   3) premium ROUNDED transitions between colour blocks (replaces the orange tick)
   ============================================================ */
@media(max-width:760px){
  /* 1 · announcement ribbon — smaller text/padding; .d-only long copy hidden, .m-only short copy shown */
  .ribbon{font-size:.74rem;padding:.45rem 2.05rem .45rem .85rem;line-height:1.32;gap:.45rem;font-weight:500}
  .ribbon .pill{font-size:.58rem;padding:.1rem .46rem}
  .ribbon .x{right:.6rem;font-size:1rem}

  /* 2 · remove the hero eyebrow on mobile only (kept on desktop) */
  .hero .eyebrow{display:none}

  /* 3 · rounded, premium section transitions: each colour block curves up over the one above it.
        opaque base so overlaps mask cleanly; .band-soft/.band-dark keep their colours (higher specificity). */
  main>section{background-color:var(--bg)}
  main>section:not(.hero){
    border-top-left-radius:22px;
    border-top-right-radius:22px;
    margin-top:-22px;
    position:relative;
    z-index:1;
  }
}


/* ============================================================
   v61 (2026-06-23) — interactive-widget affordance (switcher)
   + Platform/Who-it's-for dropdown height symmetry
   ============================================================ */

/* --- "this is interactive, use it" cue on the switcher widgets (desktop + mobile) --- */
.ddw{position:relative}
.ddw::before{content:"Try it";position:absolute;top:.7rem;right:.75rem;z-index:3;font-size:.56rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-ink);background:var(--lav);border:1px solid var(--brand-soft);border-radius:100px;padding:.22rem .58rem;pointer-events:none}
@media(prefers-reduced-motion:no-preference){.ddw::before{animation:ddwTry 2.6s var(--ease) infinite}@keyframes ddwTry{0%,100%{transform:scale(1);opacity:.82}50%{transform:scale(1.07);opacity:1}}}
.ddw.used::before{animation:none;opacity:.5}   /* quiet down after first interaction (JS adds .used) */
/* make controls visibly operable */
.ddw-stepper button,.ddw-swap,.ddw-cap{cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .1s var(--ease)}
.ddw-stepper button:hover,.ddw-swap:hover{background:var(--lav);border-color:var(--brand-soft);color:var(--brand-ink)}
.ddw-stepper button:active,.ddw-swap:active{transform:scale(.9)}
.ddw-cap:hover{border-color:var(--brand-soft);color:var(--brand-ink)}
.ddw-ccy{cursor:pointer}
.ddw-amt:focus,.ddw-ccy:focus,.ddw-cap:focus-visible{outline:2px solid var(--brand-soft);outline-offset:2px}
/* a soft attention ring on the widget until it is first used (draws the eye) */
@media(prefers-reduced-motion:no-preference){
  .ddw:not(.used){animation:ddwGlow 3s var(--ease) 1s 2}
  @keyframes ddwGlow{0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 42px 80px -44px rgba(26,22,18,.42)}50%{box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 16%,transparent),0 42px 80px -44px rgba(26,22,18,.42)}}
}

/* --- DESKTOP dropdown symmetry: equal height + vertically-centered trust panel --- */
@media(min-width:940px){
  .mega .mega-inner.mega-trust{min-height:420px}
  .mega-trustpanel{justify-content:flex-start}
  .mega-trust .mega-main{display:flex;flex-direction:column;justify-content:flex-start}   /* top-align both columns so the subheaders (Solutions / Who we serve) align at the same height across both dropdowns */
}



/* ============================================================
   v62 (2026-06-23) — mobile fixes
   · interactive widgets: louder, unmistakable "Tap to try" affordance
   · footer joins the rounded-section transition system
   ============================================================ */
@media(max-width:760px){
  /* clearer affordance: a solid brand pill instead of the tiny lavender "Try it" — touch users had no hover cue */
  .ddw::before{
    content:"Tap to try \203A";
    font-size:.66rem;letter-spacing:.04em;
    top:.6rem;right:.6rem;padding:.32rem .66rem;
    background:var(--brand-btn);color:#fff;border-color:var(--brand-btn);
    box-shadow:0 6px 16px -8px rgba(181,83,15,.7);
    opacity:1;
  }
  .ddw.used::before{
    content:"Interactive";
    background:var(--lav);color:var(--brand-ink);border-color:var(--brand-soft);
    box-shadow:none;opacity:.55;animation:none;
  }
  /* footer curves up over the last section — same rounded language as the body sections */
  footer.site{
    border-top-left-radius:22px;
    border-top-right-radius:22px;
    margin-top:-22px;
    position:relative;
    z-index:1;
  }
}



/* ============================================================
   v63 (2026-06-23) — mobile: pricing space + dark→team rounding
   ============================================================ */
@media(max-width:760px){
  /* #8 · kill the tiny DigiDoe shield mark in the "Patented technology" pill */
  .onboard-signal .ob-mark{display:none}
  .onboard-signal{margin:.3rem auto 1.1rem;padding:.45rem 1rem}

  /* #6b · trim the pricing header */
  .pricehead .muted{font-size:var(--s--1);line-height:1.5;margin-top:.5rem}
  .pricetoggle{margin-top:.85rem}

  /* #6b · tighten the tier carousel cards (less dead space) */
  .tier{padding:1.25rem 1.25rem}
  .tier .tierfit{margin:.1rem 0 .8rem}
  .tier .btn{margin:.9rem 0}
  .tier ul{gap:.42rem}
  .tier .price{min-height:0}

  /* #6a · round the dark "By the numbers" → team transition (was a flat fused seam) */
  .band-dark.numbers{padding-bottom:1.5rem}
  .band-soft.facerow{margin-top:-22px}
}



/* ============================================================
   v64 (2026-06-23) — mobile: marquee, premium CTAs, breathing room
   ============================================================ */
@media(max-width:760px){
  /* --- "Built for" → two opposite-scrolling rows of smaller chips --- */
  .rolecarousel,.rolepop{display:none !important}
  .m-rolemarquee{display:flex;flex-direction:column;gap:.5rem;margin-top:1.1rem;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .m-rolerow{display:flex;gap:.5rem;width:max-content;flex:0 0 auto;will-change:transform}
  .m-rolerow .role{font-size:.8rem;padding:.42rem .85rem;background:var(--surface);border:1px solid var(--line)}
  .m-rolerow .role::before{width:6px;height:6px}

  /* --- drop decorative section kickers that just add scroll on mobile --- */
  #switcher .eyebrow,#why .eyebrow{display:none}

  /* --- premium mobile CTAs: comfortable 48px touch target + lift + active feedback --- */
  .btn{min-height:48px;border-radius:100px}
  .btn-primary{box-shadow:0 10px 26px -12px rgba(181,83,15,.62)}
  .btn-primary:active,.btn-ghost:active,.btn-d:active{transform:translateY(1px)}
  .hero .cta-row .btn,.subhero .cta-row .btn{padding:.82rem 1.3rem;font-size:.96rem;font-weight:700}
  .mobile .m-cta .btn{padding:.82rem 1.3rem;font-size:.96rem;min-height:48px}

  /* --- internal widget controls: clearly tappable, never mistaken for swipe dots --- */
  .ddw-swap{width:42px;height:42px}
  .ddw-dec,.ddw-inc{width:38px;height:38px;font-size:1.3rem}
  .ddw-caps .ddw-cap{padding:.62rem .8rem .62rem 1.9rem;min-height:44px;display:flex;align-items:center}

  /* --- dark "By the numbers" band: more room to dissolve before the rounded scoop --- */
  .band-dark.numbers{padding-bottom:2.9rem}
  /* --- team band: more room to end before the next section curves up --- */
  .band-soft.facerow{padding-bottom:3rem}
}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .m-rolerow.l{animation:mRoleL 32s linear infinite}
  .m-rolerow.r{animation:mRoleR 36s linear infinite}
  @keyframes mRoleL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes mRoleR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .m-rolerow{flex-wrap:wrap;width:auto;justify-content:center;animation:none}
}



/* ============================================================
   v65 (2026-06-23) — mobile: differentiate the FX "Swap" control
   from the round carousel nav arrows (.mcar-arrow). It was reading
   as a swipe/nav affordance; now it's an explicitly-labelled action.
   ============================================================ */
@media(max-width:760px){
  .ddw-swap{
    width:auto;height:auto;align-self:flex-end;
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.44rem .85rem;border-radius:10px;            /* rectangular, not a circle */
    border:1px solid var(--line);background:var(--surface2);
    color:var(--soft);font:inherit;font-size:.72rem;font-weight:700;
    letter-spacing:.05em;text-transform:uppercase;
    margin:.5rem 0;
  }
  .ddw-swap::after{content:"Swap";line-height:1}
  .ddw-swap svg{width:14px;height:14px}
  .ddw-swap:hover,.ddw-swap:active{background:var(--lav);border-color:var(--brand-soft);color:var(--brand-ink);transform:none}
}


/* ============================================================
   v62 (2026-06-23) — richer interactive widgets: clear imperative
   prompt + animated tap cue (replaces the corner "Try it" badge),
   and the Include-FX-fee toggle for the converter.
   ============================================================ */
.ddw::before{content:none !important}   /* drop the corner badge; the prompt line is the clearer signifier */
.ddw-prompt{display:flex;align-items:center;gap:.5rem;margin:.55rem 0 .1rem;font-size:.78rem;font-weight:600;color:var(--brand-ink);line-height:1.3}
.ddw-prompt::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--brand-btn);flex:0 0 auto}
@media(prefers-reduced-motion:no-preference){.ddw-prompt::before{animation:ddwTap 1.8s var(--ease) infinite}@keyframes ddwTap{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--brand) 55%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}}
.ddw.used .ddw-prompt{opacity:.6}
.ddw.used .ddw-prompt::before{animation:none}

/* Include-FX-fee toggle (real switch) */
.ddw-fee{position:relative;display:flex;align-items:center;gap:.6rem;margin-top:.9rem;cursor:pointer;font-size:.82rem;font-weight:600;color:var(--soft);user-select:none}
.ddw-fee input{position:absolute;width:1px;height:1px;opacity:0}
.ddw-fee span{display:inline-flex;flex-direction:column;line-height:1.25}
.ddw-fee small{font-weight:500;color:var(--faint);font-size:.72rem}
.ddw-fee::before{content:"";flex:0 0 auto;width:34px;height:20px;border-radius:100px;background:var(--line-d);transition:background .2s var(--ease)}
.ddw-fee::after{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.ddw-fee:has(input:checked)::before{background:var(--brand-btn)}
.ddw-fee:has(input:checked)::after{transform:translate(14px,-50%)}
.ddw-fee:has(input:focus-visible)::before{outline:2px solid var(--brand-soft);outline-offset:2px}
.ddw-feeline{margin-top:.5rem;font-size:.8rem;color:var(--soft);display:flex;justify-content:space-between;gap:1rem}
.ddw-feeline b{color:var(--brand-ink);font-variant-numeric:tabular-nums}


/* ============================================================
   v63 (2026-06-23) — dropdown: align "By need"/"By industry" +
   divider to a shared bottom; fill the right panel with a globe
   viz + credentials (Platform = globe top/creds bottom; Who it's
   for = alternated). + lean the shared pricing checkmark.
   ============================================================ */
@media(min-width:940px){
  /* pin the by-need / by-industry group (and its grey divider) to the bottom so it aligns across both dropdowns */
  .mega-trust .mega-flabel2{margin-top:auto}

  /* right panel = globe viz + credentials, filling the dead space */
  .mega-trustpanel{display:flex;flex-direction:column;gap:1.1rem;justify-content:space-between}
  .menu>li.has-mega:nth-child(2) .mega-trustpanel{flex-direction:column-reverse}   /* "Who it's for" alternates: creds top, animation bottom */
  .mtp-viz{display:flex;justify-content:center;align-items:center;padding:.3rem 0}
  .mtp-globe{width:104px;height:104px;color:var(--brand)}
  .mtp-globe circle,.mtp-globe ellipse,.mtp-globe line{vector-effect:non-scaling-stroke}
  .mtp-orbit{transform-origin:60px 60px}
}
@media(min-width:940px) and (prefers-reduced-motion:no-preference){
  .mtp-orbit{animation:mtpSpin 16s linear infinite}@keyframes mtpSpin{to{transform:rotate(360deg)}}
}
/* lean checkmark site-wide (match the pricing page's weight-500 check) */
.tier li::before{font-weight:500}



/* ============================================================
   v66 (2026-06-23) — mobile polish round 5
   ============================================================ */
.ddw-prompt.m-only{display:none}            /* base: FX prompt is mobile-only */

@media(max-width:760px){
  /* --- #2 · emphasise the top-bar Log in (was plain grey text) --- */
  .m-login{color:var(--brand-ink);font-weight:700;border:1.5px solid var(--brand-soft);
    background:var(--lav);border-radius:100px;padding:.4rem .95rem}

  /* --- #1 · burger CTA footer: solid, separated, clears device chrome (Contact sales no longer lost at the edge) --- */
  .mobile .m-cta{background:var(--bg);border-top:1px solid var(--line);
    box-shadow:0 -12px 26px -18px rgba(26,22,18,.35);
    padding-bottom:calc(1.7rem + env(safe-area-inset-bottom,0px))}
  .mobile .m-cta .btn-ghost{border-width:1.5px}

  /* --- #5 · drop the ugly corner "Tap to try" badge; the .ddw-prompt line is the cue now --- */
  .ddw::before{display:none !important}
  .ddw-prompt.m-only{display:flex}
  .ddw-prompt{font-size:.82rem}

  /* --- #6 · interactive controls: darker borders + uniform 50px height so they read as tappable --- */
  .ddw-amt,.ddw-out,.ddw-ccy{min-height:50px;border-color:var(--line-d)}
  .ddw-out{border-color:var(--brand-soft)}
  .ddw-stepper{min-height:50px;border-color:var(--line-d)}
  .ddw-caps .ddw-cap{border-color:var(--line-d)}

  /* --- #7 · EMI caps: give the orange toggle dot its own gutter (was sitting on the text) --- */
  #sc-api .pp-cap{font-size:.72rem;padding:.5rem .75rem .5rem 1.85rem;min-height:42px;display:flex;align-items:center}
  #sc-api .pp-cap::before{left:.7rem}
}

/* --- #4 · small celebration when the 3rd "Account goes live" step is reached --- */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .mf-steps.scrollic .mf-step.is-live .mf-node{position:relative}
  .mf-steps.scrollic .mf-step.is-live .mf-node::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--brand);opacity:0;pointer-events:none}
  .mf-steps.scrollic .mf-step.is-live.mf-on .mf-node{animation:mfPop .7s var(--ease)}
  .mf-steps.scrollic .mf-step.is-live.mf-on .mf-node::after{animation:mfBurst .7s var(--ease)}
  @keyframes mfPop{0%{transform:scale(1)}28%{transform:scale(1.2)}55%{transform:scale(.95)}100%{transform:scale(1)}}
  @keyframes mfBurst{0%{transform:scale(.55);opacity:.85}100%{transform:scale(1.9);opacity:0}}
}


/* v63.1 — make the dropdown globe read as a clear branded visual (was too faint/blending) + breathing room so it never clips */
@media(min-width:940px){
  .mtp-globe>circle,.mtp-globe>ellipse,.mtp-globe>line{stroke:var(--brand-soft)}   /* whole wireframe branded so the lat/long detail reads, not an empty faint circle */
  .mtp-globe>circle{stroke-width:2}
  .mtp-globe>ellipse,.mtp-globe>line{stroke-width:1.3}
  .mtp-globe{width:112px;height:112px}
  .mtp-viz{min-height:120px;padding:.5rem 0}
  .mega-trustpanel{padding-top:1.6rem;padding-bottom:1.6rem;gap:1.4rem}
}



/* ============================================================
   v67 (2026-06-23) — mobile round 6
   · drawer opens beneath the promo bar, header matches the navbar
   · premium (quieter) Log in
   · interactive widgets: high-contrast, uniform-sized controls
     (Apple 44pt / Material 48dp / WCAG 44px touch targets)
   ============================================================ */
@media(max-width:760px){
  /* --- drawer header = same height as the site navbar --- */
  .m-head{min-height:var(--nav-h);padding-top:0;padding-bottom:0;box-sizing:border-box}

  /* --- #1 · Log in: refined neutral pill, not a loud orange chip --- */
  .m-login{color:var(--ink);font-weight:600;border:1px solid var(--line);
    background:var(--surface);border-radius:100px;padding:.4rem .9rem;box-shadow:0 1px 2px rgba(26,22,18,.05)}

  /* --- #5 · interactive widget controls: darker + identical sizing so it's obvious what to tap --- */
  /* every editable / tappable control shares the same 52px height, radius, and dark border */
  .ddw-amt,.ddw-out,.ddw-ccy,.ddw-stepper{min-height:52px;border-radius:12px;border:1.5px solid var(--line-d)}
  .ddw-amt,.ddw-ccy{background:var(--surface2)}              /* tinted fill = clearly an editable field */
  .ddw-out{background:var(--lav);border-color:var(--brand)}   /* result reads as output, not input */
  .ddw-amtrow{gap:.5rem}
  .ddw-ccy{min-width:5.4rem;font-weight:700}
  .ddw-stepper{background:var(--surface2);justify-content:space-between;padding:.3rem .35rem}
  .ddw-dec,.ddw-inc{width:42px;height:42px;background:#fff;border:1.5px solid var(--line-d);box-shadow:none;color:var(--ink)}
  .ddw-dec:active,.ddw-inc:active{background:var(--lav)}
  .ddw-step{align-items:center}
  .ddw-cap{min-height:48px;border:1.5px solid var(--line-d) !important;background:var(--surface)}
  .ddw-cap.on{background:var(--lav);border-color:var(--brand) !important}
  /* the "how to use" cue, consistent across all three widgets */
  .ddw-prompt{font-size:.82rem;font-weight:700;margin:.2rem 0 .7rem}
}


/* ============================================================
   v64 (2026-06-23) — (1) darker/coherent switcher controls,
   (4) rounded section bands (distinct-bg only), (5) orange
   highlighter-marker reveal on "how we work".
   ============================================================ */

/* (5) "how we work" highlighter: an orange marker that sweeps in as the section scrolls into view */
/* REAL highlighter ink on "how we work": a hand-drawn wobbly marker-stroke SVG (semi-transparent, multiply blend = ink over the words), scroll-driven wipe (--mkp), 3 stroke shapes (.v2/.v3) so a re-scroll shows a different mark. Desktop + mobile. */
/* highlighter ink: a translucent, blurred, slanted, organically-rounded blob behind the text (isolation keeps it behind the letters via z-index:-1). Multiply blend = real ink wash; text shows through. Scroll-triggered scaleX wipe (--mkp set by JS) + 3 variants. */
.hl-mark{position:relative;display:inline-block;white-space:nowrap;padding:0 .18em;isolation:isolate;--mkr:-2.4deg;--mkb:1.5px;--mko:0.45;--mkrad:42% 58% 52% 48% / 64% 56% 44% 36%}
.hl-mark.v2{--mkr:-1.7deg;--mkb:1.3px;--mko:0.48;--mkrad:55% 45% 60% 40% / 50% 62% 38% 50%}
.hl-mark.v3{--mkr:-3.8deg;--mkb:1.8px;--mko:0.42;--mkrad:38% 62% 45% 55% / 58% 42% 60% 40%}
.hl-mark::before{content:"";position:absolute;left:-.06em;right:-.06em;top:4%;bottom:0;z-index:-1;background:rgb(242 161 74 / var(--mko));border-radius:var(--mkrad);filter:blur(var(--mkb));mix-blend-mode:multiply;transform:rotate(var(--mkr)) scaleX(var(--mkp,0));transform-origin:left center;transition:transform .85s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){.hl-mark::before{transform:rotate(var(--mkr)) scaleX(1)}}

/* (1) switcher interactive controls: DARKER + coherent (same size + structure across all 3 widgets) */
.ddw-ccy,.ddw-swap,.ddw-stepper,.ddw-caps .ddw-cap{background:color-mix(in oklab,var(--ink) 9%,var(--surface)) !important;border-color:var(--line-d) !important;color:var(--ink)}
.ddw-ccy,.ddw-caps .ddw-cap{min-height:44px;border-radius:11px}
.ddw-amt,.ddw-out{min-height:44px}
.ddw-stepper{min-height:44px}
.ddw-stepper button:hover,.ddw-swap:hover,.ddw-caps .ddw-cap:hover{background:var(--lav) !important;border-color:var(--brand-soft) !important;color:var(--brand-ink)}
.ddw-caps .ddw-cap.on{background:var(--lav) !important;border-color:var(--brand-soft) !important;color:var(--ink)}

/* (4) premium rounded bands: distinct-bg sections become inset floating panels; white-on-white + nav/hero stay crisp (full-bleed) */
.band-dark{border-radius:clamp(20px,2.4vw,30px);margin-inline:clamp(.6rem,2.6vw,1.8rem)}
.band-soft{border-radius:clamp(16px,1.8vw,24px);margin-inline:clamp(.6rem,2.6vw,1.8rem)}
footer.site{border-radius:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,30px) 0 0}


/* v65 (2026-06-23) — dropdown aha: a SEAMLESS infinite loop of money hopping between stations
   around the globe (closed path + linear timing = no visible restart; 2 staggered packets so motion never stops). */
@media(min-width:940px){
  .mtp-flight{width:118px;height:118px;color:var(--brand)}
  .mtp-flight .fp-sphere,.mtp-flight ellipse,.mtp-flight line{stroke:var(--brand-soft);vector-effect:non-scaling-stroke}
  .mtp-flight .fp-sphere{stroke-width:1.6}
  .fp-pkt{offset-path:path("M30 78 Q40 40 64 30 Q92 36 96 64 Q86 96 56 92 Q34 88 30 78 Z");offset-distance:0%;offset-rotate:0deg;transition:opacity .3s var(--ease)}
}
/* position + currency morph are JS-driven (rAF) so the symbol only changes AT each station (route milestone), smoothly. */



/* ============================================================
   v68 (2026-06-23) — bulletproof drawer + colour discipline
   ============================================================ */
@media(max-width:760px){
  /* --- drawer = header (fixed) + scrolling middle + ALWAYS-visible footer.
        m-cta is no longer sticky; it's the last flex child of a 100dvh column, so it can never be clipped. --- */
  .mobile.open{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
  .m-head{flex:0 0 auto}
  .mobile.open > .m-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    margin-inline:0;padding-inline:clamp(1.2rem,5vw,2rem)}
  .mobile.open > .m-cta{position:static;flex:0 0 auto;margin:0;
    padding:.9rem clamp(1.2rem,5vw,2rem) calc(1rem + env(safe-area-inset-bottom,0px))}

  /* --- colour discipline: stop painting every section kicker + chip dot orange (cuts the visual noise) --- */
  .eyebrow{color:var(--faint)}
  .eyebrow::before{background:var(--line-d);opacity:.5}
  .numbers .eyebrow{color:var(--dark-soft)}
  .numbers .eyebrow::before{background:var(--dark-soft)}
  .m-rolerow .role::before{background:var(--faint);opacity:.45}
}



/* ============================================================
   v69 (2026-06-23) — finish colour discipline on the kickers
   ============================================================ */
@media(max-width:760px){
  .numbers .sechead .eyebrow{color:var(--dark-soft)}      /* dark-band kicker was still orange (more specific rule) */
  .numbers .sechead .eyebrow::before{background:var(--dark-soft);opacity:.5}
  .eyebrow{font-size:.66rem;letter-spacing:.14em}          /* one eyebrow size, not three */
}


/* EMI-as-a-Service risk checklist (sc-api): each risk starts RED, flips GREEN when its capability is toggled on. Alert-red + success-green are deliberately outside the brand-orange family. */
.emi-list{display:grid;gap:.5rem;margin-top:.7rem}
.emi-row{display:flex;align-items:center;gap:.7rem;text-align:left;font:inherit;cursor:pointer;width:100%;padding:.62rem .75rem;border:1px solid color-mix(in oklab,#c4382b 32%,var(--surface));background:color-mix(in oklab,#c4382b 7%,var(--surface));border-radius:11px;transition:background .28s var(--ease),border-color .28s var(--ease)}
.emi-row .emi-ic{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#c4382b;color:#fff;font-size:.72rem;font-weight:800;transition:background .28s var(--ease)}
.emi-row .emi-ic::before{content:"\00d7"}
.emi-tx{display:flex;flex-direction:column;gap:.04rem;min-width:0}
.emi-tx b{font-weight:600;font-size:.92rem;color:var(--ink);line-height:1.15}
.emi-st{font-size:.76rem;font-weight:600;color:#c4382b;transition:color .28s var(--ease)}
.emi-row.on{border-color:color-mix(in oklab,#2f8f5b 38%,var(--surface));background:color-mix(in oklab,#2f8f5b 8%,var(--surface))}
.emi-row.on .emi-ic{background:#2f8f5b}
.emi-row.on .emi-ic::before{content:"\2713"}
.emi-row.on .emi-st{color:#2f8f5b}
.emi-row:hover{border-color:var(--line-d)}
.emi-row:focus-visible{outline:2px solid var(--brand-soft);outline-offset:2px}
.emi-sum{margin-top:.8rem;text-align:center;font-size:.8rem;font-weight:700;color:var(--soft);padding:.55rem;border-radius:9px;background:var(--surface2);transition:background .28s var(--ease),color .28s var(--ease)}
.emi-sum.done{color:#fff;background:#2f8f5b}



/* ============================================================
   v70 (2026-06-23) — DEFINITIVE drawer height (no longer dvh-only)
   top + bottom:0 = guaranteed full height on every browser; svh keeps
   the footer above the mobile toolbar where supported. Also unwinds the
   old flex-shrink:0 that was choking the new .m-scroll region.
   ============================================================ */
@media(max-width:939px){
  .mobile.open{min-height:0}
  .mobile.open > .m-scroll{flex:1 1 auto !important;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.m-scroll::-webkit-scrollbar{display:none}
  .mobile.open > .m-cta{margin-top:0;position:static}
}
@supports (height:100svh){
  @media(max-width:939px){
    .mobile.open{bottom:auto;height:calc(100svh - var(--drawer-top,0px))}
  }
}



/* ============================================================
   v71 (2026-06-23) — orange diet (mobile): keep orange ONLY for the
   primary CTA, the one headline word (.hl-mark), and links. Everything
   decorative goes neutral ink/grey.
   ============================================================ */
@media(max-width:760px){
  /* team avatars: neutral ring + ink monogram (was an orange conic ring) */
  .facerow .person .phph{color:var(--ink)}
  .facerow .person .phph .mark{color:var(--ink)}
  .facerow .person .phph::after{background:var(--line-d);opacity:.45}

  /* value-triad: neutral rule + ink numerals (was orange) */
  .vt{border-top-color:var(--line-d)}
  .vt .vt-n{color:var(--faint)}

  /* "try it" prompt: cue lives in the text, not an orange dot */
  .ddw-prompt{color:var(--ink)}
  .ddw-prompt::before{background:var(--ink);animation:none}

  /* stepper chrome → premium monochrome ink; the 3rd-step celebration keeps the single orange payoff */
  .mf-steps::after{background:var(--ink)}
  .mf-when-live{color:var(--ink)}
  .mf-steps.scrollic .mf-step.mf-on .mf-node{border-color:var(--ink);background:#fff;box-shadow:0 0 0 4px color-mix(in oklab,var(--ink) 9%,transparent)}
  .mf-steps.scrollic .mf-step.mf-on .mf-tick{background:var(--ink)}
  /* 3rd step is the single orange payoff (overrides the monochrome rules above) */
  .mf-steps.scrollic .mf-step.is-live.mf-on .mf-node{background:var(--brand-btn);border-color:var(--brand)}
  .mf-steps.scrollic .mf-step.is-live.mf-on .mf-tick{background:#fff}
}

/* ============================================================
   v72 (2026-06-23) — 5-step type scale (mobile). Collapse the ~40
   ad-hoc sizes onto: caption / body / subhead / heading / display.
   ============================================================ */
@media(max-width:760px){
  :root{
    --s--1:.8rem;     /* caption — labels, fine print, eyebrows */
    --s-0:1rem;       /* body */
    --s-1:1.2rem;     /* subhead — leads, h3 */
    --s-2:1.6rem;     /* heading — every section h2 */
    --s-3:1.6rem;     /* heading (merged with s-2) */
    --s-4:2.15rem;    /* display */
  }
  .eyebrow{font-size:var(--s--1)}                 /* fold the kicker into the caption step */
  h2[style*="--s-3"]{font-size:var(--s-2) !important}  /* "Built for…" inline s-3 → heading step */
}


/* v66 — EMIaaS all-4 resolved = a real CTA to the EMIaaS page */
.emi-sum.done{padding:0 !important;background:none !important;border:0 !important}
.emi-cta{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;background:var(--brand-btn);color:#fff;font-weight:700;font-size:var(--s--1);padding:.78rem 1.1rem;border-radius:100px;text-decoration:none;transition:background .2s var(--ease),transform .12s var(--ease)}
.emi-cta:hover{background:var(--brand-deep)}
.emi-cta:active{transform:scale(.98)}


/* v67 — dropdown packets are now currency symbols (cycled by JS) traveling the station loop */
@media(min-width:940px){
  .mtp-flight text.fp-pkt{font:700 13px "Hanken Grotesk",system-ui,sans-serif;text-anchor:middle;dominant-baseline:central;offset-rotate:0deg;fill:var(--brand)}
}



/* ============================================================
   v73 (2026-06-23) — interactive widgets: fewer instructions,
   clear bottom segregation, overlap-proof header row
   ============================================================ */
@media(max-width:760px){
  /* less hand-holding: well-built controls speak for themselves */
  .ddw-prompt{display:none !important}

  /* overlap-proof: let the panel header breathe; never let the title collide with the status pill */
  .pp-top{align-items:flex-start;gap:.5rem 1rem;flex-wrap:wrap}
  .pp-top > div:first-child{min-width:0;flex:1 1 auto}
  .pp-pill{flex:0 0 auto;white-space:nowrap}

  /* bottom segregation: real gap below each interactive widget before the next section
     (#switcher shipped with inline padding-bottom:0) */
  #switcher{padding-bottom:2.6rem !important}
  .scenes.mcarousel{padding-bottom:1.4rem}
  .scenes.mcarousel > .scene{margin-bottom:.4rem}
}



/* ============================================================
   v74 (2026-06-23) mobile drawer CTAs + assistant clearance.
   Keep both conversion paths visible without covering the assistant.
   ============================================================ */
@media(max-width:760px){
  .mobile.open > .m-cta{
    display:flex !important;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:.55rem;
    padding:.75rem clamp(1rem,4vw,1.4rem) calc(92px + env(safe-area-inset-bottom,0px));
  }
  .mobile .m-cta .btn{
    width:auto !important;
    min-width:0;
    min-height:44px;
    flex:0 1 auto;
    display:inline-flex;
    padding:.62rem 1.05rem;
    font-size:.86rem;
    line-height:1;
  }
  .mobile .m-cta .btn-primary{box-shadow:none}
  .mobile .m-cta .btn-ghost{
    border:1.5px solid var(--brand);
    background:var(--bg);
    box-shadow:none;
  }

  /* The assistant stylesheet is injected after this file, so the extra
     .ddbot ancestor intentionally wins without !important. */
  .ddbot .ddbot-fab{
    right:14px;
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    width:56px;
    height:56px;
  }
  .ddbot .ddbot-panel{
    left:10px;
    right:10px;
    bottom:calc(82px + env(safe-area-inset-bottom,0px));
    width:auto;
    max-height:calc(100dvh - 102px - env(safe-area-inset-bottom,0px));
    border-radius:16px;
  }
}



/* ============================================================
   v77 (2026-06-23) — widget declutter + sizing, marker fix, pricing align
   ============================================================ */
@media(max-width:760px){
  /* remove the status pills ("38 ccy", "Batch", "FRN 901043") — clutter, not needed on mobile */
  .ppanel .pp-pill{display:none}

  /* multi-currency / all widgets: compact so they don't dominate or bleed into the next card */
  .ppanel.ddw{overflow:hidden}
  .ddw-amt,.ddw-out,.ddw-ccy,.ddw-stepper{min-height:46px}
  .ddw-amt,.ddw-out{font-size:1.2rem;min-width:0}
  .ddw-ccy{min-width:4.4rem;font-size:.85rem}
  .ddw-field{margin-top:.55rem}
  .ddw-amtrow{gap:.45rem}
  .ddw-rate{margin-top:.55rem}

  /* "Trust is earned in how we work" marker: the url(#mk-rough) SVG filter
     fails on mobile browsers and hides the highlight — drop it so it renders */
  .hl-mark::before{filter:none !important}

  /* pricing: re-instate equal pre-button heights so every tier's CTA lines up
     (the popular tier was sitting lower); the popular card stays emphasised via its own styling */
  .tier .tierfit{min-height:3.6em}
  .tier .price{min-height:2.7rem;display:flex;align-items:flex-end}
  .tier .pricenote{min-height:2.3em}
  .tier.feat{padding-top:1.25rem}   /* match other cards so the popular tier's CTA lines up (badge headroom lives on the carousel) */
}


/* v68 — fix pricing check coherence: the generic ".feat li::before" dot bullet was leaking onto the Dynamic pricing card (.tier.feat), adding an orange dot behind its checkmarks. Force all tier checks to the plain ✓ glyph. */
.tier li::before{background:none;width:auto;height:auto;border-radius:0;top:0}
/* bigger, bolder, more legible dropdown flight animation (was small/underwhelming) */
@media(min-width:940px){
  .mtp-flight{width:150px;height:150px}
  .mtp-flight .fp-sphere{stroke-width:2.2}
  .mtp-flight ellipse,.mtp-flight line{stroke-width:1.4}
  .mtp-flight .fp-st{r:4}
  .mtp-flight text.fp-pkt{font-size:15px}
  .mtp-viz{min-height:150px}
}


/* v69 — homepage team BESIDE the text (was stacked, wasting the right half) */
.lead-grid{display:grid;grid-template-columns:1fr;gap:1.6rem}
@media(min-width:900px){
  .lead-grid{grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,4rem);align-items:center}
  .lead-tx{text-align:left}
  #leadership .lead-grid .people{max-width:none;margin:0;grid-template-columns:1fr 1fr;gap:1.4rem 1.6rem}
}


/* v70 — converter currency selects: custom chevron with breathing room (native arrow was jammed against the edge) */
.ddw-ccy{-webkit-appearance:none !important;appearance:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' stroke='%23A8500F' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:right .72rem center !important;background-size:12px 12px !important;
  padding-right:2.2rem !important;padding-left:.85rem !important;text-overflow:ellipsis}


/* === dd-viz: hero-device === (V-011, 2026-07-02: CSS-drawn account device replaces the
   hero-phone photo composite (and the dead hero-globe-38 CSS formerly here).
   ONE IDEA: your real multi-currency account, running — regulated underneath.
   One orange = the incoming payment dot. Green #2f6b4f/#2f8f5b = house "cleared" semantic.
   One orchestrated beat on reveal: payment arrives -> clears -> EUR balance settles (+ exactly
   the payment amount). No-JS and reduced-motion render the static landed (cleared) state.
   Mobile hero unchanged: the visual column is display:none <940px. Illustrative figures, labeled.) */
.herophone-wrap{position:relative;max-width:520px;width:100%;margin-inline:auto}
@media(min-width:940px){.hero-grid .herophone-wrap{margin-right:1.25rem;margin-left:auto}}
.hdev-wrap{position:relative;padding:1.4rem 0 0}
.hdev-laptop{position:absolute;z-index:1;top:46%;left:50%;transform:translate(-50%,-50%);width:min(100%,470px);height:auto;filter:drop-shadow(0 30px 50px rgba(26,22,18,.26));pointer-events:none}
@media(max-width:939px){.hdev-laptop{display:none}}
/* hero device elliptic ring removed per Yuval 2026-07-06 */
.hdev{position:relative;z-index:2;width:min(72%,296px);margin:0 auto;
  background:var(--ink);border-radius:46px;padding:12px;
  box-shadow:0 2px 4px rgba(26,22,18,.08),0 12px 24px -10px rgba(26,22,18,.4),0 34px 80px -16px rgba(26,22,18,.46)}
.hdev-screen{background:var(--bg);border-radius:34px;overflow:hidden;display:flex;flex-direction:column;
  aspect-ratio:9/18.6;font-family:"Hanken Grotesk",system-ui,sans-serif}
.hdev-notch{width:74px;height:16px;border-radius:100px;background:var(--ink);margin:.5rem auto 0}
.hdev-app{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.7rem 1rem .7rem;border-bottom:1px solid var(--line)}
.hdev-app b{font-size:.92rem;font-weight:600;letter-spacing:-.01em}
.hdev-frn{font-size:.65rem;font-weight:600;letter-spacing:.06em;color:var(--faint);
  border:1px solid var(--line);border-radius:100px;padding:.18rem .55rem;white-space:nowrap}
.hdev-pay{margin:.7rem .8rem 0;display:flex;align-items:center;gap:.55rem;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.6rem .75rem;
  box-shadow:0 1px 2px rgba(26,22,18,.04),0 10px 26px -14px rgba(26,22,18,.22)}
.hdev-pay .dot{width:9px;height:9px;border-radius:50%;background:var(--brand);flex:0 0 auto;position:relative}
.hdev-pay .dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid #2f8f5b;
  opacity:0;transform:scale(.4)}
.hdev-pay .tx{display:flex;flex-direction:column;min-width:0;flex:1}
.hdev-pay .tx b{font-size:.78rem;font-weight:600;color:var(--ink);white-space:nowrap}
.hdev-pay .tx span{font-size:.67rem;color:var(--faint);font-weight:600;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdev-pay .st{font-size:.66rem;font-weight:700;letter-spacing:.05em;white-space:nowrap;
  color:#2f6b4f;transition:color .3s}
.hdev-pay .st .inc{display:none}
.hdev-rows{padding:.35rem .8rem .55rem;display:flex;flex-direction:column;flex:1;justify-content:center}
.hdev-row{display:flex;align-items:center;gap:.65rem;padding:.74rem .1rem;border-bottom:1px solid var(--line)}
.hdev-row:last-child{border-bottom:0}
.hdev-row.more{justify-content:center;border-bottom:0;padding:.45rem 0 .1rem}
.hdev-row.more span{font-size:.67rem;font-weight:600;color:var(--faint);letter-spacing:.04em}
.hdev-ccy{width:30px;height:30px;border-radius:50%;background:var(--surface2);border:1px solid var(--line);
  display:grid;place-items:center;font-size:.72rem;font-weight:700;color:var(--soft);flex:0 0 auto}
.hdev-nm{display:flex;flex-direction:column;min-width:0;flex:1}
.hdev-nm b{font-size:.8rem;font-weight:600;color:var(--ink)}
.hdev-nm span{font-size:.67rem;color:var(--faint);font-weight:600;letter-spacing:.03em}
.hdev-amt{font-size:.82rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.hdev-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;
  padding:.55rem 1rem .5rem;border-top:1px solid var(--line);background:var(--surface)}
.hdev-foot span{font-size:.65rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.hdev-home{width:88px;height:4px;border-radius:100px;background:var(--q-unlit);margin:.15rem auto .5rem}
.hdev-note{position:relative;z-index:2;text-align:center;font-size:.68rem;color:var(--faint);
  font-weight:600;letter-spacing:.02em;margin-top:.9rem}
/* beat states — default (no JS / reduced motion) is the landed CLEARED state; JS adds .anim then .go/.clr */
.hdev.anim .hdev-pay{opacity:0;transform:translateY(-10px)}
.hdev.anim.go .hdev-pay{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.16,1,.3,1) .45s,transform .6s cubic-bezier(.16,1,.3,1) .45s}
.hdev.anim .st{color:var(--faint)}
.hdev.anim .st .inc{display:inline}
.hdev.anim .st .tick{display:none}
.hdev.anim.clr .st{color:#2f6b4f}
.hdev.anim.clr .st .inc{display:none}
.hdev.anim.clr .st .tick{display:inline}
.hdev.anim.clr .hdev-pay .dot::after{animation:hdevPulse .9s cubic-bezier(.16,1,.3,1) forwards}
@keyframes hdevPulse{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}
/* orange budget, hero scope: trust-badge dots go neutral (orange belongs to the payment) */
.hero .htoken .d{background:var(--q-unlit)}
/* === /dd-viz === */
.hero .herolink{align-self:center;font-weight:600;color:var(--brand-ink);text-decoration:none;font-size:var(--s--1)}
.hero .herolink:hover{text-decoration:underline;text-underline-offset:3px}


/* #voices — testimonials (client names redacted via blur) */
.tvoices{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:2rem}
@media(min-width:820px){.tvoices{grid-template-columns:1fr 1fr;gap:1.4rem}}
.tvoice{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.6rem 1.3rem;margin:0;position:relative;transition:transform .2s var(--ease),border-color .2s var(--ease)}
.tvoice:hover{transform:translateY(-3px);border-color:var(--brand-soft)}
.tvoice blockquote{margin:0;font-size:var(--s-0);line-height:1.55;color:var(--ink)}
.tvoice blockquote::before{content:"\201C";display:block;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:700;font-size:2.4rem;line-height:.6;color:var(--brand);margin-bottom:.35rem}
.tvoice figcaption{display:flex;flex-direction:column;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.tvoice .tv-name{filter:blur(5px);font-weight:600;color:var(--ink);user-select:none;width:max-content;max-width:100%}
.tvoice .tv-role{font-size:var(--s--1);color:var(--faint);margin-top:.55rem}

/* certification badges (placeholder marks; swap for official Amtivo files, keep aspect ratio) */
.cert-badge{display:inline-block;width:auto;vertical-align:middle}
.cert-badge--lg{height:168px}
.cert-badge--md{height:112px}
.cert-badge--sm{height:76px}
.cert-badge--xs{height:52px}
.cert-row{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin:0 0 1rem}
.cert-row .cert-lab{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.cert-row--foot{margin:.2rem 0 1.1rem}
.isobadges .isobadge{display:flex;align-items:center;gap:.85rem;text-align:left}


/* v72 — About: the timeline RAIL is the first thing beneath the hero (rail ordered before the intro paragraphs; slim heading; tighter top padding) */
.tl-first{padding-top:clamp(1.4rem,3vw,2.4rem)}
.tl-first .wrap{display:flex;flex-direction:column}
.tl-first .htl{order:1}
.tl-first .split{order:2;margin-top:1.8rem}



/* === dd-viz: kit === (2026-07-02, approved batch — CTA physics site-wide, stamped pricing CTA (D2),
   dock trial on pricing (D3), grain/marker/chrome-pill/counter/narrated-entrance library for the
   motion pass + ICP router. Orange budget on pricing: featured-tier CTA owns the orange; the
   MOST-POPULAR tag goes ink + sticker tilt. Ghost text -> ink (orange stays border-only). */
.btn{transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease),
     border-color .2s var(--ease),box-shadow .2s var(--ease)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 30px -6px rgba(26,22,18,.3)}
.btn-primary:active{transform:translateY(0) scale(.98);transition-duration:.1s}
.btn .ar{transition:transform .2s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-ghost{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.btn,.btn .ar{transition:none}.btn-primary:hover{transform:none;box-shadow:none}}

.btn-stamp{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  min-height:3rem;border-radius:5px;background:var(--ink);color:#fff;font-weight:700;
  font-size:var(--s-0);cursor:pointer;border:0;text-decoration:none;
  box-shadow:5px 5px 0 rgba(26,22,18,.3);transition:transform .15s ease,box-shadow .15s ease}
.btn-stamp:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(26,22,18,.3)}
.btn-stamp:active{transform:translate(4px,4px);box-shadow:1px 1px 0 rgba(26,22,18,.3)}
.btn-stamp.feat{background:var(--brand-btn)}
@media(prefers-reduced-motion:reduce){.btn-stamp{transition:none}}
.tier .pop{background:var(--ink);box-shadow:0 8px 18px -10px rgba(26,22,18,.55);transform:rotate(-6deg)}

.grain-dark{position:relative}
.grain-dark::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.8;
  border-radius:inherit;
  background-image: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='100%25' height='100%25' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E")}

.mk{background-image:linear-gradient(transparent 58%,rgba(232,117,42,.45) 58% 94%,transparent 94%);
  background-repeat:no-repeat;background-size:0% 100%;padding-inline:.06em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.in .mk,.mk.go{animation:mkWipe .7s var(--ease) .15s forwards}
@keyframes mkWipe{to{background-size:100% 100%}}
@media(prefers-reduced-motion:reduce){.mk{background-size:100% 100%;animation:none}}

.sp{display:inline-flex;align-items:center;gap:.4rem;border-radius:100px;font-weight:600;white-space:nowrap}
.sp-status{font-size:.68rem;letter-spacing:.05em;border:1px solid var(--line);color:var(--faint);
  padding:.2rem .6rem;background:var(--surface)}
.sp-badge{font-size:.72rem;background:var(--surface2);border:1px solid var(--line);color:var(--soft);
  padding:.3rem .75rem}
.sp-live{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);
  border:1px solid var(--line);padding:.2rem .6rem;background:var(--surface)}
.sp-live .d{width:7px;height:7px;border-radius:50%;background:#2f8f5b}
.sp-dark{border-color:var(--line-d);background:var(--dark2);color:var(--dark-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}

.cnt{font-variant-numeric:tabular-nums}

.narr>*{opacity:0;transform:translateY(6px)}
.in .narr>*,.narr.go>*{animation:narrIn .46s var(--ease) forwards}
.in .narr>:nth-child(1),.narr.go>:nth-child(1){animation-delay:.15s}
.in .narr>:nth-child(2),.narr.go>:nth-child(2){animation-delay:.23s}
.in .narr>:nth-child(3),.narr.go>:nth-child(3){animation-delay:.31s}
.in .narr>:nth-child(4),.narr.go>:nth-child(4){animation-delay:.39s}
.in .narr>:nth-child(5),.narr.go>:nth-child(5){animation-delay:.47s}
.in .narr>:nth-child(6),.narr.go>:nth-child(6){animation-delay:.55s}
@keyframes narrIn{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.narr>*{opacity:1;transform:none;animation:none!important}}

.dock{position:fixed;left:50%;bottom:1.1rem;translate:-50% 0;z-index:90;display:none;
  align-items:center;gap:.2rem;background:var(--dark);border-radius:100px;padding:.35rem .45rem;
  box-shadow:0 14px 48px rgba(10,10,12,.4)}
@media(min-width:940px){.dock{display:flex}}
.dock a{font-size:.78rem;font-weight:600;color:var(--dark-soft);text-decoration:none;
  padding:.42rem .8rem;border-radius:100px;transition:color .15s ease,background .15s ease}
.dock a:hover{color:var(--dark-ink)}
.dock a.on{color:var(--dark-ink);background:var(--dark2)}
.dock .dock-cta{background:var(--brand-btn);color:#fff;margin-left:.25rem}
.dock .dock-cta:hover{background:var(--brand-deep);color:#fff}
/* === /dd-viz kit === */

/* === dd-viz: pricing-orange-budget === (orange budget on pricing: the featured-tier stamp owns the
   orange; toggle + tier checks demote to ink/soft. Fine-print .save keeps brand-deep, small enough.) */
.pricetoggle button.active{background:var(--ink);color:#fff}
.tier li::before{color:var(--soft)}
/* === /dd-viz === */

/* === dd-viz: display-serif === (D1 approved 2026-07-02 after A/B vision gate at 1440+390:
   Spectral 500 for display headings (h1/h2) site-wide, Hanken stays for body/UI/h3+.
   !important on weight is deliberate: inline style="font-weight:600" exists on many h2s across
   18 pages and Spectral has no real 600 — synthetic bold would smear. Amends LAW §1.5.
   Hero em goes italic (the probe's judged treatment). */
h1,h2{font-family:"Spectral",Georgia,serif;font-weight:500!important;letter-spacing:-.012em}
.hero h1{font-weight:500!important}
.hero h1 em{font-style:italic}
/* keep function surfaces grotesk */
.hdev-screen h1,.hdev-screen h2,.ppanel h2,.dock a{font-family:"Hanken Grotesk",system-ui,sans-serif}
/* === /dd-viz === */



/* === dd-viz: hero-journey (V-013, 2026-07-02) ============================
   Scroll-scripted chapters inside the hero device: 01 Onboard → 02 Receive →
   03 Convert → 04 Approve → 05 Start. Diegetic in-phone CTAs + HUD pins
   (video-factory grammar). Desktop ≥940px tall+fine-pointer: sticky theatre;
   ≥940px touch/short: timed auto-loop. <940px: hero unchanged (v27 rule).
   No-JS / reduced-motion: static landed accounts state — .hj/.hj-c* never added.
   All figures illustrative, labeled. Orange budget: payment dot + ch05 CTA only. */

/* rail + narration (left column; JS-gated via .hero.hj) */
.hj-rail{display:none;gap:.45rem;margin-top:1.35rem;flex-wrap:wrap}
.hero.hj .hj-rail{display:flex}
.hj-step{display:inline-flex;align-items:center;gap:.42rem;border:1px solid var(--line);background:var(--surface);
  border-radius:100px;padding:.32rem .78rem .32rem .42rem;cursor:pointer;font-family:inherit;
  font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--faint);
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),transform .2s var(--ease)}
.hj-step i{font-style:normal;font-size:.58rem;font-weight:700;letter-spacing:.08em;color:var(--faint);
  border:1px solid var(--line);border-radius:100px;padding:.08rem .36rem;background:var(--bg);
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.hj-step:hover{transform:translateY(-1px);border-color:var(--brand-soft);color:var(--ink)}
.hj-step.on{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.hj-step.on i{border-color:#4a4a52;color:var(--bg);background:transparent}
.hj-narr{display:none;position:relative;z-index:2;text-align:center;margin-top:.85rem;
  font-size:var(--s--1);font-weight:600;color:var(--soft);min-height:1.6em}
.hero.hj .hj-narr{display:block}
.hero.hj .hj-narr+.hdev-note{margin-top:.3rem}
@media(max-width:939px){.hj-rail,.hj-narr{display:none !important}}

/* sticky theatre (JS-gated) */
@media(min-width:940px){
  .hero.hj-theatre{height:340vh;padding:0;align-items:flex-start;min-height:0}
  /* .hero is display:flex + align-items:center (v-2104): flex-start is REQUIRED or the grid
     centers 1109px down the 340vh section and position:sticky never engages for ch01/ch02 */
  .hero.hj-theatre .hero-grid{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));
    align-items:center;align-content:center;padding-bottom:6.5rem}
  /* padding-bottom biases the pinned content upward so the cookie-consent banner
     (fixed, bottom-left) doesn't sit on the chapter rail + narration */
}

/* journey panels — full screens inside .hdev-screen */
.hdev-screen{position:relative}
.hjp{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;background:var(--bg);
  visibility:hidden;opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s .45s}
.hdev.hj-c0 .hjp[data-ch="0"],.hdev.hj-c2 .hjp[data-ch="2"],.hdev.hj-c3 .hjp[data-ch="3"],.hdev.hj-c4 .hjp[data-ch="4"]{
  visibility:visible;opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}

/* panel content blocks share leftover space with the bottom CTA (balanced, ch05-like) */
.hjp .hj-checks,.hjp .hj-fx,.hjp .hj-task{margin-top:auto}

/* shared: fine print + diegetic in-phone CTA */
.hj-fine{margin:.6rem .9rem 0;font-size:.6rem;font-weight:600;color:var(--faint);letter-spacing:.02em;line-height:1.45}
.hjcta{margin:auto .8rem .55rem;display:flex;justify-content:center;align-items:center;gap:.4rem;
  background:var(--ink);color:var(--bg);border-radius:12px;padding:.6rem .8rem;
  font-size:.74rem;font-weight:700;letter-spacing:.02em;transition:transform .2s var(--ease)}
.hjcta:hover{transform:translateY(-1px)}
.hjp .hjcta{opacity:0;transform:translateY(8px)}
@keyframes hjIn{to{opacity:1;transform:none}}
@keyframes hjFadeIn{to{opacity:1}}
@keyframes hjFadeOut{to{opacity:0}}
.hdev.hj-c0 .hjp[data-ch="0"] .hjcta{animation:hjIn .5s var(--ease) 1.5s forwards}
.hdev.hj-c2 .hjp[data-ch="2"] .hjcta{animation:hjIn .5s var(--ease) 1.7s forwards}
.hdev.hj-c3 .hjp[data-ch="3"] .hjcta{animation:hjIn .5s var(--ease) 2s forwards}
/* base-screen (ch02) CTA floats above the foot; appears after the payment beat lands */
.hjcta-base{position:absolute;left:.8rem;right:.8rem;bottom:3.1rem;z-index:3;margin:0;
  visibility:hidden;opacity:0;transform:translateY(8px);
  box-shadow:0 10px 26px -12px rgba(26,22,18,.4)}
.hdev.hj-c1 .hjcta-base{visibility:visible;animation:hjIn .5s var(--ease) 2.6s forwards}

/* ch01 — onboard */
.hj-checks{margin:.9rem .8rem 0;display:flex;flex-direction:column;gap:.5rem}
.hj-check{display:flex;gap:.6rem;align-items:center;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:.55rem .7rem}
.hj-check .tk{width:22px;height:22px;border-radius:50%;background:#EAF3EC;color:#2f6b4f;font-size:.68rem;
  font-weight:800;display:grid;place-items:center;flex:0 0 auto}
.hj-check>span:last-child{display:flex;flex-direction:column;min-width:0}
.hj-check b{font-size:.74rem;font-weight:600;color:var(--ink)}
.hj-check i{font-style:normal;font-size:.63rem;color:var(--faint);font-weight:600}
.hdev.hj-c0 .hj-check{opacity:0;transform:translateY(8px);animation:hjIn .5s var(--ease) forwards}
.hdev.hj-c0 .hj-check:nth-child(1){animation-delay:.25s}
.hdev.hj-c0 .hj-check:nth-child(2){animation-delay:.45s}
.hdev.hj-c0 .hj-check:nth-child(3){animation-delay:.65s}
.hj-live{margin:.8rem .8rem 0;display:flex;align-items:center;gap:.5rem;background:var(--surface);
  border:1px solid var(--line);border-radius:100px;padding:.48rem .95rem;width:max-content;
  font-size:.74rem;font-weight:700;color:var(--ink);box-shadow:0 8px 20px -12px rgba(26,22,18,.3)}
.hj-live .dot{width:8px;height:8px;border-radius:50%;background:#2f8f5b;flex:0 0 auto}
.hj-live .tm{color:var(--faint);font-weight:600;font-variant-numeric:tabular-nums}
.hdev.hj-c0 .hj-live{opacity:0;transform:translateY(8px);animation:hjIn .5s var(--ease) 1s forwards}

/* ch03 — convert (rate row lands BEFORE the confirm button) */
.hj-fx{margin:.9rem .8rem 0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.hj-fxrow{display:flex;justify-content:space-between;align-items:center;padding:.64rem .8rem;
  font-size:.7rem;font-weight:600;color:var(--faint)}
.hj-fxrow b{font-size:.88rem;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.hj-rate{display:flex;align-items:center;gap:.5rem;padding:.52rem .8rem;background:var(--surface2);
  border-block:1px solid var(--line);font-size:.7rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.hj-rate .dot{width:7px;height:7px;border-radius:50%;background:var(--ink);flex:0 0 auto}
.hj-rate .lbl{margin-left:auto;font-size:.55rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-ink)}
.hdev.hj-c2 .hj-rate{opacity:0;animation:hjFadeIn .45s var(--ease) .4s forwards}
.hj-confirm{margin:.7rem .8rem 0;border:1.5px solid var(--ink);border-radius:12px;text-align:center;
  padding:.52rem;font-size:.74rem;font-weight:700;color:var(--ink)}
.hdev.hj-c2 .hj-confirm{opacity:0;transform:translateY(8px);animation:hjIn .5s var(--ease) 1.05s forwards}

/* ch04 — approve (press → PENDING flips to APPROVED) */
.hj-task{margin:.9rem .8rem 0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.75rem .8rem}
.hj-task .rowa{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.hj-task .rowa b{font-size:.78rem;font-weight:600;color:var(--ink)}
.hj-st{display:grid;font-size:.62rem;font-weight:800;letter-spacing:.05em}
.hj-st .p,.hj-st .a{grid-area:1/1;justify-self:end;white-space:nowrap}
.hj-st .p{color:var(--faint)}
.hj-st .a{opacity:0;color:#2f6b4f}
.hj-task .rowb{font-size:.68rem;color:var(--faint);font-weight:600;margin-top:.3rem;font-variant-numeric:tabular-nums}
.hj-approve{margin-top:.7rem;background:var(--ink);color:var(--bg);border-radius:12px;text-align:center;
  padding:.52rem;font-size:.74rem;font-weight:700}
@keyframes hjPress{50%{transform:scale(.96)}}
.hdev.hj-c3 .hj-task{opacity:0;transform:translateY(8px);animation:hjIn .5s var(--ease) .3s forwards}
.hdev.hj-c3 .hj-approve{animation:hjPress .32s var(--ease) 1.1s}
.hdev.hj-c3 .hj-st .p{animation:hjFadeOut .22s linear 1.4s forwards}
.hdev.hj-c3 .hj-st .a{animation:hjFadeIn .4s var(--ease) 1.45s forwards}

/* ch05 — the whole screen becomes the CTA */
.hjp-go{cursor:pointer}
.hj-go{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  padding:0 1.2rem;text-align:center}
.hj-goline{font-family:"Spectral",Georgia,serif;font-weight:500;font-size:1.18rem;line-height:1.3;
  letter-spacing:-.01em;color:var(--ink)}
.hj-goline em{font-style:italic;color:var(--brand-ink)}
.hj-gobtn{background:var(--brand-btn);color:#fff;border-radius:100px;padding:.6rem 1.5rem;
  font-size:.8rem;font-weight:700;transition:background .2s var(--ease),transform .2s var(--ease)}
.hjp-go:hover .hj-gobtn{background:var(--brand-deep);transform:translateY(-1px)}
.hj-gofine{font-size:.58rem;font-weight:700;letter-spacing:.06em;color:var(--faint)}
.hdev.hj-c4 .hj-go>*{opacity:0;transform:translateY(8px)}
.hdev.hj-c4 .hj-go>:nth-child(1){animation:hjIn .55s var(--ease) .3s forwards}
.hdev.hj-c4 .hj-go>:nth-child(2){animation:hjIn .55s var(--ease) .55s forwards}
.hdev.hj-c4 .hj-go>:nth-child(3){animation:hjIn .55s var(--ease) .75s forwards}

/* HUD pins — dot → draw-on line → pill (ink/neutral; orange stays with the payment) */
.hdev .hjpin{position:absolute;z-index:5;display:flex;align-items:center;visibility:hidden;
  translate:0 -50%;pointer-events:none}
.hdev .hjpin.l{flex-direction:row-reverse;translate:-100% -50%}
.hjpin .pd{width:7px;height:7px;border-radius:50%;background:var(--ink);flex:0 0 auto;opacity:0}
.hjpin .ln{height:1.5px;width:var(--lw,36px);background:var(--ink);opacity:.5;transform:scaleX(0);flex:0 0 auto}
.hjpin.r .ln{transform-origin:left}
.hjpin.l .ln{transform-origin:right}
.hjpin .pl{border:1px solid var(--line);background:var(--surface);border-radius:100px;padding:.26rem .6rem;
  font-size:.62rem;font-weight:700;letter-spacing:.04em;white-space:nowrap;color:var(--ink);
  box-shadow:0 6px 16px -8px rgba(26,22,18,.3);opacity:0}
@keyframes hjPop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes hjLine{to{transform:scaleX(1)}}
.hdev.hj-c0 .hjpin[data-ch="0"],.hdev.hj-c1 .hjpin[data-ch="1"],
.hdev.hj-c2 .hjpin[data-ch="2"],.hdev.hj-c3 .hjpin[data-ch="3"]{visibility:visible}
.hdev.hj-c0 .hjpin[data-ch="0"] .pd,.hdev.hj-c1 .hjpin[data-ch="1"] .pd,
.hdev.hj-c2 .hjpin[data-ch="2"] .pd,.hdev.hj-c3 .hjpin[data-ch="3"] .pd{animation:hjPop .3s var(--ease) .7s forwards}
.hdev.hj-c0 .hjpin[data-ch="0"] .ln,.hdev.hj-c1 .hjpin[data-ch="1"] .ln,
.hdev.hj-c2 .hjpin[data-ch="2"] .ln,.hdev.hj-c3 .hjpin[data-ch="3"] .ln{animation:hjLine .4s var(--ease) .85s forwards}
.hdev.hj-c0 .hjpin[data-ch="0"] .pl,.hdev.hj-c1 .hjpin[data-ch="1"] .pl,
.hdev.hj-c2 .hjpin[data-ch="2"] .pl,.hdev.hj-c3 .hjpin[data-ch="3"] .pl{animation:hjFadeIn .4s var(--ease) 1.1s forwards}

/* reduced motion: the driver never runs, but belt-and-braces */
@media(prefers-reduced-motion:reduce){
  .hjp,.hjcta-base,.hdev .hjpin{display:none !important}
  .hj-rail,.hj-narr{display:none !important}
}