/*
 * editorial.css — shared cream-theme chrome + layout variants for the
 * marketing surface.
 *
 * Replaces ~480 LOC of duplicated inline <style> that the editorial
 * pilot (PR #291) shipped with. Now any cream marketing page can
 * adopt the chrome (cream palette, page rules, top header, dark
 * footer with canonical link grid) by adding two lines to <head>:
 *
 *     <link rel="stylesheet" href="/fonts.css">
 *     <link rel="stylesheet" href="/editorial.css">
 *
 * …and declaring a layout variant on <body>:
 *
 *     <body class="layout-prose">    ← editorial articles (/learn/*)
 *     <body class="layout-product">  ← product pages (/features/*)
 *
 * Cutover-first migration plan (autoplan, 2026-05-20): the cream
 * home (front-end/index.html) keeps its inline styles through and
 * post cutover for risk isolation; this sheet is loaded only by
 * editorial + product pages. The plan calls for folding the home's
 * inline CSS into here during the post-cutover propagation phase.
 *
 * ── Index ────────────────────────────────────────────────────
 *  1. Reset + tokens + body + chrome.js nav-hide
 *  2. Page frame (vertical rules)
 *  3. Top header (lockup + sign-in)
 *  4. Breadcrumb
 *  5. Dark footer (4-col link grid mirroring canonical /)
 *  6. .layout-prose — editorial article surface (720px column,
 *     typography ramp, at-a-glance, TOC, FAQ, compare-table,
 *     bottom-CTA, related-articles)
 *  7. .layout-product — wider container for product pages.
 *     Page-specific section styles still live inline on each
 *     /features/* page until the second product page lands and
 *     common patterns can be extracted.
 *  8. Responsive (900px + 520px breakpoints)
 */


/* Cream tokens (--paper, --ink, --line, --accent, --sans, --serif-accent)
   imported from paper-tokens.css — single source of truth shared with
   design-tokens.css and the SPA shell. Do NOT redefine them here; edit
   paper-tokens.css instead. Must precede every other rule per CSS @import
   spec, hence the position at file top. */
@import url("/paper-tokens.css");

/* ── 1. Reset + tokens + body + chrome.js nav-hide ───────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  /* Tokens unique to editorial.css — not in paper-tokens.css. */
  --divider:  #AAA;
  /* Section gutter: scales from 24px (mobile) to 80px (wide desktop).
     Keeps content well inside the page-rule hairlines at all viewports.
     /index.html uses a flat 60px on .section-frame; this responsive
     value matches that at ~1200px and exceeds it above 1600px. */
  --section-gutter: clamp(24px, 5vw, 80px);
}

html { background: var(--paper); }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  padding-top: 0;
}

/* chrome.js renders the legacy marketing nav + footer for backward-
   compat with the dark UI. Cream pages hide them and ship their own. */
nav.site-nav, footer.site-footer { display: none !important; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }


/* ── 2. Page frame + page rules ──────────────────────────────────────
   Vertical 1px hairlines flanking the page, intersecting the top
   border-bottom + footer top-edge at "+" junctions. Matches the
   cream home (PRs #287/#288/#289). Hairlines sit 580px from
   center (PR #295 tweak — was 530px) so wide viewports get a bit
   more breathing room outside the content column. */

.page {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.page::before, .page::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--divider);
  pointer-events: none;
  z-index: 0;
}
/* Rule position: at very wide viewports anchor 580px from center;
   at narrower widths fall to a 60px floor. Matches /index.html's
   page-rule treatment exactly at all viewports — no targeted
   media query overrides in the 1101-1259px range. */
.page::before { left:  max(60px, calc(50% - 580px)); }
.page::after  { right: max(60px, calc(50% - 580px)); }


/* ── 3. Top header ───────────────────────────────────────────────────
   Lockup + "Sign in" link inside a 1180px-max-width inner container
   with 92px horizontal padding (60px outer alignment + 32px gutter
   from the page rules per PR #289 R2). */

