/* ===== Media Inspector — website styles ===== */

:root {
  --bg: #0a0c10;
  --bg-raise: #10141b;
  --bg-card: #12161e;
  --line: rgba(255, 255, 255, 0.08);
  --text: #e8eaee;
  --muted: #9aa3b2;
  --accent: #0a84ff;
  --accent-soft: #64d2ff;
  --radius: 14px;
  --nav-h: 64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}

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

.container { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.container.narrow { width: min(680px, calc(100% - 48px)); text-align: center; }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
h2 { font-size: clamp(28px, 4vw, 40px); }
h3 { font-size: 19px; letter-spacing: -0.01em; }

.grad {
  background: linear-gradient(92deg, var(--accent) 10%, var(--accent-soft) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kicker {
  color: var(--accent-soft);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  font-family: inherit; /* <button class="btn"> doesn't inherit it by default */
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  cursor: pointer;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(180deg, #2b95ff, #0a84ff);
  color: #fff;
  box-shadow: 0 6px 20px rgba(10, 132, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover { box-shadow: 0 8px 28px rgba(10, 132, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.btn-ghost {
  color: var(--text);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.07); }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn[aria-disabled="true"] { opacity: 0.85; cursor: default; }

.text-link { color: var(--accent-soft); text-decoration: none; font-weight: 600; }
.text-link:hover { text-decoration: underline; }

/* ===== Nav ===== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: rgba(10, 12, 16, 0.72);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand img { border-radius: 8px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a {
  line-height: 1;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--text); }

/* ----- Nav dropdowns -----
   Grouping keeps the bar at five top-level items; a new section joins a group's
   menu instead of the row. Hover opens on desktop (JS sets .open, so keyboard
   and touch get the same behaviour through the button). */
/* Flex (not block): as a block the group forms a line box from the inherited
   1.6 line-height and baseline-aligns the inline-flex button inside it, which
   left the group labels ~1.4px below the plain links in the same row. */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  /* AFTER `font: inherit` — the shorthand resets line-height, so declaring it
     earlier let the button's box grow to 22.4px and sit ~1.6px below the plain
     links in the same row. */
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease;
}
.nav-group-button:hover,
.nav-group.open .nav-group-button { color: var(--text); }
.nav-chevron { transition: transform 0.18s ease; }
.nav-group.open .nav-chevron { transform: rotate(180deg); }
.nav-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 210px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(14, 17, 23, 0.98);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
/* A transparent bridge over the gap so the pointer can travel button -> menu. */
.nav-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
/* Visibility is driven ONLY by .open (JS). A :focus-within rule here fights the
   toggle: clicking the open button removes .open, but the button still has focus,
   so the menu stays painted while the chevron says it closed. Keyboard users get
   the same behaviour via the focusin handler in Nav.svelte. */
.nav-group.open .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-menu a {
  padding: 9px 12px;
  border-radius: 9px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-menu a:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .nav-menu, .nav-chevron { transition: none; }
}
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-burger { display: none; }

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + 72px) 0 0;
  text-align: center;
}
/* Fixed-size gradient painted inside a full-width box: never wider than the
   viewport, so mobile Safari doesn't zoom out to fit a 1200px element. */
.hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 620px 440px at 50% 12%, rgba(10, 132, 255, 0.22), transparent 70%);
  pointer-events: none;
}
.hero-copy { position: relative; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-soft);
  border: 1px solid rgba(100, 210, 255, 0.25);
  background: rgba(10, 132, 255, 0.08);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 26px;
}
.hero h1 { font-size: clamp(42px, 7vw, 76px); margin-bottom: 22px; }
.lede {
  color: var(--muted);
  font-size: clamp(17px, 2vw, 20px);
  max-width: 640px;
  margin: 0 auto 32px;
}
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-row.center { justify-content: center; }
.fineprint { color: var(--muted); font-size: 13px; margin-top: 18px; }
.fineprint a { color: var(--muted); }
.fineprint a:hover { color: var(--text); }
.credits { margin-top: 26px; }

.hero-shot { margin-top: 40px; position: relative; }
.hero-shot img { margin: 0 auto; filter: drop-shadow(0 30px 80px rgba(10, 132, 255, 0.15)); }

/* ===== Marquee ===== */
.marquee {
  border-block: 1px solid var(--line);
  background: var(--bg-raise);
  overflow: hidden;
  padding: 18px 0;
  margin-top: 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: scroll 42s linear infinite; }
.marquee-group { display: flex; gap: 12px; padding-right: 12px; }
.marquee-group span {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.02);
}
@keyframes scroll { to { transform: translateX(-50%); } }

/* ===== Sections ===== */
.section { padding: 110px 0; position: relative; }
/* Hairline divider between sections, fading toward the edges */
.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100% - 48px));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14) 50%, transparent);
}
/* No divider where a full-width border already sits */
#features::before,
.download::before { content: none; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.section-head p { color: var(--muted); margin-top: 12px; font-size: 18px; }

/* Features grid */
.grid.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.card:hover { transform: translateY(-3px); border-color: rgba(10, 132, 255, 0.35); }
.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(10, 132, 255, 0.22), rgba(10, 132, 255, 0.08));
  border: 1px solid rgba(10, 132, 255, 0.3);
  margin-bottom: 18px;
}
.card-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15px; }

/* Compact feature cards: the card grids outgrew the airy layout (15 evergreen
   features, 8 What's New cards), so the icon sits inline with the title and
   everything tightens — roughly half the vertical footprint. */
.grid.features.compact { gap: 14px; }
/* Long card grids show their first three cards on phones, the rest behind a toggle
   (see the 680 px block); wider screens get every card and no toggle. */
.grid-toggle { display: none; margin: 22px 0 0; text-align: center; }
.compact .card {
  padding: 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 13px;
  align-items: center;
  align-content: start;
}
.compact .card-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  margin-bottom: 0;
}
.compact .card-icon svg { width: 17px; height: 17px; }
.compact .card h3 { margin-bottom: 0; font-size: 16px; }
.compact .card p {
  grid-column: 1 / -1;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
}

/* Showcase splits */
.showcase { padding: 90px 0; }
.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: center;
}
.split.flip .split-copy { order: 2; }
.split.flip .split-shot { order: 1; }
.split-copy h2 { margin-bottom: 16px; }
.split-copy > p { color: var(--muted); }
.checks { list-style: none; margin-top: 22px; }
.checks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color: var(--text);
  font-size: 15.5px;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(10, 132, 255, 0.15) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2364d2ff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4 10-10"/></svg>') center / 10px no-repeat;
  border: 1px solid rgba(100, 210, 255, 0.3);
}
.split-shot img {
  border-radius: 4px;
  cursor: zoom-in;
}
/* Shortcuts payoff banner: the folder-in / reports-out screenshot below the split */
.shortcut-payoff {
  margin-top: 64px;
  text-align: center;
}
.shortcut-payoff img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  cursor: zoom-in;
}
.shortcut-caption {
  margin: 20px auto 0;
  max-width: 640px;
  color: var(--muted);
  font-size: 15px;
}

/* Quick Look demo: a looping screen recording, framed like a floating window.
   pointer-events:none suppresses the native video context menu (Download/Loop/…) —
   the clip is decorative and has no controls, so nothing interactive is lost. */
.split-shot video.ql-demo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
/* Narrated feature demos: same window framing as .ql-demo, but interactive —
   click-to-play with native controls and sound (these clips carry a voiceover). */
.split-shot video.feature-demo,
video.feature-demo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
/* Big centered play affordance over the poster; the whole surface is the button.
   Native controls take over once playback starts (FeatureVideo.svelte). */
