/* ═══════════════════════════════════════════════════════════════════════════
   QUANTUM Hera — PS5 Cosmic design system
   XOVEREIGN Technologies, a division of White Crown Enterprises.
   © 2026 White Crown Enterprises. All rights reserved.

   ENGINEERING NOTES — kept in the file because the next reader needs them.

   1. SILVER / PLATINUM / BLUE ONLY. There is no gold, no amber, no green and
      no red anywhere in this palette, including the tier accents. The tiers
      are named after gemstones; they are COLOURED as a single cold luminosity
      ramp that climbs from dim steel at Level 1 to bright platinum at Level 7,
      so "higher tier" is legible as "brighter" without a hue ever leaving the
      brand. Do not reintroduce gem-literal hues.

   2. THREE DIMENSIONS, ZERO WEBGL. Every 3D element is CSS: `perspective` on
      the stage, `transform-style: preserve-3d` on the carrier, `rotateX/Y` +
      `translateZ` on the faces. No canvas, no WebGL, no geometry library.

   3. NEVER PUT A FILTER ON A 3D ANCESTOR. `filter` and `backdrop-filter`
      create a containing block that FLATTENS `preserve-3d` for every
      descendant — the cube collapses into a flat card the moment a blur lands
      on a parent. Glass surfaces that do use backdrop-filter (the masthead,
      the cube dock's own backdrop) are deliberately outside the 3D scene and
      have no 3D children of their own.

   4. RESOLUTION. Every mark is vector — inline SVG on integer viewBoxes, and
      CSS gradients. Both are resampled by the compositor at the device's own
      pixel density, so the page is authored once and is pixel-exact at 4K
      (3840x2160), 5K (5120x2880) and beyond. There is no raster asset in this
      product, so there is no resolution to outgrow.

   5. TAP TARGETS. Every interactive element is at least 48px on its primary
      axis. Where a control is deliberately narrower (the cube's face dots),
      the 48px is carried on the other axis and the narrow axis is never below
      26px, which keeps a row of them inside a 44px-diagonal contact patch.

   6. NO THIRD-PARTY ANYTHING. No fonts, scripts, styles, analytics, frames or
      images load from any origin. Zero network dependencies; renders offline.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. TOKENS
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces — near-black voids with a blue bias, never neutral grey */
  --void: #04060f;
  --deep: #070b1a;
  --ink: #0b1226;
  --raise: #111a33;
  --raise-2: #16203f;

  --line: rgba(140, 170, 255, 0.16);
  --line-strong: rgba(150, 180, 255, 0.34);

  /* Type — platinum through steel */
  --text: #eaf0ff;
  --platinum: #dfe7f6;
  --silver: #b9c6de;
  --muted: #aebcdc;
  --dim: #8d9bc0;
  --steel: #7d8cae;

  /* Accents — blue only */
  --blue: #4da3ff;
  --blue-soft: #7aa2ff;
  --blue-deep: #2f6fd0;
  --ice: #9fe8ff;
  --focus: #9fe8ff;

  /* Semantic status — expressed in the blue/silver ramp plus shape + text,
     never colour alone. Every status pill carries a word and an icon. */
  --ok: #7aa2ff;
  --warn: #b9c6de;
  --bad: #eef3fb;

  /* Tier accent ramp — one cold ladder, brightness = level */
  --tier-1: #6f7f9c;
  --tier-2: #4f86c8;
  --tier-3: #4da3ff;
  --tier-4: #79b9ff;
  --tier-5: #9fe8ff;
  --tier-6: #c9d6ea;
  --tier-7: #eef3fb;

  /* Per-section accent, re-declared by each section */
  --hue: #7aa2ff;

  /* Type ramp — clamp() so one ramp serves phone through 4K */
  --t-display: clamp(2.6rem, 7vw, 6rem);
  --t-h1: clamp(2rem, 5vw, 4rem);
  --t-h2: clamp(1.7rem, 3.4vw, 2.8rem);
  --t-h3: clamp(1.18rem, 1.9vw, 1.55rem);
  --t-lede: clamp(1.05rem, 1.5vw, 1.38rem);
  --t-body: clamp(1rem, 1.1vw, 1.12rem);
  --t-small: clamp(0.9rem, 0.98vw, 1rem);
  /* Micro-labels floored at 12.8px so no tracked uppercase key on this
     product can drift under the legibility line on a phone. */
  --t-label: clamp(0.8rem, 0.88vw, 0.9rem);

  /* Rhythm */
  --gut: clamp(1.2rem, 3.4vw, 2.6rem);
  --band: clamp(4.5rem, 11vh, 8rem);
  --shell: min(1320px, 92vw);
  --shell-narrow: min(880px, 92vw);

  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 9px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas,
    "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
    "Helvetica Neue", Arial, sans-serif;

  color-scheme: dark;
}