.top { border-bottom: 1px solid var(--divider); }
.top-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 92px;
  display: flex; align-items: center; justify-content: space-between;
}
.wordmark { display: inline-flex; align-items: center; line-height: 1; }
.wordmark img { height: 28px; width: auto; display: block; }
.top-right { font-size: 14px; color: var(--ink-3); }
.top-right a { color: var(--ink); font-weight: 600; transition: opacity 0.15s; }
.top-right a:hover { opacity: 0.7; }


/* ── 4. Breadcrumb ───────────────────────────────────────────────── */

.breadcrumb {
  max-width: 800px;
  margin: 0 auto;
  padding: 28px 60px 0;
  font-size: 13px;
  color: var(--ink-4);
}
.breadcrumb a { color: var(--ink-3); transition: color 0.15s; }
.breadcrumb a:hover { color: var(--ink-2); }
.breadcrumb .sep { margin: 0 6px; color: var(--ink-4); }


/* ── 5. Dark footer ──────────────────────────────────────────────────
   5-block layout (1 brand block + 4 link columns) matching the
   canonical marketing footer at https://delist.ai/ exactly. */

.foot {
  position: relative;
  z-index: 1;
  background: #1e1e1e;
  color: #f4f2ef;
}
.foot-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 60px 28px;
}
.foot-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(244, 242, 239, 0.10);
}
/* Wide variant — used by chrome.js-injected canonical cream-page footer.
   5 link cols + 240px fixed brand block (matches prod's brand width at
   1440px viewport; prod uses 1.4fr in a 5.4fr grid which computes to
   241.6px). Responsive overrides in §8 (Responsive) below. Resources +
   Industries + Guides footer entries are intentionally omitted; those
   page clusters stay sitemap-indexed and cross-linked from related pages. */
.foot-top.foot-top-wide {
  grid-template-columns: 240px repeat(5, 1fr);
  gap: 32px;
}
.foot-brand-link { display: inline-block; text-decoration: none; color: inherit; }
.foot-brand-link:hover { opacity: 0.85; }
.foot-brand-logo img { width: 120px; height: auto; display: block; }
/* Scoped to .foot to beat the .layout-product p / .layout-prose .article p
   body-paragraph rules that would otherwise win on specificity. */
.foot .foot-tagline {
  margin-top: 16px;
  font-size: 13.5px;
  color: rgba(244, 242, 239, 0.65);
  line-height: 1.5;
  max-width: 280px;
}
.foot-col { display: flex; flex-direction: column; }
.foot-col-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 242, 239, 0.50);
  font-weight: 600;
  margin-bottom: 14px;
}
.foot-col-title.is-sub { margin-top: 22px; }
.foot-col a {
  font-size: 13px;
  color: rgba(244, 242, 239, 0.78);
  padding: 5px 0;
  transition: color 0.15s;
}
.foot-col a:hover { color: #f4f2ef; }
.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 22px;
  font-size: 12.5px;
  color: rgba(244, 242, 239, 0.50);
}
.foot-bottom a {
  color: rgba(244, 242, 239, 0.65);
  transition: color 0.15s;
}
.foot-bottom a:hover { color: #f4f2ef; }
.foot-bottom-legal .sep { color: rgba(244, 242, 239, 0.30); margin: 0 6px; }


/* ══════════════════════════════════════════════════════════════════════
   6. .layout-prose — editorial article surface
   ══════════════════════════════════════════════════════════════════════
   Used by /learn/* articles. 720px reading column, narrow type ramp,
   at-a-glance summary box, auto-inserted TOC, FAQ <details>, compare-
   table, bottom-CTA box, related-articles. */

.layout-prose .article {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 60px 96px;
}
.layout-prose .article h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 35px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 16px 0 28px;
}
.layout-prose .article h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 29px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 44px 0 16px;
  scroll-margin-top: 24px;
}
.layout-prose .article h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
  margin: 28px 0 12px;
}
.layout-prose .article p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0 0 18px;
}
.layout-prose .article ul,
.layout-prose .article ol {
  margin: 0 0 22px 24px;
  padding: 0;
}
.layout-prose .article li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.layout-prose .article strong { color: var(--ink); font-weight: 600; }

/* Prose-link scoping (PR #292): only paragraph / list-item / table /
   definition-value links pick up the dark-ink-on-cream underline.
   Custom UI inside .article (e.g. .cta-inline) keeps its own color. */