.feature-video {
  position: relative;
}
.feature-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.15);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
}
.feature-video-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(12, 14, 20, 0.65);
  border: 1px solid var(--line);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.15s ease, background 0.15s ease;
}
.feature-video-glyph svg {
  margin-left: 4px; /* optically center the triangle */
}
.feature-video-play:hover .feature-video-glyph {
  transform: scale(1.07);
  background: rgba(12, 14, 20, 0.8);
}
.feature-video-play:focus-visible {
  outline: 2px solid var(--accent, #4c8dff);
  outline-offset: 2px;
}

/* Tabs */
.tabs {
  display: inline-flex;
  gap: 4px;
  margin-top: 28px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
}
.tab {
  flex: none;
  white-space: nowrap;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab.active { background: var(--accent); color: #fff; }

/* Archival examples */
.examples { margin-top: 76px; }
.examples .section-head { margin-bottom: 44px; }
.examples-title { font-size: clamp(22px, 3vw, 28px); }
.examples-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  /* Cards stretch to equal height; the preview area absorbs the difference. */
  align-items: stretch;
}
.example-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
}
/* One example per report type (six): three across, then two, then one. */
.examples-grid.three { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.example-card:hover { transform: translateY(-3px); border-color: rgba(10, 132, 255, 0.35); }
.example-preview {
  padding: 22px 22px 0;
  background: radial-gradient(ellipse 400px 260px at 50% 0%, rgba(10, 132, 255, 0.1), transparent);
  flex: 1;
}
.example-preview img {
  width: 100%;
  border-radius: 6px 6px 0 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  cursor: zoom-in;
  box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.4);
}
.example-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-top: 1px solid var(--line);
  background: var(--bg-card);
  position: relative;
  margin-top: auto;
}
.example-meta h4 { font-size: 16px; letter-spacing: -0.01em; }
.example-meta p { color: var(--muted); font-size: 13.5px; }
.example-meta .btn { white-space: nowrap; }
.example-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dl-size { color: var(--muted); font-weight: 500; margin-left: 4px; }

/* Privacy */
.privacy { text-align: center; }
.lock-badge {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(10, 132, 255, 0.25), rgba(10, 132, 255, 0.08));
  border: 1px solid rgba(10, 132, 255, 0.35);
}
.lock-badge svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.privacy h2 { margin-bottom: 14px; }
.privacy p { color: var(--muted); margin-bottom: 18px; }

/* FAQ */
.container.narrow-wide { width: min(760px, calc(100% - 48px)); }
.faq .section-head { margin-bottom: 36px; }
.faq-list details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
  margin-bottom: 10px;
  overflow: hidden;
}
.faq-list summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 16px;
  list-style: none;
  position: relative;
  padding-right: 44px;
  transition: color 0.15s ease;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-soft);
  font-size: 20px;
  font-weight: 400;
  transition: transform 0.2s ease;
}
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list summary:hover { color: var(--accent-soft); }
.faq-list details p {
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: 15px;
}
/* Smooth expand/collapse. `interpolate-size` lets block-size transition to `auto`;
   browsers without ::details-content support simply snap open as before. */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  .faq-list details::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition: block-size 0.3s ease, opacity 0.25s ease, content-visibility 0.3s allow-discrete;
  }
  .faq-list details[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* Download */
.download {
  background: radial-gradient(ellipse 800px 400px at 50% 100%, rgba(10, 132, 255, 0.12), transparent);
  border-top: 1px solid var(--line);
}
.dl-icon { margin: 0 auto 20px; border-radius: 22px; }
.download h2 { margin-bottom: 10px; }
.download > .container > p { color: var(--muted); margin-bottom: 26px; }
.download .cta-row { margin-bottom: 6px; }

/* Mac App Store badge */
.mas-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 18px;
  border-radius: 13px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.mas-badge:hover {
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.mas-badge:active { transform: scale(0.98); }
.mas-logo { width: 27px; height: 27px; flex: none; }
.mas-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  text-align: left;
}
.mas-sm { font-size: 11px; font-weight: 400; letter-spacing: 0.01em; }
.mas-lg { font-size: 21px; font-weight: 500; letter-spacing: -0.01em; margin-top: 3px; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 32px 0; }
.footer-credits {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 14px;
}
.footer-credits a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.footer-credits a:hover { color: var(--text); }
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 14px;
}
.footer nav { display: flex; gap: 22px; }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--text); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 6, 9, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 26px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
.lightbox-close:hover { opacity: 1; }