/* ───────────────────────────────────────────────────────────────────────────
   2. RESET + BASE
   ─────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* `hidden` is an attribute and loses every specificity fight with a class that
   sets display. Win it once, here, so `el.hidden = true` is always obeyed. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  /* Declare the colour, not only the gradient: a gradient alone leaves the
     canvas transparent in any context that cannot paint it. */
  background-color: var(--void);
  background-image:
    radial-gradient(1200px 700px at 78% -8%, rgba(77, 163, 255, 0.14), transparent 62%),
    radial-gradient(900px 620px at 8% 12%, rgba(122, 162, 255, 0.10), transparent 60%),
    radial-gradient(1000px 900px at 50% 108%, rgba(159, 232, 255, 0.07), transparent 64%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; line-height: 1.14; font-weight: 800; letter-spacing: -0.015em; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.005em; }
p { margin: 0 0 1em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--ice); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: 0.35em; }

button, input, select, textarea { font: inherit; color: inherit; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--gut) 0;
}

code, kbd, samp, pre { font-family: var(--mono); }

/* One focus ring for the whole product. Visible against every surface. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(122, 162, 255, 0.35); color: #fff; }

/* ───────────────────────────────────────────────────────────────────────────
   3. ACCESSIBILITY PRIMITIVES
   ─────────────────────────────────────────────────────────────────────────── */

/* Visually hidden but read. Never `display:none` — that removes it from the
   accessibility tree, which is the opposite of the intent. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* LIVE REGIONS.
   Two regions per politeness level, written alternately. One region written
   twice with the same string is a no-op after the DOM diff and announces
   nothing; clear-then-write in the SAME region inside one frame is coalesced
   by the diff and also announces nothing. Alternating between two regions
   sidesteps both. The regions are `.sr-only` — NOT `aria-live` on a clipped
   element that is also `hidden`, which hides the element from the a11y tree
   and silences it entirely. */
.live-region {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 999;
  display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 20px;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #04060f;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: top 0.18s var(--ease);
}
.skip-link:focus {
  top: 12px;
  color: #04060f;
}

/* ───────────────────────────────────────────────────────────────────────────
   4. LAYOUT
   ─────────────────────────────────────────────────────────────────────────── */
.shell { width: var(--shell); margin-inline: auto; }
.shell-narrow { width: var(--shell-narrow); margin-inline: auto; }

.band { padding-block: var(--band); }
.band-tight { padding-block: clamp(2.5rem, 6vh, 4rem); }

.band + .band { border-top: 1px solid var(--line); }

.stack > * + * { margin-top: var(--gut); }

.grid { display: grid; gap: clamp(14px, 1.8vw, 22px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

/* ───────────────────────────────────────────────────────────────────────────
   5. TYPE UTILITIES
   ─────────────────────────────────────────────────────────────────────────── */
.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hue);
  margin-bottom: 0.9em;
}

.lede {
  font-size: var(--t-lede);
  color: var(--muted);
  line-height: 1.55;
  max-width: 62ch;
}

.small { font-size: var(--t-small); color: var(--dim); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

.display {
  font-size: var(--t-display);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0 0 0.28em;
  background: linear-gradient(168deg, #ffffff 0%, var(--platinum) 34%, var(--blue-soft) 78%, var(--blue-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* If background-clip:text is unsupported the gradient would paint over the
     glyphs and the headline would vanish. This fallback keeps it readable. */
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .display { background: none; color: var(--text); -webkit-text-fill-color: currentColor; }
}

/* ───────────────────────────────────────────────────────────────────────────
   6. SURFACES
   ─────────────────────────────────────────────────────────────────────────── */
.card {
  position: relative;
  background-color: rgba(11, 18, 38, 0.72);
  background-image: linear-gradient(158deg, rgba(122, 162, 255, 0.07) 0%, transparent 58%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(18px, 2.2vw, 28px);
}

.card-lift {
  transition: border-color 0.24s var(--ease), transform 0.24s var(--ease), box-shadow 0.24s var(--ease);
}
.card-lift:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .card-lift:hover { transform: none; }
}

.panel {
  background-color: rgba(7, 11, 26, 0.8);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(18px, 2.2vw, 26px);
}

.rule-note {
  border-left: 1px solid rgba(122, 162, 255, 0.45);
  padding: 2px 0 2px 14px;
  color: var(--muted);
  font-size: var(--t-small);
}

/* ───────────────────────────────────────────────────────────────────────────
   7. CONTROLS
   ─────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background-color: rgba(122, 162, 255, 0.10);
  color: var(--text);
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover:not(:disabled) {
  background-color: rgba(122, 162, 255, 0.2);
  border-color: var(--blue-soft);
  color: #fff;
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.btn-primary {
  background-color: var(--blue);
  border-color: var(--blue);
  color: #04060f;
}
.btn-primary:hover:not(:disabled) {
  background-color: #6fb8ff;
  border-color: #6fb8ff;
  color: #04060f;
}

.btn-quiet {
  background-color: transparent;
  border-color: var(--line);
  color: var(--muted);
}
.btn-quiet:hover:not(:disabled) { color: #fff; background-color: rgba(122, 162, 255, 0.09); }

.btn-danger {
  background-color: transparent;
  border-color: rgba(223, 231, 246, 0.5);
  color: var(--platinum);
}
.btn-danger:hover:not(:disabled) {
  background-color: rgba(223, 231, 246, 0.14);
  border-color: var(--platinum);
  color: #fff;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.field { display: block; margin-bottom: 16px; }
.field > .field-label {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.field-hint {
  display: block;
  font-size: var(--t-small);
  color: var(--dim);
  margin-top: 6px;
}
.field-error {
  display: block;
  font-size: var(--t-small);
  color: var(--platinum);
  margin-top: 7px;
  font-weight: 700;
}

input[type="text"], input[type="password"], input[type="number"], input[type="email"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background-color: rgba(4, 6, 15, 0.75);
  color: var(--text);
  font-size: var(--t-body);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--steel); }
input:hover, select:hover, textarea:hover { border-color: var(--blue-soft); }
input[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--platinum);
  border-width: 2px;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--silver) 50%),
                    linear-gradient(135deg, var(--silver) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* ───────────────────────────────────────────────────────────────────────────
   8. TABLES
   ─────────────────────────────────────────────────────────────────────────── */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: rgba(7, 11, 26, 0.6);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  min-width: 560px;
}
caption {
  text-align: left;
  padding: 14px 18px 0;
  color: var(--muted);
  font-size: var(--t-small);
}
th, td {
  text-align: left;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
thead th {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver);
  background-color: rgba(17, 26, 51, 0.6);
  white-space: nowrap;
}
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 800; color: var(--text); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }

/* ───────────────────────────────────────────────────────────────────────────
   9. STATUS PILLS — colour is never the only channel
   ─────────────────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background-color: rgba(122, 162, 255, 0.08);
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver);
  white-space: nowrap;
}
.pill svg { width: 13px; height: 13px; flex: 0 0 auto; }
.pill-ok { color: var(--blue-soft); border-color: rgba(122, 162, 255, 0.55); }
.pill-warn { color: var(--platinum); border-color: rgba(223, 231, 246, 0.5); background-color: rgba(223, 231, 246, 0.07); }
.pill-bad {
  color: #04060f;
  background-color: var(--platinum);
  border-color: var(--platinum);
}

/* ───────────────────────────────────────────────────────────────────────────
   10. MASTHEAD — glass, deliberately outside every 3D scene
   ─────────────────────────────────────────────────────────────────────────── */
.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background-color: rgba(4, 6, 15, 0.88);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.masthead-inner {
  width: var(--shell);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 66px;
  padding-block: 8px;
  flex-wrap: wrap;
}
.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  text-decoration: none;
  color: var(--text);
  flex: 0 0 auto;
}
.brandmark svg { width: 30px; height: 30px; flex: 0 0 auto; }
.brandmark-text { display: flex; flex-direction: column; line-height: 1.1; }
.brandmark-name {
  font-weight: 900;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
}
.brandmark-sub {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
}
.masthead-nav { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.masthead-nav a, .masthead-nav button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 13px;
  border-radius: var(--radius-xs);
  border: 0;
  background: none;
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.masthead-nav a:hover, .masthead-nav button:hover { color: #fff; background-color: rgba(122, 162, 255, 0.12); }
.masthead-nav a[aria-current="page"] {
  color: #fff;
  background-color: rgba(122, 162, 255, 0.16);
  box-shadow: inset 0 -2px 0 var(--blue);
}

/* On a phone the nav wrapped to two rows, which put a 180px sticky header on
   top of a 260px fixed dock and left less than half the screen for the
   document. One scrollable row instead: the links keep their full 48px height
   and stay reachable, and the header holds at about 115px. The scroll
   container is the nav itself, so the page body still never scrolls
   horizontally. */
@media (max-width: 720px) {
  .masthead-inner {
    gap: 8px;
    padding-block: 6px;
  }
  .masthead-nav {
    margin-left: 0;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .masthead-nav a, .masthead-nav button { flex: 0 0 auto; }
}

/* ───────────────────────────────────────────────────────────────────────────
   11. FOOTER
   ─────────────────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  background-color: rgba(4, 6, 15, 0.72);
  padding-block: clamp(2.4rem, 5vh, 3.6rem);
  /* Clears the fixed cube dock so the last line of the page is never hidden
     under it. The value is written by JS from the dock's measured height. */
  padding-bottom: calc(clamp(2.4rem, 5vh, 3.6rem) + var(--dock-h, 0px));
}
.footer-grid {
  display: grid;
  gap: var(--gut);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.footer-title {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 12px;
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin: 0; }
.footer-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
  font-size: var(--t-small);
}
.footer-list a:hover { color: #fff; text-decoration: underline; }
.legal {
  margin-top: var(--gut);
  padding-top: var(--gut);
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: var(--t-small);
}

/* ───────────────────────────────────────────────────────────────────────────
   12. DEFINITION ROWS / SPEC LISTS
   ─────────────────────────────────────────────────────────────────────────── */
.spec {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 4px 16px;
  margin: 0;
  font-size: var(--t-small);
}
.spec dt {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
  padding-block: 6px;
  border-top: 1px solid var(--line);
}
.spec dd {
  margin: 0;
  padding-block: 6px;
  border-top: 1px solid var(--line);
  color: var(--text);
}
.spec dt:first-of-type, .spec dt:first-of-type + dd { border-top: 0; }

/* ───────────────────────────────────────────────────────────────────────────
   13. STAT TILES
   ─────────────────────────────────────────────────────────────────────────── */
.stat {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: rgba(11, 18, 38, 0.6);
  padding: 16px 18px;
}
.stat-key {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 6px;
}
.stat-value {
  display: block;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat-note { display: block; font-size: var(--t-small); color: var(--dim); margin-top: 5px; }

/* ───────────────────────────────────────────────────────────────────────────
   14. METERS — a real <progress>-free bar with text always present
   ─────────────────────────────────────────────────────────────────────────── */
.meter {
  height: 8px;
  border-radius: 999px;
  background-color: rgba(122, 162, 255, 0.14);
  overflow: hidden;
  border: 1px solid var(--line);
}
.meter-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background-image: linear-gradient(90deg, var(--blue-deep), var(--blue), var(--ice));
  transition: width 0.5s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) { .meter-fill { transition: none; } }

/* ───────────────────────────────────────────────────────────────────────────
   15. CODE BLOCKS
   ─────────────────────────────────────────────────────────────────────────── */
.code {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: rgba(4, 6, 15, 0.86);
  overflow: hidden;
}
.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 6px 16px;
  border-bottom: 1px solid var(--line);
  background-color: rgba(17, 26, 51, 0.6);
}
.code-lang {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
}
.code pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.62;
  color: var(--platinum);
  tab-size: 2;
}
.code pre code { color: inherit; background: none; padding: 0; }

/* ───────────────────────────────────────────────────────────────────────────
   16. TABS (API docs + dashboard sub-navigation)
   ─────────────────────────────────────────────────────────────────────────── */
.tablist {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--gut);
}
.tab {
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  background: none;
  color: var(--muted);
  font-weight: 700;
  font-size: var(--t-small);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.tab:hover { color: #fff; }
.tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--blue); }

