/* ============================================================
   eXgine.net — site styles

   Values here are taken from the approved eXgine design
   (eXgine Site (offline).html), measured element by element:
   Poppins 700 headings, Manrope body, JetBrains Mono for figures.
   Coral eyebrows, ink cards at 28px radius, 88px section rhythm.
   All pages are light; the legal pages use the .legal long-form layout.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

:root { --section-y: 88px; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: var(--fw-bold);
  margin: 0;
}
h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.03; letter-spacing: -.025em; }
h2 { font-size: clamp(27px, 3.1vw, 38px); line-height: 1.1;  letter-spacing: -.02em; }
h3 { font-size: clamp(20px, 2vw, 23px);   line-height: 1.22; letter-spacing: -.01em; }
h4 { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--coral-600); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--coral); outline-offset: 3px; border-radius: var(--radius-xs);
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

code, kbd, .mono { font-family: var(--font-mono); }

::selection { background: var(--coral-100); color: var(--ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 18px;
  border-radius: var(--radius-sm); font-weight: var(--fw-bold);
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* ---------- layout ---------- */

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 900px; }

.section { padding: var(--section-y) 0; }
.section--tight { padding: 64px 0; }
.section--sunken, .truststrip { background: var(--gray-50); border-block: 1px solid var(--border-subtle); }
.section--ink { background: var(--ink); color: rgba(255,255,255,.72); padding: 80px 0; }
.section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }

/* Centred section head — the pattern used across the home page. */
.section-head { max-width: 720px; margin: 0 auto var(--space-12); text-align: center; }
.section-head p { font-size: var(--fs-lg); line-height: 1.6; color: var(--text-muted); margin: var(--space-4) 0 0; }
.section-head--left { margin-left: 0; text-align: left; }

.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: var(--space-3);
}

.lede { font-size: 19px; line-height: 1.6; color: var(--gray-700); }
.section--ink .lede { color: rgba(255,255,255,.72); }

/* ---------- top bar + header ---------- */

.topbar {
  background: var(--ink); color: rgba(255,255,255,.72);
  font-size: 12.5px; line-height: 1.45; letter-spacing: .02em;
  text-align: center; padding: 9px var(--space-4);
}
.topbar a { color: rgba(255,255,255,.92); text-decoration: underline; text-underline-offset: 2px; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: 13px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand:hover { text-decoration: none; }
.brand img { height: 30px; width: 30px; }
.brand__word {
  font-family: var(--font-mono); font-weight: var(--fw-medium);
  font-size: 15px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink);
}

.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav a {
  display: block; padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: var(--fw-semibold); color: var(--gray-700);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.site-nav a:hover { background: var(--gray-100); color: var(--ink); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--coral-600); background: var(--coral-050); }

.site-header .site-nav__cta { display: none; }

.nav-toggle {
  display: none; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  padding: 8px 12px; font: inherit; font-size: 14px; font-weight: var(--fw-semibold);
  color: var(--ink); cursor: pointer;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: 15px;
  padding: 15px 30px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--coral); color: #fff; }
.btn--primary:hover { background: var(--coral-600); box-shadow: 0 10px 24px rgba(224,116,95,.32); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--border-default); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--onink { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.22); }
.btn--onink:hover { background: rgba(255,255,255,.18); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn-row--center { justify-content: center; }

.textlink { font-weight: var(--fw-bold); color: var(--coral-600); font-size: 15px; }
.textlink--onink { color: var(--coral); }

/* ---------- hero ---------- */

.hero { padding: 76px 0 72px; }
.hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: var(--space-6); }
.hero .lede { max-width: 38em; margin-bottom: var(--space-8); }

/* Hero stat row — mono figures, quiet labels. */
.stats { display: flex; flex-wrap: wrap; gap: var(--space-10); margin-top: 44px; }
.stat b {
  display: block; font-family: var(--font-mono); font-weight: var(--fw-bold);
  font-size: 22px; line-height: 1.5; color: var(--ink); letter-spacing: -.01em;
}
.stat span { display: block; font-size: var(--fs-xs); color: var(--text-muted); }

/* Four figures do not fit on one flex row in a narrow container — they wrap 3+1
   and orphan the last. Grid keeps them even. Declared after .stats so it wins. */
.stats--four { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

/* ---------- worked-example flow card (ink) ---------- */

.flowcard {
  background: var(--ink); color: #fff;
  border-radius: var(--radius-xl); padding: 28px;
  box-shadow: var(--shadow-xl);
}
.flowcard__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 20px;
}
.flowcard__pill {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--mint); text-transform: none; letter-spacing: 0;
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
}
.flowcard__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }

.flowcard__body, .flowrow__label { display: flex; flex-direction: column; gap: 2px; }
.flowrow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: 16px 18px; border-radius: var(--radius-md);
}
.flowrow--lead { background: rgba(255,255,255,.06); }
.flowrow__label b { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: #fff; }
.flowrow__label span { font-size: var(--fs-2xs); color: rgba(255,255,255,.42); }
.flowrow__value {
  font-family: var(--font-mono); font-size: 23px; font-weight: var(--fw-medium);
  color: #fff; white-space: nowrap; letter-spacing: -.02em;
}
.flowrow__value small { font-size: var(--fs-2xs); color: rgba(255,255,255,.42); margin-left: 6px; }
.flowrow--rate .flowrow__value { font-size: var(--fs-h4); }
.flowrow--result { border-top: 1px solid rgba(255,255,255,.1); margin-top: 8px; padding-top: 20px; }

.chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 18px; }
.chip {
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  padding: 7px 13px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.72);
}
.chip--on { background: var(--mint); color: var(--ink); }

.flowcard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--fs-2xs);
  color: rgba(255,255,255,.34);
}

/* ---------- trust strip ---------- */

.truststrip__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 28px; padding: 22px var(--gutter);
  max-width: var(--container-max); margin: 0 auto;
  font-size: var(--fs-xs); color: var(--text-muted);
}
.truststrip__items { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.truststrip__items span { font-family: var(--font-mono); }

/* ---------- payment brand strip ---------- */

.brandstrip { padding: 44px 0 40px; }
.brandstrip__label { text-align: center; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 28px; }
.brandstrip__marquee { position: relative; overflow: hidden; }
.brandstrip__marquee::before, .brandstrip__marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 110px; z-index: 2; pointer-events: none;
}
.brandstrip__marquee::before { left: 0;  background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.brandstrip__marquee::after  { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.brandstrip__track {
  display: flex; align-items: center; gap: 58px; width: max-content;
  animation: brandscroll 46s linear infinite;
}
.brandstrip__marquee:hover .brandstrip__track { animation-play-state: paused; }
@keyframes brandscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .brandstrip__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 30px; }
  .brandstrip__marquee::before, .brandstrip__marquee::after { display: none; }
}
.brandstrip__track img { flex: none; }
.brandstrip img[data-brand="visa"]       { height: 25px; }
.brandstrip img[data-brand="mastercard"] { height: 31px; }
.brandstrip img[data-brand="amex"]       { height: 22px; }
.brandstrip img[data-brand="paypal"]     { height: 23px; }
.brandstrip img[data-brand="applepay"]   { height: 24px; }
.brandstrip img[data-brand="googlepay"]  { height: 20px; }
.brandstrip img[data-brand="klarna"]     { height: 24px; }
.brandstrip img[data-brand="discover"]   { height: 20px; }
.brandstrip img[data-brand="unionpay"]   { height: 29px; }
.brandstrip img[data-brand="jcb"]        { height: 29px; }
.brandstrip img[data-brand="maestro"]    { height: 29px; }
.brandstrip img[data-brand="diners"]     { height: 29px; }

/* ---------- comparison pair ---------- */

