/* ═══════════════════════════════════════════════════════════════
   SIRENS TO SCALES — Visual Design System for Evident ICU

   The scroll journey from urgency to order.
   Sirens  (emergency, chaos, scattered evidence) →
   Scales  (balance, deliberation, defensible record)

   Inspired by Temporal.io's layered depth:
   parallax foreground/background with scroll-driven atmosphere.

   Layer Stack (back → front):
     z: -1  .sirens-atmo    — viewport atmosphere (warm ↔ cool)
     z:  0  .sirens-page    — structural grid + SVG texture
     z:  1  .sirens-shell   — content layer
     z:  2  .sirens-fg      — floating evidence nodes (parallax)

   --sirens-page-progress is set by JS (0 at top, 1 at bottom).
   ═══════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ───────────────────────────────────────────── */

:root {
  /* Canvas */
  --sirens-bg: #07101d;
  --sirens-bg-deep: #050a13;
  --sirens-panel: rgb(11 20 34 / 88%);
  --sirens-panel-strong: rgb(12 24 41 / 96%);
  --sirens-panel-soft: rgb(18 32 53 / 75%);
  --sirens-border: rgb(126 157 202 / 18%);
  --sirens-border-strong: rgb(126 157 202 / 34%);
  --sirens-text: #eaf1fb;
  --sirens-text-muted: #9eb0cb;

  /* Warm zone — sirens (emergency, urgency) */
  --sirens-red: #c7475e;
  --sirens-red-glow: rgb(199 71 94 / 24%);
  --sirens-amber: #d9af67;
  --sirens-amber-bright: #f3d59a;

  /* Cool zone — scales (institutional balance) */
  --sirens-blue: #62b5ff;
  --sirens-blue-strong: #2d78ff;
  --sirens-blue-glow: rgb(45 120 255 / 22%);
  --sirens-gold: #d9af67;
  --sirens-gold-bright: #f3d59a;

  /* Scroll narrative — 0 at top, 1 at bottom (set by JS) */
  --sirens-page-progress: 0;

  /* Layout */
  --sirens-shadow: 0 30px 80px rgb(0 0 0 / 38%);
  --sirens-radius-xl: 1.75rem;
  --sirens-radius-lg: 1.2rem;
  --sirens-max: var(--surface-marketing-max, 1260px);
  --sirens-shell-gutter: var(--surface-shell-gutter, clamp(1rem, 0.72rem + 1vw, 1.75rem));
  --sirens-shell-pad: var(--surface-card-pad-relaxed, clamp(1.2rem, 0.98rem + 1vw, 1.85rem));
  --sirens-card-pad: var(--surface-card-pad, clamp(1rem, 0.82rem + 0.7vw, 1.45rem));
  --sirens-grid-gap: var(--surface-gap-2, 1rem);
  --sirens-grid-gap-lg: var(--surface-gap-3, 1.5rem);
  --sirens-scene-space: var(--surface-gap-5, clamp(2.4rem, 1.9rem + 2.3vw, 4.6rem));
  --sirens-readable-max: var(--surface-readable-max, 66ch);
  --sirens-display: "Cormorant Garamond", georgia, serif;
  --sirens-body: "Inter", "Segoe UI", sans-serif;
  --sirens-mono: "IBM Plex Mono", "SFMono-Regular", consolas, monospace;
}

/* ─── L-1: Canvas & Atmosphere (body level) ───────────────────── */

body[data-site-surface="public"] {
  background:
    radial-gradient(circle at 18% 0%, rgb(199 71 94 / 16%), transparent 24%),
    radial-gradient(circle at 83% 8%, rgb(45 120 255 / 18%), transparent 26%),
    linear-gradient(180deg, #07101d 0%, #08111d 35%, #0b1422 60%, #0d1725 100%);
  color: var(--sirens-text);
}

/* Warm atmosphere — fades as you scroll toward scales */
.sirens-atmo--warm {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 45% at 12% 8%, rgb(199 71 94 / 26%), transparent),
    radial-gradient(ellipse 45% 35% at 78% 4%, rgb(217 175 103 / 18%), transparent),
    radial-gradient(ellipse 35% 30% at 50% 15%, rgb(199 71 94 / 10%), transparent);
  opacity: calc(0.85 - 0.65 * var(--sirens-page-progress, 0));
  will-change: opacity;
}

/* Cool atmosphere — strengthens as you scroll toward scales */
.sirens-atmo--cool {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 45% at 88% 82%, rgb(45 120 255 / 22%), transparent),
    radial-gradient(ellipse 40% 35% at 14% 88%, rgb(98 181 255 / 16%), transparent),
    radial-gradient(ellipse 50% 40% at 55% 75%, rgb(45 120 255 / 8%), transparent);
  opacity: calc(0.1 + 0.7 * var(--sirens-page-progress, 0));
  will-change: opacity;
}

/* ─── Header overrides for dark public surface ─────────────────── */

body[data-site-surface="public"] .site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  border-bottom: 0;
}

body[data-site-surface="public"] .site-header__beam {
  background: linear-gradient(90deg, rgb(199 71 94 / 42%), rgb(98 181 255 / 52%), rgb(217 175 103 / 34%));
  opacity: 0.5;
}

/* Brand copy — secondary line below logo on wide screens */
body[data-site-surface="public"] .site-header__brand-copy {
  color: rgb(158 176 203 / 70%);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Nav link separator between primary and utility items */
body[data-site-surface="public"] .site-header__item--separator {
  width: 1px;
  height: 1.3rem;
  margin-inline: 0.35rem;
  background: rgb(126 157 202 / 16%);
  align-self: center;
  flex-shrink: 0;
}

/* Top-bar nav links — light text on dark header bar */
body[data-site-surface="public"] .site-header__link {
  color: rgb(231 238 248 / 88%);
  transition:
    background-color 220ms ease,
    color 180ms ease,
    box-shadow 220ms ease;
}

body[data-site-surface="public"] .site-header__link:hover,
body[data-site-surface="public"] .site-header__link:focus-visible {
  color: #fff;
  background: rgb(126 157 202 / 14%);
  box-shadow: inset 0 0 0 1px rgb(126 157 202 / 18%);
  outline-color: rgb(98 181 255 / 60%);
}

/* Active state — subtle underline indicator */
body[data-site-surface="public"] .site-header__link[aria-current="page"] {
  color: #fff;
  background: rgb(98 181 255 / 10%);
  box-shadow: inset 0 -2px 0 0 rgb(98 181 255 / 50%);
}

/* Dropdown panels — dark to match the surface */
body[data-site-surface="public"] .site-header__dropdown {
  background:
    linear-gradient(180deg, rgb(35 40 47 / 93%), rgb(28 33 39 / 90%)),
    radial-gradient(circle at top left, rgb(208 120 0 / 8%), transparent 50%);
  border-color: rgb(148 163 184 / 18%);
  box-shadow:
    0 34px 84px rgb(0 0 0 / 42%),
    0 8px 24px rgb(0 0 0 / 24%),
    inset 0 1px 0 rgb(255 255 255 / 10%);
  transform: translateY(0.65rem);
  transition:
    opacity 250ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 250ms ease;
}

body[data-site-surface="public"] .site-header__panel-group {
  /* Use navy-toned panels to visually match the header/nav bar while
     preserving a subtle glass look. Center area is slightly more solid
     for readability; edges remain translucent so page content is visible. */
  background:
    radial-gradient(ellipse at 50% 10%, rgb(11 19 35 / 86%), transparent 48%),
    linear-gradient(180deg, rgb(10 18 32 / 84%), rgb(13 22 36 / 78%));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);
  border-radius: 0.85rem;
}

body[data-site-surface="public"] .site-header__dropdown-heading {
  color: rgb(158 176 203 / 80%);
}

body[data-site-surface="public"] .site-header__dropdown-label {
  color: #e7eef8;
}

body[data-site-surface="public"] .site-header__dropdown-copy {
  color: #9eb0cb;
}

body[data-site-surface="public"] .site-header__dropdown-link:hover,
body[data-site-surface="public"] .site-header__dropdown-link:focus-visible {
  background: rgb(98 181 255 / 8%);
  box-shadow: inset 0 0 0 1px rgb(126 157 202 / 14%);
  outline-color: rgb(98 181 255 / 50%);
}

/* Mobile drawer — inner elements transparent; the glass panel lives on
   .site-header__drawer itself (site-header.css). Setting backgrounds here
   would layer a second panel on top of the glass, breaking the effect. */
body[data-site-surface="public"] .site-header__drawer-menu {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  overflow: visible;
}

/* Drawer shell is transparent — the outer drawer panel owns all visual depth */
body[data-site-surface="public"] .site-header__drawer-shell {
  background: transparent;
  box-shadow: none;
}

/* Force only the top-level drawer to handle scrolling — prevent nested
   scroll behavior by making inner elements expand naturally. */
body[data-site-surface="public"] .site-header__drawer,
body[data-site-surface="public"] .site-header__drawer.is-open,
body[data-site-surface="public"] .site-header__drawer[aria-hidden="false"] {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body[data-site-surface="public"] .site-header__drawer-link,
body[data-site-surface="public"] .site-header__drawer-sublink,
body[data-site-surface="public"] .site-header__drawer-details summary {
  color: #e7eef8;
}

body[data-site-surface="public"] .site-header__drawer-sublink span {
  color: #9eb0cb;
}

body[data-site-surface="public"] .site-header__drawer-link:hover,
body[data-site-surface="public"] .site-header__drawer-link:focus-visible,
body[data-site-surface="public"] .site-header__drawer-sublink:hover,
body[data-site-surface="public"] .site-header__drawer-sublink:focus-visible {
  color: #fff;
  background: rgb(98 181 255 / 8%);
}

body[data-site-surface="public"] .site-header__mobile-toggle {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(126 157 202 / 18%);
  color: #e7eef8;
}

/* Badges — ensure readability on dark panels */
body[data-site-surface="public"] .site-header__dropdown-badge,
body[data-site-surface="public"] .site-header__drawer-badge {
  background: #f8ede0;
  color: #6a3f0b;
}

/* Buttons */
body[data-site-surface="public"] .site-header__btn--ghost {
  border-color: rgb(126 157 202 / 24%);
  background: rgb(255 255 255 / 5%);
  color: #e7eef8;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

body[data-site-surface="public"] .site-header__btn--ghost:hover {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(126 157 202 / 36%);
  box-shadow: 0 0 0 3px rgb(98 181 255 / 12%);
}

body[data-site-surface="public"] .site-header__btn--primary {
  background: linear-gradient(135deg, #0f66de, #2c89ff 55%, #78c5ff);
  border-color: transparent;
  box-shadow:
    0 12px 28px rgb(45 120 255 / 30%),
    inset 0 1px 0 rgb(255 255 255 / 18%);
  color: #fff;
  transition:
    box-shadow 200ms ease,
    transform 200ms ease;
}

body[data-site-surface="public"] .site-header__btn--primary:hover {
  box-shadow:
    0 16px 36px rgb(45 120 255 / 40%),
    inset 0 1px 0 rgb(255 255 255 / 22%);
  transform: translateY(-1px);
}

body[data-site-surface="public"] .site-header__signal {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(126 157 202 / 18%);
  color: #c8d8ef;
}

/* Logo swap */
body[data-site-surface="public"] .site-header__logo--light {
  display: none;
}

body[data-site-surface="public"] .site-header__logo--dark {
  display: block;
}

/* ─── Footer overrides ─────────────────────────────────────────── */

body[data-site-surface="public"] .site-footer {
  background:
    radial-gradient(circle at top left, rgb(199 71 94 / 12%), transparent 28%),
    radial-gradient(circle at top right, rgb(45 120 255 / 12%), transparent 26%), #06101d;
  color: var(--sirens-text);
  border-top: 1px solid rgb(126 157 202 / 12%);
}

body[data-site-surface="public"] .site-footer a,
body[data-site-surface="public"] .footer-tagline,
body[data-site-surface="public"] .footer-nav__heading {
  color: inherit;
}

/* ─── L0: Page Structure & Grid Texture ────────────────────────── */

.sirens-page {
  position: relative;
  overflow: hidden;
  padding-bottom: var(--sirens-scene-space);
  font-family: var(--sirens-body);
}

/* Grid pattern — subtle crosshatch giving structural depth */
.sirens-page::before,
.sirens-page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sirens-page::before {
  background:
    linear-gradient(transparent 0, transparent 49%, rgb(126 157 202 / 3%) 50%, transparent 51%, transparent 100%),
    linear-gradient(90deg, transparent 0, transparent 49%, rgb(126 157 202 / 3%) 50%, transparent 51%, transparent 100%);
  background-size:
    100% 68px,
    68px 100%;
  mask-image: linear-gradient(180deg, rgb(0 0 0 / 72%), transparent 96%);
}

/* Evidence constellation SVG overlay — structural depth texture */
.sirens-page::after {
  background: url("/assets/img/launch/evidence-constellation.svg") center top / 1800px auto no-repeat;
  opacity: 0.06;
  mix-blend-mode: screen;
}

/* ─── Section Gradient Zones ───────────────────────────────────── */

[data-sirens-zone="warm"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 30% at 8% 12%, rgb(199 71 94 / 18%), transparent),
    radial-gradient(ellipse 35% 25% at 88% 20%, rgb(217 175 103 / 12%), transparent);
  z-index: -1;
}

[data-sirens-zone="cool"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 30% at 84% 18%, rgb(45 120 255 / 18%), transparent),
    radial-gradient(ellipse 35% 28% at 12% 75%, rgb(98 181 255 / 12%), transparent);
  z-index: -1;
}

[data-sirens-zone="gold"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 35% at 50% 15%, rgb(217 175 103 / 14%), transparent),
    radial-gradient(ellipse 30% 20% at 20% 60%, rgb(199 71 94 / 8%), transparent);
  z-index: -1;
}

/* ─── L1: Content Container ────────────────────────────────────── */

.sirens-shell {
  position: relative;
  z-index: 1;
  width: min(calc(100% - (2 * var(--sirens-shell-gutter))), var(--sirens-max));
  margin: 0 auto;
}

.sirens-shell--cta-center {
  text-align: center;
  padding-block: 3rem;
}

/* ─── L2: Foreground Evidence Nodes ────────────────────────────── */

.sirens-fg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.sirens-fg__node {
  position: absolute;
  width: var(--node-size, 4px);
  height: var(--node-size, 4px);
  border-radius: 50%;
  background: currentcolor;
  box-shadow: 0 0 calc(var(--node-size, 4px) * 2.5) calc(var(--node-size, 4px) * 0.6) currentcolor;
  will-change: transform;
}

/* Warm nodes — visible in sirens zone, fade toward scales */
.sirens-fg__node--warm {
  color: var(--sirens-amber-bright);
  opacity: calc(0.32 - 0.26 * var(--sirens-page-progress, 0));
}

/* Cool nodes — emerge toward scales zone */
.sirens-fg__node--cool {
  color: var(--sirens-blue);
  opacity: calc(0.06 + 0.3 * var(--sirens-page-progress, 0));
}

/* Connection lines between nodes — very subtle */
.sirens-fg__line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, rgb(126 157 202 / calc(0.06 + 0.04 * var(--sirens-page-progress, 0))), transparent);
  transform-origin: left center;
  will-change: transform;
}

/* ─── Scene Sections ───────────────────────────────────────────── */

.sirens-scene {
  position: relative;
  padding: var(--sirens-scene-space) 0;
}

.sirens-scene--hero {
  padding-top: clamp(1.4rem, 2.6vw, 3rem);
  padding-bottom: clamp(0.8rem, 1.4vw, 1.6rem);
}

.sirens-scene__noise,
.sirens-scene__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sirens-scene__noise {
  background:
    radial-gradient(circle at 15% 18%, rgb(199 71 94 / 24%), transparent 20%),
    radial-gradient(circle at 86% 13%, rgb(45 120 255 / 26%), transparent 22%),
    radial-gradient(circle at 52% 78%, rgb(217 175 103 / 14%), transparent 28%);
  filter: blur(20px);
  opacity: calc(0.68 - var(--sirens-scene-progress, 0) * 0.28);
}

.sirens-scene__grid {
  opacity: 0.18;
  background:
    linear-gradient(90deg, transparent, rgb(126 157 202 / 12%) 50%, transparent), linear-gradient(rgb(126 157 202 / 10%), transparent);
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}

/* ─── Hero ─────────────────────────────────────────────────────── */

.sirens-hero {
  display: grid;
  gap: clamp(1.2rem, 0.9rem + 1vw, 2rem);
  align-items: center;
}

.sirens-scene--hero .sirens-hero {
  position: relative;
  width: min(100%, 74rem);
  margin-inline: auto;
  padding: clamp(1.2rem, 0.9rem + 1.2vw, 2rem);
  border: 1px solid rgb(126 157 202 / 14%);
  border-radius: 2.2rem;
  background:
    radial-gradient(circle at 12% 18%, rgb(199 71 94 / 16%), transparent 22%),
    radial-gradient(circle at 84% 18%, rgb(45 120 255 / 18%), transparent 26%),
    linear-gradient(135deg, rgb(9 18 31 / 98%), rgb(7 13 23 / 94%) 46%, rgb(10 19 33 / 98%));
  box-shadow: 0 36px 110px rgb(0 0 0 / 42%);
  overflow: hidden;
}

/* Inner grid texture on hero card */
.sirens-scene--hero .sirens-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent 0, transparent 49%, rgb(126 157 202 / 3%) 50%, transparent 51%, transparent 100%),
    linear-gradient(90deg, transparent 0, transparent 49%, rgb(126 157 202 / 3%) 50%, transparent 51%, transparent 100%);
  background-size:
    100% 72px,
    72px 100%;
  mask-image: radial-gradient(circle at center, black, transparent 82%);
  pointer-events: none;
}

.sirens-scene--hero .sirens-hero--center-stage {
  justify-items: center;
  gap: clamp(1.4rem, 1rem + 1.6vw, 2.6rem);
}

/* ─── Cards & Panels (shared border treatment) ─────────────────── */

.sirens-hero__copy,
.sirens-stage,
.sirens-block,
.sirens-lane,
.sirens-surface-card,
.sirens-pricing-card,
.sirens-trust-card,
.sirens-demo-card,
.sirens-exhibit,
.sirens-proof-panel,
.sirens-callout {
  border: 1px solid var(--sirens-border);
  border-radius: var(--sirens-radius-xl);
  background: linear-gradient(180deg, rgb(13 23 38 / 94%), rgb(7 13 23 / 90%));
  box-shadow: var(--sirens-shadow);
}

.sirens-hero__copy {
  padding: var(--sirens-shell-pad);
}

.sirens-scene--hero .sirens-hero__copy,
.sirens-scene--hero .sirens-stage {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.sirens-scene--hero .sirens-hero__copy {
  display: grid;
  gap: 0.65rem;
  justify-items: center;
  text-align: center;
  padding: clamp(1rem, 0.5rem + 1vw, 1.5rem);
  max-width: 100%;
  margin-inline: auto;
  width: 100%;
}

@media (width >= 1024px) {
  .sirens-scene--hero .sirens-hero__copy {
    max-width: 75rem;
  }
}

@media (width >= 1400px) {
  .sirens-scene--hero .sirens-hero__copy {
    max-width: 85rem;
  }
}

.sirens-scene--hero .sirens-hero__copy .sirens-actions {
  justify-content: center;
}

/* ─── Eyebrow Badge ────────────────────────────────────────────── */

.sirens-scene__eyebrow,
.sirens-exhibit__label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  background: rgb(98 181 255 / 12%);
  color: #bedcff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ─── Typography ───────────────────────────────────────────────── */

.sirens-hero__title,
.sirens-scene__title,
.sirens-pricing__title,
.sirens-faq__title {
  margin: 0.65rem 0 0;
  font-family: var(--sirens-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.96;
  color: #fff6e4;
}

.sirens-hero__title {
  font-size: clamp(2rem, 4vw, 3.85rem);
  max-width: 30ch;
  text-wrap: balance;
  overflow-wrap: break-word;
}

@media (width <= 768px) {
  .sirens-hero__title {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    max-width: 100%;
    line-height: 1.2;
  }
}

.sirens-scene__title,
.sirens-pricing__title,
.sirens-faq__title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.25;
  margin: 1rem 0 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

@media (width <= 768px) {
  .sirens-scene__title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.3;
  }
}

.sirens-hero__body,
.sirens-scene__body,
.sirens-exhibit__body p,
.sirens-lane p,
.sirens-block p,
.sirens-trust-card p,
.sirens-demo-card p,
.sirens-pricing-card p,
.sirens-callout,
.sirens-prose {
  color: var(--sirens-text-muted);
  line-height: 1.75;
  font-size: 1.04rem;
}

.sirens-hero__body,
.sirens-scene__body,
.sirens-prose {
  max-width: var(--sirens-readable-max);
}

.sirens-hero__body {
  max-width: 100%;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.75;
  margin-top: 1rem;
}

@media (width <= 1024px) {
  .sirens-hero__body {
    font-size: 1.05rem;
  }
}

@media (width <= 768px) {
  .sirens-hero__body {
    font-size: 1rem;
    line-height: 1.7;
  }
}

.sirens-hero--center-stage .sirens-hero__body {
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Actions & Buttons ────────────────────────────────────────── */

.sirens-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sirens-grid-gap);
  margin-top: 1.6rem;
}

.sirens-hero__copy .sirens-actions {
  margin-top: 1.1rem;
}

.sirens-actions--trust-cta {
  width: 100%;
  margin-top: 1rem;
}

.sirens-actions--trust-cta .sirens-button {
  flex: 1 1 14rem;
}

.sirens-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  text-decoration: none;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.sirens-button:hover,
.sirens-button:focus-visible {
  transform: translateY(-1px);
}

.sirens-button--primary {
  background: linear-gradient(135deg, #d04e67, #2d78ff 56%, #f0d498 100%);
  color: #04101d;
  box-shadow: 0 16px 34px rgb(45 120 255 / 18%);
}

.sirens-button--secondary {
  background: rgb(255 255 255 / 3%);
  border-color: var(--sirens-border-strong);
  color: var(--sirens-text);
}

.sirens-text-link {
  display: inline-flex;
  align-items: center;
  color: var(--sirens-gold-bright);
  font-weight: 700;
  text-decoration: none;
}

/* ─── Meta Chips ───────────────────────────────────────────────── */

.sirens-chip-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 0.65rem;
  margin-top: 1.2rem;
  width: min(100%, 56rem);
  margin-inline: auto;
}

.sirens-chip-row span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.15rem;
  width: 100%;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgb(126 157 202 / 14%);
  background: rgb(255 255 255 / 3.5%);
  color: #dce8f8;
  font-size: 0.84rem;
  text-align: center;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/* ─── Point List ───────────────────────────────────────────────── */

.sirens-hero-facts {
  display: grid;
  gap: 0.8rem;
  width: min(100%, 58rem);
  margin: 1.35rem auto 0;
  align-items: stretch;
}

.sirens-hero-fact {
  display: grid;
  gap: 0.32rem;
  align-items: start;
  min-height: 100%;
  padding: 0.95rem 1rem 1rem;
  border-radius: 1.1rem;
  border: 1px solid rgb(126 157 202 / 16%);
  background: linear-gradient(180deg, rgb(255 255 255 / 4.5%), rgb(255 255 255 / 1.8%));
  color: #dce8f8;
  text-align: left;
}

.sirens-hero-fact__kicker {
  color: var(--sirens-gold-bright);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sirens-hero-fact__body {
  margin: 0;
  color: #dce8f8;
  font-size: 0.94rem;
  line-height: 1.5;
}

/* ─── Stage (Hero Media Panel) ─────────────────────────────────── */

.sirens-stage {
  position: relative;
  padding: 0.85rem;
  overflow: hidden;
}

.sirens-scene--hero .sirens-stage {
  width: min(100%, 34rem);
  margin-inline: auto;
  justify-self: center;
  padding: 0.35rem;
}

.sirens-stage__panel {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 12 / 7;
  border-radius: calc(var(--sirens-radius-xl) - 0.35rem);
  border: 1px solid rgb(126 157 202 / 14%);
  background: linear-gradient(180deg, rgb(14 26 42 / 92%), rgb(8 14 24 / 97%));
  box-shadow: inset 0 1px 0 rgb(126 157 202 / 8%);
}

.sirens-stage__image,
.sirens-exhibit__art img,
.sirens-cta__art img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}

.sirens-stage__beam {
  position: absolute;
  inset: auto auto 8% 8%;
  width: 46%;
  height: 22%;
  border-radius: 999px;
  filter: blur(60px);
  opacity: 0.45;
}

.sirens-stage__beam--left {
  background: rgb(199 71 94 / 30%);
}

.sirens-stage__beam--right {
  right: 8%;
  left: auto;
  background: rgb(45 120 255 / 34%);
}

.sirens-stage__caption {
  margin-top: 0.75rem;
  color: var(--sirens-gold-bright);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/* ─── Flow Steps (Transformation Strip) ────────────────────────── */

.sirens-flow {
  display: grid;
  gap: var(--sirens-grid-gap);
}

.sirens-flow__step,
.sirens-block,
.sirens-lane,
.sirens-trust-card,
.sirens-pricing-card,
.sirens-demo-card {
  padding: var(--sirens-card-pad);
}

.sirens-flow__step {
  border-radius: var(--sirens-radius-lg);
  border: 1px solid var(--sirens-border);
  background: linear-gradient(180deg, rgb(14 24 39 / 80%), rgb(8 14 23 / 92%));
}

.sirens-flow__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgb(217 175 103 / 16%);
  color: var(--sirens-gold-bright);
  font-size: 0.88rem;
  font-weight: 700;
}

.sirens-flow__step h3,
.sirens-block h3,
.sirens-lane h3,
.sirens-exhibit h3,
.sirens-pricing-card h3,
.sirens-trust-card h3,
.sirens-demo-card h3 {
  margin: 1rem 0 0.45rem;
  font-family: var(--sirens-display);
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  color: #fff2da;
}

/* ─── Grids ────────────────────────────────────────────────────── */

.sirens-section-grid,
.sirens-story-grid,
.sirens-lane-grid,
.sirens-surface-grid,
.sirens-exhibit-grid,
.sirens-trust-grid,
.sirens-pricing-grid,
.sirens-demo-grid,
.sirens-faq {
  display: grid;
  gap: var(--sirens-grid-gap);
}

.sirens-section-grid > *,
.sirens-story-grid > *,
.sirens-lane-grid > *,
.sirens-surface-grid > *,
.sirens-exhibit-grid > *,
.sirens-trust-grid > *,
.sirens-pricing-grid > *,
.sirens-demo-grid > *,
.sirens-faq > * {
  min-width: 0;
}

.sirens-section-grid--split {
  align-items: start;
}

.sirens-block--accent {
  background:
    radial-gradient(circle at top right, rgb(45 120 255 / 16%), transparent 32%),
    linear-gradient(180deg, rgb(15 27 45 / 96%), rgb(7 12 21 / 96%));
}

.sirens-story-grid .sirens-block {
  height: 100%;
}

.sirens-story-grid,
.sirens-lane-grid,
.sirens-surface-grid,
.sirens-exhibit-grid,
.sirens-trust-grid,
.sirens-pricing-grid {
  align-items: stretch;
}

@supports (selector(:has(*))) {
  @media (width >= 900px) {
    .sirens-trust-grid.grid-balanced:has(> :nth-child(5):last-child),
    .sirens-pricing-grid.grid-balanced:has(> :nth-child(5):last-child) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}

.sirens-story-grid .sirens-block,
.sirens-lane-grid .sirens-lane,
.sirens-surface-grid .sirens-surface-card,
.sirens-trust-grid .sirens-trust-card,
.sirens-pricing-grid .sirens-pricing-card {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  height: 100%;
}

.sirens-surface-card {
  padding: var(--sirens-card-pad);
}

.sirens-surface-card__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 2rem;
  padding: 0.38rem 0.78rem;
  border-radius: 999px;
  background: rgb(98 181 255 / 12%);
  color: #bedcff;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sirens-surface-card h3 {
  margin: 0;
  font-family: var(--sirens-display);
  font-size: clamp(1.55rem, 2.2vw, 2.05rem);
  color: #fff2da;
}

.sirens-surface-card p {
  margin: 0;
  color: var(--sirens-text-muted);
  line-height: 1.7;
}

.sirens-surface-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: auto;
}

.sirens-lane__cta,
.sirens-pricing-grid .sirens-pricing-card .sirens-button {
  margin-top: auto;
}

.sirens-surface-card__meta span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgb(126 157 202 / 16%);
  background: rgb(255 255 255 / 4%);
  color: #dce8f8;
  font-size: 0.76rem;
  font-weight: 600;
}

/* ─── Proof Window (Code Block) ────────────────────────────────── */

.sirens-proof-window {
  margin-top: 1rem;
  padding: 0.95rem;
  border-radius: 1rem;
  background: radial-gradient(circle at top right, rgb(98 181 255 / 6%), transparent 28%), rgb(3 7 14 / 82%);
  border: 1px solid rgb(98 181 255 / 16%);
  color: #cde2ff;
  font-family: var(--sirens-mono);
  font-size: 0.8rem;
  line-height: 1.68;
  white-space: pre-wrap;
}

.sirens-proof-window--pipeline {
  border-color: rgb(98 181 255 / 24%);
  background: linear-gradient(180deg, rgb(4 9 18 / 90%), rgb(6 12 22 / 94%));
  box-shadow:
    inset 0 1px 0 rgb(98 181 255 / 12%),
    0 12px 30px rgb(2 8 18 / 36%);
}

/* ─── Exhibit (Image + Copy Card) ──────────────────────────────── */

.sirens-exhibit {
  overflow: hidden;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

.sirens-exhibit-slot .sirens-exhibit {
  height: 100%;
}

.sirens-exhibit-grid--funnel .sirens-exhibit-slot--primary .sirens-exhibit__body {
  padding: 1.45rem;
}

.sirens-exhibit-grid--funnel .sirens-exhibit-slot--primary h3 {
  font-size: clamp(1.85rem, 2.1vw, 2.5rem);
}

.sirens-exhibit__art {
  display: grid;
  place-items: center;
  aspect-ratio: 12 / 7;
  padding: clamp(0.55rem, 1vw, 0.9rem);
  border-bottom: 1px solid rgb(126 157 202 / 12%);
  background:
    radial-gradient(circle at top left, rgb(45 120 255 / 20%), transparent 28%),
    linear-gradient(180deg, rgb(18 31 49 / 98%), rgb(7 13 22 / 98%));
}

.sirens-exhibit__art img {
  width: 100%;
  max-width: 44rem;
  height: auto;
  object-fit: contain;
  aspect-ratio: auto;
}

.sirens-exhibit__body {
  padding: 1.25rem;
}

/* ─── Audience Lanes ───────────────────────────────────────────── */

.sirens-lane--firm {
  background:
    radial-gradient(circle at top right, rgb(45 120 255 / 18%), transparent 30%),
    linear-gradient(180deg, rgb(12 25 42 / 94%), rgb(6 13 24 / 96%));
}

.sirens-lane--prose {
  background:
    radial-gradient(circle at top left, rgb(217 175 103 / 14%), transparent 32%),
    linear-gradient(180deg, rgb(18 26 39 / 94%), rgb(8 14 23 / 96%));
}

.sirens-lane-rail {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

.sirens-lane-stop {
  display: grid;
  gap: 0.3rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgb(126 157 202 / 16%);
  background: linear-gradient(180deg, rgb(255 255 255 / 5.5%), rgb(255 255 255 / 2%));
}

.sirens-lane-stop__tier {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.28rem 0.58rem;
  border-radius: 999px;
  background: rgb(98 181 255 / 12%);
  color: #bedcff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sirens-lane-stop p {
  margin: 0;
}

.sirens-lane-console {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgb(98 181 255 / 18%);
  background:
    radial-gradient(circle at top right, rgb(98 181 255 / 13%), transparent 34%),
    linear-gradient(180deg, rgb(7 13 23 / 94%), rgb(10 19 32 / 94%));
}

.sirens-lane-console--warm {
  border-color: rgb(217 175 103 / 18%);
  background:
    radial-gradient(circle at top left, rgb(217 175 103 / 12%), transparent 34%),
    linear-gradient(180deg, rgb(8 14 23 / 94%), rgb(11 19 31 / 94%));
}

.sirens-lane-console__eyebrow {
  display: inline-flex;
  margin-bottom: 0.75rem;
  color: #9eb0cb;
  font-family: var(--sirens-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sirens-lane-console__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.sirens-lane-console__grid div {
  display: grid;
  gap: 0.22rem;
  padding: 0.75rem 0.7rem;
  border-radius: 0.9rem;
  background: rgb(255 255 255 / 3.5%);
  border: 1px solid rgb(126 157 202 / 12%);
}

.sirens-lane-console__grid strong {
  font-family: var(--sirens-display);
  font-size: 1.2rem;
  color: #fff2da;
}

.sirens-lane-console__grid span {
  color: #9eb0cb;
  font-size: 0.82rem;
  line-height: 1.45;
}

.sirens-lane__cta {
  margin-top: 1rem;
}

.sirens-trust-lines {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.sirens-trust-line {
  display: grid;
  gap: 0.45rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgb(126 157 202 / 14%);
  background: linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1.8%));
}

.sirens-trust-line--verified {
  border-color: rgb(111 214 155 / 18%);
  background:
    radial-gradient(circle at right top, rgb(111 214 155 / 12%), transparent 34%),
    linear-gradient(180deg, rgb(255 255 255 / 4.5%), rgb(255 255 255 / 2%));
}

.sirens-trust-line p {
  margin: 0;
}

.sirens-trust-line__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.28rem 0.58rem;
  border-radius: 999px;
  background: rgb(111 214 155 / 12%);
  color: #b6f1cc;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sirens-trust-line__badge--muted {
  background: rgb(217 175 103 / 12%);
  color: #f3d59a;
}

.sirens-trust-route {
  display: grid;
  gap: 0.75rem;
}

.sirens-trust-route__step {
  display: grid;
  gap: 0.24rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgb(126 157 202 / 14%);
  background: rgb(255 255 255 / 3%);
}

.sirens-trust-route__step strong {
  color: #fff2da;
  font-size: 0.95rem;
}

.sirens-trust-route__step span {
  color: #9eb0cb;
  font-size: 0.88rem;
  line-height: 1.45;
}

.sirens-feature-list,
.pricing-card__feature-list,
.tier-card__feature-list,
.demo-upgrade-cta__feature-list,
.gov-card__list {
  display: grid;
  gap: 0.72rem;
  margin-top: 1rem;
}

.sirens-feature-row,
.pricing-card__feature,
.tier-card__feature,
.demo-upgrade-cta__feature,
.gov-card__item {
  display: grid;
  gap: 0.3rem;
  padding: 0.9rem 0.95rem;
  border-radius: 1rem;
  border: 1px solid rgb(126 157 202 / 14%);
  background: linear-gradient(180deg, rgb(255 255 255 / 4.5%), rgb(255 255 255 / 1.8%));
}

.sirens-feature-row strong,
.pricing-card__feature strong,
.tier-card__feature strong,
.demo-upgrade-cta__feature strong,
.gov-card__item strong {
  color: #fff2da;
  font-size: 0.9rem;
  line-height: 1.35;
}

.sirens-feature-row span,
.pricing-card__feature span,
.tier-card__feature span,
.demo-upgrade-cta__feature span,
.gov-card__item span {
  color: #9eb0cb;
  font-size: 0.83rem;
  line-height: 1.45;
}

.sirens-feature-row__badge,
.pricing-card__feature-badge,
.tier-card__feature-badge,
.demo-upgrade-cta__feature-badge,
.gov-card__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.26rem 0.56rem;
  border-radius: 999px;
  background: rgb(98 181 255 / 12%);
  color: #bedcff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pricing-card__feature[data-integrity],
.gov-card__item--verified,
.demo-upgrade-cta__feature--verified {
  border-color: rgb(111 214 155 / 18%);
  background:
    radial-gradient(circle at right top, rgb(111 214 155 / 12%), transparent 34%),
    linear-gradient(180deg, rgb(255 255 255 / 4.5%), rgb(255 255 255 / 2%));
}

.pricing-card__feature[data-integrity] .pricing-card__feature-badge,
.gov-card__item--verified .gov-card__badge,
.demo-upgrade-cta__feature--verified .demo-upgrade-cta__feature-badge {
  background: rgb(111 214 155 / 12%);
  color: #b6f1cc;
}

/* ─── Pricing ──────────────────────────────────────────────────── */

.sirens-pricing {
  position: relative;
}

.sirens-scene__intro {
  max-width: 100%;
  margin-bottom: calc(var(--sirens-grid-gap-lg) * 1.5);
  padding: 0 var(--sirens-shell-gutter);
}

@media (width >= 1024px) {
  .sirens-scene__intro {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (width >= 1400px) {
  .sirens-scene__intro {
    max-width: 1100px;
  }
}

.sirens-pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 1rem 0 0.8rem;
  color: #fff;
}

.sirens-pricing-card__price strong {
  font-size: 2.4rem;
  font-family: var(--sirens-display);
  color: var(--sirens-gold-bright);
}

.sirens-pricing-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: rgb(45 120 255 / 16%);
  color: #d0e5ff;
  font-size: 0.82rem;
  font-weight: 700;
}

.sirens-pricing-card ul,
.sirens-trust-card ul,
.sirens-demo-card ul,
.sirens-faq ul {
  margin: 1rem 0 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
  color: #dce8f8;
}

.sirens-pricing-card li,
.sirens-trust-card li,
.sirens-demo-card li,
.sirens-faq li {
  margin: 0;
  padding: 0.72rem 0.8rem;
  border-radius: 0.95rem;
  border: 1px solid rgb(126 157 202 / 14%);
  background: rgb(255 255 255 / 3%);
}

.sirens-pricing-card--featured {
  border-color: rgb(217 175 103 / 36%);
  box-shadow:
    0 30px 90px rgb(0 0 0 / 42%),
    0 0 0 1px rgb(217 175 103 / 6%);
}

.sirens-pricing-card--featured .sirens-pricing-card__badge {
  background: rgb(217 175 103 / 16%);
  color: var(--sirens-gold-bright);
}

/* ─── Pricing Card: Record Under Scrutiny ────────────────────────── */

.sirens-pricing-card {
  position: relative;
  overflow: hidden;
}

.sirens-pricing-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(199 71 94 / 44%), rgb(217 175 103 / 36%), rgb(45 120 255 / 42%));
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.sirens-pricing-card:hover::before {
  opacity: 1;
}

.sirens-pricing-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(199 71 94 / 18%), rgb(217 175 103 / 14%), rgb(45 120 255 / 18%), transparent);
  pointer-events: none;
}

.sirens-pricing-card__integrity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgb(126 157 202 / 10%);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(189 208 244 / 50%);
}

.sirens-pricing-card__integrity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: rgb(111 214 155 / 12%);
  color: #6fd69b;
  font-size: 0.65rem;
  flex-shrink: 0;
}

.sirens-pricing-card--featured::before {
  width: 3px;
  opacity: 1;
  background: linear-gradient(180deg, rgb(217 175 103 / 60%), rgb(199 71 94 / 48%), rgb(45 120 255 / 50%));
}

.sirens-pricing .pricing-grid.sirens-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: stretch;
}

@media (width >= 640px) {
  .sirens-pricing .pricing-grid.sirens-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (width >= 900px) {
  .sirens-pricing .pricing-grid.sirens-pricing-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
  }
}

@media (width >= 1400px) {
  .sirens-pricing .pricing-grid.sirens-pricing-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
}

/* Last card alone in its row? Center it instead of spanning full-width */
.sirens-pricing-grid .sirens-pricing-card:last-child:nth-child(odd) {
  max-width: 100%;
}

@media (width >= 640px) {
  /* 2 columns: if last is 3rd (odd), span full width */
  .sirens-pricing-grid .sirens-pricing-card:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
    max-width: 50%;
    justify-self: center;
  }
}

@media (width >= 900px) {
  /* 4 columns: 7 cards = 4+3. Last 3 cards fill 3 of 4 cols — no span needed */
  .sirens-pricing-grid .sirens-pricing-card:last-child:nth-child(2n + 1),
  .sirens-pricing-grid .sirens-pricing-card:last-child:nth-child(3n + 1) {
    grid-column: auto;
    max-width: 100%;
    justify-self: auto;
  }
}

/* ─── CTA Section ──────────────────────────────────────────────── */

.sirens-cta {
  display: grid;
  gap: 1rem;
  align-items: center;
  padding: var(--sirens-shell-pad);
  border-radius: 2rem;
  border: 1px solid rgb(217 175 103 / 22%);
  background:
    radial-gradient(circle at 20% 20%, rgb(199 71 94 / 14%), transparent 24%),
    radial-gradient(circle at 80% 20%, rgb(45 120 255 / 18%), transparent 24%),
    linear-gradient(180deg, rgb(12 24 40 / 94%), rgb(7 12 21 / 98%));
  box-shadow: var(--sirens-shadow);
}

.sirens-cta__art {
  padding: 0.4rem;
  border-radius: var(--sirens-radius-xl);
  background: radial-gradient(circle at top right, rgb(98 181 255 / 12%), transparent 30%), rgb(255 255 255 / 3%);
}

/* ─── Callout ──────────────────────────────────────────────────── */

.sirens-callout {
  padding: var(--sirens-card-pad);
  color: #dce8f8;
}

/* ─── FAQ ──────────────────────────────────────────────────────── */

.sirens-faq details {
  padding: 1rem 1.1rem;
  border-radius: var(--sirens-radius-lg);
  border: 1px solid var(--sirens-border);
  background: rgb(255 255 255 / 3%);
}

.sirens-faq summary {
  cursor: pointer;
  font-weight: 700;
  color: #fff3e1;
}

.sirens-faq p {
  margin: 0.8rem 0 0;
  color: var(--sirens-text-muted);
}

/* ─── Demo Stage ───────────────────────────────────────────────── */

.sirens-demo-stage {
  border-radius: var(--sirens-radius-xl);
  border: 1px solid var(--sirens-border);
  background: linear-gradient(180deg, rgb(12 23 39 / 94%), rgb(7 13 22 / 98%));
  padding: var(--sirens-shell-pad);
  box-shadow: var(--sirens-shadow);
}

.sirens-demo-stage .demo-hero,
.sirens-demo-stage .demo-guide,
.sirens-demo-stage .demo-proof-card {
  background: transparent;
  border-color: var(--sirens-border);
}

.sirens-demo-stage .demo-guide {
  margin: 1.5rem 0 0;
  padding: 1rem;
  border: 1px solid var(--sirens-border);
  border-radius: 1rem;
}

.sirens-demo-stage .demo-guide__grid,
.sirens-demo-stage .demo-proof-grid {
  display: grid;
  gap: 1rem;
}

.sirens-demo-stage .demo-guide,
.sirens-demo-stage .demo-guide__card,
.sirens-demo-stage .demo-proof-card {
  background: rgb(255 255 255 / 3%);
}

.sirens-demo-stage .demo-guide__card,
.sirens-demo-stage .demo-proof-card {
  padding: 1rem;
  border: 1px solid var(--sirens-border);
  border-radius: 1rem;
}

.sirens-demo-stage .demo-upgrade-cta,
.sirens-demo-stage .tier-card {
  border: 1px solid var(--sirens-border);
  border-radius: 1rem;
  background: rgb(255 255 255 / 3%);
  box-shadow: none;
}

.sirens-demo-stage .demo-upgrade-cta {
  padding: 1.1rem;
}

.sirens-demo-stage .demo-upgrade-cta p,
.sirens-demo-stage .tier-card__desc,
.sirens-demo-stage .tier-card__period,
.sirens-demo-stage .tier-card__limits {
  color: var(--sirens-text-muted);
}

.sirens-demo-stage .tier-card__features {
  display: none;
}

.sirens-demo-stage .demo-hero__title,
.sirens-demo-stage .demo-section-title {
  font-family: var(--sirens-display);
  color: #fff2da;
}

.sirens-demo-stage .demo-section-desc,
.sirens-demo-stage .demo-hero__desc,
.sirens-demo-stage .demo-guide__meta,
.sirens-demo-stage .demo-guide__card p,
.sirens-demo-stage .demo-proof-card p {
  color: var(--sirens-text-muted);
}

.sirens-demo-stage .demo-guide__step {
  background: rgb(217 175 103 / 20%);
  color: var(--sirens-gold-bright);
}

/* ─── Governance / Policy Surface ──────────────────────────────── */

.gov-shell {
  display: grid;
  gap: var(--sirens-grid-gap-lg);
}

.gov-summary {
  display: grid;
  gap: var(--sirens-grid-gap);
}

.gov-grid {
  display: grid;
  gap: var(--sirens-grid-gap);
}

.gov-card {
  padding: var(--sirens-shell-pad);
  border-radius: var(--sirens-radius-xl);
  border: 1px solid var(--sirens-border);
  background: linear-gradient(180deg, rgb(13 23 38 / 94%), rgb(7 13 23 / 90%));
  box-shadow: var(--sirens-shadow);
}

.gov-card h3 {
  margin: 0;
  font-family: var(--sirens-display);
  font-size: clamp(1.45rem, 2vw, 2rem);
  color: #fff2da;
}

.gov-card p {
  margin: 0.7rem 0 0;
  color: #dce8f8;
  line-height: 1.65;
}

.gov-note {
  padding: 1rem 1.1rem;
  border-radius: 1rem;
  border: 1px solid rgb(111 214 155 / 18%);
  background: rgb(111 214 155 / 6%);
  color: #b6f1cc;
  line-height: 1.6;
}

/* ─── Proof Feed (Pipeline-Proof Page) ─────────────────────────── */

.sirens-proof-feed,
.sirens-proof-panel {
  padding: 1.25rem;
}

.sirens-proof-feed__counts,
.sirens-proof-feed__list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.sirens-proof-feed__counts {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.sirens-proof-feed__count,
.sirens-proof-feed__item {
  padding: 0.85rem 0.95rem;
  border-radius: 1rem;
  border: 1px solid var(--sirens-border);
  background: rgb(255 255 255 / 3%);
}

.sirens-proof-feed__count strong,
.sirens-proof-feed__item strong {
  display: block;
  color: #fff1d7;
}

.sirens-proof-feed__count span,
.sirens-proof-feed__item span {
  display: block;
  margin-top: 0.2rem;
  color: var(--sirens-text-muted);
  font-size: 0.92rem;
}

.sirens-proof-feed__pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.sirens-proof-feed__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.34rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--sirens-border);
  color: #dbe7f7;
  font-size: 0.78rem;
}

.sirens-proof-feed__pill--ok {
  border-color: rgb(111 214 155 / 28%);
  color: #b6f1cc;
}

.sirens-proof-feed__pill--fail {
  border-color: rgb(199 71 94 / 28%);
  color: #ffbfca;
}

/* ─── Scroll Animation Primitives ──────────────────────────────── */

[data-animate] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="fade-left"] {
  transform: translateX(-24px);
}

[data-animate="fade-right"] {
  transform: translateX(24px);
}

[data-animate="scale-in"] {
  transform: scale(0.92);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

[data-sirens-stage] {
  --sirens-scene-progress: 0;
}

[data-sirens-stage].is-resolved .sirens-scene__noise {
  opacity: 0.42;
}

[data-parallax] {
  will-change: transform;
}

/* ─── Card Hover Effects ───────────────────────────────────────── */

.sirens-block,
.sirens-pricing-card,
.sirens-trust-card,
.sirens-surface-card,
.sirens-exhibit,
.sirens-lane,
.sirens-demo-card {
  position: relative;
  transition:
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 300ms ease,
    border-color 300ms ease;
}

.sirens-block:hover,
.sirens-pricing-card:hover,
.sirens-trust-card:hover,
.sirens-surface-card:hover,
.sirens-exhibit:hover,
.sirens-lane:hover,
.sirens-demo-card:hover {
  transform: translateY(-4px);
  border-color: var(--sirens-border-strong);
  box-shadow:
    0 36px 100px rgb(0 0 0 / 48%),
    0 0 0 1px rgb(126 157 202 / 10%);
}

/* Mouse-tracking glow overlay — position set by JS --mouse-x/--mouse-y */
.sirens-block::after,
.sirens-pricing-card::after,
.sirens-trust-card::after,
.sirens-surface-card::after,
.sirens-exhibit::after,
.sirens-lane::after,
.sirens-demo-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgb(98 181 255 / 10%), transparent 60%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
  z-index: 1;
}

.sirens-block:hover::after,
.sirens-pricing-card:hover::after,
.sirens-trust-card:hover::after,
.sirens-surface-card:hover::after,
.sirens-exhibit:hover::after,
.sirens-lane:hover::after,
.sirens-demo-card:hover::after {
  opacity: 1;
}

/* ─── Hero Mouse Tilt ──────────────────────────────────────────── */

.sirens-stage {
  perspective: 1000px;
}

.sirens-stage__panel {
  transition: transform 200ms ease;
}

/* ─── Drift Animation (Atmosphere & Beams) ─────────────────────── */

@keyframes sirens-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, 14px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

.sirens-stage__beam,
.sirens-scene__noise {
  animation: sirens-drift 16s ease-in-out infinite;
}

/* Foreground nodes get a slower, offset drift */
@keyframes sirens-pulse {
  0%,
  100% {
    opacity: var(--node-base-opacity, 0.25);
  }

  50% {
    opacity: calc(var(--node-base-opacity, 0.25) + 0.08);
  }
}

.sirens-fg__node {
  animation:
    sirens-drift 22s ease-in-out infinite,
    sirens-pulse 6s ease-in-out infinite;
}

.sirens-fg__node:nth-child(odd) {
  animation-delay:
    -8s,
    -3s;
}

.sirens-fg__node:nth-child(3n) {
  animation-duration: 28s, 8s;
}

/* ─── Desktop Breakpoint (820px+) ──────────────────────────────── */

@media (width >= 820px) {
  .sirens-hero,
  .sirens-cta {
    grid-template-columns: minmax(0, 1.1fr) minmax(19rem, 0.9fr);
  }

  .sirens-scene--hero .sirens-hero--center-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .sirens-scene--hero .sirens-hero--center-stage .sirens-stage {
    width: min(100%, 42rem);
  }

  .sirens-hero-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .sirens-section-grid--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sirens-grid-gap-lg);
  }

  .sirens-flow,
  .sirens-story-grid,
  .sirens-trust-grid,
  .sirens-demo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  section[aria-labelledby="home-trust-title"] .sirens-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  section[aria-labelledby="home-trust-title"] .sirens-trust-card--cta {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.9rem;
    align-content: start;
    padding: clamp(1.65rem, 1.2rem + 1.2vw, 2.3rem);
  }

  section[aria-labelledby="home-trust-title"] .sirens-trust-card--cta p {
    max-width: 72ch;
    margin: 0;
  }

  section[aria-labelledby="home-trust-title"] .sirens-actions--trust-cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    width: min(100%, 36rem);
    margin-top: 0.35rem;
  }

  section[aria-labelledby="home-trust-title"] .sirens-actions--trust-cta .sirens-button {
    width: 100%;
    min-height: 3.1rem;
    padding: 0.82rem 1rem;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
  }

  .sirens-pricing .pricing-grid.sirens-pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.95rem;
  }

  .sirens-pricing-grid .sirens-pricing-card:last-child:nth-child(3n + 1) {
    grid-column: 2 / 3;
    max-width: min(100%, 26rem);
    justify-self: center;
  }

  .sirens-lane-grid,
  .sirens-surface-grid,
  .sirens-exhibit-grid,
  .gov-grid,
  .sirens-faq,
  .sirens-demo-stage .demo-guide__grid,
  .sirens-demo-stage .demo-proof-grid,
  .sirens-proof-feed__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sirens-lane-console__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sirens-exhibit-grid--funnel {
    grid-template-areas:
      "primary primary"
      "secondary tertiary";
  }

  .sirens-exhibit-grid--funnel .sirens-exhibit-slot--primary {
    grid-area: primary;
  }

  .sirens-exhibit-grid--funnel .sirens-exhibit-slot--secondary {
    grid-area: secondary;
  }

  .sirens-exhibit-grid--funnel .sirens-exhibit-slot--tertiary {
    grid-area: tertiary;
  }
}

/* ─── Wide Desktop (1120px+) ───────────────────────────────────── */

@media (width >= 1120px) {
  .sirens-story-grid,
  .sirens-surface-grid,
  .sirens-exhibit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sirens-pricing .pricing-grid.sirens-pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 3-col at all desktop widths — 7 cards = 3+3+1, last card centred.
     Preserve the nth-child(3n+1) centering rule from the 900px breakpoint. */
  .sirens-pricing-grid .sirens-pricing-card:last-child:nth-child(4n + 1) {
    grid-column: auto;
    max-width: 100%;
    justify-self: auto;
  }

  .sirens-chip-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sirens-exhibit-grid--funnel {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-areas:
      "primary secondary"
      "primary tertiary";
    align-items: stretch;
  }

  .sirens-exhibit-grid--funnel .sirens-exhibit-slot--primary .sirens-exhibit__art img {
    aspect-ratio: 16 / 11;
  }

  .sirens-exhibit-grid--funnel .sirens-exhibit-slot--secondary .sirens-exhibit__art img,
  .sirens-exhibit-grid--funnel .sirens-exhibit-slot--tertiary .sirens-exhibit__art img {
    aspect-ratio: 16 / 7.2;
  }
}

/* ─── Mobile (< 820px) ────────────────────────────────────────── */

@media (width <= 819px) {
  .sirens-hero__title {
    max-width: 100%;
    font-size: clamp(2.1rem, 1.85rem + 5vw, 3.2rem);
  }

  .sirens-scene--hero .sirens-hero {
    padding: 1.15rem;
    border-radius: 1.4rem;
  }

  .sirens-chip-row {
    grid-template-columns: 1fr;
  }

  .sirens-chip-row span {
    justify-content: center;
    text-align: center;
  }

  .sirens-lane-console__grid {
    grid-template-columns: 1fr;
  }

  section[aria-labelledby="home-trust-title"] .sirens-actions--trust-cta {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 0.7rem;
  }

  section[aria-labelledby="home-trust-title"] .sirens-actions--trust-cta .sirens-button {
    width: 100%;
  }

  /* Fewer foreground nodes on small screens */
  .sirens-fg__node:nth-child(n + 6) {
    display: none;
  }
}

/* ─── #1 Scroll Progress Beam ──────────────────────────────────── */

body[data-site-surface="public"] .site-header__beam {
  transform: scaleX(var(--sirens-page-progress, 0));
  transform-origin: left center;
  transition: none;
}

/* ─── #3 Section Counter Animation ─────────────────────────────── */

.sirens-flow__index[data-counting] {
  transition: color 300ms ease;
  color: var(--sirens-gold-bright);
}

/* ─── #4 Exhibit Image Parallax Depth ──────────────────────────── */

.sirens-exhibit__art {
  overflow: hidden;
}

.sirens-exhibit__art img {
  will-change: transform;
  transition: transform 0ms;
}

/* ─── #6 Hash Verification Micro-Interaction ───────────────────── */

.sirens-proof-window .proof-line--verified {
  position: relative;
  cursor: default;
  transition: background 300ms ease;
  border-radius: 3px;
  padding-inline: 0.25rem;
  margin-inline: -0.25rem;
}

.sirens-proof-window .proof-line--verified:hover {
  background: rgb(111 214 155 / 14%);
}

.sirens-proof-window .proof-line--verified::after {
  content: "✓";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%) scale(0);
  color: #6fd69b;
  font-size: 0.92rem;
  font-weight: 700;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sirens-proof-window .proof-line--verified:hover::after {
  transform: translateY(-50%) scale(1);
}

/* ─── #9 Button Micro-Feedback ─────────────────────────────────── */

.sirens-button,
body[data-site-surface="public"] .btn {
  position: relative;
  overflow: hidden;
  transition:
    transform 80ms ease,
    box-shadow 300ms ease,
    background 200ms ease,
    border-color 300ms ease;
}

.sirens-button:active,
body[data-site-surface="public"] .btn:active {
  transform: scale(0.97);
}

.sirens-button__ripple,
.btn__ripple {
  position: absolute;
  border-radius: 50%;
  background: rgb(255 255 255 / 22%);
  transform: scale(0);
  animation: sirens-ripple 600ms ease-out forwards;
  pointer-events: none;
}

@keyframes sirens-ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ─── #5 Pipeline Pulse (Footer) ───────────────────────────────── */

.footer-pulse {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  color: var(--color-text-muted, #9eb0cb);
  margin-block-start: 1rem;
}

.footer-pulse__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6fd69b;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/* ─── #7 Build Provenance (Footer) ─────────────────────────────── */

.footer-provenance {
  font-size: 0.6875rem;
  color: var(--color-text-muted, #8899af);
  opacity: 0.7;
  margin-block-start: 0.5rem;
  font-family: var(--font-mono, monospace);
}

/* ─── #8 Pricing Confidence Signals ────────────────────────────── */

.sirens-pricing__assurance {
  text-align: center;
  margin-block-start: 2rem;
  padding: 1rem 1.5rem;
  border-radius: var(--sirens-radius-lg);
  border: 1px solid rgb(111 214 155 / 18%);
  background: rgb(111 214 155 / 6%);
  color: #b6f1cc;
  font-size: 0.875rem;
  line-height: 1.6;
}

.sirens-pricing__assurance svg {
  vertical-align: -0.15em;
  margin-inline-end: 0.35rem;
}

.pricing-card__features li[data-integrity]::before {
  content: "🔒 ";
  font-size: 0.75em;
}

/* ─── #10 Onboarding Card Delight ──────────────────────────────── */

.ob-card {
  transition:
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.ob-card:hover {
  transform: translateY(-2px);
}

.ob-card--selected {
  border-color: #d9af67 !important;
  box-shadow:
    0 0 0 2px rgb(217 175 103 / 25%),
    0 8px 24px rgb(0 0 0 / 12%);
  transform: scale(1.02);
}

.ob-card--selected .ob-card__icon {
  animation: ob-icon-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes ob-icon-pop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(1.1);
  }
}

/* ─── #11 Empty State Warmth ───────────────────────────────────── */

.app-empty {
  position: relative;
}

.app-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/launch/record-flow.svg") center center / contain no-repeat;
  opacity: 0.04;
  pointer-events: none;
}

/* ─── #12 Success Celebration Particles ────────────────────────── */

.checkout-success__particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  animation: success-burst 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes success-burst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(var(--burst-x, 40px), var(--burst-y, -40px)) scale(0);
    opacity: 0;
  }
}

/* ─── Reduced Motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sirens-stage__beam,
  .sirens-scene__noise,
  .sirens-fg__node,
  .sirens-atmo--warm,
  .sirens-atmo--cool,
  [data-animate] {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .sirens-block:hover,
  .sirens-pricing-card:hover,
  .sirens-trust-card:hover,
  .sirens-exhibit:hover,
  .sirens-lane:hover,
  .sirens-demo-card:hover {
    transform: none;
  }

  .sirens-block::after,
  .sirens-pricing-card::after,
  .sirens-trust-card::after,
  .sirens-exhibit::after,
  .sirens-lane::after,
  .sirens-demo-card::after {
    display: none;
  }

  .sirens-stage__panel {
    transition: none;
  }

  body[data-site-surface="public"] .site-header__beam {
    transform: none;
  }

  .sirens-button:active,
  body[data-site-surface="public"] .btn:active {
    transform: none;
  }

  .sirens-button__ripple,
  .btn__ripple {
    display: none;
  }

  .footer-pulse__dot {
    animation: none;
  }

  .ob-card--selected .ob-card__icon {
    animation: none;
  }

  .checkout-success__particle {
    display: none;
  }

  .sirens-fg {
    display: none !important;
  }

  .sirens-atmo--warm {
    opacity: 0.55 !important;
  }

  .sirens-atmo--cool {
    opacity: 0.35 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL DARK SURFACE — Public + Auth Page Component Overrides
   Applied to ALL pages with data-site-surface="public" or "auth"
   so that legacy page-component classes render correctly on the
   dark Sirens to Scales atmosphere.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Body Background (replaces core.css light gradient) ───────────── */

body[data-site-surface="public"],
body[data-site-surface="auth"] {
  background: #07101d;
  background-image:
    radial-gradient(ellipse 1000px 600px at -5% -10%, rgb(199 71 94 / 12%), transparent 60%),
    radial-gradient(ellipse 900px 550px at 105% -8%, rgb(45 120 255 / 14%), transparent 55%),
    radial-gradient(ellipse 800px 500px at 50% 105%, rgb(217 175 103 / 8%), transparent 60%);
  background-attachment: fixed;
  animation: none;
  color: var(--sirens-text, #c8d8ef);
}

/* ─── Main Container ───────────────────────────────────────────────── */

body[data-site-surface="public"] main,
body[data-site-surface="auth"] main {
  color: var(--sirens-text, #c8d8ef);
}

/* bg-surface override (used as mainClass by docs, faq, about, etc.) */
body[data-site-surface="public"] .bg-surface,
body[data-site-surface="auth"] .bg-surface {
  background: transparent;
}

/* ─── Page Hero ────────────────────────────────────────────────────── */

body[data-site-surface="public"] .page-hero,
body[data-site-surface="auth"] .page-hero {
  background:
    radial-gradient(ellipse 600px 400px at 25% -5%, rgb(45 120 255 / 12%), transparent),
    radial-gradient(ellipse 450px 350px at 80% 100%, rgb(217 175 103 / 8%), transparent), transparent;
}

body[data-site-surface="public"] .page-hero::after,
body[data-site-surface="auth"] .page-hero::after {
  background: linear-gradient(to bottom, transparent, rgb(7 16 29 / 80%));
}

body[data-site-surface="public"] .page-hero__label,
body[data-site-surface="auth"] .page-hero__label {
  background: rgb(98 181 255 / 12%);
  color: #bedcff;
}

body[data-site-surface="public"] .page-hero__title,
body[data-site-surface="auth"] .page-hero__title {
  color: #fff6e4;
}

body[data-site-surface="public"] .page-hero__subtitle,
body[data-site-surface="auth"] .page-hero__subtitle {
  color: #9eb0cb;
}

/* ─── Page Body / Sections ─────────────────────────────────────────── */

body[data-site-surface="public"] .page-body,
body[data-site-surface="auth"] .page-body {
  color: var(--sirens-text, #c8d8ef);
}

body[data-site-surface="public"] .page-section,
body[data-site-surface="auth"] .page-section {
  background: transparent;
  border-color: rgb(126 157 202 / 10%);
}

body[data-site-surface="public"] .page-section:nth-child(odd),
body[data-site-surface="public"] .page-section:nth-child(even) {
  background: transparent;
}

body[data-site-surface="public"] .page-section::after {
  background: transparent;
}

body[data-site-surface="public"] .page-section__title,
body[data-site-surface="auth"] .page-section__title {
  color: #fff2da;
}

body[data-site-surface="public"] .page-section__subtitle,
body[data-site-surface="auth"] .page-section__subtitle {
  color: #9eb0cb;
}

/* ─── Feature Cards ────────────────────────────────────────────────── */

body[data-site-surface="public"] .feature-card,
body[data-site-surface="auth"] .feature-card {
  background: linear-gradient(180deg, rgb(13 23 38 / 92%), rgb(7 13 23 / 88%));
  border-color: rgb(126 157 202 / 12%);
  box-shadow: 0 8px 32px rgb(0 0 0 / 30%);
}

body[data-site-surface="public"] .feature-card:hover {
  border-color: rgb(98 181 255 / 22%);
  box-shadow: 0 12px 40px rgb(0 0 0 / 40%);
}

body[data-site-surface="public"] .feature-card__icon {
  background: linear-gradient(135deg, rgb(45 120 255 / 20%), rgb(98 181 255 / 10%));
  color: #62b5ff;
}

body[data-site-surface="public"] .feature-card__title {
  color: #fff2da;
}

body[data-site-surface="public"] .feature-card__body {
  color: #9eb0cb;
}

body[data-site-surface="public"] .feature-card__cta {
  color: var(--sirens-gold-bright, #f3d59a);
}

/* ─── Info Cards ───────────────────────────────────────────────────── */

body[data-site-surface="public"] .info-card {
  background: rgb(217 175 103 / 6%);
  border-color: rgb(217 175 103 / 18%);
}

body[data-site-surface="public"] .info-card__body {
  color: var(--sirens-text, #c8d8ef);
}

/* ─── Stats Row ────────────────────────────────────────────────────── */

body[data-site-surface="public"] .stats-row {
  background: linear-gradient(180deg, rgb(13 23 38 / 90%), rgb(7 13 23 / 85%));
  border-color: rgb(126 157 202 / 12%);
}

body[data-site-surface="public"] .stat__value {
  background: linear-gradient(135deg, #62b5ff, #f3d59a);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body[data-site-surface="public"] .stat__label {
  color: #9eb0cb;
}

/* ─── FAQ Items ────────────────────────────────────────────────────── */

body[data-site-surface="public"] .faq-item {
  background: linear-gradient(180deg, rgb(13 23 38 / 92%), rgb(7 13 23 / 88%));
  border-color: rgb(126 157 202 / 12%);
}

body[data-site-surface="public"] .faq-item summary {
  color: #fff2da;
}

body[data-site-surface="public"] .faq-item__answer,
body[data-site-surface="public"] .faq-item__answer p {
  color: #9eb0cb;
}

/* ─── Prose Block ──────────────────────────────────────────────────── */

body[data-site-surface="public"] .prose-block,
body[data-site-surface="public"] .prose-block p {
  color: var(--sirens-text, #c8d8ef);
}

body[data-site-surface="public"] .prose-block h2,
body[data-site-surface="public"] .prose-block h3 {
  color: #fff2da;
}

body[data-site-surface="public"] .prose-block a {
  color: #62b5ff;
}

body[data-site-surface="public"] .prose-block a:hover {
  color: #bedcff;
}

/* ─── Form Card ────────────────────────────────────────────────────── */

body[data-site-surface="public"] .form-card {
  background: linear-gradient(180deg, rgb(13 23 38 / 94%), rgb(7 13 23 / 90%));
  border-color: rgb(126 157 202 / 14%);
  box-shadow: 0 12px 40px rgb(0 0 0 / 30%);
}

body[data-site-surface="public"] .form-card__title {
  color: #fff2da;
}

body[data-site-surface="public"] .form-label {
  color: #c8d8ef;
}

body[data-site-surface="public"] .form-input,
body[data-site-surface="public"] .form-textarea {
  background: rgb(255 255 255 / 4%);
  border-color: rgb(126 157 202 / 18%);
  color: #e7eef8;
}

body[data-site-surface="public"] .form-input::placeholder,
body[data-site-surface="public"] .form-textarea::placeholder {
  color: rgb(158 176 203 / 50%);
}

body[data-site-surface="public"] .form-input:focus,
body[data-site-surface="public"] .form-textarea:focus {
  border-color: rgb(98 181 255 / 50%);
  box-shadow: 0 0 0 3px rgb(98 181 255 / 12%);
}

/* ─── Buttons (page-component variants) ────────────────────────────── */

body[data-site-surface="public"] .btn--primary {
  background: linear-gradient(135deg, #0f66de, #2c89ff 55%, #78c5ff);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 28px rgb(45 120 255 / 25%);
}

body[data-site-surface="public"] .btn--ghost {
  background: rgb(255 255 255 / 4%);
  border-color: rgb(126 157 202 / 22%);
  color: #e7eef8;
}

body[data-site-surface="public"] .btn--secondary {
  background: rgb(217 175 103 / 10%);
  border-color: rgb(217 175 103 / 30%);
  color: #f3d59a;
}

body[data-site-surface="public"] .btn--white {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(126 157 202 / 20%);
  color: #e7eef8;
}

/* ─── Pricing Components (old page-components variants) ────────────── */

body[data-site-surface="public"] .pricing-pipeline__inner {
  background: linear-gradient(180deg, rgb(13 23 38 / 90%), rgb(7 13 23 / 85%));
  border-color: rgb(126 157 202 / 12%);
}

body[data-site-surface="public"] .pricing-card {
  background: linear-gradient(180deg, rgb(13 23 38 / 94%), rgb(7 13 23 / 90%));
  border-color: rgb(126 157 202 / 12%);
}

body[data-site-surface="public"] .pricing-card--featured,
body[data-site-surface="public"] .pricing-card--highlighted {
  border-color: rgb(98 181 255 / 30%);
}

body[data-site-surface="public"] .pricing-card__name {
  color: #fff2da;
}

body[data-site-surface="public"] .pricing-card__price {
  color: #fff;
}

body[data-site-surface="public"] .pricing-card__desc {
  color: #9eb0cb;
}

body[data-site-surface="public"] .pricing-access__inner {
  background: linear-gradient(180deg, rgb(13 23 38 / 90%), rgb(7 13 23 / 85%));
  border-color: rgb(126 157 202 / 12%);
}

body[data-site-surface="public"] .pricing-context__text {
  color: #9eb0cb;
}

/* ─── Comparison Table ─────────────────────────────────────────────── */

body[data-site-surface="public"] .comparison-table,
body[data-site-surface="public"] .table-wrap {
  border-color: rgb(126 157 202 / 12%);
}

body[data-site-surface="public"] .comparison-table thead {
  background: rgb(13 23 38 / 95%);
}

body[data-site-surface="public"] .comparison-table th {
  color: #fff2da;
  border-color: rgb(126 157 202 / 10%);
}

body[data-site-surface="public"] .comparison-table td {
  color: var(--sirens-text, #c8d8ef);
  border-color: rgb(126 157 202 / 8%);
}

body[data-site-surface="public"] .comparison-table tbody tr:nth-child(odd) {
  background: rgb(255 255 255 / 2%);
}

body[data-site-surface="public"] .comparison-table tbody tr:nth-child(even) {
  background: transparent;
}

/* ─── Auth Pages (login, signup, forgot-password, etc.) ────────────── */

body[data-site-surface="auth"] .auth-section {
  color: var(--sirens-text, #c8d8ef);
}

body[data-site-surface="auth"] .auth-card {
  background: linear-gradient(180deg, rgb(13 23 38 / 96%), rgb(7 13 23 / 92%));
  border: 1px solid rgb(126 157 202 / 14%);
  box-shadow: 0 24px 80px rgb(0 0 0 / 45%);
}

body[data-site-surface="auth"] .auth-card__title {
  color: #fff2da;
}

body[data-site-surface="auth"] .auth-card__subtitle {
  color: #9eb0cb;
}

body[data-site-surface="auth"] .auth-label {
  color: #c8d8ef;
}

body[data-site-surface="auth"] .auth-input {
  background: rgb(255 255 255 / 4%);
  border-color: rgb(126 157 202 / 18%);
  color: #e7eef8;
}

body[data-site-surface="auth"] .auth-input::placeholder {
  color: rgb(158 176 203 / 50%);
}

body[data-site-surface="auth"] .auth-input:focus {
  border-color: rgb(98 181 255 / 50%);
  box-shadow: 0 0 0 3px rgb(98 181 255 / 12%);
}

body[data-site-surface="auth"] .auth-btn {
  background: linear-gradient(135deg, #0f66de, #2c89ff 55%, #78c5ff);
  color: #fff;
  border: none;
  box-shadow: 0 12px 28px rgb(45 120 255 / 25%);
}

body[data-site-surface="auth"] .auth-btn:hover {
  box-shadow: 0 16px 36px rgb(45 120 255 / 35%);
}

body[data-site-surface="auth"] .auth-btn--outline {
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(126 157 202 / 22%);
  color: #e7eef8;
  box-shadow: none;
}

body[data-site-surface="auth"] .auth-tabs {
  border-color: rgb(126 157 202 / 12%);
}

body[data-site-surface="auth"] .auth-tab {
  color: #9eb0cb;
}

body[data-site-surface="auth"] .auth-tab--active {
  color: #fff;
  border-color: #62b5ff;
}

body[data-site-surface="auth"] .auth-hint {
  color: #9eb0cb;
}

body[data-site-surface="auth"] .auth-footer,
body[data-site-surface="auth"] .auth-footer a,
body[data-site-surface="auth"] .auth-legal,
body[data-site-surface="auth"] .auth-legal a {
  color: #9eb0cb;
}

body[data-site-surface="auth"] .auth-footer a:hover,
body[data-site-surface="auth"] .auth-legal a:hover {
  color: #62b5ff;
}

body[data-site-surface="auth"] .auth-alert--error {
  background: rgb(199 71 94 / 12%);
  border-color: rgb(199 71 94 / 30%);
  color: #f8b4c0;
}

body[data-site-surface="auth"] .auth-alert--success {
  background: rgb(111 214 155 / 10%);
  border-color: rgb(111 214 155 / 30%);
  color: #a3e8c0;
}

body[data-site-surface="auth"] .auth-alert--info {
  background: rgb(98 181 255 / 10%);
  border-color: rgb(98 181 255 / 25%);
  color: #bedcff;
}

body[data-site-surface="auth"] .auth-scopes {
  background: rgb(255 255 255 / 3%);
  border-color: rgb(126 157 202 / 12%);
}

body[data-site-surface="auth"] .auth-scopes__label {
  color: #9eb0cb;
}

body[data-site-surface="auth"] .auth-scope-badge {
  background: rgb(98 181 255 / 10%);
  border-color: rgb(98 181 255 / 20%);
  color: #bedcff;
}

/* ─── Generic Text / Headings / Links (catch-all) ──────────────────── */

body[data-site-surface="public"] h1,
body[data-site-surface="public"] h2,
body[data-site-surface="public"] h3,
body[data-site-surface="public"] h4,
body[data-site-surface="auth"] h1,
body[data-site-surface="auth"] h2,
body[data-site-surface="auth"] h3,
body[data-site-surface="auth"] h4 {
  color: #fff2da;
}

body[data-site-surface="public"] p,
body[data-site-surface="public"] li,
body[data-site-surface="auth"] p,
body[data-site-surface="auth"] li {
  color: var(--sirens-text, #c8d8ef);
}

body[data-site-surface="public"] a:not([class]),
body[data-site-surface="auth"] a:not([class]) {
  color: #62b5ff;
}

body[data-site-surface="public"] a:not([class]):hover,
body[data-site-surface="auth"] a:not([class]):hover {
  color: #bedcff;
}

body[data-site-surface="public"] code {
  background: rgb(98 181 255 / 8%);
  color: #bedcff;
  border-color: rgb(126 157 202 / 12%);
}

body[data-site-surface="public"] hr {
  border-color: rgb(126 157 202 / 12%);
}

/* ─── Timeline (docs page) ─────────────────────────────────────────── */

body[data-site-surface="public"] .timeline-list {
  border-color: rgb(126 157 202 / 12%);
}

body[data-site-surface="public"] .timeline-item {
  border-color: rgb(126 157 202 / 10%);
}

body[data-site-surface="public"] .timeline-item__title {
  color: #fff2da;
}

/* ─── Data Table (docs page) ───────────────────────────────────────── */

body[data-site-surface="public"] .data-table,
body[data-site-surface="public"] table {
  border-color: rgb(126 157 202 / 12%);
}

body[data-site-surface="public"] .data-table th,
body[data-site-surface="public"] table th {
  background: rgb(13 23 38 / 90%);
  color: #fff2da;
  border-color: rgb(126 157 202 / 10%);
}

body[data-site-surface="public"] .data-table td,
body[data-site-surface="public"] table td {
  border-color: rgb(126 157 202 / 8%);
  color: var(--sirens-text, #c8d8ef);
}

/* ─── Surface Panels ───────────────────────────────────────────────── */

body[data-site-surface="public"] .surface-panel {
  background: linear-gradient(180deg, rgb(13 23 38 / 92%), rgb(7 13 23 / 88%));
  border: 1px solid rgb(126 157 202 / 12%);
  box-shadow: 0 8px 32px rgb(0 0 0 / 30%);
}

body[data-site-surface="public"] .page-hero {
  background:
    radial-gradient(circle at 16% 18%, rgb(199 71 94 / 14%), transparent 24%),
    radial-gradient(circle at 84% 14%, rgb(45 120 255 / 16%), transparent 26%),
    linear-gradient(180deg, rgb(10 18 30 / 96%), rgb(7 13 23 / 98%));
  border: 1px solid rgb(126 157 202 / 12%);
  border-radius: 2rem;
  box-shadow: 0 28px 90px rgb(0 0 0 / 36%);
  overflow: hidden;
}

body[data-site-surface="public"] .page-hero::after {
  opacity: 0.2;
}

body[data-site-surface="public"] .page-hero__label {
  background: rgb(98 181 255 / 12%);
  color: #bedcff;
}

body[data-site-surface="public"] .page-hero__title,
body[data-site-surface="public"] .page-section__title,
body[data-site-surface="public"] .form-card__title,
body[data-site-surface="public"] .feature-card__title {
  color: #fff2da;
}

body[data-site-surface="public"] .page-hero__subtitle,
body[data-site-surface="public"] .page-section__subtitle,
body[data-site-surface="public"] .feature-card__body,
body[data-site-surface="public"] .prose-block p,
body[data-site-surface="public"] .info-card__body,
body[data-site-surface="public"] .form-notice {
  color: #9eb0cb;
}

body[data-site-surface="public"] .page-section {
  background: transparent;
}

body[data-site-surface="public"] .feature-card,
body[data-site-surface="public"] .info-card,
body[data-site-surface="public"] .form-card,
body[data-site-surface="public"] .faq-item {
  background: linear-gradient(180deg, rgb(13 23 38 / 92%), rgb(7 13 23 / 88%));
  border-color: rgb(126 157 202 / 12%);
  box-shadow: 0 12px 36px rgb(0 0 0 / 28%);
}

body[data-site-surface="public"] .feature-card:hover {
  border-color: rgb(98 181 255 / 24%);
}

body[data-site-surface="public"] .feature-card__icon,
body[data-site-surface="public"] .info-card__icon {
  background: rgb(98 181 255 / 10%);
  color: #bedcff;
}

body[data-site-surface="public"] .faq-item summary,
body[data-site-surface="public"] .faq-item > summary {
  color: #e7eef8;
}

body[data-site-surface="public"] .faq-item__answer p,
body[data-site-surface="public"] .faq-item > p {
  color: #9eb0cb;
}

body[data-site-surface="public"] .form-input,
body[data-site-surface="public"] .form-textarea {
  background: rgb(255 255 255 / 4%);
  border-color: rgb(126 157 202 / 16%);
  color: #e7eef8;
}

body[data-site-surface="public"] .form-input:focus,
body[data-site-surface="public"] .form-textarea:focus {
  border-color: rgb(98 181 255 / 50%);
  box-shadow: 0 0 0 3px rgb(98 181 255 / 12%);
}

/* ─── Content Sections (governance) ────────────────────────────────── */

body[data-site-surface="public"] .content-section {
  border-color: rgb(126 157 202 / 10%);
}

body[data-site-surface="public"] .content-section__inner {
  color: var(--sirens-text, #c8d8ef);
}

/* ─── Inline Color Override (catch hardcoded grays) ────────────────── */

body[data-site-surface="public"] [style*="color:#374151"],
body[data-site-surface="public"] [style*="color: #374151"],
body[data-site-surface="auth"] [style*="color:#374151"],
body[data-site-surface="auth"] [style*="color: #374151"] {
  color: var(--sirens-text, #c8d8ef) !important;
}

body[data-site-surface="public"] [style*="color:#6b7280"],
body[data-site-surface="public"] [style*="color: #6b7280"],
body[data-site-surface="auth"] [style*="color:#6b7280"],
body[data-site-surface="auth"] [style*="color: #6b7280"] {
  color: #9eb0cb !important;
}

body[data-site-surface="public"] [style*="color:#1a1a2e"],
body[data-site-surface="public"] [style*="color: #1a1a2e"],
body[data-site-surface="auth"] [style*="color:#1a1a2e"],
body[data-site-surface="auth"] [style*="color: #1a1a2e"] {
  color: #fff2da !important;
}

body[data-site-surface="public"] [style*="background:#e5e7eb"],
body[data-site-surface="public"] [style*="background: #e5e7eb"],
body[data-site-surface="auth"] [style*="background:#e5e7eb"],
body[data-site-surface="auth"] [style*="background: #e5e7eb"] {
  background: rgb(126 157 202 / 12%) !important;
}

body[data-site-surface="public"] [style*="background:#f9fafb"],
body[data-site-surface="public"] [style*="background: #f9fafb"],
body[data-site-surface="auth"] [style*="background:#f9fafb"],
body[data-site-surface="auth"] [style*="background: #f9fafb"] {
  background: rgb(255 255 255 / 3%) !important;
}

body[data-site-surface="public"] [style*="background:#fff"],
body[data-site-surface="public"] [style*="background: #fff"],
body[data-site-surface="auth"] [style*="background:#fff"],
body[data-site-surface="auth"] [style*="background: #fff"] {
  background: rgb(255 255 255 / 4%) !important;
}

body[data-site-surface="public"] [style*="border-color:#e5e7eb"],
body[data-site-surface="public"] [style*="border: 1px solid #e5e7eb"],
body[data-site-surface="public"] [style*="border: 2px solid #e5e7eb"],
body[data-site-surface="auth"] [style*="border-color:#e5e7eb"],
body[data-site-surface="auth"] [style*="border: 1px solid #e5e7eb"],
body[data-site-surface="auth"] [style*="border: 2px solid #e5e7eb"] {
  border-color: rgb(126 157 202 / 14%) !important;
}

body[data-site-surface="public"] [style*="border-bottom:2px solid #e5e7eb"],
body[data-site-surface="public"] [style*="border-bottom: 2px solid #e5e7eb"] {
  border-bottom-color: rgb(126 157 202 / 14%) !important;
}

body[data-site-surface="public"] [style*="border-bottom:1px solid #e5e7eb"],
body[data-site-surface="public"] [style*="border-bottom: 1px solid #e5e7eb"] {
  border-bottom-color: rgb(126 157 202 / 10%) !important;
}

/* ─── Onboarding Page Dark Overrides ───────────────────────────────── */

body[data-site-surface="auth"] .ob-card {
  background: rgb(13 23 38 / 92%) !important;
  border-color: rgb(126 157 202 / 14%) !important;
  color: var(--sirens-text, #c8d8ef) !important;
}

body[data-site-surface="auth"] .ob-card--selected {
  border-color: rgb(98 181 255 / 40%) !important;
  box-shadow: 0 0 0 3px rgb(98 181 255 / 12%) !important;
}

body[data-site-surface="auth"] .ob-plan {
  background: rgb(13 23 38 / 92%) !important;
  border-color: rgb(126 157 202 / 14%) !important;
}

body[data-site-surface="auth"] .ob-plan--selected {
  border-color: rgb(98 181 255 / 40%) !important;
}

body[data-site-surface="auth"] .ob-plan__name,
body[data-site-surface="auth"] .ob-card__title {
  color: #fff2da !important;
}

body[data-site-surface="auth"] .ob-plan__desc,
body[data-site-surface="auth"] .ob-card__desc {
  color: #9eb0cb !important;
}

body[data-site-surface="auth"] .ob-plan__price {
  color: #fff !important;
}

body[data-site-surface="auth"] .ob-pipeline__stage {
  background: rgb(255 255 255 / 4%) !important;
  border-color: rgb(126 157 202 / 12%) !important;
}

body[data-site-surface="auth"] .ob-pipeline__stage--active {
  background: rgb(98 181 255 / 10%) !important;
  border-color: rgb(98 181 255 / 30%) !important;
}

body[data-site-surface="auth"] .ob-pipeline__label {
  color: var(--sirens-text, #c8d8ef) !important;
}

body[data-site-surface="auth"] .ob-next-card {
  background: rgb(13 23 38 / 94%) !important;
  border-color: rgb(126 157 202 / 14%) !important;
}

body[data-site-surface="auth"] .ob-step {
  background: rgb(255 255 255 / 4%) !important;
  color: #9eb0cb !important;
}

body[data-site-surface="auth"] .ob-step--active {
  background: rgb(98 181 255 / 12%) !important;
  color: #fff !important;
}

/* ─── Checkout Success ─────────────────────────────────────────────── */

body[data-site-surface="auth"] .checkout-success__card {
  background: linear-gradient(180deg, rgb(13 23 38 / 96%), rgb(7 13 23 / 92%)) !important;
  border-color: rgb(126 157 202 / 14%) !important;
}

body[data-site-surface="auth"] .checkout-success__title {
  color: #fff2da !important;
}

body[data-site-surface="auth"] .checkout-success__desc {
  color: #9eb0cb !important;
}

body[data-site-surface="auth"] .checkout-success__details {
  background: rgb(255 255 255 / 3%) !important;
  border-color: rgb(126 157 202 / 12%) !important;
}

/* ─── 404 Page ─────────────────────────────────────────────────────── */

body[data-site-surface="public"] .site-container h1 {
  color: #fff2da;
}

/* ─── Tools Hub ────────────────────────────────────────────────────── */

body[data-site-surface="public"] .tools-hub__title {
  color: #fff2da;
}

body[data-site-surface="public"] .tools-hub__subtitle {
  color: #9eb0cb;
}

body[data-site-surface="public"] .tool-card {
  background: linear-gradient(180deg, rgb(13 23 38 / 92%), rgb(7 13 23 / 88%));
  border-color: rgb(126 157 202 / 12%);
}

body[data-site-surface="public"] .tool-card:hover {
  border-color: rgb(98 181 255 / 22%);
}

body[data-site-surface="public"] .tool-card__name {
  color: #fff2da;
}

body[data-site-surface="public"] .tool-card__desc {
  color: #9eb0cb;
}

body[data-site-surface="public"] .tools-hub__section-title {
  color: #fff2da;
}

body[data-site-surface="public"] .tools-hub__section-desc {
  color: #9eb0cb;
}

/* ─── Truth Discovery Page ─────────────────────────────────────────── */

body[data-site-surface="public"] .tier-card {
  background: linear-gradient(180deg, rgb(13 23 38 / 92%), rgb(7 13 23 / 88%));
  border-color: rgb(126 157 202 / 14%);
  color: var(--sirens-text, #c8d8ef);
}

body[data-site-surface="public"] .tier-card.featured {
  border-color: rgb(217 175 103 / 40%);
  box-shadow: 0 10px 40px rgb(217 175 103 / 12%);
}

body[data-site-surface="public"] .tier-price {
  color: #fff;
}

body[data-site-surface="public"] .tier-features li {
  border-bottom-color: rgb(126 157 202 / 8%);
  color: var(--sirens-text, #c8d8ef);
}

body[data-site-surface="public"] .logo-card {
  background: linear-gradient(180deg, rgb(13 23 38 / 92%), rgb(7 13 23 / 88%));
  box-shadow: 0 4px 16px rgb(0 0 0 / 30%);
}

body[data-site-surface="public"] .logo-card h3 {
  color: #fff2da;
}

body[data-site-surface="public"] .logo-card p {
  color: #9eb0cb;
}

/* ─── Truth Discovery Demo (file processing) ──────────────────────── */

body[data-site-surface="public"] .file-queue,
body[data-site-surface="public"] .progress-dashboard,
body[data-site-surface="public"] .results-preview {
  background: linear-gradient(180deg, rgb(13 23 38 / 92%), rgb(7 13 23 / 88%));
  border: 1px solid rgb(126 157 202 / 12%);
  box-shadow: 0 4px 16px rgb(0 0 0 / 30%);
}

body[data-site-surface="public"] .queue-header h3,
body[data-site-surface="public"] .progress-header h3,
body[data-site-surface="public"] .results-preview h3 {
  color: #fff2da;
}

body[data-site-surface="public"] .batch-id {
  color: #9eb0cb;
}

body[data-site-surface="public"] .batch-id code {
  background: rgb(98 181 255 / 8%);
  color: #bedcff;
}

body[data-site-surface="public"] .progress-bar {
  background: rgb(126 157 202 / 12%);
}

body[data-site-surface="public"] .progress-stats {
  color: #9eb0cb;
}

body[data-site-surface="public"] .progress-stats strong {
  color: #e7eef8;
}

body[data-site-surface="public"] .file-card {
  border-color: rgb(126 157 202 / 12%);
  background: rgb(255 255 255 / 3%);
}

body[data-site-surface="public"] .file-name {
  color: #e7eef8;
}

body[data-site-surface="public"] .file-stage {
  color: #9eb0cb;
}

body[data-site-surface="public"] .ws-status {
  background: rgb(13 23 38 / 95%);
  border: 1px solid rgb(126 157 202 / 12%);
  box-shadow: 0 4px 16px rgb(0 0 0 / 40%);
  color: #9eb0cb;
}

/* ─── Onboarding Checkboxes / Featured Plans ───────────────────────── */

body[data-site-surface="auth"] .ob-check {
  border-color: rgb(126 157 202 / 14%) !important;
  color: var(--sirens-text, #c8d8ef) !important;
}

body[data-site-surface="auth"] .ob-check:has(input:checked) {
  border-color: rgb(98 181 255 / 40%) !important;
  background: rgb(98 181 255 / 8%) !important;
}

body[data-site-surface="auth"] .ob-check__box {
  border-color: rgb(126 157 202 / 30%) !important;
}

body[data-site-surface="auth"] .ob-check:has(input:checked) .ob-check__box {
  background: #2c89ff !important;
  border-color: #2c89ff !important;
}

body[data-site-surface="auth"] .ob-plan--featured {
  border-color: rgb(98 181 255 / 30%) !important;
  background: rgb(98 181 255 / 6%) !important;
}

body[data-site-surface="auth"] .ob-plan__badge {
  background: linear-gradient(135deg, #0f66de, #2c89ff) !important;
}

body[data-site-surface="auth"] .ob-plan__trial {
  color: #6fd69b !important;
}

body[data-site-surface="auth"] .ob-pipeline__stage--active {
  border-color: rgb(98 181 255 / 40%) !important;
  background: rgb(98 181 255 / 10%) !important;
}

/* ─── Launch Marketing Secondary Button ────────────────────────────── */

body[data-site-surface="public"] .launch-button--secondary {
  background: rgb(255 255 255 / 4%);
  color: #e7eef8;
  border-color: rgb(126 157 202 / 22%);
}

body[data-site-surface="public"] .launch-button--secondary:hover,
body[data-site-surface="public"] .launch-button--secondary:focus-visible {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(126 157 202 / 35%);
}