/* ==========================================================================
   Interro AI — Design System
   --------------------------------------------------------------------------
   Layers:   tokens → base → layout → components → marketing → utilities
   Themes:   light is the default. Marketing pages force dark via
             <html data-theme="dark">. The app follows prefers-color-scheme.
   Ramps are absolute and never change; only the SEMANTIC block flips.
   If you add a semantic token, add it to BOTH semantic blocks.
   ========================================================================== */

@layer tokens, base, layout, components, marketing, graphics, motion, utilities;

/* ==========================================================================
   TOKENS
   ========================================================================== */
@layer tokens {
  /* --- Typefaces: self-hosted variable woff2, latin subset (88 KB total) --- */
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-var-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
      U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("/fonts/jetbrains-mono-var-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
      U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root {
    /* ------------------------------------------------------------------
       RAMPS — absolute values, identical in every theme
       ------------------------------------------------------------------ */

    /* Sage/teal — the Interro brand hue. 600 is the original #2f6f68. */
    --teal-50: #f2f8f6;
    --teal-100: #dceee9;
    --teal-200: #b6ddd4;
    --teal-300: #86c6ba;
    --teal-400: #55a99b;
    --teal-500: #3a8c7f;
    --teal-600: #2f6f68;
    --teal-700: #285a55;
    --teal-800: #234945;
    --teal-900: #1e3c39;
    --teal-950: #122523;
    --teal-glow: #6fd3c0;

    /* Neutrals — faintly green-tinted so they sit with the brand hue */
    --n-0: #ffffff;
    --n-25: #fafcfb;
    --n-50: #f4f8f7;
    --n-100: #eaf0ee;
    --n-150: #e0e8e6;
    --n-200: #d2dedb;
    --n-300: #b4c4c0;
    --n-400: #8c9d99;
    --n-500: #6a7b77;
    --n-600: #51615d;
    --n-700: #3c4a47;
    --n-800: #2b3735;
    --n-900: #1d2725;
    --n-950: #131b1a;
    --n-1000: #0a100f;

    /* Signal */
    --green-300: #7fd0aa;
    --green-500: #3f9a6f;
    --green-600: #337a5b;
    --amber-300: #e8bd7a;
    --amber-500: #b8842f;
    --amber-600: #93672c;
    --red-300: #ec9a94;
    --red-500: #c2564f;
    --red-600: #a1453f;
    --blue-300: #93c5ea;
    --blue-500: #4a8fc7;

    /* ------------------------------------------------------------------
       TYPE
       ------------------------------------------------------------------ */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
      "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial,
      sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas,
      "Liberation Mono", Menlo, monospace;

    /* Modular scale, 1.25 ratio off a 16px base */
    --text-xs: 0.75rem; /* 12 */
    --text-sm: 0.8125rem; /* 13 */
    --text-base: 0.9375rem; /* 15 — UI default */
    --text-md: 1.0625rem; /* 17 — reading size */
    --text-lg: 1.25rem; /* 20 */
    --text-xl: 1.5rem; /* 24 */
    --text-2xl: 1.875rem; /* 30 */
    --text-3xl: 2.25rem; /* 36 */
    --text-4xl: 3rem; /* 48 */
    --text-5xl: 3.75rem; /* 60 */

    /* Fluid display sizes */
    --text-display-1: clamp(2.5rem, 1.35rem + 4.4vw, 4.5rem);
    --text-display-2: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
    --text-display-3: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);

    --leading-tight: 1.08;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* Optical tracking — large type needs negative, small caps need positive */
    --track-display: -0.028em;
    --track-tight: -0.015em;
    --track-normal: 0;
    --track-wide: 0.04em;
    --track-caps: 0.09em;

    /* ------------------------------------------------------------------
       SPACE — 4px base
       ------------------------------------------------------------------ */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Section rhythm scales with viewport */
    --section-y: clamp(4rem, 2rem + 8vw, 8rem);

    /* ------------------------------------------------------------------
       RADIUS
       ------------------------------------------------------------------ */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-full: 999px;

    /* ------------------------------------------------------------------
       MOTION
       ------------------------------------------------------------------ */
    --dur-1: 120ms;
    --dur-2: 200ms;
    --dur-3: 320ms;
    --dur-4: 520ms;
    --dur-5: 900ms;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --layout-max: 1180px;
    --layout-narrow: 720px;

    /* ------------------------------------------------------------------
       SEMANTIC — LIGHT  (mirror any addition into the dark block below)
       ------------------------------------------------------------------ */
    color-scheme: light;

    --bg: var(--n-50);
    --bg-sunken: var(--n-100);
    --surface-1: var(--n-0);
    --surface-2: var(--n-50);
    --surface-3: var(--n-100);
    --surface-inset: var(--n-100);

    --border-subtle: var(--n-150);
    --border: var(--n-200);
    --border-strong: var(--n-300);

    --text-primary: var(--n-900);
    --text-secondary: var(--n-600);
    --text-tertiary: var(--n-500);
    --text-inverse: var(--n-0);

    --accent: var(--teal-600);
    --accent-hover: var(--teal-700);
    --accent-text: var(--teal-700);
    --accent-soft: var(--teal-50);
    --accent-border: var(--teal-200);
    --accent-contrast: var(--n-0);

    --success: var(--green-600);
    --success-soft: #eaf5ef;
    --warning: var(--amber-600);
    --warning-soft: #fbf3e6;
    --danger: var(--red-600);
    --danger-soft: #fbeceb;
    --info: var(--blue-500);

    /* Decorative: dot-matrix colour, hover sheen, edge glow */
    --dot: rgba(28, 43, 40, 0.1);
    --sheen: rgba(255, 255, 255, 0.65);
    --edge-glow: rgba(47, 111, 104, 0.5);
    --spot: rgba(47, 111, 104, 0.07);
    --grain-opacity: 0.035;

    --shadow-1: 0 1px 2px rgba(19, 27, 26, 0.05), 0 1px 1px rgba(19, 27, 26, 0.04);
    --shadow-2: 0 2px 4px rgba(19, 27, 26, 0.05), 0 4px 10px rgba(19, 27, 26, 0.05);
    --shadow-3: 0 4px 8px rgba(19, 27, 26, 0.05), 0 12px 28px rgba(19, 27, 26, 0.08);
    --shadow-4: 0 8px 16px rgba(19, 27, 26, 0.06), 0 28px 56px rgba(19, 27, 26, 0.12);
    --ring: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent);
  }

  /* ------------------------------------------------------------------
     SEMANTIC — DARK
     Applied when the page opts in explicitly, or when the OS prefers dark
     and the page has not pinned itself to light.
     ------------------------------------------------------------------ */
  [data-theme="dark"],
  .on-dark {
    color-scheme: dark;

    --bg: var(--n-1000);
    --bg-sunken: #060a09;
    --surface-1: var(--n-950);
    --surface-2: #18201f;
    --surface-3: #202a28;
    --surface-inset: #0d1413;

    --border-subtle: #1f2a28;
    --border: #2a3735;
    --border-strong: #3c4a47;

    --text-primary: #eef4f2;
    --text-secondary: #9dafab;
    --text-tertiary: #7b8c88;
    --text-inverse: var(--n-1000);

    --accent: var(--teal-300);
    --accent-hover: var(--teal-200);
    --accent-text: var(--teal-300);
    --accent-soft: rgba(111, 211, 192, 0.1);
    --accent-border: rgba(111, 211, 192, 0.28);
    --accent-contrast: var(--n-1000);

    --success: var(--green-300);
    --success-soft: rgba(127, 208, 170, 0.12);
    --warning: var(--amber-300);
    --warning-soft: rgba(232, 189, 122, 0.12);
    --danger: var(--red-300);
    --danger-soft: rgba(236, 154, 148, 0.12);
    --info: var(--blue-300);

    --dot: rgba(150, 196, 187, 0.13);
    --sheen: rgba(255, 255, 255, 0.14);
    --edge-glow: rgba(111, 211, 192, 0.55);
    --spot: rgba(111, 211, 192, 0.08);
    --grain-opacity: 0.05;

    /* On dark, depth comes from a top highlight, not a drop shadow */
    --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
      0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
      0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
      0 12px 32px rgba(0, 0, 0, 0.55);
    --shadow-4: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
      0 28px 64px rgba(0, 0, 0, 0.66);
    --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
      color-scheme: dark;

      --bg: var(--n-1000);
      --bg-sunken: #060a09;
      --surface-1: var(--n-950);
      --surface-2: #18201f;
      --surface-3: #202a28;
      --surface-inset: #0d1413;

      --border-subtle: #1f2a28;
      --border: #2a3735;
      --border-strong: #3c4a47;

      --text-primary: #eef4f2;
      --text-secondary: #9dafab;
      --text-tertiary: #7b8c88;
      --text-inverse: var(--n-1000);

      --accent: var(--teal-300);
      --accent-hover: var(--teal-200);
      --accent-text: var(--teal-300);
      --accent-soft: rgba(111, 211, 192, 0.1);
      --accent-border: rgba(111, 211, 192, 0.28);
      --accent-contrast: var(--n-1000);

      --success: var(--green-300);
      --success-soft: rgba(127, 208, 170, 0.12);
      --warning: var(--amber-300);
      --warning-soft: rgba(232, 189, 122, 0.12);
      --danger: var(--red-300);
      --danger-soft: rgba(236, 154, 148, 0.12);
      --info: var(--blue-300);

      --dot: rgba(150, 196, 187, 0.13);
      --sheen: rgba(255, 255, 255, 0.14);
      --edge-glow: rgba(111, 211, 192, 0.55);
      --spot: rgba(111, 211, 192, 0.08);
      --grain-opacity: 0.05;

      --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
        0 1px 2px rgba(0, 0, 0, 0.4);
      --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 4px 12px rgba(0, 0, 0, 0.45);
      --shadow-3: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 12px 32px rgba(0, 0, 0, 0.55);
      --shadow-4: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 28px 64px rgba(0, 0, 0, 0.66);
      --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
    }
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: var(--space-20);
  }

  body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    letter-spacing: var(--track-normal);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    margin: 0;
    font-weight: 600;
    line-height: var(--leading-snug);
    letter-spacing: var(--track-tight);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--track-display);
  }
  h2 {
    font-size: var(--text-xl);
  }
  h3 {
    font-size: var(--text-lg);
  }
  h4 {
    font-size: var(--text-base);
  }

  p {
    margin: 0;
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

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

  button {
    cursor: pointer;
  }

  svg {
    display: block;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  code,
  kbd,
  pre,
  samp {
    font-family: var(--font-mono);
    font-feature-settings: "liga" 0;
  }

  /* Numbers must not jitter when they update */
  table,
  .kpi strong,
  .tabular,
  .tier-price,
  .metric-value {
    font-variant-numeric: tabular-nums;
  }

  :focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
  }

  /* Only for inputs, which own their border-radius */
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    border-radius: inherit;
  }

  ::selection {
    background: var(--accent-soft);
    color: var(--accent-text);
  }

  ::placeholder {
    color: var(--text-tertiary);
    opacity: 1;
  }

  hr {
    border: 0;
    border-top: 1px solid var(--border-subtle);
    margin: var(--space-8) 0;
  }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--layout-max);
    margin-inline: auto;
    padding-inline: var(--space-6);
  }

  .container-narrow {
    width: 100%;
    max-width: var(--layout-narrow);
    margin-inline: auto;
    padding-inline: var(--space-6);
  }

  .app-shell {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    min-height: 100vh;
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    border-right: 1px solid var(--border-subtle);
    background: var(--surface-1);
    padding: var(--space-6) var(--space-5);
  }

  .main {
    min-width: 0;
    padding: var(--space-8);
  }

  .topbar {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    align-items: flex-start;
    margin-bottom: var(--space-8);
  }

  .page {
    display: grid;
    gap: var(--space-5);
  }

  .stack {
    display: grid;
    gap: var(--space-4);
  }

  .split-tight {
    display: grid;
    gap: var(--space-3);
  }

  .grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .split {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-5);
  }

  .section {
    padding-block: var(--section-y);
  }

  .section-sunken {
    background: var(--bg-sunken);
  }

  .section-head {
    max-width: 62ch;
    margin-bottom: var(--space-12);
  }
}

/* ==========================================================================
   COMPONENTS  (shared by the app and the marketing site)
   ========================================================================== */
@layer components {
  /* --- Text roles ------------------------------------------------------- */
  .eyebrow {
    margin: 0 0 var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--accent-text);
  }

  .page-title {
    margin: 0;
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--track-display);
  }

  .page-subtitle {
    margin: var(--space-3) 0 0;
    max-width: 66ch;
    color: var(--text-secondary);
    font-size: var(--text-md);
  }

  .section-head h2 {
    font-size: var(--text-display-3);
    letter-spacing: var(--track-display);
  }

  .section-head p {
    margin: var(--space-4) 0 0;
    color: var(--text-secondary);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
  }

  .muted {
    color: var(--text-secondary);
  }
  .subtle {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
  }
  .small {
    font-size: var(--text-sm);
  }
  .help {
    color: var(--text-secondary);
    font-size: var(--text-sm);
  }
  .mono {
    font-family: var(--font-mono);
  }

  /* --- Brand ------------------------------------------------------------ */
  .brand-mark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: var(--track-tight);
    color: var(--text-primary);
  }

  .brand-mark span.brand-soft {
    color: var(--text-tertiary);
    font-weight: 400;
  }

  /* --- Buttons ---------------------------------------------------------- */
  .button,
  .button-secondary,
  .button-text,
  .button-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: 0 var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-size: var(--text-base);
    font-weight: 500;
    letter-spacing: var(--track-tight);
    white-space: nowrap;
    transition: background-color var(--dur-2) var(--ease-out-quart),
      border-color var(--dur-2) var(--ease-out-quart),
      color var(--dur-2) var(--ease-out-quart),
      transform var(--dur-1) var(--ease-out-quart),
      box-shadow var(--dur-2) var(--ease-out-quart);
  }

  .button {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
    box-shadow: var(--shadow-1);
  }

  .button:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: var(--shadow-2);
  }

  .button-secondary {
    background: var(--surface-1);
    border-color: var(--border);
    color: var(--text-primary);
  }

  .button-secondary:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
  }

  .button-ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text-secondary);
  }

  .button-ghost:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
  }

  .button-text {
    min-height: 32px;
    padding-inline: var(--space-2);
    background: transparent;
    color: var(--accent-text);
  }

  .button-text:hover {
    background: var(--accent-soft);
  }

  .button:active,
  .button-secondary:active,
  .button-ghost:active,
  .button-text:active {
    transform: translateY(1px);
  }

  .button:disabled,
  .button-secondary:disabled,
  .button-ghost:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  .button-lg {
    min-height: 48px;
    padding-inline: var(--space-6);
    font-size: var(--text-md);
  }

  .button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  /* --- Surfaces --------------------------------------------------------- */
  .card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    box-shadow: var(--shadow-1);
    padding: var(--space-6);
  }

  .card > h2,
  .card > h3,
  .card > h4 {
    margin: 0 0 var(--space-4);
  }

  .card > p {
    margin: 0;
  }

  .card-flush {
    padding: 0;
    overflow: hidden;
  }

  .card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
  }

  .card-head h2,
  .card-head h3 {
    margin: 0;
  }

  .card-body {
    padding: var(--space-5) var(--space-6);
  }

  .preview-panel {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background: var(--surface-inset);
    padding: var(--space-5);
  }

  .preview-panel pre {
    margin: 0;
    white-space: pre-wrap;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
  }

  .domain-records-row td {
    padding: var(--space-4) var(--space-6) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
  }

  .domain-records-panel {
    display: grid;
    gap: var(--space-3);
    font-weight: 400;
  }

  .domain-records-panel .table code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    word-break: break-all;
  }

  .dns-guidance-hints {
    margin: 0;
    padding-left: var(--space-5);
    display: grid;
    gap: var(--space-2);
    color: var(--text-tertiary);
    font-size: var(--text-sm);
  }

  .announcement {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: var(--space-4) var(--space-5);
  }

  .announcement p {
    margin: 0;
    color: var(--text-secondary);
  }

  .notice {
    border-left: 2px solid var(--accent);
    padding-left: var(--space-4);
    color: var(--text-secondary);
  }

  /* --- Metrics ---------------------------------------------------------- */
  .kpi {
    display: grid;
    gap: var(--space-2);
  }

  .kpi strong,
  .metric-value {
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: var(--track-display);
    line-height: 1;
  }

  .kpi .subtle {
    order: -1;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
  }

  /* --- Pills & chips ---------------------------------------------------- */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 24px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--track-wide);
  }

  .pill::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: var(--radius-full);
    background: currentcolor;
    opacity: 0.7;
  }

  .pill.good {
    border-color: color-mix(in srgb, var(--success) 32%, transparent);
    background: var(--success-soft);
    color: var(--success);
  }

  .pill.warn {
    border-color: color-mix(in srgb, var(--warning) 32%, transparent);
    background: var(--warning-soft);
    color: var(--warning);
  }

  .pill.bad {
    border-color: color-mix(in srgb, var(--danger) 32%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
  }

  .pill.accent {
    border-color: var(--accent-border);
    background: var(--accent-soft);
    color: var(--accent-text);
  }

  .status-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 32px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    background: var(--surface-1);
    color: var(--text-secondary);
    font-size: var(--text-sm);
  }

  .status-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  /* --- Forms ------------------------------------------------------------ */
  .field-grid {
    display: grid;
    gap: var(--space-5);
  }

  .field-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field {
    display: grid;
    gap: var(--space-2);
  }

  .field label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
  }

  .field input,
  .field textarea,
  .field select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-1);
    padding: var(--space-3) var(--space-4);
    color: var(--text-primary);
    transition: border-color var(--dur-2) var(--ease-out-quart),
      box-shadow var(--dur-2) var(--ease-out-quart);
  }

  .field input:hover,
  .field textarea:hover,
  .field select:hover {
    border-color: var(--border-strong);
  }

  .field input[readonly] {
    background: var(--surface-2);
    color: var(--text-secondary);
  }

  .field textarea {
    min-height: 132px;
    resize: vertical;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
  }

  .field select {
    appearance: none;
    padding-right: var(--space-10);
    background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
      linear-gradient(135deg, currentcolor 50%, transparent 50%);
    background-position: right var(--space-5) center, right var(--space-4) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }

  .field input[type="file"] {
    padding: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
  }

  .field-hint {
    margin: 0;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
  }

  .field-hint.status-info {
    color: var(--text-secondary);
  }

  .field-hint.status-success {
    color: var(--success);
  }

  .field-hint.status-warning {
    color: var(--warning);
  }

  .field-hint.status-error {
    color: var(--danger);
  }

  .field-hint:empty {
    display: none;
  }

  /* --- Tables ----------------------------------------------------------- */
  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
  }

  .table th,
  .table td {
    padding: var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
    vertical-align: middle;
  }

  .table th {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    white-space: nowrap;
  }

  .table tbody tr:last-child td {
    border-bottom: none;
  }

  .table tbody tr {
    transition: background-color var(--dur-1) var(--ease-out-quart);
  }

  .table tbody tr:hover {
    background: var(--surface-2);
  }

  .table td:first-child {
    font-weight: 500;
  }

  /* --- Progress & meters ------------------------------------------------ */
  .progress-track {
    width: 100%;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--surface-3);
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    transition: width var(--dur-4) var(--ease-out-expo);
  }

  .meter-row {
    display: grid;
    gap: var(--space-2);
  }

  /* --- Workflow & timeline --------------------------------------------- */
  .workflow {
    display: grid;
    gap: var(--space-2);
  }

  .workflow-step {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-4);
    align-items: center;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background: var(--surface-1);
    padding: var(--space-4) var(--space-5);
    transition: border-color var(--dur-2) var(--ease-out-quart);
  }

  .workflow-step:hover {
    border-color: var(--border-strong);
  }

  .workflow-step strong {
    display: block;
    margin-bottom: var(--space-1);
    font-weight: 500;
  }

  .workflow-step span {
    color: var(--text-secondary);
    font-size: var(--text-sm);
  }

  .timeline {
    display: grid;
    gap: var(--space-5);
  }

  .timeline-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
    position: relative;
  }

  .timeline-marker {
    width: 9px;
    height: 9px;
    margin-top: 7px;
    border-radius: var(--radius-full);
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }

  .timeline-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 20px;
    bottom: calc(-1 * var(--space-5));
    width: 1px;
    background: var(--border);
  }

  .timeline-item h4 {
    margin: 0 0 var(--space-1);
    font-weight: 500;
  }

  .timeline-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
  }

  /* --- Empty / loading / error states --------------------------------- */
  .empty-state {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    padding: var(--space-8);
    color: var(--text-secondary);
  }

  .empty-state strong {
    color: var(--text-primary);
    font-size: var(--text-md);
    font-weight: 600;
  }

  .empty-state p {
    margin: 0;
    max-width: 52ch;
    font-size: var(--text-sm);
  }

  .skeleton {
    display: block;
    height: 0.75em;
    border-radius: var(--radius-sm);
    background: linear-gradient(
      90deg,
      var(--surface-2) 25%,
      var(--surface-3) 37%,
      var(--surface-2) 63%
    );
    background-size: 400% 100%;
    animation: shimmer 1.4s var(--ease-in-out) infinite;
  }

  .skeleton-text {
    width: 70%;
  }
  .skeleton-text.short {
    width: 35%;
  }

  @keyframes shimmer {
    from {
      background-position: 100% 0;
    }
    to {
      background-position: 0 0;
    }
  }

  .state-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    color: var(--danger);
    font-size: var(--text-sm);
  }

  /* --- Sidebar internals ---------------------------------------------- */
  .brand {
    display: grid;
    gap: var(--space-2);
  }

  .brand h1 {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: var(--track-tight);
  }

  .brand p {
    margin: 0;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
  }

  .nav-group {
    display: grid;
    gap: var(--space-1);
  }

  .nav-group-label {
    padding: var(--space-2) var(--space-3) var(--space-1);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
  }

  .nav-list {
    display: grid;
    gap: var(--space-1);
  }

  .domain-propagation {
    margin: var(--space-4) var(--space-2) var(--space-2);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--warning) 10%, var(--surface-1));
    padding: var(--space-3);
    display: grid;
    gap: var(--space-1);
  }

  .domain-propagation-title {
    margin: 0;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--warning);
  }

  .domain-propagation-copy {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
  }

  .runtime-notifications {
    margin: var(--space-4) var(--space-2) var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    padding: var(--space-3);
    display: grid;
    gap: var(--space-2);
  }

  .runtime-notifications-title {
    margin: 0;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--text-tertiary);
  }

  .runtime-notifications-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2);
  }

  .runtime-notification {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: var(--surface-2);
    padding: var(--space-2) var(--space-3);
    display: grid;
    gap: var(--space-1);
  }

  .runtime-notification-head {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
  }

  .runtime-notification-head strong {
    font-weight: 600;
    color: var(--text-primary);
  }

  .runtime-notification-head span {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    white-space: nowrap;
  }

  .runtime-notification-copy {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
  }

  .runtime-notification-error {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border-subtle));
    background: color-mix(in srgb, var(--danger) 8%, var(--surface-2));
  }

  .runtime-notification-warn {
    border-color: color-mix(in srgb, var(--warning) 35%, var(--border-subtle));
    background: color-mix(in srgb, var(--warning) 8%, var(--surface-2));
  }

  .runtime-notification-success {
    border-color: color-mix(in srgb, var(--success) 35%, var(--border-subtle));
    background: color-mix(in srgb, var(--success) 8%, var(--surface-2));
  }

  .runtime-notification-empty {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
  }

  .nav-list a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
    font-size: var(--text-base);
    transition: background-color var(--dur-1) var(--ease-out-quart),
      color var(--dur-1) var(--ease-out-quart);
  }

  .nav-list a:hover {
    background: var(--surface-2);
    color: var(--text-primary);
  }

  .nav-list a.active {
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 500;
  }

  .sidebar-foot {
    margin-top: auto;
    display: grid;
    gap: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-4);
  }

  .sidebar-user {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
  }

  .avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: var(--text-xs);
    font-weight: 600;
    object-fit: cover;
    flex-shrink: 0;
  }

  .avatar-lg {
    width: 56px;
    height: 56px;
  }

  .profile-identity {
    margin-bottom: var(--space-5);
  }

  .profile-identity[hidden] {
    display: none;
  }

  .sidebar-user-meta {
    min-width: 0;
  }

  .sidebar-user-meta strong,
  .sidebar-user-meta span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-user-meta strong {
    font-size: var(--text-sm);
    font-weight: 500;
  }

  .sidebar-user-meta span {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
  }

  /* --- Workspace switcher --------------------------------------------- */
  .workspace-switcher summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    gap: var(--space-3);
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-1);
    padding: var(--space-3) var(--space-4);
    transition: border-color var(--dur-2) var(--ease-out-quart);
  }

  .workspace-switcher summary:hover {
    border-color: var(--border-strong);
  }

  .workspace-switcher summary::-webkit-details-marker {
    display: none;
  }

  .workspace-switcher summary::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--text-tertiary);
    border-bottom: 1.5px solid var(--text-tertiary);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--dur-2) var(--ease-out-quart);
  }

  .workspace-switcher[open] summary::after {
    transform: rotate(225deg) translateY(-2px);
  }

  .workspace-label {
    display: block;
    margin-bottom: 1px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
  }

  .workspace-name {
    font-size: var(--text-base);
    font-weight: 500;
  }

  .workspace-menu {
    display: grid;
    gap: 1px;
    margin-top: var(--space-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background: var(--surface-1);
    box-shadow: var(--shadow-2);
    padding: var(--space-2);
    animation: pop-in var(--dur-2) var(--ease-out-expo);
  }

  .workspace-menu button {
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    color: var(--text-secondary);
    font-size: var(--text-base);
    transition: background-color var(--dur-1) var(--ease-out-quart);
  }

  .workspace-menu button:hover {
    background: var(--surface-2);
    color: var(--text-primary);
  }

  .workspace-menu button.current {
    color: var(--accent-text);
    font-weight: 500;
  }

  .workspace-menu .create-workspace {
    margin-top: var(--space-1);
    border-top: 1px solid var(--border-subtle);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding-top: var(--space-3);
    color: var(--accent-text);
  }

  @keyframes pop-in {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* --- Auth ------------------------------------------------------------ */
  .auth-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 48px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--surface-1);
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-md);
    font-weight: 500;
    transition: border-color var(--dur-2) var(--ease-out-quart),
      box-shadow var(--dur-2) var(--ease-out-quart);
  }

  .auth-primary:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-2);
  }

  .auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-6) 0 var(--space-5);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
  }

  .auth-divider::before,
  .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
  }

  .auth-status {
    margin: var(--space-5) 0 0;
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }

  .auth-status.idle {
    background: var(--surface-2);
    color: var(--text-secondary);
  }

  .auth-status.loading {
    background: var(--accent-soft);
    color: var(--accent-text);
  }

  .auth-status.success {
    background: var(--success-soft);
    color: var(--success);
  }

  /* --- Trust / team --------------------------------------------------- */
  .trust-panel {
    display: grid;
    gap: var(--space-2);
  }

  .trust-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background: var(--surface-1);
    padding: var(--space-4);
  }

  .trust-item .trust-mark {
    width: 6px;
    height: 6px;
    margin-top: 7px;
    border-radius: var(--radius-full);
    background: var(--success);
    box-shadow: 0 0 0 3px var(--success-soft);
  }

  .trust-item strong {
    display: block;
    margin-bottom: var(--space-1);
    font-weight: 500;
  }

  .trust-item p {
    margin: 0;
    font-size: var(--text-sm);
  }

  .team-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-3) 0;
  }

  .team-row:last-child {
    border-bottom: none;
  }

  .sheet {
    display: grid;
    gap: var(--space-3);
  }

  .sheet header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .sheet header h3 {
    margin: 0;
  }

  .noscript {
    max-width: 60ch;
    margin: 12vh auto;
    padding: var(--space-6);
  }
}

/* ==========================================================================
   MARKETING  (public site only)
   ========================================================================== */
@layer marketing {
  /* --- Header --------------------------------------------------------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid transparent;
    transition: background-color var(--dur-3) var(--ease-out-quart),
      border-color var(--dur-3) var(--ease-out-quart);
  }

  .site-header[data-scrolled="true"] {
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--border-subtle);
  }

  .site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    min-height: 68px;
  }

  .site-nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline: auto;
  }

  .nav-link {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--text-base);
    transition: color var(--dur-1) var(--ease-out-quart),
      background-color var(--dur-1) var(--ease-out-quart);
  }

  .nav-link:hover {
    color: var(--text-primary);
    background: var(--surface-2);
  }

  .nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
  }

  .menu-toggle-bars,
  .menu-toggle-bars::before,
  .menu-toggle-bars::after {
    display: block;
    width: 16px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--text-primary);
    content: "";
  }

  .menu-toggle-bars {
    position: relative;
  }

  .menu-toggle-bars::before {
    position: absolute;
    top: -5px;
  }

  .menu-toggle-bars::after {
    position: absolute;
    top: 5px;
  }

  /* --- Mobile menu ---------------------------------------------------- */
  .mobile-menu {
    width: min(420px, 100vw - 2rem);
    max-width: none;
    margin: var(--space-4) auto auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    box-shadow: var(--shadow-4);
    padding: var(--space-5);
    color: var(--text-primary);
  }

  .mobile-menu::backdrop {
    background: color-mix(in srgb, var(--n-1000) 62%, transparent);
    backdrop-filter: blur(4px);
  }

  .mobile-menu[open] {
    animation: pop-in var(--dur-3) var(--ease-out-expo);
  }

  .mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
  }

  .mobile-menu-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-lg);
    line-height: 1;
  }

  .mobile-menu-links {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-5);
  }

  .mobile-menu-links a {
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--text-md);
  }

  .mobile-menu-links a:hover {
    background: var(--surface-2);
    color: var(--text-primary);
  }

  .mobile-menu-actions {
    display: grid;
    gap: var(--space-3);
  }

  .mobile-menu-actions .button,
  .mobile-menu-actions .button-secondary {
    width: 100%;
    min-height: 46px;
  }

  /* --- Hero ----------------------------------------------------------- */
  .hero {
    position: relative;
    padding-top: clamp(3rem, 1rem + 6vw, 6rem);
    padding-bottom: var(--section-y);
    overflow: hidden;
  }

  /* The hero's light source lives on .signal-field::after in the graphics
     layer, so the glow and the dot matrix drift together under parallax. */

  /* Single column on purpose: the desk needs the full container width for its
     two panes and the connector geometry between them. */
  .hero-grid {
    display: grid;
    gap: clamp(var(--space-10), 4vw, var(--space-16));
  }

  .hero-copy {
    position: relative;
    isolation: isolate;
    max-width: 52ch;
    z-index: 1;
    overflow: hidden;
  }

  .hero-copy-content {
    position: relative;
    z-index: 10;
  }

  .hero-title {
    margin: 0;
    font-size: var(--text-display-1);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: var(--track-display);
  }

  .hero-title em {
    font-style: normal;
    color: var(--accent);
  }

  .hero-lede {
    margin: var(--space-6) 0 0;
    max-width: 54ch;
    color: var(--text-secondary);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
  }

  .hero-note {
    margin: var(--space-5) 0 0;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
  }

  /* --- Hero background plane ----------------------------------------- */
  .hero-plane-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-plane-background-svg {
    width: 400px;
    height: 400px;
    opacity: 0.1;
    mix-blend-mode: screen;
    animation: hero-plane-pulse 7s var(--ease-in-out) infinite;
  }

  /* --- The Research Desk --------------------------------------------- */
  .desk {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface-1);
    box-shadow: var(--shadow-4);
    overflow: hidden;
  }

  .desk-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-2);
  }

  .desk-dots {
    display: flex;
    gap: var(--space-2);
  }

  .desk-dots span {
    width: 9px;
    height: 9px;
    border-radius: var(--radius-full);
    background: var(--border-strong);
  }

  .desk-title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    color: var(--text-tertiary);
  }

  .desk-phase {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--accent-text);
  }

  .desk-phase::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: currentcolor;
    animation: pulse 1.8s var(--ease-in-out) infinite;
  }

  .desk-phase[data-idle="true"]::before {
    animation: none;
    opacity: 0.4;
  }

  @keyframes pulse {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.35;
      transform: scale(0.75);
    }
  }

  .desk-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .desk-pane {
    padding: var(--space-5);
    min-width: 0;
  }

  .desk-pane + .desk-pane {
    border-left: 1px solid var(--border-subtle);
  }

  .desk-pane-label {
    margin: 0 0 var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--text-tertiary);
  }

  /* Prospect */
  .prospect {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dur-4) var(--ease-out-expo),
      transform var(--dur-4) var(--ease-out-expo);
  }

  .prospect[data-in="true"] {
    opacity: 1;
    transform: none;
  }

  .prospect-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent-text);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .prospect-name {
    font-size: var(--text-base);
    font-weight: 600;
  }

  .prospect-meta {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
  }

  /* Scan line */
  .desk-scan {
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 84px;
    background: linear-gradient(
      to bottom,
      transparent,
      color-mix(in srgb, var(--teal-glow) 11%, transparent),
      transparent
    );
    opacity: 0;
    pointer-events: none;
  }

  .desk-scan[data-active="true"] {
    animation: scan 1.5s var(--ease-in-out) infinite;
  }

  @keyframes scan {
    0% {
      opacity: 0;
      transform: translateY(-40px);
    }
    30%,
    70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translateY(300px);
    }
  }

  /* Evidence chips */
  .evidence {
    display: grid;
    gap: var(--space-2);
  }

  .evidence-chip {
    display: grid;
    gap: 3px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: var(--space-3);
    opacity: 0;
    transform: translateY(8px) scale(0.985);
    transition: opacity var(--dur-4) var(--ease-out-expo),
      transform var(--dur-4) var(--ease-out-expo),
      border-color var(--dur-2) var(--ease-out-quart),
      background-color var(--dur-2) var(--ease-out-quart);
  }

  .evidence-chip[data-in="true"] {
    opacity: 1;
    transform: none;
  }

  .evidence-chip[data-lit="true"] {
    border-color: var(--accent-border);
    background: var(--accent-soft);
  }

  .chip-value {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
  }

  .chip-source {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-tertiary);
  }

  .chip-source::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--success);
  }

  /* Composed email */
  .compose {
    display: grid;
    gap: var(--space-3);
  }

  .compose-meta {
    display: grid;
    gap: var(--space-1);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
  }

  .compose-subject {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: var(--track-tight);
  }

  .compose-body {
    display: grid;
    gap: var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    min-height: 190px;
  }

  .compose-body p {
    margin: 0;
  }

  /* The traceability affordance — the whole point of the hero.
     display:inline (not the button default inline-block) so a multi-word
     phrase wraps across lines like text instead of overflowing the pane. */
  .claim {
    display: inline;
    position: relative;
    color: var(--text-primary);
    font-weight: 500;
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    text-align: left;
    cursor: help;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-color: var(--accent-border);
    transition: text-decoration-color var(--dur-2) var(--ease-out-quart),
      color var(--dur-2) var(--ease-out-quart);
  }

  .claim:hover,
  .claim[data-lit="true"] {
    text-decoration-color: var(--accent);
    color: var(--accent-text);
  }

  .caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 1px;
    vertical-align: text-bottom;
    background: var(--accent);
    animation: blink 1s steps(2, start) infinite;
  }

  @keyframes blink {
    to {
      visibility: hidden;
    }
  }

  .desk-connectors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 2;
    /* the endpoint dot uses fill="currentColor" */
    color: var(--accent);
  }

  .desk-connectors path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
    opacity: 0.85;
    animation: draw var(--dur-4) var(--ease-out-expo) forwards;
  }

  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  .desk-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-2);
  }

  .desk-caption {
    margin: 0;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
  }

  .desk-replay {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 30px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    transition: color var(--dur-2) var(--ease-out-quart),
      border-color var(--dur-2) var(--ease-out-quart);
  }

  .desk-replay:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
  }

  /* --- Acts (the narrative, replaces the feature-card grid) ----------- */
  .act {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(var(--space-8), 5vw, var(--space-20));
    align-items: center;
    padding-block: clamp(var(--space-12), 6vw, var(--space-24));
    border-top: 1px solid var(--border-subtle);
  }

  .act:nth-child(even) .act-copy {
    order: 2;
  }

  .act-index {
    display: block;
    margin-bottom: var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--track-caps);
    color: var(--accent-text);
  }

  .act-title {
    font-size: var(--text-display-3);
    letter-spacing: var(--track-display);
  }

  .act-copy > p {
    margin: var(--space-5) 0 0;
    max-width: 46ch;
    color: var(--text-secondary);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
  }

  .act-points {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
  }

  .act-points li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
    color: var(--text-secondary);
    font-size: var(--text-base);
  }

  .act-points li::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-top: 8px;
    border-radius: var(--radius-full);
    background: var(--accent);
  }

  .act-artifact {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    box-shadow: var(--shadow-3);
    padding: var(--space-5);
    min-width: 0;
  }

  /* Artifact: enriched record */
  .record {
    display: grid;
    gap: 1px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .record-row {
    display: grid;
    grid-template-columns: minmax(88px, auto) 1fr;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-sm);
  }

  .record-row:nth-child(odd) {
    background: var(--surface-2);
  }

  .record-key {
    color: var(--text-tertiary);
  }

  .record-val {
    color: var(--text-primary);
    overflow-wrap: anywhere;
  }

  .record-val.added {
    color: var(--success);
  }

  .record-val.added::before {
    content: "+ ";
    opacity: 0.7;
  }

  /* Artifact: throttle / warmup chart */
  .chart {
    display: grid;
    gap: var(--space-4);
  }

  .chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .chart-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--text-tertiary);
  }

  .chart-foot {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-tertiary);
  }

  /* Artifact: domain readiness stepper */
  .stepper {
    display: grid;
    gap: 0;
  }

  .step-node {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    position: relative;
  }

  .step-node:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 32px;
    bottom: -4px;
    width: 1px;
    background: var(--border);
  }

  .step-dot {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border-strong);
    background: var(--surface-1);
    color: var(--text-inverse);
    font-size: 10px;
    font-weight: 700;
    z-index: 1;
  }

  .step-node[data-state="done"] .step-dot {
    border-color: var(--success);
    background: var(--success);
  }

  .step-node[data-state="done"] .step-dot::before {
    content: "✓";
  }

  .step-node[data-state="active"] .step-dot {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }

  .step-node[data-state="blocked"] .step-dot {
    border-color: var(--danger);
  }

  .step-label {
    font-size: var(--text-sm);
    color: var(--text-primary);
  }

  .step-node[data-state="todo"] .step-label {
    color: var(--text-tertiary);
  }

  /* --- Instrument band ------------------------------------------------ */
  .instrument-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: var(--space-5);
  }

  .instrument-card {
    display: grid;
    gap: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    padding: var(--space-5);
  }

  .instrument-card h3 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
  }

  .instrument-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
  }

  /* --- Comparison ----------------------------------------------------- */
  .compare {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    overflow: hidden;
  }

  .compare-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
  }

  .compare-row:last-child {
    border-bottom: none;
  }

  .compare-row.is-head {
    background: var(--surface-2);
  }

  .compare-row.is-head span {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--text-tertiary);
  }

  .compare-row.is-head .compare-ours {
    color: var(--accent-text);
  }

  .compare-what {
    font-size: var(--text-base);
    color: var(--text-primary);
  }

  .compare-cell {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-tertiary);
    font-size: var(--text-sm);
  }

  .compare-cell.yes {
    color: var(--success);
  }

  .compare-cell.no::before {
    content: "—";
  }

  .compare-cell.yes::before {
    content: "✓";
    font-weight: 700;
  }

  /* --- Pricing -------------------------------------------------------- */
  .tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
    gap: var(--space-5);
    align-items: start;
  }

  .tier {
    display: grid;
    gap: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    padding: var(--space-6);
    transition: border-color var(--dur-2) var(--ease-out-quart),
      transform var(--dur-3) var(--ease-out-expo),
      box-shadow var(--dur-3) var(--ease-out-expo);
  }

  .tier:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-3);
  }

  .tier-featured {
    border-color: var(--accent-border);
    box-shadow: var(--shadow-2);
  }

  .tier-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-base);
    font-weight: 600;
  }

  .tier-price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-3xl);
    font-weight: 600;
    letter-spacing: var(--track-display);
    line-height: 1;
  }

  .tier-price small {
    font-size: var(--text-sm);
    font-weight: 400;
    letter-spacing: var(--track-normal);
    color: var(--text-tertiary);
  }

  .tier-blurb {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    min-height: 2.6em;
  }

  .tier-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--border-subtle);
    list-style: none;
    font-size: var(--text-sm);
  }

  .tier-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
    color: var(--text-secondary);
  }

  .tier-list li::before {
    content: "✓";
    color: var(--accent);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.5;
  }

  .tier-list li.off {
    color: var(--text-tertiary);
  }

  .tier-list li.off::before {
    content: "—";
    color: var(--text-tertiary);
    font-weight: 400;
  }

  /* --- Closing CTA ---------------------------------------------------- */
  .closing {
    position: relative;
    display: grid;
    gap: var(--space-6);
    justify-items: center;
    text-align: center;
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-xl);
    background: var(--surface-1);
    padding: clamp(var(--space-10), 6vw, var(--space-20)) var(--space-6);
    overflow: hidden;
  }

  .closing::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse at 50% 120%,
      color-mix(in srgb, var(--teal-glow) 14%, transparent),
      transparent 70%
    );
    pointer-events: none;
  }

  .closing > * {
    position: relative;
  }

  .closing h2 {
    max-width: 24ch;
    font-size: var(--text-display-2);
    letter-spacing: var(--track-display);
  }

  .closing p {
    max-width: 52ch;
    color: var(--text-secondary);
    font-size: var(--text-md);
  }

  /* --- Footer --------------------------------------------------------- */
  .site-footer {
    border-top: 1px solid var(--border-subtle);
    padding-block: var(--space-12) var(--space-8);
  }

  .footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    padding-bottom: var(--space-10);
  }

  .footer-brand p {
    margin: var(--space-4) 0 0;
    max-width: 34ch;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
  }

  .footer-col h3 {
    margin: 0 0 var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--text-tertiary);
  }

  .footer-col ul {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer-col a {
    color: var(--text-secondary);
    font-size: var(--text-sm);
  }

  .footer-col a:hover {
    color: var(--text-primary);
  }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-6);
    color: var(--text-tertiary);
    font-size: var(--text-sm);
  }

  /* --- Auth page (standalone: no app sidebar, no marketing nav) ------- */
  .auth-shell {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
  }

  .auth-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 68px;
  }

  .auth-main {
    display: grid;
    place-items: center;
    padding-block: var(--space-10) var(--space-16);
  }

  .auth-card {
    width: 100%;
    max-width: 440px;
  }

  .auth-card > h1 {
    font-size: var(--text-display-3);
    letter-spacing: var(--track-display);
  }

  .auth-card > p.auth-lede {
    margin: var(--space-4) 0 var(--space-8);
    color: var(--text-secondary);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
  }

  .auth-trust {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-subtle);
  }

  .auth-trust li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
  }

  .auth-trust li::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-top: 7px;
    border-radius: var(--radius-full);
    background: var(--success);
  }

  .auth-trust ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3);
  }

  /* --- Scroll reveal -------------------------------------------------- */
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-5) var(--ease-out-expo),
      transform var(--dur-5) var(--ease-out-expo);
  }

  .reveal[data-visible="true"] {
    opacity: 1;
    transform: none;
  }

  .reveal-delay-1 {
    transition-delay: 70ms;
  }
  .reveal-delay-2 {
    transition-delay: 140ms;
  }
  .reveal-delay-3 {
    transition-delay: 210ms;
  }
}

/* ==========================================================================
   GRAPHICS — the signature motif, texture, and edge treatments.
   Everything here is CSS gradients or inline SVG: no raster assets, no
   dependencies, and nothing that costs a network request.
   ========================================================================== */
@layer graphics {
  /* --- Signal field -----------------------------------------------------
     The brand motif: a dot matrix (the list) with a few lit nodes traced
     through it (the signal Interro found). Repeated behind the hero, in the
     section divider, and as the footer watermark so the page reads as one
     system. The grid is a single repeating gradient, not an image. */
  .signal-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
  }

  .signal-field::before {
    content: "";
    position: absolute;
    inset: -10%;
    background-image: radial-gradient(circle at center, var(--dot) 1px, transparent 1.6px);
    background-size: 26px 26px;
    /* Fade the grid out at the edges so it reads as depth, not wallpaper. */
    mask-image: radial-gradient(ellipse 75% 65% at 50% 38%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(
      ellipse 75% 65% at 50% 38%,
      #000 0%,
      transparent 78%
    );
  }

  /* The single motivated light source. One per section, never stacked. */
  .signal-field::after {
    content: "";
    position: absolute;
    top: -28%;
    left: 50%;
    width: min(1180px, 135%);
    aspect-ratio: 1.55;
    transform: translateX(-50%);
    background: radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--teal-glow) 15%, transparent) 0%,
      transparent 68%
    );
  }

  .signal-constellation {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--accent);
    opacity: 0.5;
  }

  .signal-constellation line {
    stroke: currentcolor;
    stroke-width: 0.6;
    opacity: 0.45;
  }

  .signal-constellation circle {
    fill: currentcolor;
  }

  /* --- Grain ------------------------------------------------------------
     A static SVG turbulence tile at very low opacity. This is the single
     cheapest way to stop large flat areas looking like dead vector fill.
     Static, not animated — animated grain is a repaint every frame. */
  .grain {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: var(--grain-opacity);
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* --- Brand mark -------------------------------------------------------
     Replaces the letter-in-a-box. Three nodes rising out of a dim field,
     traced by a line: the same idea as the background motif, so the logo and
     the page share one visual language. */
  .brand-logo {
    flex: none;
    width: 26px;
    height: 26px;
    color: var(--accent);
  }

  .brand-logo .bl-dim {
    fill: currentcolor;
    opacity: 0.28;
  }

  .brand-logo .bl-trace {
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.55;
  }

  .brand-logo .bl-node {
    fill: currentcolor;
  }

  /* --- Glow edge --------------------------------------------------------
     A hairline gradient along the top edge, brightest at centre. The
     Linear/Vercel signature, and what makes a dark card look lit rather
     than merely outlined. */
  .glow-edge {
    position: relative;
  }

  .glow-edge::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--edge-glow) 50%,
      transparent
    );
    opacity: 0.9;
    pointer-events: none;
  }

  /* --- Cursor spotlight -------------------------------------------------
     --mx/--my are written by shared/motion.js on pointer move. Only the
     pseudo-element's opacity animates, so there is no layout work. */
  .spotlight {
    position: relative;
    isolation: isolate;
  }

  .spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(
      380px circle at var(--mx, 50%) var(--my, 0%),
      var(--spot),
      transparent 65%
    );
    transition: opacity var(--dur-3) var(--ease-out-quart);
  }

  .spotlight:hover::after {
    opacity: 1;
  }

  /* --- Section divider motif ------------------------------------------- */
  .divider-motif {
    position: relative;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--border) 20%,
      var(--border) 80%,
      transparent
    );
  }

  .divider-motif::after {
    content: "";
    position: absolute;
    top: -2px;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: var(--radius-full);
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
  }

  /* --- Footer watermark ------------------------------------------------- */
  .site-footer {
    position: relative;
    overflow: hidden;
  }

  .site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, var(--dot) 1px, transparent 1.6px);
    background-size: 26px 26px;
    mask-image: linear-gradient(to top, #000, transparent 70%);
    -webkit-mask-image: linear-gradient(to top, #000, transparent 70%);
    pointer-events: none;
  }

  .site-footer > * {
    position: relative;
  }

  /* --- Aurora beam behind the closing CTA ------------------------------ */
  .closing::after {
    content: "";
    position: absolute;
    top: -60%;
    left: 50%;
    width: 60%;
    height: 200%;
    transform: translateX(-50%) rotate(18deg);
    background: linear-gradient(
      to bottom,
      transparent,
      color-mix(in srgb, var(--teal-glow) 12%, transparent),
      transparent
    );
    filter: blur(28px);
    pointer-events: none;
  }

  /* --- Area chart (replaces the flat bars) ----------------------------- */
  .area-chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .area-chart .ac-fill {
    fill: url(#warmupFill);
  }

  /* stop-color as a CSS property, so the theme token actually resolves */
  .area-chart .ac-stop-top {
    stop-color: var(--accent);
    stop-opacity: 0.3;
  }

  .area-chart .ac-stop-bottom {
    stop-color: var(--accent);
    stop-opacity: 0;
  }

  .area-chart .ac-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .area-chart .ac-grid {
    stroke: var(--border-subtle);
    stroke-width: 0.5;
  }

  .area-chart .ac-cap {
    fill: var(--accent);
  }

  .area-chart .ac-cap-ring {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1;
    opacity: 0.35;
  }
}

/* ==========================================================================
   MOTION — load choreography, scroll response, and hover life.
   Only transform / opacity / filter are animated, so everything stays on the
   compositor. Every rule here is neutralised by the reduced-motion block.
   ========================================================================== */
@layer motion {
  /* --- Load choreography -----------------------------------------------
     Staggered entrance for the hero. Uses animation (not the .reveal
     transition) because it must run on load, not on intersection. */
  @keyframes rise-in {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes rise-in-soft {
    from {
      opacity: 0;
      transform: translateY(26px) scale(0.992);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  [data-enter] {
    opacity: 0;
    animation: rise-in var(--dur-5) var(--ease-out-expo) forwards;
    animation-delay: calc(var(--enter-delay, 0) * 1ms);
  }

  [data-enter="soft"] {
    animation-name: rise-in-soft;
  }

  /* --- Heading line reveal ---------------------------------------------
     Each line rises out of its own clip box, which reads as typesetting
     rather than a fade. Lines are wrapped by shared/motion.js. */
  /* The padding/negative-margin pair keeps descenders (g, y, p) from being
     clipped by the overflow that makes the mask work. */
  .line-mask {
    display: block;
    overflow: hidden;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
  }

  .line-mask > span {
    display: block;
    transform: translateY(100%);
    transition: transform var(--dur-5) var(--ease-out-expo);
    transition-delay: calc(var(--line-index, 0) * 80ms);
  }

  [data-visible="true"] .line-mask > span,
  .line-mask[data-visible="true"] > span {
    transform: none;
  }

  /* --- Scroll progress -------------------------------------------------
     Scroll-driven CSS animation: runs off the main thread, needs no JS, and
     simply does not appear where unsupported. */
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: 100%;
    height: 2px;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--accent), var(--teal-glow));
    pointer-events: none;
  }

  @supports (animation-timeline: scroll()) {
    .scroll-progress {
      animation: progress-grow linear;
      animation-timeline: scroll(root block);
    }

    @keyframes progress-grow {
      to {
        transform: scaleX(1);
      }
    }

    /* Parallax drift on the motif — tied to the section's own view range. */
    .hero .signal-field {
      animation: motif-drift linear;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    @keyframes motif-drift {
      from {
        transform: translateY(-3%) scale(1.04);
      }
      to {
        transform: translateY(3%) scale(1);
      }
    }
  }

  /* --- Button life ------------------------------------------------------ */
  .button,
  .button-secondary,
  .button-ghost {
    position: relative;
    overflow: hidden;
  }

  /* A sheen that sweeps once on hover. */
  .button::after,
  .button-secondary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--sheen), transparent);
    opacity: 0;
    pointer-events: none;
    transform: skewX(-18deg);
  }

  .button:hover::after,
  .button-secondary:hover::after {
    animation: sheen var(--dur-4) var(--ease-out-quart);
  }

  @keyframes sheen {
    0% {
      left: -60%;
      opacity: 0;
    }
    35% {
      opacity: 0.75;
    }
    100% {
      left: 130%;
      opacity: 0;
    }
  }

  .button-lg:hover,
  .hero-actions .button:hover {
    transform: translateY(-1px);
  }

  /* --- Nav indicator ---------------------------------------------------- */
  .site-nav-links {
    position: relative;
  }

  .nav-indicator {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 2px;
    width: 0;
    border-radius: var(--radius-full);
    background: var(--accent);
    opacity: 0;
    transition: transform var(--dur-3) var(--ease-out-expo),
      width var(--dur-3) var(--ease-out-expo),
      opacity var(--dur-2) var(--ease-out-quart);
    pointer-events: none;
  }

  .site-nav-links[data-indicator="on"] .nav-indicator {
    opacity: 1;
  }

  /* --- Card lift -------------------------------------------------------- */
  .instrument-card,
  .act-artifact {
    transition: transform var(--dur-3) var(--ease-out-expo),
      border-color var(--dur-2) var(--ease-out-quart),
      box-shadow var(--dur-3) var(--ease-out-expo);
  }

  .instrument-card:hover,
  .act-artifact:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-3);
  }

  /* --- Evidence chip settle -------------------------------------------- */
  .evidence-chip[data-lit="true"] {
    transform: translateX(2px);
  }

  /* --- Area chart draw-on ---------------------------------------------- */
  .area-chart .ac-line {
    stroke-dasharray: var(--len, 600);
    stroke-dashoffset: var(--len, 600);
  }

  .area-chart .ac-fill {
    opacity: 0;
  }

  [data-visible="true"] .area-chart .ac-line {
    animation: draw-line 1.5s var(--ease-out-expo) forwards;
  }

  [data-visible="true"] .area-chart .ac-fill {
    animation: fade-in var(--dur-5) var(--ease-out-quart) 0.35s forwards;
  }

  [data-visible="true"] .area-chart .ac-cap,
  [data-visible="true"] .area-chart .ac-cap-ring {
    animation: pop var(--dur-4) var(--ease-spring) 1.1s backwards;
  }

  @keyframes draw-line {
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes fade-in {
    to {
      opacity: 1;
    }
  }

  @keyframes pop {
    from {
      transform: scale(0);
      opacity: 0;
    }
  }

  /* --- Stepper trace --------------------------------------------------- */
  [data-visible="true"] .step-node[data-state="active"] .step-dot {
    animation: ring-pulse 2.4s var(--ease-in-out) infinite;
  }

  @keyframes ring-pulse {
    0%,
    100% {
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    50% {
      box-shadow: 0 0 0 7px transparent;
    }
  }

  /* --- Table row entrance --------------------------------------------- */
  .table tbody tr[data-row] {
    animation: rise-in var(--dur-4) var(--ease-out-quart) backwards;
    animation-delay: calc(var(--row-index, 0) * 45ms);
  }

  @keyframes hero-plane-pulse {
    0%,
    100% {
      opacity: 0.08;
      transform: translateY(0px);
    }
    50% {
      opacity: 0.14;
      transform: translateY(-4px);
    }
  }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: var(--text-sm);
    font-weight: 500;
    transform: translateY(-200%);
    transition: transform var(--dur-2) var(--ease-out-expo);
  }

  .skip-link:focus-visible {
    transform: none;
  }

  .mt-0 {
    margin-top: 0;
  }
  .mt-4 {
    margin-top: var(--space-4);
  }
  .mt-6 {
    margin-top: var(--space-6);
  }
  .text-center {
    text-align: center;
  }
  .no-wrap {
    white-space: nowrap;
  }

  .grid-span-full {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .hero-grid,
  .act,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .act:nth-child(even) .act-copy {
    order: 0;
  }

  .footer-grid {
    gap: var(--space-8);
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .sidebar-foot {
    margin-top: var(--space-2);
  }

  .grid-4,
  .grid-3,
  .split,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .topbar {
    flex-direction: column;
  }

  .status-row {
    justify-content: flex-start;
  }

}

@media (max-width: 860px) {
  /* The mobile menu replaces the inline links — no more dead-end nav. */
  .site-nav-links,
  .nav-actions .button-secondary {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .desk-stage {
    grid-template-columns: 1fr;
  }

  .hero-plane-background-svg {
    width: 320px;
    height: 320px;
  }

  .desk-pane + .desk-pane {
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
  }

  /* Connector geometry assumes a two-column desk; hide rather than lie. */
  .desk-connectors {
    display: none;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .compare-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .compare-row.is-head {
    display: none;
  }

  .compare-cell::after {
    content: attr(data-for);
    color: var(--text-tertiary);
    font-size: var(--text-xs);
  }
}

@media (max-width: 620px) {
  .main,
  .sidebar {
    padding: var(--space-5);
  }

  .container,
  .container-narrow {
    padding-inline: var(--space-5);
  }

  .page-title {
    font-size: var(--text-xl);
  }

  .field-grid.two {
    grid-template-columns: 1fr;
  }

  .workflow-step {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .card {
    padding: var(--space-5);
  }

  .hero-actions .button,
  .hero-actions .button-secondary {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   REDUCED MOTION — now guarding animations that actually exist
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  /* Anything that animates INTO view must be visible at rest, not stuck at
     opacity 0 with its animation disabled. Every entrance effect needs a
     resting state here or the content is simply gone. */
  .reveal,
  .prospect,
  .evidence-chip,
  [data-enter],
  .table tbody tr[data-row] {
    opacity: 1 !important;
    transform: none !important;
  }

  .line-mask > span {
    transform: none !important;
  }

  .desk-connectors path {
    stroke-dashoffset: 0 !important;
  }

  /* The chart draws itself on; without motion it must simply be drawn. */
  .area-chart .ac-line {
    stroke-dashoffset: 0 !important;
  }

  .area-chart .ac-fill,
  .area-chart .ac-cap,
  .area-chart .ac-cap-ring {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Purely decorative movement: remove rather than freeze. */
  .desk-scan,
  .caret,
  .scroll-progress,
  .nav-indicator {
    display: none !important;
  }

  .button::after,
  .button-secondary::after {
    display: none !important;
  }

  .desk-phase::before,
  .step-node[data-state="active"] .step-dot {
    animation: none !important;
  }

  /* Grain is static texture, not motion, so it stays. Parallax does not. */
  .hero .signal-field {
    animation: none !important;
    transform: none !important;
  }

  .hero-plane-background-svg {
    animation: none !important;
    opacity: 0.1;
    transform: none !important;
  }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .site-header,
  .site-footer,
  .sidebar,
  .desk-replay,
  .menu-toggle {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}
/* DNS Record Display Styles */
@layer components {
  .dns-records-detail {
    padding: 1.5rem;
    background: var(--n-25);
    border-radius: var(--radius-lg);
    border: 1px solid var(--n-200);
  }

  .dns-record-section {
    margin-bottom: 2rem;
  }

  .dns-record-section h3 {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--n-700);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .dns-record-item {
    background: var(--n-0);
    border: 1px solid var(--n-150);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .dns-record-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.875rem;
    flex-wrap: wrap;
  }

  .dns-record-row:last-child {
    margin-bottom: 0;
  }

  .dns-record-row strong {
    color: var(--n-600);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 120px;
  }

  .dns-record-row code {
    background: var(--n-50);
    color: var(--n-800);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    word-break: break-all;
    flex: 1;
    min-width: 200px;
    border: 1px solid var(--n-150);
  }

  .button-copy {
    padding: 0.5rem 0.875rem;
    font-size: var(--text-xs);
    background: var(--teal-500);
    color: var(--n-0);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--dur-1) ease;
  }

  .button-copy:hover:not(:disabled) {
    background: var(--teal-600);
  }

  .button-copy:active:not(:disabled) {
    background: var(--teal-700);
  }

  .button-copy:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .dns-guidance-box {
    background: var(--amber-600);
    opacity: 0.08;
    border: 1px solid var(--amber-500);
    opacity: 0.15;
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-top: 1.5rem;
  }

  .dns-guidance-box p {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--n-700);
    margin-bottom: 0.875rem;
  }

  .dns-guidance-hints {
    list-style: disc;
    margin-left: 1.5rem;
  }

  .dns-guidance-hints li {
    font-size: var(--text-xs);
    color: var(--n-600);
    margin-bottom: 0.5rem;
    line-height: 1.5;
  }

  .dns-guidance-hints li:last-child {
    margin-bottom: 0;
  }

  @media (max-width: 768px) {
    .dns-record-row {
      flex-direction: column;
      align-items: flex-start;
    }

    .dns-record-row strong {
      margin-bottom: 0.5rem;
    }

    .button-copy {
      width: 100%;
    }
  }
}