/* ============================================================================
 * AtomIQ website — single stylesheet.
 *
 * The --color-* tokens below are copied VERBATIM from the app's design tokens
 * (frontend/src/styles/tokens.css, ADR-0001) so the site and the product read
 * as one system. Dark is the default palette; light is the same token names
 * re-valued under :root[data-theme="light"], exactly as the app does it.
 *
 * No external requests: fonts are self-hosted, nothing is pulled from a CDN.
 * ==========================================================================*/

/* --- Fraunces (the one font the app actually vendors) --------------------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fraunces-latin-500-normal.woff2") format("woff2");
}

/* --- Tokens: DARK (default) ---------------------------------------------- */
:root {
  --color-bg: #0a0e16;
  --color-surface: #0b0f18;
  --color-surface-2: #0d121b;
  --color-elevated: #11151f;
  --color-sidebar: #141a26;
  --color-modal: #11151f;

  --color-border: #1c212c;
  --color-border-subtle: #151922;

  --color-fg: #e7e9ee;
  --color-muted: #8b93a3;
  --color-subtle: #5a6272;

  --color-primary: #e7e9ee;
  --color-primary-hover: #f3f4f7;
  --color-primary-fg: #0a0e16;

  --color-accent: #6f93c7;
  --color-accent-hover: #83a3d1;
  --color-accent-fg: #0a0e16;

  --color-success: #6fa877;
  --color-warning: #c9a25b;
  --color-danger: #cf7b72;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 14px;

  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;

  --wrap: 1120px;
  --nav-h: 58px;
}

/* --- Tokens: LIGHT -------------------------------------------------------- */
:root[data-theme="light"] {
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-surface-2: #f7f8fa;
  --color-elevated: #eceef1;
  --color-sidebar: #eef0f2;
  --color-modal: #ffffff;

  --color-border: #d8dbe0;
  --color-border-subtle: #e7e9ed;

  --color-fg: #1c2024;
  --color-muted: #5c636b;
  --color-subtle: #878e96;

  --color-primary: #24292f;
  --color-primary-hover: #32383f;
  --color-primary-fg: #ffffff;

  --color-accent: #2f5ea8;
  --color-accent-hover: #24508f;
  --color-accent-fg: #ffffff;

  --color-success: #1a7f37;
  --color-warning: #9a6700;
  --color-danger: #cf222e;
}

/* --- Theme switching -------------------------------------------------------
 * Any element that declares `transition: color` (buttons, the theme toggle,
 * footer links) otherwise STAYS PAINTED IN THE OLD THEME'S COLOUR when
 * data-theme flips: the transition captures the previous computed colour and
 * never settles on the new one, so a light page keeps dark button text. The
 * toggle sets this attribute for one frame while it swaps the palette, which
 * suppresses every transition long enough for the new colours to commit.
 * ---------------------------------------------------------------------------*/
:root[data-theme-switching] *,
:root[data-theme-switching] *::before,
:root[data-theme-switching] *::after {
  transition: none !important;
}

/* --- Base ---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover {
  color: var(--color-accent-hover);
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
}

p {
  margin: 0;
}

code,
pre,
.mono {
  font-family: var(--font-mono);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 11px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}
.btn:active {
  transform: scale(0.985);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-fg);
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-primary-fg);
}

.btn--accent {
  background: var(--color-accent);
  color: var(--color-accent-fg);
}
.btn--accent:hover {
  background: var(--color-accent-hover);
  color: var(--color-accent-fg);
}

.btn--secondary {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-fg);
}
.btn--secondary:hover {
  background: var(--color-elevated);
  color: var(--color-fg);
}

.btn--ghost {
  background: transparent;
  color: var(--color-muted);
}
.btn--ghost:hover {
  background: var(--color-surface-2);
  color: var(--color-fg);
}

.btn--lg {
  padding: 15px 26px;
  font-size: 15px;
  border-radius: 10px;
}

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

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* --- Nav ------------------------------------------------------------------ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--color-surface) 85%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-fg);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand:hover {
  color: var(--color-fg);
}
/* The two logo files are MODE-named, not colour-named (same convention as the
   app's Logo.tsx): logo-dark.png is the WHITE mark shown on dark surfaces,
   logo-light.png is the navy mark shown on light ones.
   Swapped in CSS rather than with <picture media="prefers-color-scheme">,
   because that follows the OS and would ignore the site's own theme toggle —
   leaving a white logo on a white bar. */
.brand__mark img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: contain;
}
.brand__mark .logo-light {
  display: none;
}
:root[data-theme="light"] .brand__mark .logo-dark {
  display: none;
}
:root[data-theme="light"] .brand__mark .logo-light {
  display: block;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 18px;
}
.nav__links a {
  padding: 7px 11px;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--color-muted);
}
.nav__links a:hover {
  background: var(--color-surface-2);
  color: var(--color-fg);
}

