/* ============================================================================
   FBRE.uk v2 stylesheet.  Dark first, Linear-tier.  Zero frameworks.
   Tokens -> Reset -> Type -> Components -> Hero -> Sections -> Compat.
   ============================================================================ */

:root {
  --bg-canvas: #08080b;
  --bg-elev-1: #0d0d12;
  --bg-elev-2: #14141a;
  --bg-elev-3: #1c1c24;
  --bg-inset: #050507;

  --ink-primary: #f4f4f6;
  --ink-secondary: #b4b4bd;
  --ink-tertiary: #7e7e8a;
  --ink-quaternary: #54545e;
  --ink-inverse: #08080b;

  --line-faint: rgba(255, 255, 255, 0.04);
  --line-soft: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --line-bright: rgba(255, 255, 255, 0.24);

  --accent: #a78bff;
  --accent-rgb: 167, 139, 255;
  --accent-hover: #b9a3ff;
  --accent-glow: rgba(var(--accent-rgb), 0.2);
  --accent-deep: #5b3fc6;
  --accent-faint: rgba(var(--accent-rgb), 0.08);

  --signal-live: #4ade80;
  --signal-warn: #fbbf24;
  --signal-info: #60a5fa;
  --signal-danger: #f87171;

  /* Tier palette (v3.3): commercial = green, free tools = teal,
     public-interest = accent purple.  Used by netview bands, commitment
     cards, dtable funding chips and the .tier-* row stripes.  Each tier
     ships a flat colour token plus an rgb tuple so we can mix tints. */
  --tier-commercial: #22c55e;
  --tier-commercial-rgb: 34, 197, 94;
  --tier-free: #5eead4;
  --tier-free-rgb: 94, 234, 212;
  --tier-public: var(--accent);
  --tier-public-rgb: var(--accent-rgb);

  --grad-aurora: radial-gradient(
    120% 80% at 50% 0%,
    rgba(var(--accent-rgb), 0.2) 0%,
    rgba(var(--accent-rgb), 0.08) 35%,
    transparent 70%
  );
  --grad-edge: linear-gradient(
    135deg,
    rgba(var(--accent-rgb), 0.5) 0%,
    rgba(var(--accent-rgb), 0.2) 50%,
    rgba(96, 165, 250, 0.3) 100%
  );
  --grad-text: linear-gradient(180deg, #ffffff 0%, #b4b4bd 100%);
  --grad-text-accent: linear-gradient(180deg, #ffffff 0%, #a78bff 100%);

  --font-sans:
    "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --type-display: clamp(2.75rem, 5.5vw, 4.5rem);
  --type-h1: clamp(2.25rem, 4vw, 3.25rem);
  --type-h2: clamp(1.75rem, 2.5vw, 2.25rem);
  --type-h3: 1.375rem;
  --type-h4: 1.125rem;
  --type-body-lg: 1.0625rem;
  --type-body: 0.9375rem;
  --type-small: 0.8125rem;
  --type-micro: 0.6875rem;

  --weight-display: 600;
  --weight-heading: 600;
  --weight-body: 400;
  --weight-mid: 500;
  --weight-bold: 600;

  --lead-display: 1.05;
  --lead-heading: 1.15;
  --lead-body: 1.55;
  --lead-tight: 1.12;

  --tracking-display: -0.032em;
  --tracking-heading: -0.018em;
  --tracking-body: -0.006em;
  --tracking-eyebrow: 0.12em;

  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;
  --sp-40: 160px;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  --w-content: 1200px;
  --w-narrow: 720px;
  --w-wide: 1360px;
  --pad-x: clamp(20px, 4vw, 48px);

  --ease-out: cubic-bezier(0.21, 0.61, 0.35, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 420ms;
  --dur-breathe: 6000ms;

  --shadow-pop: 0 1px 0 0 var(--line-soft), 0 20px 40px -16px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 8px 24px -18px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px var(--accent), 0 0 32px -4px var(--accent-glow);
  --shadow-card: 0 18px 50px -34px rgba(0, 0, 0, 0.72);
  --shadow-panel: 0 34px 90px -48px rgba(0, 0, 0, 0.82);

  /* Glass surfaces: keep these as tokens so they flip with the theme. */
  --glass-nav: rgba(8, 8, 11, 0.72);
  --glass-pill: rgba(13, 13, 18, 0.55);
  --scrim-media: rgba(8, 8, 11, 0.46);
}

/* ============================================================================
   LIGHT THEME OVERLAY
   Triggered by <html data-theme="light"> set by initTheme() in app.js.
   Falls back to dark for any user that has JS off and prefers dark.
   ============================================================================ */

[data-theme="light"] {
  --bg-canvas: #fbfbfc;
  --bg-elev-1: #ffffff;
  --bg-elev-2: #f4f4f7;
  --bg-elev-3: #ebebf0;
  --bg-inset: #f7f7fa;

  --ink-primary: #08080b;
  --ink-secondary: #3d3d46;
  --ink-tertiary: #6e6e78;
  --ink-quaternary: #9c9ca8;
  --ink-inverse: #ffffff;

  --line-faint: rgba(0, 0, 0, 0.04);
  --line-soft: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.16);
  --line-bright: rgba(0, 0, 0, 0.3);

  --accent: #5b3fc6;
  --accent-rgb: 91, 63, 198;
  --accent-hover: #4a2fb5;
  --accent-glow: rgba(var(--accent-rgb), 0.18);
  --accent-deep: #3a1e90;
  --accent-faint: rgba(var(--accent-rgb), 0.06);

  --tier-commercial: #15803d;
  --tier-commercial-rgb: 21, 128, 61;
  --tier-free: #0f766e;
  --tier-free-rgb: 15, 118, 110;
  --tier-public: var(--accent);
  --tier-public-rgb: var(--accent-rgb);

  --grad-aurora: radial-gradient(
    120% 80% at 50% 0%,
    rgba(var(--accent-rgb), 0.1) 0%,
    rgba(var(--accent-rgb), 0.04) 35%,
    transparent 70%
  );
  --grad-edge: linear-gradient(
    135deg,
    rgba(var(--accent-rgb), 0.45) 0%,
    rgba(var(--accent-rgb), 0.18) 50%,
    rgba(64, 90, 180, 0.22) 100%
  );
  --grad-text: linear-gradient(180deg, #08080b 0%, #3d3d46 100%);
  --grad-text-accent: linear-gradient(180deg, #08080b 0%, #5b3fc6 100%);

  --shadow-pop: 0 1px 0 0 var(--line-soft), 0 20px 40px -16px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 8px 22px -16px rgba(8, 8, 11, 0.18);
  --shadow-glow: 0 0 0 1px var(--accent), 0 0 32px -4px var(--accent-glow);
  --shadow-card: 0 18px 42px -34px rgba(8, 8, 11, 0.22);
  --shadow-panel: 0 30px 70px -50px rgba(8, 8, 11, 0.28);

  --glass-nav: rgba(255, 255, 255, 0.78);
  --glass-pill: rgba(255, 255, 255, 0.65);
  --scrim-media: rgba(8, 8, 11, 0.22);

  color-scheme: light;
}

/* ============================================================================
   ACCESSIBILITY STATE CLASSES (applied to <html> by the a11y panel)
   ============================================================================ */

[data-text-scale="lg"] {
  font-size: 17.6px;
} /* 1.1rem */
[data-text-scale="xl"] {
  font-size: 20px;
} /* 1.25rem */

[data-contrast="high"] {
  --ink-primary: #ffffff;
  --ink-secondary: #f0f0f0;
  --ink-tertiary: #dadada;
  --line-soft: rgba(255, 255, 255, 0.3);
  --line-strong: rgba(255, 255, 255, 0.5);
  --line-bright: rgba(255, 255, 255, 0.7);
}
[data-contrast="high"][data-theme="light"] {
  --ink-primary: #000000;
  --ink-secondary: #1a1a1a;
  --ink-tertiary: #333333;
  --line-soft: rgba(0, 0, 0, 0.3);
  --line-strong: rgba(0, 0, 0, 0.55);
  --line-bright: rgba(0, 0, 0, 0.75);
}

[data-uline-all] a:not(.btn):not(.nav__brand):not(.nav__link):not(.nav__toggle):not(.cookie-banner__primary) {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

[data-reduce-motion] *,
[data-reduce-motion] *::before,
[data-reduce-motion] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

[data-pause-anim] .badge--live::before,
[data-pause-anim] .aurora {
  animation: none !important;
}

[data-font="dyslexic"] {
  --font-sans: "Atkinson Hyperlegible", "OpenDyslexic", "Comic Sans MS", system-ui, sans-serif;
}

/* ============================================================================
   RESET + BASE
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  background: var(--bg-canvas);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--ink-secondary);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--lead-body);
  letter-spacing: var(--tracking-body);
  /* Inter v4 OpenType: kerning + standard ligatures + contextual alts,
     plus single-storey g (cv11), curved l with tail (cv05), and the
     "rounded" stylistic set ss03 for digit 4.  These read warmer and
     more premium than Inter's defaults while keeping numerals crisp. */
  font-feature-settings:
    "kern" 1,
    "liga" 1,
    "calt" 1,
    "cv11" 1,
    "cv05" 1,
    "ss03" 1;
  font-variant-numeric: lining-nums proportional-nums;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

::selection {
  background: var(--accent-glow);
  color: var(--ink-primary);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: var(--ink-primary);
  text-decoration: none;
}
a:hover {
  color: var(--accent);
}

/* Buttons must always set their own text colour, regardless of where they
   sit in the document.  Without this, hover states on `a` elements that
   happen to also be .btn classes can recolour the button label into the
   button background. */
a.btn,
a.btn:hover,
a.btn-accent,
a.btn-accent:hover,
a.btn-primary,
a.btn-primary:hover {
  color: var(--ink-inverse);
}
a.btn-secondary,
a.btn-secondary:hover,
a.btn-ghost,
a.btn-ghost:hover {
  color: var(--ink-primary);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden,
.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;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -200px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--ink-inverse);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--accent-hover));
  border-radius: var(--r-pill);
  font-weight: var(--weight-bold);
  font-size: var(--type-small);
  letter-spacing: 0.01em;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),
    0 12px 28px -14px rgba(var(--accent-rgb), 0.55);
  transition:
    top var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: var(--sp-4);
  color: var(--ink-inverse);
  outline: none;
  background: var(--accent-hover);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 32%, transparent),
    0 14px 32px -14px rgba(var(--accent-rgb), 0.7);
}

/* ============================================================================
   LAYOUT PRIMITIVES
   ============================================================================ */

.container {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.container--wide {
  max-width: var(--w-wide);
}
.container--narrow {
  max-width: var(--w-narrow);
}

/* Orphan stage-2 blocks and bare pillar-heroes without an inner .container */
main > .research-changelog,
main > .key-facts,
main > .container.page-meta {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
main > .container.page-meta {
  margin-block: var(--sp-4) 0;
}
.pillar-hero:not(:has(.container)) {
  padding-inline: max(var(--pad-x), calc((100% - min(var(--w-content), 100%)) / 2));
}

.section {
  padding-block: var(--sp-24);
  position: relative;
}
.section--lg {
  padding-block: var(--sp-32);
}
.section--sm {
  padding-block: var(--sp-16);
}
.section-bg-elev {
  background: var(--bg-elev-1);
  border-top: 1px solid var(--line-faint);
  border-bottom: 1px solid var(--line-faint);
}

.stack > * + * {
  margin-top: var(--sp-4);
}
.stack-lg > * + * {
  margin-top: var(--sp-6);
}

/* ============================================================================
   TYPE
   ============================================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
  color: var(--ink-primary);
  font-weight: var(--weight-heading);
  line-height: var(--lead-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}
h1 {
  font-size: var(--type-h1);
}
h2 {
  font-size: var(--type-h2);
}
h3 {
  font-size: var(--type-h3);
}
h4 {
  font-size: var(--type-h4);
}

p {
  margin: 0;
}
p + p {
  margin-top: var(--sp-4);
}

ul,
ol {
  margin: 0;
  padding-left: 1.25rem;
}
ul li + li,
ol li + li {
  margin-top: var(--sp-2);
}

strong {
  color: var(--ink-primary);
  font-weight: var(--weight-mid);
}

.t-display {
  font-size: var(--type-display);
  font-weight: var(--weight-display);
  line-height: var(--lead-display);
  letter-spacing: var(--tracking-display);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.t-display--accent {
  background: var(--grad-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.t-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin: 0;
}
.t-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-faint);
}

.t-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.t-lead {
  font-size: var(--type-body-lg);
  color: var(--ink-secondary);
  max-width: 60ch;
}
.t-muted {
  color: var(--ink-tertiary);
}
.t-small {
  font-size: var(--type-small);
}
.t-accent {
  color: var(--accent);
}

/* Vertical rhythm: eyebrow always followed by heading, heading by lead */
.t-eyebrow + h1,
.t-eyebrow + h2,
.t-eyebrow + h3,
.t-eyebrow + .t-display {
  margin-top: var(--sp-3);
}
h1 + .t-lead,
h2 + .t-lead,
h3 + .t-lead,
.t-display + .t-lead,
.t-display + .hero__lead {
  margin-top: var(--sp-5);
}

/* Headings: sensible default max-widths (override with .mw-* when needed) */
h1,
.pillar-hero__title,
.t-display,
.hero__title {
  max-width: 26ch;
}
h2 {
  max-width: 30ch;
}
h3 {
  max-width: 36ch;
}

/* ============================================================================
   UTILITIES (small, focused, only what HTML actually needs)
   ============================================================================ */

.u-center {
  text-align: center;
}
.u-justify-c {
  justify-content: center;
}
.u-items-c {
  align-items: center;
}
.u-flex {
  display: flex;
}
.u-iflex {
  display: inline-flex;
}
.u-flex-wrap {
  flex-wrap: wrap;
}
.u-flex-col {
  flex-direction: column;
}
.u-no-uline {
  text-decoration: none;
}
.u-uline {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(var(--accent-rgb), 0.4);
}
.u-uline:hover {
  text-decoration-color: var(--accent);
}
.u-block {
  display: block;
}
.u-inline {
  display: inline-block;
}

.mt-2 {
  margin-top: var(--sp-2);
}
.mt-3 {
  margin-top: var(--sp-3);
}
.mt-4 {
  margin-top: var(--sp-4);
}
.mt-5 {
  margin-top: var(--sp-5);
}
.mt-6 {
  margin-top: var(--sp-6);
}
.mt-8 {
  margin-top: var(--sp-8);
}
.mt-10 {
  margin-top: var(--sp-10);
}
.mt-12 {
  margin-top: var(--sp-12);
}
.mt-16 {
  margin-top: var(--sp-16);
}
.mt-20 {
  margin-top: var(--sp-20);
}

.mb-2 {
  margin-bottom: var(--sp-2);
}
.mb-4 {
  margin-bottom: var(--sp-4);
}
.mb-6 {
  margin-bottom: var(--sp-6);
}
.mb-8 {
  margin-bottom: var(--sp-8);
}
.mb-12 {
  margin-bottom: var(--sp-12);
}

.gap-1 {
  gap: var(--sp-1);
}
.gap-2 {
  gap: var(--sp-2);
}
.gap-3 {
  gap: var(--sp-3);
}
.gap-4 {
  gap: var(--sp-4);
}
.gap-6 {
  gap: var(--sp-6);
}

.mw-narrow {
  max-width: 22ch;
}
.mw-heading {
  max-width: 28ch;
}
.mw-lead {
  max-width: 58ch;
}
.mw-body {
  max-width: 68ch;
}
.mw-prose {
  max-width: 72ch;
}

.is-bare {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: var(--weight-mid);
  letter-spacing: var(--tracking-body);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--ink-primary);
  color: var(--ink-inverse);
}
.btn-primary:hover {
  background: #ffffff;
  color: var(--ink-inverse);
}

.btn-secondary {
  background: transparent;
  color: var(--ink-primary);
  border-color: var(--line-strong);
}
.btn-secondary:hover {
  border-color: var(--line-bright);
  background: var(--bg-elev-1);
  color: var(--ink-primary);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-secondary);
  padding-inline: 12px;
  border-color: transparent;
  border-radius: var(--r-sm);
}
.btn-ghost:hover {
  color: var(--ink-primary);
  background: var(--bg-elev-1);
}

.btn-accent {
  background: var(--accent);
  color: var(--ink-inverse);
  font-weight: var(--weight-bold);
}
.btn-accent:hover {
  background: var(--accent-hover);
  color: var(--ink-inverse);
  box-shadow: var(--shadow-glow);
}

.btn-arrow::after {
  content: "\2192";
  font-family: var(--font-mono);
  margin-left: 2px;
  display: inline-block;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn-arrow::after,
.btn-arrow:hover::after {
  transform: translate(3px, -1px);
}

/* ============================================================================
   SURFACES + CARDS
   ============================================================================ */

.surface {
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.surface--elev-2 {
  background: var(--bg-elev-2);
}

.card {
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition:
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

/* Scope card link recolour to non-button anchors so .btn-* keeps its own
   colour (fixes dark-on-dark in light mode for buttons sitting inside .card). */
.card a:not(.btn) {
  color: var(--ink-primary);
}
.card a:not(.btn):hover {
  color: var(--accent);
}

.card--gradient-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--r-lg);
  padding: 1px;
  background: var(--grad-edge);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.card--gradient-border:hover::before {
  opacity: 1;
}

.card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-tertiary);
}
.card__title {
  color: var(--ink-primary);
  font-size: var(--type-h3);
  margin: 0;
}
.card__body {
  color: var(--ink-secondary);
  font-size: var(--type-body);
  margin: 0;
}
.card__stat {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-primary);
  font-size: 1.5rem;
}
.card__cta {
  margin-top: auto;
}

/* ============================================================================
   BADGES
   ============================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bg-elev-2);
  border: 1px solid var(--line-soft);
  color: var(--ink-secondary);
}
.badge--live {
  color: var(--signal-live);
  border-color: rgba(74, 222, 128, 0.24);
  background: rgba(74, 222, 128, 0.06);
}
.badge--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal-live);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
  animation: pulse var(--dur-breathe) var(--ease-out) infinite;
}
.badge--warn {
  color: var(--signal-warn);
  border-color: rgba(251, 191, 36, 0.24);
  background: rgba(251, 191, 36, 0.06);
}
.badge--accent {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.24);
  background: var(--accent-faint);
}
.badge--info {
  color: var(--signal-info);
  border-color: rgba(96, 165, 250, 0.24);
  background: rgba(96, 165, 250, 0.06);
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.05);
  }
}

/* ============================================================================
   STAT CARDS
   ============================================================================ */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6);
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin: 0;
}
.stat__value {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: var(--weight-mid);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink-primary);
  line-height: 1;
  margin: 0;
}
.stat__value--accent {
  color: var(--accent);
}
.stat__caption {
  font-size: var(--type-small);
  color: var(--ink-tertiary);
  margin: 0;
}
.stat__source {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  color: var(--ink-quaternary);
}
.stat__source a {
  color: var(--ink-tertiary);
  text-decoration: none;
  border-bottom: 1px dashed var(--line-strong);
}
.stat__source a:hover {
  color: var(--ink-secondary);
}

/* ============================================================================
   DATA TABLE
   ============================================================================ */

.dtable-wrap {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-elev-1);
  margin-block: var(--sp-8);
}
.dtable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--type-small);
}
.dtable th {
  text-align: left;
  padding: 14px 16px;
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-tertiary);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-mid);
  white-space: nowrap;
}
.dtable td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-faint);
  color: var(--ink-secondary);
}
.dtable tr:last-child td {
  border-bottom: none;
}
.dtable tbody tr {
  transition: background var(--dur-fast) var(--ease-out);
}
.dtable tbody tr td {
  transition: background var(--dur-fast) var(--ease-out);
}
.dtable tr:hover td {
  background: var(--bg-elev-2);
}
.dtable__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-primary);
  text-align: right;
}
.dtable__name {
  color: var(--ink-primary);
  font-weight: var(--weight-mid);
}
.dtable__name a {
  color: inherit;
  text-decoration: none;
}
.dtable__name a:hover {
  color: var(--accent);
}

.dtable-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================================
   CODE BLOCK
   ============================================================================ */

.codeblock {
  background: var(--bg-inset);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--type-small);
  line-height: 1.7;
  color: var(--ink-secondary);
  overflow-x: auto;
}
.codeblock__line {
  display: block;
}
.codeblock__comment {
  color: var(--ink-quaternary);
}
.codeblock__token {
  color: var(--accent);
}
.codeblock__string {
  color: var(--signal-live);
}

/* ============================================================================
   AURORA BACKGROUND
   ============================================================================ */

.aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 80vh;
  background: var(--grad-aurora);
  filter: blur(40px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
.aurora--bottom {
  inset: auto -10% -20% -10%;
  height: 60vh;
}

/* ============================================================================
   NAVIGATION - floating glass bar, segmented link rail, premium mobile drawer
   ============================================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: var(--sp-3) var(--pad-x) var(--sp-2);
  background: transparent;
  border-bottom: none;
  pointer-events: none;
}
.nav[data-open="true"] {
  pointer-events: auto;
}
html.nav-open {
  overflow: hidden;
}
.nav__inner,
.nav__toggle {
  pointer-events: auto;
}
.nav__inner {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding: 8px 10px 8px 14px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 58px;
  background: color-mix(in srgb, var(--glass-nav) 90%, transparent);
  backdrop-filter: saturate(190%) blur(22px);
  -webkit-backdrop-filter: saturate(190%) blur(22px);
  border: 1px solid color-mix(in srgb, var(--line-soft) 82%, transparent);
  border-radius: var(--r-pill);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent),
    0 10px 40px -18px rgba(0, 0, 0, 0.65),
    0 0 0 1px color-mix(in srgb, var(--accent) 9%, transparent);
  transition:
    min-height var(--dur-base) var(--ease-out),
    padding var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.nav[data-scrolled="true"] .nav__inner {
  min-height: 52px;
  padding-block: 6px;
  background: color-mix(in srgb, var(--glass-nav) 96%, transparent);
  backdrop-filter: saturate(190%) blur(34px);
  -webkit-backdrop-filter: saturate(190%) blur(34px);
  border-color: color-mix(in srgb, var(--line-strong) 70%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line-strong) 80%, var(--line-soft));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent),
    0 18px 42px -20px rgba(0, 0, 0, 0.82),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Brand */
.nav__brand {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: 1.02rem;
  letter-spacing: -0.03em;
  color: var(--ink-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 6px 12px 6px 8px;
  margin-right: var(--sp-1);
  border-radius: var(--r-pill);
  transition:
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}
.nav__brand:hover {
  background: color-mix(in srgb, var(--bg-elev-1) 72%, transparent);
  color: var(--ink-primary);
}
.nav__brand-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent-hover), var(--accent));
  flex-shrink: 0;
  box-shadow:
    0 0 0 4px var(--accent-faint),
    0 0 20px var(--accent-glow);
}

/* Primary links - segmented rail */
.nav__list {
  display: flex;
  gap: 3px;
  list-style: none;
  margin: 0;
  padding: 4px;
  align-items: center;
  background: color-mix(in srgb, var(--bg-elev-1) 88%, transparent);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-pill);
}
.nav__list li,
.nav__list li + li {
  margin: 0;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  color: var(--ink-secondary);
  font-size: 0.9rem;
  font-weight: var(--weight-mid);
  text-decoration: none;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition:
    color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  letter-spacing: -0.01em;
}
.nav__link:hover {
  color: var(--ink-primary);
  background: color-mix(in srgb, var(--bg-elev-2) 75%, transparent);
}
.nav__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav__link[aria-current="page"] {
  color: var(--ink-primary);
  font-weight: var(--weight-bold);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--accent) 28%, transparent),
    color-mix(in srgb, var(--accent) 12%, transparent)
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent),
    0 6px 18px -8px var(--accent-glow);
}

.nav__spacer {
  flex: 1;
  min-width: var(--sp-2);
}

/* Utilities + CTA */
.nav__cta-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.nav__cta-row .theme-toggle {
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--bg-elev-1) 55%, transparent);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nav__cta-row .theme-toggle:hover {
  background: var(--bg-elev-2);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line-strong));
}
.nav__cta-row .btn {
  font-size: 0.875rem;
  min-height: 38px;
  padding: 8px 16px;
  white-space: nowrap;
}
.nav__cta-row .btn-ghost {
  color: var(--ink-secondary);
  border-color: transparent;
  background: transparent;
}
.nav__cta-row .btn-ghost:hover {
  color: var(--ink-primary);
  background: color-mix(in srgb, var(--bg-elev-1) 80%, transparent);
  border-color: var(--line-soft);
}
.nav__cta-row .btn-accent {
  box-shadow:
    0 10px 28px -14px var(--accent-glow),
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
}

/* Hamburger */
.nav__toggle {
  display: none;
  background: color-mix(in srgb, var(--bg-elev-1) 70%, transparent);
  border: 1px solid var(--line-soft);
  color: var(--ink-primary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.nav__toggle:hover {
  border-color: var(--line-strong);
  background: var(--bg-elev-2);
}
.nav__toggle-icon,
.nav__toggle-icon::before,
.nav__toggle-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  position: relative;
  transition:
    transform var(--dur-base) var(--ease-out),
    top var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}
.nav__toggle-icon::before,
.nav__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav__toggle-icon::before {
  top: -6px;
}
.nav__toggle-icon::after {
  top: 6px;
}
.nav[data-open="true"] .nav__toggle-icon {
  background: transparent;
}
.nav[data-open="true"] .nav__toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.nav[data-open="true"] .nav__toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

[data-theme="light"] .nav__inner {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent),
    0 12px 36px -16px rgba(15, 15, 22, 0.14),
    0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}
[data-theme="light"] .nav__list {
  background: color-mix(in srgb, var(--bg-elev-2) 90%, transparent);
}
[data-theme="light"] .nav[data-open="true"]::before {
  background: rgba(8, 8, 11, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .nav__inner,
  .nav__link,
  .nav__toggle-icon,
  .nav__toggle-icon::before,
  .nav__toggle-icon::after {
    transition: none;
  }
}

/* Mobile drawer */
@media (max-width: 960px) {
  .nav {
    padding-inline: clamp(12px, 3vw, 20px);
  }
  .nav__toggle {
    display: inline-flex;
  }
  .nav__inner > nav,
  .nav__spacer,
  .nav__cta-row {
    display: none;
  }
  .nav[data-open="true"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto;
  }
  .nav[data-open="true"] .nav__inner {
    flex-wrap: wrap;
    align-items: stretch;
    border-radius: clamp(var(--r-lg), 4vw, 24px);
    padding: var(--sp-4);
    gap: var(--sp-3);
    max-height: min(88vh, 720px);
    overflow-y: auto;
  }
  .nav[data-open="true"] .nav__inner > nav,
  .nav[data-open="true"] .nav__cta-row {
    display: flex;
    width: 100%;
  }
  .nav[data-open="true"] .nav__inner > nav {
    order: 3;
  }
  .nav[data-open="true"] .nav__cta-row {
    order: 4;
    flex-direction: column;
    align-items: stretch;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line-faint);
  }
  .nav[data-open="true"] .nav__list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    border-radius: var(--r-lg);
    padding: var(--sp-2);
    gap: 4px;
  }
  .nav[data-open="true"] .nav__link {
    justify-content: flex-start;
    min-height: 44px;
    padding-inline: var(--sp-4);
    font-size: 1rem;
  }
  .nav[data-open="true"] .nav__cta-row .btn,
  .nav[data-open="true"] .nav__cta-row .theme-toggle {
    width: 100%;
    justify-content: center;
  }
  .nav[data-open="true"] .nav__cta-row .theme-toggle {
    border-radius: var(--r-sm);
    height: 44px;
  }
  .nav__brand {
    margin-right: auto;
  }
}

@media (max-width: 520px) {
  .nav__cta-row .btn-accent {
    font-size: 0.8125rem;
    padding-inline: 14px;
  }
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.footer {
  border-top: 1px solid var(--line-faint);
  background: var(--bg-elev-1);
  padding: var(--sp-20) 0 var(--sp-12);
  margin-top: var(--sp-32);
}
.footer__inner {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: var(--sp-12);
}
@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
}
@media (max-width: 540px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

.footer__brand-block .footer__lead {
  color: var(--ink-secondary);
  font-size: var(--type-small);
  max-width: 36ch;
  margin-top: var(--sp-3);
}

.footer__col h4,
.footer__col-title {
  font-size: var(--type-small);
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-primary);
  margin: 0 0 var(--sp-4);
  font-weight: var(--weight-bold);
}
.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.footer__col ul li + li {
  margin-top: 0;
}
.footer__col a {
  color: var(--ink-secondary);
  text-decoration: none;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  font-size: var(--type-body);
  transition:
    color var(--dur-fast) var(--ease-out),
    text-decoration-color var(--dur-fast) var(--ease-out);
}
.footer__col a:hover,
.footer__col a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: currentColor;
}

.footer__meta {
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-faint);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--type-small);
  color: var(--ink-tertiary);
}
.footer__meta a {
  color: var(--ink-tertiary);
}
.footer__meta a:hover {
  color: var(--ink-secondary);
}

/* Corporate smallprint (legal chain, IoM HQ, banking, dispute routes). */
.footer__legal {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-faint);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-tertiary);
}
.footer__legal p {
  margin: 0;
  max-width: 78ch;
}
.footer__legal strong {
  color: var(--ink-secondary);
  font-weight: 600;
}
.footer__legal a {
  color: var(--ink-tertiary);
}
.footer__legal a:hover {
  color: var(--accent);
}
.footer__legal + .footer__meta {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 0;
}

/* ============================================================================
   HERO: focused on 8-second comprehension
   ============================================================================ */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(96px, 14vh, 180px) clamp(64px, 10vh, 120px);
  overflow: hidden;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-6);
}
.hero__title {
  margin: 0;
  max-width: 22ch;
}
.hero__lead {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--ink-secondary);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

/* Hero proof: single most-credible signal directly under the CTAs */
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-5);
  font-size: var(--type-small);
  color: var(--ink-tertiary);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-pill);
  background: var(--glass-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero__proof-sep {
  color: var(--ink-quaternary);
}
.hero__proof strong {
  color: var(--ink-primary);
  font-weight: var(--weight-mid);
}

/* Domain pages: smallprint that sits below the proof pill to dampen
   lowball offers without being aggressive about it. */
.hero__smallprint {
  margin: var(--sp-3) 0 0;
  font-size: var(--type-micro);
  color: var(--ink-quaternary);
  font-style: italic;
  letter-spacing: 0.01em;
}

/* Hero figure: one BIG number, instead of six small ones */
.hero__figure {
  margin-top: var(--sp-10);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-8);
  align-items: end;
  padding: var(--sp-8);
  background: radial-gradient(120% 80% at 0% 0%, rgba(var(--accent-rgb), 0.08), transparent 60%), var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  width: 100%;
}
.hero__figure-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink-primary);
  background: var(--grad-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__figure-meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
}
.hero__figure-label {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.hero__figure-desc {
  color: var(--ink-secondary);
  font-size: var(--type-body);
  max-width: 38ch;
}
.hero__figure-source {
  color: var(--ink-quaternary);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
}
.hero__figure-source a {
  color: var(--ink-tertiary);
  border-bottom: 1px dashed var(--line-strong);
}
@media (max-width: 720px) {
  .hero__figure {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .hero__figure-meta {
    padding-bottom: 0;
  }
}

/* Hero compact stats row (sits below figure, far less noisy than the old grid) */
.hero__stats {
  width: 100%;
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-elev-1);
}
.hero__stats-cell {
  padding: var(--sp-5) var(--sp-4);
  border-right: 1px solid var(--line-faint);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero__stats-cell:last-child {
  border-right: none;
}
.hero__stats-label {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.hero__stats-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-primary);
}
@media (max-width: 1000px) {
  .hero__stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .hero__stats-cell:nth-child(3) {
    border-right: none;
  }
  .hero__stats-cell:nth-child(n + 4) {
    border-top: 1px solid var(--line-faint);
  }
}
@media (max-width: 560px) {
  .hero__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero__stats-cell:nth-child(n) {
    border-right: 1px solid var(--line-faint);
  }
  .hero__stats-cell:nth-child(2n) {
    border-right: none;
  }
  .hero__stats-cell:nth-child(n + 3) {
    border-top: 1px solid var(--line-faint);
  }
}

/* Verified-by logo strip (mono pills with source names) */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  align-items: center;
}
.logo-strip__label {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-quaternary);
  margin-right: var(--sp-2);
}
.logo-strip__chip {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: 0.02em;
  color: var(--ink-secondary);
  padding: 6px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  background: var(--bg-elev-2);
}

/* Hero metrics (legacy v2 grid), kept for backwards compat */
.hero__metrics {
  width: 100%;
  margin-top: var(--sp-12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 900px) {
  .hero__metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .hero__metrics {
    grid-template-columns: 1fr;
  }
}

.hero__trust {
  margin-top: var(--sp-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--type-small);
  color: var(--ink-tertiary);
}
.hero__trust-text {
  max-width: 60ch;
}

/* ============================================================================
   FACT PANEL: designed for AI citation, scrape-friendly
   ============================================================================ */

.fact-panel {
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--sp-6);
  row-gap: var(--sp-3);
  font-size: var(--type-body);
}
.fact-panel dt {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  white-space: nowrap;
}
.fact-panel dd {
  margin: 0;
  color: var(--ink-primary);
  font-family: var(--font-sans);
}
.fact-panel dd .t-mono {
  color: var(--accent);
}

.fact-panel--callout {
  display: block;
  margin-block: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
}
.fact-panel--callout p {
  margin: 0;
  color: var(--ink-primary);
}
.fact-panel--callout p + p {
  margin-top: var(--sp-3);
}
.fact-panel__src {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: 0.02em;
  color: var(--ink-tertiary);
}

.answer-capsule {
  font-size: var(--type-body-lg);
  line-height: var(--lead-body);
  color: var(--ink-primary);
  max-width: 62ch;
  margin: var(--sp-4) 0 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elev-1));
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.answer-capsule strong {
  color: var(--ink-primary);
  font-weight: var(--weight-bold);
}

.key-facts {
  margin-block: var(--sp-8) var(--sp-6);
  padding: var(--sp-6);
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.key-facts h2 {
  font-size: var(--type-h4);
  margin: 0 0 var(--sp-4);
}
.key-facts ul {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: var(--sp-3);
}
.key-facts li {
  color: var(--ink-secondary);
  line-height: var(--lead-body);
}
.key-facts li strong {
  color: var(--ink-primary);
}

.research-changelog {
  margin: 0 0 var(--sp-6);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-md);
  background: var(--bg-elev-1);
}

.t-h4 {
  font-size: var(--type-h4);
  font-weight: var(--weight-heading);
  color: var(--ink-primary);
}

/* Speakable selectors get a subtle inline highlight to be visible and
   semantically marked-up for Speakable Schema */
.speakable {
  display: inline;
  background: linear-gradient(
    180deg,
    transparent 60%,
    var(--accent-faint) 60%,
    var(--accent-faint) 92%,
    transparent 92%
  );
  padding: 0 0.1em;
}

/* ============================================================================
   REVEAL ON SCROLL
   ============================================================================ */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-slow) var(--ease-out-soft),
    transform var(--dur-slow) var(--ease-out-soft);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ============================================================================
   THREE ROUTES (home)
   ============================================================================ */

.routes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 880px) {
  .routes {
    grid-template-columns: 1fr;
  }
}

.routes .card {
  min-height: 280px;
}

/* ============================================================================
   LIVE TICKER STRIP
   ============================================================================ */

.ticker {
  border-top: 1px solid var(--line-faint);
  border-bottom: 1px solid var(--line-faint);
  background: var(--bg-elev-1);
  padding-block: var(--sp-4);
}
.ticker__inner {
  display: flex;
  gap: var(--sp-8);
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--type-small);
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink-tertiary);
}
.ticker__name {
  color: var(--ink-primary);
}
.ticker__value {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   NETWORK GRID (home)
   ============================================================================ */

.netgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(204px, 1fr));
  gap: var(--sp-3);
  align-items: stretch;
}

.netgrid__cell {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elev-2) 70%, transparent) 0%, var(--bg-elev-1) 80%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 14px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  text-decoration: none;
  color: var(--ink-primary);
  transition:
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
  position: relative;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
}
.netgrid__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    220px 120px at 100% 0%,
    color-mix(in srgb, var(--accent) 12%, transparent),
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.netgrid__cell:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line-strong));
  background: var(--bg-elev-2);
  color: var(--ink-primary);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.65);
}
.netgrid__cell:hover::after {
  opacity: 1;
}
.netgrid__cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Live pulse indicator (small green dot, top-left).  Applied to every
   live cell via the base class.  In-build cells suppress it below. */
.netgrid__cell::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-quaternary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-quaternary) 18%, transparent);
  z-index: 1;
}
/* Live signal only on the highflyer + newcomer cells - everything else
   shows a calm static dot so the network does not strobe.  Each pulsing
   cell sets its own --pulse-color which the keyframe consumes. */
.netgrid__cell.is-highflyer::before,
.netgrid__cell.is-newcomer::before {
  background: var(--pulse-color, var(--tier-commercial));
  animation: netgridPulse 2.2s ease-in-out infinite;
}
.netgrid__cell.is-highflyer {
  --pulse-color: var(--tier-commercial);
}
.netgrid__cell.is-newcomer {
  --pulse-color: var(--accent);
}
/* Tier-tinted static dots on the cells that do not pulse, so the
   commercial / free / public bands still carry a colour signal. */
.netview__band--commercial .netgrid__cell:not(.is-highflyer):not(.is-newcomer)::before {
  background: var(--tier-commercial);
  box-shadow: 0 0 0 3px rgba(var(--tier-commercial-rgb), 0.18);
}
.netview__band--free .netgrid__cell:not(.is-highflyer):not(.is-newcomer)::before {
  background: var(--tier-free);
  box-shadow: 0 0 0 3px rgba(var(--tier-free-rgb), 0.18);
}
.netview__band--public .netgrid__cell:not(.is-highflyer):not(.is-newcomer)::before {
  background: var(--tier-public);
  box-shadow: 0 0 0 3px rgba(var(--tier-public-rgb), 0.18);
}
@keyframes netgridPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--pulse-color) 55%, transparent),
      0 0 6px color-mix(in srgb, var(--pulse-color) 60%, transparent);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 8px transparent,
      0 0 14px color-mix(in srgb, var(--pulse-color) 85%, transparent);
    transform: scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .netgrid__cell.is-highflyer::before,
  .netgrid__cell.is-newcomer::before {
    animation: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pulse-color) 22%, transparent);
  }
}
[data-pause-anim] .netgrid__cell::before {
  animation: none;
}

.netgrid__name {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  color: var(--ink-primary);
  letter-spacing: -0.01em;
  font-weight: var(--weight-bold);
  word-break: break-word;
}
.netgrid__meta {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  color: var(--ink-tertiary);
}

/* In-build cell: amber dot, no pulse */
.netgrid__cell--build {
  opacity: 0.78;
}
.netgrid__cell--build::before {
  background: var(--signal-warn, #f59e0b);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
  animation: none;
}
.netgrid__cell--build .netgrid__meta {
  color: var(--signal-warn);
}

/* ============================================================================
   DOMAIN PORTFOLIO TEASER + GRID
   ============================================================================ */

.domain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 980px) {
  .domain-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .domain-grid {
    grid-template-columns: 1fr;
  }
}

.domain-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition:
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  text-decoration: none;
  color: var(--ink-primary);
  position: relative;
  overflow: hidden;
}
.domain-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(140% 60% at 0% 0%, rgba(var(--accent-rgb), 0.06), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.domain-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.domain-card:hover::before {
  opacity: 1;
}
.domain-card__cat {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--sp-1);
}
.domain-card__name {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--ink-primary);
  letter-spacing: -0.01em;
  margin: 0;
}
.domain-card__tag {
  font-size: var(--type-body);
  color: var(--ink-secondary);
  margin: 0;
}
.domain-card__price {
  font-family: var(--font-mono);
  color: var(--ink-primary);
  font-size: 1.05rem;
  font-weight: var(--weight-bold);
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: var(--sp-2) 0 0;
}
.domain-card__meta {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  color: var(--ink-tertiary);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-faint);
}
.domain-card__cta {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--type-small);
  color: var(--accent);
  font-weight: var(--weight-mid);
}
.domain-card:hover .domain-card__cta {
  color: var(--accent-hover);
}

/* ============================================================================
   SOFTWARE / WHAT WE BUILD
   ============================================================================ */

.build-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 900px) {
  .build-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .build-grid {
    grid-template-columns: 1fr;
  }
}

.build-card {
  min-height: 220px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.build-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--line-faint);
}
.build-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.build-card:hover .build-card__media img {
  transform: scale(1.04);
}
.build-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(8, 8, 11, 0.35) 100%);
  pointer-events: none;
}
.build-card__inner {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.build-card__preview {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  color: var(--ink-tertiary);
  background: var(--bg-inset);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  opacity: 0.85;
  transition: opacity var(--dur-base) var(--ease-out);
}
.build-card:hover .build-card__preview {
  opacity: 1;
}

/* ============================================================================
   PRICING TIERS
   ============================================================================ */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 900px) {
  .tier-grid {
    grid-template-columns: 1fr;
  }
}
.tier-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: relative;
}
.tier-card--featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}
.tier-card__name {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-tertiary);
  margin: 0;
}
.tier-card__price {
  font-family: var(--font-mono);
  font-size: 2rem;
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin: 0;
}
.tier-card__price-unit {
  font-size: var(--type-small);
  color: var(--ink-tertiary);
  font-weight: var(--weight-body);
  margin-left: 4px;
}
.tier-card__desc {
  color: var(--ink-secondary);
  font-size: var(--type-body);
  margin: 0;
}
.tier-card ul {
  padding-left: 1.1rem;
  color: var(--ink-secondary);
  font-size: var(--type-body);
}
.tier-card ul li::marker {
  color: var(--accent);
}
.tier-card__cta {
  margin-top: auto;
  padding-top: var(--sp-3);
}

/* ============================================================================
   SITE SPOTLIGHT
   Sales-driving callout used under the network grid.
   ============================================================================ */

.spotlight {
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(var(--accent-rgb), 0.12), transparent 60%),
    radial-gradient(80% 100% at 100% 100%, rgba(96, 165, 250, 0.08), transparent 60%), var(--bg-elev-1);
  border: 1px solid var(--accent-glow);
  border-radius: var(--r-xl);
  padding: var(--sp-10);
  box-shadow: var(--shadow-pop);
}
@media (max-width: 720px) {
  .spotlight {
    padding: var(--sp-6);
  }
}

.spotlight__eyebrow {
  color: var(--accent);
  margin: 0;
}
.spotlight__title {
  font-size: var(--type-h3);
  margin: var(--sp-3) 0 0;
  line-height: var(--lh-tight);
  max-width: 56ch;
}
.spotlight__title a {
  color: inherit;
}

.spotlight__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}
@media (max-width: 720px) {
  .spotlight__stats {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

.spotlight__stat {
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-elev-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.spotlight__stat-value {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin: 0;
  color: var(--ink-primary);
  line-height: 1;
}
.spotlight__stat-label {
  margin: var(--sp-2) 0 0;
  color: var(--ink-secondary);
  font-size: var(--type-body);
}
.spotlight__stat-caption {
  margin: var(--sp-1) 0 0;
  color: var(--ink-tertiary);
  font-size: var(--type-small);
}

.spotlight__cta {
  margin: var(--sp-8) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* ===========================================================================
   GROWTH PULSE - green uptick badge for high-performers and newcomers.
   Used as: <span class="growth growth--up">+18%</span> or .growth--new.
   Designed to pop in both light and dark themes.
   ============================================================================ */

.growth {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.4;
}
.growth::before {
  content: "";
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 17 9 11 13 15 21 7'/><polyline points='14 7 21 7 21 14'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}
.growth--up {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
[data-theme="light"] .growth--up {
  color: #047857;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(4, 120, 87, 0.3);
}
[data-theme="light"] .growth--up::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 17 9 11 13 15 21 7'/><polyline points='14 7 21 7 21 14'/></svg>");
}

.growth--new {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
}

/* Neutral category chip - same shape as .growth--up but muted, no leading
   icon, no pulse.  Used on the netgrid so every cell has a quick descriptor. */
.growth--tag {
  background: color-mix(in srgb, var(--bg-elev-3) 60%, transparent);
  color: var(--ink-secondary);
  border: 1px solid var(--line-soft);
  font-weight: var(--weight-mid);
}
.growth--tag::before {
  display: none;
}
[data-theme="light"] .growth--tag {
  background: color-mix(in srgb, var(--bg-elev-2) 80%, transparent);
  color: var(--ink-secondary);
  border-color: var(--line-soft);
}
.growth--new::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
}
[data-theme="light"] .growth--new {
  color: #5b3fc6;
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
}
[data-theme="light"] .growth--new::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b3fc6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
}

@keyframes growth-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
}
/* Growth-chip pulse only on highflyer / newcomer signals (matches grid dots). */
.is-highflyer .growth--up.is-pulsing,
.is-newcomer .growth--up.is-pulsing,
.dtable tr.is-highflyer .growth--up.is-pulsing,
.dtable tr.is-newcomer .growth--up.is-pulsing {
  animation: growth-pulse 2.4s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .is-highflyer .growth--up.is-pulsing,
  .is-newcomer .growth--up.is-pulsing,
  .dtable tr.is-highflyer .growth--up.is-pulsing,
  .dtable tr.is-newcomer .growth--up.is-pulsing {
    animation: none;
  }
}
[data-pause-anim] .is-highflyer .growth--up.is-pulsing,
[data-pause-anim] .is-newcomer .growth--up.is-pulsing,
[data-pause-anim] .dtable tr.is-highflyer .growth--up.is-pulsing,
[data-pause-anim] .dtable tr.is-newcomer .growth--up.is-pulsing {
  animation: none;
}

.netgrid__cell.is-highflyer {
  border-color: rgba(16, 185, 129, 0.45);
  background:
    linear-gradient(140deg, rgba(16, 185, 129, 0.14) 0%, transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elev-2) 70%, transparent) 0%, var(--bg-elev-1) 80%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 26px -18px rgba(16, 185, 129, 0.55);
}
.netgrid__cell.is-highflyer:hover {
  border-color: rgba(16, 185, 129, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 32px -16px rgba(16, 185, 129, 0.7);
}
.netgrid__cell.is-highflyer::before {
  animation-duration: 1.6s;
}
.netgrid__cell.is-newcomer {
  border-color: rgba(var(--accent-rgb), 0.45);
  background:
    linear-gradient(140deg, rgba(var(--accent-rgb), 0.14) 0%, transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elev-2) 70%, transparent) 0%, var(--bg-elev-1) 80%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 26px -18px rgba(var(--accent-rgb), 0.55);
}
.netgrid__cell.is-newcomer:hover {
  border-color: rgba(var(--accent-rgb), 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 32px -16px rgba(var(--accent-rgb), 0.7);
}
.netgrid__cell.is-newcomer::before {
  animation-duration: 1.8s;
}
.netgrid__cell .growth {
  align-self: flex-start;
  font-size: 0.7rem;
  margin-bottom: 2px;
  order: -1;
}
.dtable td .growth {
  margin-left: var(--sp-2);
  vertical-align: middle;
}

/* Netview table: live pulse dot prefix on every domain link, mirrors the grid
   so the table view also reads as a "live, growing" network. */
.netview__table .dtable tbody td:first-child {
  padding-left: 28px;
  position: relative;
}
.netview__table .dtable tbody td:first-child::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--ink-quaternary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-quaternary) 18%, transparent);
}
/* Pulse only on highflyer + newcomer rows (matches the grid). */
.netview__table .dtable tbody tr.is-highflyer td:first-child::before,
.netview__table .dtable tbody tr.is-newcomer td:first-child::before {
  animation: netgridPulse 2.2s ease-in-out infinite;
}
.netview__table .dtable tbody tr.is-highflyer {
  --pulse-color: var(--tier-commercial);
}
.netview__table .dtable tbody tr.is-newcomer {
  --pulse-color: var(--accent);
}
.netview__table .dtable tbody tr.is-highflyer td:first-child::before {
  background: var(--tier-commercial);
  animation-duration: 1.6s;
}
.netview__table .dtable tbody tr.is-newcomer td:first-child::before {
  background: var(--accent);
  animation-duration: 1.8s;
}
.netview__table .dtable tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-elev-2));
}
@media (prefers-reduced-motion: reduce) {
  .netview__table .dtable tbody td:first-child::before {
    animation: none;
  }
}
[data-pause-anim] .netview__table .dtable tbody td:first-child::before {
  animation: none;
}

.dtable tr.is-highflyer td:first-child {
  box-shadow: inset 3px 0 0 var(--tier-commercial);
}
.dtable tr.is-newcomer td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
/* Tint highflyer/newcomer rows so the table view also "pops". */
.netview__table .dtable tbody tr.is-highflyer td {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.06) 0%, transparent 60%);
}
.netview__table .dtable tbody tr.is-newcomer td {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.07) 0%, transparent 60%);
}

/* ===========================================================================
   SPEAK-WITH-PERSON CARDS - human contact, photo, LinkedIn and email.
   Used on contact.html and the homepage "Talk to a human" CTA.
   ============================================================================ */

.people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}
@media (max-width: 720px) {
  .people-grid {
    grid-template-columns: 1fr;
  }
}

.person-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
.person-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 100% at 100% 0%, rgba(var(--accent-rgb), 0.1), transparent 60%);
  pointer-events: none;
}
.person-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  position: relative;
}
.person-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  overflow: hidden;
}
/* Photo variant: real headshot inside the avatar circle. */
.person-card__photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: none;
  box-shadow:
    0 0 0 2px var(--bg-elev-2),
    0 0 0 3px var(--line-soft);
  flex-shrink: 0;
  background: var(--bg-elev-2);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.person-card:hover .person-card__photo {
  box-shadow:
    0 0 0 2px var(--bg-elev-2),
    0 0 0 3px color-mix(in srgb, var(--accent) 55%, var(--line-strong));
}
.person-card__name {
  margin: 0;
  font-size: 1.1rem;
  color: var(--ink-primary);
  font-weight: var(--weight-bold);
}
.person-card__role {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  color: var(--ink-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.person-card__body {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--type-body);
  line-height: var(--lead-body);
  position: relative;
}
.person-card__links {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
  position: relative;
}
.person-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--type-small);
  color: var(--ink-primary);
  text-decoration: none;
  transition:
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}
.person-card__link:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.person-card__link--linkedin::before {
  content: "";
  width: 14px;
  height: 14px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.761 0 5-2.239 5-5v-14c0-2.761-2.239-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.761 0 5-2.239 5-5v-14c0-2.761-2.239-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ===========================================================================
   DOMAIN-NEGOTIATION CTA - "Don't see your perfect domain?"
   ============================================================================ */

.negotiate-cta {
  margin-top: clamp(40px, 6vh, 72px);
  padding: clamp(var(--sp-8), 5vw, var(--sp-12));
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(16, 185, 129, 0.1), transparent 60%),
    radial-gradient(80% 100% at 100% 100%, rgba(var(--accent-rgb), 0.12), transparent 60%), var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-10));
  align-items: center;
}
@media (max-width: 880px) {
  .negotiate-cta {
    grid-template-columns: 1fr;
  }
}
.negotiate-cta__eyebrow {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
.negotiate-cta__title {
  font-size: var(--type-h2);
  margin: var(--sp-3) 0 0;
  color: var(--ink-primary);
  line-height: var(--lh-tight);
  max-width: 24ch;
}
.negotiate-cta__body {
  margin: var(--sp-4) 0 var(--sp-6);
  color: var(--ink-secondary);
  max-width: 60ch;
  font-size: var(--type-body-lg);
  line-height: var(--lead-body);
}
.negotiate-cta__row {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.negotiate-cta__form {
  background: var(--bg-elev-2);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
}
.negotiate-cta__form label {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  color: var(--ink-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.negotiate-cta__form input,
.negotiate-cta__form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--bg-elev-1);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: var(--type-body);
}
.negotiate-cta__form textarea {
  min-height: 80px;
  resize: vertical;
}
.negotiate-cta__form input:focus,
.negotiate-cta__form textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-faint);
}

/* ============================================================================
   SAFEGUARDING MOAT
   ============================================================================ */

.safeguard {
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(var(--accent-rgb), 0.1), transparent 60%),
    radial-gradient(80% 100% at 100% 100%, rgba(96, 165, 250, 0.06), transparent 60%), var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: var(--sp-12);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-10);
  align-items: center;
}
@media (max-width: 900px) {
  .safeguard {
    grid-template-columns: 1fr;
    padding: var(--sp-8);
  }
}
.safeguard__title {
  font-size: var(--type-h2);
  margin: 0;
}
.safeguard__body {
  margin-top: var(--sp-4);
  color: var(--ink-secondary);
  max-width: 56ch;
}
.safeguard__stat .stat__value {
  font-size: clamp(2.5rem, 5vw, 4rem);
}
.safeguard__stat .stat {
  background: transparent;
  border: none;
  padding: 0;
}

/* ============================================================================
   TRUST STRIP
   ============================================================================ */

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.trust-strip__item {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

/* ============================================================================
   FAQ
   ============================================================================ */

.faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-faint);
}
.faq__item {
  border-bottom: 1px solid var(--line-faint);
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  background: transparent;
  border: none;
  padding: var(--sp-5) 0;
  font-family: var(--font-sans);
  font-size: var(--type-body-lg);
  font-weight: var(--weight-mid);
  color: var(--ink-primary);
  text-align: left;
  cursor: pointer;
  letter-spacing: var(--tracking-body);
}
.faq__q:hover {
  color: var(--accent);
}
.faq__q::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--ink-tertiary);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq__item[data-open="true"] .faq__q::after {
  content: "-";
}
/* FAQ panel animates open/closed via grid-template-rows 0fr -> 1fr.
   The single child collapses with the row; min-height: 0 lets the row
   actually go to zero.  No JS height calculation needed. */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  color: var(--ink-secondary);
  font-size: var(--type-body);
  max-width: 68ch;
  overflow: hidden;
  transition:
    grid-template-rows var(--dur-base) var(--ease-out),
    padding var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
  opacity: 0;
  padding-bottom: 0;
}
.faq__a > * {
  min-height: 0;
}
.faq__item[data-open="true"] .faq__a {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-bottom: var(--sp-5);
}
.faq__a[hidden] {
  display: grid;
}

/* ============================================================================
   FINAL CTA STRIP
   ============================================================================ */

.cta-strip {
  background: linear-gradient(180deg, var(--bg-elev-1) 0%, var(--bg-canvas) 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: var(--sp-12);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: "";
  position: absolute;
  inset: -50% -10% auto -10%;
  height: 200%;
  background: var(--grad-aurora);
  opacity: 0.6;
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.cta-strip__inner {
  position: relative;
  z-index: 1;
}
.cta-strip h2 {
  font-size: var(--type-h1);
  max-width: 26ch;
  margin-inline: auto;
}
.cta-strip p {
  color: var(--ink-secondary);
  margin-top: var(--sp-3);
  max-width: 56ch;
  margin-inline: auto;
}
.cta-strip .t-eyebrow {
  justify-content: center;
}
.cta-strip__row {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}
.cta-strip__faces {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: var(--sp-4);
}
.cta-strip__face {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg-elev-1);
  background: var(--bg-elev-2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.cta-strip__face + .cta-strip__face {
  margin-left: -16px;
}
.cta-strip--gradient {
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.1) 0%, var(--bg-elev-1) 60%, var(--bg-canvas) 100%);
  border-color: rgba(var(--accent-rgb), 0.18);
}

/* ============================================================================
   SERVICE HERO
   Two-column hero for software/advertise child pages.  Copy on left, image
   on the right (stacks under 900px).  Image has a soft accent halo + rounded
   corners + subtle inset to feel embedded in the design system.
   ============================================================================ */

.service-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(56px, 8vh, 96px) clamp(40px, 6vh, 72px);
  overflow: hidden;
}
.service-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 78% 20%, rgba(var(--accent-rgb), 0.22), transparent 60%),
    radial-gradient(50% 70% at 10% 0%, rgba(96, 165, 250, 0.1), transparent 60%);
  z-index: -1;
  pointer-events: none;
}
.service-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-12));
  align-items: center;
}
@media (max-width: 980px) {
  .service-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}
.service-hero--single .service-hero__inner {
  grid-template-columns: 1fr;
  max-width: 920px;
}
.service-hero--single .service-hero__title {
  max-width: 28ch;
}
.service-hero--single .service-hero__stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .service-hero--single .service-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.service-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.service-hero__title {
  font-size: var(--type-h1);
  margin: 0;
  max-width: 22ch;
  color: var(--ink-primary);
  line-height: var(--lead-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-display);
}
.service-hero__title .t-display--accent {
  background: var(--grad-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.service-hero__lead {
  max-width: 56ch;
  color: var(--ink-secondary);
  font-size: var(--type-body-lg);
  line-height: var(--lead-body);
  margin: 0;
}

.service-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-2);
}
@media (max-width: 540px) {
  .service-hero__stats {
    grid-template-columns: 1fr;
  }
}
.service-hero__stat {
  padding: var(--sp-4);
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.service-hero__stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  color: var(--ink-primary);
  font-weight: var(--weight-bold);
  margin: 0;
  letter-spacing: -0.01em;
}
.service-hero__stat-label {
  margin: var(--sp-1) 0 0;
  color: var(--ink-tertiary);
  font-size: var(--type-micro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.service-hero__visual {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow:
    0 30px 80px -30px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--line-soft) inset;
  background: var(--bg-elev-2);
  isolation: isolate;
}

/* Domain-page variant: tighter stats to fit the longer "Offers over £35,000"
   value comfortably across three columns, and slightly relaxed title sizing
   because the title is a domain name in monospace not a marketing headline. */
.service-hero--domain .service-hero__title {
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: -0.005em;
  word-break: break-all;
}
.service-hero--domain .service-hero__stat-value {
  font-size: 1.05rem;
  white-space: nowrap;
}
.service-hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 100%, rgba(var(--accent-rgb), 0.18), transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.service-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10.67;
  object-fit: cover;
}

/* ============================================================================
   SERVICE BODY: feature grid + spec list + process timeline + faq accordion
   ============================================================================ */

.service-section {
  padding-block: clamp(40px, 6vh, 72px);
}
.service-section--elev {
  background: var(--bg-elev-1);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

.feature-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.feature-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: 0.875rem;
  margin-bottom: var(--sp-2);
}
.feature-card__title {
  font-size: 1.05rem;
  margin: 0;
  color: var(--ink-primary);
  font-weight: var(--weight-heading);
}
.feature-card__body {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--type-body);
  line-height: var(--lead-body);
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
@media (max-width: 700px) {
  .usecase-grid {
    grid-template-columns: 1fr;
  }
}
.usecase-card {
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-elev-2);
  border: 1px solid var(--line-faint);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  color: var(--ink-secondary);
  font-size: var(--type-body);
}

.process-timeline {
  list-style: none;
  padding: 0;
  margin: var(--sp-8) 0 0;
  counter-reset: step;
  display: grid;
  gap: var(--sp-3);
}
.process-timeline li {
  position: relative;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-12) + var(--sp-2));
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  counter-increment: step;
  color: var(--ink-secondary);
}
.process-timeline li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: 0.9rem;
}

.faq-accordion {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}
.faq-accordion details {
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 0;
  overflow: hidden;
}
.faq-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-4) var(--sp-5);
  font-weight: var(--weight-heading);
  color: var(--ink-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}
.faq-accordion summary::-webkit-details-marker {
  display: none;
}
.faq-accordion summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.4rem;
  color: var(--accent);
  transition: transform var(--dur-base) var(--ease-out);
  line-height: 1;
}
.faq-accordion details[open] summary::after {
  transform: rotate(45deg);
}
.faq-accordion .faq-accordion__body {
  padding: 0 var(--sp-5) var(--sp-4);
  color: var(--ink-secondary);
  font-size: var(--type-body);
  line-height: var(--lead-body);
}

.service-cta {
  margin-top: clamp(40px, 6vh, 72px);
  padding: clamp(var(--sp-8), 5vw, var(--sp-12));
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 100% at 0% 0%, rgba(var(--accent-rgb), 0.18), transparent 60%),
    radial-gradient(60% 100% at 100% 100%, rgba(96, 165, 250, 0.1), transparent 60%), var(--bg-elev-1);
  border: 1px solid var(--accent-glow);
  text-align: center;
}
.service-cta h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--type-h2);
}
.service-cta p {
  margin: 0 auto var(--sp-6);
  max-width: 56ch;
  color: var(--ink-secondary);
}
.service-cta__row {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================================
   PILLAR HERO (advertise / software / domains / etc)
   ============================================================================ */

.pillar-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(72px, 10vh, 120px) clamp(48px, 8vh, 80px);
  overflow: hidden;
}
.pillar-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.pillar-hero__title {
  font-size: var(--type-h1);
  margin: 0;
  max-width: 22ch;
  color: var(--ink-primary);
}
.pillar-hero__title .t-display--accent {
  background: var(--grad-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pillar-hero__lead {
  max-width: 64ch;
  color: var(--ink-secondary);
  font-size: var(--type-body-lg);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  color: var(--ink-quaternary);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.crumbs a {
  color: var(--ink-tertiary);
}
.crumbs a:hover {
  color: var(--ink-primary);
}
.crumbs__sep {
  color: var(--ink-quaternary);
}

/* ============================================================================
   PILLAR BODY
   ============================================================================ */

.pillar-body {
  padding-block: var(--sp-16);
}
.pillar-body h2 {
  margin-top: var(--sp-16);
  margin-bottom: var(--sp-4);
  font-size: var(--type-h2);
}
.pillar-body h2:first-child {
  margin-top: 0;
}
.pillar-body h3 {
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-3);
  font-size: var(--type-h3);
  color: var(--ink-primary);
}
.pillar-body p {
  color: var(--ink-secondary);
  font-size: var(--type-body-lg);
  max-width: 68ch;
}
.pillar-body p + p {
  margin-top: var(--sp-3);
}
.pillar-body ul,
.pillar-body ol {
  color: var(--ink-secondary);
  font-size: var(--type-body-lg);
  margin-top: var(--sp-3);
  max-width: 68ch;
}
.pillar-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(var(--accent-rgb), 0.4);
  text-underline-offset: 3px;
}
.pillar-body a:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent);
}

.pillar-body {
  position: relative;
  display: flow-root;
}
.pillar-body > h2,
.pillar-body > h3 {
  letter-spacing: -0.025em;
}
.pillar-body > h2 {
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line-faint);
}
.pillar-body > h2:first-child {
  padding-top: 0;
  border-top: 0;
}
.pillar-body > table,
.pillar-body > .research-table,
.pillar-body > .portfolio-table {
  margin-block: var(--sp-6) var(--sp-10);
}
.pillar-body > p,
.pillar-body > ul,
.pillar-body > ol {
  line-height: 1.72;
}

/* ============================================================================
   FORM
   ============================================================================ */

.form {
  display: grid;
  gap: var(--sp-5);
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.form-row--cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
@media (max-width: 600px) {
  .form-row--cols {
    grid-template-columns: 1fr;
  }
}
.form label {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-tertiary);
}
.form input,
.form select,
.form textarea {
  background: var(--bg-inset);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  color: var(--ink-primary);
  font: var(--weight-body) var(--type-body)/1.4 var(--font-sans);
  padding: 12px 14px;
  width: 100%;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.form textarea {
  min-height: 140px;
  resize: vertical;
  font-family: var(--font-sans);
}
/* Native select chrome stripped + custom chevron so the dark theme reads
   consistently; the chevron is mask-painted in currentColor so it flips
   with the theme automatically. */
.form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
  padding-right: 38px;
}
.form select::-ms-expand {
  display: none;
}
.form input::placeholder,
.form textarea::placeholder {
  color: var(--ink-quaternary);
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-faint);
}
/* Invalid + error states.  :user-invalid is the modern, focus-aware
   selector (only marks the field after the user has tried to submit /
   interacted), with [aria-invalid] as a JS-driven fallback. */
.form input:user-invalid,
.form select:user-invalid,
.form textarea:user-invalid,
.form [aria-invalid="true"] {
  border-color: var(--signal-danger);
  background: color-mix(in srgb, var(--signal-danger) 6%, var(--bg-inset));
}
.form input:user-invalid:focus,
.form select:user-invalid:focus,
.form textarea:user-invalid:focus,
.form [aria-invalid="true"]:focus {
  border-color: var(--signal-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal-danger) 22%, transparent);
}
.form-error {
  display: none;
  font-size: var(--type-small);
  color: var(--signal-danger);
}
.form input:user-invalid ~ .form-error,
.form select:user-invalid ~ .form-error,
.form textarea:user-invalid ~ .form-error,
.form [aria-invalid="true"] ~ .form-error {
  display: block;
}
.form-hint {
  font-size: var(--type-small);
  color: var(--ink-tertiary);
}
.form-hp {
  position: absolute;
  left: -9999px;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* ============================================================================
   RELATED PAGES STRIP
   ============================================================================ */

.related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 880px) {
  .related {
    grid-template-columns: 1fr;
  }
}
.related__card {
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  text-decoration: none;
  color: var(--ink-primary);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition:
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}
.related__card:hover {
  border-color: var(--line-strong);
  background: var(--bg-elev-2);
  color: var(--ink-primary);
}
.related__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-tertiary);
}
.related__title {
  font-size: var(--type-body-lg);
  color: var(--ink-primary);
}
.related__arrow {
  margin-top: auto;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--type-small);
}

/* ============================================================================
   CONTACT SPLIT LAYOUT
   ============================================================================ */

.contact-split {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--sp-12);
  align-items: start;
}
@media (max-width: 880px) {
  .contact-split {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

/* ============================================================================
   THEME TOGGLE BUTTON  (lives in the nav, sun/moon SVG swap)
   ============================================================================ */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink-secondary);
  cursor: pointer;
  padding: 0;
  transition:
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}
.theme-toggle:hover {
  color: var(--ink-primary);
  border-color: var(--line-bright);
  background: var(--bg-elev-1);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}
.theme-toggle .icon-sun {
  display: none;
}
.theme-toggle .icon-moon {
  display: block;
}
[data-theme="light"] .theme-toggle .icon-sun {
  display: block;
}
[data-theme="light"] .theme-toggle .icon-moon {
  display: none;
}

/* ============================================================================
   NETVIEW SWITCH (Grid <-> Table on the home network section)
   ============================================================================ */

.netview {
  display: block;
  padding: clamp(var(--sp-5), 2.4vw, var(--sp-7));
  border-radius: clamp(var(--r-lg), 2vw, 24px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%), var(--bg-elev-1);
  border: 1px solid var(--line-faint);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 60px -36px rgba(0, 0, 0, 0.75);
}
[data-theme="light"] .netview {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 40%), var(--bg-elev-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 14px 40px -28px rgba(15, 15, 22, 0.12);
}
.netview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.netview__hint {
  margin: 0;
}

/* Generic scrolling wrapper for wide tables on narrow viewports. */
.u-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.netview__switch {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
}
.netview__switch button {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  cursor: pointer;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition:
    color var(--dur-fast),
    background var(--dur-fast);
}
.netview__switch button[aria-selected="true"] {
  background: var(--bg-elev-3);
  color: var(--ink-primary);
}
.netview__switch button:hover {
  color: var(--ink-primary);
}
.netview__switch button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.netview__table {
  width: 100%;
}
.netview__table .dtable th[aria-sort] {
  cursor: pointer;
  user-select: none;
}
.netview__table .dtable th[aria-sort]:hover {
  color: var(--ink-primary);
}
.netview__table .dtable th[aria-sort]::after {
  content: "\2195";
  margin-left: 6px;
  opacity: 0.4;
  font-family: var(--font-mono);
}
.netview__table .dtable th[aria-sort="ascending"]::after {
  content: "\2191";
  opacity: 1;
  color: var(--accent);
}
.netview__table .dtable th[aria-sort="descending"]::after {
  content: "\2193";
  opacity: 1;
  color: var(--accent);
}

/* ============================================================================
   ACCESSIBILITY PANEL  (left slide-out)
   ============================================================================ */

.a11y-trigger {
  position: fixed;
  left: var(--sp-4);
  bottom: var(--sp-4);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-canvas);
  color: var(--ink-inverse);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  transition:
    bottom var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  box-shadow:
    0 10px 30px -8px rgba(0, 0, 0, 0.45),
    0 0 0 1px var(--accent-glow);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.a11y-trigger:hover {
  transform: scale(1.06);
  box-shadow:
    0 12px 36px -8px rgba(0, 0, 0, 0.55),
    0 0 0 4px var(--accent-glow);
}
.a11y-trigger:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.a11y-trigger svg {
  width: 22px;
  height: 22px;
}
/* When the cookie banner is open on a narrow viewport, lift the a11y
   trigger above it so the two floating UI elements never collide.
   :has() is used so the trigger only lifts when the banner is actually
   visible; older browsers without :has() simply keep both pinned. */
@media (max-width: 600px) {
  body:has(.cookie-banner[data-open="true"]) .a11y-trigger {
    bottom: calc(var(--sp-4) + 200px);
  }
}

.a11y-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  visibility: hidden;
}
.a11y-modal[data-open="true"] {
  pointer-events: auto;
  visibility: visible;
}
.a11y-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.a11y-modal[data-open="true"] .a11y-modal__backdrop {
  opacity: 1;
}

.a11y-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  background: var(--bg-elev-1);
  border-right: 1px solid var(--line-soft);
  padding: var(--sp-8) var(--sp-6);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.a11y-modal[data-open="true"] .a11y-panel {
  transform: translateX(0);
}
.a11y-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}
.a11y-panel__title {
  color: var(--ink-primary);
  font-size: var(--type-h3);
  margin: 0;
}
.a11y-panel__close {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-secondary);
  border-radius: var(--r-sm);
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 16px;
}
.a11y-panel__close:hover {
  color: var(--ink-primary);
  border-color: var(--line-bright);
}
.a11y-panel__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.a11y-panel__group-title {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin: 0;
}
.a11y-panel__radio-row {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
}
.a11y-panel__radio-row label {
  padding: 8px 14px;
  cursor: pointer;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--type-small);
  color: var(--ink-tertiary);
  display: inline-flex;
  align-items: center;
}
.a11y-panel__radio-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.a11y-panel__radio-row input:checked + span,
.a11y-panel__radio-row label:has(input:checked) {
  color: var(--ink-primary);
  background: var(--bg-elev-3);
}
.a11y-panel__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elev-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  cursor: pointer;
}
.a11y-panel__toggle:hover {
  border-color: var(--line-strong);
}
.a11y-panel__toggle-label {
  color: var(--ink-primary);
  font-size: var(--type-body);
}
.a11y-panel__toggle-desc {
  color: var(--ink-tertiary);
  font-size: var(--type-small);
  display: block;
  margin-top: 2px;
}
.a11y-panel__toggle input {
  appearance: none;
  width: 40px;
  height: 22px;
  background: var(--bg-elev-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast);
}
.a11y-panel__toggle input::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: var(--ink-secondary);
  border-radius: 50%;
  transition:
    left var(--dur-fast),
    background var(--dur-fast);
}
.a11y-panel__toggle input:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.a11y-panel__toggle input:checked::after {
  left: 21px;
  background: var(--ink-inverse);
}
.a11y-panel__toggle input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.a11y-panel__reset {
  margin-top: var(--sp-2);
}
.a11y-panel__note {
  color: var(--ink-tertiary);
  font-size: var(--type-small);
}

/* ============================================================================
   COOKIE CONSENT BANNER
   ============================================================================ */

.cookie-banner {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  margin-left: auto;
  margin-right: auto;
  max-width: 560px;
  z-index: 70;
  background: var(--bg-elev-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
  transform: translateY(140%);
  opacity: 0;
  transition:
    transform 380ms var(--ease-out-soft),
    opacity 200ms var(--ease-out);
  visibility: hidden;
}
.cookie-banner[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.cookie-banner__title {
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--sp-2);
}
.cookie-banner__text {
  color: var(--ink-secondary);
  font-size: var(--type-small);
  margin: 0 0 var(--sp-4);
  line-height: 1.5;
}
.cookie-banner__primary {
  display: block;
  width: 100%;
  background: var(--accent);
  color: var(--ink-inverse);
  border: 0;
  border-radius: var(--r-sm);
  padding: 14px var(--sp-5);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--type-body);
  cursor: pointer;
  text-align: center;
  transition: background var(--dur-base);
}
.cookie-banner__primary:hover {
  background: var(--accent-hover);
}
.cookie-banner__primary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.cookie-banner__secondary {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  margin-top: var(--sp-3);
  font-size: var(--type-small);
}
.cookie-banner__secondary a,
.cookie-banner__secondary button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-tertiary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}
.cookie-banner__secondary a:hover,
.cookie-banner__secondary button:hover {
  color: var(--ink-primary);
  text-decoration-color: currentColor;
}
.cookie-banner__secondary button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Manage-cookies link in the footer is just an inline button */
.cookie-reopen {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.cookie-reopen:hover {
  color: var(--ink-primary);
}

/* ============================================================================
   V3 VISUAL AUTHORITY
   Shared polish layer that makes the long-tail generated pages, hub pages and
   service pages feel like one product.  Keep this late in the cascade so it
   can neutralise older `.pillar-*` and compat rules without large HTML churn.
   ============================================================================ */

body {
  background:
    radial-gradient(1200px 720px at 50% -18%, rgba(var(--accent-rgb), 0.12), transparent 64%),
    radial-gradient(780px 420px at 0% 18%, rgba(96, 165, 250, 0.05), transparent 62%), var(--bg-canvas);
}

[data-theme="light"] body {
  background:
    radial-gradient(1100px 680px at 50% -22%, rgba(var(--accent-rgb), 0.08), transparent 64%),
    radial-gradient(760px 420px at 0% 18%, rgba(64, 90, 180, 0.04), transparent 62%), var(--bg-canvas);
}

.page-bg,
.page-wrap,
.sheet {
  background: transparent;
}

.section {
  padding-block: clamp(72px, 10vw, 112px);
}
.section--sm {
  padding-block: clamp(48px, 7vw, 72px);
}
.section-bg-elev,
.service-section--elev {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 30%, rgba(255, 255, 255, 0.012)), var(--bg-elev-1);
  border-block: 1px solid var(--line-faint);
}

.btn-primary {
  background: var(--ink-primary);
  color: var(--ink-inverse);
}
.btn-primary:hover {
  background: var(--accent);
  color: var(--ink-inverse);
}
.btn-accent {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  color: #08080b;
  box-shadow: 0 14px 34px -22px var(--accent);
}
[data-theme="light"] .btn-accent {
  color: #ffffff;
}
.btn-accent:hover {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: #ffffff;
  box-shadow: 0 18px 44px -24px var(--accent);
}
.btn-secondary {
  background: color-mix(in srgb, var(--bg-elev-1) 82%, transparent);
  border-color: var(--line-strong);
}
.btn-secondary:hover {
  background: var(--bg-elev-2);
  border-color: var(--line-bright);
}
.surface,
.card,
.stat,
.tier-card,
.feature-card,
.person-card,
.domain-card,
.related__card,
.usecase-card,
.netgrid__cell,
.spotlight__stat {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 56%), var(--bg-elev-1);
  border-color: var(--line-soft);
  box-shadow: var(--shadow-card);
}
.card,
.tier-card,
.feature-card,
.person-card,
.domain-card,
.related__card {
  border-radius: var(--r-xl);
}
.card:hover,
.tier-card:hover,
.feature-card:hover,
.person-card:hover,
.domain-card:hover,
.related__card:hover {
  border-color: var(--line-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 58%), var(--bg-elev-2);
  box-shadow: var(--shadow-panel);
}
/* Netgrid cells already define their own accent-border hover with a
   translateY(-2px) lift; leaving them out of the group rule above keeps
   the accent border from being clobbered by --line-strong. */
.netgrid__cell:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 58%), var(--bg-elev-2);
  box-shadow:
    0 18px 42px -22px rgba(0, 0, 0, 0.72),
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.card__title,
.feature-card__title,
.related__title,
.domain-card__name {
  letter-spacing: -0.02em;
}
.card__body,
.feature-card__body,
.domain-card__tag,
.tier-card__desc {
  line-height: 1.65;
}

.card-grid,
.card-grid--3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
@media (max-width: 900px) {
  .card-grid,
  .card-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .card-grid,
  .card-grid--3 {
    grid-template-columns: 1fr;
  }
}

.hero,
.pillar-hero,
.service-hero {
  padding-block: clamp(72px, 11vw, 132px) clamp(52px, 8vw, 92px);
}
.hero::before,
.pillar-hero::before,
.service-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(var(--accent-rgb), 0.16), transparent 64%),
    radial-gradient(700px 420px at 8% 18%, rgba(96, 165, 250, 0.08), transparent 66%);
  pointer-events: none;
  z-index: -1;
}
.pillar-hero {
  isolation: isolate;
}
.pillar-hero .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.pillar-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin: 0;
}
.pillar-hero__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-faint);
}
.pillar-hero__title,
.service-hero__title {
  font-size: clamp(2.25rem, 4.6vw, 4rem);
  line-height: var(--lead-tight);
  letter-spacing: -0.04em;
  max-width: 24ch;
}
.pillar-hero__lead,
.service-hero__lead {
  max-width: 62ch;
  line-height: 1.65;
}
.pillar-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.service-hero__inner {
  gap: clamp(var(--sp-8), 6vw, var(--sp-16));
}
.service-hero__copy {
  gap: var(--sp-5);
}
.service-hero__visual {
  border: 1px solid var(--line-soft);
  box-shadow:
    var(--shadow-panel),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.service-hero__visual::after {
  background:
    linear-gradient(180deg, transparent 48%, var(--scrim-media)),
    radial-gradient(80% 70% at 50% 100%, var(--accent-glow), transparent 62%);
}
.service-hero__stat {
  background: var(--bg-elev-1);
  box-shadow: var(--shadow-card);
}

.hero__figure,
.hero__stats,
.fact-panel,
.dtable-wrap,
.research-table,
.portfolio-table,
.form,
.cta-strip,
.service-cta,
.page-footer-cta,
.negotiate-cta,
.spotlight {
  box-shadow: var(--shadow-panel);
}
.hero__figure {
  border-radius: clamp(var(--r-lg), 2vw, 28px);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.11), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 65%), var(--bg-elev-1);
}
.hero__stats {
  border-radius: var(--r-xl);
}
.hero__stats-cell {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent);
}
.logo-strip__chip {
  background: var(--glass-pill);
}

.netgrid {
  gap: var(--sp-3);
}
.netgrid__cell {
  min-height: 92px;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 18px);
}
.netgrid__name {
  letter-spacing: -0.02em;
}
.netgrid__cell:has(.growth) .netgrid__name {
  padding-right: 0;
}
.netgrid__meta {
  margin-top: auto;
}

.dtable,
.research-table,
.portfolio-table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--bg-elev-1);
}
.dtable th,
.research-table th,
.portfolio-table th {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent), var(--bg-elev-2) !important;
}
.dtable td,
.research-table td,
.portfolio-table td {
  line-height: 1.55;
}
.dtable tr:hover td,
.research-table tr:hover td,
.portfolio-table tbody tr:hover td {
  background: var(--bg-elev-2) !important;
}

.research-cite {
  margin: var(--sp-5) 0 var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--accent);
  background: var(--bg-elev-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.research-cite p {
  margin: 0;
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--ink-primary);
}
.research-cite a {
  word-break: break-all;
}

.build-grid,
.domain-grid,
.tier-grid,
.feature-grid,
.routes {
  gap: var(--sp-5);
}
.build-card__media::after {
  background: linear-gradient(180deg, transparent 48%, var(--scrim-media) 100%);
}
.build-card__inner {
  padding: var(--sp-6);
}

.tier-card--featured {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow:
    var(--shadow-panel),
    0 0 0 1px var(--accent-glow);
}
.tier-card__price {
  letter-spacing: -0.04em;
}

.spotlight,
.cta-strip,
.service-cta,
.negotiate-cta,
.page-footer-cta {
  border-radius: clamp(var(--r-lg), 2vw, 28px);
  background:
    radial-gradient(800px 520px at 0% 0%, rgba(var(--accent-rgb), 0.14), transparent 62%),
    radial-gradient(780px 500px at 100% 100%, rgba(96, 165, 250, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 62%), var(--bg-elev-1) !important;
  border: 1px solid var(--accent-glow);
}
.page-footer-cta {
  max-width: var(--w-content);
  margin: clamp(var(--sp-12), 8vw, var(--sp-20)) auto 0;
  padding: clamp(var(--sp-8), 5vw, var(--sp-12)) var(--pad-x);
  text-align: center;
}
.page-footer-cta h2 {
  margin-inline: auto;
  font-size: var(--type-h2);
}
.page-footer-cta p {
  max-width: 58ch;
  margin: var(--sp-3) auto var(--sp-6);
  color: var(--ink-secondary) !important;
}

/* Related-strip: container-bound pill list at the foot of generated profile
   pages.  Used on city, ISP, altnet, compare, domain and software templates. */
.related-strip {
  max-width: var(--w-content);
  margin: clamp(var(--sp-12), 6vw, var(--sp-16)) auto 0;
  padding: clamp(var(--sp-6), 4vw, var(--sp-8)) var(--pad-x);
  border-radius: clamp(var(--r-lg), 2vw, 28px);
  border: 1px solid var(--line-soft);
  background: var(--bg-elev-1) !important;
}
.related-strip__title {
  font-size: var(--type-h3);
  margin: 0 0 var(--sp-4);
  color: var(--ink-primary);
}
.related-strip__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.related-strip__list li {
  margin: 0;
}
.related-strip__list a {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  color: var(--ink-secondary);
  text-decoration: none;
  font-size: var(--type-small);
  transition:
    border-color 0.18s ease,
    color 0.18s ease,
    background 0.18s ease;
}
.related-strip__list a:hover {
  border-color: var(--accent);
  color: var(--ink-primary);
  background: var(--bg-elev-2);
}

.footer {
  background: radial-gradient(900px 420px at 15% 0%, rgba(var(--accent-rgb), 0.08), transparent 64%), var(--bg-elev-1);
  margin-top: clamp(var(--sp-16), 10vw, var(--sp-32));
}
.footer__col a:hover,
.footer__meta a:hover,
.cookie-reopen:hover {
  color: var(--accent);
}

@media (max-width: 760px) {
  .hero__proof {
    border-radius: var(--r-lg);
  }
  .hero__figure {
    padding: var(--sp-6);
  }
  .netgrid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
}

/* ============================================================================
   COMPAT.  Dark-themed fallbacks for any legacy v1/v1.5 markup that still
   ships on Sprint 2/3 pages until they are rewritten.  Keeps navigation
   functional on every page rather than hiding it.
   ============================================================================ */

main {
  display: block;
}

/* Hide aggressive legacy background effects (they conflict with v2 aurora) */
.bgfx,
.hero-v2__bg {
  display: none !important;
}

/* Legacy header: restyle as v2 nav */
.site-header,
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 8, 11, 0.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line-faint);
  padding: 0 !important;
}
.site-header .header-inner,
.topbar .topbar__inner {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding: 12px var(--pad-x) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  min-height: auto !important;
}
.site-header .logo,
.topbar .logo,
.topbar__logo {
  font-family: var(--font-sans) !important;
  font-weight: var(--weight-bold) !important;
  font-size: 0.95rem !important;
  letter-spacing: -0.01em !important;
  color: var(--ink-primary) !important;
  text-decoration: none !important;
}
.site-header .main-nav,
.topbar .topbar__nav {
  display: flex !important;
  gap: var(--sp-1);
  flex-direction: row !important;
  width: auto !important;
}
.site-header .main-nav a,
.topbar .topbar__nav a {
  padding: 8px 12px !important;
  color: var(--ink-tertiary) !important;
  font-size: var(--type-body) !important;
  text-decoration: none !important;
  border-radius: var(--r-sm);
  font-weight: var(--weight-body) !important;
}
.site-header .main-nav a:hover,
.topbar .topbar__nav a:hover {
  color: var(--ink-primary) !important;
  background: var(--bg-elev-1);
}
.site-header .btn-nav-cta,
.topbar__cta {
  display: inline-flex !important;
  align-items: center;
  height: auto !important;
  padding: 10px 18px !important;
  border-radius: var(--r-sm) !important;
  background: var(--ink-primary) !important;
  color: var(--ink-inverse) !important;
  box-shadow: none !important;
  font-weight: var(--weight-mid) !important;
  font-size: var(--type-body) !important;
  text-decoration: none;
}
.site-header .btn-nav-cta:hover,
.topbar__cta:hover {
  background: #ffffff !important;
  color: var(--ink-inverse) !important;
  transform: translateY(-1px);
}
.topbar__cta-arrow {
  display: none !important;
}
.site-header .nav-toggle {
  background: transparent !important;
  color: var(--ink-primary) !important;
  border-color: var(--line-strong) !important;
}

/* Legacy footer: restyle dark */
.site-footer {
  background: var(--bg-elev-1) !important;
  border-top: 1px solid var(--line-faint) !important;
  color: var(--ink-tertiary) !important;
  padding: var(--sp-12) var(--pad-x) !important;
  margin-top: var(--sp-24);
  text-align: center;
}
.site-footer p {
  color: var(--ink-tertiary);
}
.site-footer a,
.site-footer__pillars a,
.site-footer__network a,
.site-footer__links a {
  color: var(--ink-secondary) !important;
}
.site-footer a:hover {
  color: var(--accent) !important;
}
.social-links a {
  background: var(--bg-elev-2) !important;
  border-color: var(--line-soft) !important;
  color: var(--ink-secondary) !important;
}
.social-links a:hover {
  background: var(--bg-elev-3) !important;
  color: var(--ink-primary) !important;
}

/* Legacy hero v2 (light) overridden to dark for any leftover usage */
.hero.hero-v2 {
  background: var(--bg-canvas) !important;
  color: var(--ink-primary) !important;
  padding-top: clamp(64px, 10vh, 96px) !important;
  padding-bottom: clamp(48px, 8vh, 64px) !important;
}
.hero.hero-v2 #hero-title,
.hero-v2__title {
  color: var(--ink-primary) !important;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-v2__pill {
  background: var(--bg-elev-2);
  border-color: var(--line-strong);
  color: var(--ink-tertiary);
}
.hero-v2__intro,
.hero-v2__tone {
  color: var(--ink-secondary) !important;
}
.hero-v2__card {
  background: var(--bg-elev-1);
  border-color: var(--line-soft);
  box-shadow: none;
}
.hero-v2__card-title {
  color: var(--ink-primary);
}
.hero-v2__card-value,
.hero-v2__card-value .metric-value {
  color: var(--accent) !important;
}
.hero-v2__card-desc,
.hero-v2__check {
  color: var(--ink-secondary);
}
.hero-v2__btn-primary {
  background: var(--accent) !important;
  color: var(--ink-inverse) !important;
  box-shadow: none !important;
}
.hero-v2__btn-primary:hover {
  background: var(--accent-hover) !important;
}
.hero-v2__btn-secondary {
  border-color: var(--line-strong) !important;
  color: var(--ink-primary) !important;
  background: transparent !important;
}
.hero-v2__btn-secondary:hover {
  background: var(--bg-elev-1) !important;
  color: var(--ink-primary) !important;
}
.hero-v2__disclosure {
  color: var(--ink-tertiary) !important;
}

/* Legacy sections inherit dark canvas */
.section {
  padding: var(--sp-16) 0;
}
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-tertiary);
}
.section-bg-elev,
.section-portfolio,
.section-trust,
.section-tenancy,
.section-tech,
.section-faq,
.section-contact,
.section-about,
.network-reach-section {
  background: var(--bg-elev-1) !important;
}
.network-reach-section::before {
  display: none !important;
}

/* Legacy breadcrumbs */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  color: var(--ink-tertiary);
  padding: var(--sp-4) 0;
}
.breadcrumb a {
  color: var(--ink-tertiary);
}
.breadcrumb a:hover {
  color: var(--accent);
}

/* Legacy tables to dark dtable look */
.research-table,
.portfolio-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--type-small);
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.research-table th,
.portfolio-table th {
  text-align: left;
  padding: 14px 16px;
  background: var(--bg-elev-2) !important;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-tertiary) !important;
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-mid);
}
.research-table td,
.portfolio-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-faint);
  color: var(--ink-secondary) !important;
  background: transparent !important;
}
.research-table tr:hover td,
.portfolio-table tbody tr:hover td {
  background: var(--bg-elev-2) !important;
}

/* Legacy cards and surfaces inherit dark */
.surface,
.tier-card,
.three-routes__card,
.card-grid__item,
.related-strip,
.domain-card,
.case-study,
.estimator,
.rate-card,
.tech-option-card,
.tenancy-option,
.trust-pillar,
.trust-contact-block,
.hero-v2__card,
.why-we-exist__option,
.network-reach-simple__card,
.how-card,
.tool-card,
.tenancy-tier-card,
.metrics-table,
.metrics-table-card,
.portfolio-card,
.network-reach__kpi {
  background: var(--bg-elev-1) !important;
  border-color: var(--line-soft) !important;
  color: var(--ink-secondary);
  box-shadow: none !important;
}
.pillar-hero,
.page-footer-cta {
  background: transparent !important;
}
.page-footer-cta {
  border: 1px solid var(--line-soft);
  background: var(--bg-elev-1) !important;
}
.page-footer-cta h2,
.page-footer-cta p {
  color: var(--ink-primary) !important;
}

/* Legacy text inherits ink */
.about-content,
.tenancy-lead,
.tenancy-disclosure,
.why-we-exist__intro p,
.why-we-exist__close,
.why-we-exist__contact,
.network-reach-simple__intro,
.network-reach-simple__close,
.network-reach-simple__smallprint,
.tenancy-option__desc,
.tenancy-option__spec,
.tenancy-note,
.tech-lead,
.tech-option-desc,
.tech-option-examples,
.tech-disclaimer,
.tech-pricing-note,
.trust-pillar-body,
.trust-talk-lead,
.trust-contact-details,
.trust-contact-note,
.faq-intro,
.faq-answer,
.last-checked,
.listings-count,
.portfolio-intro,
.metrics-table-card .card-label,
.metrics-explained__body,
.metrics-explained__sources,
.summary-strip__body,
.summary-strip__contact,
.summary-inline__p,
.summary-bullets,
.case-study-disclosure,
.estimator-disclaimer {
  color: var(--ink-secondary) !important;
}

.tenancy-title,
.tech-options-title,
.trust-pillar-title,
.trust-talk-title,
.faq-group-title,
.faq-end-cta-title,
.why-we-exist__title,
.why-we-exist__subtitle,
.network-reach-simple__title,
.metrics-explained__title,
.summary-strip__title {
  color: var(--ink-primary) !important;
}

.tenancy-option__price,
.tenancy-option__name,
.tech-option-name,
.tech-option-price,
.tech-price-value,
.rate-card-title,
.rate-card-rate,
.network-reach-simple__card-title,
.hero-v2__title-accent,
.related-network__list li,
.about-content p,
.summary-strip__lead {
  color: var(--ink-primary) !important;
}
.tenancy-option__price,
.tech-option-price,
.tech-price-value,
.rate-card-rate,
.network-reach-simple__card-title {
  color: var(--accent) !important;
}

.about-content,
.pillar-body p,
.pillar-body ul,
.pillar-body ol {
  color: var(--ink-secondary);
}

/* Legacy pill badges */
.pill,
.status-badge,
.badge.pill {
  background: var(--bg-elev-2);
  color: var(--ink-secondary);
  border: 1px solid var(--line-soft);
}
.pill--live,
.status-badge--live {
  color: var(--signal-live);
  background: rgba(74, 222, 128, 0.06);
  border-color: rgba(74, 222, 128, 0.24);
}
.pill--build,
.pill--pending,
.status-badge--pend {
  color: var(--ink-tertiary);
  background: var(--bg-elev-2);
  border-color: var(--line-soft);
}
.pill--dofollow {
  color: var(--signal-live);
}
.tick--green {
  color: var(--signal-live) !important;
}
.metrics-table-uptime--green {
  color: var(--signal-live) !important;
}
.metrics-table-uptime--amber,
.metrics-table-backlinks--amber {
  color: var(--signal-warn) !important;
}

/* Legacy form fields */
.input,
.form input,
.form select,
.form textarea {
  background: var(--bg-inset);
  border: 1px solid var(--line-soft);
  color: var(--ink-primary);
  border-radius: var(--r-sm);
}
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-faint);
}
.form-row label,
.form-group legend,
.checkbox-label,
.checkbox-group label {
  color: var(--ink-tertiary);
}
.required {
  color: var(--signal-danger) !important;
}

/* Legacy hero v1 dark */
.hero {
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--ink-primary) !important;
}
.metric-card {
  background: var(--bg-elev-1) !important;
  border-color: var(--line-soft) !important;
  box-shadow: none !important;
}
.metric-card:hover {
  background: var(--bg-elev-2) !important;
}
.metric-value {
  color: var(--accent) !important;
}
.metric-label,
.metric-note,
.metric-meta {
  color: var(--ink-tertiary) !important;
}
.proof-chip {
  background: var(--bg-elev-2);
  color: var(--ink-secondary);
  border: 1px solid var(--line-soft);
}
.hero-mission,
.hero-positioning,
.hero-sub,
.hero-proof,
.hero-disclosure,
.hero-tenancy-helper,
.hero-audience {
  color: var(--ink-secondary) !important;
}
.hero-link-tertiary {
  color: var(--accent) !important;
}
.hero-ctas .btn-primary {
  background: var(--accent) !important;
  color: var(--ink-inverse) !important;
}
.hero-ctas .btn-primary:hover {
  background: var(--accent-hover) !important;
  color: var(--ink-inverse) !important;
}
.hero-ctas .btn-secondary {
  border-color: var(--line-strong) !important;
  color: var(--ink-primary) !important;
}
.table-impressions-strip,
.summary-inline,
.summary-strip {
  background: var(--bg-elev-1) !important;
  border-color: var(--line-soft) !important;
}
.table-strip-text {
  color: var(--ink-primary);
}
.table-strip-value {
  color: var(--accent);
}
.table-strip-disclosure {
  color: var(--ink-tertiary);
}

/* Legacy modal */
.modal-overlay {
  background: rgba(0, 0, 0, 0.6);
}
.modal-box {
  background: var(--bg-elev-2);
  color: var(--ink-secondary);
  border: 1px solid var(--line-soft);
}
.modal-box h3 {
  color: var(--ink-primary);
}

/* Legacy package cards */
.package-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  color: var(--ink-secondary);
}
.package-card--popular {
  border-color: var(--accent);
}
.package-card h3,
.package-price {
  color: var(--ink-primary);
}
.package-badge {
  background: var(--accent);
  color: var(--ink-inverse);
}

/* Network reach legacy module */
.network-reach__title,
.network-reach__paid-title {
  color: var(--ink-primary);
}
.network-reach__date,
.network-reach__trust,
.network-reach__kpi-label,
.network-reach__kpi-sub,
.network-reach__paid-desc {
  color: var(--ink-tertiary);
}
.network-reach__kpi-value,
.network-reach__table th {
  color: var(--ink-primary);
}
.network-reach__kpi-value--bubble {
  background: rgba(74, 222, 128, 0.08);
  color: var(--signal-live);
}
.network-reach__pill--neutral {
  background: var(--bg-elev-2);
  color: var(--ink-tertiary);
}
.network-reach__pill--tracked {
  background: rgba(74, 222, 128, 0.08);
  color: var(--signal-live);
}
.network-reach__tab {
  color: var(--ink-tertiary);
}
.network-reach__tab[aria-selected="true"].network-reach__tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.network-reach__table,
.network-reach__table th,
.network-reach__table td {
  color: var(--ink-secondary);
  border-color: var(--line-faint);
}
.network-reach__accordion-btn {
  background: var(--bg-elev-2);
  border-color: var(--line-soft);
  color: var(--ink-primary);
}
.network-reach__accordion-btn:hover {
  background: var(--bg-elev-3);
}
.network-reach__search {
  background: var(--bg-inset);
  border-color: var(--line-soft);
  color: var(--ink-primary);
}
.metric-tooltip {
  background: var(--bg-elev-3);
  color: var(--ink-primary);
  border: 1px solid var(--line-strong);
}
.metric-tooltip::after {
  border-top-color: var(--bg-elev-3);
}
.metric-info {
  color: var(--ink-tertiary);
  border-color: var(--line-strong);
  background: transparent;
}

/* Legacy a tags inside legacy text blocks */
.summary-bullets a,
.summary-strip__body a,
.summary-strip__contact a,
.tenancy-option a,
.trust-contact-details a,
.related-network__intro a,
.about-content a,
.how-footer a,
.case-study a,
.case-study-included a,
.metrics-explained__sources a,
.why-we-exist__contact a,
.tenancy-pricing-logic a,
.why-we-exist__cta--secondary,
.footer__lead a {
  color: var(--accent) !important;
}
.summary-bullets a:hover,
.summary-strip__body a:hover,
.footer__lead a:hover {
  color: var(--accent-hover) !important;
}

/* ============================================================================
   V3 FINAL CASCADE
   Compat rules above keep old pages alive; these rules make sure the premium
   visual system wins after compatibility has done its safety work.
   ============================================================================ */

.section {
  padding-block: clamp(72px, 10vw, 112px);
}
/* Legacy headers only - .nav uses the floating shell in the NAVIGATION block. */
.site-header,
.topbar {
  background: var(--glass-nav) !important;
  box-shadow:
    0 1px 0 var(--line-faint),
    0 14px 46px -38px rgba(0, 0, 0, 0.72);
}
.site-header .btn-nav-cta,
.topbar__cta {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent)) !important;
  color: #08080b !important;
  border-color: color-mix(in srgb, var(--accent) 58%, transparent) !important;
  border-radius: var(--r-pill) !important;
}
[data-theme="light"] .site-header .btn-nav-cta,
[data-theme="light"] .topbar__cta {
  color: #ffffff !important;
}
.site-header .btn-nav-cta:hover,
.topbar__cta:hover {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep)) !important;
  color: #ffffff !important;
}

.pillar-hero,
.page-footer-cta {
  background: transparent !important;
}
.pillar-hero__eyebrow {
  color: var(--ink-tertiary) !important;
}
.pillar-hero__title {
  line-height: var(--lead-tight);
}
.breadcrumb.container {
  color: var(--ink-tertiary);
}
.breadcrumb.container a {
  color: var(--ink-tertiary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.breadcrumb.container a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-glow);
}

.page-footer-cta {
  border: 1px solid var(--accent-glow) !important;
  background:
    radial-gradient(800px 520px at 0% 0%, rgba(var(--accent-rgb), 0.14), transparent 62%),
    radial-gradient(780px 500px at 100% 100%, rgba(96, 165, 250, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 62%), var(--bg-elev-1) !important;
  border-radius: clamp(var(--r-lg), 2vw, 28px);
  box-shadow: var(--shadow-panel);
  padding: clamp(var(--sp-8), 5vw, var(--sp-12)) var(--pad-x) !important;
}

.hero__figure,
.hero__stats,
.card,
.tier-card,
.feature-card,
.person-card,
.domain-card,
.related__card,
.netgrid__cell,
.research-table,
.portfolio-table {
  box-shadow: var(--shadow-card) !important;
}

.research-table,
.portfolio-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--r-lg) !important;
  margin-block: var(--sp-6) var(--sp-10);
}

@media (max-width: 720px) {
  .research-table,
  .portfolio-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================================
   V3 POLISH LAYER  (Phase 5)
   Small, additive, opt-in.  No global resets, no negative margins, no broad
   selectors.  Each rule must stand on its own and not depend on a removed
   override coming back.
   ============================================================================ */

/* CTA accents stay pill-shaped, neutral buttons keep their soft-square radius. */
.btn-accent,
.btn-primary {
  border-radius: var(--r-pill);
  padding: 10px 18px;
}
.btn-secondary,
/* Optional metadata <p> for pillar-hero templates.
   Render as a discreet inline strong-key/value line, not a glass box. */
.pillar-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-3) 0 0;
  color: var(--ink-tertiary);
  font-size: var(--type-small);
  letter-spacing: 0.01em;
}
.pillar-hero__meta > * + *::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: var(--sp-2);
  border-radius: 50%;
  background: var(--line-strong);
  vertical-align: middle;
}
.pillar-hero__meta strong {
  color: var(--ink-secondary);
  font-weight: var(--weight-mid);
}

/* Sales-asset row tint for network table.  Light, on top of the per-cell
   first-column accent bar from line 1413-1414, never on hover (lets the
   existing hover state win). */
.dtable tr.is-highflyer:not(:hover) td {
  background: color-mix(in srgb, var(--tier-commercial) 5%, transparent);
}
.dtable tr.is-newcomer:not(:hover) td {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
[data-theme="light"] .dtable tr.is-highflyer:not(:hover) td {
  background: color-mix(in srgb, var(--tier-commercial) 8%, transparent);
}
[data-theme="light"] .dtable tr.is-newcomer:not(:hover) td {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* Compact stats panel used by pages that needed the network-stats pack but
   do not have the full hero__metrics grid.  Allows multiple .hero__proof
   rows to stack with consistent spacing. */
.hero__proof + .hero__proof {
  margin-top: var(--sp-3);
}

/* ============================================================================
   COMMITMENT / TIERING (v3.2)
   The 20-site network is honestly split 7 commercial / 7 free tools / 6
   public-interest.  Three chip variants give every cell a tier signal,
   three labelled grid bands group the cells, and the table gains a
   Funding column with matching left-stripe colour per tier.
   ============================================================================ */

/* Free-tool chip - teal palette, distinct from the green growth chip and
   the muted neutral .growth--tag chip.  Theme-aware via --tier-free. */
.growth--free {
  color: var(--tier-free);
  background: rgba(var(--tier-free-rgb), 0.12);
  border: 1px solid rgba(var(--tier-free-rgb), 0.32);
  font-weight: var(--weight-mid);
}
.growth--free::before {
  display: none;
}

/* Public-interest chip - purple palette mirroring .growth--new but used
   on every public-interest cell so the band reads as one family. */
.growth--public {
  color: var(--tier-public);
  background: rgba(var(--tier-public-rgb), 0.12);
  border: 1px solid rgba(var(--tier-public-rgb), 0.32);
  font-weight: var(--weight-mid);
}
.growth--public::before {
  display: none;
}

/* Grid bands: a soft heading + meta strip above each band of cells.
   The netgrid retains its fluid column layout; the band sits in the
   parent .netview__grid stack between netgrids. */
.netview__band {
  margin-top: var(--sp-6);
}
.netview__band:first-of-type {
  margin-top: 0;
}
.netview__band-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-faint);
}
.netview__band-title {
  margin: 0;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-secondary);
  font-weight: var(--weight-mid);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.netview__band-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.netview__band--commercial .netview__band-title::before {
  background: var(--tier-commercial);
}
.netview__band--free .netview__band-title::before {
  background: var(--tier-free);
}
.netview__band--public .netview__band-title::before {
  background: var(--tier-public);
}
.netview__band-meta {
  margin: 0;
  font-size: var(--type-small);
  color: var(--ink-tertiary);
}
.netview__band-count {
  font-family: var(--font-mono);
  color: var(--ink-primary);
  font-weight: var(--weight-mid);
}

/* Table funding cell - tinted pill so the funding model reads at a glance,
   plus left-edge stripe that matches the tier colour. */
.dtable .funding {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: var(--type-micro);
  font-weight: var(--weight-mid);
  letter-spacing: 0.02em;
  border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg-elev-3) 60%, transparent);
  color: var(--ink-secondary);
  white-space: nowrap;
}
.dtable .funding--affiliate {
  color: var(--tier-commercial);
  background: rgba(var(--tier-commercial-rgb), 0.1);
  border-color: rgba(var(--tier-commercial-rgb), 0.3);
}
.dtable .funding--free {
  color: var(--tier-free);
  background: rgba(var(--tier-free-rgb), 0.1);
  border-color: rgba(var(--tier-free-rgb), 0.3);
}
.dtable .funding--public {
  color: var(--tier-public);
  background: rgba(var(--tier-public-rgb), 0.1);
  border-color: rgba(var(--tier-public-rgb), 0.3);
}
.netview__table .dtable tbody tr.tier-commercial td:first-child {
  box-shadow: inset 3px 0 0 var(--tier-commercial);
}
.netview__table .dtable tbody tr.tier-free td:first-child {
  box-shadow: inset 3px 0 0 var(--tier-free);
}
.netview__table .dtable tbody tr.tier-public td:first-child {
  box-shadow: inset 3px 0 0 var(--tier-public);
}
.netview__table .dtable tbody tr.tier-commercial td:first-child::before {
  background: var(--tier-commercial);
  box-shadow: 0 0 0 3px rgba(var(--tier-commercial-rgb), 0.18);
}
.netview__table .dtable tbody tr.tier-free td:first-child::before {
  background: var(--tier-free);
  box-shadow: 0 0 0 3px rgba(var(--tier-free-rgb), 0.18);
}
.netview__table .dtable tbody tr.tier-public td:first-child::before {
  background: var(--tier-public);
  box-shadow: 0 0 0 3px rgba(var(--tier-public-rgb), 0.18);
}

/* Three-pillar commitment strip used directly under the hero on the home
   page and again on /commitments.  Cards are intentionally calm: no
   gradient, no glow, just clear copy that anchors the trust story. */
.commitments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}
.commitment-card {
  padding: var(--sp-6);
  background: var(--bg-elev-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.commitment-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line-soft));
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
}
.commitment-card__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.commitment-card__title {
  margin: 0;
  font-size: 1.25rem;
  line-height: var(--lead-tight);
  color: var(--ink-primary);
  font-weight: var(--weight-mid);
}
.commitment-card__body {
  margin: 0;
  font-size: var(--type-body);
  line-height: var(--lead-body);
  color: var(--ink-secondary);
}
.commitment-card__link {
  margin: var(--sp-2) 0 0;
  font-size: var(--type-small);
  color: var(--accent);
}
.commitment-card--commercial {
  border-top: 3px solid var(--tier-commercial);
}
.commitment-card--free {
  border-top: 3px solid var(--tier-free);
}
.commitment-card--public {
  border-top: 3px solid var(--tier-public);
}

/* Footer ribbon - one-line consumer-care strip that sits above the legal
   smallprint on every page. */
.footer__ribbon {
  margin-top: var(--sp-8);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elev-1));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--type-small);
  color: var(--ink-secondary);
}
.footer__ribbon a {
  color: var(--accent);
  font-weight: var(--weight-mid);
  white-space: nowrap;
}
.footer__ribbon-led {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tier-commercial);
  box-shadow: 0 0 0 4px rgba(var(--tier-commercial-rgb), 0.18);
  margin-right: var(--sp-2);
  vertical-align: middle;
  animation: netgridPulse 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .footer__ribbon-led {
    animation: none;
  }
}
[data-pause-anim] .footer__ribbon-led {
  animation: none;
}

/* ============================================================================
   TYPOGRAPHY POLISH (v3.3 - Inter swap)
   These rules push the Inter variable family beyond Inter's tame defaults
   so that the FBRE site reads like the modern B2B SaaS sites the audience
   spends their working day in (Linear, Stripe, Vercel, GitHub).
   ============================================================================ */

/* Tabular figures across every data-bearing surface so columns of numbers,
   prices, DR scores and "/yr" labels align cleanly across rows.  This is
   already set on .t-mono, .card__stat and a handful of metric cells; the
   rules below close the loop for the remaining metric-heavy surfaces. */
.dtable,
.dtable td,
.dtable th,
.netgrid__meta,
.netview__band-count,
.hero__figure-value,
.hero__stats-value,
.commitment-card__title em,
.t-mono,
.t-mono * {
  font-variant-numeric: tabular-nums;
  font-feature-settings:
    "kern" 1,
    "tnum" 1,
    "ss03" 1;
}

/* Display headlines get a hair more weight to compensate for Inter's
   slightly lighter optical weight relative to the previous Geist cut, and
   a tighter, more "premium magazine" tracking on the largest sizes. */
.t-display,
.hero__title,
.service-hero__title {
  font-feature-settings:
    "kern" 1,
    "ss01" 1,
    "ss03" 1,
    "cv11" 1;
  font-weight: 650;
  letter-spacing: -0.03em;
}

/* Headings (h1-h4) take the body OpenType set but with a fractionally
   tighter heading tracking that suits Inter's broader counters. */
h1,
.t-display {
  letter-spacing: var(--tracking-display);
}
h2,
h3,
h4 {
  letter-spacing: var(--tracking-heading);
  font-feature-settings:
    "kern" 1,
    "ss01" 1,
    "cv11" 1;
}

/* Eyebrow chips and small caps benefit from JetBrains Mono's tabular
   tnums and the "ss02" stylistic alternates for a cleaner I and zero. */
.t-eyebrow,
.t-mono,
.dtable th,
.dtable td.t-mono {
  font-feature-settings:
    "kern" 1,
    "tnum" 1,
    "ss02" 1;
}

/* Inter's `0` collides visually with `O` at small sizes; force the slashed
   zero (`zero` feature) inside small mono runs to remove the ambiguity
   in prices, IDs and DR numbers. */
.netgrid__meta,
.hero__figure-value,
.hero__stats-value,
.service-hero__stat-value,
.t-mono {
  font-feature-settings:
    "kern" 1,
    "tnum" 1,
    "zero" 1,
    "ss03" 1;
}

/* Dyslexia-friendly font override: when the accessibility panel enables
   the dyslexic preset we already swap --font-sans.  Disable Inter's
   stylistic sets in that mode so the alt font is not asked to render
   features it does not ship. */
[data-font="dyslexic"] body,
[data-font="dyslexic"] h1,
[data-font="dyslexic"] h2,
[data-font="dyslexic"] h3,
[data-font="dyslexic"] h4,
[data-font="dyslexic"] .t-display {
  font-feature-settings: normal;
}

/* Count-up + animated numeric: stable digit box, zero layout shift. */
.js-count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  display: inline-block;
  text-align: right;
}
.js-count--12m {
  min-width: 3ch;
}
.js-count--7 {
  min-width: 1ch;
}
.js-count--6 {
  min-width: 1ch;
}
.js-count--730k {
  min-width: 4ch;
}
.js-count--74 {
  min-width: 2ch;
}
.js-count--28k {
  min-width: 3ch;
}
.js-count--3000 {
  min-width: 5ch;
}
.js-count--90k {
  min-width: 3ch;
}
.js-count--730000 {
  min-width: 7ch;
}
.js-count--19 {
  min-width: 2ch;
}
.js-count--28000 {
  min-width: 6ch;
}

/* Provider directory (Gate F) */
.directory-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: flex-end;
  margin-bottom: 1.25rem;
}
.directory-controls label {
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  gap: 0.25rem;
}
.directory-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.5rem 1rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.directory-card-grid .directory-card {
  margin: 0;
}