/* ───────────────────────────────────────────────────────────────────────────
   17. TIER ACCENT HOOK
   ─────────────────────────────────────────────────────────────────────────── */
[data-tier="1"] { --hue: var(--tier-1); }
[data-tier="2"] { --hue: var(--tier-2); }
[data-tier="3"] { --hue: var(--tier-3); }
[data-tier="4"] { --hue: var(--tier-4); }
[data-tier="5"] { --hue: var(--tier-5); }
[data-tier="6"] { --hue: var(--tier-6); }
[data-tier="7"] { --hue: var(--tier-7); }

/* ───────────────────────────────────────────────────────────────────────────
   18. 4K / 5K — fill the panel rather than stretch it
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 2560px) {
  :root {
    --shell: min(1720px, 88vw);
    --shell-narrow: min(1060px, 88vw);
    --t-body: 1.2rem;
    --t-small: 1.06rem;
    --t-label: 0.98rem;
  }
}
@media (min-width: 3400px) {
  :root {
    --shell: min(2200px, 84vw);
    --shell-narrow: min(1280px, 84vw);
    --t-body: 1.4rem;
    --t-small: 1.2rem;
    --t-label: 1.08rem;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   18b. HERA MARK — compact inline brand component
   ───────────────────────────────────────────────────────────────────────────
   One primitive, four voices (platinum / purple-gold alloy / amethyst recess /
   gold stellar heart), identical to the v8.1 reference at
   /brand/hera-logo.html but authored at the sizes used in page chrome and the
   hero. Pure CSS, no SVG, no runtime dependency, scales to any pixel density.
   Scale by setting `font-size` on the .hera-mark element (or by setting the
   custom property `--mark-size`, which the component uses as its font-size).
   Every internal measurement is in em so one knob tunes the whole mark. */
