/*
 * CyberAutomations base styles. Requires ca-tokens.css first. CANONICAL SOURCE (see sync note in ca-tokens.css).
 * Element defaults plus a small component set. Pages add layout only; they should not restate colours,
 * fonts, radii or sizes. Portal pages set <html data-theme="portal">.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-body)/var(--lh-body) var(--font-ui);
}
[data-theme="portal"] body { font-size: var(--fs-small); line-height: var(--lh-ui); }

/* Headings: serif display only for the public hero h1; everything else is Plex */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-ui); font-weight: 600; line-height: var(--lh-tight); letter-spacing: 0; }
h1 { font-family: var(--font-display); font-size: var(--fs-h1); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
[data-theme="portal"] h1 { font-family: var(--font-ui); font-size: var(--fs-portal-h1); }
[data-theme="portal"] h2 { font-size: var(--fs-lg); }
[data-theme="portal"] h3 { font-size: var(--fs-body); }
@media (max-width: 640px) { h1 { font-size: 30px; } }

p { margin: 0; }
p + p { margin-top: var(--sp-3); }
.lede { color: var(--muted); max-width: 46ch; }
.meta { color: var(--muted); font-size: var(--fs-meta); }
small, .small { font-size: var(--fs-meta); }

a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* A11Y-001: deep links and focus targets clear the fixed header. Public header 64px + 16,
   portal sticky chrome smaller. Applied to headings, any id anchor, and focused regions. */
:root:not([data-theme="portal"]) { scroll-padding-top: 80px; }
[data-theme="portal"] { scroll-padding-top: 64px; }
:where(:root:not([data-theme="portal"])) :is(h1, h2, h3, h4, [id]) { scroll-margin-top: 80px; }
:where([data-theme="portal"]) :is(h1, h2, h3, h4, [id]) { scroll-margin-top: 64px; }

code, kbd, samp, pre, .num { font-family: var(--font-num); font-size: 0.92em; }
/* TYPE-001: tabular figures only where numeric alignment matters, never on all body text. */
.num, td.n, th.n, .stat .v, .price, .terminal { font-variant-numeric: tabular-nums; }

/* Controls: the only rounded things (6px) */
button, .btn {
  font: 500 var(--fs-body)/1 var(--font-ui);
  border-radius: var(--r-ctl);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  padding: 11px 18px;
  cursor: pointer;
}
[data-theme="portal"] button, [data-theme="portal"] .btn { font-size: var(--fs-small); padding: 8px 14px; }
.btn-primary, button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

input, select, textarea {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--r-ctl);
  padding: 9px 12px;
}
[data-theme="portal"] input, [data-theme="portal"] select, [data-theme="portal"] textarea { background: var(--bg); padding: 7px 10px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--control-checked); padding: 0; }
label { font-size: var(--fs-small); font-weight: 500; }
.field { display: grid; gap: var(--sp-2); }
.field > * { min-width: 0; } /* a long <select> option otherwise widens the page on phones */
/* Hidden from view but not from screen readers or form posts (honeypots, labels). Clips in place,
   so it never adds to scrollWidth the way left:-9999px does. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Panels and tables: 2px corners, 1px lines, no shadows */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-shell); padding: var(--sp-4); }

table { width: 100%; border-collapse: collapse; }
.table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-shell); }
caption { text-align: left; color: var(--muted); font-size: var(--fs-small); padding-bottom: var(--sp-2); }
th { text-align: left; font-weight: 500; font-size: var(--fs-small); color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line-strong); }
td { padding: 10px 14px; border-bottom: 1px solid var(--line); }
[data-theme="portal"] th, [data-theme="portal"] td { padding: 8px 10px; }
th.n { text-align: right; }
td.n { text-align: right; font-family: var(--font-num); }
tr.hl td { background: var(--accent-soft); }

/* Wide tables: wrap in .table-scroll so the table scrolls inside its box instead of widening the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; border: 1px solid var(--line); border-radius: var(--r-shell); }
.table-scroll > table { min-width: 640px; }
.table-scroll > .table { border: 0; }

/* Tabs: plain text, sentence case, underline in text colour on the active tab. Scrolls sideways on narrow screens.
   RESP-001: a thin scrollbar stays visible (hidden overflow is undiscoverable) and the scroller
   does not chain horizontally to the page. */
