/* ============================================================
* Agentz Cloud landing (was apu.bot www-face, renamed 2026-09-05) — SKYZAI BRAND GUIDE CONFORMANCE BUILD
*
* Adoption contract: design-tokens.css v7.0.1 is imported FIRST and byte-
* unmodified (sha256 recorded in README.md). Everything below is local
* product styling that consumes those tokens. Local rules are unlayered, so
* they win over the substrate's @layer cascade by design, not by accident.
*
* Canon: 02_SKYZAI/.../branding/skyzai_brand_guide-v7.0.1.html
* Law applied here:
* - public shell declares data-brand only; surface follows the OS
* - self-hosted Roboto; no network font request
* - colour comes from tokens; this file declares no new brand hue
* - glow is the Brand Ambient Glow primitive, never decorative blobs
* - motion is drift and fade only; no bounce, no spring
* ============================================================ */
/* Self-hosted variable Roboto and Roboto Mono; no third-party font request.
Declaration copied verbatim from the canon guide (lines 44-57). */
@font-face{font-family:'Roboto';src:url('assets/fonts/Roboto-latin.woff2') format('woff2');
font-weight:100 900;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2192,U+2212;font-display:swap}
@font-face{font-family:'Roboto';src:url('assets/fonts/Roboto-greek.woff2') format('woff2');
font-weight:100 900;
unicode-range:U+0370-03FF;font-display:swap}
@font-face{font-family:'Roboto Mono';src:url('assets/fonts/RobotoMono-latin.woff2') format('woff2');
font-weight:100 700;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F;font-display:swap}
@font-face{font-family:'Roboto Mono';src:url('assets/fonts/RobotoMono-greek.woff2') format('woff2');
font-weight:100 700;
unicode-range:U+0370-03FF;font-display:swap}
/* ============================================================
* LOCAL REPAIR 1 — two tokens the ambient-glow primitive needs
*
* .brand-ambient-glow (canon guide line 602) reads --sz-flow-flow-blend and
* --sz-flow-vessel-blend. Both are declared in the guide HTML only; neither
* is in design-tokens.css, which is the file product code is told to consume.
* Copying the primitive without these gives mix-blend-mode: normal silently.
* Values below are the canon guide's own: dark = line 251-252,
* light = line 1822-1823.
* ============================================================ */
:root {
--sz-flow-flow-blend: screen;
--sz-flow-vessel-blend: screen;
}
@media (prefers-color-scheme: light) {
:root[data-brand] {
--sz-flow-flow-blend: multiply;
--sz-flow-vessel-blend: normal;
}
}
:root[data-surface="light"] { --sz-flow-flow-blend: multiply; --sz-flow-vessel-blend: normal; }
:root[data-surface="dark"] { --sz-flow-flow-blend: screen; --sz-flow-vessel-blend: screen; }
/* ============================================================
* LOCAL REPAIR 2 — light-surface inks for the four sector colours
*
* The four sector hues are appearance-invariant in canon: they hold the same
* Material 500 value in every theme block. As type on a white substrate they
* fail WCAG AA (electronic-lab #FFEB3B on #FFFFFF is 1.19:1). A public .org
* page must render on both surfaces, so the sector colour is used here as a
* MARKER, and sector TYPE reads from --ink-* below.
*
* No number is invented. Each light value is the canon's own light-surface
* pick for the same hue family:
* finance #D32F2F design-tokens.css light `error` key
* insurance #2E7D32 design-tokens.css true-tone `primary` key
* (2026-09-05: sector I displays as "Intelligence", R as "Realpolitik" by
* owner directive; canon token NAMES --sector-insurance / --sector-real-infra
* are unchanged — renaming them is a canon matter.)
* real-infra #1565C0 design-tokens.css light `primary` key
* electronic-lab #B7791F design-tokens.css [data-brand="org"] light primary
* ============================================================ */
:root {
--ink-finance: var(--sector-finance);
--ink-insurance: var(--sector-insurance);
--ink-real-infra: var(--sector-real-infra);
--ink-electronic-lab: var(--sector-electronic-lab);
}
@media (prefers-color-scheme: light) {
:root[data-brand] {
--ink-finance: #D32F2F;
--ink-insurance: #2E7D32;
--ink-real-infra: #1565C0;
--ink-electronic-lab: #B7791F;
}
}
:root[data-surface="light"] {
--ink-finance: #D32F2F;
--ink-insurance: #2E7D32;
--ink-real-infra: #1565C0;
--ink-electronic-lab: #B7791F;
}
:root[data-surface="dark"] {
--ink-finance: var(--sector-finance);
--ink-insurance: var(--sector-insurance);
--ink-real-infra: var(--sector-real-infra);
--ink-electronic-lab: var(--sector-electronic-lab);
}
/* ============================================================
* LOCAL REPAIR 3 — ambient glow dims on a light substrate
*
* The canon dims the glow with [data-theme="light"] .brand-ambient-glow
* (guide lines 648-649). A public .com/.org shell is forbidden from
* declaring data-theme, so on this page that rule can never match and the
* dark-weight wash would burn through a white surface. Same opacities,
* reached by the selectors a public shell is actually allowed to use.
* ============================================================ */
/* ============================================================
* LOCAL REPAIR 4 — the surface-container ramp on a light substrate
*
* This is the largest gap the build hit, and it is in the law itself.
*
* [data-theme="light"] repoints EIGHTEEN surface variables, including the
* whole Material 3 surface-container ramp (--surface-dim, -lowest, -low,
* -container, -high, -highest, -bright) plus --md-sys-color-outline and
* --md-sys-color-surface-variant.
*
* The public-shell light block — @media (prefers-color-scheme: light)
* :root[data-brand] — repoints NINE, and none of them is a container role.
* So a public .com/.org page renders its Material surface roles at the DARK
* literals on a white page: black cards, invisible text. The compliance
* checklist forbids the page from declaring data-theme, so the page cannot
* reach the block that would have fixed it.
*
* Values below are copied from the canon's own [data-theme="light"] block
* (design-tokens.css lines 841-892). Nothing here is invented; this only
* routes canon light values to the selectors a public shell is allowed to use.
* ============================================================ */
@media (prefers-color-scheme: light) {
:root[data-brand] {
--md-sys-color-surface-variant: #EEF2F7;
--md-sys-color-outline: #6B7280;
--surface-dim: #F4F4F4;
--surface-container-lowest: #FFFFFF;
--surface-container-low: #FAFBFD;
--surface-container: #F8FAFC;
--surface-container-high: #EEF2F7;
--surface-container-highest: #E8EDF3;
--surface-bright: #FFFFFF;
--scrim: rgba(0, 0, 0, 0.32);
}
}
:root[data-surface="light"] {
--md-sys-color-surface-variant: #EEF2F7;
--md-sys-color-outline: #6B7280;
--surface-dim: #F4F4F4;
--surface-container-lowest: #FFFFFF;
--surface-container-low: #FAFBFD;
--surface-container: #F8FAFC;
--surface-container-high: #EEF2F7;
--surface-container-highest: #E8EDF3;
--surface-bright: #FFFFFF;
--scrim: rgba(0, 0, 0, 0.32);
}
:root[data-surface="dark"] {
--md-sys-color-surface-variant: #111111;
--md-sys-color-outline: #555555;
--surface-dim: #050505;
--surface-container-lowest: #060606;
--surface-container-low: #080808;
--surface-container: #0A0A0A;
--surface-container-high: #111111;
--surface-container-highest: #161616;
--surface-bright: #1A1A1A;
--scrim: rgba(0, 0, 0, 0.48);
}
/* ── Local surface carriers ─────────────────────────────────── */
:root {
--line: var(--md-sys-color-outline-variant);
--ink: var(--md-sys-color-on-background);
--muted: var(--md-sys-color-on-surface-variant);
--dim: var(--md-sys-color-outline); /* borders and rules ONLY — an
outline role is not a text role. Using it as type failed WCAG AA at
2.7:1 on the dark substrate. */
/* Third type step, derived from the on-surface-variant TEXT role rather
than borrowed from an outline. The mix ratio differs by surface because
the AA floor bites from opposite directions; measured values are recorded
in CONFORMANCE.md, not asserted here. */
--hint: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 82%, var(--bg));
/* Accent used as FILL (button and badge backgrounds, which carry
--md-sys-color-on-primary). Safe in both surfaces. */
--accent: var(--md-sys-color-primary);
/* Accent used as TEXT. On dark these are the same value. On light they are
not: see LOCAL REPAIR 5. */
--accent-ink: var(--md-sys-color-primary);
--nav-scrim: color-mix(in srgb, var(--bg), transparent 15%);
--card: var(--surface-container);
--card-high: var(--surface-container-high);
}
/* ============================================================
* LOCAL REPAIR 5 — the .org light primary fails AA as small text
*
* [data-brand="org"] on a light substrate sets --md-sys-color-primary to
* #B7791F. Against that block's own --bg (#FFFFFF) that pairing measures
* 3.64:1 — below the 4.5:1 floor for normal text, and below it again on
* --surface-container (#F8FAFC, 3.48:1). design-tokens.css carries two
* explicit "WCAG AA repair" comments, for on-secondary and on-error; the
* primary-as-text pairing was not among them.
*
* #B7791F is kept wherever it is a FILL behind --md-sys-color-on-primary
* (#050505), which measures well above the floor. Text moves to #92650A —
* the canon's own true-tone secondary key, the same hue family, one step
* darker. No new hue is introduced and no number is invented.
*
* The hint step is also retuned here: 82% toward the text role reads as
* quiet on black but drops to 4.02:1 on white, so the light substrate takes
* a heavier mix. On a light surface the hierarchy is carried by size and
* family as much as by value, because AA caps how quiet type may get.
* ============================================================ */
@media (prefers-color-scheme: light) {
:root[data-brand] {
--accent-ink: #92650A;
--ink-electronic-lab: #92650A;
--hint: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 96%, var(--bg));
}
}
:root[data-surface="light"] {
--accent-ink: #92650A;
--ink-electronic-lab: #92650A;
--hint: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 96%, var(--bg));
}
:root[data-surface="dark"] {
--accent-ink: var(--md-sys-color-primary);
/* Must be restated here, not only in LOCAL REPAIR 2. The light-media rule
above has the same specificity and both are unlayered, so source order
decides — and REPAIR 2 sits earlier in this file. Without this line, a
visitor on a light OS who forces the dark surface keeps the light sector
ink (#92650A) on black: measured 3.85:1, an AA failure that appears in
that cross state only. */
--ink-electronic-lab: var(--sector-electronic-lab);
--hint: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 82%, var(--bg));
}
/* ============================================================
* LOCAL REPAIR 6 — the manual accessibility override does not work
*
* The compliance checklist requires: "Manual/user accessibility override
* still works via data-surface='light|dark'". On a public shell it does not,
* and it fails in exactly the case it exists for — a visitor whose OS says
* one thing and who needs the other.
*
* Proven from the live CSSOM on this page, OS set to dark, data-surface set
* to light. Both rules match, both live in @layer tokens of design-tokens.css:
*
* [data-surface="light"] --bg: #FFFFFF (0,1,0)
* @media (prefers-color-scheme: dark) :root[data-brand] --bg: #050505 (0,2,0)
*
* The media rule carries one more compound, so it wins and --bg resolves to
* #050505. The override is inert. Because LOCAL REPAIR 4 does move the
* container ramp, the page went black-text-on-black — a forced light surface
* was worse than none.
*
* Repaired here by matching the media rule's specificity — :root[data-surface]
* is also (0,2,0) — and being unlayered, which beats @layer tokens outright.
* In canon the same one-word change to design-tokens.css would fix it for
* every surface at once.
*
* Values are the canon's own light and dark appearances; nothing is invented.
* ============================================================ */
:root[data-surface="light"] {
--bg: #FFFFFF;
--surface: #F8FAFC;
--elevated: #EEF2F7;
--md-sys-color-background: #FFFFFF;
--md-sys-color-surface: #F8FAFC;
--md-sys-color-on-background: #101418;
--md-sys-color-on-surface: #101418;
--md-sys-color-on-surface-variant: #5F6368;
--md-sys-color-outline-variant: #D8E1EE;
}
:root[data-surface="dark"] {
--bg: #050505;
--surface: #0A0A0A;
--elevated: #111111;
--md-sys-color-background: #050505;
--md-sys-color-surface: #0A0A0A;
--md-sys-color-on-background: #F3F4F6;
--md-sys-color-on-surface: #FFFDE7;
--md-sys-color-on-surface-variant: #9CA3AF;
--md-sys-color-outline-variant: #2A2A2A;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
background: var(--bg);
color: var(--ink);
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.6;
scroll-behavior: smooth;
color-scheme: light dark;
}
:root[data-surface="light"] { color-scheme: light; }
:root[data-surface="dark"] { color-scheme: dark; }
body { overflow-x: hidden; background: var(--bg); }
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: var(--z-modal, 1000);
background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
padding: 12px 20px; border-radius: 0 0 var(--shape-sm) 0;
font: var(--m3-type-label-large);
}
.skip-link:focus { left: 0; }
/* ── NAV — proof glass: controls and nav only ───────────────── */
nav.primary {
position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky, 100);
display: flex; align-items: center; gap: var(--space-4);
padding: var(--space-3) var(--space-6);
background: var(--nav-scrim);
-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
border-bottom: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) {
nav.primary { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.nav-logo {
font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.05em;
color: var(--muted); text-decoration: none;
display: inline-flex; align-items: center; min-height: var(--target-min);
}
.nav-logo span { color: var(--ink); font-weight: 500; }
.nav-links { display: flex; gap: var(--space-5); margin-left: auto; }
.nav-links a {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
color: var(--muted); text-decoration: none;
padding: 7px 14px; border-radius: 999px;
transition: color var(--dur-short4) var(--ease-standard),
background-color var(--dur-short4) var(--ease-standard);
display: inline-flex; align-items: center; min-height: var(--target-min);
}
.nav-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav-cta {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
color: var(--md-sys-color-on-primary); background: var(--md-sys-color-primary);
text-decoration: none; padding: 0 var(--space-4);
border-radius: var(--shape-full);
display: inline-flex; align-items: center; min-height: var(--target-min);
transition: filter var(--dur-short4) var(--ease-standard);
}
.nav-cta:hover { filter: brightness(1.08); }
/* Surface override — the checklist requires the manual accessibility
override to keep working on a public shell. This is that control. */
.nav-hamburger {
display: none; background: none; border: 0; cursor: pointer;
min-width: var(--target-min); min-height: var(--target-min);
flex-direction: column; justify-content: center; gap: 5px; align-items: center;
}
.nav-hamburger span {
display: block; width: 20px; height: 1.5px; background: var(--muted);
transition: transform var(--dur-short4) var(--ease-standard),
opacity var(--dur-short4) var(--ease-standard);
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
nav.mobile {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
display: flex; flex-direction: column; padding: 10px var(--space-6) var(--space-6);
background: var(--surface-container);
border: 1px solid var(--line); border-bottom: 0;
border-radius: 28px 28px 0 0;
box-shadow: 0 -12px 40px -12px rgb(0 0 0 / 0.5);
transform: translateY(102%);
transition: transform var(--dur-long2) var(--ease-emphasized-decelerate);
}
nav.mobile.open { transform: translateY(0); }
nav.mobile::before {
content: ""; position: absolute; top: 8px; left: 50%; translate: -50% 0;
width: 32px; height: 4px; border-radius: 999px;
background: color-mix(in srgb, var(--muted) 45%, transparent);
}
nav.mobile a {
font-family: var(--font-mono); font-size: 13px; color: var(--muted);
text-decoration: none; display: flex; align-items: center;
min-height: var(--target-min); border-bottom: 1px solid var(--line);
border-radius: 12px; padding: 0 var(--space-3);
}
nav.mobile a:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
nav.mobile a:last-child { border-bottom: 0; color: var(--accent-ink); }
/* ── HERO ───────────────────────────────────────────────────── */
.hero {
position: relative; isolation: isolate; overflow: hidden;
min-height: 100svh; padding: 120px var(--space-6) var(--space-7);
display: flex; flex-direction: column; justify-content: center;
}
/* .brand-glow-surface + .brand-ambient-glow are the canon primitive,
copied from the guide. The wrapper does the containment. */
.brand-glow-surface { position: relative; isolation: isolate; overflow: hidden; }
@keyframes ambient-room-breathe {
0% { transform: translate3d(-0.45%, -0.7%, 0) scale(1.006); opacity: 0.62; filter: blur(24px) hue-rotate(-3deg) saturate(1); }
50% { transform: translate3d(0.42%, 0.15%, 0) scale(1.014); opacity: 0.76; filter: blur(24px) hue-rotate(5deg) saturate(1.08); }
100% { transform: translate3d(0.25%, 0.75%, 0) scale(1.018); opacity: 0.70; filter: blur(24px) hue-rotate(-2deg) saturate(1.04); }
}
@keyframes ambient-panel-spill {
0% { transform: translate3d(-0.25%, 0.1%, 0) scale(1); opacity: 0.48; filter: blur(10px) hue-rotate(0deg) saturate(1); }
50% { transform: translate3d(0.3%, -0.18%, 0) scale(1.006); opacity: 0.60; filter: blur(10px) hue-rotate(5deg) saturate(1.06); }
100% { transform: translate3d(0.12%, 0.24%, 0) scale(1.01); opacity: 0.54; filter: blur(10px) hue-rotate(-3deg) saturate(1.03); }
}
.hero-body {
position: relative; z-index: 2;
display: grid; grid-template-columns: 1fr auto 1fr;
gap: var(--space-7); align-items: center;
max-width: 1400px; margin: 0 auto; width: 100%;
}
.stat-col { display: flex; flex-direction: column; gap: var(--space-6); }
.stat-col-right { text-align: right; }
.stat-val {
font: var(--m3-type-headline-medium); font-weight: 300;
color: var(--ink); letter-spacing: -0.01em;
}
.stat-lbl { font: var(--m3-type-body-medium); color: var(--muted); margin-top: 2px; }
.stat-hash {
font-family: var(--font-mono); font-size: 11px; color: var(--hint);
margin-top: 4px; letter-spacing: 0.03em;
}
.hero-center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.logo-wrap { width: 128px; height: 128px; margin-bottom: var(--space-4); }
/* The former APU-no-bg.svg (retired with the apu.bot name 2026-09-05; git
history holds it) froze fill="#FFFDE7" — the dark appearance's
--md-sys-color-on-surface — into the asset, so it disappears on a light
surface. The mark is inlined in the page with fill="currentColor" and takes
its colour from --sz-seal, which is that same role, resolved per surface.
agentz-cloud.svg / agentz-cloud-seal.svg hold the mark for file consumers. */
.agentz-mark { width: 100%; height: 100%; display: block; color: var(--sz-seal); }
.tagline {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-4);
}
.headline {
font: var(--m3-type-display-medium); font-weight: 300;
color: var(--ink); letter-spacing: -0.02em;
}
.headline em { font-style: normal; color: var(--accent-ink); }
.subhead {
font: var(--m3-type-body-large); color: var(--muted);
margin-top: var(--space-4); max-width: 46ch;
}
.cta-group { margin-top: var(--space-6); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.cta-btn {
background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
font: var(--m3-type-label-large); letter-spacing: var(--m3-tracking-label-large);
text-decoration: none; padding: 0 var(--space-6);
border-radius: var(--shape-full); box-shadow: var(--elev-level-1);
display: inline-flex; align-items: center; min-height: var(--target-min);
transition: box-shadow var(--dur-medium1) var(--ease-standard),
filter var(--dur-medium1) var(--ease-standard);
}
.cta-btn:hover { box-shadow: var(--elev-level-2); filter: brightness(1.06); }
.cta-sub {
font-family: var(--font-mono); font-size: 11px; color: var(--hint);
display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.cta-sub span { color: var(--hint); opacity: 0.6; }
/* Sector corner marks */
.sector-mark { position: absolute; z-index: 2; display: none; }
@media (min-width: 1100px) { .sector-mark { display: block; } }
.sector-mark.tl { top: 104px; left: var(--space-6); }
.sector-mark.tr { top: 104px; right: var(--space-6); text-align: right; }
.sector-mark.bl { bottom: 148px; left: var(--space-6); }
.sector-mark.br { bottom: 148px; right: var(--space-6); text-align: right; }
.sector-tag { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; }
.badge {
width: 18px; height: 18px; border-radius: var(--shape-full);
display: inline-flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 500; color: var(--md-sys-color-on-primary);
}
.tag-F .badge { background: var(--sector-finance); }
.tag-I .badge { background: var(--sector-insurance); }
.tag-R .badge { background: var(--sector-real-infra); }
.tag-E .badge { background: var(--sector-electronic-lab); }
.tag-F .sname { color: var(--ink-finance); }
.tag-I .sname { color: var(--ink-insurance); }
.tag-R .sname { color: var(--ink-real-infra); }
.tag-E .sname { color: var(--ink-electronic-lab); }
.sector-hint { font-family: var(--font-mono); font-size: 10px; color: var(--hint); margin-top: 4px; }
/* Floating context fields */
.float-field { position: absolute; z-index: 2; display: none; max-width: 260px; }
@media (min-width: 1680px) { .float-field { display: block; } }
.float-field .row {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}
.float-field .sub { font-family: var(--font-mono); font-size: 10px; color: var(--hint); margin-top: 3px; }
.ff-1 { top: 150px; left: 16%; } .ff-2 { top: 250px; left: 9%; }
.ff-3 { top: 360px; left: 14%; } .ff-4 { bottom: 230px; left: 11%; }
.ff-5 { top: 160px; right: 15%; text-align: right; }
.ff-6 { top: 268px; right: 9%; text-align: right; }
.ff-7 { top: 372px; right: 14%; text-align: right; }
.ff-8 { bottom: 232px; right: 11%; text-align: right; }
.float-field[class*="ff-5"] .row, .float-field[class*="ff-6"] .row,
.float-field[class*="ff-7"] .row, .float-field[class*="ff-8"] .row { justify-content: flex-end; }
.sector-strip {
position: relative; z-index: 2;
display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 1px; margin-top: var(--space-7);
background: var(--line); border: 1px solid var(--line);
border-radius: var(--shape-md); overflow: hidden;
}
.sector-block {
background: var(--card); padding: var(--space-4);
display: flex; flex-direction: column; gap: 4px;
}
.sb-letter { font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
.sl-F { color: var(--ink-finance); } .sl-I { color: var(--ink-insurance); }
.sl-R { color: var(--ink-real-infra); } .sl-E { color: var(--ink-electronic-lab); }
.sb-name { font: var(--m3-type-title-small); color: var(--ink); }
.sb-hint { font-family: var(--font-mono); font-size: 10px; color: var(--hint); }
/* ── SECTIONS ───────────────────────────────────────────────── */
section.band { padding: var(--space-9) var(--space-6); max-width: 1200px; margin: 0 auto; }
.section-label {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
color: var(--accent-ink); text-transform: uppercase; margin-bottom: var(--space-4);
}
.section-headline {
font: var(--m3-type-display-small); font-weight: 300;
color: var(--ink); letter-spacing: -0.02em; margin-bottom: var(--space-6);
}
.section-headline em { font-style: normal; color: var(--muted); }
/* Evidence tier — A7 discipline. A claim above concept carries its tier. */
.fire-grid, .key-grid {
display: grid; gap: var(--space-4);
}
.fire-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.key-grid { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.fire-desc { font: var(--m3-type-body-medium); color: var(--muted); }
.fire-card { border-top: 3px solid var(--dim); }
.fire-card.f { border-top-color: var(--sector-finance); }
.fire-card.i { border-top-color: var(--sector-insurance); }
.fire-card.r { border-top-color: var(--sector-real-infra); }
.fire-card.e { border-top-color: var(--sector-electronic-lab); }
.fire-tag { font: var(--m3-type-title-medium); color: var(--ink); margin-bottom: var(--space-3); }
.fire-card.f .fire-tag { color: var(--ink-finance); }
.fire-card.i .fire-tag { color: var(--ink-insurance); }
.fire-card.r .fire-tag { color: var(--ink-real-infra); }
.fire-card.e .fire-tag { color: var(--ink-electronic-lab); }
.fire-note {
font-family: var(--font-mono); font-size: 10px; color: var(--hint);
margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line);
}
.key-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--accent-ink); margin-bottom: var(--space-4); }
.key-panel p { font: var(--m3-type-body-medium); color: var(--muted); margin-bottom: var(--space-3); }
.key-panel code { font-family: var(--font-mono); color: var(--accent-ink); }
.ci-body { font: var(--m3-type-body-large); color: var(--muted); max-width: 72ch; }
.ci-body em { color: var(--accent-ink); font-style: normal; font-family: var(--font-mono); font-size: 0.9em; }
.ci-example {
margin-top: var(--space-6); background: var(--card-high);
border: 1px solid var(--line); border-radius: var(--shape-lg); padding: var(--space-5);
}
.ci-example-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--hint); margin-bottom: var(--space-3); }
.ci-example-text { font-family: var(--font-mono); font-size: 12px; color: var(--muted); line-height: 1.8; }
.ci-example-result { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--ink-insurance); }
.ci-note { margin-top: var(--space-4); font-family: var(--font-mono); font-size: 11px; color: var(--hint); }
/* Constitutional copy blocks — required by the brand compliance checklist */
/* ── FINAL CTA ──────────────────────────────────────────────── */
.final-cta {
position: relative; isolation: isolate; overflow: hidden;
text-align: center; padding: var(--space-9) var(--space-6);
border-top: 1px solid var(--line);
}
.final-cta > * { position: relative; z-index: 2; }
.final-cta h2 { font: var(--m3-type-display-small); font-weight: 300; color: var(--ink); letter-spacing: -0.02em; }
.final-cta p { font: var(--m3-type-body-large); color: var(--muted); margin: var(--space-4) auto var(--space-6); max-width: 60ch; }
.final-cta .cta-group { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.cta-secondary {
color: var(--ink); border: 1px solid var(--dim); background: transparent;
font: var(--m3-type-label-large); text-decoration: none;
padding: 0 var(--space-6); border-radius: var(--shape-full);
display: inline-flex; align-items: center; min-height: var(--target-min);
transition: border-color var(--dur-short4) var(--ease-standard);
}
.cta-secondary:hover { border-color: var(--ink); }
/* ── FOOTER ─────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding: var(--space-7) var(--space-6) var(--space-5); background: var(--surface-container-lowest); }
.footer-grid {
max-width: 1200px; margin: 0 auto; display: grid; gap: var(--space-6);
grid-template-columns: 2fr 1fr 1fr;
}
.footer-brand p { font: var(--m3-type-body-small); color: var(--muted); margin-top: var(--space-2); max-width: 52ch; }
.footer-links, .footer-contracts { display: flex; flex-direction: column; }
.footer-links a, .footer-contracts a {
font-family: var(--font-mono); font-size: 11px; color: var(--muted);
text-decoration: none; display: inline-flex; align-items: center; min-height: var(--target-min);
}
.footer-links a:hover, .footer-contracts a:hover { color: var(--ink); }
.footer-bar {
max-width: 1200px; margin: var(--space-6) auto 0; padding-top: var(--space-4);
border-top: 1px solid var(--line);
font-family: var(--font-mono); font-size: 10px; color: var(--hint);
}
/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1280px) {
/* Android grammar at touch widths: links collapse into the drawer,
burger rightmost — holds for tablet too, not just phones */
.nav-links { display: none; }
.nav-hamburger { display: flex; }
.nav-cta { display: none; }
.hero-body { grid-template-columns: 1fr; gap: var(--space-6); }
.stat-col { flex-direction: row; flex-wrap: wrap; gap: var(--space-5); justify-content: center; }
.stat-col-right { text-align: center; }
.stat-col-left { text-align: center; }
.footer-grid { grid-template-columns: 1fr; }
.headline { font: var(--m3-type-headline-large); font-weight: 300; }
.section-headline, .final-cta h2 { font: var(--m3-type-headline-medium); font-weight: 300; }
section.band { padding: var(--space-8) var(--space-4); }
}
/* ════════════════════════════════════════════════════════════════════
* MARKETING REGISTER — the synthesis layer
*
* Everything above this line is the product register: Material 3 roles
* applied literally, which is correct for surfaces people OPERATE and is
* what the canon governs today. Everything below is the register the canon
* does not have: a landing surface, where the unit of composition is the
* screen as an argument rather than the component.
*
* Three departures from the product register, each deliberate and named:
*
* 1. TYPE. --m3-type-display-* is 400 weight at 0 tracking with no italic.
* Measured from the apu.bot face, its voice is weight 600 against italic
* 300 at -0.03em. A product scale cannot carry a two-voice headline, so
* the marketing register sets its own display sizes. It does so using
* --m3-type-emphasized-weight-* (500/600), which the canon already ships
* as Material's own emphasized variants — this is the expressive register
* Material provides, applied to a surface the canon had not scoped.
*
* 2. ATMOSPHERE. .brand-ambient-glow paints linear-gradient bands across the
* whole box plus a bordered inner panel. On a full-bleed hero that reads
* as one diagonal wash. The apu.bot face instead places low-alpha radial
* ellipses at the four corners, bleeding off-canvas, each carrying one
* sector hue, with a near-neutral lift behind the mark. Same rule obeyed
* — low-opacity sector field, never decorative blobs — different geometry.
* Colours come from the sector tokens, so the field follows the theme.
*
* 3. MOTION. The canon's motion vocabulary is component state. A landing
* page needs composition motion: a load cascade in reading order, and
* reveal on scroll. Both use canon easings and durations, and both stop
* completely under prefers-reduced-motion.
* ════════════════════════════════════════════════════════════════════ */
/* ── 1. Atmosphere: corner sector field ─────────────────────────── */
.hero-atmos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.hero-atmos b {
position: absolute; display: block; border-radius: 50%;
filter: blur(130px);
}
.hero-atmos .g-f {
width: 700px; height: 500px; top: -140px; left: -180px;
background: radial-gradient(ellipse, color-mix(in srgb, var(--sector-finance) var(--atmos-a), transparent) 0%, transparent 70%);
}
.hero-atmos .g-i {
width: 620px; height: 440px; top: -120px; right: -150px;
background: radial-gradient(ellipse, color-mix(in srgb, var(--sector-insurance) var(--atmos-b), transparent) 0%, transparent 70%);
}
.hero-atmos .g-r {
width: 580px; height: 420px; bottom: -100px; left: -140px;
background: radial-gradient(ellipse, color-mix(in srgb, var(--sector-real-infra) var(--atmos-b), transparent) 0%, transparent 70%);
}
.hero-atmos .g-e {
width: 540px; height: 380px; bottom: -90px; right: -130px;
background: radial-gradient(ellipse, color-mix(in srgb, var(--sector-electronic-lab) var(--atmos-c), transparent) 0%, transparent 70%);
}
.hero-atmos .g-c {
width: 560px; height: 440px; top: 44%; left: 50%; transform: translate(-50%, -50%);
filter: blur(80px);
background: radial-gradient(ellipse, color-mix(in srgb, var(--md-sys-color-on-surface) var(--atmos-lift), transparent) 0%, transparent 65%);
}
/* Alpha is the only thing that changes between substrates: the same hues at
dark-substrate strength would tint a white page. */
:root { --atmos-a: 22%; --atmos-b: 17%; --atmos-c: 15%; --atmos-lift: 4%; }
@media (prefers-color-scheme: light) {
:root[data-brand] { --atmos-a: 9%; --atmos-b: 7%; --atmos-c: 7%; --atmos-lift: 0%; }
}
:root[data-surface="light"] { --atmos-a: 9%; --atmos-b: 7%; --atmos-c: 7%; --atmos-lift: 0%; }
:root[data-surface="dark"] { --atmos-a: 22%; --atmos-b: 17%; --atmos-c: 15%; --atmos-lift: 4%; }
/* ── 2. Type: the marketing display voice ───────────────────────── */
.headline {
font-family: var(--font-display);
font-size: clamp(30px, 3.4vw, 46px);
font-weight: var(--m3-type-emphasized-weight-medium);
line-height: 1.1;
letter-spacing: -0.03em;
color: var(--ink);
}
.headline em {
font-style: italic;
font-weight: 300;
color: var(--muted);
}
.subhead {
font-family: var(--font-text);
font-size: 15px; line-height: 1.6;
color: var(--muted); margin-top: var(--space-5); max-width: 44ch;
}
.section-headline {
font-family: var(--font-display);
font-size: clamp(28px, 3.6vw, 44px);
font-weight: 700;
letter-spacing: -0.028em;
line-height: 1.14;
color: var(--ink);
margin-bottom: var(--space-6);
}
.section-headline em { font-style: italic; font-weight: 300; color: var(--muted); }
.section-label {
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--accent-ink); margin-bottom: var(--space-3);
}
.final-cta h2 {
font-family: var(--font-display);
font-size: clamp(28px, 3.6vw, 44px);
font-weight: 700; letter-spacing: -0.028em; line-height: 1.14;
}
.stat-val { font-weight: 300; letter-spacing: -0.02em; }
@media (max-width: 900px) {
.headline { font-size: clamp(26px, 7vw, 34px); }
.section-headline, .final-cta h2 { font-size: clamp(26px, 7vw, 34px); }
}
/* ── 3. Motion: load cascade, then reveal on scroll ─────────────── */
@keyframes mk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mk-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Hero enters once, in reading order: mark, then name, then claim, then
the quiet supporting field. Emphasized-decelerate is the canon easing. */
.hero .logo-wrap { animation: mk-fade var(--dur-extra-long1) var(--dur-medium3) both; }
.hero .tagline { animation: mk-rise var(--dur-long2) 500ms var(--ease-emphasized-decelerate) both; }
.hero .headline { animation: mk-rise var(--dur-long4) 620ms var(--ease-emphasized-decelerate) both; }
.hero .subhead { animation: mk-rise var(--dur-long2) 840ms var(--ease-emphasized-decelerate) both; }
.hero .cta-group { animation: mk-rise var(--dur-long2) 950ms var(--ease-emphasized-decelerate) both; }
.hero .stat-col { animation: mk-fade var(--dur-long2) 1050ms both; }
.hero .sector-strip { animation: mk-rise var(--dur-long2) 1320ms var(--ease-emphasized-decelerate) both; }
.hero .sector-mark, .hero .float-field { animation: mk-fade var(--dur-long2) 1450ms both; }
/* Sections arrive as they are read, not all at once on load. */
.reveal { opacity: 0; transform: translateY(22px);
transition: opacity var(--dur-long2) var(--ease-emphasized-decelerate),
transform var(--dur-long2) var(--ease-emphasized-decelerate); }
.reveal.in { opacity: 1; transform: none; }
/* No motion at all when asked. The canon's accessibility layer already
shortens durations globally; this removes the start states too, which a
duration override alone would leave stuck at opacity 0. */
@media (prefers-reduced-motion: reduce) {
.hero .logo-wrap, .hero .tagline, .hero .headline, .hero .subhead, .hero .cta-group, .hero .stat-col, .hero .sector-strip, .hero .sector-mark, .hero .float-field {
animation: none !important;
}
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* ════════════════════════════════════════════════════════════════════
* GOOGLE SANS SUITE + HERO GEOMETRY — owner directive 2026-09-05
*
* TYPE SOURCING, stated plainly because the two halves differ in law:
*
* SELF-HOSTED, OFL 1.1, licence receipt in assets/fonts/OFL-GoogleSansCode.txt
* Google Sans Code — the only member of the suite published in
* github.com/google/fonts (ofl/googlesanscode). Variable 300-800 with a
* REAL italic, which is why the machine voice and the whisper voice can
* both be genuine faces here rather than synthetic oblique.
*
* LINKED FROM fonts.googleapis.com, NO licence receipt
* Google Sans · Google Sans Text · Google Sans Display · Google Sans Flex.
* All four serve 200 OK from the CSS API and render correctly, but none
* appears under ofl/, apache/ or ufl/ in google/fonts, so none may be
* redistributed or self-hosted, and being served is not a licence grant.
* This is a live network font request, which design-tokens.css forbids
* ("Fonts are self-hosted by each surface. No network font import is
* permitted") and which chair ruling D-01 forbids. It is here on the
* owner's instruction and is a CHAIR decision to keep or reverse.
* Reversing it is one edit: delete the and this token block, and
* the page falls back to the self-hosted Roboto canon underneath.
* ════════════════════════════════════════════════════════════════════ */
@font-face {
font-family: 'Google Sans Code';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url('assets/fonts/GoogleSansCode-latin-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Google Sans Code';
font-style: italic;
font-weight: 300 800;
font-display: swap;
src: url('assets/fonts/GoogleSansCode-latin-italic.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Role map is the compliance checklist's, not invented here. Roboto stays as
the last fallback in every stack, so a blocked network request degrades to
the canon rather than to a system font. */
:root {
--font-display: 'Google Sans Display', 'Google Sans', 'Roboto', 'Helvetica Neue', sans-serif;
--font-sans: 'Google Sans', 'Roboto', 'Helvetica Neue', sans-serif;
--font-text: 'Google Sans Text', 'Google Sans', 'Roboto', 'Helvetica Neue', sans-serif;
--font-flex: 'Google Sans Flex', 'Google Sans', 'Roboto', 'Helvetica Neue', sans-serif;
--font-code: 'Google Sans Code', 'Google Sans Mono', 'Roboto Mono', monospace;
--font-mono: var(--font-code);
}
/* ── Hero geometry: one exact screenful ─────────────────────────────
The thesis hero is height:100vh with padding:0, .hero-body taking flex:1
and the two strips welded to the fold at flex-shrink:0. Measured at
1440x900 it is exactly 900px with the live-strip top at 791.8. The earlier
build was a padded, vertically-centred block at 904.77px, which is why it
read as "a section" rather than "a screen". */
.hero {
height: 100vh;
min-height: 640px;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.hero-body {
flex: 1;
display: grid;
grid-template-columns: 280px 1fr 280px;
align-items: start;
gap: 0;
padding: 80px var(--space-6) 0;
max-width: none;
position: relative;
z-index: 10;
}
.hero-center {
align-self: stretch;
justify-content: center;
padding-bottom: 60px;
position: relative;
}
.stat-col { align-self: start; padding: 180px 20px 0; gap: var(--space-5); }
/* The mark is 68px, not 128px. One number, and the whole composition rebalances. */
.logo-wrap { width: 68px; height: 68px; margin-bottom: 28px; position: relative; }
/* The halo the earlier build dropped: a soft lift behind the mark, ABOVE the
corner field rather than part of it. Alpha and blur are the thesis values. */
.logo-wrap::before {
content: ""; position: absolute; z-index: -1;
width: 280px; height: 200px; left: 50%; top: 50%;
transform: translate(-50%, calc(-50% - 20px));
background: radial-gradient(ellipse, color-mix(in srgb, var(--sz-seal) 7%, transparent) 0%, transparent 65%);
filter: blur(40px); pointer-events: none;
}
/* The structural texture: a TRIAXIAL HEXAGONAL grid — three sets of
parallel hairlines whose axes cross at 60°, nesting triangles inside
hexagons. Radially masked so it is absent behind the centre and
emerges toward the edges. Routed through on-surface so it becomes
dark rules on a light substrate instead of invisible white ones.
Standing law (owner, 2026-09-05): NEVER a 90° orthogonal grid. */
.hero-bg {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image:
repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 80px),
repeating-linear-gradient(60deg, var(--grid-line) 0 1px, transparent 1px 80px),
repeating-linear-gradient(120deg, var(--grid-line) 0 1px, transparent 1px 80px);
-webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, transparent 30%, black 75%);
mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, transparent 30%, black 75%);
}
:root { --grid-line: color-mix(in srgb, var(--md-sys-color-on-surface) 1.8%, transparent); }
:root[data-surface="light"] { --grid-line: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent); }
@media (prefers-color-scheme: light) {
:root[data-brand] { --grid-line: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent); }
}
/* ── Hero type: the value ladder, not two roles ─────────────────────
Line one is ONE weight; its second half shifts VALUE, not style — the
thesis markup is a in cream, and its .headline em italic rule is
dead CSS. Only line two carries the italic. */
.tagline {
font-family: var(--font-text); font-style: italic; font-size: 15px;
font-weight: 400; letter-spacing: normal; text-transform: none;
color: var(--hint); margin-bottom: 28px;
display: flex; align-items: center; gap: 16px;
}
.tagline::before, .tagline::after {
content: ""; width: 50px; height: 1px; background: var(--line); flex: none;
}
.headline em {
font-style: normal;
font-weight: inherit;
color: var(--md-sys-color-on-surface);
}
.subhead {
font-family: var(--font-text); font-size: 15px; font-weight: 300;
letter-spacing: 0.01em; color: var(--hint); margin-top: 0; margin-bottom: 36px;
}
.stat-val {
font-family: var(--font-code); font-size: 22px; line-height: 1;
font-weight: 500; letter-spacing: -0.02em;
color: color-mix(in srgb, var(--ink) 78%, var(--bg));
}
.stat-lbl {
font-family: var(--font-code); font-size: 9px; line-height: 1.4;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--muted); margin-top: 4px;
}
.stat-hash { font-family: var(--font-code); font-size: 9px; color: var(--hint); margin-top: 4px; }
/* ── The CTA is a hairline chip, not a filled pill ──────────────────
Two saturated pills bracketing the hero was the loudest single error in
the earlier build. Ghost + slow border bloom, as the thesis does it. */
.cta-btn, .nav-cta {
background: transparent;
color: var(--accent-ink);
border: 1px solid var(--line);
border-radius: 0;
box-shadow: none;
font-family: var(--font-code); font-size: 12px; font-weight: 400;
letter-spacing: 0.06em;
transition: border-color var(--dur-medium4) var(--ease-standard),
background-color var(--dur-medium4) var(--ease-standard);
}
.cta-btn:hover, .nav-cta:hover {
filter: none;
box-shadow: none;
border-color: color-mix(in srgb, var(--accent-ink) 40%, transparent);
background-color: color-mix(in srgb, var(--accent-ink) 4%, transparent);
}
.cta-sub { font-family: var(--font-code); font-size: 10px; letter-spacing: 0.08em; color: var(--hint); }
/* ── The two bars are welded to the fold, full-bleed ────────────────── */
.sector-strip {
display: grid; grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--line);
margin-top: 0; flex-shrink: 0; position: relative; z-index: 15;
border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
gap: 0; overflow: visible;
}
.sector-strip { background: var(--surface-container); }
.sector-block:last-child { border-right: none; }
.sector-block { border-right: 1px solid var(--line); background: transparent; padding: 14px 32px; }
.sb-letter { font-family: var(--font-code); font-size: 11px; font-weight: 500; }
.sb-name { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink); }
.sb-hint { font-family: var(--font-code); font-size: 9px; color: var(--hint); }
/* ── Peripheral furniture: whispers on, corner marks off ────────────
The thesis shows all eight float-fields above 1024px and renders NO
sector-marks at any width — .sector-mark is display:none in its base rule
and never re-enabled. The earlier build had it exactly backwards. */
.sector-mark { display: none !important; }
.float-field { display: none; }
@media (min-width: 1200px) { .float-field { display: block; } }
.float-field .row { font-family: var(--font-code); font-size: 9.5px; white-space: nowrap; color: var(--hint); }
.float-field .sub { font-family: var(--font-code); font-size: 9.5px; white-space: nowrap; color: var(--hint); opacity: 0.75; }
.ff-1 { top: 150px; left: 20px; } .ff-2 { top: 222px; left: 20px; }
.ff-3 { top: 294px; left: 20px; } .ff-4 { top: 366px; left: 20px; }
.ff-5 { top: 150px; right: 20px; text-align: right; }
.ff-6 { top: 222px; right: 20px; text-align: right; }
.ff-7 { top: 294px; right: 20px; text-align: right; }
.ff-8 { top: 366px; right: 20px; text-align: right; }
/* ── Motion: the thesis holds 800ms, then unfolds over 2.3s ─────────── */
.hero .logo-wrap { animation: mk-fade 900ms 800ms cubic-bezier(0.16,1,0.3,1) both; }
.hero .tagline { animation: mk-rise var(--dur-long2) 1100ms var(--ease-emphasized-decelerate) both; }
.hero .headline { animation: mk-rise var(--dur-long4) 1400ms var(--ease-emphasized-decelerate) both; }
.hero .subhead { animation: mk-rise var(--dur-long2) 1700ms var(--ease-emphasized-decelerate) both; }
.hero .cta-group { animation: mk-rise var(--dur-long2) 1900ms var(--ease-emphasized-decelerate) both; }
.hero .stat-col { animation: mk-fade var(--dur-long2) 2200ms both; }
.hero .sector-strip { animation: mk-fade var(--dur-long2) 2600ms both; }
.hero .float-field { animation: mk-fade var(--dur-long2) both; }
.hero .ff-1 { animation-delay: 800ms; }
.hero .ff-2, .hero .ff-5 { animation-delay: 1000ms; }
.hero .ff-3, .hero .ff-6 { animation-delay: 1200ms; }
.hero .ff-4, .hero .ff-7 { animation-delay: 1400ms; }
.hero .ff-8 { animation-delay: 1600ms; }
@media (max-width: 1024px) {
.hero { height: auto; min-height: 100vh; }
.hero-body { grid-template-columns: 1fr; padding: 80px var(--space-4) 0; }
.stat-col, .float-field { display: none; }
.hero-center { padding: 40px 0 60px; }
.sector-strip { grid-template-columns: repeat(2, 1fr); }
.sector-block { padding: 14px 16px; }
.sb-hint { display: none; }
}
/* ── Suite role map, per the compliance checklist's own division ─────
Display → display and high-emphasis headings
Google Sans → brand UI, navigation, buttons, ordinary headings
Text → body, subtitles, captions, readable prose
Flex → governed adaptive labels and compact all-caps labels
Code → code, receipts, hashes, endpoints, evidence-tier data
Each family below is applied to something, so each is actually fetched;
a family declared in a token and never used is a family that never loads. */
.section-label, .stat-lbl, .sb-hint, .sector-hint, .key-label, .ci-example-label {
font-family: var(--font-flex);
font-variation-settings: "wdth" 100;
}
.stat-hash, .cta-sub, .footer-bar, .ci-example-text, .ci-example-result, .float-field .row, .float-field .sub, .fire-note, .ci-note, .stat-val, .sb-letter, .nav-logo, .cta-btn, .nav-cta {
font-family: var(--font-code);
}
.fire-desc, .key-panel p, .ci-body, .subhead, .footer-brand p, .final-cta p {
font-family: var(--font-text);
}
.nav-links a, nav.mobile a, .footer-links a, .footer-contracts a, .sb-name, .fire-tag {
font-family: var(--font-sans);
}
.headline, .section-headline, .final-cta h2 {
font-family: var(--font-display);
}
/* Float-field placement. The thesis runs two tight 36px-pitch stacks that
END before the stat rails BEGIN — that vertical separation is the only
thing keeping them apart, since they share the same horizontal band.
Stats start at 80px (hero-body) + 180px (stat-col) = 260px, so the last
whisper must close above that. */
.ff-1, .ff-5 { top: 96px; }
.ff-2, .ff-6 { top: 132px; }
.ff-3, .ff-7 { top: 168px; }
.ff-4, .ff-8 { top: 204px; }
.float-field { max-width: 240px; }
/* ff-4 / ff-8 kept a `bottom` from the product register; with `top` also set
an absolutely-positioned box stretches between the two, so those two
whispers became 466px tall and ran straight through the stat rails. */
.float-field { bottom: auto; }
/* ════════════════════════════════════════════════════════════════════
* POST-AUDIT REPAIRS — 2026-09-05
* From the six-dimension hero audit. Two are defects introduced by the
* rebuild itself; the rest are composition items the rebuild did not reach.
* ════════════════════════════════════════════════════════════════════ */
/* R1 — AA REGRESSION, introduced by the rebuild. `opacity` on a text element
composites its colour against the substrate AFTER the cascade, so it
silently defeats the per-surface tuning --hint exists to hold: --hint is
5.63:1 on dark, and at 0.75 it composites to 3.57:1 (3.25:1 on light).
Both fail the 4.5:1 floor at this size. Demote by SIZE, never by opacity —
that is the standing rule for every quiet step on this page. */
.float-field .sub { opacity: 1; font-size: 9px; }
/* R2 — Focus ring pinned to the brand accent on the ghost controls.
CORRECTION, recorded because the first version of this comment was wrong:
focus was NOT invisible. The earlier reading of `outline-style: none` came
from a scripted element.focus(), which does not match :focus-visible — the
substrate's own ring was applying the whole time. Verified with a real Tab
keypress: .cta-btn matches :focus-visible and renders solid 2px. This rule
only pins the ring to --accent-ink instead of the substrate's #2196F3, so
it reads as brand rather than as default blue on a hairline chip.
The thesis has no focus style at all; that is explicitly NOT ported. */
.cta-btn:focus-visible, .nav-cta:focus-visible, .cta-secondary:focus-visible, .nav-links a:focus-visible, nav.mobile a:focus-visible, .nav-logo:focus-visible, .footer-links a:focus-visible, .footer-contracts a:focus-visible, .skip-link:focus-visible {
outline: 2px solid var(--accent-ink);
outline-offset: 2px;
}
.cta-btn:focus-visible, .nav-cta:focus-visible { border-color: var(--accent-ink); }
/* R3 — The line-1 value shift vanished on a light substrate. In every light
block --md-sys-color-on-surface equals --md-sys-color-on-background, so
"A librarian." rendered identical to "A library." A dark-only residue. */
:root { --headline-shift: var(--md-sys-color-on-surface); }
@media (prefers-color-scheme: light) {
:root[data-brand] { --headline-shift: color-mix(in srgb, var(--md-sys-color-on-surface) 76%, var(--bg)); }
}
:root[data-surface="light"] { --headline-shift: color-mix(in srgb, var(--md-sys-color-on-surface) 76%, var(--bg)); }
:root[data-surface="dark"] { --headline-shift: var(--md-sys-color-on-surface); }
.headline em { color: var(--headline-shift); }
/* R4 — The centre lift was zeroed on light, so the composition kept its four
edges and lost its middle, inverting the inward pull. Dimming is the
decision; zeroing is a different one. */
@media (prefers-color-scheme: light) { :root[data-brand] { --atmos-lift: 3%; } }
:root[data-surface="light"] { --atmos-lift: 3%; }
/* R5 — Headline cap back to the thesis ramp. The hero is exactly 100vh under
overflow:hidden, so it has no slack to lend an oversized cap. */
.headline { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.12; }
@media (max-width: 900px) { .headline { font-size: clamp(26px, 7vw, 34px); } }
/* R6 — The sector rail was four stacked cards at 89px against the thesis's
single ruled row at ~41px. In a frame with zero slack that is the cheapest
48px available. The 2px spine carries the sector hue as a MARKER behind no
text, so no contrast question arises. */
.sector-block {
flex-direction: row; align-items: center; gap: 10px;
padding: 12px 20px; position: relative;
}
.sb-hint { margin-left: auto; white-space: nowrap; }
.sector-block::before { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 100%; }
.sector-strip .sector-block:nth-child(1)::before { background: var(--sector-finance); }
.sector-strip .sector-block:nth-child(2)::before { background: var(--sector-insurance); }
.sector-strip .sector-block:nth-child(3)::before { background: var(--sector-real-infra); }
.sector-strip .sector-block:nth-child(4)::before { background: var(--sector-electronic-lab); }
/* R7 — The bottom-right corner was acid lemon where the thesis is warm sand,
making it the loudest thing in the hero. Mixed from two existing sector
tokens rather than hardcoding the thesis literal, which would be a new hue. */
:root { --atmos-e-hue: color-mix(in srgb, var(--sector-electronic-lab) 62%, var(--sector-finance)); }
.hero-atmos .g-e {
background: radial-gradient(ellipse, color-mix(in srgb, var(--atmos-e-hue) var(--atmos-c), transparent) 0%, transparent 70%);
}
/* R8 — Centre pool back to the thesis's two-nested-pools structure: a wide
500x400 blur(80px) field centred on the box, with the tight 280x200
blur(40px) halo under the mark doing the local lift. */
.hero-atmos .g-c { width: 500px; height: 400px; top: 50%; }
/* R9 — Gutter badges were solid saturated pills. The thesis tints them at 12%
and colours the TEXT with the hue. Text takes --ink-*, never --sector-*,
because the raw sector hues fail as type on a light substrate. */
/* R10 — The nav's top-right read as a cluster of bordered controls. The
toggle loses its border but keeps its 48px target and stays reachable,
because the checklist requires the manual override to keep working. */
.nav-links { gap: var(--space-6); margin-right: var(--space-6); }
/* ════════════════════════════════════════════════════════════════════
* AURORA FIELD — the Gemini register, in the ratified palette
* Reference: design.google/library/gemini-ai-visual-design
*
* What that system actually does, and what is borrowed:
* - gradients read as ENERGY, not as objects: the process of thinking,
* not a decorative blob
* - "sharp, almost opaque leading edges that diffuse at the tail", so each
* form points — it is a vector, not a smudge
* - multi-coloured undulating waves carrying directional momentum
* - motion that gives "anticipation, then release"
* - circles as the foundational shape, softened and blurred
* - heavy restraint everywhere else; the field is the only loud thing
*
* What is NOT borrowed: Google's dots, the sparkle, and the identity. The
* guide forbids "Gemini sparkle imitation, Google-dot borrowing, assistant
* mascot, or copied external AI identity" — this takes the GRAMMAR (edge
* behaviour, momentum, colour travel) and not the marks.
*
* NO NEW HUE IS INTRODUCED. Measured: the four ratified sector colours sit
* 1-14 degrees from Google's four-colour set (finance 4 vs 5, electronic-lab
* 54 vs 45, insurance 122 vs 136, real-infra 207 vs 217). The estate's own
* palette is already that family, so each orb travels only between two
* ADJACENT sector tokens and never leaves the ratified set.
* ════════════════════════════════════════════════════════════════════ */
/* initial-value must be a literal (spec: no var()); the keyframes bind the
travel to the ratified --sector-* tokens by reference. Keep in sync. */
@property --orb-a { syntax: ''; inherits: false; initial-value: #F44336; }
@property --orb-b { syntax: ''; inherits: false; initial-value: #4CAF50; }
@property --orb-c { syntax: ''; inherits: false; initial-value: #2196F3; }
@property --orb-d { syntax: ''; inherits: false; initial-value: #FFEB3B; }
/* The leading edge is dense and holds to 22%, then runs a long tail to 70%.
That asymmetry is what makes each form read as directional rather than as
a symmetric blob. */
.hero-atmos b {
filter: blur(110px);
will-change: transform;
}
.hero-atmos .g-f {
width: 760px; height: 520px; top: -150px; left: -200px;
background: radial-gradient(ellipse 58% 78% at 38% 40%,
color-mix(in srgb, var(--orb-a) var(--atmos-a), transparent) 0%,
color-mix(in srgb, var(--orb-a) var(--atmos-a), transparent) 22%,
transparent 70%);
animation: orb-drift-a 23s var(--ease-emphasized) infinite alternate,
orb-hue-a 41s linear infinite alternate;
}
.hero-atmos .g-i {
width: 660px; height: 460px; top: -130px; right: -170px;
background: radial-gradient(ellipse 58% 78% at 62% 40%,
color-mix(in srgb, var(--orb-b) var(--atmos-b), transparent) 0%,
color-mix(in srgb, var(--orb-b) var(--atmos-b), transparent) 22%,
transparent 70%);
animation: orb-drift-b 29s var(--ease-emphasized) infinite alternate,
orb-hue-b 47s linear infinite alternate;
}
.hero-atmos .g-r {
width: 620px; height: 440px; bottom: -110px; left: -160px;
background: radial-gradient(ellipse 58% 78% at 38% 60%,
color-mix(in srgb, var(--orb-c) var(--atmos-b), transparent) 0%,
color-mix(in srgb, var(--orb-c) var(--atmos-b), transparent) 22%,
transparent 70%);
animation: orb-drift-c 31s var(--ease-emphasized) infinite alternate,
orb-hue-c 53s linear infinite alternate;
}
.hero-atmos .g-e {
width: 580px; height: 400px; bottom: -100px; right: -150px;
background: radial-gradient(ellipse 58% 78% at 62% 60%,
color-mix(in srgb, var(--orb-d) var(--atmos-c), transparent) 0%,
color-mix(in srgb, var(--orb-d) var(--atmos-c), transparent) 22%,
transparent 70%);
animation: orb-drift-d 37s var(--ease-emphasized) infinite alternate,
orb-hue-d 59s linear infinite alternate;
}
/* Drift periods are 23/29/31/37s and hue periods 41/47/53/59s — all coprime,
so the four never return to the same phase and the field never visibly
loops. Travel widened 2026-09-05 on owner directive — float must read at a
glance; still a room breathing, not objects sliding. */
@keyframes orb-drift-a {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(7%, 5%, 0) scale(1.08); }
100% { transform: translate3d(-3%, 8%, 0) scale(1.03); }
}
@keyframes orb-drift-b {
0% { transform: translate3d(0, 0, 0) scale(1.04); }
50% { transform: translate3d(-8%, 6%, 0) scale(1); }
100% { transform: translate3d(-2%, -5%, 0) scale(1.09); }
}
@keyframes orb-drift-c {
0% { transform: translate3d(0, 0, 0) scale(1.02); }
50% { transform: translate3d(8%, -6%, 0) scale(1.1); }
100% { transform: translate3d(3%, 3%, 0) scale(1); }
}
@keyframes orb-drift-d {
0% { transform: translate3d(0, 0, 0) scale(1.06); }
50% { transform: translate3d(-6%, -8%, 0) scale(1); }
100% { transform: translate3d(-9%, 2%, 0) scale(1.05); }
}
/* Colour travel. Each orb moves between two ADJACENT ratified sector hues
only — red<->yellow, green<->blue, blue<->green, yellow<->red. Nothing
leaves the set, and no orb ever passes through a hue the estate has not
ratified. */
@keyframes orb-hue-a { from { --orb-a: var(--sector-finance); } to { --orb-a: var(--sector-electronic-lab); } }
@keyframes orb-hue-b { from { --orb-b: var(--sector-insurance); } to { --orb-b: var(--sector-real-infra); } }
@keyframes orb-hue-c { from { --orb-c: var(--sector-real-infra); } to { --orb-c: var(--sector-insurance); } }
@keyframes orb-hue-d { from { --orb-d: var(--sector-electronic-lab); } to { --orb-d: var(--sector-finance); } }
/* The centre is a slow ripple rather than a static pool — the "rippling
radial" note, held far below the corners so it never competes with type. */
.hero-atmos .g-c {
animation: orb-ripple 19s var(--ease-emphasized) infinite alternate;
}
@keyframes orb-ripple {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
100% { transform: translate(-50%, -50%) scale(1.14); opacity: 1; }
}
/* Everything stops, and stops at a composed rest position rather than at a
half-finished frame. */
@media (prefers-reduced-motion: reduce) {
.hero-atmos b, .hero-atmos .g-c {
animation: none !important;
transform: none !important;
}
.hero-atmos .g-c { transform: translate(-50%, -50%) !important; }
}
/* ════════════════════════════════════════════════════════════════════
* SHAPE — house rule: always rounded, never sharp
*
* Correcting a defect this rebuild introduced. Reverting the CTA from a
* filled pill, I overshot and set border-radius: 0 on it, on the nav CTA,
* on the surface toggle and on the badges — square corners, copied from the
* thesis, which contradicts the estate's standing rule and Material's shape
* ladder both. The problem with the earlier CTA was that it was FILLED and
* loud, never that it was round. A hairline ghost chip stays just as
* restrained with a proper radius.
*
* Radii come only from the Material ladder design-tokens.css already ships
* (--shape-xs 4 · sm 8 · md 12 · lg 16 · xl 28 · full 999). No local radius
* value is invented, and --shape-none is not used on any visible corner.
* ════════════════════════════════════════════════════════════════════ */
.cta-btn, .nav-cta, .cta-secondary { border-radius: var(--shape-full); }
.badge { border-radius: var(--shape-full); }
.sector-block::before { border-radius: var(--shape-full); }
/* The two hero bars stay square ONLY because they are full-bleed: their
corners sit outside the viewport, so there is no visible corner to round.
Rounding them would open gaps against the page edge. */
.sector-strip { border-radius: 0; }
/* ════════════════════════════════════════════════════════════════════
* AURORA v2 — after reading the source properly
* design.google/library/gemini-ai-visual-design ("Illustrating the Gemini
* App", Anna Sera Garcia / Olivier Gillaizeau, Google Design)
*
* The first pass took the palette and the drift. Re-reading the article, the
* load-bearing sentence had been missed:
*
* "shape acts as a dynamic vessel, concentrating energy into a sharp point
* before allowing it to blossom outwards — a visual metaphor for Gemini's
* ability to process and expand ideas"
*
* So a Gemini gradient is not a free-floating blur. It is SCULPTED BY A
* CIRCLE: energy gathers to a point, then opens. Three further notes drive
* this pass:
* - "Inner activity within the motion conveys thinking" — the movement is
* INSIDE the form, not only translation of the whole form.
* - "The speed of movement gives a sense of anticipation, then release."
* - "Material shapes are softened and blurred to take on an ethereal
* quality" / "warm, spatial, rounded".
*
* Implemented as an animated radial MASK per orb: the vessel's focus travels
* (--vx/--vy), gathering the gradient tight and then letting it blossom
* (--vr). That is inner activity and containment in one mechanism, and it
* keeps every colour a ratified token.
*
* Still explicitly NOT taken: the sparkle, the four-colour dots, the assistant
* identity. The checklist prohibits imitating those and it is right to.
* ════════════════════════════════════════════════════════════════════ */
@property --vx { syntax: ''; inherits: false; initial-value: 42%; }
@property --vy { syntax: ''; inherits: false; initial-value: 44%; }
@property --vr { syntax: ''; inherits: false; initial-value: 34%; }
.hero-atmos b {
/* the vessel: a circle that gathers to a point, then blossoms */
-webkit-mask-image: radial-gradient(circle at var(--vx) var(--vy),
#000 0%, #000 var(--vr), transparent calc(var(--vr) + 34%));
mask-image: radial-gradient(circle at var(--vx) var(--vy),
#000 0%, #000 var(--vr), transparent calc(var(--vr) + 34%));
will-change: transform, --vx, --vy, --vr;
}
/* Inner activity. The focus wanders and the aperture breathes on periods
coprime with the drift and hue cycles, so no two of the three ever line up
and the field never reads as a loop. */
@keyframes vessel-a {
0% { --vx: 38%; --vy: 42%; --vr: 26%; }
38% { --vx: 52%; --vy: 36%; --vr: 21%; } /* gather to a point */
100% { --vx: 46%; --vy: 54%; --vr: 40%; } /* blossom outwards */
}
@keyframes vessel-b {
0% { --vx: 62%; --vy: 40%; --vr: 30%; }
42% { --vx: 54%; --vy: 48%; --vr: 22%; }
100% { --vx: 66%; --vy: 34%; --vr: 42%; }
}
@keyframes vessel-c {
0% { --vx: 40%; --vy: 58%; --vr: 28%; }
35% { --vx: 48%; --vy: 66%; --vr: 20%; }
100% { --vx: 34%; --vy: 52%; --vr: 41%; }
}
@keyframes vessel-d {
0% { --vx: 60%; --vy: 60%; --vr: 32%; }
44% { --vx: 52%; --vy: 54%; --vr: 23%; }
100% { --vx: 68%; --vy: 66%; --vr: 43%; }
}
/* "Anticipation, then release" — a curve that holds, gathers, then opens.
Canon easings are component curves; this is the composition equivalent and
is declared once, here, rather than scattered. */
:root { --ease-anticipate: cubic-bezier(0.85, 0, 0.15, 1); }
.hero-atmos .g-f { animation:
orb-drift-a 23s var(--ease-emphasized) infinite alternate,
orb-hue-a 37s linear infinite alternate,
vessel-a 17s var(--ease-anticipate) infinite alternate; }
.hero-atmos .g-i { animation:
orb-drift-b 29s var(--ease-emphasized) infinite alternate,
orb-hue-b 43s linear infinite alternate,
vessel-b 19s var(--ease-anticipate) infinite alternate; }
.hero-atmos .g-r { animation:
orb-drift-c 31s var(--ease-emphasized) infinite alternate,
orb-hue-c 47s linear infinite alternate,
vessel-c 13s var(--ease-anticipate) infinite alternate; }
.hero-atmos .g-e { animation:
orb-drift-d 37s var(--ease-emphasized) infinite alternate,
orb-hue-d 53s linear infinite alternate,
vessel-d 11s var(--ease-anticipate) infinite alternate; }
/* Stronger presence so the field is actually legible as movement rather than
as a static tint (owner directive 2026-09-05: the glows must visibly float
and change colour). Still low-alpha, still behind everything, still
following the theme. */
:root { --atmos-a: 40%; --atmos-b: 32%; --atmos-c: 30%; }
/* thesis voice tokens — the two inline colors the original copy speaks in,
routed through substrate-adaptive canon tokens. (--dim is borders-only
and failed AA as text: 2.73:1 — audit 2026-09-05.) */
:root { --cream: var(--sz-seal); --gold: var(--accent-ink); }
:root[data-surface="dark"] { --atmos-a: 40%; --atmos-b: 32%; --atmos-c: 30%; }
@media (prefers-color-scheme: light) {
:root[data-brand] { --atmos-a: 17%; --atmos-b: 14%; --atmos-c: 14%; }
}
:root[data-surface="light"] { --atmos-a: 17%; --atmos-b: 14%; --atmos-c: 14%; }
@media (prefers-reduced-motion: reduce) {
.hero-atmos b { animation: none !important; transform: none !important; }
}
/* ════════════════════════════════════════════════════════════════════
* FINAL CTA MARK — sized 2026-09-05.
* .frog-x had no constraint anywhere in this stylesheet, so the closing
* mark rendered at the SVG's intrinsic size (measured 1376px on a 1440
* viewport) — the "way too large" logo on scroll. A word, not a billboard:
* 96px, centred, caption in the house mono voice.
* ════════════════════════════════════════════════════════════════════ */
.frog-container { display: flex; flex-direction: column; align-items: center; }
.frog-x { width: 96px; height: 96px; }
.frog-x .agentz-mark { width: 100%; height: 100%; display: block; color: var(--sz-seal); }
/* ════════════════════════════════════════════════════════════════════
* LIQUID GLASS — functional layer only (2026-09-05)
* After "Engineering Apple's Liquid Glass" (owner-supplied research) and
* its source law from Apple's HIG: refractive material is reserved for
* the FUNCTIONAL layer — controls, nav, transient chrome — and never
* applied to content. The landing register already demands a flat,
* hairline-ruled foreground; this pass adds the glass physics to the
* chrome that floats above it, and nothing else.
*
* Taken: pointer-tracked specular caustics (a cursor-led light vector
* moving a soft radial highlight across the pill); a Fresnel
* edge rim (the perimeter highlight that brightens as the
* surface curves away); adaptive fallbacks — reduced
* transparency gets flat fills, increased contrast gets solid
* outlines, reduced motion gets no sweep. One backdrop pass
* total (nav.primary) per the tile-pooling law.
* Refused: glass on content, fluid merge morphing (smin), Metal/Canvas
* pipelines — component-state theatrics the register does not
* need. Full mapping: DESIGN_STUDY_2026_09_05_LIQUID_GLASS.md
* ════════════════════════════════════════════════════════════════════ */
.cta-btn, .nav-cta, .cta-secondary {
position: relative; overflow: hidden; isolation: isolate;
/* Fresnel rim: the top edge catches ambient light, the base dims */
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--bg) 40%, transparent);
}
/* Restated at :hover specificity — the shipped layer's `.cta-btn:hover
{ box-shadow: none }` (0,2,0) would otherwise kill the rim precisely
while the surface is active (caught in the 2026-09-05 audit). */
.cta-btn:hover, .nav-cta:hover, .cta-secondary:hover {
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 16%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--bg) 30%, transparent);
}
.cta-btn::after, .nav-cta::after, .cta-secondary::after {
content: ""; position: absolute; inset: 0; z-index: -1;
pointer-events: none; opacity: 0;
background: radial-gradient(110px circle at var(--lx, 50%) var(--ly, 50%),
color-mix(in srgb, var(--ink) 10%, transparent), transparent 65%);
transition: opacity var(--dur-medium2) var(--ease-standard);
}
.cta-btn:hover::after, .nav-cta:hover::after, .cta-secondary:hover::after {
opacity: 1;
transition: opacity var(--dur-short4) var(--ease-standard);
}
@media (prefers-reduced-transparency: reduce) {
.cta-btn, .nav-cta, .cta-secondary {
background: var(--elevated); box-shadow: none;
}
.cta-btn::after, .nav-cta::after, .cta-secondary::after { display: none; }
}
@media (prefers-contrast: more) {
.cta-btn, .nav-cta, .cta-secondary {
outline: 1.5px solid var(--ink); outline-offset: -1.5px;
}
}
/* ── M3 EXPRESSIVE SPRINGS (2026-09-05, Pixel research law) ────────────
Spatial tokens may overshoot; effect tokens (pure opacity) stay
critically damped — so mk-fade keeps the canon easing and only the
mk-rise / reveal tracks (translateY) take the spring. The linear()
points are a sampled underdamped spring (zeta = 0.70): ~4.6% overshoot
at two-thirds duration, settled to 1% at the end. Opacity riding the
same track can overshoot above 1 only to clamp invisibly. */
@supports (animation-timing-function: linear(0, 1)) {
.hero .tagline, .hero .headline, .hero .subhead, .hero .cta-group {
animation-timing-function: linear(0, 0.0330 4%, 0.1154 8%, 0.2265 12%, 0.3501 17%, 0.4746 21%, 0.5920 25%, 0.6973 29%, 0.7878 33%, 0.8626 38%, 0.9221 42%, 0.9675 46%, 1.0004 50%, 1.0228 54%, 1.0367 58%, 1.0438 62%, 1.0460 67%, 1.0446 71%, 1.0409 75%, 1.0358 79%, 1.0302 83%, 1.0244 88%, 1.0190 92%, 1.0141 96%, 1);
}
.reveal.in {
transition-timing-function: linear(0, 0.0330 4%, 0.1154 8%, 0.2265 12%, 0.3501 17%, 0.4746 21%, 0.5920 25%, 0.6973 29%, 0.7878 33%, 0.8626 38%, 0.9221 42%, 0.9675 46%, 1.0004 50%, 1.0228 54%, 1.0367 58%, 1.0438 62%, 1.0460 67%, 1.0446 71%, 1.0409 75%, 1.0358 79%, 1.0302 83%, 1.0244 88%, 1.0190 92%, 1.0141 96%, 1);
}
}
/* ════════════════════════════════════════════════════════════════════
* DISPLAY CONTROLS — Pixel quick-settings grammar (2026-09-05)
* Light/dark is a SWITCH; Night Shift is a TOGGLE; AUTO follows the OS.
* Night Shift is NOT a theme: it is a fixed warm multiply veil above
* every layer (blue-light attenuation), pointer-transparent, persisted
* separately. State: apu-surface (light|dark) + agentz-nightshift.
* Both controls are role=switch with aria-checked; focus rings intact.
* ════════════════════════════════════════════════════════════════════ */
.qs-cluster { display: inline-flex; align-items: center; gap: var(--space-2); }
.qs-tile {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
color: var(--muted); background: transparent;
border: 1px solid var(--line); border-radius: 14px;
padding: 0 10px; min-height: 30px; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
transition: color var(--dur-short4) var(--ease-standard),
border-color var(--dur-short4) var(--ease-standard),
background-color var(--dur-short4) var(--ease-standard);
}
.qs-tile:hover { color: var(--ink); border-color: var(--hint); }
.qs-tile[aria-checked="true"] {
color: var(--accent-ink);
border-color: color-mix(in srgb, var(--accent-ink) 45%, transparent);
background: color-mix(in srgb, var(--accent-ink) 7%, transparent);
}
.qs-switch {
position: relative; width: 46px; height: 28px; border-radius: 999px;
border: 1px solid var(--line); background: var(--elevated); cursor: pointer;
display: inline-flex; align-items: center; justify-content: space-between;
padding: 0 6px;
transition: background-color var(--dur-short4) var(--ease-standard),
border-color var(--dur-short4) var(--ease-standard);
}
.qs-switch[aria-checked="true"] { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }
.qs-auto {
font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em;
color: var(--hint); background: transparent;
border: 1px solid var(--line); border-radius: 999px;
padding: 0 8px; min-height: 30px; cursor: pointer;
transition: color var(--dur-short4) var(--ease-standard),
border-color var(--dur-short4) var(--ease-standard);
}
.qs-auto:hover { color: var(--ink); border-color: var(--hint); }
.qs-tile:focus-visible, .qs-switch:focus-visible, .qs-auto:focus-visible {
outline: 2px solid var(--accent-ink); outline-offset: 2px;
}
.ns-veil {
position: fixed; inset: 0; z-index: 300; pointer-events: none;
background: rgb(255 171 64 / 0.12); mix-blend-mode: multiply;
opacity: 0; transition: opacity 400ms var(--ease-standard);
}
.ns-veil.on { opacity: 1; }
@supports (transition-timing-function: linear(0, 1)) {
/* the thumb slide is a spatial token: it takes the expressive spring */
}
@media (max-width: 900px) {
.qs-cluster { margin-left: auto; }
.qs-tile span { display: none; } /* icon-only Night Shift on narrow nav */
.qs-tile { padding: 0 8px; }
.qs-auto { display: none; }
}
@media (max-width: 900px) {
.qs-cluster { margin-left: auto; }
.qs-tile span { display: none; } /* icon-only Night Shift on narrow nav */
.qs-tile { padding: 0 8px; }
.qs-auto { display: none; }
}
/* ════════════════════════════════════════════════════════════════════
* ASSET SLOTS (2026-09-05) — reservations, not decoration.
* Dashed hairline frames that name the asset they are waiting for:
* PHOTO (A1/A2), ILLUSTRATION (I1), MERMAID (D1 — the draft diagram
* source is the placeholder content, ready to render on adoption).
* Each slot dies the day its real asset lands; the frame is the only
* placeholder affordance, everything else stays token-ruled.
* ════════════════════════════════════════════════════════════════════ */
/* ── FOLDABLE SPANNING (2026-09-05) ──────────────────────────────────
Pixel on foldables keeps content off the hinge (canon tokens
--fold-hinge-* already declare the segment geometry). When this page
spans two segments, every band gains the hinge gutter so text and
controls never straddle the crease; grids reflow per-pane naturally. */
@media (horizontal-viewport-segments: 2) {
.hero, section.band, .final-cta, footer {
padding-left: calc(env(viewport-segment-left, 0px) + var(--space-6));
padding-right: calc(env(viewport-segment-right, 0px) + var(--space-6));
}
.key-grid { grid-template-columns: 1fr; }
}
}
.visually-hidden {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
/* ════════════════════════════════════════════════════════════════════
* SIDE NAV — the workflowy rail, ported from the brand guide
* (skyzai_brand_guide-v7.0.1.html). Same structure, same class names,
* tokens mapped: surface→surface, vdim→line, cream→ink, dim→hint,
* accent→accent-ink. ≥1280px only; the classic nav rules below.
* ════════════════════════════════════════════════════════════════════ */
.sidebar {
display: none; width: 288px; min-height: 100vh;
background: var(--surface);
border-right: 1px solid var(--line);
padding: 28px 0;
position: fixed; top: 0; left: 0;
overflow-y: auto; z-index: 100;
flex-direction: column;
}
.sidebar-logo {
padding: 0 24px 24px;
border-bottom: 1px solid var(--line);
margin-bottom: 20px;
}
.sidebar-wordmark {
font-family: var(--font-mono); font-size: 15px;
color: var(--ink); letter-spacing: 0.05em;
}
.sidebar-wordmark span { color: var(--muted); }
.sidebar-tag {
font-family: var(--font-mono); font-size: 9px;
color: var(--hint); margin-top: 4px;
letter-spacing: 0.08em; text-transform: uppercase;
}
.sidebar-outline { display: grid; gap: 6px; }
.workflowy-search {
width: 100%; min-height: 40px;
border: 1px solid var(--line); border-radius: 12px;
padding: 0 16px; background: var(--elevated); color: var(--ink);
font-family: var(--font-mono); font-size: 12px;
}
.workflowy-search::placeholder { color: var(--hint); }
.workflowy-search:focus-visible {
border-color: var(--accent-ink);
outline: 2px solid var(--accent-ink); outline-offset: 2px;
}
.workflowy-status {
min-height: 16px; color: var(--hint);
font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em;
}
.workflowy-status:empty { display: none; }
.workflowy-crumbs {
display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
min-height: 26px; min-width: 0; overflow: hidden; white-space: nowrap;
}
.workflowy-crumbs button {
border: 0; background: transparent; color: var(--hint); cursor: pointer;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
min-height: 26px; padding: 0 8px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.workflowy-crumbs button:hover { color: var(--accent-ink); }
.workflowy-crumbs button:focus-visible {
color: var(--accent-ink); outline: 2px solid var(--accent-ink);
outline-offset: -4px; border-radius: 6px;
}
.workflowy-crumbs button[aria-current="page"] { color: var(--accent-ink); }
.workflowy-crumbs span { color: var(--line); }
.workflowy-list { display: grid; gap: 0; min-height: 0; overflow: visible; padding-right: 2px; }
.sidebar .workflowy-list { max-height: calc(100vh - 210px); overflow: auto; }
.workflowy-branch { min-width: 0; }
.workflowy-node {
display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 4px;
min-height: 38px; align-items: center; border: 0; border-radius: 4px;
padding: 2px 0; background: transparent;
}
.workflowy-bullet {
--workflowy-bullet-size: 20px;
--workflowy-bullet-inner-size: 8px;
--workflowy-bullet-outer-opacity: 0.30;
--workflowy-bullet-inner-opacity: 0.70;
--workflowy-bullet-ink: var(--ink);
width: 34px; height: 34px; margin-top: 0; border: 0; border-radius: 999px;
background: transparent; color: var(--workflowy-bullet-ink);
cursor: pointer; font-size: 0; display: grid; place-items: center; position: relative;
}
.workflowy-bullet::before,
.workflowy-bullet::after {
content: ""; position: absolute; inset: 50% auto auto 50%;
transform: translate(-50%, -50%); border-radius: 999px; pointer-events: none;
transition: opacity var(--dur-short3) var(--ease-standard),
transform var(--dur-short3) var(--ease-standard);
}
.workflowy-bullet::before {
width: var(--workflowy-bullet-size); height: var(--workflowy-bullet-size);
background: currentColor; opacity: 0;
}
.workflowy-bullet::after {
width: var(--workflowy-bullet-inner-size); height: var(--workflowy-bullet-inner-size);
background: currentColor; opacity: var(--workflowy-bullet-inner-opacity);
}
.workflowy-node.has-children .workflowy-bullet { opacity: 1; }
.workflowy-node.has-children .workflowy-bullet::before { opacity: var(--workflowy-bullet-outer-opacity); }
.workflowy-node.is-leaf .workflowy-bullet { cursor: pointer; opacity: 1; }
.workflowy-node-card {
display: flex; flex-direction: column; justify-content: center;
width: 100%; min-height: 38px; min-width: 0; border: 0; padding: 0;
background: transparent; color: inherit; cursor: pointer;
text-align: left; text-decoration: none;
}
.workflowy-node-title,
.workflowy-node-summary { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workflowy-node-title {
color: var(--ink);
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em;
}
.workflowy-node-card:hover .workflowy-node-title { color: var(--accent-ink); }
.workflowy-node-card.active .workflowy-node-title { color: var(--accent-ink); }
.workflowy-node-summary {
margin: 4px 0 0; color: var(--hint);
font-family: var(--font-mono); font-size: 9.5px;
}
.workflowy-children {
margin-left: 12px; padding-left: 10px;
border-left: 1px solid color-mix(in srgb, var(--line), transparent 38%);
}
.sidebar .workflowy-node { min-height: 38px; grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 4px; padding: 0; }
.sidebar .workflowy-bullet { width: 34px; height: 34px; }
.sidebar .workflowy-children { margin-left: 8px; padding-left: 16px; }
.workflowy-summary { margin: 6px 0 0; color: var(--hint); font-family: var(--font-mono); font-size: 10px; }
.workflowy-bullet:focus-visible, .workflowy-node-card:focus-visible {
outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 8px;
}
.sidebar-foot {
margin-top: auto; padding: var(--space-4) 12px 0;
border-top: 1px solid var(--line);
display: flex; flex-direction: column; gap: 10px;
}
.sidebar-foot .qs-cluster { flex-wrap: wrap; }
.sidebar-foot .nav-cta { justify-content: center; }
@media (min-width: 1280px) {
.sidebar { display: flex; flex-direction: column; }
nav.primary { display: none; }
body { padding-left: 288px; }
/* with the rail, the hero center narrows — step the display sizes down so
the three-beat headline holds one line */
.hero .headline { font-size: clamp(28px, 3vw, 42px); }
}
/* ── side-nav item anatomy (from apu.bot/src/lib/Outline.tsx) ─────────
numbered badge + title row + child count; data-aia-side-nav-* is the
machine-readable contract the app exposes on the same nodes. */
.workflowy-arrow {
width: 20px; height: 22px; border: 0; background: transparent; cursor: pointer;
color: var(--hint); opacity: 0;
transition: opacity var(--dur-short3) var(--ease-standard);
display: grid; place-items: center; align-self: center; justify-self: center;
}
.workflowy-node:hover .workflowy-arrow,
.workflowy-node:focus-within .workflowy-arrow,
.workflowy-arrow:focus-visible { opacity: 1; }
.workflowy-arrow::before {
content: ""; width: 7px; height: 7px;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg) translate(-1px, -1px);
transition: transform var(--dur-short3) var(--ease-standard);
}
.workflowy-node.is-expanded .workflowy-arrow::before { transform: rotate(45deg) translate(-2px, 0); }
.workflowy-node.has-children .workflowy-bullet { width: 48px; height: 48px; }
/* ════════════════════════════════════════════════════════════════════
* SHOWCASES (2026-09-05) — the former asset slots, filled.
* D1 mermaid lifecycle (inline SVG, token-themed), I1 sector map
* (line-art on sector hues), A1/A2 product-UI renders. No photography
* exists in the estate; the UI renders depict the real interfaces.
* ════════════════════════════════════════════════════════════════════ */
.showcase {
margin: var(--space-6) auto 0;
border: 1px solid var(--line); border-radius: 14px;
background: color-mix(in srgb, var(--elevated) 40%, transparent);
overflow: hidden;
}
.showcase svg { display: block; width: 100%; height: auto; }
.showcase text {
font-family: var(--font-mono); font-size: 12px;
fill: var(--ink); text-anchor: middle;
}
.showcase .sec-node rect {
fill: color-mix(in srgb, var(--elevated) 55%, transparent);
stroke: color-mix(in srgb, currentColor 55%, transparent);
}
.showcase .sec-node text { fill: var(--ink); font-size: 13px; }
.showcase .sec-sub { fill: var(--hint); font-size: 10px; }
.showcase .sec-feed line {
stroke: var(--muted); stroke-width: 1; opacity: 0.5;
stroke-dasharray: 3 5;
}
.showcase .hub-mark path { fill: none; stroke: var(--accent-ink); stroke-width: 90; }
.showcase .hub-lbl {
fill: var(--hint); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
.showcase-cap {
padding: 12px 18px 14px; border-top: 1px solid var(--line);
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
color: var(--hint);
}
.showcase-cap strong { color: var(--muted); font-weight: 500; }
.showcase-a1 { max-width: 760px; }
.showcase-a2 { max-width: 760px; }
.ui-mock { border-bottom: 1px solid var(--line); }
.ui-head, .ui-foot {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
padding: 10px 16px;
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em;
color: var(--hint);
}
.ui-head { border-bottom: 1px solid var(--line); color: var(--muted); }
.ui-foot { border-top: 1px solid var(--line); }
.ui-foot em { font-style: normal; color: var(--accent-ink); }
.ui-state { color: var(--accent-ink); }
.ui-body { padding: 18px 20px; font-family: var(--font-text); font-size: 13.5px; line-height: 1.65; color: var(--ink); }
.ui-body p { margin: 0 0 10px; }
.ui-body p:last-child { margin-bottom: 0; }
.ui-dim { color: var(--hint); font-family: var(--font-mono); font-size: 11px; }
.ui-strong { font-weight: 600; }
/* ── SUBPAGES (2026-09-05) — shared page grammar ────────────────────── */
.page-head {
padding: 150px var(--space-6) var(--space-7);
border-bottom: 1px solid var(--line);
position: relative;
}
.page-title {
font-family: var(--font-display); font-weight: 300;
font-size: clamp(34px, 4.2vw, 58px); line-height: 1.08;
letter-spacing: -0.03em; color: var(--ink); margin: 0;
}
.page-title span { color: var(--cream); }
.page-lede {
font-family: var(--font-text); font-size: 16px; line-height: 1.6;
color: var(--muted); margin: var(--space-4) 0 0; max-width: 52ch;
}
.faq-list { display: grid; gap: 10px; max-width: 820px; }
.faq-item {
border: 1px solid var(--line); border-radius: 12px;
background: color-mix(in srgb, var(--elevated) 40%, transparent);
padding: 0;
}
.faq-item summary {
cursor: pointer; list-style: none; display: flex; justify-content: space-between;
align-items: center; padding: 14px 18px;
font-family: var(--font-mono); font-size: 12.5px; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--hint); font-size: 14px; }
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-item p { margin: 14px 18px; font-family: var(--font-text); font-size: 13.5px; line-height: 1.65; color: var(--muted); }
@media (min-width: 1280px) {
.page-head { padding: 150px var(--space-6) var(--space-7); }
}
/* Reduced motion — control-state transitions go instant (the veil fade
and the switch thumb are the two remaining animated control states). */
@media (prefers-reduced-motion: reduce) {
.ns-veil { transition: none; }
}
/* ── SUBPAGE HEAD — the hero grammar, quieter ─────────────────────────
The triaxial field and the cascade carry over; the claim is one beat,
not three. Children reveal with the canon decelerate; springs apply
under @supports like the hero cascade. */
.page-head .hero-bg { opacity: 0.7; }
.page-head .section-label,
.page-head .page-title,
.page-head .page-lede { position: relative; z-index: 1; }
.page-head .section-label { animation: mk-fade var(--dur-long2) 100ms var(--ease-standard) both; }
.page-head .page-title { animation: mk-rise var(--dur-long4) 220ms var(--ease-emphasized-decelerate) both; }
.page-head .page-lede { animation: mk-rise var(--dur-long2) 420ms var(--ease-emphasized-decelerate) both; }
.page-title span { color: var(--cream); }
@media (prefers-reduced-motion: reduce) {
.page-head .section-label,
.page-head .page-title,
.page-head .page-lede { animation: none !important; }
}
/* ── SUBPAGE HEAD ATMOSPHERE (2026-09-05) ─────────────────────────────
Corner tone fields per page, cycling the F.I.R.E. hues. Radial
gradients, NOT filter:blur (the research's GPU-cost law); they flatten
under prefers-reduced-transparency like every other translucent layer. */
.page-atmos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.page-atmos::before,
.page-atmos::after {
content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.page-atmos::before { width: 560px; height: 420px; top: -140px; left: -120px; opacity: 0.30; }
.page-atmos::after { width: 520px; height: 380px; bottom: -160px; right: -100px; opacity: 0.24; }
.page-atmos[data-tone="finance"]::before { background: radial-gradient(circle, var(--sector-finance) 0%, transparent 70%); }
.page-atmos[data-tone="finance"]::after { background: radial-gradient(circle, var(--sector-electronic-lab) 0%, transparent 70%); }
.page-atmos[data-tone="intel"]::before { background: radial-gradient(circle, var(--sector-insurance) 0%, transparent 70%); }
.page-atmos[data-tone="intel"]::after { background: radial-gradient(circle, var(--sector-real-infra) 0%, transparent 70%); }
.page-atmos[data-tone="real"]::before { background: radial-gradient(circle, var(--sector-real-infra) 0%, transparent 70%); }
.page-atmos[data-tone="real"]::after { background: radial-gradient(circle, var(--sector-insurance) 0%, transparent 70%); }
.page-atmos[data-tone="lab"]::before { background: radial-gradient(circle, var(--sector-electronic-lab) 0%, transparent 70%); }
.page-atmos[data-tone="lab"]::after { background: radial-gradient(circle, var(--sector-finance) 0%, transparent 70%); }
@media (prefers-color-scheme: light) {
:root[data-brand] .page-atmos::before, :root[data-brand] .page-atmos::after { opacity: 0.16; }
}
:root[data-surface="light"] .page-atmos::before, :root[data-surface="light"] .page-atmos::after { opacity: 0.16; }
@media (prefers-reduced-transparency: reduce) {
.page-atmos { display: none; }
}
/* ── CONTEXT PANE (2026-09-05) — the pane treatment, web grammar ─────
≥1600px: content pane + persistent context pane (the page outline),
the HIG/Material expanded-layout pattern. Foldable spanning places
the pane in segment 2 via the canon segment envs. Hidden below. */
.toc-pane { display: none; }
@media (min-width: 1600px) {
body[data-page] { padding-right: 292px; }
.toc-pane {
display: block; position: fixed; right: 34px; top: 150px; width: 234px;
z-index: 50;
}
.toc-label {
font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
color: var(--hint); margin-bottom: 10px;
}
.toc-link {
display: block; padding: 7px 0 7px 14px;
font-family: var(--font-mono); font-size: 11px; line-height: 1.4;
color: var(--muted); text-decoration: none;
border-left: 1px solid var(--line);
transition: color var(--dur-short4) var(--ease-standard),
border-color var(--dur-short4) var(--ease-standard);
}
.toc-link:hover { color: var(--ink); }
.toc-link.active {
color: var(--accent-ink); border-left-color: var(--accent-ink);
}
}
@media (horizontal-viewport-segments: 2) {
.toc-pane {
display: block; position: fixed;
left: env(viewport-segment-left, 1, 0px);
width: env(viewport-segment-width, 1, 60px);
top: 120px; right: auto;
}
}
.strip-link-tap {
display: inline-flex; align-items: center; min-height: 44px;
padding: 0 4px;
}
/* the hero claim is the page's h1 (a11y: one h1 per page) */
h1.headline { margin: 0; }
/* Material top app bar: navigation icon (burger) at the far LEFT,
actions at the right — owner rule 2026-09-06. */
.nav-hamburger { margin-right: var(--space-3); }
/* Release repair, 2026-09-06: content-safe editorial layout on the shared
Material foundation. No viewport clipping, faux live indicators or
experimental glass treatment on actions. Earlier study layers are history. */
.hero { height: auto; min-height: 100svh; }
.hero-center, .key-panel { min-width: 0; }
.hero-center .subhead { max-width: 44ch; line-height: 1.6; }
.hero-center .cta-sub { line-height: 1.6; }
.stat-val { overflow-wrap: anywhere; }
.lifecycle-map {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
gap: 12px; padding: 0; margin: 0; list-style: none;
}
.lifecycle-map li {
display: grid; gap: 8px; padding: 16px;
border: 1px solid var(--line); border-radius: var(--shape-medium, 12px);
background: var(--md-sys-color-surface-container); color: var(--ink);
}
.lifecycle-map strong { font: var(--m3-type-title-medium); }
.lifecycle-map span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.key-label { font-weight: 500; }
.key-panel p, .ci-body, .ci-note, .ui-body { overflow-wrap: anywhere; }
.ci-body p + p { margin-top: 16px; }
.band > .strip-link-tap { margin-top: 24px; }
.strip-link-tap, .toc-link, .footer-links a, .footer-contracts a,
.nav-cta, .cta-btn, .cta-secondary { min-height: 48px; }
.toc-link, .footer-links a, .footer-contracts a { display: flex; align-items: center; }
.nav-hamburger { align-items: center; justify-content: center; }
.material-symbol { width: 24px; height: 24px; display: inline-block; flex: none; background: currentColor; }
.symbol-menu { mask: url('assets/material-symbols/menu.svg') center / contain no-repeat; }
.symbol-tonality { mask: url('assets/material-symbols/tonality.svg') center / contain no-repeat; }
.symbol-dark-mode { mask: url('assets/material-symbols/dark_mode.svg') center / contain no-repeat; }
.nav-hamburger .material-symbol { height: 24px; width: 24px; }
.qs-switch { width: 56px; height: 48px; min-width: 56px; }
.qs-switch .material-symbol { position: absolute; left: 15px; }
.cta-btn, .cta-btn:hover {
background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
border-color: var(--md-sys-color-primary); box-shadow: none; filter: none;
font: var(--m3-type-label-large); height: auto; padding: 12px 24px; line-height: 1.4;
}
.nav-cta, .cta-secondary, .nav-cta:hover, .cta-secondary:hover {
background: transparent; color: var(--md-sys-color-primary);
border-color: var(--md-sys-color-outline); box-shadow: none; filter: none;
font: var(--m3-type-label-large);
}
.cta-btn::after, .nav-cta::after, .cta-secondary::after {
z-index: 0; background: currentColor; opacity: 0; transition: opacity 120ms ease;
}
.cta-btn:hover::after, .nav-cta:hover::after, .cta-secondary:hover::after { opacity: .08; }
.cta-btn:active::after, .nav-cta:active::after, .cta-secondary:active::after { opacity: .10; }
html:not(.js-ready) .nav-hamburger, html:not(.js-ready) .qs-cluster { display: none; }
@media (prefers-color-scheme: light) {
:root[data-brand]:not([data-surface="dark"]) {
--accent-ink: var(--md-sys-color-primary);
}
}
:root[data-surface="light"] { --accent-ink: var(--md-sys-color-primary); }
@media (max-width: 1279px) {
nav.primary { padding-inline: 16px; gap: 8px; }
.nav-hamburger { margin-right: 0; }
nav.primary .qs-cluster { gap: 4px; }
nav.primary .qs-tile { min-width: 48px; min-height: 48px; justify-content: center; }
}
@media (max-width: 599px) {
.hero-center .headline { font-size: clamp(28px, 7.5vw, 42px); }
.showcase svg { display: none; } /* All sector content is also readable in the four cards. */
.ui-head, .ui-foot { flex-wrap: wrap; gap: 12px; }
.cta-sub span { margin-inline: 4px; }
}
@media (forced-colors: active) {
.hero-atmos, .page-atmos, .hero-bg, .logo-halo, .ns-veil { display: none; }
.cta-btn, .nav-cta, .cta-secondary { border: 1px solid ButtonText; }
.material-symbol { background: ButtonText; }
}
/* Unmodified font-face declarations from the v8.0.7 source; bundled binaries.
Owner's current family ruling supersedes the earlier linked-family study. */
@font-face {
font-family: 'Google Sans Flex';
font-style: normal;
font-weight: 100 1000;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/GoogleSansFlex-math.woff2) format('woff2');
unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
@font-face {
font-family: 'Google Sans Flex';
font-style: normal;
font-weight: 100 1000;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/GoogleSansFlex-symbols.woff2) format('woff2');
unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
@font-face {
font-family: 'Google Sans Flex';
font-style: normal;
font-weight: 100 1000;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/GoogleSansFlex-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Google Sans Flex';
font-style: normal;
font-weight: 100 1000;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/GoogleSansFlex-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root, :root[data-surface] {
--font-sans: 'Google Sans Flex', sans-serif;
--font-text: 'Google Sans Flex', sans-serif;
--font-display: 'Google Sans Flex', sans-serif;
--font-flex: 'Google Sans Flex', sans-serif;
}
/* Owner-requested glow restoration, 2026-09-06: retain the earlier blurred
sector fields, centre pool and page tones. This four-sector illustration
is Agentz-local art direction, an exception to v8.0.7 §02.2's single
semantic-role-pair method, not an amendment to the shared guide.
Geometry moves; independent hue tracks stay disabled. Explicit token
bindings avoid relying on the registered --orb-* literal initial values. */
.hero-atmos .g-f { --orb-a: var(--sector-finance); animation: orb-drift-a 23s var(--ease-emphasized) infinite alternate, vessel-a 17s var(--ease-anticipate) infinite alternate; }
.hero-atmos .g-i { --orb-b: var(--sector-insurance); animation: orb-drift-b 29s var(--ease-emphasized) infinite alternate, vessel-b 19s var(--ease-anticipate) infinite alternate; }
.hero-atmos .g-r { --orb-c: var(--sector-real-infra); animation: orb-drift-c 31s var(--ease-emphasized) infinite alternate, vessel-c 13s var(--ease-anticipate) infinite alternate; }
.hero-atmos .g-e { --orb-d: var(--sector-electronic-lab); animation: orb-drift-d 37s var(--ease-emphasized) infinite alternate, vessel-d 11s var(--ease-anticipate) infinite alternate; }
.hero :is(.tagline,.headline,.headline-2,.subhead,.cta-group) { animation-timing-function: var(--ease-standard); }
.reveal.in { transition-timing-function: var(--ease-standard); }