:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg-body: #080b10;
  --bg-surface: #111820;
  --bg-surface-hover: #192430;
  --text-primary: #eef4f7;
  --text-secondary: #aab8c3;
  --text-tertiary: #7c91a1;
  --accent-hero: #6bc7f2;
  --accent-on-hero: #07131a;
  --accent-action: #ff6b35;
  --accent-on-action: #2c0d03;
  --accent-ownership: var(--accent-hero);
  --accent-on-ownership: var(--accent-on-hero);
  --accent-data: #4fb8ea;
  --accent-on-data: #07151d;
  --accent-detail: #8fb6cc;
  --accent-on-detail: #eef4f7;
  --accent-detail-border: #4c7790;
  --accent-detail-gradient: linear-gradient(135deg, #1b2531 0%, #38495a 52%, #5a6f80 100%);
  --accent-brand: var(--accent-hero);
  --accent-lime: var(--accent-hero);
  --accent-danger: #ff4545;
  --border-light: rgba(155, 204, 231, 0.13);
  --border-focus: rgba(155, 204, 231, 0.3);
  --accent-fill: var(--accent-action);
  --accent-on-fill: var(--accent-on-action);
  --bg-subtle: #0d131b;
  --control-bg: rgba(111, 188, 230, 0.1);
  --control-bg-hover: rgba(111, 188, 230, 0.17);
  --input-bg: rgba(4, 10, 16, 0.76);
  --nav-fade: transparent;
  --hero-radial: linear-gradient(125deg, #080b10 0%, #0a111b 52%, #0e2a39 100%);
  --panel-overlay: rgba(17, 24, 32, 0.8);
  --shadow-raised: 0 30px 90px rgba(1, 7, 12, 0.48);
  --track: #273541;
  --glass-chrome: rgba(18, 29, 40, 0.58);
  --glass-panel: rgba(17, 27, 38, 0.68);
  --glass-panel-heavy: rgba(9, 16, 23, 0.86);
  --glass-border: rgba(176, 220, 244, 0.17);
  --glass-highlight: rgba(238, 249, 255, 0.24);
  --glass-warm-wash: rgba(255, 107, 53, 0.2);
  --glass-shadow: 0 24px 70px rgba(1, 7, 12, 0.38), 0 10px 38px rgba(255, 107, 53, 0.09), inset 0 1px rgba(238, 249, 255, 0.11);
  --page-fog: none;
  --pebble-radius-control: 22px 19px 23px 20px;
  --pebble-radius-field: 16px;
  --pebble-radius-panel: 28px 24px 30px 25px;

  /* Alternate names used by support and policy pages. */
  --bg: #080b10;
  --surface: #111820;
  --surface-raised: #192430;
  --text: #eef4f7;
  --muted: #aab8c3;
  --faint: #7c91a1;
  --lime: var(--accent-brand);
  --accent: var(--accent-brand);
  --line: var(--border-light);
  --line-strong: var(--border-focus);
  --danger: #ff6b6b;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg-body: #f1f5f7;
  --bg-surface: #fbfcfd;
  --bg-surface-hover: #e3edf2;
  --bg-subtle: #e7eff3;
  --text-primary: #121b21;
  --text-secondary: #526572;
  --text-tertiary: #526a79;
  --accent-hero: #006d9d;
  --accent-on-hero: #f7fcfe;
  --accent-action: #c24320;
  --accent-on-action: #fff9f6;
  --accent-ownership: var(--accent-hero);
  --accent-on-ownership: var(--accent-on-hero);
  --accent-data: #0b6f9b;
  --accent-on-data: #f7fcfe;
  --accent-detail: #476f86;
  --accent-on-detail: #101820;
  --accent-detail-border: #8fa3b3;
  --accent-detail-gradient: linear-gradient(135deg, #b8c6d2 0%, #cfdae3 52%, #e2e9ef 100%);
  --accent-brand: var(--accent-hero);
  --accent-lime: var(--accent-hero);
  --accent-fill: var(--accent-action);
  --accent-on-fill: var(--accent-on-action);
  --accent-danger: #bd2020;
  --border-light: rgba(16, 61, 86, 0.13);
  --border-focus: rgba(16, 61, 86, 0.3);
  --control-bg: rgba(255, 255, 255, 0.54);
  --control-bg-hover: rgba(255, 255, 255, 0.78);
  --input-bg: rgba(255, 255, 255, 0.68);
  --nav-fade: transparent;
  --hero-radial: linear-gradient(125deg, #f2f5f7 0%, #edf4f8 52%, #d9edf7 100%);
  --panel-overlay: rgba(251, 252, 253, 0.76);
  --shadow-raised: 0 28px 80px rgba(37, 87, 113, 0.17);
  --track: #c4d3dc;
  --glass-chrome: rgba(249, 252, 253, 0.64);
  --glass-panel: rgba(248, 252, 254, 0.58);
  --glass-panel-heavy: rgba(245, 250, 252, 0.86);
  --glass-border: rgba(255, 255, 255, 0.84);
  --glass-highlight: rgba(255, 255, 255, 0.98);
  --glass-warm-wash: rgba(255, 107, 53, 0.18);
  --glass-shadow: 0 24px 70px rgba(37, 87, 113, 0.16), 0 10px 36px rgba(255, 107, 53, 0.08), inset 0 1px rgba(255, 255, 255, 0.94);
  --page-fog: none;
  --pebble-radius-control: 22px 19px 23px 20px;
  --pebble-radius-field: 16px;
  --pebble-radius-panel: 28px 24px 30px 25px;

  /* Alternate token names used by the focused support and policy pages. */
  --bg: #f1f5f7;
  --surface: #fbfcfd;
  --surface-raised: #e3edf2;
  --text: #121b21;
  --muted: #526572;
  --faint: #526a79;
  --lime: var(--accent-brand);
  --accent: var(--accent-brand);
  --line: var(--border-light);
  --line-strong: var(--border-focus);
  --danger: #bd2020;
}

.theme-picker {
  position: relative;
  z-index: 1100;
}

.theme-trigger {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--border-light, var(--line));
  border-radius: var(--pebble-radius-control);
  background: var(--glass-chrome, var(--bg-surface, var(--surface)));
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  color: var(--text-primary, var(--text));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font: 700 0.76rem/1 var(--font-stack, "Inter", sans-serif);
}

.theme-trigger:hover { background: var(--bg-surface-hover, var(--surface-raised)); }
.theme-trigger:focus-visible,
.theme-option:focus-visible { outline: 2px solid var(--accent-action, var(--accent)); outline-offset: 2px; }
.theme-trigger-icon { width: 1.1em; font-size: 1rem; text-align: center; }

.theme-options {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 164px;
  padding: 7px;
  border: 1px solid var(--border-light, var(--line));
  border-radius: var(--pebble-radius-control);
  background: var(--glass-panel-heavy, var(--bg-surface, var(--surface)));
  -webkit-backdrop-filter: blur(28px) saturate(135%);
  backdrop-filter: blur(28px) saturate(135%);
  box-shadow: var(--shadow-raised);
}

.theme-options[hidden] { display: none; }

.theme-option {
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, var(--muted));
  display: grid;
  grid-template-columns: 22px 1fr 18px;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  text-align: left;
  font: 650 0.82rem/1.2 var(--font-stack, "Inter", sans-serif);
}

.theme-option:hover,
.theme-option:focus-visible { background: var(--bg-surface-hover, var(--surface-raised)); color: var(--text-primary, var(--text)); }
.theme-option-check { opacity: 0; }
.theme-option.is-active { color: var(--accent-detail, var(--accent)); }
.theme-option.is-active .theme-option-check { opacity: 1; }

.theme-picker-floating {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 3000;
}

/* Landing page: semantic treatment of previously dark-only surfaces. */
.landing-page nav { background: var(--nav-fade); }
.landing-page .hero { background: var(--hero-radial); }
.landing-page .btn-primary,
.landing-page .kansensus .own-segment,
.landing-page input:checked + .slider,
.landing-page .chart-row.active .bar-fill,
.landing-page .dot.active { background: var(--accent-fill); }
.landing-page .btn-primary { color: var(--accent-on-fill); }
.landing-page .btn-secondary,
.landing-page .store-cta { background: var(--control-bg); color: var(--text-primary); border-color: var(--border-light); }
.landing-page .btn-secondary:hover,
.landing-page .store-cta--link:hover { background: var(--control-bg-hover); }
.landing-page .nav-link:hover,
.landing-page .mobile-menu-btn,
.landing-page .mobile-link,
.landing-page .close-btn,
.landing-page .lang-btn,
.landing-page .lang-item:hover,
.landing-page .store-name,
.landing-page .footer-links a:hover { color: var(--text-primary); }
.landing-page .lang-menu { box-shadow: var(--shadow-raised); }
.landing-page .calc-section { background: var(--bg-subtle); }
.landing-page input[type="range"],
.landing-page .slider { background-color: var(--track); }
.landing-page input[type="range"] { background-image: linear-gradient(var(--accent-fill), var(--accent-fill)); }
.landing-page input[type="range"]::-webkit-slider-thumb { border: 1px solid var(--border-light); background: var(--bg-surface); }
.landing-page .anchor-line { background: var(--border-light); }
.landing-page a:focus-visible,
.landing-page button:focus-visible,
.landing-page input:focus-visible {
  outline: 2px solid var(--accent-lime);
  outline-offset: 4px;
}

html[data-theme="light"] .landing-page .chart-row,
html[data-theme="light"] .landing-page .t-label,
html[data-theme="light"] .landing-page .bar-val { color: var(--text-secondary); }
html[data-theme="light"] .landing-page .bar-fill { background: var(--bg-surface-hover); }
html[data-theme="light"] .landing-page .t-seats { color: var(--text-tertiary); }
html[data-theme="light"] .landing-page .chart-row.active .t-label,
html[data-theme="light"] .landing-page .chart-row.active .t-seats { color: var(--text-primary); }
html[data-theme="light"] .landing-page .mobile-chart-box { background: var(--bg-surface); border-color: var(--border-light); }
html[data-theme="light"] .landing-page .user-highlight.active { color: var(--text-primary); text-shadow: none; }
html[data-theme="light"] .landing-page .modal-overlay { background: rgba(8, 20, 29, 0.72); }

/* Keep native dark-control styling without changing the calculator's editorial background. */
html[data-theme="light"] .landing-page .phone,
html[data-theme="light"] .landing-page .screen { color-scheme: dark; }

/* Vision page keeps the same hierarchy while sharing the semantic palette. */
.vision-page nav { background: var(--nav-fade); }
.vision-page .btn-primary { background: var(--accent-fill); color: var(--accent-on-fill); }
.vision-page .nav-link:hover,
.vision-page .mobile-menu-btn,
.vision-page .mobile-link,
.vision-page .footer-links a:hover { color: var(--text-primary); }
.vision-page .highlight-box { background: var(--bg-surface); border-color: var(--border-light); }

/* Support page surfaces. */
.support-page { background-color: var(--bg); color: var(--text); }
.support-page .support-form { background: var(--panel-overlay); box-shadow: var(--shadow-raised); }
.support-page .input-wrap { background: var(--input-bg); }
.support-page .amount-preset.is-selected,
.support-page .checkout-button { background: var(--accent-fill); color: var(--accent-on-fill); }
.support-page .amount-preset.is-selected { border-color: var(--accent-fill); }
.support-page .checkout-button:disabled {
  background: var(--bg-surface-hover);
  color: var(--text-secondary);
  opacity: 1;
}
.support-page .input-wrap:focus-within { border-color: var(--accent-action); }
.support-page button:focus-visible,
.support-page input:focus-visible,
.support-page select:focus-visible,
.support-page a:focus-visible { outline-color: var(--accent-action); }

html[data-theme="light"] .support-page { background-image: none; }

.support-page .return-message {
  border-color: color-mix(in srgb, var(--accent-detail) 38%, transparent);
  background: color-mix(in srgb, var(--accent-detail) 10%, transparent);
}

.legal-page .btn,
.legal-page > a {
  color: var(--accent-on-fill);
}

.legal-page .btn { background: var(--accent-fill); }

/* Pebble material belongs to navigation and controls. Page content stays solid. */
.landing-page,
.vision-page,
.support-page,
.legal-page {
  background-color: var(--bg-body, var(--bg));
  background-image: none;
  color: var(--text-primary, var(--text));
}

.landing-page nav,
.vision-page nav {
  top: 16px;
  left: 50%;
  right: auto;
  width: min(1300px, calc(100% - 32px));
  padding: 8px;
  border: 1px solid var(--glass-border);
  border-radius: var(--pebble-radius-panel);
  background:
    radial-gradient(circle at 88% -75%, var(--glass-warm-wash) 0%, transparent 38%),
    var(--glass-chrome);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
  transform: translateX(-50%);
}

.landing-page nav::before,
.vision-page nav::before,
.support-page .site-header::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, var(--glass-highlight), transparent 34%);
  content: "";
  opacity: 0.32;
  pointer-events: none;
}