.nav__spacer {
  flex: 1;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}
.icon-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-fg);
}
.icon-btn svg {
  width: 17px;
  height: 17px;
}

/* The theme toggle shows the icon of the mode you'd switch TO. */
.icon-btn .icon-sun {
  display: none;
}
:root[data-theme="dark"] .icon-btn .icon-sun,
:root:not([data-theme="light"]) .icon-btn .icon-sun {
  display: block;
}
:root[data-theme="dark"] .icon-btn .icon-moon,
:root:not([data-theme="light"]) .icon-btn .icon-moon {
  display: none;
}
:root[data-theme="light"] .icon-btn .icon-moon {
  display: block;
}

/* --- Section scaffolding -------------------------------------------------- */
.section {
  padding-block: 84px;
}
.section--tight {
  padding-block: 56px;
}
.section--alt {
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.section__head {
  max-width: 640px;
  margin-bottom: 40px;
}
.section__head h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  margin-top: 12px;
}
.section__head p {
  margin-top: 14px;
  color: var(--color-muted);
  font-size: 17px;
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: 76px;
  padding-bottom: 48px;
  overflow: hidden;
}

/* Soft accent bloom behind the hero, like the app's EmptyPanel glow. */
.hero::before {
  content: "";
  position: absolute;
  top: -240px;
  left: 50%;
  width: 900px;
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--color-accent) 18%, transparent),
    transparent 68%
  );
  filter: blur(30px);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  text-align: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-2);
  font-size: 12.5px;
  color: var(--color-muted);
}
.pill strong {
  color: var(--color-fg);
  font-weight: 600;
}
.pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
}

.hero h1 {
  margin-top: 24px;
  font-size: clamp(38px, 6.4vw, 66px);
  letter-spacing: -0.035em;
}
.hero h1 .serif {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.02em;
}

.hero__sub {
  max-width: 640px;
  margin: 22px auto 0;
  font-size: clamp(16px, 2vw, 19px);
  color: var(--color-muted);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.hero__meta {
  margin-top: 16px;
  font-size: 13px;
  color: var(--color-subtle);
}
.hero__meta .sep {
  opacity: 0.5;
  margin-inline: 8px;
}

/* --- Product screenshots -------------------------------------------------- */
/* Real captures of the app, taken against a seeded demo database. The image
   itself carries the app's own chrome, so the frame here is only a hairline
   border + lift shadow. `aspect-ratio` reserves the box before the file lands,
   so nothing on the page jumps while it loads. */
.shot {
  position: relative;
  margin-top: 52px;
}

.shot-frame {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface-2);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--color-fg) 6%, transparent) inset,
    0 30px 70px -30px rgba(0, 0, 0, 0.7);
}

/* Hero + connect are full-window captures, so they keep the app's 16:10 shape. */
.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 900;
  object-fit: cover;
  object-position: top left;
}

/* Feature-row images are CROPPED to the pane that matters (the full window is
   unreadable at half-column width), so their aspect varies — let the intrinsic
   width/height attributes reserve the box instead of forcing a ratio. */
.panel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.window {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-bg);
  overflow: hidden;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--color-fg) 6%, transparent) inset,
    0 30px 70px -30px rgba(0, 0, 0, 0.7);
}

.window__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding-inline: 13px;
  background: var(--color-sidebar);
  border-bottom: 1px solid var(--color-border);
}
.window__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
}
.window__title {
  margin-left: 8px;
  font-size: 12px;
  color: var(--color-subtle);
}

.window__body {
  display: grid;
  grid-template-columns: 46px 210px 1fr;
  min-height: 430px;
}

/* Nav rail */
.mock-rail {
  background: var(--color-sidebar);
  border-right: 1px solid var(--color-border);
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.mock-rail span {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-fg) 6%, transparent);
}
.mock-rail span.is-active {
  background: color-mix(in srgb, var(--color-accent) 26%, transparent);
}

/* Explorer */
.mock-explorer {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 12px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-muted);
  overflow: hidden;
}
.mock-explorer .db {
  color: var(--color-accent);
  margin-bottom: 8px;
}
.mock-explorer ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
}
.mock-explorer li {
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-explorer li.is-active {
  background: var(--color-elevated);
  color: var(--color-fg);
}

/* Editor + results */
.mock-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mock-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.mock-tab {
  padding: 5px 12px;
  border-radius: 6px 6px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-subtle);
}
.mock-tab.is-active {
  background: var(--color-surface-2);
  color: var(--color-fg);
}

.mock-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  white-space: nowrap;
}
.chip--run {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border-color: transparent;
  font-weight: 600;
}
.chip--warn {
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 40%, transparent);
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
}
.chip--danger {
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

.mock-code {
  margin: 0;
  padding: 14px 16px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--color-fg);
  background: var(--color-bg);
  overflow-x: auto;
}
.tok-kw {
  color: var(--color-accent);
}
.tok-str {
  color: var(--color-warning);
}
.tok-num {
  color: #c9a85f;
}
.tok-com {
  color: var(--color-subtle);
  font-style: italic;
}
.tok-fn {
  color: #a591c4;
}

.mock-grid {
  border-top: 1px solid var(--color-border);
  overflow-x: auto;
  flex: 1;
}
.mock-grid table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.mock-grid th {
  text-align: left;
  font-weight: 500;
  color: var(--color-fg);
  background: var(--color-surface-2);
  padding: 6px 12px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.mock-grid th small {
  color: var(--color-subtle);
  margin-left: 6px;
  font-weight: 400;
}
.mock-grid td {
  padding: 5px 12px;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border-subtle);
  white-space: nowrap;
}
.mock-grid .cell-key {
  display: inline-flex;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  background: var(--color-elevated);
  color: var(--color-accent);
}
.mock-grid .cell-mask {
  color: var(--color-subtle);
  letter-spacing: 0.12em;
}
.mock-grid .cell-null {
  color: var(--color-subtle);
  font-style: italic;
}

.mock-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-subtle);
}

/* --- Engine strip --------------------------------------------------------- */
.engines {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 48px;
}
.engine {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--color-muted);
  font-size: 14.5px;
  font-weight: 500;
}
/* The source logos have very different aspect ratios (Oracle and MySQL are
   wide, Postgres is square), so size by HEIGHT and let width follow — a fixed
   square box shrinks the wide ones to nothing. */
.engine img {
  height: 30px;
  width: auto;
  max-width: 104px;
  object-fit: contain;
}

.strip-label {
  text-align: center;
  margin-bottom: 26px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-subtle);
}

/* --- Spotlight (the flagship feature gets a section of its own) ----------- */
.spotlight {
  background:
    radial-gradient(
      ellipse 900px 380px at 50% 0%,
      color-mix(in srgb, var(--color-accent) 13%, transparent),
      transparent 72%
    ),
    var(--color-surface);
  border-block: 1px solid var(--color-border);
}

.spotlight__head {
  max-width: 720px;
  margin: 0 auto 14px;
  text-align: center;
}
.spotlight__head h2 {
  margin-top: 14px;
  font-size: clamp(28px, 4vw, 42px);
}
.spotlight__head p {
  margin-top: 16px;
  font-size: 17px;
  color: var(--color-muted);
}

/* Three short proof points sitting between the headline and the screenshot. */
.spotlight__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px 32px;
  max-width: 940px;
  margin: 34px auto 40px;
}
.spotlight__point h3 {
  font-size: 15px;
  margin-bottom: 6px;
}
.spotlight__point p {
  font-size: 14px;
  color: var(--color-muted);
}
.spotlight__point .n {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 9px;
}

/* --- Feature rows --------------------------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.feature + .feature {
  margin-top: 88px;
}
.feature--flip .feature__text {
  order: 2;
}

.feature__text h3 {
  font-size: clamp(21px, 2.6vw, 27px);
  margin-top: 12px;
}
.feature__text > p {
  margin-top: 14px;
  color: var(--color-muted);
}

.ticks {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  color: var(--color-muted);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}
.ticks li b {
  color: var(--color-fg);
  font-weight: 600;
}

/* A framed panel used as the feature-side visual. Swap for a real screenshot:
   replace the .panel block with <img src="assets/img/shot-<name>.png" alt="…">. */
.panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.6);
}
.panel__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-subtle);
}
.panel__body {
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.85;
  color: var(--color-muted);
  overflow-x: auto;
}
.panel__body .row {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}
.panel__body .add {
  color: var(--color-success);
}
.panel__body .del {
  color: var(--color-danger);
}
.panel__body .hd {
  color: var(--color-fg);
}

/* Notebook cell mock */
.nb-cell {
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 10px 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.nb-cell:last-child {
  border-bottom: 0;
}
.nb-prompt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-subtle);
  flex: none;
  padding-top: 2px;
}
.nb-sql {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-fg);
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
}
.nb-out {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--color-muted);
}

