/* ==========================================================================
JurisAgent — site.css
Design system: "Editorial Authority"
Paper + ink + oxblood, set like a legal broadsheet.
Contents
01 Tokens
02 Base & reset
03 Utilities
04 Type
05 Buttons & links
06 Header & navigation
07 Footer & sticky CTA
08 Layout: sections, § labels, grids
09 Signature motifs: seal, kicker, footnotes
10 Page hero (sub-pages) & breadcrumb
11 Content components: cards, exhibits, steps, ledger, tiers, FAQ, memo
12 Product-UI mockup primitives
13 Homepage hero
14 Homepage sections (practice tabs, loop, deadlines, security)
15 Forms
16 Prose (legal pages)
17 Final CTA band
18 Motion (progressive enhancement)
19 Responsive
========================================================================== */
/* ==========================================================================
01 Tokens
--------------------------------------------------------------------------
COLOR SEMANTICS (important — keep consistent across pages)
--accent (oxblood) = the attorney / approval layer + brand emphasis
(H2 emphasis, § numbers, seal, Approve buttons).
--agent (ink-blue) = agent activity (agent monograms, running states,
progress, handoffs). Never use it for approval.
--ok / --warn = status inside product mockups only.
THEMES
is set before first paint by the inline
head script (see STYLEGUIDE "Dark mode"). Light values live on :root,
dark values on :root[data-theme="dark"]. Component rules never use color
literals — only these tokens. If you need a new color, add a token here
(light + dark) or, for page CSS, a page-scoped token under both selectors.
========================================================================== */
:root {
color-scheme: light;
/* Paper & ink */
--paper: #FFFFFF; /* page background */
--paper-2: #F7F6F3; /* alt section background */
--paper-3: #EEECE7; /* deep paper, chips */
--card: #FFFFFF; /* cards, mockup surfaces */
--ink: #15171C; /* primary text, dark bands */
--ink-2: #2E3138; /* body text */
--ink-3: #4A4C52; /* secondary text */
--muted: #5C5A53; /* tertiary text — 5:1 on paper */
--placeholder: #8C887E; /* input placeholders */
--rule: #D5CBB6; /* hairlines */
--rule-soft: #EAE3D5; /* rows inside mockups */
--rule-strong: #BDB09A; /* ghost button borders, strong dividers */
--rule-ink: #15171C; /* editorial ink rules: § label tops, ledger/strip/FAQ heads, step lines */
--wash: rgba(21,23,28,.05); /* hover wash on nav links */
--wash-soft: rgba(21,23,28,.03); /* hover wash on ghost buttons */
/* Attorney / approval layer (oxblood) */
--accent: #7A1F24;
--accent-2: #5E161A; /* hover */
--accent-bright: #C2453F; /* dots, counters */
--accent-tint: #F1DDD7;
--accent-line: #DDBFB8;
--accent-wash: #FBF1EC; /* approval cards, checked options (top) */
--accent-wash-2: #F7E8E2; /* approval cards (bottom of gradient) */
--accent-on-dark: #E58F86; /* oxblood on ink backgrounds */
--on-accent: #FBF3EE; /* text/icons on an --accent fill */
--on-accent-bright: #FFFFFF; /* text on an --accent-bright fill; also badges/queue counts/.mg-gate */
--accent-glow: rgba(122,31,36,.75); /* primary button drop glow */
--btn-sheen: rgba(255,255,255,.14); /* top highlight on filled buttons */
--seal-shadow: rgba(122,31,36,.18);
/* Agent layer (muted ink-blue) */
--agent: #2C4A6B; /* agent text, lines, icons */
--agent-2: #3F6390;
--agent-fill: #2C4A6B; /* agent monogram discs, filled bars */
--on-agent: #F4F1EA; /* text on --agent-fill */
--agent-tint: #DEE5ED;
--agent-tint-2: #CBD7E6; /* active source highlight */
--agent-line: #B9C7D8;
--agent-on-dark: #A9BDD6;
--agent-halo: rgba(63,99,144,.18);
/* Status (mockups) */
--ok: #2D6A45;
--ok-tint: #DDEBDD;
--ok-halo: rgba(45,106,69,.45);
--warn: #9A5B07;
--warn-ink: #7E4A05;
--warn-tint: #F6E6C6;
--warn-line: #E7CB94;
--warn-wash: #FBF0DB; /* flagged table row */
/* Dark band (.section-dark) + footer — dark in BOTH themes */
--night: #15171C; /* footer */
--band: #15171C; /* .section-dark (attorney band) */
--night-2: #1D2027; /* .app-dark surface */
--night-3: #22252D; /* .app-dark chrome */
--night-edge: transparent; /* outline of band/footer against the page (inset shadow, no layout) */
--night-brand: #FFFFFF; /* footer logo tile + wordmark */
--night-text: #EDE7DA;
--night-text-strong: #F6F1E6;
--night-text-2: #CFC8BA;
--night-text-3: #BDB6A8; /* labels on night */
--night-label: #9A9488; /* footer column heads */
--night-muted: #A39E92;
--night-link: #DED8CB;
--night-link-hover: #FFFFFF;
--night-rule: rgba(237,231,218,.16);
--night-rule-strong: rgba(237,231,218,.5);
--night-line: rgba(237,231,218,.14);
--night-line-soft: rgba(237,231,218,.1);
--night-line-strong: rgba(237,231,218,.25);
--night-wash: rgba(237,231,218,.06);
--night-chip: rgba(237,231,218,.1);
--night-chip-text: #D8D2C5;
--night-dot: #3A3E48;
--night-outline: rgba(237,231,218,.24); /* outlined footer wordmark */
--night-accent-line: rgba(229,143,134,.45);
--night-warn: #F0C27A;
--night-warn-tint: rgba(214,152,52,.18);
--btn-paper-bg: #FFFFFF; /* .btn-paper (light button on night) */
--btn-paper-hover: #F3EFE8;
--btn-paper-ink: #15171C;
/* Mockup chrome */
--chrome-1: #F7F6F3; /* app title bar gradient */
--chrome-2: #E8E0CF;
--chrome-dot: #CFC4AF;
--app-side: #F6F1E7; /* app sidebar */
--tip-bg: #15171C; /* dark tooltip (srcpop) */
--tip-text: #EDE7DA;
--tip-accent: #A9BDD6;
--wave-bg: #15171C; /* audio player */
--wave-fg: #FFFFFF;
--wave-bars: rgba(243,238,227,.55);
/* Physical paper objects (notice, drafted doc, sticky notes) */
--paper-obj: #FDFBF6;
--paper-obj-2: #F6F1E6;
--paper-obj-ink: #262420;
--paper-obj-line: #E2DBCB;
--sticky-1: #F2DE8F;
--sticky-2: #EBCFA9;
--sticky-3: #F3E3A6;
--sticky-ink: #3B2E12;
--doc-bg: var(--paper-obj-2); /* .doc / drafted-document panes inside app mockups */
--doc-line: transparent; /* .doc outline (inset shadow, no layout) */
--field-line: var(--rule-strong); /* form field + checkbox borders (>=3:1 in dark) */
--btn-ink-bg: var(--ink); /* .btn-ink fill */
--btn-ink-ink: var(--paper); /* .btn-ink text */
/* Practice-area markers */
--pa-imm: #2F5D7C;
--pa-fam: #8A6A2A;
--pa-crim: #7A1F24;
--pa-more: #4A4C52;
/* Texture & images */
--grain-opacity: .5;
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.18 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2315171C' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
/* Type */
--serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
--sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
--fs-body: 17px;
--fs-lede: clamp(17px, 1.35vw, 19.5px);
--fs-h2: clamp(2.4rem, 5vw, 4.7rem);
--fs-h3: clamp(1.75rem, 2.6vw, 2.5rem);
--fs-display: clamp(2.9rem, 11vw, 10.2rem);
/* Space */
--wrap: 1320px;
--wrap-narrow: 760px;
--gutter: clamp(16px, 4vw, 48px);
--sec-y: clamp(64px, 8vw, 124px); /* section vertical padding */
--stack: clamp(40px, 4.4vw, 60px); /* gap from section header to content */
/* Shape */
--r-sm: 6px;
--r: 10px;
--r-lg: 14px;
--r-xl: 18px;
--shadow-sm: 0 1px 0 rgba(21,23,28,.04), 0 2px 6px rgba(21,23,28,.05);
--shadow: 0 1px 0 rgba(21,23,28,.04), 0 2px 6px rgba(21,23,28,.05), 0 24px 60px -24px rgba(21,23,28,.28);
--shadow-float: 0 2px 4px rgba(21,23,28,.06), 0 18px 40px -12px rgba(21,23,28,.32);
--shadow-drop: 0 30px 40px -30px rgba(21,23,28,.35); /* mobile menu panel */
--shadow-paper: 0 1px 0 rgba(0,0,0,.03), 0 30px 60px -28px rgba(21,23,28,.45); /* paper notice */
--shadow-note: 0 6px 12px -6px rgba(0,0,0,.25); /* sticky notes */
--shadow-pop: 0 10px 24px -10px rgba(0,0,0,.6); /* tooltips */
--shadow-deep: 0 40px 80px -30px rgba(0,0,0,.6); /* .app-dark */
--ease: cubic-bezier(.2, .7, .1, 1);
}
/* --------------------------------------------------------------------------
Dark theme — "a legal journal at night".
Deep warm-neutral ink paper, off-white type, rose-lifted oxblood, a lifted
agent blue. The attorney band and footer go one step deeper than the page;
physical paper objects (notice, scans, photos, sticky notes) stay paper,
dimmed; drafted docs (.doc) are themed editor panes (--doc-bg).
-------------------------------------------------------------------------- */
:root[data-theme="dark"] {
color-scheme: dark;
--paper: #111216;
--paper-2: #17181D;
--paper-3: #24262C;
--card: #1A1C21;
--ink: #ECE8E1;
--ink-2: #D3CEC5;
--ink-3: #ADA89E;
--muted: #9A958B; /* 6.1:1 on --paper, 5.6:1 on --card */
--placeholder: #77736B;
--rule: #2D2E34;
--rule-soft: #24252B;
--rule-strong: #43454C;
--rule-ink: #8A867E;
--wash: rgba(236,232,225,.06);
--wash-soft: rgba(236,232,225,.04);
--accent: #E58F86; /* 7.6:1 on --paper */
--accent-2: #F1AAA2;
--accent-bright: #EE7369;
--accent-tint: #35201F;
--accent-line: #64332F;
--accent-wash: #211819;
--accent-wash-2: #2A1B1C;
--accent-on-dark: #E58F86;
--on-accent: #1F0E0F;
--on-accent-bright: #1F0E0F;
--accent-glow: rgba(229,143,134,.2);
--btn-sheen: rgba(255,255,255,.3);
--seal-shadow: rgba(0,0,0,.5);
--agent: #93B3DA; /* 8.4:1 on --paper */
--agent-2: #AFC8E6;
--agent-fill: #3A5B82;
--on-agent: #EEF2F8;
--agent-tint: #1A2431;
--agent-tint-2: #273A51;
--agent-line: #33475E;
--agent-on-dark: #A9C3E2;
--agent-halo: rgba(147,179,218,.2);
--ok: #7DC699;
--ok-tint: #16281D;
--ok-halo: rgba(125,198,153,.4);
--warn: #E2A447;
--warn-ink: #EDBC72;
--warn-tint: #2C2315;
--warn-line: #5B4521;
--warn-wash: #241D12;
--night: #0B0C0F;
--band: #0B0C0F;
--night-2: #17191E;
--night-3: #1D1F25;
--night-edge: #24252B;
--night-brand: #ECE8E1;
--night-text: #ECE8E1;
--night-text-strong: #F6F2EB;
--night-text-2: #CDC8BE;
--night-text-3: #B3AEA4;
--night-label: #8F8A80;
--night-muted: #9A958B;
--night-link: #D6D1C7;
--night-link-hover: #FFFFFF;
--night-rule: rgba(236,232,225,.12);
--night-rule-strong: rgba(236,232,225,.4);
--night-line: rgba(236,232,225,.1);
--night-line-soft: rgba(236,232,225,.08);
--night-line-strong: rgba(236,232,225,.22);
--night-wash: rgba(236,232,225,.05);
--night-chip: rgba(236,232,225,.08);
--night-chip-text: #D3CEC5;
--night-dot: #33363E;
--night-outline: rgba(236,232,225,.14);
--night-accent-line: rgba(229,143,134,.4);
--night-warn: #EDBC72;
--night-warn-tint: rgba(226,164,71,.16);
--btn-paper-bg: #ECE8E1;
--btn-paper-hover: #FFFFFF;
--btn-paper-ink: #111216;
--chrome-1: #1F2126;
--chrome-2: #1B1D22;
--chrome-dot: #3A3C43;
--app-side: #16181C;
--tip-bg: #2A2D35;
--tip-text: #ECE8E1;
--tip-accent: #AFC8E6;
--wave-bg: #24272E;
--wave-fg: #ECE8E1;
--wave-bars: rgba(236,232,225,.5);
--paper-obj: #CEC7B9; /* paper dimmed ~10% so it never glares at night */
--paper-obj-2: #C7C0B1;
--paper-obj-ink: #24221E;
--paper-obj-line: #B3AA97;
--sticky-1: #BFAE6E;
--sticky-2: #B9A285;
--sticky-3: #C1B383;
--sticky-ink: #2E240E;
--doc-bg: #1F2126; /* drafted docs are editor panes, not paper */
--doc-line: #2D2E34;
--field-line: #66686F; /* 3.06:1 on --card (WCAG 1.4.11) */
--btn-ink-bg: #D9D4CB; /* toned so coral .btn-accent stays the one primary */
--btn-ink-ink: #111216;
--pa-imm: #6E9BC0;
--pa-fam: #C9A05A;
--pa-crim: #E58F86;
--pa-more: #8E8A83;
--grain-opacity: .6;
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .9 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23ECE8E1' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
--shadow-sm: 0 1px 0 rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
--shadow: 0 1px 0 rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.25), 0 28px 60px -24px rgba(0,0,0,.7);
--shadow-float: 0 2px 4px rgba(0,0,0,.35), 0 20px 44px -12px rgba(0,0,0,.75);
--shadow-drop: 0 30px 40px -30px rgba(0,0,0,.8);
--shadow-paper: 0 1px 0 rgba(0,0,0,.2), 0 30px 60px -28px rgba(0,0,0,.85);
--shadow-note: 0 8px 14px -6px rgba(0,0,0,.6);
--shadow-pop: 0 12px 28px -10px rgba(0,0,0,.8);
--shadow-deep: 0 40px 80px -30px rgba(0,0,0,.85);
}
/* Paper island: in dark mode, physical paper objects keep the LIGHT ink/rule/
accent tokens so everything inside them reads like print on paper.
Use class="paper-island" on any page-specific paper object. */
:root[data-theme="dark"] :is(.notice, .paper-island) {
color-scheme: light;
--paper: #D3CCBE; --paper-2: #CCC5B7; --paper-3: #C3BBAC; --card: #D6CFC1;
--ink: #15171C; --ink-2: #2E3138; --ink-3: #43454B; --muted: #4C4A44;
--rule: #C9BFAA; --rule-soft: #D9D1C1; --rule-strong: #B3A68F; --rule-ink: #15171C;
--accent: #7A1F24; --accent-2: #5E161A; --accent-tint: #E8D0C9; --accent-line: #D2B1A9;
--accent-wash: #EFE0D9; --accent-wash-2: #EAD6CE; --on-accent: #FBF3EE;
--agent: #2C4A6B; --agent-2: #3F6390; --agent-fill: #2C4A6B; --on-agent: #F4F1EA;
--agent-tint: #D2DBE6; --agent-tint-2: #BFCCDD; --agent-line: #AEBDD0;
--ok: #1F5535; --ok-tint: #C3D3C2; --warn: #9A5B07; --warn-ink: #7E4A05;
--warn-tint: #EEDDBB; --warn-line: #D9BC85;
--shadow-float: 0 2px 4px rgba(0,0,0,.25), 0 18px 40px -12px rgba(0,0,0,.6);
}
/* Islands print in ink. Zero-specificity :root so a component's own color wins. */
:where(:root[data-theme="dark"]) :is(.notice, .paper-island) { color: var(--ink); }
/* ==========================================================================
02 Base & reset
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: var(--fs-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
/* Paper grain — a fixed, non-interactive overlay */
body::before {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--grain-opacity);
background-image: var(--grain);
}
main, .site-header, .footer { position: relative; z-index: 1; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; }
p, figure, dl, dd, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
b, strong { font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.section-dark :focus-visible, .footer :focus-visible { outline-color: var(--accent-on-dark); }
/* ==========================================================================
03 Utilities
========================================================================== */
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--r-sm); text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: calc(var(--wrap-narrow) + var(--gutter) * 2); }
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }
.tiny { font-size: 11.5px; line-height: 1.45; letter-spacing: .01em; }
.muted { color: var(--muted); }
.accent-txt { color: var(--accent); }
.agent-txt { color: var(--agent); }
.center { text-align: center; }
.ico { width: 14px; height: 14px; flex: none; display: inline-block; vertical-align: -2px; }
.ico-lg { width: 24px; height: 24px; flex: none; color: var(--accent); }
/* Practice-area color marker: */
.pa { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; }
.pa-imm { background: var(--pa-imm); }
.pa-fam { background: var(--pa-fam); }
.pa-crim { background: var(--pa-crim); }
.pa-more { background: var(--pa-more); }
/* ==========================================================================
04 Type
========================================================================== */
/* Eyebrow: mono, uppercase, tracked. Use for small labels above headings. */
.eyebrow { font: 500 11.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
/* Display: hero headings. Second half in renders oxblood (upright — no italics by design). */
.display {
font-family: var(--serif); font-weight: 400;
font-size: var(--fs-display); line-height: .9; letter-spacing: -.03em;
}
.display em, .h1 em, .h2 em, .h3 em { color: var(--accent); }
.h1 { font-family: var(--serif); font-size: clamp(2.9rem, 7.4vw, 7rem); line-height: .94; letter-spacing: -.026em; text-wrap: balance; }
.h2 { font-family: var(--serif); font-size: var(--fs-h2); line-height: 1; letter-spacing: -.022em; max-width: 19ch; text-wrap: balance; }
.h2-xl { font-size: clamp(3rem, 8vw, 8rem); max-width: none; line-height: .95; }
.h3 { font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.05; letter-spacing: -.012em; text-wrap: balance; }
/* Card heading. Never set Instrument Serif below 20px — it gets thin. */
.h4 { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.1; }
.lede, .body-lg { font-size: var(--fs-lede); line-height: 1.62; color: var(--ink-2); }
.body-lg { margin-top: 24px; }
.measure { max-width: 60ch; }
.footnote { font: 18px/1.4 var(--serif); color: var(--muted); }
.footnote::before { content: "† "; color: var(--accent); font-style: normal; }
/* ==========================================================================
05 Buttons & links
--------------------------------------------------------------------------
.btn + one of: .btn-accent (primary) .btn-ink .btn-ghost .btn-paper (on dark)
sizes: .btn-sm (38) default (48) .btn-lg (56) .btn-xl (64) · .btn-block
========================================================================== */
.btn {
--h: 48px;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: var(--h); padding: 0 22px; border-radius: 999px;
font: 500 15px/1.1 var(--sans); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
border: 1px solid transparent; cursor: pointer;
transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn .ico { transition: transform .25s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn-sm { --h: 38px; padding: 0 16px; font-size: 14px; }
.btn-lg { --h: 56px; padding: 0 28px; font-size: 16.5px; }
.btn-xl { --h: 64px; padding: 0 34px; font-size: 18px; }
.btn-block { width: 100%; }
.btn-accent { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 var(--btn-sheen), 0 10px 26px -12px var(--accent-glow); }
.btn-accent:hover { background: var(--accent-2); }
.btn-ink { background: var(--btn-ink-bg); color: var(--btn-ink-ink); }
.btn-ink:hover { background: var(--accent); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { border-color: var(--ink); background: var(--wash-soft); }
.btn-paper { background: var(--btn-paper-bg); color: var(--btn-paper-ink); }
.btn-paper:hover { background: var(--btn-paper-hover); }
/* Arrow link: underlined in oxblood, used for "Explore …" */
.link-arrow {
display: inline-flex; align-items: center; gap: 8px; margin-top: 36px;
font-weight: 500; font-size: 15.5px; text-decoration: none; color: var(--ink);
border-bottom: 1px solid var(--accent); padding-bottom: 3px;
}
.link-arrow .ico { color: var(--accent); transition: transform .25s var(--ease); }
.link-arrow:hover .ico { transform: translateX(4px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta-center { justify-content: center; }
.micro { margin-top: 16px; font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.micro-center { justify-content: center; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
/* ==========================================================================
06 Header & navigation
========================================================================== */
.site-header {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--paper) 90%, transparent);
backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px);
border-bottom: 1px solid transparent; transition: border-color .3s;
}
.site-header.scrolled { border-bottom-color: var(--rule); }
.header-inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.brand-mark { width: 30px; height: 30px; }
.brand-mark .bm-bg { fill: var(--ink); }
.brand-mark .bm-j { fill: none; stroke: var(--paper); stroke-width: 2.6; stroke-linecap: round; }
.brand-mark .bm-dot { fill: var(--accent-bright); }
.brand-word { font-family: var(--serif); font-size: 27px; letter-spacing: -.01em; line-height: 1; }
.brand-word em { color: var(--accent); }
.nav { margin-left: 4px; }
.nav-list { display: flex; gap: 2px; }
.nav-list > li { position: relative; }
.nav-list a { display: flex; align-items: center; gap: 9px; padding: 8px 12px; font-size: 14.5px; color: var(--ink-2); text-decoration: none; border-radius: var(--r-sm); }
.nav-list a:hover { color: var(--ink); background: var(--wash); }
.nav-list a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1.5px 0 var(--accent); border-radius: 0; }
.has-sub > a::after { content: ""; width: 5px; height: 5px; margin-left: -2px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.sub {
position: absolute; top: 100%; left: -8px; min-width: 230px; padding: 8px; margin-top: 6px;
background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow);
opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .2s var(--ease);
}
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* hover bridge */
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { padding: 10px 12px; }
.sub-all { border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 6px; }
.sub-all a { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.header-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
/* Mobile nav: native , works without JS */
.mnav { display: none; }
.menu-btn {
list-style: none; width: 42px; height: 42px; border: 1px solid var(--rule-strong); border-radius: 999px;
cursor: pointer; position: relative; display: block;
}
.menu-btn::-webkit-details-marker { display: none; }
.menu-lines, .menu-lines::before { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--ink); transition: .25s var(--ease); }
.menu-lines { top: 17px; }
.menu-lines::before { content: ""; left: 0; right: 0; top: 6px; }
.mnav[open] .menu-lines { top: 20px; transform: rotate(45deg); }
.mnav[open] .menu-lines::before { top: 0; transform: rotate(-90deg); }
.mnav-panel {
position: absolute; left: 0; right: 0; top: 100%;
display: flex; flex-direction: column; padding: 8px var(--gutter) 24px;
background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule-ink);
box-shadow: var(--shadow-drop);
max-height: calc(100vh - 64px); overflow-y: auto;
}
.mnav-panel > a { padding: 12px 0; text-decoration: none; font-family: var(--serif); font-size: 24px; line-height: 1.2; border-bottom: 1px solid var(--rule); }
.mnav-panel > a.indent { padding-left: 18px; font-size: 20px; color: var(--ink-3); }
.mnav-panel > a[aria-current="page"] { color: var(--accent); }
.mnav-cta { display: grid; gap: 10px; margin-top: 20px; }
/* Theme toggle — header button cycles system → light → dark.
The icon shown is the CURRENT preference (set pre-paint as data-theme-pref). */
.theme-btn {
appearance: none; width: 38px; height: 38px; flex: none; padding: 0; cursor: pointer;
display: inline-grid; place-items: center; border-radius: 999px;
background: transparent; color: var(--ink-2); border: 1px solid var(--rule-strong);
transition: border-color .25s, color .25s, background .25s;
}
.theme-btn:hover { color: var(--ink); border-color: var(--ink); background: var(--wash-soft); }
.theme-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: none; }
.theme-btn .ti-system { display: block; }
:root[data-theme-pref="light"] .theme-btn .ti-system, :root[data-theme-pref="dark"] .theme-btn .ti-system { display: none; }
:root[data-theme-pref="light"] .theme-btn .ti-light, :root[data-theme-pref="dark"] .theme-btn .ti-dark { display: block; }
/* Mobile-nav segmented control */
.mnav-theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 4px; }
.mnav-theme-k { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.theme-seg { display: inline-flex; padding: 3px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--paper-2); }
.theme-seg button {
appearance: none; border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; font: 500 13.5px/1 var(--sans);
}
.theme-seg .theme-ico { display: block; width: 15px; height: 15px; }
.theme-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
html:not(.js) .theme-btn, html:not(.js) .mnav-theme { display: none; }
/* No color transitions while the theme flips (avoids a staggered fade) */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }
/* ==========================================================================
07 Footer & sticky CTA
========================================================================== */
.footer { background: var(--night); color: var(--night-text-2); padding: 80px 0 32px; overflow: hidden; box-shadow: inset 0 1px 0 var(--night-edge); }
.footer .brand { color: var(--night-brand); }
.footer .brand-mark .bm-bg { fill: var(--night-brand); }
.footer .brand-mark .bm-j { stroke: var(--night); }
.footer .brand-word em { color: var(--accent-on-dark); }
.foot-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
.foot-line { font: 26px/1.2 var(--serif); margin-top: 22px; color: var(--night-text); max-width: 18ch; }
.foot-line em { color: var(--accent-on-dark); }
.foot-cta { margin-top: 26px; }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.foot-h { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--night-label); margin-bottom: 16px; }
.foot-cols li + li { margin-top: 10px; }
.foot-cols a { text-decoration: none; font-size: 15px; color: var(--night-link); overflow-wrap: anywhere; }
.foot-cols a:hover { color: var(--night-link-hover); text-decoration: underline; text-decoration-color: var(--accent-on-dark); text-underline-offset: 3px; }
.foot-word {
font-family: var(--serif); font-size: min(25vw, 330px); line-height: .8; letter-spacing: -.04em;
color: transparent; -webkit-text-stroke: 1px var(--night-outline);
margin: 64px 0 0; padding-bottom: .2em; white-space: nowrap; text-align: center;
}
.foot-bottom {
display: flex; justify-content: space-between; gap: 24px; align-items: flex-end;
border-top: 1px solid var(--night-rule); padding-top: 22px; margin-top: 8px; font-size: 13.5px; color: var(--night-muted);
}
.foot-bottom a { color: var(--night-link); text-decoration: none; white-space: nowrap; }
/* Sticky CTA (mobile only; JS reveals it after the hero scrolls away) */
.sticky-cta { display: none; }
/* ==========================================================================
08 Layout: sections, § labels, grids
--------------------------------------------------------------------------
========================================================================== */
.section { padding: var(--sec-y) 0; position: relative; }
.section-tight { padding: calc(var(--sec-y) * .66) 0; }
.section-alt { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.section-alt + .section-alt { border-top: 0; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: clamp(16px, 2vw, 32px); }
.sec-label {
grid-column: 1 / span 3; align-self: start; display: flex; flex-direction: column; gap: 8px;
font: 500 11.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
border-top: 1px solid var(--rule-ink); padding-top: 14px;
}
.sec-n { font-family: var(--serif); font-size: 30px; letter-spacing: 0; text-transform: none; color: var(--accent); line-height: 1; }
.sec-body { grid-column: 4 / span 9; grid-row: 1 / span 2; min-width: 0; }
/* Optional aside under a § label (e.g. FAQ contact) */
.sec-aside { grid-column: 1 / span 3; grid-row: 2; align-self: start; margin-top: 28px; font-size: 15px; color: var(--ink-3); max-width: 26ch; }
.sec-aside .footnote { font-size: 19px; color: var(--ink-2); margin-bottom: 10px; }
.sec-aside a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.stack { margin-top: var(--stack); }
/* Generic 2/3/4-up grids for sub-pages */
.cols-2, .cols-3, .cols-4 { display: grid; gap: clamp(16px, 2vw, 24px); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Split: copy left, figure right */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
/* Dark band — one per page, max. */
.section-dark { background: var(--band); color: var(--night-text); --rule: var(--night-rule); box-shadow: inset 0 1px 0 var(--night-edge), inset 0 -1px 0 var(--night-edge); }
.section-dark .sec-label { border-top-color: var(--night-rule-strong); color: var(--night-text-3); }
.section-dark .sec-n, .section-dark .h2 em, .section-dark .h3 em { color: var(--accent-on-dark); }
.section-dark .body-lg, .section-dark .lede { color: var(--night-text-2); }
.section-dark .footnote { color: var(--night-text-3); }
.section-dark .footnote::before { color: var(--accent-on-dark); }
.section-dark .link-arrow { color: var(--night-text); border-bottom-color: var(--accent-on-dark); }
.section-dark .link-arrow .ico { color: var(--accent-on-dark); }
/* ==========================================================================
09 Signature motifs
========================================================================== */
/* Kicker — mono line with a ringed check, above display headings */
.kicker { display: inline-flex; align-items: center; gap: 12px; font: 500 12.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.kicker-mark { width: 22px; height: 22px; border-radius: 50%; border: 1.3px solid var(--accent); display: grid; place-items: center; }
.kicker-mark svg { width: 12px; height: 12px; }
/* Seal — ; size via width/height */
.seal { color: var(--accent); }
.seal-sm { width: 104px; height: 104px; transform: rotate(-10deg); }
.seal-paper { background: radial-gradient(circle, var(--paper) 60%, transparent 61%); border-radius: 50%; }
/* Footnote markers ① ② ③ */
.note-n, .fn {
font: 500 10.5px/1 var(--mono); color: var(--paper); background: var(--accent);
width: 19px; height: 19px; border-radius: 50%; display: inline-grid; place-items: center; margin-top: 2px; flex: none;
}
.fn { width: 16px; height: 16px; font-size: 9.5px; margin-left: 6px; vertical-align: 3px; margin-top: 0; }
.notes { border-top: 1px solid var(--rule); }
.notes li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; color: var(--ink-3); }
/* Strip — a ruled band listing items separated by § glyphs */
.strip { border-top: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink); }
.strip-inner { display: flex; align-items: center; gap: 28px; padding-top: 18px; padding-bottom: 18px; }
.strip-label { font: 500 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.strip-list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-family: var(--serif); font-size: clamp(20px, 1.9vw, 27px); line-height: 1.2; }
.strip-list li { display: inline-flex; align-items: center; }
.strip-list li + li::before { content: "§"; color: var(--accent); font-size: .7em; margin: 0 .75em; opacity: .8; }
/* Figure caption under mockups */
.fig-cap { font: 15px/1.4 var(--serif); color: var(--muted); }
.fig-cap::before { content: "Fig. — "; font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
/* ==========================================================================
10 Page hero (sub-pages) & breadcrumb
--------------------------------------------------------------------------
========================================================================== */
.page-hero { padding: 20px 0 clamp(56px, 7vw, 104px); }
.page-hero .h1 { margin-top: 18px; max-width: 15ch; }
.page-hero .lede { margin-top: 26px; }
.page-hero .kicker { margin-top: clamp(36px, 5vw, 64px); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
.crumbs { margin-top: clamp(28px, 4vw, 52px); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--rule-strong); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--accent); }
/* ==========================================================================
11 Content components
========================================================================== */
/* --- Card ------------------------------------------------------------- */
.card { display: block; padding: 26px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); text-decoration: none; }
.card .h4, .card h3 { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.1; margin-top: 10px; }
.card p { font-size: 15px; color: var(--ink-3); margin-top: 8px; }
a.card { transition: border-color .25s, transform .25s var(--ease); }
a.card:hover { border-color: var(--ink); transform: translateY(-2px); }
.card-k { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
/* --- Exhibits (problem vignettes) ------------------------------------- */
.exhibits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--stack); border-top: 1px solid var(--rule-ink); }
.exhibit { padding: 26px 26px 4px 0; position: relative; }
.exhibit + .exhibit { padding-left: 26px; border-left: 1px solid var(--rule); }
.exhibit h3 { font-family: var(--serif); font-size: 32px; line-height: 1.1; margin-top: 8px; }
.exhibit p { color: var(--ink-3); margin-top: 6px; max-width: 30ch; }
.exhibit-n { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.exhibit-vis { height: 186px; margin-bottom: 20px; border-radius: var(--r); background: var(--card); border: 1px solid var(--rule); position: relative; overflow: hidden; }
.rekey { position: absolute; inset: 16px; display: flex; flex-direction: column; gap: 6px; }
.rekey span { font: 500 11.5px/1 var(--mono); padding: 6px 8px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink-3); }
.rekey span:nth-child(2) { margin-left: 10px; opacity: .85; }
.rekey span:nth-child(3) { margin-left: 20px; opacity: .7; }
.rekey span:nth-child(4) { margin-left: 30px; opacity: .55; }
.rekey .cursor { margin-left: 40px; border-color: var(--accent); color: var(--ink); }
.rekey .cursor::after { content: ""; display: inline-block; width: 1.5px; height: 11px; background: var(--accent); margin-left: 2px; vertical-align: -1px; }
.chase { position: absolute; inset: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.chase span { font-size: 12.5px; padding: 6px 9px; border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--rule); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chase span::before { content: "✉"; margin-right: 7px; color: var(--muted); }
.chase .last { border-color: var(--accent); color: var(--ink); }
.sticky { position: absolute; inset: 0; }
.sticky span { position: absolute; font: 17px/1.15 var(--serif); padding: 10px 10px 16px; width: 108px; box-shadow: var(--shadow-note); color: var(--sticky-ink); }
.sticky .s1 { background: var(--sticky-1); left: 16px; top: 18px; transform: rotate(-5deg); }
.sticky .s2 { background: var(--sticky-2); left: 36%; top: 66px; transform: rotate(4deg); z-index: 2; }
.sticky .s3 { background: var(--sticky-3); right: 12px; top: 14px; transform: rotate(-2deg); }
/* --- Steps (i. ii. iii. iv.) ------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2vw, 32px); margin-top: var(--stack); }
.step-top { display: flex; align-items: center; gap: 14px; }
.step-n { font: 44px/1 var(--serif); color: var(--accent); min-width: 48px; }
.step-line { flex: 1; height: 1px; background: var(--rule-ink); position: relative; }
.step-line::after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--rule-ink); border-right: 1px solid var(--rule-ink); transform: rotate(45deg); }
.step-line-end::after { border: 0; border-radius: 50%; background: var(--rule-ink); transform: none; }
.step h3 { font-family: var(--serif); font-size: 30px; line-height: 1.1; margin-top: 20px; }
.step p { color: var(--ink-3); margin-top: 10px; font-size: 15.5px; min-height: 6.4em; }
.step-vis { margin-top: 20px; height: 176px; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 14px; position: relative; overflow: hidden; }
.step-gate .step-vis { border-color: var(--accent-line); background: linear-gradient(var(--accent-wash), var(--accent-wash-2)); }
.pick { display: flex; flex-direction: column; gap: 7px; }
.pick-o { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--rule); border-radius: 7px; font-size: 13px; background: var(--paper); }
.pick-o.on { border-color: var(--agent); background: var(--card); box-shadow: 0 0 0 3px var(--agent-tint); }
.pick-o .ico { margin-left: auto; color: var(--agent); }
.mini-log { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.mini-log > span { display: flex; align-items: center; gap: 9px; padding-bottom: 8px; border-bottom: 1px dashed var(--rule); }
.mini-log > span:last-child { border: 0; }
.working { color: var(--agent); }
.ellipsis i { font-style: normal; }
.gate { display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center; height: 100%; }
.gate-btns { display: flex; flex-direction: column; gap: 7px; }
.gate-btns .btn-ui { justify-content: center; }
.audit { display: flex; flex-direction: column; gap: 9px; color: var(--ink-3); font-size: 11px; }
.audit > span { display: grid; grid-template-columns: 62px 1fr; gap: 6px; }
.audit time { color: var(--muted); }
.audit u { text-decoration-color: var(--agent); text-underline-offset: 2px; }
.audit .ok-line { color: var(--accent); font-weight: 500; border-top: 1px solid var(--rule); padding-top: 9px; }
/* --- Ledger: numbered rows (agents, controls, features) ---------------
---------------------------------------------------------------------- */
.ledger { margin-top: var(--stack); border-top: 1px solid var(--rule-ink); }
.ledger-head, .ledger-row { display: grid; grid-template-columns: 56px minmax(0, 3fr) minmax(0, 4.4fr) minmax(0, 4.6fr); gap: 24px; align-items: baseline; }
.ledger-head { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 14px 0; border-bottom: 1px solid var(--rule); }
.ledger-row { padding: 22px 0; border-bottom: 1px solid var(--rule); position: relative; }
.ledger-row::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--accent); transition: width .5s var(--ease); }
.ledger-row:hover::before { width: 100%; }
.ledger-n { color: var(--muted); font-size: 12px; }
.ledger-name { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; display: flex; align-items: center; gap: 14px; }
.ledger-name .mg { transform: translateY(-2px); }
.ledger-desc { color: var(--ink-2); font-size: 16px; }
.ledger-out { font-size: 12.5px; color: var(--ink-3); padding-left: 14px; border-left: 2px solid var(--agent-line); line-height: 1.55; }
.ledger-out .pill { margin-left: 4px; }
.ledger-row-atty { background: linear-gradient(90deg, var(--accent-tint), transparent 70%); border-bottom-color: var(--rule-ink); }
.ledger-row-atty .ledger-n { color: var(--accent); font-family: var(--serif); font-size: 22px; padding-left: 6px; }
.ledger-row-atty .ledger-out { border-left-color: var(--accent); color: var(--accent); }
/* --- Pills, badges, chips --------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: 5px; font: 500 10.5px/1 var(--mono); letter-spacing: .02em; padding: 5px 8px; border-radius: 99px; background: var(--paper-3); color: var(--ink-3); white-space: nowrap; }
.pill .ico { width: 11px; height: 11px; }
.pill.warn { background: var(--warn-tint); color: var(--warn-ink); }
.pill.ok { background: var(--ok-tint); color: var(--ok); }
.pill.urgent { background: var(--accent-tint); color: var(--accent); }
.pill.agent { background: var(--agent-tint); color: var(--agent); }
/* Roadmap micro-badge: dashed, for anything not yet shipped */
.pill.roadmap { background: transparent; border: 1px dashed var(--accent); color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; padding: 4px 7px; }
.badge { font: 500 10px/1 var(--mono); background: var(--accent); color: var(--on-accent-bright); padding: 4px 8px; border-radius: 99px; letter-spacing: .08em; text-transform: uppercase; }
.live { width: 6px; height: 6px; border-radius: 50%; background: var(--agent-2); box-shadow: 0 0 0 3px var(--agent-halo); }
/* Form/work-product chips under practice copy */
.form-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.form-chips li { font: 500 11.5px/1 var(--mono); padding: 7px 9px; border: 1px solid var(--rule-strong); border-radius: 5px; background: var(--card); color: var(--ink-2); }
/* --- Tiers (pricing) -------------------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: var(--stack); align-items: stretch; }
.tier { display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--rule-strong); border-radius: 16px; background: var(--card); }
.tier-rec { border-color: var(--rule-ink); box-shadow: 0 0 0 1px var(--rule-ink), var(--shadow); }
.tier-k { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 10px; min-height: 20px; }
.tier-t { font-family: var(--serif); font-size: clamp(26px, 2.3vw, 31px); line-height: 1.08; margin-top: 16px; text-wrap: balance; }
.tier-p { font-size: 14px; color: var(--muted); margin-top: 8px; }
.ticks { margin: 22px 0 0; border-top: 1px solid var(--rule); flex: 1; }
.ticks li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.ticks .ico { color: var(--accent); transform: translateY(2px); }
.ticks .pill { margin-left: 2px; }
.tier-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 0; margin-bottom: 4px; border-bottom: 1px solid var(--rule-ink); }
.tier-foot-k { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tier-foot-v { font: 22px/1.1 var(--serif); color: var(--ink); text-align: right; }
.tier .btn { margin-top: 18px; }
.tier-note { margin-top: 24px; text-align: center; font-size: 14.5px; color: var(--muted); }
.tier-note a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
/* --- FAQ (native ) ------------------------------------------- */
.faq { margin-top: var(--stack); border-top: 1px solid var(--rule-ink); }
.faq details { border-bottom: 1px solid var(--rule-strong); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font: 400 clamp(22px, 2vw, 28px)/1.2 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 26px/1 var(--sans); color: var(--accent); transition: transform .3s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; max-width: 64ch; color: var(--ink-2); font-size: 17px; }
/* --- Memo (legal memorandum card) ------------------------------------- */
.memo { position: relative; background: var(--card); border: 1px solid var(--rule-strong); border-radius: 4px; padding: 30px 30px 28px; box-shadow: var(--shadow); }
.memo::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--rule); border-radius: 2px; pointer-events: none; }
.memo-h { display: flex; justify-content: space-between; gap: 12px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); border-top: 3px double var(--rule-ink); border-bottom: 1px solid var(--rule-ink); padding: 8px 0; }
.memo-h span:first-child { color: var(--accent); }
.memo-t { font-family: var(--serif); font-size: clamp(26px, 2.3vw, 32px); line-height: 1.08; margin-top: 20px; max-width: 15ch; }
.memo-list { margin-top: 18px; }
.memo-list > div { padding: 13px 0; border-top: 1px solid var(--rule); }
.memo-list dt { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.memo-list dd { margin-top: 5px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.memo-note { font: 15px/1.4 var(--serif); color: var(--muted); padding-top: 14px; border-top: 1px solid var(--rule); }
.memo .link-arrow { margin-top: 20px; }
.seal-memo { position: absolute; width: 92px; height: 92px; right: 24px; top: 84px; transform: rotate(12deg); opacity: .9; }
/* ==========================================================================
12 Product-UI mockup primitives
--------------------------------------------------------------------------
Every mockup is labelled "Sample data" in its chrome and uses fictional
matter data. Wrap in with a figcaption (visible .fig-cap or
.sr-only) and set aria-hidden="true" on the mock internals.
========================================================================== */
.app {
margin: 0; background: var(--card); border: 1px solid var(--rule-strong); border-radius: var(--r-lg);
box-shadow: var(--shadow); overflow: hidden; font-size: 13.5px; line-height: 1.45; color: var(--ink);
}
.app-chrome {
display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 38px;
border-bottom: 1px solid var(--rule); background: linear-gradient(var(--chrome-1), var(--chrome-2));
}
.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--chrome-dot); }
.app-url { font: 11.5px/1 var(--mono); color: var(--muted); flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.app-sample { font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid currentColor; padding: 4px 7px; border-radius: 4px; white-space: nowrap; }
.app .pad { padding: 18px 20px 20px; }
.ph { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.ph-t { font-family: var(--serif); font-size: 22px; line-height: 1.2; margin-top: 2px; }
/* Agent monogram disc: FM (agent = ink-blue) */
.mg {
width: 30px; height: 30px; border-radius: 50%; flex: none;
display: inline-grid; place-items: center; font: 500 10px/1 var(--mono); font-style: normal; letter-spacing: .04em;
background: var(--agent-fill); color: var(--on-agent);
}
.mg-s { width: 22px; height: 22px; font-size: 8.5px; }
.mg-gate { background: var(--accent); color: var(--on-accent-bright); } /* the attorney */
.mg-gate .ico { width: 12px; height: 12px; }
.mg-idle { background: var(--card); color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule-strong); }
/* Mock buttons (presentational spans, never real controls) */
.btn-ui { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 7px; font: 500 12.5px/1 var(--sans); white-space: nowrap; }
.btn-ui-ghost { border: 1px solid var(--rule-strong); background: var(--card); }
.btn-ui-approve { background: var(--accent); color: var(--on-accent); }
.btn-ui-approve.is-disabled { opacity: .45; }
/* Chips: mono tags. .chip.ok / .chip.warn */
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.chip { font: 500 10.5px/1 var(--mono); padding: 5px 7px; border-radius: 5px; border: 1px solid var(--rule); background: var(--paper); }
.chip.ok { color: var(--ok); }
.chip.warn { color: var(--warn-ink); background: var(--warn-tint); border-color: var(--warn-line); }
/* Source chip — "where this fact came from". Use on every extracted value. */
.src-chip { display: inline-flex; align-items: center; gap: 4px; font: 500 10.5px/1 var(--mono); color: var(--agent); background: var(--agent-tint); border: 1px solid var(--agent-line); padding: 4px 6px; border-radius: 4px; white-space: nowrap; }
.src-chip .ico { width: 10px; height: 10px; }
.src-chip.flag { color: var(--warn-ink); background: var(--warn-tint); border-color: var(--warn-line); }
.src { font-style: normal; font: 10.5px var(--mono); color: var(--agent); background: var(--agent-tint); padding: 2px 6px; border-radius: 4px; margin-left: auto; }
/* Inline status text */
.flag-txt { color: var(--warn-ink); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.ok-txt { color: var(--ok); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.warn-txt { color: var(--warn-ink); font-weight: 500; }
.ico.ok { color: var(--ok); }
/* Callout inside mockups */
.callout { display: flex; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.callout > .ico { margin-top: 2px; }
.warn-bg { background: var(--warn-tint); border: 1px solid var(--warn-line); }
.warn-bg > .ico { color: var(--warn); }
/* Mock tables */
.table-scroll { overflow-x: auto; }
.mock-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mock-table th { white-space: nowrap; text-align: left; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--rule-ink); }
.mock-table td { padding: 10px 8px; border-bottom: 1px solid var(--rule-soft); }
.xcheck td:nth-child(n+3), .xcheck th:nth-child(n+3) { text-align: center; }
.xcheck .ico { margin: 0 auto; display: block; }
.row-flag td { background: var(--warn-wash); }
.num { text-align: right !important; }
/* Activity feed */
.feed { margin-top: 4px; }
.feed-item { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); align-items: start; }
.feed-item b { font-weight: 600; }
.sep { color: var(--rule-strong); margin: 0 6px; }
.bar { height: 4px; background: var(--paper-2); border-radius: 9px; margin-top: 9px; max-width: 260px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--agent-fill); border-radius: 9px; }
/* Handoff row: one agent passes work to another */
.handoff { grid-template-columns: auto 1fr auto; background: linear-gradient(90deg, var(--agent-tint), transparent 85%); margin: 6px -10px; padding: 10px; border-radius: 8px; border-bottom: 0; }
.hand { display: inline-flex; align-items: center; gap: 4px; color: var(--agent); }
.hand-arrow { width: 30px; height: 10px; }
/* Approval card (attorney layer) */
.approval {
margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 15px 18px; border-radius: var(--r); border: 1px solid var(--accent-line);
background: linear-gradient(180deg, var(--accent-wash), var(--accent-wash-2));
}
.approval-t { font-family: var(--serif); font-size: 22px; line-height: 1.2; margin: 3px 0 2px; }
.approval-r { display: flex; gap: 8px; }
/* Source-linked drafted text: …… */
.srcmark { position: relative; background: var(--agent-tint); color: var(--ink); border-bottom: 1.5px solid var(--agent-2); padding: 0 2px; border-radius: 2px; }
.srcmark.is-on { background: var(--agent-tint-2); white-space: nowrap; }
.srcpop {
position: absolute; left: -4px; bottom: calc(100% + 10px); z-index: 2; white-space: nowrap;
display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 7px;
background: var(--tip-bg); color: var(--tip-text); font: 500 11px/1 var(--mono); box-shadow: var(--shadow-pop);
}
.srcpop b { color: var(--tip-accent); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.srcpop .ico { width: 11px; height: 11px; color: var(--tip-accent); }
.srcpop::after { content: ""; position: absolute; left: 18px; top: 100%; border: 6px solid transparent; border-top-color: var(--tip-bg); }
/* Countdown bar for deadlines: */
.countdown { display: block; height: 3px; border-radius: 3px; background: var(--paper-3); margin-top: 8px; overflow: hidden; max-width: 240px; }
.countdown i { display: block; height: 100%; width: calc(var(--p, .5) * 100%); background: var(--agent); border-radius: 3px; }
.countdown.warn i { background: var(--warn); }
.countdown.urgent i { background: var(--accent); }
/* Paper notice (incoming document) */
.notice {
position: relative; background: var(--paper-obj); border: 1px solid var(--rule); border-radius: 3px; padding: 22px 24px 28px;
box-shadow: var(--shadow-paper); transform: rotate(-2deg); color: var(--paper-obj-ink);
}
.notice-h { display: flex; justify-content: space-between; gap: 12px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding-bottom: 10px; border-bottom: 2px solid var(--rule-ink); }
.notice-h span:last-child { color: var(--accent); }
.notice-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 11px; margin-top: 12px; color: var(--ink-3); }
.notice-meta b { font-weight: 500; color: var(--ink); }
.notice-lines { display: grid; gap: 7px; margin: 14px 0; }
.notice-lines i { display: block; height: 5px; border-radius: 2px; background: var(--paper-obj-line); }
.notice-p { font: 17px/1.5 var(--serif); }
.notice-p mark { background: linear-gradient(transparent 55%, var(--agent-tint) 55%); color: var(--ink); box-shadow: 0 1.5px 0 var(--agent-2); padding: 0 1px; }
.notice-tag {
position: absolute; right: -14px; bottom: -16px; display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; background: var(--card); color: var(--agent); border: 1px solid var(--agent-line);
padding: 6px 10px 6px 6px; border-radius: 99px; box-shadow: var(--shadow-float); transform: rotate(2deg);
}
/* Dark mockup variant */
.app-dark { background: var(--night-2); border-color: var(--night-line); color: var(--night-text); box-shadow: var(--shadow-deep); }
.app-dark .app-chrome { background: var(--night-3); border-bottom-color: var(--night-line-soft); }
.app-dark .dots i { background: var(--night-dot); }
.app-dark .app-url, .app-dark .muted { color: var(--night-muted); }
.app-dark :is(.doc, .notice, .paper-island) .muted { color: var(--muted); }
.app-dark .app-sample { color: var(--accent-on-dark); }
.app-dark .mg { background: var(--agent-on-dark); color: var(--night); }
.app-dark .btn-ui-ghost { background: transparent; border-color: var(--night-line-strong); color: var(--night-text); }
.app-dark .pill { background: var(--night-chip); color: var(--night-chip-text); }
.app-dark .pill.warn { background: var(--night-warn-tint); color: var(--night-warn); }
/* ==========================================================================
13 Homepage hero
========================================================================== */
.hero { padding: 20px 0 clamp(64px, 6.5vw, 100px); position: relative; }
.hero-head { margin-top: clamp(32px, 4.4vw, 64px); }
.display-hero { margin-top: 20px; }
.br-lg { display: none; }
@media (min-width: 1100px) { .br-lg { display: inline; } }
.cta-short { display: none; }
.hero-grid {
display: grid; grid-template-columns: minmax(0, 4.1fr) minmax(0, 7.9fr); gap: clamp(32px, 4.5vw, 72px);
margin-top: clamp(36px, 4.4vw, 64px); align-items: start;
}
.hero-copy { border-top: 1px solid var(--rule-ink); padding-top: 4px; }
.hero-copy .lede { margin-top: 22px; }
.hero-copy .lede strong { color: var(--ink); }
.hero-copy .notes { margin-top: 40px; }
.hero-visual { position: relative; }
.hero-stage { position: relative; }
.hero-visual { padding-bottom: 290px; }
.hero-visual .fig-cap { position: absolute; left: auto; right: 0; top: calc(100% - 120px); max-width: none; text-align: right; }
/* Crew rail: the 7 agents → the attorney */
.crew { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin-bottom: 18px; }
.crew::before { content: ""; position: absolute; left: 6.25%; right: 12.5%; top: 15px; height: 1px; background: var(--agent-line); }
.crew-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.crew-node .mg { position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--paper); }
.crew-node:not(.is-done):not(.is-run):not(.crew-atty) .mg { background: var(--card); color: var(--muted); box-shadow: 0 0 0 4px var(--paper), inset 0 0 0 1px var(--rule-strong); }
.crew-lbl { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.crew-node.is-done .crew-lbl, .crew-node.is-run .crew-lbl { color: var(--agent); }
.crew-node.is-run .mg::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--agent-2); }
.crew-atty::before { content: ""; position: absolute; right: calc(50% + 19px); width: calc(100% - 38px); top: 15px; border-top: 1.5px dashed var(--accent); }
.crew-atty .crew-lbl { color: var(--accent); }
.crew-atty .mg { width: 30px; height: 30px; }
.app-hero .app-body { display: grid; grid-template-columns: 188px minmax(0, 1fr); }
.app-side { border-right: 1px solid var(--rule); padding: 16px 10px; background: var(--app-side); }
.side-h { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 8px 10px; }
.side-h2 { margin-top: 18px; }
.side-item { display: grid; grid-template-columns: 8px 1fr; column-gap: 9px; padding: 8px; border-radius: 7px; margin-bottom: 2px; }
.side-item b { font: 500 12px/1.3 var(--mono); }
.side-item small { grid-column: 2; font-size: 11.5px; color: var(--muted); }
.side-item .pa { margin-top: 4px; grid-row: span 2; }
.side-item.is-active { background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.side-queue { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.side-queue em { font: 500 11px/1 var(--mono); background: var(--accent); color: var(--on-accent-bright); border-radius: 99px; padding: 4px 8px; }
.app-main { padding: 16px 22px 20px; min-width: 0; }
.matter-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.matter-title { font-family: var(--serif); font-size: 26px; line-height: 1.15; margin-top: 4px; letter-spacing: -.005em; }
.tabs-ui { display: flex; gap: 18px; margin-top: 14px; border-bottom: 1px solid var(--rule); font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.tabs-ui span { padding: 8px 0; }
.tabs-ui .on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); font-weight: 500; }
.tabs-ui i { font-style: normal; font: 10.5px var(--mono); background: var(--paper-2); padding: 2px 5px; border-radius: 4px; margin-left: 3px; }
/* Fields card (I-485 with source chips) — floats under the app */
.fields-card {
position: absolute; left: -72px; top: calc(100% - 22px); z-index: 3; width: 330px;
background: var(--card); border: 1px solid var(--rule-strong); border-radius: var(--r); padding: 12px 14px 10px;
box-shadow: var(--shadow-float); font-size: 13px;
}
.fields-h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--rule-ink); color: var(--ink-2); }
.field { padding: 8px 0; border-bottom: 1px dashed var(--rule); }
.field:last-child { border-bottom: 0; }
.field dt { font-size: 11px; color: var(--muted); }
.field dd { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 2px; }
.field .val { font: 500 13px/1.2 var(--mono); }
.field.is-flag { background: linear-gradient(90deg, var(--warn-tint), transparent); margin: 0 -14px; padding: 8px 14px; border-left: 3px solid var(--warn); }
.field.is-flag .val { color: var(--warn-ink); }
.field dd.field-note, .field-note { display: block; font-size: 12px; color: var(--warn-ink); margin-top: 4px; }
.field-note b { font-family: var(--mono); font-weight: 500; }
.seal-hero {
position: absolute; width: 150px; height: 150px; right: -26px; bottom: -118px; z-index: 3;
background: radial-gradient(circle, var(--paper) 60%, transparent 61%); border-radius: 50%;
transform: rotate(-12deg); filter: drop-shadow(0 10px 20px var(--seal-shadow));
}
/* ==========================================================================
14 Homepage sections
========================================================================== */
/* --- Practice tabs ---------------------------------------------------- */
.pa-tabs { display: flex; gap: 6px; margin-top: var(--stack); border-bottom: 1px solid var(--rule-ink); }
.pa-tabs button {
appearance: none; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
padding: 14px 18px; font: 400 clamp(19px, 1.7vw, 24px)/1 var(--serif); color: var(--ink-3);
border-radius: 8px 8px 0 0; position: relative; top: 1px; border: 1px solid transparent; border-bottom: 0;
}
.pa-tabs button:hover { color: var(--ink); }
.pa-tabs button[aria-selected="true"] { color: var(--ink); background: var(--paper); border-color: var(--rule-ink); }
.pa-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); align-items: start; padding-top: 48px; }
.pa-panel + .pa-panel { margin-top: 48px; border-top: 1px solid var(--rule); }
.js .pa-panel + .pa-panel { margin-top: 0; border-top: 0; }
.js .pa-panel[hidden] { display: none; }
.pa-k { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pa-copy .h3 { margin-top: 14px; }
.pa-copy > p { color: var(--ink-2); margin-top: 14px; }
.flow { margin-top: 22px; border-top: 1px solid var(--rule); }
.flow li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--ink-2); }
.flow .flow-gate { color: var(--accent); font-weight: 600; }
.pa-copy .link-arrow { margin-top: 26px; }
.tl { margin-top: 16px; }
.tl-row { position: relative; height: 22px; margin-top: 8px; }
.tl-row::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: var(--rule-ink); }
.tl-row i { position: absolute; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--agent); transform: translateX(-50%); }
.tl-row i.hot { background: var(--warn); border-color: var(--warn); box-shadow: 0 0 0 4px var(--warn-tint); }
.tl-lbl { display: flex; justify-content: space-between; margin-top: 4px; }
.wave { position: relative; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px; background: var(--wave-bg); border-radius: 8px; color: var(--wave-fg); }
.wave .play { width: 14px; height: 14px; }
.wave-bars {
flex: 1; height: 26px;
background-image: repeating-linear-gradient(90deg, var(--wave-bars) 0 2px, transparent 2px 5px);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 L3 6 L6 13 L9 4 L12 15 L15 8 L18 11 L21 3 L24 16 L27 7 L30 12 L33 5 L36 14 L39 9 L42 2 L45 17 L48 6 L51 13 L54 8 L57 11 L60 1 L63 18 L66 5 L69 14 L72 9 L75 4 L78 15 L81 7 L84 12 L87 6 L90 13 L93 9 L96 11 L100 10 L100 20 L0 20Z' fill='black'/%3E%3C/svg%3E") center/100% 100%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 L3 6 L6 13 L9 4 L12 15 L15 8 L18 11 L21 3 L24 16 L27 7 L30 12 L33 5 L36 14 L39 9 L42 2 L45 17 L48 6 L51 13 L54 8 L57 11 L60 1 L63 18 L66 5 L69 14 L72 9 L75 4 L78 15 L81 7 L84 12 L87 6 L90 13 L93 9 L96 11 L100 10 L100 20 L0 20Z' fill='black'/%3E%3C/svg%3E") center/100% 100%;
}
.wave-mark { position: absolute; top: 6px; bottom: 6px; width: 2px; background: var(--accent-bright); }
.transcript { margin-top: 12px; }
.transcript li { display: grid; grid-template-columns: 70px 84px 1fr; gap: 10px; padding: 9px 8px; border-bottom: 1px solid var(--rule-soft); font-size: 13px; align-items: baseline; }
.transcript time { font-size: 11.5px; color: var(--muted); }
.spk { font: 500 10px/1 var(--mono); letter-spacing: .08em; color: var(--ink-3); }
.transcript .hl { background: var(--warn-tint); border-radius: 6px; border-bottom-color: transparent; }
.transcript .hl time { color: var(--warn-ink); font-weight: 500; }
.more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.more { display: block; text-decoration: none; padding: 22px; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; transition: border-color .25s, transform .25s var(--ease); }
.more:hover { border-color: var(--ink); transform: translateY(-2px); }
.more h4 { font-family: var(--serif); font-size: 26px; margin-top: 10px; line-height: 1.1; }
.more p { font-size: 14.5px; color: var(--ink-3); margin-top: 8px; }
/* --- § 05 Loop (dark) ------------------------------------------------- */
.loop-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); margin-top: var(--stack); align-items: start; }
.loop-copy .body-lg { margin-top: 0; }
.rules { margin-top: 32px; border-top: 1px solid var(--rule); }
.rules li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--rule); font-size: 17px; color: var(--night-text-2); }
.rules b { color: var(--night-text-strong); font-weight: 500; }
.rule-n { font-size: 12px; color: var(--accent-on-dark); padding-top: 4px; }
.loop-copy .footnote { margin-top: 26px; }
.loop-visual { position: relative; }
.count { font: 500 12px/1 var(--mono); background: var(--accent-bright); color: var(--on-accent-bright); border-radius: 99px; padding: 4px 8px; vertical-align: 4px; margin-left: 6px; }
.queue li { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-top: 1px solid var(--night-line-soft); }
.queue .q-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.queue b { font-weight: 500; }
.queue .is-focus { background: var(--night-wash); border-radius: var(--r); border-top-color: transparent; box-shadow: inset 0 0 0 1px var(--night-accent-line); }
.queue .is-focus + li { border-top-color: transparent; }
.doc { margin-top: 16px; border-radius: var(--r); background: var(--doc-bg); box-shadow: inset 0 0 0 1px var(--doc-line); color: var(--ink); overflow: visible; }
.doc-bar { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.doc-body { padding: 40px 18px 6px; font: 18px/1.55 var(--serif); }
.doc-re { font: 500 11px/1.3 var(--mono); letter-spacing: .04em; color: var(--ink-3); margin-bottom: 8px; }
.doc-flag { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 10px; padding: 9px 12px; border-radius: 7px; background: var(--warn-tint); border: 1px solid var(--warn-line); font: 13px/1.45 var(--sans); color: var(--warn-ink); }
.doc-flag .ico { margin-top: 2px; color: var(--warn); }
.doc-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 16px 14px; border-top: 1px solid var(--rule); }
.doc-foot > .mono { color: var(--ok); display: inline-flex; gap: 6px; align-items: center; }
.doc-act { display: flex; gap: 6px; }
.doc .btn-ui-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.seal-loop {
position: absolute; width: 128px; height: 128px; left: -56px; top: -84px; z-index: 2;
color: var(--accent-on-dark); transform: rotate(14deg);
background: radial-gradient(circle, var(--band) 60%, transparent 61%); border-radius: 50%;
}
:has(> .seal-loop) { margin-top: 40px; }
/* --- § 06 Deadlines --------------------------------------------------- */
.dl-stage { display: grid; grid-template-columns: minmax(0, 4.6fr) auto minmax(0, 6.4fr); gap: clamp(16px, 2.4vw, 36px); align-items: center; margin-top: var(--stack); padding-bottom: 12px; }
.dl-arrow { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--agent); }
.dl-arrow svg { width: 80px; height: 16px; }
.docket li { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 13px 8px; border-bottom: 1px solid var(--rule-soft); }
.d-date { text-align: center; border: 1px solid var(--rule); border-radius: 8px; padding: 6px 0 4px; background: var(--paper); }
.d-date span { display: block; color: var(--muted); letter-spacing: .1em; }
.d-date b { font: 400 26px/1 var(--serif); }
.d-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.d-main > b { font-weight: 600; font-size: 14.5px; }
.d-focus { background: linear-gradient(90deg, var(--agent-tint), transparent); border-radius: 8px; }
.d-focus .d-date { border-color: var(--agent); background: var(--card); }
.d-src { color: var(--agent); display: flex; gap: 5px; align-items: center; margin-top: 2px; }
.esc { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; }
.esc-k { display: inline-flex; gap: 6px; align-items: center; color: var(--accent); }
.esc-steps { display: flex; gap: 6px; }
.esc-step { padding: 5px 9px; border-radius: 99px; border: 1px dashed var(--rule-strong); color: var(--muted); }
.esc-step.on { border-style: solid; border-color: var(--ink); color: var(--ink); }
/* --- § 07 Security ---------------------------------------------------- */
.sec-split { display: grid; grid-template-columns: minmax(0, 7.6fr) minmax(0, 4.4fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: var(--stack); }
.sec-split .ledger { margin-top: 0; }
.ledger-controls .ledger-head, .ledger-controls .ledger-row { grid-template-columns: 40px minmax(0, 4.2fr) minmax(0, 5fr) 92px; gap: 18px; }
.ledger-controls .ledger-name { font-size: clamp(22px, 1.9vw, 27px); gap: 12px; }
.ledger-controls .ledger-desc { font-size: 15px; }
.ledger-controls .pill { justify-self: start; }
.ledger-controls .ledger-row { align-items: center; padding: 18px 0; }
/* ==========================================================================
15 Forms
--------------------------------------------------------------------------
========================================================================== */
.form { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form-field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.form-field > label, .form-field > legend { font: 500 11.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 0; }
.form-field .req { color: var(--accent); }
.input, .select, .textarea {
width: 100%; min-height: 50px; padding: 12px 14px; font-size: 16px; color: var(--ink);
background: var(--card); border: 1px solid var(--field-line); border-radius: 8px;
transition: border-color .2s, box-shadow .2s;
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.select { appearance: none; padding-right: 40px; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.input::placeholder, .textarea::placeholder { color: var(--placeholder); }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.check { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--field-line); border-radius: 8px; background: var(--card); font-size: 15px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.form-note { font-size: 13.5px; color: var(--muted); }
.form-panel { background: var(--card); border: 1px solid var(--rule-strong); border-radius: var(--r-xl); padding: clamp(22px, 3vw, 40px); box-shadow: var(--shadow); }
/* Segmented toggle (e.g. Early access / Demo) built from radio inputs */
.segmented { display: inline-flex; padding: 4px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--paper); }
.segmented label { padding: 9px 16px; border-radius: 999px; font-size: 14.5px; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--ink); color: var(--paper); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ==========================================================================
16 Prose (privacy, terms, long-form)
--------------------------------------------------------------------------
…h2, h3, p, ul, ol, a, blockquote, table…
========================================================================== */
.prose { max-width: 70ch; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--serif); font-size: clamp(28px, 3vw, 38px); line-height: 1.1; color: var(--ink); margin-top: 2.2em; padding-top: 18px; border-top: 1px solid var(--rule-ink); }
.prose h3 { font-family: var(--serif); font-size: 24px; line-height: 1.2; color: var(--ink); margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: none; }
.prose ul li { position: relative; }
.prose ul li::before { content: "§"; position: absolute; left: -1.2em; color: var(--accent); font-family: var(--serif); }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .45em; }
.prose a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: 18px; font: 21px/1.45 var(--serif); color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th { text-align: left; font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule-ink); padding: 10px 8px; }
.prose td { border-bottom: 1px solid var(--rule); padding: 10px 8px; vertical-align: top; }
.prose .updated { font: 500 11.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* Two-column legal layout: sticky table of contents + prose */
.legal-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 3vw, 48px); }
.toc { position: sticky; top: 96px; align-self: start; border-top: 1px solid var(--rule-ink); padding-top: 14px; }
.toc a { display: block; padding: 6px 0; font-size: 14px; color: var(--ink-3); text-decoration: none; }
.toc a:hover { color: var(--accent); }
/* ==========================================================================
17 Final CTA band
========================================================================== */
.final { padding: clamp(80px, 9vw, 136px) 0; text-align: center; position: relative; overflow: hidden; border-top: 1px solid var(--rule); }
.final-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.seal-final { width: 116px; height: 116px; margin-bottom: 36px; }
.display-final { font-size: clamp(2.9rem, 8vw, 8.4rem); line-height: .92; max-width: 14ch; margin: 0 auto; }
.final .body-lg { max-width: 44ch; }
.final .cta-row { margin-top: 36px; }
/* ==========================================================================
18 Motion (progressive enhancement — content is always visible without JS)
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
.js .hero .feed-item, .js .hero .approval { animation: rise .7s var(--ease) both; animation-delay: calc(.35s + var(--d) * .2s); }
.js .hero .fields-card { animation: rise .7s var(--ease) 1.2s both; }
.js .seal-hero { animation: stamp .7s cubic-bezier(.3,1.6,.5,1) 1.6s both; }
.js .crew-node { animation: rise .6s var(--ease) both; }
.js .crew-node:nth-child(2) { animation-delay: .06s; } .js .crew-node:nth-child(3) { animation-delay: .12s; }
.js .crew-node:nth-child(4) { animation-delay: .18s; } .js .crew-node:nth-child(5) { animation-delay: .24s; }
.js .crew-node:nth-child(6) { animation-delay: .30s; } .js .crew-node:nth-child(7) { animation-delay: .36s; }
.js .crew-node:nth-child(8) { animation-delay: .5s; }
.crew-node.is-run .mg::after { animation: ring 2s var(--ease) infinite; }
.pulse { animation: pulse 2.4s infinite; }
.rekey .cursor::after { animation: blink 1s steps(1) infinite; }
.ellipsis i { animation: blink 1.2s infinite; }
.ellipsis i:nth-child(2) { animation-delay: .2s; }
.ellipsis i:nth-child(3) { animation-delay: .4s; }
.seal-final { animation: spin 40s linear infinite; }
.paused .seal-final, .paused .crew-node.is-run .mg::after { animation-play-state: paused; }
/* Scroll reveal: armed only when site.js adds .reveal-ready */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-ready [data-reveal].in { opacity: 1; transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes stamp { from { opacity: 0; transform: rotate(-30deg) scale(1.6); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--ok-halo); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes ring { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
/* ==========================================================================
19 Responsive
Breakpoints: 1180 (nav collapses) · 980 (tablet) · 720 (mobile) · 400 (small)
========================================================================== */
@media (max-width: 1180px) {
.nav { display: none; }
.mnav { display: block; }
.hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; }
.hero-copy > :not(.notes) { grid-column: 1; }
.hero-copy .notes { grid-column: 2; grid-row: 1 / span 3; margin-top: 22px; }
.hero-visual { margin: 8px 24px 0 48px; }
.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
.foot-top { grid-template-columns: 1fr; }
.sec-split { grid-template-columns: minmax(0, 1fr); }
.memo { max-width: 640px; }
.dl-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.dl-arrow { display: none; }
}
@media (max-width: 980px) {
.sec-label { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 14px; margin-bottom: 24px; }
.sec-n { font-size: 24px; }
.sec-body { grid-column: 1 / -1; grid-row: auto; }
.exhibits { grid-template-columns: minmax(0, 1fr); }
.exhibit, .exhibit + .exhibit { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 240px 1fr; column-gap: 28px; align-items: start; }
.exhibit-vis { grid-row: 1 / span 3; margin: 0; height: 150px; }
.ledger-head { display: none; }
.ledger-row { grid-template-columns: 40px minmax(0, 1fr); gap: 10px 12px; }
.ledger-desc, .ledger-out { grid-column: 2; }
.ledger-controls .ledger-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
.ledger-controls .ledger-desc { grid-column: 2 / -1; }
.ledger-controls .ledger-row .pill { grid-column: 3; grid-row: 1; }
.pa-panel { grid-template-columns: minmax(0, 1fr); }
.loop-grid { grid-template-columns: minmax(0, 1fr); }
.loop-visual { margin-top: 32px; max-width: 760px; }
.dl-stage { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
.notice { margin: 0 24px 12px 0; }
.tiers { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.split, .page-hero-grid, .legal-grid { grid-template-columns: minmax(0, 1fr); }
.cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.toc { position: static; }
.hero-copy { display: block; }
.hero-copy .notes { margin-top: 36px; }
.sec-aside { grid-column: 1 / -1; grid-row: auto; order: 3; margin-top: 36px; max-width: none; }
.hero-visual { margin: 24px 0 0; }
.fields-card { left: 16px; }
.seal-hero { right: 8px; }
}
@media (max-width: 720px) {
body { font-size: 16px; }
:root { --stack: 36px; }
.hide-md { display: none; }
.header-cta > .theme-btn { display: none; }
.header-inner { height: 64px; gap: 12px; }
.brand-word { font-size: 24px; }
.display { letter-spacing: -.025em; }
.display-hero { font-size: clamp(2.8rem, 13.4vw, 5rem); line-height: .93; margin-top: 16px; }
.hero-head { margin-top: 28px; }
.kicker { font-size: 11px; letter-spacing: .12em; }
.cta-row .btn { width: 100%; }
.btn-xl { --h: 58px; font-size: 17px; }
/* Hero mock collapses to one column */
.crew-lbl { display: none; }
.crew { margin-bottom: 14px; }
.crew::before, .crew-atty::before { top: 13px; }
.crew-node .mg { width: 26px; height: 26px; font-size: 8.5px; box-shadow: 0 0 0 3px var(--paper); }
.crew-node:not(.is-done):not(.is-run):not(.crew-atty) .mg { box-shadow: 0 0 0 3px var(--paper), inset 0 0 0 1px var(--rule-strong); }
.app-hero .app-body { grid-template-columns: minmax(0, 1fr); }
.app-side { display: none; }
.app-main { padding: 14px; }
.matter-head .pill { display: none; }
.matter-title { font-size: 22px; }
.feed-item { grid-template-columns: 26px 1fr; font-size: 13px; gap: 10px; }
.feed-item .mg { width: 26px; height: 26px; font-size: 9px; }
.feed-item time { display: none; }
.handoff { grid-template-columns: minmax(0, 1fr); margin: 6px -6px; padding: 10px 8px; }
.approval { flex-direction: column; align-items: flex-start; }
.fields-card { position: relative; left: auto; top: auto; width: auto; max-width: 340px; margin: -18px auto 0 10px; }
.seal-hero { display: none; }
.hero-visual { padding-bottom: 0; }
.hero-visual .fig-cap { position: static; margin: 14px 0 0; max-width: none; }
.strip-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
.strip-list { font-size: 19px; }
.exhibit, .exhibit + .exhibit { display: block; }
.exhibit-vis { margin-bottom: 18px; }
.steps { grid-template-columns: minmax(0, 1fr); }
.step p { min-height: 0; }
.step-vis { height: auto; min-height: 120px; }
.ledger-name { font-size: 25px; gap: 10px; }
.ledger-name .mg { width: 26px; height: 26px; font-size: 9px; }
.ledger-controls .ledger-row { grid-template-columns: 30px minmax(0, 1fr); }
.ledger-controls .ledger-row .pill { grid-column: 2; grid-row: auto; }
.ledger-controls .ledger-name .ico-lg { width: 20px; height: 20px; }
/* Practice tabs: 2×2 segmented grid instead of a sideways-scrolling strip */
.pa-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-bottom: 0; }
.pa-tabs[hidden] { display: none; }
.pa-tabs button { top: 0; border: 1px solid var(--rule-strong); border-radius: 8px; padding: 12px; font-size: 18px; justify-content: flex-start; }
.pa-tabs button[aria-selected="true"] { border-color: var(--rule-ink); box-shadow: inset 0 -2px 0 var(--accent); }
.pa-panel { padding-top: 32px; }
.more-grid { grid-template-columns: minmax(0, 1fr); }
.xcheck th:nth-child(3), .xcheck td:nth-child(3), .xcheck th:nth-child(5), .xcheck td:nth-child(5) { display: none; }
.money th:nth-child(4), .money td:nth-child(4) { display: none; }
.mock-table { font-size: 12px; }
.transcript li { grid-template-columns: 62px 1fr; }
.transcript li p { grid-column: 1 / -1; }
.ph { flex-wrap: wrap; }
.queue li { grid-template-columns: 26px 1fr; }
.queue .mg { width: 26px; height: 26px; font-size: 9px; }
.queue .pill { grid-column: 2; justify-self: start; }
.doc-body { font-size: 16.5px; padding-top: 58px; }
.srcpop { font-size: 10px; line-height: 1.35; white-space: normal; width: max-content; max-width: 230px; left: auto; right: -12px; flex-wrap: wrap; }
.srcpop::after { left: auto; right: 30px; }
.seal-loop { width: 76px; height: 76px; left: auto; right: -2px; top: -68px; }
:has(> .seal-loop) { margin-top: 56px; }
.h2-xl { font-size: clamp(2.8rem, 13vw, 5rem); }
.notice { padding: 18px 18px 26px; margin-right: 8px; }
.notice-p { font-size: 16px; }
.notice-tag { right: -6px; }
.docket li { grid-template-columns: 48px 1fr; }
.docket .pill { grid-column: 2; justify-self: start; }
.esc { flex-direction: column; align-items: flex-start; }
.tier { padding: 24px; }
.memo { padding: 24px 22px; }
.seal-memo { width: 72px; height: 72px; right: 14px; top: 48px; }
.memo-t { max-width: 12ch; }
.form-row, .check-grid, .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); }
.foot-cols { grid-template-columns: 1fr 1fr; row-gap: 32px; }
.foot-bottom { flex-direction: column; align-items: flex-start; }
/* Sticky CTA bar (revealed by JS once the hero leaves the viewport) */
.sticky-cta {
display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-top: 1px solid var(--rule); transform: translateY(110%); transition: transform .35s var(--ease);
}
.sticky-cta[hidden] { display: none; }
.sticky-cta.show { transform: none; }
}
@media (max-width: 400px) {
.cta-long { display: none; }
.cta-short { display: inline; }
.btn { padding: 0 18px; }
.header-cta .btn-ink { padding: 0 12px; font-size: 13px; }
.gate { grid-template-columns: 84px 1fr; }
.seal-sm { width: 84px; height: 84px; }
.doc-act .btn-ui:first-child { display: none; }
}
/* Typography rule: no italics. Emphasis = oxblood color, upright. */
em, i, cite, address { font-style: normal; }
.charter-sign .sig { font-style: italic; }
/* Safety net: never allow sideways page scroll on phones (decorative seals / mockups may bleed). */
html, body { overflow-x: clip; }