.hera-mark {
  position: relative;
  display: inline-block;
  width: 1em; height: 1em;
  font-size: var(--mark-size, 40px);
  flex: 0 0 auto;
  vertical-align: middle;
  color: transparent;
}
.hera-mark .hm-ring {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  -webkit-mask-image: linear-gradient(to right,#000 0 30%,transparent 30% 70%,#000 70% 100%);
          mask-image: linear-gradient(to right,#000 0 30%,transparent 30% 70%,#000 70% 100%);
}
.hera-mark .hm-r1 {
  width: 0.96em; height: 0.96em;
  border: 0.07em solid transparent;
  background:
    linear-gradient(#120520,#120520) padding-box,
    linear-gradient(180deg,#f8f6ee 0%,#e5e2d4 40%,#d4d1c4 70%,#9c9a8e 100%) border-box;
  box-shadow:
    inset 0 0 0 0.015em rgba(248,246,238,0.95),
    inset 0 0 0 0.04em rgba(176,136,192,0.55);
}
.hera-mark .hm-r2 {
  width: 0.74em; height: 0.74em;
  border: 0.022em solid transparent;
  background:
    linear-gradient(#120520,#120520) padding-box,
    linear-gradient(180deg,#f8f6ee,#d4d1c4 70%,#9c9a8e) border-box;
}
.hera-mark .hm-r3 {
  width: 0.52em; height: 0.52em;
  border: 0.022em solid transparent;
  background:
    linear-gradient(#120520,#120520) padding-box,
    linear-gradient(180deg,#f8f6ee,#d4d1c4 70%,#9c9a8e) border-box;
}
.hera-mark .hm-r4 {
  width: 0.34em; height: 0.34em;
  border: 0.022em solid transparent;
  background:
    linear-gradient(#120520,#120520) padding-box,
    linear-gradient(180deg,#f8f6ee,#e5e2d4 60%,#9c9a8e) border-box;
  box-shadow:
    0 0 0 0.025em rgba(229,188,240,0.55),
    0 0 0.22em rgba(192,141,200,0.4),
    0 0 0.4em rgba(255,228,180,0.12);
}
.hera-mark .hm-bar {
  position: absolute; top: 50%; left: 50%;
  width: 0.46em; height: 0.065em;
  transform: translate(-50%,-50%);
  background: linear-gradient(180deg,#f8f6ee 0%,#e5e2d4 50%,#9c9a8e 100%);
  border-radius: 0.012em;
  box-shadow:
    inset 0 0.01em 0 rgba(255,255,255,0.9),
    inset 0 -0.01em 0 rgba(45,16,53,0.6),
    0 0 0.14em rgba(255,228,180,0.2);
}
.hera-mark .hm-star {
  position: absolute; top: 50%; left: 50%;
  width: 0.26em; height: 0.26em;
  transform: translate(-50%,-50%);
  clip-path: polygon(50% 2%,61.8% 35.3%,97.6% 35.3%,68.5% 57.4%,79.4% 90.8%,50% 70%,20.6% 90.8%,31.5% 57.4%,2.4% 35.3%,38.2% 35.3%);
  background:
    radial-gradient(ellipse 70% 50% at 50% 22%,
      rgba(255,212,240,0.85) 0%,rgba(255,212,240,0.25) 30%,transparent 55%),
    radial-gradient(circle at 50% 50%,
      #ffffff 0%,#fffaf0 6%,#fff4c9 14%,#f6e8b2 26%,#d4af37 44%,
      #8b6914 70%,#9c5b9a 82%,#7a3b82 100%);
  filter: drop-shadow(0 0 0.03em rgba(255,228,180,0.8));
}
.hera-mark .hm-star::after {
  content: "H";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight: 700;
  font-size: 0.1em;              /* 0.1 * star 0.26em = ~2.6% of mark size */
  line-height: 1;
  color: #fff4c9;
  text-shadow: 0 0 0.3em rgba(255,255,255,0.98);
  letter-spacing: -0.02em;
}
.hera-mark-lg  { --mark-size: 220px; }
.hera-mark-xl  { --mark-size: 420px; }

/* Hero block that frames the mark on the landing page. */
.hera-hero-mark {
  display: flex; justify-content: center; align-items: center;
  padding: 28px 0 36px;
  filter: drop-shadow(0 10px 40px rgba(120,80,170,0.3));
}

/* ───────────────────────────────────────────────────────────────────────────
   19. PRINT — the compliance report has to survive a printer
   ─────────────────────────────────────────────────────────────────────────── */
@media print {
  body { background: #fff; color: #000; }
  .masthead, .site-footer, .xcube-dock, .skip-link, .btn { display: none !important; }
  .card, .panel, .table-scroll { border-color: #999; background: #fff; }
  * { color: #000 !important; }
}