/* ER graph mock */
.er {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}
.er__node {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  overflow: hidden;
}
.er__node header {
  padding: 5px 10px;
  background: var(--color-elevated);
  border-bottom: 1px solid var(--color-border);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-fg);
}
.er__node ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.er__node li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border-subtle);
}
.er__node li:last-child {
  border-bottom: 0;
}
.er__node .k {
  color: var(--color-accent);
}
.er__node .f {
  color: var(--color-warning);
}

/* --- Safety band ---------------------------------------------------------- */
.safety {
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
}

/* minmax is tuned so a 1120px wrap lands on THREE columns — six cards then fill
   two clean rows instead of leaving a two-card orphan row under a row of four. */
.guard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.guard {
  padding: 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.guard h3 {
  font-size: 16px;
  margin-bottom: 8px;
}
.guard p {
  font-size: 14px;
  color: var(--color-muted);
}
.guard__tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.guard__tag--danger {
  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
  color: var(--color-danger);
}
.guard__tag--warn {
  background: color-mix(in srgb, var(--color-warning) 14%, transparent);
  color: var(--color-warning);
}
.guard__tag--ok {
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
  color: var(--color-success);
}
.guard__tag--info {
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent);
}

.callout {
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-muted);
}
.callout b {
  color: var(--color-danger);
}

/* --- Under the hood ------------------------------------------------------- */
/* Same reasoning as .guard-grid — six specs, two rows of three. */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px 32px;
}
.spec h3 {
  font-size: 15px;
  margin-bottom: 7px;
}
.spec p {
  font-size: 14px;
  color: var(--color-muted);
}
.spec .k {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}

/* --- Roadmap -------------------------------------------------------------- */
.roadmap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.road {
  padding: 20px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}
.road h3 {
  font-size: 15px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.road p {
  font-size: 14px;
  color: var(--color-muted);
}
.tag-soon {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-elevated);
  color: var(--color-subtle);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* --- Download band -------------------------------------------------------- */
.cta {
  text-align: center;
  padding-block: 92px;
  border-top: 1px solid var(--color-border);
  background:
    radial-gradient(
      ellipse 800px 320px at 50% 0%,
      color-mix(in srgb, var(--color-accent) 12%, transparent),
      transparent 70%
    ),
    var(--color-bg);
}
.cta h2 {
  font-size: clamp(27px, 4vw, 40px);
}
.cta p {
  margin: 16px auto 0;
  max-width: 520px;
  color: var(--color-muted);
}
.cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}

/* --- Footer ----------------------------------------------------------------
 * Built around a signature rather than a link dump. Three things carry it:
 *
 *   1. an oversized wordmark bleeding off the bottom edge, gradient-clipped so
 *      it fades into the page — the serif "IQ" is the same Fraunces italic the
 *      hero uses for "every", so the page opens and closes on the same note;
 *   2. an asymmetric grid — one wide identity column against three tight link
 *      columns, instead of four columns of equal weight;
 *   3. link rows that reveal an accent arrow on hover, and column headings
 *      that trail off into a fading rule.
 *
 * Everything reuses existing tokens/components (.brand, .pill, .dot, .badge)
 * so it reads as part of the same system.
 * ---------------------------------------------------------------------------*/
.footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding-top: 76px;
}

/* Accent line sweeping the top edge. */
.footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--color-accent) 70%, transparent),
    transparent
  );
  background-size: 200% 100%;
  animation: footer-scan 9s linear infinite;
}
@keyframes footer-scan {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Bloom + dot-grid, masked away before it reaches the wordmark. */
.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(
      ellipse 700px 260px at 10% 0%,
      color-mix(in srgb, var(--color-accent) 10%, transparent),
      transparent 70%
    ),
    radial-gradient(circle, var(--color-border-subtle) 1px, transparent 1px);
  background-size:
    auto,
    28px 28px;
  mask-image: linear-gradient(to bottom, black, transparent 62%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 62%);
  opacity: 0.7;
}

.footer__inner {
  position: relative;
  z-index: 1;
}

/* One wide identity column, three tight link columns. */
.footer__grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.7fr) repeat(3, minmax(120px, 1fr));
  gap: 44px 30px;
  padding-bottom: 42px;
}

.footer__brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.footer__tagline {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 270px;
}

/* The four engine marks: full colour at rest, and each one grows under the
   cursor. They used to be greyed to 45% and only lit up when you hovered the
   whole group — which hid the one bit of colour on the page behind an
   interaction most people never performed. */
.footer__engines {
  display: flex;
  align-items: center;
  /* Sits well below the tagline — this is the footer's only colour, so it gets
     air rather than being tucked under the paragraph. Adds to the brand
     column's own 16px flex gap. */
  margin-top: 30px;
  gap: 30px;
}
.footer__engines img {
  height: 38px;
  width: auto;
  /* The marks have very different aspect ratios — Oracle and MySQL are wide
     wordmarks, Postgres is nearly square — so cap the width rather than
     forcing a box. */
  max-width: 130px;
  object-fit: contain;
  /* Doubling overruns the gap, so the hovered mark is lifted above its
     neighbours instead of colliding with them. */
  position: relative;
  z-index: 0;
  transform-origin: center;
  transition: transform 0.28s ease;
}
.footer__engines img:hover {
  transform: scale(2);
  z-index: 1;
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.footer__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-subtle);
}
.footer__heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--color-border), transparent);
}

.footer__col a {
  position: relative;
  display: block;
  padding-left: 0;
  font-size: 13.5px;
  color: var(--color-muted);
  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
}
.footer__col a::before {
  content: "→";
  position: absolute;
  left: 0;
  font-size: 11px;
  color: var(--color-accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.footer__col a:hover {
  color: var(--color-fg);
  padding-left: 16px;
}
.footer__col a:hover::before {
  opacity: 1;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 12.5px;
  color: var(--color-subtle);
}
.footer__copy {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.footer__totop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color 0.2s ease;
}
.footer__totop svg {
  width: 13px;
  height: 13px;
  transition: transform 0.2s ease;
}
.footer__totop:hover {
  color: var(--color-accent);
}
.footer__totop:hover svg {
  transform: translateY(-3px);
}

/* The signature: oversized, gradient-clipped, and cropped by the footer's own
   bottom edge so it bleeds off the page instead of sitting on it. */
.footer__wordmark {
  position: relative;
  z-index: 1;
  margin-top: 34px;
  margin-bottom: -0.235em;
  text-align: center;
  font-size: clamp(66px, 18.5vw, 290px);
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: -0.055em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-fg) 13%, transparent),
    transparent 78%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer__wordmark .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
}

@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
  }
  .footer__brand-col {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .footer {
    padding-top: 54px;
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 34px 24px;
  }
}

/* ============================================================================
 * download.html
 * ==========================================================================*/
.dl-head {
  padding-top: 62px;
  padding-bottom: 34px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.dl-head h1 {
  font-size: clamp(30px, 4.6vw, 44px);
  margin-top: 14px;
}
.dl-head p {
  margin-top: 14px;
  color: var(--color-muted);
}

.os-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}
.os-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  /* The growth slightly overruns the 8px gap, so the hovered tab is lifted
     above its neighbours rather than growing underneath them. */
  position: relative;
  z-index: 0;
  transform-origin: center;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.22s ease;
}
/* Hover inverts the tab against the page: dark pill with light text in light
   mode, light pill with dark text in dark mode. That is exactly what the
   --color-primary / --color-primary-fg pair already means, so it flips with the
   theme for free instead of needing a [data-theme] override. */
.os-tab:hover {
  background: var(--color-primary);
  border-color: transparent;
  color: var(--color-primary-fg);
  transform: scale(1.12);
  z-index: 2;
}
.os-tab[aria-selected="true"] {
  background: var(--color-elevated);
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  color: var(--color-fg);
}
/* Selected still inverts on hover — otherwise the tab you are already on is the
   one control that stops responding. */
.os-tab[aria-selected="true"]:hover {
  background: var(--color-primary);
  border-color: transparent;
  color: var(--color-primary-fg);
}
.os-tab svg {
  width: 16px;
  height: 16px;
}
.os-tab .you {
  font-size: 10.5px;
  font-family: var(--font-mono);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Accent-on-inverted has almost no contrast, so the badge rides the tab's own
   text colour once the pill flips. */
.os-tab:hover .you {
  color: inherit;
  opacity: 0.65;
}

.os-panel[hidden] {
  display: none;
}

.dl-list {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.dl-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.dl-row__info {
  flex: 1 1 260px;
  min-width: 0;
}
.dl-row h3 {
  font-size: 15.5px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dl-row p {
  margin-top: 5px;
  font-size: 13.5px;
  color: var(--color-muted);
}
.dl-row .file {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-subtle);
}

.badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--color-elevated);
  color: var(--color-muted);
}
.badge--ok {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
}
.badge--rec {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--color-accent);
}

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 42px;
  color: var(--color-muted);
  font-size: 14.5px;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-accent);
}
.steps li b {
  color: var(--color-fg);
  font-weight: 600;
}

pre.code {
  margin: 10px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-fg);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
}

.note {
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  font-size: 14px;
  color: var(--color-muted);
}
.note--warn {
  border-left-color: var(--color-warning);
}
.note b {
  color: var(--color-fg);
}
.note + .note {
  margin-top: 12px;
}

