/* The original styles.css owns every layout and light-mode color. No new grid,
   spacing, typography or background is applied to the existing light website. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f5f5f5;
  --muted: #a7a7a7;
  --line: #303030;
  --paper: #000;
  --white: #131313;
  --green: #97c9a5;
  --green-soft: #122018;
  --amber: #e5bb79;
  --amber-soft: #251d10;
  --danger: #e69c9c;
  --danger-soft: #251414;
}
:root[data-theme="dark"] .site-nav { background: rgba(0,0,0,.96); }
:root[data-theme="dark"] .hero {
  background: radial-gradient(circle at 78% 28%,rgba(183,190,193,.10),transparent 32%),radial-gradient(circle at 20% 82%,rgba(149,153,156,.065),transparent 27%),linear-gradient(135deg,#000 0%,#040404 54%,#080808 100%);
}
:root[data-theme="dark"] .pricing-hero {
  background: radial-gradient(circle at 82% 18%,rgba(183,190,193,.08),transparent 30%),linear-gradient(135deg,#000,#040404 65%,#080808);
}
:root[data-theme="dark"] .hero::before {
  background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
}
/* A quiet reflective film behind the original hero, never over its text.
   Static by default: no blur, painted frame, particles or animation loop. */
:root[data-theme="dark"] .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(116deg,transparent 23%,rgba(239,239,239,.012) 38%,rgba(239,239,239,.065) 49%,rgba(208,208,208,.025) 53%,transparent 69%),
    radial-gradient(ellipse at 79% 21%,rgba(220,220,220,.042),transparent 58%),
    linear-gradient(124deg,transparent 29%,rgba(206,188,223,.023) 43%,rgba(180,211,200,.023) 53%,rgba(219,207,180,.016) 62%,transparent 74%);
  mask-image: linear-gradient(90deg,rgba(0,0,0,.4),#000 53%,rgba(0,0,0,.85));
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="dark"] .hero::after { opacity: .75; }
}
/* Local visual alternatives only; "current" is the unchanged default above.
   They affect the existing dark hero film, never light styles or text layout. */
:root[data-theme="dark"][data-luma-surface="thick-glass"] .hero::after {
  background:
    linear-gradient(116deg,transparent 16%,rgba(239,239,239,.026) 36%,rgba(239,239,239,.115) 49%,rgba(208,208,208,.052) 56%,transparent 76%),
    radial-gradient(ellipse at 78% 23%,rgba(220,220,220,.058),transparent 59%),
    linear-gradient(124deg,transparent 29%,rgba(206,188,223,.029) 43%,rgba(180,211,200,.029) 54%,rgba(219,207,180,.021) 64%,transparent 78%);
  box-shadow: inset 0 1px rgba(255,255,255,.055), inset 0 -34px 80px rgba(0,0,0,.18);
}
:root[data-theme="dark"][data-luma-surface="matte"] .hero {
  background: linear-gradient(135deg,#000 0%,#030303 58%,#080808 100%);
}
:root[data-theme="dark"][data-luma-surface="matte"] .hero::after { background: none; box-shadow: none; }
:root[data-theme="dark"][data-luma-surface="matte"] .hero::before {
  background-image: linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.017) 1px,transparent 1px);
}
/* Optional window-glass preview: a static inset material behind the existing
   hero. The frame never participates in layout or blurs its text/controls. */
:root[data-theme="dark"][data-luma-surface="window-glass"] .hero::after {
  inset: clamp(12px,2vw,28px);
  border: 1px solid rgba(232,235,237,.16);
  border-radius: 22px;
  background:
    linear-gradient(127deg,rgba(247,248,249,.072),rgba(247,248,249,.014) 37%,rgba(247,248,249,.035) 69%,rgba(247,248,249,.016)),
    linear-gradient(113deg,transparent 16%,rgba(243,245,247,.017) 36%,rgba(243,245,247,.09) 50%,rgba(243,245,247,.025) 59%,transparent 76%),
    radial-gradient(ellipse at 82% 8%,rgba(236,239,241,.085),transparent 59%),
    linear-gradient(135deg,rgba(18,19,20,.88),rgba(9,10,11,.72) 54%,rgba(17,18,19,.8));
  mask-image: none;
  box-shadow:
    inset 0 1px rgba(255,255,255,.18),
    inset 1px 0 rgba(255,255,255,.045),
    inset 0 -1px rgba(255,255,255,.035),
    0 16px 34px rgba(0,0,0,.36),
    0 0 0 1px rgba(0,0,0,.65);
}
@media (max-width: 760px) {
  :root[data-theme="dark"][data-luma-surface="window-glass"] .hero::after {
    inset: 8px;
    border-radius: 16px;
  }
}
:root[data-theme="dark"] .lead { color: #d5d5d5; }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .platform-card,
:root[data-theme="dark"] .pricing-grid .card,
:root[data-theme="dark"] .status { background: #0c0c0c; }
:root[data-theme="dark"] .pricing-grid .card { box-shadow: 0 18px 50px rgba(0,0,0,.2); }
:root[data-theme="dark"] .article-shell p,
:root[data-theme="dark"] .article-shell li { color: #c2c2c2; }
:root[data-theme="dark"] button:hover:not(.luma-shell button):not(.theme-toggle),
:root[data-theme="dark"] .button:hover { background: #d9d9d9; }
:root[data-theme="dark"] button.secondary:hover:not(.luma-shell button),
:root[data-theme="dark"] .button.secondary:hover { background: #1a1a1a; }
:root[data-theme="dark"] button:active:not(.luma-shell button):not(.theme-toggle),
:root[data-theme="dark"] .button:active { background: #c9c9c9; }
:root[data-theme="dark"] button.secondary:active:not(.luma-shell button),
:root[data-theme="dark"] .button.secondary:active { background: #252525; }
:root[data-theme="dark"] button:disabled:not(.luma-shell button) { background: var(--ink); color: var(--white); }
:root[data-theme="dark"] button.danger { color: #111; }
:root[data-theme="dark"] .usage-details,
:root[data-theme="dark"] .progress { background: #202020; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { color: var(--ink); accent-color: var(--green); }
:root[data-theme="dark"] ::placeholder { color: #a0a0a0; opacity: 1; }
:root[data-theme="dark"] .status.success { background: var(--green-soft); border-color: #385c43; color: #b9dfc2; }
:root[data-theme="dark"] .status.error { background: var(--danger-soft); border-color: #744343; color: #f1baba; }
:root[data-theme="dark"] .stage-mark { border-color: #6d542e; color: var(--amber); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.theme-toggle { width: 30px; min-height: 30px; padding: 0; flex: 0 0 30px; border: 0; border-radius: 50%; color: var(--muted); background: transparent; }
.theme-toggle:hover { background: transparent; color: var(--ink); }
:root[data-theme="dark"] button.theme-toggle:hover,
:root[data-theme="dark"] button.theme-toggle:active { background: #161616; color: var(--ink); }
.theme-toggle svg { width: 17px; height: 17px; }
.download-coming-soon { color: inherit; font: inherit; opacity: .72; }
/* Compact platform buttons only on phones; desktop labels/layout stay original.
   The unchanged text remains the accessible name and download routing is intact. */
@media (max-width: 600px) {
  .hero .actions { gap: 10px; }
  .hero .actions .button.secondary { padding-inline: 8px; gap: 0; font-size: 0; }
  .hero .actions a[href="./account.html"]::before { content: "Account"; font-size: 14px; }
  .hero .actions a[href="./pricing.html"]::before { content: "Pricing"; font-size: 14px; }
  .button[data-windows-download], .button[data-macos-coming-soon], .button#macDownload {
    width: 48px; height: 48px; min-height: 48px; flex: 0 0 48px;
    padding: 0; gap: 0; font-size: 0;
  }
  .button[data-windows-download]::before, .button[data-macos-coming-soon]::before, .button#macDownload::before {
    content: ""; width: 21px; height: 21px; background: currentColor;
    mask-size: contain; mask-position: center; mask-repeat: no-repeat;
  }
  .button[data-windows-download]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h9v8H2zM13 3h9v8h-9zM2 13h9v8H2zM13 13h9v8h-9z'/%3E%3C/svg%3E");
  }
  .button[data-macos-coming-soon]::before, .button#macDownload::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 1.2c.2 1.5-.5 2.8-1.3 3.7-.9 1-2.2 1.6-3.5 1.5-.2-1.3.5-2.7 1.3-3.6.9-1 2.3-1.6 3.5-1.6ZM19.6 16.5c-.5 1.1-.8 1.6-1.4 2.6-.9 1.3-2.1 3-3.6 3-1.3 0-1.6-.8-3.3-.8s-2.1.8-3.3.9c-1.5 0-2.6-1.5-3.5-2.8C2 15.6 1.5 10.9 3.2 8.4c1.2-1.8 3-2.8 4.7-2.8 1.4 0 2.3.9 3.4.9 1.1 0 1.8-.9 3.5-.9 1.4 0 2.9.8 4 2-3.5 2-2.9 7.2.8 8.9Z'/%3E%3C/svg%3E");
  }
}
@media (max-width: 360px) {
  .nav-inner { gap: 8px; }
  .nav-links { gap: 8px; }
  .nav-link { font-size: 12px; }
  .brand { font-size: 16px; }
  .hero h1 { font-size: clamp(40px,12.5vw,48px); }
}
.luma-overlay-root { position: fixed; inset: 0; pointer-events: none; z-index: 50; width: 100%; height: 100dvh; }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }