/* ==========================================================================
   Next Payment — by Hashcode Next Fintech
   Light, premium, infrastructure-grade. Inter + JetBrains Mono.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* type scale */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  /* One display scale for the whole site: the home page's h1 is
     clamp(2.6rem, 6vw, 5.25rem), and the marketing page no longer shouts at
     108px where the home page speaks at 79px. */
  --text-hero: clamp(2.6rem, 1rem + 5.6vw, 5.25rem);

  /* spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  /* light palette */
  --bg:#f6f7f9;
  --bg-2:#f0f2f5;
  --surface:#ffffff;
  --surface-2:#fbfcfd;
  --text:#0b0d12;
  --muted:#3c4350;
  /* #faint carries captions and table headings at 11–12px. It used to be
     #6c7585: 4.33:1 on the canvas and 4.14:1 on --bg-2, under the 4.5:1 floor
     for normal text. This is 5.33:1 on the canvas and 5.09:1 on --bg-2. */
  --faint:#5f6774;
  --accent:#0f9d63;
  --accent-soft:rgba(15,157,99,.10);
  /* Both are drawn on their own soft tint, which is a touch darker than the
     canvas: --accent-ink on --accent-soft measured 4.44:1 and --blue on
     --blue-soft 4.28:1, under the 4.5:1 floor for the 11.5px pill labels.
     Darkened to 4.81:1 and 5.55:1 on those tints; the hue is unchanged. */
  --accent-ink:#0a7549;
  --blue:#1d4ed8;
  --blue-soft:rgba(37,99,235,.09);
  --line:#e6e9ee;
  --line-2:#eef1f5;
  --code-bg:#fbfcfd;

  --r-sm:10px; --r-md:14px; --r-lg:16px; --r-xl:22px;
  --shadow-s:0 1px 2px rgba(11,13,18,.04), 0 1px 12px rgba(11,13,18,.03);
  --shadow-m:0 2px 6px rgba(11,13,18,.05), 0 18px 44px -22px rgba(11,13,18,.16);
  --shadow-l:0 3px 10px rgba(11,13,18,.05), 0 40px 80px -40px rgba(11,13,18,.24);

  --shell:1200px;
  --header-h:68px;
  --img-filter:none;

  --font-display:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"]{
  --bg:#0a0c11;
  --bg-2:#0d1016;
  --surface:#12151c;
  --surface-2:#151922;
  --text:#f2f4f7;
  --muted:#a2abba;
  /* Dark theme. #6d7787 measured 3.61–4.32:1 against the dark surfaces it is
     drawn on (#1b2029 to #0a0c11), under 4.5:1. This is 4.81:1 at the worst
     of them and still clearly dimmer than --muted #a2abba. */
  --faint:#828c9c;
  --accent:#2ec38a;
  --accent-soft:rgba(46,195,138,.12);
  --accent-ink:#7ee2b8;
  --blue:#6b96f8;
  --blue-soft:rgba(107,150,248,.12);
  --line:#232936;
  --line-2:#1b2029;
  --code-bg:#0e1219;
  --shadow-s:0 1px 2px rgba(0,0,0,.4);
  --shadow-m:0 2px 8px rgba(0,0,0,.45), 0 24px 60px -30px rgba(0,0,0,.7);
  --shadow-l:0 3px 12px rgba(0,0,0,.5), 0 48px 96px -44px rgba(0,0,0,.8);
  --img-filter:invert(1) hue-rotate(178deg) saturate(.85) brightness(.92) contrast(1.05);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px)}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--text-base); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background-color .35s var(--ease), color .35s var(--ease);
}
img,svg,picture{display:block; max-width:100%}
[hidden]{display:none !important}
h1,h2,h3,p,ol,ul,dl,dd,figure,pre{margin:0}
ol,ul{padding:0; list-style:none}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
::selection{background:var(--accent-soft); color:var(--text)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}

.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--space-5)}
@media(min-width:768px){.shell{padding-inline:var(--space-8)}}
@media(min-width:1200px){.shell{padding-inline:var(--space-10)}}

.skip{position:absolute; left:-9999px; top:0; z-index:99; padding:.7rem 1rem; background:var(--surface); border:1px solid var(--line)}
.skip:focus{left:12px; top:12px}

.mono{font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.02em}
.dim{color:var(--faint)}

/* ---------- Type components ---------- */
.h1-alt,.h2,.h-lead,.hero-title{
  font-family:var(--font-display); font-weight:500; letter-spacing:-.022em;
  line-height:1.03; font-variation-settings:"opsz" 96, "SOFT" 0, "WONK" 0;
  text-wrap:balance;
}
.hero-title{font-size:var(--text-hero)}
.h1-alt{font-size:clamp(2.4rem,1rem + 5.4vw,4.6rem); line-height:1.05}
.h2{font-size:var(--text-2xl); line-height:1.08}
.h-lead{font-size:clamp(1.7rem,1rem + 2.4vw,2.75rem); line-height:1.12}
/* Decorative italic accent: short heading phrases only, never body subtitles.
   The continuation is muted ink rather than brand green, which is how the home
   page sets the same pattern — the green stays on the mark, the chips and the
   small accents, so the two surfaces read as one company. */
em{font-style:italic; font-weight:500; color:var(--muted)}
.h1-alt em,.h2 em,.h-lead em,.hero-title em{padding-right:.08em}
[data-theme="dark"] em{color:var(--muted)}

.eyebrow{color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.14em}
.lede{color:var(--muted); font-weight:500; letter-spacing:-.004em; font-size:var(--text-lg); line-height:1.55; max-width:56ch}
.lede.narrow{max-width:46ch}
.fine{margin-top:var(--space-6); color:var(--muted); font-weight:500; letter-spacing:-.003em; font-size:var(--text-xs); line-height:1.6}

.section{padding-block:clamp(4.5rem,10vw,9rem)}
.section-head{margin-bottom:clamp(2.5rem,5vw,4.5rem); display:grid; gap:var(--space-4); scroll-margin-top:calc(var(--header-h) + 16px)}
.section-head .h2{max-width:20ch}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  padding:.8rem 1.25rem; border-radius:999px; font-size:var(--text-sm);
  font-weight:500; border:1px solid transparent; white-space:nowrap;
  transition:transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.btn-sm{padding:.6rem 1rem}
/* Ink primary, matching the home page: one accent (green) is reserved for the
   mark, the active step and links — not for every button. */
.btn-primary{background:var(--text); color:var(--bg); box-shadow:0 1px 2px rgba(11,13,18,.12), 0 10px 24px -14px rgba(11,13,18,.45)}
[data-theme="dark"] .btn-primary{color:#06180f; background:#f2f4f7}
.btn-primary:hover{transform:translateY(-1px); background:var(--text); color:var(--bg); opacity:.88}
.btn-ghost{border-color:var(--line); background:var(--surface); color:var(--text)}
.btn-ghost:hover{border-color:var(--text); transform:translateY(-1px)}
.btn svg{transition:transform .2s var(--ease)}
.btn:hover svg{transform:translateX(2px)}

.pill{
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .75rem;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
  color:var(--muted); box-shadow:var(--shadow-s);
}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--line)}
.header-inner{min-height:var(--header-h); display:flex; align-items:center; gap:var(--space-6)}
.brand{display:inline-flex; align-items:center; gap:.65rem; color:var(--text)}
.brand .mark{flex:none; color:var(--text)}
.brand-logo{flex:none; width:auto; height:22px; object-fit:contain}
.logo-dark{display:none}
[data-theme="dark"] .logo-light{display:none}
[data-theme="dark"] .logo-dark{display:block}
.brand-rule{flex:none; width:1px; height:22px; background:var(--line)}
.footer-brand .brand-logo{height:24px}
@media(max-width:560px){
  .brand{gap:.45rem}
  .brand-logo{height:17px}
  .brand-name{font-size:.9rem; white-space:nowrap}
  .brand-by{display:none}
  .footer-brand .brand-by{display:block}
}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-name{font-family:var(--font-display); font-weight:600; font-size:1.06rem; letter-spacing:-.02em}
.brand-by{font-family:var(--font-mono); font-size:.625rem; color:var(--faint); letter-spacing:.03em}

/* ---------- H-mark logo ---------- */
.h-mark{flex:none; color:var(--text)}
.h-mark-dot{fill:var(--blue)}
[data-theme="dark"] .h-mark-bg{fill:var(--text)}

/* ---------- Language switch ---------- */
.lang-switch{display:flex; align-items:center; gap:.4rem; font-size:.7rem; letter-spacing:.04em; color:var(--faint); white-space:nowrap; flex-shrink:0}
.lang-switch a{color:var(--muted); text-decoration:none; padding:.15rem .1rem}
.lang-switch a[aria-current="true"]{color:var(--text); font-weight:600}
.lang-switch a:hover{color:var(--accent-ink)}
.lang-switch span{color:var(--line); opacity:.9}
.footer-brand .lang-switch{margin-top:var(--space-3)}
@media(max-width:900px){.header-actions .lang-switch{display:none}}
.mobile-nav .lang-switch{margin-block:var(--space-2) 0; padding-top:var(--space-2); border-top:1px solid var(--line-2)}
.nav{display:none; gap:var(--space-6); margin-inline:auto; font-size:var(--text-sm); color:var(--muted)}
.nav a{position:relative; padding-block:.3rem}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--text); transition:right .28s var(--ease)}
.nav a:hover{color:var(--text)}
.nav a:hover::after{right:0}
/* The header row (brand + 11 nav links + actions) measures ~1303px, so the desktop
   nav only fits the viewport from ~1485px up. Below 1536px it collapses into the
   menu button (measured: at 1024/1440 the row used to run 310px/22px past the shell
   and scroll the document sideways). */
.header-actions{display:flex; align-items:center; gap:.6rem; margin-left:auto}
@media(min-width:1536px){
  .nav{display:flex}
  .header-actions{margin-left:0}
}
.theme-toggle{
  width:36px; height:36px; border:1px solid var(--line); border-radius:999px;
  display:grid; place-items:center; color:var(--muted); background:var(--surface);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.theme-toggle:hover{color:var(--text); border-color:var(--text)}
.theme-toggle .i-moon{display:none}
[data-theme="dark"] .theme-toggle .i-moon{display:block}
[data-theme="dark"] .theme-toggle .i-sun{display:none}
/* Below 560px the header row (brand + theme + log in + menu) needs 411px, so the
   two header calls-to-action move into the menu instead — the menu carries both. */
.header-actions .btn-primary,
.header-actions .btn-ghost{display:none}
@media(min-width:560px){
  .header-actions .btn-primary,
  .header-actions .btn-ghost{display:inline-flex}
}
.menu-btn{position:relative; width:36px; height:36px; border:1px solid var(--line); border-radius:999px; background:var(--surface)}
.menu-btn span{
  position:absolute; left:50%; top:50%; width:15px; height:1.5px; margin:-.75px 0 0 -7.5px;
  background:var(--text); border-radius:2px; transition:transform .28s var(--ease);
}
.menu-btn span:first-child{transform:translateY(-3.5px)}
.menu-btn span:last-child{transform:translateY(3.5px)}
.menu-btn[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}
@media(min-width:1536px){.menu-btn{display:none}.mobile-nav{display:none !important}}
.mobile-nav{
  display:grid; gap:.25rem;
  position:absolute; left:0; right:0; top:100%; padding:var(--space-4) var(--space-5) var(--space-6);
  border-top:1px solid var(--line); background:var(--surface);
}
.mobile-nav a{padding:.7rem 0; color:var(--muted); border-bottom:1px solid var(--line-2)}
.mobile-nav > a:last-child{border:0; margin-top:var(--space-4); color:#fff}
[data-theme="dark"] .mobile-nav > a:last-child{color:#06180f}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:clip; isolation:isolate; padding-block:clamp(3.5rem,9vw,7rem) clamp(4rem,9vw,7.5rem); min-height:min(92svh,900px); display:flex; align-items:center}
/* ---------- Live 3D scene layer (scroll-morphed wireframe) ---------- */
.scene-layer{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:1; transition:opacity .6s var(--ease);
  -webkit-mask-image:radial-gradient(96% 100% at 80% 45%, #000 20%, rgba(0,0,0,.48) 52%, transparent 78%);
  mask-image:radial-gradient(96% 100% at 80% 45%, #000 20%, rgba(0,0,0,.48) 52%, transparent 78%);
}
.scene-layer canvas{display:block; width:100%; height:100%}
.scene-poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:var(--img-filter); opacity:.9; transition:opacity .8s var(--ease);
}
[data-theme="dark"] .scene-poster{opacity:.45; mix-blend-mode:screen}
.scene-layer.is-live .scene-poster{opacity:0}
.scene-layer::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, color-mix(in srgb,var(--bg) 90%, transparent) 2%, color-mix(in srgb,var(--bg) 42%, transparent) 32%, transparent 58%);
  transition:opacity .8s var(--ease);
}
/* deep phase: the morph has moved to the optical axis, so the vignette
   re-centres around it instead of hugging the right edge */
.scene-layer.is-deep{
  -webkit-mask-image:radial-gradient(122% 112% at 57% 50%, #000 34%, rgba(0,0,0,.62) 68%, transparent 94%);
  mask-image:radial-gradient(122% 112% at 57% 50%, #000 34%, rgba(0,0,0,.62) 68%, transparent 94%);
  transition:opacity .6s var(--ease), -webkit-mask-image .9s var(--ease), mask-image .9s var(--ease);
}
.scene-layer.is-deep::after{opacity:.35}
@media(max-width:899px){
  .scene-layer{
    -webkit-mask-image:radial-gradient(130% 90% at 62% 32%, #000 24%, rgba(0,0,0,.5) 58%, transparent 86%);
    mask-image:radial-gradient(130% 90% at 62% 32%, #000 24%, rgba(0,0,0,.5) 58%, transparent 86%);
  }
  .scene-layer::after{background:linear-gradient(to bottom, color-mix(in srgb,var(--bg) 55%, transparent) 0%, color-mix(in srgb,var(--bg) 30%, transparent) 40%, color-mix(in srgb,var(--bg) 82%, transparent) 100%)}
  .scene-layer.is-deep{
    -webkit-mask-image:radial-gradient(142% 106% at 52% 47%, #000 36%, rgba(0,0,0,.6) 72%, transparent 96%);
    mask-image:radial-gradient(142% 106% at 52% 47%, #000 36%, rgba(0,0,0,.6) 72%, transparent 96%);
  }
}

.hero-inner{position:relative; display:grid; justify-items:start; gap:var(--space-6); max-width:min(100%, 62rem)}
.hero-title{margin-top:var(--space-2); max-width:19ch}
.hero-sub{color:var(--muted); font-weight:500; letter-spacing:-.004em; font-size:var(--text-lg); max-width:44ch; line-height:1.55}
.hero-cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:var(--space-2)}
.hero-stats{
  width:100%; display:grid; grid-template-columns:1fr; gap:var(--space-5);
  margin-top:clamp(2rem,5vw,3.5rem); padding-top:var(--space-6);
  border-top:1px solid var(--line); max-width:46rem;
}
@media(min-width:640px){.hero-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hero-stats dt{color:var(--faint); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.35rem}
.hero-stats dd{font-size:var(--text-sm); color:var(--text); font-weight:500}

/* ---------- Trust strip ---------- */
.strip{border-block:1px solid var(--line); background:color-mix(in srgb, var(--surface) 76%, transparent); backdrop-filter:saturate(150%) blur(10px); overflow:hidden; padding-block:.95rem}
.strip-track{display:flex; width:max-content; animation:strip 42s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip-set{display:flex; align-items:center; gap:var(--space-6); padding-right:var(--space-6); white-space:nowrap}
.strip-set span{font-size:var(--text-sm); color:var(--muted); letter-spacing:.01em}
.strip-set i{color:var(--accent); font-style:normal}
@keyframes strip{to{transform:translateX(-50%)}}

/* ---------- Intro ---------- */
.intro-grid{display:grid; gap:var(--space-8)}
@media(min-width:900px){.intro-grid{grid-template-columns:minmax(0,10rem) minmax(0,1fr); gap:var(--space-16)}}
.col-label .eyebrow{position:sticky; top:calc(var(--header-h) + 24px)}
.intro-body{display:grid; gap:var(--space-6)}
.intro-points{display:grid; gap:var(--space-6); margin-top:var(--space-6)}
@media(min-width:760px){.intro-points{grid-template-columns:repeat(3,1fr); gap:var(--space-8)}}
.intro-points h3{font-size:var(--text-base); font-weight:600; margin-bottom:.4rem}
.intro-points > div{padding-top:var(--space-4); border-top:1px solid var(--line)}
.intro-points p{color:var(--muted); font-size:var(--text-sm)}

/* ---------- Capabilities: traditional payments grid ---------- */
.cap-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-bottom:var(--space-12)}
@media(min-width:640px){.cap-grid{grid-template-columns:repeat(4,1fr)}}
.cap-tile{background:var(--surface); padding:var(--space-5); display:flex; flex-direction:column; gap:.4rem}
.cap-tile-k{color:var(--text); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase}
.cap-tile p:not(.cap-tile-k){color:var(--muted); font-size:var(--text-sm); line-height:1.4}
.cap-tile .badge{margin-left:.3rem}
.cap-list-lede{color:var(--faint); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--space-2)}

/* ---------- Capabilities ---------- */
.cap-list{border-top:1px solid var(--line)}
.cap{
  display:grid; grid-template-columns:auto 1fr; gap:.4rem var(--space-5);
  padding-block:var(--space-6); border-bottom:1px solid var(--line);
  transition:background-color .4s var(--ease), padding .4s var(--ease);
  position:relative;
}
.cap::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:top;
  transition:transform .45s var(--ease);
}
.cap-num{font-size:.8125rem; color:var(--faint); padding-top:.45rem; transition:color .3s var(--ease)}
.cap-main h3{font-family:var(--font-display); font-weight:500; font-size:clamp(1.3rem,.9rem + 1.4vw,2rem); line-height:1.15; letter-spacing:-.02em}
.cap-main p{color:var(--muted); font-size:var(--text-sm); max-width:58ch; margin-top:.45rem; opacity:.62; transition:opacity .4s var(--ease)}
.cap-tag{
  grid-column:2; justify-self:start; margin-top:.75rem; padding:.3rem .6rem;
  border:1px solid var(--line); border-radius:8px; background:var(--surface-2);
  color:var(--muted); font-size:.6875rem;
}
@media(min-width:1000px){
  .cap{grid-template-columns:5.5rem minmax(0,1fr) auto; align-items:start; gap:var(--space-8)}
  .cap-tag{grid-column:3; justify-self:end; margin-top:.5rem}
  .cap-num{font-size:.9375rem}
}
.cap.is-active{background:var(--surface); padding-inline:var(--space-5)}
.cap.is-active::before{transform:scaleY(1)}
.cap.is-active .cap-num{color:var(--accent)}
.cap.is-active .cap-main p{opacity:1}
.cap.is-active .cap-tag{border-color:color-mix(in srgb,var(--accent) 35%, var(--line)); color:var(--accent-ink); background:var(--accent-soft)}

/* ---------- Pinned agentic flow ---------- */
.flow{background:var(--bg-2); border-block:1px solid var(--line)}
.flow-pin{padding-block:clamp(4rem,8vw,6.5rem); display:flex; align-items:center; min-height:100svh}
.flow-grid{display:grid; gap:var(--space-10); align-items:center; width:100%}
@media(min-width:1000px){.flow-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--space-16)}}
.flow-copy{display:grid; gap:var(--space-4)}
.flow-copy .lede{font-size:var(--text-base)}
.flow-steps{margin-top:var(--space-4); display:grid; gap:.15rem}
.fstep{
  display:grid; grid-template-columns:2.2rem 1fr; gap:var(--space-3);
  padding:.85rem .9rem; border-radius:var(--r-md); border:1px solid transparent;
  transition:background-color .35s var(--ease), border-color .35s var(--ease), opacity .35s var(--ease);
  opacity:.5;
}
.fstep span.mono{color:var(--faint); padding-top:.2rem}
.fstep h3{font-size:var(--text-sm); font-weight:600}
.fstep p{font-size:var(--text-sm); color:var(--muted); margin-top:.15rem; display:none}
.fstep.is-active{opacity:1; background:var(--surface); border-color:var(--line); box-shadow:var(--shadow-s)}
.fstep.is-active span.mono{color:var(--accent)}
.fstep.is-active p{display:block}
.fstep.is-done{opacity:.8}

.flow-visual{position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-m)}
.flow-visual img{width:100%; aspect-ratio:3/2; object-fit:cover; filter:var(--img-filter)}
[data-theme="dark"] .flow-visual img{opacity:.62}
.flow-svg{position:absolute; inset:0; width:100%; height:100%}
.flow-path{fill:none; stroke:var(--text); stroke-width:1.2; opacity:.14}
.flow-path-lit{fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; opacity:.9}
.fnode{fill:var(--surface); stroke:var(--muted); stroke-width:1.4; opacity:.6; transition:all .3s var(--ease)}
.fnode.on{fill:var(--accent); stroke:var(--accent); opacity:1; filter:drop-shadow(0 0 6px rgba(15,157,99,.55))}
.flow-dot{fill:var(--accent); filter:drop-shadow(0 0 8px rgba(15,157,99,.75))}
.flow-visual figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:.7rem 1rem;
  background:color-mix(in srgb, var(--surface) 85%, transparent);
  border-top:1px solid var(--line); color:var(--muted); backdrop-filter:blur(8px);
  font-size:.6875rem;
}

/* ---------- Developers ---------- */
.dev-grid{display:grid; gap:var(--space-6)}
@media(min-width:1000px){.dev-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:var(--space-8)}}
.code-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-m)}
.code-bar{display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); padding:.7rem 1rem; border-bottom:1px solid var(--line); background:var(--surface-2); color:var(--muted)}
.code{
  margin:0; padding:var(--space-5) var(--space-4); overflow-x:auto; background:var(--code-bg);
  font-size:.75rem; line-height:1.75; color:var(--text); tab-size:2;
}
@media(min-width:520px){.code{padding:var(--space-6)}}
.code .c-k{color:var(--blue)}
.code .c-s{color:var(--accent-ink)}
.code .c-c{color:var(--faint); font-style:italic}
.code .c-f{color:var(--text); font-weight:500}
.code .c-n{color:#b4530a}
[data-theme="dark"] .code .c-n{color:#e8a15c}
.code .c-v,.code .c-p{color:var(--muted)}

.ep-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--space-6); box-shadow:var(--shadow-s); display:grid; gap:var(--space-4); align-content:start}
.ep-title{font-size:var(--text-base); font-weight:600}
.ep-list{display:grid; gap:.1rem}
.ep-list li{display:flex; align-items:center; gap:.6rem; padding:.42rem 0; border-bottom:1px dashed var(--line-2); font-size:.6875rem; color:var(--muted)}
.ep-list li:last-child{border:0}
.verb{flex:none; width:2.6rem; font-size:.5625rem; letter-spacing:.06em; padding:.15rem .3rem; border-radius:5px; text-align:center; font-weight:500}
.verb.get{color:var(--blue); background:var(--blue-soft)}
.verb.post{color:var(--accent-ink); background:var(--accent-soft)}
.ep-note{font-size:var(--text-xs); color:var(--faint)}
.ep-card .btn{justify-self:start}

/* ---------- Full-bleed divider ---------- */
.bleed{position:relative; isolation:isolate; overflow:hidden; min-height:min(60svh,520px); display:flex; align-items:flex-end; padding-block:clamp(3rem,8vw,6rem)}
.bleed img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; filter:var(--img-filter)}
[data-theme="dark"] .bleed img{opacity:.5}
.bleed::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb,var(--bg) 40%, transparent) 16%, transparent 34%),
             linear-gradient(to top, var(--bg) 3%, color-mix(in srgb,var(--bg) 50%, transparent) 42%, transparent 78%);
}
.bleed-copy{display:grid; gap:var(--space-3)}
.bleed-line{font-family:var(--font-display); font-weight:500; font-size:clamp(1.4rem,1rem + 2vw,2.4rem); line-height:1.2; letter-spacing:-.02em; max-width:34ch; text-wrap:balance}

/* ---------- Console / dashboard ---------- */
.dash{
  display:grid; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-l);
}
@media(min-width:900px){.dash{grid-template-columns:15rem minmax(0,1fr)}}
.dash-side{padding:var(--space-5); border-bottom:1px solid var(--line); background:var(--surface-2); display:grid; gap:var(--space-5); align-content:start}
@media(min-width:900px){.dash-side{border-bottom:0; border-right:1px solid var(--line)}}
.dash-brand{display:flex; align-items:center; gap:.5rem; color:var(--text)}
.dash-nav{display:flex; flex-wrap:wrap; gap:.35rem}
@media(min-width:900px){.dash-nav{display:grid}}
.dash-nav span{padding:.42rem .6rem; border-radius:8px; color:var(--muted)}
.dash-nav .on{background:var(--accent-soft); color:var(--accent-ink); font-weight:500}
.dash-agent{padding-top:var(--space-4); border-top:1px solid var(--line); display:grid; gap:.2rem}
.agent-name{font-family:var(--font-mono); font-size:var(--text-sm); font-weight:500}
.agent-scope{color:var(--faint)}

.dash-main{padding:var(--space-5); display:grid; gap:var(--space-5)}
@media(min-width:900px){.dash-main{padding:var(--space-8)}}
.dash-top{display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:space-between; align-items:flex-end}
.dash-total{font-family:var(--font-display); font-size:clamp(1.9rem,1.2rem + 2vw,2.8rem); font-weight:500; letter-spacing:-.03em; line-height:1.1}
.dash-total span{color:var(--faint)}
.dash-chips{display:flex; gap:.4rem; flex-wrap:wrap}
.chip{padding:.3rem .6rem; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--surface-2)}
.chip.ok{color:var(--accent-ink); border-color:color-mix(in srgb,var(--accent) 30%, var(--line)); background:var(--accent-soft)}

.bal-row{display:grid; gap:var(--space-3)}
@media(min-width:640px){.bal-row{grid-template-columns:repeat(3,1fr)}}
.bal{padding:var(--space-4); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2); display:grid; gap:.3rem}
.bal-v{font-family:var(--font-mono); font-size:var(--text-sm); font-weight:500}
.spark{height:32px; color:var(--accent); opacity:.7}
.spark svg{width:100%; height:100%}
.bal:nth-child(2) .spark{color:var(--blue)}

.trace{border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.trace-head{display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); padding:.8rem 1rem; border-bottom:1px solid var(--line); background:var(--surface-2)}
.trace-title{font-size:var(--text-sm); font-weight:500}
.trace-title .mono{font-weight:400}
.trace-live{display:inline-flex; align-items:center; gap:.4rem; color:var(--accent-ink)}
.trace-live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); animation:blip 1.6s var(--ease) infinite}
@keyframes blip{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.35; transform:scale(.7)}}
.trace-steps{display:grid}
.trace-steps li{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.75rem;
  padding:.7rem 1rem; border-bottom:1px solid var(--line-2); font-size:var(--text-sm);
}
.trace-steps li:last-child{border:0}
.trace-steps .dot{width:8px; height:8px; border-radius:50%; background:var(--line); box-shadow:0 0 0 3px transparent; transition:all .3s var(--ease)}
.t-name{color:var(--muted)}
.t-state{color:var(--faint); text-transform:lowercase}
li[data-tstep].done .dot{background:var(--accent)}
li[data-tstep].done .t-name{color:var(--text)}
li[data-tstep].done .t-state{color:var(--accent-ink)}
li[data-tstep].running .dot{background:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); animation:blip 1.3s var(--ease) infinite}
li[data-tstep].running .t-name{color:var(--text); font-weight:500}
li[data-tstep].running .t-state{color:var(--blue)}

/* ---------- Business + partner app ---------- */
.partner-grid{display:grid; gap:var(--space-5); margin-bottom:var(--space-8)}
@media(min-width:760px){.partner-grid{grid-template-columns:repeat(2,1fr)}}
.partner-card{padding:var(--space-6); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); display:grid; gap:.5rem; align-content:start}
.partner-k{color:var(--faint); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase}
.partner-card h3{font-family:var(--font-display); font-weight:500; font-size:var(--text-lg); letter-spacing:-.01em}
.partner-card p{color:var(--muted); font-size:var(--text-sm)}
.partner-card ul{display:grid; gap:.4rem; margin-top:.4rem; padding-top:var(--space-3); border-top:1px solid var(--line-2)}
.partner-card li{position:relative; padding-left:1.1rem; font-size:var(--text-sm); color:var(--muted)}
.partner-card li::before{content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.75}
.partner-callout{
  padding:var(--space-6); border:1px dashed color-mix(in srgb,var(--accent) 40%, var(--line));
  border-radius:var(--r-lg); background:var(--accent-soft); display:grid; gap:.5rem;
}
.partner-callout-lede{font-size:var(--text-base); color:var(--text); max-width:64ch}
.partner-callout-tag{color:var(--accent-ink); font-size:.75rem; letter-spacing:.04em}

/* ---------- Pricing ---------- */
.plans{display:grid; gap:var(--space-4)}
@media(min-width:680px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){
  .plans{grid-template-columns:repeat(4,1fr)}
  .plan-price{min-height:2.6rem; display:flex; align-items:flex-end; gap:.25rem}
  .plan-for{min-height:3.1em}
}
.plan-specs{display:grid; gap:.4rem; padding-block:var(--space-3); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.plan-specs > div{display:flex; justify-content:space-between; gap:.6rem; font-size:.7rem}
.plan-specs dt{color:var(--faint)}
.plan-specs dd{color:var(--text); text-align:right}
@media(max-width:680px){
  .plans-v2{overflow-x:visible}
  .plan{overflow-x:auto}
}

/* Free entry strip (sits above the paid plan grid) */
.plan-free{border:1px dashed var(--line); border-radius:var(--r-md); padding:var(--space-4) var(--space-5); margin-bottom:var(--space-5); background:color-mix(in srgb,var(--surface-2) 60%, transparent)}
.plan-free-row{display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; justify-content:space-between}
.plan-free-row > div{display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap}
.plan-free-desc{color:var(--muted); font-size:var(--text-sm); flex:1 1 18rem; min-width:14rem; margin:0}
@media(max-width:680px){.plan-free-row{flex-direction:column; align-items:flex-start; gap:var(--space-3)}.plan-free-desc{flex:0 0 auto}}
.plan{
  padding:var(--space-6); border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); display:grid; gap:var(--space-3); align-content:start;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.plan:hover{border-color:color-mix(in srgb,var(--text) 22%, var(--line)); transform:translateY(-2px)}
.plan.is-feature{border-color:color-mix(in srgb,var(--accent) 45%, var(--line)); box-shadow:var(--shadow-m)}
.plan-name{color:var(--muted); display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; text-transform:uppercase; letter-spacing:.12em}
.tag{padding:.15rem .45rem; border-radius:6px; background:var(--accent-soft); color:var(--accent-ink); text-transform:none; letter-spacing:.02em; font-size:.5625rem}
.plan-price{font-family:var(--font-display); font-size:clamp(1.9rem,1.2rem + 1.6vw,2.5rem); font-weight:500; letter-spacing:-.03em; line-height:1}
.plan-price span{font-family:var(--font-body); font-size:var(--text-sm); color:var(--faint); font-weight:400; letter-spacing:0}
.plan-price-sm{font-size:var(--text-lg); line-height:1.2}
.plan-for{color:var(--muted); font-size:var(--text-sm)}
.plan ul{display:grid; gap:.5rem; padding-top:var(--space-3); border-top:1px solid var(--line-2); margin-top:var(--space-2)}
.plan li{position:relative; padding-left:1.1rem; font-size:var(--text-sm); color:var(--muted)}
.plan li::before{content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.75}
.plan .btn{justify-self:start; margin-top:var(--space-3)}

/* ---------- Roadmap ---------- */
.rail-wrap{overflow-x:auto; padding-bottom:var(--space-4); scrollbar-width:thin}
.rail{display:grid; gap:var(--space-4); position:relative}
@media(min-width:900px){
  .rail{grid-auto-flow:column; grid-auto-columns:minmax(14rem,1fr); gap:var(--space-4); min-width:min-content}
}
@media(min-width:1200px){.rail{grid-auto-columns:minmax(0,1fr); min-width:0}}
.stage{
  position:relative; padding:var(--space-5) var(--space-5) var(--space-6);
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  display:grid; gap:.5rem; align-content:start;
}
.stage::before{
  content:""; position:absolute; top:-1px; left:var(--space-5); right:var(--space-5);
  height:2px; background:var(--line);
}
.stage.is-now::before{background:var(--accent)}
.stage-k{color:var(--faint); display:flex; align-items:center; gap:.5rem; text-transform:uppercase; letter-spacing:.1em}
.stage h3{font-family:var(--font-display); font-weight:500; font-size:var(--text-lg); letter-spacing:-.02em}
.stage p{font-size:var(--text-sm); color:var(--muted)}
.badge{
  font-family:var(--font-mono); font-size:.5625rem; font-weight:500; letter-spacing:.05em;
  padding:.15rem .4rem; border-radius:5px; text-transform:uppercase; white-space:nowrap;
}
.badge.now{background:var(--accent-soft); color:var(--accent-ink)}
.badge.soon{background:var(--blue-soft); color:var(--blue)}
.badge.prog{background:color-mix(in srgb, #d97706 14%, transparent); color:#a35c05}
.badge.plan{background:color-mix(in srgb, var(--muted) 12%, transparent); color:var(--muted)}
.stage-status{display:grid; gap:.4rem; margin-top:.35rem; padding-top:.6rem; border-top:1px solid var(--line-2)}
.stage-status li{font-size:var(--text-xs); color:var(--muted); display:flex; flex-wrap:wrap; align-items:center; gap:.35rem}
[data-theme="dark"] .badge.prog{color:#f0b357}

/* ---------- Closing ---------- */
.close{position:relative; isolation:isolate; overflow:hidden; padding-block:clamp(5rem,12vw,9rem); display:flex; align-items:center; min-height:min(80svh,760px)}
.close img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; filter:var(--img-filter); transform:scaleY(-1)}
[data-theme="dark"] .close img{opacity:.45}
.close::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(96deg, var(--bg) 4%, color-mix(in srgb,var(--bg) 82%, transparent) 40%, color-mix(in srgb,var(--bg) 30%, transparent) 66%, transparent 88%),
             linear-gradient(to bottom, color-mix(in srgb,var(--bg) 55%, transparent), transparent 30%, color-mix(in srgb,var(--bg) 65%, transparent));
}
.close-inner{display:grid; gap:var(--space-5)}
.close-inner .h1-alt{max-width:18ch}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line); background:var(--surface); padding-top:clamp(3rem,6vw,4.5rem)}
.footer-grid{display:grid; gap:var(--space-10)}
@media(min-width:900px){.footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:var(--space-16)}}
.footer-brand{display:grid; gap:var(--space-4); align-content:start}
.footer-line{color:var(--muted); font-size:var(--text-sm); max-width:30ch}
/* The brand row above the footer columns. Every page now carries the same
   footer, and half of them load only this stylesheet, so the rules live here
   rather than only in market.css. */
.footer-top{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-8)}
.footer-top .brand{display:inline-flex; align-items:center; gap:.75rem}
.footer-brand-link{color:inherit; text-decoration:none}
.footer-brand-link:hover .brand-name{color:var(--accent-ink)}
.footer-cols{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-6)}
@media(min-width:620px){.footer-cols{grid-template-columns:repeat(4,1fr)}}
.footer-cols div{display:grid; gap:.55rem; align-content:start}
.col-h{color:var(--faint); text-transform:uppercase; letter-spacing:.12em; margin-bottom:.2rem}
.footer-cols a{font-size:var(--text-sm); color:var(--muted); transition:color .2s var(--ease)}
.footer-cols a:hover{color:var(--text)}
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-6); justify-content:space-between;
  margin-top:clamp(2.5rem,5vw,4rem); padding-block:var(--space-5);
  border-top:1px solid var(--line-2); color:var(--muted);
}

/* ---------- Reveal ---------- */
[data-rise]{opacity:0; transform:translateY(18px)}
.no-motion [data-rise], [data-rise].is-in{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  [data-rise]{opacity:1 !important; transform:none !important}
  .strip-track{animation:none}
  .fstep{opacity:1}
  .fstep p{display:block}
}

/* ---------- Kinetic typography chapters ---------- */
.kinetic{
  position:relative; display:grid; align-items:center;
  min-height:min(82svh,860px); padding-block:clamp(4.5rem,12vw,9rem);
  border-block:1px solid var(--line-2);
  background:linear-gradient(to bottom, color-mix(in srgb,var(--bg-2) 55%, transparent), transparent 42%, color-mix(in srgb,var(--bg-2) 55%, transparent));
}
.kinetic-alt{background:linear-gradient(to bottom, transparent, color-mix(in srgb,var(--accent) 3.5%, transparent) 50%, transparent)}
.kinetic-inner{display:grid; gap:var(--space-6); justify-items:center; text-align:center}
.kinetic-k{color:var(--faint); text-transform:uppercase; letter-spacing:.18em}
.kinetic-line{
  font-family:var(--font-display); font-weight:500; letter-spacing:-.028em;
  font-size:clamp(2.3rem,1rem + 6.4vw,5.4rem); line-height:1.02;
  max-width:22ch; text-wrap:balance;
  font-variation-settings:"opsz" 120, "SOFT" 0, "WONK" 0;
}
.kinetic-line .kw{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.06em}
.kinetic-line .kw > span{
  display:inline-block; transform:translateY(108%) rotate(2.5deg); opacity:0;
  transition:transform .95s var(--ease), opacity .8s var(--ease);
  transition-delay:var(--kd,0ms);
}
.kinetic-line.is-in .kw > span{transform:none; opacity:1}
.kinetic-line .kw:nth-child(even) > span{color:var(--text)}
.kinetic-sub{
  color:var(--muted); font-size:var(--text-lg); line-height:1.55; max-width:52ch;
  opacity:0; transform:translateY(14px);
  transition:opacity .8s var(--ease) .45s, transform .8s var(--ease) .45s;
}
.kinetic-sub.is-in{opacity:1; transform:none}
.no-motion .kinetic-line .kw > span,
.no-motion .kinetic-sub{opacity:1; transform:none}

/* ---------- Compliance handshake ---------- */
.handshake{background:linear-gradient(to bottom, transparent, color-mix(in srgb,var(--bg-2) 70%, transparent))}
.handshake .section-head .lede{max-width:62ch}
.hs-grid{display:grid; gap:var(--space-8)}
@media(min-width:1000px){.hs-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:var(--space-12); align-items:start}}
.hs-points{display:grid; gap:var(--space-5); align-content:start}
.hs-point{padding-top:var(--space-4); border-top:1px solid var(--line); display:grid; gap:.35rem}
.hs-k{color:var(--accent-ink); letter-spacing:.1em; text-transform:uppercase}
.hs-point h3{font-family:var(--font-display); font-weight:500; font-size:var(--text-lg); letter-spacing:-.02em}
.hs-point p{color:var(--muted); font-size:var(--text-sm); max-width:48ch}
.hs-code{align-self:start}
.hs-code .code{font-size:.7rem}
.handshake .fine{max-width:70ch}
.dash-mark{width:20px; height:20px; flex:none}

/* ---------- Reduced motion additions ---------- */
@media (prefers-reduced-motion: reduce){
  .kinetic-line .kw > span, .kinetic-sub{opacity:1 !important; transform:none !important}
  .scene-layer{transition:none}
}

/* ---------- v5: three-part split (business / customers / team) ---------- */
.split-grid{display:grid; gap:var(--space-5); margin-top:var(--space-2)}
@media(min-width:820px){.split-grid{grid-template-columns:repeat(3,1fr); gap:var(--space-6)}}
.split-card{
  padding:var(--space-6); border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); display:grid; gap:.6rem; align-content:start;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.split-card:hover{border-color:color-mix(in srgb,var(--text) 22%, var(--line)); transform:translateY(-2px)}
.split-card .mono.split-k{color:var(--accent-ink); letter-spacing:.1em; text-transform:uppercase; font-size:.7rem}
.split-card h3{font-family:var(--font-display); font-weight:500; font-size:var(--text-lg); letter-spacing:-.02em}
.split-card p.split-sub{color:var(--muted); font-size:var(--text-sm)}
.split-card ul{display:grid; gap:.4rem; margin-top:.4rem; padding-top:var(--space-3); border-top:1px solid var(--line-2)}
.split-card li{position:relative; padding-left:1.1rem; font-size:var(--text-sm); color:var(--muted)}
.split-card li::before{content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.75}

/* ---------- v5: static numbered flow (deposit flow / withdrawal controls) ---------- */
.numflow{border-top:1px solid var(--line); margin-top:var(--space-2)}
.numflow-step{
  display:grid; grid-template-columns:3rem minmax(0,1fr); gap:var(--space-5);
  padding-block:var(--space-5); border-bottom:1px solid var(--line);
}
@media(min-width:760px){.numflow-step{grid-template-columns:4.5rem minmax(0,1fr)}}
.numflow-num{font-size:.9375rem; color:var(--faint); padding-top:.2rem}
.numflow-step h3{font-family:var(--font-display); font-weight:500; font-size:var(--text-lg); letter-spacing:-.02em}
.numflow-step p{color:var(--muted); font-size:var(--text-sm); margin-top:.35rem; max-width:60ch}
.numflow-arrow{color:var(--faint); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; padding-top:.5rem}

/* ---------- v5: withdrawal control cards ---------- */
.wd-grid{display:grid; gap:var(--space-5); margin-top:var(--space-2)}
@media(min-width:820px){.wd-grid{grid-template-columns:repeat(2,1fr)}}
.wd-card{padding:var(--space-5); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); display:grid; gap:.4rem; align-content:start}
.wd-card .badge{justify-self:start}
.wd-card h3{font-family:var(--font-display); font-weight:500; font-size:var(--text-base); letter-spacing:-.01em}
.wd-card p{color:var(--muted); font-size:var(--text-sm)}
.wd-note{margin-top:var(--space-5); padding:var(--space-4) var(--space-5); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-2); color:var(--text); font-size:var(--text-sm); line-height:1.55}

/* ---------- v5: stablecoin section ---------- */
.stable-grid{display:grid; gap:var(--space-8)}
@media(min-width:1000px){.stable-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--space-12); align-items:start}}
.stable-points{display:grid; gap:.5rem}
.stable-points li{position:relative; padding-left:1.2rem; font-size:var(--text-sm); color:var(--muted); padding-block:.35rem}
.stable-points li::before{content:""; position:absolute; left:0; top:.85em; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.75}
.stable-fiat-first{
  padding:var(--space-5); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  display:grid; gap:.5rem; align-content:start;
}
.stable-fiat-first .mono.split-k{color:var(--accent-ink); letter-spacing:.1em; text-transform:uppercase; font-size:.7rem}
.stable-fiat-first p{color:var(--muted); font-size:var(--text-sm)}

/* ==========================================================================
   v6 — Mercury-inspired additions
   Tighter copy, SVG product surfaces, verb grid, refined pricing.
   Append-only: v5 rules above are untouched.
   ========================================================================== */

/* ---------- Tabular numbers everywhere money/counts appear ---------- */
.mono, .lg-cell, .lg-amount, .lg-balance, .dr-amount, .plan-price, .plan-specs dd {
  font-variant-numeric: tabular-nums;
}

/* ---------- Hero: heavier display weight + italic sub-line that settles ---------- */
.hero-title{
  font-weight:600;
  line-height:1.06;
}
[data-theme="dark"] .hero-title{ font-weight:600; }
.hero-title-accent{
  display:block;
  margin-top:.3rem;
  font-style:normal;
  font-weight:500;
  letter-spacing:-.022em;
  line-height:1.08;
  color:var(--accent-ink);
  font-size:.52em;
}
.hero-trust{
  color:var(--faint);
  margin-top:-.25rem;
  letter-spacing:.04em;
}

/* Motion that settles: overshoot then settle, never floats/pulses/bounces */
[data-rise]{
  transition-timing-function: cubic-bezier(.16,1.24,.38,1);
}

/* ---------- Product surface frame (shared by ledger + exception drawer) ---------- */
.surface{ padding-block:clamp(2.5rem,6vw,4.5rem); }
.surface-head{ margin-bottom:clamp(1.75rem,4vw,3rem); }
.surface-frame{
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:var(--surface);
  box-shadow:var(--shadow-m);
  overflow:hidden;
}
.surface-bar{
  display:flex; align-items:center; gap:var(--space-3);
  padding:.7rem var(--space-5);
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.surface-dots{ display:flex; gap:.32rem; }
.surface-dots i{ width:8px; height:8px; border-radius:50%; background:var(--line); display:block; }
.surface-bar-title{ color:var(--muted); letter-spacing:.06em; }
.surface-bar-live{ margin-left:auto; color:var(--accent-ink); display:flex; align-items:center; gap:.4rem; letter-spacing:.04em; }
.live-dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block;
  box-shadow:0 0 0 3px var(--accent-soft);
}
.ledger-svg, .drawer-svg{ width:100%; height:auto; display:block; color:var(--line); }
.surface-caption{
  margin-top:var(--space-5);
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:500;
  letter-spacing:-.01em;
  text-align:center;
  color:var(--text);
}

