/* ==========================================================================
   Evercomm reference build - design tokens and components
   Colour anchors come from Evercomm Design System v1.0 (teal #10B981 primary,
   indigo #4F46E5 secondary, slate neutrals). Density, type scale and layout
   are set for a data-heavy B2B site rather than a marketing brochure.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --brand: #0E9F73;          /* teal, darkened from #10B981 for AA on white */
  --brand-bright: #10B981;   /* design-system teal, used on dark surfaces */
  --brand-deep: #0D7F5C;
  --accent: #4F46E5;
  --accent-soft: #EEF2FF;
  --amber: #B45309;
  --info: #2563EB;

  --bg: #FFFFFF;
  --bg-alt: #F6F8FA;
  --bg-sunk: #EEF2F6;
  --card: #FFFFFF;
  --ink: #0B1220;
  --text: #253247;
  --muted: #5A6B83;
  --faint: #8494A8;
  --line: #E1E7EE;
  --line-strong: #CBD5E1;

  --dark-bg: #0B1220;
  --dark-bg-2: #111C2E;
  --dark-card: #16233A;
  --dark-line: #26364F;
  --dark-text: #E6EDF6;
  --dark-muted: #9FB0C6;

  --sans: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --wrap: 1240px;
  --gutter: 22px;
  --r: 8px;
  --r-lg: 12px;
  --r-pill: 9999px;

  --shadow-sm: 0 1px 2px rgba(11, 18, 32, .05), 0 1px 1px rgba(11, 18, 32, .04);
  --shadow: 0 2px 4px rgba(11, 18, 32, .05), 0 8px 24px -12px rgba(11, 18, 32, .18);
  --shadow-lg: 0 4px 8px rgba(11, 18, 32, .06), 0 24px 48px -20px rgba(11, 18, 32, .28);

  --sec: clamp(3rem, 1.6rem + 3.4vw, 4.75rem);
  --hdr-h: 60px;
}