.tabs { display: flex; gap: var(--sp-5); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; overscroll-behavior-inline: contain; }
.tab { background: none; border: 0; border-radius: 0; padding: var(--sp-2) 0; min-width: 24px; margin-bottom: -1px; color: var(--muted);
       font: 500 var(--fs-small) var(--font-ui); white-space: nowrap; cursor: pointer; border-bottom: 2px solid transparent; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"], .tab.active { color: var(--text); border-bottom-color: var(--text); }

/* Portal-only dense stat row. Do not use on public pages. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-shell); }
.stat { background: var(--surface); padding: 12px 14px; }
.stat .k { color: var(--muted); font-size: var(--fs-small); }
.stat .v { font: 500 var(--fs-xl) var(--font-num); margin-top: 2px; }
.stat .d { font-size: var(--fs-meta); margin-top: 2px; }

/* Status: shape plus colour. Filled dot = good, ring = problem. */
.ok { color: var(--ok); } .warn { color: var(--warn); } .crit { color: var(--crit); }
.dot, .ring { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot { background: var(--ok); }
.ring { border: 2px solid var(--crit); }
.ring.warn { border-color: var(--warn); }

/* Site chrome */
.site-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--line); }
.site-top .brand { font: 600 var(--fs-lg) var(--font-ui); color: var(--text); text-decoration: none; }
.site-top nav { display: flex; gap: var(--sp-5); font-size: var(--fs-small); }
.site-top nav a { color: var(--muted); text-decoration: none; }
.site-top nav a[aria-current="page"] { color: var(--text); }
[data-theme="portal"] .site-top { padding: 10px 18px; background: var(--surface); }
[data-theme="portal"] .site-top nav a[aria-current="page"] { color: var(--accent-text); }
.site-foot { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-meta); }

@media (max-width: 640px) {
  .site-top, .site-foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .site-top { flex-wrap: wrap; row-gap: var(--sp-2); }
  .site-top nav { gap: var(--sp-3); flex-wrap: wrap; }
}

/* ==========================================================================================
 * PUBLIC THEME LAYER (premium light, 2026-09-26)
 * Every selector below is wrapped in :where(:root:not([data-theme="portal"])), so it never
 * matches a portal page, and :where() keeps its specificity equal to the unwrapped rule it
 * refines (utility classes still win on the Next site). Keyframes are ca- prefixed so they
 * cannot collide with a page's own animation names.
 * ========================================================================================== */

/* Self-hosted Cabinet Grotesk variable font for the static public tools (the Next site loads
   the same file through next/font/local under its own family name, so it is never fetched
   twice there). One 42KB variable file (weights 100-900) replaces five 20KB static faces
   (PERF-001, measured 2026-09-26: 41,920 B variable vs 100,472 B static). */
@font-face { font-family: "Cabinet Grotesk"; src: url("/fonts/CabinetGrotesk-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:where(:root:not([data-theme="portal"])) body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Hero-local blueprint grid (PERF-002): painted inside .hero instead of a fixed body::before
   viewport layer. overflow: clip + contain: paint keep it confined; no page-wide repaint on
   scroll. Hidden under forced colors and reduced effects (see degradation ladder). */
:where(:root:not([data-theme="portal"])) .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 900px);
  mask-image: linear-gradient(to bottom, #000 0, transparent 900px);
}
:where(:root:not([data-theme="portal"])) .hero { position: relative; overflow: clip; isolation: isolate; }
:where(:root:not([data-theme="portal"])) ::selection { background: var(--selection-bg); color: var(--text); }

/* Headings: heavy grotesk, tight tracking */
:where(:root:not([data-theme="portal"])) :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; color: var(--text); }
:where(:root:not([data-theme="portal"])) h1 { font-weight: 900; letter-spacing: -0.04em; font-size: clamp(38px, 5.2vw, var(--fs-h1)); line-height: 1.02; }
:where(:root:not([data-theme="portal"])) h2 { font-size: clamp(28px, 3.6vw, var(--fs-2xl)); }
:where(:root:not([data-theme="portal"])) .lede { font-size: var(--fs-lg); line-height: 1.6; max-width: 52ch; }
:where(:root:not([data-theme="portal"])) .meta { color: var(--faint); }

:where(:root:not([data-theme="portal"])) a { color: var(--accent-text); transition: color var(--t-fast); }
:where(:root:not([data-theme="portal"])) a:hover { color: var(--link-hover); }
:where(:root:not([data-theme="portal"])) :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

/* Controls: 44px targets, gradient and glow on the primary. Secondary buttons carry a border
   only (VIS-001): no shadow, so the primary stays the single focal point. Control borders use
   --control-border (3.47:1, WCAG 1.4.11); --line-strong is a decorative table rule. */
