/* namaa — palette */
:root {
  --cta:       var(--accent);   /* primary-button fill */
  --cta-ink:   #fff;            /* type on that fill */
  --kicker:    var(--accent);   /* section eyebrows */
  --deep-grad: none;            /* optional wash over the dark bands */
  --deep-up:   #4ECB93;         /* price movers, on the dark bands */
  --deep-down: #EE7C6E;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui:      "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;
  --gutter: clamp(16px, 4.2vw, 44px);
  --shell: 1180px;
  --shadow:      0 1px 2px rgba(16,18,40,.05), 0 8px 24px -12px rgba(16,18,40,.18);
  --shadow-lift: 0 2px 4px rgba(16,18,40,.07), 0 18px 40px -18px rgba(16,18,40,.26);
  --bg: #FFFFFF;
  --bg-2: #FBF9F4;
  --bg-3: #F2EEE4;
  --ink: #12241A;
  --ink-2: #45584C;
  --ink-3: #62746A;
  --line: #E6E3D8;
  --line-2: #CFCBBC;
  --accent: #1E7044;
  --accent-2: #2F5F9B;
  --kicker: #2F5F9B;
  --accent-soft: #F7F3E9;
  --accent-edge: #D8CFB6;
  --up: #167A4E;
  --down: #C0392B;
  --deep: #10322A;
  /* the arch in the logo runs blue into green; the bands do the same */
  --deep-grad: linear-gradient(103deg, #0E2A3C 0%, #123A32 52%, #12301F 100%);
  --deep-2: #17382C;
  --deep-ink: #EAF3ED;
  --deep-ink-2: #A3BFAE;
  --deep-line: #204538;
  --deep-accent: #84C39C;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1711;
    --bg-2: #102017;
    --bg-3: #16291D;
    --ink: #E8F1EB;
    --ink-2: #A0B5A7;
    --ink-3: #75887C;
    --line: #1F3527;
    --line-2: #2E4936;
    --accent: #6FB98A;
    --cta-ink: #0A1714;
    --accent-2: #8FB4DC;
    --kicker: #8FB4DC;
    --accent-soft: #14261A;
    --accent-edge: #2F5C3D;
    --up: #43C186;
    --down: #E4695B;
    --deep: #071210;
    --deep-2: #0F2A1B;
    --shadow:      0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
    --shadow-lift: 0 2px 6px rgba(0,0,0,.45), 0 22px 46px -20px rgba(0,0,0,.8);
  }
}

:root[data-theme="dark"] {
  --bg: #0A1711;
  --bg-2: #102017;
  --bg-3: #16291D;
  --ink: #E8F1EB;
  --ink-2: #A0B5A7;
  --ink-3: #75887C;
  --line: #1F3527;
  --line-2: #2E4936;
  --accent: #6FB98A;
  --cta-ink: #0A1714;
  --accent-2: #8FB4DC;
  --kicker: #8FB4DC;
  --accent-soft: #14261A;
  --accent-edge: #2F5C3D;
  --up: #43C186;
  --down: #E4695B;
  --deep: #071210;
  --deep-2: #0F2A1B;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.45), 0 22px 46px -20px rgba(0,0,0,.8);
}

/* Shared layout system — palette tokens are injected per brand above. */

/* ---------- reset (sub-pages ship without the artifact skeleton) -------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; margin: 0; line-height: 1.12; letter-spacing: -.012em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

/* ---------- primitives ---------- */
.wrap { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: 66ch; }
.stack { display: flex; flex-direction: column; }
.stack-4 { gap: 4px; } .stack-8 { gap: 8px; } .stack-12 { gap: 12px; }
.stack-16 { gap: 16px; } .stack-24 { gap: 24px; } .stack-32 { gap: 32px; } .stack-48 { gap: 48px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--kicker);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: none; }
.eyebrow.plain::before { display: none; }

.h-xl  { font-size: clamp(2.3rem, 6.2vw, 4.15rem); }
.h-lg  { font-size: clamp(1.85rem, 4.2vw, 2.9rem); }
.h-md  { font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
.h-sm  { font-size: 1.14rem; letter-spacing: -.005em; }
.lede  { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--ink-2); line-height: 1.66; }
.small { font-size: .875rem; color: var(--ink-2); }
.tiny  { font-size: .78rem; color: var(--ink-3); }
.mono  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.prose p + p { margin-top: 1em; }
.prose { color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent); text-underline-offset: 3px; }

section { padding-block: clamp(52px, 8vw, 96px); }
section.tight { padding-block: clamp(36px, 5vw, 60px); }
.ruled { border-top: 1px solid var(--line); }
.on-deep { background: var(--deep); color: var(--deep-ink); }
.on-deep h1, .on-deep h2, .on-deep h3 { color: var(--deep-ink); }
.on-deep .lede, .on-deep .small { color: var(--deep-ink-2); }
.on-deep .eyebrow { color: var(--deep-accent); }
.on-panel { background: var(--bg-2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 999px;
  font-size: .92rem; font-weight: 600; letter-spacing: .005em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-1px); }
/* --cta defaults to --accent; a brand can point it at a separate action colour */
.btn-primary { background: var(--cta); color: var(--cta-ink); }
.btn-primary:hover { background: color-mix(in oklab, var(--cta) 86%, var(--ink)); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.on-deep .btn-ghost { border-color: var(--deep-line); color: var(--deep-ink); }
.on-deep .btn-ghost:hover { border-color: var(--deep-accent); color: var(--deep-accent); }
.btn-sm { padding: 9px 15px; font-size: .84rem; }
.arrow { font-family: var(--font-mono); font-size: .95em; }

.link-more {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); text-decoration: none; display: inline-flex; gap: 7px; align-items: center;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); padding-bottom: 2px;
  width: fit-content;
}
.link-more:hover { border-bottom-color: var(--accent); }

/* ---------- market tape ---------- */
.tape {
  background: var(--deep); color: var(--deep-ink);
  border-bottom: 1px solid var(--deep-line);
  overflow: hidden; position: relative;
  padding-top: env(safe-area-inset-top, 0px);
}
.tape-track { display: flex; width: max-content; animation: tape 62s linear infinite; }
.tape:hover .tape-track { animation-play-state: paused; }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tape-item {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 7px 18px; font-family: var(--font-mono); font-size: .76rem;
  border-right: 1px solid var(--deep-line); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tape-item b { font-weight: 600; letter-spacing: .04em; }
.tape-item .px { color: var(--deep-ink-2); }
.up { color: var(--up); } .down { color: var(--down); }
.on-deep .up { color: #43C186; } .on-deep .down { color: #E4695B; }
@media (prefers-reduced-motion: reduce) { .tape-track { animation: none; } }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line);
  overflow-x: clip;
}
.header-row { display: flex; align-items: center; gap: 20px; height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); flex: none; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-name, .brand-sub { display: block; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; line-height: 1.05; letter-spacing: -.01em; }
.brand-sub { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 12px; border-radius: var(--r); text-decoration: none;
  font-size: .89rem; font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.nav-link:hover, .nav-item:hover .nav-link { color: var(--ink); background: var(--bg-3); }
.nav-link[aria-current="page"] { color: var(--accent); }
.caret { width: 8px; height: 8px; opacity: .55; }
.panel {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift); padding: 12px; min-width: 250px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  pointer-events: none;
}
.nav-item:hover .panel, .nav-item:focus-within .panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.panel.right { left: auto; right: 0; }
.panel-grid { display: grid; gap: 2px; }
.panel-grid.two { grid-template-columns: 1fr 1fr; min-width: 480px; }
.panel a {
  display: block; padding: 8px 11px; border-radius: var(--r-sm);
  text-decoration: none; font-size: .87rem; color: var(--ink-2);
}
.panel a:hover { background: var(--bg-3); color: var(--ink); }
.panel a span { display: block; font-size: .74rem; color: var(--ink-3); }
.panel-label {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); padding: 10px 11px 5px;
}
.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer;
}
.icon-btn:hover { border-color: var(--line-2); background: var(--bg-3); }
.burger { display: none; }

/* drawer */
.drawer {
  position: fixed; inset: 0; z-index: 90; background: var(--bg);
  overflow-y: auto; padding: 18px var(--gutter) 60px;
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.drawer details { border-bottom: 1px solid var(--line); }
.drawer summary {
  list-style: none; cursor: pointer; padding: 14px 0;
  font-family: var(--font-display); font-size: 1.12rem; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
}
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: "+"; font-family: var(--font-mono); color: var(--accent); font-size: 1.2rem; }
.drawer details[open] summary::after { content: "–"; }
.drawer .panel-grid { padding: 0 0 14px; gap: 0; }
.drawer .panel-grid a { padding: 9px 0; font-size: .95rem; color: var(--ink-2); text-decoration: none; display: block; }
.drawer .panel-label { padding-left: 0; }
.drawer .solo { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; }

/* ---------- page head ---------- */
.page-head { background: var(--deep); color: var(--deep-ink); padding-block: clamp(40px, 6vw, 72px); position: relative; overflow: hidden; }
.page-head::after {
  content: ""; position: absolute; right: -8%; top: -60%;
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(215,169,74,.13), transparent 66%);
  pointer-events: none;
}
.crumbs { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--deep-ink-2); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.crumbs a { color: var(--deep-ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--deep-accent); }
.page-head h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); max-width: 18ch; }
.page-head .lede { color: var(--deep-ink-2); margin-top: 16px; max-width: 62ch; }

/* ---------- hero ---------- */
.hero { background: var(--deep); color: var(--deep-ink); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 90% at 78% 10%, rgba(215,169,74,.16), transparent 60%),
    radial-gradient(60% 70% at 8% 92%, rgba(67,193,134,.09), transparent 62%);
}
.hero-grid {
  position: relative; display: grid; gap: clamp(32px, 5vw, 60px);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center; padding-block: clamp(48px, 7vw, 88px);
}
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4rem); letter-spacing: -.022em; }
.hero h1 em { font-style: normal; color: var(--deep-accent); }
.hero .lede { color: var(--deep-ink-2); max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 6px; }
.hero-trust span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--deep-ink-2); display: flex; gap: 8px; align-items: center; }
.hero-trust span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--deep-accent); }

/* board — the market snapshot panel */
.board {
  background: color-mix(in oklab, var(--deep-2) 82%, transparent);
  border: 1px solid var(--deep-line); border-radius: var(--r-lg);
  backdrop-filter: blur(6px); overflow: hidden;
}
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--deep-line); }
.board-head h3 { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--deep-ink-2); }
.live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--up); }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .live::before { animation: none; } }
.board-index { padding: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--deep-line); }
.board-index .val { font-family: var(--font-mono); font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.board-index .name { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--deep-ink-2); }
.spark { width: 108px; height: 42px; flex: none; }
.board-rows { display: grid; }
.board-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline;
  padding: 10px 18px; font-family: var(--font-mono); font-size: .8rem; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid color-mix(in oklab, var(--deep-line) 60%, transparent);
}
.board-row:last-child { border-bottom: 0; }
.board-row b { font-weight: 600; letter-spacing: .04em; }
.board-row .px { color: var(--deep-ink-2); }
.board-foot { padding: 11px 18px; font-size: .7rem; color: var(--deep-ink-2); font-family: var(--font-mono); letter-spacing: .04em; border-top: 1px solid var(--deep-line); }