.compare, .pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.compare__card { border-radius: var(--radius-xl); padding: 32px; }
.compare__card--bad  { background: var(--gray-50); border: 1px solid var(--border-subtle); }
.compare__card--good { background: var(--ink); color: rgba(255,255,255,.76); }
.compare__card--good h3 { color: #fff; }
.compare__card h3 { margin: 18px 0 20px; }

.pill {
  display: inline-block; font-size: 12px; font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.pill--bad  { background: var(--red-100); color: var(--red-600); }
.pill--good { background: var(--mint); color: var(--ink); }

.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.checklist li { display: flex; gap: 12px; font-size: var(--fs-sm); line-height: 1.6; }
.checklist li::before { content: "+"; color: var(--mint); font-weight: var(--fw-bold); flex: none; }
.checklist--minus li::before { content: "\2014"; color: var(--red-500); }
.compare__card--bad .checklist li { color: var(--gray-700); }

/* ---------- step cards ---------- */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
/* One card surface, shared. Merged only because the two blocks were
   byte-identical and nothing between them re-targets either selector. */
.step, .card {
  background: var(--white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm);
}
.step__num {
  display: block; font-family: var(--font-mono); font-weight: var(--fw-bold);
  font-size: var(--fs-xs); color: var(--coral); margin-bottom: 14px;
}
.step h3 { font-size: 17px; line-height: 1.3; margin-bottom: 10px; }
.step p { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-body); }

/* ---------- generic cards ---------- */

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card h3 { font-size: 17px; margin-bottom: 10px; }
.card h4 { margin-bottom: 10px; }
.card p { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-body); }

.section--ink .card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); box-shadow: none;
}
.section--ink .card p { color: rgba(255,255,255,.72); }

/* ---------- numbered flow (long-form, how-it-works) ---------- */


/* ---------- figures / screenshots ---------- */

.figure { margin: 0; }
.figure__frame {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
  background: var(--white); box-shadow: var(--shadow-lg); overflow: hidden;
}
.figure__frame img { width: 100%; }

.figure figcaption {
  margin: var(--space-4) auto 0; font-size: var(--fs-sm); line-height: 1.6;
  color: var(--text-muted); max-width: 76ch;
}
/* Caption follows the section head's alignment. */
.section-head:not(.section-head--left) + .figure figcaption { text-align: center; }
.section-head--left + .figure figcaption { margin-left: 0; }
.figure figcaption b { color: var(--gray-700); font-weight: var(--fw-semibold); }

/* ---------- alternating rows ---------- */

.altrow { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
/* Grid items default to min-width:auto, so a wide scrolling figure inside one
   forces the whole track — and the page — past the viewport. */
.altrow > *, .altrow__media, .figure, .figure__frame { min-width: 0; }
.altrow + .altrow { margin-top: 88px; }
.altrow--flip .altrow__media { order: -1; }
.altrow__body h2 { margin-bottom: var(--space-4); }
.altrow .figure figcaption { text-align: left; margin-left: 0; }

/* ---------- plain-terms Q&A ---------- */

.qa { max-width: 860px; }
/* h2 on the MCP page, h3 elsewhere — target both, or the answer sits flush
   against the question with no gap at all. */
.qa h2, .qa h3 { margin-bottom: 14px; }
.qa p { color: var(--text-body); line-height: 1.7; }
.qa__item + .qa__item {
  margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--border-subtle);
}

/* ---------- outline card grid (compliance) ---------- */

.factgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-8) 0; }
.fact {
  background: var(--white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 20px 22px;
}
.fact h3 { font-size: 15px; color: var(--coral); margin-bottom: 8px; letter-spacing: 0; }
.fact p { font-size: var(--fs-xs); line-height: 1.6; color: var(--text-muted); }

/* ---------- QashPay / eXgine relationship pair ---------- */

.pair__card { border-radius: var(--radius-xl); padding: 26px; }
.pair__card--qp, .split__card--you { background: var(--white); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.pair__card--ex { background: var(--ink); color: rgba(255,255,255,.72); }
.pair__card--ex h3 { color: #fff; }
.pair__logo { height: 20px; width: auto; margin-bottom: 18px; }
.pair__lockup { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.pair__lockup img { height: 20px; width: 20px; }
.pair__lockup span {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .26em;
  text-transform: uppercase; color: #fff;
}
.pair__card h3 { font-size: 17px; margin-bottom: 10px; }
.pair__card p { font-size: var(--fs-sm); line-height: 1.6; }

/* ---------- coral callout with action ---------- */

.callout {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
  background: var(--coral-050); border: 1px solid var(--coral-100);
  border-radius: var(--radius-lg); padding: 22px 24px; margin-top: var(--space-6);
}
.callout p { font-size: var(--fs-sm); line-height: 1.6; color: var(--gray-700); max-width: 62ch; }

/* ---------- boxed detail panels ---------- */

.panel {
  background: var(--gray-50); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 24px 26px;
}
.panel__label {
  display: block; font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--text-subtle); margin-bottom: 16px;
}
.panel--ink { background: var(--ink); border-color: transparent; color: rgba(255,255,255,.66); }
.panel--ink p { font-size: var(--fs-xs); line-height: 1.65; }
.panel--ink b { color: #fff; font-weight: var(--fw-semibold); }

.doclinks { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.doclinks a { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

.details { display: grid; grid-template-columns: 1fr 1fr; gap: 20px var(--space-8); }
.details div { display: flex; flex-direction: column; gap: 3px; }
.details dt, .details__k { font-size: var(--fs-2xs); color: var(--text-muted); }
.details dd, .details__v {
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink);
}
.details__v--plain { font-family: var(--font-sans); }

/* ---------- LED FX ticker ----------
   Values lifted from the design: near-black panel, VT323 at 28px, glowing
   green/red rates, and a gradient-masked LIVE FX badge pinned to the left.
   ------------------------------------------------------------------ */

.led {
  position: relative; overflow: hidden;
  background: #04060a; border: 1px solid #11151d; border-radius: 12px;
  box-shadow: inset 0 2px 24px rgba(0,0,0,.9), 0 12px 30px rgba(4,6,10,.28);
}
.led__badge {
  position: absolute; z-index: 3; left: 0; top: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0 26px 0 20px;
  background: linear-gradient(90deg, #04060a 68%, rgba(4,6,10,0));
  pointer-events: none;
}
.led__badge span {
  font-family: "VT323", var(--font-mono); font-size: 22px;
  letter-spacing: 2px; color: #c7d2e0;
}
.led__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: #4dff9a; box-shadow: 0 0 8px #4dff9a;
  animation: ledPulse 1.6s ease-in-out infinite;
}
@keyframes ledPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.led__window { padding: 15px 0; }
.led__track {
  display: flex; align-items: baseline; width: max-content;
  font-family: "VT323", var(--font-mono); font-size: 28px; line-height: 1;
  animation: ledScroll 52s linear infinite;
}
.led:hover .led__track { animation-play-state: paused; }
@keyframes ledScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.led__item {
  display: inline-flex; align-items: baseline; gap: 12px;
  padding: 0 30px; border-right: 1px solid rgba(255,255,255,.07); white-space: nowrap;
}
.led__pair { color: #c7d2e0; letter-spacing: 1px; }
.led__rate, .led__move { letter-spacing: 1px; }
.led__item--up .led__rate  { color: #4dff9a; text-shadow: 0 0 14px #4dff9a, 0 0 6px #4dff9a, 0 0 2px rgba(255,255,255,.67); }
.led__item--up .led__move  { color: #4dff9a; text-shadow: 0 0 12px #4dff9a, 0 0 4px #4dff9a; }
.led__item--down .led__rate { color: #ff5b5b; text-shadow: 0 0 14px #ff5b5b, 0 0 6px #ff5b5b, 0 0 2px rgba(255,255,255,.67); }
.led__item--down .led__move { color: #ff5b5b; text-shadow: 0 0 12px #ff5b5b, 0 0 4px #ff5b5b; }

@media (prefers-reduced-motion: reduce) {
  /* Not scrolling means the badge would sit over the first rate — inset instead. */
  .led__track { animation: none; }
  .led__window { padding-left: 150px; }
}

/* ---------- eXgine / part-of-QashPay lockup ---------- */

.lockup {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: var(--gray-50); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: 24px 28px;
}
.lockup__mark { display: flex; align-items: center; gap: 16px; flex: none; }
.lockup__mark > img { height: 52px; width: auto; }
.lockup__names { display: flex; flex-direction: column; gap: 5px; }
.lockup__word {
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: 20px;
  letter-spacing: .34em; text-transform: uppercase; color: var(--ink);
  line-height: 1; padding-right: .34em;
}
.lockup__parent {
  display: flex; align-items: center; gap: 8px;
  padding-top: 7px; border-top: 1px solid var(--border-subtle);
}
.lockup__parent span {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted); font-weight: var(--fw-semibold);
}
.lockup__parent img { height: 15px; width: auto; }
.lockup__rule { width: 1px; align-self: stretch; background: var(--border-subtle); }
/* flex-basis, not min-width: at 320px the container is narrower than 280px and a
   hard min-width pushed the paragraph past the viewport. */
.lockup p { flex: 1 1 280px; min-width: 0; font-size: 15px; line-height: 1.6; color: var(--text-body); margin: 0; }

/* ---------- division of labour ---------- */

.split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; align-items: stretch; }
.split__card {
  border-radius: var(--radius-xl); padding: 28px;
  display: flex; flex-direction: column;
}
.split__card--us  { background: var(--ink); color: #fff; box-shadow: var(--shadow-lg); }

.split__pill {
  align-self: flex-start; font-size: 12px; font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-pill); margin-bottom: 20px;
}
.split__card--you .split__pill { color: var(--coral-600); background: var(--coral-050); }
.split__card--us  .split__pill { color: var(--ink); background: var(--mint); }

.split__figure { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.split__figure b { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: 52px; line-height: 1; }
.split__card--you .split__figure b { color: var(--ink); }
.split__card--us  .split__figure b { color: var(--mint); }
.split__figure span { font-size: 15px; font-weight: var(--fw-semibold); }
.split__card--you .split__figure span { color: var(--text-muted); }
.split__card--us  .split__figure span { color: rgba(255,255,255,.6); }

.split__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.split__steps li { display: flex; gap: 12px; align-items: flex-start; }
.split__num {
  font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-bold);
  color: #fff; background: var(--coral); width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.split__steps b { display: block; font-weight: var(--fw-semibold); font-size: 15px; color: var(--ink); }
.split__steps em { display: block; font-style: normal; font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.split__jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.split__jobs div { display: flex; gap: 10px; align-items: flex-start; }
.split__jobs i { font-style: normal; color: var(--mint); font-weight: var(--fw-bold); font-size: 15px; line-height: 1.4; }
.split__jobs span { font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.9); }

.split__foot { margin-top: auto; padding-top: 22px; font-size: 13px; line-height: 1.5; color: var(--text-subtle); }
.split__card--us .split__foot {
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.split__tag {
  font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-bold);
  color: var(--ink); background: var(--mint); padding: 5px 11px; border-radius: var(--radius-pill);
}
.split__card--us .split__foot em { font-style: normal; color: rgba(255,255,255,.6); }

/* ---------- the sale flow: timeline + follow the money ---------- */

.flowgrid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 48px; align-items: start; }

.tl { list-style: none; margin: 0; padding: 0; }
.tl__phase {
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  padding-left: 32px; margin-bottom: 18px;
}
.tl__phase--sale { color: var(--coral); }
.tl__phase--settle { color: var(--mint-600); margin-top: 30px; }
.tl__item { position: relative; padding: 0 0 26px 32px; border-left: 1px solid var(--border-subtle); margin-left: 5px; }
.tl__item::before {
  content: ""; position: absolute; left: -6px; top: 4px;
  width: 11px; height: 11px; border-radius: 50%;
  box-shadow: 0 0 0 4px var(--white);
}
.tl__item--sale::before { background: var(--coral); }
.tl__item--settle::before { background: var(--mint); }
.tl__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl__head { display: flex; align-items: baseline; gap: 10px; }
.tl__n { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-subtle); }
.tl__head b { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 17px; color: var(--ink); }
.tl__item p { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-body); margin: 6px 0 0; max-width: 52ch; }

.money {
  background: var(--ink); color: #fff; border-radius: var(--radius-xl);
  padding: 28px; box-shadow: var(--shadow-lg);
}
.money__label {
  display: block; font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 20px;
}
.money__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.money__row b { display: flex; align-items: center; gap: 10px; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.money__row b::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.money__row--out b::before { background: var(--coral); }
.money__row--in  b::before { background: var(--mint); }
.money__row span { font-family: var(--font-mono); font-size: var(--fs-2xs); color: rgba(255,255,255,.5); text-align: right; }
.money__note { margin-top: 22px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.6); }

/* ---------- onboarding configurator ---------- */

.cfg { display: flex; flex-direction: column; gap: var(--space-5); }
.cfg__step {
  background: var(--white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: 26px 28px; box-shadow: var(--shadow-sm);
}
.cfg__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.cfg__num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-bold);
  background: var(--coral-050); color: var(--coral-700);
}
.cfg__step--out .cfg__num { background: var(--mint-050); color: var(--mint-600); }
.cfg__head h3 { font-size: 18px; }
.cfg__step > p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 18px 38px; }

.cfg__choices { display: flex; flex-wrap: wrap; gap: 10px; }
.cfg__opt {
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--ink); background: var(--white);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 12px 22px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.cfg__opt:hover { border-color: var(--ink); }
.cfg__opt[aria-pressed="true"] {
  background: var(--coral-050); border-color: var(--coral); color: var(--coral-700);
}
.cfg__opt--pill { border-radius: var(--radius-pill); padding: 10px 18px; }
.cfg__opt--pill[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: #fff; }

.cfg__methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cfg__method {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: 14px 16px; background: var(--gray-50);
}
.cfg__logo {
  flex: none; width: 52px; display: flex; align-items: center; justify-content: center;
}
.cfg__logo img { max-height: 22px; width: auto; }
.cfg__method__body { flex: 1; min-width: 0; }
.cfg__brand { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.cfg__brand b { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 15px; color: var(--ink); }
.cfg__type {
  font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-muted); background: var(--white);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 2px 8px;
}
.cfg__covers { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 4px; }
.cfg__sched { flex: none; text-align: right; }
.cfg__sched b {
  display: block; font-family: var(--font-mono); font-size: var(--fs-sm);
  font-weight: var(--fw-bold); color: var(--ink);
}
.cfg__sched span {
  display: block; font-size: var(--fs-2xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-subtle);
}
.cfg__empty { font-size: var(--fs-sm); color: var(--text-muted); }
.cfg__note {
  margin-top: var(--space-5); font-size: var(--fs-xs); line-height: 1.6; color: var(--text-muted);
  border-left: 3px solid var(--border-default); padding-left: 16px;
}

@media (max-width: 560px) {
  .cfg__step { padding: 22px 20px; }
  .cfg__step > p { margin-left: 0; }
  .cfg__opt { flex: 1 1 auto; text-align: center; padding: 12px 14px; }
  .cfg__method { flex-wrap: wrap; gap: 10px 14px; }
  .cfg__sched { text-align: left; }
}

/* ---------- named people ---------- */

/* Stacked, not a grid: the founder leads and the rest sit under him. */
.people { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-8) 0; }
.person {
  background: var(--white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--coral);
}
.person b {
  display: block; font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: 18px; color: var(--ink); letter-spacing: -.01em;
}
.person__role {
  display: block; font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--text-muted); margin-top: 5px;
}
.person p { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-body); margin: 14px 0 0; }

/* Lead entry carries more weight; the rest are visually quieter. */
.person--lead { padding: 28px 30px; }
.person--lead b { font-size: 23px; }
.person--lead .person__role { margin-top: 7px; }
.person--sub { border-left-color: var(--border-default); }
.person--sub b { font-size: 17px; }

@media (max-width: 560px) { .person, .person--lead { padding: 22px; } }

/* ---------- currency code list ---------- */

.ccylist { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-6) 0; padding: 0; list-style: none; }
.ccylist li {
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--ink); background: var(--gray-50);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  padding: 7px 11px;
}

/* ---------- key-value table ---------- */

.kv { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.kv th, .kv td { text-align: left; padding: 15px 0; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.kv th { width: 38%; color: var(--text-muted); font-weight: var(--fw-semibold); }
.kv td { color: var(--ink); }

/* ---------- notice ---------- */

.notice {
  border-left: 3px solid var(--coral); background: var(--coral-050);
  padding: var(--space-5) var(--space-6); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--fs-sm); line-height: 1.6;
}
.notice b { color: var(--ink); }

/* ---------- inset CTA card ---------- */

.ctacard {
  background: var(--ink); color: rgba(255,255,255,.72);
  border-radius: var(--radius-2xl); padding: 56px 48px;
  text-align: center; box-shadow: var(--shadow-lg);
}
.ctacard h2 { color: #fff; margin-bottom: var(--space-4); }
.ctacard p { max-width: 56ch; margin: 0 auto var(--space-8); font-size: var(--fs-lg); line-height: 1.6; }
.ctaband { padding: var(--section-y) 0; }

/* ---------- breadcrumbs ---------- */

.crumbs { font-size: var(--fs-xs); color: var(--text-muted); padding-top: var(--space-8); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--text-subtle); }
.crumbs a { color: var(--text-muted); }

/* ---------- footer ---------- */

.site-footer { background: var(--ink); color: rgba(255,255,255,.6); font-size: var(--fs-sm); padding: 64px 0 0; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--space-10); }
.site-footer h2 {
  font-family: var(--font-sans); font-size: 12px; font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: rgba(255,255,255,.42);
  margin-bottom: var(--space-5);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: #fff; }
.site-footer .brand__word { color: #fff; }
.site-footer__blurb { max-width: 34ch; margin: var(--space-5) 0; line-height: 1.6; font-size: var(--fs-sm); }
.site-footer__parent { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); color: rgba(255,255,255,.42); }
.site-footer__parent img { height: 17px; }
.site-footer__legal {
  margin-top: 52px; border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0 26px;
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); justify-content: space-between;
  font-size: var(--fs-2xs); color: rgba(255,255,255,.42);
}

/* ============================================================
   Long-form legal pages — light, same palette as the rest of the site
   ============================================================ */

.legal { padding: 56px 0 96px; }
.legal__head {
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-10);
}
.legal__head h1 { margin: var(--space-3) 0 var(--space-4); }
.legal__meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }

.legal section { margin-bottom: var(--space-12); scroll-margin-top: 120px; }
.legal h2 { font-size: 23px; margin-bottom: var(--space-4); }
.legal h3 { font-size: var(--fs-h5); margin: var(--space-6) 0 var(--space-3); }
.legal p, .legal li { line-height: 1.75; color: var(--gray-700); }
.legal p { margin: 0 0 var(--space-4); }
.legal p:last-child { margin-bottom: 0; }
.legal ul, .legal ol { padding-left: 1.25em; margin: 0 0 var(--space-4); }
.legal li { margin-bottom: 10px; }
.legal strong { color: var(--ink); font-weight: var(--fw-semibold); }
.legal address {
  font-family: var(--font-mono); font-style: normal;
  font-size: var(--fs-sm); line-height: 1.7; color: var(--ink);
}
.legal .kv { margin-top: var(--space-4); }

.toc {
  margin-bottom: var(--space-12);
  background: var(--gray-50); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 24px 26px;
}
.toc h2 {
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-subtle);
  margin-bottom: var(--space-4);
}
.toc ol { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: var(--space-10); }
.toc li { margin-bottom: 10px; font-size: var(--fs-sm); break-inside: avoid; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .altrow { grid-template-columns: 1fr; gap: 36px; }
  .altrow + .altrow { margin-top: 72px; }
  .altrow--flip .altrow__media { order: 0; }
  .compare, .pair, .factgrid, .details { grid-template-columns: 1fr; }
  .stats--four { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .flowgrid { grid-template-columns: 1fr; gap: 36px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }

  /* The full nav no longer fits beside the brand and the CTA — collapse it
     behind the menu button and keep the sticky header to a single row. */
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-3) var(--gutter) var(--space-5);
    box-shadow: var(--shadow-md);
  }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav a { padding: 12px 10px; font-size: var(--fs-body); }
  .nav-toggle { display: inline-flex; margin-left: auto; padding: 9px 13px; }
  .site-header__inner { position: relative; flex-wrap: nowrap; gap: 12px; }

  /* The coral CTA crowded the header and shouted over the brand. It moves into
     the menu, where it can be full width and still be the loudest thing there. */
  .site-header__cta { display: none; }
  .site-header .site-nav__cta { display: flex; justify-content: center; width: 100%; margin-top: 14px; padding: 14px 20px; }
}