.landing-page .nav-inner.container,
.vision-page .nav-inner.container {
  max-width: none;
  min-height: 48px;
  padding: 0 8px 0 12px;
}

.landing-page .nav-links,
.vision-page .nav-links { gap: clamp(16px, 2vw, 30px); }

.landing-page .lang-btn,
.landing-page .mobile-menu-btn,
.vision-page .mobile-menu-btn,
.support-page .language-control select {
  border: 1px solid var(--border-light);
  border-radius: var(--pebble-radius-control);
  background-color: var(--control-bg);
}

.landing-page .lang-menu,
.landing-page .mobile-menu-overlay,
.vision-page .mobile-menu-overlay {
  border: 1px solid var(--glass-border);
  background: var(--glass-panel-heavy);
  -webkit-backdrop-filter: blur(34px) saturate(135%);
  backdrop-filter: blur(34px) saturate(135%);
}

.landing-page .lang-menu { border-radius: var(--pebble-radius-control); }

.landing-page .btn,
.vision-page .btn,
.landing-page .store-cta,
.support-page button,
.legal-page .btn,
.legal-page > a {
  border-radius: var(--pebble-radius-control);
  transition: transform 120ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.landing-page .store-cta {
  border-color: var(--glass-border);
  background: var(--glass-panel);
  box-shadow: inset 0 1px var(--glass-highlight), 0 14px 38px rgba(1, 7, 12, 0.12);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}

.landing-page .store-cta--link:hover {
  border-color: color-mix(in srgb, var(--accent-action) 46%, var(--glass-border));
  background: var(--glass-panel-heavy);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--accent-action) 15%, transparent), inset 0 1px var(--glass-highlight);
}

.landing-page .btn:hover,
.vision-page .btn:hover,
.landing-page .store-cta--link:hover,
.support-page button:hover,
.legal-page .btn:hover,
.legal-page > a:hover { transform: translateY(-1px); }

.landing-page .btn:active,
.vision-page .btn:active,
.landing-page .store-cta--link:active,
.support-page button:active,
.legal-page .btn:active,
.legal-page > a:active { transform: scale(0.96); }

.landing-page .btn-primary:hover,
.vision-page .btn-primary:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); }

.landing-page .comparison-grid,
.landing-page .grid-3,
.landing-page .grid-4 { gap: 16px; }

.vision-page .highlight-box,
.support-page .support-form,
.support-page .terms-strip,
.support-page .future-note,
.support-page .reporting-list {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-surface, var(--surface));
  box-shadow: none;
}

.support-page .support-form { background: var(--bg-surface); }

.landing-page .shot-frame,
.landing-page .product-video-slot,
.landing-page .phone,
.support-page .input-wrap,
.support-page .amount-preset,
.support-page .reporting-row {
  border-color: var(--border-light);
  border-radius: var(--pebble-radius-field);
  background: var(--control-bg);
}

.landing-page .section,
.vision-page .section,
.support-page .support-hero { border-color: var(--border-light); }

.landing-page .section-label,
.landing-page .eyebrow,
.vision-page .text-lime { color: var(--accent-brand); }

.landing-page .logo span,
.vision-page .logo span,
.support-page .wordmark span { color: var(--accent-action); }

.support-page .eyebrow,
.support-page .form-kicker,
.support-page .strip-label,
.support-page .lime { color: var(--accent-detail); }

.landing-page .formula-note,
.landing-page .support-inline-link,
.landing-page .connected-model,
.support-page .principle-line { border-color: var(--border-light); }

.landing-page .formula-note > span,
.landing-page .support-inline-link { color: var(--accent-brand); }

.landing-page .principle-list li::before { color: var(--accent-detail); }

.support-page .site-header {
  position: sticky;
  z-index: 1000;
  top: 16px;
  width: min(1400px, calc(100% - 32px));
  min-height: 64px;
  margin: 16px auto 0;
  padding: 0 clamp(16px, 3vw, 28px);
  border: 1px solid var(--glass-border);
  border-radius: var(--pebble-radius-panel);
  background:
    radial-gradient(circle at 88% -75%, var(--glass-warm-wash) 0%, transparent 38%),
    var(--glass-chrome);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
}

.support-page .support-hero { min-height: calc(100vh - 96px); }
.support-page .support-form { overflow: hidden; }
.support-page .terms-strip,
.support-page .future-note { margin-inline: auto; }
.support-page .reporting-list { overflow: hidden; }
.support-page .reporting-row { border-radius: 0; background: transparent; }

.legal-page > .container,
.legal-page > main {
  width: min(860px, calc(100% - 32px));
  max-width: 860px;
  margin: 32px auto;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-surface);
  box-shadow: none;
}

.legal-page a { color: var(--accent-detail, var(--accent)); }
.legal-page .notice {
  border-color: var(--glass-border);
  border-radius: var(--pebble-radius-control);
  background: var(--glass-panel);
}

.legal-page > h1 { color: var(--text-primary); }
.legal-page > a { color: var(--accent-on-fill); }

@media (max-width: 900px) {
  .landing-page,
  .vision-page,
  .support-page,
  .legal-page { background-attachment: scroll; }

  .landing-page nav,
  .vision-page nav { top: 10px; width: calc(100% - 20px); }

  .landing-page .mobile-menu-btn,
  .vision-page .mobile-menu-btn {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
  }

  .support-page .site-header {
    top: 10px;
    width: calc(100% - 20px);
    margin-top: 10px;
  }
}

@media (max-width: 680px) {
  .theme-trigger-label { display: none; }
  .theme-trigger { width: 38px; justify-content: center; padding-inline: 0; }
  .theme-picker-floating { top: 12px; right: 12px; }
  .mobile-theme-mount { margin: 8px 0 28px; }
  .mobile-theme-mount .theme-trigger { width: auto; padding-inline: 12px; }
  .mobile-theme-mount .theme-trigger-label { display: inline; }
  .mobile-theme-mount .theme-options { left: 0; right: auto; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .landing-page nav,
  .vision-page nav,
  .landing-page .lang-menu,
  .landing-page .mobile-menu-overlay,
  .vision-page .mobile-menu-overlay,
  .theme-trigger,
  .theme-options,
  .landing-page .store-cta,
  .support-page .site-header,
  .support-page .support-form,
  .legal-page > .container,
  .legal-page > main { background: var(--bg-surface, var(--surface)); }
}

@media (prefers-reduced-transparency: reduce) {
  .landing-page nav,
  .vision-page nav,
  .landing-page .lang-menu,
  .landing-page .mobile-menu-overlay,
  .vision-page .mobile-menu-overlay,
  .vision-page .highlight-box,
  .theme-trigger,
  .theme-options,
  .landing-page .store-cta,
  .support-page .site-header,
  .support-page .support-form,
  .support-page .terms-strip,
  .support-page .future-note,
  .support-page .reporting-list,
  .legal-page > .container,
  .legal-page > main {
    background: var(--bg-surface, var(--surface));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root,
  html[data-theme="dark"] { --border-light: rgba(255, 255, 255, 0.38); --glass-border: rgba(255, 255, 255, 0.5); }
  html[data-theme="light"] { --border-light: rgba(0, 0, 0, 0.32); --glass-border: rgba(0, 0, 0, 0.4); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .landing-page { scroll-behavior: auto; }
  .landing-page .mobile-menu-overlay,
  .vision-page .mobile-menu-overlay { transition: none; }
  .landing-page .cycle-item { animation: none; opacity: 0; transform: none; }
  .landing-page .cycle-item.item-1 { opacity: 1; }
  .landing-page .chevron,
  .landing-page .anchor-line::after,
  .landing-page .animate-pulse-effect { animation: none; }
  .vision-page .text-glow,
  .vision-page .btn-pulse { animation: none; }
  .vision-page .fade-in,
  .vision-page .slide-in-left,
  .vision-page .slide-in-right,
  .vision-page .scale-in,
  .vision-page .highlight-box::before { transition: none; }
  .landing-page .ownership-bar .own-segment,
  .landing-page .formula-card,
  .landing-page .rev-card,
  .landing-page .btn,
  .landing-page .store-cta,
  .vision-page .btn,
  .support-page button,
  .legal-page .btn,
  .legal-page > a { transition: none; }
  .landing-page .btn:hover,
  .landing-page .btn:active,
  .landing-page .store-cta--link:hover,
  .landing-page .store-cta--link:active,
  .vision-page .btn:hover,
  .vision-page .btn:active,
  .support-page button:hover,
  .support-page button:active,
  .legal-page .btn:hover,
  .legal-page .btn:active,
  .legal-page > a:hover,
  .legal-page > a:active { transform: none; }
}