/* ---------- grids & cards ---------- */
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; gap: clamp(28px, 5vw, 64px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.split.lean { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }

.card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--accent-edge); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.card h3 { font-size: 1.1rem; }
.card p { font-size: .91rem; color: var(--ink-2); line-height: 1.58; }
.card .ix { color: var(--accent); }
.card-foot { margin-top: auto; padding-top: 8px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

/* plain list of features — no card chrome */
.feature { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
.feature .ix { color: var(--accent); }
.feature h3 { font-size: 1.02rem; margin-bottom: 4px; }
.feature p { font-size: .9rem; color: var(--ink-2); line-height: 1.56; }

.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stat { background: var(--bg-2); padding: 22px 20px; display: flex; flex-direction: column; gap: 5px; }
.stat .n { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.stat .k { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.on-deep .stat-row { background: var(--deep-line); border-color: var(--deep-line); }
.on-deep .stat { background: var(--deep-2); }
.on-deep .stat .n { color: var(--deep-ink); }
.on-deep .stat .k { color: var(--deep-ink-2); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-2); }
table { width: 100%; border-collapse: collapse; font-size: .89rem; min-width: 460px; }
thead th {
  text-align: left; font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-3); white-space: nowrap;
}
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody td:first-child { color: var(--ink); font-weight: 500; }
td.num, th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- document rows ---------- */
.docs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.doc {
  background: var(--bg-2); display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; text-decoration: none; color: inherit;
}
.doc:hover { background: var(--bg-3); }
.doc .ix { color: var(--accent); flex: none; }
.doc-name { font-weight: 500; font-size: .95rem; }
.doc-meta { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-left: auto; flex: none; }

/* ---------- people ---------- */
.person { display: flex; flex-direction: column; gap: 12px; }
.portrait {
  aspect-ratio: 4 / 5; max-width: 100%; border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--bg-3), color-mix(in oklab, var(--accent-soft) 70%, var(--bg-3)));
  border: 1px solid var(--line); display: grid; place-items: center;
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; color: var(--accent);
  letter-spacing: .02em;
}
.person .role { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.person h3 { font-size: 1.05rem; }
.person p { font-size: .88rem; color: var(--ink-2); line-height: 1.55; }

/* ---------- steps (only where order is real) ---------- */
.steps { display: grid; gap: 0; counter-reset: s; }
.step { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: var(--font-mono); font-size: .82rem; color: var(--accent); letter-spacing: .06em; padding-top: 3px;
}
.step h3 { font-size: 1.08rem; margin-bottom: 5px; }
.step p { font-size: .92rem; color: var(--ink-2); }

/* ---------- accordion ---------- */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
  font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 16px;
  font-family: var(--font-mono); font-size: 1.25rem; color: var(--accent); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding-bottom: 20px; color: var(--ink-2); font-size: .95rem; max-width: 72ch; }
.faq .answer p + p, .faq .answer ul { margin-top: .8em; }

/* ---------- lists ---------- */
.ticks { display: grid; gap: 9px; list-style: none; }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 11px; font-size: .94rem; color: var(--ink-2); align-items: start; }
.ticks li::before { content: "→"; font-family: var(--font-mono); color: var(--accent); font-size: .85rem; line-height: 1.7; }
.inline-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.pill {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2);
}
.pill.accent { border-color: var(--accent-edge); color: var(--accent); background: var(--accent-soft); }

/* ---------- callout ---------- */
.callout {
  border-left: 2px solid var(--accent); background: var(--bg-2);
  padding: 18px 22px; border-radius: 0 var(--r) var(--r) 0; display: grid; gap: 7px;
}
.callout h3 { font-size: 1.02rem; }
.callout p { font-size: .91rem; color: var(--ink-2); }

/* ---------- forms ---------- */
.field { display: grid; gap: 7px; }
.field label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 11px 13px; width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
.form-note { font-size: .78rem; color: var(--ink-3); }
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--bg-3); border-radius: 999px; width: fit-content; max-width: 100%; overflow-x: auto; }
.tab {
  border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  padding: 8px 16px; border-radius: 999px; font-size: .86rem; font-weight: 500; color: var(--ink-2);
}
.tab[aria-selected="true"] { background: var(--bg-2); color: var(--ink); box-shadow: var(--shadow); }

/* ---------- cta band ---------- */
.cta-band {
  background: var(--deep); color: var(--deep-ink); border-radius: var(--r-lg);
  padding: clamp(28px, 5vw, 52px); display: grid; gap: 26px;
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; position: relative; overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; left: -10%; bottom: -70%; width: 40%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(215,169,74,.16), transparent 65%);
}
.cta-band > * { position: relative; }
.cta-band h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); color: var(--deep-ink); }
.cta-band p { color: var(--deep-ink-2); font-size: .98rem; margin-top: 8px; max-width: 52ch; }

/* ---------- footer ---------- */
.site-footer { background: var(--deep); color: var(--deep-ink); padding-block: clamp(44px, 6vw, 72px) 0; }
.foot-grid { display: grid; gap: 34px; grid-template-columns: 1.45fr 1fr 1fr 1fr; }
.foot-grid h4 { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--deep-accent); margin-bottom: 14px; }
.foot-grid ul { list-style: none; display: grid; gap: 9px; }
.foot-grid a { color: var(--deep-ink-2); text-decoration: none; font-size: .89rem; }
.foot-grid a:hover { color: var(--deep-ink); }
.foot-about p { color: var(--deep-ink-2); font-size: .89rem; max-width: 34ch; margin-top: 12px; }
.socials { display: flex; gap: 8px; margin-top: 16px; }
.socials a { width: 34px; height: 34px; border: 1px solid var(--deep-line); border-radius: 999px; display: grid; place-items: center; color: var(--deep-ink-2); }
.socials a:hover { border-color: var(--deep-accent); color: var(--deep-accent); }
.regbar { margin-top: 44px; border-top: 1px solid var(--deep-line); padding-block: 20px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.regbar span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--deep-ink-2); }
.foot-legal { border-top: 1px solid var(--deep-line); padding-block: 18px 26px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .8rem; color: var(--deep-ink-2); }
.foot-legal a { color: var(--deep-ink-2); text-decoration: none; }
.foot-legal a:hover { color: var(--deep-ink); }
.disclaim { color: var(--deep-ink-2); font-size: .76rem; line-height: 1.6; max-width: 92ch; padding-bottom: 28px; }