.layout-prose .article p a,
.layout-prose .article li a,
.layout-prose .article td a,
.layout-prose .article dd a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-4);
  transition: text-decoration-color 0.15s;
}
.layout-prose .article p a:hover,
.layout-prose .article li a:hover,
.layout-prose .article td a:hover,
.layout-prose .article dd a:hover { text-decoration-color: var(--ink); }

.layout-prose .article code {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  color: var(--ink);
}
.layout-prose .article hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 32px 0;
}

/* At-a-glance summary box */
.layout-prose .at-a-glance {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px 30px 22px;
  margin: 24px 0 32px;
}
.layout-prose .at-a-glance-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 12px;
}
.layout-prose .at-a-glance ul { margin: 0 0 16px 22px; }
.layout-prose .at-a-glance li {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.layout-prose .at-a-glance .meta-row {
  display: flex; gap: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-4);
}

/* Auto-inserted TOC (via inline script in each article) */
.layout-prose .toc {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 28px;
  margin: 0 0 36px;
}
.layout-prose .toc-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 10px;
}
.layout-prose .toc ol { margin: 0; padding-left: 22px; }
.layout-prose .toc li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0;
}
.layout-prose .toc a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.15s;
}
.layout-prose .toc a:hover { color: var(--ink); text-decoration: underline; }

/* Compare-table */
.layout-prose .compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 28px;
  font-size: 15px;
}
.layout-prose .compare-table th,
.layout-prose .compare-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.layout-prose .compare-table th {
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-2);
}
.layout-prose .compare-table td { color: var(--ink-2); }

/* FAQ <details> */
.layout-prose .faq { margin: 20px 0 32px; }
.layout-prose .faq-item {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}
.layout-prose .faq-item:last-of-type { border-bottom: 1px solid var(--line); }
.layout-prose .faq-item summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  padding: 4px 0;
  position: relative;
  padding-right: 32px;
}
.layout-prose .faq-item summary::-webkit-details-marker { display: none; }
.layout-prose .faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--ink-4);
  line-height: 1;
  transition: transform 0.2s ease;
}
.layout-prose .faq-item[open] summary::after { content: '–'; }
.layout-prose .faq-body {
  padding: 8px 0 4px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* Bottom CTA box */
.layout-prose .bottom-cta { margin: 56px 0 16px; }
.layout-prose .bottom-cta-box {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 36px 32px;
  text-align: center;
}
.layout-prose .bottom-cta-box h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--ink);
}
.layout-prose .bottom-cta-box p {
  font-size: 16px;
  color: var(--ink-3);
  max-width: 480px;
  margin: 0 auto 22px;
  line-height: 1.6;
}

/* The inline dark CTA pill (used in .bottom-cta-box, also reusable
   in prose). Color is paper-white on dark ink — assert explicitly
   so the prose-link rule doesn't override (the original bug class
   that PR #292 fixed). */

/* Section eyebrow label — extracted from 9 pages that each defined
   identical 11px uppercase labels inline. Pages that need text-align:
   center or a different margin-bottom override inline. */
.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

/* Bottom CTA section — extracted from 10 pages that each defined
   identical centered CTA wrappers inline. */
.cta-section {
  text-align: center;
  padding: 80px var(--section-gutter, 24px);
}
.cta-section h2 {
  font-size: clamp(22px, 2.6vw, 29px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.cta-section p {
  font-size: 16px;
  color: var(--ink-2);
  max-width: 500px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.cta-sub { font-size: 13px; color: var(--ink-3); margin-top: 20px; }

/* Primary CTA button — the sitewide 8px dark-pill. Used as hero CTAs,
   bottom-section CTAs, and inline action buttons across all cream pages.
   Extracted from ~8 page-specific duplicates (.feat-hero-cta, .hiw-cta-btn,
   .about-cta a, .trust-cta a, .btn-primary, etc). */
.cta-inline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink);
  color: #fafaf7;
  border: 1px solid var(--ink);
  border-radius: 8px;
  padding: 15px 18px;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.cta-inline:hover { background: #000; transform: translateY(-1px); }


/* ── Feature hero section ──────────────────────────────────────────── */
.feat-hero {
  padding: 88px var(--section-gutter, 24px) 72px;
  text-align: center;
  background: var(--paper);
}
.feat-hero h1 {
  font-size: clamp(30px, 4.5vw, 48px); font-weight: 900; letter-spacing: -0.02em;
  line-height: 1.1; margin-bottom: 20px; max-width: var(--max); margin-left: auto; margin-right: auto;
}
.feat-hero-sub {
  font-family: var(--serif-accent);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink-3);
  max-width: var(--max);
  margin: 0 auto 32px;
  text-wrap: balance;
}

/* ══════════════════════════════════════════════════════════════════════
   Tier 2 shared patterns — feature-page components
   ══════════════════════════════════════════════════════════════════════
   Extracted from 5 identical /features/* pages. */

/* ── Feature step cards (numbered how-it-works steps) ─────────────── */
.feat-how { padding: 80px var(--section-gutter, 24px); }
.feat-how-inner { max-width: var(--max); margin: 0 auto; }
.feat-how h2 {
  font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; letter-spacing: -0.02em;
  text-align: center; margin-bottom: 48px;
}
.feat-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 24px;
}
.feat-step {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px 24px; position: relative; transition: border-color var(--transition-normal);
}
.feat-step:hover { border-color: var(--line-2); }
.feat-step-num {
  width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; margin-bottom: 16px;
  background: var(--ink); color: #fafaf7;
}
.feat-step h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.feat-step p { font-size: 14px; color: var(--ink-2); line-height: 1.7; }

/* ── Problem statement (2-column grid) ────────────────────────────── */
.feat-problem {
  padding: 72px var(--section-gutter, 24px);
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.feat-problem-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.feat-problem h2 {
  font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.2; margin-bottom: 16px;
}
.feat-problem p { font-size: 15px; color: var(--ink-2); line-height: 1.75; margin-bottom: 12px; }
.feat-problem-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.feat-stat {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px; text-align: center;
}
.feat-stat-num { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 4px; }
.feat-stat-label { font-size: 12px; color: var(--ink-2); }
@media (max-width: 768px) {
  .feat-problem-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Detail card grid ─────────────────────────────────────────────── */
.feat-details {
  padding: 72px var(--section-gutter, 24px);
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.feat-details-inner { max-width: var(--max); margin: 0 auto; }
.feat-details h2 {
  font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; letter-spacing: -0.02em;
  text-align: center; margin-bottom: 48px;
}
.feat-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feat-detail-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px; transition: border-color var(--transition-normal);
}
.feat-detail-card:hover { border-color: var(--line-2); }
.feat-detail-icon { width: 20px; height: 20px; margin-bottom: 12px; }
.feat-detail-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.feat-detail-card p { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
@media (max-width: 640px) {
  .feat-detail-grid { grid-template-columns: 1fr; }
}

/* ── "Explore Other Features" grid ────────────────────────────────── */
.feat-others { padding: 0 var(--section-gutter, 24px) 72px; }
.feat-others-inner { max-width: var(--max); margin: 0 auto; }
.feat-others h3 {
  font-size: 14px; font-weight: 700; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 20px; text-align: center;
}
.feat-others-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 640px; margin: 0 auto;
}
.feat-others-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px; text-decoration: none; transition: border-color var(--transition-normal);
  display: flex; align-items: flex-start; gap: 12px;
}
.feat-others-card:hover { border-color: var(--line-2); }
.feat-others-icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--ink-3); }
.feat-others-card strong { font-size: 14px; font-weight: 700; display: block; margin-bottom: 4px; color: var(--ink); }
.feat-others-card span { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 520px) {
  .feat-others-grid { grid-template-columns: 1fr; }
}

/* Dark callout — reusable across editorial pages. Ink bg, paper text,
   rounded corners. Good for "critical gap" warnings, key takeaways,
   important caveats. Extracted from the laws-by-state mockup. */
.callout-dark {
  background: var(--ink);
  color: #f4f2ef;
  border-radius: 13px;
  padding: 24px 28px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.6;
}
.callout-dark strong,
.layout-prose .article .callout-dark strong { color: #fff; }

/* Article hero image — full-width inside .article at natural aspect
   ratio. display:block prevents inline centering; width:100% + height:
   auto lets the image fill the column without crop or letterbox. */
.article-hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  margin: 24px 0;
}

/* Sticky TOC sidebar — used on longer articles. Turns the article
   into a 2-column layout at desktop (body + sticky sidebar). On
   mobile the sidebar stacks above the body as a normal TOC block. */
.article-with-sidebar {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 32px;
  align-items: start;
}
.article-with-sidebar > * { min-width: 0; }
.article-sidebar {
  position: sticky;
  top: 24px;
  background: var(--paper-2);
  opacity: 0.85;
  border: 0.5px solid var(--ink-3);
  border-radius: 16px;
  padding: 24px;
}
.article-sidebar .toc-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.article-sidebar .toc ol { list-style: none; margin: 0; padding: 0; }
.article-sidebar .toc li { margin-bottom: 8px; }
.article-sidebar .toc a {
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.15s;
}
.article-sidebar .toc a:hover { color: var(--ink); }

@media (max-width: 900px) {
  .article-with-sidebar {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .article-sidebar {
    position: static;
    opacity: 1;
  }
}

/* Related articles block (end of editorial pages) */
.layout-prose .related {
  margin: 48px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
}
.layout-prose .related h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 12px;
}
.layout-prose .related-links { list-style: none; margin: 0; padding: 0; }
.layout-prose .related-links li { margin: 8px 0; padding: 0; }
.layout-prose .related-links a {
  font-size: 15.5px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.15s;
}
.layout-prose .related-links a:hover { color: var(--ink); text-decoration: underline; }


/* ══════════════════════════════════════════════════════════════════════
   7. .layout-product — product/feature page container
   ══════════════════════════════════════════════════════════════════════
   Wider main-content surface than .layout-prose so product pages can
   render screenshots, multi-column feature grids, step diagrams, and
   product-shaped hero sections. Page-specific primitives (.feat-hero,
   .feat-problem, .product-step, etc.) stay inline on individual pages
   until 2-3 product pages exist and common patterns can be extracted
   into shared selectors here.

   --max is overridden to 1000px (global design-tokens.css is 1080)
   so inner containers sit well inside the page-rule hairlines at all
   desktop viewports. /index.html's .section-frame uses 1180px max-width
   + 60px padding = 1060px effective; 1000px here gives a comparable
   content-to-rule gap (~60-70px vs /index's ~50px). */

.layout-product { --max: 1000px; }

   For now, .layout-product only provides:
   - the same shared chrome (top header, page rules, dark footer)
   - a wider, edge-aware main-content container
   - a baseline type ramp for product-specific h1/h2/h3/p */

.layout-product .product-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 60px;
}

/* Baseline type ramp for product pages. Calibrated to match the cream
   home (front-end/index.html — the canonical reference per the UX
   polish pass). Page-specific sections can override by re-declaring
   on their own selectors. */
.layout-product h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 35px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.layout-product h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 29px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.layout-product h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
}
.layout-product p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
}


/* ── 8. Responsive ─────────────────────────────────────────────────── */

/* Hairline collapse breakpoint moved up to 1100px (was 900px) so the
   page rules drop to gutter-mode before content visually touches them
   on intermediate desktop sizes. Content padding stays at 900px so
   it doesn't squish prematurely on tablet-class widths. */
@media (max-width: 1100px) {
  .page::before { left:  24px; }
  .page::after  { right: 24px; }
}


@media (max-width: 1100px) {
  /* Wide footer collapses from 9-col → 4-col before the legacy footer
     does, because 9 cols at 1000px is unworkable. Brand spans full row. */
  .foot-top.foot-top-wide { grid-template-columns: repeat(4, 1fr); gap: 28px 24px; }
  .foot-top.foot-top-wide .foot-brand { grid-column: 1 / -1; }
  .foot-top.foot-top-wide .foot-tagline { max-width: none; }
}

@media (max-width: 900px) {
  .top-inner { padding: 22px 24px; }
  .breadcrumb { padding: 24px 24px 0; }

  .layout-prose .article { padding: 16px 24px 64px; }
  .layout-product .product-main { padding: 0 24px; }

  .foot-inner { padding: 44px 24px 24px; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .foot-top.foot-top-wide { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-tagline { max-width: none; }
}

@media (max-width: 520px) {
  .page::before, .page::after { display: none; }
  .top-inner { padding: 18px 20px; }
  .breadcrumb { padding: 20px 20px 0; font-size: 12.5px; }

  .layout-prose .article { padding: 12px 20px 56px; }
  .layout-prose .article p,
  .layout-prose .article li { font-size: 16px; }
  .layout-prose .at-a-glance li { font-size: 15px; }
  .layout-prose .at-a-glance .meta-row { flex-direction: column; gap: 4px; }
  .layout-prose .compare-table { font-size: 14px; }
  .layout-prose .compare-table th,
  .layout-prose .compare-table td { padding: 10px 12px; }
  .layout-prose .bottom-cta-box { padding: 28px 22px; }

  .layout-product .product-main { padding: 0 20px; }

  .foot-inner { padding: 36px 20px 20px; }
  .foot-top { grid-template-columns: 1fr; gap: 24px; }
  .foot-top.foot-top-wide { grid-template-columns: 1fr; gap: 20px; }
  .foot-bottom { flex-direction: column; gap: 8px; text-align: center; }
}


/* ════════════════════════════════════════════════════════════════════
   ── 9. Marketing v2 layer (opt-in via body.marketing-v2) ──────────
   ════════════════════════════════════════════════════════════════════
   New marketing design system extracted from index.html (PR #449
   redesign). Pages opt in by adding `marketing-v2` to <body class>.
   - Page-edge hairlines suppressed (the "pencil border" effect that
     anchored the old editorial layout)
   - Top header band widens (1340px / 24px 70px) and loses its bottom
     divider so it reads as a continuous element with the hero
   - .page grid collapses to block flow so footer doesn't stretch
   Existing pages that DON'T opt in keep the legacy editorial behavior
   exactly as-is — no global behavior change.

   Class-scoped components (.v2-email-form, .v2-submit, .v2-spin, etc.)
   below are NOT body-gated — the class names themselves are the opt-in,
   so any page that adds <form class="v2-email-form"> or <button
   class="v2-submit"> picks them up.
   ════════════════════════════════════════════════════════════════════ */

/* Tokens added under :root so they remain available even outside the
   gated body (since .v2-submit color uses --cta-bg). Color values match
   the index inline definitions. */
:root {
  --autopilot:    #3f20c4;
  --autopilot-d:  #2f17a0;
  --cta-bg:       #0e0e10;
  --cta-bg-h:     #1a1a1c;
  --container:    1200px;
  --pad-x:        56px;
  --pad-x-sm:     24px;
}

/* ── Gated page-frame overrides ──────────────────────────────────────
   These flip the editorial-default frame off for marketing-v2 pages
   only. /learn and other consumers of editorial.css stay unaffected. */
body.marketing-v2 .page::before,
body.marketing-v2 .page::after { display: none; }

body.marketing-v2 .top { border-bottom: 0; }

/* editorial.css makes .page a grid with grid-template-rows: auto 1fr
   auto so footer slots into the third row. On marketing-v2 the footer
   is chrome.js-injected OUTSIDE .page, so the 1fr middle stretches
   <main> to viewport height when content is short. Block flow fixes it. */
body.marketing-v2 .page { display: block; min-height: 0; }

/* Header band: wider container, tighter horizontal padding, matches the
   homepage chrome. Mobile breakpoints duplicated under the same gated
   selector — the body.marketing-v2 prefix wins on specificity over the
   ungated .top-inner mobile rules in editorial.css §8 above, so those
   wouldn't apply otherwise. */
body.marketing-v2 .top-inner {
  max-width: 1340px;
  padding: 24px 70px;
}
@media (max-width: 900px) {
  body.marketing-v2 .top-inner { padding: 22px 24px; max-width: none; }
}
@media (max-width: 520px) {
  body.marketing-v2 .top-inner { padding: 18px 20px; }
}

/* Shared fluid container used by marketing-v2 page sections. */
body.marketing-v2 .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
@media (max-width: 720px) {
  body.marketing-v2 .container { padding: 0 var(--pad-x-sm); }
}

/* ════════════════════════════════════════════════════════════════════
   Marketing nav (added 2026-06-01)
   Full right cluster — 3 text links + Log In (icon-swap on mobile)
   + black pill CTA. Plus mobile hamburger drop-down panel.
   Class-scoped — these class names only exist in the new nav markup
   that ships on marketing-v2 pages, so no body.marketing-v2 prefix
   is needed. Design rationale + final decisions at:
   ~/.gstack/projects/rmt99e-patriot-scanner/robthorpe-main-design-20260531-171519-marketing-nav.md
   ════════════════════════════════════════════════════════════════════ */

/* Right cluster — 4 items on desktop, uniform 24px gap. */
.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-link {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.15s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active {
  color: var(--ink);
  font-weight: 600;
}

/* Log In: text by default, head-and-shoulders icon at ≤768px.
   aria-label="Log in" on the <a> keeps screen readers happy. */
.login-link {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.login-icon {
  display: none;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
}
.login-link:hover .login-icon { color: var(--ink); }

/* Filled black pill CTA — mirrors .v2-submit but compact for nav
   context (38px height vs the larger 44px hero/section context). */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: var(--cta-bg);
  border: 0;
  border-radius: 999px;
  height: 38px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s;
}
.nav-cta:hover { background: var(--cta-bg-h); }
.nav-cta .arrow { transition: transform 0.15s; display: inline-block; }
.nav-cta:hover .arrow { transform: translateX(2px); }
.nav-cta .label-short { display: none; }

/* Hamburger toggle. Hidden on desktop, shown at ≤768px. Three bars
   morph into X when aria-expanded="true". */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  margin-left: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  margin: 5px 0;
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile drop-down panel. Sits inside .top, slides open via max-height
   + padding so it doesn't pop. aria-hidden handles assistive tech. */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  padding: 0 24px;
  border-top: 1px solid transparent;
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-top-color 0.2s ease;
}
.top.menu-open .mobile-menu {
  max-height: 240px;
  padding: 8px 24px 20px;
  border-top-color: var(--paper-2);
}
.mobile-menu .nav-link {
  display: block;
  padding: 14px 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--paper-2);
}
.mobile-menu .nav-link:last-child { border-bottom: 0; }

/* Focus-visible — keyboard tab outline, no mouse-click outline. */
.nav-link:focus-visible,
.login-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 2px;
}
.nav-cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.nav-toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: none; }
  .nav-toggle span { transition: none; }
  .nav-cta .arrow { transition: none; }
}

/* ── Mobile breakpoints ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-right .nav-link.hide-mobile { display: none; }
  /* Asymmetric gaps so visual rhythm matches: icon → CTA 16px,
     CTA → hamburger 8px (compensates for ☰ button's 8px left pad). */
  .nav-right { gap: 0; }
  .nav-right .nav-link + .nav-cta  { margin-left: 16px; }
  .nav-right .nav-cta + .nav-toggle { margin-left: 8px; }
  .nav-toggle { display: block; }
  .nav-cta { padding: 8px 12px; font-size: 13px; gap: 6px; height: 36px; }
  /* Log In text → icon swap. */
  .login-text { display: none; }
  .login-icon { display: inline-flex; }
}
@media (max-width: 480px) {
  .nav-right .nav-link + .nav-cta  { margin-left: 12px; }
  .nav-right .nav-cta + .nav-toggle { margin-left: 6px; }
  .nav-cta { padding: 7px 10px; gap: 4px; }
  .nav-toggle { padding: 6px; }
  .nav-toggle span { width: 20px; }
}
@media (max-width: 400px) {
  /* Smallest phones: swap CTA copy "Run a free scan" → "Free scan". */
  .nav-cta .label-full { display: none; }
  .nav-cta .label-short { display: inline; }
}

/* Base body styling for marketing-v2 — sans family, paper bg, ink-2
   color. Existing pages that don't opt in keep their own body defaults. */
body.marketing-v2 {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
}
body.marketing-v2 main { display: block; }
/* img reset deliberately uses `max-width: 100%` without `height: auto`
   so editorial.css's `.wordmark img { height: 28px }` (same specificity,
   loaded earlier) keeps the header lockup at its intended size. Images
   inside v2 sections set explicit height where needed. */
body.marketing-v2 img { max-width: 100%; display: block; }
/* No `a { color: inherit }` reset — browsers already inherit color by
   default through the cascade, and asserting it under body.marketing-v2
   here would have (0,1,1) specificity and would override page-scoped
   anchor color rules like .hiw-link { color: #3f20c4 } that only have
   (0,1,0). */


/* ── Marketing v2 content primitives (PR #464, Cluster F) ────────────
   Canonical content-layer components extracted from /use-cases/
   professions/election-workers. Use these on any marketing-v2 page so
   sections/heroes/headings/body copy/eyebrows feel cohesive across the
   site without per-page redefinition.

   Naming mirrors .v2-submit / .v2-email-form — class IS the opt-in,
   not body-gated, so any element with .v2-section etc. picks them up
   regardless of whether the body has the marketing-v2 modifier.

   Composition:
     <section class="v2-section">
       <div class="v2-eyebrow">EYEBROW</div>
       <h2 class="v2-h2">Section heading</h2>
       <p class="v2-body">Body copy paragraph...</p>
     </section>

   Hero composition:
     <section class="v2-hero">
       <div class="v2-hero-inner">
         <div class="v2-hero-eyebrow">EYEBROW</div>
         <h1>Hero headline</h1>
         <p class="v2-hero-sub">Subhead.</p>
         <a class="v2-submit" href="…">…</a>
       </div>
     </section>
*/

.v2-section {
  max-width: var(--max);   /* 1080px from design-tokens.css */
  margin: 0 auto;
  padding: 80px 24px;
}

.v2-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}

.v2-h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 16px;
}

.v2-body {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto 16px;
}

.v2-page-hero {
  padding: 72px 24px 64px;
  text-align: center;
  background: var(--paper);
}
.v2-page-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}
.v2-page-hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.v2-page-hero h1 {
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 20px;
}
.v2-page-hero-sub {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto 32px;
}


/* ── Marketing v2 email form ─────────────────────────────────────────
   Email field + button SIDE BY SIDE in a rounded white pill. Opt-in by
   markup — <form class="v2-email-form"> + <button class="v2-submit">.
   No body-class gate (the class IS the gate). */
.v2-email-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 460px;
  margin: 40px 0 0;
}
.v2-email-form .v2-field {
  flex: 1;
  min-width: 0;
}
.v2-email-form input[type="email"] {
  width: 100%;
  padding: 12px 18px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--autopilot);
  border-radius: 999px;
  outline: none;
  transition: border-color 0.15s;
  height: 44px;
  box-sizing: border-box;
}
.v2-email-form input[type="email"]:focus { border-color: var(--autopilot-d); }
.v2-email-form input[type="email"]::placeholder { color: var(--ink-4); }

/* .v2-submit — standalone pill CTA. Works inside .v2-email-form (the
   flex:0 0 auto modifier below adapts it to the row) and as a bare
   <a>/<button> in any marketing-v2 section. */
.v2-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: var(--cta-bg);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
  height: 44px;
  text-decoration: none;
}
.v2-submit:hover { background: var(--cta-bg-h); }
.v2-submit:disabled { opacity: 0.7; cursor: default; }
.v2-submit .arrow { transition: transform 0.15s; }
.v2-submit:hover .arrow { transform: translateX(2px); }
.v2-email-form .v2-submit { flex: 0 0 auto; }

.v2-spin {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  display: none;
  animation: v2-spin 0.8s linear infinite;
}
.v2-email-form.is-loading .v2-spin { display: inline-block; }
.v2-email-form.is-loading .arrow { display: none; }
@keyframes v2-spin { to { transform: rotate(360deg); } }
.v2-form-error {
  display: none;
  color: var(--paper-accent, #c96442);
  font-size: 13px;
  margin-top: 8px;
}
.v2-form-error.show { display: block; }
.v2-form-success {
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--line);
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-top: 12px;
  max-width: 460px;
}

