/* =====================================================================
   RepublicACH 2026 — Direction A "Meridian"
   Static recreation of the design handoff (institutional / structured).
   Tokens, layout and components. One stylesheet, all pages.
   ===================================================================== */

/* ---------- Design tokens (Direction A) ---------- */
:root{
  --accent:#00AEEF;
  --accent-strong:#0091CC;
  --ink:#0A1A2B;
  --ink-soft:#46586B;
  --bg:#FFFFFF;
  --bg-alt:#F3F7FB;
  --bg-dark:#08141F;
  --on-dark:#E9F1F8;
  --on-dark-soft:#9DB2C4;
  --card:#FFFFFF;
  --border:#E4EAF1;
  --radius:8px;
  --radius-lg:14px;
  --shadow:0 1px 2px rgba(10,26,43,.05),0 10px 30px rgba(10,26,43,.06);
  --shadow-card:0 30px 70px rgba(0,0,0,.35);
  --font-head:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --maxw:1180px;
  --head-spacing:-0.02em;
  --head-weight:800;
  --pad-y:clamp(56px,7vw,104px);
  --pad-x:clamp(18px,5vw,72px);

  /* semantic */
  --success:#0F9D58;
  --success-bg:rgba(15,157,88,.14);
  /* Brand progress ramp — two approved Republic-blue shades (accent → accent-strong). */
  --progress-from:var(--accent);
  --progress-to:var(--accent-strong);
  --progress-ramp:linear-gradient(90deg,var(--progress-from),var(--progress-to));
  --negative:#C0392B;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  font-family:var(--font-body);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
input,textarea{font-family:inherit}
::selection{background:var(--accent);color:#fff}

/* ---------- Helpers ---------- */
.container{max-width:var(--maxw);margin:0 auto}
.section{padding:var(--pad-y) var(--pad-x)}
.section--tight{padding:clamp(28px,4vw,52px) var(--pad-x)}
.sec-head{max-width:640px}
.eyebrow{
  font:600 13px/1 var(--font-body);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.eyebrow--sm{font-size:12px;letter-spacing:.06em}
h1,h2,h3{font-family:var(--font-head)}
.h2{
  font-weight:var(--head-weight);
  font-size:clamp(28px,4.4vw,44px);line-height:1.08;
  letter-spacing:var(--head-spacing);color:var(--ink);margin-top:14px;
}
.lead{
  font:400 clamp(15px,1.5vw,17px)/1.65 var(--font-body);
  color:var(--ink-soft);margin-top:16px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border:none;cursor:pointer;white-space:nowrap;
  font:700 16px var(--font-body);padding:15px 28px;border-radius:var(--radius);
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-strong)}
.btn--ghost{
  background:rgba(255,255,255,.08);color:#fff;
  border:1px solid rgba(255,255,255,.22);font-weight:600;
}
.btn--ghost:hover{background:rgba(255,255,255,.16)}
.btn--white{background:#fff;color:var(--accent-strong);font-weight:700}
.btn--white:hover{background:#eef6fb}
.btn--sm{font-size:14px;padding:12px 22px}
.btn--soft{
  background:var(--bg-alt);color:var(--ink);border:1px solid var(--border);font-weight:600;
}
.btn--soft:hover{border-color:var(--accent);color:var(--accent-strong)}

/* =====================================================================
   GLOBAL NAV
   ===================================================================== */
.utility-bar{background:var(--bg-alt)}
.utility-bar__inner{
  max-width:var(--maxw);margin:0 auto;padding:7px var(--pad-x);
  display:flex;justify-content:flex-end;gap:18px;
  font:500 12.5px var(--font-body);color:var(--ink-soft);
}
.utility-bar a{cursor:pointer}
.utility-bar a:hover{color:var(--accent-strong)}
.utility-bar .is-strong{color:var(--ink);font-weight:600}

.nav{
  position:sticky;top:0;z-index:50;
  background:var(--bg);border-bottom:1px solid var(--border);
}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;padding:15px var(--pad-x);
  display:flex;align-items:center;gap:24px;
}
.brand{display:flex;align-items:center;cursor:pointer;user-select:none}
.brand__img{height:52px;width:auto}
.nav__links{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav__link{
  font:600 14px var(--font-body);background:none;border:none;cursor:pointer;
  padding:6px 0;color:var(--ink);transition:color .15s;
}
.nav__link:hover{color:var(--accent-strong)}
.nav__link.is-active{color:var(--accent)}
.nav__login{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--accent);color:#fff;border:none;cursor:pointer;
  font:700 14px var(--font-body);padding:11px 22px;border-radius:var(--radius);
  transition:background .18s;
}
.nav__login:hover{background:var(--accent-strong)}

/* Login dropdown */
.login-menu{position:relative}
.login-menu__caret{font-size:11px;line-height:1;transition:transform .2s}
.login-menu.is-open .login-menu__caret{transform:rotate(180deg)}
.login-menu__panel{
  position:absolute;top:calc(100% + 10px);right:0;min-width:248px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:6px;display:none;z-index:60;
}
.login-menu.is-open .login-menu__panel{display:block}
.login-menu__item{display:block;padding:11px 14px;border-radius:var(--radius);transition:background .15s}
.login-menu__item:hover{background:var(--bg-alt)}
.login-menu__label{display:block;font:700 14px var(--font-head);color:var(--ink)}
.login-menu__sub{display:block;font:500 12px var(--font-body);color:var(--ink-soft);margin-top:2px}

.nav__burger{
  margin-left:auto;background:none;border:none;cursor:pointer;
  padding:8px;display:none;flex-direction:column;gap:5px;
}
.nav__burger span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px}

.nav__mobile{display:none;padding:8px var(--pad-x) 20px;border-top:1px solid var(--border)}
.nav__mobile.is-open{display:block}
.nav__mobile-link{
  display:block;width:100%;text-align:left;
  font:600 16px var(--font-body);background:none;border:none;
  border-bottom:1px solid var(--border);cursor:pointer;padding:15px 0;color:var(--ink);
}
.nav__mobile-link.is-active{color:var(--accent)}
.nav__mobile-login-label{
  margin-top:20px;font:700 12px var(--font-body);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);
}
.nav__mobile-login-label + .nav__mobile-login{margin-top:10px}
.nav__mobile-login{
  display:block;margin-top:16px;width:100%;text-align:center;
  background:var(--accent);color:#fff;border:none;cursor:pointer;
  font:700 16px var(--font-body);padding:15px;border-radius:var(--radius);
}
.nav__mobile-login + .nav__mobile-login{margin-top:10px}
.nav__mobile-login--ghost{
  background:transparent;color:var(--ink);border:1.5px solid var(--border);
}
.nav__mobile-login--ghost:hover{border-color:var(--accent);color:var(--accent-strong)}

@media (max-width:640px){
  .nav__links{display:none}
  .nav__burger{display:flex}
}

/* =====================================================================
   OVERVIEW / HERO
   ===================================================================== */
.hero{
  position:relative;color:#fff;padding:clamp(54px,7vw,108px) var(--pad-x);
  background-color:var(--bg-dark);
  background-image:
    linear-gradient(115deg, rgba(8,20,31,.94) 0%, rgba(8,20,31,.80) 48%, rgba(8,20,31,.62) 100%),
    url('../images/hero-bg.jpg?v=2');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero__grid{
  max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:clamp(34px,5vw,68px);align-items:center;
}
.hero__pill{
  display:inline-block;font:600 12.5px var(--font-body);letter-spacing:.04em;
  color:var(--accent);background:rgba(0,174,239,.15);padding:7px 15px;border-radius:999px;
}
.hero h1{
  font-weight:var(--head-weight);font-size:clamp(36px,6.4vw,64px);line-height:1.02;
  letter-spacing:-.025em;margin-top:20px;
}
.hero__sub{
  font:400 clamp(16px,1.7vw,19px)/1.6 var(--font-body);
  color:var(--on-dark-soft);margin-top:20px;max-width:30em;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__trust{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;
  font:500 13.5px var(--font-body);color:var(--on-dark-soft);
}

/* Batch console card */
.batch{
  background:var(--card);border-radius:var(--radius-lg);
  box-shadow:0 34px 80px rgba(0,0,0,.28);overflow:hidden;border:1px solid var(--border);
  width:100%;color:var(--ink);
}
.batch__bar{
  display:flex;align-items:center;gap:7px;padding:14px 18px;
  border-bottom:1px solid var(--border);background:var(--bg-alt);
}
.dot{width:11px;height:11px;border-radius:50%}
.dot--r{background:#ff5f57}.dot--y{background:#febc2e}.dot--g{background:#28c840}
.batch__title{font:600 13px var(--font-body);color:var(--ink-soft);margin-left:8px}
.batch__rows{padding:6px 0}
.batch__row{display:flex;align-items:center;gap:12px;padding:12px 20px}
.batch__avatar{
  flex:none;width:34px;height:34px;border-radius:50%;background:var(--bg-alt);
  display:flex;align-items:center;justify-content:center;
  font:700 13px var(--font-head);color:var(--accent-strong);
}
.batch__who{flex:1;min-width:0}
.batch__name{font:600 14px var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.batch__role{font:500 12px var(--font-body);color:var(--ink-soft)}
.batch__amt{font:700 14px var(--font-head)}
.chip{
  flex:none;font:700 11px var(--font-body);letter-spacing:.04em;
  padding:5px 11px;border-radius:999px;transition:background .45s,color .45s;
  background:var(--bg-alt);color:var(--ink-soft);
}
.chip.is-paid{background:var(--success-bg);color:var(--success)}
.batch__more{padding:6px 20px 10px;font:500 13px var(--font-body);color:var(--ink-soft)}
.batch__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-top:1px solid var(--border);background:var(--bg-alt);
}
.batch__total-label{
  font:600 11px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
}
.batch__total{font:800 21px var(--font-head)}
.batch__btn{
  flex:none;border:none;cursor:pointer;font:700 14px var(--font-body);
  padding:13px 22px;border-radius:var(--radius);transition:background .3s,color .3s;
  background:var(--accent);color:#fff;
}
.batch__btn:hover{background:var(--accent-strong)}
.batch__btn.is-paid{background:rgba(15,157,88,.12);color:var(--success)}
.batch__btn.is-paid:hover{background:rgba(15,157,88,.18)}

/* ---------- Stat band ---------- */
.statband{background:var(--accent);color:#fff;padding:clamp(22px,2.6vw,30px) var(--pad-x)}
.statband__inner{
  max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;
  gap:18px 8px;justify-content:space-between;
}
.stat{flex:1;min-width:150px}
.stat__big{font:800 clamp(20px,2.4vw,26px) var(--font-head)}
.stat__sub{font:500 13px var(--font-body);opacity:.85;margin-top:2px}

/* ---------- Capabilities bento (Direction A) ---------- */
.bento{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  grid-auto-rows:minmax(150px,auto);gap:clamp(14px,1.8vw,20px);
  margin-top:clamp(30px,4vw,52px);
}
.tile{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:clamp(20px,2.4vw,26px);box-shadow:var(--shadow);
}
.tile--feature{
  grid-column:span 2;grid-row:span 2;padding:clamp(24px,2.8vw,34px);
  display:flex;flex-direction:column;
}
.tile__kicker{font:700 12px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.tile h3{font:700 17px var(--font-head);color:var(--ink)}
.tile--feature h3{font:700 clamp(20px,2.4vw,26px) var(--font-head);margin-top:10px}
.tile p{font:400 14px/1.55 var(--font-body);color:var(--ink-soft);margin-top:6px}
.tile--feature p{font-size:15px;margin-top:8px}
.tile__kicker + h3{margin-top:6px}
.tile__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:18px}
.tile__chip{
  font:600 13px var(--font-body);color:var(--accent-strong);background:var(--bg-alt);
  border:1px solid var(--border);padding:7px 13px;border-radius:999px;
}
.tile--accent{
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff;
  border:none;display:flex;flex-direction:column;justify-content:center;
}
.tile--accent .tile__big{font:800 clamp(26px,3.2vw,36px) var(--font-head)}
.tile--accent .tile__note{font:500 14px var(--font-body);opacity:.9;margin-top:4px}

/* Narrow screens: single-column bento so the feature tile's span doesn't force overflow */
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .tile--feature{grid-column:auto;grid-row:auto}
}

/* ---------- How it works (dark) + ACH flow ---------- */
.dark{background:var(--bg-dark);color:var(--on-dark);padding:var(--pad-y) var(--pad-x)}
.dark .h2{color:#fff}
.dark .lead{color:var(--on-dark-soft)}
.flow-card{
  background:var(--card);border-radius:var(--radius-lg);color:var(--ink);
  padding:clamp(22px,3vw,40px);margin-top:clamp(28px,4vw,44px);box-shadow:var(--shadow-card);
}
.flow-scroll{overflow-x:auto;padding-bottom:6px}
.flow-track{min-width:560px;position:relative;padding-top:8px}
.flow-rail{
  position:absolute;left:10%;right:10%;top:35px;height:3px;border-radius:3px;
  background-image:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 16px);
  background-size:24px 3px;opacity:.45;animation:flowdash 1s linear infinite;
}
.flow-fill{
  position:absolute;left:10%;top:35px;height:3px;width:0;background:var(--progress-ramp);
  border-radius:3px;transition:width .6s cubic-bezier(.4,0,.2,1);
}
.flow-token{
  position:absolute;top:20px;left:10%;transform:translateX(-50%);
  width:34px;height:34px;border-radius:50%;background:var(--progress-ramp);color:#fff;
  display:flex;align-items:center;justify-content:center;font:800 16px var(--font-head);
  transition:left .6s cubic-bezier(.4,0,.2,1);animation:tokpulse 1.6s ease-out infinite;z-index:3;
}
.flow-nodes{display:flex;position:relative;z-index:2}
.flow-node{flex:1;min-width:100px;text-align:center;cursor:pointer}
.flow-node__chip{
  margin:0 auto 12px;width:54px;height:54px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font:800 18px var(--font-head);transition:all .4s;
  background:var(--bg-alt);border:1px solid var(--border);color:var(--ink-soft);
}
.flow-node.is-done .flow-node__chip{background:var(--progress-to);color:#fff;opacity:.65;border-color:transparent}
.flow-node.is-active .flow-node__chip{
  background:var(--accent);color:#fff;border-color:transparent;
  box-shadow:0 8px 24px rgba(0,174,239,.45);transform:scale(1.06);
}
.flow-node__label{font:700 14px var(--font-head);margin-bottom:3px;color:var(--ink-soft)}
.flow-node.is-active .flow-node__label{color:var(--ink)}
.flow-node__sub{font:500 12px/1.4 var(--font-body);color:var(--ink-soft);padding:0 6px}
.flow-caption{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  margin-top:clamp(26px,3vw,38px);background:var(--bg-alt);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px 22px;
}
.flow-play{
  flex:none;width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;
  border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;
}
.flow-play:hover{background:var(--accent-strong)}
.flow-caption__body{flex:1;min-width:240px}
.flow-caption__step{font:700 13px var(--font-head);color:var(--accent-strong);letter-spacing:.04em;text-transform:uppercase}
.flow-caption__text{font:500 clamp(15px,1.6vw,17px)/1.55 var(--font-body);color:var(--ink);margin-top:5px}

/* Mobile: stack the ACH flow vertically so every step is visible (no horizontal scroll) */
@media (max-width:560px){
  .flow-scroll{overflow-x:visible;padding-bottom:0}
  .flow-track{min-width:0;padding-top:0}
  .flow-rail,.flow-fill,.flow-token{display:none}
  .flow-nodes{flex-direction:column;gap:22px}
  .flow-node{
    flex:0 0 auto;min-width:0;position:relative;cursor:pointer;text-align:left;
    display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:start;
    grid-template-areas:"chip label" "chip sub";
  }
  .flow-node__chip{grid-area:chip;margin:0;width:48px;height:48px}
  .flow-node__label{grid-area:label;margin-bottom:2px}
  .flow-node__sub{grid-area:sub;padding:0}
  /* vertical connector between chips */
  .flow-node:not(:last-child)::after{
    content:"";position:absolute;left:23px;top:50px;bottom:-22px;width:2px;
    background:var(--border);z-index:0;
  }
  .flow-node.is-done:not(:last-child)::after{background:var(--progress-to);opacity:.6}
}

/* ---------- Comparison (unified table, Direction A) ---------- */
.compare{
  margin-top:clamp(30px,4vw,48px);display:flex;flex-wrap:wrap;
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--card);
}
.compare__col{flex:1 1 280px;padding:clamp(24px,3vw,36px)}
.compare__col--new{background:var(--bg-alt);border-left:1px solid var(--border)}
.compare__head{font:700 12px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.compare__col--new .compare__head{color:var(--accent)}
.compare__list{margin-top:16px}
.compare__item{
  display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);
  font:400 15px/1.5 var(--font-body);color:var(--ink-soft);
}
.compare__col--new .compare__item{font-weight:500;color:var(--ink)}
.compare__item:last-child{border-bottom:none}
.compare__mark{flex:none;font-weight:700}
.compare__mark--x{color:var(--negative)}
.compare__mark--ok{color:var(--accent)}

/* ---------- Product showcase (split, Direction A) ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(26px,3vw,40px)}
.tab{
  border:none;cursor:pointer;font:600 14px var(--font-body);padding:11px 18px;border-radius:999px;
  white-space:nowrap;transition:background .2s,color .2s;background:var(--bg-alt);color:var(--ink-soft);
}
.tab:hover{color:var(--ink)}
.tab.is-active{background:var(--accent);color:#fff}
.showcase{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(24px,3vw,44px);align-items:center;margin-top:24px;
}
.showcase h3{font:700 clamp(22px,2.6vw,30px) var(--font-head);color:var(--ink)}
.showcase p{font:400 clamp(16px,1.7vw,18px)/1.6 var(--font-body);color:var(--ink-soft);margin-top:12px}
.showcase__cta{margin-top:24px}
.showcase__media{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:330px;
  border:1px solid var(--border);box-shadow:var(--shadow);background:var(--bg-alt);
}
.showcase__img{position:absolute;inset:0;background-size:cover;background-position:top left;transition:opacity .25s}
.showcase__tag{
  position:absolute;top:16px;right:18px;font:800 12px var(--font-head);color:#fff;
  background:rgba(8,20,31,.55);padding:5px 11px;border-radius:8px;
}

/* ---------- CTA band ---------- */
.cta{
  background:linear-gradient(120deg,var(--accent),var(--accent-strong));
  padding:clamp(50px,6vw,88px) var(--pad-x);text-align:center;
}
.cta__inner{max-width:680px;margin:0 auto}
.cta h2{font:var(--head-weight) clamp(26px,4vw,42px)/1.1 var(--font-head);color:#fff;letter-spacing:var(--head-spacing)}
.cta p{font:400 clamp(15px,1.6vw,18px)/1.6 var(--font-body);color:rgba(255,255,255,.9);margin-top:14px}
.cta .btn{margin-top:28px}

/* =====================================================================
   INNER PAGE HEADER
   ===================================================================== */
.page-head{
  background:var(--bg);padding:clamp(40px,5vw,68px) var(--pad-x) clamp(24px,3vw,36px);
  border-bottom:1px solid var(--border);
}
.page-head__inner{max-width:var(--maxw);margin:0 auto}
.page-head h1{
  font-weight:var(--head-weight);font-size:clamp(28px,4.4vw,46px);
  letter-spacing:var(--head-spacing);color:var(--ink);margin-top:12px;
}
.page-head p{font:400 clamp(15px,1.6vw,17px)/1.6 var(--font-body);color:var(--ink-soft);margin-top:12px;max-width:46em}
.pill{
  font:700 13px var(--font-body);color:var(--accent-strong);background:var(--bg-alt);
  border:1px solid var(--border);padding:9px 16px;border-radius:999px;white-space:nowrap;
}
.two-col{
  max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;
  gap:clamp(20px,3vw,44px);align-items:flex-start;
}

/* =====================================================================
   DEMOS
   ===================================================================== */
.demos-head{
  background:var(--bg);padding:clamp(40px,5vw,68px) var(--pad-x) clamp(20px,3vw,32px);
  border-bottom:1px solid var(--border);
}
.demos-head__inner{
  max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;
  align-items:flex-end;justify-content:space-between;
}
.demos-head h1{
  font-weight:var(--head-weight);font-size:clamp(28px,4.4vw,46px);
  letter-spacing:var(--head-spacing);color:var(--ink);margin-top:12px;
}
/* The rail and the user-guide card share one column, so the card keeps its place
   when the rail collapses into the mobile select below 680px. */
.demo-aside{flex:1 1 250px}
.demo-rail__item{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;transition:all .2s;
  border:1px solid var(--border);background:var(--bg);
}
.demo-rail__item:hover{border-color:var(--accent)}
.demo-rail__item.is-active{background:var(--card);border-color:var(--accent);box-shadow:var(--shadow)}
.demo-rail__badge{
  flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:800 13px var(--font-head);background:var(--bg-alt);border:1px solid var(--border);color:var(--ink-soft);
}
.demo-rail__item.is-active .demo-rail__badge{background:var(--accent);color:#fff;border-color:transparent}
.demo-rail__title{font:600 14.5px var(--font-body);color:var(--ink-soft)}
.demo-rail__item.is-active .demo-rail__title{color:var(--ink)}
/* Group heading — twelve flat items is hard to scan, so the rail is sectioned. */
.demo-rail__group{
  font:700 11.5px var(--font-body);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.75;padding:0 4px 8px;margin-top:18px;
}
.demo-rail__group:first-child{margin-top:0}

.demo-stage{
  flex:3 1 380px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);
}
.demo-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-alt);cursor:pointer}
/* Brightcove player, dropped over the poster on click. Sits above the shade,
   tags and play button so the poster chrome needs no separate hiding. */
.demo-media__frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}
.demo-media.is-playing{cursor:default}
.demo-media:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.demo-media__img{position:absolute;inset:0;background-size:cover;background-position:top left}
/* The posters are now branded title cards rather than UI screenshots, so the
   heavy shade that used to make the play button pop just dulls the artwork.
   Lighter wash, and the overlay tag gets its own pill so it stays legible over
   the card's pale left half instead of relying on the shade for contrast. */
.demo-media__shade{position:absolute;inset:0;background:rgba(8,20,31,.10)}
.demo-media__tagr{position:absolute;top:16px;right:18px;font:800 13px var(--font-head);color:#fff}
.demo-media__tagl{
  position:absolute;top:16px;left:18px;font:800 12px var(--font-head);color:#fff;
  background:rgba(8,20,31,.55);padding:5px 10px;border-radius:999px;letter-spacing:.03em;
}
/* Bottom-right rather than centred: the poster is the branded title card, whose
   logo sits centre-left and title centre-right — a centred button covered the
   title text. The clean blue below the text takes it without hiding anything. */
.demo-media__play{
  position:absolute;right:clamp(16px,2.2vw,24px);bottom:clamp(16px,2.2vw,24px);
  width:clamp(54px,5.2vw,64px);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;color:var(--accent-strong);
  font-size:clamp(20px,2vw,24px);padding-left:4px;
  box-shadow:0 12px 34px rgba(0,0,0,.35);transition:transform .2s;
}
.demo-media:hover .demo-media__play{transform:scale(1.07)}
.demo-body{padding:clamp(24px,3vw,36px)}
.demo-body h2{font:700 clamp(20px,2.4vw,28px) var(--font-head);color:var(--ink)}
.demo-body__desc{font:400 clamp(15px,1.6vw,17px)/1.6 var(--font-body);color:var(--ink-soft);margin-top:10px}
.demo-body__label{font:700 12px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-top:24px}
.demo-steps{display:flex;flex-direction:column;margin-top:14px}
.demo-step{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border)}
.demo-step__n{
  flex:none;width:28px;height:28px;border-radius:50%;background:var(--bg-alt);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font:700 12px var(--font-head);color:var(--accent-strong);
}
.demo-step__t{font:500 15px var(--font-body);color:var(--ink)}
/* Once the two columns stack, twelve rail items would push the video most of a
   screen down, so the stage comes first and the lesson list follows it. Scoped to
   .demo-stage rather than .two-col — that wrapper is shared with six other pages. */
/* Mobile lesson picker — hidden on desktop, where the rail does the job. */
.demo-select{display:none}
.demo-select__label{
  display:block;font:700 11.5px var(--font-body);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px;
}
.demo-select__input{
  width:100%;font:600 15px var(--font-body);color:var(--ink);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:13px 14px;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),
                   linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 15px) 21px;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat;
}
.demo-select__input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

@media (max-width:680px){
  /* Twelve rail items cost about a screen and a half of scrolling on a phone,
     so the rail gives way to a native select sitting above the player. */
  .demo-select{display:block;flex:1 1 100%;order:-2}
  .demo-rail{display:none}
  .demo-stage{order:-1}
}
.demo-nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-search{position:relative;margin-top:22px;max-width:540px}
.faq-search__icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-soft);font-size:18px}
.faq-search input{
  width:100%;padding:14px 16px 14px 44px;border:1px solid var(--border);border-radius:var(--radius);
  font:400 15px var(--font-body);color:var(--ink);background:var(--bg);outline:none;transition:border-color .15s;
}
.faq-search input:focus{border-color:var(--accent)}
.faq-cats{flex:1 1 200px}
.faq-cats__label{font:700 12px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.faq-cat{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
  cursor:pointer;border:none;border-radius:var(--radius);padding:11px 15px;margin-bottom:6px;
  font:600 13.5px var(--font-body);transition:all .2s;background:var(--bg-alt);color:var(--ink);
}
.faq-cat:hover{color:var(--accent-strong)}
.faq-cat.is-active{background:var(--accent);color:#fff}
.faq-cat__count{
  flex:none;font:700 11px var(--font-body);padding:2px 9px;border-radius:999px;
  background:var(--card);color:var(--ink-soft);border:1px solid var(--border);
}
.faq-cat.is-active .faq-cat__count{background:rgba(255,255,255,.25);color:#fff;border-color:transparent}
.faq-list{flex:3 1 380px}
.faq-row{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden;background:var(--bg)}
.faq-row.is-open{box-shadow:var(--shadow)}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;text-align:left;
  cursor:pointer;border:none;background:none;padding:18px 22px;font:600 16px var(--font-body);color:var(--ink);
}
.faq-chev{transition:transform .3s;transform:rotate(0deg);color:var(--accent);font-size:24px;line-height:1;font-weight:300;flex:none}
.faq-row.is-open .faq-chev{transform:rotate(45deg)}
.faq-a{display:none;padding:0 22px 20px;font:400 15px/1.65 var(--font-body);color:var(--ink-soft)}
.faq-row.is-open .faq-a{display:block}
.faq-a p{margin:0 0 12px}
.faq-a p:last-child{margin-bottom:0}
.faq-a ul{margin:0 0 12px;padding-left:20px;list-style:disc}
.faq-a ul:last-child{margin-bottom:0}
.faq-a li{margin-bottom:6px}
.faq-a li:last-child{margin-bottom:0}
.faq-a strong{color:var(--ink);font-weight:700}
.faq-a a{color:var(--accent-strong);text-decoration:none}
.faq-a a:hover{text-decoration:underline}
.faq-empty{
  padding:40px;text-align:center;font:500 15px var(--font-body);color:var(--ink-soft);
  border:1px dashed var(--border);border-radius:var(--radius-lg);
}
.faq-help{
  margin-top:22px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 26px;
}
.faq-help h3{font:700 17px var(--font-head);color:var(--ink)}
.faq-help p{font:400 14px var(--font-body);color:var(--ink-soft);margin-top:4px}

/* =====================================================================
   GLOSSARY
   ===================================================================== */
.term-list{flex:1 1 220px}
.term{
  display:block;width:100%;text-align:left;cursor:pointer;border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 18px;margin-bottom:8px;
  font:700 15px var(--font-head);transition:all .2s;background:var(--card);color:var(--ink);
}
.term:hover{border-color:var(--accent);color:var(--accent-strong)}
.term.is-active{background:var(--accent);color:#fff;border-color:transparent;box-shadow:var(--shadow)}
.term-panel{
  flex:2 1 360px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:clamp(28px,3.4vw,44px);box-shadow:var(--shadow);
}
.term-panel__head{display:flex;align-items:center;gap:14px}
.diamond{width:14px;height:14px;background:var(--accent);transform:rotate(45deg);flex:none}
.term-panel h2{font:700 clamp(24px,3vw,34px) var(--font-head);color:var(--accent-strong)}
.term-panel__def{font:400 clamp(16px,1.7vw,18px)/1.7 var(--font-body);color:var(--ink);margin-top:18px}
.term-flow{margin-top:30px;padding-top:24px;border-top:1px solid var(--border)}
.term-flow__label{font:700 12px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.term-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.term-chip{
  flex:none;font:600 12.5px var(--font-body);padding:8px 13px;border-radius:999px;transition:all .2s;
  background:var(--bg-alt);color:var(--ink-soft);border:1px solid var(--border);
}
.term-chip.is-active{background:var(--accent);color:#fff;border-color:transparent}
.term-arrow{color:var(--ink-soft);font-size:13px}
.term-note{font:500 13.5px var(--font-body);color:var(--ink-soft);margin-top:16px}

/* =====================================================================
   APPLY
   ===================================================================== */
.apply-steps{flex:2 1 360px}
.apply-steps h2{font:700 clamp(20px,2.4vw,26px) var(--font-head);color:var(--ink);margin-bottom:24px}
.tl-step{display:flex;gap:18px}
.tl-rail{display:flex;flex-direction:column;align-items:center;flex:none}
.tl-num{
  width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font:800 16px var(--font-head);
}
.tl-line{flex:1;width:2px;background:var(--border);margin-top:6px;min-height:22px}
.tl-step:last-child .tl-line{display:none}
.tl-body{padding-bottom:28px}
.tl-body h3{font:700 17px var(--font-head);color:var(--ink)}
.tl-body p{font:400 15px/1.6 var(--font-body);color:var(--ink-soft);margin-top:6px}
.apply-side{flex:1 1 270px;position:sticky;top:90px}
.apply-card{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(24px,3vw,32px)}
.apply-card--forms{background:var(--card);box-shadow:var(--shadow);margin-top:16px}
.apply-card h3{font:700 clamp(17px,2vw,20px) var(--font-head);color:var(--ink)}
.apply-reqs{margin-top:14px}
.apply-req{display:flex;gap:12px;padding:8px 0;font:500 14.5px/1.5 var(--font-body);color:var(--ink)}
.apply-req span{color:var(--accent);flex:none}
.apply-docs{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.apply-doc{
  display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg-alt);
  border:1px solid var(--border);border-radius:var(--radius);padding:13px 16px;
  font:600 14px var(--font-body);color:var(--accent-strong);cursor:pointer;transition:border-color .15s;
}
.apply-doc:hover{border-color:var(--accent)}
.apply-doc span{color:var(--accent)}
.apply-next{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.next-card{
  flex:1 1 190px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg);padding:24px;
}
.next-card__n{
  display:flex;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;
  align-items:center;justify-content:center;font:800 13px var(--font-head);
}
.next-card h3{font:700 16px var(--font-head);color:#fff;margin-top:16px}
.next-card p{font:400 13.5px/1.55 var(--font-body);color:var(--on-dark-soft);margin-top:8px}

/* =====================================================================
   USER GUIDE (PDF)
   Surfaced beside the demos and under the FAQ search — the two places people
   land when they are trying to learn the system rather than sign up for it.
   ===================================================================== */
.guide-card{
  display:block;margin-top:16px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow);
  cursor:pointer;transition:border-color .15s;
}
.guide-card:hover{border-color:var(--accent)}
.guide-card__kicker{
  font:700 11.5px var(--font-body);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);
}
.guide-card__title{font:700 16px var(--font-head);color:var(--ink);margin-top:10px}
.guide-card__desc{font:400 13.5px/1.55 var(--font-body);color:var(--ink-soft);margin-top:7px}
.guide-card__cta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font:600 14px var(--font-body);color:var(--accent-strong);margin-top:16px;
}
.guide-card__cta span{color:var(--accent)}
.guide-card__meta{font:500 12px var(--font-body);color:var(--ink-soft);margin-top:12px}

/* One-line variant for the FAQ help centre. */
.guide-strip{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:18px;
  font:400 14.5px/1.5 var(--font-body);color:var(--ink-soft);max-width:540px;
}
.guide-strip a{font-weight:600;color:var(--accent-strong);cursor:pointer}
.guide-strip a:hover{text-decoration:underline}

/* Guide link on the dark "what happens next" cards. text-decoration rather than a
   border, so the rule follows the text when the label wraps in a narrow card. */
.next-card__link{
  display:inline;margin-top:12px;font:600 13.5px var(--font-body);color:#fff;cursor:pointer;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px;
}
.next-card__link:hover{text-decoration-color:#fff}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact-form-card{
  flex:3 1 340px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:clamp(26px,3.4vw,40px);box-shadow:var(--shadow);
}
.contact-form-card h2{font:700 clamp(20px,2.4vw,26px) var(--font-head);color:var(--ink)}
.cform{margin-top:22px;display:flex;flex-direction:column;gap:16px}
.cform__row{display:flex;flex-wrap:wrap;gap:16px}
.cform label{flex:1 1 200px;font:600 13px var(--font-body);color:var(--ink)}
.cform label.full{flex:1 1 100%}
.cform input,.cform textarea{
  width:100%;margin-top:7px;padding:13px 15px;border:1px solid var(--border);border-radius:var(--radius);
  font:400 15px var(--font-body);color:var(--ink);background:var(--bg);outline:none;transition:border-color .15s;
}
.cform input:focus,.cform textarea:focus{border-color:var(--accent)}
.cform textarea{resize:vertical}
.contact-success{text-align:center;padding:30px 0;display:none}
.contact-success.is-shown{display:block}
.contact-success__check{
  width:60px;height:60px;border-radius:50%;background:rgba(15,157,88,.12);color:var(--success);
  display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto;
}
.contact-success h2{font:700 clamp(20px,2.4vw,26px) var(--font-head);color:var(--ink);margin-top:18px}
.contact-success p{font:400 15px/1.6 var(--font-body);color:var(--ink-soft);margin-top:8px;max-width:30em;margin-inline:auto}
.contact-info{flex:2 1 260px}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.contact-grid .info-card{margin-top:0}
.info-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(24px,3vw,32px)}
.info-card + .info-card{margin-top:16px}
.info-card h3{font:700 clamp(17px,2vw,20px) var(--font-head);color:var(--ink)}
.info-row{display:flex;gap:12px;margin-top:14px}
.info-row:first-of-type{margin-top:18px}
.info-row__icon{color:var(--accent);font-weight:700}
.info-row__text{font:400 15px/1.55 var(--font-body);color:var(--ink)}
.info-row__text a{color:var(--accent-strong);font-weight:600;word-break:break-word}
.info-label{font:700 12px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.info-label + .info-data{margin-top:8px}
.info-data{font:400 14.5px/1.9 var(--font-body);color:var(--ink)}
.info-data--tight{line-height:1.7}
.info-note{font:400 14px/1.55 var(--font-body);color:var(--ink-soft);margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.info-label.mt{margin-top:18px}

/* ---------- Legal / static content pages ---------- */
.prose{flex:1 1 100%;max-width:760px}
.prose h2{font:700 clamp(20px,2.4vw,26px) var(--font-head);color:var(--ink);margin:28px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p{font:400 16px/1.7 var(--font-body);color:var(--ink-soft);margin-top:12px}
.prose ul{margin:12px 0 0 22px;color:var(--ink-soft);font:400 16px/1.7 var(--font-body)}

/* =====================================================================
   FOOTER
   ===================================================================== */
/* ===== DATA VIZ (brand-anchored categorical + tertiary hues; validated CVD-safe) ===== */
.dataviz{--viz-1:#00AEEF;--viz-2:#eb6834;--viz-3:#1baf7a;--viz-4:#eda100;--viz-5:#e87ba4}
.dataviz__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px);
  margin-top:clamp(28px,4vw,44px);align-items:stretch;
}
@media(max-width:820px){.dataviz__grid{grid-template-columns:1fr}}
.viz-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:clamp(22px,2.6vw,30px);box-shadow:var(--shadow-card);display:flex;flex-direction:column;
}
.viz-card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.viz-card__title{font:700 17px var(--font-head);color:var(--ink)}
.viz-card__note{font:500 13px/1.5 var(--font-body);color:var(--ink-soft);margin-top:5px}
.viz-card__tag{
  flex:none;font:600 10.5px var(--font-body);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);background:var(--bg-alt);border:1px solid var(--border);
  padding:5px 9px;border-radius:999px;
}
/* Donut */
.donut-wrap{display:flex;align-items:center;gap:clamp(16px,2.4vw,26px);flex-wrap:wrap;margin-top:auto;padding-top:18px}
.donut{flex:none}
.donut__seg{transition:opacity .2s}
.donut:hover .donut__seg{opacity:.35}
.donut .donut__seg:hover{opacity:1}
.donut-center-num{font:800 30px var(--font-head);fill:var(--ink)}
.donut-center-sub{font:600 11px var(--font-body);fill:var(--ink-soft);letter-spacing:.04em;text-transform:uppercase}
.donut-legend{display:flex;flex-direction:column;gap:11px;min-width:190px;flex:1}
.donut-legend__row{display:flex;align-items:center;gap:10px;font:500 13.5px var(--font-body);color:var(--ink)}
.donut-legend__dot{width:12px;height:12px;border-radius:3px;flex:none}
.donut-legend__label{flex:1}
.donut-legend__val{font:700 13.5px var(--font-head);color:var(--ink);font-variant-numeric:tabular-nums}
/* Speed bars */
.speedbars{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:15px}
.speedbar__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.speedbar__name{font:600 13.5px var(--font-body);color:var(--ink)}
.speedbar__val{font:700 13px var(--font-head);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.speedbar__track{height:14px;background:var(--bg-alt);border-radius:7px;overflow:hidden}
.speedbar__fill{height:100%;border-radius:7px;min-width:16px;transition:filter .2s}
.speedbar__fill:hover{filter:brightness(1.06)}
.speedbar.is-best .speedbar__val{color:var(--viz-1)}
.speedbar__foot{font:500 12px var(--font-body);color:var(--ink-soft);margin-top:10px}

.footer{background:#0a0f14;color:#8a97a3;padding:clamp(48px,5vw,72px) var(--pad-x) 28px}
.footer__grid{
  max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:34px;
}
.footer__brand{display:flex;align-items:center;gap:10px}
.footer__brand .diamond{width:18px;height:18px}
.footer__logo-chip{display:inline-block;line-height:0}
.footer__logo-chip img{height:32px;width:auto;display:block}
.footer__brand-name{font:700 18px var(--font-head);color:#fff}
.footer p{font:400 13.5px/1.7 var(--font-body);margin-top:16px;max-width:24em}
.footer__col-title{font:700 12px var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:#fff}
.footer__links{margin-top:16px;display:flex;flex-direction:column;gap:11px}
.footer__links a{cursor:pointer;font:400 14px var(--font-body)}
.footer__links a:hover{color:#fff}
.footer__bar{
  max-width:var(--maxw);margin:36px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font:400 12.5px var(--font-body);color:#6b7884;
}
.footer__bar a:hover{color:#fff}

/* =====================================================================
   MOTION
   ===================================================================== */
@keyframes flowdash{to{background-position:24px 0}}
@keyframes tokpulse{0%,100%{box-shadow:0 0 0 0 rgba(0,174,239,.45)}50%{box-shadow:0 0 0 10px rgba(0,174,239,0)}}
@keyframes pageIn{from{transform:translateY(20px)}to{transform:none}}

main{animation:pageIn .44s cubic-bezier(.22,.61,.36,1) both}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  main{animation:none}
  .reveal{opacity:1!important;transform:none!important;transition:none}
  .flow-rail,.flow-token{animation:none}
  *{transition-duration:.001ms!important}
}