/* whatsapp fab */
.fab {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 70;
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 17px; border-radius: 999px;
  background: #1B7F53; color: #fff; text-decoration: none; font-size: .85rem; font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(27,127,83,.7);
}
.fab:hover { background: #166b47; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav { display: none; }
  .burger { display: grid; }
  .header-actions { margin-left: auto; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .split, .split.lean { grid-template-columns: minmax(0, 1fr); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .stat-row { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: 1fr; }
  .header-row { height: 60px; }
  .brand-sub { display: none; }
  .brand-name { font-size: .98rem; }
  .header-actions .btn-primary { display: none; }
  .header-actions { gap: 4px; }
  .step { grid-template-columns: 40px 1fr; gap: 14px; }
  .fab span { display: none; }
  .fab { padding: 13px; }
}

/* ---------- brand lockups ---------- */
.brand-logo { height: 50px; width: auto; flex: none; }
.brand-logo.sm { height: 38px; }
.brand-mark-img { height: 38px; width: auto; flex: none; }
@media (max-width: 620px) { .brand-logo { height: 38px; } .brand-mark-img { height: 32px; } }

.brand-wall { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.brand-card {
  flex: 1 1 280px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.brand-card:hover { border-color: var(--accent-edge); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
/* the card is a column flex container, so an img with a fixed height would
   stretch to the full card width — pin it to its own intrinsic width */
.brand-card img { height: 56px; width: auto; align-self: flex-start; object-fit: contain; }
.brand-card h3 { font-size: 1.12rem; }
.brand-card p { font-size: .92rem; color: var(--ink-2); line-height: 1.58; }
.brand-card .card-foot { margin-top: auto; padding-top: 10px; }

/* three-group dropdown, for the merged Company menu */
.panel-grid.three { grid-template-columns: repeat(3, 1fr); min-width: 700px; }
@media (max-width: 1240px) { .panel-grid.three { min-width: 640px; } }

/* soft brand-tinted band, so a section reads as its own block */
.tinted { background: var(--accent-soft); }
/* cards sit on --bg so they stay distinct from the tint in both themes:
   white on pale blue in light, darker than the band in dark */
.tinted .card { background: var(--bg); border-color: var(--line-2); }

/* ---------- service pillars ---------- */
.pillars { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pillar { background: var(--bg-2); padding: 26px 22px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.pillar:hover { background: var(--bg-3); }
.pillar .n { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.pillar h3 { font-size: 1.08rem; }
.pillar p { font-size: .88rem; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pillars { grid-template-columns: minmax(0, 1fr); } }

/* ---------- routing table (conventional vs shariah) ---------- */
.route { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.route-col { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); }
.route-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.route-head img { height: 34px; width: auto; object-fit: contain; flex: none; }
.route-head .k { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.route-body { padding: 20px 22px; display: grid; gap: 12px; }
.route-body p { font-size: .92rem; color: var(--ink-2); }
@media (max-width: 760px) { .route { grid-template-columns: minmax(0, 1fr); } }

/* a standalone endorsement lockup. .endorse below is an inline "in association
   with" strip and caps its mark at 30px, which is far too small for a stacked
   lockup used as the centrepiece of a section. */
.endorse-lockup { display: flex; justify-content: center; margin-bottom: 32px; }
.endorse-lockup img { height: clamp(96px, 12vw, 140px); width: auto; object-fit: contain; }
@media (max-width: 620px) { .endorse-lockup { margin-bottom: 24px; } }

/* ---------- endorsement strip ---------- */
.endorse { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.endorse img { height: 30px; width: auto; object-fit: contain; flex: none; }
.on-deep .endorse { color: var(--deep-ink-2); }

/* No leading rule on any eyebrow — labels sit flush with the text below them. */
.eyebrow::before { display: none; }

/* The hero and CTA band are dark grounds in BOTH themes, so their outline
   buttons must take the deep token set — not --ink, which is dark in light mode. */
.hero .btn-ghost,
.cta-band .btn-ghost,
.page-head .btn-ghost { border-color: var(--deep-line); color: var(--deep-ink); background: transparent; }
.hero .btn-ghost:hover,
.cta-band .btn-ghost:hover,
.page-head .btn-ghost:hover { border-color: var(--deep-accent); color: var(--deep-accent); }
.hero .link-more, .cta-band .link-more { color: var(--deep-accent); }
/* the section-eyebrow colour is tuned for white grounds; on the dark bands it
   was landing at 1.9:1, so point it at the light token instead */
.hero .eyebrow, .page-head .eyebrow, .cta-band .eyebrow { color: var(--deep-accent); }

/* --up/--down are mixed for white grounds and only reach ~3.4:1 on the dark
   bands, so the ticker and the market board get their own lighter pair */
.tape .up, .board .up, .on-deep .up, .hero .up, .page-head .up, .cta-band .up { color: var(--deep-up); }
.tape .down, .board .down, .on-deep .down, .hero .down, .page-head .down, .cta-band .down { color: var(--deep-down); }

/* body copy inside a dark section was still inheriting --ink-2 (1.8:1 on the
   deep ground); .lede and .small were covered, plain paragraphs were not */
.on-deep p, .on-deep li, .on-deep td, .on-deep th, .on-deep h4,
.hero p, .page-head p, .cta-band p { color: var(--deep-ink-2); }

/* ---------- mobile ergonomics ---------- */
@media (max-width: 620px) {
  /* footer links were 16px tall; give them a finger-sized hit area */
  .foot-grid ul { gap: 0; }
  .foot-grid a { display: block; padding-block: 13px; }
  .foot-legal a { display: inline-block; padding-block: 10px; }
  .link-more { padding-block: 10px; }
  /* the market panel timestamp was 10.6px */
  .board-head .mono { font-size: .74rem !important; }
}

/* an optional gradient over the dark bands; --deep stays the flat fallback
   (ticker tape, footer) so a brand that sets no wash is unchanged */
.hero, .page-head, .cta-band { background-image: var(--deep-grad); }

/* footer wordmark, set in type so it reads on the dark ground */
.foot-wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; color: var(--deep-ink); letter-spacing: -.01em; line-height: 1.2; }
.foot-wordmark span { display: block; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--deep-accent); margin-top: 6px; }

/* ==========================================================================
   Polish layer — motion, depth and interaction detail only.
   No new colour values: everything below reuses the existing tokens.
   ========================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { text-rendering: optimizeLegibility; }
.lede, .prose p, .card p, .faq .answer { text-wrap: pretty; }

/* header gains depth once the page scrolls under it */
.site-header { transition: box-shadow .25s ease, background-color .25s ease; }
.site-header.scrolled { box-shadow: var(--shadow); }

/* active / hover nav link: a thin underline grows in from the centre */
.nav-link { position: relative; transition: color .16s ease, background-color .16s ease; }
.nav-link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transition: transform .22s ease;
}
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.caret { transition: transform .2s ease, opacity .2s ease; }
.nav-item:hover .caret, .nav-item:focus-within .caret { transform: rotate(180deg); opacity: .9; }

/* dropdown items nudge on hover */
.panel a { transition: background-color .14s ease, color .14s ease, padding-left .18s ease; }
.panel a:hover { padding-left: 15px; }

/* buttons: arrow slides, press feels physical, shadow on primary */
.btn { transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary:hover { box-shadow: var(--shadow-lift); }
.arrow { display: inline-block; transition: transform .2s ease; }
.btn:hover .arrow, .link-more:hover .arrow { transform: translateX(3px); }
.link-more { transition: border-color .16s ease, gap .2s ease; }
.link-more:hover { gap: 10px; }

/* cards: icon and footer respond to the hover */
.card .ix, .feature .ix { transition: transform .25s ease; }
a.card:hover .ix { transform: translateY(-2px) scale(1.06); }
.card-foot { transition: letter-spacing .22s ease; }
a.card:hover .card-foot { letter-spacing: .14em; }
a.card, .brand-card, .pillar { will-change: transform; }
.pillar { transition: background-color .18s ease; }
.pillar h3 { transition: transform .2s ease; }
.pillar:hover h3 { transform: translateX(3px); }

/* stat strip and board rows */
.stat { transition: background-color .18s ease; }
.stat:hover { background: var(--bg-3); }
.on-deep .stat:hover { background: var(--deep-2); }
.board { box-shadow: var(--shadow-lift); }
.board-row { transition: background-color .15s ease; }
.board-row:hover { background: color-mix(in oklab, var(--deep-line) 35%, transparent); }

/* tables and document rows */
tbody tr { transition: background-color .14s ease; }
tbody tr:hover td { background: var(--bg-3); }
.doc { transition: background-color .15s ease; }
.doc .ix { transition: transform .2s ease; }
.doc:hover .ix { transform: translateX(2px); }

/* FAQ: smoother toggle, rotating marker, gentle answer reveal */
.faq summary { transition: color .16s ease; }
.faq summary:hover { color: var(--accent); }
.faq summary::after { transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details[open] .answer { animation: faq-in .3s ease both; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* forms: soft focus ring from the existing accent */
.field input, .field select, .field textarea { transition: border-color .16s ease, box-shadow .16s ease; }
.field input:focus, .field select:focus, .field textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.tab { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.tab:hover { color: var(--ink); }

/* socials, icon buttons, whatsapp */
.icon-btn { transition: border-color .16s ease, background-color .16s ease, transform .16s ease; }
.icon-btn:active { transform: scale(.94); }
.socials a { transition: border-color .16s ease, color .16s ease, transform .18s ease; }
.socials a:hover { transform: translateY(-2px); }
.fab { transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
.fab:hover { transform: translateY(-2px); }

/* mobile drawer slides in */
.drawer:not([hidden]) { animation: drawer-in .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes drawer-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* hero entrance */
.hero-grid > * { animation: rise .7s cubic-bezier(.2,.8,.2,1) both; }
.hero-grid > :nth-child(2) { animation-delay: .12s; }
.page-head .wrap { animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* scroll reveal — JS adds .reveal only when motion is allowed, so content is
   never hidden if the script or the observer is unavailable */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}
@media (hover: none) {
  a.card:hover, .brand-card:hover, .btn:hover { transform: none; }
}

/* ==========================================================================
   Hero lift — more height, presence and depth. Same palette tokens only.
   ========================================================================== */

/* more breathing room, so the band reads as the page's opening statement */
.hero-grid { padding-block: clamp(64px, 9.5vw, 128px); gap: clamp(36px, 6vw, 84px); }

/* faint graph-paper grid, fading out toward the edges */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in oklab, var(--deep-ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--deep-ink) 5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 72% 45%, #000 10%, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 80% at 72% 45%, #000 10%, transparent 72%);
}

/* eyebrow becomes a small badge with a live dot */
.hero .eyebrow {
  width: fit-content; padding: 7px 14px 7px 12px; border-radius: 999px;
  border: 1px solid var(--deep-line);
  background: color-mix(in oklab, var(--deep-2) 55%, transparent);
  backdrop-filter: blur(6px);
}
.hero .eyebrow::before {
  display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 22%, transparent);
}

/* headline: larger, tighter, with a drawn underline under the key word */
.hero h1 { font-size: clamp(2.8rem, 6.6vw, 5rem); line-height: 1.02; letter-spacing: -.03em; }
.hero h1 em { position: relative; white-space: nowrap; }
.hero h1 em::after {
  content: ""; position: absolute; left: .02em; right: .04em; bottom: -.02em; height: .07em;
  border-radius: 99px; background: currentColor; opacity: .45;
  transform-origin: left; animation: underline-draw .9s .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes underline-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero .lede { font-size: clamp(1.05rem, 1.55vw, 1.2rem); max-width: 50ch; }

/* buttons: a touch larger; primary glows, ghost gets a glass fill so it doesn't vanish */
.hero .btn { padding: 14px 24px; font-size: .96rem; }
.hero .btn-primary { box-shadow: 0 14px 34px -14px color-mix(in oklab, var(--cta) 85%, transparent), inset 0 1px 0 color-mix(in oklab, var(--cta-ink) 16%, transparent); }
.hero .btn-primary:hover { box-shadow: 0 18px 40px -14px color-mix(in oklab, var(--cta) 95%, transparent), inset 0 1px 0 color-mix(in oklab, var(--cta-ink) 16%, transparent); }
.hero .btn-ghost { background: color-mix(in oklab, var(--deep-ink) 5%, transparent); border-color: color-mix(in oklab, var(--deep-ink) 18%, transparent); backdrop-filter: blur(6px); }
.hero .btn-ghost:hover { background: color-mix(in oklab, var(--deep-ink) 9%, transparent); }

/* trust row sits on its own hairline */
.hero-trust { padding-top: 22px; margin-top: 4px; border-top: 1px solid color-mix(in oklab, var(--deep-line) 80%, transparent); max-width: 520px; }
.hero-trust span::before { box-shadow: 0 0 0 3px color-mix(in oklab, var(--deep-accent) 20%, transparent); }

/* board: framed by the logo's arch, lit along its top edge, floating off the band */
.board-wrap { position: relative; }
.board-wrap::before {
  content: ""; position: absolute; inset: -26px -22px -26px -22px; z-index: 0; pointer-events: none;
  border: 1px solid color-mix(in oklab, var(--deep-accent) 22%, transparent);
  border-radius: 999px 999px var(--r-lg) var(--r-lg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
}
.board-wrap::after {
  content: ""; position: absolute; inset: 10% 8%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--deep-accent) 16%, transparent), transparent);
  filter: blur(30px);
}
.board {
  position: relative; z-index: 1;
  border-color: color-mix(in oklab, var(--deep-accent) 20%, var(--deep-line));
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.65), 0 0 0 1px color-mix(in oklab, var(--deep-ink) 3%, transparent) inset;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.board::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--deep-accent) 70%, transparent), transparent);
}
@media (hover: hover) { .board-wrap:hover .board { transform: translateY(-4px); } }
.board-index { padding: 22px 20px; align-items: center; }
.board-index .val { font-size: clamp(2.1rem, 4.4vw, 2.8rem); }
.board-row { padding: 11px 20px; }
.board-head, .board-foot { padding-inline: 20px; }

/* sparkline draws itself in */
.spark { overflow: visible; }
.spark-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: spark-draw 1.4s .5s ease-out forwards; }
@keyframes spark-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 860px) {
  .board-wrap { max-width: 560px; }
  .board-wrap::before { inset: -18px -14px; }
}
@media (max-width: 480px) {
  .spark { display: none; }
  .board-wrap::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .spark-line { stroke-dashoffset: 0; }
}
/* keep hero content above the grid overlay */
.hero-grid { z-index: 1; }
/* sparkline gives way first when the board is narrow, the figures never clip */
.board-index { gap: 14px; }
.board-index > :first-child, .board-index > :last-child { flex: none; white-space: nowrap; }
.board-index .spark { flex: 1 1 108px; min-width: 56px; max-width: 108px; width: auto; }
.board-index .val { font-size: clamp(2rem, 3.6vw, 2.6rem); }
.board-index .spark { min-width: 36px; }
@media (max-width: 1100px) { .board-index { gap: 10px; } }
@media (max-width: 620px) {
  .hero .eyebrow { font-size: 10px; letter-spacing: .12em; padding: 6px 12px 6px 10px; gap: 8px; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 480px) {
  .board-head { flex-wrap: wrap; gap: 4px 12px; }
  .board-head h3 { white-space: nowrap; }
}

/* ---------- hero: minimal Islamic geometry ----------
   An eight-point star lattice (two interlaced squares per tile, joined at the
   edges) replaces the graph-paper grid. The SVG is used only as a mask, so the
   line colour still comes from the palette token. */
.hero::after {
  background: color-mix(in oklab, var(--deep-accent) 16%, transparent);
  background-image: none;
  --girih: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke='black' stroke-width='1'%3E%3Crect x='24' y='24' width='48' height='48'/%3E%3Crect x='24' y='24' width='48' height='48' transform='rotate(45 48 48)'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3Cpath d='M48 0v14.06M48 81.94V96M0 48h14.06M81.94 48H96M0 0l24 24M96 0 72 24M0 96l24-24M96 96 72 72'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--girih), radial-gradient(ellipse 62% 85% at 74% 46%, #000 0%, transparent 70%);
          mask-image: var(--girih), radial-gradient(ellipse 62% 85% at 74% 46%, #000 0%, transparent 70%);
  -webkit-mask-size: 96px 96px, 100% 100%;
          mask-size: 96px 96px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
          mask-repeat: repeat, no-repeat;
  -webkit-mask-position: center, center;
          mask-position: center, center;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* a faint mihrab-style arch rising behind the headline side, echoing the logo */
.hero-grid::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(var(--gutter) * -1 - 4%); bottom: 0; width: min(46%, 520px); aspect-ratio: 5 / 6;
  border: 1px solid color-mix(in oklab, var(--deep-accent) 12%, transparent);
  border-bottom: 0; border-radius: 999px 999px 0 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}

/* the eyebrow dot becomes a small eight-point star */
.hero .eyebrow::before {
  width: 9px; height: 9px; border-radius: 0; box-shadow: none;
  clip-path: polygon(50% 0, 62% 21%, 85% 15%, 79% 38%, 100% 50%, 79% 62%, 85% 85%, 62% 79%, 50% 100%, 38% 79%, 15% 85%, 21% 62%, 0 50%, 21% 38%, 15% 15%, 38% 21%);
}
@media (max-width: 860px) { .hero-grid::before { display: none; } }

/* ---------- live feed ----------
   A row flashes in its direction the moment its price moves, using the same
   up/down tokens the figures already use. */
[data-row] { transition: background-color .3s ease; }
.tick-up   { animation: tick-up 1.6s ease-out; }
.tick-down { animation: tick-down 1.6s ease-out; }
@keyframes tick-up   { 0%, 25% { background-color: color-mix(in oklab, var(--up) 22%, transparent); } 100% { background-color: transparent; } }
@keyframes tick-down { 0%, 25% { background-color: color-mix(in oklab, var(--down) 22%, transparent); } 100% { background-color: transparent; } }
.board .tick-up, .tape .tick-up     { animation-name: tick-up-deep; }
.board .tick-down, .tape .tick-down { animation-name: tick-down-deep; }
@keyframes tick-up-deep   { 0%, 25% { background-color: color-mix(in oklab, var(--deep-up) 20%, transparent); } 100% { background-color: transparent; } }
@keyframes tick-down-deep { 0%, 25% { background-color: color-mix(in oklab, var(--deep-down) 20%, transparent); } 100% { background-color: transparent; } }
tr.tick-up td, tr.tick-down td { background: transparent; }
[data-q] { transition: color .4s ease; }

/* ==========================================================================
   UI/UX Pro Max audit fixes
   ========================================================================== */

/* images carry width/height for CLS; let CSS keep them proportional */
img { height: auto; }

/* skip link (a11y: skip-links) */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--cta); color: var(--cta-ink); padding: 10px 16px; border-radius: 999px;
  font-weight: 600; font-size: .9rem; text-decoration: none; transition: top .18s ease;
}
.skip-link:focus { top: 12px; }
main:focus { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* headings promoted for a clean h1 -> h2 order keep their old look */
.board-head h2 { font-family: var(--font-mono); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--deep-ink-2); }
.callout h2 { font-size: 1.02rem; }

/* contrast: small labels that sat at 4.07-4.49:1 move to the next ink step (same palette) */
thead th, .doc-meta, .stat .k { color: var(--ink-2); }

/* readable-font-size: no label below 12px */
.eyebrow, .foot-grid h4, thead th, .field label, .doc-meta, .stat .k, .pill,
.crumbs, .card-foot, .hero-trust span, .board-index .name, .board-head h2, .board-head .mono,
.foot-wordmark span, .regbar span, .panel-label, .route-head .k, .person .role, .pillar .n,
.site-footer .mono { font-size: 12px !important; }
.brand-sub { font-size: 10.5px; }
@media (max-width: 620px) {
  .hero .eyebrow { letter-spacing: .08em; border-radius: 14px; line-height: 1.4; text-wrap: balance; }
}

/* touch targets: >=24px everywhere (WCAG 2.5.8), >=44px on touch screens */
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; }
.foot-grid a, .foot-legal a { display: inline-flex; align-items: center; min-height: 28px; }
.link-more { min-height: 28px; }
a, button, summary, input, select, textarea, label { touch-action: manipulation; }
@media (max-width: 767px), (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .tab { min-height: 44px; }
  .field input, .field select, .field textarea { min-height: 46px; }
  .btn-sm { min-height: 44px; }
}

/* ==========================================================================
   Glass layer: UI/UX Pro Max "glassmorphism" style.
   Backdrop blur 10-20px, translucent fill, 1px light border, light-source
   highlight, layered depth. Built from the existing palette tokens only.
   ========================================================================== */
:root {
  --glass-blur: 16px;
  --glass-fill: color-mix(in oklab, var(--bg-2) 62%, transparent);
  --glass-fill-strong: color-mix(in oklab, var(--bg) 78%, transparent);
  --glass-edge: color-mix(in oklab, var(--ink) 9%, transparent);
  --glass-shine: color-mix(in oklab, var(--bg) 75%, transparent);
  --glass-shadow: 0 1px 1px rgba(16,18,40,.03), 0 12px 32px -16px rgba(16,18,40,.22);
  --glass-deep-fill: color-mix(in oklab, var(--deep-ink) 6%, transparent);
  --glass-deep-edge: color-mix(in oklab, var(--deep-ink) 14%, transparent);
  --glass-deep-shine: color-mix(in oklab, var(--deep-ink) 22%, transparent);
}
:root[data-theme="dark"] {
  --glass-fill: color-mix(in oklab, var(--bg-3) 55%, transparent);
  --glass-fill-strong: color-mix(in oklab, var(--bg) 74%, transparent);
  --glass-edge: color-mix(in oklab, var(--ink) 11%, transparent);
  --glass-shine: color-mix(in oklab, var(--ink) 12%, transparent);
  --glass-shadow: 0 1px 1px rgba(0,0,0,.3), 0 16px 40px -18px rgba(0,0,0,.75);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass-fill: color-mix(in oklab, var(--bg-3) 55%, transparent);
    --glass-fill-strong: color-mix(in oklab, var(--bg) 74%, transparent);
    --glass-edge: color-mix(in oklab, var(--ink) 11%, transparent);
    --glass-shine: color-mix(in oklab, var(--ink) 12%, transparent);
    --glass-shadow: 0 1px 1px rgba(0,0,0,.3), 0 16px 40px -18px rgba(0,0,0,.75);
  }
}

/* glass needs something behind it: soft brand-tinted light pools, fixed to
   the viewport so every light section has depth to refract */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vw 40vw at 88% 18%, color-mix(in oklab, var(--accent-2) 10%, transparent), transparent 70%),
    radial-gradient(46vw 46vw at 6% 70%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 70%),
    radial-gradient(30vw 30vw at 60% 105%, color-mix(in oklab, var(--accent-edge) 35%, transparent), transparent 70%);
}

