/* ============================================================
DAIDRA FOUNDATION — the quality floor every build starts from
v1.0 · 2026-08-06 · sources: live-verified extractions in
knowledge/websites-enterprise.md (Stripe et al.) + DESIGN.md
HOW TO USE (per project):
1. Copy this file into the project as the base of site.css.
2. Skin ONLY the "BRAND SLOTS" block — fonts, hues, radius,
heading weight. Everything below the slots is the standard;
it should survive the skin untouched.
3. The specimen page (index.html beside this file) shows every
token and primitive in every state — rebuild it mentally
against your skin before building pages.
Rules encoded here (don't fight them):
- Spacing lives on an 8px grid. Type lives on the clamp() scale.
- Two easings, four durations. Nothing animates off-system.
- Never `transition: all`. Hover moves ≥2 properties.
- :focus-visible is a designed brand element, not a default.
- Content never touches the viewport edge (--px gutter).
- .section uses LONG-HAND padding (shorthand resets .wrap).
- prefers-reduced-motion gets designed static states, not
frozen half-animations.
============================================================ */
/* ----------------------------------------------------------
1. BRAND SLOTS — the only block a project should edit
---------------------------------------------------------- */
:root {
/* Type: one display face, one text face (or one variable font
for both — preload it, font-display: block if <80KB). */
--font-display: "Outfit", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-body: "Outfit", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* Enterprise voice = light-weight large type. 300–400 display
weight reads expensive; 700 reads template. */
--weight-display: 400;
--weight-body: 400;
--weight-medium: 500; /* the heaviest weight most UIs need */
/* Brand hues. --brand-h drives the neutral tint below — the
single cheapest "expensive" trick: neutrals tinted toward the
brand hue instead of pure gray. */
--brand-h: 210; /* marine blue */
--accent: #12599E;
--accent-strong: #0D4478;
/* Geometry personality: 4px = precise/enterprise (Stripe),
8-12px = friendly SaaS, 999px pills = consumer. Pick ONE. */
--radius: 6px;
--radius-lg: 12px;
--radius-mark: 20px 20px 20px 4px; /* brand fingerprint */
--radius-pill: 999px;
}
/* ----------------------------------------------------------
2. NEUTRALS — brand-tinted ramp (never pure gray)
---------------------------------------------------------- */
:root {
--n-50: oklch(0.985 0.004 var(--brand-h));
--n-100: oklch(0.96 0.006 var(--brand-h));
--n-200: oklch(0.91 0.008 var(--brand-h));
--n-300: oklch(0.83 0.010 var(--brand-h));
--n-500: oklch(0.60 0.020 var(--brand-h));
--n-700: oklch(0.40 0.028 var(--brand-h));
--n-900: oklch(0.25 0.030 var(--brand-h));
--n-950: oklch(0.17 0.025 var(--brand-h));
}
/* ----------------------------------------------------------
3. SEMANTIC COLOR + SECTION MODES
Components consume ONLY these slots. Sections switch skin by
mode class — components are never restyled per section.
---------------------------------------------------------- */
:root, .mode-light {
--surface: #fff;
--surface-2: var(--n-50);
--text: var(--n-900);
--text-2: var(--n-500);
--line: var(--n-200);
--link: var(--accent-strong);
}
.mode-tint {
--surface: var(--n-50);
--surface-2: #fff;
}
.mode-dark {
--surface: var(--n-950);
--surface-2: var(--n-900);
--text: var(--n-50);
--text-2: var(--n-300);
--line: oklch(0.32 0.03 var(--brand-h));
--link: oklch(0.75 0.12 var(--brand-h));
}
/* ----------------------------------------------------------
4. SPACE — 8px grid + the edge gutter
---------------------------------------------------------- */
:root {
--s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px;
--s-6: 48px; --s-8: 64px; --s-12: 96px; --s-16: 128px; --s-20: 160px;
--px: clamp(24px, 5vw, 96px); /* viewport edge gutter */
--measure: 68ch; /* body copy max width */
--wrap: 1200px;
}
/* ----------------------------------------------------------
5. TYPE SCALE — clamp()-fluid, tracking tightens as size grows
---------------------------------------------------------- */
:root {
--text-xs: 0.75rem; /* 12 — labels */
--text-sm: 0.875rem; /* 14 — UI */
--text-md: 1rem; /* 16 — body */
--text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
--text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
--text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);
--text-hero: clamp(2.5rem, 1.75rem + 3.5vw, 4.5rem);
}
/* ----------------------------------------------------------
6. MOTION — the closed system. Two easings, four durations.
---------------------------------------------------------- */
:root {
--ease-out: cubic-bezier(0.25, 1, 0.5, 1); /* easeOutQuart — default */
--ease-inout: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* panels, nav */
--dur-1: 150ms; /* feedback: press, toggle */
--dur-2: 240ms; /* hover, small reveals */
--dur-3: 450ms; /* panels, section transitions */
--dur-4: 800ms; /* card lifts, entrances */
--stagger: 70ms; /* sibling choreography interval */
}
/* ----------------------------------------------------------
7. ELEVATION + FOCUS — designed, tokenized
---------------------------------------------------------- */
:root {
--shadow-soft: 0 20px 40px -20px rgb(0 0 0 / 0.12);
--shadow-lift: 0 32px 64px -24px rgb(0 0 0 / 0.18);
--focus-ring: 0 0 0 3px oklch(0.55 0.19 var(--brand-h) / 0.18);
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
box-shadow: var(--focus-ring);
border-radius: var(--radius);
}
/* ----------------------------------------------------------
8. BASE
---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-weight: var(--weight-body);
font-size: var(--text-md);
line-height: 1.6;
color: var(--text);
background: var(--surface);
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: var(--weight-display);
line-height: 1.1;
margin: 0 0 var(--s-3);
text-wrap: balance;
}
h1 { font-size: var(--text-hero); letter-spacing: -0.022em; line-height: 1.05; }
h2 { font-size: var(--text-2xl); letter-spacing: -0.018em; }
h3 { font-size: var(--text-xl); letter-spacing: -0.012em; }
h4 { font-size: var(--text-lg); letter-spacing: -0.008em; font-weight: var(--weight-medium); }
p { margin: 0 0 var(--s-2); max-width: var(--measure); text-wrap: pretty; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }
/* Eyebrow / utility label — mono, tracked wide, the "instrument" voice */
.eyebrow {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-2);
}
/* ----------------------------------------------------------
9. LAYOUT — section + wrap (long-hand padding, always)
---------------------------------------------------------- */
.section {
/* LONG-HAND on purpose: `padding: X 0` here silently resets
.wrap's gutters when combined (documented failure). */
padding-top: var(--s-12);
padding-bottom: var(--s-12);
background: var(--surface);
color: var(--text);
}
.section--hero {
min-height: 72vh; /* never 100vh — next section peeks */
display: flex;
align-items: center;
position: relative;
background-image:
radial-gradient(1100px 620px at 78% 8%, rgba(207,224,242,.62), rgba(207,224,242,0) 70%),
radial-gradient(720px 480px at 4% 96%, rgba(220,237,180,.24), rgba(220,237,180,0) 72%),
linear-gradient(180deg, var(--shell) 0%, #FBF9F5 62%, var(--shell) 100%);
}
.wrap {
max-width: var(--wrap);
margin-inline: auto;
padding-left: var(--px);
padding-right: var(--px);
}
/* ----------------------------------------------------------
10. PRIMITIVES — one spec each, reused verbatim on every page
---------------------------------------------------------- */
/* Button — asymmetric vertical padding (optical balance),
transitions name their properties, hover moves ≥2. */
.btn {
display: inline-flex;
align-items: center;
gap: var(--s-1);
padding: 13px 24px 14px;
border: 1px solid transparent;
border-radius: var(--radius);
font: var(--weight-medium) var(--text-md) / 1 var(--font-body);
color: #fff;
background: var(--accent);
cursor: pointer;
text-decoration: none;
transition:
background-color var(--dur-2) var(--ease-out),
transform var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out);
}
.btn:hover, .btn:focus-visible {
background: var(--accent-strong);
transform: translateY(-1px);
box-shadow: var(--shadow-soft);
}
.btn:active { transform: translateY(0); transition-duration: var(--dur-1); }
.btn--ghost {
background: transparent;
color: var(--text);
border-color: var(--line);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
background: var(--surface-2);
border-color: var(--text-2);
transform: translateY(-1px);
box-shadow: none;
}
.btn[disabled] { opacity: 0.45; pointer-events: none; }
/* The one-variable hover engine — parent flips --hover, children
consume it. Focus replays the full hover choreography for free. */
.hoverable { --hover: 0; }
.hoverable:hover, .hoverable:focus-visible, .hoverable:focus-within { --hover: 1; }
/* Link-arrow — title + arrow whose shaft draws in on hover */
.link-arrow {
--hover: 0;
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: var(--weight-medium);
color: var(--link);
text-decoration: none;
}
.link-arrow:hover, .link-arrow:focus-visible { --hover: 1; }
.link-arrow .arrow { transition: transform var(--dur-2) var(--ease-out); }
.link-arrow .arrow .shaft {
opacity: var(--hover);
transition: opacity var(--dur-2) var(--ease-out);
}
.link-arrow:hover .arrow, .link-arrow:focus-visible .arrow { transform: translateX(3px); }
/* Card — soft negative-spread shadow, lift on hover */
.card {
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--s-4);
transition:
transform var(--dur-4) var(--ease-out),
box-shadow var(--dur-4) var(--ease-out),
border-color var(--dur-2) var(--ease-out);
}
.card:hover, .card:focus-within {
transform: translateY(-4px);
box-shadow: var(--shadow-lift);
border-color: var(--n-300);
}
.card > :last-child { margin-bottom: 0; }
/* Stat — big number, smaller unit, mono label underneath */
.stat { display: grid; gap: 4px; }
.stat b {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: var(--weight-display);
letter-spacing: -0.018em;
line-height: 1;
}
.stat b small { font-size: 0.55em; font-weight: var(--weight-medium); }
.stat .eyebrow { margin-top: 2px; }
/* Dom-graphic scaffold — product UI as scaled live HTML.
Design the mock at a fixed px width, scale the block. */
.dom-graphic {
--gw: 320px; /* design width */
--gs: 1; /* scale (set per placement / media query) */
width: calc(var(--gw) * var(--gs));
pointer-events: none;
user-select: none;
}
.dom-graphic > .dg-frame {
width: var(--gw);
transform: scale(var(--gs));
transform-origin: top left;
}
/* ----------------------------------------------------------
11. REVEAL CHOREOGRAPHY — IO adds .in; siblings stagger.
JS contract (site.js):
const io = new IntersectionObserver(es => es.forEach(e => {
if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
}), { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
document.querySelectorAll('.reveal').forEach(el => io.observe(el));
Fail-safe: .reveal without JS must still be readable — the
`no-js` class (set in , removed by JS) keeps opacity 1.
---------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(20px);
transition:
opacity var(--dur-4) var(--ease-out),
transform var(--dur-4) var(--ease-out);
transition-delay: calc(var(--i, 0) * var(--stagger));
}
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
/* ----------------------------------------------------------
12. REDUCED MOTION — designed static states, not freezes
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
.btn, .btn--ghost, .card, .link-arrow .arrow, .link-arrow .arrow .shaft {
transition: none;
}
.card:hover { transform: none; }
.btn:hover { transform: none; }
/* Per-project: every animated signature block MUST add its own
designed fallback here (static frame, final state, or swap-in
element) — never leave it half-animated. */
}
/* ============================================================
13. TIDAL STAYS — project layer
Palette, components and the tide-rule signature.
Approved design system: docs/design-system.html
============================================================ */
:root{
--shell:#F7F5F0; --sand:#EDE7DC; --dune:#DDD3C4;
--ink:#12161A; --deepwater:#072338;
--tide:#12599E; --tide-deep:#0D4478; --ebb:#082A4A;
--foam:#CFE0F2; --shallows:#E8F1FA; --blue-400:#3C7FC4;
--signal:#7448CE; --anchor:#5B2436; --coral:#E0614C; --seagrass:#DCEDB4;
--slate:#56626F; --mist:#8B95A2; --hairline:#E0DAD0;
--on-dark:#EDF3F9; --on-foam:var(--ebb);
--surface:#FFFFFF; --surface-2:var(--sand);
--text:var(--ink); --text-2:var(--slate); --text-3:var(--mist);
--line:var(--hairline);
--ease-out-expo:cubic-bezier(.16,1,.3,1);
--ease-brand:cubic-bezier(.2,.8,.2,1);
--dur-1:150ms; --dur-2:280ms; --dur-3:480ms; --dur-4:640ms;
--stagger:70ms;
--shadow-soft:0 1px 2px rgba(7,35,56,.07);
--shadow-lift:0 12px 32px rgba(7,35,56,.11);
--shadow-deep:0 28px 64px rgba(7,35,56,.18);
}
html{scroll-behavior:smooth}
body{background:var(--shell); color:var(--text); font-family:var(--font-display);
font-weight:400; font-variant-numeric:lining-nums; -webkit-font-smoothing:antialiased}
/* ---- the tide rule: signature device ---- */
.tide-rule{display:block;position:relative;height:3px;background:var(--line);border-radius:2px;width:100%}
.tide-rule::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--fill,20%);
background:var(--tide);border-radius:2px;transition:width var(--dur-4) var(--ease-out-expo)}
.tide-rule.on-dark{background:rgba(255,255,255,.2)}
.tide-rule.on-dark::after{background:var(--foam)}
.eyebrow{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
letter-spacing:.14em;color:var(--tide);margin:0 0 10px}
.eyebrow.on-dark{color:var(--foam)}
/* ---- header + mega menu (motion move 4) ---- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(247,245,240,.88);
backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;
transition:border-color var(--dur-2) var(--ease-brand),background var(--dur-2) var(--ease-brand)}
.hdr.stuck{border-bottom-color:var(--line)}
.hdr-in{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,44px);height:70px;
display:flex;align-items:center;gap:34px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:21px;font-weight:500;
letter-spacing:-.02em;text-decoration:none;color:var(--text)}
.brand svg{width:24px;height:24px;flex:none}
.mainnav{display:flex;align-items:center;gap:4px;margin-left:6px}
.navitem{position:relative}
.navlink{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:var(--radius-pill);
font-size:15px;color:var(--text-2);background:transparent;border:0;cursor:pointer;
font-family:inherit;text-decoration:none;
transition:color var(--dur-2) var(--ease-brand),background var(--dur-2) var(--ease-brand)}
.navlink:hover,.navitem.is-open .navlink{color:var(--text);background:var(--shallows)}
.navlink .chev{width:11px;height:11px;transition:transform var(--dur-2) var(--ease-brand)}
.navitem.is-open .chev{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 12px);left:-14px;width:min(600px,86vw);
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
box-shadow:var(--shadow-deep);padding:22px;opacity:0;visibility:hidden;
transform:translateY(-8px);pointer-events:none;
transition:opacity var(--dur-2) var(--ease-brand),transform var(--dur-2) var(--ease-brand),visibility var(--dur-2)}
.navitem.is-open .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mega a{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:12px;border-radius:10px;
text-decoration:none;color:var(--text);transition:background var(--dur-2) var(--ease-brand)}
.mega a:hover{background:var(--shallows)}
.mega .mi{width:34px;height:34px;border-radius:9px;background:var(--shallows);color:var(--tide);
display:grid;place-items:center}
.mega .mt{font-size:14px;font-weight:500;display:block}
.mega .md{font-size:12.5px;color:var(--text-2);line-height:1.4;display:block;margin-top:2px}
.hdr-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);background:var(--surface);
border-radius:10px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:1.5px;background:var(--text);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--text)}
.burger span::before{top:-5px} .burger span::after{top:5px}
/* ---- buttons ---- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-family:inherit;font-size:15px;font-weight:500;border-radius:var(--radius-pill);
padding:13px 26px;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
transition:background-color var(--dur-2) var(--ease-brand),color var(--dur-2) var(--ease-brand),
border-color var(--dur-2) var(--ease-brand),transform var(--dur-2) var(--ease-brand)}
.btn svg{transition:transform var(--dur-2) var(--ease-brand)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--tide);color:#fff;border-color:var(--tide)}
.btn-primary:hover{background:var(--tide-deep);border-color:var(--tide-deep)}
.btn-secondary{background:var(--foam);color:var(--on-foam);border-color:var(--foam)}
.btn-secondary:hover{background:var(--shallows);border-color:var(--shallows)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--tide);color:var(--tide)}
.btn-inverse{background:#fff;color:var(--ebb);border-color:#fff}
.btn-sm{padding:8px 18px;font-size:13.5px}
/* ---- hero ---- */
.hero{position:relative;overflow:hidden;padding:clamp(56px,7vw,92px) 0 clamp(64px,8vw,104px)}
#tidefield{position:absolute;inset:auto 0 -1px 0;width:100%;height:min(30vh,260px);
display:block;pointer-events:none;z-index:0;
-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 46%);
mask-image:linear-gradient(180deg,transparent 0%,#000 46%)}
.hero-in{position:relative;z-index:1;max-width:1320px;margin:0 auto;
padding:0 clamp(20px,4vw,44px);display:grid;grid-template-columns:1.06fr .94fr;
gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(42px,6.2vw,80px);font-weight:400;letter-spacing:-.035em;
line-height:.99;margin:16px 0 20px;text-wrap:balance;max-width:15ch}
.hero .sub{font-size:clamp(16.5px,1.5vw,19.5px);color:var(--text-2);max-width:46ch;line-height:1.5;margin:0 0 26px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:24px;max-width:330px}
.hero-note .lbl{display:flex;justify-content:space-between;font-family:var(--font-mono);
font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin-bottom:7px}
/* hero plate — the bleeding element (RSMI move 3) */
.plate{position:relative;border-radius:var(--radius-mark);overflow:hidden;
box-shadow:var(--shadow-deep);aspect-ratio:4/3.1;margin-right:calc(-1 * clamp(20px,7vw,120px))}
.plate img{width:100%;height:100%;object-fit:cover;display:block}
.plate .scrim{position:absolute;inset:0;
background:linear-gradient(200deg,rgba(7,35,56,0) 34%,rgba(7,35,56,.72) 100%)}
.plate .cap{position:absolute;left:22px;right:22px;bottom:20px;color:#fff}
.plate .cap .k{display:block;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;
letter-spacing:.12em;color:rgba(255,255,255,.82)}
.plate .cap .v{display:block;font-size:19px;margin-top:5px;letter-spacing:-.01em}
/* ---- sticky stack (RSMI move 4 / motion move 3) ---- */
.stack{position:relative}
.stack-panel{position:sticky;top:88px;border-radius:var(--radius-mark);overflow:hidden;
min-height:clamp(400px,60vh,560px);display:grid;align-items:end;
box-shadow:var(--shadow-lift);margin-bottom:26px}
.stack-panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stack-panel .scrim{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(7,35,56,.30) 0%,rgba(7,35,56,.34) 44%,rgba(7,35,56,.88) 100%)}
.stack-panel .body{position:relative;padding:clamp(26px,4vw,48px);color:#fff;max-width:640px}
.stack-panel h3{font-size:clamp(25px,3.1vw,38px);font-weight:400;letter-spacing:-.026em;
line-height:1.05;margin:14px 0 12px;color:#fff}
.stack-panel p{color:rgba(255,255,255,.84);margin:0;max-width:48ch;font-size:15.5px}
.stack-step{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:rgba(255,255,255,.8)}
/* ---- tiers (RSMI move 5) ---- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:34px}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
overflow:hidden;display:grid;align-content:start;
transition:transform var(--dur-2) var(--ease-brand),box-shadow var(--dur-2) var(--ease-brand)}
.tier:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.tier .cap{height:5px}
.tier .tbody{padding:26px;display:grid;gap:9px}
.tier .tname{font-size:24px;font-weight:400;letter-spacing:-.02em}
.tier .tfor{font-size:13.5px;color:var(--text-2)}
.tier ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.tier li{display:flex;gap:10px;font-size:13.5px;color:var(--text-2)}
.tier li svg{flex:none;margin-top:3px;color:var(--tide)}
/* ---- feature cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px;margin-top:34px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-mark);
padding:26px;display:grid;gap:10px;align-content:start;
transition:transform var(--dur-2) var(--ease-brand),box-shadow var(--dur-2) var(--ease-brand)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card .ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
background:var(--shallows);color:var(--tide);margin-bottom:6px}
.card h4{margin:0;font-size:16.5px;font-weight:500}
.card p{margin:0;font-size:14px;color:var(--text-2);line-height:1.5}
/* ---- accordion (RSMI move 7) ---- */
.acc{border-top:1px solid var(--line);margin-top:30px}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;
align-items:center;gap:20px;font-size:17.5px;transition:color var(--dur-2) var(--ease-brand)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--tide)}
.acc .pm{position:relative;width:15px;height:15px;flex:none}
.acc .pm::before,.acc .pm::after{content:"";position:absolute;background:var(--text-2);
transition:transform var(--dur-2) var(--ease-brand)}
.acc .pm::before{inset:7px 0 auto 0;height:1.5px}
.acc .pm::after{inset:0 auto 0 7px;width:1.5px}
.acc details[open] .pm::after{transform:scaleY(0)}
.acc .ans{padding:0 0 24px;max-width:66ch;color:var(--text-2);font-size:15px}
/* ---- anchor closing slab (RSMI move 6, repurposed) ---- */
.anchor-slab{background:var(--anchor);color:#fff;border-radius:var(--radius-mark);
padding:clamp(34px,5vw,66px);position:relative;overflow:hidden}
.anchor-slab h2{color:#fff;margin:16px 0 14px}
.anchor-slab p{color:rgba(255,255,255,.82);max-width:52ch}
/* ---- deep band ---- */
.deep{background:var(--deepwater);color:var(--on-dark)}
.deep h2,.deep h3{color:var(--on-dark)}
.deep p{color:rgba(237,243,249,.78)}
/* ---- footer ---- */
.ftr{border-top:1px solid var(--line);padding:56px 0 40px;color:var(--text-2);font-size:14px}
.ftr-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}
.ftr h5{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;
letter-spacing:.12em;color:var(--text-3);margin:0 0 12px;font-weight:400}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr a{color:var(--text-2);text-decoration:none;transition:color var(--dur-2) var(--ease-brand)}
.ftr a:hover{color:var(--tide)}
.ftr-base{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);
display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--text-3)}
/* ---- section headings ---- */
.h2{font-size:clamp(29px,3.8vw,50px);font-weight:400;letter-spacing:-.028em;
line-height:1.03;margin:14px 0 16px;text-wrap:balance;max-width:20ch}
.lede{font-size:17.5px;color:var(--text-2);max-width:60ch;line-height:1.55}
/* ---- reveal choreography (motion move 2) ---- */
[data-reveal]{opacity:0;transform:translateY(20px);
transition:opacity var(--dur-4) var(--ease-out-expo),transform var(--dur-4) var(--ease-out-expo)}
[data-reveal].in{opacity:1;transform:none}
/* ---- responsive ---- */
@media (max-width:1000px){
.hero-in{grid-template-columns:1fr;gap:36px}
.plate{margin-right:0}
.ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
.mainnav{display:none}
.burger{display:flex}
.hdr-cta .btn-ghost{display:none}
.mainnav.open{display:flex;position:fixed;inset:70px 0 0;background:var(--shell);
flex-direction:column;align-items:stretch;gap:0;padding:18px;overflow-y:auto;z-index:59}
.mainnav.open .navitem{border-bottom:1px solid var(--line)}
.mainnav.open .navlink{width:100%;justify-content:space-between;padding:16px 6px;font-size:17px}
.mainnav.open .mega{position:static;width:auto;box-shadow:none;border:0;padding:0 6px 14px;
opacity:1;visibility:visible;transform:none;pointer-events:auto;display:none}
.mainnav.open .navitem.is-open .mega{display:block}
.mega-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
.ftr-grid{grid-template-columns:1fr}
.stack-panel{top:78px;min-height:440px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
[data-reveal]{opacity:1;transform:none;transition:none}
.btn:hover svg{transform:none}
}
/* ============================================================
14. TEXTURE LAYERS — depth for a photo-light page
Eight SVG layers stand in for photography we deliberately do
not have. Each is a real design layer, not filler.
============================================================ */
.tex-grain{position:relative}
.tex-grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:multiply}
.tex-wave{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:repeat-x;background-position:center bottom}
.tex-dots{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:repeat}
.tex-topo{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:repeat}
.tex-rule{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:repeat}
.tex-chevron{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:repeat}
.tex-mesh{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:repeat}
.ftr{background-image:url("data:image/svg+xml;utf8,");
background-repeat:repeat-x;background-position:center top}
/* ---- pointer-lit cards (interaction density) ---- */
.card,.tier{position:relative;overflow:hidden}
.card::before,.tier::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
rgba(18,89,158,.10), rgba(18,89,158,0) 62%);
transition:opacity var(--dur-2) var(--ease-brand)}
.card:hover::before,.tier:hover::before{opacity:1}
/* ---- section modes (typographic + tonal variety) ---- */
.mode-tint{background:linear-gradient(180deg,var(--shallows) 0%,var(--shell) 100%)}
.mode-dark{background:linear-gradient(168deg,var(--deepwater) 0%,#0A2E44 100%);color:var(--on-dark)}
.mode-dark h2,.mode-dark h3,.mode-dark .h2{color:var(--on-dark)}
.mode-dark p,.mode-dark .lede{color:rgba(237,243,249,.78)}
.mode-dark .eyebrow{color:var(--foam)}
.principle{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:20px 0;
border-bottom:1px solid rgba(237,243,249,.14)}
.principle:last-child{border-bottom:0}
.principle .n{font-family:var(--font-mono);font-size:11.5px;color:var(--foam);letter-spacing:.1em;padding-top:3px}
.principle h4{margin:0 0 5px;font-size:17.5px;font-weight:500;color:var(--on-dark)}
.principle p{margin:0;font-size:14.5px;max-width:58ch}
.principles{margin-top:30px;max-width:820px}
/* ---- mobile tap targets: 44px floor (WCAG 2.5.5 / doctrine) ---- */
@media (max-width:820px){
.btn{min-height:44px}
.btn-sm{min-height:44px;padding-top:10px;padding-bottom:10px}
.burger{width:44px;height:44px}
.mega a{min-height:44px;align-items:center}
.mainnav.open .navlink{min-height:48px}
.acc summary{min-height:44px}
}
/* ============================================================
15. MARKETING + DENSITY BANDS
Signal violet is re-scoped from "automation" to "marketing &
growth" — this build has an in-house marketing department and
no automation product, so the accent follows the real meaning.
============================================================ */
.mode-signal{
background:
radial-gradient(900px 520px at 88% 6%, rgba(116,72,206,.10), rgba(116,72,206,0) 68%),
linear-gradient(180deg,#F3EFFC 0%, var(--shell) 100%);
}
.mode-signal .eyebrow{color:var(--signal)}
.mode-signal .card .ico{background:#EFE8FB;color:var(--signal)}
.mode-signal .card::before{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
rgba(116,72,206,.12), rgba(116,72,206,0) 62%)}
.mode-signal .tide-rule::after{background:var(--signal)}
.run-by{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:9px 15px 9px 10px;
border:1px solid rgba(116,72,206,.28);background:#F6F2FE;border-radius:var(--radius-pill);
font-size:13.5px;color:var(--ebb)}
.run-by .dot{width:26px;height:26px;border-radius:50%;background:var(--signal);color:#fff;
display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;flex:none}
/* ---- seagrass chips ---- */
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--radius-pill);
font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em}
.chip-seagrass{background:var(--seagrass);color:#33421A;border:1px solid #C9DE9A}
.chip-signal{background:#EFE8FB;color:var(--signal);border:1px solid rgba(116,72,206,.26)}
.chip-foam{background:var(--foam);color:var(--ebb);border:1px solid #B7CFE8}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
/* ---- coral note ---- */
.note-coral{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;
background:#FDF0ED;border:1px solid rgba(224,97,76,.28);border-left:4px solid var(--coral);
border-radius:var(--radius-lg);padding:24px 26px;margin-top:34px;max-width:760px}
.note-coral .ni{width:44px;height:44px;border-radius:12px;background:#F9DDD7;color:#A8371F;
display:grid;place-items:center}
.note-coral h4{margin:0 0 7px;font-size:16.5px;font-weight:500;color:var(--ink)}
.note-coral p{margin:0;font-size:14.5px;color:#7A4436;max-width:56ch}
/* ---- included matrix ---- */
.matrix-wrap{overflow-x:auto;margin-top:32px;border:1px solid var(--line);
border-radius:var(--radius-lg);background:var(--surface)}
table.matrix{border-collapse:collapse;width:100%;min-width:640px}
table.matrix th,table.matrix td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
table.matrix thead th{background:var(--surface-2);font-family:var(--font-mono);font-size:10.5px;
text-transform:uppercase;letter-spacing:.1em;color:var(--text-2);font-weight:400}
table.matrix tbody th{font-weight:400;font-size:14.5px;color:var(--text)}
table.matrix td{text-align:center;width:118px}
table.matrix tbody tr:last-child th,table.matrix tbody tr:last-child td{border-bottom:0}
table.matrix tbody tr{transition:background var(--dur-2) var(--ease-brand)}
table.matrix tbody tr:hover{background:var(--shallows)}
.yes{color:var(--tide)} .no{color:var(--text-3)}
.matrix-cap{margin-top:12px;font-size:12.5px;color:var(--text-3)}
/* ============================================================
16. SLAB FORM — real classes, full state matrix.
Was inline-styled with no focus/hover/invalid states.
============================================================ */
.slab-form{margin-top:26px;display:grid;gap:14px;max-width:460px}
.slab-field{display:grid;gap:7px}
.slab-label{font-size:13px;font-weight:500;color:rgba(255,255,255,.9);letter-spacing:.01em}
.slab-hint{font-size:12.5px;color:rgba(255,255,255,.6)}
.slab-input,.slab-textarea{
font-family:inherit;font-size:16px;line-height:1.45;color:#fff;
padding:13px 15px;border-radius:var(--radius-sm,6px);
border:1px solid rgba(255,255,255,.26);
background:rgba(255,255,255,.08);
transition:border-color var(--dur-2) var(--ease-brand),
background-color var(--dur-2) var(--ease-brand),
box-shadow var(--dur-2) var(--ease-brand);
-webkit-appearance:none;appearance:none;
}
.slab-input::placeholder,.slab-textarea::placeholder{color:rgba(255,255,255,.46)}
.slab-input:hover,.slab-textarea:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.12)}
.slab-input:focus,.slab-textarea:focus{
outline:none;border-color:#fff;background:rgba(255,255,255,.16);
box-shadow:0 0 0 3px rgba(255,255,255,.22);
}
.slab-input:focus-visible,.slab-textarea:focus-visible{border-color:#fff}
.slab-input[aria-invalid="true"]{border-color:var(--coral);box-shadow:0 0 0 3px rgba(224,97,76,.28)}
.slab-textarea{min-height:104px;resize:vertical}
.slab-form .btn{justify-self:start}
.slab-note{margin:0;font-size:13px;color:rgba(255,255,255,.74);min-height:1.2em}
.slab-note[data-state="error"]{color:#FFD9D2}
@media (max-width:820px){ .slab-input,.slab-textarea{min-height:48px} }
/* ============================================================
17. WORDMARK — type only, no logo mark.
Weight contrast carries it: Tidal 500 / Stays 300.
============================================================ */
.brand{
display:inline-flex;align-items:baseline;gap:.22em;
font-family:var(--font-display);font-size:22px;font-weight:500;
letter-spacing:-.032em;text-decoration:none;color:var(--text);
transition:color var(--dur-2) var(--ease-brand),opacity var(--dur-2) var(--ease-brand);
}
.brand:hover{color:var(--tide)}
.brand .w1{font-weight:500}
.brand .w2{font-weight:300;color:var(--text-2);transition:color var(--dur-2) var(--ease-brand)}
.brand:hover .w2{color:var(--tide)}
.mode-dark .brand,.anchor-slab .brand{color:var(--on-dark)}
.mode-dark .brand .w2{color:rgba(237,243,249,.72)}
.ftr .brand{font-size:20px}
/* ============================================================
18. ANIMATED UI PANELS
Functional interface renderings — a calendar, an inbox, a
turnover run. Not ornamental illustration.
============================================================ */
.ui-band{background:
radial-gradient(900px 560px at 82% 0%, rgba(18,89,158,.30), rgba(18,89,158,0) 66%),
linear-gradient(170deg,#062033 0%, #0A2E44 58%, #07283A 100%);
color:var(--on-dark)}
.ui-band .eyebrow{color:var(--foam)}
.ui-band .h2,.ui-band h3{color:var(--on-dark)}
.ui-band .lede,.ui-band p{color:rgba(237,243,249,.76)}
.ui-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:20px;margin-top:38px}
.ui-card{background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-mark);padding:24px;
display:grid;gap:14px;align-content:start;overflow:hidden;position:relative;
transition:transform var(--dur-2) var(--ease-brand),border-color var(--dur-2) var(--ease-brand)}
.ui-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.28)}
.ui-card h3{margin:0;font-size:18px;font-weight:500}
.ui-card p{margin:0;font-size:14px}
.ui-stage{background:rgba(4,20,32,.6);border:1px solid rgba(255,255,255,.1);
border-radius:12px;padding:16px;min-height:186px;position:relative}
.ui-tag{position:absolute;top:12px;right:12px;font-family:var(--font-mono);font-size:9px;
letter-spacing:.1em;text-transform:uppercase;color:rgba(237,243,249,.42)}
/* --- panel 1: channel sync calendar --- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:6px}
.cal i{aspect-ratio:1;border-radius:4px;background:rgba(255,255,255,.09);display:block}
.cal i.bk{background:var(--tide);animation:calfill 5.6s var(--ease-brand) infinite}
.cal i.bk:nth-of-type(7n+2){animation-delay:.5s}
.cal i.bk:nth-of-type(7n+4){animation-delay:1.1s}
.cal i.bk:nth-of-type(7n+6){animation-delay:1.7s}
@keyframes calfill{0%,8%{background:rgba(255,255,255,.09);transform:scale(1)}
14%{background:var(--blue-400);transform:scale(1.12)}
22%,88%{background:var(--tide);transform:scale(1)}
100%{background:rgba(255,255,255,.09);transform:scale(1)}}
.chan{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chan b{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;font-weight:400;
padding:4px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.2);
color:rgba(237,243,249,.8);position:relative;overflow:hidden}
.chan b::after{content:"";position:absolute;inset:0;background:var(--foam);opacity:0;
animation:pulse 5.6s var(--ease-brand) infinite;mix-blend-mode:overlay}
.chan b:nth-child(2)::after{animation-delay:.45s}
.chan b:nth-child(3)::after{animation-delay:.9s}
@keyframes pulse{0%,10%{opacity:0}16%{opacity:.5}30%,100%{opacity:0}}
/* --- panel 2: inbox --- */
.inbox{display:grid;gap:9px}
.msg{display:flex;gap:9px;align-items:flex-start;opacity:0;transform:translateY(7px);
animation:msgin 6s var(--ease-out-expo) infinite}
.msg:nth-child(2){animation-delay:1.1s}
.msg:nth-child(3){animation-delay:2.2s}
@keyframes msgin{0%{opacity:0;transform:translateY(7px)}8%,74%{opacity:1;transform:none}
86%,100%{opacity:0;transform:translateY(-5px)}}
.msg .av{width:22px;height:22px;border-radius:50%;flex:none;
background:linear-gradient(140deg,var(--blue-400),var(--tide))}
.msg .bub{background:rgba(255,255,255,.1);border-radius:10px 10px 10px 3px;padding:8px 11px;
font-size:12px;color:rgba(237,243,249,.9);max-width:88%}
.msg.out{flex-direction:row-reverse}
.msg.out .av{background:linear-gradient(140deg,var(--foam),#9CC3E6)}
.msg.out .bub{background:rgba(207,224,242,.22);border-radius:10px 10px 3px 10px}
/* --- panel 3: turnover run --- */
.run{display:grid;gap:11px;margin-top:4px}
.step{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:center;
font-size:12.5px;color:rgba(237,243,249,.82)}
.step .tick{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);
display:grid;place-items:center;position:relative}
.step .tick::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--foam);
transform:scale(0);animation:tick 6s var(--ease-brand) infinite}
.step:nth-child(2) .tick::after{animation-delay:.8s}
.step:nth-child(3) .tick::after{animation-delay:1.6s}
.step:nth-child(4) .tick::after{animation-delay:2.4s}
@keyframes tick{0%,6%{transform:scale(0)}14%,80%{transform:scale(1)}92%,100%{transform:scale(0)}}
.step .bar{height:3px;border-radius:2px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.step .bar::after{content:"";position:absolute;inset:0;width:0;background:var(--foam);
animation:fill 6s var(--ease-brand) infinite}
.step:nth-child(2) .bar::after{animation-delay:.8s}
.step:nth-child(3) .bar::after{animation-delay:1.6s}
.step:nth-child(4) .bar::after{animation-delay:2.4s}
@keyframes fill{0%,6%{width:0}20%,80%{width:100%}92%,100%{width:0}}
/* --- mosaic band --- */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.mosaic figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;position:relative;
aspect-ratio:4/3}
.mosaic figure:nth-child(1){grid-column:span 2;aspect-ratio:8/3}
.mosaic figure:nth-child(6){grid-column:span 2;aspect-ratio:8/3}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform var(--dur-4) var(--ease-out-expo)}
.mosaic figure:hover img{transform:scale(1.045)}
@media (max-width:820px){ .mosaic{grid-template-columns:repeat(2,1fr)}
.mosaic figure:nth-child(1),.mosaic figure:nth-child(6){grid-column:span 2} }
@media (prefers-reduced-motion:reduce){
.cal i.bk,.chan b::after,.msg,.step .tick::after,.step .bar::after{animation:none}
.cal i.bk{background:var(--tide)}
.msg{opacity:1;transform:none}
.step .tick::after{transform:scale(1)}
.step .bar::after{width:100%}
.mosaic figure:hover img{transform:none}
}
/* --- product-UI chrome: makes a panel read as software, not a diagram --- */
.ui-stage{padding:0;overflow:hidden}
.ui-chrome{display:flex;align-items:center;gap:8px;padding:10px 13px;
border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05)}
.ui-chrome .dots{display:flex;gap:5px}
.ui-chrome .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}
.ui-chrome .ttl{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
text-transform:uppercase;color:rgba(237,243,249,.6)}
.ui-chrome .st{margin-left:auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;
padding:3px 8px;border-radius:999px;background:rgba(207,224,242,.16);color:var(--foam)}
.ui-body{padding:14px}
.ui-tabs{display:flex;gap:14px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.ui-tabs span{font-size:11.5px;padding:9px 0;color:rgba(237,243,249,.5);position:relative}
.ui-tabs span.on{color:var(--on-dark)}
.ui-tabs span.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
background:var(--foam);border-radius:2px}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.legend em{font-style:normal;font-size:10.5px;color:rgba(237,243,249,.62);
display:inline-flex;align-items:center;gap:5px}
.legend em::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--tide)}
.legend em.own::before{background:var(--seagrass)}
.legend em.open::before{background:rgba(255,255,255,.16)}
.cal i.own{background:var(--seagrass);opacity:.85}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px}
.cal-head span{font-family:var(--font-mono);font-size:8.5px;text-align:center;
color:rgba(237,243,249,.4)}
/* --- conversation list --- */
.thread-list{display:grid;gap:2px;margin-bottom:11px}
.tl{display:grid;grid-template-columns:20px 1fr auto;gap:9px;align-items:center;
padding:7px 8px;border-radius:7px;font-size:11.5px;color:rgba(237,243,249,.7)}
.tl.on{background:rgba(255,255,255,.09);color:var(--on-dark)}
.tl .av2{width:20px;height:20px;border-radius:50%;background:linear-gradient(140deg,var(--blue-400),var(--tide))}
.tl .un{width:6px;height:6px;border-radius:50%;background:var(--coral)}
/* --- statement rows (structure only, no invented figures) --- */
.stmt{display:grid;gap:0}
.stmt .r{display:grid;grid-template-columns:1fr 74px;gap:12px;padding:9px 2px;
border-bottom:1px solid rgba(255,255,255,.08);font-size:12px;color:rgba(237,243,249,.82)}
.stmt .r:last-child{border-bottom:0;color:var(--on-dark);font-weight:500}
.stmt .amt{height:9px;border-radius:3px;background:linear-gradient(90deg,
rgba(255,255,255,.16),rgba(255,255,255,.07));position:relative;overflow:hidden;align-self:center}
.stmt .amt::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
background:linear-gradient(90deg,transparent,rgba(207,224,242,.35),transparent);
animation:shim 3.2s linear infinite}
.stmt .r:nth-child(2) .amt::after{animation-delay:.4s}
.stmt .r:nth-child(3) .amt::after{animation-delay:.8s}
.stmt .r:nth-child(4) .amt::after{animation-delay:1.2s}
@keyframes shim{to{transform:translateX(100%)}}
.stmt-note{margin-top:10px;font-size:10.5px;color:rgba(237,243,249,.5)}
@media (prefers-reduced-motion:reduce){ .stmt .amt::after{animation:none} }
/* ============================================================
19. CALIBER PASS — grid balance, equal stages, adaptive
header, accented wordmark.
============================================================ */
/* --- wordmark: accent on the second word, optical tracking --- */
.brand{font-size:23px;letter-spacing:-.036em;gap:.2em}
.brand .w1{font-weight:500;color:var(--text)}
.brand .w2{font-weight:400;color:var(--tide)}
.brand:hover .w1{color:var(--tide-deep)}
.brand:hover .w2{color:var(--tide-deep)}
.hdr.on-dark .brand .w1{color:#fff}
.hdr.on-dark .brand .w2{color:var(--foam)}
.mode-dark .brand .w1,.ui-band .brand .w1{color:#fff}
.mode-dark .brand .w2,.ui-band .brand .w2{color:var(--foam)}
.ftr .brand .w2{color:var(--tide)}
/* --- header adapts over dark bands (Guesty-tier detail) --- */
.hdr{transition:background-color var(--dur-3) var(--ease-brand),
border-color var(--dur-3) var(--ease-brand),color var(--dur-3) var(--ease-brand)}
.hdr.on-dark{background:rgba(7,35,56,.72);border-bottom-color:rgba(255,255,255,.1)}
.hdr.on-dark .navlink{color:rgba(237,243,249,.82)}
.hdr.on-dark .navlink:hover,.hdr.on-dark .navitem.is-open .navlink{color:#fff;background:rgba(255,255,255,.12)}
.hdr.on-dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.34)}
.hdr.on-dark .btn-ghost:hover{border-color:#fff;color:#fff}
.hdr.on-dark .burger{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}
.hdr.on-dark .burger span,.hdr.on-dark .burger span::before,.hdr.on-dark .burger span::after{background:#fff}
/* --- product grid: 2x2, equal stages, aligned baselines --- */
.ui-grid{grid-template-columns:repeat(2,1fr);gap:22px}
@media (max-width:900px){ .ui-grid{grid-template-columns:1fr} }
.ui-card{grid-template-rows:auto auto 1fr;gap:16px}
.ui-stage{min-height:0;height:264px;display:flex;flex-direction:column}
.ui-body{flex:1;min-height:0;overflow:hidden}
.ui-card h3{margin-top:2px}
/* --- inbox alignment --- */
.inbox{gap:8px}
.msg{align-items:flex-end}
.msg.out{justify-content:flex-end}
.msg .bub{max-width:78%;line-height:1.4}
.thread-list{margin-bottom:9px}
/* --- calendar sizing inside a fixed stage --- */
.cal i{border-radius:3px}
.cal{gap:4px}
.legend{margin-bottom:8px}
.chan{margin-bottom:8px}
/* --- statement fits the stage --- */
.stmt .r{padding:7px 2px;font-size:11.5px}
.stmt-note{margin-top:8px}
/* --- fixes: inline-collapse (again), stage fit --- */
.step{grid-template-columns:20px 1fr;align-items:start}
.step > span:last-child{display:block} /* was inline: bar collapsed */
.step .bar{display:block;margin-top:6px} /* the enshrined class, applied */
.ui-stage{height:286px}
.cal i{border-radius:3px}
.stmt .r{padding:6px 2px;font-size:11px}
.stmt-note{font-size:10px;line-height:1.35;margin-top:7px}
.ui-body{display:flex;flex-direction:column}
.ui-body .cal{margin-top:auto}
/* ============================================================
20. WORDMARK v2 — clean serif, tightened
Instrument Serif: high-contrast, modern editorial. Pairs with
Outfit without competing; carries a hospitality register a
geometric sans cannot.
============================================================ */
:root{ --font-logo:'Instrument Serif', 'Source Serif 4', Georgia, 'Times New Roman', serif; }
.brand{
font-family:var(--font-logo);
font-size:29px;
font-weight:400;
letter-spacing:-.006em; /* serifs need far less negative tracking */
gap:.16em;
line-height:1;
align-items:baseline;
}
.brand .w1{font-weight:400;color:var(--text);font-family:inherit}
.brand .w2{font-weight:400;color:var(--tide);font-family:inherit;font-style:italic}
.brand:hover .w1,.brand:hover .w2{color:var(--tide-deep)}
.hdr.on-dark .brand .w1{color:#fff}
.hdr.on-dark .brand .w2{color:var(--foam)}
.hdr.on-dark .brand:hover .w1,.hdr.on-dark .brand:hover .w2{color:var(--foam)}
.ftr .brand{font-size:26px}
.ftr .brand .w2{color:var(--tide)}
/* optical: the serif sits slightly high against a sans nav */
.hdr-in .brand{transform:translateY(1px)}
@media (max-width:820px){ .brand{font-size:26px} }
/* --- wordmark tightening pass --- */
.brand{gap:.11em; letter-spacing:-.012em}
.brand .w1{letter-spacing:-.014em}
.brand .w2{letter-spacing:-.004em} /* italics need less negative */
.hdr.on-dark .brand .w2{color:#8CC0EF} /* foam went near-white on navy */
.hdr.on-dark .brand:hover .w1,.hdr.on-dark .brand:hover .w2{color:#B6D8F7}
.mode-dark .brand .w2,.ui-band .brand .w2{color:#8CC0EF}
/* ============================================================
21. CONTRAST + COLOUR PASS
Low-alpha micro-labels raised; muted greys darkened on light
grounds; accents spread across bands that were tonally flat.
============================================================ */
/* --- raise low-alpha micro text on dark (was 0.4–0.6 alpha at 9–11px) --- */
.ui-chrome .ttl{color:rgba(237,243,249,.86)}
.ui-chrome .st{background:rgba(207,224,242,.24);color:#DCEAF8}
.legend em{color:rgba(237,243,249,.84)}
.cal-head span{color:rgba(237,243,249,.66)}
.ui-tabs span{color:rgba(237,243,249,.68)}
.stmt-note{color:rgba(237,243,249,.72)}
.tl{color:rgba(237,243,249,.84)}
.chan b{color:rgba(237,243,249,.92);border-color:rgba(255,255,255,.3)}
.msg .bub{background:rgba(255,255,255,.16);color:#F1F6FB}
.msg.out .bub{background:rgba(140,192,239,.3);color:#F4F9FE}
.stmt .r{color:rgba(237,243,249,.92)}
.step{color:rgba(237,243,249,.92)}
.principle p{color:rgba(237,243,249,.86)}
.mode-dark p,.mode-dark .lede,.ui-band .lede,.ui-band p{color:rgba(237,243,249,.86)}
.stack-panel p{color:rgba(255,255,255,.92)}
.stack-step{color:rgba(255,255,255,.92)}
/* --- darken muted grey used as text on light grounds (mist 2.79:1) --- */
.hero-note .lbl{color:var(--slate)}
.matrix-cap{color:var(--slate)}
.tier .tfor{color:var(--slate)}
.mosaic + .matrix-cap{color:var(--slate)}
table.matrix .no{color:#7C8794}
.plate .cap .k{color:rgba(255,255,255,.94)}
/* --- MORE COLOUR: give flat bands an accent identity --- */
/* service band: foam icon wells + a seagrass rule */
#service .card:nth-child(2) .ico{background:#E4F3DC;color:#3F6B2A}
#service .card:nth-child(3) .ico{background:#FDEAE6;color:#B4462F}
#service .card:nth-child(4) .ico{background:#EFE8FB;color:var(--signal)}
/* plans: tier caps already ramp; add tinted rows */
table.matrix tbody tr:nth-child(odd){background:rgba(232,241,250,.5)}
table.matrix tbody tr:hover{background:var(--foam)}
.yes{color:var(--tide)}
/* how-it-works step chips get distinct accents */
.stack-panel:nth-child(1) .stack-step{color:#CFE0F2}
.stack-panel:nth-child(2) .stack-step{color:#DCEDB4}
.stack-panel:nth-child(3) .stack-step{color:#FFC9BE}
/* FAQ: accent the open row */
.acc details[open] summary{color:var(--tide)}
.acc details[open]{background:linear-gradient(180deg,rgba(232,241,250,.55),rgba(232,241,250,0))}
/* mosaic: tint wash on hover */
.mosaic figure::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(18,89,158,0),rgba(18,89,158,.28));
opacity:0;transition:opacity var(--dur-2) var(--ease-brand)}
.mosaic figure:hover::after{opacity:1}
/* footer: accent the headings */
.ftr h5{color:var(--tide)}
/* --- hover states: doctrine requires ≥2 properties --- */
.mega a{transition:background-color var(--dur-2) var(--ease-brand),
transform var(--dur-2) var(--ease-brand), color var(--dur-2) var(--ease-brand)}
.mega a:hover{background:var(--shallows);transform:translateX(3px);color:var(--tide-deep)}
.mega a:hover .mi{background:var(--foam);color:var(--tide-deep)}
.acc summary{transition:color var(--dur-2) var(--ease-brand),
padding-left var(--dur-2) var(--ease-brand)}
.acc summary:hover{color:var(--tide);padding-left:6px}
.acc summary:hover .pm::before,.acc summary:hover .pm::after{background:var(--tide)}
.mosaic figure{transition:transform var(--dur-2) var(--ease-brand),
box-shadow var(--dur-2) var(--ease-brand)}
.mosaic figure:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.tier{transition:transform var(--dur-2) var(--ease-brand),
box-shadow var(--dur-2) var(--ease-brand),border-color var(--dur-2) var(--ease-brand)}
.tier:hover{transform:translateY(-3px);border-color:var(--blue-400)}
table.matrix tbody tr{transition:background-color var(--dur-2) var(--ease-brand),
box-shadow var(--dur-2) var(--ease-brand)}
table.matrix tbody tr:hover{background:var(--foam);box-shadow:inset 3px 0 0 var(--tide)}
/* ============================================================
22. DISPLAY SERIF — Fraunces for the wordmark and headings
Bolder and larger per direction. Body copy stays Outfit:
serif display + sans text is the pairing that carries.
============================================================ */
:root{ --font-logo:'Fraunces','Instrument Serif',Georgia,serif;
--font-head:'Fraunces','Instrument Serif',Georgia,serif; }
.brand{
font-family:var(--font-logo);
font-size:32px; font-weight:700;
letter-spacing:-.022em; gap:.12em;
font-variation-settings:'SOFT' 0,'WONK' 0;
}
.brand .w1{font-weight:700}
.brand .w2{font-weight:600;font-style:normal;color:var(--tide)}
.ftr .brand{font-size:28px}
@media (max-width:820px){ .brand{font-size:27px} }
/* headings adopt the serif, heavier and larger */
h1,.h2,h2,.hero h1{font-family:var(--font-head);font-variation-settings:'SOFT' 0,'WONK' 0}
.hero h1{font-weight:700;font-size:clamp(46px,6.8vw,88px);letter-spacing:-.028em;line-height:.98}
.h2,h2{font-weight:650;letter-spacing:-.022em;font-size:clamp(32px,4.1vw,54px);line-height:1.02}
.stack-panel h3{font-family:var(--font-head);font-weight:650;letter-spacing:-.02em;
font-size:clamp(27px,3.3vw,40px)}
.tier .tname{font-family:var(--font-head);font-weight:650;letter-spacing:-.018em;font-size:26px}
.card h4,.ui-card h3,.principle h4,.note-coral h4{font-family:var(--font-head);
font-weight:600;letter-spacing:-.012em}
.card h4{font-size:18px}
.ui-card h3{font-size:19.5px}
.principle h4{font-size:19px}
.acc summary{font-family:var(--font-head);font-weight:500;letter-spacing:-.01em;font-size:19px}
/* body copy explicitly stays sans */
p,.lede,.sub,li,td,th,label,input,textarea,.btn,.navlink,.eyebrow,.chip,.badge{
font-family:var(--font-display)}
/* --- people row --- */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:34px}
.person{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
border-radius:var(--radius-mark);padding:20px;
transition:border-color var(--dur-2) var(--ease-brand),transform var(--dur-2) var(--ease-brand)}
.person:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.person .pmono{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
font-family:var(--font-mono);font-size:15px;letter-spacing:.04em;
background:linear-gradient(150deg,var(--blue-400),var(--tide-deep));color:#fff}
.person .pmono.alt{background:linear-gradient(150deg,#9B7BE0,var(--signal))}
.person h4{margin:0 0 5px;font-size:17.5px;font-weight:600;color:var(--on-dark);font-family:var(--font-head)}
.person p{margin:0;font-size:13.5px;color:rgba(237,243,249,.84);line-height:1.5}
.how-h{font-family:var(--font-head);font-weight:600;font-size:20px;color:var(--on-dark);
margin:44px 0 0;letter-spacing:-.012em}
/* ============================================================
23. PASTEL SECTION MODES + COLOURFUL MEGA MENU + LISTINGS
============================================================ */
:root{
--p-mint:#E6F2EC; --p-sand:#F6EEE2; --p-sky:#E7F0FA;
--p-lilac:#EFEAFA; --p-peach:#FCEEE8; --p-sea:#E4F1F2;
}
.pastel-mint{background:linear-gradient(180deg,var(--p-mint) 0%,var(--shell) 100%)}
.pastel-sand{background:linear-gradient(180deg,var(--p-sand) 0%,var(--shell) 100%)}
.pastel-sky {background:linear-gradient(180deg,var(--p-sky) 0%,var(--shell) 100%)}
.pastel-lilac{background:linear-gradient(180deg,var(--p-lilac) 0%,var(--shell) 100%)}
.pastel-peach{background:linear-gradient(180deg,var(--p-peach) 0%,var(--shell) 100%)}
.pastel-sea {background:linear-gradient(180deg,var(--p-sea) 0%,var(--shell) 100%)}
.pastel-mint .eyebrow{color:#2F6B4F}
.pastel-sand .eyebrow{color:#8A6420}
.pastel-lilac .eyebrow{color:var(--signal)}
.pastel-peach .eyebrow{color:#B4462F}
.pastel-sea .eyebrow{color:#146B6E}
/* --- mega menu: colour per column + tinted icon wells --- */
.mega{width:min(720px,90vw);padding:0;overflow:hidden}
.mega-head{display:flex;align-items:center;gap:10px;padding:14px 20px;
background:linear-gradient(90deg,var(--p-sky),var(--p-lilac));border-bottom:1px solid var(--line)}
.mega-head .mh{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:var(--tide-deep)}
.mega-grid{padding:16px;gap:8px}
.mega a .mi{transition:background var(--dur-2) var(--ease-brand),color var(--dur-2) var(--ease-brand)}
.mega a:nth-child(1) .mi{background:var(--p-sky);color:var(--tide)}
.mega a:nth-child(2) .mi{background:var(--p-mint);color:#2F6B4F}
.mega a:nth-child(3) .mi{background:var(--p-peach);color:#B4462F}
.mega a:nth-child(4) .mi{background:var(--p-lilac);color:var(--signal)}
.mega a:nth-child(1):hover{background:var(--p-sky)}
.mega a:nth-child(2):hover{background:var(--p-mint)}
.mega a:nth-child(3):hover{background:var(--p-peach)}
.mega a:nth-child(4):hover{background:var(--p-lilac)}
.mega-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:12px 20px;background:var(--p-sand);border-top:1px solid var(--line);font-size:13px}
.mega-foot a{color:var(--tide-deep);text-decoration:none;font-weight:500}
.mega-foot a:hover{text-decoration:underline}
/* --- featured home band --- */
.feature-home{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center;margin-top:36px}
@media (max-width:900px){.feature-home{grid-template-columns:1fr}}
.fh-shots{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:440px}
.fh-shots figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;position:relative}
.fh-shots figure:first-child{grid-row:span 2}
.fh-shots img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform var(--dur-4) var(--ease-out-expo)}
.fh-shots figure:hover img{transform:scale(1.05)}
.fh-facts{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 22px}
/* --- listings --- */
.listing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;margin-top:36px}
.lcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-mark);
overflow:hidden;display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:inherit;
transition:transform var(--dur-2) var(--ease-brand),box-shadow var(--dur-2) var(--ease-brand),
border-color var(--dur-2) var(--ease-brand)}
.lcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--blue-400)}
.lcard .shot{position:relative;aspect-ratio:4/3;overflow:hidden}
.lcard .shot img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform var(--dur-4) var(--ease-out-expo)}
.lcard:hover .shot img{transform:scale(1.05)}
.lcard .flag{position:absolute;top:12px;left:12px;font-family:var(--font-mono);font-size:9.5px;
letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
background:rgba(255,255,255,.94);color:var(--ebb)}
.lcard .flag.real{background:var(--tide);color:#fff}
.lcard .lbody{padding:20px;display:grid;gap:8px;align-content:start}
.lcard h3{margin:0;font-family:var(--font-head);font-weight:600;font-size:20px;letter-spacing:-.014em}
.lcard .loc{font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:6px}
.lcard .specs{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px}
.spec{font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
padding:4px 9px;border-radius:999px;background:var(--p-sky);color:var(--tide-deep)}
.spec.mint{background:var(--p-mint);color:#2F6B4F}
.spec.sand{background:var(--p-sand);color:#8A6420}
.spec.peach{background:var(--p-peach);color:#B4462F}
/* --- listing detail --- */
.lhero{display:grid;grid-template-columns:2fr 1fr;grid-auto-rows:200px;gap:10px;margin-top:26px}
.lhero figure{margin:0;border-radius:var(--radius-lg);overflow:hidden}
.lhero figure:first-child{grid-row:span 2;border-radius:var(--radius-mark)}
.lhero img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){.lhero{grid-template-columns:1fr;grid-auto-rows:220px}
.lhero figure:first-child{grid-row:span 1}}
.ldetail{display:grid;grid-template-columns:1.4fr .6fr;gap:36px;margin-top:40px;align-items:start}
@media (max-width:900px){.ldetail{grid-template-columns:1fr}}
.amen{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:18px}
.amen div{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--text-2)}
.amen svg{color:var(--tide);flex:none}
/* --- booking widget --- */
.booking{position:sticky;top:92px;background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius-mark);padding:24px;box-shadow:var(--shadow-lift);display:grid;gap:14px}
.booking h4{margin:0;font-family:var(--font-head);font-weight:600;font-size:19px}
.brow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bfield{display:grid;gap:6px}
.bfield label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
text-transform:uppercase;color:var(--text-3)}
.bfield input,.bfield select{font-family:inherit;font-size:15px;padding:11px 12px;
border:1px solid var(--line);border-radius:var(--radius-sm,6px);background:var(--shell);color:var(--text);
transition:border-color var(--dur-2) var(--ease-brand),box-shadow var(--dur-2) var(--ease-brand)}
.bfield input:focus,.bfield select:focus{outline:none;border-color:var(--tide);
box-shadow:0 0 0 3px rgba(18,89,158,.16)}
.bnote{font-size:12px;color:var(--text-3);line-height:1.45;margin:0}
.bstatus{font-size:13px;margin:0;min-height:1.2em;color:var(--tide-deep)}
/* --- colourful product panels --- */
.ui-card.c-green .ui-chrome{background:rgba(168,201,122,.16)}
.ui-card.c-green .ui-chrome .st{background:rgba(220,237,180,.24);color:#DCEDB4}
.ui-card.c-violet .ui-chrome{background:rgba(169,139,234,.18)}
.ui-card.c-violet .ui-chrome .st{background:rgba(169,139,234,.26);color:#CBBAF4}
.ui-card.c-coral .ui-chrome{background:rgba(240,128,108,.16)}
.ui-card.c-coral .ui-chrome .st{background:rgba(240,128,108,.24);color:#FFC9BE}
.bars{display:flex;align-items:flex-end;gap:9px;height:104px;margin-top:8px}
.bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--foam),var(--tide));
animation:grow 5.4s var(--ease-out-expo) infinite;transform-origin:bottom}
.bars i:nth-child(2){animation-delay:.24s}.bars i:nth-child(3){animation-delay:.48s}
.bars i:nth-child(4){animation-delay:.72s}.bars i:nth-child(5){animation-delay:.96s}
.bars i:nth-child(6){animation-delay:1.2s}
.bars i.hi{background:linear-gradient(180deg,#DCEDB4,#8FBF5E)}
@keyframes grow{0%,4%{transform:scaleY(.18)}26%,80%{transform:scaleY(1)}96%,100%{transform:scaleY(.18)}}
.bars-x{display:flex;gap:9px;margin-top:7px}
.bars-x span{flex:1;text-align:center;font-family:var(--font-mono);font-size:8.5px;color:rgba(237,243,249,.6)}
.chanrow{display:grid;gap:8px;margin-top:4px}
.cr{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:9px 11px;
border-radius:9px;background:rgba(255,255,255,.07);font-size:12px;color:rgba(237,243,249,.92)}
.cr b{font-weight:400;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;
padding:3px 8px;border-radius:999px}
.cr.direct b{background:rgba(220,237,180,.26);color:#DCEDB4}
.cr.plat b{background:rgba(207,224,242,.2);color:var(--foam)}
.ring{width:96px;height:96px;border-radius:50%;margin:6px auto 0;
background:conic-gradient(var(--seagrass) 0turn,var(--seagrass) .62turn,rgba(255,255,255,.12) .62turn);
display:grid;place-items:center;animation:spin 6s var(--ease-brand) infinite}
.ring::after{content:"";width:70px;height:70px;border-radius:50%;background:#0A2434}
@keyframes spin{0%,6%{transform:rotate(-12deg)}30%,80%{transform:rotate(0)}96%,100%{transform:rotate(-12deg)}}
.ring-l{text-align:center;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
color:rgba(237,243,249,.7);margin-top:9px}
@media (prefers-reduced-motion:reduce){.bars i,.ring{animation:none;transform:none}}
/* ============================================================
24. LIGHT ILLUSTRATIONS — colourful, distributed through the
pastel bands rather than pooled in the dark one.
============================================================ */
.ill{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-mark);
overflow:hidden;box-shadow:var(--shadow-soft);
transition:transform var(--dur-2) var(--ease-brand),box-shadow var(--dur-2) var(--ease-brand)}
.ill:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.ill-top{display:flex;align-items:center;gap:9px;padding:11px 15px;border-bottom:1px solid var(--line)}
.ill-top .d{display:flex;gap:5px}.ill-top .d i{width:7px;height:7px;border-radius:50%}
.ill-top .t{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}
.ill-top .p{margin-left:auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;
padding:3px 9px;border-radius:999px}
.ill-body{padding:18px}
.ill.sky .ill-top{background:var(--p-sky)} .ill.sky .ill-top .t{color:var(--tide-deep)}
.ill.mint .ill-top{background:var(--p-mint)} .ill.mint .ill-top .t{color:#2F6B4F}
.ill.lilac .ill-top{background:var(--p-lilac)} .ill.lilac .ill-top .t{color:var(--signal)}
.ill.peach .ill-top{background:var(--p-peach)} .ill.peach .ill-top .t{color:#B4462F}
.ill.sand .ill-top{background:var(--p-sand)} .ill.sand .ill-top .t{color:#8A6420}
.ill.sky .ill-top .p{background:#fff;color:var(--tide)}
.ill.mint .ill-top .p{background:#fff;color:#2F6B4F}
.ill.lilac .ill-top .p{background:#fff;color:var(--signal)}
.ill.peach .ill-top .p{background:#fff;color:#B4462F}
.ill.sand .ill-top .p{background:#fff;color:#8A6420}
.ill-top .d i:nth-child(1){background:#F0806C}.ill-top .d i:nth-child(2){background:#E8C468}
.ill-top .d i:nth-child(3){background:#8FBF5E}
/* sync pills */
.syncrow{display:flex;gap:8px;flex-wrap:wrap}
.pill{font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;padding:6px 12px;
border-radius:999px;position:relative;overflow:hidden}
.pill.a{background:var(--p-sky);color:var(--tide-deep)}
.pill.b{background:var(--p-mint);color:#2F6B4F}
.pill.c{background:var(--p-peach);color:#B4462F}
.pill.d{background:var(--p-lilac);color:var(--signal)}
.pill::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;
animation:ppulse 4.6s var(--ease-brand) infinite}
.pill.b::after{animation-delay:.4s}.pill.c::after{animation-delay:.8s}.pill.d::after{animation-delay:1.2s}
@keyframes ppulse{0%,10%{opacity:0}17%{opacity:.62}32%,100%{opacity:0}}
.minical{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:14px}
.minical i{aspect-ratio:1;border-radius:3px;background:var(--p-sky)}
.minical i.on{background:var(--tide);animation:mfill 4.6s var(--ease-brand) infinite}
.minical i.own{background:#8FBF5E}
.minical i.on:nth-of-type(3n){animation-delay:.5s}
.minical i.on:nth-of-type(3n+1){animation-delay:1s}
@keyframes mfill{0%,10%{background:var(--p-sky)}18%,86%{background:var(--tide)}100%{background:var(--p-sky)}}
/* colourful step timeline */
.tline{display:grid;gap:12px}
.tstep{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:center;font-size:13.5px;color:var(--text-2)}
.tstep .b{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
font-family:var(--font-mono);font-size:10px;color:#fff}
.tstep:nth-child(1) .b{background:var(--tide)}
.tstep:nth-child(2) .b{background:#8FBF5E}
.tstep:nth-child(3) .b{background:#E8A13C}
.tstep:nth-child(4) .b{background:var(--signal)}
.tstep .tr{height:4px;border-radius:3px;background:var(--p-sky);position:relative;overflow:hidden;margin-top:5px}
.tstep .tr::after{content:"";position:absolute;inset:0;width:0;border-radius:3px;
animation:tfill 5.6s var(--ease-brand) infinite}
.tstep:nth-child(1) .tr::after{background:var(--tide)}
.tstep:nth-child(2) .tr::after{background:#8FBF5E;animation-delay:.7s}
.tstep:nth-child(3) .tr::after{background:#E8A13C;animation-delay:1.4s}
.tstep:nth-child(4) .tr::after{background:var(--signal);animation-delay:2.1s}
@keyframes tfill{0%,5%{width:0}22%,82%{width:100%}96%,100%{width:0}}
/* source-mix donut */
.donut{width:132px;height:132px;border-radius:50%;margin:4px auto 0;position:relative;
background:conic-gradient(var(--tide) 0turn .34turn,#8FBF5E .34turn .56turn,
var(--signal) .56turn .78turn,#F0806C .78turn 1turn)}
.donut::after{content:"";position:absolute;inset:26px;border-radius:50%;background:var(--surface)}
.dkey{display:grid;gap:7px;margin-top:14px}
.dkey span{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2)}
.dkey span::before{content:"";width:10px;height:10px;border-radius:3px}
.dkey span:nth-child(1)::before{background:var(--tide)}
.dkey span:nth-child(2)::before{background:#8FBF5E}
.dkey span:nth-child(3)::before{background:var(--signal)}
.dkey span:nth-child(4)::before{background:#F0806C}
.ill-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center;margin-top:34px}
@media (max-width:900px){.ill-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
.pill::after,.minical i.on,.tstep .tr::after{animation:none}
.tstep .tr::after{width:100%}
}
/* ============================================================
25. HEADING + LOGO FACE — Brandon Grotesque stand-in
Brandon Grotesque is commercial (HVD Fonts, via Adobe Fonts /
MyFonts) and cannot be loaded from Google Fonts. Jost is the
closest free geometric in the same Futura lineage: geometric
bowls, warm, holds up bold at display size.
Swap --font-head/--font-logo to 'brandon-grotesque' once the
Adobe kit or licensed webfont files are in place.
============================================================ */
:root{
--font-head:'Jost','Josefin Sans','Futura','Century Gothic',sans-serif;
--font-logo:'Jost','Josefin Sans','Futura','Century Gothic',sans-serif;
}
.brand{font-family:var(--font-logo);font-size:30px;font-weight:700;
letter-spacing:-.018em;gap:.14em;font-variation-settings:normal}
.brand .w1{font-weight:700}
.brand .w2{font-weight:500;font-style:normal;color:var(--tide)}
.ftr .brand{font-size:26px}
@media (max-width:820px){.brand{font-size:26px}}
h1,h2,.h2,.hero h1,.stack-panel h3,.tier .tname,.card h4,.ui-card h3,
.principle h4,.note-coral h4,.acc summary,.lcard h3,.person h4,.how-h{
font-family:var(--font-head);font-variation-settings:normal}
.hero h1{font-weight:700;letter-spacing:-.03em;font-size:clamp(46px,6.9vw,90px);line-height:1.0}
.h2,h2{font-weight:600;letter-spacing:-.024em}
.stack-panel h3{font-weight:600;letter-spacing:-.022em}
.acc summary{font-weight:500}
.card h4,.ui-card h3,.principle h4,.note-coral h4,.person h4,.lcard h3{font-weight:600}
/* ============================================================
26. TWO BUG FIXES
============================================================ */
/* (a) Cascade collision: foundation's `.btn:hover` paints
--accent-strong on EVERY button. Variants that overrode only
colour/border inherited a dark blue ground — the ghost button
measured 1.39:1 on hover. Every variant now states its own
hover background explicitly. */
.btn-ghost:hover,.btn-ghost:focus-visible{
background:var(--p-sky);color:var(--tide-deep);border-color:var(--tide)}
.btn-inverse:hover,.btn-inverse:focus-visible{
background:var(--foam);color:var(--ebb);border-color:var(--foam)}
.btn-secondary:hover,.btn-secondary:focus-visible{
background:var(--shallows);color:var(--on-foam);border-color:var(--shallows)}
.btn-primary:hover,.btn-primary:focus-visible{
background:var(--tide-deep);color:#fff;border-color:var(--tide-deep)}
.btn-anchor:hover,.btn-anchor:focus-visible{
background:#6E2C41;color:#fff;border-color:#6E2C41;filter:none}
.hdr.on-dark .btn-ghost:hover{background:rgba(255,255,255,.16);color:#fff;border-color:#fff}
/* (b) Mobile menu opened 36px tall. `.hdr` sets backdrop-filter,
which makes it the containing block for position:fixed
descendants — so inset:70px 0 0 0 resolved against the 70px
header, not the viewport, and the height computed to zero.
Drop the filter while the menu is open and pin an explicit
height so it cannot collapse either way. */
.hdr.nav-open{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--shell)}
@media (max-width:820px){
.mainnav.open{
top:70px;left:0;right:0;bottom:auto;
height:calc(100vh - 70px);
height:calc(100dvh - 70px);
max-height:calc(100dvh - 70px);
}
}