.reqs {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 8px;
}
.reqs th,
.reqs td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: top;
}
.reqs th {
  color: var(--color-fg);
  font-weight: 600;
  width: 190px;
  white-space: nowrap;
}
.reqs td {
  color: var(--color-muted);
}
.reqs tr:last-child th,
.reqs tr:last-child td {
  border-bottom: 0;
}
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.faq {
  display: grid;
  gap: 12px;
}
details.qa {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: 16px 20px;
}
details.qa summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  list-style: none;
}
details.qa summary::-webkit-details-marker {
  display: none;
}
details.qa summary::after {
  content: "+";
  float: right;
  color: var(--color-subtle);
  font-weight: 400;
}
details.qa[open] summary::after {
  content: "−";
}
details.qa p {
  margin-top: 12px;
  color: var(--color-muted);
  font-size: 14.5px;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .feature {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .feature--flip .feature__text {
    order: 0;
  }
  .window__body {
    grid-template-columns: 40px 1fr;
  }
  .mock-explorer {
    display: none;
  }
}

@media (max-width: 720px) {
  .section {
    padding-block: 60px;
  }
  .nav__links {
    display: none;
  }
  .hero {
    padding-top: 52px;
  }
  .hero__cta .btn {
    width: 100%;
  }
  .er {
    grid-template-columns: 1fr;
  }
  .footer__inner {
    justify-content: flex-start;
  }
}

@media (max-width: 420px) {
  .wrap,
  .nav__inner {
    padding-inline: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Print: nobody prints a landing page, but keep it legible if they do. */
@media print {
  .nav,
  .cta,
  .hero::before {
    display: none;
  }
}

/* ============================================================================
 * Interactive sections
 *
 * Deliberately four different shapes, so the page never repeats itself:
 *   - features       an editorial index, not a card grid
 *   - safety         a guardrail terminal you can run statements through
 *   - under the hood an architecture diagram of the actual app bundle
 *   - roadmap        a changelog-style rail, solid behind you, dashed ahead
 * ==========================================================================*/

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

/* Screenshots lift slightly, so the big visuals feel alive rather than pasted. */
.feature .panel,
.shot-frame {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}
.feature .panel:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.75);
}

/* --- Features: editorial index -------------------------------------------
 * Typography and rules rather than boxes. The accent bar wiping in from the
 * left is the only chrome a row gets.
 * -------------------------------------------------------------------------*/
.idx {
  border-top: 1px solid var(--color-border);
}
.idx__row {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(170px, 250px) 1fr;
  gap: 26px;
  align-items: baseline;
  padding: 24px 18px 24px 0;
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.25s ease;
}
.idx__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
}
.idx__row:hover {
  background: var(--color-surface-2);
}
.idx__row:hover::before {
  transform: scaleY(1);
}
.idx__n {
  padding-left: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-subtle);
  transition: color 0.25s ease;
}
.idx__row:hover .idx__n {
  color: var(--color-accent);
}
.idx__t {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-fg);
}
.idx__d {
  font-size: 14px;
  color: var(--color-muted);
}

@media (max-width: 780px) {
  .idx__row {
    grid-template-columns: 44px 1fr;
    gap: 8px 14px;
    padding: 20px 14px 20px 0;
  }
  .idx__n {
    padding-left: 14px;
  }
  .idx__d {
    grid-column: 2;
  }
}

/* --- Safety: guardrail terminal ------------------------------------------- */
/* The statements and the result panel are siblings in ONE grid, rather than the
   panel living in its own column wrapper. That is what lets the phone layout
   re-order the panel to sit directly beneath whichever statement you tapped,
   instead of stranding it below all six. */
.gp {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 8px 20px;
  align-content: start;
}
.gp__item {
  grid-column: 1;
}
.gp__screen {
  grid-column: 2;
  grid-row: 1 / span var(--n, 6);
  align-self: start;
}
.gp__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}
.gp__item:hover {
  color: var(--color-fg);
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  transform: translateX(3px);
}
.gp__item[aria-expanded="true"] {
  color: var(--color-fg);
  background: var(--color-surface-2);
  border-color: var(--color-accent);
}
/* Keeps "Type to confirm" on one line instead of wrapping to three. */
.gp__item .guard__tag {
  flex: none;
  margin: 0;
  white-space: nowrap;
}
.gp__sql {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gp__screen {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  overflow: hidden;
}
.gp__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  background: var(--color-sidebar);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-subtle);
}
.gp__env {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.06em;
  background: color-mix(in srgb, var(--color-danger) 16%, transparent);
  color: var(--color-danger);
}
.gp__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  animation: panel-in 0.26s ease both;
}
.gp__code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-fg);
  /* The CTE example is one long token-free string; `anywhere` is what actually
     lets it wrap on a phone rather than pushing the panel sideways. */
  overflow-wrap: anywhere;
}
.gp__code b {
  color: var(--color-accent);
  font-weight: 600;
}
.gp__verdict {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
}
.gp__verdict svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 1px;
}
.gp__verdict--danger {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-danger) 35%, transparent);
}
.gp__verdict--warn {
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
}
.gp__verdict--ok {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent);
}
.gp__verdict--info {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
}
.gp__note {
  font-size: 13.5px;
  color: var(--color-muted);
}