@media (max-width: 760px) {
  :root { --section-y: 56px; }
  .section--tight { padding: 48px 0; }
  .section--ink { padding: 56px 0; }
  .hero { padding: 40px 0 48px; }

  .grid--2, .grid--4, .steps, .split__jobs { grid-template-columns: 1fr; }
  .led__track { font-size: 22px; }
  .lockup__rule { display: none; }
  .toc ol { columns: 1; }
  .site-footer__grid { grid-template-columns: 1fr; }

  /* Centred running text is hard work on a narrow measure — align it left and
     let only the headings stay centred where the design centres them. */
  .section-head { text-align: left; }
  .section-head p { font-size: var(--fs-body); }
  .figure figcaption, .section-head:not(.section-head--left) + .figure figcaption {
    text-align: left; margin-left: 0;
  }

  h1 { line-height: 1.06; }
  .lede { font-size: 17px; line-height: 1.55; }

  /* Full-width, equal-width buttons: easier targets, no ragged edges. */
  .btn-row .btn { flex: 1 1 100%; justify-content: center; }

  /* One stat per row, smaller figures — the 22px mono ran to the edge at 390px. */
  .stats { flex-direction: column; gap: 18px; margin-top: 36px; }
  .stats--four { grid-template-columns: 1fr; gap: 18px; }
  .stat b { font-size: 18px; line-height: 1.35; }

  .flowrow { flex-direction: column; align-items: flex-start; gap: 6px; }
  .flowcard { padding: 20px; }
  .flowrow__value { font-size: 21px; }
  .ctacard { padding: 40px 24px; border-radius: var(--radius-xl); }
  .compare__card, .split__card { padding: 24px; }
  .split__figure b { font-size: 42px; }
  .truststrip__inner { justify-content: flex-start; gap: 10px 20px; }
  .lockup { padding: 22px; }

  /* Q&A questions are questions, not section titles. At 27px they competed with
     the section heads and `text-wrap: balance` broke them into ragged thirds. */
  .qa h2, .qa h3 { font-size: 21px; line-height: 1.25; text-wrap: normal; }
  .qa__item + .qa__item { margin-top: 28px; padding-top: 28px; }

  .kv th, .kv td { display: block; width: 100%; }
  .kv th { border-bottom: 0; padding-bottom: 2px; }
  .kv td { padding-top: 0; }
}

/* Header on phones: keep the EXGINE wordmark for as long as it fits beside the
   CTA and the menu button, tightening its tracking rather than dropping it.
   390px is the modal phone width, so losing the brand there is the wrong trade. */
@media (max-width: 430px) {
  /* Brand and menu button only now, so the wordmark keeps its full tracking. */
  .topbar { font-size: 12px; }
}

/* ---------- spacing utilities ---------- */
/* These replace 35 inline style= attributes that carried the long-form pages'
   vertical rhythm. Inline styles beat every stylesheet rule on specificity and
   bypassed the token scale at exactly the points where spacing decisions were
   being made.

   Values are unchanged, so this is a pure lift with no visual difference.
   .mt-x44, .mt-x56 and .mt-x10 are off the token scale - they were invented at
   the point of use. Rounding them to --space-10, --space-12 and --space-3 would
   put the whole file on the system, but that is a design decision and a visible
   change, so it is deliberately not made here. */
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-x10 { margin-top: 10px; }
.mt-x44 { margin-top: 44px; }
.mt-x56 { margin-top: 56px; }

/* The "small muted note under a block" pattern, previously three copies of the
   same three inline declarations. */
.note { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); }

.measure { max-width: 820px; }