Raw scale is namespaced --cr-*; the semantic layer below maps
onto the shared --bg/--surface/--text/--accent names so every
component in the system re-themes without change.
Internal until the CMPO clears CRATON for external use.
============================================================ */
:root{
/* ---- Bedrock (1) ---- */
--cr-bed-page:#161C24; --cr-bed-surface:#1F2731; --cr-bed-raised:#2C3744; --cr-bed-hairline:#3A4553; --cr-bed-strong:#4A5566;
--cr-bed-bronze:#B08D57; --cr-bed-bronze-lt:#D9B985; --cr-bed-bronze-ink:#8C6B3A; --cr-bed-bronze-deep:#7A5A2E;
--cr-bed-slate:#7FA6B5; --cr-bed-slate-ink:#3F6F82;
--cr-bed-ink:#F1F3F5; --cr-bed-body:#C9CFD6; --cr-bed-muted:#9CA6B2;
--cr-bed-paper:#EEEBE5; --cr-bed-paper-raised:#E3DFD7; --cr-bed-paper-line:#CFC9BE;
--cr-bed-ink-light:#1B2128; --cr-bed-body-light:#3B434D; --cr-bed-muted-light:#6B737D;
/* ---- Strata (2) · corporate navy + sandstone ---- */
--cr-str-sand:#C8A27A; --cr-str-sand-lt:#E0C39A; --cr-str-sand-ink:#8A6A3A; --cr-str-sand-deep:#6E5228;
/* ---- Basalt (3) · near-black + verdigris ---- */
--cr-bas-page:#0C0E10; --cr-bas-surface:#15181C; --cr-bas-raised:#22262B; --cr-bas-hairline:#2A2E33; --cr-bas-strong:#3A3F45;
--cr-bas-verdigris:#7FB8A4; --cr-bas-verdigris-lt:#A6D2C2; --cr-bas-verdigris-ink:#3F7A6A; --cr-bas-verdigris-deep:#2F5F52;
--cr-bas-bone:#EFE9DD; --cr-bas-body:#D8D4CA; --cr-bas-muted:#9A9890;
--cr-bas-paper:#F3F0EA; --cr-bas-paper-raised:#E6E2DA; --cr-bas-paper-line:#D3CEC4;
/* ---- shared semantic states (no red externally) ---- */
--cr-ok:#7FB8A4; --cr-ok-ink:#3F7A6A; --cr-warn:#D9B985; --cr-warn-ink:#8C6B3A;
}
/* ============ Bedrock · dark (default) ============ */
[data-brand="craton"]{
--bg-page:var(--cr-bed-page); --bg-void:#0F1216; --bg-section-alt:var(--cr-bed-surface);
--surface-card:var(--cr-bed-surface); --surface-raised:var(--cr-bed-raised); --surface-panel:var(--cr-bed-raised);
--border-hairline:var(--cr-bed-hairline); --border-medium:var(--cr-bed-hairline); --border-strong:var(--cr-bed-strong);
--text-display:var(--cr-bed-ink); --text-heading:var(--cr-bed-ink); --text-body:var(--cr-bed-body); --text-bright:var(--cr-bed-ink); --text-muted:#9CA6B2; --text-label:#9CA6B2; /* a11y: was #8F99A5 — 4.18:1 on --surface-raised, now 4.90:1 */
--accent-primary:var(--cr-bed-bronze); --accent-primary-hover:var(--cr-bed-bronze-lt); --accent-on-primary:var(--cr-bed-surface);
--accent-link:var(--cr-bed-slate); --accent-signal:var(--cr-bed-slate); --accent-premium:var(--cr-bed-bronze); --accent-data:var(--cr-bed-slate);
--accent-strata:var(--cr-bed-bronze); --accent-strata-lt:var(--cr-bed-bronze-lt);
/* CRATON does not separate state by hue — see "State encoding" at the foot of this file.
--status-ok aliases the settled accent so there is ONE settled colour, not two near-identical ones
(--cr-ok #7FB8A4 vs --accent-signal #7FA6B5 differ by dE 4.0 and read as an inconsistency, not a distinction).
--status-warn aliases the live accent: attention is carried by the 45deg hatch and its word, never by colour.
Previously --cr-warn #D9B985 sat 1.26:1 from --accent-primary — adjacent marks were indistinguishable. */
--status-ok:var(--accent-signal); --status-warn:var(--accent-primary);
--focus-ring:var(--cr-bed-bronze);
--accent-eyebrow:var(--cr-bed-bronze); /* eyebrows, § proof marks, pillar numbers — the bronze that labels */
--radius-control:2px; --radius-card:2px;
/* CRATON display face (decided 14 Sep 2026): Big Shoulders Display 800 for the wordmark and marketing headlines,
tracked .07em. Rajdhani and IBM Plex Mono stay the interface and data faces. Bebas Neue remains the house
display face for documents and decks, so a portfolio row still reads as siblings — but Bebas is an
UPPERCASE-ONLY face and must never sit in the fallback stack of a sentence-case headline. When the
webfont fails (cold cache, restricted network) every headline silently renders in caps, which inverts
the voice: "Nothing to see here. Exactly." becomes a shout. Self-host and subset instead. */
--font-craton-display:"Big Shoulders Display","Archivo Narrow","Arial Narrow",sans-serif;
--craton-display-weight:800; --craton-display-tracking:.07em;
}
/* ============ Bedrock · light ============ */
[data-brand="craton"][data-theme="light"]{
--bg-page:var(--cr-bed-paper); --bg-void:#DDD9D1; --bg-section-alt:#FFFFFF;
--surface-card:#FFFFFF; --surface-raised:var(--cr-bed-paper-raised); --surface-panel:var(--cr-bed-paper-raised);
--border-hairline:var(--cr-bed-paper-line); --border-medium:var(--cr-bed-paper-line); --border-strong:#B9B2A5;
--text-display:var(--cr-bed-ink-light); --text-heading:var(--cr-bed-ink-light); --text-body:var(--cr-bed-body-light); --text-bright:var(--cr-bed-ink-light); --text-muted:#5A6169; --text-label:#5A6169; /* a11y: was #6B737D — 4.04:1 on --bg-page, now 5.27:1 */
--accent-primary:var(--cr-bed-bronze-deep); --accent-primary-hover:var(--cr-bed-bronze-ink); --accent-on-primary:#FFFFFF; /* a11y: bronze-ink #8C6B3A was 4.12:1 on --bg-page; bronze-deep is 5.30:1 */
--accent-link:var(--cr-bed-slate-ink); --accent-signal:var(--cr-bed-slate-ink); --accent-premium:var(--cr-bed-bronze-ink); --accent-data:var(--cr-bed-slate-ink);
--accent-strata:var(--cr-bed-bronze-ink); --accent-strata-lt:var(--cr-bed-bronze);
/* --cr-warn-ink #8C6B3A was byte-identical to the old --accent-primary: "warning" and "live" were
literally the same colour. Aliased deliberately now, with the hatch carrying attention. */
--status-ok:var(--accent-signal); --status-warn:var(--accent-primary);
--focus-ring:var(--cr-bed-bronze-deep);
--accent-eyebrow:var(--cr-bed-bronze-deep); /* a11y: bronze-ink was 4.12:1 on --bg-page; bronze-deep is 5.30:1 */
}
/* ============ Strata · dark ============ */
[data-brand="craton"][data-craton-palette="strata"]{
--bg-page:var(--hy-navy-950,#060F1C); --bg-void:#04090F; --bg-section-alt:#0B1929;
--surface-card:#0B1929; --surface-raised:#14283F; --surface-panel:#14283F;
--border-hairline:#22324C; --border-medium:#22324C; --border-strong:#34496A;
--text-display:#F2F6FA; --text-heading:#F2F6FA; --text-body:#D3DDEA; --text-bright:#F2F6FA; --text-muted:#9FB0C8; --text-label:#9FB0C8;
--accent-primary:#1A4FBA; --accent-primary-hover:#3B6FD6; --accent-on-primary:#F2F6FA;
--accent-link:#4FC3D9; --accent-signal:#4FC3D9; --accent-premium:var(--cr-str-sand); --accent-data:#4FC3D9;
--accent-strata:var(--cr-str-sand); --accent-strata-lt:var(--cr-str-sand-lt);
--status-ok:#3DBE8B; --status-warn:#E0A93A;
--focus-ring:#3B6FD6;
--accent-eyebrow:var(--accent-strata);
}
/* ============ Strata · light ============ */
[data-brand="craton"][data-craton-palette="strata"][data-theme="light"]{
--bg-page:#F4F7FB; --bg-void:#DDE5EF; --bg-section-alt:#FFFFFF;
--surface-card:#FFFFFF; --surface-raised:#EAF0F7; --surface-panel:#EAF0F7;
--border-hairline:#DDE5EF; --border-medium:#DDE5EF; --border-strong:#C9D4E2;
--text-display:#0B1929; --text-heading:#0B1929; --text-body:#22304A; --text-bright:#0B1929; --text-muted:#4B5B74; --text-label:#4B5B74;
--accent-primary:#1A4FBA; --accent-primary-hover:#16429C; --accent-on-primary:#F2F6FA;
--accent-link:#1E9FB7; --accent-signal:#1E9FB7; --accent-premium:var(--cr-str-sand-ink); --accent-data:#1E9FB7;
--accent-strata:var(--cr-str-sand-ink); --accent-strata-lt:var(--cr-str-sand);
--status-ok:#1F8F63; --status-warn:#A9741A;
--focus-ring:#1A4FBA;
--accent-eyebrow:var(--accent-strata);
}
/* ============ Basalt · dark ============ */
[data-brand="craton"][data-craton-palette="basalt"]{
--bg-page:var(--cr-bas-page); --bg-void:#060708; --bg-section-alt:var(--cr-bas-surface);
--surface-card:var(--cr-bas-surface); --surface-raised:var(--cr-bas-raised); --surface-panel:var(--cr-bas-raised);
--border-hairline:var(--cr-bas-hairline); --border-medium:var(--cr-bas-hairline); --border-strong:var(--cr-bas-strong);
--text-display:var(--cr-bas-bone); --text-heading:var(--cr-bas-bone); --text-body:var(--cr-bas-body); --text-bright:var(--cr-bas-bone); --text-muted:var(--cr-bas-muted); --text-label:var(--cr-bas-muted);
--accent-primary:var(--cr-bas-bone); --accent-primary-hover:#FFFFFF; --accent-on-primary:var(--cr-bas-page);
--accent-link:var(--cr-bas-verdigris); --accent-signal:#C9A961; --accent-premium:#C9A961; --accent-data:var(--cr-bas-verdigris);
--accent-strata:var(--cr-bas-verdigris); --accent-strata-lt:var(--cr-bas-verdigris-lt);
--status-ok:var(--cr-bas-verdigris); --status-warn:#C9A961;
--focus-ring:var(--cr-bas-verdigris);
--accent-eyebrow:var(--accent-strata);
}
/* ============ Basalt · light ============ */
[data-brand="craton"][data-craton-palette="basalt"][data-theme="light"]{
--bg-page:var(--cr-bas-paper); --bg-void:#DCD7CE; --bg-section-alt:#FFFFFF;
--surface-card:#FFFFFF; --surface-raised:var(--cr-bas-paper-raised); --surface-panel:var(--cr-bas-paper-raised);
--border-hairline:var(--cr-bas-paper-line); --border-medium:var(--cr-bas-paper-line); --border-strong:#BDB7AC;
--text-display:var(--cr-bas-page); --text-heading:var(--cr-bas-page); --text-body:#3A3F45; --text-bright:var(--cr-bas-page); --text-muted:#6B7076; --text-label:#6B7076;
--accent-primary:var(--cr-bas-page); --accent-primary-hover:#22262B; --accent-on-primary:var(--cr-bas-paper);
--accent-link:var(--cr-bas-verdigris-ink); --accent-signal:#8F7433; --accent-premium:#8F7433; --accent-data:var(--cr-bas-verdigris-ink);
--accent-strata:var(--cr-bas-verdigris-ink); --accent-strata-lt:var(--cr-bas-verdigris);
--status-ok:var(--cr-bas-verdigris-ink); --status-warn:#8F7433;
--focus-ring:var(--cr-bas-verdigris-ink);
--accent-eyebrow:var(--accent-strata);
}
/* ============ Bedrock · light · darker paper regions ============
--bg-void (#DDD9D1) is a darker paper than --bg-page, so muted text and the eyebrow bronze
need one more step down to clear 4.5:1 on it. Scope a region painted on it with
data-craton-surface="void" on the same element that carries data-brand/data-theme,
or set the three values locally in the product layer (proto/craton.css does this for .rail).
Measured: muted 4.46 -> 4.81, eyebrow 4.48 -> 5.14. */
[data-brand="craton"][data-theme="light"][data-craton-surface="void"]{
--text-muted:#555C64; --text-label:#555C64; --accent-eyebrow:#6E5228;
}
/* ============ State encoding · binding for every CRATON surface ============
Bedrock is deliberately desaturated. No two of its accents separate far enough to carry
meaning by hue. Measured with the dataviz palette validator, Sep 2026:
bronze #B08D57 vs sage #7FA6B5 dE 13.1 normal vision (floor 15) FAIL
bronze-deep #7A5A2E vs slate-ink #3F6F82 dE 13.2 normal vision FAIL
both, chroma floor below floor FAIL
CVD separation passes (12.2 deutan). The failure is for FULL-COLOUR readers. Therefore:
STATE IS NEVER COLOUR. State = position + fill pattern + a literal word.
bronze live / needs you
sage settled
45deg hatch attention (no third hue, so "bronze is the only accent" stays true)
A state mark is never rendered without its word. Reference implementation:
guidelines/craton/proto/craton.css -> .sm / .sm--settled / .sm--live / .sm--attention / .state */
/* ============ CRATON motif helpers ============ */
/* Strata footer: three hairline bands in the strata accent, used at the foot of a screen or a card. */
[data-brand="craton"] .cr-strata{height:40px;background:repeating-linear-gradient(180deg,transparent 0 12px,color-mix(in srgb,var(--accent-strata) 14%,transparent) 12px 13px)}
/* Top-rule emphasis (the CRATON card accent — 2px top strip in the strata colour). */
[data-brand="craton"] .cr-card{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-card)}
[data-brand="craton"] .cr-card--hi{border-top:2px solid var(--accent-strata)}
/* Eyebrow with the strata dash. */
[data-brand="craton"] .cr-eyebrow{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-strata);display:flex;align-items:center;gap:8px}
[data-brand="craton"] .cr-eyebrow::before{content:"";width:18px;height:1px;background:var(--accent-strata)}
/* Segmented progress (the dashed bar from the day card). */
[data-brand="craton"] .cr-bar{height:8px;position:relative;background:repeating-linear-gradient(90deg,var(--surface-raised) 0 6px,transparent 6px 8px)}
[data-brand="craton"] .cr-bar>span{position:absolute;inset:0 auto 0 0;background:var(--accent-strata)}
/* ============================================================
HYPATIUS — Base reset, element typography, shared utilities.
Authored entirely against semantic tokens, so any subtree
scoped with data-brand="starchitect|alidade" re-skins itself.
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-interface);font-size:1.0625rem;font-weight:var(--fw-body);line-height:var(--lh-body);color:var(--text-body);background:var(--bg-page);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--accent-signal)}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
/* ---------- DISPLAY + HEADINGS ---------- */
.display{font-family:var(--font-display);font-weight:400;font-size:var(--display-1);line-height:var(--lh-display);letter-spacing:var(--ls-display);color:var(--text-display)}
.display--md{font-size:var(--display-2)}
.display--invert{color:var(--hy-ink-pure)}
h1,.h1{font-family:var(--font-display);font-weight:400;font-size:var(--h1);line-height:1.05;letter-spacing:var(--ls-display);color:var(--text-heading)}
h2,.h2{font-family:var(--font-display);font-weight:400;font-size:var(--h2);line-height:var(--lh-tight);letter-spacing:var(--ls-heading);color:var(--text-heading)}
h3,.h3{font-family:var(--font-interface);font-weight:var(--fw-bold);font-size:var(--h3);line-height:1.3;color:var(--text-heading)}
/* ---------- EYEBROW: rule + tracked mono caps ---------- */
.eyebrow{font-family:var(--font-mono);font-size:var(--eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-link);display:inline-flex;align-items:center;gap:0.6em}
.eyebrow::before{content:"";width:1.75rem;height:1px;background:var(--accent-primary);display:inline-block}
.eyebrow--invert{color:var(--accent-signal)}
.eyebrow--invert::before{background:var(--accent-signal)}
.lede{font-size:var(--body-lg);color:var(--text-body);line-height:var(--lh-body);max-width:56ch;text-wrap:pretty}
.lede--invert{color:var(--text-bright)}
.mono{font-family:var(--font-mono);font-size:0.875rem;letter-spacing:0.02em}
/* ---------- LAYOUT ---------- */
.container{max-width:var(--layout-max);margin:0 auto;padding-inline:var(--gutter)}
.container--narrow{max-width:var(--layout-narrow);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--dark{background:var(--bg-page);color:var(--text-bright)}
.section--navy{background:var(--bg-section-alt);color:var(--text-bright)}
.section--void{background:var(--bg-void);color:var(--text-bright)}
/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:0.6rem;padding:0.95rem 1.75rem;font-family:var(--font-interface);font-size:0.9rem;font-weight:var(--fw-semibold);letter-spacing:var(--ls-button);border-radius:var(--radius-control);border:1px solid transparent;transition:all var(--dur-fast) var(--ease-out);cursor:pointer;position:relative}
.btn__arrow{font-size:1.1em;transition:transform var(--dur-fast)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn--primary{background:var(--accent-primary);color:var(--on-accent);border-color:var(--accent-primary)}
.btn--primary:hover{background:var(--accent-primary-hover);border-color:var(--accent-primary-hover)}
.btn--ghost{background:transparent;color:var(--text-bright);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--accent-signal);color:var(--accent-signal)}
.btn--accent{background:var(--accent-signal);color:var(--bg-page);border-color:var(--accent-signal)}
.btn--accent:hover{filter:brightness(1.12)}
.btn--text{padding:0.5rem 0;background:transparent;color:var(--accent-link);border:none;border-bottom:1px solid var(--accent-primary);border-radius:0}
.btn--text:hover{color:var(--accent-signal)}
/* ---------- CARDS ---------- */
.cap-card{padding:2rem;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-card);position:relative;transition:all var(--dur-state) var(--ease-out)}
.cap-card:hover{border-color:var(--accent-link);transform:translateY(-2px)}
.cap-card__num{font-family:var(--font-mono);font-size:0.75rem;color:var(--accent-link);letter-spacing:var(--ls-eyebrow);margin-bottom:0.75rem}
.cap-card__title{font-family:var(--font-interface);font-weight:var(--fw-bold);font-size:1.05rem;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:0.75rem;color:var(--text-heading)}
.cap-card__desc{color:var(--text-body);line-height:var(--lh-body)}
/* ---------- STATUS BADGE ---------- */
.status-badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 0.85rem;background:color-mix(in srgb,var(--accent-signal) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent-signal) 30%,transparent);font-family:var(--font-mono);font-size:0.7rem;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-signal);border-radius:var(--radius-tick)}
.status-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-signal);box-shadow:var(--glow-signal)}
.status-badge--gold{background:color-mix(in srgb,var(--accent-premium) 10%,transparent);border-color:color-mix(in srgb,var(--accent-premium) 30%,transparent);color:var(--accent-premium)}
.status-badge--gold::before{background:var(--accent-premium);box-shadow:0 0 6px var(--accent-premium)}
/* ---------- SCROLL REVEAL ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.reveal--visible{opacity:1;transform:translateY(0)}
/* ---------- UTILITIES ---------- */
.center-text{text-align:center}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}.mt-4{margin-top:4rem}
.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}
.text-signal{color:var(--accent-signal)}
.text-premium{color:var(--accent-premium)}
/* ============================================================
HYPATIUS — Signature motifs, all three tiers.
Corporate: comm-beam, credential stamp.
STARCHITECT: coordinate grid, registration ticks, hairline+tick
rule, section tag, classification strip, Bebas stat figure.
ALIDADE: left-edge accent bar, provenance/ledger row.
============================================================ */
/* ---- Comm-beam: thin cobalt rule terminating in an aqua dot ---- */
.beam{display:flex;align-items:center;gap:0.5rem;margin-block:1.5rem}
.beam::before{content:"";width:2.5rem;height:1px;background:var(--accent-primary)}
.beam::after{content:"";width:0.45rem;height:0.45rem;border-radius:50%;background:var(--accent-signal);box-shadow:var(--glow-signal)}
.beam--invert::before{background:var(--accent-signal)}
/* ---- Credential stamp: the mono dog-tag. Repeat it; it is trust posture. ---- */
.stamp{font-family:var(--font-mono);font-size:0.75rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted)}
/* ---- Coordinate grid: faint technical lattice on the void ---- */
.st-grid{background-color:var(--bg-void);background-image:linear-gradient(rgba(67,75,92,0.16) 1px,transparent 1px),linear-gradient(90deg,rgba(67,75,92,0.16) 1px,transparent 1px);background-size:48px 48px}
.st-grid--fine{background-size:24px 24px;background-image:linear-gradient(rgba(67,75,92,0.10) 1px,transparent 1px),linear-gradient(90deg,rgba(67,75,92,0.10) 1px,transparent 1px)}
/* ---- Corner registration ticks: gold L-marks framing a region ---- */
.st-registration{position:relative}
.st-registration::before,.st-registration::after{content:"";position:absolute;width:12px;height:12px;border-color:var(--accent-primary);border-style:solid;border-width:0}
.st-registration::before{top:0;left:0;border-top-width:2px;border-left-width:2px}
.st-registration::after{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
/* ---- Hairline + tick: a divider rule opened by a gold diamond ---- */
.st-rule{display:flex;align-items:center;gap:var(--sp-3)}
.st-rule::before{content:"";width:10px;height:10px;flex:none;background:var(--accent-primary);transform:rotate(45deg)}
.st-rule::after{content:"";flex:1;height:1px;background:var(--border-rule)}
/* ---- Section tag: gold tick + mono label that opens content ---- */
.st-section-tag{display:inline-flex;align-items:center;gap:var(--sp-2);font:var(--fw-semibold) var(--fs-eyebrow)/1 var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.st-section-tag::before{content:"";width:8px;height:8px;background:var(--accent-primary)}
/* ---- Classification strip ---- */
.st-classification{background:var(--bg-void);color:var(--text-muted);text-align:center;font:var(--fw-medium) 11px/1 var(--font-mono);letter-spacing:0.15em;padding:8px 16px}
/* ---- Stat figure: Bebas number + tracked mono label ---- */
.st-stat__num{font-family:var(--font-display);font-size:var(--fs-stat);font-weight:var(--fw-regular);letter-spacing:var(--ls-display);color:var(--accent-primary);line-height:1}
.st-stat__label{font:var(--fw-medium) var(--fs-micro)/1.4 var(--font-mono);letter-spacing:0.15em;text-transform:uppercase;color:var(--text-body);margin-top:var(--sp-2)}
/* ---- ALIDADE left-edge accent bar. Rule: no radius on the barred edge. ---- */
.al-edge{border-left:2px solid var(--accent-primary);border-top-left-radius:0;border-bottom-left-radius:0}
.al-edge--gate{border-left-color:var(--accent-premium)}
.al-edge--grant{border-left-color:var(--accent-partner)}
/* ---- Provenance / ledger row: every agent surface shows the run ---- */
.al-ledger{display:flex;align-items:center;gap:var(--sp-3);font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-muted)}
.al-ledger__tool{color:var(--accent-signal)}
/* ---- Protection gradient for photographic heroes ---- */
.protect{position:relative;isolation:isolate}
.protect::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--protect-h),var(--protect-v)}
/* ============================================================
HYPATIUS — Structural component classes.
Ported from hypati.us (Blackout) and rewritten onto semantic
tokens so the same markup works under any data-brand scope.
============================================================ */
/* ---------- PLATFORM TILES ---------- */
.platform-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:3.5rem}
@media (max-width:900px){.platform-grid{grid-template-columns:1fr}}
.platform-tile{position:relative;padding:2.5rem 2rem;background:var(--surface-raised);border:1px solid var(--border-medium);border-radius:var(--radius-card);overflow:hidden;transition:all var(--dur-state) var(--ease-out);display:flex;flex-direction:column}
.platform-tile::before{content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--accent-signal);transition:width 0.4s var(--ease-out)}
.platform-tile:hover{border-color:var(--accent-link);transform:translateY(-3px)}
.platform-tile:hover::before{width:100%}
.platform-tile--muted{background:var(--bg-page);opacity:0.85}
.platform-tile__label{font-family:var(--font-display);font-size:1.95rem;font-weight:400;letter-spacing:0.04em;margin-bottom:0.25rem;color:var(--text-heading)}
.platform-tile__type{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-signal);margin-bottom:1.5rem}
.platform-tile__type--muted{color:var(--accent-premium)}
.platform-tile__desc{color:var(--text-bright);margin-bottom:2rem;flex:1;line-height:1.55}
.platform-tile__link{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.85rem;font-weight:600;color:var(--accent-signal);letter-spacing:0.02em}
/* ---------- PILLARS ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:3rem}
@media (max-width:900px){.pillars{grid-template-columns:1fr;gap:1.5rem}}
.pillar{padding-top:2rem;border-top:1px solid var(--border-hairline);position:relative}
.pillar::before{content:"";position:absolute;top:-1px;left:0;width:3rem;height:2px;background:var(--accent-primary)}
.pillar__num{font-family:var(--font-mono);font-size:0.75rem;color:var(--accent-link);letter-spacing:0.15em;margin-bottom:0.75rem;display:block}
.pillar__title{font-family:var(--font-display);font-weight:400;font-size:1.8rem;letter-spacing:0.02em;margin-bottom:0.75rem;color:var(--text-heading)}
.pillar__desc{color:var(--text-body);line-height:var(--lh-body)}
/* ---------- GRIDS ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:3rem}
@media (max-width:900px){.cap-grid{grid-template-columns:1fr}}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:3rem}
@media (max-width:1000px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.post-grid{grid-template-columns:1fr}}
/* ---------- POST / INSIGHT CARDS ---------- */
.post-card{padding:1.75rem;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-card);transition:all var(--dur-state) var(--ease-out);display:flex;flex-direction:column;min-height:260px}
.post-card:hover{border-color:var(--accent-link);transform:translateY(-2px)}
.post-card__cat{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-link);margin-bottom:1rem}
.post-card__title{font-family:var(--font-interface);font-weight:700;font-size:1.05rem;line-height:1.35;margin-bottom:0.75rem;color:var(--text-heading);flex:1}
.post-card__byline{font-size:0.8rem;color:var(--text-label);font-family:var(--font-mono);letter-spacing:0.05em}
/* ---------- FILTER CHIPS ---------- */
.filter-chips{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:2rem}
.chip{padding:0.55rem 1.1rem;border:1px solid var(--border-hairline);background:var(--surface-card);font-size:0.85rem;font-weight:500;color:var(--text-body);letter-spacing:0.02em;cursor:pointer;transition:all var(--dur-fast);border-radius:var(--radius-control);font-family:var(--font-interface)}
.chip:hover{border-color:var(--accent-link);color:var(--accent-link)}
.chip--active{background:var(--accent-signal);color:var(--bg-page);border-color:var(--accent-signal)}
/* ---------- PATHWAY CARDS ---------- */
.pathways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:3rem}
@media (max-width:900px){.pathways{grid-template-columns:1fr}}
.pathway-card{padding:2rem;background:var(--surface-card);border:1px solid var(--border-hairline);border-top:2px solid var(--accent-signal);display:flex;flex-direction:column}
.pathway-card__label{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-link);margin-bottom:0.75rem}
.pathway-card__title{font-family:var(--font-display);font-weight:400;font-size:1.5rem;margin-bottom:1rem;color:var(--text-heading);letter-spacing:0.02em}
.pathway-card__desc{color:var(--text-body);line-height:var(--lh-body);flex:1;margin-bottom:1.25rem}
/* ---------- TEAM CARDS ---------- */
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:3rem}
@media (max-width:1000px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.team-grid{grid-template-columns:1fr}}
.team-card{padding:2rem;background:var(--surface-card);border:1px solid var(--border-hairline);border-top:2px solid var(--accent-primary)}
.team-card__avatar{width:72px;height:72px;border-radius:50%;background:var(--surface-raised);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:400;font-size:1.5rem;color:var(--accent-signal);margin-bottom:1.25rem;letter-spacing:0.04em}
.team-card__name{font-family:var(--font-display);font-weight:400;font-size:1.4rem;margin-bottom:0.15rem;color:var(--text-heading);letter-spacing:0.02em}
.team-card__role{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-link);margin-bottom:1rem}
.team-card__bio{color:var(--text-body);line-height:var(--lh-body);font-size:0.95rem}
/* ---------- FORM ---------- */
.form__group{margin-bottom:1.5rem}
.form__label{display:block;font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-label);margin-bottom:0.5rem}
.form__input,.form__textarea,.form__select{width:100%;padding:0.85rem 1rem;font-family:var(--font-interface);font-size:1rem;color:var(--text-heading);background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-control);transition:border var(--dur-fast)}
.form__input:focus,.form__textarea:focus,.form__select:focus{outline:none;border-color:var(--focus-ring)}
.form__textarea{min-height:140px;resize:vertical}
/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);padding-block:1.25rem;transition:background var(--dur-state) var(--ease-out),padding var(--dur-state) var(--ease-out)}
.nav--scrolled{background:rgba(11,25,41,0.85);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);padding-block:0.75rem;border-bottom:1px solid rgba(255,255,255,0.08)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;max-width:var(--layout-max);margin:0 auto;padding-inline:var(--gutter)}
.nav__brand{font-family:var(--font-display);font-weight:400;letter-spacing:0.08em;font-size:1.6rem;color:#fff;display:inline-flex;align-items:center;gap:0.6rem}
.nav__brand-img{height:1.45rem;width:auto;display:block}
.nav__brand-mark{width:0.45rem;height:0.45rem;background:var(--accent-signal);border-radius:50%;box-shadow:var(--glow-signal)}
.nav__items{display:flex;align-items:center;gap:2rem;list-style:none}
.nav__link{font-family:var(--font-interface);font-size:0.9rem;font-weight:500;color:var(--text-bright);letter-spacing:0.02em;position:relative;padding-block:0.4rem;transition:color var(--dur-fast)}
.nav__link:hover{color:#fff}
.nav__link--active{color:var(--accent-signal)}
.nav__link--active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent-signal)}
.nav__cta{display:inline-flex;align-items:center;gap:0.5rem;padding:0.55rem 1.1rem;border:1px solid color-mix(in srgb,var(--accent-signal) 40%,transparent);border-radius:var(--radius-control);font-size:0.85rem;font-weight:600;color:var(--accent-signal);letter-spacing:0.02em;transition:all var(--dur-fast)}
.nav__cta:hover{background:var(--accent-signal);color:var(--bg-page);border-color:var(--accent-signal)}
/* ---------- FOOTER ---------- */
.footer{background:var(--bg-void);color:var(--text-muted);padding:4rem 0 2rem;border-top:1px solid rgba(255,255,255,0.05)}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
@media (max-width:900px){.footer__top{grid-template-columns:1fr 1fr;gap:2rem}}
@media (max-width:540px){.footer__top{grid-template-columns:1fr}}
.footer__tagline{color:var(--text-muted);font-size:0.9rem;line-height:1.55;max-width:30ch;margin-top:1rem}
.footer__col-title{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-signal);margin-bottom:1rem}
.footer__list{list-style:none}
.footer__list li{margin-bottom:0.5rem}
.footer__list a{font-size:0.9rem;color:var(--text-bright)}
.footer__list a:hover{color:var(--accent-signal)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;padding-top:2rem;border-top:1px solid rgba(255,255,255,0.05);font-size:0.8rem;color:var(--text-label);flex-wrap:wrap;gap:1rem}
/* ---------- HERO ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;isolation:isolate}
.hero--short{min-height:56vh}
.hero--medium{min-height:70vh}
.hero__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.hero__overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,15,28,0.94) 0%,rgba(6,15,28,0.78) 45%,rgba(6,15,28,0.5) 68%,rgba(6,15,28,0.2) 84%,rgba(6,15,28,0.4) 100%),linear-gradient(180deg,rgba(6,15,28,0.45) 0%,rgba(6,15,28,0.25) 40%,rgba(6,15,28,0.9) 100%)}
.hero__content{width:100%;padding-block:4rem;animation:fadeUp 1s var(--ease-out) 0.3s both}
.hero__title{max-width:18ch;margin-block:1.5rem 1.75rem}
.hero__sub{max-width:56ch;font-size:var(--body-lg);color:var(--text-bright);line-height:1.55;margin-bottom:2.5rem}
.hero__cred{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:0.14em;color:rgba(255,255,255,0.55);margin:0.9rem 0 1.6rem}
.hero__ctas{display:flex;flex-wrap:wrap;gap:1rem}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
/* ---------- CTA STRIP ---------- */
.cta-strip{background:var(--bg-page);color:#fff;padding:4rem 0;position:relative;overflow:hidden}
.cta-strip__title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,3vw,2.25rem);color:#fff;max-width:28ch;letter-spacing:0.02em}
/* ---------- SPLIT ---------- */
.split{display:grid;grid-template-columns:1fr 1.4fr;gap:4rem;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:2rem}}
.split__heading{position:sticky;top:7rem}
@media (max-width:900px){.split__heading{position:static}}
/* ---------- LIGHT-THEME CHROME OVERRIDES ---------- */
[data-theme="light"] .nav--scrolled{background:rgba(237,241,247,0.88);border-bottom:1px solid rgba(11,25,41,0.10)}
[data-theme="light"] .nav--scrolled .nav__link{color:var(--text-body)}
[data-theme="light"] .nav--scrolled .nav__link:hover{color:var(--hy-navy-800)}
[data-theme="light"] .nav--scrolled .nav__link--active{color:var(--hy-cobalt-600)}
[data-theme="light"] .nav--scrolled .nav__link--active::after{background:var(--hy-cobalt-600)}
[data-theme="light"] .nav--scrolled .nav__cta{color:var(--hy-cobalt-600);border-color:rgba(26,79,186,0.35)}
[data-theme="light"] .nav--scrolled .nav__cta:hover{background:var(--hy-cobalt-500);color:#fff;border-color:var(--hy-cobalt-500)}
/* ============================================================
CRATON · shared product motifs · v2 · 16 Sep 2026
One implementation, imported by every CRATON surface:
guidelines/craton/proto the platform
guidelines/craton/mobile the app
guidelines/craton/site the marketing site
Defines NO palette. Every colour resolves through
tokens/craton.css via data-brand="craton" on .
── Design law (derived, not decorative) ─────────────────────
Bedrock is deliberately desaturated. Measured with the
dataviz palette validator:
bronze #B08D57 vs sage #7FA6B5 dE 13.1 FAIL
bronze-deep #7A5A2E vs slate-ink #3F6F82 dE 13.2 FAIL
both, chroma floor below FAIL
The 15 floor is for NORMAL vision; CVD separation actually
passes at 12.2 deutan. So no CRATON accent pair can carry
meaning by hue, and:
STATE IS NEVER COLOUR.
State = position + fill pattern + a literal word.
Colour is atmosphere.
bronze live · needs you
sage settled
45deg hatch attention (no third hue, so "bronze is the
only accent" stays literally true)
A state mark is never rendered without its word.
============================================================ */
/* a11y addendum landed in tokens/craton.css on 16 Sep 2026 (docs/tokens-craton-a11y.patch).
Dark-paper regions: put data-craton-surface="void" on the element that carries data-brand/data-theme,
or set --text-muted/--text-label/--accent-eyebrow locally in the product layer. */
/* ---- scale and faces shared by every CRATON surface ---- */
[data-brand="craton"]{
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
--t-display:'Big Shoulders Display','Archivo Narrow','Arial Narrow',sans-serif; /* @kind font */
--t-ui:'Rajdhani',system-ui,sans-serif; /* @kind font */
--t-mono:'IBM Plex Mono',ui-monospace,monospace; /* @kind font */
--ease:cubic-bezier(.4,0,.2,1); /* @kind other */
--scan:2.6s; /* @kind other */
}
@media (prefers-reduced-motion: reduce){
[data-brand="craton"]{ --scan:0s /* @kind other */ }
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
}
}
/* ══ MOTIF 1 · PROOF CHIP ══════════════════════════════════════
Brand law: "every line pairs with a literal proof line."
In product: no figure is asserted without the record that
produced it. On marketing: no claim without its citation. */
.cr-proof{
font-family:var(--t-mono);font-size:10.5px;letter-spacing:.06em;
color:var(--text-muted);display:flex;align-items:baseline;gap:var(--s2);
margin:var(--s2) 0 0;font-variant-numeric:tabular-nums;text-transform:none;
}
.cr-proof::before{content:"§";color:var(--accent-eyebrow);flex:none}
.cr-proof--lg{font-size:12px}
/* ══ MOTIF 2 · STATE MARK ══════════════════════════════════════
Three states separated structurally, so they survive CVD,
greyscale print and forced-colors. Never used without the word. */
.cr-sm{width:14px;height:14px;flex:none;display:inline-block;position:relative;border-radius:1px}
.cr-sm--settled{background:var(--accent-signal);box-shadow:inset 0 0 0 2px var(--surface-card)}
.cr-sm--live{background:var(--accent-primary)}
.cr-sm--live::after{
content:"";position:absolute;left:1px;right:1px;top:50%;height:1px;
background:var(--accent-on-primary);animation:cr-smscan var(--scan) var(--ease) infinite;
}
.cr-sm--attention{
border:1px solid var(--accent-primary);
background:repeating-linear-gradient(45deg,transparent 0 3px,var(--accent-primary) 3px 4px);
}
@keyframes cr-smscan{0%,100%{transform:translateY(-5px);opacity:0}20%,80%{opacity:.9}50%{transform:translateY(4px)}}
.cr-state{
display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--t-mono);
font-size:10px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}
.cr-state--settled{color:var(--accent-signal)}
.cr-state--live,.cr-state--attention{color:var(--accent-primary)}
/* ══ MOTIF 3 · STRATA ══════════════════════════════════════════
The band lives inside its row and stretches to the row's height,
so the overview and the list can never drift out of register.
The strata mark and the data are the same object. */
.cr-strata{display:grid;gap:2px;align-content:stretch}
.cr-band{display:block;border-radius:1px;transition:transform .2s var(--ease),filter .2s var(--ease)}
.cr-band--settled{background:var(--accent-signal)}
.cr-band--live{background:var(--accent-primary)}
.cr-band--attention{background:repeating-linear-gradient(45deg,var(--surface-raised) 0 3px,var(--accent-primary) 3px 5px)}
.cr-band--on{transform:scaleX(1.06);filter:brightness(1.25)}
/* a strata row: band · number · mark · label · word */
.cr-row{
display:grid;grid-template-columns:6px 28px 14px minmax(0,1fr) auto;gap:var(--s3);
align-items:center;padding:9px var(--s2);border-bottom:1px solid var(--border-hairline);
width:100%;color:var(--text-body);border-radius:2px;text-align:left;
}
.cr-row:last-child{border-bottom:0}
.cr-row:hover,.cr-row--on{background:var(--surface-raised)}
.cr-row>.cr-band{align-self:stretch;margin:2px 0}
.cr-row--nb{grid-template-columns:28px 14px minmax(0,1fr) auto}
.cr-row__n{font-family:var(--t-mono);font-size:11px;color:var(--text-muted)}
.cr-row__t{min-width:0}
/* ══ MOTIF 4 · EVIDENCE BLOCK ══════════════════════════════════
The reason a reviewer needs is rendered, never hovered. */
.cr-ev{
border-left:2px solid var(--accent-primary);background:var(--surface-raised);
padding:var(--s3) var(--s4);margin-top:var(--s3);border-radius:0 2px 2px 0;
}
.cr-ev__l{font-family:var(--t-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}
.cr-ev__q{color:var(--text-display);font-size:15px;margin:var(--s1) 0 var(--s2)}
.cr-ev__m{font-family:var(--t-mono);font-size:10.5px;color:var(--text-muted);letter-spacing:.04em}
/* ══ THE RECEIPT ═══════════════════════════════════════════════
The AI-provenance artefact. Same object on product and marketing. */
.cr-rcpt{
font-family:var(--t-mono);font-size:11px;line-height:1.85;letter-spacing:.02em;
color:var(--text-body);border-top:1px dashed var(--border-strong);
border-bottom:1px dashed var(--border-strong);padding:var(--s3) 0;
}
.cr-rcpt b{display:inline-block;min-width:88px;color:var(--accent-eyebrow);font-weight:500}
.cr-rcpt b.ok{color:var(--accent-signal)}
/* ══ THE LEDGER THREAD ═════════════════════════════════════════
The record made continuously visible: one tick per row written,
newest at top, bronze for live and sage for settled. */
.cr-thread{display:flex;flex-direction:column;align-items:center;gap:3px;position:relative}
.cr-thread::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--border-hairline)}
.cr-tick{width:18px;height:3px;background:var(--accent-signal);border-radius:1px;flex:none;position:relative;z-index:1}
.cr-tick--live{background:var(--accent-primary)}
.cr-tick--new{animation:cr-tickin var(--scan) var(--ease) 1}
@keyframes cr-tickin{0%{transform:translateY(-14px) scaleX(.2);opacity:0}35%{opacity:1}100%{transform:none;opacity:1}}
/* ══ THE MARKS ═════════════════════════════════════════════════
Geometry lives in assets/brand/craton/mark.js, lifted verbatim
from the shipped SVGs. This block is only the motion and the
sizing, so the shape has exactly one definition.
The signature rule (big-pass deck, 14 Sep):
shield company-facing — site, print, the binder export
layered C the product — app, mobile, favicon, notifications,
sidebar tile, loading and empty states
wordmark anything with no room for a symbol
Never both symbols in one lockup.
The C's three arcs are the brand's triad, top to bottom:
bone AUTHORITY the policy that says what counts
bronze EVENTS the ledger, as it happens
slate RECORD the binder, settled
Which is also the product, in order. So when the mark settles
it settles in that order — authority first, record last. It is
the M1 scan applied to the monogram rather than to a splash. */
.cr-cmark{display:block;flex:none}
.cr-cmark--settle .cr-cmark__a{opacity:0;animation:cr-cset .55s var(--ease) forwards}
.cr-cmark--settle .cr-cmark__a--1{animation-delay:0s}
.cr-cmark--settle .cr-cmark__a--2{animation-delay:.16s}
.cr-cmark--settle .cr-cmark__a--3{animation-delay:.32s}
@keyframes cr-cset{
from{opacity:0;transform:translateX(-6px)}
to{opacity:1;transform:none}
}
/* The arcs are nested paths, so transform-box has to be the fill box
or the translate resolves against the whole viewBox and the middle
arc visibly overshoots the other two. */
.cr-cmark__a{transform-box:fill-box;transform-origin:center}
/* the shield's bands, when it is used at a size that can carry motion */
@keyframes cr-bandlit{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes cr-shieldscan{0%{transform:translateY(-34px);opacity:0}15%,85%{opacity:1}100%{transform:translateY(34px);opacity:0}}
.cr-shield__b--1{animation:cr-bandlit var(--scan) infinite .2s}
.cr-shield__b--2{animation:cr-bandlit var(--scan) infinite .6s}
.cr-shield__b--3{animation:cr-bandlit var(--scan) infinite 1s}
.cr-shield__scan{animation:cr-shieldscan var(--scan) var(--ease) infinite}
/* A mark used as a quiet watermark behind an empty state. The brand
lists empty states as the C's job, and the quiet day is the one
screen the whole product is named for. */
.cr-watermark{position:relative}
.cr-watermark > .cr-cmark{
position:absolute;right:0;top:50%;transform:translateY(-50%);
opacity:.10;pointer-events:none;
}
/* ══ THE SETTLE SCAN ═══════════════════════════════════════════
Motion M1 from the brand deck, applied to a state change
rather than one full-screen splash. 2.4-3.2 s, ease-in-out,
no overshoot, bronze to bone. No cyan, no red. */
.cr-settling{position:relative;overflow:hidden}
.cr-settling::after{
content:"";position:absolute;left:0;right:0;height:1px;background:var(--accent-signal);
box-shadow:0 0 12px var(--accent-signal);animation:cr-rowscan 1.1s var(--ease) 1;pointer-events:none;
}
@keyframes cr-rowscan{from{top:0;opacity:0}20%{opacity:1}to{top:100%;opacity:0}}
/* ============================================================
ALIDADE product dialect — the real classes shipped to the
running app, ported from the ALIDADE system onto the company
token set. Dense, 0.5px hairlines, no shadows, no gradients.
Depth = surface level + border alpha. Scope the subtree with
data-brand="alidade" so the type world comes along too.
============================================================ */
/* ---- LABEL: uppercase tracked microlabel — the wordmark voice in the UI ---- */
.lbl{text-transform:uppercase;letter-spacing:var(--ls-label);font-size:var(--fs-eyebrow);color:var(--al-t3);font-weight:var(--fw-medium);line-height:1.3}
/* ---- CARD ---- */
.crd{background:var(--al-srf);border:var(--hairline) solid var(--al-bf);border-radius:var(--radius-card)}
.crd-raised{background:var(--al-srf2);border-color:var(--al-bm)}
/* ---- PILLS ---- */
.pill{font-size:var(--fs-eyebrow);padding:var(--pad-pill);border-radius:var(--radius-tick);font-weight:var(--fw-medium);letter-spacing:var(--ls-tracked);display:inline-flex;align-items:center;gap:4px;line-height:1.4}
.pill-tl{background:var(--al-teal-fill);color:var(--al-teal)}
.pill-gd{background:var(--al-gold-fill);color:var(--al-gold)}
.pill-cr{background:var(--al-coral-fill);color:var(--al-coral)}
.pill-pr{background:var(--al-violet-fill);color:var(--al-violet)}
.pill-neutral{background:rgba(255,255,255,0.04);color:var(--al-t2)}
.pill-live::before{content:"●";font-size:8px;color:var(--al-teal)}
/* ---- BUTTONS ---- */
.btn-p,.btn-s,.btn-g{font-family:inherit;cursor:pointer;border-radius:var(--radius-control);letter-spacing:var(--ls-tracked);font-size:var(--fs-label);display:inline-flex;align-items:center;gap:6px;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard)}
.btn-p{background:var(--al-teal);border:none;color:var(--al-on-teal);font-weight:var(--fw-medium);padding:var(--pad-btn)}
.btn-p:hover{background:#3CE9D8}
.btn-p:active{background:var(--al-teal-dk)}
.btn-s{background:transparent;border:var(--hairline) solid var(--al-bm);color:var(--al-t1);padding:6px 10px}
.btn-s:hover{border-color:var(--al-bs);background:rgba(255,255,255,0.03)}
.btn-s:active{background:rgba(255,255,255,0.06)}
.btn-g{background:var(--al-gold-fill);border:var(--hairline) solid var(--al-gold-edge);color:var(--al-gold);padding:7px 11px;font-weight:var(--fw-medium)}
.btn-g:hover{background:rgba(232,184,106,0.18)}
.btn-p:disabled,.btn-s:disabled,.btn-g:disabled{opacity:0.4;cursor:not-allowed}
.btn-p:focus-visible,.btn-s:focus-visible,.btn-g:focus-visible{outline:2px solid var(--al-teal);outline-offset:2px}
/* ---- FORM FIELDS (sit on the page bg — "below the surface") ---- */
.field{background:var(--al-bg);border:var(--hairline) solid var(--al-bm);border-radius:var(--radius-input);padding:8px 11px;font-size:var(--fs-label);color:var(--al-t2);display:flex;align-items:center;gap:6px;font-family:inherit}
.field:focus-within{border-color:var(--al-bs)}
.field-filled{color:var(--al-t1);border-color:var(--al-teal-edge)}
/* ---- AVATARS ---- */
.av{width:22px;height:22px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:var(--fw-medium);flex-shrink:0}
.av-tl{background:var(--al-teal);color:var(--al-on-teal)}
.av-gd{background:var(--al-gold);color:var(--al-on-gold)}
.av-pr{background:var(--al-violet);color:var(--al-on-violet)}
.av-cr{background:var(--al-coral);color:var(--al-on-coral)}
.av-anon{width:38px;height:38px;border-radius:var(--radius-full);border:1px dashed rgba(143,200,220,0.30);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--al-t3)}
/* ---- KPI METRIC CARD ---- */
.kpi{background:var(--al-srf2);padding:12px;border-radius:var(--radius-input)}
.kpi-label{text-transform:uppercase;letter-spacing:var(--ls-label);font-size:10px;color:var(--al-t3);font-weight:var(--fw-medium)}
.kpi-value{font-size:24px;font-weight:var(--fw-medium);margin-top:4px;color:var(--al-t1)}
.kpi-meta{font-size:10px;color:var(--al-t2);margin-top:2px}
.kpi-urgent{background:var(--al-srf);border:var(--hairline) solid var(--al-coral-edge)}
.kpi-urgent .kpi-label,.kpi-urgent .kpi-value{color:var(--al-coral)}
/* ---- WIN SCORE BADGE ---- */
.score-badge{display:flex;flex-direction:column;align-items:center;min-width:50px}
.score-badge .num{font-size:22px;font-weight:var(--fw-medium);line-height:1}
.score-badge .num-tl{color:var(--al-teal)}
.score-badge .num-gd{color:var(--al-gold)}
.score-badge .num-cr{color:var(--al-coral)}
.score-badge .num-was{color:var(--al-t2);font-size:18px}
/* ---- PURSUIT ROW (go-signal left edge; radius 0 on that side) ---- */
.pursuit-row{display:flex;gap:14px;padding:12px 14px;align-items:center;background:var(--al-srf);border:var(--hairline) solid var(--al-bf);border-radius:0 8px 8px 0}
.pursuit-row.pursue{border-left:2px solid var(--al-teal)}
.pursuit-row.consider{border-left:2px solid var(--al-gold)}
.pursuit-row.historical{border-left:2px solid rgba(143,200,220,0.25);opacity:0.65}
/* ---- APPROVAL GATE (human-in-the-loop; gold throughout) ---- */
.gate{background:var(--al-srf2);border:var(--hairline) solid var(--al-bm);border-radius:7px;padding:12px 14px}
.gate-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.gate-body{font-size:var(--fs-label);color:var(--al-t2);margin-bottom:9px;line-height:1.5}
.gate-actions{display:flex;align-items:center;gap:12px}
/* ---- WATERMARKED PARTNER BLOCK (violet; the moat made visible) ---- */
.watermark{border:var(--hairline) solid var(--al-violet-edge);border-radius:var(--radius-input);padding:10px 12px;background:rgba(180,153,224,0.04)}
.watermark-header{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.watermark-tag{font-size:var(--fs-micro);color:var(--al-violet);letter-spacing:0.08em;text-transform:uppercase;font-weight:var(--fw-medium)}
.watermark-body{margin:0;font-size:var(--fs-body);color:var(--al-t1);line-height:var(--lh-body)}
/* ---- SIGNAL / ACTIVITY ROWS ---- */
.signal-row{padding:8px 12px;border-bottom:var(--hairline) solid var(--al-bf);display:flex;gap:8px;align-items:flex-start}
.signal-text{font-size:11px;line-height:1.45;color:var(--al-t1)}
.signal-source{font-size:9px;color:var(--al-t3);margin-top:2px;letter-spacing:0.04em;text-transform:uppercase}
.activity-row{padding:8px 11px;border-bottom:var(--hairline) solid var(--al-bf);display:flex;gap:7px;align-items:flex-start}
.activity-text{font-size:10px;line-height:1.4;color:var(--al-t1)}
.activity-time{font-size:9px;color:var(--al-t3);margin-top:1px}
/* ---- TABS ---- */
.tab-strip{display:inline-flex;align-items:center;gap:4px;padding:4px;background:var(--al-srf);border:var(--hairline) solid var(--al-bf);border-radius:7px}
.tab{font-size:11px;padding:7px 12px;border-radius:5px;color:var(--al-t2);cursor:pointer;letter-spacing:var(--ls-tracked);border:none;background:none;font-family:inherit}
.tab:hover{color:var(--al-t1)}
.tab.on{background:var(--al-srf2);color:var(--al-t1)}
/* ---- TOP BAR / NAV RAIL / SEARCH ---- */
.topbar{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:var(--hairline) solid var(--al-bf);background:var(--al-srf)}
.search-bar{flex:1;display:flex;align-items:center;gap:8px;background:var(--al-bg);border:var(--hairline) solid var(--al-bf);border-radius:var(--radius-input);padding:7px 10px;font-size:var(--fs-body);color:var(--al-t3)}
.navrail{width:var(--rail-w);padding:10px 12px;display:flex;flex-direction:column;gap:5px;background:var(--al-srf)}
.navi{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--al-t2);cursor:pointer}
.navi:hover{background:rgba(255,255,255,0.04);color:var(--al-t1)}
.navi.on{background:var(--al-teal-fill);color:var(--al-teal)}
/* ============================================================
ALIDADE — HUD dialect (LIVE PRODUCT TRUTH)
Ported verbatim from uwgamer/hypatius-hci
frontend/app/globals.css + docs/hci-hud-visual-spec.md.
This is the "command-oriented HUD" direction the running app
shipped, and it DIVERGES from the ALIDADE brand/deck system in
tokens/palette.css (--al-*). Differences are documented in
guidelines/alidade-dialect-compare.html — do not silently
reconcile them.
Scope: data-brand="alidade-hud".
============================================================ */
[data-brand="alidade-hud"]{
/* ---- canonical live tokens (deck vocabulary, app values) ---- */
--alidade-bg:#0b1622; --alidade-srf:#11212f; --alidade-srf2:#172a3a; --alidade-srf3:#1f3447;
--alidade-t1:#5eead4; --alidade-t1d:#14b8a6; --alidade-gd:#f5c451; --alidade-cr:#fb7185; --alidade-pr:#a99fd9;
--alidade-text-1:#e7edf3; --alidade-text-2:#90a3b5; --alidade-text-3:#5d7081;
--alidade-border:rgba(148,184,210,0.10);
--alidade-border-strong:rgba(148,184,210,0.18);
--alidade-border-focus:rgba(94,234,212,0.45);
--alidade-pr-tint:rgba(169,159,217,0.10);
--alidade-pr-border:rgba(169,159,217,0.35);
--alidade-urgency-critical:var(--alidade-cr);
--alidade-urgency-warning:var(--alidade-gd);
--alidade-urgency-ok:var(--alidade-t1d);
/* ---- HUD aliases ---- */
--hud-bg-0:var(--alidade-bg); --hud-bg-1:var(--alidade-srf); --hud-bg-2:var(--alidade-srf2);
--hud-panel:rgba(17,33,47,0.85);
--hud-panel-strong:rgba(23,42,58,0.92);
--hud-panel-soft:rgba(17,33,47,0.68);
--hud-line:var(--alidade-border);
--hud-line-strong:var(--alidade-border-strong);
--hud-grid:rgba(94,234,212,0.05);
--hud-frame-shadow:rgba(4,12,22,0.6);
--hud-cyan:var(--alidade-t1); --hud-teal:var(--alidade-t1d); --hud-green:var(--alidade-t1);
--hud-amber:var(--alidade-gd); --hud-orange:#fb923c; --hud-red:var(--alidade-cr); --hud-purple:var(--alidade-pr);
--hud-text:var(--alidade-text-1); --hud-text-dim:var(--alidade-text-2);
--hud-surface-glow:rgba(94,234,212,0.08);
--hud-font-sans:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
--hud-font-display:"Barlow Condensed","IBM Plex Sans",ui-sans-serif,sans-serif;
--hud-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
--hud-font-serif:"IBM Plex Serif",ui-serif,Georgia,serif;
/* Tailwind v4 radius scale as shipped */
--hud-radius:0.25rem; --hud-radius-sm:0.375rem; --hud-radius-md:0.625rem; --hud-radius-lg:0.875rem; --hud-radius-xl:1.25rem;
/* shell geometry, from app-layout.tsx */
--hud-sidebar-w:19.5rem; --hud-rail-w:22rem; --hud-header-h:40px;
/* motion, from the HUD visual spec §7 */
--hud-ease:cubic-bezier(0.2,0.8,0.2,1); /* @kind other */
--hud-ease-rail:cubic-bezier(0.16,1,0.3,1); /* @kind other */
--hud-dur-hover:120ms; /* @kind other */
--hud-dur-focus:160ms; /* @kind other */
--hud-dur-rail:200ms; /* @kind other */
font-family:var(--hud-font-sans);
color:var(--hud-text);
}
/* ---- shell background: radial teal + violet over a navy ramp ---- */
.hud-shell-bg{background:
radial-gradient(circle at top,rgba(94,234,212,0.16),transparent 26%),
radial-gradient(circle at 80% 20%,rgba(125,211,252,0.10),transparent 22%),
linear-gradient(180deg,#02060d 0%,#06111b 55%,#02050b 100%)}
.hud-grid-overlay{background-image:
linear-gradient(rgba(125,211,252,0.06) 1px,transparent 1px),
linear-gradient(90deg,rgba(125,211,252,0.06) 1px,transparent 1px);
background-size:34px 34px;opacity:.18}
.hud-top-wash{background:linear-gradient(180deg,rgba(125,211,252,0.14),transparent 70%);opacity:.7}
.hud-seam{background:linear-gradient(90deg,transparent,rgba(125,211,252,0.9),transparent)}
/* ---- panels: laminated dark glass over metal. NOTE these DO blur and
DO cast deep directional shadows — the opposite of the ALIDADE brand
product rule. That is the divergence. ---- */
.hud-panel{background:var(--hud-panel);border:1px solid var(--hud-line);border-radius:.25rem;box-shadow:0 28px 80px -45px var(--hud-frame-shadow),inset 0 1px 0 rgba(125,211,252,0.08);backdrop-filter:blur(14px)}
.hud-panel-strong{background:var(--hud-panel-strong);border:1px solid var(--hud-line-strong);border-radius:.375rem;box-shadow:0 32px 90px -50px var(--hud-frame-shadow),inset 0 1px 0 rgba(125,211,252,0.12);backdrop-filter:blur(16px)}
.hud-banner{background:linear-gradient(180deg,rgba(10,24,35,0.96),rgba(5,12,18,0.96));border:1px solid rgba(125,211,252,0.22);border-radius:.25rem;box-shadow:0 24px 70px -42px var(--hud-frame-shadow),inset 0 1px 0 rgba(125,211,252,0.12)}
.hud-frame{position:relative;background:linear-gradient(180deg,rgba(8,20,30,0.92),rgba(5,12,18,0.96));border:1px solid rgba(125,211,252,0.2);clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px));box-shadow:0 30px 80px -48px var(--hud-frame-shadow),inset 0 1px 0 rgba(125,211,252,0.12)}
/* ---- type roles ---- */
.hud-display{font-family:var(--hud-font-display);text-transform:uppercase;letter-spacing:0.16em}
.hud-mono{font-family:var(--hud-font-mono)}
.hud-tabular{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1}
/* ---- glow: narrow and controlled ---- */
.hud-glow-cyan{box-shadow:0 0 0 1px rgba(125,211,252,0.18),0 0 28px rgba(125,211,252,0.16)}
.hud-glow-amber{box-shadow:0 0 0 1px rgba(251,191,36,0.18),0 0 28px rgba(251,191,36,0.12)}
/* ---- segment control ---- */
.hud-segment-control{display:inline-flex;align-items:center;border:1px solid var(--hud-line);border-radius:.25rem;background:var(--hud-panel);padding:2px}
.hud-segment-item{padding:.375rem .75rem;font-size:.6875rem;font-family:var(--hud-font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--hud-text-dim);border-radius:.125rem;transition:all .15s ease;cursor:pointer;border:1px solid transparent;background:none}
.hud-segment-item:hover{color:var(--hud-text)}
.hud-segment-item[data-active="true"]{background:rgba(125,211,252,0.15);color:var(--hud-cyan);border-color:rgba(125,211,252,0.25)}
/* ---- data table ---- */
.hud-table{width:100%;border-collapse:collapse;font-size:.8125rem}
.hud-table th{font-family:var(--hud-font-mono);text-transform:uppercase;letter-spacing:.14em;font-size:.6875rem;font-weight:500;color:var(--hud-text-dim);padding:.5rem .75rem;border-bottom:1px solid var(--hud-line-strong);text-align:left}
.hud-table td{padding:.5rem .75rem;border-bottom:1px solid var(--hud-line);color:var(--hud-text)}
.hud-table tr:hover td{background:rgba(125,211,252,0.04)}
/* ---- underline tabs ---- */
.hud-tab{padding:.5rem .75rem;font-family:var(--hud-font-mono);font-size:.6875rem;text-transform:uppercase;letter-spacing:.12em;color:var(--hud-text-dim);border:none;border-bottom:2px solid transparent;background:none;transition:all .15s ease;cursor:pointer}
.hud-tab:hover{color:var(--hud-text)}
.hud-tab[data-active="true"]{color:var(--hud-cyan);border-bottom-color:var(--hud-cyan)}
/* ---- urgency left rail (deck slide 02) ---- */
.hud-urgency{border-left:2px solid var(--alidade-urgency-ok);border-radius:0 .25rem .25rem 0}
.hud-urgency--warning{border-left-color:var(--alidade-urgency-warning)}
.hud-urgency--critical{border-left-color:var(--alidade-urgency-critical)}
/* ---- watermarked partner block (lavender moat) ---- */
.hud-watermark{border:1px solid var(--alidade-pr-border);background:var(--alidade-pr-tint);border-radius:.375rem;padding:10px 12px}
/* ---- spotlight onboard (docs/frontend-patterns.md pattern 1) ---- */
.hud-spotlight-active{position:relative;z-index:30;border-color:rgba(94,234,212,.65) !important;box-shadow:0 0 0 1px rgba(94,234,212,.35),0 0 28px rgba(125,211,252,.28)}
@media (prefers-reduced-motion:reduce){
.hud-panel,.hud-panel-strong{backdrop-filter:none}
}
/* ---- ALIDADE v2 (16 Sep 2026) · reconciled tokens + al- class layer · MUST come last ---- */
/* ============================================================
ALIDADE — v2 RECONCILED TOKEN LAYER
Supersedes the split between:
tokens/palette.css --al-* (brand / deck / website)
tokens/alidade-hud.css --alidade-* (live application)
The two layers were kept deliberately unreconciled. This file
closes that. One palette, one geometry, one elevation rule.
Verdict, in one line:
COLOUR and GEOMETRY resolve to the BRAND layer.
ELEVATION gets a narrow, written exception for docked chrome.
Two values are adopted FROM the live app because they measure
better: the deep teal, and nothing else.
Every value below passes WCAG AA (4.5:1) for its intended role
on every surface it is permitted on. The two that did not, in
either source layer, are fixed here and marked [FIXED].
Scope: data-brand="alidade". The alidade-hud scope is retired —
see 02-DECISION-tokens.md for the migration map.
============================================================ */
[data-brand="alidade"],
:root[data-brand="alidade"]{
/* ---------- FIELD & SURFACES — brand layer wins ----------
The abyss is the brand's, not the app's. #060D1B is tuned to
the crystalline A mark's iridescence; #0b1622 is a lighter,
bluer field that makes the mark sit flat on it. The mark is
locked, so the field serves the mark. */
--al-bg: #060D1B; /* page field — the abyss */
--al-srf: #0E1B2E; /* card */
--al-srf2: #15263D; /* raised card, KPI, gate */
--al-srf3: #1B2D45; /* modal, popover, docked rail */
--al-structure:#2C3F52; /* structural rule, divider */
/* ---------- BORDERS ----------
Brand alphas retained. The 0.5px WIDTH is retired: it is a
real defect, not a refinement — on a 1x display 0.5px either
rounds to 1px at full strength or vanishes, so the hairline
is non-deterministic across the exact hardware mix a GovCon
buyer runs. 1px at the brand's alpha is the same optical
weight on 2x and is the only weight that survives 1x. */
--al-hairline: 1px;
--al-bf: rgba(143,200,220,0.08); /* faint — card edge */
--al-bm: rgba(143,200,220,0.16); /* medium — raised, input */
--al-bs: rgba(143,200,220,0.28); /* strong — focus-within */
/* ---------- ACCENTS — one meaning each, non-negotiable ----------
teal = action / win / live
gold = score / AI moment / human gate
coral = gap / risk (PRODUCT SIGNAL ONLY — never marketing)
violet = partner / consent / grant */
--al-teal: #21E0CD; /* brand teal. Not #5eead4 — that is */
/* Tailwind teal-300, a framework */
/* default, and it reads as generic */
/* next to a mark built on iridescence. */
--al-teal-dk: #14B8A6; /* [ADOPTED FROM LIVE APP] the one */
/* value the app wins outright. */
/* Old #14998C measured 4.33:1 on srf2 */
/* — a FAIL for label text. This is */
/* 6.13:1. Same hue family, more usable.*/
--al-gold: #E8B86A;
--al-coral: #FF7E66;
--al-violet: #B499E0;
/* ---------- TEXT ---------- */
--al-t1: #EFF5FE; /* display / heading / value */
--al-t2: #93A4BD; /* body / secondary */
--al-t3: #7D92B5; /* [FIXED] microlabel. Was #5C6E89, which */
/* measured 2.94:1 on --al-srf2 — a FAIL, */
/* and it shipped: .kpi sets srf2 and */
/* .kpi-label sets t3. Every KPI label in */
/* the product failed AA. This is 4.83:1. */
/* RULE: t3 is not permitted on --al-srf3. */
/* srf3 is modal/rail chrome; it uses t2. */
/* ---------- ACCENT FILLS & EDGES ---------- */
--al-teal-fill: rgba(33,224,205,0.10);
--al-teal-dk-fill:rgba(20,184,166,0.10);
--al-gold-fill: rgba(232,184,106,0.12);
--al-coral-fill: rgba(255,126,102,0.12);
--al-violet-fill: rgba(180,153,224,0.12);
--al-teal-edge: rgba(33,224,205,0.25);
--al-gold-edge: rgba(232,184,106,0.25);
--al-coral-edge: rgba(255,126,102,0.25);
--al-violet-edge: rgba(180,153,224,0.25);
/* ---------- INK ON ACCENT (all verified >=5.5:1) ---------- */
--al-on-teal: #022A26; /* 9.26:1 */
--al-on-teal-dk: #04221F; /* 6.73:1 */
--al-on-gold: #4A3613; /* 6.29:1 */
--al-on-coral: #4D1E12; /* 5.58:1 */
--al-on-violet: #2C2148; /* 6.05:1 */
/* ---------- GEOMETRY — brand layer wins ----------
The app ran Tailwind v4's radius scale as shipped, which is a
framework default nobody chose. These are the brand's. */
--al-radius-tick: 3px;
--al-radius-control: 5px;
--al-radius-input: 6px;
--al-radius-card: 8px;
--al-radius-modal: 12px;
--al-radius-full: 999px;
/* ---------- ELEVATION — the narrow exception ----------
The brand rule is: no shadow, no blur, no gradient in product.
Depth is surface level plus border alpha. That rule is correct
for content and it stays.
It is wrong for one case, and the live app was right to break
it there: chrome that DOCKS OVER scrolling content — the action
rail, the command banner, a modal scrim, a sticky header — has
to separate from whatever slides underneath it, and a surface
step cannot do that when the thing underneath is also a surface.
So: elevation is permitted on docked chrome and nowhere else.
It is a token, not a judgement call. If a surface is not docked
over moving content, it gets --al-elev-0 and that is the end of
the conversation. */
--al-elev-0: none; /* content: cards, rows, panels, KPIs */
--al-elev-dock: 0 16px 40px -28px rgba(2,8,16,0.85); /* docked rails, sticky banners */
--al-elev-modal:0 28px 70px -40px rgba(2,8,16,0.92); /* modals, popovers, command palette */
--al-blur-dock: blur(12px) saturate(130%); /* @kind other */ /* ONLY with --al-elev-dock/-modal */
/* ---------- MOTION ---------- */
--al-ease: cubic-bezier(.22,.61,.36,1); /* @kind other */
--al-dur-fast: 120ms; /* @kind other */
--al-dur-base: 200ms; /* @kind other */
--al-dur-slow: 320ms; /* @kind other */
/* ---------- TYPE ----------
Self-hosted. Zero CDN on product surfaces — a CDN font request
from a tenant workstation is an egress a security reviewer will
ask about, and the answer should be "there isn't one". */
--al-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
--al-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--al-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
/* Product runs two weights only. Heavier weights bloom on the
dark substrate — this is a legibility rule, not a taste one. */
--al-fw-regular: 400; /* @kind font */
--al-fw-medium: 500; /* @kind font */
--al-fs-micro: 10px;
--al-fs-eyebrow: 11px;
--al-fs-label: 13px;
--al-fs-body: 14px;
--al-fs-subhead: 18px;
--al-fs-section: 26px;
--al-fs-headline:33px;
--al-fs-h1: 48px;
--al-fs-stat: 56px;
--al-fs-hero: 76px;
--al-ls-label: 0.18em;
--al-ls-tracked: 0.04em;
--al-ls-display: 0.02em;
--al-lh-body: 1.55; /* @kind font */
/* ---------- SPACING — 4px base ---------- */
--al-sp-1:4px; --al-sp-2:8px; --al-sp-3:12px; --al-sp-4:16px;
--al-sp-5:20px; --al-sp-6:24px; --al-sp-8:32px; --al-sp-10:40px;
--al-sp-12:48px; --al-sp-16:64px;
/* ---------- SHELL GEOMETRY ---------- */
--al-rail-w: 56px; /* icon nav rail */
--al-topbar-h: 50px;
--al-dock-w: 352px; /* action / detail rail */
/* ---------- SEMANTIC ALIASES ---------- */
--bg-page:var(--al-bg); --bg-void:var(--al-bg); --bg-section-alt:var(--al-srf);
--surface-card:var(--al-srf); --surface-raised:var(--al-srf2); --surface-panel:var(--al-srf3);
--border-hairline:var(--al-bf); --border-medium:var(--al-bm); --border-strong:var(--al-bs);
--border-rule:var(--al-structure);
--text-display:var(--al-t1); --text-heading:var(--al-t1); --text-body:var(--al-t2);
--text-bright:var(--al-t1); --text-muted:var(--al-t3); --text-label:var(--al-t3);
--accent-primary:var(--al-teal); --accent-primary-hover:var(--al-teal-dk);
--accent-link:var(--al-teal); --accent-signal:var(--al-teal);
--accent-premium:var(--al-gold); --accent-data:var(--al-teal);
--accent-partner:var(--al-violet); --on-accent:var(--al-on-teal);
--status-go:var(--al-teal); --status-watch:var(--al-gold); --status-alert:var(--al-coral);
--focus-ring:var(--al-teal);
color-scheme: dark;
font-family: var(--al-font-ui);
color: var(--al-t1);
background: var(--al-bg);
/* ---------- SHORT-NAME VOCABULARY — the bridge, retired ----------
The ALIDADE standalone system (brand book, website, logo stings,
specimen cards) was authored against short token names and needed
css/alidade-brand-bridge.css to run against --al-*. Those names are
defined here directly, so the bridge file can be deleted. Nothing
imports it after this. */
--bg:var(--al-bg); --srf:var(--al-srf); --srf2:var(--al-srf2); --srf3:var(--al-srf3);
--bf:var(--al-bf); --bm:var(--al-bm); --bs:var(--al-bs);
--t1:var(--al-t1); --t2:var(--al-t2); --t3:var(--al-t3);
--tl:var(--al-teal); --tl-dk:var(--al-teal-dk);
--tl-fill:var(--al-teal-fill); --tl-edge:var(--al-teal-edge);
--gd:var(--al-gold); --gd-fill:var(--al-gold-fill); --gd-edge:var(--al-gold-edge);
--cr:var(--al-coral); --cr-fill:var(--al-coral-fill); --cr-edge:var(--al-coral-edge);
--pr:var(--al-violet); --pr-fill:var(--al-violet-fill); --pr-edge:var(--al-violet-edge);
--r-card:var(--al-radius-card); --r-input:var(--al-radius-input); --r-modal:var(--al-radius-modal);
--font-display:var(--al-font-display);
--font-interface:var(--al-font-ui);
--font-sans:var(--al-font-ui);
--font-mono:var(--al-font-mono);
--font-serif:"IBM Plex Serif", Georgia, serif;
--hairline:var(--al-hairline);
--radius-card:var(--al-radius-card); --radius-input:var(--al-radius-input);
--radius-control:var(--al-radius-control); --radius-tick:var(--al-radius-tick);
--radius-full:var(--al-radius-full);
--fs-micro:var(--al-fs-micro); --fs-eyebrow:var(--al-fs-eyebrow);
--fs-label:var(--al-fs-label); --fs-body:var(--al-fs-body); --fs-stat:var(--al-fs-stat);
--ls-label:var(--al-ls-label); --ls-tracked:var(--al-ls-tracked); --ls-display:var(--al-ls-display);
--lh-body:var(--al-lh-body);
--fw-regular:var(--al-fw-regular); --fw-medium:var(--al-fw-medium);
--dur-fast:var(--al-dur-fast); --ease-standard:var(--al-ease);
--pad-pill:3px 8px; --pad-btn:8px 14px;
--rail-w:var(--al-rail-w);
}
/* The standalone ALIDADE system applies its tokens at :root with no
data-brand scope. Declared at :root here (the [data-brand] scopes above
override per brand) so this file works in both the standalone system
and the consolidated HYPATIUS one. */
:root{
--al-bg:#060D1B; --al-srf:#0E1B2E; --al-srf2:#15263D; --al-srf3:#1B2D45;
--al-teal:#21E0CD; --al-teal-dk:#14B8A6; --al-gold:#E8B86A;
--al-coral:#FF7E66; --al-violet:#B499E0;
--al-t1:#EFF5FE; --al-t2:#93A4BD; --al-t3:#7D92B5;
}
/* ============================================================
WIN SCORE — three bands, settled, matches the live application.
>=80 high / teal · >=60 mid / gold · else low / coral
Weights 20/20/15/15/10/10/10.
The four-band 85/70/60 split still present in the website
template's bearing-dial copy is RETIRED. A score in a deck must
equal the score in the app or the deck is a liability.
============================================================ */
[data-band="high"]{ --band:var(--al-teal); --band-ink:var(--al-on-teal); --band-fill:var(--al-teal-fill); }
[data-band="mid"] { --band:var(--al-gold); --band-ink:var(--al-on-gold); --band-fill:var(--al-gold-fill); }
[data-band="low"] { --band:var(--al-coral); --band-ink:var(--al-on-coral); --band-fill:var(--al-coral-fill); }
/* ============================================================
REDUCED MOTION — global, not per-component.
============================================================ */
@media (prefers-reduced-motion: reduce){
[data-brand="alidade"] *,
[data-brand="alidade"] *::before,
[data-brand="alidade"] *::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
}
/* ============================================================
FORCED COLORS — the accents carry meaning; in forced-colors
mode they are gone. The structural state marks in
alidade-product-v2.css are what survive. Nothing here is
permitted to depend on colour alone.
============================================================ */
@media (forced-colors: active){
[data-brand="alidade"] [data-band]{ forced-color-adjust:none; }
}
/* ============================================================
ALIDADE — product class layer v2
Requires tokens/alidade-v2.css.
Changes from v1 (css/alidade-product.css):
1. NAMESPACED. Every class is `al-`, as CRATON namespaces `cr-`.
v1 shipped `.crd`, `.pill`, `.field`, `.tab`, `.kpi`, `.topbar`
into a global scope. `.field` and `.tab` in particular will
collide with almost any host stylesheet. v1 names are kept as
aliases at the bottom of this file so nothing breaks on drop-in;
delete that block once call sites are migrated.
2. STATE IS NEVER COLOUR ALONE. v1 carried win bands on teal/gold/
coral with no structural backup — invisible to the ~8% of men
with a red-green deficiency, to forced-colors mode, and to a
greyscale print of a deck. Every stateful component now carries
a MARK and a WORD alongside the hue.
3. ACCESSIBILITY FIXES. The KPI label failed AA in the shipped
product (t3 on srf2 = 2.94:1). Fixed at the token level.
4. ELEVATION is tokenised and bounded to docked chrome.
============================================================ */
/* ============================================================
1 · MICROLABEL
============================================================ */
.al-lbl{
text-transform:uppercase;
letter-spacing:var(--al-ls-label);
font-size:var(--al-fs-eyebrow);
color:var(--al-t3);
font-weight:var(--al-fw-medium);
line-height:1.3;
}
/* t3 is not permitted on srf3. Rail and modal chrome step up to t2. */
.al-dock .al-lbl,
.al-modal .al-lbl{ color:var(--al-t2); }
/* ============================================================
2 · SURFACES
============================================================ */
.al-card{
background:var(--al-srf);
border:var(--al-hairline) solid var(--al-bf);
border-radius:var(--al-radius-card);
box-shadow:var(--al-elev-0);
}
.al-card--raised{ background:var(--al-srf2); border-color:var(--al-bm); }
/* The left-edge accent bar. Rule: no radius on the barred edge. */
.al-edge{
border-left:2px solid var(--al-teal);
border-top-left-radius:0;
border-bottom-left-radius:0;
}
.al-edge--gate { border-left-color:var(--al-gold); }
.al-edge--grant{ border-left-color:var(--al-violet); }
.al-edge--risk { border-left-color:var(--al-coral); }
/* DOCKED CHROME — the only place elevation is permitted. */
.al-dock{
background:color-mix(in srgb, var(--al-srf3) 88%, transparent);
border:var(--al-hairline) solid var(--al-bm);
box-shadow:var(--al-elev-dock);
backdrop-filter:var(--al-blur-dock);
-webkit-backdrop-filter:var(--al-blur-dock);
}
.al-modal{
background:var(--al-srf3);
border:var(--al-hairline) solid var(--al-bs);
border-radius:var(--al-radius-modal);
box-shadow:var(--al-elev-modal);
}
@media (prefers-reduced-transparency: reduce){
.al-dock{ background:var(--al-srf3); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
/* ============================================================
3 · THE STATE MARK — the core v2 addition
A 10px geometric glyph that encodes state structurally. Pair it
with the word. The colour is the third channel, never the first.
▲ high / pursue / go (up, teal)
● mid / consider / watch (hold, gold)
■ low / risk / gap (stop, coral)
◆ partner / consent (violet)
These are the Unicode geometric marks the brand already uses in
mono status contexts, so this is not a new vocabulary — it is
the existing one made load-bearing.
============================================================ */
.al-state{
display:inline-flex;
align-items:center;
gap:6px;
font-family:var(--al-font-mono);
font-size:var(--al-fs-eyebrow);
letter-spacing:var(--al-ls-tracked);
text-transform:uppercase;
color:var(--band, var(--al-t2));
white-space:nowrap;
}
.al-state::before{
content:"●";
font-size:9px;
line-height:1;
flex:none;
}
.al-state[data-band="high"]::before,
.al-state[data-state="pursue"]::before,
.al-state[data-state="go"]::before{ content:"▲"; }
.al-state[data-band="mid"]::before,
.al-state[data-state="consider"]::before,
.al-state[data-state="watch"]::before{ content:"●"; }
.al-state[data-band="low"]::before,
.al-state[data-state="risk"]::before,
.al-state[data-state="gap"]::before{ content:"■"; }
.al-state[data-state="partner"]::before,
.al-state[data-state="consent"]::before{ content:"◆"; color:var(--al-violet); }
.al-state[data-state="historical"]{ color:var(--al-t3); }
.al-state[data-state="historical"]::before{ content:"·"; }
/* Screen-reader text for anything where the mark is the only label. */
.al-sr{
position:absolute; width:1px; height:1px;
padding:0; margin:-1px; overflow:hidden;
clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* ============================================================
4 · PILLS
============================================================ */
.al-pill{
font-size:var(--al-fs-eyebrow);
padding:3px 8px;
border-radius:var(--al-radius-tick);
font-weight:var(--al-fw-medium);
letter-spacing:var(--al-ls-tracked);
display:inline-flex; align-items:center; gap:5px;
line-height:1.4;
border:var(--al-hairline) solid transparent;
}
.al-pill--teal { background:var(--al-teal-fill); color:var(--al-teal); border-color:var(--al-teal-edge); }
.al-pill--gold { background:var(--al-gold-fill); color:var(--al-gold); border-color:var(--al-gold-edge); }
.al-pill--coral { background:var(--al-coral-fill); color:var(--al-coral); border-color:var(--al-coral-edge); }
.al-pill--violet{ background:var(--al-violet-fill); color:var(--al-violet); border-color:var(--al-violet-edge); }
.al-pill--quiet { background:rgba(255,255,255,0.04);color:var(--al-t2); border-color:var(--al-bf); }
.al-pill--live::before{ content:"●"; font-size:8px; color:var(--al-teal); }
/* ============================================================
5 · BUTTONS
============================================================ */
.al-btn{
font-family:inherit; cursor:pointer;
border-radius:var(--al-radius-control);
letter-spacing:var(--al-ls-tracked);
font-size:var(--al-fs-label);
display:inline-flex; align-items:center; gap:6px;
border:var(--al-hairline) solid transparent;
transition:background var(--al-dur-fast) var(--al-ease),
border-color var(--al-dur-fast) var(--al-ease),
color var(--al-dur-fast) var(--al-ease);
}
.al-btn--primary{
background:var(--al-teal); color:var(--al-on-teal);
font-weight:var(--al-fw-medium); padding:8px 14px;
}
.al-btn--primary:hover { background:#3CE9D8; }
.al-btn--primary:active{ background:var(--al-teal-dk); color:var(--al-on-teal-dk); }
.al-btn--secondary{
background:transparent; border-color:var(--al-bm);
color:var(--al-t1); padding:7px 12px;
}
.al-btn--secondary:hover { border-color:var(--al-bs); background:rgba(255,255,255,0.03); }
.al-btn--secondary:active{ background:rgba(255,255,255,0.06); }
/* Gold = the human gate. An approval is never a teal primary. */
.al-btn--gate{
background:var(--al-gold-fill); border-color:var(--al-gold-edge);
color:var(--al-gold); padding:7px 12px; font-weight:var(--al-fw-medium);
}
.al-btn--gate:hover{ background:rgba(232,184,106,0.18); }
.al-btn:disabled{ opacity:.4; cursor:not-allowed; }
.al-btn:focus-visible{ outline:2px solid var(--al-teal); outline-offset:2px; }
/* ============================================================
6 · FORM FIELDS — sit on the page field, "below the surface"
============================================================ */
.al-input{
background:var(--al-bg);
border:var(--al-hairline) solid var(--al-bm);
border-radius:var(--al-radius-input);
padding:9px 12px;
font-size:var(--al-fs-label);
color:var(--al-t1);
font-family:inherit;
width:100%;
}
.al-input::placeholder{ color:var(--al-t3); }
.al-input:focus{ outline:2px solid var(--al-teal); outline-offset:2px; border-color:var(--al-teal-edge); }
.al-input[aria-invalid="true"]{ border-color:var(--al-coral-edge); }
.al-field{ display:grid; gap:6px; }
.al-field__error{
display:flex; align-items:center; gap:6px;
font-size:var(--al-fs-eyebrow); color:var(--al-coral);
}
.al-field__error::before{ content:"■"; font-size:8px; } /* mark, not colour alone */
/* ============================================================
7 · KPI — the AA fix lives here
============================================================ */
.al-kpi{
background:var(--al-srf2);
border:var(--al-hairline) solid var(--al-bm);
padding:14px;
border-radius:var(--al-radius-input);
box-shadow:var(--al-elev-0);
}
.al-kpi__label{
text-transform:uppercase; letter-spacing:var(--al-ls-label);
font-size:var(--al-fs-micro);
color:var(--al-t3); /* 4.83:1 on srf2 — was 2.94:1 */
font-weight:var(--al-fw-medium);
}
.al-kpi__value{
font-size:26px; font-weight:var(--al-fw-medium);
margin-top:5px; color:var(--al-t1);
font-variant-numeric:tabular-nums;
}
.al-kpi__meta{ font-size:var(--al-fs-micro); color:var(--al-t2); margin-top:3px; }
.al-kpi--urgent{ background:var(--al-srf); border-color:var(--al-coral-edge); }
.al-kpi--urgent .al-kpi__value{ color:var(--al-coral); }
/* ============================================================
8 · WIN SCORE — figure + band + mark + word
============================================================ */
.al-score{ display:flex; flex-direction:column; align-items:center; min-width:56px; gap:3px; }
.al-score__num{
font-size:24px; font-weight:var(--al-fw-medium); line-height:1;
font-variant-numeric:tabular-nums;
color:var(--band, var(--al-t1));
}
.al-score__band{
font-family:var(--al-font-mono); font-size:9px;
letter-spacing:.14em; text-transform:uppercase;
color:var(--band, var(--al-t2));
display:flex; align-items:center; gap:4px;
}
.al-score__band::before{ content:"●"; font-size:7px; }
[data-band="high"] .al-score__band::before{ content:"▲"; }
[data-band="low"] .al-score__band::before{ content:"■"; }
.al-score--was .al-score__num{ color:var(--al-t2); font-size:19px; }
/* The seven-factor bar. Weights 20/20/15/15/10/10/10. */
.al-factors{ display:flex; gap:2px; width:100%; }
.al-factors__seg{ height:4px; border-radius:1px; background:var(--al-bm); position:relative; overflow:hidden; }
.al-factors__seg > i{ position:absolute; inset:0 auto 0 0; background:var(--band, var(--al-teal)); display:block; }
/* ============================================================
9 · PURSUIT ROW
============================================================ */
.al-row{
display:grid; grid-template-columns:auto 1fr auto;
gap:16px; align-items:center;
padding:13px 16px;
background:var(--al-srf);
border:var(--al-hairline) solid var(--al-bf);
border-radius:0 var(--al-radius-card) var(--al-radius-card) 0;
border-left:2px solid var(--al-structure);
transition:background var(--al-dur-fast) var(--al-ease), border-color var(--al-dur-fast) var(--al-ease);
}
.al-row[data-state="pursue"] { border-left-color:var(--al-teal); }
.al-row[data-state="consider"] { border-left-color:var(--al-gold); }
.al-row[data-state="risk"] { border-left-color:var(--al-coral); }
.al-row[data-state="historical"]{ border-left-color:var(--al-structure); opacity:.62; }
.al-row:hover{ background:var(--al-srf2); }
.al-row:focus-within{ border-color:var(--al-bs); }
/* Bracket-in selection, carried over from the live HUD. It is the
one live-app *pattern* worth keeping: it marks the selection
structurally rather than flooding the row with colour. */
.al-row[aria-selected="true"]{ position:relative; background:var(--al-teal-dk-fill); }
.al-row[aria-selected="true"]::before,
.al-row[aria-selected="true"]::after{
content:""; position:absolute; width:9px; height:9px; border:2px solid var(--al-teal);
}
.al-row[aria-selected="true"]::before{ top:-1px; left:1px; border-right:0; border-bottom:0; }
.al-row[aria-selected="true"]::after { bottom:-1px; right:-1px; border-left:0; border-top:0; }
/* ============================================================
10 · APPROVAL GATE — gold throughout. The agent proposes;
a person disposes. Gold is the colour of that moment.
============================================================ */
.al-gate{
background:var(--al-srf2);
border:var(--al-hairline) solid var(--al-gold-edge);
border-left:2px solid var(--al-gold);
border-radius:0 7px 7px 0;
padding:13px 15px;
}
.al-gate__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.al-gate__body{ font-size:var(--al-fs-label); color:var(--al-t2); margin-bottom:11px; line-height:var(--al-lh-body); }
.al-gate__actions{ display:flex; align-items:center; gap:10px; }
/* ============================================================
11 · WATERMARK BLOCK — violet. The moat, made visible.
============================================================ */
.al-watermark{
border:var(--al-hairline) solid var(--al-violet-edge);
border-radius:var(--al-radius-input);
padding:11px 13px;
background:rgba(180,153,224,0.05);
}
.al-watermark__tag{
font-size:var(--al-fs-micro); color:var(--al-violet);
letter-spacing:.1em; text-transform:uppercase;
font-weight:var(--al-fw-medium);
display:flex; align-items:center; gap:5px; margin-bottom:6px;
}
.al-watermark__tag::before{ content:"◆"; font-size:8px; }
/* ============================================================
12 · THE LEDGER ROW — provenance on every agent surface.
"AI-assisted analysis. Every operator commit is recorded."
============================================================ */
.al-ledger{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
font-family:var(--al-font-mono);
font-size:var(--al-fs-micro);
color:var(--al-t2);
padding:7px 12px;
border-top:var(--al-hairline) solid var(--al-bf);
}
.al-ledger__tool{ color:var(--al-teal); }
.al-ledger__time{ color:var(--al-t3); font-variant-numeric:tabular-nums; }
.al-ledger__mode{
border:var(--al-hairline) solid var(--al-bm);
border-radius:var(--al-radius-tick);
padding:1px 6px; letter-spacing:.12em; text-transform:uppercase;
}
.al-ledger__mode[data-mode="auto"]{ color:var(--al-teal); border-color:var(--al-teal-edge); }
.al-ledger__mode[data-mode="gate"]{ color:var(--al-gold); border-color:var(--al-gold-edge); }
/* ============================================================
13 · TABS, RAIL, TOPBAR
============================================================ */
.al-tabs{
display:inline-flex; align-items:center; gap:4px; padding:4px;
background:var(--al-srf); border:var(--al-hairline) solid var(--al-bf);
border-radius:7px;
}
.al-tab{
font-size:var(--al-fs-eyebrow); padding:7px 13px; border-radius:5px;
color:var(--al-t2); cursor:pointer; letter-spacing:var(--al-ls-tracked);
border:var(--al-hairline) solid transparent; background:none; font-family:inherit;
}
.al-tab:hover{ color:var(--al-t1); }
.al-tab[aria-selected="true"]{ background:var(--al-srf2); color:var(--al-t1); border-color:var(--al-bm); }
.al-tab:focus-visible{ outline:2px solid var(--al-teal); outline-offset:2px; }
.al-topbar{
display:flex; align-items:center; gap:14px;
padding:0 16px; height:var(--al-topbar-h);
border-bottom:var(--al-hairline) solid var(--al-bf);
background:var(--al-srf);
}
.al-rail{
width:var(--al-rail-w); padding:10px 0;
display:flex; flex-direction:column; align-items:center; gap:5px;
background:var(--al-srf); border-right:var(--al-hairline) solid var(--al-bf);
}
.al-rail__item{
width:34px; height:34px; display:flex; align-items:center; justify-content:center;
border-radius:6px; color:var(--al-t2); cursor:pointer;
border:var(--al-hairline) solid transparent; background:none;
}
.al-rail__item:hover{ background:rgba(255,255,255,0.04); color:var(--al-t1); }
.al-rail__item[aria-current="page"]{
background:var(--al-teal-fill); color:var(--al-teal);
border-color:var(--al-teal-edge);
box-shadow:inset 2px 0 0 var(--al-teal); /* structural, not colour alone */
}
.al-rail__item:focus-visible{ outline:2px solid var(--al-teal); outline-offset:2px; }
/* ============================================================
14 · THE BEARING DIAL — ALIDADE's signature data-viz.
A needle on an arc. The needle IS the recommendation.
============================================================ */
.al-dial{ display:block; }
.al-dial__track { fill:none; stroke:var(--al-bm); stroke-width:6; stroke-linecap:round; }
.al-dial__range { fill:none; stroke:var(--band, var(--al-teal)); stroke-width:6; stroke-linecap:round; opacity:.9; }
.al-dial__needle{ stroke:var(--al-t1); stroke-width:2; stroke-linecap:round; }
.al-dial__hub { fill:var(--al-t1); }
.al-dial__tick { stroke:var(--al-structure); stroke-width:1; }
/* ============================================================
15 · CLAIM DISCIPLINE — copy components, not chrome.
Every external figure carries a proof line or ships bracketed.
============================================================ */
.al-proof{
font-family:var(--al-font-mono); font-size:var(--al-fs-micro);
letter-spacing:.06em; color:var(--al-t3);
margin-top:6px; display:block;
}
.al-pending{
font-family:var(--al-font-mono); font-size:inherit;
color:var(--al-gold); border:var(--al-hairline) dashed var(--al-gold-edge);
border-radius:var(--al-radius-tick); padding:0 6px;
}
.al-stamp{
font-family:var(--al-font-mono); font-size:12px; font-weight:var(--al-fw-medium);
letter-spacing:.14em; text-transform:uppercase; color:var(--al-t3);
}
/* ============================================================
16 · FOCUS — visible everywhere, no exceptions.
============================================================ */
[data-brand="alidade"] :focus-visible{
outline:2px solid var(--al-teal);
outline-offset:2px;
border-radius:2px;
}
.al-skip{
position:absolute; left:8px; top:-48px; z-index:999;
background:var(--al-teal); color:var(--al-on-teal);
padding:10px 16px; border-radius:var(--al-radius-control);
font-weight:var(--al-fw-medium); text-decoration:none;
transition:top var(--al-dur-fast) var(--al-ease);
}
.al-skip:focus{ top:8px; }
/* ============================================================
17 · v1 COMPATIBILITY ALIASES
Drop-in safety so existing kits keep rendering. Delete this
block once call sites move to the `al-` namespace.
============================================================ */
.crd{ background:var(--al-srf); border:var(--al-hairline) solid var(--al-bf); border-radius:var(--al-radius-card); }
.crd-raised{ background:var(--al-srf2); border-color:var(--al-bm); }
.lbl{ text-transform:uppercase; letter-spacing:var(--al-ls-label); font-size:var(--al-fs-eyebrow); color:var(--al-t3); font-weight:var(--al-fw-medium); }
.kpi{ background:var(--al-srf2); padding:14px; border-radius:var(--al-radius-input); }
.kpi-label{ text-transform:uppercase; letter-spacing:var(--al-ls-label); font-size:10px; color:var(--al-t3); font-weight:var(--al-fw-medium); }
.kpi-value{ font-size:26px; font-weight:var(--al-fw-medium); margin-top:5px; color:var(--al-t1); font-variant-numeric:tabular-nums; }
.btn-p{ background:var(--al-teal); border:none; color:var(--al-on-teal); font-weight:var(--al-fw-medium); padding:8px 14px; border-radius:var(--al-radius-control); }
.btn-s{ background:transparent; border:var(--al-hairline) solid var(--al-bm); color:var(--al-t1); padding:7px 12px; border-radius:var(--al-radius-control); }
.btn-g{ background:var(--al-gold-fill); border:var(--al-hairline) solid var(--al-gold-edge); color:var(--al-gold); padding:7px 12px; border-radius:var(--al-radius-control); }
/* ============================================================
CRATON · marketing site · v2 · 16 Sep 2026
Consumes the design-system tokens through data-brand="craton".
Defines NO palette of its own. Shared motifs live in
css/craton-product.css — the same file the platform imports,
so the state mark and the proof chip are one implementation.
Theme: committed to Bedrock dark. The hero art direction is
navy-black #060B17 with a bronze rim-light, and the whole
positioning is "the category is blue, we are gunmetal", so
this surface does not follow the viewer's light preference.
data-theme="dark" is stamped on ; the product is where
both themes live.
Every class is cr- prefixed. Unprefixed classes belong to the
design system: site.css v1 collided on .btn .hero .lede .mono
.on .pill .stamp .us and .css.
============================================================ */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
*,*::before,*::after{box-sizing:border-box}
body{
margin:0;background:var(--bg-void);color:var(--text-body);
font-family:var(--t-ui);font-size:17px;font-weight:500;line-height:1.5;
-webkit-font-smoothing:antialiased;
}
a{color:var(--accent-signal);text-decoration:none}
a:hover{color:var(--text-bright)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:1px}
img{max-width:100%}
/* ---- type ---- */
.cr-disp{
font-family:var(--t-display);font-weight:800;line-height:.92;
color:var(--text-display);letter-spacing:.005em;text-wrap:balance;
}
.cr-mono{font-family:var(--t-mono)}
.cr-eb{
font-family:var(--t-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:var(--accent-eyebrow);display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s5);
}
.cr-eb::before{content:"";width:24px;height:1px;background:currentColor;flex:none}
.cr-eb--settled{color:var(--accent-signal)}
.cr-lede{font-size:21px;color:var(--text-body);max-width:56ch;margin:0;text-wrap:pretty}
.cr-wrap{max-width:1240px;margin:0 auto;padding-inline:var(--s7)}
/* ---- nav ---- */
.cr-nav{
position:sticky;top:0;z-index:20;
background:color-mix(in srgb,var(--bg-void) 88%,transparent);
backdrop-filter:blur(12px);border-bottom:1px solid var(--border-hairline);
}
.cr-nav .cr-wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:var(--s5)}
.cr-nav__lk{display:flex;align-items:center;gap:var(--s3)}
.cr-nav__lk img{height:28px}
.cr-nav__lk b{font-family:var(--t-display);font-weight:800;font-size:24px;letter-spacing:.07em;color:var(--text-display)}
.cr-nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-weight:600;font-size:15px}
.cr-nav ul a{color:var(--text-body)}
.cr-nav ul a:hover{color:var(--text-bright)}
/* ---- buttons ---- */
.cr-btn{
display:inline-block;white-space:nowrap;background:var(--accent-primary);
color:var(--accent-on-primary);border:1px solid var(--accent-primary);
padding:12px 20px;border-radius:2px;font-family:var(--t-mono);font-size:11px;
letter-spacing:.16em;text-transform:uppercase;font-weight:500;transition:filter .15s var(--ease);
}
.cr-btn:hover{filter:brightness(1.1);color:var(--accent-on-primary)}
.cr-btn--ghost{background:transparent;color:var(--text-body);border-color:var(--border-strong)}
.cr-btn--ghost:hover{border-color:var(--accent-signal);color:var(--text-bright);filter:none}
/* ---- sections ---- */
section{padding:120px 0;border-bottom:1px solid var(--border-hairline);position:relative}
section h2.cr-disp{font-size:clamp(44px,6vw,88px);margin:0 0 var(--s5)}
/* ---- hero ---- */
.cr-hero{
position:relative;min-height:88vh;display:flex;align-items:flex-end;
border-bottom:1px solid var(--border-hairline);overflow:hidden;
}
.cr-hero .cr-hero__img{position:absolute;inset:0}
/* Full-bleed, not inset to the right half. A 16:9 plate cropped into a
792px-square box loses its subject: the core sample is composed at 70%
of the frame and `cover` threw it off the edge. Full width keeps the
crop near 1:1 with the source, and the scrim below — not a container —
is what clears the left side for the headline. */
.cr-hero .cr-hero__img image-slot{inset:0}
.cr-hero .cr-hero__img::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,var(--bg-void) 0 42%,color-mix(in srgb,var(--bg-void) 78%,transparent) 58%,transparent 80%);
}
.cr-hero .cr-wrap{position:relative;padding-block:120px 140px;width:100%}
.cr-hero h1.cr-disp{font-size:clamp(56px,10vw,168px);margin:0 0 28px;max-width:12ch}
.cr-hero .cr-lede{font-size:22px;max-width:50ch;margin:0 0 var(--s6)}
.cr-hero__cta{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;max-width:52ch}
/* Own row, inside the cleared half. Inline it ran to 67% of the viewport
and sat on the plate's lit subject, where a mono line at 11px has no
contrast to spare. */
.cr-hero__stamp{
flex-basis:100%;margin-top:var(--s4);
font-family:var(--t-mono);font-size:11px;letter-spacing:.14em;color:var(--text-muted);
}
/* ---- proof strip: each claim carries its citation ---- */
.cr-strip{background:var(--bg-page);border-bottom:1px solid var(--border-hairline);padding:var(--s5) 0}
.cr-strip .cr-wrap{
display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s5) var(--s6);
}
.cr-strip__fig{
font-family:var(--t-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--text-muted);
}
.cr-strip__fig b{color:var(--accent-signal);font-weight:500}
.cr-strip .cr-proof{margin-top:6px;letter-spacing:.04em}
/* ---- pillars ---- */
.cr-pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:var(--s8);background:var(--border-hairline)}
.cr-pillars__c{background:var(--bg-page);padding:var(--s6) var(--s6) var(--s7);position:relative;display:flex;flex-direction:column}
.cr-pillars__c .cr-disp{font-size:56px;margin:0 0 14px}
.cr-pillars__c p{margin:0 0 var(--s5);color:var(--text-body);font-size:16px}
.cr-pillars__c .cr-proof{margin-top:auto;margin-bottom:0}
.cr-pillars__c .cr-proof + .cr-pillars__go{margin-top:var(--s4)}
.cr-pillars__n{font-family:var(--t-mono);font-size:10px;letter-spacing:.18em;color:var(--text-muted);margin-bottom:22px;text-transform:uppercase}
.cr-pillars__bar{position:absolute;left:0;top:0;right:0;height:3px;background:var(--accent-primary)}
.cr-pillars__go{
margin-top:auto;font-family:var(--t-mono);font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--accent-signal);display:inline-flex;align-items:center;gap:var(--s2);
}
.cr-pillars__go:hover{color:var(--text-bright)}
.cr-pillars__go::after{content:"→"}
/* ---- voice ---- */
.cr-voice{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:end}
.cr-voice .cr-disp{font-size:clamp(44px,7vw,112px)}
.cr-voice p{font-size:19px;max-width:44ch}
/* ---- the record ---- */
.cr-rec{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--s8);align-items:center}
.cr-rec .cr-rcpt{font-size:13.5px;line-height:1.95;background:var(--bg-page);padding:var(--s5) var(--s6);border-color:var(--border-strong)}
.cr-rec .cr-rcpt b{min-width:104px}
/* the live thread: the ledger accumulating, as a picture */
.cr-ledger{
display:grid;grid-template-columns:var(--s7) minmax(0,1fr);gap:var(--s5);
background:var(--bg-page);border:1px solid var(--border-hairline);border-radius:2px;
padding:var(--s5) var(--s6);margin-top:var(--s4);
}
.cr-ledger__thread{min-height:190px;justify-content:flex-start;padding-top:var(--s1)}
.cr-ledger__rows{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.cr-ledger__r{
display:grid;grid-template-columns:62px minmax(0,1fr);gap:var(--s3);
font-family:var(--t-mono);font-size:11.5px;line-height:1.55;
opacity:0;animation:cr-rowin .5s var(--ease) forwards;
}
.cr-ledger__t{color:var(--text-muted)}
.cr-ledger__op{color:var(--accent-eyebrow);font-weight:500}
.cr-ledger__d{display:block;color:var(--text-body)}
@keyframes cr-rowin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
.cr-ledger__r{opacity:1;animation:none}
}
.cr-ledger__seq{
grid-column:1 / -1;border-top:1px solid var(--border-hairline);padding-top:var(--s3);margin-top:var(--s2);
font-family:var(--t-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--text-muted);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
}
/* ---- binder: the band is the row ---- */
.cr-binder{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s7);margin-top:var(--s7)}
.cr-binder .cr-row{font-size:15.5px;padding:11px var(--s2)}
.cr-binder .cr-row:nth-last-child(-n+1){border-bottom:0}
.cr-legend{
display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s5);
padding-top:var(--s4);border-top:1px solid var(--border-hairline);
}
/* ---- compare ---- */
.cr-table-wrap{overflow-x:auto;max-width:100%;min-width:0;margin-top:var(--s7)}
.cr-table{width:100%;border-collapse:collapse;font-size:16px;min-width:720px}
.cr-table th{
font-family:var(--t-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--text-muted);text-align:left;padding:var(--s3) var(--s4);
border-bottom:1px solid var(--border-strong);font-weight:500;
}
.cr-table td{padding:var(--s4);border-bottom:1px solid var(--border-hairline);vertical-align:top}
.cr-table td:first-child{color:var(--text-display);font-weight:600}
.cr-table tr:last-child td{border-bottom:0}
.cr-table__us td{background:color-mix(in srgb,var(--accent-primary) 8%,transparent)}
.cr-table__us td:first-child{color:var(--accent-primary-hover)}
.cr-src{font-family:var(--t-mono);font-size:11px;color:var(--text-muted);margin-top:var(--s4);line-height:1.6}
/* ---- suite ---- */
.cr-suite{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--border-hairline);margin-top:var(--s7)}
.cr-suite a{background:var(--bg-page);padding:var(--s6);color:var(--text-body);display:block}
.cr-suite a:hover{background:var(--surface-card)}
.cr-suite .cr-disp{font-size:40px;letter-spacing:.06em;margin:0 0 10px}
.cr-suite__n{font-family:var(--t-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--s4)}
/* ---- cta ---- */
.cr-cta{background:var(--bg-page);text-align:center;overflow:hidden}
.cr-cta .cr-disp{font-size:clamp(44px,8vw,128px);margin:0 auto var(--s6);max-width:14ch}
.cr-cta .cr-eb{justify-content:center}
.cr-cta .cr-lede{margin:0 auto var(--s6)}
/* H7 instruments sits behind the CTA, held back far enough that the
display face keeps its contrast without a scrim doing the work. */
/* Overscanned so the proxy's own "photography pending" footer crops out:
at backdrop opacity it reads as a rendering artefact rather than as the
honest marker it is. The hero and the strata band still carry theirs,
and the copy note below records that this slot is a proxy too. */
.cr-cta .cr-cta__img{position:absolute;inset:-9% -4%;opacity:.72}
.cr-cta .cr-cta__img::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 58% 70% at 50% 52%,var(--bg-page) 0 26%,color-mix(in srgb,var(--bg-page) 80%,transparent) 55%,transparent 95%);
}
.cr-cta .cr-wrap{position:relative}
/* ---- full-bleed strata band: a divider that is also the motif ---- */
.cr-band-img{
position:relative;height:clamp(160px,22vw,300px);overflow:hidden;
border-bottom:1px solid var(--border-hairline);
}
.cr-band-img__cap{
position:absolute;left:0;right:0;bottom:0;padding:var(--s4) 0;
background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg-void) 88%,transparent) 55%);
}
.cr-band-img__cap .cr-wrap{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.cr-band-img__cap .cr-proof{margin:0}
/* ---- footer ---- */
footer{padding:var(--s7) 0 var(--s7);font-size:14px;color:var(--text-muted)}
footer .cr-wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s7)}
footer b{
display:block;font-family:var(--t-mono);font-size:10px;letter-spacing:.18em;
text-transform:uppercase;color:var(--accent-signal);margin-bottom:var(--s3);font-weight:500;
}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.cr-stamp{
font-family:var(--t-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
line-height:1.8;margin-top:18px;
}
/* ============================================================
PILLAR PAGES · /hours /codes /rates /binder /record
/compare /walkthrough
Generated by make-pages.js from one shell. Everything below
is shared by all seven; nothing here defines a colour.
============================================================ */
/* ---- page header ---- */
.cr-ph{
position:relative;padding:var(--s8) 0 var(--s7);
border-bottom:1px solid var(--border-hairline);overflow:hidden;
}
.cr-ph .cr-wrap{position:relative;padding-block:var(--s7) var(--s8)}
.cr-ph h1.cr-disp{font-size:clamp(48px,7.5vw,124px);margin:0 0 var(--s5);max-width:15ch}
.cr-ph .cr-lede{max-width:58ch;margin-bottom:var(--s5)}
.cr-ph .cr-proof{margin:0}
/* with a plate behind it, the text column needs the same scrim contract
as the home hero: solid through the copy, clear over the subject */
.cr-ph--img{min-height:62vh;display:flex;align-items:flex-end}
/* Scoped to .cr-ph on purpose. Bare .cr-ph__img (0,1,0) loses the
specificity tie to .cr-slot{position:relative} further down this file,
which collapses the plate to zero height and renders nothing. Same trap
that ate the home hero backdrop; same fix. */
.cr-ph .cr-ph__img{position:absolute;inset:0}
.cr-ph .cr-ph__img image-slot{position:absolute;inset:0}
/* The scrim belongs to the plate, not to the header. As ::after on .cr-ph
it is the header's last child and paints over .cr-wrap, which greyed the
headline to near-invisible. On the plate it paints over the plate only —
the same contract the home hero has always used. */
.cr-ph .cr-ph__img::after{
content:"";position:absolute;inset:0;pointer-events:none;
/* No z-index. .cr-ph__img creates no stacking context, so a z-index here
would lift the scrim into the header's context and paint it over
.cr-wrap — which is exactly how the headline went grey. DOM order is
already correct: plate, scrim, then the copy. */
background:linear-gradient(90deg,var(--bg-void) 0 44%,color-mix(in srgb,var(--bg-void) 80%,transparent) 60%,transparent 82%);
}
/* ---- breadcrumb ---- */
.cr-crumb{
font-family:var(--t-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--text-muted);display:flex;gap:var(--s3);align-items:center;margin-bottom:var(--s5);
}
.cr-crumb a{color:var(--text-muted)}
.cr-crumb a:hover{color:var(--text-bright)}
.cr-crumb span[aria-hidden]{color:var(--border-strong)}
.cr-crumb [aria-current]{color:var(--accent-eyebrow)}
/* ---- prose rhythm: the generated body is a stack of h2 + blocks ---- */
.cr-prose > h2.cr-disp{font-size:clamp(36px,4.6vw,66px);margin:var(--s8) 0 var(--s5)}
.cr-prose > h2.cr-disp:first-child{margin-top:0}
.cr-prose > .cr-lede{margin-bottom:var(--s5)}
.cr-prose > .cr-binder,.cr-prose > .cr-rcpt,.cr-prose > .cr-ledger{margin-top:var(--s5)}
.cr-prose > .cr-legend{margin-top:var(--s4)}
.cr-prose > .cr-proof--lg{margin-top:var(--s5)}
/* ---- spec grid: four claims, each with the record behind it ---- */
.cr-spec{
display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:2px;
background:var(--border-hairline);margin:var(--s7) 0 0;
}
.cr-spec__c{background:var(--bg-page);padding:var(--s6);display:flex;flex-direction:column;position:relative}
.cr-spec__c::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--accent-primary)}
.cr-spec__c .cr-disp{font-size:34px;margin:0 0 12px;line-height:1}
.cr-spec__c p{margin:0 0 var(--s5);font-size:16px;color:var(--text-body)}
.cr-spec__c .cr-proof{margin-top:auto;margin-bottom:0}
.cr-spec__n{
font-family:var(--t-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
color:var(--text-muted);margin-bottom:20px;
}
/* ---- binder list on a pillar page ---- */
.cr-binder--full{column-count:2;column-gap:var(--s7)}
.cr-binder--full .cr-row{break-inside:avoid}
/* ---- FAQ ----
rather than a scripted accordion: it opens with JS off, it is
in the tab order for free, and Ctrl+F finds the closed answers. */
.cr-faq{margin-top:var(--s6);border-top:1px solid var(--border-hairline)}
.cr-faq__i{border-bottom:1px solid var(--border-hairline)}
.cr-faq__i summary{
cursor:pointer;list-style:none;padding:var(--s5) 0;
font-family:var(--t-display);font-weight:800;font-size:23px;letter-spacing:.01em;
color:var(--text-display);display:flex;align-items:baseline;gap:var(--s4);
}
.cr-faq__i summary::-webkit-details-marker{display:none}
.cr-faq__i summary::before{
content:"+";font-family:var(--t-mono);font-size:15px;font-weight:400;
color:var(--accent-eyebrow);flex:none;width:14px;
}
.cr-faq__i[open] summary::before{content:"–"}
.cr-faq__i summary:hover{color:var(--text-bright)}
.cr-faq__a{padding:0 0 var(--s5) calc(14px + var(--s4));max-width:70ch;color:var(--text-body)}
.cr-faq__a b{color:var(--accent-primary);font-weight:600}
/* ---- inline CTA block inside a pillar body ---- */
.cr-cta--inline{
background:var(--bg-page);border:1px solid var(--border-hairline);
padding:var(--s7) var(--s6);margin-top:var(--s8);text-align:center;border-radius:2px;
}
.cr-cta--inline .cr-eb{justify-content:center}
.cr-cta--inline .cr-disp{font-size:clamp(34px,5vw,64px);margin:0 0 var(--s4)}
.cr-cta--inline .cr-lede{margin:0 auto var(--s5)}
.cr-cta--inline .cr-proof{justify-content:center;margin-top:var(--s5)}
@media (max-width:860px){
.cr-binder--full{column-count:1}
.cr-ph--img{min-height:auto}
.cr-ph .cr-ph__img::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg-void) 55%,transparent),var(--bg-void) 62%)}
}
/* ---- the monogram triad (/record) ----
The three arc colours are named tokens rather than inlined hexes, so the
diagram re-themes with everything else and the light variant does not
have to be maintained twice. */
[data-brand="craton"]{
--cr-arc-1:var(--text-display);
--cr-arc-2:var(--accent-primary);
--cr-arc-3:var(--text-muted);
}
.cr-triad{
display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s8);
align-items:center;margin:var(--s8) 0 0;
padding:var(--s7);background:var(--bg-page);
border:1px solid var(--border-hairline);border-radius:2px;
}
.cr-triad__m{display:grid;place-items:center}
.cr-triad__l > h2.cr-disp{font-size:clamp(32px,3.8vw,54px);margin:0 0 var(--s4)}
.cr-triad__l > .cr-lede{margin-bottom:var(--s5)}
.cr-binder--triad{grid-template-columns:1fr;margin-top:0}
.cr-binder--triad .cr-row{padding:10px var(--s2)}
/* No state mark in this diagram. The rows name arc colours, not states, and
a cr-sm here would assert a "settled" that is not being claimed — the
design law is that a state mark never appears without its own word. */
.cr-row--arc{grid-template-columns:6px 28px minmax(0,1fr) auto}
.cr-arc-name{
font-family:var(--t-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
color:var(--text-muted);white-space:nowrap;
}
@media (max-width:860px){
.cr-triad{grid-template-columns:1fr;gap:var(--s5);padding:var(--s5)}
.cr-triad__m{justify-items:start}
}
/* ---- skip link ----
Off-canvas rather than display:none, so it is in the tab order from the
first Tab press. Uses the accent pair, which is contrast-checked. */
.cr-skip{
position:absolute;left:var(--s4);top:-64px;z-index:60;
background:var(--accent-primary);color:var(--accent-on-primary);
padding:10px var(--s4);border-radius:2px;font-family:var(--t-mono);
font-size:11px;letter-spacing:.14em;text-transform:uppercase;
transition:top .15s var(--ease);
}
.cr-skip:focus{top:var(--s4);outline:2px solid var(--accent-signal);outline-offset:2px}
/* ---- image slots ---- */
.cr-slot{position:relative;background:var(--bg-void);overflow:hidden}
.cr-slot .cr-fill{position:absolute;inset:0}
.cr-slot image-slot{position:absolute;inset:0}
/* ---- annotation rail (design-review chrome, not product) ---- */
.cr-ann{position:fixed;right:var(--s5);bottom:var(--s5);z-index:30;display:flex;flex-direction:column;gap:var(--s2)}
.cr-ann button{
white-space:nowrap;background:var(--surface-card);border:1px solid var(--border-strong);
color:var(--text-body);padding:8px 12px;border-radius:2px;font-family:var(--t-mono);
font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
}
.cr-ann button[aria-pressed="true"]{background:var(--accent-signal);color:var(--bg-void);border-color:var(--accent-signal)}
.cr-note{
display:none;position:absolute;background:var(--accent-signal);color:var(--bg-void);
font-family:var(--t-mono);font-size:10.5px;letter-spacing:.06em;line-height:1.5;
padding:10px 12px;max-width:280px;z-index:10;border-radius:2px;
}
.cr-note b{display:block;letter-spacing:.16em;text-transform:uppercase;font-size:9px;margin-bottom:4px;color:inherit}
body.cr-notes .cr-note{display:block}
/* ---- responsive ---- */
@media (max-width:1100px){
.cr-pillars{grid-template-columns:1fr 1fr}
.cr-nav ul{display:none}
section{padding:88px 0}
.cr-wrap{padding-inline:var(--s5)}
}
@media (max-width:900px){
.cr-suite{grid-template-columns:1fr}
.cr-voice,.cr-rec,.cr-binder{grid-template-columns:1fr;gap:var(--s6)}
footer .cr-wrap{grid-template-columns:1fr 1fr}
.cr-hero{min-height:auto}
.cr-hero .cr-wrap{padding-block:88px 88px}
/* the core-sample column sits behind the copy at this width, so the scrim
runs the full width instead of clearing the right third */
.cr-hero .cr-hero__img::after{
background:linear-gradient(90deg,var(--bg-void) 0 55%,color-mix(in srgb,var(--bg-void) 88%,transparent) 100%);
}
}
@media (max-width:560px){
.cr-wrap{padding-inline:var(--s4)}
.cr-pillars{grid-template-columns:1fr}
footer .cr-wrap{grid-template-columns:1fr}
section{padding:64px 0}
.cr-ledger{grid-template-columns:var(--s6) minmax(0,1fr);padding:var(--s4)}
.cr-binder .cr-row{grid-template-columns:6px 24px 14px minmax(0,1fr);row-gap:var(--s1)}
.cr-binder .cr-row .cr-state{grid-column:3 / -1}
.cr-ann{right:var(--s4);bottom:var(--s4)}
}
/* 320px phones: the nav button drops "Request a" so it fits beside the wordmark */
@media (max-width:359px){
.cr-nav .cr-btn{padding:10px 12px}
.cr-btn__more{display:none}
}