/* Altrovia — shared base
   Design tokens, reset, typography, buttons, nav and footer chrome: the rules that
   were byte-identical in all ten pages. Extracted so a change to any of them is one
   edit rather than ten, and so a reader moving between pages fetches them once.

   Only rules whose selector is never overridden by page-specific CSS are here — the
   handful that are contested (.nav-inner and some @media wrappers) stay inline on
   each page, because hoisting those would change which rule wins. */

/* ── Between pages ───────────────────────────────────────
   The same idea as between chapters: the site should read as one continuous story,
   so a navigation dissolves rather than cutting to white. A cross-document
   transition needs BOTH documents to opt in, which is why this block is on every
   linked page. Browsers without view transitions simply navigate as they did. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 300ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Self-hosted Inter (variable, latin + latin-ext) — see assets/fonts/urls.txt provenance */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/woff2/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.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: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/woff2/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 300ms; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--color-surface); color: var(--color-text); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis-weight: none; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.nav { position: fixed; top: 14px; left: 16px; right: 16px; z-index: 50; background: transparent; }
.nav.nav--solid .nav-inner { background: var(--color-surface); box-shadow: 0 1px 2px rgba(13,13,13,0.05), 0 8px 24px -6px rgba(13,13,13,0.12); }
.nav.nav--solid .brand, .nav.nav--solid .nav-links { color: var(--color-text); }
.nav.nav--solid .nav-links > a, .nav.nav--solid .dd-label { color: var(--color-text-secondary); }
.nav.nav--solid .dd-label .caret { color: var(--gray-500); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.brand .mark { width: 28px; height: 13px; display: block; flex: none; }
.nav-links { display: flex; align-items: center; gap: 2px; font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); }
.nav-links > a, .dd-label { padding: 7px 12px; border-radius: var(--radius-full); transition: background-color var(--duration-basic) ease, color var(--duration-basic) ease; }
.dd { position: relative; }
.dd-label { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.dd-label .caret { font-size: 8px; color: var(--gray-500); transition: transform var(--duration-basic) var(--cubic-move); }
.dd-menu { position: absolute; top: calc(100% + 22px); left: 50%; transform: translateX(-50%) translateY(-4px) scale(0.98); transform-origin: top center; min-width: 216px; padding: 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-300); opacity: 0; pointer-events: none; transition: opacity var(--duration-basic) var(--cubic-enter), transform var(--duration-basic) var(--cubic-enter); }
.dd:hover .dd-menu, .dd:focus-within .dd-menu, .dd.is-open .dd-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
.dd:hover .caret, .dd:focus-within .caret, .dd.is-open .caret { transform: rotate(180deg); }
.dd-menu a { display: block; padding: 9px 12px; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; color: var(--color-text); transition: background-color var(--duration-basic) ease; }
.dd-menu a:focus-visible { background: rgba(13, 13, 13, 0.06); }
.nav-burger { display: none; }
.footer { background: var(--gray-1000); color: var(--gray-0); }
.contact-email { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; letter-spacing: -0.015em; transition: color var(--duration-basic) ease; }
.foot-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-top: 64px; }
.foot-grid .left p { font-size: 1rem; color: rgba(255, 255, 255, 0.72); margin: 16px 0 0; }
.foot-grid .left svg { width: 30px; height: 30px; }
.socials { display: inline-flex; gap: 12px; align-items: center; }
.socials a { color: rgba(255, 255, 255, 0.72); display: inline-flex; padding: 8px; border-radius: var(--radius-full); transition: color var(--duration-basic) ease, background-color var(--duration-basic) ease; }
.socials a:hover { color: var(--gray-0); background: rgba(255, 255, 255, 0.12); }
.socials svg { width: 16px; height: 16px; }
.meta-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 24px 0 30px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.8125rem; font-weight: 500; color: rgba(255, 255, 255, 0.72); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.rise.d1 { animation-delay: 0.08s; }
.rise.d2 { animation-delay: 0.18s; }

/* ── Scroll reveal ───────────────────────────────────────
   Shared by every page carrying [data-reveal]; the observer that drives it stays
   inline on each. Elements are visible until that script marks the document
   .reveal-armed, so a page whose script never runs is never left blank.

   The lift comes from whichever side the element is arriving by: from below it on
   the way down the page, from above it on the way back up. A single fixed direction
   would mean that scrolling up, everything slid away from the direction of travel —
   which reads as the page pushing back against the reader. */
:root { --cubic-reveal: cubic-bezier(0.33, 1, 0.68, 1); }
[data-reveal] { transition: opacity 640ms var(--cubic-reveal), transform 640ms var(--cubic-reveal); }
.reveal-armed [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(14px); }
.reveal-armed [data-reveal].from-above:not(.is-in) { transform: translateY(-14px); }
[data-reveal].is-in { opacity: 1; transform: translateY(0); }
.nav.is-open .dd:hover > .dd-label, .nav.is-open .dd-label { background: transparent !important; }
.nav.is-open .nav-links .nav-cta { color: #ffffff !important; background: var(--gray-900) !important; }
.nav.is-open .nav-links > a[aria-current="page"], .nav.is-open .dd-menu a[aria-current="page"] { background: transparent !important; color: var(--gray-1000) !important; font-weight: 600; }
.nav-cta:active { transform: scale(0.97); }
.nav.nav--solid .nav-cta { background: var(--gray-900); color: #ffffff; }
.contact-dialog { border: 0; padding: 0; background: transparent; max-width: none; }
.contact-dialog::backdrop { background: rgba(13, 13, 13, 0.45); }
.contact-panel { width: min(480px, calc(100vw - 32px)); background: var(--color-surface); border-radius: var(--radius-3xl); padding: 32px 28px 28px; margin: auto; box-shadow: 0 2px 4px rgba(13,13,13,0.06), 0 24px 64px -16px rgba(13,13,13,0.25); font-family: var(--font-sans); color: var(--color-text); }
.contact-panel h2 { font-size: 1.5rem; line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 6px; }
.contact-panel .sub { font-size: 0.9375rem; color: var(--color-text-secondary); margin: 0 0 22px; }
.contact-panel label { display: block; margin-bottom: 14px; font-size: 0.8125rem; font-weight: 500; color: var(--color-text-secondary); }
.contact-panel input, .contact-panel textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 14px; font: inherit; font-size: 0.9375rem; color: var(--color-text); background: var(--gray-50); border: 1px solid rgba(13, 13, 13, 0.10); border-radius: var(--radius-lg); outline: none; transition: border-color var(--duration-basic) ease, background-color var(--duration-basic) ease; }
.contact-panel input:focus, .contact-panel textarea:focus { border-color: rgba(13, 13, 13, 0.35); background: #ffffff; }
.contact-panel textarea { resize: vertical; min-height: 96px; }
.contact-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.contact-submit:active { transform: scale(0.97); }
.contact-submit:disabled { opacity: 0.5; cursor: default; }
.contact-close { background: none; border: 0; cursor: pointer; font: inherit; font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); padding: 10px 6px; }
.contact-status { font-size: 0.8125rem; color: var(--color-text-secondary); min-height: 1.2em; margin-top: 12px; }
.contact-status.err { color: #ba2623; }
@starting-style { .contact-dialog[open] .contact-panel { opacity: 0; transform: scale(0.97); } }
@starting-style { .contact-dialog[open]::backdrop { opacity: 0; } }
.contact-panel input:focus-visible, .contact-panel textarea:focus-visible { outline: 2px solid var(--gray-900); outline-offset: 1px; }
.contact-success { text-align: center; padding: 28px 0 10px; display: none; }
.contact-success h3 { font-size: 1.25rem; font-weight: 500; margin: 0 0 6px; }
.contact-success p { font-size: 0.9375rem; color: var(--color-text-secondary); margin: 0; }
.skip-link:focus { top: 14px; }
.statement .left svg.fmark, .foot-grid .left svg.fmark, svg.fmark { width: 34px !important; height: 16px !important; display: block; }

/* ── Wordmark ────────────────────────────────────────────
   Plain "Altrovia" set in the site's self-hosted Inter. currentColor, so it follows
   the nav through its transparent and solid states. */
.al-logo { display: inline-flex; align-items: center; height: 28px; text-decoration: none; color: inherit; vertical-align: middle; }
.al-logo__stage { font-family: var(--font-sans); font-weight: 600; font-size: 21px; letter-spacing: -0.025em; line-height: 1; white-space: nowrap; }

/* ── Dark mode ───────────────────────────────────────────
   The palette is the one worked out in dark-mode.html: a cool near-black ground
   rather than #000, off-white text rather than #fff, and the four tint bands with
   their hue kept and their lightness inverted, so a section that is "the green one"
   in daylight is still the green one at night.

   One copy of the values, not two. The inline snippet in each page's <head> resolves
   the stored choice against prefers-color-scheme BEFORE first paint and stamps the
   answer on the root, so this block is the only place a dark value is written and
   there is no flash of the wrong theme. With script blocked the site stays light —
   which is exactly the site as it was.

   What is NOT here is as important: every rule that reaches for a token flips for
   free, and every rule that hardcoded a literal has to be named below. That list is
   the honest cost of 467 hardcoded colours, and it is why the tokens are worth it. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --gray-0: #0f1113;      /* page ground — cool, not pure black */
  --gray-50: #15181b;     /* first raised surface; replaces the shadow as the lift */
  --gray-75: #1a1e21;     /* panel bars and chips */
  --gray-100: #212529;    /* track and fill grounds */
  --gray-150: #2b3035;    /* dots and inactive marks */
  --gray-500: #9aa3ab;    /* secondary text — 5.9:1 on the ground */
  --gray-700: #c6ccd2;    /* body copy on tinted bands */
  --gray-900: #e6eaee;    /* stays the high-contrast-against-page ink */
  --gray-1000: #f4f6f8;   /* primary text — off-white, to take the glare off */

  --blue-50: #101a24;
  --green-50: #0f1d16;
  --yellow-50: #201c10;
  --purple-50: #17131f;
  --blue-700: #7da2ff;    /* emphasis blue, lifted to carry on a dark ground */

  /* hairlines need more alpha inverted: 10% white on near-black reads fainter than
     10% black on white, because the eye is working against a smaller absolute range */
  --color-border: rgba(255, 255, 255, 0.14);
  --color-border-subtle: rgba(255, 255, 255, 0.07);

  /* one pastel per person, inverted as a pair so the contrast the light chip had
     is the contrast the dark chip has */
  --who-lp-bg: #1e2740; --who-lp-fg: #a8c0ef;
  --who-ma-bg: #262240; --who-ma-fg: #b9b2ee;
  --who-js-bg: #17301f; --who-js-fg: #8fd0a8;   /* Jess Smith */
  --who-mh-bg: #33281a; --who-mh-fg: #e0bd82;
  --who-mc-bg: #36222a; --who-mc-fg: #eaa8b1;
  --who-you-bg: #22282e; --who-you-fg: #aebbc7;
}

/* ── The literals that cannot flip on their own ──────────
   Each of these is a place the CSS wrote a colour instead of naming one. They are
   listed here rather than fixed in place because fixing them in place means editing
   nine files; naming them here means one. */
:root[data-theme="dark"] .nav.nav--solid .nav-inner {
  background: rgba(36, 40, 45, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
}
/* the pill is already light-on-dark once the ramp inverts — only its hardcoded
   white label is wrong, and white on #e6eaee is nothing at all */
:root[data-theme="dark"] .nav.nav--solid .nav-cta,
:root[data-theme="dark"] .nav.is-open .nav-links .nav-cta { color: var(--gray-0) !important; }

/* the footer is a slab that contrasts with the page. Inverting the ramp would have
   made it a white slab at the foot of a dark page, which reads as a hole rather than
   a close, so at night it is a second, quieter dark instead. */
:root[data-theme="dark"] .footer { background: var(--gray-50); color: var(--gray-1000); }
:root[data-theme="dark"] .foot-grid .left p,
:root[data-theme="dark"] .socials a,
:root[data-theme="dark"] .meta-row { color: var(--gray-500); }
:root[data-theme="dark"] .meta-row { border-top-color: var(--color-border); }
:root[data-theme="dark"] .socials a:hover { color: var(--gray-1000); background: rgba(255, 255, 255, 0.10); }

:root[data-theme="dark"] .contact-dialog::backdrop { background: rgba(0, 0, 0, 0.65); }
:root[data-theme="dark"] .contact-panel {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 24px 64px -16px rgba(0, 0, 0, 0.7);
  border: 1px solid var(--color-border);
}
:root[data-theme="dark"] .contact-panel input,
:root[data-theme="dark"] .contact-panel textarea { border-color: var(--color-border); }
:root[data-theme="dark"] .contact-panel input:focus,
:root[data-theme="dark"] .contact-panel textarea:focus {
  background: var(--gray-75); border-color: rgba(255, 255, 255, 0.38);
}
:root[data-theme="dark"] .contact-status.err { color: #ff8a87; }
:root[data-theme="dark"] .dd-menu a:focus-visible { background: rgba(255, 255, 255, 0.10); }
:root[data-theme="dark"] .nav.nav--solid .nav-links > a:hover,
:root[data-theme="dark"] .nav.nav--solid .dd:hover > .dd-label { background: rgba(255, 255, 255, 0.08); }

/* ── The moon ────────────────────────────────────────────
   One button, two glyphs, one crossfade. The moon is the invitation to go dark and
   the sun the way back, which is the convention and needs no label to be read — but
   it carries one anyway, because an icon-only control is a guess for anyone using a
   screen reader. aria-pressed says which state it is in, not which state it offers. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; margin-left: 2px;
  padding: 0; border: 0; border-radius: var(--radius-full);
  background: transparent; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration-basic) ease, color var(--duration-basic) ease;
}
.theme-toggle:hover { background: rgba(13, 13, 13, 0.06); }
:root[data-theme="dark"] .theme-toggle:hover { background: rgba(255, 255, 255, 0.10); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.theme-toggle svg { width: 17px; height: 17px; display: block; grid-area: 1 / 1; }
.theme-toggle .tt-icons { display: grid; place-items: center; }
/* both glyphs occupy the same cell; only one is ever opaque, so the swap is a
   crossfade in place rather than a reflow */
.theme-toggle .tt-sun { opacity: 0; transform: rotate(-70deg) scale(0.6); }
.theme-toggle .tt-moon { opacity: 1; transform: none; }
.theme-toggle .tt-sun, .theme-toggle .tt-moon {
  transition: opacity var(--duration-basic) ease, transform 320ms var(--cubic-move);
}
:root[data-theme="dark"] .theme-toggle .tt-sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-toggle .tt-moon { opacity: 0; transform: rotate(70deg) scale(0.6); }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle .tt-sun, .theme-toggle .tt-moon { transition: opacity 120ms ease; transform: none !important; }
}

/* The whole page changes colour at once, so the change is given a beat rather than
   snapping. Only the two properties that actually differ, and never on a transform,
   so nothing that is mid-animation is disturbed. */
:root.theme-anim, :root.theme-anim body,
:root.theme-anim .footer, :root.theme-anim .nav-inner, :root.theme-anim .contact-panel {
  transition: background-color 260ms ease, color 260ms ease;
}
@media (prefers-reduced-motion: reduce) {
  :root.theme-anim, :root.theme-anim body,
  :root.theme-anim .footer, :root.theme-anim .nav-inner, :root.theme-anim .contact-panel { transition: none; }
}

/* ── Dark mode: the colours that were written out instead of named ──
   Everything below exists only because a rule said "#fff" or "#27995f" where it
   could have said what it meant. A token would have flipped on its own; a literal
   has to be listed, by name, here. This block is the receipt.

   Two failures, both invisible until the ground moves:
     · white label on a pill whose background is --gray-900 — which inverts to near
       white, leaving white on white at a contrast ratio of 1.08;
     · an ink mixed for a white page — the greens, the ambers, the blues — left on a
       near-black one, where it goes muddy.
   The replacements are the accents already worked out in dark-mode.html. */
:root[data-theme="dark"] .ag-create,
:root[data-theme="dark"] .contact-submit,
:root[data-theme="dark"] .ev-send,
:root[data-theme="dark"] .hero .btn-hero,
:root[data-theme="dark"] .nav-links .nav-cta,
:root[data-theme="dark"] .pa-send,
:root[data-theme="dark"] .pr-act.is-ok,
:root[data-theme="dark"] .pr-btn.is-primary,
:root[data-theme="dark"] .rec-add-btn.is-ready,
:root[data-theme="dark"] .rec-btn.is-dark,
:root[data-theme="dark"] .skip-link { color: var(--gray-0); }
:root[data-theme="dark"] .op-row.is-applied .op-apply,
:root[data-theme="dark"] .pa-grp-row.is-done .pa-grp-left,
:root[data-theme="dark"] .pa-grp.is-done .pa-grp-left,
:root[data-theme="dark"] .pa-src.is-linked .pa-src-btn,
:root[data-theme="dark"] .pr-cm.is-done .pr-cm-tag,
:root[data-theme="dark"] .pr-mk.is-ok .n,
:root[data-theme="dark"] .pr-rev.is-ok .pr-act.is-ok,
:root[data-theme="dark"] .rec-drop-ok,
:root[data-theme="dark"] .rec-hv,
:root[data-theme="dark"] .rec-role.is-pending,
:root[data-theme="dark"] .tw-drawer em { color: #4fcb8d; }
:root[data-theme="dark"] .pa-grp-name,
:root[data-theme="dark"] .rad-score i { color: #d8b45c; }
:root[data-theme="dark"] .pr-rev.is-no .pr-act.is-no { color: #eaa8b1; }

/* The one literal that fails the other way round: a hardcoded white GROUND under a
   tokenised label. Over the hero the pill is meant to be invisible — white on white,
   so only the words show — and at night that means the page's own dark, not white.
   Scoped away from .nav--solid, which wants its light pill and already has it. */


/* ── Holding the nav still while the wordmark moves ──────
   ΛLTROVIΛ types itself in on load and closes to ΛΛ on the first scroll, and the
   brand's box was changing width with it: 139.6px open, 32.1px closed. In a
   space-between row that travels — the links slid 71.7px left and the theme toggle
   35.9px every time the mark opened or closed, so the whole bar breathed in and out
   around an animation that was only ever meant to happen inside the mark.

   The fix is to reserve the open width so the box never changes size. ΛΛ then sits at
   the left of a box the full wordmark's width, and everything downstream is fixed.
   140px is ΛLTROVIΛ measured at the stage's own 22px Inter — if the face or that size
   ever changes, this number is the one to re-measure. min-width, not width, so a
   fallback face that sets wider is clipped by nothing. */
.al-logo { min-width: 140px; }

/* ── Dark mode, second pass: one nav, one brightness ─────
   Three things the first pass got wrong, all of them the same mistake in different
   clothes — a colour written as a literal cannot know the ground has moved. */

/* 1 · ONE NAV, NOT TWO.
   The bar was declared twice, in two files, in two directions: index.html set
   rgba(255,255,255,0.62) — a white pill, which stayed white over a dark page and left
   its own light-on-white links unreadable — while the customer pages set
   rgba(13,13,13,0.42), a dark one. Two pages, two navigation bars. Here it is one:
   the page's own ground, translucent, over both. Scoped away from .nav--solid so the
   scrolled state still firms up — same hue, more of it, which is a state and not a
   second colour. */
:root[data-theme="dark"] .nav:not(.nav--solid) .nav-inner {
  background: rgba(36, 40, 45, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* 2 · THE CUSTOMER OPENERS.
   The wash over the illustration was built to hold BLACK type — "heavy enough on the
   left to hold black type at 8:1" — so it lifts the picture with white at up to 0.74
   and brightness(1.06). Inverting the type without inverting the wash put near-white
   on near-white. The treatment is the same idea in reverse: the side the words sit on
   is darkened and defocused rather than lightened, the picture survives on the right,
   and the feathered mask is inherited untouched so there is still no edge. */
:root[data-theme="dark"] .open-banner::after {
  -webkit-backdrop-filter: blur(26px) saturate(0.82) brightness(0.42);
  backdrop-filter: blur(26px) saturate(0.82) brightness(0.42);
  background: linear-gradient(100deg,
    rgba(15,17,19,0.84) 0%, rgba(15,17,19,0.78) 30%,
    rgba(15,17,19,0.60) 46%, rgba(15,17,19,0.24) 62%, rgba(15,17,19,0) 78%);
}
@supports not (backdrop-filter: blur(1px)) {
  :root[data-theme="dark"] .open-banner::after {
    background: linear-gradient(100deg,
      rgba(15,17,19,0.96) 0%, rgba(15,17,19,0.93) 34%,
      rgba(15,17,19,0.80) 50%, rgba(15,17,19,0.34) 66%, rgba(15,17,19,0) 82%);
  }
}
/* and the picture itself comes down to meet the page, rather than glowing out of it */
:root[data-theme="dark"] .open-art img { filter: brightness(0.74) saturate(0.9); }

/* 3 · THE ILLUSTRATIONS ARE TOO BRIGHT.
   --gray-900 is the "strong surface" the primary chips are built on: Save, Add member,
   Create agent, Download PDF, Approve. Inverted it landed at #e6eaee — within a few
   percent of the body text — so every chip inside the product panels read as a lit
   window. Dimmed here, once, at the token: five components settle at the same time,
   which is the whole argument for tokens in one line. */
:root[data-theme="dark"] { --gray-900: #d3d9df; }

/* The radar drew its structure in #e4e4e6 and #ededef — faint marks on white, glaring
   ones on near-black — and its DATA in #1f4fd8, which on a dark panel disappears. The
   figure had it exactly backwards: the scaffolding shouted and the reading vanished.
   Inverted in both directions, the ring stays a shade stronger than the spoke, as it
   is in daylight. */
:root[data-theme="dark"] .rad-ring  { stroke: #333941; }
:root[data-theme="dark"] .rad-spoke { stroke: #2b3035; }
:root[data-theme="dark"] .rad-line  { stroke: var(--blue-700); }
:root[data-theme="dark"] .rad-dot   { fill: var(--blue-700); }
:root[data-theme="dark"] .rad-area  { fill: rgba(125, 162, 255, 0.14); }
:root[data-theme="dark"] .rec-cursor svg { stroke: var(--gray-1000); }

/* the hero call is meant to be the brightest thing on the page, not a lamp: a step
   below the text at rest, and the full value on hover, so the brightening is the
   feedback rather than the resting state */
:root[data-theme="dark"] .hero .btn-hero { background: #e4e9ee; }
:root[data-theme="dark"] .hero .btn-hero:hover { background: var(--gray-1000); }

/* ── Dark mode, third pass: partners and the quote dots ──

   PARTNERS. Each card carries a pair — --pc, a pastel, and --pi, its ink — and the
   hover wash is color-mix(var(--pc) 26%, #fff). Mixing toward white is the thing that
   breaks: at night the card lit up a near-white panel behind itself, while --pi, an
   ink chosen to sit on paper, was too dark to find. Both halves inverted as a pair, so
   each partner keeps its own hue and only the lightness swaps, and the mix now runs
   toward the page instead of away from it. */
:root[data-theme="dark"] .p-card:nth-child(1) { --pc: #1e2740; --pi: #a8c0ef; }  /* blue  */
:root[data-theme="dark"] .p-card:nth-child(2) { --pc: #17301f; --pi: #8fd0a8; }  /* sage  */
:root[data-theme="dark"] .p-card:nth-child(3) { --pc: #36222a; --pi: #eaa8b1; }  /* clay  */
:root[data-theme="dark"] .p-card:nth-child(4) { --pc: #262240; --pi: #b9b2ee; }  /* lilac */
:root[data-theme="dark"] .p-card::after {
  background: color-mix(in srgb, var(--pc) 62%, var(--gray-0));
}

/* THE QUOTE DOTS. The carousel drew its inactive marks in rgba(13,13,13,0.22) — ink
   at a fifth strength, which is a soft grey on paper and nothing at all on near-black.
   Only the current dot was ever visible, so a three-quote carousel looked like a full
   stop. Same relationship, inverted: the rest of the circles are there, quiet, and the
   current one is still plainly the current one. */
:root[data-theme="dark"] .voice-dot::before { background: rgba(255, 255, 255, 0.30); }
:root[data-theme="dark"] .voice-dot[aria-pressed="true"]::before { background: var(--color-text); }
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"] .voice-dot:hover::before { background: rgba(255, 255, 255, 0.55); }
  :root[data-theme="dark"] .voice-dot[aria-pressed="true"]:hover::before { background: var(--color-text); }
  :root[data-theme="dark"] .voice-arrow:hover { background: rgba(255, 255, 255, 0.10); }
}

/* ── Dark mode, fourth pass: the hairlines ───────────────
   132 declarations across the site draw structure in rgba(13,13,13, a) — ink at a
   fraction of its strength. On white that is the whole vocabulary of this design: card
   edges, row rules, the connector lines in the customer illustrations, the faint fills
   behind a hover. On near-black it is nothing at all, which is why the CROs diagram
   arrived as floating labels with no diagram around them.

   Every one of them inverted below, alpha scaled by 1.3 + 0.02 because a hairline does
   not read at the same strength reversed. Scrims above 35% are left alone — those are
   deliberate darkening, and they still darken. Shadows are left alone too: a shadow on
   a dark page is still a shadow.

   This is the same receipt as before, longer. A --edge token would have been one line. */
:root[data-theme="dark"] .dd-menu a:hover { background: rgba(255, 255, 255, 0.098); }
:root[data-theme="dark"] .dd:hover > .dd-label { background: rgba(255, 255, 255, 0.098); }
:root[data-theme="dark"] .fig-band + .fig-band { border-top: 1px solid rgba(255, 255, 255, 0.228); }
:root[data-theme="dark"] .fig-band .fig + .fig { border-top: 1px solid rgba(255, 255, 255, 0.228); }
:root[data-theme="dark"] .fig-band .fig + .fig::before { background: rgba(255, 255, 255, 0.228); }
:root[data-theme="dark"] .fig-rest .fig + .fig { border-top: 1px solid rgba(255, 255, 255, 0.228); }
:root[data-theme="dark"] .fig-rest .fig:first-child { border-top: 1px solid rgba(255, 255, 255, 0.228); }
:root[data-theme="dark"] .fig-rest::before { background: rgba(255, 255, 255, 0.228); }
:root[data-theme="dark"] .figs { border-bottom: 1px solid rgba(255, 255, 255, 0.228); border-top: 1px solid rgba(255, 255, 255, 0.228); }
:root[data-theme="dark"] .hero-jump { border-bottom: 1px solid rgba(255, 255, 255, 0.254); }
:root[data-theme="dark"] .hero-jump:hover { border-bottom-color: rgba(255, 255, 255, 0.605); }
:root[data-theme="dark"] .more-btn:hover { border-color: rgba(255, 255, 255, 0.28); }
:root[data-theme="dark"] .motif .node { stroke: rgba(255, 255, 255, 0.332); }
:root[data-theme="dark"] .nav .dd:hover > .dd-label { background: rgba(255, 255, 255, 0.098); }
:root[data-theme="dark"] .nav .nav-links > a:hover { background: rgba(255, 255, 255, 0.098); }
:root[data-theme="dark"] .nav-links > a:hover { background: rgba(255, 255, 255, 0.098); }
:root[data-theme="dark"] .org { border: 1px solid rgba(255, 255, 255, 0.228); }
:root[data-theme="dark"] .org-join path { stroke: rgba(255, 255, 255, 0.358); }
:root[data-theme="dark"] .org-join::before { background: rgba(255, 255, 255, 0.358); }
:root[data-theme="dark"] .org-past li { border-top: 1px solid rgba(255, 255, 255, 0.228); }
:root[data-theme="dark"] .org-past li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.228); }
:root[data-theme="dark"] .pa-composer.is-live { border-color: rgba(255, 255, 255, 0.41); }
:root[data-theme="dark"] .partners .p { border-top: 1px solid rgba(255, 255, 255, 0.124); }
:root[data-theme="dark"] .partners .p:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.124); }
:root[data-theme="dark"] .partners .p:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.124); }
:root[data-theme="dark"] .rec-input.is-live { border-color: rgba(255, 255, 255, 0.436); }
:root[data-theme="dark"] .seg-btn:hover { border-color: rgba(255, 255, 255, 0.384); }
:root[data-theme="dark"] .voice-arrow:hover { background: rgba(255, 255, 255, 0.098); }

/* the green inside the destination chip, mixed for a pale mint ground */
:root[data-theme="dark"] .org-next .org-ic { color: #6fd39b; }
:root[data-theme="dark"] .org-join::after { background: #4fcb8d; }

/* ── Dark mode: the landing-page illustrations ───────────
   The product panels carry their hue as washes of the daylight accents — a blue at
   4.5% here, a green at 7% there. Over paper those are the faintest possible tint; over
   a near-black panel they are either invisible or a smear of grey with a colour cast.

   Re-based onto the five grounds the avatars already use at night — the navy, indigo,
   green, olive and maroon — which are the same hues at a lightness that belongs to a
   dark page. Backgrounds take the ground itself (a step up where the original wash was
   doing heavier work than a tint); outlines take a matching edge tone, since an edge
   has to separate two darks rather than sit on white. Shadows are left alone. */
:root[data-theme="dark"] .ag-field.is-live { border-color: rgba(74, 92, 138, 0.82); }
:root[data-theme="dark"] .ev-cite-t { text-decoration-color: rgba(74, 92, 138, 0.548); }
:root[data-theme="dark"] .ev-src.is-fda { background: #1e2740; }
:root[data-theme="dark"] .ev-tbl .is-ours td { background: #1e2740; }
:root[data-theme="dark"] .op-row.is-applied .op-apply { background: #17301f; border-color: rgba(55, 118, 79, 0.612); }
:root[data-theme="dark"] .pa-done-t { background: #17301f; border: 1px solid rgba(55, 118, 79, 0.516); }
:root[data-theme="dark"] .pa-src.is-linked .pa-src-btn { background: #17301f; border-color: rgba(55, 118, 79, 0.612); }
:root[data-theme="dark"] .pr-cm.is-done .pr-cm-tag { background: #17301f; border-color: rgba(55, 118, 79, 0.58); }
:root[data-theme="dark"] .pr-mark-t.is-kept .pr-sel { background: #204630; }
:root[data-theme="dark"] .pr-mark-t.is-lit .pr-sel { background: #2c3a5e; }
:root[data-theme="dark"] .pr-rev.is-no .pr-act.is-no { background: #36222a; border-color: rgba(125, 78, 91, 0.516); }
:root[data-theme="dark"] .pr-rev.is-ok .pr-act.is-ok { background: #17301f; border-color: rgba(55, 118, 79, 0.644); }
:root[data-theme="dark"] .pr-scan {
  /* a beam, not a band: the stops at 0% and 100% must stay fully transparent or the
     scan stops sweeping and just sits there as a blue slab */
  background: linear-gradient(to bottom, rgba(74,92,138,0) 0%, rgba(74,92,138,0.34) 62%, rgba(74,92,138,0) 100%);
  border-bottom: 1px solid rgba(74, 92, 138, 0.308); }
:root[data-theme="dark"] .pr-sel { background: #1e2740; }
:root[data-theme="dark"] .pr-tick { background: #17301f; }
:root[data-theme="dark"] .pr-toc span.is-reading { background: #1e2740; }
:root[data-theme="dark"] .rad-area { fill: #1e2740; }
:root[data-theme="dark"] .rad-score i { background: #4a3a24; }
:root[data-theme="dark"] .rec-hv { background: #17301f; }
:root[data-theme="dark"] .rec-role.is-pending { background: #17301f; }

/* ── Dark mode: the Mission line ─────────────────────────
   The line runs grey, then steps to green at the point the essay turns. Its ink is an
   SVG gradient whose stops are presentation ATTRIBUTES in the markup — the script that
   animates it only moves the offsets, never the colours — so the grey half stayed
   rgba(13,13,13,0.16) and simply was not there at night. The line appeared to begin
   halfway down, which reads as a broken animation rather than a dark one.

   A CSS stop-color outranks the attribute, so both halves are restored here without
   touching the markup or the script that drives them. */
:root[data-theme="dark"] #ink-a,
:root[data-theme="dark"] #ink-b { stop-color: rgba(255, 255, 255, 0.28); }
:root[data-theme="dark"] #ink-c { stop-color: rgba(126, 201, 166, 0.88); }
:root[data-theme="dark"] #ink-d { stop-color: rgba(126, 201, 166, 0.48); }

/* The five threads the essay is colour-coded with were mixed for paper — every one of
   them lands around 4:1 on this ground, which is a colour you can find but not read.
   Lifted to the same tones the avatars and the illustrations now use, so the whole
   site is telling one colour story at night. */
:root[data-theme="dark"] {
  --thread-green:  #7ec9a6;
  --thread-purple: #ab9be8;
  --thread-coral:  #e8917a;
  --thread-blue:   #79b3e3;
  --thread-yellow: #cfa85e;
}

/* ── Dark mode: the panel chrome ─────────────────────────
   The chapter hue reaches the illustrations through color-mix(var(--ch) N%, #fff) —
   38% for the bar across the top of every panel, 45-60% for whatever is selected, 90%
   for a card's top edge. Mixing toward white is the fault: the record card's header and
   the evidence panel's tab bar arrived as cream slabs laid across a dark page, which is
   the brightest thing in the product story and the first thing the eye goes to.

   Two changes, and the whole family settles. The hues themselves become the five dark
   grounds already in use elsewhere on the site, and every mix runs toward the page
   instead of away from it — taking 45 points more of the tint, because a tint has to
   work harder to separate from near-black than it does from paper. */
:root[data-theme="dark"] {
  --ch-sage:  #17301f;  --ink-sage:  #8fd0a8;
  --ch-blue:  #1e2740;  --ink-blue:  #a8c0ef;
  --ch-lilac: #262240;  --ink-lilac: #b9b2ee;
  --ch-clay:  #36222a;  --ink-clay:  #eaa8b1;
  --ch-amber: #33281a;  --ink-amber: #e0bd82;
  --ch-cream: #2b2720;  --ink-cream: #e0bd82;
}
:root[data-theme="dark"] .ag-bar { background: color-mix(in srgb, var(--ch) 83%, var(--gray-0)); }
:root[data-theme="dark"] .ev-bar { background: color-mix(in srgb, var(--ch) 100%, var(--gray-0)); }
:root[data-theme="dark"] .ev-tab.is-on { box-shadow: 0 1px 2px rgba(13,13,13,0.06),
                                 inset 0 0 0 1px color-mix(in srgb, var(--ch) 100%, var(--gray-0)); }
:root[data-theme="dark"] .op-bar { background: color-mix(in srgb, var(--ch) 83%, var(--gray-0)); }
:root[data-theme="dark"] .p-card::after { background: color-mix(in srgb, var(--pc) 71%, var(--gray-0)); }
:root[data-theme="dark"] .p-flow .p-panel { border-top-color: color-mix(in srgb, var(--ch) 100%, var(--gray-0)); }
:root[data-theme="dark"] .p-panel-bar { background: color-mix(in srgb, var(--ch) 83%, var(--gray-0)); }
:root[data-theme="dark"] .p-panel-dots span:nth-child(1) { background: color-mix(in srgb, var(--ch-clay) 100%, var(--gray-0)); }
:root[data-theme="dark"] .p-panel-dots span:nth-child(2) { background: color-mix(in srgb, var(--ch-cream) 100%, var(--gray-0)); }
:root[data-theme="dark"] .p-panel-dots span:nth-child(3) { background: color-mix(in srgb, var(--ch-sage) 100%, var(--gray-0)); }
:root[data-theme="dark"] .p-panel-sub { background: color-mix(in srgb, var(--ch) 83%, var(--gray-0)); }
:root[data-theme="dark"] .pa-nav .is-on { background: color-mix(in srgb, var(--ch) 100%, var(--gray-0)); }
:root[data-theme="dark"] .pa-side { background: color-mix(in srgb, var(--ch) 75%, var(--gray-0)); }
:root[data-theme="dark"] .pr-meta em { background: color-mix(in srgb, var(--ch) 91%, var(--gray-0)); }
:root[data-theme="dark"] .pr-ship { background: color-mix(in srgb, var(--ch) 83%, var(--gray-0)); }
:root[data-theme="dark"] .pr-toc span.is-on { background: color-mix(in srgb, var(--ch) 100%, var(--gray-0)); }
:root[data-theme="dark"] .rec-bar { background: color-mix(in srgb, var(--ch) 83%, var(--gray-0)); }
:root[data-theme="dark"] .rec-step-n { background: color-mix(in srgb, var(--ch) 91%, var(--gray-0)); }
:root[data-theme="dark"] .rec-step.is-hot { background: color-mix(in srgb, var(--ch) 90%, var(--gray-0)); }
:root[data-theme="dark"] .tw-bar { background: color-mix(in srgb, var(--ch) 83%, var(--gray-0)); }

/* ── Dark mode: drawn buttons are not real buttons ───────
   --gray-900 does two jobs. On the nav pill and the hero call it is a genuine call to
   action and should be the brightest thing in view. Inside the product panels it is a
   PICTURE of a button — Save, Add member, Create agent, Approve — and at the same value
   a row of them reads as a row of lamps set into the illustration, pulling the eye off
   the thing the panel is actually demonstrating.

   So the drawn ones step down. Still plainly filled against their outlined siblings,
   which is what marks them primary, but now inside the panel's tonal range instead of
   above it. The real calls to action are untouched. */
:root[data-theme="dark"] .rec-btn.is-dark,
:root[data-theme="dark"] .rec-add-btn.is-ready,
:root[data-theme="dark"] .ag-create,
:root[data-theme="dark"] .pr-btn.is-primary,
:root[data-theme="dark"] .pr-act.is-ok,
:root[data-theme="dark"] .pa-send,
:root[data-theme="dark"] .ev-send { background: #aeb7c0; color: var(--gray-0); }
:root[data-theme="dark"] .pr-btn.is-primary,
:root[data-theme="dark"] .pr-act.is-ok { border-color: #aeb7c0; }
:root[data-theme="dark"] .rec-btn.is-dark { border-color: #aeb7c0; }

/* ── Dark mode: the last pastels ─────────────────────────
   Two families still mixed for paper. The file-type badges are 23x16 and glowed at 0.80
   luminance — small, but the brightest thing inside the agent panel, so the eye went to
   "PDF" instead of to the sentence next to it. The segment cards flash their hue on
   hover, which on a dark page meant a pastel panel lighting up under the cursor.

   Both inverted as pairs — ground and ink together, hue kept, lightness swapped — onto
   the same five the rest of the site now uses. */
:root[data-theme="dark"] .ag-ft.is-pdf { background: #36222a; color: #eaa8b1; }
:root[data-theme="dark"] .ag-ft.is-doc { background: #1e2740; color: #a8c0ef; }
:root[data-theme="dark"] .ag-ft.is-xls { background: #17301f; color: #8fd0a8; }

@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"] .seg-card:nth-child(1):hover { background: #1e2740; }
  :root[data-theme="dark"] .seg-card:nth-child(2):hover { background: #2b2720; }
  :root[data-theme="dark"] .seg-card:nth-child(3):hover { background: #33281a; }
  :root[data-theme="dark"] .seg-card:nth-child(4):hover { background: #36222a; }
}

/* ── The Complexity chapter's top edge ───────────────────
   Every panel in the flow takes its chapter's hue on the top edge alone — the other
   three sides are a neutral hairline. At 90% of the tint that edge is barely there in
   blue, sage or lilac, but clay is the warmest hue in the set and it reads as a peach
   line laid across the top of the card rather than as a tint.

   The chapter keeps its colour everywhere else — the levers bar, the HIGH chip, the
   selections are all still clay. It is only this one line that goes neutral, so the
   card carries a single hairline all the way round. */
#s3 .p-panel { border-top-color: var(--color-border); }
:root[data-theme="dark"] #s3 .p-panel { border-top-color: var(--color-border); }

/* ── Nav pill: its own tone, in both themes ──────────────
   The pill used to take the page's own colour (white on white, #0f1113 on #0f1113), so
   only the words showed and the bar itself disappeared. It now has a tone one step off
   the ground, a hairline edge and a blur, the same on every page and in both scroll
   states; scrolling only makes it more opaque. Dark values are in the dark-mode block. */
:root .nav .nav-inner {
  background: rgba(240, 240, 238, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(13, 13, 13, 0.08);
}
:root .nav.nav--solid .nav-inner {
  background: rgba(240, 240, 238, 0.92);
  box-shadow: inset 0 0 0 1px rgba(13, 13, 13, 0.08), 0 8px 24px -10px rgba(13, 13, 13, 0.18);
}
:root .nav .brand, :root .nav .nav-links { color: var(--color-text); }
:root .nav .nav-links > a, :root .nav .dd-label { color: var(--color-text-secondary); }
:root .nav .dd-label .caret { color: var(--gray-500); }
:root .nav .nav-inner > .nav-cta { background: var(--gray-900); color: var(--gray-0); }
@media (hover: hover) and (pointer: fine) {
  :root .nav .nav-links > a:hover, :root .nav .dd:hover > .dd-label { background: rgba(13, 13, 13, 0.06); color: var(--color-text); }
  :root[data-theme="dark"] .nav .nav-links > a:hover, :root[data-theme="dark"] .nav .dd:hover > .dd-label { background: rgba(255, 255, 255, 0.08); }
  :root .nav .nav-inner > .nav-cta:hover { background: var(--gray-700); }
}

/* ── Footer: links, offices ───────────────────────────────
   The footer carries the site's own links and the two cities the company works from. */
.foot-grid { grid-template-columns: 1fr auto auto; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.875rem; }
.foot-links a { color: rgba(255, 255, 255, 0.72); transition: color var(--duration-basic) ease; }
.foot-links a:hover { color: var(--gray-0); }
.foot-links span { color: rgba(255, 255, 255, 0.48); }
:root[data-theme="dark"] .foot-links a { color: var(--gray-500); }
:root[data-theme="dark"] .foot-links a:hover { color: var(--gray-1000); }
:root[data-theme="dark"] .foot-links span { color: var(--gray-500); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr; } }

/* ── Focus ────────────────────────────────────────────────
   One visible ring for every link and control that has no focus style of its own. */
:where(a, button, [tabindex]):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }