/* ============================================================================
   Octal site — shared styles
   Root-level (/site.css) on purpose: NOT under /assets/*, so it is not caught by
   the immutable cache rule in _headers and stays fresh while the site iterates.
   Self-hosted fonts (no third-party requests). Light only for now: dark mode
   isn't designed yet.
   ========================================================================== */

/* ---- fonts ---------------------------------------------------------------- */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('/assets/fonts/space-grotesk.ttf') format('truetype'); }
@font-face { font-family:'Figtree'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('/assets/fonts/figtree.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400;
  font-display:swap; src:url('/assets/fonts/ibm-plex-mono.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500;
  font-display:swap; src:url('/assets/fonts/ibm-plex-mono-medium.ttf') format('truetype'); }

/* ---- tokens --------------------------------------------------------------- */
:root {
  --bg:#fbf9f5;
  --band:#f3eee5;
  --surface:#ffffff;
  --rule:#ebe5da;
  --rule-frame:#e7e1d6;      /* screenshot frames */
  --rule-band:#e0d8ca;       /* rules inside the network band */
  --rule-kbd:#d9d1c2;
  --text:#1a2230;
  --text-muted:#4a5262;
  --text-dim:#565d6b;
  --text-dimmer:#656c79;
  --text-link-quiet:#3d4553; /* footer links */
  --navy:#0f2f52;
  --navy-top:#164673;
  --navy-line:#2d5480;
  --on-navy:#faf6ef;
  --on-navy-text:#eaf1f7;
  --on-navy-muted:#c3d2e0;
  --on-navy-dim:#9db4c9;
  --teal:#14889e;
  --sky:#31b8cf;
  --coral:#ff6b47;           /* logo octagon, Ko-fi heart and button only */
  --coral-on-navy:#ff7551;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:Figtree, system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --max:1200px;
  --gutter:clamp(20px, 5vw, 48px);
  --section-gap:clamp(72px, 10vw, 128px);
  /* Layered so screenshots lift off the off-white: a tight contact shadow plus a
     deep, soft one. --shadow-window is the drop-shadow() equivalent for window
     captures with transparent edges, which can't take a box-shadow. */
  --shadow-shot:
    0 1px 2px rgba(15, 47, 82, 0.08),
    0 12px 28px -10px rgba(15, 47, 82, 0.22),
    0 44px 90px -36px rgba(15, 47, 82, 0.50);
  --shadow-window: drop-shadow(0 18px 34px rgba(15, 47, 82, 0.24));
}

/* ---- base ----------------------------------------------------------------- */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
}
a { color:var(--navy); }
a:hover { color:var(--teal); }
img { max-width:100%; }
code { font-family:var(--font-mono); font-size:14px; }
strong { font-weight:600; }

/* Children of a stack are spaced by the gap, never by their own margins. */
.stack { display:flex; flex-direction:column; gap:16px; }
.stack > * { margin:0; }

.container { max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.note { font-size:15px; color:var(--text-dim); }

/* ---- headings ------------------------------------------------------------- */
.h1, .h2, .h3 { margin:0; font-family:var(--font-display); font-weight:600; color:var(--navy); }
.h1 { font-size:clamp(38px, 5.4vw, 64px); line-height:1.05; letter-spacing:-0.035em; }
.h2 { font-size:clamp(28px, 3vw, 38px); line-height:1.12; letter-spacing:-0.025em; }
.h2-lg { font-size:clamp(30px, 3.4vw, 42px); line-height:1.1; }
.h2-sm { font-size:clamp(24px, 2.4vw, 30px); line-height:inherit; letter-spacing:-0.02em; }
.h3 { font-size:20px; letter-spacing:-0.3px; }

/* ---- buttons -------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  min-height:52px; padding:0 24px; border-radius:999px;
  font-size:17px; font-weight:500; text-decoration:none;
}
.btn-sm { min-height:50px; font-size:16px; }
.btn-cream, .btn-cream:hover { background:var(--on-navy); color:var(--navy); font-weight:600; padding:0 26px; }
.btn-outline-navy, .btn-outline-navy:hover { border:1px solid var(--navy-line); color:var(--on-navy-text); }
.btn-outline-navy:hover { border-color:var(--on-navy-dim); }
.btn-coral, .btn-coral:hover { background:var(--coral); color:var(--text); font-weight:600; } /* never white on coral */
.btn-navy, .btn-navy:hover { background:var(--navy); color:var(--on-navy); font-weight:600; }
.btn-outline, .btn-outline:hover { border:1px solid var(--rule-kbd); background:var(--surface); color:var(--navy); }
.btn-outline:hover { border-color:var(--navy); }
.btn-row { display:flex; flex-wrap:wrap; gap:12px; }

/* ---- small pieces --------------------------------------------------------- */
kbd {
  font-family:var(--font-mono); font-size:13px; padding:2px 8px; border-radius:6px;
  border:1px solid var(--rule-kbd); border-bottom-width:2px; background:var(--surface); color:var(--text);
}
.keys { display:flex; flex-wrap:wrap; gap:10px 18px; font-size:14px; color:var(--text-muted); }
.keys > span { display:inline-flex; align-items:center; gap:8px; }

.tags { display:flex; flex-wrap:wrap; gap:8px; }
.tag-chip { font-size:13px; font-weight:600; line-height:1; padding:6px 10px; border-radius:6px; }
.tag-important { background:#f8d6cd; color:#8a2e17; }
.tag-paid      { background:#d4e9da; color:#1d5b33; }
.tag-send      { background:#e3e1dc; color:#3d4049; }

.ruled { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; border-top:1px solid var(--rule); }
.ruled > li { padding:11px 0; border-bottom:1px solid var(--rule); color:var(--text); }
.ruled-band { border-top-color:var(--rule-band); }
.ruled-band > li { padding:12px 0; border-bottom-color:var(--rule-band); }
.ruled-band li span { color:var(--text-muted); font-size:15px; }

/* Opaque, cropped screenshots get a frame. Window captures that carry their
   own macOS shadow are shown bare. */
.frame { border-radius:14px; overflow:hidden; border:1px solid var(--rule-frame); box-shadow:var(--shadow-shot); }
.frame > img { display:block; width:100%; height:auto; }
/* Bare window captures already carry a faint macOS shadow; deepen it to match. */
.window-shot { filter:var(--shadow-window); }
.frame-tall { border-radius:18px; }
.frame-band { border-color:var(--rule-band); }

/* ---- hero band (home only) ----------------------------------------------- */
.hero {
  position:relative; overflow:hidden; color:var(--on-navy-text);
  background:linear-gradient(180deg, var(--navy-top) 0%, var(--navy) 100%);
  padding-bottom:clamp(140px, 18vw, 260px);
}
.hero-traces { position:absolute; right:0; top:40px; opacity:0.22; }
.hero-intro {
  position:relative; max-width:var(--max); margin:0 auto;
  padding:clamp(48px, 8vw, 104px) var(--gutter) 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:32px clamp(32px, 5vw, 72px);
}
.hero-mark { flex:0 0 auto; width:clamp(150px, 20vw, 260px); height:auto; }
.hero-copy { flex:1 1 420px; max-width:720px; gap:20px; }
.hero-copy .h1 { color:var(--on-navy); }
.hero-lede { max-width:600px; font-size:clamp(17px, 1.6vw, 20px); color:var(--on-navy-muted); }
.hero-copy .btn-row { margin-top:10px; }
.version-line { font-family:var(--font-mono); font-size:13px; letter-spacing:0.5px; color:var(--on-navy-dim); }

.hero-shot {
  position:relative; display:flex; flex-direction:column; align-items:center;
  margin-top:calc(-1 * clamp(110px, 15vw, 220px));
}
/* One box the size of the first shot; the others crossfade inside it, so a
   slightly shorter capture never moves the page. */
.slides { position:relative; width:100%; }
.slides-hero { max-width:1180px; aspect-ratio:2000 / 1266; }
.slides-git { aspect-ratio:2000 / 1273; }
.slides > img {
  position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain;
  opacity:0; transition:opacity .9s ease;
}
.slides > img.is-active { opacity:1; }
.slides-controls {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px;
  margin-top:18px; min-height:28px; text-align:center;
}
.slides-controls[hidden] { display:none; }
.slides-dots { display:flex; gap:8px; }
.slides-dots button {
  width:8px; height:8px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:var(--rule-kbd); transition:width .25s ease, background .25s ease;
}
.slides-dots button[aria-current="true"] { width:22px; background:var(--navy); }
.slides-pause {
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  padding:0; border:1px solid var(--rule); border-radius:999px; background:var(--surface);
  color:var(--text-dim); cursor:pointer;
}
.slides-pause:hover { color:var(--navy); border-color:var(--rule-kbd); }
.slides-pause .icon-play, .slides-pause[aria-pressed="true"] .icon-pause { display:none; }
.slides-pause[aria-pressed="true"] .icon-play { display:block; }
/* Its own row under the dots. Reserves two lines (four on phones) so captions
   of different lengths don't move the page as they change. */
.slides-caption {
  flex:1 0 100%; max-width:640px; min-height:3.2em; margin:4px auto 0;
  font-size:15px; line-height:1.6; color:var(--text-muted);
}
.slides-caption strong { color:var(--navy); }
@media (max-width:600px) { .slides-caption { min-height:6.4em; } }
.slides-dots button:focus-visible, .slides-pause:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }

.demo-video { display:block; width:100%; height:auto; background:var(--surface); }
/* The pause button site.js adds: hidden until the video is hovered or the button
   focused, and kept in view once the visitor has paused it. On a touch screen a
   tap on the video pauses it. */
.video-box { position:relative; }
.video-box .demo-video { cursor:pointer; }
.video-toggle {
  position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:rgba(15, 47, 82, .55); color:#fff; opacity:0; transition:opacity .2s;
}
.video-box:hover .video-toggle, .video-box.is-paused .video-toggle, .video-toggle:focus-visible { opacity:1; }
.video-toggle:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }

/* ---- site header ---------------------------------------------------------- */
.site-header {
  position:relative; max-width:var(--max); margin:0 auto; padding:20px var(--gutter);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
}
.wordmark {
  display:flex; align-items:center; gap:4px; text-decoration:none; color:var(--on-navy);
  font-family:var(--font-display); font-weight:600; font-size:24px; letter-spacing:-0.5px;
}
.wordmark:hover { color:var(--on-navy); }
.wordmark img { display:block; width:auto; height:24px; }
.site-nav { display:flex; flex-wrap:wrap; align-items:center; gap:4px 28px; font-size:15px; }
.site-nav a { color:var(--on-navy-muted); text-decoration:none; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { color:var(--on-navy); }
.site-nav .nav-download,
.site-nav .nav-download:hover {
  display:inline-flex; align-items:center; min-height:40px; padding:0 18px; border-radius:999px;
  background:var(--on-navy); color:var(--navy); font-weight:500;
}
/* Sub-pages: the same header on the page background instead of navy. */
.site-header-light { border-bottom:1px solid var(--rule); }
.site-header-light .site-nav a { color:var(--text-muted); }
.site-header-light .site-nav a:hover,
.site-header-light .site-nav a[aria-current="page"] { color:var(--navy); }
/* `a.` so the pill outranks the aria-current colour above on /download. */
.site-header-light .site-nav a.nav-download,
.site-header-light .site-nav a.nav-download:hover { background:var(--navy); color:var(--on-navy); }

/* Phone menu (site.js): the page links fold into a dropdown beside Download. */
.nav-links { display:contents; }
.nav-toggle { display:none; }
@media (max-width:640px) {
  .site-header { flex-wrap:nowrap; }
  .site-nav { flex-wrap:nowrap; gap:8px; }
  .nav-toggle {
    display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
    padding:0; border:0; border-radius:999px; background:transparent; color:var(--on-navy); cursor:pointer;
  }
  .nav-toggle:focus-visible { outline:2px solid var(--sky); outline-offset:2px; }
  .site-header-light .nav-toggle { color:var(--navy); }
  .site-header-light .nav-toggle:focus-visible { outline-color:var(--teal); }
  .nav-links {
    display:none; position:absolute; z-index:20; top:100%; left:0; right:0;
    flex-direction:column; padding:4px var(--gutter) 12px;
    background:var(--navy); border-bottom:1px solid var(--navy-line);
  }
  .site-header.is-open .nav-links { display:flex; }
  .site-nav .nav-links a { padding:12px 0; font-size:17px; }
  .site-nav .nav-links a + a { border-top:1px solid var(--navy-line); }
  .site-header-light .nav-links { background:var(--bg); border-bottom-color:var(--rule); }
  .site-header-light .site-nav .nav-links a + a { border-top-color:var(--rule); }
}

/* ---- home sections -------------------------------------------------------- */
.overview {
  max-width:var(--max); margin:0 auto; padding:clamp(64px, 9vw, 112px) var(--gutter);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:40px 56px;
  border-bottom:1px solid var(--rule);
}
.overview .stack { gap:8px; }
/* Four items, which the default minimum would wrap three plus one on a wide screen. */
.overview-4 { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:40px 48px; }
.overview p { color:var(--text-muted); }

.feature {
  padding:var(--section-gap) 0 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:48px 64px;
}
/* Image on the left on wide screens; text still comes first when stacked. */
.feature-reverse { flex-wrap:wrap-reverse; flex-direction:row-reverse; }
.feature-centered { justify-content:center; gap:48px 80px; }
.feature-text { flex:1 1 320px; max-width:420px; }
.feature-text p { color:var(--text-muted); }
.feature-text .note { color:var(--text-dim); }
.feature-text .ruled { margin-top:4px; }
.feature-text-440 { max-width:440px; }
.feature-text-460 { max-width:460px; }
.feature-media { flex:999 1 520px; min-width:0; }
.feature-media-tags { flex:999 1 420px; max-width:560px; }
.feature-media-info { flex:0 1 300px; }

.band {
  margin-top:var(--section-gap); background:var(--band);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.band-inner {
  max-width:var(--max); margin:0 auto; padding:clamp(64px, 9vw, 112px) var(--gutter);
  display:flex; flex-direction:column; gap:clamp(40px, 5vw, 64px);
}
.band-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px 64px; }
.band-intro { flex:1 1 360px; max-width:560px; }
.band-intro p { color:var(--text-muted); }
.protocols { margin:0; font-family:var(--font-mono); font-size:13px; line-height:1.9; color:var(--text-muted); }
.band-shot { display:block; width:100%; height:auto; }
.band-row { display:flex; flex-wrap:wrap; align-items:flex-start; gap:40px 64px; }
.band-row .ruled { flex:1 1 320px; max-width:440px; }
/* With no screenshot beside it, the list spreads across the band. */
.band-row .ruled-columns { flex:1 1 100%; max-width:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:0 48px; }

.pair { padding:var(--section-gap) 0 0; gap:44px; }
.pair-text { max-width:640px; }
.pair-text p { color:var(--text-muted); }
.pair-media { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:32px; }
.pair-media > img { display:block; flex:1 1 300px; max-width:460px; min-width:0; height:auto; }
.pair-media > .frame { flex:1 1 360px; max-width:600px; min-width:0; }

.more { padding:var(--section-gap) 0 0; }
.more .h2 { margin:0 0 32px; }
/* The items with a screenshot, two by two above the plain list. Window captures
   that carry their own shadow sit in a box of the same height as the others. */
.more-featured { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:56px 56px; margin:0 0 56px; }
.more-featured .stack { gap:16px; }
/* Each shot is sized to about the same area whatever its shape, in a box of one
   height, so the descriptions below all start level. */
.more-shot { display:flex; align-items:center; justify-content:center; height:280px; }
.more-shot img, .more-shot .frame { display:block; max-width:100%; height:auto; }
.more-shot .frame img { width:100%; height:auto; }
.shot-rename  { width:290px; }
.shot-compare { width:345px; }
.shot-viewer  { width:325px; }
.shot-smart   { width:290px; }
@media (max-width:600px) { .more-shot { height:auto; } }
.more-featured p { margin:0; font-size:15px; color:var(--text-muted); }

/* The Activity recording: the window itself, corners clipped to its own radius. */
.feature-media-activity { flex:1 1 360px; max-width:460px; margin:0 auto; }
.activity-video { border-radius:3.8% / 3.4%; box-shadow:var(--shadow-shot); background:var(--bg); }

.more-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:0 48px;
  border-top:1px solid var(--rule);
}
.more-grid > div { padding:20px 0; border-bottom:1px solid var(--rule); }
.more-grid h3 { margin:0 0 4px; font-size:17px; font-weight:600; color:var(--text); }
.more-grid p { margin:0; font-size:15px; color:var(--text-muted); }

.drivebench { padding:var(--section-gap) 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:40px 64px; }
.drivebench .stack { flex:1 1 360px; max-width:520px; gap:14px; }
.drivebench .stack .btn-row { margin-top:6px; }
.drivebench p { color:var(--text-muted); }
.drivebench .note { color:var(--text-dim); }
.drivebench-icon { display:block; width:72px; height:72px; }
.drivebench-shot { flex:1 1 420px; max-width:620px; min-width:0; }
.drivebench-shot img { display:block; width:100%; height:auto; }
/* The DriveBench page's one window capture, in place of the home page's slideshow. */
.db-shot { display:block; width:100%; max-width:1180px; height:auto; }
/* Eight items: two full rows of four, where the shared grid would leave three, three, two. */
@media (min-width:1000px) { .more-8 .more-grid { grid-template-columns:repeat(4, 1fr); gap:0 40px; } }
.db-compare { padding:var(--section-gap) 0 0; }
.db-compare .stack { max-width:640px; margin:0 auto 40px; text-align:center; }
.db-compare p { color:var(--text-muted); }
.db-compare .db-shot { margin:0 auto; }

.support { max-width:var(--max); margin:0 auto; padding:var(--section-gap) var(--gutter); }
.support-card {
  border-radius:24px; background:var(--navy); color:var(--on-navy-text);
  padding:clamp(36px, 5vw, 64px) clamp(24px, 5vw, 64px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px 56px;
}
.support-card .stack { flex:1 1 380px; max-width:600px; gap:12px; }
.support-card .h2 {
  font-size:clamp(26px, 2.8vw, 34px); line-height:1.15; letter-spacing:-0.02em; color:var(--on-navy);
}
.support-card p { color:var(--on-navy-muted); }
.support-card .btn-outline-navy { padding:0 22px; }
.teaser { margin:36px 0 0; text-align:center; font-size:15px; color:var(--text-dimmer); }

/* ---- footer --------------------------------------------------------------- */
.site-footer { border-top:1px solid var(--rule); }
.site-footer-inner {
  max-width:var(--max); margin:0 auto; padding:32px var(--gutter);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  font-size:14px; color:var(--text-dim);
}
.site-footer-brand { display:flex; align-items:center; gap:10px; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:8px 24px; }
.site-footer nav a { color:var(--text-link-quiet); text-decoration:none; }
.site-footer nav a:hover { color:var(--teal); }

/* ---- sub-pages: docs, changelog, support, privacy, download, report, 404 -- */
/* Keep the footer at the bottom of the window on short pages. */
body[data-page] { min-height:100vh; display:flex; flex-direction:column; }
.page {
  flex:1 0 auto; width:100%; max-width:var(--max); margin:0 auto;
  padding:clamp(48px, 7vw, 88px) var(--gutter) var(--section-gap);
}
.prose { max-width:720px; }
.prose .h1 { font-size:clamp(34px, 4.4vw, 48px); margin:0 0 12px; }
.prose h2 {
  margin:44px 0 12px; font-family:var(--font-display); font-weight:600; color:var(--navy);
  font-size:clamp(22px, 2.2vw, 26px); line-height:1.2; letter-spacing:-0.02em;
}
.prose h3 { margin:28px 0 6px; font-size:17px; font-weight:600; color:var(--text); }
.prose p, .prose li { color:var(--text-muted); }
.prose p { margin:0 0 14px; }
.prose ul, .prose ol { margin:0 0 14px; padding-left:22px; }
.prose li + li { margin-top:4px; }
.prose li strong, .prose p strong { color:var(--text); }
.prose code {
  font-size:13.5px; background:var(--surface); border:1px solid var(--rule);
  border-radius:6px; padding:1px 6px; color:var(--text);
}
.prose .lead { font-size:clamp(17px, 1.6vw, 19px); }
.eyebrow {
  display:block; margin-bottom:12px; font-family:var(--font-mono); font-size:13px;
  letter-spacing:0.5px; color:var(--text-dim);
}
.callout {
  margin:28px 0; padding:16px 20px; border-radius:14px;
  background:var(--surface); border:1px solid var(--rule);
}
.callout p { margin:0; color:var(--text); }
.changelog-item { padding:24px 0; border-bottom:1px solid var(--rule); }
.changelog-item:first-of-type, h2 + .changelog-item { border-top:1px solid var(--rule); margin-top:20px; }
.changelog-item .ver { font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--navy); }
.changelog-item .date { margin-left:10px; font-family:var(--font-mono); font-size:13px; color:var(--text-dim); }
.changelog-item ul { margin:10px 0 0; }
.changelog-item p { margin:10px 0 0; }
.changelog-older summary { padding:20px 0; font-weight:600; color:var(--navy); cursor:pointer; }
.changelog-older[open] summary { padding-bottom:0; }

/* Docs: reference tables (shortcuts, action fields). Wide ones scroll inside their
   wrapper on phones instead of widening the page. */
.table-wrap { margin:14px 0 20px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.prose table { width:100%; border-collapse:collapse; font-size:15px; }
.prose th, .prose td { padding:9px 12px 9px 0; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule); }
.prose th { font-size:13px; font-weight:600; color:var(--text-dim); border-bottom-color:var(--rule-kbd); }
.prose td { color:var(--text-muted); }
.prose td:first-child { white-space:nowrap; color:var(--text); }
.prose td kbd { font-size:12.5px; padding:1px 6px; }
/* Reference tables with long names in the first column: one row becomes a small
   block on phones, the name over its description, instead of a sideways scroll. */
@media (max-width:600px) {
  .table-stack tr:first-child { display:none; }
  .table-stack tr { display:block; padding:10px 0; border-bottom:1px solid var(--rule); }
  .table-stack td { display:block; padding:0; border:0; }
  .table-stack td + td { margin-top:4px; }
  .table-stack td:first-child { white-space:normal; }
}
.prose pre {
  margin:0 0 16px; padding:14px 16px; overflow-x:auto; border-radius:12px;
  background:var(--surface); border:1px solid var(--rule); font-size:13px; line-height:1.55;
}
.prose pre code { background:none; border:0; padding:0; font-size:13px; }
.toc { margin:28px 0 8px; padding:16px 20px; border-radius:14px; background:var(--surface); border:1px solid var(--rule); }
.toc ul { margin:0; padding:0; list-style:none; columns:2 220px; column-gap:24px; }
.toc li { break-inside:avoid; margin:0 0 4px; }
.toc a { color:var(--navy); text-decoration:none; }
.toc a:hover { color:var(--teal); text-decoration:underline; }

.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; margin:36px 0 8px; }
.card {
  display:flex; flex-direction:column; gap:10px; padding:24px;
  background:var(--surface); border:1px solid var(--rule); border-radius:14px;
}
.card h2 { margin:0; font-family:var(--font-display); font-weight:600; font-size:20px; line-height:1.3; color:var(--navy); }
.card p { margin:0; color:var(--text-muted); font-size:15px; }
.card h2 .badge {
  display:inline-block; vertical-align:3px; margin-left:6px; padding:2px 8px; border-radius:999px;
  background:var(--band); color:var(--text-muted); font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.04em; text-transform:uppercase;
}
.card .btn { align-self:flex-start; margin-top:auto; min-height:44px; padding:0 20px; font-size:15px; }

.not-found { min-height:44vh; display:flex; flex-direction:column; justify-content:center; }

/* ---- report form ---------------------------------------------------------- */
.form { display:flex; flex-direction:column; gap:20px; margin-top:28px; }
.field label { display:block; margin-bottom:8px; font-weight:600; font-size:15px; color:var(--text); }
.field .hint { font-weight:400; color:var(--text-dim); }
.form input[type=text], .form input[type=email], .form textarea {
  width:100%; font:inherit; font-size:16px; color:inherit; background:var(--surface);
  border:1px solid var(--rule-kbd); border-radius:12px; padding:12px 14px;
}
.form input:focus, .form textarea:focus { outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
.form textarea { min-height:150px; resize:vertical; line-height:1.5; }
.seg { display:inline-flex; background:var(--band); border-radius:999px; padding:4px; gap:4px; }
.seg label { margin:0; }
.seg input { position:absolute; opacity:0; pointer-events:none; }
.seg span { display:block; padding:7px 18px; border-radius:999px; font-weight:600; font-size:15px;
  color:var(--text-muted); cursor:pointer; user-select:none; }
.seg input:checked + span { background:var(--surface); color:var(--navy); box-shadow:0 1px 3px rgba(20, 60, 90, .12); }
.seg input:focus-visible + span { outline:2px solid var(--teal); }
.form button.btn { align-self:flex-start; border:0; cursor:pointer; font-family:inherit; }
.form button.btn:disabled { opacity:.55; cursor:default; }
.form .note { margin:-4px 0 0; font-size:14px; }
.result { display:none; border-radius:12px; padding:16px 18px; font-size:15.5px; line-height:1.5; }
.result a { color:inherit; font-weight:600; }
.result.ok { display:block; background:#d4e9da; color:#1d5b33; }
.result.err { display:block; background:#f8d6cd; color:#8a2e17; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .slides > img, .slides-dots button { transition:none; }
}

.download-cta { margin:28px 0 8px; }