/* ---------- Ledger SVG scene ---------- */
.lg-head{ font-family:var(--font-mono); font-size:9.5px; fill:var(--faint); letter-spacing:.08em; }
.lg-head-r{ text-anchor:end; }
.lg-rule{ stroke:var(--line); stroke-width:1; }
.lg-rule-2{ stroke:var(--line-2); }
.lg-cell{ font-family:var(--font-mono); font-size:12.5px; fill:var(--text); }
.lg-dim{ fill:var(--faint); }
.lg-faint{ fill:var(--faint); opacity:.55; }
.lg-amount{ text-anchor:end; font-variant-numeric: tabular-nums; }
.lg-balance{ font-family:var(--font-mono); font-size:17px; fill:var(--text); font-weight:500; text-anchor:end; font-variant-numeric: tabular-nums; }
.lg-status circle{ fill:var(--accent-soft); }
.lg-check{ fill:none; stroke:var(--accent-ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lg-status-queued{ fill:none; stroke:var(--line); stroke-width:1.4; }

.lg-highlight{ opacity:0; }
.lg-live-text{ fill:var(--text); }
.lg-matched{ opacity:0; }
.lg-status-anim circle{ fill:var(--line-2); }
.lg-check-anim{ opacity:0; stroke-dasharray:10; stroke-dashoffset:10; }
.lg-status-label{ }

@media (prefers-reduced-motion: no-preference){
  .lg-highlight{ animation: lgHighlight 5.5s var(--ease) infinite; }
  .lg-matched{ animation: lgMatched 5.5s var(--ease) infinite; }
  .lg-status-anim circle{ animation: lgStatusFill 5.5s var(--ease) infinite; }
  .lg-check-anim{ animation: lgCheckDraw 5.5s var(--ease) infinite; }
  .lg-status-label{ animation: lgLabelSwap 5.5s steps(1) infinite; }
}
@keyframes lgHighlight{
  0%, 8%{ opacity:0; }
  22%, 70%{ opacity:1; }
  86%, 100%{ opacity:0; }
}
@keyframes lgMatched{
  0%, 18%{ opacity:0; transform:translateX(-4px); }
  30%{ opacity:1; transform:translateX(0); }
  86%, 100%{ opacity:1; }
}
@keyframes lgStatusFill{
  0%, 30%{ fill:var(--line-2); }
  45%, 100%{ fill:var(--accent-soft); }
}
@keyframes lgCheckDraw{
  0%, 42%{ opacity:0; stroke-dashoffset:10; }
  56%, 100%{ opacity:1; stroke-dashoffset:0; }
}
@keyframes lgLabelSwap{
  0%, 54%{ opacity:1; }
  55%{ opacity:0; }
  56%, 100%{ opacity:1; }
}

/* ---------- AI exception drawer SVG scene ---------- */
.dr-panel{ fill:var(--surface); stroke:var(--line); stroke-width:1; }
.dr-label{ font-size:9px; fill:var(--faint); letter-spacing:.08em; }
.dr-title{ font-family:var(--font-display); font-size:15px; fill:var(--text); font-weight:500; }
.dr-title-sm{ font-size:13px; }
.dr-sub{ font-size:11px; fill:var(--muted); }
.dr-dim{ fill:var(--faint); }
.dr-amount{ font-family:var(--font-mono); font-size:19px; fill:var(--text); font-variant-numeric: tabular-nums; }
.dr-amount-cur{ font-size:11px; fill:var(--faint); }
.dr-flag{ font-size:10px; fill:#a35c05; }
[data-theme="dark"] .dr-flag{ fill:#f0b357; }
.dr-hr{ fill:var(--line-2); }
.dr-arrow-line{ stroke:var(--line); stroke-width:1.4; fill:none; }
.dr-arrow-head{ stroke:var(--faint); stroke-width:1.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.dr-avatar{ fill:var(--accent-soft); stroke:var(--accent-ink); stroke-width:1.2; }
.dr-avatar-initial{ font-family:var(--font-mono); font-size:12px; fill:var(--accent-ink); font-weight:500; }
.dr-approve-btn{ fill:var(--line-2); stroke:var(--line); stroke-width:1; }
.dr-approve-text{ font-size:12px; fill:var(--muted); font-family:var(--font-body); font-weight:500; }
.dr-check-circle{ fill:var(--accent-soft); stroke:var(--accent-ink); stroke-width:1.4; opacity:0; }
.dr-check-mark{ fill:none; stroke:var(--accent-ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:26; stroke-dashoffset:26; opacity:0; }

@media (prefers-reduced-motion: no-preference){
  .dr-approve-btn{ animation: drApprovePress 6s var(--ease) infinite; }
  .dr-approve-text{ animation: drApproveText 6s steps(1) infinite; }
  .dr-check-circle, .dr-check-mark{ animation-duration:6s; animation-timing-function:var(--ease); animation-iteration-count:infinite; }
  .dr-check-circle{ animation-name: drCheckIn; }
  .dr-check-mark{ animation-name: drCheckMark; }
}
@keyframes drApprovePress{
  0%, 55%{ fill:var(--line-2); }
  62%{ fill:var(--accent-soft); }
  70%, 100%{ fill:var(--line-2); }
}
@keyframes drApproveText{
  0%, 61%{ opacity:1; }
  62%, 100%{ opacity:.6; }
}
@keyframes drCheckIn{
  0%, 68%{ opacity:0; }
  78%, 100%{ opacity:1; }
}
@keyframes drCheckMark{
  0%, 74%{ opacity:0; stroke-dashoffset:26; }
  88%, 100%{ opacity:1; stroke-dashoffset:0; }
}

/* ---------- Capabilities as verbs ---------- */
.verb-grid{
  display:grid; gap:1px; grid-template-columns:1fr; place-items:stretch;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
@media(min-width:600px){ .verb-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:820px){ .verb-grid{ grid-template-columns:repeat(4,1fr); } }
.verb{
  width:100%; min-width:0;
  background:var(--surface);
  padding:clamp(1.5rem,3vw,2.25rem) clamp(1.25rem,2.5vw,1.75rem);
  display:grid; gap:.6rem; align-content:start;
  transition:background-color .3s var(--ease);
}
.verb:hover{ background:var(--surface-2); }
.verb-word{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,1.1rem + 1.4vw,2rem);
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--text);
}
.verb p{ color:var(--muted); font-size:var(--text-sm); line-height:1.5; margin:0; }

/* ---------- White-label: one-line declaratives ---------- */
.wl{ padding-block:clamp(2.5rem,6vw,4.5rem); }
.wl-grid{ display:grid; gap:var(--space-6); }
@media(min-width:900px){ .wl-grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; gap:var(--space-12); } }
.wl-lines{ display:grid; gap:.85rem; }
.wl-line{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--text);
}
.wl-line-mono{
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  font-weight:400;
  color:var(--accent-ink);
  letter-spacing:.01em;
}

/* ---------- Stablecoin: single quiet line ---------- */
.stable-quiet{ padding-block:clamp(2rem,5vw,3.5rem); }
.stable-quiet-line{
  max-width:52ch;
  color:var(--muted);
  font-size:var(--text-base);
  line-height:1.6;
}

/* ---------- Pricing v3: adds AI-actions row, tightened spec list ---------- */
.plans-v3{ grid-template-columns:1fr; }
@media(min-width:700px){ .plans-v3{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1100px){ .plans-v3{ grid-template-columns:repeat(4,1fr); } }
.ai-action-note{ margin-top:.6rem; }
.ai-action-note strong{ color:var(--text); font-weight:500; }

/* ---------- Roadmap: honest badge cards ---------- */
.honest-grid{
  display:grid; gap:var(--space-4);
}
@media(min-width:700px){ .honest-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1100px){ .honest-grid{ grid-template-columns:repeat(4,1fr); } }
.honest-card{
  padding:var(--space-5);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  display:grid; gap:.5rem; align-content:start;
}
.honest-card .badge{ justify-self:start; }
.honest-card h3{
  font-family:var(--font-display); font-weight:500;
  font-size:var(--text-base); letter-spacing:-.01em;
}
.honest-card p{ color:var(--muted); font-size:var(--text-sm); margin:0; }

/* ==========================================================================
   v6.1 — Mercury-level type + SVG polish
   Append-only. Sharper display hierarchy, financial-document numerals,
   product-grade SVG surfaces, forward-looking roadmap.
   ========================================================================== */

/* ---------- Tokens: bigger display scale + a reserved amber for "active" ---------- */
:root{
  --text-hero: clamp(2.95rem, .7rem + 8vw, 6.75rem);
  --text-2xl: clamp(2.1rem, 1.25rem + 2.7vw, 3.6rem);
  --amber:#b4780a;
  --amber-soft:rgba(180,120,10,.12);
  --amber-ink:#8a5a04;
  --ease-settle:cubic-bezier(.16,.84,.28,1);
}
[data-theme="dark"]{
  --amber:#e8a95c;
  --amber-soft:rgba(232,169,92,.14);
  --amber-ink:#f0b357;
}

/* ---------- Numbers are first-class citizens ---------- */
body{ font-variant-numeric:tabular-nums; line-height:1.62; }
.lg-num,.lg-amount,.lg-balance,.dr-amount,.plan-price,.plan-specs dd,.next-num,.mono{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}
.plan-price{ letter-spacing:-.035em; }
.plan-specs dd{ font-variant-numeric:tabular-nums; }

/* ---------- Display hierarchy ---------- */
.hero-title{
  font-weight:700;
  letter-spacing:-.04em;
  line-height:.98;
  max-width:17ch;
  font-variation-settings:"opsz" 144, "SOFT" 0, "WONK" 0;
}
[data-theme="dark"] .hero-title{ font-weight:650; letter-spacing:-.038em; }
.hero-title-accent{
  display:block;
  margin-top:.34em;
  font-size:.42em;
  font-weight:500;
  font-style:normal;
  letter-spacing:-.022em;
  line-height:1.1;
  color:var(--muted);
}
.hero-sub{ max-width:42ch; line-height:1.58; }
.hero-trust{ margin-top:.35rem; letter-spacing:.1em; text-transform:uppercase; font-size:.6875rem; }

.h2{
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.02;
  font-variation-settings:"opsz" 144, "SOFT" 0, "WONK" 0;
}
.h1-alt{ font-weight:600; letter-spacing:-.036em; line-height:1.0; }
.h2 em,.h1-alt em,.hero-title em{ font-weight:500; color:var(--muted); }
.section-head .h2{ max-width:22ch; }
.section-head .lede{ max-width:54ch; }

/* ---------- Small type: precise tracking ---------- */
.eyebrow{ font-size:.6875rem; font-weight:600; letter-spacing:.17em; color:var(--muted); }
.mono{ letter-spacing:.03em; }
.fine{ line-height:1.6; letter-spacing:-.003em; font-weight:500; }
.surface-caption{ font-weight:600; letter-spacing:-.02em; color:var(--muted); font-size:var(--text-base); }

/* ---------- Vertical rhythm: more air, clearer landing points ---------- */
.section{ padding-block:clamp(5rem,11vw,10.5rem); }
.section-head{ margin-bottom:clamp(2.75rem,5.5vw,5rem); }
.surface{ padding-block:clamp(3rem,7vw,5.5rem); }
.wl{ padding-block:clamp(3.5rem,8vw,6rem); }
.stable-quiet{ padding-block:clamp(3rem,7vw,5rem); }

/* ==========================================================================
   Ledger surface — product-grade
   ========================================================================== */
.lg-head{
  font-family:var(--font-mono); font-size:9px; font-weight:500;
  fill:var(--faint); letter-spacing:.16em;
}
.lg-rule{ stroke:var(--line); stroke-width:1; }
.lg-rule-2{ stroke:var(--line-2); }
.lg-num{ font-family:var(--font-mono); font-size:12px; fill:var(--text); letter-spacing:-.01em; }
.lg-name{ font-family:var(--font-body); font-size:12.5px; font-weight:500; fill:var(--text); }
.lg-amount{ text-anchor:end; font-weight:500; }
.lg-balance{
  font-family:var(--font-mono); font-size:19px; font-weight:500;
  fill:var(--text); text-anchor:end; letter-spacing:-.015em;
}
.lg-stamp{ font-family:var(--font-mono); font-size:9px; fill:var(--faint); letter-spacing:.1em; }

/* status pills: posted = green, matching = amber, queued = muted */
.lg-pill-bg{ fill:var(--line-2); stroke:var(--line); stroke-width:1; }
.lg-pill-label{ font-family:var(--font-body); font-size:11px; font-weight:500; fill:var(--muted); }
.lg-pill-check{ fill:none; stroke:var(--accent-ink); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lg-pill-dot{ fill:var(--faint); }
.lg-pill-ok .lg-pill-bg{ fill:var(--accent-soft); stroke:color-mix(in srgb,var(--accent) 26%, var(--line)); }
.lg-pill-ok .lg-pill-label{ fill:var(--accent-ink); }
.lg-pill-queued .lg-pill-bg{ fill:none; stroke:var(--line); }
.lg-pill-queued .lg-pill-dot{ fill:none; stroke:var(--faint); stroke-width:1.2; opacity:.7; }
.lg-pill-queued .lg-pill-label{ fill:var(--faint); }
.lg-pill-live .lg-pill-bg{ fill:var(--amber-soft); stroke:color-mix(in srgb,var(--amber) 32%, var(--line)); }
.lg-pill-live .lg-pill-dot{ fill:var(--amber); }
.lg-pill-live .lg-pill-label{ fill:var(--amber-ink); }
.lg-label-posted{ opacity:0; fill:var(--accent-ink); }
.lg-pill-check-anim{ opacity:0; }
.lg-name.lg-matched{ opacity:1; }
.surface-frame .lg-highlight{ opacity:1; }

/* Settling motion: runs once when the surface arrives, then holds. */
@media (prefers-reduced-motion: no-preference){
  .surface-frame .lg-highlight,
  .surface-frame .lg-matched,
  .surface-frame .lg-pill-bg-anim,
  .surface-frame .lg-pill-dot-anim,
  .surface-frame .lg-pill-check-anim,
  .surface-frame .lg-label-matching,
  .surface-frame .lg-label-posted{ animation:none; }

  .surface-frame .lg-highlight{ opacity:0; }
  .surface-frame .lg-matched{ opacity:0; }

  .surface-frame.is-in .lg-highlight{ animation:lgFadeIn .8s var(--ease-settle) .15s 1 forwards; }
  .surface-frame.is-in .lg-matched{ animation:lgSettleIn .85s var(--ease-settle) .55s 1 forwards; }
  .surface-frame.is-in .lg-pill-bg-anim{ animation:lgPillPost .7s var(--ease-settle) 1.55s 1 forwards; }
  .surface-frame.is-in .lg-pill-dot-anim{ animation:lgFadeOut .45s var(--ease-settle) 1.55s 1 forwards; }
  .surface-frame.is-in .lg-pill-check-anim{ animation:lgCheck .55s var(--ease-settle) 1.7s 1 forwards; }
  .surface-frame.is-in .lg-label-matching{ animation:lgFadeOut .35s var(--ease-settle) 1.62s 1 forwards; }
  .surface-frame.is-in .lg-label-posted{ animation:lgFadeIn .5s var(--ease-settle) 1.75s 1 forwards; }
}
@keyframes lgFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes lgFadeOut{ from{opacity:1} to{opacity:0} }
@keyframes lgSettleIn{
  0%{ opacity:0; transform:translateX(-7px) }
  100%{ opacity:1; transform:translateX(0) }
}
@keyframes lgPillPost{
  0%{ fill:var(--amber-soft); stroke:color-mix(in srgb,var(--amber) 32%, var(--line)) }
  100%{ fill:var(--accent-soft); stroke:color-mix(in srgb,var(--accent) 26%, var(--line)) }
}
@keyframes lgCheck{
  0%{ opacity:0; stroke-dasharray:11; stroke-dashoffset:11 }
  40%{ opacity:1 }
  100%{ opacity:1; stroke-dasharray:11; stroke-dashoffset:0 }
}

/* ==========================================================================
   AI exception drawer — refined line weights + one settling approval
   ========================================================================== */
.dr-panel{ fill:var(--surface-2); stroke:var(--line); stroke-width:1; }
.dr-label{ font-family:var(--font-mono); font-size:8.5px; font-weight:500; fill:var(--faint); letter-spacing:.18em; }
.dr-title{ font-family:var(--font-display); font-size:16px; font-weight:600; fill:var(--text); letter-spacing:-.02em; }
.dr-title-sm{ font-size:13.5px; font-weight:600; }
.dr-sub{ font-family:var(--font-body); font-size:11px; fill:var(--muted); }
.dr-amount{ font-family:var(--font-mono); font-size:21px; font-weight:500; fill:var(--text); letter-spacing:-.02em; }
.dr-amount-dec{ font-size:14px; fill:var(--muted); }
.dr-amount-cur{ font-family:var(--font-mono); font-size:10px; fill:var(--faint); letter-spacing:.1em; }
.dr-flag{ font-family:var(--font-mono); font-size:9.5px; fill:var(--amber-ink); letter-spacing:.06em; }
[data-theme="dark"] .dr-flag{ fill:var(--amber-ink); }
.dr-arrow-line{ stroke:var(--line); stroke-width:1.2; }
.dr-arrow-head{ stroke:var(--faint); stroke-width:1.3; }
.dr-approve-btn{ fill:var(--line-2); stroke:var(--line); stroke-width:1; }
.dr-approve-text{ font-size:12px; font-weight:600; fill:var(--muted); letter-spacing:.01em; }
.dr-avatar-initial{ font-family:var(--font-mono); font-size:11.5px; font-weight:500; fill:var(--accent-ink); letter-spacing:.02em; }

@media (prefers-reduced-motion: no-preference){
  .surface-frame .dr-approve-btn,
  .surface-frame .dr-approve-text,
  .surface-frame .dr-check-circle,
  .surface-frame .dr-check-mark{ animation:none; }
  .surface-frame .dr-check-circle,
  .surface-frame .dr-check-mark{ opacity:0; }

  .surface-frame.is-in .dr-approve-btn{ animation:drPress .8s var(--ease-settle) .7s 1 forwards; }
  .surface-frame.is-in .dr-approve-text{ animation:drPressText .8s var(--ease-settle) .7s 1 forwards; }
  .surface-frame.is-in .dr-check-circle{ animation:lgFadeIn .55s var(--ease-settle) 1.35s 1 forwards; }
  .surface-frame.is-in .dr-check-mark{ animation:drCheckSettle .7s var(--ease-settle) 1.5s 1 forwards; }
}
@keyframes drPress{
  0%{ fill:var(--line-2); stroke:var(--line) }
  100%{ fill:var(--accent-soft); stroke:color-mix(in srgb,var(--accent) 34%, var(--line)) }
}
@keyframes drPressText{ 0%{ fill:var(--muted) } 100%{ fill:var(--accent-ink) } }
@keyframes drCheckSettle{
  0%{ opacity:0; stroke-dasharray:26; stroke-dashoffset:26 }
  35%{ opacity:1 }
  100%{ opacity:1; stroke-dasharray:26; stroke-dashoffset:0 }
}

/* ==========================================================================
   Settlement lanes — one quiet flow graphic
   ========================================================================== */
.lanes{ margin:clamp(2rem,4.5vw,3.25rem) 0 0; max-width:62rem; }
.lanes-svg{ width:100%; height:auto; overflow:visible; }
.ln-k{ font-family:var(--font-mono); font-size:9px; font-weight:500; fill:var(--faint); letter-spacing:.19em; }
.ln-rule{ stroke:var(--line-2); stroke-width:1; }
.ln-track{ fill:none; stroke:var(--line); stroke-width:1.4; }
.ln-track-dash{ stroke:color-mix(in srgb,var(--accent) 42%, var(--line)); stroke-dasharray:3 6; stroke-linecap:round; }
.ln-live{ fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; opacity:.85; }
.ln-node{ fill:var(--surface); stroke:var(--faint); stroke-width:1.2; }
.ln-node-on{ fill:var(--accent); stroke:none; }
.ln-label{ font-family:var(--font-mono); font-size:9px; font-weight:500; fill:var(--muted); letter-spacing:.14em; }
.ln-label-dim{ fill:var(--faint); }
.lanes-note{ margin-top:.85rem; color:var(--faint); letter-spacing:.06em; }
@media (prefers-reduced-motion: no-preference){
  .lanes .ln-live{ stroke-dasharray:944; stroke-dashoffset:944; }
  .lanes.is-in .ln-live{ animation:lnDraw 1.6s var(--ease-settle) .2s 1 forwards; }
}
@keyframes lnDraw{ to{ stroke-dashoffset:0 } }

/* ==========================================================================
   What's next — forward-looking roadmap (no status badges)
   ========================================================================== */
.next-grid{
  display:grid; gap:1px; grid-template-columns:1fr;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
@media(min-width:640px){ .next-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1080px){ .next-grid{ grid-template-columns:repeat(4,1fr); } }
.next-card{
  background:var(--surface);
  padding:clamp(1.5rem,3vw,2.25rem) clamp(1.25rem,2.5vw,1.75rem);
  display:grid; gap:.6rem; align-content:start;
  transition:background-color .3s var(--ease);
}
.next-card:hover{ background:var(--surface-2); }
.next-num{ color:var(--faint); font-size:.6875rem; letter-spacing:.18em; }
.next-card h3{
  font-family:var(--font-display); font-weight:600; font-size:var(--text-lg);
  letter-spacing:-.024em; line-height:1.18; color:var(--text);
}
.next-card p{ color:var(--muted); font-size:var(--text-sm); line-height:1.55; margin:0; }
.next-fine{ max-width:66ch; margin-top:var(--space-8); }
.next .section-head .lede{ max-width:50ch; font-size:var(--text-base); }

/* ---------- Reduced-motion safety net for v6.1 additions ---------- */
@media (prefers-reduced-motion: reduce){
  .lg-highlight,.lg-matched,.lg-name.lg-matched{ opacity:1 !important; animation:none !important; }
  .lg-pill-check-anim,.lg-label-posted{ opacity:0 !important; }
  .dr-check-circle,.dr-check-mark{ opacity:1 !important; stroke-dashoffset:0 !important; animation:none !important; }
  .ln-live{ stroke-dashoffset:0 !important; animation:none !important; }
}

/* ---------- Pricing spec rows: keep labels on one line so rows align ---------- */
.plan-specs > div{ align-items:baseline; gap:.75rem; }
.plan-specs dt{ white-space:nowrap; }
.plan-specs dd{ text-align:right; }

/* ==========================================================================
   v6.2 — Global account experience (white-label) + branded balance-screen SVG
   Append-only. Reuses .surface-frame / ledger + drawer SVG language.
   ========================================================================== */
.wl-global{ padding-block:clamp(4rem,9vw,7.5rem); }
.wl-global .section-head{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.wl-global .section-head .h2{ max-width:24ch; }
.wl-global .section-head .lede{ max-width:58ch; color:var(--muted); font-size:var(--text-base); }

.wl-stage{ display:grid; gap:clamp(2rem,4vw,3rem); align-items:start; }
@media(min-width:960px){
  .wl-stage{ grid-template-columns:minmax(320px,392px) minmax(0,1fr); gap:clamp(2.5rem,5vw,4.5rem); }
}

/* the app surface: same chrome as the ledger, phone-shaped */
.wl-app{ max-width:392px; width:100%; margin-inline:auto; border-radius:26px; }
.wl-app .surface-bar{ padding:.6rem var(--space-4); }
.wl-app .surface-bar-title{ font-size:.6875rem; }
.wl-app .surface-bar-live{ font-size:.6875rem; }
.wl-app-svg{ width:100%; height:auto; display:block; background:var(--surface); }
@media(min-width:960px){ .wl-app{ position:sticky; top:calc(var(--header-h) + 32px); } }

/* feature tiles — hairline grid, same construction as .next-grid */
.wl-tiles{
  display:grid; gap:1px; grid-template-columns:1fr;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
@media(min-width:560px){ .wl-tiles{ grid-template-columns:repeat(2,1fr); } }
.wl-tile{
  background:var(--surface);
  padding:clamp(1.35rem,2.6vw,1.9rem) clamp(1.15rem,2.2vw,1.55rem);
  display:grid; gap:.5rem; align-content:start;
  transition:background-color .3s var(--ease);
}
.wl-tile:hover{ background:var(--surface-2); }
.wl-tile-t{
  font-family:var(--font-display); font-weight:600; font-size:var(--text-lg);
  letter-spacing:-.024em; line-height:1.16; color:var(--text);
  text-wrap:balance;
}
.wl-tile p{ color:var(--muted); font-size:var(--text-sm); line-height:1.55; margin:0; }

/* fine print, inside the section */
.wl-fine{
  margin-top:clamp(2rem,4vw,3rem);
  max-width:78ch; color:var(--faint);
  font-size:.6875rem; line-height:1.7; letter-spacing:.01em;
}

/* ---------- Balance-screen SVG type + surfaces ---------- */
.wla-brand-mark{ fill:var(--accent-soft); stroke:color-mix(in srgb,var(--accent) 26%, var(--line)); stroke-width:1; }
.wla-brand-letter{ font-family:var(--font-display); font-size:15px; font-weight:600; fill:var(--accent-ink); text-anchor:middle; }
.wla-brand{ font-family:var(--font-display); font-size:15.5px; font-weight:600; letter-spacing:-.02em; fill:var(--text); }
.wla-k{ font-family:var(--font-mono); font-size:8.5px; font-weight:500; fill:var(--faint); letter-spacing:.18em; }
.wla-k-r{ text-anchor:end; }
.wla-rule{ stroke:var(--line); stroke-width:1; }
.wla-rule-2{ stroke:var(--line-2); }
.wla-total{
  font-family:var(--font-mono); font-size:29px; font-weight:500; fill:var(--text);
  letter-spacing:-.035em; font-variant-numeric:tabular-nums;
}
.wla-total-dec{ font-size:19px; fill:var(--muted); }
.wla-sub{ font-family:var(--font-mono); font-size:9px; fill:var(--faint); letter-spacing:.05em; }
.wla-name{ font-family:var(--font-body); font-size:12.5px; font-weight:500; fill:var(--text); }
.wla-amt{
  font-family:var(--font-mono); font-size:14.5px; font-weight:500; fill:var(--text);
  text-anchor:end; font-variant-numeric:tabular-nums; letter-spacing:-.015em;
}
.wla-band{ fill:url(#wlBandFade); }
.wla-foot{ font-family:var(--font-mono); font-size:8.5px; fill:var(--faint); letter-spacing:.11em; }

/* status pills — same vocabulary as .lg-pill-* */
.wla-pill-bg{ fill:var(--line-2); stroke:var(--line); stroke-width:1; }
.wla-pill-t{ font-family:var(--font-body); font-size:9.5px; font-weight:500; fill:var(--muted); text-anchor:middle; }
.wla-pill-dot{ fill:var(--amber); }
.wla-pill-check{ fill:none; stroke:var(--accent-ink); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.wla-pill-quiet .wla-pill-bg{ fill:none; stroke:var(--line); }
.wla-pill-quiet .wla-pill-t{ fill:var(--faint); }
.wla-pill-settle .wla-pill-bg{ fill:var(--accent-soft); stroke:color-mix(in srgb,var(--accent) 26%, var(--line)); }
.wla-pill-t-wait{ opacity:0; fill:var(--amber-ink); }
.wla-pill-t-ok{ opacity:1; fill:var(--accent-ink); }
.wla-pill-dot-anim{ opacity:0; }
.wla-pill-check-anim{ opacity:1; }

/* rail chips */
.wla-chip{ fill:var(--surface-2); stroke:var(--line); stroke-width:1; }
.wla-chip-dot{ fill:var(--accent); opacity:.65; }
.wla-chip-n{ font-family:var(--font-mono); font-size:11.5px; font-weight:500; fill:var(--text); letter-spacing:.07em; }

/* module glyphs — abstract, no networks or store marks */
.wla-glyph-box{ fill:none; stroke:var(--line); stroke-width:1.2; }
.wla-glyph{ fill:none; stroke:var(--faint); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- One settling pass on scroll-into-view, then hold ---------- */
@media (prefers-reduced-motion: no-preference){
  .wl-app .wla-band,
  .wl-app .wla-row-1,
  .wl-app .wla-row-2,
  .wl-app .wla-row-3,
  .wl-app .wla-total-g,
  .wl-app .wla-chip-g,
  .wl-app .wla-mod{ opacity:0; }
  .wl-app .wla-pill-bg-anim{ fill:var(--amber-soft); stroke:color-mix(in srgb,var(--amber) 32%, var(--line)); }
  .wl-app .wla-pill-dot-anim{ opacity:1; }
  .wl-app .wla-pill-check-anim{ opacity:0; }
  .wl-app .wla-pill-t-wait{ opacity:1; }
  .wl-app .wla-pill-t-ok{ opacity:0; }

  .wl-app.is-in .wla-total-g{ animation:wlaRise .8s var(--ease-settle) .1s 1 forwards; }
  .wl-app.is-in .wla-row-1{ animation:wlaRise .75s var(--ease-settle) .3s 1 forwards; }
  .wl-app.is-in .wla-row-2{ animation:wlaRise .75s var(--ease-settle) .42s 1 forwards; }
  .wl-app.is-in .wla-row-3{ animation:wlaRise .75s var(--ease-settle) .54s 1 forwards; }
  .wl-app.is-in .wla-band{ animation:lgFadeIn .9s var(--ease-settle) .8s 1 forwards; }
  .wl-app.is-in .wla-chip-1{ animation:wlaRise .7s var(--ease-settle) .72s 1 forwards; }
  .wl-app.is-in .wla-chip-2{ animation:wlaRise .7s var(--ease-settle) .8s 1 forwards; }
  .wl-app.is-in .wla-chip-3{ animation:wlaRise .7s var(--ease-settle) .88s 1 forwards; }
  .wl-app.is-in .wla-chip-4{ animation:wlaRise .7s var(--ease-settle) .96s 1 forwards; }
  .wl-app.is-in .wla-mod-1{ animation:wlaRise .7s var(--ease-settle) 1.06s 1 forwards; }
  .wl-app.is-in .wla-mod-2{ animation:wlaRise .7s var(--ease-settle) 1.16s 1 forwards; }

  /* the settlement row settles once: amber "settling" → green "settled" */
  .wl-app.is-in .wla-pill-bg-anim{ animation:wlaPillSettle .7s var(--ease-settle) 1.5s 1 forwards; }
  .wl-app.is-in .wla-pill-dot-anim{ animation:lgFadeOut .4s var(--ease-settle) 1.5s 1 forwards; }
  .wl-app.is-in .wla-pill-t-wait{ animation:lgFadeOut .32s var(--ease-settle) 1.55s 1 forwards; }
  .wl-app.is-in .wla-pill-check-anim{ animation:lgCheck .55s var(--ease-settle) 1.65s 1 forwards; }
  .wl-app.is-in .wla-pill-t-ok{ animation:lgFadeIn .5s var(--ease-settle) 1.7s 1 forwards; }
}
@keyframes wlaRise{
  0%{ opacity:0; transform:translateY(7px) }
  100%{ opacity:1; transform:translateY(0) }
}
@keyframes wlaPillSettle{
  0%{ fill:var(--amber-soft); stroke:color-mix(in srgb,var(--amber) 32%, var(--line)) }
  100%{ fill:var(--accent-soft); stroke:color-mix(in srgb,var(--accent) 26%, var(--line)) }
}

/* explicit static state for reduced motion: everything already settled */
@media (prefers-reduced-motion: reduce){
  .wl-app .wla-band,
  .wl-app .wla-row-1,
  .wl-app .wla-row-2,
  .wl-app .wla-row-3,
  .wl-app .wla-total-g,
  .wl-app .wla-chip-g,
  .wl-app .wla-mod{ opacity:1 !important; transform:none !important; animation:none !important; }
  .wl-app .wla-pill-bg-anim{ fill:var(--accent-soft) !important; stroke:color-mix(in srgb,var(--accent) 26%, var(--line)) !important; animation:none !important; }
  .wl-app .wla-pill-dot-anim,
  .wl-app .wla-pill-t-wait{ opacity:0 !important; animation:none !important; }
  .wl-app .wla-pill-check-anim{ opacity:1 !important; stroke-dashoffset:0 !important; animation:none !important; }
  .wl-app .wla-pill-t-ok{ opacity:1 !important; animation:none !important; }
}

/* ==========================================================================
   v6.2b — balance screen refined to a desktop business-account dashboard
   (Revolut Business layout language: sidebar + total figure + accounts list,
    color = state only, no decorative gradients on data surfaces)
   Append-only; overrides the narrower phone-frame rules above.
   ========================================================================== */
.wl-stage{ display:grid; grid-template-columns:1fr; gap:clamp(2.25rem,4.5vw,3.5rem); }
@media(min-width:960px){ .wl-stage{ grid-template-columns:1fr; gap:clamp(2.5rem,5vw,4rem); } }

.wl-app{ max-width:none; width:100%; margin:0; border-radius:var(--r-xl); position:static; }
@media(min-width:960px){ .wl-app{ position:static; top:auto; } }
.wl-app .surface-bar{ padding:.7rem var(--space-5); }
.wl-app-svg{ width:100%; height:auto; display:block; background:var(--surface); }
.wl-app-caption{
  margin-top:calc(var(--space-4) * -1);
  font-family:var(--font-display); font-size:var(--text-lg); font-weight:500;
  letter-spacing:-.015em; text-align:center; color:var(--text);
}

.wl-tiles{ grid-template-columns:1fr; }
@media(min-width:560px){ .wl-tiles{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .wl-tiles{ grid-template-columns:repeat(3,1fr); } }

/* sidebar */
.wla-side-bg{ fill:var(--surface-2); }
.wla-nav{ font-family:var(--font-body); font-size:12.5px; font-weight:500; fill:var(--faint); letter-spacing:-.005em; }
.wla-nav-on{ fill:var(--accent-ink); }
.wla-nav-active{ fill:var(--accent-soft); }

/* numerals: figure is the largest type on the surface, symbol set lighter */
.wla-total{ font-size:44px; font-weight:500; letter-spacing:-.045em; }
.wla-total-dec{ font-size:26px; fill:var(--muted); }
.wla-cur{ font-size:26px; fill:var(--faint); }
.wla-code{ font-family:var(--font-mono); font-size:11px; font-weight:500; fill:var(--faint); letter-spacing:.12em; }
.wla-amt{ font-size:16px; letter-spacing:-.02em; }

/* state, not decoration: flat accent wash on the row that settles */
.wla-band{ fill:var(--accent-soft); }

/* glyph weight: readable at surface scale, still hairline */
.wla-glyph-box{ stroke:var(--faint); stroke-width:1.15; opacity:.6; }
.wla-glyph{ stroke:var(--faint); opacity:.75; }

/* ---------- Narrow screens: keep the dashboard legible, pan horizontally ---------- */
.wl-app-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.wl-app-hint{ display:none; }
@media(max-width:820px){
  .wl-app-svg{ min-width:760px; }
  .wl-app-hint{
    display:block; padding:.55rem var(--space-5) .7rem;
    border-top:1px solid var(--line-2); background:var(--surface-2);
    color:var(--faint); font-size:.625rem; letter-spacing:.12em; text-transform:uppercase;
  }
}

/* ================================================================
   V7 ENRICHMENT: Corridor Explorer, Developer surface,
   Compliance-as-config timeline, Implementation roadmap
   ================================================================ */

/* ---------- Corridor Explorer ---------- */
.cor-panel{
  border:1px solid var(--line); border-radius:16px; background:var(--surface);
  box-shadow:var(--shadow-s); overflow:hidden;
}
.cor-toolbar{
  display:flex; flex-wrap:wrap; gap:var(--space-2);
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--line-2); background:var(--surface-2);
}
.cor-filter{
  padding:.45rem .9rem; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--muted); font-size:var(--text-xs);
  font-family:var(--font-mono); letter-spacing:.02em; cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.cor-filter:hover{ color:var(--text); border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); }
.cor-filter.is-active{
  background:var(--accent); color:#fff; border-color:var(--accent);
}
[data-theme="dark"] .cor-filter.is-active{ color:#06180f; }

.cor-table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  /* Edge-fade affordance: hints there's more to scroll without hard-clipping content. */
  background:
    linear-gradient(to right, var(--surface) 0%, transparent 2%) 0 0,
    linear-gradient(to left, var(--surface) 0%, transparent 2%) 100% 0;
  background-repeat:no-repeat; background-size:32px 100%, 32px 100%; background-attachment:local, local;
}
.cor-table{ width:100%; border-collapse:collapse; min-width:0; table-layout:auto; }
.cor-table th, .cor-table td{
  padding:.85rem .65rem; text-align:left; font-size:var(--text-sm);
  border-bottom:1px solid var(--line-2); white-space:nowrap;
}
.cor-table th:first-child, .cor-table td:first-child{ padding-left:var(--space-5); }
.cor-table th:last-child, .cor-table td:last-child{ padding-right:var(--space-5); }
.cor-table th.cor-col-corridor, .cor-table td.cor-route{ white-space:normal; min-width:11rem; }
.cor-table th.cor-col-rail, .cor-table td.cor-col-rail{ white-space:normal; }
.cor-table thead th{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint); font-weight:500;
  background:var(--surface-2);
}
.cor-th-note{ display:inline-block; margin-left:.3rem; color:var(--faint); text-transform:none; letter-spacing:0; font-size:.625rem; }
@media(min-width:900px){
  .cor-table-wrap{ overflow-x:visible; background:none; }
}
.cor-table tbody tr:last-child td{ border-bottom:0; }
.cor-table tbody tr:hover{ background:var(--surface-2); }
.cor-row{ transition:opacity .2s var(--ease); }
.cor-row.is-hidden{ display:none; }
.cor-row-saas{ background:color-mix(in srgb, var(--accent) 4%, transparent); }
.cor-route{ font-weight:500; color:var(--text); white-space:normal; }
.cor-arrow{ color:var(--faint); margin-inline:.25rem; }
.cor-sub-note{ color:var(--faint); font-weight:400; font-size:var(--text-xs); }
.cor-fx{ color:var(--text); }
.cor-fx.is-sample{ color:var(--faint); }

.cor-status{
  display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .65rem;
  border-radius:999px; font-size:var(--text-xs); font-weight:500; white-space:nowrap;
  border:1px solid transparent;
}
.cor-status::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.75; }
.cor-status-ok{
  color:var(--accent-ink); background:var(--accent-soft);
  border-color:color-mix(in srgb, var(--accent) 30%, var(--line));
}
.cor-status-amber{
  color:var(--amber-ink); background:var(--amber-soft);
  border-color:color-mix(in srgb, var(--amber) 32%, var(--line));
}
.cor-status-muted{ color:var(--faint); background:var(--surface-2); border-color:var(--line); }

.cor-empty{ padding:var(--space-8) var(--space-5); text-align:center; color:var(--faint); font-size:var(--text-sm); }

.cor-fx-line{
  padding:.7rem var(--space-5); border-top:1px solid var(--line-2);
  background:var(--surface-2); color:var(--faint); font-size:.6875rem;
}
.cor-fx-line.is-stale{ color:var(--amber-ink); }

.cor-disclaimer{
  margin-top:var(--space-6); color:var(--faint); font-size:var(--text-xs);
  line-height:1.6; max-width:76ch;
}

@media(max-width:899px){
  .cor-table{ min-width:680px; }
}
.cor-scroll-hint{ display:none; }
@media(max-width:640px){
  .cor-toolbar{ padding:var(--space-3) var(--space-4); }
  .cor-table th, .cor-table td{ padding:.7rem .65rem; }
  .cor-table th:first-child, .cor-table td:first-child{ padding-left:var(--space-4); }
  .cor-table th:last-child, .cor-table td:last-child{ padding-right:var(--space-4); }
  .cor-scroll-hint{
    display:flex; align-items:center; gap:.35rem; padding:.5rem var(--space-4) .6rem;
    border-top:1px solid var(--line-2); background:var(--surface-2);
    color:var(--faint); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
    font-family:var(--font-mono);
  }
  .cor-scroll-hint svg{ width:11px; height:11px; flex:none; }
}

/* ---------- Developer surface: API / MCP / Webhooks ---------- */
.dev-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5);
}
@media(max-width:820px){ .dev-grid{ grid-template-columns:1fr; } }
.dev-card{
  padding:var(--space-6); border:1px solid var(--line); border-radius:16px;
  background:var(--surface); box-shadow:var(--shadow-s);
}
.dev-card-k{ color:var(--faint); text-transform:uppercase; letter-spacing:.12em; font-size:.6875rem; margin-bottom:var(--space-2); }
.dev-card-t{ font-size:var(--text-lg); font-weight:500; letter-spacing:-.01em; margin-bottom:var(--space-2); max-width:32ch; }
.dev-card p{ color:var(--muted); font-size:var(--text-sm); line-height:1.55; }
.dev-card-tag{
  display:inline-block; margin-top:var(--space-4); padding:.3rem .6rem;
  border-radius:8px; background:var(--surface-2); border:1px solid var(--line);
  color:var(--faint); font-size:.6875rem;
}
.dev-fine{ max-width:76ch; }

/* ---------- Compliance-as-config timeline ---------- */
.cmp-timeline{
  display:grid; gap:0; border:1px solid var(--line); border-radius:16px;
  overflow:hidden; background:var(--surface); box-shadow:var(--shadow-s);
}
.cmp-step{
  display:flex; align-items:flex-start; gap:var(--space-5);
  padding:var(--space-6) var(--space-6);
  border-bottom:1px solid var(--line-2);
}
.cmp-step:last-child{ border-bottom:0; }
.cmp-step-n{
  flex:0 0 auto; color:var(--accent-ink); font-size:var(--text-lg); font-weight:500;
  padding-top:.1em;
}
.cmp-step-body{ min-width:0; }
.cmp-step-body h3{ font-size:var(--text-base); font-weight:500; margin-bottom:.35rem; }
.cmp-step-body p{ color:var(--muted); font-size:var(--text-sm); line-height:1.55; max-width:64ch; }
@media(max-width:640px){
  .cmp-step{ flex-direction:column; gap:var(--space-2); padding:var(--space-5) var(--space-5); }
}

/* ---------- Implementation roadmap ---------- */
.impl-rail{
  display:grid; grid-template-columns:repeat(6,1fr); gap:var(--space-3);
  list-style:none;
}
@media(max-width:960px){ .impl-rail{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:560px){ .impl-rail{ grid-template-columns:repeat(2,1fr); } }
.impl-node{
  display:flex; flex-direction:column; gap:var(--space-2);
  padding:var(--space-5) var(--space-4);
  border:1px solid var(--line); border-radius:14px; background:var(--surface);
  box-shadow:var(--shadow-s); position:relative;
}
.impl-node-n{
  width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; background:var(--accent-soft); color:var(--accent-ink);
  font-size:.75rem; font-weight:600;
}
.impl-node span:last-child{ font-size:var(--text-sm); font-weight:500; color:var(--text); }
.impl-fine{ max-width:70ch; }

/* reduced motion: static state for corridor filter / fx line already handled via app-wide .no-motion */
.no-motion .cor-row{ transition:none; }
.no-motion .cor-filter{ transition:none; }

/* ==========================================================================
   BUILD_SPEC additions: hero accent/trust, trust-bar, builders, regulated,
   about page (about-hero, about-list, explore-grid)
   ========================================================================== */

/* ---------- Hero accent + trust line ---------- */
.hero-accent{
  max-width:640px; margin-top:var(--space-4);
  color:var(--muted); font-weight:500; letter-spacing:-.004em; font-size:var(--text-lg); line-height:1.55;
}
.hero-trust{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em;
  font-size:var(--text-xs); opacity:.7; margin-top:var(--space-4);
}

/* ---------- Trust bar (3-col) ---------- */
.trust-bar .trust-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6);
}
.trust-col{ min-width:0; }
.trust-col + .trust-col{
  padding-left:var(--space-6); border-left:1px solid var(--line);
}
.trust-t{ font-size:var(--text-base); font-weight:600; margin-bottom:.35rem; }
.trust-sub{ color:var(--muted); font-weight:500; letter-spacing:-.003em; font-size:var(--text-sm); line-height:1.55; }
.trust-fine{ margin-top:var(--space-8); }
@media(max-width:820px){
  .trust-bar .trust-grid{ grid-template-columns:1fr; gap:var(--space-5); }
  .trust-col + .trust-col{
    padding-left:0; border-left:0; padding-top:var(--space-5); border-top:1px solid var(--line);
  }
}

/* ---------- Built for builders ---------- */
.builders-proof{
  font-size:var(--text-base); font-weight:500; color:var(--text); margin-top:var(--space-6);
}

/* ---------- Built for regulated money (reuses .dev-grid / .dev-card) ---------- */
.regulated-grid{ margin-top:var(--space-2); }

/* ---------- About page ---------- */
.about-hero{ padding-block:clamp(4rem,10vw,8rem) clamp(3rem,7vw,5rem); }
.about-hero .lede{ max-width:68ch; }

.about-list{
  list-style:none; display:grid; gap:var(--space-4); margin-top:var(--space-4);
  padding:0;
}
@media(min-width:768px){ .about-list{ grid-template-columns:repeat(2,1fr); gap:var(--space-5) var(--space-8); } }
.about-list li{
  color:var(--muted); font-size:var(--text-sm); line-height:1.6;
  padding-bottom:var(--space-4); border-bottom:1px solid var(--line-2);
}
.about-list li strong{ color:var(--text); font-weight:600; }

.explore-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); margin-top:var(--space-2);
}
@media(min-width:900px){ .explore-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:560px){ .explore-grid{ grid-template-columns:1fr; } }
.explore-grid .dev-card{ display:block; text-decoration:none; color:inherit; transition:transform .18s ease, box-shadow .18s ease; }
.explore-grid .dev-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-m,var(--shadow-s)); }

/* ============ V8 repositioning: status chips, modes, prompt-to-workflow ============ */
.cor-status-info{
  color:var(--blue); background:color-mix(in srgb, var(--blue) 10%, transparent);
  border-color:color-mix(in srgb, var(--blue) 32%, var(--line));
}
.cor-status-violet{
  color:#6b3fd4; background:color-mix(in srgb, #6b3fd4 10%, transparent);
  border-color:color-mix(in srgb, #6b3fd4 30%, var(--line));
}
[data-theme="dark"] .cor-status-violet{ color:#b3a0ee; }
.mcp-verbs{ color:var(--muted); font-size:.72rem; letter-spacing:.05em; margin-top:var(--space-4); }
/* A standalone status pill in a section head is a grid item, so `white-space:nowrap`
   stopped it shrinking below its label and pushed the document sideways at 390px.
   Let the label wrap; with room it still sits on one line. */
.section-head .cor-status{ margin-top:var(--space-4); white-space:normal; }

/* ---------- Prompt-to-workflow demo ---------- */
.pw .pw-body{ padding:clamp(16px, 3vw, 28px); }
.pw-steps{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--space-5); }
.pw-step{
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  padding:.45rem .85rem; border-radius:999px; font:inherit; font-size:var(--text-sm);
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line);
  transition:border-color .15s ease, color .15s ease;
}
.pw-step span{ font-size:.6875rem; opacity:.8; }
.pw-step:hover{ border-color:var(--accent); }
.pw-step.is-active{ color:var(--text); border-color:var(--accent); background:var(--accent-soft); }
.pw-view{ display:block; }
.pw-view[hidden]{ display:none; }
.pw-k{ color:var(--faint); text-transform:uppercase; letter-spacing:.12em; font-size:.6875rem; margin-bottom:var(--space-3); }
.pw-prompt{
  font-size:var(--text-lg); line-height:1.6; color:var(--text); max-width:56ch;
  font-style:italic;
}
.pw-sub{ color:var(--muted); font-size:var(--text-sm); margin-top:var(--space-4); max-width:64ch; }
.pw-code{
  margin:0; background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
  padding:var(--space-5); overflow:auto; font-size:.78rem; line-height:1.7; color:var(--text);
  max-width:64ch;
}
.pw-review{ display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; }
.pw-review-main{ font-size:var(--text-sm); color:var(--muted); line-height:1.6; }
.pw-review-main strong{ color:var(--text); font-weight:600; }
.pw-badge{
  padding:.35rem .7rem; border-radius:8px; font-size:.6875rem;
  background:var(--accent-soft); color:var(--accent-ink); border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
}
.pw-events{ list-style:none; display:grid; gap:var(--space-2); margin:0; }
.pw-events li{ position:relative; padding-left:20px; font-size:.8rem; color:var(--muted); }
.pw-events li::before{
  content:""; position:absolute; left:2px; top:.42em; width:7px; height:7px;
  border-radius:50%; background:var(--accent); opacity:.85;
}
.pw-events li:last-child::before{ background:var(--amber); }
.pd-foot{ padding:var(--space-4) clamp(16px, 3vw, 28px); }


/* ---- Waitlist form ---- */
.waitlist { margin-top: 2rem; text-align: left; }
.waitlist-k { margin: 0 0 1rem; }
.waitlist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; }
.wl-field { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; }
.wl-field input, .wl-field select {
  padding: .6rem .7rem;
  border: 1px solid var(--line-2, #e3e6ea);
  border-radius: 8px;
  background: var(--surface, #ffffff);
  color: inherit;
  font: inherit;
  width: 100%;
}
@media (max-width: 600px) { .waitlist-grid { grid-template-columns: 1fr; } }