:root[data-theme="dark"] {
  --brand: #34D6A2;
  --brand-bright: #34D6A2;
  --brand-deep: #10B981;
  --accent: #A5B4FC;
  --accent-soft: #1E2A47;
  --amber: #FBBF24;
  --info: #7DA9FF;

  --bg: #0B1220;
  --bg-alt: #0F1828;
  --bg-sunk: #131F33;
  --card: #16233A;
  --ink: #F3F7FC;
  --text: #D3DEEC;
  --muted: #9FB0C6;
  --faint: #7C8CA3;
  --line: #24334B;
  --line-strong: #33465F;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 10px 28px -14px rgba(0, 0, 0, .8);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, .4), 0 28px 56px -24px rgba(0, 0, 0, .9);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; color: var(--ink); font-weight: 700; letter-spacing: -.015em; line-height: 1.18; }
h1 { font-size: clamp(2.05rem, 1.15rem + 2.7vw, 3.25rem); line-height: 1.05; letter-spacing: -.028em; }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.25vw, 2.05rem); letter-spacing: -.022em; }
h3 { font-size: 1.0625rem; letter-spacing: -.012em; }
h4 { font-size: .9375rem; }
p { margin: 0 0 1rem; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
a { color: var(--brand-deep); text-underline-offset: .16em; text-decoration-thickness: 1px; }
:root[data-theme="dark"] a { color: var(--brand); }
a:hover { color: var(--brand); }
ul, ol { margin: 0 0 1rem; padding-left: 1.15rem; }
li { margin-bottom: .3rem; }
strong { color: var(--ink); font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
table { border-collapse: collapse; width: 100%; }
small { font-size: .8125rem; }
::selection { background: var(--brand); color: #fff; }

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

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px;
  border-radius: var(--r); font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip:focus { top: 8px; color: #fff; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 860px; }
.sec { padding: var(--sec) 0; }
.sec--tight { padding: clamp(2.25rem, 1.4rem + 2vw, 3.25rem) 0; }
.sec--alt { background: var(--bg-alt); }
.sec--sunk { background: var(--bg-sunk); }
.sec--line { border-top: 1px solid var(--line); }
.sec--dark { background: var(--dark-bg); color: var(--dark-text); }
.sec--dark h1, .sec--dark h2, .sec--dark h3, .sec--dark h4, .sec--dark strong { color: #fff; }
.sec--dark a { color: var(--brand-bright); }
.sec--dark .lede, .sec--dark .muted { color: var(--dark-muted); }

.stack > * + * { margin-top: 1rem; }

/* ---------- type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand-deep);
  margin: 0 0 .85rem;
}
:root[data-theme="dark"] .eyebrow { color: var(--brand); }
.sec--dark .eyebrow { color: var(--brand-bright); }
.eyebrow::before {
  content: ""; width: 18px; height: 2px; background: currentColor; opacity: .7; border-radius: 2px;
}
.eyebrow--plain::before { display: none; }
.lede { font-size: 1.0625rem; line-height: 1.6; color: var(--muted); max-width: 68ch; }
.lede--lg { font-size: clamp(1.0625rem, .95rem + .5vw, 1.25rem); color: var(--text); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: .8125rem; letter-spacing: .02em; }
.measure { max-width: 72ch; }
.balance { text-wrap: balance; }

.sec-head { max-width: 78ch; margin-bottom: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); }
.sec-head--split {
  display: grid; gap: 1rem 3rem; max-width: none;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end;
}
@media (max-width: 860px) { .sec-head--split { grid-template-columns: 1fr; align-items: start; } }

/* ---------- edition bar ---------- */
.ed {
  background: var(--ink); color: #E7EEF8; font-size: .8125rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
:root[data-theme="dark"] .ed { background: #060B14; }
.ed__in { display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; min-height: 38px; padding-block: 7px; }
.ed__note { margin: 0; color: #9FB3CC; }
.ed__note strong { color: #E7EEF8; font-weight: 600; }
.ed__now { color: var(--brand-bright); font-weight: 600; }
.ed__switch { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.ed__lbl { color: #64789A; letter-spacing: .04em; text-transform: uppercase; font-size: .6875rem; }
.ed__opt, .ed__all {
  display: inline-flex; align-items: center; gap: .4rem; padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  color: #C6D4E6; white-space: nowrap; font-weight: 500; text-decoration: none;
}
.ed__opt:hover, .ed__all:hover { border-color: var(--brand-bright); color: #fff; text-decoration: none; }
.ed__all { border-style: dashed; }
.ed__dot { width: 8px; height: 8px; border-radius: 50%; }
.ed__opt--console .ed__dot { background: #10B981; }
.ed__opt--logbook .ed__dot { background: #F4EEE1; }
.ed__opt--datum .ed__dot { background: #4FA3E3; }
.ed__opt--aurora .ed__dot { background: linear-gradient(135deg, #10B981, #4F7CFF); }
.ed__opt--flux .ed__dot { background: #C8F542; }
@media (max-width: 860px) {
  .ed__note { font-size: .75rem; flex: 1 1 100%; }
  .ed__switch { margin-left: 0; }
  .ed__lbl { display: none; }
}

/* ---------- header ---------- */

.hdr {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr.is-stuck { box-shadow: var(--shadow-sm); }
.hdr__in { display: flex; align-items: center; gap: 1.25rem; height: var(--hdr-h); }
.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--ink); text-decoration: none; font-weight: 700;
  letter-spacing: -.02em; font-size: 1.0625rem; flex: none;
}
.brand__mark { color: var(--brand); }
.brand:hover { color: var(--ink); }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; margin: 0; }
.nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  font: inherit; font-size: .875rem; font-weight: 500;
  color: var(--text); background: none; border: 0; cursor: pointer;
  padding: .5rem .6rem; border-radius: 6px; text-decoration: none; white-space: nowrap;
}
.nav__link:hover { background: var(--bg-alt); color: var(--ink); }
.nav__link.is-active { color: var(--brand-deep); font-weight: 600; }
:root[data-theme="dark"] .nav__link.is-active { color: var(--brand); }
.nav__caret { opacity: .55; transition: transform .15s ease; }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }
.nav__item.is-open > .nav__link { background: var(--bg-alt); }

.menu {
  position: absolute; top: calc(100% + 8px); left: -8px; z-index: 60;
  min-width: 320px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: .4rem;
}
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li { margin: 0; }
.menu__link {
  display: block; padding: .5rem .65rem; border-radius: 7px; text-decoration: none; color: var(--ink);
}
.menu__link:hover { background: var(--bg-alt); color: var(--ink); }
.menu__link.is-active { background: var(--accent-soft); }
.menu__label { display: block; font-size: .875rem; font-weight: 600; }
.menu__note { display: block; font-size: .75rem; color: var(--muted); margin-top: 1px; }

.hdr__end { display: flex; align-items: center; gap: .5rem; flex: none; }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); color: var(--muted); cursor: pointer;
}
.iconbtn:hover { color: var(--ink); border-color: var(--line-strong); }
.ico-moon { display: none; }
:root[data-theme="dark"] .ico-sun { display: none; }
:root[data-theme="dark"] .ico-moon { display: block; }

.burger { display: none; width: 36px; height: 34px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); cursor: pointer; padding: 8px 8px; }
.burger span { display: block; height: 1.75px; background: var(--ink); border-radius: 2px; }
.burger span + span { margin-top: 4px; }

@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: block; }
  .hdr__end { margin-left: auto; }
}
@media (max-width: 560px) { .hdr__cta { display: none; } }

.mnav {
  position: fixed; inset: var(--hdr-h) 0 0; z-index: 90; overflow-y: auto;
  background: var(--bg); border-top: 1px solid var(--line); padding: 1.25rem 0 3rem;
}
.mnav__root { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.mnav__group { margin-bottom: 1.1rem; }
.mnav__title {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 .35rem;
}
.mnav__list { list-style: none; margin: 0; padding: 0; }
.mnav__link, .mnav__sub {
  display: block; padding: .5rem 0; text-decoration: none;
  color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line);
}
.mnav__sub { font-weight: 500; color: var(--text); }
.mnav__link { font-size: 1.0625rem; }
body.nav-open { overflow: hidden; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: inherit; font-size: .875rem; font-weight: 600; line-height: 1;
  padding: .7rem 1.15rem; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand-deep); color: #fff; }
.btn--primary:hover { background: #0B6B4E; color: #fff; }
:root[data-theme="dark"] .btn--primary { background: var(--brand-bright); color: #05231A; }
:root[data-theme="dark"] .btn--primary:hover { background: #5EE3B8; color: #05231A; }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: var(--card); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--onDark { border-color: rgba(255, 255, 255, .28); color: #fff; background: rgba(255, 255, 255, .04); }
.btn--onDark:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }
.btn--sm { padding: .5rem .85rem; font-size: .8125rem; }
.btn--block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 600; font-size: .875rem; text-decoration: none;
}
.link-arrow::after { content: "\2192"; transition: transform .15s ease; }
.link-arrow:hover::after { transform: translateX(3px); }
.ext { font-size: .75em; opacity: .75; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--dark-bg); color: var(--dark-text);
  border-bottom: 1px solid var(--dark-line);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 380px at 8% -10%, rgba(16, 185, 129, .18), transparent 62%),
    radial-gradient(760px 420px at 92% 4%, rgba(79, 70, 229, .22), transparent 60%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}
.hero > .wrap { position: relative; z-index: 1; }
.hero__in { padding-block: clamp(2.75rem, 1.8rem + 3.6vw, 4.75rem) clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); }
.hero h1, .hero h2, .hero h3 { color: #fff; }
.hero .eyebrow { color: var(--brand-bright); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__sub { color: #B9C8DC; font-size: clamp(1.0625rem, .95rem + .55vw, 1.3125rem); line-height: 1.45; max-width: 30ch; margin-bottom: 1rem; font-weight: 500; }
.hero__body { color: #A8BACF; max-width: 62ch; }
.hero__body strong { color: #fff; }
.hero--page .hero__in { padding-block: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem) clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }
.hero--page h1 { font-size: clamp(1.85rem, 1.2rem + 2vw, 2.75rem); }

.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1rem; font-size: .8125rem; color: #8FA3BC; }
.crumbs li { margin: 0; display: flex; gap: .4rem; align-items: center; }
.crumbs li + li::before { content: "/"; opacity: .5; }
.crumbs a { color: #B9C8DC; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

/* stat rail on dark */
.rail {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-lg);
  overflow: hidden; background: rgba(255, 255, 255, .03); margin-top: 1.75rem;
}
.rail__i { padding: .85rem 1rem; border-right: 1px solid rgba(255, 255, 255, .1); }
.rail__i:last-child { border-right: 0; }
.rail__k { font-family: var(--mono); font-size: .625rem; letter-spacing: .13em; text-transform: uppercase; color: #8FA3BC; margin: 0 0 .25rem; }
.rail__v { margin: 0; font-weight: 700; color: #fff; font-size: .9375rem; line-height: 1.3; letter-spacing: -.01em; }
@media (max-width: 760px) {
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail__i:nth-child(2n) { border-right: 0; }
  .rail__i:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .1); }
}

/* hero console panel */
.panel {
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-lg);
  background: rgba(9, 15, 26, .72); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
  overflow: hidden; backdrop-filter: blur(6px);
}
.panel__bar {
  display: flex; align-items: center; gap: .35rem; padding: .55rem .8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04);
}
.panel__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.panel__title { font-family: var(--mono); font-size: .6875rem; color: #7F93AC; margin-left: .4rem; }
.panel__badge {
  margin-left: auto; font-family: var(--mono); font-size: .625rem; letter-spacing: .06em;
  color: var(--brand-bright); border: 1px solid rgba(16, 185, 129, .4);
  border-radius: var(--r-pill); padding: .1rem .45rem;
}
.panel__body { padding: .85rem .9rem 1rem; }
.panel__q { font-family: var(--mono); font-size: .75rem; color: #C6D4E6; margin: 0 0 .8rem; line-height: 1.5; word-break: break-word; }
.panel__prompt { color: var(--brand-bright); margin-right: .5rem; }
.panel__tbl { font-family: var(--mono); font-size: .6875rem; width: 100%; }
.panel__tbl th, .panel__tbl td { text-align: left; padding: .38rem .3rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.panel__tbl thead th { color: #7F93AC; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: .5625rem; }
.panel__tbl td { color: #B9C8DC; }
.panel__tbl td:last-child, .panel__tbl th:last-child { text-align: right; }
.panel__tbl .is-total td { color: #fff; font-weight: 700; border-bottom: 0; padding-top: .5rem; }
.panel__foot { font-family: var(--mono); font-size: .6875rem; color: #8FA3BC; margin: .7rem 0 0; }
.panel__ok { color: var(--brand-bright); margin-right: .35rem; }

.strip__lead { font-size: .875rem; color: var(--muted); max-width: 88ch; margin: 0 0 .9rem; }

/* ---------- cards and grids ---------- */
.grid { display: grid; gap: 14px; }
.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--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
@media (max-width: 1080px) {
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .grid--3, .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }
}

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.15rem 1.25rem; position: relative;
}
.card--pad { padding: 1.5rem; }
.card--flat { background: transparent; }
.card--hl { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.card--link { text-decoration: none; color: inherit; display: block; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.card--link:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow); color: inherit; }
.card h3 { margin-bottom: .3rem; }
.card p { font-size: .875rem; color: var(--muted); }
.card p strong { color: var(--text); }
.card__k { font-family: var(--mono); font-size: .625rem; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); margin: 0 0 .5rem; }
.card__foot { margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.card__num {
  font-family: var(--mono); font-size: .75rem; font-weight: 700; color: var(--brand-deep);
  display: block; margin-bottom: .5rem;
}
:root[data-theme="dark"] .card__num { color: var(--brand); }
.card--dark { background: var(--dark-card); border-color: var(--dark-line); color: var(--dark-text); }
.card--dark h3, .card--dark strong { color: #fff; }
.card--dark p { color: var(--dark-muted); }

.tile { display: flex; flex-direction: column; gap: .35rem; }
.tile__v { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem); font-weight: 700; color: var(--ink); letter-spacing: -.03em; line-height: 1.1; }
.tile__k { font-family: var(--mono); font-size: .625rem; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }
.tile__n { font-size: .8125rem; color: var(--muted); }

/* numbered ladder */
.ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.ladder__i { padding: 1.15rem 1.15rem 1.25rem; border-right: 1px solid var(--line); background: var(--card); position: relative; }
.ladder__i:last-child { border-right: 0; }
.ladder__i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--line); }
.ladder__i:nth-child(1)::before { background: #CBD5E1; }
.ladder__i:nth-child(2)::before { background: #93C5C0; }
.ladder__i:nth-child(3)::before { background: #4FBF97; }
.ladder__i:nth-child(4)::before { background: var(--brand); }
.ladder__n { font-family: var(--mono); font-size: .75rem; font-weight: 700; color: var(--faint); }
.ladder__t { margin: .35rem 0 .35rem; font-size: 1rem; }
.ladder__d { font-size: .8125rem; color: var(--muted); margin: 0; }
@media (max-width: 900px) {
  .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ladder__i:nth-child(2n) { border-right: 0; }
  .ladder__i:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .ladder { grid-template-columns: 1fr; }
  .ladder__i { border-right: 0; border-bottom: 1px solid var(--line); }
  .ladder__i:last-child { border-bottom: 0; }
}

/* journey */
.journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: step; }
.journey__i { position: relative; padding: 1rem 1.1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.journey__i::after {
  content: "\2192"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
  color: var(--line-strong); font-size: 1rem; z-index: 1;
}
.journey__i:last-child::after { display: none; }
.journey__s { font-family: var(--mono); font-size: .625rem; letter-spacing: .13em; text-transform: uppercase; color: var(--brand-deep); }
:root[data-theme="dark"] .journey__s { color: var(--brand); }
.journey__i h3 { margin: .3rem 0 .3rem; font-size: 1rem; }
.journey__i p { margin: 0; font-size: .8125rem; color: var(--muted); }
@media (max-width: 900px) { .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } .journey__i:nth-child(2n)::after { display: none; } }
@media (max-width: 520px) { .journey { grid-template-columns: 1fr; } .journey__i::after { display: none; } }

/* layer stack */
.layers { display: grid; gap: 10px; }
.layer {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 1rem; align-items: center;
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: var(--r); background: var(--card); padding: .85rem 1.1rem;
}
.layer--hl { border-left-color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, var(--card)); }
.layer__k { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.layer__t { font-weight: 700; color: var(--ink); font-size: .9375rem; }
.layer__d { font-size: .8125rem; color: var(--muted); margin: .15rem 0 0; }
.layer__tag { font-family: var(--mono); font-size: .6875rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 760px) { .layer { grid-template-columns: 1fr; gap: .35rem; } .layer__tag { display: none; } }

/* pipeline figure */
.pipe { margin: 0; }
.pipe__row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  list-style: none; margin: 0; padding: 0;
}
.pipe__i {
  position: relative; margin: 0; padding: 1rem 1.1rem 1.15rem;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card);
}
.pipe__i--hl { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.pipe__i::after {
  content: "\2192"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
  color: var(--line-strong); font-size: 1rem; z-index: 1;
}
.pipe__i:last-child::after { display: none; }
.pipe__k {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--faint); margin: 0;
}
.pipe__i h3 { margin: .35rem 0 .3rem; font-size: 1rem; }
.pipe__i p:last-child { font-size: .8125rem; color: var(--muted); margin: 0; }
.pipe__base {
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  margin-top: 12px; padding: .8rem 1.1rem; border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  background: color-mix(in srgb, var(--brand) 6%, var(--card));
}
.pipe__badge {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brand-deep); font-weight: 700;
}
:root[data-theme="dark"] .pipe__badge { color: var(--brand); }
.pipe__base p { margin: 0; font-size: .875rem; color: var(--muted); flex: 1 1 320px; }
.pipe figcaption { font-family: var(--mono); font-size: .75rem; color: var(--faint); margin-top: .75rem; }
@media (max-width: 900px) {
  .pipe__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe__i:nth-child(2n)::after { display: none; }
}
@media (max-width: 520px) {
  .pipe__row { grid-template-columns: 1fr; }
  .pipe__i::after { display: none; }
}

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.tbl { font-size: .875rem; min-width: 640px; }
.tbl caption { text-align: left; padding: .85rem 1rem; font-size: .8125rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.tbl th, .tbl td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; background: var(--bg-alt); white-space: nowrap;
}
.tbl tbody tr:last-child td, .tbl tbody tr:last-child th { border-bottom: 0; }
.tbl tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; }
.tbl td { color: var(--muted); }
.tbl tbody tr:hover td, .tbl tbody tr:hover th { background: var(--bg-alt); }
.tbl .yes { color: var(--brand-deep); font-weight: 700; }
:root[data-theme="dark"] .tbl .yes { color: var(--brand); }
.tbl .no { color: var(--faint); }
.tbl__hl th, .tbl__hl td { background: color-mix(in srgb, var(--brand) 7%, transparent) !important; }

/* ---------- chips, logos, badges ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.chips li { margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em;
  padding: .3rem .6rem; border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--muted); background: var(--card); white-space: nowrap;
}
.chip--brand { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); color: var(--brand-deep); }
:root[data-theme="dark"] .chip--brand { color: var(--brand); }
.chip--dark { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); color: #C6D4E6; }

.wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.wall__i {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 60px; padding: .6rem .5rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  font-size: .8125rem; font-weight: 600; color: var(--text); letter-spacing: -.01em;
}
@media (max-width: 900px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .625rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: .2rem .5rem; border-radius: 4px;
}
.badge--new { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand-deep); }
:root[data-theme="dark"] .badge--new { color: var(--brand); }
.badge--soon { background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber); }
.badge--info { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }

/* ---------- quote ---------- */
.quote { border-left: 3px solid var(--brand); padding-left: 1.25rem; margin: 0; }
.quote p { font-size: clamp(1.0625rem, .95rem + .6vw, 1.375rem); line-height: 1.45; color: var(--ink); font-weight: 500; letter-spacing: -.015em; }
.quote footer { font-size: .8125rem; color: var(--muted); }
.sec--dark .quote p { color: #fff; }

/* ---------- tabs ---------- */
.tabs__list { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; padding: 0; }
.tabs__btn {
  font: inherit; font-size: .8125rem; font-weight: 600; color: var(--muted);
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: .55rem .8rem; cursor: pointer; margin-bottom: -1px; border-radius: 6px 6px 0 0;
}
.tabs__btn:hover { color: var(--ink); background: var(--bg-alt); }
.tabs__btn[aria-selected="true"] { color: var(--brand-deep); border-bottom-color: var(--brand); }
:root[data-theme="dark"] .tabs__btn[aria-selected="true"] { color: var(--brand); }
.tabs__panel[hidden] { display: none; }

/* ---------- accordion ---------- */
.acc { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.acc details { border-bottom: 1px solid var(--line); }
.acc details:last-child { border-bottom: 0; }
.acc summary {
  cursor: pointer; padding: .8rem 1.1rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: .6rem; list-style: none; font-size: .9375rem;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+"; margin-left: auto; color: var(--faint); font-weight: 400; font-size: 1.1rem; line-height: 1;
}
.acc details[open] summary::after { content: "\2013"; }
.acc summary:hover { background: var(--bg-alt); }
.acc__body { padding: 0 1.1rem 1.1rem; font-size: .875rem; color: var(--muted); }
.acc__body p:first-child { margin-top: 0; }

/* ---------- notes / callouts ---------- */
.note {
  border: 1px solid var(--line); border-left: 3px solid var(--info);
  border-radius: var(--r); padding: .85rem 1.1rem; background: var(--bg-alt); font-size: .875rem;
}
.note--brand { border-left-color: var(--brand); }
.note--amber { border-left-color: var(--amber); }
.note p:last-child { margin-bottom: 0; }
.note__h { font-weight: 700; color: var(--ink); display: block; margin-bottom: .2rem; font-size: .875rem; }

/* ---------- media figures (inline SVG) ---------- */
.fig { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); padding: 1rem; }
.fig svg { width: 100%; height: auto; font-family: var(--sans); }
.fig svg .m { font-family: var(--mono); }
.fig figcaption { font-size: .75rem; color: var(--faint); margin-top: .65rem; font-family: var(--mono); letter-spacing: .02em; }
.fig--dark { background: var(--dark-card); border-color: var(--dark-line); }
.fig--dark figcaption { color: #7C8CA3; }

.mock {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--card); box-shadow: var(--shadow);
}
.mock__bar {
  display: flex; align-items: center; gap: .4rem; padding: .5rem .75rem;
  border-bottom: 1px solid var(--line); background: var(--bg-alt);
}
.mock__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.mock__title { font-family: var(--mono); font-size: .6875rem; color: var(--faint); margin-left: .35rem; }
.mock__body { padding: .9rem; }

/* ---------- people ---------- */
.person { text-align: left; }
.person__av {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: .8125rem; font-weight: 700; letter-spacing: .02em;
  background: color-mix(in srgb, var(--brand) 14%, var(--card)); color: var(--brand-deep);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); margin-bottom: .7rem;
}
:root[data-theme="dark"] .person__av { color: var(--brand); }
.person h3 { margin-bottom: .1rem; font-size: .9375rem; }
.person__r { font-size: .8125rem; color: var(--muted); margin: 0; }
.person__o { font-family: var(--mono); font-size: .6875rem; color: var(--faint); margin: .3rem 0 0; letter-spacing: .04em; }

/* ---------- forms ---------- */
.form { display: grid; gap: .85rem; }
.field { display: grid; gap: .3rem; }
.field label { font-size: .8125rem; font-weight: 600; color: var(--ink); }
.field .req { color: var(--amber); }
.field .hint { font-size: .75rem; color: var(--faint); }
.input, .select, .textarea {
  font: inherit; font-size: .9375rem; color: var(--ink); background: var(--card);
  border: 1px solid var(--line-strong); border-radius: var(--r); padding: .6rem .75rem; width: 100%;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); outline: 2px solid color-mix(in srgb, var(--brand) 30%, transparent); outline-offset: 0; }
.textarea { min-height: 118px; resize: vertical; }
.field--err .input, .field--err .select, .field--err .textarea { border-color: #DC2626; }
.err { font-size: .75rem; color: #DC2626; }
:root[data-theme="dark"] .err { color: #FCA5A5; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.consent { display: flex; gap: .55rem; align-items: flex-start; font-size: .8125rem; color: var(--muted); }
.consent input { margin-top: .2rem; }
.formmsg { border-radius: var(--r); padding: .8rem 1rem; font-size: .875rem; border: 1px solid var(--line); background: var(--bg-alt); }
.formmsg--ok { border-left: 3px solid var(--brand); }

/* ---------- lists ---------- */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.ticks li { position: relative; padding-left: 1.4rem; font-size: .875rem; color: var(--muted); margin: 0; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .48em; width: 8px; height: 8px;
  border-radius: 2px; background: var(--brand); opacity: .85;
}
.ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1.5rem; }
@media (max-width: 640px) { .ticks--2 { grid-template-columns: 1fr; } }

.deflist { display: grid; gap: 0; margin: 0; }
.deflist > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.deflist > div:last-child { border-bottom: 0; }
.deflist dt { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: .15rem 0 0; }
.deflist dd { margin: 0; font-size: .875rem; color: var(--text); }
@media (max-width: 560px) { .deflist > div { grid-template-columns: 1fr; gap: .1rem; } }

.office { font-style: normal; font-size: .875rem; color: var(--muted); line-height: 1.6; }

/* ---------- section nav (on long pages) ---------- */
.pagenav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.pagenav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; overflow-x: auto; }
.pagenav li { margin: 0; }
.pagenav a {
  display: block; padding: .65rem .75rem; font-size: .8125rem; font-weight: 600;
  color: var(--muted); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent;
}
.pagenav a:hover { color: var(--ink); }
.pagenav a.is-active { color: var(--brand-deep); border-bottom-color: var(--brand); }
:root[data-theme="dark"] .pagenav a.is-active { color: var(--brand); }

/* ---------- CTA band ---------- */
.cta {
  background: linear-gradient(135deg, var(--dark-bg) 0%, #10243A 55%, #1B1B4A 100%);
  color: #fff; border-top: 1px solid var(--dark-line);
}
.cta__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2.5rem; align-items: center; padding-block: clamp(2rem, 1.4rem + 2vw, 3rem); }
.cta h2 { color: #fff; margin-bottom: .4rem; }
.cta p { color: #B9C8DC; margin: 0; max-width: 62ch; }
@media (max-width: 800px) { .cta__in { grid-template-columns: 1fr; } }

/* ---------- misc ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2.5vw, 3.25rem); align-items: start; }
.split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.split--wide-right { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
@media (max-width: 900px) { .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; } }
.sticky { position: sticky; top: calc(var(--hdr-h) + 20px); }
@media (max-width: 1080px) { .sticky { position: static; } }
.divider { height: 1px; background: var(--line); margin: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }