/* ======================================================================
   PAGE COMPONENTS — Evident Technologies
   Styles for interior pages: about, pricing, docs, faq, contact,
   solutions, terms, privacy, and all future content pages.

   Uses Gemstone Design Tokens from tokens.css.
   Matches the premium quality of the homepage.
   ====================================================================== */

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

.page-hero {
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 4rem);
  text-align: center;
  background:
    radial-gradient(ellipse 700px 500px at 25% -5%, color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 10%, transparent) 0%, transparent),
    radial-gradient(
      ellipse 500px 400px at 80% 100%,
      color-mix(in srgb, var(--gem-gold-native-flat, #c88c00) 8%, transparent) 0%,
      transparent
    ),
    radial-gradient(ellipse 400px 300px at 60% 30%, color-mix(in srgb, var(--gem-tanzanite-flat, #4a2db5) 4%, transparent) 0%, transparent),
    var(--section-light-a, var(--color-bg, #faf9f7));
  position: relative;
}

/* Smooth transition from hero into page body */
.page-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(2rem, 4vw, 3rem);
  background: linear-gradient(to bottom, transparent, var(--section-light-a, var(--color-bg, #faf9f7)));
  pointer-events: none;
}

.page-hero__inner {
  width: min(100% - 2rem, 720px);
  margin-inline: auto;
}

.page-hero__label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1rem;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full, 999px);
  background: var(--gem-state-trust-subtle, rgb(31 58 153 / 8%));
  color: var(--gem-sapphire-flat, #1f3a99);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-text, #1a2040);
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.page-hero__subtitle {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.7;
  color: var(--color-text-muted, #5a6080);
  max-width: 100%;
  margin-inline: auto;
  overflow-wrap: break-word;
}

@media (width >= 1024px) {
  .page-hero__subtitle {
    max-width: 700px;
  }
}

@media (width >= 1400px) {
  .page-hero__subtitle {
    max-width: 800px;
  }
}

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

.page-body {
  width: min(100% - 2rem, 1100px);
  margin-inline: auto;
  padding-block: 2rem 4rem;
}

.page-body--narrow {
  max-width: 760px;
}

.page-section {
  margin-block-end: 0;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2rem);
  border-radius: var(--radius-lg, 1rem);
  position: relative;
  isolation: isolate;
  overflow: clip;
}

/* Alternate section tints with seamless transitions */
.page-section:nth-child(even) {
  background:
    radial-gradient(ellipse 600px 300px at 80% 20%, color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 2%, transparent), transparent),
    var(--section-light-b, var(--color-neutral, #f2f0ec));
}

.page-section:nth-child(odd) {
  background:
    radial-gradient(ellipse 520px 320px at 12% 84%, color-mix(in srgb, var(--gem-gold-native-flat, #c88c00) 3%, transparent), transparent),
    var(--section-light-a, var(--color-bg, #faf9f7));
}

.page-section:nth-child(odd)::after,
.page-section:nth-child(even)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--section-seam-size, clamp(2.5rem, 6vw, 4.5rem));
  pointer-events: none;
}

.page-section:nth-child(odd)::after {
  background: linear-gradient(to bottom, transparent, var(--section-light-b, var(--color-neutral, #f2f0ec)));
}

.page-section:nth-child(even)::after {
  background: linear-gradient(to bottom, transparent, var(--section-light-a, var(--color-bg, #faf9f7)));
}

.page-section__title {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-text, #1a2040);
  margin: 0 0 0.5rem;
}

.page-section__subtitle {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted, #5a6080);
  margin: 0 0 2rem;
}

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

.prose-block {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text, #1a2040);
}

.prose-block h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 2.5rem 0 0.75rem;
  color: var(--color-text, #1a2040);
}

.prose-block h2:first-child {
  margin-top: 0;
}

.prose-block p {
  margin: 0 0 1rem;
  color: var(--color-text, #1a2040);
}

.prose-block a {
  color: var(--color-primary, #1f3a99);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose-block a:hover {
  color: color-mix(in srgb, var(--color-primary, #1f3a99) 75%, black);
}

/* ── BEM Buttons (.btn--*) ──────────────────────────────────────────── */

/* Pages use BEM notation; these map to the design tokens.              */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.875rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-full, 999px);
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 220ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 220ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 180ms ease,
    background-color 180ms ease;
}

.btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary, #1f3a99), color-mix(in srgb, var(--color-primary, #1f3a99) 72%, black));
  box-shadow:
    0 12px 26px rgb(31 58 153 / 22%),
    0 0 0 0 rgb(31 58 153 / 0%);
}

.btn--secondary {
  color: #fff;
  background: linear-gradient(135deg, #374151, #1f2937);
  box-shadow: 0 8px 20px rgb(0 0 0 / 15%);
}

.btn--ghost {
  color: var(--color-text, #1a2040);
  background: rgb(255 255 255 / 76%);
  border-color: var(--border-subtle, color-mix(in srgb, #1f3a99 14%, white));
  backdrop-filter: blur(12px);
}

.btn--white {
  color: var(--color-primary, #1f3a99);
  background: #fff;
  box-shadow: 0 4px 14px rgb(0 0 0 / 10%);
}

.btn--lg {
  padding-inline: 1.65rem;
  font-size: 0.95rem;
}

.btn--full {
  width: 100%;
}

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

.btn--primary:hover {
  box-shadow:
    0 16px 36px rgb(31 58 153 / 30%),
    0 0 0 3px rgb(31 58 153 / 8%);
}

.btn--ghost:hover,
.btn--outline:hover {
  border-color: var(--color-primary, #1f3a99);
  box-shadow: 0 6px 20px rgb(31 58 153 / 12%);
}

/* btn--outline: semantic alias for btn--ghost (audit-detectable secondary CTA) */
.btn--outline {
  color: var(--color-text, #1a2040);
  background: rgb(255 255 255 / 76%);
  border-color: var(--border-subtle, color-mix(in srgb, #1f3a99 14%, white));
  backdrop-filter: blur(12px);
}

.btn--white:hover {
  box-shadow: 0 10px 28px rgb(0 0 0 / 14%);
}

.btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 80ms;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary, #1f3a99);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

/* ── CTA Group ──────────────────────────────────────────────────────── */

.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ── Scene Components ─────────────────────────────────────────────── */

.scene-divider {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto;
  width: min(100% - 2rem, 960px);
}

.scene-divider__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--gem-blue-topaz-flat, #0288d1) 40%, var(--gem-ruby-flat, #9b0020) 20%),
    transparent
  );
}

.scene-divider__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #475569;
  white-space: nowrap;
}

.scene-cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: min(100% - 2rem, 1060px);
  margin: clamp(1.8rem, 4vw, 3.2rem) auto;
  border-radius: var(--radius-xl, 1.2rem);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--glass-edge, color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 26%, transparent));
  background:
    linear-gradient(165deg, var(--glass-surface-strong, rgb(18 24 40 / 72%)) 0%, var(--glass-surface, rgb(12 18 31 / 62%)) 100%),
    radial-gradient(circle at 14% 15%, rgb(199 71 94 / 18%), transparent 48%),
    radial-gradient(circle at 86% 78%, rgb(45 120 255 / 18%), transparent 50%);
  box-shadow:
    var(--glass-shadow-deep, 0 28px 70px rgb(0 0 0 / 22%)),
    inset 0 1px 0 rgb(255 255 255 / 4%),
    inset 0 0 0 1px rgb(255 255 255 / 3%);
  backdrop-filter: blur(24px) saturate(150%);
}

.scene-cta-band__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.scene-cta-band__glow--warm {
  background: radial-gradient(ellipse 50% 45% at 8% 10%, rgb(199 71 94 / 15%), transparent 72%);
}

.scene-cta-band__glow--cool {
  background: radial-gradient(ellipse 45% 40% at 90% 85%, rgb(45 120 255 / 15%), transparent 70%);
}

.scene-cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.9fr);
  gap: 1.35rem;
  align-items: stretch;
}

.scene-cta-band__content {
  display: grid;
  gap: 0.85rem;
  align-content: center;
}

.scene-cta-band__eyebrow {
  margin: 0;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(189 208 244 / 70%);
}

.scene-cta-band__title {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  line-height: 1.2;
  color: #f7f9ff;
}

.scene-cta-band__body {
  margin: 0;
  color: rgb(228 236 249 / 84%);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 72ch;
}

.scene-cta-band__footnote {
  margin: 0.15rem 0 0;
  font-size: 0.79rem;
  line-height: 1.55;
  color: rgb(189 208 244 / 66%);
}

.scene-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.scene-cta-band__rail {
  position: relative;
  padding: 1rem 1rem 1rem 1.15rem;
  border-radius: calc(var(--radius-xl, 1.2rem) - 0.35rem);
  border: 1px solid color-mix(in srgb, var(--glass-edge, rgb(255 255 255 / 14%)) 80%, transparent);
  background:
    linear-gradient(160deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1%)), linear-gradient(165deg, rgb(11 18 31 / 76%), rgb(10 19 33 / 58%));
  box-shadow:
    var(--glass-shadow-soft, 0 20px 45px rgb(0 0 0 / 12%)),
    inset 0 1px 0 rgb(255 255 255 / 5%);
  backdrop-filter: blur(18px) saturate(145%);
}

.scene-cta-band__rail::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%));
}

.scene-cta-band__rail-title {
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(247 249 255 / 74%);
}

.scene-cta-band__metrics {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.scene-cta-band__metric {
  display: grid;
  gap: 0.2rem;
}

.scene-cta-band__metric-label {
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgb(189 208 244 / 58%);
}

.scene-cta-band__metric-value {
  font-size: 0.94rem;
  line-height: 1.45;
  color: #f3f7ff;
}

.scene-cta-band--dashboard {
  width: 100%;
  margin: 1.25rem 0 0;
  border-radius: var(--radius-lg, 1rem);
  background:
    linear-gradient(165deg, var(--glass-surface-strong, rgb(18 24 40 / 72%)) 0%, var(--glass-surface, rgb(12 18 31 / 62%)) 100%),
    radial-gradient(circle at 10% 22%, rgb(199 71 94 / 14%), transparent 50%),
    radial-gradient(circle at 82% 82%, rgb(45 120 255 / 15%), transparent 56%);
}

@supports not (backdrop-filter: blur(1px)) {
  .scene-cta-band,
  .scene-cta-band__rail,
  .scene-cta-band--dashboard {
    background: rgb(10 17 29 / 90%);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .scene-cta-band,
  .scene-cta-band__rail,
  .scene-cta-band--dashboard {
    backdrop-filter: none;
    background: rgb(10 17 29 / 92%);
  }
}

@media (width <= 640px) {
  .scene-cta-band__inner {
    grid-template-columns: 1fr;
  }

  .scene-cta-band__actions {
    width: 100%;
  }

  .scene-cta-band__actions .btn {
    width: 100%;
  }

  .scene-cta-band__rail {
    padding: 0.95rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-cta-band,
  .scene-divider {
    transition: none;
  }
}

/* ── Utility Classes (replacing inline styles) ──────────────────────── */

.prose-block--narrow {
  max-width: 720px;
}

/* Balanced grid rule:
   4 items -> 2x2.
   5 items -> 3+2 (left-aligned, never 4+1).
   6 items -> 3x2 or 2x3.
   Never leave a single orphan on a trailing row.
*/

.grid-balanced {
  align-items: start;
}

.feature-grid--narrow {
  max-width: 900px;
}

.feature-grid--2x2 {
  max-width: 820px;
  margin-inline: auto;
}

.cta-group--spaced {
  margin-block-start: 1.25rem;
}

.page-section--cta {
  text-align: center;
  padding-block-start: 1rem;
}

.cta-lead {
  font-size: 1.1rem;
  color: var(--color-text-muted, #6b7280);
  margin-block-end: 1.5rem;
}

.cta-heading {
  font-size: 1.5rem;
  margin-block-end: 0.75rem;
}

.cta-lead--muted {
  color: var(--color-text-muted, #6b7280);
  margin-block-end: 1.5rem;
}

.email-link {
  color: var(--color-primary, #1f3a99);
}

.demo-section-title--flush {
  margin-top: 0;
}

.btn--hidden {
  display: none !important;
}

/* ── Feature Grid + Cards ───────────────────────────────────────────── */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;
}

@media (width >= 720px) {
  .feature-grid--2x2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@supports (selector(:has(*))) {
  @media (width >= 720px) {
    .grid-balanced.grid-balanced--pairs:has(> :nth-child(4):last-child) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

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

.feature-card {
  padding: 1.75rem;
  border: 1px solid var(--border-subtle, color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 10%, white));
  border-radius: var(--radius-lg, 1rem);
  background: var(--glass-bg-strong, rgb(255 255 255 / 76%));
  backdrop-filter: blur(12px);
  transition:
    border-color 280ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 280ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 280ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1));
}

.feature-card:hover {
  border-color: color-mix(in srgb, var(--gem-gold-native-flat, #c88c00) 40%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gem-gold-native-flat, #c88c00) 18%, transparent),
    0 12px 44px color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 12%, transparent);
  transform: translateY(-3px);
}

.feature-card--link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md, 0.75rem);
  background: var(--gem-sapphire, linear-gradient(135deg, #0a1a6e, #1f3a99 35%, #3d64cc 60%, #128 100%));
  color: var(--gem-sapphire-text, #d0dcff);
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 20%, transparent);
}

.feature-card__title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text, #1a2040);
}

.feature-card__body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text-muted, #5a6080);
}

.feature-card__cta {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary, #1f3a99);
}

@media (prefers-reduced-motion: reduce) {
  .feature-card {
    transition: none;
  }
}

/* ── Info Card ──────────────────────────────────────────────────────── */

.info-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-lg, 1rem);
  border: 1px solid color-mix(in srgb, var(--gem-amber-flat, #c88000) 20%, transparent);
  background: color-mix(in srgb, var(--gem-amber-flat, #c88000) 5%, transparent);
}

.info-card__icon {
  flex-shrink: 0;
  color: var(--gem-amber-flat, #c88000);
}

.info-card__body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text, #1a2040);
}

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

.stats-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--border-subtle, color-mix(in srgb, #1f3a99 10%, white));
  border-bottom: 1px solid var(--border-subtle, color-mix(in srgb, #1f3a99 10%, white));
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
  padding: 0.5rem 1.25rem;
}

.stat__value {
  font-size: 1.35rem;
  font-weight: 900;
  background: var(--gem-sapphire, linear-gradient(135deg, #0a1a6e, #1f3a99 35%, #3d64cc 60%, #128 100%));
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}

.stat__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted, #5a6080);
}

/* ── Billing Toggle ─────────────────────────────────────────────────── */

.pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-block-end: 2rem;
}

.pricing-toggle__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text, #1a2040);
  transition:
    color 200ms ease,
    font-weight 200ms ease;
  user-select: none;
}

.pricing-toggle__label--muted {
  font-weight: 400;
  color: var(--color-text-muted, #6b7280);
}

.pricing-toggle__switch {
  position: relative;
  width: 3rem;
  height: 1.625rem;
  border: none;
  border-radius: var(--radius-full, 999px);
  background: #e5e7eb;
  cursor: pointer;
  padding: 0;
  transition: background 200ms ease;
}

.pricing-toggle__switch[aria-pressed="true"] {
  background: var(--color-primary, #0b73d2);
}

.pricing-toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pricing-toggle__switch[aria-pressed="true"] .pricing-toggle__knob {
  transform: translateX(1.375rem);
}

.pricing-toggle__pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  margin-inline-start: 0.35rem;
  border-radius: var(--radius-full, 999px);
  background: color-mix(in srgb, var(--gem-emerald-flat, #0a6840) 12%, white);
  color: var(--gem-emerald-flat, #0a6840);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* ── Pricing Pipeline (How It Works) ────────────────────────────────── */

.pricing-pipeline {
  max-width: 780px;
  margin-inline: auto;
  margin-block-end: 2.5rem;
  padding-inline: 1rem;
}

.pricing-pipeline__inner {
  border: 1px solid var(--border-subtle, color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 10%, white));
  border-radius: var(--radius-xl, 1.25rem);
  background: var(--glass-bg-strong, rgb(255 255 255 / 76%));
  backdrop-filter: blur(12px);
  padding: 2rem 2.25rem;
}

.pricing-pipeline__steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.pricing-pipeline__step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.pricing-pipeline__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--gem-sapphire, linear-gradient(135deg, #0a1a6e, #1f3a99));
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.pricing-pipeline__step strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text, #1a2040);
  margin-block-end: 0.2rem;
}

.pricing-pipeline__step p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted, #5a6080);
  line-height: 1.55;
}

@media (width >= 640px) {
  .pricing-pipeline__steps {
    flex-direction: row;
    gap: 2rem;
  }

  .pricing-pipeline__step {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ── Pricing Context (competitive positioning) ──────────────────────── */

.pricing-context {
  max-width: 680px;
  margin-inline: auto;
  margin-block-end: 2rem;
  padding-inline: 1rem;
  text-align: center;
}

.pricing-context__text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-muted, #5a6080);
  margin: 0;
}

.pricing-context__text strong {
  color: var(--color-text, #1a2040);
  font-weight: 700;
}

/* ── Pricing Current Plan Highlight ─────────────────────────────────── */

.pricing-card--current {
  border-color: var(--gem-emerald-flat, #0a6840);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gem-emerald-flat, #0a6840) 20%, transparent);
}

.pricing-card--current::after {
  content: "Current";
  position: absolute;
  top: -0.6rem;
  right: 1rem;
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-full, 999px);
  background: var(--gem-emerald-flat, #0a6840);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Pricing Grid + Cards ───────────────────────────────────────────── */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.75rem;
  align-items: start;
}

.pricing-card {
  position: relative;
  padding: 2.25rem 1.75rem;
  border: 1px solid var(--border-subtle, color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 10%, white));
  border-radius: var(--radius-xl, 1.25rem);
  background: var(--glass-bg-strong, rgb(255 255 255 / 76%));
  backdrop-filter: blur(12px);
  transition:
    border-color 280ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 280ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 280ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1));
}

.pricing-card:hover {
  border-color: color-mix(in srgb, var(--gem-gold-native-flat, #c88c00) 35%, transparent);
  box-shadow: 0 14px 44px color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 13%, transparent);
  transform: translateY(-3px);
}

.pricing-card--featured {
  border-color: var(--gem-sapphire-flat, #1f3a99);
  box-shadow:
    0 0 0 1px var(--gem-sapphire-flat, #1f3a99),
    0 16px 48px color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 18%, transparent),
    0 0 28px color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 10%, transparent);
  background: #fff;
  transform: translateY(-4px);
}

.pricing-card--featured:hover {
  box-shadow:
    0 0 0 1px var(--gem-sapphire-flat, #1f3a99),
    0 22px 56px color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 24%, transparent),
    0 0 36px color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 14%, transparent);
  transform: translateY(-6px);
}

.pricing-card--highlighted {
  outline: 2px solid var(--gem-sapphire-flat, #1f3a99);
  outline-offset: 4px;
  animation: pricing-highlight-fade 2.4s ease-out forwards;
}

@keyframes pricing-highlight-fade {
  0% {
    outline-color: var(--gem-sapphire-flat, #1f3a99);
  }

  100% {
    outline-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card--highlighted {
    animation: none;
    outline-color: var(--gem-sapphire-flat, #1f3a99);
  }
}

.pricing-card__badge {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 1rem;
  border-radius: var(--radius-full, 999px);
  background: var(--gem-sapphire, linear-gradient(135deg, #0a1a6e, #1f3a99 35%, #3d64cc 60%, #128 100%));
  color: var(--gem-sapphire-text, #d0dcff);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 30%, transparent);
}

.pricing-card__badge--alt {
  background: var(--color-primary, #0b73d2);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary, #0b73d2) 25%, transparent);
}

.pricing-card__name {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-text, #1a2040);
}

.pricing-card__price {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 900;
  color: var(--color-text, #1a2040);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.pricing-card__price span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted, #5a6080);
}

.pricing-card__savings {
  margin: -0.4rem 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gem-emerald-flat, #0a6840);
  letter-spacing: 0.01em;
}

/* ── Pricing Access Comparison ──────────────────────────────────────── */

.pricing-access {
  margin-block: 1.5rem 2.5rem;
  padding-inline: 1rem;
}

.pricing-access__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 680px;
  margin-inline: auto;
  padding: 1.5rem 2rem;
  border: 1px solid var(--border-subtle, color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 10%, white));
  border-radius: var(--radius-xl, 1.25rem);
  background: var(--glass-bg-strong, rgb(255 255 255 / 76%));
  backdrop-filter: blur(8px);
}

@media (width <= 540px) {
  .pricing-access__inner {
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
  }

  .pricing-access__divider {
    transform: rotate(90deg);
  }
}

.pricing-access__col {
  flex: 1;
  min-width: 0;
}

.pricing-access__divider {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-text-muted, #5a6080);
  flex-shrink: 0;
}

.pricing-access__label {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted, #5a6080);
}

.pricing-access__figure {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--color-primary, #0b73d2);
  letter-spacing: -0.02em;
}

.pricing-access__figure--alt {
  color: var(--color-text-muted, #5a6080);
  font-weight: 700;
  text-decoration: line-through;
  text-decoration-color: var(--gem-ruby-flat, #a31b1b);
}

.pricing-access__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.35rem;
}

.pricing-access__list li {
  font-size: 0.84rem;
  color: var(--color-text, #1a2040);
  padding-left: 1.1rem;
  position: relative;
}

.pricing-access__list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--color-text-muted, #5a6080);
}

.price-amount {
  /* For JS toggle */
}

.price-period {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted, #5a6080);
}

.pricing-card__desc {
  margin: 0 0 1.375rem;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--color-text-muted, #5a6080);
}

.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  gap: 0.625rem;
}

.pricing-card__feature-list {
  display: grid;
  gap: 0.7rem;
  margin: 0 0 1.75rem;
}

.pricing-card__feature {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 0.9rem;
  border-radius: 0.9rem;
  border: 1px solid rgb(26 32 64 / 8%);
  background: rgb(247 249 253 / 88%);
}

.pricing-card__feature strong {
  color: var(--color-text, #1a2040);
  font-size: 0.88rem;
  line-height: 1.4;
}

.pricing-card__feature span {
  color: var(--color-text-muted, #5a6080);
  font-size: 0.8rem;
  line-height: 1.5;
}

.pricing-card__feature-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: rgb(31 58 153 / 8%);
  color: var(--color-primary, #1f3a99);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pricing-card__feature[data-integrity] {
  border-color: rgb(10 104 64 / 14%);
  background: rgb(240 252 246 / 92%);
}

.pricing-card__feature[data-integrity] .pricing-card__feature-badge {
  background: rgb(10 104 64 / 10%);
  color: var(--gem-emerald-flat, #0a6840);
}

.pricing-card__features li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text, #1a2040);
}

.pricing-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gem-emerald-flat, #0a6840);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card,
  .pricing-toggle__switch,
  .pricing-toggle__knob,
  .pricing-toggle__label {
    transition: none;
  }
}

/* ── Current-plan highlight (set via JS) ────────────────────────────── */

.pricing-card--current {
  border-color: var(--gem-emerald-flat, #0a6840);
  box-shadow:
    0 0 0 2px var(--gem-emerald-flat, #0a6840),
    0 8px 24px color-mix(in srgb, var(--gem-emerald-flat, #0a6840) 12%, transparent);
}

.btn--disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: default;
}

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

.table-wrap {
  margin-block-start: 2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg, 1rem);
  border: 1px solid rgb(229 231 235 / 60%);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.comparison-table thead {
  border-bottom: 2px solid #e5e7eb;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.comparison-table th,
.comparison-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid rgb(229 231 235 / 80%);
}

.comparison-table th {
  font-weight: 600;
  color: #374151;
}

.comparison-table tbody tr:nth-child(even) {
  background: rgb(249 250 251 / 60%);
}

/* Comparison table — header variants */
.comparison-table .ct-th--feature {
  text-align: start;
  padding: 0.75rem 1rem;
}

.comparison-table .ct-th--plan {
  text-align: center;
  padding: 0.75rem 0.5rem;
}

.comparison-table .ct-th--free {
  color: #8b949e;
}

.comparison-table .ct-th--featured {
  color: #0b73d2;
}

/* Comparison table — cell variants */
.comparison-table .ct-feature {
  padding: 0.6rem 1rem;
  font-weight: 500;
}

.comparison-table .ct-val {
  text-align: center;
  padding: 0.6rem 0.5rem;
}

.comparison-table .ct-val--muted {
  color: #8b949e;
}

.comparison-table .ct-val--highlight {
  font-weight: 600;
}

.comparison-table .ct-val--disabled {
  color: #d1d5db;
}

.comparison-table .ct-val--check {
  color: #0b73d2;
}

/* ── Dark Mode Overrides ──────────────────────────────────────────── */
/* Buttons, hero labels, and ghost elements that use hardcoded light   */
/* colors — these adapt via the token overrides in dark-mode.css for   */
/* section backgrounds, text, etc. But the following need explicit     */
/* overrides because they use raw values or glass/transparency.        */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--ghost,
  :root:not([data-theme="light"]) .btn--outline {
    color: var(--color-text, #e9eef8);
    background: rgb(20 30 48 / 50%);
    border-color: var(--border-subtle, rgb(255 255 255 / 10%));
  }

  :root:not([data-theme="light"]) .btn--white {
    color: var(--color-primary, #5ea8ff);
    background: rgb(20 30 48 / 80%);
    box-shadow: 0 4px 14px rgb(0 0 0 / 30%);
  }

  :root:not([data-theme="light"]) .btn--secondary {
    background: linear-gradient(135deg, #2d3a4e, #1a2332);
    box-shadow: 0 8px 20px rgb(0 0 0 / 30%);
  }

  :root:not([data-theme="light"]) .page-hero__label {
    background: rgb(94 168 255 / 12%);
    color: #7eb8ff;
  }

  :root:not([data-theme="light"]) .page-section:nth-child(even) {
    background:
      radial-gradient(ellipse 600px 300px at 80% 20%, color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 5%, transparent), transparent),
      var(--section-light-b, #141e30);
  }

  :root:not([data-theme="light"]) .page-section:nth-child(odd) {
    background:
      radial-gradient(
        ellipse 520px 320px at 12% 84%,
        color-mix(in srgb, var(--gem-gold-native-flat, #c88c00) 4%, transparent),
        transparent
      ),
      var(--section-light-a, #0e1528);
  }

  :root:not([data-theme="light"]) .scene-divider__label {
    color: #a0aec0;
  }

  :root:not([data-theme="light"]) .scene-cta-band__title {
    color: #f7f9ff;
  }

  :root:not([data-theme="light"]) .comparison-table {
    border-color: rgb(255 255 255 / 12%);
  }

  :root:not([data-theme="light"]) .comparison-table th,
  :root:not([data-theme="light"]) .comparison-table td {
    border-color: rgb(255 255 255 / 8%);
  }

  :root:not([data-theme="light"]) .ct-th--featured {
    color: #5ea8ff;
  }

  :root:not([data-theme="light"]) .ct-val--muted {
    color: #718096;
  }

  :root:not([data-theme="light"]) .ct-val--disabled {
    color: #4a5568;
  }

  :root:not([data-theme="light"]) .ct-val--check {
    color: #5ea8ff;
  }
}

[data-theme="dark"] .btn--ghost,
[data-theme="dark"] .btn--outline {
  color: var(--color-text, #e9eef8);
  background: rgb(20 30 48 / 50%);
  border-color: var(--border-subtle, rgb(255 255 255 / 10%));
}

[data-theme="dark"] .btn--white {
  color: var(--color-primary, #5ea8ff);
  background: rgb(20 30 48 / 80%);
  box-shadow: 0 4px 14px rgb(0 0 0 / 30%);
}

[data-theme="dark"] .btn--secondary {
  background: linear-gradient(135deg, #2d3a4e, #1a2332);
  box-shadow: 0 8px 20px rgb(0 0 0 / 30%);
}

[data-theme="dark"] .page-hero__label {
  background: rgb(94 168 255 / 12%);
  color: #7eb8ff;
}

[data-theme="dark"] .page-section:nth-child(even) {
  background:
    radial-gradient(ellipse 600px 300px at 80% 20%, color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 5%, transparent), transparent),
    var(--section-light-b, #141e30);
}

[data-theme="dark"] .page-section:nth-child(odd) {
  background:
    radial-gradient(ellipse 520px 320px at 12% 84%, color-mix(in srgb, var(--gem-gold-native-flat, #c88c00) 4%, transparent), transparent),
    var(--section-light-a, #0e1528);
}

[data-theme="dark"] .scene-divider__label {
  color: #a0aec0;
}

[data-theme="dark"] .comparison-table {
  border-color: rgb(255 255 255 / 12%);
}

[data-theme="dark"] .comparison-table th,
[data-theme="dark"] .comparison-table td {
  border-color: rgb(255 255 255 / 8%);
}

[data-theme="dark"] .ct-th--featured {
  color: #5ea8ff;
}

[data-theme="dark"] .ct-val--muted {
  color: #718096;
}

[data-theme="dark"] .ct-val--disabled {
  color: #4a5568;
}

[data-theme="dark"] .ct-val--check {
  color: #5ea8ff;
}

/* Comparison table — row variants */
.comparison-table .ct-row--border {
  border-bottom: 2px solid #e5e7eb;
}

.comparison-table .ct-row--section {
  border-top: 2px solid #e5e7eb;
}

/* Comparison table — inline annotations */
.ct-note {
  font-size: 0.75rem;
  color: #6b7280;
}

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

.faq-list {
  max-width: 680px;
  margin-inline: auto;
}

.faq-item {
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 0;
}

.faq-item > summary {
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  color: var(--color-text, #1a1a2e);
}

.faq-item > p {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
}

.faq-item a {
  color: #0b73d2;
}

/* ── Form Components ────────────────────────────────────────────────── */

.form-card {
  padding: 2.25rem;
  border: 1px solid var(--border-subtle, color-mix(in srgb, #1f3a99 10%, white));
  border-radius: 1.25rem;
  background: rgb(255 255 255 / 85%);
  backdrop-filter: blur(12px);
}

.form-group {
  margin-bottom: 1.375rem;
}

.form-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text, #1a2040);
}

.form-input,
.form-textarea {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-primary, #1f3a99) 18%, white);
  border-radius: 0.5rem;
  background: #fff;
  font-size: 0.9rem;
  color: var(--color-text, #1a2040);
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease;
  font-family: inherit;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary, #1f3a99);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #1f3a99) 12%, transparent);
}

.form-textarea {
  resize: vertical;
  min-height: 6rem;
}

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

.faq-list {
  display: grid;
  gap: 0.75rem;
}

.faq-item {
  border: 1px solid var(--border-subtle, color-mix(in srgb, #1f3a99 10%, white));
  border-radius: 0.875rem;
  background: rgb(255 255 255 / 76%);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: border-color 200ms ease;
}

.faq-item[open] {
  border-color: color-mix(in srgb, var(--color-primary, #1f3a99) 30%, transparent);
}

.faq-item summary {
  padding: 1.1rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text, #1a2040);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgb(31 58 153 / 8%);
  color: var(--color-primary, #1f3a99);
  font-size: 1.1rem;
  font-weight: 700;
  transition:
    transform 200ms ease,
    background 200ms ease;
}

.faq-item[open] summary::after {
  content: "−";
  background: var(--color-primary, #1f3a99);
  color: #fff;
  transform: rotate(180deg);
}

.faq-item__answer {
  padding: 0 1.5rem 1.25rem;
}

.faq-item__answer p {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-muted, #5a6080);
}

.faq-item__answer p:last-child {
  margin-bottom: 0;
}

.faq-item__answer a {
  color: var(--color-primary, #1f3a99);
  text-underline-offset: 2px;
}

/* ── Background Surface ─────────────────────────────────────────────── */

.bg-surface {
  padding: 0;
  max-width: none;
  width: 100%;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (width < 640px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }

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

  .stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .page-hero {
    padding: 2.5rem 0 2rem;
  }

  .pricing-toggle {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

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

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

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

/* ── Sirens Dark-Surface Compatibility ──────────────────────────────
   When sirens-to-scales.css is active (body[data-site-surface="public"]),
   page-components elements shift to the dark atmospheric palette so that
   content panels read correctly against the deep dark body background.
   This is the bridge that makes "broken" pages match the shining examples.
   ─────────────────────────────────────────────────────────────────── */

body[data-site-surface="public"] {
  --public-glass-surface: rgb(11 18 31 / 46%);
  --public-glass-surface-strong: rgb(14 22 38 / 62%);
  --public-glass-surface-deep: rgb(10 17 29 / 76%);
  --public-glass-edge: rgb(163 188 246 / 16%);
  --public-glass-edge-strong: rgb(217 175 103 / 18%);
  --public-glass-shadow-soft: 0 18px 42px rgb(2 8 18 / 26%);
  --public-glass-shadow-deep: 0 28px 74px rgb(2 8 18 / 34%);
  --public-glass-highlight: linear-gradient(160deg, rgb(231 242 255 / 12%) 0%, rgb(203 221 255 / 5%) 34%, rgb(203 221 255 / 0%) 100%);
}

body[data-site-surface="public"] .surface-panel,
body[data-site-surface="public"] .feature-card,
body[data-site-surface="public"] .info-card,
body[data-site-surface="public"] .faq-item,
body[data-site-surface="public"] .stats-row,
body[data-site-surface="public"] .pricing-pipeline__inner,
body[data-site-surface="public"] .pricing-access__inner,
body[data-site-surface="public"] .pricing-card,
body[data-site-surface="public"] .pricing-card__feature,
body[data-site-surface="public"] .page-section--cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(165deg, var(--public-glass-surface-strong) 0%, var(--public-glass-surface) 100%);
  border: 1px solid var(--public-glass-edge);
  box-shadow:
    var(--public-glass-shadow-soft),
    inset 0 1px 0 rgb(255 255 255 / 4%),
    inset 0 0 0 1px rgb(255 255 255 / 2%);
  backdrop-filter: blur(20px) saturate(145%);
}

body[data-site-surface="public"] .surface-panel::before,
body[data-site-surface="public"] .feature-card::before,
body[data-site-surface="public"] .faq-item::before,
body[data-site-surface="public"] .pricing-card::before,
body[data-site-surface="public"] .pricing-pipeline__inner::before,
body[data-site-surface="public"] .pricing-access__inner::before,
body[data-site-surface="public"] .page-section--cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--public-glass-highlight);
  opacity: 0.55;
  pointer-events: none;
}

/* Hero — transparent so dark body atmosphere shows through */
body[data-site-surface="public"] .page-hero {
  background:
    radial-gradient(ellipse 800px 500px at 50% 0%, rgb(45 120 255 / 10%), transparent 60%),
    radial-gradient(ellipse 600px 400px at 80% 100%, rgb(199 71 94 / 8%), transparent 55%), transparent;
}

body[data-site-surface="public"] .page-hero__label {
  background: rgb(31 58 153 / 18%);
  color: rgb(189 208 244 / 88%);
  border-color: rgb(45 120 255 / 22%);
}

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

body[data-site-surface="public"] .page-hero__subtitle {
  color: rgb(189 208 244 / 84%);
}

/* Page sections — dark translucent panels */
body[data-site-surface="public"] .page-section:nth-child(odd) {
  border: 1px solid rgb(163 188 246 / 10%);
  background:
    radial-gradient(ellipse 520px 320px at 12% 84%, rgb(199 71 94 / 6%), transparent),
    linear-gradient(165deg, rgb(12 20 34 / 44%), rgb(8 17 29 / 30%));
  box-shadow:
    0 24px 58px rgb(2 8 18 / 20%),
    inset 0 1px 0 rgb(255 255 255 / 4%),
    inset 0 0 0 1px rgb(255 255 255 / 2%);
  backdrop-filter: blur(26px) saturate(140%);
}

body[data-site-surface="public"] .page-section:nth-child(even) {
  border: 1px solid rgb(163 188 246 / 10%);
  background:
    radial-gradient(ellipse 600px 300px at 80% 20%, rgb(45 120 255 / 7%), transparent),
    linear-gradient(165deg, rgb(13 22 37 / 46%), rgb(9 18 31 / 32%));
  box-shadow:
    0 24px 58px rgb(2 8 18 / 22%),
    inset 0 1px 0 rgb(255 255 255 / 4%),
    inset 0 0 0 1px rgb(255 255 255 / 2%);
  backdrop-filter: blur(26px) saturate(140%);
}

body[data-site-surface="public"] .page-section:nth-child(odd)::after {
  background: linear-gradient(to bottom, transparent, rgb(9 18 31 / 22%));
}

body[data-site-surface="public"] .page-section:nth-child(even)::after {
  background: linear-gradient(to bottom, transparent, rgb(8 17 29 / 20%));
}

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

body[data-site-surface="public"] .page-section__subtitle {
  color: rgb(189 208 244 / 80%);
}

/* Prose */
body[data-site-surface="public"] .prose-block,
body[data-site-surface="public"] .prose-block p {
  color: rgb(214 228 248 / 90%);
}

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

body[data-site-surface="public"] .prose-block a {
  color: rgb(109 160 255);
}

body[data-site-surface="public"] .prose-block a:hover {
  color: rgb(140 185 255);
}

/* Feature cards — dark glass */
body[data-site-surface="public"] .feature-card {
  border-color: var(--public-glass-edge);
}

body[data-site-surface="public"] .feature-card:hover {
  border-color: var(--public-glass-edge-strong);
  box-shadow:
    var(--public-glass-shadow-deep),
    inset 0 1px 0 rgb(255 255 255 / 6%),
    inset 0 0 0 1px rgb(255 255 255 / 2%);
}

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

body[data-site-surface="public"] .feature-card__body {
  color: rgb(189 208 244 / 82%);
}

body[data-site-surface="public"] .feature-card__cta {
  color: rgb(109 160 255);
}

/* Ghost / outline buttons */
body[data-site-surface="public"] .btn--ghost,
body[data-site-surface="public"] .btn--outline {
  color: rgb(214 228 248);
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 18%);
}

body[data-site-surface="public"] .btn--ghost:hover,
body[data-site-surface="public"] .btn--outline:hover {
  background: rgb(255 255 255 / 12%);
  border-color: rgb(255 255 255 / 30%);
  box-shadow: 0 6px 20px rgb(45 120 255 / 18%);
}

/* Scene divider */
body[data-site-surface="public"] .scene-divider__label {
  color: rgb(158 176 203 / 80%);
}

/* Info card */
body[data-site-surface="public"] .info-card {
  border-color: rgb(217 175 103 / 18%);
  background:
    linear-gradient(165deg, rgb(33 26 11 / 56%), rgb(22 19 12 / 40%)),
    radial-gradient(circle at 14% 18%, rgb(217 175 103 / 10%), transparent 56%);
  box-shadow:
    var(--public-glass-shadow-soft),
    inset 0 1px 0 rgb(255 255 255 / 4%);
  backdrop-filter: blur(18px) saturate(135%);
}

body[data-site-surface="public"] .info-card__body {
  color: rgb(214 228 248 / 90%);
}

/* Stats row */
body[data-site-surface="public"] .stats-row {
  padding: 1.4rem 1.6rem;
  border-color: var(--public-glass-edge);
  border-radius: var(--radius-xl, 1.25rem);
  box-shadow:
    var(--public-glass-shadow-soft),
    inset 0 1px 0 rgb(255 255 255 / 4%);
}

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

/* Pricing context text */
body[data-site-surface="public"] .pricing-context__text {
  color: rgb(189 208 244 / 78%);
}

body[data-site-surface="public"] .surface-panel {
  background: linear-gradient(165deg, var(--public-glass-surface-deep) 0%, rgb(8 15 27 / 62%) 100%);
  border-color: rgb(217 175 103 / 16%);
  box-shadow:
    var(--public-glass-shadow-deep),
    inset 0 1px 0 rgb(255 255 255 / 4%),
    inset 0 0 0 1px rgb(255 255 255 / 2%);
}

body[data-site-surface="public"] .pricing-pipeline__inner,
body[data-site-surface="public"] .pricing-access__inner,
body[data-site-surface="public"] .pricing-card {
  border-color: var(--public-glass-edge);
}

body[data-site-surface="public"] .pricing-card:hover,
body[data-site-surface="public"] .pricing-access__inner:hover,
body[data-site-surface="public"] .pricing-pipeline__inner:hover,
body[data-site-surface="public"] .faq-item[open] {
  border-color: var(--public-glass-edge-strong);
  box-shadow:
    var(--public-glass-shadow-deep),
    inset 0 1px 0 rgb(255 255 255 / 6%),
    inset 0 0 0 1px rgb(255 255 255 / 2%);
}

body[data-site-surface="public"] .pricing-card__feature {
  background: linear-gradient(165deg, rgb(16 24 39 / 58%), rgb(11 18 31 / 40%));
  border-color: rgb(163 188 246 / 12%);
}

body[data-site-surface="public"] .pricing-card--featured {
  background: linear-gradient(165deg, rgb(17 28 46 / 76%), rgb(12 21 37 / 60%));
  box-shadow:
    0 0 0 1px rgb(109 160 255 / 36%),
    0 20px 54px rgb(2 8 18 / 34%),
    inset 0 1px 0 rgb(255 255 255 / 5%);
}

body[data-site-surface="public"] .pricing-card--featured:hover {
  box-shadow:
    0 0 0 1px rgb(109 160 255 / 42%),
    0 26px 66px rgb(2 8 18 / 40%),
    inset 0 1px 0 rgb(255 255 255 / 6%);
}

@supports not (backdrop-filter: blur(1px)) {
  body[data-site-surface="public"] .page-section:nth-child(odd),
  body[data-site-surface="public"] .page-section:nth-child(even),
  body[data-site-surface="public"] .surface-panel,
  body[data-site-surface="public"] .feature-card,
  body[data-site-surface="public"] .info-card,
  body[data-site-surface="public"] .faq-item,
  body[data-site-surface="public"] .stats-row,
  body[data-site-surface="public"] .pricing-pipeline__inner,
  body[data-site-surface="public"] .pricing-access__inner,
  body[data-site-surface="public"] .pricing-card,
  body[data-site-surface="public"] .pricing-card__feature,
  body[data-site-surface="public"] .page-section--cta {
    background: rgb(10 17 29 / 90%);
  }
}

@media (prefers-reduced-transparency: reduce) {
  body[data-site-surface="public"] .page-section:nth-child(odd),
  body[data-site-surface="public"] .page-section:nth-child(even),
  body[data-site-surface="public"] .surface-panel,
  body[data-site-surface="public"] .feature-card,
  body[data-site-surface="public"] .info-card,
  body[data-site-surface="public"] .faq-item,
  body[data-site-surface="public"] .stats-row,
  body[data-site-surface="public"] .pricing-pipeline__inner,
  body[data-site-surface="public"] .pricing-access__inner,
  body[data-site-surface="public"] .pricing-card,
  body[data-site-surface="public"] .pricing-card__feature,
  body[data-site-surface="public"] .page-section--cta {
    backdrop-filter: none;
    background: rgb(10 17 29 / 92%);
  }
}

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

/* FAQ accordion */
body[data-site-surface="public"] .faq-item > summary,
body[data-site-surface="public"] .faq-item summary {
  color: #eaf1fb;
}

body[data-site-surface="public"] .faq-item > p,
body[data-site-surface="public"] .faq-item__answer p {
  color: rgb(189 208 244 / 84%);
}

body[data-site-surface="public"] .faq-item a,
body[data-site-surface="public"] .faq-item__answer a {
  color: rgb(109 160 255);
}