/* the frosted surfaces */
.card, .brand-card, .route-col, .table-wrap, .docs, .callout, .stat-row, .pillars, .tabs {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}
.card, .brand-card, .route-col, .table-wrap, .callout {
  background: var(--glass-fill);
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-shine), var(--glass-shadow);
}
.tinted .card { background: var(--glass-fill-strong); border-color: var(--glass-edge); }
a.card:hover, .brand-card:hover {
  border-color: color-mix(in oklab, var(--accent) 35%, var(--glass-edge));
  box-shadow: inset 0 1px 0 var(--glass-shine), var(--shadow-lift);
}
/* grids of cells: the 1px gaps become frosted hairlines */
.stat-row, .pillars, .docs { background: var(--glass-edge); border-color: var(--glass-edge); box-shadow: var(--glass-shadow); }
.stat, .pillar, .doc { background: var(--glass-fill-strong); }
.pillar:hover, .doc:hover, .stat:hover { background: color-mix(in oklab, var(--bg-3) 72%, transparent); }
thead th { background: color-mix(in oklab, var(--bg-3) 72%, transparent); }
.callout { border-left-color: var(--accent); }
.tabs { background: var(--glass-fill); border: 1px solid var(--glass-edge); }
.tab[aria-selected="true"] { background: var(--glass-fill-strong); box-shadow: inset 0 1px 0 var(--glass-shine), var(--shadow); }
.field input, .field select, .field textarea { background: var(--glass-fill-strong); border-color: color-mix(in oklab, var(--ink) 18%, transparent); }
.portrait { border-color: var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-shine); }

/* header, dropdowns and drawer: heavier frost so the page reads through */
.site-header {
  background: color-mix(in oklab, var(--bg) 66%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
          backdrop-filter: blur(20px) saturate(1.6);
  border-bottom-color: var(--glass-edge);
}
.site-header.scrolled { box-shadow: var(--glass-shadow); }
.panel {
  background: var(--glass-fill-strong); border-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-shine), var(--shadow-lift);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
}
.drawer {
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
}
.icon-btn { background: var(--glass-fill); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-shine); }
.btn-ghost { background: var(--glass-fill); }

/* dark bands: frosted panes on the deep ground */
.on-deep .stat-row { background: var(--glass-deep-edge); border-color: var(--glass-deep-edge); }
.on-deep .stat { background: color-mix(in oklab, var(--deep-2) 72%, transparent); }
.cta-band .btn-ghost, .page-head .btn-ghost { background: var(--glass-deep-fill); }
.cta-band { box-shadow: inset 0 1px 0 var(--glass-deep-shine), 0 30px 60px -30px rgba(0,0,0,.45); }
.cta-band::before {
  content: ""; position: absolute; right: -6%; top: -40%; width: 44%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--deep-accent) 16%, transparent), transparent 65%);
  pointer-events: none;
}
.board {
  background: color-mix(in oklab, var(--deep-2) 62%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 var(--glass-deep-shine), 0 40px 80px -40px rgba(0,0,0,.65);
}
.hero .eyebrow { background: var(--glass-deep-fill); border-color: var(--glass-deep-edge); box-shadow: inset 0 1px 0 var(--glass-deep-shine); }
.socials a { background: var(--glass-deep-fill); box-shadow: inset 0 1px 0 var(--glass-deep-shine); }

/* fallbacks: no backdrop-filter, or the viewer asked for less transparency */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .brand-card, .route-col, .table-wrap, .callout, .stat, .pillar, .doc, .panel { background: var(--bg-2); }
  .site-header { background: color-mix(in oklab, var(--bg) 96%, transparent); }
  .drawer { background: var(--bg); }
}
@media (prefers-reduced-transparency: reduce) {
  .card, .brand-card, .route-col, .table-wrap, .callout, .stat, .pillar, .doc, .panel, .tabs {
    background: var(--bg-2); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .site-header, .drawer { background: var(--bg); }
  body::before { display: none; }
}

/* responsive tables: up to four columns fit a phone without sideways scroll */
@media (max-width: 520px) {
  .table-wrap table:not(:has(th:nth-child(5))) { min-width: 0; }
  .table-wrap th, .table-wrap td { padding: 11px 10px; }
  .table-wrap th:first-child, .table-wrap td:first-child { padding-left: 14px; }
  .table-wrap th:last-child, .table-wrap td:last-child { padding-right: 14px; }
}

/* ghost buttons on the dark bands keep the deep glass, not the light one */
.on-deep .btn-ghost, .hero .btn-ghost, .cta-band .btn-ghost, .page-head .btn-ghost { background: var(--glass-deep-fill); }
.brand-sub { font-size: 12px; letter-spacing: .14em; }

/* social icons: the footer link hit-area rules above must not reach them */
.foot-grid .socials { gap: 10px; }
.foot-grid .socials a {
  display: grid; place-items: center; padding: 0; min-height: 0;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--glass-deep-edge); color: var(--deep-ink-2);
  background: var(--glass-deep-fill); box-shadow: inset 0 1px 0 var(--glass-deep-shine);
  transition: border-color .16s ease, color .16s ease, background-color .16s ease, transform .18s ease;
}
.foot-grid .socials a svg { width: 17px; height: 17px; display: block; }
.foot-grid .socials a:hover { border-color: var(--deep-accent); color: var(--deep-accent); transform: translateY(-2px); }
@media (max-width: 767px), (pointer: coarse) { .foot-grid .socials a { width: 44px; height: 44px; } }