:where(:root:not([data-theme="portal"])) :is(button, .btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--touch-min);
  font-weight: 700;
  background: var(--surface);
  border-color: var(--control-border);
  color: var(--text);
  text-decoration: none;
  position: relative;
  transition: border-color var(--t-base), box-shadow var(--t-base), background-color var(--t-base), color var(--t-base), transform var(--t-base);
}
:where(:root:not([data-theme="portal"])) :is(button, .btn):hover { border-color: var(--accent); color: var(--text); }
:where(:root:not([data-theme="portal"])) :is(.btn-primary, button.primary) {
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--on-grad);
  box-shadow: var(--glow-btn);
}
:where(:root:not([data-theme="portal"])) :is(.btn-primary, button.primary):hover { color: var(--on-grad); border-color: transparent; box-shadow: var(--glow-btn-hover); }
:where(:root:not([data-theme="portal"])) .btn-ghost { background: var(--surface); border-color: var(--control-border); color: var(--text); }
:where(:root:not([data-theme="portal"])) .btn-lg { min-height: 52px; padding: 0 26px; font-size: var(--fs-body); }

:where(:root:not([data-theme="portal"])) :is(input, select, textarea) {
  background: var(--surface);
  min-height: var(--touch-min);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
:where(:root:not([data-theme="portal"])) :is(input, select, textarea):focus { border-color: var(--accent); box-shadow: var(--focus-halo); }
:where(:root:not([data-theme="portal"])) :is(input[type="checkbox"], input[type="radio"]) { min-height: 0; box-shadow: none; }
:where(:root:not([data-theme="portal"])) label { color: var(--text); font-size: var(--fs-small); font-weight: 700; }

/* UX-002: complete control state matrix for the public theme. */
:where(:root:not([data-theme="portal"])) :is(input, select, textarea)::placeholder { color: var(--faint); opacity: 1; }
:where(:root:not([data-theme="portal"])) :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--crit); }
:where(:root:not([data-theme="portal"])) :is(input, select, textarea)[aria-invalid="true"]:focus { border-color: var(--crit); box-shadow: var(--focus-halo-invalid); }
:where(:root:not([data-theme="portal"])) :is(input, select, textarea)[readonly] { background: var(--surface-2); }
:where(:root:not([data-theme="portal"])) :is(input, select, textarea):disabled { opacity: 0.5; cursor: not-allowed; }
:where(:root:not([data-theme="portal"])) input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40em var(--surface) inset; }
:where(:root:not([data-theme="portal"])) :is(button, .btn)[aria-busy="true"] { cursor: progress; color: transparent; }
:where(:root:not([data-theme="portal"])) :is(button, .btn)[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: ca-spin 700ms linear infinite;
}
/* 44px label hit area for checkboxes and radios; the visual mark stays small. */
:where(:root:not([data-theme="portal"])) label:has(> input[type="checkbox"]),
:where(:root:not([data-theme="portal"])) label:has(> input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  cursor: pointer;
}

/* Panels, cards and tables: white on white, lifted by a line and a soft navy shadow */
:where(:root:not([data-theme="portal"])) .panel { border-color: var(--line); padding: var(--sp-5); box-shadow: var(--shadow-sm); border-radius: var(--r-panel); }
:where(:root:not([data-theme="portal"])) .card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
/* UX-001: only explicitly interactive cards lift and glow. Static cards stay visually stable. */
:where(:root:not([data-theme="portal"])) :is(.card--interactive, .card-glow):hover { border-color: var(--border-glow); box-shadow: var(--shadow-md); }
/* Gradient border: white fill on the padding box, cyan-to-mint on the border box */
:where(:root:not([data-theme="portal"])) .card-glow {
  border-color: transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-border) border-box;
  box-shadow: var(--shadow-md), var(--glow-sm);
}
:where(:root:not([data-theme="portal"])) .card-glow:hover { border-color: transparent; box-shadow: var(--shadow-lg), var(--glow); }

:where(:root:not([data-theme="portal"])) .table { border-color: var(--line); overflow: hidden; box-shadow: var(--shadow-sm); }
:where(:root:not([data-theme="portal"])) th {
  font: 500 12px/1.4 var(--font-num);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  background: var(--surface-2);
  border-bottom-color: var(--line-strong);
}
:where(:root:not([data-theme="portal"])) td { border-bottom-color: var(--line); }
:where(:root:not([data-theme="portal"])) tbody tr:last-child td { border-bottom: 0; }
:where(:root:not([data-theme="portal"])) tbody tr { transition: background-color var(--t-fast); }
:where(:root:not([data-theme="portal"])) tbody tr:hover td { background: var(--row-hover); }
:where(:root:not([data-theme="portal"])) caption { font: 500 12px/1.4 var(--font-num); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
:where(:root:not([data-theme="portal"])) .table-scroll { border-color: var(--line); }

/* Tabs: pill chips, the active one tinted */
:where(:root:not([data-theme="portal"])) .tabs { gap: var(--sp-2); border-bottom: 0; padding-bottom: 2px; }
:where(:root:not([data-theme="portal"])) .tab {
  min-height: var(--touch-min);
  padding: 0 var(--sp-4);
  margin: 0;
  border: 1px solid var(--control-border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  box-shadow: none;
  font: 500 var(--fs-small) var(--font-num);
}
:where(:root:not([data-theme="portal"])) .tab:hover { color: var(--text); border-color: var(--accent); box-shadow: none; }
:where(:root:not([data-theme="portal"])) :is(.tab[aria-selected="true"], .tab.active) {
  color: var(--accent-text);
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--glow-sm);
}

/* Labels, chips, gradient text */
:where(:root:not([data-theme="portal"])) .section-label {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: 500 12px/1.4 var(--font-num);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}
:where(:root:not([data-theme="portal"])) .section-label::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--grad-edge); }
:where(:root:not([data-theme="portal"])) .eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 32px; padding: 0 var(--sp-3);
  border: 1px solid var(--border-glow);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-text);
  box-shadow: var(--shadow-sm);
  font: 500 12px/1 var(--font-num);
}
:where(:root:not([data-theme="portal"])) .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--chip-border);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font: 500 12px/1.5 var(--font-num);
}
:where(:root:not([data-theme="portal"])) .chip-mint { color: var(--mint-text); border-color: var(--chip-mint-border); background: var(--chip-mint-bg); }
:where(:root:not([data-theme="portal"])) .chip-violet { color: var(--violet-text); border-color: var(--chip-violet-border); background: var(--chip-violet-bg); }
:where(:root:not([data-theme="portal"])) .chip-amber { color: var(--amber-text); border-color: var(--chip-amber-border); background: var(--chip-amber-bg); }
:where(:root:not([data-theme="portal"])) .text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:where(:root:not([data-theme="portal"])) .pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pulse-dot); box-shadow: var(--pulse-dot-halo); }

/* Terminal (hero): a dark code card on the light page */
:where(:root:not([data-theme="portal"])) .terminal {
  background: var(--terminal);
  border: 1px solid var(--terminal-border);
  border-radius: var(--r-shell);
  overflow: hidden;
  box-shadow: var(--shadow-lg), var(--terminal-shadow);
  font: 13px/1.85 var(--font-num);
  color: var(--term-dim);
}
:where(:root:not([data-theme="portal"])) .terminal__bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--terminal-bar); border-bottom: 1px solid var(--terminal-border); }
:where(:root:not([data-theme="portal"])) .terminal__dot { width: 10px; height: 10px; border-radius: 50%; }
:where(:root:not([data-theme="portal"])) .terminal__title { margin-left: auto; font-size: 12px; color: var(--term-dim); }
:where(:root:not([data-theme="portal"])) .terminal__body { padding: var(--sp-4) var(--sp-5); overflow-x: auto; }
:where(:root:not([data-theme="portal"])) .terminal__line { white-space: pre; }
:where(:root:not([data-theme="portal"])) .t-cmd { color: var(--term-cmd); }
:where(:root:not([data-theme="portal"])) .t-ok { color: var(--term-ok); }
:where(:root:not([data-theme="portal"])) .t-key { color: var(--term-key); }
:where(:root:not([data-theme="portal"])) .t-cursor { display: inline-block; width: 8px; height: 15px; background: var(--term-cmd); vertical-align: middle; margin-left: 2px; }

/* Floating orbs: soft tinted blobs, CSS only */
:where(:root:not([data-theme="portal"])) .orb { position: absolute; border-radius: 50%; pointer-events: none; }
:where(:root:not([data-theme="portal"])) .orb-cyan { background: var(--orb-cyan); }
:where(:root:not([data-theme="portal"])) .orb-mint { background: var(--orb-mint); }
:where(:root:not([data-theme="portal"])) .orb-violet { background: var(--orb-violet); }

/* App chrome (static public tools): white glass header. Opaque by default; blur only where
   the browser supports it (PERF-003), so unsupported browsers keep a solid readable bar. */
:where(:root:not([data-theme="portal"])) .site-top {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom-color: var(--glass-border);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  :where(:root:not([data-theme="portal"])) .site-top {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
}
:where(:root:not([data-theme="portal"])) .site-top .brand { font-weight: 900; letter-spacing: -0.03em; }
:where(:root:not([data-theme="portal"])) .site-top nav a { display: inline-flex; align-items: center; min-height: var(--touch-min); }
:where(:root:not([data-theme="portal"])) .site-top nav a:hover { color: var(--text); }
:where(:root:not([data-theme="portal"])) .site-foot { border-top-color: var(--line); }

/* PERF-005: opt-in offscreen rendering for long, static, below-the-fold sections or large
   result groups. Never on the hero, sticky/fixed elements, virtualized lists, route
   transition roots, or elements measured synchronously by JavaScript. Set a per-component
   intrinsic size by overriding --cv-h when 700px is inaccurate. */
.cv-auto { content-visibility: auto; contain-intrinsic-size: auto var(--cv-h, 700px); }

/* Motion layer (PERF-004 + A11Y-003). Branded motion runs only when the visitor allows it;
   hover-only transforms and shadow lifts additionally require a fine hovering pointer, so
   touch devices never execute hover visual work. Transform and opacity only. Reveals are
   opt-in: the hidden start state needs html.ca-reveal, which the site's boot script sets,
   so content is never hidden when JS does not run. Ambient animation pauses when the hero
   leaves the viewport or the tab is hidden (classes set by components/SiteEffects.tsx). */
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    :where(:root:not([data-theme="portal"])) :is(.btn-primary, button.primary):hover { transform: translateY(-1px); }
    :where(:root:not([data-theme="portal"])) :is(.card--interactive, .card-glow):hover { transform: translateY(-2px); }
  }
  :where(:root:not([data-theme="portal"])) :is(.card--interactive, .card-glow):active { border-color: var(--accent); box-shadow: var(--shadow-sm); }

  :where(:root.ca-reveal:not([data-theme="portal"])) .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--t-reveal), transform var(--t-reveal);
    transition-delay: calc(var(--reveal-i, 0) * var(--stagger));
  }
  :where(:root.ca-reveal:not([data-theme="portal"])) .reveal.is-visible { opacity: 1; transform: none; }
  :where(:root:not([data-theme="portal"])) .reveal-delay-1 { --reveal-i: 1; }
  :where(:root:not([data-theme="portal"])) .reveal-delay-2 { --reveal-i: 2; }
  :where(:root:not([data-theme="portal"])) .reveal-delay-3 { --reveal-i: 3; }
  :where(:root:not([data-theme="portal"])) .reveal-delay-4 { --reveal-i: 4; }

  /* Pulse dots are static by default (PERF-004); reserve the animation for genuinely live state. */
  :where(:root:not([data-theme="portal"])) .pulse-dot--live { animation: ca-pulse-dot 2s ease-in-out infinite; }
  :where(:root:not([data-theme="portal"])) .orb { animation: ca-float-orb 10s ease-in-out infinite; }
  :where(:root:not([data-theme="portal"])) .orb-mint { animation-duration: 14s; animation-direction: reverse; }
  :where(:root:not([data-theme="portal"])) .terminal { animation: ca-terminal-appear 600ms cubic-bezier(0.22, 1, 0.36, 1) 150ms both; }
  :where(:root:not([data-theme="portal"])) .terminal__line { animation: ca-line-in 300ms ease both; animation-delay: calc(500ms + var(--i, 0) * 280ms); }
  :where(:root:not([data-theme="portal"])) .t-cursor { animation: ca-blink 1s step-end infinite; }

  /* PERF-004: nothing animates while the hero is offscreen or the tab is hidden. */
  :where(:root.ca-hero-offscreen:not([data-theme="portal"])) .orb,
  :where(:root.ca-hero-offscreen:not([data-theme="portal"])) .t-cursor { animation-play-state: paused; }
  :where(:root.ca-hidden:not([data-theme="portal"])) .orb,
  :where(:root.ca-hidden:not([data-theme="portal"])) .t-cursor { animation-play-state: paused; }
}
@keyframes ca-pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.75; } }
@keyframes ca-float-orb { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, -20px, 0) scale(1.05); } }
@keyframes ca-terminal-appear { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ca-line-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes ca-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ca-spin { to { transform: rotate(360deg); } }

/* A11Y-003: theme-scoped reduced-motion reset (no global wildcard), pseudo-elements included.
   Both themes load this sheet, so each gets its own explicit reset; reveal content is forced
   visible in case any start state leaked in through a class added before the preference read. */
@media (prefers-reduced-motion: reduce) {
  :where(:root:not([data-theme="portal"])) :where(*, *::before, *::after),
  :where(:root[data-theme="portal"]) :where(*, *::before, *::after) { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  :where(:root.ca-reveal) .reveal { opacity: 1 !important; transform: none !important; }
}

/* A11Y-002: forced colors (Windows High Contrast). System colors replace brand paints;
   decoration is dropped; every control stays visible with a system border. */
@media (forced-colors: active) {
  :where(:root:not([data-theme="portal"])) .text-gradient { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
  :where(:root:not([data-theme="portal"])) :is(.btn-primary, button.primary) { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; box-shadow: none; }
  :where(:root:not([data-theme="portal"])) :is(button, .btn, .tab, .chip, .eyebrow) { border-color: ButtonText; box-shadow: none; }
  :where(:root:not([data-theme="portal"])) :is(input, select, textarea) { background: Field; color: FieldText; border-color: ButtonText; }
  :where(:root:not([data-theme="portal"])) .card, :where(:root:not([data-theme="portal"])) .panel { background: Canvas; border-color: CanvasText; box-shadow: none; }
  :where(:root:not([data-theme="portal"])) .card-glow { background: Canvas; border-color: CanvasText; }
  :where(:root:not([data-theme="portal"])) :is(.orb, .pulse-dot, .accent-bar, .kind-card::before, .hero::before) { display: none; }
  :where(:root:not([data-theme="portal"])) :is(.site-top, .cta-bar, .glass-nav) { background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; }
  :where(:root:not([data-theme="portal"])) :is(.tab[aria-selected="true"], .tab.active) { border-color: Highlight; color: CanvasText; background: Canvas; }
  :where(:root:not([data-theme="portal"])) .terminal { background: Canvas; color: CanvasText; border: 1px solid CanvasText; box-shadow: none; }
  :where(:root:not([data-theme="portal"])) :is(.t-cmd, .t-ok, .t-key, .terminal__title) { color: CanvasText; }
  :where(:root:not([data-theme="portal"])) :is(.chip, .chip-mint, .chip-violet, .chip-amber) { background: Canvas; color: CanvasText; }
  :where(:root:not([data-theme="portal"])) :is(.ok, .warn, .crit) { color: CanvasText; }
}

/* Degradation ladder: reduced transparency, slow updates, and the explicit .reduce-effects
   mode drop blur, glow, ambient animation, and fixed decoration. */
@media (prefers-reduced-transparency: reduce) {
  :where(:root:not([data-theme="portal"])) :is(.site-top, .glass-nav, .cta-bar) { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (update: slow) {
  :where(:root:not([data-theme="portal"])) :is(.orb, .hero::before, .pulse-dot--live) { display: none; }
  :where(:root:not([data-theme="portal"])) :is(.site-top, .glass-nav, .cta-bar) { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
:where(:root.reduce-effects:not([data-theme="portal"])) :is(.orb, .hero::before, .pulse-dot--live) { display: none; }
:where(:root.reduce-effects:not([data-theme="portal"])) :is(.site-top, .glass-nav, .cta-bar) { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root.reduce-effects:not([data-theme="portal"])) :is(.btn-primary, .card-glow, .frame, .cta-panel, .brand-mark__icon, .step-bubble) { box-shadow: none; }

/* Print: no sticky/fixed UI, no decoration, high-contrast text. */
@media print {
  :where(:root:not([data-theme="portal"])) :is(.site-top, .glass-nav, .cta-bar, .cta-bar-spacer, .skip-link, .frame) { display: none !important; }
  :where(:root:not([data-theme="portal"])) :is(.orb, .hero::before, .accent-bar, .pulse-dot) { display: none; }
  :where(:root:not([data-theme="portal"])) body { background: var(--print-paper); color: var(--print-ink); }
  :where(:root:not([data-theme="portal"])) a { color: var(--print-ink); text-decoration: underline; }
  :where(:root:not([data-theme="portal"])) .section { padding: 24px 0; border-top: 1px solid var(--print-ink); }
}