/* Reveal animation — hidden state only applies once JS confirms it can reveal */
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
html.js-reveal .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* Content pages (privacy) */
.page { padding: calc(var(--nav-h) + 60px) 0 80px; }
.page .container { width: min(760px, calc(100% - 48px)); }
.page h1 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 8px; }
.page .updated { color: var(--muted); font-size: 14px; margin-bottom: 40px; }
.page h2 { font-size: 24px; margin: 40px 0 12px; }
.page p, .page li { color: var(--muted); }
.page ul { padding-left: 22px; margin: 12px 0; }
.page a { color: var(--accent-soft); }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .grid.features { grid-template-columns: repeat(2, 1fr); }
  .examples-grid { grid-template-columns: 1fr; }
  .examples-grid.three { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 36px; }
  /* Single column: grid items default to min-width: auto, so the 6-tab bar would
     stretch the column (and the copy with it) past a phone screen. The bar
     scrolls sideways instead. (Desktop keeps the old sizing — the bar fits there
     because it may widen its column.) */
  .split > * { min-width: 0; }
  .tabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .split.flip .split-copy { order: 1; }
  .split.flip .split-shot { order: 2; }
  .section { padding: 80px 0; }
}

@media (max-width: 680px) {
  .grid.features { grid-template-columns: 1fr; }
  .grid.features.collapsed > .card:nth-child(n + 4) { display: none; }
  .grid-toggle { display: block; }
  .examples-grid.three { grid-template-columns: 1fr; }
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Solid: the page showing through made the drawer's links hard to read. */
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 16px;
    display: none;
    /* Grouped nav lists every section here, which is taller than a short phone
       viewport — scroll instead of putting items out of reach. */
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-links.open { display: flex; }
  /* Drawer = an outline. Top level (plain links + group headings) is large, bright
     and separated by hairlines; a group's links are smaller, muted and indented on
     a guide line, so they clearly belong to the heading above them. */
  .nav-links > a,
  .nav-group { border-top: 1px solid var(--line); }
  .nav-links > :first-child { border-top: 0; }
  .nav-links > a {
    padding: 15px 0;
    color: var(--text);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  /* The desktop .nav-group is a flex ROW (label baseline fix); in the drawer the
     heading must sit above its links, or the links get pushed beside it. */
  .nav-group { width: 100%; flex-direction: column; align-items: stretch; }
  .nav-group-button,
  .nav-group.open .nav-group-button {
    padding: 15px 0 8px;
    color: var(--text);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.6;
    pointer-events: none;
  }
  .nav-group-button .nav-chevron { display: none; }
  .nav-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    margin: 0 0 12px 1px;
    padding: 0 0 0 16px;
    border: 0;
    border-left: 1px solid rgba(100, 210, 255, 0.25);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .nav-menu::before { content: none; }
  /* A tap fires mouseenter/focusin, which sets .open — the desktop dropdown's
     translateX(-50%) then shoved the drawer's links out of view. */
  .nav-group.open .nav-menu { transform: none; }
  .nav-menu a {
    padding: 8px 0;
    border-radius: 0;
    color: var(--muted);
    font-size: 15px;
    font-weight: 400;
  }
  .nav-menu a:hover,
  .nav-menu a:active { background: transparent; color: var(--text); }
  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: 0;
    padding: 8px;
    cursor: pointer;
  }
  .nav-burger span {
    width: 20px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .container { width: calc(100% - 40px); }
  .hero { padding-top: calc(var(--nav-h) + 48px); }
  .hero-shot { margin-top: 28px; }
  .cta-row .btn { flex: 1 1 auto; justify-content: center; }
}

/* Smallest phones (320–374 px): the one-line brand, Download and the burger
   don't fit at the regular spacing — tighten the nav bar instead of wrapping. */
@media (max-width: 374px) {
  .nav-inner { width: calc(100% - 32px); gap: 10px; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn { padding: 7px 13px; font-size: 13px; }
  .brand { gap: 8px; font-size: 15px; }
}
/* 320 px (iPhone SE 1st gen): one more notch so "Media Inspector" clears Download. */
@media (max-width: 359px) {
  .brand { gap: 7px; font-size: 14px; }
  .brand img { width: 28px; height: 28px; }
  .nav-cta { gap: 4px; }
  .nav-cta .btn { padding: 6px 11px; }
  .nav-burger { padding: 6px; }
}

/* ===== Changelog ===== */
.whats-new-more { margin: 26px 0 0; text-align: center; }
.whats-new-more a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.whats-new-more a:hover { text-decoration: underline; }
.release { margin: 0 0 14px; }
.release h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.release h3 { font-size: 16px; margin: 22px 0 6px; }
.release-date {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}
.changelog-foot { margin-top: 48px; }