/* ===== base ===== */
/* ==========================================================================
   GoDravix — Loan Management Platform by DigiWagon Technologies
   Design system v1.0
   Tokens: GoDravix logo palette (#1C57E4 / #FFB915) on DigiWagon navy (#031931)
   Type:   Archivo (headings) + Inter (body)
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Brand */
  --blue:        #1C57E4;
  --blue-600:    #1748c4;
  --amber-wash:  #FFF6E0;
  --blue-700:    #133ba3;
  --blue-050:    #EEF3FE;
  --blue-100:    #DBE5FC;
  --amber:       #FFB915;
  --amber-600:   #E5A200;
  --amber-050:   #FFF6E1;
  /* Brand amber is a fill colour, not a text colour: #FFB915 measures 1.6:1 on
     cream. --amber-ink is the same hue taken dark enough to pass AA as text on
     any light surface (4.80:1 on cream, 5.09:1 on white). Use it for links,
     highlighted words and icon glyphs on light; keep --amber for fills. */
  --amber-ink:   #946507;

  /* Surfaces */
  --navy:        #031931;
  --navy-700:    #0A2645;
  --navy-600:    #113356;
  --midnight:    #153860;
  --ink:         #0F172A;
  --body:        #414C5C;
  /* Was #6B7785, which measured 4.30:1 on cream and failed WCAG AA for normal
     text on every cream section. Darkened just enough to clear it on both
     surfaces (4.90:1 cream, 5.20:1 white) without changing the grey's character. */
  --muted:       #626E7C;
  --line:        #E3E7EC;
  --line-soft:   #EEF1F5;
  --paper:       #FFFFFF;
  --paper-alt:   #F7F9FC;
  --cream:       #FBF8F2;

  /* Functional status (availability ledger) */
  --live:        #0A6E4C;  /* 5.58:1 on --live-bg, 6.27:1 on white */
  --live-bg:     #E6F5EF;
  --build:       #8A5600;  /* 5.64:1 on --build-bg */
  --build-bg:    #FFF4DF;
  --plan:        #5A6577;
  --plan-bg:     #EFF1F4;

  /* Type scale — 1.22 ratio */
  --t-xs:   0.75rem;   /* 12 */
  --t-sm:   0.875rem;  /* 14 */
  --t-base: 1rem;      /* 16 */
  --t-md:   1.0625rem; /* 17 */
  --t-lg:   1.1875rem; /* 19 */
  --t-xl:   1.4375rem; /* 23 */
  --t-2xl:  1.75rem;   /* 28 */
  --t-3xl:  2.125rem;  /* 34 */
  --t-4xl:  2.625rem;  /* 42 */
  --t-5xl:  3.25rem;   /* 52 */
  --t-6xl:  4rem;      /* 64 */

  /* Spacing — 8px base */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 32px;  --s7: 40px;  --s8: 48px;  --s9: 64px;  --s10: 80px;
  --s11: 96px; --s12: 128px;

  /* Radii + elevation */
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 100px;
  --sh-sm: 0 1px 2px rgba(3,25,49,.06), 0 1px 3px rgba(3,25,49,.05);
  --sh:    0 4px 12px rgba(3,25,49,.06), 0 2px 4px rgba(3,25,49,.04);
  --sh-md: 0 12px 28px rgba(3,25,49,.08), 0 4px 10px rgba(3,25,49,.04);
  --sh-lg: 0 28px 60px rgba(3,25,49,.12), 0 8px 20px rgba(3,25,49,.06);

  --wrap: 1200px;
  --ease: cubic-bezier(.16,.84,.44,1);

  --font-h: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-b: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-m: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------- 2. Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  font-family: var(--font-b);
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-h);
  color: var(--navy);
  line-height: 1.14;
  letter-spacing: -0.021em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.35rem + 3.6vw, var(--t-6xl)); font-weight: 800; letter-spacing: -0.032em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.1vw, var(--t-4xl)); font-weight: 800; letter-spacing: -0.026em; }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, var(--t-xl)); }
h4 { font-size: var(--t-lg); }
h5 { font-size: var(--t-base); }
p  { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--blue-100); color: var(--navy); }

/* --------------------------------------------------------------- 3. Layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5); }
.section { padding-block: clamp(56px, 7vw, 104px); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }
.section--alt { background: var(--paper-alt); }
.section--cream { background: var(--cream); }
.section--navy { background: var(--navy); color: #C9D6E4; }
.section--navy h1, .section--navy h2, .section--navy h3,
.section--navy h4, .section--navy h5 { color: #fff; }

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 200;
  background: var(--navy); color: #fff; padding: var(--s3) var(--s5);
  border-radius: var(--r-sm); font-family: var(--font-h); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip:focus { top: var(--s4); }

/* ------------------------------------------------------------- 4. Typeset */
.eyebrow {
  display: inline-block;
  font-family: var(--font-h); font-weight: 700; font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
  margin-bottom: var(--s4);
}
.section--navy .eyebrow { color: var(--amber); }
.lede { font-size: clamp(1.0625rem, 1rem + .3vw, var(--t-lg)); color: var(--muted); }
.section--navy .lede { color: #A9BCD0; }

.sec-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head h2 + p { margin-top: var(--s4); }

.hl { color: var(--blue); }
.section--navy .hl { color: var(--amber); }
.u-mark {
  background: linear-gradient(transparent 62%, rgba(255,185,21,.42) 62%);
  padding-inline: 2px;
}

/* -------------------------------------------------------------- 5. Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--font-h); font-weight: 600; font-size: var(--t-base);
  padding: 13px 24px; border-radius: var(--r-sm); border: 1.5px solid transparent;
  cursor: pointer; min-height: 46px; text-align: center;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }

.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 1px 2px rgba(28,87,228,.3); }
.btn--primary:hover { background: var(--blue-600); box-shadow: 0 6px 18px rgba(28,87,228,.28); }

.btn--amber { background: var(--amber); color: #2B1D00; }
.btn--amber:hover { background: var(--amber-600); box-shadow: 0 6px 18px rgba(255,185,21,.34); }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.32); }
.btn--ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.55); }

.btn--outline { background: var(--paper); color: var(--navy); border-color: var(--line); }
.btn--outline:hover { border-color: var(--blue); color: var(--blue); }

.btn--sm { padding: 9px 16px; font-size: var(--t-sm); min-height: 38px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

.tlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-h); font-weight: 600; font-size: var(--t-sm);
  color: var(--blue);
}
.tlink::after { content: "→"; transition: transform .18s var(--ease); }
.tlink:hover::after { transform: translateX(4px); }
.section--navy .tlink { color: var(--amber); }

/* ---------------------------------------------- 6. Availability badge (§5) */
.avail {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-h); font-weight: 700; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap;
  border: 1px solid transparent;
}
.avail::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.avail--live  { color: var(--live);  background: var(--live-bg);  border-color: rgba(14,138,95,.22); }
.avail--build { color: var(--build); background: var(--build-bg); border-color: rgba(181,115,10,.24); }
.avail--plan  { color: var(--plan);  background: var(--plan-bg);  border-color: rgba(90,101,119,.2); }

.section--navy .avail--live  { color: #6FE0B4; background: rgba(14,138,95,.18); border-color: rgba(111,224,180,.3); }
.section--navy .avail--build { color: #FFCF63; background: rgba(255,185,21,.14); border-color: rgba(255,207,99,.3); }
.section--navy .avail--plan  { color: #A9BCD0; background: rgba(169,188,208,.12); border-color: rgba(169,188,208,.26); }

.avail-key {
  display: flex; flex-wrap: wrap; gap: var(--s5) var(--s6);
  padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); margin-bottom: var(--s7);
}
.avail-key__item { display: flex; gap: var(--s3); align-items: flex-start; flex: 1 1 220px; }
.avail-key__item p { font-size: var(--t-sm); color: var(--muted); margin-top: 2px; }

/* ---------------------------------------------------------------- 7. Cards */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s6); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card--link:hover { border-color: var(--blue-100); box-shadow: var(--sh-md); transform: translateY(-3px); }
.card h3 { margin-bottom: var(--s3); }
.card p  { font-size: var(--t-base); color: var(--muted); }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s3); }
.card__head h3 { margin: 0; }
.card > .tlink { margin-top: var(--s5); }

.icon-tile {
  width: 46px; height: 46px; flex: none; border-radius: var(--r);
  display: grid; place-items: center; margin-bottom: var(--s5);
  background: var(--blue-050); color: var(--blue);
}
.icon-tile--amber { background: var(--amber-050); color: #A8730A; }
.section--navy .icon-tile { background: rgba(28,87,228,.22); color: #8FB2FF; }

.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid--sidebar { grid-template-columns: 1.35fr 1fr; gap: var(--s8); align-items: start; }

/* --------------------------------------------------------------- 8. Header */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.site-head__inner { display: flex; align-items: center; gap: var(--s6); height: 72px; }
.brand { display: flex; align-items: center; gap: var(--s3); flex: none; }
.brand img { height: 26px; width: auto; }
.brand__by {
  font-family: var(--font-h); font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  border-left: 1px solid var(--line); padding-left: var(--s3); line-height: 1.3;
}
.brand__by b { display: block; color: var(--navy); }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--s1); }
.nav__top {
  display: inline-flex; align-items: center; gap: 5px; background: none; border: 0;
  font-family: var(--font-h); font-weight: 500; font-size: var(--t-sm);
  color: var(--navy); padding: 9px 12px; border-radius: var(--r-sm); cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.nav__top:hover, .nav__top[aria-expanded="true"] { background: var(--blue-050); color: var(--blue); }
.nav__top .chev { transition: transform .18s var(--ease); }
.nav__top[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav__item { position: relative; }

.head-cta { display: flex; align-items: center; gap: var(--s3); flex: none; }

/* Mega menu */
.mega {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: var(--s6); z-index: 110;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.mega[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mega--wide { width: min(940px, calc(100vw - 48px)); }
.mega--mid  { width: min(680px, calc(100vw - 48px)); }
.mega__cols { display: grid; gap: var(--s6); }
.mega--wide .mega__cols { grid-template-columns: repeat(3, 1fr); }
.mega--mid  .mega__cols { grid-template-columns: repeat(2, 1fr); }
.mega__title {
  font-family: var(--font-h); font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s4);
}
.mega__link { display: block; padding: 10px 12px; border-radius: var(--r-sm); transition: background-color .15s var(--ease); }
.mega__link:hover { background: var(--paper-alt); }
.mega__link strong {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  font-family: var(--font-h); font-weight: 600; font-size: var(--t-sm); color: var(--navy);
}
.mega__txt span { display: block; font-size: var(--t-xs); color: var(--muted); margin-top: 2px; line-height: 1.5; }
.mega__promo {
  background: var(--navy); border-radius: var(--r); padding: var(--s5); color: #B6C7D9;
  display: flex; flex-direction: column; gap: var(--s3); align-self: start;
}
.mega__promo h4 { color: #fff; font-size: var(--t-base); }
.mega__promo p { font-size: var(--t-xs); line-height: 1.6; }

/* Mobile nav */
.burger {
  display: none; background: none; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  width: 44px; height: 44px; cursor: pointer; place-items: center; color: var(--navy);
}
.drawer {
  position: fixed; inset: 72px 0 0; background: var(--paper); z-index: 99;
  overflow-y: auto; padding: var(--s5) var(--s5) var(--s10);
  transform: translateX(100%); transition: transform .26s var(--ease);
  visibility: hidden;
}
.drawer[data-open="true"] { transform: none; visibility: visible; }
.drawer__group { border-bottom: 1px solid var(--line-soft); }
.drawer__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; padding: var(--s4) 0; cursor: pointer;
  font-family: var(--font-h); font-weight: 600; font-size: var(--t-md); color: var(--navy);
}
.drawer__trigger .chev { transition: transform .2s var(--ease); }
.drawer__trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.drawer__panel { display: none; padding-bottom: var(--s4); }
.drawer__panel[data-open="true"] { display: block; }
.drawer__panel a {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: 11px 0 11px var(--s4); font-size: var(--t-sm); color: var(--body);
  border-left: 2px solid var(--line-soft);
}
.drawer__panel a:hover { color: var(--blue); border-left-color: var(--blue); }
.drawer__cta { display: grid; gap: var(--s3); margin-top: var(--s6); }

/* ----------------------------------------------------------------- 9. Hero */
.hero {
  position: relative; background: var(--navy); color: #B9CADC; overflow: hidden;
  padding-block: clamp(64px, 8vw, 112px);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 70% 20%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 70% 20%, #000 20%, transparent 78%);
}
.hero::after {
  content: ""; position: absolute; width: 620px; height: 620px; right: -180px; top: -260px;
  background: radial-gradient(circle, rgba(28,87,228,.42) 0%, transparent 66%);
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 2; }
.hero h1 { color: #fff; }
.hero__sub { font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem); color: #A9BCD0; margin: var(--s5) 0 var(--s7); max-width: 60ch; }
.hero__inner { max-width: 780px; }
.hero--split .hero__inner { max-width: none; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s9); align-items: center; }

.pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: rgba(255,185,21,.12); border: 1px solid rgba(255,185,21,.34);
  color: #FFD167; font-family: var(--font-h); font-weight: 600; font-size: var(--t-xs);
  letter-spacing: .04em; padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: var(--s5);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #6FE0B4; box-shadow: 0 0 0 3px rgba(111,224,180,.2); }

.hero__trust div { display: flex; align-items: baseline; gap: var(--s2); }
.hero__trust b { font-family: var(--font-h); font-size: var(--t-2xl); font-weight: 800; color: #fff; line-height: 1; }
.hero__trust span { font-size: var(--t-sm); color: #8FA5BC; }

.crumbs { font-size: var(--t-xs); color: #8FA5BC; margin-bottom: var(--s5); }
.crumbs a:hover { color: var(--amber); }
.crumbs span[aria-current] { color: #C9D6E4; }

/* ------------------------------------------------------- 10. Answer blocks */
.answer {
  border-left: 3px solid var(--amber); background: var(--cream);
  padding: var(--s5) var(--s6); border-radius: 0 var(--r) var(--r) 0;
  margin-bottom: var(--s7);
}
.answer p { font-size: var(--t-lg); color: var(--ink); line-height: 1.6; }
.answer p + p { margin-top: var(--s3); font-size: var(--t-base); color: var(--muted); }

.callout {
  display: flex; gap: var(--s4); padding: var(--s5); border-radius: var(--r);
  background: var(--blue-050); border: 1px solid var(--blue-100);
}
.callout__icon { flex: none; color: var(--blue); }
.callout p { font-size: var(--t-base); color: var(--ink); }
.callout strong { font-family: var(--font-h); }

/* --------------------------------------------------------------- 11. Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.stat { padding: var(--s5) 0; border-top: 2px solid var(--line); }
.section--navy .stat { border-top-color: rgba(255,255,255,.14); }
.stat b {
  display: block; font-family: var(--font-h); font-weight: 800;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, var(--t-4xl)); color: var(--navy); line-height: 1.05;
}
.section--navy .stat b { color: #fff; }
.stat span { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: var(--s2); }
.section--navy .stat span { color: #93A9C0; }

/* ------------------------------------------------------- 12. Feature lists */
.checks { display: grid; gap: var(--s4); }
.checks--2 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4) var(--s7); }
.checks li { display: flex; gap: var(--s3); font-size: var(--t-base); align-items: flex-start; }
.checks li > svg { flex: none; margin-top: 4px; color: var(--live); }
.checks li b { font-family: var(--font-h); font-weight: 600; color: var(--navy); display: block; }
.section--navy .checks li b { color: #fff; }
.checks li p { font-size: var(--t-sm); color: var(--muted); margin-top: 2px; }
.section--navy .checks li p { color: #93A9C0; }

/* ----------------------------------------------------- 13. Split / feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split--rev > *:first-child { order: 2; }

/* App mock panel */
.mock {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); overflow: hidden;
}
.mock__bar {
  background: var(--navy); padding: var(--s3) var(--s5); display: flex; align-items: center;
  justify-content: space-between; gap: var(--s4);
}
.mock__bar strong { font-family: var(--font-h); font-size: var(--t-sm); color: #fff; font-weight: 600; }
.mock__bar em { font-style: normal; font-size: var(--t-xs); color: #8FA5BC; font-family: var(--font-m); }
.mock__body { padding: var(--s5); }
.mock__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) 0; border-bottom: 1px dashed var(--line);
  font-size: var(--t-sm);
}
.mock__row:last-child { border-bottom: 0; }
.mock__row span { color: var(--muted); }
.mock__row b { font-family: var(--font-h); color: var(--navy); font-weight: 600; }
.mock__row b.pos { color: var(--live); }
.mock__kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s3); margin-bottom: var(--s5); }
.mock__kpi { background: var(--paper-alt); border-radius: var(--r-sm); padding: var(--s4); }
.mock__kpi b { display: block; font-family: var(--font-h); font-size: var(--t-lg); color: var(--navy); }
.mock__kpi span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* --------------------------------------------------------- 14. Steps/flow */
.flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s4); counter-reset: step; }
.flow li {
  counter-increment: step; padding-top: var(--s6); position: relative;
  border-top: 2px solid var(--line);
}
.flow li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; top: var(--s4); left: 0;
  font-family: var(--font-h); font-size: var(--t-xs); font-weight: 700;
  color: var(--blue); letter-spacing: .08em;
}
.flow li::after {
  content: ""; position: absolute; top: -2px; left: 0; height: 2px; width: 0;
  background: var(--amber); transition: width .5s var(--ease);
}
.flow li.is-in::after { width: 100%; }
.flow h4 { font-size: var(--t-base); margin-bottom: var(--s2); }
.flow p { font-size: var(--t-sm); color: var(--muted); }

/* Numbered problem cards */
.probs { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); }
.prob { border-top: 2px solid rgba(255,255,255,.16); padding-top: var(--s5); }
.prob__n { font-family: var(--font-h); font-size: var(--t-xs); font-weight: 700; color: var(--amber); letter-spacing: .1em; }
.prob h3 { font-size: var(--t-lg); margin: var(--s3) 0; }
.prob p { font-size: var(--t-sm); color: #93A9C0; }

/* ------------------------------------------------------------ 15. Tabs/acc */
.tabs__list { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s7); }
.tabs__btn {
  font-family: var(--font-h); font-weight: 600; font-size: var(--t-sm);
  padding: 9px 18px; border-radius: var(--r-pill); border: 1.5px solid var(--line);
  background: var(--paper); color: var(--navy); cursor: pointer;
  transition: all .18s var(--ease);
}
.tabs__btn:hover { border-color: var(--blue); color: var(--blue); }
.tabs__btn[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.tabs__panel[hidden] { display: none; }
.tabs__panel { animation: fadeUp .32s var(--ease); }

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5);
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: var(--s5) 0; font-family: var(--font-h); font-weight: 600;
  font-size: var(--t-md); color: var(--navy);
}
.acc__btn:hover { color: var(--blue); }
.acc__ic { flex: none; width: 22px; height: 22px; position: relative; margin-top: 3px; }
.acc__ic::before, .acc__ic::after {
  content: ""; position: absolute; background: var(--blue); border-radius: 2px;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.acc__ic::before { inset: 10px 2px auto 2px; height: 2px; }
.acc__ic::after  { inset: 2px auto 2px 10px; width: 2px; }
.acc__btn[aria-expanded="true"] .acc__ic::after { transform: rotate(90deg); opacity: 0; }
.acc__panel { overflow: hidden; height: 0; transition: height .26s var(--ease); }
.acc__panel > div { padding: 0 0 var(--s5); max-width: 74ch; }
.acc__panel p + p, .acc__panel p + ul { margin-top: var(--s3); }
.acc__panel ul { display: grid; gap: var(--s2); }
.acc__panel ul li { padding-left: var(--s5); position: relative; font-size: var(--t-base); }
.acc__panel ul li::before { content: "—"; position: absolute; left: 0; color: var(--blue); }

/* --------------------------------------------------------------- 16. Table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 620px; }
.tbl thead th {
  background: var(--paper-alt); text-align: left; padding: var(--s4) var(--s5);
  font-family: var(--font-h); font-weight: 700; font-size: var(--t-xs);
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl tbody td { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody th {
  text-align: left; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-h); font-weight: 600; color: var(--navy); vertical-align: top;
}
.tbl tbody tr:hover td, .tbl tbody tr:hover th { background: #FCFDFE; }
.tbl .yes { color: var(--live); font-weight: 600; }
.tbl .no  { color: var(--muted); }

/* --------------------------------------------------------------- 17. Quote */
.quote {
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: var(--s7);
}
.quote blockquote { font-family: var(--font-h); font-size: var(--t-xl); line-height: 1.42; color: var(--navy); font-weight: 500; }
.quote figcaption { margin-top: var(--s5); font-size: var(--t-sm); color: var(--muted); }
.quote figcaption b { display: block; font-family: var(--font-h); color: var(--navy); }

/* ----------------------------------------------------------------- 18. CTA */
.cta-band { background: var(--navy); position: relative; overflow: hidden; }
.cta-band::after {
  content: ""; position: absolute; width: 560px; height: 560px; left: -160px; bottom: -300px;
  background: radial-gradient(circle, rgba(255,185,21,.16) 0%, transparent 65%);
}
.cta-band .wrap { position: relative; z-index: 2; }
.cta-band__inner { display: grid; grid-template-columns: 1.3fr auto; gap: var(--s8); align-items: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #A9BCD0; margin-top: var(--s4); font-size: var(--t-lg); max-width: 56ch; }

/* -------------------------------------------------------------- 19. Footer */
.site-foot { background: #02121F; color: #8FA5BC; padding-block: var(--s10) var(--s6); font-size: var(--t-sm); }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--s7) var(--s6); }
.foot-brand img { height: 26px; margin-bottom: var(--s4); }
.foot-brand p { max-width: 34ch; line-height: 1.7; }
.foot-col h3 { font-family: var(--font-h); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: var(--s4); }
.foot-col li + li { margin-top: var(--s3); }
.foot-col a:hover { color: var(--amber); }
.foot-bar {
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); justify-content: space-between;
  align-items: center; margin-top: var(--s9); padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.09); font-size: var(--t-xs);
}
.foot-bar nav { display: flex; flex-wrap: wrap; gap: var(--s5); }
.foot-note {
  margin-top: var(--s5); padding: var(--s4) var(--s5); border-radius: var(--r-sm);
  background: rgba(255,255,255,.04); font-size: var(--t-xs); line-height: 1.7; color: #7E93A9;
}

/* ---------------------------------------------------------------- 20. Form */
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s7); box-shadow: var(--sh-md); }
.field { margin-bottom: var(--s5); }
.field label { display: block; font-family: var(--font-h); font-weight: 600; font-size: var(--t-sm); color: var(--navy); margin-bottom: var(--s2); }
.field label .req { color: #C0392B; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); font-size: var(--t-base); transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(28,87,228,.12);
}
.field textarea { min-height: 116px; resize: vertical; }
.field__hint { font-size: var(--t-xs); color: var(--muted); margin-top: 5px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }

/* -------------------------------------------------------- 21. Misc helpers */
.tag-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tag {
  font-family: var(--font-h); font-size: var(--t-xs); font-weight: 600;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--paper-alt); border: 1px solid var(--line); color: var(--body);
}
.rule { height: 1px; background: var(--line); border: 0; margin-block: var(--s8); }
.prose { max-width: 74ch; }
.prose > * + * { margin-top: var(--s5); }
.prose h2 { margin-top: var(--s9); }
.prose h3 { margin-top: var(--s7); }
.prose ul { display: grid; gap: var(--s3); }
.prose ul li { padding-left: var(--s5); position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.mt-0 { margin-top: 0 !important; }
.center { text-align: center; }
.dl-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s5); }
.dl-item { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5); background: var(--paper); }
.dl-item dt { font-family: var(--font-h); font-weight: 700; color: var(--navy); font-size: var(--t-base); margin-bottom: var(--s2); }
.dl-item dd { font-size: var(--t-sm); color: var(--muted); }

/* --------------------------------------------------------- 22. Animation */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Reveal is opt-in: JS adds .anim to <html> only when the page is visible and
   motion is allowed. Without that class the content is simply shown, so a
   throttled background tab, a JS failure or a blocked script can never leave
   a section stuck at opacity 0. */
html.anim .reveal { opacity: 0; transform: translateY(16px); }
html.anim .reveal.is-in { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
html.anim .reveal.is-in[data-d="1"] { transition-delay: .07s; }
html.anim .reveal.is-in[data-d="2"] { transition-delay: .14s; }
html.anim .reveal.is-in[data-d="3"] { transition-delay: .21s; }
html.anim .reveal.is-in[data-d="4"] { transition-delay: .28s; }
html.anim .reveal.is-in[data-d="5"] { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .flow li::after { width: 100%; }
}

/* ------------------------------------------------------- 23. Breakpoints */
@media (max-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .flow { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .nav, .head-cta .btn--outline { display: none; }
  .burger { display: grid; margin-left: auto; }
  .hero--split .hero__inner { grid-template-columns: 1fr; gap: var(--s8); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--sidebar { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--rev > *:first-child { order: 0; }
  .probs { grid-template-columns: 1fr; }
  .cta-band__inner { grid-template-columns: 1fr; gap: var(--s6); }
  .stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px) {
  :root { --t-md: 1rem; }
  .grid--2, .grid--3, .grid--4, .checks--2, .form-row, .dl-grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .card { padding: var(--s5); }
  .quote, .form-card { padding: var(--s5); }
  .avail-key { flex-direction: column; gap: var(--s4); }
  .hero__trust div { flex: 1 1 40%; flex-direction: column; gap: 2px; }
}
@media (max-width: 420px) {
  .brand__by { display: none; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .stats { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- Print */
@media print {
  .site-head, .drawer, .cta-band, .site-foot, .skip { display: none; }
  body { color: #000; }
  .reveal { opacity: 1; transform: none; }
}

/* ===== premium overrides ===== */
/* ==========================================================================
   GoDravix — premium layer
   Scroll-driven showcases, animated SVG stages, architecture diagram,
   spotlight cards, counters, marquee. Loads after godravix.css.
   Every motion rule collapses under prefers-reduced-motion at the bottom.
   ========================================================================== */

/* --------------------------------------------------------- 1. Hero upgrade */
.hero {
  padding-block: clamp(52px, 5.5vw, 84px);
  isolation: isolate;
}
.hero h1 { font-size: clamp(2rem, 1.5rem + 2.1vw, 3.25rem); }
.hero__sub { font-size: clamp(1rem, .96rem + .28vw, 1.1875rem); margin: var(--s4) 0 var(--s6); max-width: 56ch; }
.hero .pill { margin-bottom: var(--s4); }
.hero--split .hero__inner { gap: clamp(32px, 4vw, 64px); }

/* Aurora — three slow-drifting radial fields, no gradient banding */
.hero__aurora {
  position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none;
  filter: blur(48px); opacity: .85;
}
.hero__aurora span {
  position: absolute; display: block; border-radius: 50%;
  will-change: transform;
}
.hero__aurora span:nth-child(1) {
  width: 46vw; height: 46vw; right: 2%; top: -6%;
  background: radial-gradient(circle, rgba(28,87,228,.55) 0%, rgba(28,87,228,0) 68%);
  animation: drift1 22s ease-in-out infinite;
}
.hero__aurora span:nth-child(2) {
  width: 34vw; height: 34vw; right: 26%; top: 34%;
  background: radial-gradient(circle, rgba(255,185,21,.20) 0%, rgba(255,185,21,0) 66%);
  animation: drift2 27s ease-in-out infinite;
}
.hero__aurora span:nth-child(3) {
  width: 40vw; height: 40vw; left: -8%; bottom: -22%;
  background: radial-gradient(circle, rgba(21,56,96,.75) 0%, rgba(21,56,96,0) 70%);
  animation: drift3 31s ease-in-out infinite;
}
@keyframes drift1 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-4%,5%,0) scale(1.09)} }
@keyframes drift2 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(6%,-6%,0) scale(1.14)} }
@keyframes drift3 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(5%,-4%,0) scale(1.07)} }

.hero::after { display: none; }
.hero > .wrap { z-index: 2; }

/* Hero entrance — staged, once, on load */
.hero .pill, .hero h1, .hero__sub, .hero .btn-row, .hero .crumbs { animation: heroUp .72s var(--ease) both; }
.hero .crumbs   { animation-delay: .02s; }
.hero .pill     { animation-delay: .06s; }
.hero h1        { animation-delay: .12s; }
.hero__sub      { animation-delay: .20s; }
.hero .btn-row  { animation-delay: .28s; }
.hero--split > .wrap > .hero__inner > div:last-child { animation: heroUp .9s var(--ease) .30s both; }
@keyframes heroUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.pill { backdrop-filter: blur(6px); }
.pill .dot { animation: pulseDot 2.4s ease-in-out infinite; }
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 0 rgba(111,224,180,.55); }
  70%     { box-shadow: 0 0 0 7px rgba(111,224,180,0); }
}

/* Trust figures — divider rules rather than floating text */
.hero__trust div { flex-direction: column; align-items: flex-start; gap: 2px; }
.hero__trust b { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.02em; }

/* ------------------------------------------------------- 2. Nav on scroll */
.site-head { transition: box-shadow .25s var(--ease), background-color .25s var(--ease); }
.site-head[data-stuck="true"] {
  box-shadow: 0 1px 0 rgba(3,25,49,.07), 0 8px 28px rgba(3,25,49,.07);
  background: rgba(255,255,255,.95);
}
.site-head[data-stuck="true"] .site-head__inner { height: 64px; }
.site-head__inner { transition: height .25s var(--ease); }

/* Scroll progress hairline */
.scrollbar {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--amber));
}

/* --------------------------------------------------- 3. Spotlight surfaces */
.card, .dl-item {
  position: relative; overflow: hidden;
  background-image: radial-gradient(
    460px circle at var(--mx, 50%) var(--my, -20%),
    rgba(28,87,228,.07), transparent 62%);
  background-repeat: no-repeat;
}
.card--link::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 1px; opacity: 0;
  background: linear-gradient(135deg, rgba(28,87,228,.65), rgba(255,185,21,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .25s var(--ease);
}
.card--link:hover::after { opacity: 1; }
.card--link:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

.icon-tile {
  position: relative; width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(150deg, var(--blue-050), #fff);
  border: 1px solid var(--blue-100);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.card:hover .icon-tile { transform: translateY(-2px) rotate(-3deg); border-color: rgba(28,87,228,.4); }
.icon-tile--amber { background: linear-gradient(150deg, var(--amber-050), #fff); border-color: rgba(255,185,21,.35); }

/* --------------------------------------------------- 4. Sticky showcase */
.showcase { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.showcase__list { display: flex; flex-direction: column; }
.showcase__item {
  position: relative; padding: var(--s6) 0 var(--s6) var(--s6);
  border-left: 2px solid var(--line);
  cursor: pointer; transition: border-color .35s var(--ease);
}
.showcase__item::before {
  content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: 0;
  background: linear-gradient(180deg, var(--blue), var(--amber));
  transition: height .45s var(--ease);
}
.showcase__item[data-on="true"]::before { height: 100%; }
.showcase__item h3 {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  font-size: var(--t-xl); color: var(--muted);
  transition: color .35s var(--ease);
}
.showcase__item[data-on="true"] h3 { color: var(--navy); }
.showcase__item p {
  color: var(--muted); font-size: var(--t-base); margin-top: var(--s3);
  max-width: 46ch;
  opacity: .45; transition: opacity .35s var(--ease);
}
.showcase__item[data-on="true"] p { opacity: 1; }
.showcase__item .tlink { margin-top: var(--s4); opacity: 0; transform: translateY(-4px); transition: .35s var(--ease); pointer-events: none; }
.showcase__item[data-on="true"] .tlink { opacity: 1; transform: none; pointer-events: auto; }
.showcase__item .avail { opacity: .5; transition: opacity .35s var(--ease); }
.showcase__item[data-on="true"] .avail { opacity: 1; }

.showcase__stage { position: sticky; top: 108px; }
.stage {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(165deg, #06203C 0%, #031931 60%, #061A2E 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 70px rgba(3,25,49,.28);
  aspect-ratio: 4 / 3.35;
}
.stage::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 30%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 30%, transparent 76%);
}
.stage__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: var(--s7) var(--s6) var(--s5);
  background: linear-gradient(transparent, rgba(3,25,49,.9) 42%);
  font-family: var(--font-h); font-size: var(--t-sm); color: #A9BCD0;
}
.stage__cap b { color: #fff; display: block; font-size: var(--t-base); margin-bottom: 2px; }
.viz {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; padding: var(--s7);
  opacity: 0; visibility: hidden; transform: scale(.975);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.viz[data-on="true"] { opacity: 1; visibility: visible; transform: none; }
.viz svg { width: 100%; height: auto; max-height: 100%; overflow: hidden; }

/* Only animate the visible stage */
.viz [data-anim] { animation-play-state: paused; }
.viz[data-on="true"] [data-anim] { animation-play-state: running; }

/* ------------------------------------------------- 5. SVG visual language */
.vz-grid   { stroke: rgba(255,255,255,.10); stroke-width: 1; }
.vz-axis   { stroke: rgba(255,255,255,.22); stroke-width: 1.25; }
.vz-line   { stroke: #4E86FF; stroke-width: 2.25; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vz-line-2 { stroke: var(--amber); stroke-width: 2.25; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vz-dash   { stroke: rgba(255,255,255,.3); stroke-width: 1.5; stroke-dasharray: 4 5; fill: none; }
.vz-card   { fill: rgba(255,255,255,.055); stroke: rgba(255,255,255,.14); stroke-width: 1; }
.vz-card-a { fill: rgba(28,87,228,.24); stroke: rgba(120,164,255,.55); stroke-width: 1.25; }
.vz-card-w { fill: rgba(255,185,21,.15); stroke: rgba(255,185,21,.45); stroke-width: 1.25; }
.vz-fill   { fill: #4E86FF; }
.vz-fill-w { fill: var(--amber); }
.vz-fill-g { fill: #46D6A2; }
.vz-fill-m { fill: rgba(255,255,255,.2); }
.vz-t      { fill: #C9D6E4; font-family: 'Inter', sans-serif; font-size: 12px; }
.vz-tb     { fill: #fff; font-family: 'Archivo', sans-serif; font-size: 13.5px; font-weight: 600; }
.vz-ts     { fill: #90A7BE; font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.vz-tw     { fill: #FFD167; font-family: 'Archivo', sans-serif; font-size: 13.5px; font-weight: 600; }
.vz-tg     { fill: #6FE0B4; font-family: 'Archivo', sans-serif; font-size: 12.5px; font-weight: 600; }
.vz-mono   { fill: #9FB6CD; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10px; }

/* Motion primitives used by the visuals */
@keyframes drawIn   { to { stroke-dashoffset: 0; } }
@keyframes riseBar  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes travel   { to { offset-distance: 100%; } }
@keyframes blip     { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes fillUp   { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dropIn   { 0% { opacity:0; transform: translateY(-26px); } 60% { opacity:1; } 100% { opacity:1; transform: none; } }
@keyframes sweep    { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }

.a-draw  { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); animation: drawIn 1.5s var(--ease) forwards; }
.a-bar   { transform-origin: 50% 100%; animation: riseBar .8s var(--ease) both; }
.a-fill  { transform-origin: 50% 100%; animation: fillUp 1.1s var(--ease) both; }
.a-in    { animation: slideUp .6s var(--ease) both; }
.a-fade  { animation: fadeIn .7s var(--ease) both; }
.a-drop  { animation: dropIn .7s var(--ease) both; }
.a-blip  { animation: blip 2.2s ease-in-out infinite; }

.d1{animation-delay:.10s} .d2{animation-delay:.22s} .d3{animation-delay:.34s}
.d4{animation-delay:.46s} .d5{animation-delay:.58s} .d6{animation-delay:.70s}
.d7{animation-delay:.82s} .d8{animation-delay:.94s} .d9{animation-delay:1.06s}
.d10{animation-delay:1.18s} .d11{animation-delay:1.30s} .d12{animation-delay:1.42s}

/* Travelling pulse along a path */
.pulse-dot { r: 3.5; fill: var(--amber); filter: drop-shadow(0 0 6px rgba(255,185,21,.85)); }

/* --------------------------------------------- 6. Architecture diagram */
.arch {
  position: relative; border-radius: var(--r-xl); padding: clamp(24px, 4vw, 56px);
  background: linear-gradient(170deg, #06203C, #031931);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 30px 70px rgba(3,25,49,.24);
  overflow: hidden;
}
.arch::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 75%);
}
.arch > * { position: relative; z-index: 2; }
.arch svg { width: 100%; height: auto; overflow: hidden; }
.arch__legend {
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s7); justify-content: center;
  margin-top: var(--s7); padding-top: var(--s6);
  border-top: 1px solid rgba(255,255,255,.1);
}
.arch__legend span { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: #A9BCD0; }
.arch__legend i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.lg-solid  { background: rgba(28,87,228,.5); border: 1px solid rgba(120,164,255,.7); }
.lg-dashed { background: transparent; border: 1.5px dashed rgba(255,255,255,.4); }
.lg-amber  { background: rgba(255,185,21,.35); border: 1px solid rgba(255,185,21,.75); }
.lg-dashed { border-color: rgba(255,255,255,.34); }

/* ------------------------------------------------------- 7. Counters */
.stat b[data-count] { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- 8. Marquee */
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee .tag {
  white-space: nowrap; background: var(--paper); border-color: var(--line);
  font-size: var(--t-sm); padding: 8px 16px;
}
.marquee .tag .avail { margin-left: 6px; }

/* --------------------------------------------------- 9. Section rhythm */
.section--navy + .section--navy { padding-top: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--s2); }
.eyebrow::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .55;
}
.sec-head--center .eyebrow::before { display: none; }

.answer {
  border-left: 0; border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--cream), #fff 65%);
  border: 1px solid var(--line);
  position: relative; padding: var(--s7);
}
.answer::before {
  content: ""; position: absolute; left: 0; top: var(--s6); bottom: var(--s6); width: 3px;
  border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--blue), var(--amber));
}

.callout { border-radius: var(--r-lg); align-items: flex-start; }
.callout__icon { margin-top: 2px; }

/* Numbered problem cards — heavier index */
.prob__n {
  display: block; font-size: var(--t-2xl); font-weight: 800; line-height: 1;
  margin-bottom: var(--s4); color: rgba(255,255,255,.16);
  font-family: var(--font-h);
}
.prob { border-top-width: 1px; padding-top: var(--s6); transition: border-color .3s var(--ease); }

/* Flow steps — connector line */
.flow { position: relative; }
.flow li { padding-top: var(--s7); }
.flow li::before { top: var(--s5); }

/* Tables */
.tbl thead th { background: var(--navy); color: #A9BCD0; border-bottom: 0; }
.table-wrap { box-shadow: var(--sh); }

/* CTA band */
.cta-band { border-radius: 0; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 100% at 30% 50%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 30% 50%, #000, transparent 72%);
}

/* Buttons — subtle sheen on primary */
.btn--primary, .btn--amber { position: relative; overflow: hidden; }
.btn--primary::before, .btn--amber::before {
  content: ""; position: absolute; top: 0; left: 0; width: 34%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent);
  transform: translateX(-140%); pointer-events: none;
}
.btn--primary:hover::before, .btn--amber:hover::before { animation: sweep .75s var(--ease); }

/* Mega menu polish */
.mega { border-radius: var(--r-xl); }
.mega__link { transition: background-color .15s var(--ease), transform .15s var(--ease); }
.mega__link:hover { background: var(--blue-050); transform: translateX(2px); }
.mega__promo { background: linear-gradient(155deg, #0A2645, #031931); }

/* Quote */
.quote { border-radius: var(--r-lg); border-left-width: 3px; }

/* ------------------------------------------------------ 10. Breakpoints */


/* --------------------------------------------- 11. Reduced motion (final) */


/* ==========================================================================
   12. Round two — mature capability model, richer nav, statement bands
   ========================================================================== */

/* -------------------------------------------------- 12.1 Nav: never wrap */
.site-head__inner { gap: var(--s5); }
.nav__list { gap: 2px; }
.nav__top {
  white-space: nowrap;
  padding: 9px 11px;
  font-size: 14px;
}
.head-cta { gap: var(--s2); }
.head-cta .btn { white-space: nowrap; }
.brand__by { font-size: 9.5px; letter-spacing: .09em; }


/* -------------------------------------------- 12.2 Mega menu, redesigned */
.mega--wide { width: min(1000px, calc(100vw - 40px)); }
.mega--mid  { width: min(720px, calc(100vw - 40px)); }
.mega { padding: var(--s6); border-radius: 20px; }
.mega--wide .mega__cols { grid-template-columns: 1fr 1fr 1.05fr; gap: var(--s5); }
.mega--mid  .mega__cols { grid-template-columns: 1fr 1fr; gap: var(--s5); }
.mega__col + .mega__col { position: relative; }
.mega--wide .mega__col + .mega__col::before {
  content: ""; position: absolute; left: calc(var(--s5) * -.5); top: 4px; bottom: 4px;
  width: 1px; background: var(--line-soft);
}
.mega__title {
  font-size: 10.5px; letter-spacing: .13em; color: var(--muted);
  padding-left: 10px; margin-bottom: var(--s3);
}
.mega__link {
  display: grid; grid-template-columns: 34px 1fr 16px; align-items: center;
  gap: var(--s3); padding: 10px; border-radius: 12px;
}
.mega__ic {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--paper-alt); color: var(--muted);
  border: 1px solid var(--line-soft);
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.mega__link:hover .mega__ic {
  background: var(--blue); color: #fff; border-color: var(--blue);
  transform: translateY(-1px) rotate(-4deg);
}
.mega__txt { min-width: 0; }
.mega__txt strong { display: block; font-size: 13.5px; }
.mega__txt > span { font-size: 11.5px; }
.mega__go { color: var(--blue); opacity: 0; transform: translateX(-4px); transition: .2s var(--ease); }
.mega__link:hover .mega__go { opacity: 1; transform: none; }

.mega__promo {
  border-radius: 16px; padding: var(--s5);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(28,87,228,.5), transparent 60%),
    linear-gradient(155deg, #0A2645, #031931);
  border: 1px solid rgba(255,255,255,.09);
  gap: var(--s3);
}
.mega__promo-eye {
  font-family: var(--font-h); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--amber);
}
.mega__promo h4 { font-size: 15px; line-height: 1.3; }
.mega__figs {
  display: flex; gap: var(--s4); flex-wrap: wrap;
  padding-top: var(--s3); margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.12);
}
.mega__figs div { display: flex; flex-direction: column; }
.mega__figs b { font-family: var(--font-h); font-size: 17px; color: #fff; line-height: 1.1; }
.mega__figs span { font-size: 10px; color: #8FA5BC; }

.drawer__ic {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 8px; background: var(--paper-alt); color: var(--muted);
  margin-right: var(--s2); flex: none;
}

/* --------------------------------- 12.3 Capability ledger (the honest one) */

.ledger-note { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s5); }
.ledger-note a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* Scope list — forward or out-of-scope, stated once without per-item pills */
.scope__head { font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s5); max-width: 62ch; }
.scope__list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4) var(--s7); }
.scope__item {
  padding-left: var(--s5); position: relative;
  border-left: 2px solid var(--line);
}
.scope__item b { display: block; font-family: var(--font-h); font-weight: 600; font-size: var(--t-base); color: var(--navy); }
.scope__item span { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: 3px; }

/* The remaining badges are quiet by design */
.avail { font-size: 10px; padding: 2px 8px; letter-spacing: .05em; font-weight: 600; }
.avail--plan { background: transparent; border-color: var(--line); color: var(--muted); }
.avail--plan::before { display: none; }

/* ------------------------------------------------- 12.4 Statement band */
.stmt {
  position: relative; display: grid; grid-template-columns: 1.35fr .65fr;
  align-items: center; gap: var(--s6);
  border-radius: 24px; overflow: hidden;
  padding: clamp(28px, 4vw, 56px);
  background: linear-gradient(120deg, #FBF7F0 0%, #F6F1E8 55%, #F2EEF7 100%);
  border: 1px solid rgba(3,25,49,.07);
}
.stmt--navy {
  background: linear-gradient(120deg, #06203C 0%, #031931 60%, #0A2645 100%);
  border-color: rgba(255,255,255,.1);
}
.stmt--navy h2 { color: #fff; }
.stmt--navy .stmt__quals { color: #A9BCD0; }
.stmt__body { position: relative; z-index: 2; }
.stmt h2 { font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2rem); max-width: 24ch; line-height: 1.22; }
.stmt__quals { margin-top: var(--s4); color: var(--body); font-size: var(--t-base); }
.stmt__sep { color: var(--line); margin-inline: 4px; }
.stmt--navy .stmt__sep { color: rgba(255,255,255,.25); }
.stmt__art { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; z-index: 1; pointer-events: none; }
.stmt__art svg { width: 100%; height: 100%; }
/* --------------------------------------------- 12.5 Animated flow steps */
/* 12.5 kept only the icon-pop animation; the 6-up rail it belonged to has been
   superseded twice. See 36.6 for the current lifecycle spine. */
.fstep__ic svg { animation: iconPop .6s var(--ease) both; animation-play-state: paused; }
.fstep.is-in .fstep__ic svg { animation-play-state: running; }
@keyframes iconPop { from { opacity: 0; transform: scale(.75) rotate(-12deg); } to { opacity: 1; transform: none; } }

/* ------------------------------------- 12.6 Sector capability panel */
.spanel { display: grid; gap: var(--s3); align-content: start; }
.spanel__row {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: var(--s3);
  padding: 13px var(--s4); border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); font-size: var(--t-sm);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.spanel__row:hover { border-color: var(--blue-100); transform: translateX(3px); box-shadow: var(--sh-sm); }
.spanel__row b { font-family: var(--font-h); font-weight: 600; color: var(--navy); }
.spanel__ic { color: var(--blue); display: grid; place-items: center; }
.spanel__row--off { background: var(--paper-alt); border-style: dashed; }
.spanel__row--off .spanel__ic { color: var(--muted); }
.spanel__row--off b { color: var(--muted); font-weight: 500; }
.spanel__meta { font-size: 11px; color: var(--muted); font-family: var(--font-h); white-space: nowrap; }

/* -------------------------------------------------- 12.7 Step card grid */
.stepgrid > li { display: flex; }
.stepgrid .card { width: 100%; }
.stepcta {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: var(--s4); width: 100%; padding: var(--s6);
  border-radius: var(--r-lg); text-align: left;
  background: linear-gradient(150deg, var(--navy), #0A2645);
  border: 1px solid rgba(255,255,255,.1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.stepcta:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.stepcta h4 { color: #fff; font-size: var(--t-base); line-height: 1.35; }
.stepcta p { color: #A9BCD0; font-size: var(--t-sm); }
.stepcta .tlink { color: var(--amber); }

/* ------------------------------------------------- 12.8 Breakpoints */


/* Standalone stages and the architecture diagram animate on entry, once */
.arch [class*="a-"] { animation-play-state: paused; }
.arch[data-on="true"] [class*="a-"] { animation-play-state: running; }
.viz[data-on="false"] { opacity: 0; }
.stage > .viz:only-of-type { opacity: 1; visibility: visible; transform: none; }
.stage > .viz:only-of-type[data-on="false"] [class*="a-"] { animation-play-state: paused; }


/* Sector / market fit marker — a judgement, not a build-status pill */
.fit {
  font-family: var(--font-h); font-weight: 600; font-size: 11px;
  padding: 4px 11px; border-radius: 100px; white-space: nowrap; flex: none;
}
.fit--yes   { background: var(--live-bg);  color: var(--live); }
.fit--maybe { background: var(--blue-050); color: var(--blue-700); }
.fit--no    { background: var(--paper-alt); color: var(--muted); border: 1px solid var(--line); }

/* Reserve room under every stage visual so the caption never sits on the SVG */
.viz { padding: var(--s7) var(--s7) calc(var(--s7) + 48px); }


/* ==========================================================================
   13. Hero console — self-running loan ledger
   ========================================================================== */
.cns { position: relative; padding: 26px 14px 30px; }

.cns__panel {
  position: relative; z-index: 2; border-radius: 20px; overflow: hidden;
  background: linear-gradient(168deg, rgba(10,38,69,.92), rgba(3,25,49,.96));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 34px 80px rgba(2,12,24,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter: blur(10px);
}

/* Floating satellite chips */
@keyframes floatA { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
@keyframes floatB { 0%,100% { transform: translateY(0) } 50% { transform: translateY(7px) } }

/* Header */
.cns__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
}
.cns__live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-h); font-weight: 600; font-size: 12.5px; color: #fff;
}
.cns__live i {
  width: 7px; height: 7px; border-radius: 50%; background: #46D6A2;
  box-shadow: 0 0 0 0 rgba(70,214,162,.6); animation: pulseDot 2.2s ease-in-out infinite;
}
.cns__ref { font-family: var(--font-m); font-size: 11px; color: #7F97AF; letter-spacing: .02em; }

/* KPI row */
.cns__kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,.07); }
.cns__kpis > div { background: rgba(3,25,49,.6); padding: 14px 18px; }
.cns__kpis span {
  display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #7F97AF; font-family: var(--font-h); font-weight: 600;
}
.cns__kpis b {
  display: block; font-family: var(--font-h); font-weight: 700; font-size: 19px;
  color: #fff; margin-top: 4px; font-variant-numeric: tabular-nums; line-height: 1.15;
}
.cns__kpis b::before { content: "\20B9"; font-size: 13px; opacity: .55; margin-right: 2px; }

/* Scene stage */
.cns__stage { position: relative; height: 116px; padding: 16px 18px; }
.cns__scene {
  position: absolute; inset: 16px 18px;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.cns__scene[data-on="true"] { opacity: 1; visibility: visible; transform: none; }

.cns__note {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: #93A9C0; line-height: 1.4;
}
.cns__note--lock { color: #FFD167; }
.cns__note--ok { color: #6FE0B4; }

/* Scene 0 — approval gate */
.cns__gate { display: flex; align-items: center; gap: 6px; }
.cns__role {
  flex: 1; padding: 9px 11px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.cns__role span { display: block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #7F97AF; }
.cns__role b { display: block; font-family: var(--font-h); font-size: 12px; color: #fff; margin-top: 2px; }
.cns__scene[data-on="true"] .cns__role {
  animation: roleIn .5s var(--ease) both;
}
.cns__scene[data-on="true"] .cns__role[data-role="1"] { animation-delay: .05s; }
.cns__scene[data-on="true"] .cns__role[data-role="2"] { animation-delay: .35s; background: rgba(28,87,228,.28); border-color: rgba(120,164,255,.5); }
.cns__scene[data-on="true"] .cns__role[data-role="3"] { animation-delay: .65s; }
@keyframes roleIn { from { opacity: .25; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.cns__link { width: 16px; height: 1.5px; background: rgba(255,255,255,.22); flex: none; }

/* Scene 1 — accrual bars */
.cns__bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.cns__bars i {
  flex: 1; border-radius: 3px 3px 0 0; height: var(--h);
  background: linear-gradient(180deg, #6C9BFF, #2C6BF0);
  transform-origin: 50% 100%; transform: scaleY(0);
}
.cns__scene[data-on="true"] .cns__bars i {
  animation: barUp .55s var(--ease) both; animation-delay: var(--d);
}
.cns__bars i:last-child { background: linear-gradient(180deg, #FFD167, #E5A200); }
@keyframes barUp { to { transform: scaleY(1); } }

/* Scene 2 — waterfall */
.cns__fall { display: flex; gap: 5px; height: 46px; }
.cns__seg {
  width: var(--w); border-radius: 8px; display: grid; place-items: center;
  transform-origin: 0 50%; transform: scaleX(0);
}
.cns__seg span { font-family: var(--font-h); font-size: 10px; font-weight: 600; color: #04203c; }
.cns__seg--p { background: #FFB915; }
.cns__seg--i { background: #6C9BFF; }
.cns__seg--n { background: #46D6A2; }
.cns__scene[data-on="true"] .cns__seg { animation: segIn .5s var(--ease) both; }
.cns__scene[data-on="true"] .cns__seg--p { animation-delay: .05s; }
.cns__scene[data-on="true"] .cns__seg--i { animation-delay: .28s; }
.cns__scene[data-on="true"] .cns__seg--n { animation-delay: .51s; }
@keyframes segIn { to { transform: scaleX(1); } }

/* Ledger log */
.cns__log { border-top: 1px solid rgba(255,255,255,.09); padding: 6px 0; }
.cns__row {
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 10px;
  padding: 7px 18px; font-size: 11.5px;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background-color .3s var(--ease);
}
.cns__row[data-in="true"] { opacity: 1; transform: none; }
.cns__row[data-new="true"] { background: rgba(28,87,228,.16); }
.cns__t   { font-family: var(--font-m); font-size: 10px; color: #7F97AF; }
.cns__ev  { color: #D6E2EE; }
.cns__who { font-size: 10px; color: #7F97AF; }

/* Footer */
.cns__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 11px 18px; border-top: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
}


/* ==========================================================================
   14. One family — the console/statement language applied sitewide
   ========================================================================== */

/* 14.1 Shared panel chrome ------------------------------------------------ */
.cns__panel, .stage, .arch {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 34px 80px rgba(2,12,24,.42), inset 0 0 0 1px rgba(255,255,255,.03);
  background: linear-gradient(168deg, rgba(10,38,69,.94), rgba(3,25,49,.97));
}
.stage::before, .arch::before {
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 82% 82% at 50% 38%, #000 28%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 82% 82% at 50% 38%, #000 28%, transparent 78%);
}

/* Panels that carry orbiting chips need room and a stacking context */
.panelwrap { position: relative; padding: 26px 14px 30px; }
.panelwrap > .stage, .panelwrap > .arch { position: relative; z-index: 2; }

/* 14.2 Satellite chips — same motif as the hero console -------------------- */

/* 14.3 Stage header + footer, matching the console ------------------------- */
.stage__head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
}
.stage__head .cns__live { font-size: 12.5px; }
.stage__cap {
  padding: var(--s7) 18px 14px;
  background: linear-gradient(transparent, rgba(3,25,49,.94) 44%);
  border-top: 0;
}
.stage__cap b { font-size: 13.5px; }
.stage__cap span { font-size: 11.5px; }
.stage:has(.stage__head) .viz { padding-top: calc(var(--s7) + 26px); }

/* 14.4 One micro-label style ---------------------------------------------- */
.mlabel, .cns__kpis span, .stmt__quals, .kstrip span {
  font-family: var(--font-h); font-weight: 600;
}
.mlabel {
  display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}

/* 14.5 KPI strip — the console's hairline grid, reused for stats ----------- */
.stats {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.stat {
  border-top: 0; background: var(--paper); padding: 18px 20px; margin: 0;
  transition: background-color .25s var(--ease);
}
.stat:hover { background: var(--paper-alt); }
.stat b { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); letter-spacing: -.02em; }
.stat span {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  font-family: var(--font-h); font-weight: 600; color: var(--muted); margin-top: 5px;
}
.section--navy .stats { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.14); }
.section--navy .stat { background: #06203C; }
.section--navy .stat:hover { background: #0A2645; }

/* 14.6 Pill CTA, promoted from the statement band ------------------------- */
.btn--pill {
  display: inline-flex; align-items: center; gap: var(--s3);
  padding: 13px 24px; border: 0;
  background: var(--navy); color: #fff; min-height: 50px;
  font-family: var(--font-h); font-weight: 600; font-size: var(--t-base);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.btn--pill:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(3,25,49,.24); }
.btn--pill .pill-arrow {
  display: grid; place-items: center; flex: none;
  transition: transform .25s var(--ease);
}
.btn--pill:hover .pill-arrow { transform: translateX(3px); }
.btn--pill-light { background: #fff; color: var(--navy); }
.btn--pill-amber { background: var(--amber); color: #2B1D00; }

/* 14.7 Closing CTA band inherits the statement band ------------------------ */
.cta-band { padding-block: 0; background: transparent; }
.cta-band::after, .cta-band::before { display: none; }
.cta-band .wrap { padding-block: clamp(40px, 5vw, 72px); }
.cta-band__inner {
  position: relative; display: grid; grid-template-columns: 1.35fr auto;
  align-items: center; gap: var(--s7);
  border-radius: 24px; overflow: hidden; padding: clamp(28px, 4vw, 56px);
  background: linear-gradient(120deg, #06203C 0%, #031931 60%, #0A2645 100%);
  border: 1px solid rgba(255,255,255,.1);
}
.cta-band__art { position: absolute; right: 0; top: 0; bottom: 0; width: 44%; z-index: 1; pointer-events: none; }
.cta-band__art svg { width: 100%; height: 100%; }
.cta-band h2 { font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2rem); max-width: 24ch; line-height: 1.22; }
.cta-band p { font-size: var(--t-base); max-width: 52ch; }

/* 14.8 Tab / dot indicators share the console bar --------------------------- */
.tabs__list { gap: var(--s4); border-bottom: 1px solid var(--line); padding-bottom: 0; }
.tabs__btn {
  border: 0; background: none; border-radius: 0; padding: 10px 0 14px;
  color: var(--muted); position: relative;
}
.tabs__btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  border-radius: 3px; background: var(--amber);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease);
}
.tabs__btn:hover { background: none; color: var(--navy); }
.tabs__btn[aria-selected="true"] { background: none; color: var(--navy); }
.tabs__btn[aria-selected="true"]::after { transform: scaleX(1); }

/* 14.9 Cards pick up the console's tighter chrome -------------------------- */
.card { border-radius: 16px; }
.mega, .form-card, .quote, .table-wrap, .cl { border-radius: 20px; }
.stmt { border-radius: 24px; }

/* 14.10 Mega icon tiles — smaller, higher contrast ------------------------- */
.mega__ic {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--blue-050); color: var(--blue); border-color: var(--blue-100);
}
.mega__link { grid-template-columns: 32px 1fr 15px; }


/* ==========================================================================
   15. Round three — fixes
   ========================================================================== */

/* 15.1 superseded by section 18 — decorative layers are positioned there */

/* 15.2 Satellite chips straddle the panel edge instead of floating off it */
.panelwrap { padding: 20px 16px 22px; }
.cns { padding: 20px 16px 22px; }

/* 15.3 Architecture: reclaim the dead space under the legend */
.arch { padding: clamp(22px, 3vw, 40px); }
.arch__legend { margin-top: var(--s5); padding-top: var(--s5); }

/* 15.4 Slim status line — replaces the heavy callout */
.statusline a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }


/* 15.5 Mega menu: drop the tile, let the glyph carry the row */
.mega__link { grid-template-columns: 26px 1fr 15px; gap: var(--s4); padding: 11px 12px; }
.mega__ic {
  width: 26px; height: 26px; border: 0; background: none; border-radius: 0;
  color: var(--blue); display: grid; place-items: center;
}
.mega__link:hover .mega__ic { background: none; color: var(--blue); transform: none; }
.mega__link:hover { background: var(--blue-050); }
.mega__ic svg { width: 21px; height: 21px; transition: transform .2s var(--ease); }
.mega__link:hover .mega__ic svg { transform: scale(1.08); }
.drawer__ic { background: none; color: var(--blue); width: 22px; height: 22px; }

/* ==========================================================================
   16. Grid orphans — item counts must divide into the columns
   ========================================================================== */

/* Six pipeline tiles: 3 + 3, never 5 + 1 stranded */


/* The dark CTA tile matches the light cards it sits beside */
.stepcta { border-radius: 16px; }
.stepcta--tall { gap: var(--s3); justify-content: flex-start; padding: var(--s6); }
.stepcta--tall h4 { font-size: var(--t-lg); }
.stepcta--tall p { margin-bottom: var(--s2); }
.stepcta--tall .tlink { margin-top: auto; }

/* Any grid whose last row is short: let the trailing card fill the gap
   rather than leaving dead space beside it. */
.grid--2 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }


/* ==========================================================================
   17. Richer closing CTA + the scope invitation
   ========================================================================== */

/* 17.1 CTA band: single column body, bigger art, proof strip, soft glow */
.cta-band__inner {
  grid-template-columns: 1fr;
  padding: clamp(32px, 4.5vw, 64px);
  gap: 0;
}
.cta-band__body { position: relative; z-index: 2; max-width: 62ch; }
.cta-band__body .eyebrow { color: var(--amber); }
.cta-band h2 { max-width: 20ch; }
.cta-band p { margin-top: var(--s4); margin-bottom: var(--s7); }
.cta-band__art { width: 52%; opacity: .9; }
.cta-band__glow {
  position: absolute; z-index: 1; pointer-events: none;
  width: 460px; height: 460px; right: 4%; top: -40%;
  background: radial-gradient(circle, rgba(28,87,228,.42) 0%, transparent 66%);
  filter: blur(30px);
  animation: drift1 24s ease-in-out infinite;
}
.cta-band__proof {
  display: flex; flex-wrap: wrap; gap: var(--s5) var(--s8);
  margin-top: var(--s8); padding-top: var(--s6);
  border-top: 1px solid rgba(255,255,255,.14);
}
.cta-band__proof div { display: flex; flex-direction: column; gap: 2px; }
.cta-band__proof b {
  font-family: var(--font-h); font-weight: 800; font-size: var(--t-xl);
  color: #fff; line-height: 1.05; letter-spacing: -.02em;
}
.cta-band__proof span {
  font-family: var(--font-h); font-weight: 600; font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: #8FA5BC;
}
.cta-band__proof div:last-child b { color: var(--amber); }

/* 17.2 Scope invitation — a route to a conversation, not a dead end */
.scope__invite {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--s4) var(--s5); margin-top: var(--s7); padding: var(--s5) var(--s6);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--blue-050), var(--cream) 90%);
  border: 1px solid var(--blue-100);
}
.scope__invite-ic {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 12px; background: var(--paper); color: var(--blue);
  border: 1px solid var(--blue-100);
}
.scope__invite b { font-family: var(--font-h); font-size: var(--t-base); color: var(--navy); display: block; }
.scope__invite p { font-size: var(--t-sm); color: var(--muted); margin-top: 3px; max-width: 62ch; }
.scope__invite .btn { white-space: nowrap; }


/* ==========================================================================
   18. CTA band rebuild + section rhythm
   Bug fixed: the ":not(.cta-band__art)" guard made .cta-band__glow a relative
   in-flow grid item, adding ~460px of height and washing the panel to grey.
   Only the body is positioned now; both decorative layers stay absolute.
   ========================================================================== */
.cta-band__inner > div { position: static; }
.cta-band__inner > .cta-band__art,
.cta-band__inner > .cta-band__glow { position: absolute; }
.cta-band__inner > .cta-band__body { position: relative; z-index: 2; }

.cta-band__inner {
  display: block;
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: 22px;
}
.cta-band .wrap { padding-block: clamp(28px, 3.4vw, 52px); }
.cta-band h2 { max-width: 18ch; margin-top: var(--s2); }
.cta-band p { margin-top: var(--s3); margin-bottom: 0; max-width: 54ch; font-size: var(--t-base); }
.cta-band__quals {
  margin-top: var(--s4) !important; color: #A9BCD0;
  font-family: var(--font-h); font-weight: 600; font-size: var(--t-sm);
}
.cta-band__quals .stmt__sep { color: rgba(255,255,255,.26); }
.cta-band .btn-row { margin-top: var(--s6); }
.cta-band__art { width: 46%; opacity: .85; }
.cta-band__glow {
  width: 380px; height: 380px; right: 6%; top: -34%;
  filter: blur(26px); opacity: .55;
}

/* Section rhythm — 208px of stacked padding read as dead space */
.section { padding-block: clamp(40px, 4.2vw, 68px); }
.section--tight { padding-block: clamp(26px, 2.6vw, 40px); }
.sec-head { margin-bottom: clamp(26px, 3vw, 42px); }

/* Inline text links get a comfortable tap height without changing their look */
.tlink { padding-block: 6px; }

/* ==========================================================================
   19. Statement band spacing
   The pill CTA replaced .stmt__cta, which carried the top margin — so the
   button was sitting flush against the qualifier line. Space it from whatever
   precedes it, in both the cream statement band and the navy closing band.
   ========================================================================== */
.stmt__body .btn--pill,
.stmt__body .btn-row { margin-top: var(--s7); }
.stmt__quals { max-width: 56ch; line-height: 1.6; }
.stmt__quals .stmt__sep { margin-inline: 6px; }

/* The dead .stmt__cta rules are superseded by .btn--pill; keeping only the
   navy-variant colour hooks that .btn--pill-light does not cover. */
.stmt--navy .stmt__quals { color: #A9BCD0; }

/* Closing band: same rhythm */
.cta-band__body .btn-row { margin-top: var(--s7); }
.cta-band__quals { max-width: 56ch; line-height: 1.6; }

/* ==========================================================================
   20. Gradient rail on the problem cards + legible contour art on navy
   ========================================================================== */

/* 20.1 The problem cards used a flat amber top border on hover. Match the
   showcase rail instead: a blue-to-amber gradient that wipes in from the left.
   border-top-color cannot take a gradient, so the rule becomes a pseudo-element. */
.prob { position: relative; border-top-color: rgba(255,255,255,.16); }
.prob::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, #4E86FF, var(--amber));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease);
}
.prob:hover::before,
.prob:focus-within::before { transform: scaleX(1); }
.prob:hover { border-top-color: rgba(255,255,255,.16); }
.prob:hover .prob__n {
  color: #FFD167;
  transition: color .3s var(--ease);
}

/* 20.2 The contour art is shared by the cream statement band and the navy CTA,
   but only .stmt--navy re-coloured the rings — so on the CTA they were painting
   dark navy on navy and only showed where they crossed the amber disc. */

/* Let the rings read across the disc the way they do on the light band */

/* ==========================================================================
   21. CTA art composition + no grids nested inside a split column
   ========================================================================== */

/* 21.1 The contour art is a 440x240 viewBox drawn with preserveAspectRatio
   "slice". Confining it to a narrow right-hand column made that box far too
   square, so it over-scaled and cropped the disc off the top edge. Letting it
   span the full band restores roughly the proportions the light band has. */
.cta-band__art { left: 0; right: 0; width: 100%; opacity: .55; }

/* 21.2 A 3-column grid inside half a split gives ~200px columns and breaks the
   copy onto single words. Any stepgrid that does end up in a narrow column
   falls back to one column rather than squeezing. */
.split .stepgrid,
.showcase .stepgrid { grid-template-columns: 1fr; }


/* ==========================================================================
   22. Keep the contour waves out of the reading column
   21.1 widened the art to the full band so the disc kept its proportions, but
   that ran the wave lines straight under the headline, the paragraph and the
   qualifier row. Contour lines crossing 14px body copy at low contrast is the
   worst case for legibility.

   The art stays full width — the geometry depends on it — and is masked
   instead, so the waves fade to nothing before they reach the text and only
   resolve on the right, around the disc. Reads as the art emerging out of the
   navy rather than as a panel that got cropped.
   ========================================================================== */
.cta-band__art {
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0%, transparent 44%, rgba(0, 0, 0, .35) 56%,
      rgba(0, 0, 0, .8) 66%, #000 76%);
          mask-image: linear-gradient(90deg,
      transparent 0%, transparent 44%, rgba(0, 0, 0, .35) 56%,
      rgba(0, 0, 0, .8) 66%, #000 76%);
}

/* The glow sits under the disc, so it follows the same right-hand bias. */
.cta-band__glow { opacity: .42; }

/* ==========================================================================
   23. Hero credibility strip
   Replaces the four counting stats. A number only works as proof when it is
   big; 195 loans is not, and dressing it up does not change that. What is
   genuinely hard to match is the shape of the deployment, so the strip states
   properties instead of totals.
   ========================================================================== */
.hero__proof-ic svg { display: block; }
.hero__proof-item b {
  display: block; font-family: var(--font-h); font-size: var(--t-sm);
  font-weight: 600; color: #fff; line-height: 1.3;
}
.hero__proof-item em {
  display: block; font-style: normal; font-size: var(--t-xs);
  color: #8FA5BC; line-height: 1.45; margin-top: 2px;
}
.hero .hero__proof { animation: heroUp .72s var(--ease) both; animation-delay: .34s; }


/* ==========================================================================
   24. Step flows, status note, AI mega menu
   ========================================================================== */

/* 24.1 Six steps across six columns gave ~200px per column. With bodies of
   40 to 60 words that produced six ragged text towers of wildly different
   heights, and the step number sat orphaned to the right of its icon on a
   rail that only made sense for one row. Three columns, and the number rides
   on the icon where it belongs. */
.fstep__ic svg { width: 21px; height: 21px; }


/* 24.2 The status note was a 100px-radius pill holding two lines of prose,
   which read as an empty capsule with a badge floating in it. Flex also made
   the trailing full stop its own item, so it drifted away from the link.
   Left-aligned card, badge on its own line, one text run. */
.statusline > span { display: block; }


/* 24.3 AI mega menu: two link columns of four, so the promo takes the third
   grid cell instead of wrapping to a second row and leaving it two thirds
   empty. Slightly tighter rows because eight links is more than six. */
#mega-ai .mega__cols { grid-template-columns: 1fr 1fr 1.05fr; }
#mega-ai .mega__link { padding: 8px 10px; }
#mega-ai .mega__txt > span { line-height: 1.4; }
#mega-ai .mega__promo { align-self: stretch; }

/* 24.4 The closing band changed height page to page because its paragraph ran
   anywhere from 105 to 199 characters, which is two lines on one page and four
   on another. Reserving three lines on the paragraph itself equalises the band
   without a floor under the whole body, which just moved the empty space below
   the buttons instead of removing it. A longer paragraph still grows. */
.cta-band p { max-width: 58ch; min-height: 4.9em; }


/* 24.5 Card grids: equal-height cells with ragged link positions read as
   broken alignment. Push the link to the bottom of whichever card it is in. */
.card--link { display: flex; flex-direction: column; }
.card--link > p:last-of-type { margin-bottom: var(--s5); }
.card--link > .tlink { margin-top: auto; align-self: flex-start; }

/* 24.6 A callout closing a section sat hard against the grid above it and left
   the section's own bottom padding stranded underneath. */
.grid + .callout,
.checks + .callout,
.scope + .callout { margin-top: var(--s6); }
.section > .wrap > .callout:last-child,
.section .callout:last-child { margin-bottom: 0; }

/* ==========================================================================
   25. One button shape
   Three radii were live: 8px on the standard buttons, 999px on the pill CTA
   and 16px on the card-links. The visible failure was not across pages but
   inside a single row, where the pill "Book a demo" sat beside an 8px
   "See what is built today".

   10px is the resolution. It sits inside the card family (12 / 16 / 22) so a
   button reads as part of the same system rather than a foreign control, and
   it holds the rectilinear geometry the product diagrams and tables are built
   on. A fully round button would fight that. The circular arrow stays: a
   circle inside a button is an affordance, not a shape conflict.
   ========================================================================== */
:root { --r-btn: 10px; }

.btn,
.btn--sm,
.btn--pill,
.burger { border-radius: var(--r-btn); }

/* The pill CTA keeps its scale, weight and arrow, and loses only its shape. */
.btn--pill { padding: 13px 24px; gap: var(--s2); }

/* Tabs and the eyebrow pill are labels, not buttons, and keep their own shape. */
.pill { border-radius: var(--r-pill); }

/* ==========================================================================
   26. Ledger motif
   The band art is now horizontal rules with posted rows, replacing the bezier
   contours and the filled disc. Those were the only free-form curves and the
   only large circle on the site, which is why they read as imported from
   somewhere else. Rules and rows are the shapes the product diagrams already
   use, and they say the one thing the product is about.

   Section 22's horizontal mask still applies, so the rules resolve on the
   right and fade out well before the reading column.
   ========================================================================== */
.stmt__rule {
  stroke: rgba(3, 25, 49, .09); stroke-width: 1;
  opacity: 0; animation: ledgerIn .5s var(--ease) both;
  animation-delay: calc(var(--i) * .06s);
}
.stmt__gutter {
  stroke: rgba(3, 25, 49, .16); stroke-width: 1; stroke-dasharray: 4 5;
  opacity: 0; animation: ledgerIn .5s var(--ease) .3s both;
}
.stmt__post {
  transform-origin: 236px 50%;
  animation: ledgerPost .55s var(--ease) both;
  animation-delay: calc(.45s + var(--i) * .14s);
}
.stmt__post--a { fill: var(--amber); opacity: .55; }
.stmt__post--b { fill: var(--blue); opacity: .42; }
.stmt__post--n { fill: rgba(3, 25, 49, .14); }
.stmt__wash { opacity: .10; }

@keyframes ledgerIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ledgerPost { from { opacity: 0; transform: scaleX(.2); } }

/* On navy the same marks need to read as light on dark. */
.stmt--navy .stmt__rule,
.cta-band .stmt__rule { stroke: rgba(255, 255, 255, .13); }
.stmt--navy .stmt__gutter,
.cta-band .stmt__gutter { stroke: rgba(255, 255, 255, .22); }
.stmt--navy .stmt__post--n,
.cta-band .stmt__post--n { fill: rgba(255, 255, 255, .16); }
.stmt--navy .stmt__post--b,
.cta-band .stmt__post--b { fill: #4E86FF; opacity: .5; }
.stmt--navy .stmt__wash,
.cta-band .stmt__wash { opacity: .16; }


/* ==========================================================================
   27. Two button roles, one primary colour
   Six treatments were live, and four of them were competing primaries: blue
   fill, amber fill, a white pill and a navy pill. "Book a demo" rendered in
   three different colours on the home page alone, which is the clearest sign
   the system had no rule.

   Primary is amber on every surface. It is the only one of the two brand
   colours with enough contrast on both navy and cream, so one colour covers
   the whole site and the reader learns it in a single glance. Blue keeps its
   own job: text links, diagram accents, focus rings. An accent that also
   competes as a button stops signalling anything.

   Secondary is one role in two surface forms, which is legitimate: an outline
   on paper, a translucent outline on navy.
   ========================================================================== */
/* The border is not decoration. Amber on cream is only 1.6:1, so a filled
   amber button has no discernible edge against a light page, which fails
   WCAG 1.4.11 for identifying a control. A darker amber rim reaches 3.3:1
   and disappears against navy, where the fill already contrasts at 8.9:1. */
.btn--primary,
.btn--amber {
  background: var(--amber); color: #2B1D00;
  border-color: #B87F00; box-shadow: none;
}
.hero .btn--primary, .hero .btn--amber,
.cta-band .btn--primary, .cta-band .btn--amber,
.stmt--navy .btn--primary, .stmt--navy .btn--amber { border-color: transparent; }
.btn--primary:hover,
.btn--amber:hover {
  background: var(--amber-600); color: #2B1D00;
  box-shadow: 0 6px 18px rgba(255, 185, 21, .34);
}

/* 27.2 One arrow rule: every primary carries one, no secondary does.
   "Book a demo" shipped 84 times with no arrow and 24 times with, because the
   affordance lived in the pill component rather than in the primary role. A
   pseudo-element puts it on the role, so header, hero and inline buttons all
   agree without touching a single call site. Same glyph as the icon family,
   masked so it inherits the button's text colour. */
.btn--primary::after,
.btn--amber::after {
  content: ""; position: static; flex: none; order: 9;
  width: 17px; height: 17px; margin-left: 2px;
  background: currentColor;
  -webkit-mask: var(--arrow-mask) center / contain no-repeat;
          mask: var(--arrow-mask) center / contain no-repeat;
  transition: transform .2s var(--ease);
}
.btn--primary:hover::after,
.btn--amber:hover::after { transform: translateX(3px); }
.btn--sm.btn--primary::after,
.btn--sm.btn--amber::after { width: 15px; height: 15px; }

:root {
  --arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' \
viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' \
stroke-linejoin='round'%3E%3Cpath d='M4.4 12h14.2'/%3E%3Cpath d='m13.2 6.4 5.4 5.6-5.4 5.6'/%3E%3C/svg%3E");
}

/* The pill already carries the arrow as a real span, so the pseudo-element
   would double it. Same glyph, same size, no ring: one arrow treatment. */
.btn--pill::after { content: none; }

/* The pill CTA is the same primary role, so it takes the same colour. */
.btn--pill,
.btn--pill-light,
.btn--pill-amber { background: var(--amber); color: #2B1D00; }
.btn--pill:hover { box-shadow: 0 12px 28px rgba(255, 185, 21, .3); }

/* 26.2 The motif as a section device.
   A graphic used in exactly one place is decoration. Used as the quiet
   background of the sections that present evidence, the same ledger rules
   become the site's way of saying "this is on the record". Drawn in CSS as
   repeating lines rather than SVG, because here it is texture, not artwork. */
.section--ledger { position: relative; overflow: hidden; }
.section--ledger::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 27px, rgba(3, 25, 49, .05) 27px 28px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.section--ledger > .wrap { position: relative; }
.section--alt.section--ledger::before { opacity: .8; }

/* Single column below 1024: the copy sits over the whole band, so the waves
   drop back and fade downward, away from the headline rather than sideways. */


/* 27.3 One arrow, everywhere.
   Three treatments were live: a 34px ring around the pill's arrow, a bare
   stroke arrow on primary buttons, and a "→" text glyph on inline links. The
   ring is gone, and the glyph is replaced by the same masked stroke arrow so
   weight and shape match at every size. .tlink is already inline-flex, so the
   pseudo-element is a flex item and text flow is unaffected. */
.tlink::after {
  content: ""; flex: none; width: 15px; height: 15px;
  background: currentColor;
  -webkit-mask: var(--arrow-mask) center / contain no-repeat;
          mask: var(--arrow-mask) center / contain no-repeat;
}

/* ==========================================================================
   28. LIGHT HERO
   The hero was navy, which made the page and the product panel the same
   family: the eye read the headline and stopped. On cream the dark stage
   panel is the only dark thing above the fold, so it becomes the focal
   point. That matters because the panel is where product screenshots go,
   and a light UI screenshot on a navy page reads as a hole punched in it.

   The panel itself stays dark. Everything else inverts.
   ========================================================================== */
.hero {
  background: var(--cream);
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

/* Grid rules were white-on-navy; on cream they have to be navy-on-cream, and
   much fainter, because dark lines on a light field read far heavier. */
.hero::before {
  background-image: linear-gradient(rgba(3, 25, 49, .042) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(3, 25, 49, .042) 1px, transparent 1px);
}

/* The aurora was three blurred colour fields tuned to glow out of darkness.
   On cream the same fields turn muddy, so they drop to a single soft amber
   wash that warms the corner without competing with the panel. */
.hero__aurora { opacity: .5; filter: blur(64px); }
.hero__aurora span:nth-child(1) { background: rgba(255, 185, 21, .30); }
.hero__aurora span:nth-child(2) { background: rgba(28, 87, 228, .10); }
.hero__aurora span:nth-child(3) { display: none; }

.hero h1 { color: var(--navy); }
.hero h1 .hl { color: var(--amber-ink); }
.hero__sub { color: var(--muted); }

.hero .crumbs { color: var(--muted); }
.hero .crumbs a:hover { color: var(--amber-ink); }
.hero .crumbs span[aria-current] { color: var(--ink); }

.hero__trust b { color: var(--navy); }
.hero__trust span { color: var(--muted); }

.hero__proof-item b  { color: var(--navy); }
.hero__proof-item em { color: var(--muted); }

/* The pill is not rendered today, but it is still in the component and would
   be unreadable if it came back: amber-on-navy inverts to ink-on-amber-tint. */
.hero .pill {
  background: var(--amber-050);
  border-color: rgba(148, 101, 7, .30);
  color: var(--amber-ink);
}

/* 28.1 Buttons. Section 27 gave primaries a #B87F00 rim on light surfaces and
   removed it inside the hero, because the hero was dark. That reverses. */
.hero .btn--primary, .hero .btn--amber { border-color: #B87F00; }
.hero .btn--ghost {
  color: var(--navy);
  border-color: var(--line-strong, rgba(3, 25, 49, .22));
}
.hero .btn--ghost:hover {
  background: rgba(3, 25, 49, .04);
  border-color: rgba(3, 25, 49, .42);
}

/* --------------------------------------------------- 28.2 Stage cap clearance
   .stage__cap is absolutely positioned over the bottom of the panel with a
   gradient scrim. The SVG filled the whole panel and ran underneath it, so the
   bottom row of several visuals was cut off. Reserving the caption's height in
   the .viz box shrinks the drawing above it instead of hiding part of it. */
.viz {
  box-sizing: border-box;
  padding: var(--s7) var(--s7) calc(var(--s7) + 46px);
}


/* ------------------------------------------------------- 28.3 Footer surface
   The footer was near-black while the rest of the page runs navy. Same family,
   one step deeper than the CTA band above it, so the page ends rather than
   changing subject. */
.site-foot {
  background: linear-gradient(180deg, var(--navy) 0%, #02121F 100%);
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.site-foot a:hover { color: var(--amber); }

/* ==========================================================================
   29. PRODUCT MOMENTS
   One interaction, enlarged, layered, cropped by the container. A whole screen
   scaled down to fit a column is unreadable and reads as a template; a single
   mechanic at close to native size reads as software.

   Depth is the hard part in an all-light composition. Three devices carry it:
   an elevation step per layer, desaturated type on the layer behind, and a
   single amber rule on the one the reader should look at first.
   ========================================================================== */
.mom {
  display: grid; grid-template-columns: .72fr 1.28fr;
  background: var(--cream); border-radius: var(--r-xl);
  overflow: hidden; position: relative; min-height: 430px;
  border: 1px solid var(--line);
}
.mom--flip { grid-template-columns: 1.28fr .72fr; }
.mom--flip .mom__copy { order: 2; }
.mom--flip .mom__stage { order: 1; }
.mom--flip .mom__card { direction: ltr; }

.mom__copy { padding: clamp(28px, 3.4vw, 54px); align-self: center; position: relative; z-index: 2; }
.mom__eyebrow {
  font-family: var(--font-h); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--amber-ink);
}
.mom__copy h2 {
  font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.4rem); color: var(--navy);
  letter-spacing: -.028em; line-height: 1.06; margin-top: var(--s3);
}
.mom__copy p {
  font-size: var(--t-base); color: var(--muted);
  line-height: 1.65; margin-top: var(--s4); max-width: 38ch;
}
.mom__link {
  display: inline-block; margin-top: var(--s6);
  font-family: var(--font-h); font-weight: 600; font-size: var(--t-sm);
  color: var(--amber-ink); border-bottom: 1px solid rgba(148, 101, 7, .35);
  padding-bottom: 2px;
}
.mom__link:hover { border-bottom-color: var(--amber-ink); }

/* The stage crops. Fragments are positioned in px against a fixed origin and
   are deliberately allowed to run past the right edge. */
.mom__stage { position: relative; overflow: hidden; min-height: 430px; }
.mom__rules { position: absolute; inset: 0; opacity: .55; }
.mom__rules i {
  position: absolute; left: 0; right: 0; height: 1px;
  background: rgba(3, 25, 49, .09);
  top: calc(66px + var(--n) * 48px);
}

.mom__card {
  position: absolute; top: var(--t); left: var(--l); width: var(--w);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 13px; overflow: hidden;
  padding: var(--s5) var(--s5) var(--s5);
}
.mom__card--back {
  box-shadow: 0 8px 20px rgba(3, 25, 49, .055);
  color: #7A8593;
}
.mom__card--back b, .mom__card--back .mom__row span { color: #5A6675; }
.mom__card--focal {
  box-shadow: 0 30px 60px rgba(3, 25, 49, .16), 0 4px 12px rgba(3, 25, 49, .05);
  padding-top: 0; z-index: 3;
}
.mom__card--front { box-shadow: 0 16px 36px rgba(3, 25, 49, .13); z-index: 4; }
.mom__rule { height: 3px; background: var(--amber); margin: 0 calc(-1 * var(--s5)) var(--s5); }

.mom__cap {
  display: block; font-size: var(--t-xs); letter-spacing: .11em;
  text-transform: uppercase; color: #8A94A1; margin-bottom: var(--s4);
}
.mom__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.mom__head b { font-family: var(--font-h); font-size: var(--t-base); color: var(--ink); letter-spacing: -.01em; }
.mom__meta { font-size: var(--t-sm); color: #8A94A1; margin-top: 5px; }

.mom__pill {
  font-size: var(--t-xs); font-weight: 600; padding: 3px 11px;
  border-radius: var(--r-pill); white-space: nowrap;
}
.mom__pill--wait { background: var(--amber-050); color: var(--amber-ink); }

.mom__kv span {
  display: block; font-size: var(--t-xs); letter-spacing: .05em;
  text-transform: uppercase; color: #8A94A1;
}
.mom__kv b {
  display: block; font-family: var(--font-h); font-weight: 700;
  font-size: var(--t-base); color: var(--ink); margin-top: 4px;
}
.mom__kv em { display: block; font-style: normal; font-size: var(--t-sm); color: var(--muted); margin-top: 3px; }
.mom__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5); }

/* Two equal columns put the lock at the card's centre, and widening the gate
   between them changes nothing: each column simply gives up half the extra.
   That is why the lock still read as belonging to "Sanction approval" -- the
   left label is short, so the white space either side of the lock was wildly
   uneven even though the lock was dead centre.

   Sizing the left column to its content instead means the gate's own width is
   the gap, so the lock sits exactly half a gate from each label whatever they
   say. */
.mom__pair {
  display: grid; align-items: stretch;
  grid-template-columns: auto var(--gate, 96px) minmax(0, 1fr);
}
/* The rule used to sit under the lock as a separate flex row, which read as a
   stray mark rather than a connector. It now runs edge to edge through the
   lock's centre, and the lock is opaque so it punches a hole in the line. */
.mom__gate {
  width: auto; flex: none !important;
  position: relative; display: grid; place-items: center;
}
.mom__gate i {
  position: absolute; left: 4px; right: 4px; top: 50%;
  height: 1px; background: rgba(148, 101, 7, .30);
}
.mom__lock {
  position: relative; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--amber-050); border: 1px solid rgba(148, 101, 7, .30);
  display: grid; place-items: center; color: var(--amber-ink);
  box-shadow: 0 0 0 4px var(--paper);
}
.mom__lock svg { display: block; }

.mom__foot {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm); color: var(--muted); line-height: 1.55;
}

.mom__log { display: grid; gap: 1px; }
.mom__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: var(--s4); padding: 7px 0;
  font-size: var(--t-sm); color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.mom__row:last-child { border-bottom: 0; }
.mom__row span:last-child { text-align: right; }
.mom__row--head span {
  font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: #8A94A1;
}
.mom__row--ok   span:last-child { color: #0F6E56; }
.mom__row--warn span:last-child { color: var(--amber-ink); font-weight: 600; }
.mom__row--old  { opacity: .62; }
.mom__log--muted { opacity: .45; filter: saturate(.4); }

.mom__bar { display: grid; grid-template-columns: 78px 1fr 76px; align-items: center; gap: var(--s4); padding: 6px 0; }
.mom__bar span { font-size: var(--t-sm); color: var(--muted); }
.mom__bar b { font-family: var(--font-h); font-size: var(--t-sm); color: var(--ink); text-align: right; }
.mom__bar i { display: block; height: 8px; border-radius: 4px; width: var(--w); }
.mom__bar--p i { background: #C87F12; }
.mom__bar--i i { background: #1C57E4; }
.mom__bar--n i { background: #1B9A71; }

.mom__doc { padding: var(--s4) 0 var(--s2); }
.mom__doc b { display: block; font-family: var(--font-h); font-size: var(--t-3xl); color: var(--navy); letter-spacing: -.02em; }
.mom__doc span { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: 5px; }

.mom__flag { display: flex; align-items: center; gap: var(--s3); }
.mom__flag svg { flex: none; color: var(--amber-ink); }
.mom__flag span { font-size: var(--t-sm); color: var(--ink); line-height: 1.45; }
.mom__flag--warn span { color: var(--amber-ink); }

/* Below the split the absolute positioning has nowhere to go, so the fragments
   return to normal flow and stack. Same content, same order, no overlap. */


/* ==========================================================================
   30. LIGHT PRODUCT SURFACES
   Section 28 lightened the hero but left the stage panel dark, on the argument
   that it would become the focal point. That argument held right up until
   section 29 introduced light product fragments, and then the site had two
   visual languages for the same object: a dark panel in every hero and a light
   fragment in the body.

   The real product's content area is white. A dark panel is a UI we do not
   have, which is the same test the fragments were built to pass. So the panel
   goes light and depth comes from elevation on the cream field instead.
   ========================================================================== */
.stage {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 30px 64px rgba(3, 25, 49, .15), 0 4px 12px rgba(3, 25, 49, .05);
}
.stage::before {
  background-image: linear-gradient(rgba(3, 25, 49, .05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(3, 25, 49, .05) 1px, transparent 1px);
}
.stage__cap {
  background: linear-gradient(transparent, rgba(255, 255, 255, .96) 42%);
  color: var(--muted);
}
.stage__cap b { color: var(--navy); }
.stage__head { border-bottom: 1px solid var(--line-soft); }
.stage__head .cns__live { color: var(--muted); }
.stage__head .cns__ref  { color: #8A94A1; }


/* 30.1 The SVG vocabulary. Every value re-picked for a white ground: text at
   AA or better, non-text strokes at 3:1 or better per WCAG 1.4.11. */
.vz-grid   { stroke: rgba(3, 25, 49, .09); }
.vz-axis   { stroke: rgba(3, 25, 49, .20); }
.vz-dash   { stroke: rgba(3, 25, 49, .26); }
.vz-line   { stroke: var(--blue); }
.vz-card   { fill: #F7F8FA; stroke: #E3E7EC; }
.vz-card-a { fill: #EAF1FE; stroke: #5C8DF5; }
.vz-card-w { fill: var(--amber-050); stroke: rgba(148, 101, 7, .34); }
.vz-fill   { fill: var(--blue); }
.vz-fill-g { fill: #12876A; }
.vz-fill-m { fill: rgba(3, 25, 49, .14); }
.vz-t      { fill: var(--muted); }
.vz-tb     { fill: var(--ink); font-weight: 700; }
.vz-ts     { fill: #6A7482; }
.vz-tw     { fill: var(--amber-ink); font-weight: 700; }
.vz-tg     { fill: #0F6E56; }
.vz-mono   { fill: #6A7482; }
.pulse-dot { fill: var(--blue); }

/* 30.2 The home console. Same panel, same scenes, light ground. */
.cns__panel { background: var(--paper); border-color: var(--line); }
.cns__bar { border-bottom: 1px solid var(--line-soft); }
.cns__live { color: var(--muted); }
.cns__ref  { color: #8A94A1; }
.cns__kpis { background: var(--line-soft); }
.cns__kpis > div { background: #FAFBFC; }
.cns__kpis span { color: #6A7482; }
.cns__kpis b { color: var(--navy); }
.cns__note { color: var(--muted); }
.cns__note--lock { color: var(--amber-ink); }
.cns__note--ok   { color: #0F6E56; }
.cns__role { background: #F7F8FA; border-color: var(--line); }
.cns__role span { color: #6A7482; }
.cns__role b { color: var(--ink); }
.cns__scene[data-on="true"] .cns__role[data-role="2"] { background: #EAF1FE; border-color: #A6C4F3; }
.cns__link { background: rgba(3, 25, 49, .20); }
.cns__bars i { background: #D8E2EE; }
.cns__bars i:last-child { background: var(--amber); }
.cns__seg--i { background: #5C8DF5; }
.cns__seg--n { background: #1B9A71; }
.cns__log { border-top: 1px solid var(--line-soft); }
.cns__row[data-new="true"] { background: var(--amber-050); }
.cns__t   { color: #6A7482; }
.cns__ev  { color: var(--ink); }
.cns__who { color: #6A7482; }
.cns__foot { border-top: 1px solid var(--line-soft); }

/* ==========================================================================
   31. STAGE PANEL: CAPTION IN FLOW
   The head, the visual and the caption were all absolutely positioned, and the
   caption hid what it overlapped behind a gradient scrim. That worked while the
   panel was navy: the scrim was opaque enough to swallow the artwork. On white
   the same scrim only half-veils it, so the bottom of every visual ghosted
   through the caption text.

   Section 28.2 tried to buy clearance with padding on .viz. It reserved 46px
   against a caption nearer 90px, which is why the lifecycle diagram still lost
   its last step. The real fix is to stop overlaying: three flex children, each
   owning its own band.
   ========================================================================== */
/* The showcase stacks several .viz siblings inside one .stage and cross-fades
   between them, so they have to keep overlaying each other. Turning .stage into
   a flex column made them flex items instead: they stacked vertically and the
   panel clipped everything below the first. That is what cut the accrual chart
   in half.

   So the panel stays a positioning context and the three bands are reserved
   with explicit offsets. The caption gets a solid background rather than a
   translucent scrim, which is what let the artwork ghost through it before. */
/* The panel used to carry a hand-picked aspect-ratio and the drawing had to
   fit whatever was left after the header and caption. At 4/3.35 that left a
   wide, shallow slot: a 480x400 drawing could only fill 62% of the width
   before its height ran out, which is why everything looked shrunken.

   Inverted. The drawing box owns the ratio, matched to the viewBox, and the
   panel height is whatever head + body + caption comes to. The SVG fills its
   box exactly at every width, with nothing to tune per call site. */
.stage { display: flex; flex-direction: column; aspect-ratio: auto; }
.stage__head { position: static; flex: none; background: #FAFBFC; border-bottom: 1px solid var(--line-soft); }
.stage__body {
  position: relative; flex: none;
  aspect-ratio: var(--ar, 428 / 386);
  box-sizing: content-box;
  padding: var(--s5) var(--s6);
}
.viz { position: absolute; inset: var(--s5) var(--s6); padding: 0; }
.viz svg { width: 100%; height: 100%; max-height: 100%; }
.stage__cap {
  position: static; flex: 1 0 auto;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--paper); border-top: 1px solid var(--line-soft);
  padding: var(--s5) var(--s6);
}


/* ==========================================================================
   32. MOMENT LAYOUT: ONE OBJECT, TWO ACCENTS
   Positioning all three fragments absolutely meant guessing their heights, and
   the guesses were wrong: the front card sat on the focal card's footnote and
   the focal card cut the back card's last column.

   So the focal card returns to normal flow and sizes to its own content. The
   other two are accents that peek past its corners, and the focal reserves
   padding where the front one lands. Nothing can cover text that matters.
   ========================================================================== */
/* Absolute positioning meant guessing how tall the focal card would render,
   and the guess was wrong again: it sat across the back card's data row and
   sliced the digits in half. Reading the top of a number is worse than not
   seeing it.

   Grid rows instead. Each card owns a row, and the overlap is a negative
   margin smaller than the card padding, so cards can only ever overlap each
   other's empty gutter. Text cannot be covered by construction rather than by
   arithmetic, at any width and whatever the content length. */
.mom__stage {
  display: grid; align-content: center;
  --lap: 20px;
  padding: clamp(30px, 3.4vw, 52px) clamp(18px, 2.2vw, 30px);
}
.mom__card { position: static; width: auto; top: auto; left: auto; right: auto; }
.mom__card--back {
  z-index: 1; width: 78%; margin-right: auto;
  padding-top: var(--s4); padding-bottom: var(--s4);
}
.mom__card--focal { z-index: 3; margin-top: calc(-1 * var(--lap)); }
.mom__card--front {
  z-index: 4; width: 76%; margin-left: auto;
  margin-top: calc(-1 * var(--lap));
}

/* ---------------------------------------------- 32.1 The architecture panel
   Section 30 lightened .stage and missed this one, which is the other host for
   a .vz-* visual. The classes went light while the panel stayed navy, so the
   diagram was drawing near-black labels onto a dark ground. */
.arch {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 30px 64px rgba(3, 25, 49, .15), 0 4px 12px rgba(3, 25, 49, .05);
}
.arch::before { background-image: radial-gradient(rgba(3, 25, 49, .07) 1px, transparent 1px); }
.arch__legend { border-top-color: var(--line-soft); }
.arch__legend span { color: var(--muted); }
.lg-solid  { background: #EAF1FE; border: 1px solid #5C8DF5; }
.lg-dashed { background: transparent; border: 1.5px dashed rgba(3, 25, 49, .34); }
.lg-amber  { background: var(--amber-050); border: 1px solid rgba(148, 101, 7, .45); }

/* ------------------------------------------------- 32.2 Certificate document
   A reference number, a status, a figure and a component breakdown that names
   its own ledger source. The claim is traceability, so the artefact has to show
   where each number came from rather than just how large it is. */
.mom__docbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line-soft); margin-bottom: var(--s4);
}
.mom__docbar span {
  display: block; font-size: var(--t-xs); letter-spacing: .11em;
  text-transform: uppercase; color: #8A94A1;
}
.mom__docbar b {
  display: block; font-family: var(--font-m); font-size: var(--t-sm);
  color: var(--ink); margin-top: 4px; letter-spacing: .01em;
}
.mom__pill--ok { background: #E4F5EE; color: #0F6E56; }
.mom__doc { padding: 0 0 var(--s4); }
.mom__doc b {
  display: block; font-family: var(--font-h); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.15rem);
  color: var(--navy); letter-spacing: -.025em; line-height: 1;
}
.mom__doc span { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: 6px; }


/* =========================================================================
   35. HOME-PAGE PASS
   Five separate fixes, kept together because they were reported together.
   ========================================================================= */

/* 35.1 Proof band. The hero carried four proof points inside the left text
   column, which made an already dense column denser and pushed the CTA row
   down. Moved out to a full-width band directly under the hero: same four
   facts, one horizontal line, and the hero column drops to headline, sub and
   buttons only. */
.proofband {
  border-block: 1px solid var(--line);
  background: var(--paper);
}
.proofband__row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5); padding-block: var(--s5);
}
.proofband__item {
  display: flex; align-items: flex-start; gap: var(--s3); min-width: 0;
}
.proofband__item + .proofband__item { border-left: 1px solid var(--line); padding-left: var(--s5); }
.proofband__ic {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--amber-wash, #FFF6E0); color: var(--amber-ink);
}
.proofband__item b {
  display: block; font-family: var(--font-h); font-weight: 600;
  font-size: var(--t-base); color: var(--navy); line-height: 1.3;
}
.proofband__item em {
  display: block; margin-top: 3px; font-style: normal;
  font-size: var(--t-sm); color: var(--muted); line-height: 1.45;
}

/* 35.2 Button height. Three heights were live at body scale: .btn at 46px,
   .btn--pill at 50px and, in a few rows, both side by side. Two sizes now,
   and only two: 40px in the header, 48px everywhere else. */
.btn { min-height: 48px; padding: 14px 24px; }
.btn--sm { min-height: 40px; padding: 10px 18px; }
.btn--pill { min-height: 48px; padding: 14px 24px; }

/* 35.3 Capability rail. Replaces the scrolling marquee. The marquee said
   "lots of words" rather than "lots of capabilities": motion made it read as
   decoration, and bare pills read as SEO tags. Static, labelled, ticked, and
   it hands off to the ledger that actually enumerates the product. */
.caprail__head b {
  font-family: var(--font-h); font-weight: 600; color: var(--navy);
  font-size: var(--t-lg); letter-spacing: -.01em;
}
.caprail__head span {
  font-size: var(--t-sm); color: var(--muted);
  display: inline-flex; align-items: center; gap: 7px;
}
.caprail__head span::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #17A672; flex: none;
}
.caprail__i svg { flex: none; color: #17A672; }
.caprail__more:hover svg { transform: translateX(3px); }
.caprail__more svg { transition: transform .18s var(--ease); }

/* 35.4 Showcase caption. The caption changes as the scroll steps through the
   modules, but it sits at the bottom of the sticky panel over a scrim, so the
   swap happened outside the reader's attention and the section looked static.
   Two changes, both inside the existing absolute layout: an amber rule marks
   it as the live line, and each swap plays a short rise so the change is
   caught peripherally rather than having to be looked for. */
.stage__cap { border-left: 3px solid var(--amber); padding-left: 15px; }
.stage__cap.is-swap b, .stage__cap.is-swap span { animation: capSwap .34s var(--ease) both; }
.stage__cap.is-swap span { animation-delay: .05s; }
@keyframes capSwap {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* 35.5 Availability rows. The unavailable rows in the deployment panels used
   a chevron, which on a bordered row reads as a disclosure control people try
   to click. Now an en-dash glyph, which reads as "not applicable". */
/* 34.x The sector panel now carries three states. "We build this into the
   engagement" and "we do not do this" used to render identically, which made
   On-premise / gov cloud look unavailable when it is scoped per engagement. */
.spanel__row--scope { background: var(--paper); border-style: solid; border-color: var(--line); }
.spanel__row--scope .spanel__ic { color: var(--amber-ink); opacity: 1; }
.spanel__row--scope b { color: var(--navy); font-weight: 600; }
.spanel__row--scope .spanel__meta { color: var(--amber-ink); }
.spanel__row--no { background: var(--paper-alt); border-style: dashed; }
.spanel__row--no .spanel__ic { color: var(--muted); opacity: .8; }
.spanel__row--no b { color: var(--muted); font-weight: 500; }
.spanel__row--no:hover { border-color: var(--line); transform: none; box-shadow: none; }

/* =========================================================================
   36. SECOND HOME + PLATFORM PASS
   ========================================================================= */

/* 36.1 Hero-to-section gap. With the proof band as the hero's last child the
   hero's own bottom padding sat underneath it, then the next section added
   its own, and the space read as a hole rather than as rhythm. */
.hero--band { padding-bottom: 0; }
.hero--band .hero__inner { margin-bottom: clamp(40px, 4vw, 64px); }
.proofband { border-top: 1px solid var(--line); border-bottom: 0; background: transparent; }

/* 36.2 Capability rail, second attempt. The bordered card with a wrapped tick
   list read as one more content block. Grouping the mechanics under the four
   things a lender asks about, on a navy plate, gives the strip a job: it is
   the spec sheet between the problem statement and the module tour. */
.crail {
  background: var(--navy); color: #B9CADC;
  border-radius: var(--r-xl); padding: var(--s7) var(--s7) var(--s6);
}
.crail__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  padding-bottom: var(--s5); margin-bottom: var(--s6);
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.crail__top h3 { color: #fff; font-size: var(--t-xl); letter-spacing: -.015em; }
.crail__live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-h); font-weight: 600; font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--amber);
}
.crail__live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber); flex: none;
}
.crail__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s6); }
.crail__g + .crail__g { border-left: 1px solid rgba(255,255,255,.10); padding-left: var(--s6); }
.crail__gh {
  display: flex; align-items: center; gap: 10px; margin-bottom: var(--s4);
  font-family: var(--font-h); font-weight: 600; font-size: var(--t-base); color: #fff;
}
.crail__n {
  font-size: 11px; letter-spacing: .06em; color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.crail__g ul { display: grid; gap: 9px; }
.crail__g li {
  position: relative; padding-left: 15px; font-size: var(--t-sm);
  color: #A9BCD0; line-height: 1.45;
}
.crail__g li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.34);
}
.crail__more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s6);
  font-family: var(--font-h); font-weight: 600; font-size: var(--t-sm); color: var(--amber);
}
.crail__more:hover svg { transform: translateX(3px); }
.crail__more svg { transition: transform .18s var(--ease); }

/* 36.3 The AI layer, from nine boxes to one plate. Pipeline on the left as a
   connected numbered rail, the three guarantees on the right, one link. */
.ail {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--paper); overflow: hidden;
}
.ail__col { padding: var(--s7); }
.ail__col--g { background: var(--paper-alt); border-left: 1px solid var(--line); }
.ail__lab {
  display: block; font-family: var(--font-h); font-weight: 600;
  font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s5);
}
.ail__rail { position: relative; display: grid; gap: var(--s5); }
.ail__rail::before {
  content: ""; position: absolute; left: 13px; top: 12px; bottom: 12px;
  width: 2px; background: var(--line);
}
.ail__s { position: relative; display: flex; gap: var(--s4); align-items: flex-start; }
.ail__n {
  position: relative; z-index: 1; flex: none;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue); color: #fff;
  font-family: var(--font-h); font-weight: 600; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ail__s div b {
  display: block; font-family: var(--font-h); font-weight: 600;
  font-size: var(--t-base); color: var(--navy); line-height: 1.35;
}
.ail__s div span, .ail__g div span {
  display: block; margin-top: 2px; font-size: var(--t-sm);
  color: var(--muted); line-height: 1.5;
}
.ail__gs { display: grid; gap: var(--s5); }
.ail__g { display: flex; gap: var(--s4); align-items: flex-start; }
.ail__gi {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid;
  place-items: center; background: var(--amber-wash); color: var(--amber-ink);
}
.ail__g div b {
  display: block; font-family: var(--font-h); font-weight: 600;
  font-size: var(--t-base); color: var(--navy);
}
.ail__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s6);
  font-family: var(--font-h); font-weight: 600; font-size: var(--t-sm); color: var(--blue);
}
.ail__cta:hover svg { transform: translateX(3px); }
.ail__cta svg { transition: transform .18s var(--ease); }

/* 36.4 Capability ledger. Two columns with a divider is the shape of a
   comparison table, and it was being read as one. Stacked into two stages of
   the same list, joined by a seam so the second reads as "next", not "versus".
   Both markers now occupy the same 16px box, which is what put the two lists'
   text on different left edges. */
.cl {
  border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
  background: var(--paper);
}
.cl__stage { padding: var(--s7); }
.cl__stage--fwd { background: var(--paper-alt); }
.cl__head { max-width: 62ch; margin-bottom: var(--s6); }
.cl__head h3 { font-size: var(--t-xl); margin-top: 6px; }
.cl__head p { font-size: var(--t-sm); color: var(--muted); margin-top: 6px; }
.cl__badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-h); font-weight: 600; font-size: 9.5px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}
.cl__badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted); opacity: .5;
}
.cl__badge--on { color: var(--live); }
.cl__badge--on::before { background: var(--live); opacity: 1; }
.cl__seam { position: relative; height: 1px; background: var(--line); }
.cl__seam span {
  position: absolute; left: var(--s7); top: -6px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--line);
}
.cl__list {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--s4) var(--s6);
}
.cl__item { display: flex; gap: var(--s3); align-items: flex-start; }
.cl__mk {
  flex: none; width: 16px; height: 16px; margin-top: 2px;
  display: grid; place-items: center; color: var(--muted);
}
.cl__mk--on { color: var(--live); }
.cl__mk i {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: .55;
}
.cl__item div b {
  display: block; font-family: var(--font-h); font-weight: 600;
  font-size: var(--t-sm); color: var(--navy);
}
.cl__item div span {
  display: block; font-size: var(--t-xs); color: var(--muted);
  line-height: 1.55; margin-top: 1px;
}
.cl__item--fwd div b { color: var(--body); font-weight: 500; }

/* 36.5 Reference rows. Gives a page a second rhythm, so three consecutive
   sections are not three of the same grid. */
.dlist { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 var(--s8); }
.dlist__i {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding: var(--s5) 0; border-bottom: 1px solid var(--line);
}
.dlist__n {
  flex: none; font-family: var(--font-h); font-weight: 600; font-size: var(--t-xs);
  color: var(--amber-ink); font-variant-numeric: tabular-nums; padding-top: 2px;
}
.dlist__i b {
  display: block; font-family: var(--font-h); font-weight: 600;
  font-size: var(--t-base); color: var(--navy);
}
.dlist__i p { font-size: var(--t-sm); color: var(--muted); margin-top: 3px; line-height: 1.55; }
.dlist__i em { font-style: normal; color: var(--navy); font-weight: 600; }

/* 36.6 Lifecycle spine. Was a third boxed grid; a sequence now looks like one. */
.fsteps {
  display: grid; grid-template-columns: 1fr; gap: 0;
  position: relative; max-width: 780px; margin-inline: auto;
}
.fsteps::before {
  /* Track arithmetic, explicit because the spine depends on it:
     24 (number) + 16 (gap) + 44 (icon) -> icon centre at 62px. */
  content: ""; display: block; position: absolute;
  left: 62px; top: 26px; bottom: 26px; width: 2px; background: var(--line);
}
.fstep {
  /* Must stay positioned: .fstep__n was absolute in the generation this
     replaced, and a static row would resolve it against .fsteps. */
  position: relative; display: grid;
  grid-template-columns: 24px 44px minmax(0, 1fr);
  gap: 16px; align-items: start;
  padding: var(--s5) 0; border: 0; background: none; border-radius: 0;
}
.fstep:hover { transform: none; border-color: transparent; }
.fstep__ic {
  position: relative; z-index: 1; grid-column: 2;
  width: 44px; height: 44px; border-radius: 13px; margin: 0;
  background: var(--paper); border: 1px solid var(--line); color: var(--blue);
  display: grid; place-items: center; box-shadow: none;
}
.fstep.is-in .fstep__ic { border-color: var(--blue-100); background: var(--blue-050); }
/* Title above description, not beside it.
   This was a wrapping flex row: the h4 took its natural width and the p filled
   what was left, so the body text began wherever the title happened to end.
   That is fine on /platform/, where the six titles are 5-8 characters and the
   descriptions are one short line. On the seven AI capability pages the titles
   run 10-36 characters and the descriptions 30-60 words, so the paragraph
   never sat inline anyway: it wrapped to a block that started at a different
   x on every row, which is the text going in and out. Stacking makes the left
   edge constant at any title length, and costs /platform/ six extra lines. */
.fstep__t { grid-column: 3; display: grid; gap: 5px; }
.fstep__t h4 { font-size: var(--t-base); margin: 0; }
.fstep__t p { font-size: var(--t-sm); color: var(--muted); margin: 0; max-width: 66ch; }
/* Static, and inside the text row. Absolute positioning had it colliding with
   the icon in the 44px column, and it inherited right/top from the 3-up card
   grid this replaced. */
.fstep__n {
  position: static; order: -1; flex: none;
  font-family: var(--font-h); font-weight: 600; font-size: 10px;
  letter-spacing: .08em; color: var(--amber-ink);
  font-variant-numeric: tabular-nums; align-self: center;
}

/* 36.7 One FAQ block. Four hand-written wrappers had grown across the site:
   860 centred, 860 left, 900 left, and none at all on the AI capability
   pages, where the accordion ran the full section width. */
.faqwrap { max-width: 860px; margin-inline: auto; }
.faqwrap--flush { max-width: 900px; margin-inline: 0; }

/* =========================================================================
   37. INVITE BAR + LIFECYCLE NUMBERS
   ========================================================================= */

/* 37.1 The "none of this is automatically a no" bar. Two faults. It sat inside
   the right-hand column of a two-column split on all five industry pages, so a
   three-part bar had half a page to work in and the nowrap button overran it.
   And its CTA was a 40px outline button while every other CTA on the page is a
   48px primary, which made the one route out of a page of caveats the quietest
   control on it. Now placed full width by the caller, and primary. */
.scope__invite {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--s4) var(--s6);
  margin-top: var(--s7); padding: var(--s6) var(--s7);
  border-radius: var(--r-lg);
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
}
.scope__invite-ic {
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--paper); color: var(--blue); border-color: var(--blue-100);
}
.scope__invite b { font-size: var(--t-lg); letter-spacing: -.01em; }
.scope__invite p { margin-top: 5px; max-width: 70ch; }
.scope__invite .btn { white-space: nowrap; }

/* 37.2 One column where the list is inside a split. The two-column default is
   right at full width and far too tight at half. */
.scope--stack .scope__list { grid-template-columns: 1fr; }

/* 37.3 Lifecycle step numbers. They rode inside the text row, which is a
   wrapping flex line, so on the AI capability pages each number sat wherever
   its own title happened to start and the column read as ragged. They have
   their own grid track now (see 36.6) and line up whatever the titles do. */
.fstep__n {
  order: 0; text-align: right; align-self: start; padding-top: 14px;
  color: var(--muted);
}

/* =========================================================================
   38. MEGA LINK CONTRAST, MOMENT vs CTA, NEXT-STEP RHYTHM
   ========================================================================= */

/* 38.1 "Read the approach" in the mega promo. .tlink is --blue #1C57E4, and
   the promo card is a #0A2645 to #031931 gradient: 1.9:1, well under the 4.5:1
   AA floor for body text, so the link was there but effectively invisible.
   There was already a .section--navy .tlink amber override, but the mega menu
   is not a navy section so it never applied. Amber measures 9.6:1 here. */
.mega__promo .tlink { color: var(--amber); }
.mega__promo .tlink:hover { color: #FFD166; }

/* 38.2 The moment stops competing with the CTA band.
   On the home page the statement band and the product moment sat back to back
   and read as two of the same control: cream panel, oversized heading on the
   left, an action underneath, graphic on the right. Only one of them is a CTA.
   The band keeps the pill and the CTA weight. The moment becomes an exhibit:
   white ground, a smaller heading, and a plain text link instead of an
   underlined amber action that looked like a button.
   frag_approval is also flipped in fragments.py, so the graphic lands on the
   opposite side from the band's art directly above it. */
.mom { background: var(--paper); }
.mom__copy h2 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.95rem); line-height: 1.14; }
.mom__eyebrow { color: var(--muted); letter-spacing: .11em; }
.mom__link {
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 0; padding-bottom: 0; color: var(--blue);
  font-size: var(--t-sm);
}
.mom__link::after { content: "\2192"; transition: transform .18s var(--ease); }
.mom__link:hover { color: var(--blue-600); border-bottom-color: transparent; }
.mom__link:hover::after { transform: translateX(4px); }
.mom__rules { opacity: .38; }

/* 38.3 Next step. .cta-band__body .btn-row set --s7 on top of a qualifier row
   that already carries --s4 of its own, so the buttons floated well clear of
   the line they belong to. The quals are a caption for the buttons, not a
   separate block. */
.cta-band__body .btn-row { margin-top: var(--s5); }
.cta-band__quals { margin-top: var(--s3) !important; }

/* =========================================================================
   39. SELECT CONTROL, LIGHT CAPABILITY RAIL
   ========================================================================= */

/* 39.1 Form selects. These were left with the native control, so the arrow was
   drawn by the OS at whatever inset the OS uses. Next to a text input with
   14px of padding, and next to each other in a two-up row, the two arrows sat
   at different distances from the edge and at different sizes. Drawing our own
   puts them on the same 14px inset as the text, at the same size, in every
   browser. padding-right clears the glyph so long option labels cannot run
   underneath it. */
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23626E7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.6 9.4 5.4 5.2 5.4-5.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  cursor: pointer;
}
.field select::-ms-expand { display: none; }
.field select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23626E7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.6 9.4 5.4 5.2 5.4-5.2'/%3E%3C/svg%3E"); }

/* 39.2 The capability rail goes light. It was a navy plate sitting directly
   under the navy problem section, so the top third of the home page ran as two
   dark bands with a hairline between them. The problem statement is the one
   block that earns the weight; the rail is reference material. Same structure,
   same density, paper ground. */
.crail {
  background: var(--paper); color: var(--body);
  border: 1px solid var(--line);
}
.crail__top { border-bottom-color: var(--line); }
.crail__top h3 { color: var(--navy); }
.crail__g + .crail__g { border-left-color: var(--line); }
.crail__gh { color: var(--navy); }
.crail__gh::before {
  content: ""; width: 3px; height: 15px; border-radius: 2px;
  background: var(--amber); flex: none;
}
.crail__n { color: var(--amber-ink); }
.crail__g li { color: var(--body); }
.crail__g li::before { background: var(--blue-100); }
.crail__more { color: var(--blue); }
.crail__more:hover { color: var(--blue-600); }

/* =========================================================================
   40. MOMENT CARDS DEAL IN ONE AT A TIME
   ========================================================================= */

/* The three cards in every product moment appeared together, so the layering
   that is the whole point of the composition (a record, the approval that
   gates it, the log entry it produces) landed as one flat image. They now deal
   in back to front, in the order the events actually happen.
   No JS: this rides the .reveal gate the observer already sets on .mom, and
   html.anim is only added when the animation can complete, so with JS off or
   reduced motion on the cards are simply present. */
html.anim .mom__card {
  opacity: 0;
  transform: translateY(16px) scale(.985);
}
html.anim .mom.is-in .mom__card {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--ease), transform .55s var(--ease);
}
html.anim .mom.is-in .mom__card--back  { transition-delay: .08s; }
html.anim .mom.is-in .mom__card--focal { transition-delay: .30s; }
html.anim .mom.is-in .mom__card--front { transition-delay: .54s; }

/* Inside the focal card the gate is the argument, so the lock lands last,
   after the two identities it sits between. */
html.anim .mom__lock { opacity: 0; transform: scale(.7); }
html.anim .mom.is-in .mom__lock {
  opacity: 1; transform: none;
  transition: opacity .34s var(--ease), transform .34s var(--ease);
  transition-delay: .78s;
}

/* The background rules sweep in first so the stage exists before the cards
   land on it, rather than materialising underneath them. */
html.anim .mom.is-in .mom__rules i { animation-delay: calc(var(--n) * .05s); }

@media (prefers-reduced-motion: reduce) {
  .mom__card, .mom__lock { opacity: 1 !important; transform: none !important; }
}

/* =========================================================================
   41. STATUS ROW REPLACES THE FLOATING CHIP
   ========================================================================= */

/* The label that sat over each panel's corner was the only element on the site
   that behaved like a sticker: absolutely positioned, drop-shadowed, drifting
   on a float animation, and overhanging the frame whenever the copy ran long.
   It also meant two labels per panel, since every stage already carries a
   caption underneath saying an adjacent thing.
   It is now a status row inside the frame, between the drawing and the
   caption, which is where software puts state. Same words, and they now look
   like the system emitted them rather than like marketing stuck them on. */
.pstat {
  display: flex; align-items: center; gap: 8px;
  padding: 9px var(--s5);
  border-top: 1px solid var(--line-soft);
  background: var(--amber-wash);
  font-family: var(--font-h); font-weight: 600; font-size: var(--t-xs);
  color: var(--amber-ink); line-height: 1.4;
}
.pstat i {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: currentColor;
  animation: pstatPulse 2.4s ease-in-out infinite;
}
@keyframes pstatPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.pstat--green { background: #E9F7F1; color: #0F6E56; }

/* The architecture diagram has no stage frame, so its row sits between the
   drawing and the legend and picks up the dark surface it lives on. */
.pstat--inarch {
  margin-top: var(--s6);
  border-top: 1px solid rgba(255,255,255,.10);
  border-radius: 0;
  background: rgba(255,185,21,.09);
  color: #FFD167;
  padding-inline: 0; padding-left: var(--s5);
}

/* The home console's row sits inside the panel, above the footer. */
.cns__panel .pstat { border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  .pstat i { animation: none; opacity: 1; }
}

/* =========================================================================
   42. CONSOLE SCENE SWITCHER
   ========================================================================= */

/* Three 22x4px dashes told the reader nothing: not what the scenes were, not
   that there were two more worth waiting for, and not that the panel advances
   on its own. They also ended up alone in the footer once the illustrative-
   figures note came out.
   Named segments now. The active one fills over the scene's 4.6s dwell, which
   is the same number the interval in godravix.js uses, so the bar finishes as
   the scene changes. Hover and focus pause the fill exactly where the script
   pauses the advance. */
.cns__dots {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4); width: 100%;
}
.cns__dot {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; text-align: left;
  font-family: var(--font-h); font-weight: 600; font-size: 10.5px;
  color: #8A94A1; letter-spacing: .01em;
  transition: color .25s var(--ease);
}
.cns__dot u {
  display: block; height: 3px; border-radius: 2px; margin-bottom: 6px;
  background: var(--line); position: relative; overflow: hidden;
  text-decoration: none;
  transition: background-color .25s var(--ease);
}
.cns__dot:hover { color: var(--navy); }
.cns__dot:hover u { background: #D7DDE4; }
.cns__dot[data-state="done"] u { background: #FFE2A0; }
.cns__dot[data-state="on"] { color: var(--navy); }
.cns__dot[data-state="on"] u::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--amber); border-radius: 2px;
  animation: cnsFill 4.6s linear forwards;
}
@keyframes cnsFill { to { width: 100%; } }

/* The script pauses the advance on hover and focus; the bar has to agree,
   otherwise it completes and then sits full while the scene does not change. */
.cns:hover .cns__dot[data-state="on"] u::after,
.cns:focus-within .cns__dot[data-state="on"] u::after { animation-play-state: paused; }

.cns__dot:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  .cns__dot[data-state="on"] u::after { animation: none; width: 100%; }
}
@media (max-width: 420px) {
  .cns__dots { gap: var(--s3); }
  .cns__dot { font-size: 9.5px; }
}

/* =========================================================================
   43. ARCHITECTURE: A LIT CORE THAT VISIBLY WORKS
   ========================================================================= */

/* One 7s pass, and the three phases do not overlap:
     0.28 - 2.36s   four files arrive on the dashed curves
     2.59 - 4.09s   the five stages run, in order, inside the core
     4.48 - 6.56s   four artefacts leave on the solid curves
   verify.py asserts these three do not overlap.
   The core used to show a scan band, which is the generic "computer thinking"
   cliché and said nothing about this engine. It now runs the five capability
   rows in sequence: each fills, its dot fires, and it settles. That is the
   deterministic engine doing its stages, drawn with content already on the
   plate rather than added decoration. */
.ar-glow { pointer-events: none; }

.ar-wire { fill: none; stroke-width: 1.4; }
.ar-wire--in  { stroke: rgba(255, 255, 255, .30); stroke-dasharray: 5 4; }
.ar-wire--out { stroke: rgba(120, 164, 255, .55); }
.ar-fi { fill: none; stroke: var(--muted); stroke-width: 1.3; opacity: .75; }

/* Packets. Amber on dashed inbound because they arrive as files, green on
   solid outbound because the platform produced them. */
.pkt {
  fill: none; stroke-width: 1.4; stroke-linejoin: round;
  offset-rotate: 0deg; opacity: 0;
  animation: pktRun 7s cubic-bezier(.5, 0, .35, 1) infinite;
}
.pkt--in  { stroke: #FFCB4D; fill: rgba(255, 185, 21, .16); }
.pkt--out { stroke: #4FD6A8; fill: rgba(62, 217, 164, .16); }
@keyframes pktRun {
  0%   { offset-distance: 0%;   opacity: 0; }
  4%   { opacity: 1; }
  23%  { offset-distance: 100%; opacity: 1; }
  28%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* The five stages. --i is the row index, set in the markup, so the sequence
   is one declaration rather than five hand-written delays. */
.ar-chip { --d: calc(2.45s + var(--i) * 0.20s); }
.ar-chip__lit {
  fill: rgba(120, 164, 255, .17);
  transform-box: fill-box; transform-origin: left center;
  transform: scaleX(0); opacity: 0;
  animation: chipRun 7s cubic-bezier(.4, 0, .2, 1) infinite;
  animation-delay: var(--d);
}
/* 0.85s per row: fill, hold, settle. Any longer and the last row is still
   lit while the outputs are already leaving, which reads as noise. */
@keyframes chipRun {
  0%   { transform: scaleX(0); opacity: 0; }
  2%   { opacity: 1; }
  6%   { transform: scaleX(1); opacity: 1; }
  9%   { transform: scaleX(1); opacity: 1; }
  12%  { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(1); opacity: 0; }
}
.ar-chip__dot {
  fill: #2F5D7C;
  transform-box: fill-box; transform-origin: center;
  animation: chipDot 7s ease-out infinite;
  animation-delay: var(--d);
}
@keyframes chipDot {
  0%   { fill: #2F5D7C; transform: scale(1); }
  5%   { fill: #3ED9A4; transform: scale(1.9); }
  11%  { fill: #3ED9A4; transform: scale(1.15); }
  62%  { fill: #2A8F70; transform: scale(1.15); }
  100% { fill: #2F5D7C; transform: scale(1); }
}

/* A thin progress bar under the wordmark, so the plate reads as working
   before the eye gets down to the rows. It spans the processing window. */
.ar-bar {
  fill: #4E8CFF;
  transform-box: fill-box; transform-origin: left center;
  transform: scaleX(0);
  animation: arBar 7s cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes arBar {
  0%,  34% { transform: scaleX(0);   opacity: 0; }
  36%      { opacity: 1; }
  56%      { transform: scaleX(1);   opacity: 1; }
  60%      { transform: scaleX(1);   opacity: 0; }
  100%     { transform: scaleX(1);   opacity: 0; }
}

/* The ring fires when the last stage completes and the outputs launch, not
   on arrival: the acknowledgement belongs at the end of the work. */
.arch__ring {
  fill: none; stroke: rgba(120, 164, 255, .8); stroke-width: 1.2;
  transform-box: fill-box; transform-origin: center;
  opacity: 0; animation: archRing 7s ease-out infinite;
}
@keyframes archRing {
  0%,  57% { opacity: 0;   transform: scale(.55); }
  62%      { opacity: .75; transform: scale(.82); }
  77%      { opacity: 0;   transform: scale(1.5); }
  100%     { opacity: 0;   transform: scale(1.5); }
}

/* Infinite loops on a mid-page diagram: stop them when it is off screen,
   the same reason the hero console stops when it scrolls away. */
.arch:not(.is-seen) .pkt,
.arch:not(.is-seen) .ar-chip__lit,
.arch:not(.is-seen) .ar-chip__dot,
.arch:not(.is-seen) .ar-bar,
.arch:not(.is-seen) .arch__ring { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .pkt, .arch__ring, .ar-bar, .ar-chip__lit { animation: none; opacity: 0; }
  .ar-chip__dot { animation: none; fill: #2A8F70; }
}

/* ==========================================================================
   RESPONSIVE
   Every @media block lives here, after all base rules and ordered widest
   breakpoint first. They were previously interleaved, so each override
   section appended to the end of this file silently defeated the media
   queries above it: 29 responsive rules had stopped applying.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero__aurora span { animation: none !important; }
  .hero .pill, .hero h1, .hero__sub, .hero .btn-row, .hero__trust, .hero .crumbs,
  .hero--split > .wrap > .hero__inner > div:last-child { animation: none !important; opacity: 1 !important; transform: none !important; }
  .pill .dot { animation: none !important; }
  .btn--primary::before, .btn--amber::before { display: none !important; }
  .a-draw, .a-bar, .a-fill, .a-in, .a-fade, .a-drop, .a-blip {
    animation: none !important; stroke-dashoffset: 0 !important;
    opacity: 1 !important; transform: none !important;
  }
  .viz { transition: none !important; }
  .showcase__item::before { transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fstep__ic svg { animation: none !important; opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .arch [class*="a-"], .viz [class*="a-"] { animation-play-state: running !important; }
  .viz[data-on="false"] { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
.cns__live i { animation: none !important; }
  .cns__scene { position: static; inset: auto; opacity: 1 !important; visibility: visible !important;
                transform: none !important; margin-bottom: 14px; }
  .cns__stage { height: auto; }
  .cns__row { opacity: 1 !important; transform: none !important; }
  .cns__bars i, .cns__seg, .cns__role { animation: none !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) { .cta-band__glow { animation: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .stmt__rule, .stmt__gutter, .stmt__post { animation: none !important; opacity: 1; }
  .stmt__post { transform: none !important; }
}

@media (max-width: 1240px) {
  .nav__top { padding: 9px 8px; font-size: 13.5px; }
  .head-cta .btn--outline { display: none; }
}

@media (max-width: 1024px) {
  .showcase { grid-template-columns: 1fr; gap: var(--s7); }
  .showcase__stage { position: static; order: -1; }
  .showcase__item { padding-block: var(--s5); }
  .showcase__item p, .showcase__item .avail { opacity: 1; }
  .showcase__item h3 { color: var(--navy); }
  .showcase__item .tlink { opacity: 1; transform: none; pointer-events: auto; }
}

@media (max-width: 1024px) {
  .cl { grid-template-columns: 1fr; }
  .stmt { grid-template-columns: 1fr; }
  .stmt__art { width: 100%; opacity: .35; }
  .fsteps { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s6) var(--s4); }
  .fsteps::before { display: none; }
}

@media (max-width: 1024px) {
  .cta-band__inner { grid-template-columns: 1fr; }
  .cta-band__art { width: 100%; opacity: .3; }
  .panelwrap { padding: 22px 6px 26px; }
}

@media (max-width: 1024px) { .grid--2 > *:last-child:nth-child(odd) { grid-column: auto; } }

@media (max-width: 1024px) { .cta-band__art { opacity: .3; } }

@media (max-width: 1024px) {
  .cta-band__art {
    opacity: .22;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 38%, #000 88%);
            mask-image: linear-gradient(180deg, transparent 0%, transparent 38%, #000 88%);
  }
}

@media (max-width: 900px)  { .stepgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

@media (max-width: 1024px) {
  .crail__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s5); }
  .crail__g + .crail__g { border-left: 0; padding-left: 0; }
  .crail__g:nth-child(2n) { border-left: 1px solid var(--line); padding-left: var(--s5); }
  .ail { grid-template-columns: 1fr; }
  .ail__col--g { border-left: 0; border-top: 1px solid var(--line); }
  .cl__list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px) { .fsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 900px) { .cta-band p { min-height: 0; } }

@media (max-width: 900px) {
  .mom, .mom--flip { grid-template-columns: 1fr; min-height: 0; }
  .mom--flip .mom__copy, .mom--flip .mom__stage { order: 0; }
  .mom__copy { padding-bottom: 0; }
  .mom__copy p { max-width: none; }
  .mom__stage {
    min-height: 0; overflow: visible; --lap: 0px;
    padding: var(--s5) clamp(20px, 5vw, 40px) clamp(28px, 5vw, 44px);
    gap: var(--s4);
  }
  .mom__rules { display: none; }
  .mom__card--back, .mom__card--front { width: auto; }
}

@media (max-width: 820px) {
  .scope__invite { grid-template-columns: auto 1fr; }
  .scope__invite .btn { grid-column: 1 / -1; justify-content: center; }
  .cta-band__art { width: 100%; opacity: .28; }
  .cta-band__proof { gap: var(--s5); }
  .cta-band__proof div { flex: 1 1 42%; }
}

@media (max-width: 720px) {
  .stage { border-radius: var(--r-lg); }
  .viz { padding: var(--s5); }
  .stage__cap { padding: var(--s6) var(--s5) var(--s4); padding-left: 15px; }
  .hero__aurora { filter: blur(38px); }
  .arch { padding: var(--s5); }
}

@media (max-width: 720px) {
  .scope__list { grid-template-columns: 1fr; }
  .fsteps { grid-template-columns: 1fr; }
  .stmt { border-radius: 18px; }
  
}

@media (max-width: 720px) {
  .viz { padding: var(--s5) var(--s5) calc(var(--s5) + 54px); }
}

@media (max-width: 720px) {
  .cns { padding: 22px 4px 26px; }
  .cns__kpis b { font-size: 16px; }
  .cns__row:nth-child(n+5) { display: none; }
  .cns__stage { height: 104px; }
}

@media (max-width: 720px) {
  .stats { grid-template-columns: 1fr !important; }
}

@media (max-width: 720px) {
  .viz { padding: var(--s6) var(--s6) calc(var(--s6) + 42px); }
}

@media (max-width: 720px) {
  .stage__body { padding: var(--s4) var(--s5); }
  .viz { inset: var(--s4) var(--s5); }
}

@media (max-width: 900px) {
  /* 35.1 Proof band: four across becomes two, and the vertical dividers move
     to the grid gaps rather than tracking column count. */
  .proofband__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
  .proofband__item + .proofband__item { border-left: 0; padding-left: 0; }
}

@media (max-width: 820px) {
  .scope__invite { grid-template-columns: auto minmax(0, 1fr); }
  .scope__invite .btn { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 760px) {
  .crail { padding: var(--s6) var(--s5); }
  .crail__grid { grid-template-columns: 1fr; gap: var(--s5); }
  .crail__g:nth-child(2n) { border-left: 0; padding-left: 0; }
  .crail__g + .crail__g { border-top: 1px solid var(--line); padding-top: var(--s5); }
  .ail__col, .cl__stage { padding: var(--s6) var(--s5); }
  .cl__list { grid-template-columns: 1fr; }
  .cl__seam span { left: var(--s5); }
  .dlist { grid-template-columns: 1fr; gap: 0; }
  /* 20 + 12 + 38 -> icon centre at 51px */
  .fstep { grid-template-columns: 20px 38px minmax(0, 1fr); gap: 12px; }
  .fstep__ic { width: 38px; height: 38px; border-radius: 11px; }
  .fstep__n { padding-top: 11px; }
  .fsteps::before { left: 51px; }
  .scope__invite { padding: var(--s5); }
}

@media (max-width: 640px) { .statusline { border-radius: 14px; } }

@media (max-width: 640px) { .statusline { border-radius: 12px; padding: var(--s4) var(--s5); } }

@media (max-width: 620px) { .fsteps { grid-template-columns: 1fr; } }

@media (max-width: 560px)  { .stepgrid { grid-template-columns: 1fr; } }

/* --------------------------------------------------- 33. Narrow-phone header
   Measured on the staging build: with the header CTA present the page has a
   hard content floor of 394px, so every page scrolled sideways by 34px on a
   360px phone and 4px on a 390px one. The 720px rule only dropped the
   secondary button; the primary one still does not fit until 540px.

   The burger lives inside .head-cta, so the group itself has to stay: only the
   buttons go. "Book a demo" is the first item in the drawer, so nothing is
   lost. Verified against the live pages at 320, 360, 390, 414, 430 and 480. */
@media (max-width: 560px) {
  .proofband__row { grid-template-columns: 1fr; gap: var(--s4); }
  .proofband__ic { width: 30px; height: 30px; }
}

@media (max-width: 520px) {
  .head-cta .btn { display: none; }
}

/* ==========================================================================
   34. LIGHT-SHIFT CLEAN-UP
   Sections 28 to 32 moved the hero, the stage panels and the product moments
   from navy to light. Three things did not come with them, and they now read
   as leftovers rather than as choices.
   ========================================================================== */

/* 34.1 Table headers. A solid navy lid was the only dark surface left inside
   the content flow, on seven pages. It also inverted the hierarchy: the header
   is a row of labels, and it was carrying more visual weight than the data.

   The moment fragments already solve this correctly with .mom__row--head, so
   the table now matches its own newer sibling: no fill, small caps in muted,
   and a 2px navy rule that gives the header authority without a block of
   colour. The rows carry the structure. */
.tbl thead th {
  background: transparent;
  color: #6A7482;
  font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 2px solid var(--navy);
  padding-bottom: var(--s3);
}
.tbl tbody tr:first-child td, .tbl tbody tr:first-child th { padding-top: var(--s5); }

/* 34.2 The production ribbon. A 39px near-black strip directly above a cream
   hero reads as browser chrome rather than as a notice. Same message, warm
   ground, amber rule underneath to tie it to the hero. */
.ribbon-bar {
  background: var(--amber-050);
  color: #6B5416;
  border-bottom: 1px solid rgba(148, 101, 7, .22);
  font-family: var(--font-h); font-size: var(--t-sm);
  text-align: center; padding: 9px 16px;
}
.ribbon-bar a { color: var(--amber-ink); text-decoration: underline;
  text-decoration-color: rgba(148, 101, 7, .5); text-underline-offset: 2px; }

/* 34.3 Corner radius. Six values were in play: 10, 13, 16, 20, 22 and 24. The
   team flagged this once already on buttons. Three tiers now, by object size:
   10px controls, 16px cards, 22px large surfaces. */
.stage, .mega, .form-card, .quote, .table-wrap, .cl { border-radius: 22px; }
.stmt, .cta-band__inner { border-radius: 22px; }
.mom, .mom__card { border-radius: 16px; }