@media (max-width: 860px) {
  /* minmax(0,1fr), not 1fr — plain `1fr` keeps the auto minimum and the column
     would still be sized by the widest SQL string. */
  .gp {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Drop the explicit column/row placement so both flow in one column, and let
     `order` (set inline from the active index) drop the panel in right after
     the statement that was tapped — the answer is on screen without scrolling. */
  .gp__item,
  .gp__screen {
    grid-column: 1;
    grid-row: auto;
  }
  .gp__screen {
    margin-block: 2px 6px;
  }
}

/* On a phone the tag and the statement cannot share a line legibly, so the
   statement moves under its label and gets the full width to ellipsise in. */
@media (max-width: 540px) {
  .gp__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 12px;
  }
  .gp__sql {
    width: 100%;
  }
  .gp__body {
    padding: 15px;
  }
  .gp__verdict {
    font-size: 12.5px;
  }
}

/* --- Roadmap: changelog rail ----------------------------------------------
 * Vertical by design, so it needs no separate mobile layout. The rail is
 * solid through what exists and dashed through what doesn't — the future
 * literally looks provisional.
 * -------------------------------------------------------------------------*/
.rm {
  margin-top: 8px;
}
.rm__item {
  position: relative;
  padding-left: 46px;
  padding-bottom: 34px;
}
.rm__item:last-child {
  padding-bottom: 0;
}
/* Connector down to the next entry. */
.rm__item::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 0;
  border-left: 2px solid var(--color-border);
}
.rm__item:last-child::before {
  display: none;
}
.rm__item[data-line="dashed"]::before {
  border-left-style: dashed;
}

.rm__node {
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease;
}
.rm__node i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border);
}
.rm__item[data-state="shipped"] .rm__node {
  border-color: var(--color-success);
}
.rm__item[data-state="shipped"] .rm__node i {
  background: var(--color-success);
}
.rm__item[data-state="building"] .rm__node {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.rm__item[data-state="building"] .rm__node i {
  background: var(--color-accent);
}
/* Only the in-flight entry pulses — it is the one thing actually moving. */
.rm__item[data-state="building"] .rm__node::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  animation: rm-ping 2.6s ease-out infinite;
}
@keyframes rm-ping {
  0% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.45);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.rm__item:hover .rm__node {
  transform: scale(1.12);
  border-color: var(--color-accent);
}

.rm__content {
  transition: transform 0.25s ease;
}
.rm__item:hover .rm__content {
  transform: translateX(4px);
}
.rm__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.rm__ver {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-subtle);
}
.rm__chip {
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rm__chip--shipped {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
}
.rm__chip--building {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}
.rm__chip--planned {
  color: var(--color-subtle);
  background: var(--color-elevated);
}
.rm__t {
  font-size: 17px;
  margin-bottom: 7px;
}
.rm__b {
  max-width: 64ch;
  font-size: 14.5px;
  color: var(--color-muted);
}

@media (max-width: 560px) {
  .rm__item {
    padding-left: 38px;
    padding-bottom: 28px;
  }
}

/* ============================================================================
   Download page — rebuild
   Commands instead of prose, and the first-launch dialog drawn rather than
   described. Every grid child below carries min-width:0 and every single-column
   media query uses minmax(0, 1fr) — bare 1fr is what overflowed mobile before.
   ========================================================================= */

/* --- Hero: one button for the detected OS --------------------------------- */
.dl-primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}
.dl-primary__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-subtle);
}
.dl-allfiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin-top: 18px;
  font-size: 13px;
}

/* --- Install methods ------------------------------------------------------ */
.dl-methods {
  display: grid;
  gap: 16px;
  margin-top: 8px;
}
.dl-method {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
/* The recommended route gets the accent edge rather than a bigger box. */
.dl-method--primary {
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  background: var(--color-surface-2);
}
.dl-method__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.dl-method__head h3 {
  font-size: 17px;
}
.dl-method > p {
  font-size: 14.5px;
  color: var(--color-muted);
  margin-bottom: 16px;
  max-width: 66ch;
}
.dl-method .btn {
  margin-top: 2px;
}

.dl-text {
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.65;
}
.dl-aside {
  margin-top: 14px;
  font-size: 13px;
  color: var(--color-subtle);
  max-width: 68ch;
}
.dl-aside code {
  font-size: 12px;
}

/* --- Copyable command block ----------------------------------------------- */
.cmd {
  margin-top: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  overflow: hidden;
}
.cmd__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-elevated);
}
.cmd__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-subtle);
}
.cmd__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease;
}
.cmd__copy svg {
  width: 13px;
  height: 13px;
}
.cmd__copy:hover {
  color: var(--color-fg);
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
}
.cmd__copy[data-copied] {
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 45%, transparent);
}
.cmd__body {
  display: block;
  margin: 0;
  padding: 14px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--color-fg);
}
.cmd__line {
  display: block;
  white-space: pre;
}
.cmd__line[data-comment] {
  color: var(--color-subtle);
}
.cmd__affirm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
  color: var(--color-success);
  font-size: 13px;
}
.cmd__affirm svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* --- First-launch dialog mock ---------------------------------------------
   Deliberately looks like the real thing: the destructive button sits in the
   highlighted default position exactly as macOS ships it, with a flag saying
   what it does. Users press that button; a paragraph telling them not to has
   already been shown to lose. */
.dlg {
  max-width: 380px;
  margin: 0 auto;
  padding: 26px 22px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-modal);
  text-align: center;
  box-shadow: 0 22px 60px -28px rgba(0, 0, 0, 0.85);
}
.dlg__icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  color: var(--color-warning);
}
.dlg__icon svg {
  width: 100%;
  height: 100%;
}
.dlg__title {
  font-size: 15px;
  font-weight: 600;
}
.dlg__body {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-muted);
}
.dlg__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}
/* Button and caption are a stack so the caption stays inside the dialog's
   padding. An earlier version positioned it absolutely and it collided with the
   panel border. */
.dlg__action {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.dlg__btn {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-elevated);
  color: var(--color-fg);
  font-size: 13.5px;
  text-align: center;
}
/* Both dialogs now draw their destructive choice as a plain neutral button, the
   way the Windows mock always did. A filled red button read as an alert box
   rather than an OS dialog, and pulled the eye to the one thing nobody should
   click. The warning is carried by the caption underneath instead. */
.dlg__btn--go {
  border-color: color-mix(in srgb, var(--color-success) 55%, transparent);
}
/* Sentence case, not uppercase. These are two short sentences of advice, and
   set in caps they read as system chrome — the one thing they must not look
   like, since the whole point is that they are the site talking, not the OS. */
.dlg__flag {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.dlg__flag--go {
  color: var(--color-success);
}
.dlg__flag--danger {
  color: var(--color-danger);
}
.dlg--win {
  text-align: left;
  max-width: 420px;
}
.dlg__title--win {
  font-size: 17px;
}
.dlg--win .dlg__body {
  margin-top: 10px;
}

/* Holds the dialog in the right-hand column of the .feature grid. */
.dl-launch {
  margin-top: 4px;
  align-items: start;
}
.dl-launch__visual {
  display: flex;
  justify-content: center;
  min-width: 0;
  position: sticky;
  top: calc(var(--nav-h) + 28px);
}
.dl-launch .steps {
  max-width: 60ch;
}

/* Sub-headings inside the download page. `.section__head` gives them the same
   type scale as every other heading on the site; this only adds the rhythm
   between stacked blocks. */
.dl-sub {
  margin-top: 72px;
  margin-bottom: 28px;
}
.dl-note {
  max-width: 68ch;
}

/* --- Comparison matrix ----------------------------------------------------- */
.dl-matrix th[scope="row"] {
  white-space: normal;
}
.dl-matrix__name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 600;
  color: var(--color-fg);
}
.dl-matrix__file {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--color-subtle);
}
.dl-matrix td .btn {
  white-space: nowrap;
}
.dl-matrix__soon th,
.dl-matrix__soon td {
  color: var(--color-subtle);
}
.dl-matrix__soon .btn {
  opacity: 0.55;
  pointer-events: none;
}

/* --- Checksums ------------------------------------------------------------- */
.sums {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}
.sums__row {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.sums__row dt {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-fg);
}
.sums__row dd {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-subtle);
  word-break: break-all;
}

/* The dialog can't stick once it stacks under the steps. */
@media (max-width: 900px) {
  .dl-launch__visual {
    position: static;
    margin-top: 8px;
  }
  .dl-sub {
    margin-top: 56px;
  }
}

@media (max-width: 620px) {
  .dl-method {
    padding: 18px 16px;
  }
  .dlg__actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}