/* Ledger Rocket website — shared stylesheet.
Design tokens come from the design-system snapshot (imported below; the build inlines them).
Everything else here: fonts, globals, component classes (class hooks replace the old
inline-style attribute selectors) and the responsive rules. Inline styles on elements stay
the desktop truth; classes carry semantics, mobile overrides and the few shared components. */
/* ---- colors.css ---- */
/* Ledger Rocket — color tokens.
Anchor: brand navy #282560 (from logotype/logomark). Everything else is
derived in the same indigo hue family; neutrals are indigo-tinted. */
:root {
/* ---- Base: brand indigo scale ---- */
--indigo-950: #14122F;
--indigo-900: #1C1945;
--indigo-800: #282560; /* brand navy — the logo color */
--indigo-700: #363181;
--indigo-600: #45409F;
--indigo-500: #5B55BD; /* "iris" — interactive accent */
--indigo-400: #7D78D2;
--indigo-300: #A3A0E2;
--indigo-200: #C6C4EE;
--indigo-100: #E2E1F7;
--indigo-50: #F2F1FB;
/* ---- Base: ink (indigo-tinted neutrals) ---- */
--ink-900: #1A1832;
--ink-800: #2C2947;
--ink-700: #4A4768;
--ink-600: #5E5B7D;
--ink-500: #75728F;
--ink-400: #9B98B0;
--ink-300: #C6C4D6;
--ink-200: #DFDEE9;
--ink-100: #ECEBF2;
--ink-50: #F5F5F9;
--paper: #FBFBFD;
/* ---- Base: semantic hues (cool-shifted to sit with the navy) ---- */
--green-700: #0E7A4E;
--green-600: #12925E;
--green-100: #E1F4EA;
--amber-700: #96660A;
--amber-600: #B07A11;
--amber-100: #FBF1DB;
--red-700: #C13A52;
--red-600: #D14A62;
--red-100: #FBEAEE;
/* ---- Base: warm accents (brand additions) ---- */
--sun-600: #E0873B; /* markers/icons on light */
--sun-500: #F7AA66; /* Orange Sun ★ · C01 M38 Y67 K00 */
--sun-100: #FDEEDD;
--cadillac-700: #C42F24; /* text-safe red */
--cadillac-600: #EA4335; /* Cadillac Red ★ · C02 M89 Y87 K00 */
--cadillac-100: #FCE6E3;
/* ---- Semantic: brand ---- */
--brand-navy: var(--indigo-800);
--accent-iris: var(--indigo-500);
--accent-sun: var(--sun-500); /* emphasis fill; pair with navy text */
--accent-cadillac: var(--cadillac-600); /* emphasis marks; not a status color */
/* ---- Semantic: surfaces ---- */
--bg-app: var(--paper);
--surface-card: #FFFFFF;
--surface-sunken: var(--ink-50);
--surface-raised: #FFFFFF;
--surface-navy: var(--indigo-900);
--surface-navy-deep: var(--indigo-950);
--overlay-scrim: rgba(20, 18, 48, 0.48);
/* ---- Semantic: text ---- */
--text-strong: var(--ink-900);
--text-body: var(--ink-800);
--text-secondary: var(--ink-600);
--text-muted: var(--ink-500);
--text-placeholder: var(--ink-400);
--text-link: var(--indigo-600);
--text-link-hover: var(--indigo-800);
--text-on-navy: #FFFFFF;
--text-on-navy-muted: #B6B3D6;
/* ---- Semantic: borders ---- */
--border-strong: var(--ink-300);
--border: var(--ink-200);
--hairline: var(--ink-100);
--border-on-navy: rgba(255, 255, 255, 0.16);
--hairline-on-navy: rgba(255, 255, 255, 0.10);
/* ---- Semantic: interactive ---- */
--interactive: var(--indigo-800);
--interactive-hover: #332F73;
--interactive-active: #221F52;
--interactive-on-navy: #FFFFFF;
--focus-ring: var(--indigo-500);
/* ---- Semantic: status ---- */
--success: var(--green-700);
--success-bg: var(--green-100);
--warning: var(--amber-700);
--warning-bg: var(--amber-100);
--danger: var(--red-700);
--danger-hover: #AB2F46;
--danger-bg: var(--red-100);
--info: var(--indigo-600);
--info-bg: var(--indigo-50);
/* ---- Semantic: ledger conventions ---- */
--credit: var(--green-700); /* money in */
--debit: var(--ink-900); /* money out — neutral, not alarming */
--negative: var(--red-700); /* failed / reversed / below zero */
--pending: var(--amber-700);
/* ---- Data viz (single-hue ramp + grid) ---- */
--chart-1: var(--indigo-800);
--chart-2: var(--indigo-500);
--chart-3: var(--indigo-300);
--chart-4: var(--indigo-100);
--chart-positive: var(--green-600);
--chart-grid: var(--ink-100);
--chart-sun: var(--sun-500); /* single highlighted series */
--chart-cadillac: var(--cadillac-600); /* single callout/threshold */
}
/* ---- typography.css ---- */
/* Ledger Rocket — typography tokens.
One brand family (Montserrat) + one data family (JetBrains Mono).
Montserrat LIGHT (300) is the default weight for ALL text, display to caption.
NORMAL (400) is the bold voice: titles, overlines, labels, emphasis.
Nothing heavier exists in this system. */
:root {
--font-display: 'Montserrat', 'Avenir Next', 'Segoe UI', sans-serif;
--font-ui: 'Montserrat', 'Avenir Next', 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
/* Size / line-height pairs */
--text-display-1-size: 56px; --text-display-1-lh: 64px; /* w300 */
--text-display-2-size: 40px; --text-display-2-lh: 48px; /* w300 */
--text-title-1-size: 28px; --text-title-1-lh: 36px; /* w500 */
--text-title-2-size: 21px; --text-title-2-lh: 28px; /* w500 */
--text-title-3-size: 16px; --text-title-3-lh: 24px; /* w600 */
--text-body-size: 14px; --text-body-lh: 22px; /* w400 */
--text-body-sm-size: 13px; --text-body-sm-lh: 20px; /* w400 */
--text-caption-size: 12px; --text-caption-lh: 16px; /* w400 */
--text-overline-size: 11px; --text-overline-lh: 16px; /* w600, caps, +0.08em */
--text-data-size: 13px; --text-data-lh: 20px; /* mono, tabular */
--text-data-lg-size: 24px; --text-data-lg-lh: 30px; /* mono, hero figures */
--tracking-display: -0.01em;
--tracking-caps: 0.08em;
--tracking-button: 0.01em;
}
/* Type utility classes (shipped globals) */
.lr-display-1 { font: 300 var(--text-display-1-size)/var(--text-display-1-lh) var(--font-display); letter-spacing: var(--tracking-display); color: var(--text-strong); }
.lr-display-2 { font: 300 var(--text-display-2-size)/var(--text-display-2-lh) var(--font-display); letter-spacing: var(--tracking-display); color: var(--text-strong); }
.lr-title-1 { font: 400 var(--text-title-1-size)/var(--text-title-1-lh) var(--font-ui); letter-spacing: -0.005em; color: var(--text-strong); }
.lr-title-2 { font: 400 var(--text-title-2-size)/var(--text-title-2-lh) var(--font-ui); color: var(--text-strong); }
.lr-title-3 { font: 400 var(--text-title-3-size)/var(--text-title-3-lh) var(--font-ui); color: var(--text-strong); }
.lr-body { font: 300 var(--text-body-size)/var(--text-body-lh) var(--font-ui); color: var(--text-body); }
.lr-body-sm { font: 300 var(--text-body-sm-size)/var(--text-body-sm-lh) var(--font-ui); color: var(--text-body); }
.lr-caption { font: 300 var(--text-caption-size)/var(--text-caption-lh) var(--font-ui); color: var(--text-muted); }
.lr-overline { font: 400 var(--text-overline-size)/var(--text-overline-lh) var(--font-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.lr-data { font: 400 var(--text-data-size)/var(--text-data-lh) var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-strong); }
.lr-data-lg { font: 400 var(--text-data-lg-size)/var(--text-data-lg-lh) var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-strong); }
/* ---- spacing.css ---- */
/* Ledger Rocket — spacing & layout tokens. 4px base grid. */
:root {
--sp-0: 0; /* @kind spacing */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-16: 64px;
--sp-20: 80px;
--sp-24: 96px;
/* Layout */
--container-max: 1160px; /* marketing content column */
--sidebar-w: 240px; /* console nav rail */
--topbar-h: 56px; /* console top bar */
--card-pad: var(--sp-5); /* default card padding: 20px */
--gutter: var(--sp-6); /* default grid gutter: 24px */
}
/* ---- effects.css ---- */
/* Ledger Rocket — radii, shadows, motion, focus. */
:root {
/* Radii — geometric, restrained */
--radius-xs: 4px; /* checkboxes, tiny chips */
--radius-sm: 8px; /* controls: buttons, inputs, selects */
--radius-md: 12px; /* cards, table shells */
--radius-lg: 16px; /* modals, large panels */
--radius-pill: 999px;/* badges, tags, switches */
--radius-control: var(--radius-sm);
--radius-card: var(--radius-md);
/* Shadows — cool navy-tinted, very quiet. Depth comes from hairlines first. */
--shadow-xs: 0 1px 2px rgba(20, 18, 48, 0.05);
--shadow-sm: 0 1px 2px rgba(20, 18, 48, 0.05), 0 2px 8px rgba(20, 18, 48, 0.05);
--shadow-md: 0 2px 4px rgba(20, 18, 48, 0.06), 0 8px 24px rgba(20, 18, 48, 0.10);
--shadow-lg: 0 4px 8px rgba(20, 18, 48, 0.08), 0 20px 48px rgba(20, 18, 48, 0.16);
--shadow-focus: 0 0 0 3px rgba(91, 85, 189, 0.28);
/* Motion — quick, precise; no bounce */
--ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); /* @kind other */
--ease-in-out: cubic-bezier(0.45, 0, 0.25, 1); /* @kind other */
--dur-fast: 120ms; /* @kind other */
--dur-base: 180ms; /* @kind other */
--dur-slow: 240ms; /* @kind other */
}
/* ---- base.css ---- */
/* Ledger Rocket — minimal global base. */
body {
margin: 0;
font: 300 var(--text-body-size)/var(--text-body-lh) var(--font-ui);
color: var(--text-body);
background: var(--bg-app);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 2px; }
::selection { background: var(--indigo-200); color: var(--indigo-950); }
*:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
/* ---- Fonts: self-hosted latin subsets (variable Montserrat 300–400, JetBrains Mono 400) ---- */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300 400; font-display: swap; src: url("/assets/fonts/montserrat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ---- Globals ---- */
:root { --text-strong: #272361; --text-body: #272361; }
html, body { margin: 0; padding: 0; background: #fff; }
a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }
.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; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: var(--brand-navy); color: #fff; font: 400 13px/18px var(--font-ui); text-decoration: none; transition: top 120ms var(--ease-out); }
.skip-link:focus { top: 12px; outline: 2px solid var(--focus-ring); outline-offset: 2px; color: #fff; }
@keyframes lr-flash { from { background: var(--indigo-100); } to { background: transparent; } }
@keyframes lr-row-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lr-row-in, .lr-flash { animation: none !important; } }
.ic { display: inline-block; flex: none; vertical-align: middle; }
.logo { display: block; flex: none; }
.stamp { font: 400 11px/16px var(--font-mono); color: var(--text-muted); white-space: nowrap; }
.sc-host[data-sc-name="LiveStamp"] { display: inline; }
.new-tab .ic { margin-left: 2px; }
/* ---- Header / nav (markup in SiteNav.dc.html) ---- */
.site-header { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--hairline); }
.nav-inner { max-width: 1160px; margin: 0 auto; padding: 0 32px; height: 64px; display: flex; align-items: center; gap: 24px; }
.nav-home { display: flex; text-decoration: none; margin-right: 8px; }
.nav-list { display: flex; align-items: center; gap: 2px; flex: 1; height: 100%; margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-link, .nav-btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 11px; border: 0; border-radius: 8px; background: transparent; font: 300 13.5px/20px var(--font-ui); letter-spacing: 0.01em; color: var(--text-body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.nav-link:hover, .nav-btn:hover { background: var(--ink-50); color: var(--text-strong); text-decoration: none; }
.nav-btn .ic { color: var(--text-muted); transition: transform 160ms var(--ease-out); }
.nav-btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.nav-item.is-active::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 0; height: 2px; background: var(--brand-navy); }
.submenu { position: absolute; top: 100%; left: 0; margin: -4px 0 0; padding: 4px 0 0; list-style: none; display: none; }
.submenu-panel { background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; min-width: 312px; }
.nav-item.is-open > .submenu { display: block; }
.submenu a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; }
.submenu a:hover { background: var(--ink-50); text-decoration: none; }
.submenu a[aria-current="page"] { background: var(--indigo-50); }
.submenu .sm-label { display: block; font: 400 13px/18px var(--font-ui); color: var(--text-strong); }
.submenu .sm-desc { display: block; font: 300 12px/17px var(--font-ui); color: var(--text-muted); margin-top: 1px; }
.nav-cta { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 8px; background: var(--interactive); color: #fff; font: 400 13px var(--font-ui); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; transition: background 120ms var(--ease-out); }
.nav-cta:hover { background: var(--interactive-hover); color: #fff; text-decoration: none; }
.nav-toggle { display: none; position: relative; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--text-strong); }
.nav-toggle:hover { background: var(--ink-50); }
.nav-toggle i { position: absolute; left: 13px; width: 18px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform 160ms var(--ease-out), opacity 120ms var(--ease-out); }
.nav-toggle i:nth-child(1) { top: 15px; } .nav-toggle i:nth-child(2) { top: 21px; } .nav-toggle i:nth-child(3) { top: 27px; }
.nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* ---- Footer (markup in SiteFooter.dc.html) ---- */
.site-footer { background: var(--indigo-950); color: var(--text-on-navy); position: relative; overflow: hidden; }
.site-footer .watermark { position: absolute; right: -220px; bottom: -260px; height: 540px; opacity: 0.05; pointer-events: none; }
.footer-inner { position: relative; max-width: 1160px; margin: 0 auto; padding: 64px 32px 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 0.9fr; gap: 40px; padding-bottom: 56px; }
.footer-blurb { font: 300 14px/23px var(--font-ui); color: var(--text-on-navy-muted); max-width: 280px; margin: 20px 0 0; }
.badges { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--border-on-navy); border-radius: 999px; font: 400 11.5px/16px var(--font-ui); color: rgba(255,255,255,0.85); text-decoration: none; }
.badge:hover { color: #fff; border-color: rgba(255,255,255,0.4); text-decoration: none; }
.badge .ic { color: var(--indigo-300); }
.footer-col h2 { font: 400 11px/16px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-on-navy-muted); margin: 0 0 14px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-links a { font: 300 13px/19px var(--font-ui); color: rgba(255,255,255,0.85); text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-meta { border-top: 1px solid var(--hairline-on-navy); padding: 20px 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-meta .label { font: 300 12px/17px var(--font-ui); color: var(--text-on-navy-muted); margin-right: 4px; }
.investors { display: contents; }
.investors a { font: 400 12.5px/18px var(--font-ui); letter-spacing: 0.03em; color: rgba(255,255,255,0.65); text-decoration: none; white-space: nowrap; }
.investors a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid var(--hairline-on-navy); padding: 18px 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.footer-bottom .copy { font: 300 12px/17px var(--font-ui); color: var(--text-on-navy-muted); max-width: 62ch; }
.footer-bottom .tag { font: 400 11px/16px var(--font-mono); color: rgba(255,255,255,0.55); }
.footer-link-inline { display: inline-flex; align-items: center; gap: 6px; font: 300 12.5px/18px var(--font-ui); color: rgba(255,255,255,0.85); text-decoration: none; }
.footer-link-inline:hover { color: #fff; text-decoration: underline; }
/* ---- Page structure ---- */
.section { display: block; }
.hero { position: relative; background: var(--indigo-950); overflow: hidden; }
.watermark { pointer-events: none; }
.eyebrow { font: 400 11px/16px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
.hero .eyebrow { color: rgba(255,255,255,0.55); margin-bottom: 14px; }
.card { border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.figure { margin: 0; }
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-flow > *, .grid-eq > *, .hero-balances > * { min-width: 0; }
.card-head { display: flex; align-items: center; gap: 10px; }
.live { display: inline-flex; align-items: center; gap: 6px; font: 300 12px/17px var(--font-ui); color: var(--text-muted); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-600); flex: none; }
.num { font-variant-numeric: tabular-nums; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font: 400 10.5px/15px var(--font-mono); color: var(--text-secondary); white-space: nowrap; }
.chip--ui { font: 400 12.5px/17px var(--font-ui); letter-spacing: 0.02em; padding: 4px 12px; }
/* Real tables (ledger dashboards, deployment matrix). Row headers may be | or a first | . */
.tbl { width: 100%; border-collapse: collapse; }
.tbl caption { text-align: left; }
.tbl th { font: 400 10.5px/15px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding: 10px 0; border-bottom: 1px solid var(--hairline); text-align: right; font-weight: 400; }
.tbl th:first-child, .tbl td:first-child, .tbl th[scope="row"] { text-align: left; }
.tbl td, .tbl tbody th[scope="row"] { padding: 11px 0; border-bottom: 1px solid var(--hairline); font: 400 12px/17px var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--text-strong); vertical-align: middle; letter-spacing: 0; text-transform: none; }
.tbl td:first-child, .tbl tbody th[scope="row"] { color: var(--text-secondary); text-align: left; }
.tbl th + th, .tbl td + td, .tbl th[scope="row"] + td { padding-left: 16px; }
.tbl tbody tr:last-child td, .tbl tbody tr:last-child th { border-bottom: 0; }
.tbl .status { display: inline-flex; align-items: center; gap: 6px; font: 300 12px/17px var(--font-ui); }
.tbl .status .ic { flex: none; }
.tbl--matrix thead th, .tbl--matrix td, .tbl--matrix tbody th { text-align: left; font: 300 13px/20px var(--font-ui); color: var(--text-body); padding: 14px 20px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.tbl--matrix thead th { font: 400 14px/20px var(--font-ui); color: var(--text-strong); text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--border); padding: 16px 20px; }
.tbl--matrix thead th:first-child { width: 160px; }
.tbl--matrix thead th + th, .tbl--matrix td + td, .tbl--matrix tbody th + td { border-left: 1px solid var(--hairline); padding-left: 20px; }
.tbl--matrix tbody th { font: 400 11px/16px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.tbl--matrix tbody tr:last-child td, .tbl--matrix tbody tr:last-child th { border-bottom: 0; }
.tbl.tbl--matrix tbody th { font: 400 11px/16px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding: 14px 20px; text-align: left; vertical-align: top; }
.tbl.tbl--matrix tbody th + td { padding-left: 20px; }
/* Platform hub pillar cards */
.pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.pillar { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: var(--shadow-xs); padding: 22px 22px 20px; text-decoration: none; min-height: 168px; transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out); }
.pillar:hover { background: var(--ink-50); border-color: var(--border-strong); text-decoration: none; }
.pillar .n { font: 400 12px/17px var(--font-mono); color: var(--accent-iris); }
.pillar h3 { font: 400 15px/22px var(--font-ui); color: var(--text-strong); margin: 0; }
.pillar p { font: 300 13px/20px var(--font-ui); color: var(--text-secondary); margin: 0; }
.pillar .go { display: inline-flex; align-items: center; gap: 6px; font: 400 12.5px/18px var(--font-ui); color: var(--accent-iris); margin-top: auto; }
/* Pager (previous / next platform page) */
.pager { border-top: 1px solid var(--hairline); }
.pager-inner { max-width: 1160px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr; }
.pager a, .pager .pager-empty { display: flex; flex-direction: column; gap: 4px; padding: 22px 0; text-decoration: none; }
.pager a + a, .pager .pager-empty + a { border-left: 1px solid var(--hairline); padding-left: 32px; }
.pager a:hover { text-decoration: none; }
.pager a:hover .pg-title { color: var(--accent-iris); }
.pager .pg-k { font: 400 11px/16px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.pager .pg-title { display: inline-flex; align-items: center; gap: 6px; font: 400 15px/22px var(--font-ui); color: var(--text-strong); }
.pager .pg-title .ic { color: var(--accent-iris); }
.pager a.next { align-items: flex-end; text-align: right; }
/* Home hero balances row (three label/value columns) */
.hero-balances { display: grid; grid-template-columns: 1.15fr 1.15fr 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
/* Stat tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tile { border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; }
.tile .n { font: 400 26px/32px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-strong); }
.tile .l { font: 300 12.5px/18px var(--font-ui); color: var(--text-muted); margin-top: 6px; }
/* Mono log / posting rows */
.row { display: flex; align-items: center; gap: 10px; }
.legs { min-width: 0; }
.amt { white-space: nowrap; }
/* Legal / prose pages */
.prose { max-width: 720px; }
.prose h2 { font: 400 18px/26px var(--font-ui); color: var(--text-strong); margin: 32px 0 8px; }
.prose p, .prose li { font: 300 15px/25px var(--font-ui); color: var(--text-secondary); }
.prose ul { padding-left: 20px; margin: 0 0 12px; }
.prose p { margin: 0 0 12px; }
/* ---- Responsive ---- */
@media (max-width: 920px) {
html, body { overflow-x: clip; }
.nav-inner { height: 56px; padding: 0 16px; gap: 8px; }
.nav-home { margin-right: auto; padding: 9px 0; }
.nav-cta { height: 40px; padding: 0 12px; }
.nav-toggle { display: inline-flex; }
.nav-list { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; height: auto; gap: 0; padding: 6px 16px 12px; background: #fff; border-bottom: 1px solid var(--hairline); box-shadow: var(--shadow-lg); max-height: calc(100vh - 56px); overflow-y: auto; }
.site-header.is-open .nav-list { display: flex; }
.nav-item { height: auto; display: block; }
.nav-item.is-active::after { left: -16px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; }
.nav-link, .nav-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 12px 4px; font-size: 15px; line-height: 22px; border-radius: 0; white-space: normal; }
.nav-link:hover, .nav-btn:hover { background: transparent; }
.submenu { position: static; margin: 0; padding: 0 0 8px; }
.submenu-panel { min-width: 0; border: 0; border-left: 2px solid var(--hairline); border-radius: 0; box-shadow: none; padding: 2px 0 2px 12px; margin-left: 4px; }
.container--hero { padding: 48px 20px 36px !important; }
.container--80 { padding: 48px 20px !important; }
.container--std { padding: 44px 20px !important; }
.container--cta { padding: 64px 20px 80px !important; }
.container--tight { padding: 22px 20px !important; }
.grid-2 { grid-template-columns: 1fr !important; gap: 32px !important; }
.grid-3 { grid-template-columns: 1fr !important; }
.grid-4, .grid-5, .tiles { grid-template-columns: repeat(2, 1fr) !important; }
.grid-flow, .grid-eq { grid-template-columns: 1fr !important; }
.grid-flow > :nth-child(2), .grid-flow.grid-flow--5 > :nth-child(4) { transform: rotate(90deg); padding: 8px 0; }
.grid-eq > :nth-child(2) { padding: 6px 0; }
.col-rule { border-left: none !important; padding-left: 0 !important; }
.pillars { grid-template-columns: repeat(2, 1fr); }
.pager-inner { padding: 0 20px; }
h1 { font-size: 38px !important; line-height: 46px !important; }
h2.display { font-size: 32px !important; line-height: 40px !important; }
h2.display--md { font-size: 28px !important; line-height: 36px !important; }
.footer-inner { padding: 48px 20px 0; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-bottom: 40px; }
}
@media (max-width: 760px) {
.tbl thead { display: none; }
.tbl tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.tbl tbody tr:last-child { border-bottom: 0; }
.tbl td, .tbl tbody th[scope="row"] { display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 2px 0; border: 0; text-align: right; }
.tbl td + td, .tbl th[scope="row"] + td { padding-left: 0; }
.tbl td:first-child, .tbl tbody th[scope="row"] { display: block; text-align: left; margin-bottom: 5px; color: var(--text-strong); }
.tbl td[data-label]::before { content: attr(data-label); margin-right: auto; font: 400 10.5px/17px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.tbl--matrix tr { padding: 10px 20px 12px; }
.tbl--matrix td { display: grid; grid-template-columns: 100px 1fr; gap: 12px; align-items: baseline; padding: 5px 0; border-left: 0; text-align: left; }
.tbl--matrix tbody th { display: block; padding: 0 0 6px; margin: 0; }
.tbl--matrix td[data-label]::before { margin: 0; font: 400 12px/20px var(--font-ui); color: var(--text-strong); letter-spacing: 0; text-transform: none; }
.tbl.tbl--matrix tbody th { display: block; padding: 0 0 6px; margin: 0; color: var(--text-muted); }
.tbl.tbl--matrix tbody th + td { padding-left: 0; }
.tbl:not(.tbl--matrix) td[data-label]:not([data-label="Status"]) { white-space: nowrap; }
.tbl td[data-label]::before { white-space: normal; text-align: left; }
.tbl td[data-label] .cmp { white-space: normal; text-align: right; min-width: 0; }
}
@media (max-width: 600px) {
.grid-4, .grid-5 { grid-template-columns: 1fr !important; }
.tiles { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
.tile { padding: 16px 16px !important; }
.tile .n { font-size: 22px; line-height: 28px; }
.pillars { grid-template-columns: 1fr; }
h1 { font-size: 34px !important; line-height: 42px !important; }
h2.display { font-size: 28px !important; line-height: 36px !important; }
h2.display--md { font-size: 26px !important; line-height: 34px !important; }
h2.display--sm { font-size: 24px !important; line-height: 32px !important; }
.card-head { flex-wrap: wrap; row-gap: 2px; }
.card-head.card-head--pad { padding: 12px 18px !important; }
.card-head .card-sub { order: 10; flex-basis: 100%; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.card-head .stamp { display: none; }
.num:not(.row):not(.grid) { white-space: nowrap; }
.row { flex-wrap: wrap; row-gap: 2px; }
.row > .amt:last-child { margin-left: auto; }
.row--table > .amt:last-child { flex-basis: 100%; text-align: right; }
.row--posting { padding-left: 24px !important; }
.row--drill .legs, .row--log .legs { overflow-wrap: anywhere; }
.legs { overflow-wrap: anywhere; }
.grid-log { grid-template-columns: 1fr !important; gap: 4px 16px !important; }
.grid-log > :last-child { text-align: right; }
.grid-log > * { overflow-wrap: anywhere; }
.kpi { font-size: 19px !important; line-height: 26px !important; }
.kpi-lg { font-size: 24px !important; line-height: 32px !important; }
.hero-balances { grid-template-columns: 1fr !important; gap: 6px !important; }
.hero-balances > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hero-balances > div > div { margin-top: 0 !important; }
.hero-figure { height: auto !important; }
.steps-flow { flex-direction: column; align-items: stretch; }
.steps-flow > .flow-arrow { transform: rotate(90deg); justify-content: center; padding: 2px 0; }
.flow-row { flex-direction: column; align-items: stretch; padding: 18px !important; }
.flow-row > .flow-arrow { transform: rotate(90deg); align-self: center; }
.code { white-space: pre-wrap !important; overflow-wrap: break-word; font-size: 11.5px !important; line-height: 19px !important; }
.tool-row { flex-wrap: wrap; row-gap: 8px; }
.tool-row > .chips { flex-basis: 100%; }
.tool-label { width: auto !important; }
.tree { font-size: 11px !important; }
.tree-k { margin-right: 2ch !important; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.footer-grid > .footer-brand { grid-column: 1 / -1; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
.pager-inner { grid-template-columns: 1fr; }
.pager a + a, .pager .pager-empty + a { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); }
.pager a.next { align-items: flex-start; text-align: left; }
.eq-total { flex-direction: column; align-items: flex-start !important; gap: 2px !important; }
}
@media (max-width: 360px) {
.kpi-lg { font-size: 19px !important; line-height: 26px !important; }
.kpi { font-size: 17px !important; line-height: 24px !important; }
.tree { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tiles { grid-template-columns: 1fr !important; }
}
/* ---- answer-first lead and attribute FAQ (GEO pass, Sep 2026) ---- */
.answer { max-width: 62ch; }
.faq { max-width: 1160px; margin: 0 auto; padding: 0 32px 64px; }
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px; }
.faq-grid > div { border-top: 1px solid var(--border); padding-top: 14px; }
.faq h3 { font: 400 14.5px/21px var(--font-ui); color: var(--text-strong); margin: 0 0 6px; }
.faq p { font: 300 13.5px/21px var(--font-ui); color: var(--text-secondary); margin: 0; }
@media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; } .faq { padding: 0 20px 48px; } }
|