/* DiskVerdict — overrides on top of site.css
   Only what differs from the shared Luces Umbrarum design system.

   PER-SITE COLOR LIVES HERE. The whole page re-tints by remapping two
   tokens below; everything else inherits from site.css. To recolor the
   site, change --accent / --accent-soft (and their dark-mode twins). */

/* ── Accent: DiskVerdict warm orange (ThemeManager.brandOrange) ─ */
:root {
  color-scheme: light dark;        /* lets UA controls/scrollbars follow OS */
  --accent:      #E68033;          /* the app's brand orange (#E68033) */
  --accent-soft: rgba(230, 128, 51, 0.16);
}

/* Datasheet accent = brand, not the shared terracotta.
   datasheet.css sets :root{--accent:#D9846A} and is linked AFTER this file, so
   by source order its :root wins over the :root above — the sheet showed the
   generic terracotta instead of DiskVerdict's orange. Re-assert on .sheet:
   custom props inherit from the nearest ancestor, so the sheet + every accent
   element inside it pick up #E68033, while datasheet.css's :root value AND the
   link order (which keeps the sheet light in dark mode) stay untouched. The
   sheet is always light, so the light brand hue is correct in both OS modes. */
.sheet { --accent: #E68033; }

/* ── Nav typography: join the datasheet's monospace instrument face ──
   site.css leaves the shared nav/brand in --font-body (Inter) while the
   datasheet content is all --mono (JetBrains Mono) — that seam read as
   "different fonts on top". Pull the wordmark + nav links into --mono so
   the whole page is one instrument. The .brand-mark "D" glyph keeps its
   own font-family (set in site.css), so the logo square is untouched. */
.brand,
.nav a {
  font-family: var(--mono);
}

/* Nav CTA button: REMOVED 2026-07-19. STYLE-BIBLE §2.2 makes the rule strip the
   sole download/purchase path, and no page here has carried a `.nav-cta` since.
   The dead rules were deleted so a reinstated nav CTA can't arrive pre-styled
   and look deliberate — the way Aloft's pre-rule leftover shipped a second BUY
   button unnoticed. Style the spec-box `.dl` instead. */

/* ── Inline code / filename chips ─────────────────────────────── */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--ghost);
  padding: 1px 6px;
  border-radius: 5px;
  color: var(--ink);
}

/* ── Problem callout (generic two-column band) ───────────────── */
.callout {
  max-width: 1080px;
  margin: 72px auto 0;
  padding: 0 32px;
}
.callout .inner {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: center;
}
.callout h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
}
.callout-body p {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.6;
}
.callout-body p + p { margin-top: 12px; }

/* ── How-it-works steps ──────────────────────────────────────── */
.steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 12px;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 4px 18px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.steps li:last-child { border-bottom: none; }
.steps li::before {
  content: counter(step);
  grid-column: 1;
  grid-row: 1 / span 2;          /* counter owns the narrow column, both rows */
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  color: var(--accent);
  line-height: 1.05;
}
.steps li strong {
  grid-column: 2;
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.steps li span {
  grid-column: 2;                /* keep body beside the number, not under it */
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.55;
}

/* Keyboard-shortcut chip inside step copy */
.kbd {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 1px 7px;
  margin-left: 2px;
  white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 700px) {
  .callout .inner {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    gap: 16px;
  }
}
@media (max-width: 640px) {
  .callout { padding: 0 24px; }
}

/* ── No dark theme (deliberate — light-only) ─────────────────────
   This site is the light "printed datasheet" (see datasheet.css): the
   .sheet is always light, so the page stays light in every OS appearance.
   A @media (prefers-color-scheme: dark) block used to remap the shared
   site.css chrome tokens here, but datasheet.css (loaded LAST) pins --ink
   dark globally — so the dark chrome rendered dark-ink-on-dark-surface:
   an invisible wordmark (contrast 1.00) + a sub-AA footer. Removed
   2026-07-10 so the chrome matches the portal, which never had a dark
   block. Do NOT re-add one. (The screenshot/icon <picture> in index.html
   still swaps to -dark variants by design — the app shown in the viewer's
   mode, a floating window on the light sheet, not page chrome.) */

/* ── Datasheet rule strip: fold the download-stats chip into the row ──
   `.download-stats` is a shared marketing component (site.css): body font,
   its own size/colour (--ink-soft), and a `margin-top:14px` meant for the
   hero. Dropped into the mono datasheet rule strip it read as a different
   font on a different baseline. Force it to match its <span> spec-chip
   siblings — same font, size, colour, and baseline. Higher specificity
   (.rule .download-stats) so it wins regardless of stylesheet order. */
.rule .download-stats {
  margin: 0;
  min-height: 0;
  font: inherit;        /* JetBrains Mono, 12px — matches the sibling chips */
  color: inherit;       /* var(--muted), not the lighter --ink-soft */
}

/* The doc-header used to fold a DOWNLOAD button into the spec strip, but it
   duplicated the always-visible nav "Download Free" CTA, so it was removed
   (2026-07-08). The spec strip is now just MODEL / REVISION / PRICE / WORKFLOWS;
   the nav button is the single download entry point. */

/* ── Utility pages (support / imprint) — datasheet anatomy on FLAGSHIP paper ──
   The shared datasheet.css carries the anatomy (.sheet/.dochead/.sec/.featgrid/
   .foot); the portal's utility pages get their link + action-arrow styling from
   subpage.css's `body.util` block, which this dedicated site doesn't load. Mirror
   the variant-independent parts here — all token-driven, so they auto-theme to
   DiskVerdict's FLAGSHIP paper (accent #E68033). Scoped to `body.util` so the app
   pages keep bare links. */
body.util .sheet a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
body.util .sheet a:hover { text-decoration-color: var(--accent); }
body.util .sheet .featgrid p .go {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  font-weight: 600;
}
body.util .sheet .featgrid p .go:hover { text-decoration-color: var(--accent); }