/* Marketing surface stylesheet.
 *
 * Ports `knowledge-navigator/src/styles.css` into a standalone stylesheet
 * that opt-in templates load alongside the existing Tailwind build.
 * Keeps the marketing oklch palette + custom utilities out of the
 * product surfaces (admin / tenant sites).
 *
 * Notes:
 * - Tailwind utilities used in templates resolve via the existing
 *   `static/dist/css/main.css` build (the Tailwind config already scans
 *   templates/**\/*.html so marketing classes are picked up).
 * - Tokens here power CSS-custom-property utilities like `var(--accent)`
 *   that the React app referenced directly. Same names, same values.
 */

:root.marketing,
.marketing {
  /* Paper-warm institutional palette (light, default) */
  --background: oklch(0.985 0.005 85);
  --foreground: oklch(0.18 0.012 70);
  --card: oklch(0.99 0.004 85);
  --card-foreground: oklch(0.18 0.012 70);
  --primary: oklch(0.22 0.015 70);
  --primary-foreground: oklch(0.98 0.005 85);
  --secondary: oklch(0.95 0.008 80);
  --secondary-foreground: oklch(0.22 0.015 70);
  --muted: oklch(0.945 0.008 80);
  --muted-foreground: oklch(0.48 0.012 70);
  --accent: oklch(0.42 0.09 35);            /* deep sienna ink */
  --accent-foreground: oklch(0.98 0.005 85);
  --rule: oklch(0.32 0.015 70);
  --ink-faint: oklch(0.7 0.012 70);
  --destructive: oklch(0.5 0.18 27);
  --border: oklch(0.88 0.01 75);
  /* Warm-tan placeholder fill borrowed from the Abide tenant template
     (--paper-warm there). Used as the base for marketing still
     placeholder blocks so they read editorial, not "loading state". */
  --paper-warm: oklch(0.93 0.012 78);

  /* Font stack */
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* --- Search / assistant widget tokens -------------------------------
     Centralised here (were duplicated across marketing-search.css and
     marketing-assistant.css). Values unchanged.

     --mkt-acc is deliberately NOT var(--accent): it is a CHROME FILL, while
     --accent is an INK. Light #b5532b = oklch(0.559 0.138 41) vs --accent
     oklch(0.42 0.09 35) — lighter, ~53% more saturated, because it sits
     behind white text instead of on paper. Do not collapse the two.

     --s1/2/3 are a CATEGORICAL source-type palette (terracotta / steel blue /
     ochre) encoding WHICH KIND of source a citation is. They are not accent
     variants and must not be derived from --accent. */
  --mkt-acc: #b5532b;
  --mkt-acc-fg: #f7efe3;
  --s1-fg: #a84d28; --s1-line: #b5532b;
  --s2-fg: #2f6e9e; --s2-line: #3f7daa;
  --s3-fg: #8a6b1c; --s3-line: #a07d22;

  /* --- Scale tokens (added 2026-07-19) --------------------------------
     These had no tokens at all; every value was a literal. Only EXACT
     matches were migrated — off-scale outliers are listed below and left
     alone rather than silently rounded onto the scale. */

  /* Radius. The system is square by design; buttons carry an explicit
     `border-radius: 0` reset. Off-scale today (deliberate, not migrated):
     5px (×2) and 6px (×1) — decide these, don't round them. The nav
     brandmark's 3px is the one sanctioned break from square and maps to
     --radius-chip. */
  --radius-0: 0;
  --radius-hair: 2px;
  --radius-chip: 3px;
  --radius-dot: 50%;

  /* Motion. `ease` and `linear` remain where they are; only the named
     house curve is tokenised. */
  --dur-fast: .15s;
  --dur-base: .2s;
  --ease-out: cubic-bezier(.2,.6,.2,1);

  /* The apricot highlight used on dark bands (hover borders, hub dots). */
  --accent-hi: oklch(0.82 0.13 55);

  /* Phone gutter — was repeated raw as 22px in four places. */
  --page-gutter-phone: 22px;

  /* Shadow. NOT migrated: four "lifted plate" shadows differ slightly
     (-34px/.42, -34px/.4, -26px/.42, -28px/.4). Collapsing them onto one
     token moves 1-2px, so it is a deliberate visual change, not part of a
     zero-pixel refactor. --shadow-plate records the intended canonical
     value for when that change is made. */
  --shadow-plate: 0 22px 60px -34px rgba(38, 28, 20, 0.42);

  /* NOTE: --mkt-tint and --mkt-soft are deliberately NOT centralised here.
     They are DERIVED (color-mix over --muted / --foreground), and a custom
     property resolves against the element it is DECLARED on. `.v.dark` bands
     locally flip --background/--foreground, so declaring these globally would
     silently change their value for any widget rendered inside such a band.
     They stay on the widget roots. */
}

/* NOTE: a second, generic shadcn-slate dark palette used to live here, on
   `.marketing--dark` / `.marketing-dark .marketing` / `.marketing[data-theme="dark"]`.
   It was DEAD CODE: `.marketing` sits on <body> while `data-theme` is set on
   <html>, so that compound selector could never match, and the other two class
   names appear nowhere in the repo. It was also cool blue-grey and set --accent
   to a blue-grey SURFACE, which would have destroyed the sienna. The real dark
   theme is the warm espresso ladder under `html.dark .marketing` further down.
   Removed 2026-07-19; see docs/brand-design-system.md §2.3. */

/* Scope all marketing styles under the `.marketing` body class so the
 * product / admin / tenant surfaces are unaffected. */
.marketing {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

.marketing ::selection {
  background: var(--accent);
  color: var(--accent-foreground);
}

/* Typography */
.marketing .font-serif {
  font-family: var(--font-serif);
  font-feature-settings: "liga", "dlig";
}

.marketing .font-mono { font-family: var(--font-mono); }

/* Custom utilities (mirror styles.css @layer utilities) */
.marketing .text-balance { text-wrap: balance; }
.marketing .text-pretty  { text-wrap: pretty; }

.marketing .rule-hair {
  border-color: color-mix(in oklch, var(--rule) 18%, transparent);
}

.marketing .ink-rule {
  background: var(--rule);
}

.marketing .grain {
  background-image:
    radial-gradient(oklch(0.18 0.012 70 / 0.035) 1px, transparent 1px);
  background-size: 3px 3px;
}

.marketing .num-tabular { font-variant-numeric: tabular-nums; }

/* Optional reveal helper (used by `[data-reveal]` blocks). The React
 * Reveal component used Framer Motion stagger animations — here we
 * provide a single CSS keyframe with `prefers-reduced-motion` opt-out.
 */
@media (prefers-reduced-motion: no-preference) {
  .marketing [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    animation: marketing-reveal 0.7s ease-out forwards;
    animation-delay: var(--reveal-delay, 0s);
  }
}
@keyframes marketing-reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Semantic color utilities (bg-foreground, text-muted-foreground, etc.)
 * are generated by Tailwind from `theme.extend.colors` in
 * `tailwind.config.js`. They resolve to the `var(--…)` tokens defined
 * above when the `.marketing` body class is active. */

/* Border-color default for marketing children — same idea as the
 * React app's `* { border-color: var(--color-border) }` base layer. */
.marketing *, .marketing *::before, .marketing *::after {
  border-color: var(--border);
}


/* ─────────────────────────────────────────────────────────────────
   Still placeholders (hero S1-S5 slots, builder template thumbs,
   Loom slot, church-pilot logo slot). Mirrors the Abide tenant
   pattern: warm-tan fill + 1px hairline ring + diagonal stripe
   overlay + lowercase mono label at bottom-left. Layout is held by
   `aspect-ratio` so the slot keeps its size before/after capture.
   ───────────────────────────────────────────────────────────────── */
.marketing .still-placeholder {
  position: relative;
  display: block;
  background: var(--paper-warm);
  border: 1px solid color-mix(in oklch, var(--rule) 18%, transparent);
  overflow: hidden;
  margin: 0;
  width: 100%;
}

.marketing .still-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in oklch, var(--paper-warm) 94%, var(--foreground)) 0 1px,
    transparent 1px 9px
  );
  pointer-events: none;
}

.marketing .still-placeholder > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}

.marketing .still-placeholder > figcaption {
  position: absolute;
  left: 12px; bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: color-mix(in oklch, var(--foreground) 55%, transparent);
  text-transform: lowercase;
  z-index: 0;
  pointer-events: none;
}

/* The 5-still strip below the hero — equal-width row on desktop,
   horizontal scroll on mobile so the editorial line stays intact. */
.marketing .still-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .marketing .still-strip {
    grid-template-columns: repeat(5, 200px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .marketing .still-strip > * { scroll-snap-align: start; }
}

/* Loom slot frame (16:9, slightly recessed against the section). */
.marketing .loom-slot {
  position: relative;
  aspect-ratio: 16 / 9;
  background: color-mix(in oklch, var(--muted) 60%, var(--background));
  border: 1px solid color-mix(in oklch, var(--rule) 18%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.marketing .loom-slot > .loom-slot-fallback {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  padding: 24px;
}


/* ─────────────────────────────────────────────────────────────────
   Legal-document template, ported from Refine Loracta(2).zip and
   scoped under `.marketing` so admin and tenant surfaces are untouched.
   ───────────────────────────────────────────────────────────────── */
.marketing.legal-doc {
  --legal-hair: color-mix(in oklch, var(--rule) 18%, transparent);
  --legal-ink-faint: color-mix(in oklch, var(--foreground) 36%, transparent);
  --legal-paper: color-mix(in oklch, var(--background) 92%, white);
}

.marketing .legal-wrap {
  width: min(1180px, calc(100% - 80px));
  margin: 0 auto;
}

.marketing .legal-masthead {
  border-bottom: 1px solid var(--legal-hair);
  background: color-mix(in oklch, var(--muted) 45%, transparent);
}

.marketing .legal-masthead-inner { padding: 52px 0 0; }

.marketing .legal-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted-foreground);
}

.marketing .legal-kicker-mark { color: var(--accent); }
.marketing .legal-kicker-grow {
  flex: 1;
  min-width: 32px;
  height: 1px;
  background: var(--rule);
  opacity: 0.2;
}

.marketing .legal-masthead h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.65rem, 6vw, 3.75rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  margin: 20px 0 0;
  max-width: 20ch;
  text-wrap: balance;
  color: var(--foreground);
}

.marketing .legal-deck {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted-foreground);
  max-width: 62ch;
  margin-top: 22px;
  text-wrap: pretty;
}

.marketing .legal-ledger {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--legal-hair);
}

.marketing .legal-ledger-cell {
  min-width: 0;
  padding: 16px 22px 18px;
  border-right: 1px solid var(--legal-hair);
}

.marketing .legal-ledger-cell:first-child { padding-left: 0; }
.marketing .legal-ledger-cell:last-child {
  border-right: 0;
  padding-right: 0;
}

.marketing .legal-ledger-key {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-foreground);
}

.marketing .legal-ledger-value {
  font-family: var(--font-serif);
  font-size: 16px;
  margin-top: 8px;
  line-height: 1.25;
  color: var(--foreground);
}

.marketing .legal-ledger-value small {
  display: block;
  font-size: 11.5px;
  color: var(--muted-foreground);
  font-style: italic;
  margin-top: 2px;
}

.marketing .legal-document { padding: 0; }
.marketing .legal-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 56px;
  padding: 56px 0 88px;
  align-items: start;
}

.marketing .legal-toc {
  position: sticky;
  top: 90px;
}

.marketing .legal-toc-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted-foreground);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--legal-hair);
  margin-bottom: 10px;
}

.marketing .legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: legal-toc;
}

.marketing .legal-toc li { counter-increment: legal-toc; }

.marketing .legal-toc a,
.marketing .legal-toc button {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 6px;
  align-items: baseline;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  text-decoration: none;
  padding: 7px 0;
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.3;
  transition: color 0.15s;
}

.marketing .legal-toc button { cursor: pointer; }

.marketing .legal-toc ol a::before {
  content: counter(legal-toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--legal-ink-faint);
  letter-spacing: 0.04em;
}

.marketing .legal-toc a:hover,
.marketing .legal-toc button:hover,
.marketing .legal-toc a.active { color: var(--foreground); }
.marketing .legal-toc a.active::before { color: var(--accent); }

.marketing .legal-toc-aux {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--legal-hair);
  display: grid;
  gap: 8px;
}

.marketing .legal-toc-aux a,
.marketing .legal-toc-aux button {
  grid-template-columns: 1fr;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 3px 0;
}

.marketing .legal-toc-aux a::before { content: none; }

.marketing .legal-body {
  max-width: 760px;
  min-width: 0;
}

.marketing .legal-lead {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.6;
  color: color-mix(in oklch, var(--foreground) 92%, transparent);
  text-wrap: pretty;
}

.marketing .legal-lead + .legal-lead { margin-top: 18px; }

.marketing .legal-clause {
  margin-top: 56px;
  scroll-margin-top: 88px;
}

.marketing .legal-clause:first-of-type { margin-top: 8px; }

.marketing .legal-clause-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid var(--foreground);
  padding-top: 16px;
}

.marketing .legal-clause-num {
  flex-shrink: 0;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.05em;
}

.marketing .legal-clause h2,
.marketing .legal-body h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.016em;
  margin: 0;
  color: var(--foreground);
  text-wrap: balance;
}

.marketing .legal-clause h3,
.marketing .legal-body h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--foreground);
  margin: 28px 0 0;
}

.marketing .legal-body p,
.marketing .legal-body li,
.marketing .legal-body dd {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.62;
  color: color-mix(in oklch, var(--foreground) 88%, transparent);
  text-wrap: pretty;
}

.marketing .legal-body p { margin: 18px 0 0; }
.marketing .legal-body ul,
.marketing .legal-body ol {
  margin: 14px 0 0;
  padding-left: 1.35em;
}
.marketing .legal-body li + li { margin-top: 0.4em; }
.marketing .legal-body li::marker { color: var(--accent); }

.marketing .legal-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklch, var(--accent) 40%, transparent);
}
.marketing .legal-body a:hover { text-decoration-thickness: 1.5px; }
.marketing .legal-inline-button {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.marketing .legal-body strong { font-weight: 600; }
.marketing .legal-body em { font-style: italic; }

.marketing .legal-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--muted);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-chip);
}

.marketing .legal-summary {
  margin: 22px 0 4px;
  border-left: 2px solid var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, transparent);
  padding: 14px 18px 15px;
}

.marketing .legal-summary-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.marketing .legal-summary p {
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  margin: 7px 0 0;
  color: var(--foreground);
}

.marketing .legal-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-top: 22px;
}

.marketing .legal-table {
  width: 100%;
  min-width: 580px;
  border: 1px solid var(--legal-hair);
  border-collapse: collapse;
  background: var(--legal-paper);
}

.marketing .legal-table caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-foreground);
}

.marketing .legal-table th,
.marketing .legal-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--legal-hair);
  vertical-align: top;
}

.marketing .legal-table thead th {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted-foreground);
  font-weight: 400;
  background: color-mix(in oklch, var(--muted) 40%, transparent);
}

.marketing .legal-table tbody th {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 15px;
  width: 30%;
  color: var(--foreground);
}

.marketing .legal-table td {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.5;
  color: color-mix(in oklch, var(--foreground) 85%, transparent);
}

.marketing .legal-table tr:last-child th,
.marketing .legal-table tr:last-child td { border-bottom: 0; }

.marketing .legal-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
  padding: 1px 6px;
  white-space: nowrap;
}

.marketing .legal-card {
  margin-top: 22px;
  border: 1px solid var(--legal-hair);
  background: color-mix(in oklch, var(--muted) 35%, transparent);
}

.marketing .legal-card-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--legal-hair);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-foreground);
}

.marketing .legal-card-strip b {
  color: var(--foreground);
  font-weight: 500;
}

.marketing .legal-card-body {
  padding: 18px 18px 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 32px;
}

.marketing .legal-def-key {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted-foreground);
}

.marketing .legal-def-value {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.45;
  margin-top: 5px;
}

.marketing .legal-rights-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--legal-hair);
}

.marketing .legal-right-item {
  padding: 18px 20px;
  border-right: 1px solid var(--legal-hair);
  border-bottom: 1px solid var(--legal-hair);
}

.marketing .legal-right-item:nth-child(2n) { border-right: 0; }

.marketing .legal-right-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.marketing .legal-right-art {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.06em;
}

.marketing .legal-right-item h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16.5px;
  margin: 0;
  letter-spacing: -0.01em;
}

.marketing .legal-right-item p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted-foreground);
  margin: 8px 0 0;
}

.marketing .legal-contact {
  margin-top: 26px;
  border: 1px solid var(--legal-hair);
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  background: color-mix(in oklch, var(--muted) 30%, transparent);
}

.marketing .legal-contact-text {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
  max-width: 48ch;
}

.marketing .legal-button {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 11px 16px;
  background: var(--foreground);
  color: var(--background);
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
}

.marketing .legal-button:hover { background: var(--accent); }

.marketing .legal-changelog { margin-top: 30px; }
.marketing .legal-changelog-row {
  display: grid;
  grid-template-columns: 130px 90px minmax(0, 1fr);
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--legal-hair);
  align-items: baseline;
}
.marketing .legal-changelog-row:last-child { border-bottom: 1px solid var(--legal-hair); }
.marketing .legal-changelog-date,
.marketing .legal-changelog-version {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.marketing .legal-changelog-date { color: var(--muted-foreground); }
.marketing .legal-changelog-version { color: var(--accent); }
.marketing .legal-changelog-note {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.5;
  color: color-mix(in oklch, var(--foreground) 85%, transparent);
}

@media (max-width: 900px) {
  .marketing .legal-wrap { width: min(100% - 48px, 1180px); }
  .marketing .legal-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .marketing .legal-toc {
    position: static;
    margin-bottom: 36px;
  }
  .marketing .legal-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing .legal-ledger-cell {
    border-bottom: 1px solid var(--legal-hair);
    padding-left: 0;
    padding-right: 14px;
  }
  .marketing .legal-ledger-cell:nth-child(2n) { border-right: 0; }
  .marketing .legal-card-body,
  .marketing .legal-rights-grid { grid-template-columns: 1fr; }
  .marketing .legal-right-item { border-right: 0; }
  .marketing .legal-changelog-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 560px) {
  .marketing .legal-wrap { width: min(100% - 32px, 1180px); }
  .marketing .legal-kicker {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .marketing .legal-kicker-grow { display: none; }
  .marketing .legal-ledger { grid-template-columns: 1fr; }
  .marketing .legal-ledger-cell {
    border-right: 0;
    padding: 14px 0 16px;
  }
  .marketing .legal-table { min-width: 520px; }
  .marketing .legal-contact { align-items: flex-start; }
}

/* Refine Loracta(3) marketing page port. Scoped to the Flask marketing shell. */
.marketing .rv3 {
  --hair: color-mix(in oklch, var(--rule) 18%, transparent);
  /* Defined in BOTH themes as of 2026-07-19. `var(--muted-fg)` is used 73x with
     no fallback; leaving it undefined here made every one of those declarations
     invalid-at-computed-value-time, so `color` fell back to `inherit` and the
     LIGHT theme — the default — had no secondary-text tone at all. Matches
     --muted-foreground. See docs/brand-design-system.md §2.6. */
  --muted-fg: oklch(0.48 0.012 70);
  /* Same defect as --muted-fg: used 4x, defined only in dark. Three of those
     call sites had no fallback, so "good" badges rendered in body-text colour
     in light mode. #3a7a3a is not invented — it is the light value the codebase
     had already chosen at the one call site that DID carry a fallback
     (`var(--good, #3a7a3a)`), which is now redundant. */
  --good: #3a7a3a;
  --ink-dark: oklch(0.15 0.012 70);
  width: 100%;
  overflow-x: clip;
}
.marketing .rv3 button.btn-primary,
.marketing .rv3 button.btn-ghost,
.marketing .rv3 button.btn-link {
  appearance: none;
  border-radius: 0;
  cursor: pointer;
  font: inherit;
}
.marketing .rv3 .chip.quiet {
  border: 0;
  color: var(--ink-faint);
}
.marketing .rv3 * {box-sizing: border-box;}
.marketing .rv3 .serif {font-family: var(--font-serif); font-feature-settings: "liga","dlig";}
.marketing .rv3 .mono {font-family: var(--font-mono);}
.marketing .rv3 ::selection {background: var(--accent); color: var(--background);}
.marketing .rv3 a {color: inherit;}
.marketing .rv3 img {display:block; max-width:100%;}
.marketing .rv3 .wrap {max-width: 1260px; margin: 0 auto; padding: 0 40px;}
.marketing .rv3 .mono-label {font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .22em; color: var(--muted-fg);}
.marketing .rv3 .brandmark {display:flex; align-items: baseline; gap: 8px; text-decoration: none;}
.marketing .rv3 .brandmark .nm {font-family: var(--font-serif); font-size: 22px; letter-spacing: -0.01em;}
.marketing .rv3 .brandmark .dot {width: 6px; height: 6px; background: var(--accent); display:inline-block; transform: translateY(-1px);}
.marketing .rv3 .lang-toggle {display:flex; border: 1px solid var(--hair);}
.marketing .rv3 .lang-toggle button {font-family: var(--font-mono);
    font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
    padding: 6px 9px; background: transparent; border: none; color: var(--muted-fg);
    cursor: pointer; transition: background .15s, color .15s;}
.marketing .rv3 .lang-toggle button + button {border-left: 1px solid var(--hair);}
.marketing .rv3 .lang-toggle button[aria-pressed="true"] {background: var(--foreground); color: var(--background);}
.marketing .rv3 .btn-primary {font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    padding: 11px 16px; background: var(--foreground); color: var(--background);
    text-decoration: none; display: inline-flex; align-items:center; gap:8px;
    transition: background .15s; white-space: nowrap;}
.marketing .rv3 .btn-primary:hover {background: var(--accent);}
.marketing .rv3 .btn-primary.invert {background: var(--background); color: var(--foreground);}
.marketing .rv3 .btn-primary.invert:hover {background: var(--accent); color: var(--background);}
.marketing .rv3 .btn-link {font-family: var(--font-sans); font-size: 13px; color: var(--foreground);
    text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--ink-faint);
    white-space: nowrap;}
.marketing .rv3 .btn-ghost {font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: .16em;
    padding: 9px 14px; border: 1px solid var(--hair); color: var(--foreground); text-decoration: none;
    display:inline-flex; align-items:center; gap:8px; transition: border-color .15s, background .15s;}
.marketing .rv3 .btn-ghost:hover {border-color: var(--accent); background: color-mix(in oklch, var(--accent) 6%, transparent);}
.marketing .rv3 section.v {border-bottom: 1px solid var(--hair); position: relative;}
.marketing .rv3 section.v.dark {background: var(--foreground); color: var(--background);}
.marketing .rv3 section.v.muted {background: color-mix(in oklch, var(--muted) 55%, var(--background));}
.marketing .rv3 .sec-pad {padding: 92px 0;}
.marketing .rv3 .sec-pad-sm {padding: 64px 0;}
.marketing .rv3 .seclabel {display:flex; align-items:center; gap: 14px;}
.marketing .rv3 .seclabel .mono-label .ix {color: var(--accent);}
.marketing .rv3 .seclabel .grow {flex:1; height:1px; background: var(--rule); opacity:.18;}
.marketing .rv3 .v.dark .seclabel .grow {background: var(--background); opacity:.22;}
.marketing .rv3 .v.dark .mono-label {color: color-mix(in oklch, var(--background) 60%, transparent);}
.marketing .rv3 .v.dark .seclabel .mono-label .ix {color: oklch(0.78 0.12 55);}
.marketing .rv3 h2.h2 {font-family: var(--font-serif); font-weight: 400;
    font-size: 50px; line-height: 1.03; letter-spacing: -0.02em;
    margin: 18px 0 0; text-wrap: balance;}
.marketing .rv3 h2.h2 em {font-style: italic; color: var(--accent);}
.marketing .rv3 .v.dark h2.h2 em {color: var(--accent-hi);}
.marketing .rv3 .lede {font-family: var(--font-serif); font-size: 16px; line-height: 1.55; color: var(--muted-fg); max-width: 52ch; text-wrap: pretty;}
.marketing .rv3 .v.dark .lede {color: color-mix(in oklch, var(--background) 66%, transparent);}
.marketing .rv3 .head-grid {display:grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: end; margin-top: 26px;}
.marketing .rv3 .plate {border: 1px solid var(--hair); background: color-mix(in oklch, var(--muted) 30%, transparent);}
.marketing .rv3 .plate.elevated {box-shadow: 0 18px 50px -28px rgba(0,0,0,0.4);}
.marketing .rv3 .plate.dark {border-color: color-mix(in oklch, var(--background) 22%, transparent); background: color-mix(in oklch, var(--background) 4%, transparent);}
.marketing .rv3 .plate-strip {display:flex; justify-content: space-between; align-items:center; gap: 12px;
    padding: 12px 18px; border-bottom: 1px solid var(--hair);
    font-family: var(--font-mono);
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .18em; color: var(--muted-fg);}
.marketing .rv3 .plate.dark .plate-strip {border-bottom-color: color-mix(in oklch, var(--background) 20%, transparent); color: color-mix(in oklch, var(--background) 55%, transparent);}
.marketing .rv3 .plate-strip .left {display:flex; align-items:center; gap: 12px; min-width:0;}
.marketing .rv3 .plate-strip .fig {color: var(--accent);}
.marketing .rv3 .plate.dark .plate-strip .fig {color: var(--accent-hi);}
.marketing .rv3 .plate-strip .sep {opacity:.4;}
.marketing .rv3 .plate-strip .label {color: var(--foreground); overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}
.marketing .rv3 .plate.dark .plate-strip .label {color: color-mix(in oklch, var(--background) 85%, transparent);}
.marketing .rv3 .plate-strip .badge {font-size: 9px; padding: 2px 6px; border:1px solid color-mix(in oklch, var(--good) 35%, transparent); color: var(--good);}
.marketing .rv3 .plate-caption {padding: 14px 18px; border-top: 1px solid var(--hair);
    font-family: var(--font-serif); font-size: 14px; line-height: 1.5;
    color: color-mix(in oklch, var(--foreground) 75%, transparent); text-wrap: pretty;}
.marketing .rv3 .plate-caption b {color: var(--foreground); font-weight: 500;}
.marketing .rv3 .hero-meta {display:flex; align-items:center; gap: 14px; margin-bottom: 34px;}
.marketing .rv3 .hero-meta .grow {flex:1; height:1px; background: var(--rule); opacity:.2;}
.marketing .rv3 .hero-head {font-family: var(--font-serif); font-weight: 400;
    letter-spacing: -0.022em; margin: 0; text-wrap: balance;}
.marketing .rv3 .hero-head em {font-style: italic; color: var(--accent);}
.marketing .rv3 .hero-deck {font-family: var(--font-serif); font-size: 16.5px; line-height: 1.6; color: var(--muted-fg); text-wrap: pretty;}
.marketing .rv3 .hero-deck b {color: var(--foreground); font-weight: 500;}
.marketing .rv3 .hero-b .grid {display:grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--hair);}
.marketing .rv3 .hero-b .col-left {padding: 70px 56px 70px 0; border-right: 1px solid var(--hair);}
.marketing .rv3 .hero-b .col-left h1 {font-size: 58px; line-height: 1.0;}
.marketing .rv3 .hero-b .col-left .hero-deck {margin-top: 26px; max-width: 44ch;}
.marketing .rv3 .hero-b .col-left .hero-cta {margin-top: 34px;}
.marketing .rv3 .hero-b .col-right {padding: 40px 0 40px 56px; display:flex; flex-direction: column; gap: 16px;}
.marketing .rv3 .proof-panel {border:1px solid var(--hair); background: color-mix(in oklch, var(--muted) 32%, transparent);}
.marketing .rv3 .proof-panel .ph {display:flex; justify-content:space-between; align-items:center; padding: 10px 16px; border-bottom: 1px solid var(--hair);}
.marketing .rv3 .proof-panel .ph .t {font-family: var(--font-mono); font-size: 10px; text-transform:uppercase; letter-spacing:.18em; color: var(--muted-fg);}
.marketing .rv3 .proof-panel .ph .t .acc {color: var(--accent);}
.marketing .rv3 .proof-panel .pb {padding: 18px 16px;}
.marketing .rv3 .proof-panel.query .q {font-family: var(--font-serif); font-size: 20px; line-height: 1.3; color: var(--foreground);}
.marketing .rv3 .proof-panel.query .q .cur {display:inline-block; width:2px; height:0.95em; background: var(--accent); vertical-align:-2px; margin-left:3px; animation: blink 1.1s steps(1) infinite;}
@keyframes blink { 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce) {.marketing .rv3 .proof-panel.query .q .cur {animation: none;}

}
.marketing .rv3 .lang-chips {display:flex; gap:6px; margin-top: 16px; flex-wrap: wrap;}
.marketing .rv3 .lang-chips .chip {font-family: var(--font-mono); font-size: 9.5px; letter-spacing:.14em; padding: 4px 8px; border:1px solid var(--hair); color: var(--muted-fg);}
.marketing .rv3 .lang-chips .chip.on {background: var(--accent); color: var(--background); border-color: var(--accent);}
.marketing .rv3 .proof-panel.answer .pb {font-family: var(--font-serif); font-size: 15px; line-height: 1.6; color: color-mix(in oklch,var(--foreground) 88%, transparent);}
.marketing .rv3 .proof-panel.answer mark {background: color-mix(in oklch, var(--accent) 16%, transparent); color: inherit; padding: 0 2px;}
.marketing .rv3 .proof-panel.answer .cite {font-family: var(--font-mono); font-size: 10px; color: var(--accent); margin-left: 3px;}
.marketing .rv3 .sources-row {display:flex; flex-wrap:wrap; gap: 8px;}
.marketing .rv3 .sources-row .src {display:flex; align-items:center; gap:8px; border:1px solid var(--hair); padding: 7px 10px; background: var(--background);}
.marketing .rv3 .sources-row .src .ic {width:7px;height:7px; background: var(--accent);}
.marketing .rv3 .sources-row .src .nm {font-family: var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em; color: var(--foreground);}
    padding: 13px 0; border-bottom: 1px solid color-mix(in oklch, var(--background) 12%, transparent);
    font-family: var(--font-mono); font-size: 11px; letter-spacing:.04em;
    color: color-mix(in oklch, var(--background) 50%, transparent);}
@keyframes pulse { 70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) {
}
.marketing .rv3 .trust-archive {display:none;}
/* Hairline above the trust strips. Was inline on all 8 instances (4 each). */
.marketing .rv3 .trust-metrics,
.marketing .rv3 .trust-archive {border-top: 1px solid var(--hair);}
.marketing .rv3 .metrics-row {display:grid; grid-template-columns: repeat(3, 1fr);}
.marketing .rv3 .metrics-row .m {padding: 30px 28px; border-right: 1px solid var(--hair);}
.marketing .rv3 .metrics-row .m:nth-child(3n) {border-right: none;}
.marketing .rv3 .metrics-row .m .n {font-family: var(--font-serif); font-size: 34px; letter-spacing:-0.02em; line-height:1;}
.marketing .rv3 .metrics-row .m .n em {font-style: italic; color: var(--accent);}
.marketing .rv3 .metrics-row .m .k {font-family: var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.18em; color: var(--muted-fg); margin-top: 12px;}
.marketing .rv3 .metrics-row .m.line2 {border-top: 1px solid var(--hair);}
/* Two-line metric cells run smaller than the 34px figure. Was repeated as
   an inline style="font-size:22px" on all 18 instances across 4 pages. */
.marketing .rv3 .metrics-row .m.line2 .n {font-size: 22px;}
.marketing .rv3 .archive-ledger .lrow {display:grid; grid-template-columns: 150px 1fr auto; gap: 24px; align-items:baseline; padding: 20px 0; border-top: 1px solid var(--hair);}
.marketing .rv3 .archive-ledger .lrow .k {font-family: var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.18em; color: var(--accent);}
.marketing .rv3 .archive-ledger .lrow .d {font-family: var(--font-serif); font-size:17px; color: var(--foreground); text-wrap:pretty;}
.marketing .rv3 .archive-ledger .lrow .v {font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.16em; color: var(--muted-fg); white-space:nowrap;}
.marketing .rv3 .ba-grid {display:grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 52px; border: 1px solid var(--hair);}
.marketing .rv3 .ba-col {padding: 0;}
.marketing .rv3 .ba-col.before {border-right: 1px solid var(--hair); background: color-mix(in oklch, var(--muted) 26%, transparent);}
.marketing .rv3 .ba-head {display:flex; justify-content:space-between; align-items:center; padding: 16px 26px; border-bottom: 1px solid var(--hair);}
.marketing .rv3 .ba-head .t {font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.2em;}
.marketing .rv3 .ba-col.before .ba-head .t {color: var(--muted-fg);}
.marketing .rv3 .ba-col.after .ba-head .t {color: var(--accent);}
.marketing .rv3 .ba-head .s {font-family: var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.16em; color: var(--ink-faint);}
.marketing .rv3 .ba-list {list-style:none; margin:0; padding: 8px 26px 18px;}
.marketing .rv3 .ba-list li {display:flex; align-items:baseline; gap:12px; padding: 16px 0; border-bottom: 1px solid var(--hair); font-family: var(--font-serif); font-size: 17px; line-height:1.4;}
.marketing .rv3 .ba-list li:last-child {border-bottom: none;}
.marketing .rv3 .ba-list li .mk {font-family: var(--font-mono); font-size:13px; line-height:1;}
.marketing .rv3 .ba-col.before .ba-list li {color: var(--muted-fg);}
.marketing .rv3 .ba-col.before .ba-list li .mk {color: var(--ink-faint);}
.marketing .rv3 .ba-col.after .ba-list li {color: var(--foreground);}
.marketing .rv3 .ba-col.after .ba-list li .mk {color: var(--good);}
.marketing .rv3 .stage-grid {margin-top: 52px; border-top: 1px solid var(--foreground); display:grid; grid-template-columns: repeat(4, 1fr);}
.marketing .rv3 .stage-cell {padding: 24px 24px 28px; border-left: 1px solid var(--hair); position: relative;}
.marketing .rv3 .stage-cell:first-child {border-left: none;}
.marketing .rv3 .stage-cell .top {display:flex; justify-content:space-between; font-family: var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.2em; color: var(--muted-fg);}
.marketing .rv3 .stage-cell .top .num {color: var(--accent);}
.marketing .rv3 .stage-cell h4 {font-family: var(--font-serif); font-weight:400; font-size: 24px; letter-spacing:-0.015em; line-height:1.05; margin: 18px 0 0;}
.marketing .rv3 .stage-cell p {font-family: var(--font-serif); font-size: 14px; line-height:1.55; color: var(--muted-fg); margin: 12px 0 0; text-wrap:pretty;}
.marketing .rv3 .stage-cell .meta {margin-top: 18px; font-family: var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.16em; color: color-mix(in oklch, var(--foreground) 58%, transparent);}
.marketing .rv3 .stage-cell .arrow {position:absolute; right:-6px; top:24px; background: var(--background); padding: 0 4px; font-family: var(--font-serif); font-style:italic; color: var(--muted-fg); z-index:2;}
.marketing .rv3 section.v.muted .stage-cell .arrow {background: color-mix(in oklch, var(--muted) 55%, var(--background));}
.marketing .rv3 .two-grid {display:grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 52px; align-items: start;}
.marketing .rv3 .way {border: 1px solid var(--hair); background: color-mix(in oklch, var(--muted) 28%, transparent); display:flex; flex-direction: column;}
.marketing .rv3 .way .wh {display:flex; justify-content:space-between; align-items:baseline; padding: 18px 22px; border-bottom: 1px solid var(--hair);}
.marketing .rv3 .way .wh .lbl {display:flex; align-items:baseline; gap:12px;}
.marketing .rv3 .way .wh .lbl .ix {font-family: var(--font-serif); font-style:italic; color: var(--accent); font-size: 22px; line-height:1;}
.marketing .rv3 .way .wh .lbl h3 {font-family: var(--font-serif); font-weight:400; font-size: 22px; margin:0; letter-spacing:-0.01em;}
.marketing .rv3 .way .wh .tag {font-family: var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.16em; color: var(--muted-fg);}
.marketing .rv3 .way .wb {padding: 22px; flex:1;}
.marketing .rv3 .search-box {display:flex; align-items:center; gap:12px; border:1px solid var(--hair); background: var(--background); padding: 11px 14px;}
.marketing .rv3 .search-box .lab {font-family: var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.18em; color: var(--muted-fg);}
.marketing .rv3 .search-box .qs {font-family: var(--font-serif); font-size: 16px;}
.marketing .rv3 .res-list {list-style:none; margin: 18px 0 0; padding:0;}
.marketing .rv3 .res-list li {display:grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items:baseline; padding: 13px 0; border-top: 1px solid var(--hair);}
.marketing .rv3 .res-list li .kind {font-family: var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.14em; color: var(--accent); width: 64px;}
.marketing .rv3 .res-list li .ti {font-family: var(--font-serif); font-size: 15px; color: var(--foreground);}
.marketing .rv3 .res-list li .loc {font-family: var(--font-mono); font-size:10px; color: var(--muted-fg); white-space:nowrap;}
.marketing .rv3 .way .shot-host {background: var(--ink-dark); padding: 0; border:0;}
.marketing .rv3 .way .shot-host img {width:100%; display:block;}
.marketing .rv3 .way .wfoot {padding: 14px 22px; border-top: 1px solid var(--hair); font-family: var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.18em; color: var(--muted-fg);}
.marketing .rv3 .aud-grid {display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 52px;}
.marketing .rv3 .aud-card {border:1px solid var(--hair); padding: 28px 26px 26px; display:flex; flex-direction: column;}
.marketing .rv3 .aud-card .ah {display:flex; align-items:baseline; justify-content:space-between;}
.marketing .rv3 .aud-card .ah h3 {font-family: var(--font-serif); font-weight:400; font-size: 26px; margin:0; letter-spacing:-0.012em;}
.marketing .rv3 .aud-card .ah .nx {font-family: var(--font-mono); font-size:10px; color: var(--accent);}
.marketing .rv3 .aud-card .desc {font-family: var(--font-serif); font-size: 14.5px; line-height:1.55; color: var(--muted-fg); margin: 14px 0 0; text-wrap:pretty;}
.marketing .rv3 .aud-card .mats {list-style:none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--hair); display:grid; gap: 9px;}
.marketing .rv3 .aud-card .mats li {font-family: var(--font-mono); font-size: 10.5px; text-transform:uppercase; letter-spacing:.14em; color: var(--foreground); display:flex; gap:9px;}
.marketing .rv3 .aud-card .mats li::before {content:""; width:6px;height:6px; background: var(--accent); margin-top:4px; flex:none;}
.marketing .rv3 .aud-card .alink {margin-top: 24px; font-family: var(--font-sans); font-size:13px;}
.marketing .rv3 .pub-grid {display:grid; grid-template-columns: 4fr 8fr; gap: 40px; margin-top: 52px; align-items: start;}
.marketing .rv3 .pub-grid .note {font-family: var(--font-serif); font-size: 16px; line-height:1.6; color: color-mix(in oklch, var(--background) 78%, transparent); text-wrap:pretty;}
.marketing .rv3 .pub-grid .note b {color: var(--background); font-weight: 500;}
.marketing .rv3 .pub-points {list-style:none; margin: 24px 0 0; padding: 0; display:grid; gap: 0;}
.marketing .rv3 .pub-points li {padding: 14px 0; border-top: 1px solid color-mix(in oklch, var(--background) 18%, transparent); font-family: var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color: color-mix(in oklch, var(--background) 72%, transparent);}
.marketing .rv3 .gov-grid {display:grid; grid-template-columns: 6fr 6fr; gap: 48px; margin-top: 48px; align-items: start;}
.marketing .rv3 .gov-items {display:grid; gap: 30px;}
.marketing .rv3 .gov-item {display:grid; grid-template-columns: 44px 1fr; gap: 18px; border-top: 1px solid var(--foreground); padding-top: 20px;}
.marketing .rv3 .gov-item .k {font-family: var(--font-serif); font-style:italic; color: var(--accent); font-size: 26px; line-height:1;}
.marketing .rv3 .gov-item h3 {font-family: var(--font-serif); font-weight:400; font-size: 21px; margin:0; letter-spacing:-0.01em; line-height:1.2;}
.marketing .rv3 .gov-item p {font-family: var(--font-serif); font-size: 14px; line-height:1.55; color: var(--muted-fg); margin: 10px 0 0; text-wrap:pretty;}
.marketing .rv3 .gov-links {margin-top: 40px; display:flex; gap: 12px; flex-wrap: wrap;}
.marketing .rv3 .cta-inner {display:grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end;}
.marketing .rv3 .cta-inner h2 {font-family: var(--font-serif); font-weight:400; font-size: 60px; line-height:1.0; letter-spacing:-0.022em; margin:0; text-wrap: balance;}
.marketing .rv3 .cta-inner h2 em {font-style:italic; color: var(--accent-hi);}
.marketing .rv3 .cta-inner .deck {font-family: var(--font-serif); font-size: 16.5px; line-height:1.6; color: color-mix(in oklch, var(--background) 72%, transparent); text-wrap:pretty;}
.marketing .rv3 .cta-inner .deck b {color: var(--background); font-weight:500;}
.marketing .rv3 .cta-cta {margin-top: 30px; display:flex; gap: 18px; align-items:center; flex-wrap: wrap;}
.marketing .rv3 .anchor {scroll-margin-top: 72px;}
@media (max-width: 1080px) {.marketing .rv3 .head-grid, .marketing .rv3 .hero-b .grid, .marketing .rv3 .two-grid, .marketing .rv3 .el-grid {grid-template-columns: 1fr;}
.marketing .rv3 .fed-flow {grid-template-columns: 1fr; gap: 16px;}
.marketing .rv3 .fed-gate {padding: 8px 0;}
.marketing .rv3 .fed-gate .line {display:none;}
.marketing .rv3 .living-grid, .marketing .rv3 .fed-model {grid-template-columns: 1fr 1fr;}
.marketing .rv3 .living-cell:nth-child(4n) {border-right: 1px solid var(--hair);}
.marketing .rv3 .living-cell:nth-child(2n) {border-right: none;}
.marketing .rv3 .fed-model .fm:nth-child(3) {border-right: none;}
.marketing .rv3 .el-feats {grid-template-columns: 1fr 1fr;}
.marketing .rv3 .hero-b .col-left {padding: 48px 0; border-right: none; border-bottom: 1px solid var(--hair);}
.marketing .rv3 .hero-b .col-right {padding: 40px 0;}
.marketing .rv3 .stage-grid, .marketing .rv3 .aud-grid, .marketing .rv3 .metrics-row {grid-template-columns: 1fr 1fr;}
.marketing .rv3 .stage-cell .arrow {display:none;}
.marketing .rv3 h2.h2 {font-size: 40px;}
.marketing .rv3 .hero-b .col-left h1 {font-size: 46px;}
.marketing .rv3 .cta-inner h2 {font-size: 44px;}

}
@media (max-width: 680px) {.marketing .rv3 .wrap {padding: 0 var(--page-gutter-phone);}
.marketing .rv3 .ba-grid {grid-template-columns: 1fr;}
.marketing .rv3 .ba-col.before {border-right:none; border-bottom: 1px solid var(--hair);}
.marketing .rv3 .stage-grid, .marketing .rv3 .aud-grid, .marketing .rv3 .metrics-row {grid-template-columns: 1fr;}
.marketing .rv3 .living-grid, .marketing .rv3 .fed-model {grid-template-columns: 1fr;}
.marketing .rv3 .living-cell:nth-child(2n) {border-right: 1px solid var(--hair);}
.marketing .rv3 .fed-model .fm {border-right: none; border-bottom: 1px solid color-mix(in oklch, var(--background) 18%, transparent);}
.marketing .rv3 .fed-model .fm:last-child {border-bottom: none;}
.marketing .rv3 .map-node {min-width: 100%;}
.marketing .rv3 .map-arrow {transform: rotate(90deg); padding: 6px 0;}
.marketing .rv3 .stage-cell {border-left:none; border-top: 1px solid var(--hair);}
.marketing .rv3 .metrics-row .m {border-right:none; border-top: 1px solid var(--hair);}

}
.marketing .rv3 .living-grid {display:grid; grid-template-columns: repeat(4, 1fr); margin-top: 52px; border: 1px solid var(--hair); border-bottom: none;}
.marketing .rv3 .living-cell {padding: 28px 24px 30px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);}
.marketing .rv3 .living-cell:nth-child(4n) {border-right: none;}
.marketing .rv3 .living-cell .ix {font-family: var(--font-mono); font-size: 11px; letter-spacing:.18em; color: var(--accent);}
.marketing .rv3 .living-cell h3 {font-family: var(--font-serif); font-weight:400; font-size: 22px; letter-spacing:-0.012em; line-height:1.1; margin: 16px 0 0;}
.marketing .rv3 .living-cell p {font-family: var(--font-serif); font-size: 14px; line-height:1.55; color: var(--muted-fg); margin: 12px 0 0; text-wrap:pretty;}
.marketing .rv3 .archive-map {margin-top: 24px; border: 1px solid var(--hair); background: color-mix(in oklch, var(--muted) 30%, transparent); padding: 24px 26px 26px;}
.marketing .rv3 .archive-map .mh {display:flex; justify-content:space-between; align-items:center; margin-bottom: 18px;}
.marketing .rv3 .map-flow {display:flex; align-items:stretch; gap: 0; flex-wrap: wrap;}
.marketing .rv3 .map-node {flex:1 1 0; min-width: 110px; padding: 14px 12px; border: 1px solid var(--hair); background: var(--background); display:flex; flex-direction:column; gap: 6px;}
.marketing .rv3 .map-node .nk {font-family: var(--font-mono); font-size: 9px; text-transform:uppercase; letter-spacing:.16em; color: var(--muted-fg);}
.marketing .rv3 .map-node .nv {font-family: var(--font-serif); font-size: 14.5px; line-height:1.2;}
.marketing .rv3 .map-node.terminal {background: var(--foreground);}
.marketing .rv3 .map-node.terminal .nk {color: oklch(0.78 0.12 55);}
.marketing .rv3 .map-node.terminal .nv {color: var(--background);}
.marketing .rv3 .map-arrow {display:flex; align-items:center; padding: 0 9px; font-family: var(--font-serif); font-style:italic; font-size: 18px; color: var(--accent);}
.marketing .rv3 .el-grid {display:grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 52px; align-items: start;}
.marketing .rv3 .el-card {border: 1px solid var(--hair); background: color-mix(in oklch, var(--muted) 28%, transparent); display:flex; flex-direction: column;}
.marketing .rv3 .el-head {display:flex; justify-content:space-between; align-items:baseline; padding: 18px 22px; border-bottom: 1px solid var(--hair);}
.marketing .rv3 .el-head .lbl {display:flex; align-items:baseline; gap: 12px;}
.marketing .rv3 .el-head .lbl .ix {font-family: var(--font-serif); font-style:italic; color: var(--accent); font-size: 22px; line-height:1;}
.marketing .rv3 .el-head .lbl h3 {font-family: var(--font-serif); font-weight:400; font-size: 21px; margin:0; letter-spacing:-0.01em;}
.marketing .rv3 .el-head .tag {font-family: var(--font-mono); font-size: 9.5px; text-transform:uppercase; letter-spacing:.16em; color: var(--muted-fg);}
.marketing .rv3 .el-vis {padding: 22px;}
.marketing .rv3 .el-feats {list-style:none; margin: 0; padding: 18px 22px 22px; border-top: 1px solid var(--hair); display:grid; grid-template-columns: 1fr 1fr; gap: 9px 18px;}
.marketing .rv3 .el-feats li {font-family: var(--font-mono); font-size: 10px; text-transform:uppercase; letter-spacing:.13em; color: var(--foreground); display:flex; gap: 8px;}
.marketing .rv3 .el-feats li::before {content:""; width:6px; height:6px; background: var(--accent); margin-top:3px; flex:none;}
.marketing .rv3 .brow {border: 1px solid var(--hair); background: var(--background);}
.marketing .rv3 .brow .bar {display:flex; align-items:center; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--hair);}
.marketing .rv3 .brow .bar .d {width: 7px; height: 7px; border-radius: var(--radius-dot); background: color-mix(in oklch, var(--rule) 30%, transparent);}
.marketing .rv3 .brow .bar .u {margin-left: 8px; font-family: var(--font-mono); font-size: 9.5px; color: var(--muted-fg);}
.marketing .rv3 .brow .pg {padding: 16px;}
.marketing .rv3 .brow .pg .hl {height: 6px; background: color-mix(in oklch, var(--rule) 14%, transparent); margin-bottom: 6px;}
/* Skeleton text bars taper 78/64/48%. Was repeated as inline width styles on
   all 12 instances (3 bars x 4 pages); they are fixed-order siblings. */
.marketing .rv3 .brow .pg .hl:nth-child(1) {width: 78%;}
.marketing .rv3 .brow .pg .hl:nth-child(2) {width: 64%;}
.marketing .rv3 .brow .pg .hl:nth-child(3) {width: 48%;}
/* The page-preview caption above those bars. Was inline on all 4 instances. */
.marketing .rv3 .brow .pg .serif {font-size: 13px; opacity: .85;}
.marketing .rv3 .embed-mark {margin-top: 14px; border: 1px dashed var(--accent); position: relative; padding: 16px 12px 12px; background: color-mix(in oklch, var(--accent) 4%, transparent);}
.marketing .rv3 .embed-mark .ft {position:absolute; top:-8px; left: 12px; background: var(--background); padding: 0 6px; font-family: var(--font-mono); font-size: 8.5px; text-transform:uppercase; letter-spacing:.2em; color: var(--accent);}
.marketing .rv3 .embed-mark .sb {display:flex; align-items:center; gap: 10px; border: 1px solid var(--hair); background: var(--background); padding: 7px 10px;}
.marketing .rv3 .embed-mark .sb .lab {font-family: var(--font-mono); font-size: 9px; text-transform:uppercase; letter-spacing:.16em; color: var(--muted-fg);}
.marketing .rv3 .embed-mark .sb .q {font-family: var(--font-serif); font-size: 13px;}
.marketing .rv3 .embed-mark .ch {display:grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 8px;}
.marketing .rv3 .embed-mark .ch span {border: 1px solid var(--hair); padding: 5px 6px; font-family: var(--font-mono); font-size: 9px; text-transform:uppercase; letter-spacing:.12em; color: var(--muted-fg); text-align:center;}
.marketing .rv3 .tpl {border: 1px solid var(--hair); background: var(--background); overflow: hidden;}
.marketing .rv3 .tpl .tbar {display:flex; align-items:center; justify-content:space-between; padding: 10px 14px; background: var(--foreground);}
.marketing .rv3 .tpl .tbar .bm {font-family: var(--font-serif); font-size: 13px; color: var(--background); display:flex; align-items:baseline; gap:7px;}
.marketing .rv3 .tpl .tbar .bm .dot {width:5px;height:5px; background: oklch(0.78 0.12 55); display:inline-block;}
.marketing .rv3 .tpl .tbar .tn {display:flex; gap: 12px; font-family: var(--font-mono); font-size: 8.5px; text-transform:uppercase; letter-spacing:.16em; color: color-mix(in oklch, var(--background) 60%, transparent);}
.marketing .rv3 .tpl .thero {padding: 22px 16px; border-bottom: 1px solid var(--hair);}
.marketing .rv3 .tpl .thero .k {font-family: var(--font-mono); font-size: 8.5px; text-transform:uppercase; letter-spacing:.2em; color: var(--accent);}
.marketing .rv3 .tpl .thero .t {font-family: var(--font-serif); font-size: 22px; line-height:1.05; margin-top: 8px;}
.marketing .rv3 .tpl .tcards {display:grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 14px 16px;}
.marketing .rv3 .tpl .tcards .c {border: 1px solid var(--hair); padding: 10px;}
.marketing .rv3 .tpl .tcards .c .ck {font-family: var(--font-mono); font-size: 8px; text-transform:uppercase; letter-spacing:.14em; color: var(--muted-fg);}
.marketing .rv3 .tpl .tcards .c .cv {font-family: var(--font-serif); font-size: 12.5px; margin-top: 6px; line-height:1.15;}
.marketing .rv3 .tpl .tcta {display:flex; justify-content:space-between; align-items:center; padding: 12px 16px; border-top: 1px solid var(--hair);}
.marketing .rv3 .tpl .tcta .donate {font-family: var(--font-mono); font-size: 9px; text-transform:uppercase; letter-spacing:.16em; background: var(--accent); color: var(--background); padding: 6px 10px;}
.marketing .rv3 .tpl .tcta .lang {font-family: var(--font-mono); font-size: 9px; letter-spacing:.14em; color: var(--muted-fg);}
.marketing .rv3 .fed-diagram {margin-top: 52px; display:grid; grid-template-columns: 1fr; gap: 24px;}
.marketing .rv3 .fed-flow {display:grid; grid-template-columns: 5fr 2fr 5fr; gap: 0; align-items: stretch;}
.marketing .rv3 .fed-sources {display:flex; flex-direction: column; gap: 12px;}
.marketing .rv3 .fed-box {border: 1px solid color-mix(in oklch, var(--background) 22%, transparent); background: color-mix(in oklch, var(--background) 4%, transparent); padding: 16px 18px; display:flex; flex-direction: column;}
.marketing .rv3 .fed-box .bk {font-family: var(--font-mono); font-size: 9.5px; text-transform:uppercase; letter-spacing:.16em; color: var(--accent-hi);}
.marketing .rv3 .fed-box .bn {font-family: var(--font-serif); font-size: 17px; margin-top: 7px; color: var(--background);}
.marketing .rv3 .fed-box .bm {font-family: var(--font-mono); font-size: 9px; text-transform:uppercase; letter-spacing:.13em; color: color-mix(in oklch, var(--background) 55%, transparent); margin-top: 8px;}
.marketing .rv3 .fed-gate {display:flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; position: relative;}
.marketing .rv3 .fed-gate .line {position:absolute; left:0; right:0; top:50%; height:1px; background: color-mix(in oklch, var(--background) 20%, transparent);}
.marketing .rv3 .fed-gate .lock {position: relative; z-index:2; background: var(--foreground); border: 1px solid color-mix(in oklch, var(--background) 26%, transparent); padding: 8px 12px; font-family: var(--font-mono); font-size: 9px; text-transform:uppercase; letter-spacing:.16em; color: var(--accent-hi); text-align:center;}
.marketing .rv3 .fed-hub {border: 1px solid oklch(0.55 0.1 55 / 0.5); background: color-mix(in oklch, var(--accent-hi) 8%, transparent); padding: 22px; display:flex; flex-direction: column; justify-content: center;}
.marketing .rv3 .fed-hub .hk {font-family: var(--font-mono); font-size: 9.5px; text-transform:uppercase; letter-spacing:.18em; color: var(--accent-hi);}
.marketing .rv3 .fed-hub .hn {font-family: var(--font-serif); font-size: 26px; line-height:1.05; margin-top: 10px; color: var(--background);}
.marketing .rv3 .fed-hub .hm {font-family: var(--font-serif); font-size: 13.5px; line-height:1.5; color: color-mix(in oklch, var(--background) 68%, transparent); margin-top: 12px;}
.marketing .rv3 .fed-model {display:grid; grid-template-columns: repeat(3,1fr); border: 1px solid color-mix(in oklch, var(--background) 20%, transparent);}
.marketing .rv3 .fed-model .fm {padding: 24px 22px; border-right: 1px solid color-mix(in oklch, var(--background) 18%, transparent);}
.marketing .rv3 .fed-model .fm:last-child {border-right: none;}
.marketing .rv3 .fed-model .fm .fi {font-family: var(--font-serif); font-style:italic; color: var(--accent-hi); font-size: 24px; line-height:1;}
.marketing .rv3 .fed-model .fm h4 {font-family: var(--font-serif); font-weight:400; font-size: 19px; margin: 14px 0 0; color: var(--background); letter-spacing:-0.01em;}
.marketing .rv3 .fed-model .fm p {font-family: var(--font-serif); font-size: 13.5px; line-height:1.55; color: color-mix(in oklch, var(--background) 66%, transparent); margin: 10px 0 0; text-wrap:pretty;}
.marketing .rv3 .trio {display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 52px;}
.marketing .rv3 .trio .t {border:1px solid var(--hair); padding: 28px 26px 26px; display:flex; flex-direction:column;}
.marketing .rv3 .trio .t .ix {font-family: var(--font-mono); font-size: 10px; letter-spacing:.18em; color: var(--accent);}
.marketing .rv3 .trio .t h3 {font-family: var(--font-serif); font-weight:400; font-size: 24px; margin: 14px 0 0; letter-spacing:-0.012em; line-height:1.05;}
.marketing .rv3 .trio .t p {font-family: var(--font-serif); font-size: 14.5px; line-height:1.55; color: var(--muted-fg); margin: 12px 0 0; text-wrap:pretty;}
.marketing .rv3 .trio .t .vtag {margin-top: 16px; font-family: var(--font-mono); font-size: 9.5px; text-transform:uppercase; letter-spacing:.16em; color: var(--accent);}
.marketing .rv3 .trio .t ul {list-style:none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--hair); display:grid; gap: 9px;}
.marketing .rv3 .trio .t ul li {font-family: var(--font-mono); font-size: 10.5px; text-transform:uppercase; letter-spacing:.13em; color: var(--foreground); display:flex; gap: 9px;}
.marketing .rv3 .trio .t ul li::before {content:""; width:6px;height:6px; background: var(--accent); margin-top:3px; flex:none;}
.marketing .rv3 .rail {display:grid; grid-template-columns: repeat(5,1fr); border:1px solid var(--hair); border-bottom:none; margin-top: 52px;}
.marketing .rv3 .rail .c {padding: 24px 20px 26px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); display:flex; flex-direction:column; gap: 10px;}
.marketing .rv3 .rail .c:nth-child(5n) {border-right: none;}
.marketing .rv3 .rail .c .n {font-family: var(--font-mono); font-size: 11px; letter-spacing:.18em; color: var(--accent);}
.marketing .rv3 .rail .c h4 {font-family: var(--font-serif); font-weight:400; font-size: 18px; line-height:1.12; margin:0; letter-spacing:-0.01em;}
.marketing .rv3 .rail .c p {font-family: var(--font-serif); font-size: 13.5px; line-height:1.5; color: var(--muted-fg); margin:0; text-wrap:pretty;}
.marketing .rv3 .v.dark .rail {border-color: color-mix(in oklch, var(--background) 22%, transparent);}
.marketing .rv3 .v.dark .rail .c {border-color: color-mix(in oklch, var(--background) 18%, transparent);}
.marketing .rv3 .v.dark .rail .c .n {color: var(--accent-hi);}
.marketing .rv3 .v.dark .rail .c h4 {color: var(--background);}
.marketing .rv3 .v.dark .rail .c p {color: color-mix(in oklch, var(--background) 66%, transparent);}
.marketing .rv3 .mx {display:grid; grid-template-columns: 5fr 7fr; gap: 44px; margin-top: 52px; align-items: start;}
.marketing .rv3 .mx .lead h3 {font-family: var(--font-serif); font-weight:400; font-size: 34px; line-height:1.05; letter-spacing:-0.018em; margin:0; text-wrap:balance;}
.marketing .rv3 .mx .lead p {font-family: var(--font-serif); font-size: 15px; line-height:1.6; color: var(--muted-fg); margin: 18px 0 0; text-wrap:pretty;}
.marketing .rv3 .mq-grid {display:grid; grid-template-columns: 1fr 1fr; gap: 16px;}
.marketing .rv3 .mq {border:1px solid var(--hair); background: color-mix(in oklch, var(--muted) 28%, transparent); padding: 22px;}
.marketing .rv3 .mq .q {font-family: var(--font-serif); font-size: 19px; line-height:1.3; color: var(--foreground);}
.marketing .rv3 .mq .tag {display:block; margin-top: 14px; font-family: var(--font-mono); font-size: 9.5px; text-transform:uppercase; letter-spacing:.16em; color: var(--muted-fg);}
.marketing .rv3 .pilot {display:grid; grid-template-columns: 6fr 6fr; gap: 44px; margin-top: 48px; align-items: start;}
.marketing .rv3 .pilot-list {list-style:none; margin:0; padding:0;}
.marketing .rv3 .pilot-list li {display:flex; gap: 16px; padding: 17px 0; border-top: 1px solid var(--hair); font-family: var(--font-serif); font-size: 17px; align-items:baseline;}
.marketing .rv3 .pilot-list li .ck {color: var(--good); font-family: var(--font-mono); font-size: 13px; flex:none;}
.marketing .rv3 .pilot-note {margin-top: 22px; font-family: var(--font-mono); font-size: 10px; text-transform:uppercase; letter-spacing:.16em; color: var(--muted-fg);}
.marketing .rv3 .faq-list {margin-top: 48px; border-top: 1px solid var(--hair); max-width: 980px;}
.marketing .rv3 details.faq {border-bottom: 1px solid var(--hair);}
.marketing .rv3 details.faq summary {list-style:none; cursor:pointer; padding: 24px 0; display:flex; justify-content:space-between; gap: 24px; align-items:center; font-family: var(--font-serif); font-size: 21px; letter-spacing:-0.01em;}
.marketing .rv3 details.faq summary::-webkit-details-marker {display:none;}
.marketing .rv3 details.faq summary .pm {font-family: var(--font-mono); color: var(--accent); font-size: 20px; line-height:1; flex:none; transition: transform .18s ease;}
.marketing .rv3 details.faq[open] summary .pm {transform: rotate(45deg);}
.marketing .rv3 details.faq p {margin: 0 0 26px; max-width: 74ch; font-family: var(--font-serif); font-size: 15.5px; line-height:1.65; color: var(--muted-fg); text-wrap:pretty;}
.marketing .rv3 .faq-cat {font-family: var(--font-mono); font-size: 10.5px; text-transform:uppercase; letter-spacing:.2em; color: var(--accent); margin-top: 38px; padding-bottom: 12px;}
.marketing .rv3 .faq-list > .faq-cat:first-child {margin-top: 4px;}
@media (max-width: 1080px) {.marketing .rv3 .trio {grid-template-columns: 1fr;}
.marketing .rv3 .rail {grid-template-columns: 1fr 1fr 1fr;}
.marketing .rv3 .rail .c:nth-child(5n) {border-right: 1px solid var(--hair);}
.marketing .rv3 .rail .c:nth-child(3n) {border-right: none;}
.marketing .rv3 .v.dark .rail .c:nth-child(5n) {border-right: 1px solid color-mix(in oklch, var(--background) 18%, transparent);}
.marketing .rv3 .v.dark .rail .c:nth-child(3n) {border-right: none;}
.marketing .rv3 .mx {grid-template-columns: 1fr; gap: 28px;}
.marketing .rv3 .pilot {grid-template-columns: 1fr; gap: 28px;}

}
@media (max-width: 680px) {.marketing .rv3 .rail {grid-template-columns: 1fr;}
.marketing .rv3 .rail .c {border-right: 1px solid var(--hair) !important;}
.marketing .rv3 .mq-grid {grid-template-columns: 1fr;}

}
.marketing .rv3 .split-57 {display:grid; grid-template-columns: 5fr 7fr; gap: 44px; align-items: start;}
.marketing .rv3 .plate-2col {display:grid; grid-template-columns: 1fr 1fr;}
@media (max-width: 900px) {.marketing .rv3 .split-57 {grid-template-columns: 1fr; gap: 28px;}

}
@media (max-width: 760px) {.marketing .rv3 .plate-2col {grid-template-columns: 1fr;}
.marketing .rv3 .plate-2col > div:first-child {border-right: none !important; border-bottom: 1px solid var(--hair);}

}
@media (max-width: 680px) {.marketing .rv3 .cta-cta {flex-direction: column; align-items: flex-start; gap: 14px;}

}
@media (prefers-reduced-motion: no-preference) {.marketing .rv3 section.hero .hero-meta {animation: vFade .8s .02s both;}
.marketing .rv3 section.hero .hero-head {animation: vRise .8s .08s both var(--ease-out);}
.marketing .rv3 section.hero .hero-deck {animation: vRise .8s .20s both var(--ease-out);}
.marketing .rv3 section.hero .hero-cta {animation: vRise .8s .32s both var(--ease-out);}
.marketing .rv3 section.hero .col-right .proof-panel {animation: vRise .72s both var(--ease-out);}
.marketing .rv3 section.hero .col-right .proof-panel:nth-of-type(1) {animation-delay: .34s;}
.marketing .rv3 section.hero .col-right .proof-panel:nth-of-type(2) {animation-delay: .46s;}
.marketing .rv3 section.hero .col-right .proof-panel:nth-of-type(3) {animation-delay: .58s;}
.marketing .rv3 section.hero .hero-a .plate {animation: vRise .8s .30s both var(--ease-out);}

}
@keyframes vRise { from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes vFade { from{ opacity:0; } to{ opacity:1; } }
.marketing .rv3 .plate, .marketing .rv3 .trio .t, .marketing .rv3 .aud-card, .marketing .rv3 .el-card, .marketing .rv3 .mq, .marketing .rv3 .fed-box, .marketing .rv3 .surface-tile {transition: border-color .22s ease, box-shadow .25s ease;}
.marketing .rv3 .trio .t:hover, .marketing .rv3 .aud-card:hover, .marketing .rv3 .el-card:hover, .marketing .rv3 .mq:hover, .marketing .rv3 .surface-tile:hover {border-color: color-mix(in oklch, var(--accent) 42%, var(--hair));}
.marketing .rv3 .fed-box:hover {border-color: color-mix(in oklch, var(--accent-hi) 45%, transparent);}
.marketing .rv3 .plate.elevated:hover {box-shadow: 0 22px 60px -26px rgba(0,0,0,0.42);}
.marketing .rv3 .nnode {transition: border-color .2s ease, color .2s ease;}
.marketing .rv3 .netmap .nnode:hover {border-color: color-mix(in oklch, var(--accent) 55%, var(--hair));}
.marketing .rv3 .vis-chips {display:flex; gap:6px; flex-wrap:wrap;}
.marketing .rv3 .vis-chips .vc {font-family: var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; padding:4px 8px; border:1px solid var(--hair); color:var(--muted-fg);}
.marketing .rv3 .vis-chips .vc.com {color:var(--accent); border-color: color-mix(in oklch, var(--accent) 38%, transparent);}
.marketing .rv3 .vis-chips .vc.pub {color:var(--foreground);}
.marketing .rv3 .elig {border:1px solid var(--hair); background: color-mix(in oklch, var(--muted) 30%, transparent);}
.marketing .rv3 .elig .eh {display:flex; justify-content:space-between; align-items:center; padding: 12px 18px; border-bottom: 1px solid var(--hair); font-family: var(--font-mono); font-size: 10px; text-transform:uppercase; letter-spacing:.18em; color: var(--muted-fg);}
.marketing .rv3 .elig .eh .acc {color: var(--accent);}
.marketing .rv3 .elig .er {display:flex; justify-content:space-between; align-items:center; gap:14px; padding: 14px 18px; border-bottom: 1px solid var(--hair);}
.marketing .rv3 .elig .er:last-child {border-bottom:none;}
.marketing .rv3 .elig .er .nm {font-family: var(--font-serif); font-size: 15px;}
.marketing .rv3 .part-actions {display:flex; gap: 8px; flex-wrap:wrap; margin-top: 24px; justify-content:center;}
.marketing .rv3 .part-actions .pa {font-family: var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.16em; padding: 9px 14px; border:1px solid var(--hair); color: var(--foreground);}
.marketing .rv3 .part-actions .pa.lead {background: var(--accent); color: var(--background); border-color: var(--accent);}
.marketing .rv3 .ctrail {border:1px solid var(--hair); background: color-mix(in oklch, var(--muted) 30%, transparent);}
.marketing .rv3 .ctrail .crh {display:flex; justify-content:space-between; align-items:center; padding:12px 18px; border-bottom:1px solid var(--hair); font-family: var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.18em; color:var(--muted-fg);}
.marketing .rv3 .ctrail .crh .acc {color: var(--accent);}
.marketing .rv3 .ctrail .cr {display:grid; grid-template-columns: 150px 1fr; gap:16px; align-items:baseline; padding:15px 18px; border-bottom:1px solid var(--hair);}
.marketing .rv3 .ctrail .cr:last-child {border-bottom:none;}
.marketing .rv3 .ctrail .cr .ck {font-family: var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.14em; color: var(--accent);}
.marketing .rv3 .ctrail .cr .cv {font-family: var(--font-serif); font-size: 15px; line-height:1.35;}
.marketing .rv3 .ctrail .cr .cv small {display:block; font-family: var(--font-mono); font-size:10px; letter-spacing:.04em; color: var(--muted-fg); margin-top:4px;}
.marketing .rv3 .netmap {position:relative; height: 540px; margin-top: 52px; border:1px solid var(--hair); background: color-mix(in oklch, var(--muted) 30%, transparent); overflow:hidden;}
.marketing .rv3 .netmap svg {position:absolute; inset:0; width:100%; height:100%;}
.marketing .rv3 .netmap svg line {stroke: color-mix(in oklch, var(--accent) 42%, transparent); stroke-width:1;}
.marketing .rv3 .nnode {position:absolute; transform: translate(-50%,-50%); display:flex; align-items:center; gap:8px; background:var(--background); border:1px solid var(--hair); padding:8px 12px; font-family: var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em; white-space:nowrap; z-index:2; color: var(--foreground);}
.marketing .rv3 .nnode .dot {width:6px; height:6px; background: var(--accent); flex:none;}
.marketing .rv3 .nnode.hub {background: var(--foreground); color: var(--background); padding:11px 16px; font-size:11px;}
.marketing .rv3 .nnode.hub .dot {background: var(--accent-hi);}
.marketing .rv3 .netmap .nmcap {position:absolute; left:18px; bottom:14px; z-index:3; font-family: var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.16em; color: var(--muted-fg);}
@media (max-width: 760px) {.marketing .rv3 .netmap {height:auto; padding: 18px; display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start;}
.marketing .rv3 .netmap svg, .marketing .rv3 .netmap .nmcap {display:none;}
.marketing .rv3 .nnode {position:static; transform:none;}

}

.marketing .rv3.anim .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
.marketing .rv3.anim .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .marketing .rv3.anim .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Responsive hero normalization for Refine Loracta(3).
   Keep the four marketing hero headlines on one scale and prevent the mobile
   proof stack from pushing the first screen too far down. */
.marketing .rv3 .hero-b .col-left {
  padding: 58px 48px 58px 0;
}

.marketing .rv3 .hero-b .col-right {
  padding: 34px 0 34px 48px;
}

.marketing .rv3 .hero-b .col-left h1 {
  font-size: 52px;
  line-height: 1;
}

.marketing .rv3 .hero-b .col-left .hero-deck {
  margin-top: 22px;
}

.marketing .rv3 .hero-b .col-left .hero-cta {
  margin-top: 28px;
}

.marketing .rv3-home .hero-b .grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}

@media (max-width: 1080px) {
  .marketing .rv3 .hero-b .col-left {
    padding: 40px 0 34px;
  }

  .marketing .rv3 .hero-b .col-right {
    padding: 30px 0 34px;
  }

  .marketing .rv3 .hero-b .col-left h1 {
    font-size: 42px;
  }
}

@media (max-width: 680px) {
  .marketing .rv3 .hero > .wrap {
    padding-top: 30px !important;
  }

  .marketing .rv3 .hero-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    margin-bottom: 24px;
  }

  .marketing .rv3 .hero-meta .grow {
    display: none;
  }

  .marketing .rv3 .hero-b .col-left {
    padding: 34px 0 28px;
  }

  .marketing .rv3 .hero-b .col-right {
    padding: 26px 0 30px;
    gap: 12px;
  }

  .marketing .rv3 .hero-b .col-left h1 {
    font-size: 36px;
    line-height: 1.02;
  }

  .marketing .rv3 .hero-deck {
    font-size: 15px;
    line-height: 1.55;
  }

  .marketing .rv3 .proof-panel .ph {
    gap: 12px;
    align-items: flex-start;
  }

  .marketing .rv3 .proof-panel .pb {
    padding: 15px 14px;
  }

  .marketing .rv3 .proof-panel.query .q {
    font-size: 18px;
  }
}

@media (max-width: 380px) {
  .marketing .rv3 .hero-b .col-left h1 {
    font-size: 33px;
  }
}

/* ===========================================================================
   Responsive grid-collapse fix — MUST remain last in this file.

   This stylesheet contains a second, divergent authoring pass whose base grid
   definitions are emitted *after* their own collapse media queries (e.g.
   `.living-grid` base `repeat(4,1fr)` at the file tail re-wins over the earlier
   `@media (max-width:1080px)` collapse). The result: seven grids never stacked
   on tablet/mobile, so their second column rendered off-screen and was clipped
   by the page's overflow boundary — entire blocks of content were invisible
   below ~1080px wide. `.pub-grid` / `.gov-grid` / `.cta-inner` additionally had
   no collapse rule at all.

   These rules restore the intended responsive behavior. Being last in source
   order at equal specificity, they win the cascade regardless of the duplicate
   pass above. (Proper fix — de-duplicating the two passes — is tracked
   separately; do not rely on this block once that lands.)
   ======================================================================== */
@media (max-width: 1080px) {
  .marketing .rv3 .el-grid,
  .marketing .rv3 .two-grid,
  .marketing .rv3 .fed-flow {
    grid-template-columns: minmax(0, 1fr);
  }
  .marketing .rv3 .living-grid,
  .marketing .rv3 .fed-model {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .marketing .rv3 .pub-grid,
  .marketing .rv3 .gov-grid,
  .marketing .rv3 .cta-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .marketing .rv3 .cta-inner {
    align-items: start;
  }
}

@media (max-width: 680px) {
  .marketing .rv3 .living-grid,
  .marketing .rv3 .fed-model {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Once a grid stacks, its items (and wide screenshot figures inside them) must
   be allowed to shrink below their intrinsic min-content width, otherwise the
   single `minmax(auto,1fr)` track blows out past the viewport and clips. */
@media (max-width: 1080px) {
  .marketing .rv3 .plate,
  .marketing .rv3 .el-card,
  .marketing .rv3 .gov-items,
  .marketing .rv3 .living-cell {
    min-width: 0;
  }
  .marketing .rv3 .plate img {
    max-width: 100%;
    height: auto;
  }
}

/* Section vertical rhythm. The base `.sec-pad` (92px top/bottom) is tuned for
   desktop; on tablet and phone it leaves the boundaries between sections far
   too airy. Scale it down progressively. */
/* Use the vertical longhands only — the `padding` shorthand would also zero the
   horizontal padding and override the `.wrap` gutter (`0 22px` below 680px),
   leaving section content flush against the screen edge on phones/tablets. */
@media (max-width: 900px) {
  .marketing .rv3 .sec-pad {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .marketing .rv3 .sec-pad-sm {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

@media (max-width: 680px) {
  .marketing .rv3 .sec-pad {
    padding-top: 52px;
    padding-bottom: 52px;
  }
  .marketing .rv3 .sec-pad-sm {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* Figure caption bar. On desktop the FIG label + meta sit on one row, with the
   label truncating via ellipsis. On phones that truncation hides the figure's
   description and the right-hand meta wraps awkwardly — stack the bar so both
   read in full. */
@media (max-width: 680px) {
  .marketing .rv3 .plate-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }
  .marketing .rv3 .plate-strip .left {
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 4px;
  }
  .marketing .rv3 .plate-strip .left > .sep {
    display: none;
  }
  .marketing .rv3 .plate-strip .label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* Mono meta-label wrapping on phones. */
@media (max-width: 680px) {
  /* Hero meta row: stack the two mono labels instead of splitting into a
     cramped 2-up grid where each wraps to three lines. */
  .marketing .rv3 .hero-meta {
    grid-template-columns: 1fr;
    gap: 6px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  /* Section labels: tighten tracking. Hide the supplementary eyebrow descriptor
     on phones — beside the §NN label it wrapped to a cramped second line, and
     its content is repeated in each section body (e.g. §03's "EU-hosted ·
     Human review" appear as metrics right below). The rule line then runs
     clean to the right edge. */
  .marketing .rv3 .seclabel .mono-label {
    letter-spacing: 0.16em;
  }
  .marketing .rv3 .seclabel .mono-label:last-child:not(:first-child) {
    display: none;
  }
}

/* Legal + Trust documents. The Trust page's h2 are bare direct children of
   .legal-body (the templated legal pages wrap h2 in .legal-clause-head) — give
   them the same section divider. And scale the shared document typography down
   on phones: the 30px headings were larger than the page title and ate the
   screen, and 16px body is denser than it needs to be on a 375px column. */
.marketing .legal-body > h2 {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
}
.marketing .legal-body > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
@media (max-width: 600px) {
  .marketing .legal-body h2,
  .marketing .legal-clause h2 {
    font-size: 22px;
    line-height: 1.14;
  }
  .marketing .legal-body > h2 {
    margin-top: 36px;
    padding-top: 16px;
  }
  .marketing .legal-body h3,
  .marketing .legal-clause h3 {
    font-size: 12px;
  }
  .marketing .legal-body p,
  .marketing .legal-body li,
  .marketing .legal-body dd {
    font-size: 15px;
    line-height: 1.6;
  }
  .marketing .legal-lead {
    font-size: 16.5px;
  }
  .marketing .legal-clause {
    margin-top: 40px;
  }
}

/* Hero CTA: the primary button and the "See it work" text link sat almost
   flush (only the inline whitespace between them). Give them real separation
   at every breakpoint. */
.marketing .rv3 .hero-cta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* §12 CTA vertical rhythm (horizontal gutter comes from .wrap so it stays in
   step with the other sections — 40px desktop, 22px phone). */
.marketing .rv3 .cta-pad {
  padding-top: 96px;
  padding-bottom: 96px;
}
@media (max-width: 680px) {
  .marketing .rv3 .cta-pad {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* §02 source-to-public pipeline. The mobile single-column rule was defeated by
   the stylesheet's duplicate base def (.map-node min-width:110px re-won), so the
   pipeline rendered as a confusing 2-up grid. Force the linear vertical flow,
   with the arrows pointing down and the header stacked. */
@media (max-width: 680px) {
  .marketing .rv3 .map-node {
    min-width: 100%;
    flex-basis: 100%;
  }
  .marketing .rv3 .map-arrow {
    transform: rotate(90deg);
    padding: 6px 0;
  }
  .marketing .rv3 .archive-map .mh {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* §05 launch-template mockup: stack the donate button above its caption so they
   stop colliding on one row. */
@media (max-width: 680px) {
  .marketing .rv3 .tpl .tcta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* =========================================================
   Dark mode (appended) — wired to the platform theme toggle.
   theme_toggle.js flips `html.dark`; the marketing surface is scoped
   under `.marketing`, so `html.dark .marketing` overrides the warm
   light tokens with a warm DARK palette (keeps the institutional hue
   family rather than the generic slate block above).
   ========================================================= */
html.dark .marketing,
html.dark.marketing {
  /* Dark-mode surface LADDER (value rhythm, not hue rhythm):
       base   — espresso #15110C   (every plain .v band — the "paper" of dark)
       lifted — stone, espresso raised ~6 L-points at the same hue
                (every .v.muted band — the alternate that creates rhythm)
       rare   — pine #162C1F       (the .v.dark punctuation bands only)
     Tokens below are the cream text scale + warm tints for INNER
     cards/chips. Light mode is untouched. */
  --dm-espresso: #15110C;
  --dm-stone: oklch(0.245 0.014 70);
  --dm-pine: #162C1F;
  --dm-cream: oklch(0.965 0.005 85);

  --background: #15110C;                     /* espresso — base band */
  --foreground: oklch(0.965 0.005 85);       /* warm cream */
  --card: oklch(0.255 0.014 66);             /* raised INNER cards only */
  --card-foreground: oklch(0.965 0.005 85);
  --primary: oklch(0.945 0.010 85);
  --primary-foreground: #15110C;
  --secondary: oklch(0.270 0.016 64);
  --secondary-foreground: oklch(0.965 0.005 85);
  --muted: oklch(0.255 0.014 66);            /* inner card / chip fill */
  --muted-foreground: oklch(0.700 0.020 75); /* muted cream */
  --accent: oklch(0.66 0.120 50);            /* sienna/amber — brand emphasis */
  --accent-foreground: #15110C;
  --rule: oklch(0.600 0.030 65);
  --ink-faint: oklch(0.640 0.028 68);
  --border: oklch(0.82 0.04 70 / 0.15);      /* warm hairline */
  --paper-warm: oklch(0.270 0.016 64);

  /* Widget tokens — dark. Same roles as the light block above; --mkt-acc
     lifts to a warm amber-sienna so it still reads as a fill on espresso. */
  --mkt-acc: #c2693f;
  --mkt-acc-fg: #1c1206;
  --s1-fg: #d98a5e; --s1-line: #c2693f;
  --s2-fg: #8fb3c4; --s2-line: #6b97a8;
  --s3-fg: #d8b66f; --s3-line: #c79a3f;
  /* --s*-bg is intentionally absent here (as in the light block): each widget
     declares its own tints ON ITSELF, and a value declared on an element always
     beats one inherited from <body> — so a shared -bg here could never win. */
}

/* rv3-scoped helper tokens — dark. `--muted-fg` and `--good` are now defined in
   BOTH themes (see the light `.marketing .rv3` block).

   HISTORY: this comment used to read "`--muted-fg` and `--good` are UNDEFINED in
   light mode (they fall back to the inherited text color — a pre-existing quirk
   we must not change)". That was an accepted workaround, not a diagnosis, and it
   was a real bug: `var(--muted-fg)` appears 73 times with ZERO fallbacks, so in
   light mode every one of those declarations was invalid-at-computed-value-time
   and `color` resolved to `inherit`. The default theme therefore had no working
   secondary-text tone — every caption, label and meta line rendered at full
   foreground weight, collapsing the type hierarchy. Fixed 2026-07-19. */
html.dark .marketing .rv3 {
  --hair: color-mix(in oklch, var(--rule) 26%, transparent);
  --muted-fg: oklch(0.740 0.018 75);
  --good: oklch(0.740 0.110 150);
}

/* ---- Band surfaces ---- */
html.dark .marketing .rv3 section.v {
  background: var(--dm-espresso);
  color: var(--foreground);
}
html.dark .marketing .rv3 section.v.muted {
  background: var(--dm-stone);
}
/* The .v.dark bands: in light mode every descendant rule derives its text
   color from var(--background) ("the inverted ink") and fills from
   var(--foreground) ("the band surface"). Flipping those two vars LOCALLY
   makes the entire existing .v.dark component system render cream-on-pine
   with zero per-element overrides. */
html.dark .marketing .rv3 section.v.dark {
  --background: var(--dm-cream);
  --foreground: var(--dm-pine);
  background: var(--dm-pine);
  color: var(--dm-cream);
}
/* §10 "Public site" demotes from pine to stone: its content is a large light
   screenshot plate, which fights a saturated green far more than it fights
   the neutral lifted surface. */
html.dark .marketing .rv3 section.v.dark[data-screen-label="10 Public site"] {
  --foreground: var(--dm-stone);
  background: var(--dm-stone);
}

/* ---- Inner-element pass ---- */

/* Cards INSET to espresso on the lifted stone bands (on espresso/pine bands
   they lift via the --muted/--foreground tints automatically). */
html.dark .marketing .rv3 section.v.muted :is(.plate, .archive-map, .proof-panel, .way .shot-host) {
  background: var(--dm-espresso);
}

/* Audience + stage cards get a faint cream lift so they read as cards, not
   just outlines floating in espresso. */
html.dark .marketing .rv3 .aud-card,
html.dark .marketing .rv3 .stage-cell {
  background: color-mix(in oklch, var(--dm-cream) 4%, transparent);
}
html.dark .marketing .rv3 .aud-card:hover {
  border-color: color-mix(in oklch, var(--accent) 55%, transparent);
}

/* Full-strength cream rules (light mode used full espresso) would glow;
   soften the heavy structural rules. */
html.dark .marketing .rv3 .stage-grid,
html.dark .marketing .rv3 .gov-item {
  border-top-color: color-mix(in oklch, var(--dm-cream) 35%, transparent);
}

/* Archive-map terminal node: light mode fills it with espresso ink; in dark
   that var resolves to cream (a hot white pop). Fill with the amber accent
   instead — espresso ink text keeps it legible. */
html.dark .marketing .rv3 .map-node.terminal {
  background: var(--accent);
}
html.dark .marketing .rv3 .map-node.terminal .nk {
  color: color-mix(in oklch, #15110C 70%, transparent);
}
html.dark .marketing .rv3 .map-node.terminal .nv {
  color: #15110C;
}

/* Screenshots / live demo frames are the page's only true light masses —
   treat them as FRAMED ARTIFACTS: dimmed slightly, hairline-framed, with a
   deeper shadow, so the eye reads them as exhibits rather than glare. */
html.dark .marketing .rv3 :is(.plate-body.shot img, .shot-host img, iframe) {
  filter: brightness(0.86) contrast(1.03) saturate(0.95);
}
html.dark .marketing .rv3 .way .shot-host {
  border: 1px solid color-mix(in oklch, var(--dm-cream) 12%, transparent);
}
html.dark .marketing .rv3 .plate.elevated {
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.75);
}

/* `.btn-primary.invert` collides with Tailwind's `invert` filter utility,
   which flips the rendered colors wholesale. In dark mode that turns the
   cream CTA button into a black block on pine — drop the filter so the
   var-flipped colors (cream fill, pine ink) render as authored. Dark-only:
   light mode keeps whatever it renders today. */
html.dark .marketing .rv3 .btn-primary.invert {
  filter: none;
}

/* Marketing theme toggle button (mirrors the language toggle treatment). */
.marketing .mkt-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; width: 32px; padding: 0;
  color: var(--muted-foreground); background: transparent;
  border: none; cursor: pointer; border-radius: 6px;
  transition: color 0.12s, background 0.12s;
}
.marketing .mkt-theme-toggle:hover { color: var(--foreground); background: color-mix(in oklch, var(--muted) 50%, transparent); }
.marketing .mkt-theme-icon { display: none; }
.marketing .mkt-theme-icon-moon { display: inline-flex; }
html.dark .marketing .mkt-theme-icon-moon { display: none; }
html.dark .marketing .mkt-theme-icon-sun  { display: inline-flex; }

/* On the pine bands, nudge the brand accent a touch more golden (terracotta
   reads more golden over green than over espresso). Dark mode only — light
   mode is deliberately left exactly as it was. */
html.dark .marketing .rv3 section.v.dark:not([data-screen-label="10 Public site"]) :is(
  h2 em, .plate-strip .fig, .fed-box .bk, .fed-hub .hk, .fed-model .fm .fi,
  .fed-gate .lock, .rail .c .n, .stage-cell .top .num, .cta-inner h2 em, .badge,
  .seclabel .mono-label .ix
) {
  color: oklch(0.84 0.135 80);
}

/* Marketing nav — explicit translucent background + brand-mark inset border.
   The Tailwind opacity-modifier token utilities the nav originally used
   (`bg-background/80`, `border-background/70`) are NOT emitted by the prebuilt
   `dist/css/main.css`, so they silently resolved to nothing. Symptoms:
     - the sticky header became fully transparent, so the dark `text-foreground`
       wordmark and `border-foreground` "Get started" button vanished whenever a
       `section.v.dark` scrolled under it in light mode;
     - the logo's inset border fell back to Tailwind's default border color
       (a light gray), invisible on the light `bg-foreground` square in dark mode.
   Drive both from the theme tokens here (these resolve in both modes because
   `--background`/`--foreground` are set globally, not inverted per-section). */
.marketing .mkt-nav {
  background: color-mix(in oklch, var(--background) 80%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* Mobile dropdown panel — same fix as .mkt-nav (replaces the missing
   `bg-background/95` util); a touch more opaque so menu links stay legible
   over whatever content sits behind it. */
.marketing .mkt-nav-panel {
  background: color-mix(in oklch, var(--background) 95%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.marketing .mkt-brand-inset {
  border: 1px solid color-mix(in oklch, var(--background) 70%, transparent);
}

/* ===========================================================================
   §07 "Search and ask" — Commons-Anim embed (appended; marketing.css is
   duplicated/divergent so fixes live at the file end per project convention).

   The Commons-Anim is a self-contained ~17MB iframe whose scripted "click
   Search" targets the real KC DESKTOP nav (which collapses to a hamburger at
   ≤900px). So we render it at a FIXED logical width (1180px, >900) and let
   marketing-commons.js scale the whole stage to fit — the flow always plays
   correctly, it just shrinks on smaller surfaces.

   The figure is sized/positioned to match §06's Fig. 02: the home.html wrapper
   caps it at 1100px with a 56px top margin, so .cw-embed just fills that width
   and keeps the 1180/740 aspect (clientWidth/1180 == the JS scale). aspect-ratio
   reserves the height up front so there's no layout shift before the lazy load. */
.marketing .rv3 .cw-embed {position: relative; width: 100%; aspect-ratio: 1180 / 740;
    overflow: hidden; background: #f4efe3;}
.marketing .rv3 .cw-embed .cw-frame {position: absolute; top: 0; left: 0;
    width: 1180px; height: 740px; border: 0; transform-origin: top left; pointer-events: none;}
@media (max-width: 560px) {.marketing .rv3 .cw-embed {aspect-ratio: 1180 / 880;}}

/* ===========================================================================
   §06 "Living archive" — scroll-pinned slideshow. The rail + frame stay fixed
   in a sticky pin while marketing-pillars.js maps scroll progress through
   .pil-track to the active slide; only the active slide's text + visual show
   (crossfade). Below 860px it degrades to stacked steps. Appended at the file
   end per the duplicated-file rule.
   =========================================================================== */
.marketing .rv3 .pil-track {position: relative; height: calc(4 * (100svh - 56px));}
.marketing .rv3 .pil-pin {position: sticky; top: 56px; height: calc(100svh - 56px);
    overflow: hidden; display: flex;}
.marketing .rv3 .pil-pin > .wrap {width: 100%;}
.marketing .rv3 .pil {display: grid; grid-template-columns: minmax(150px, 2.1fr) minmax(0, 9.9fr);
    gap: 0 clamp(28px, 4vw, 60px); height: 100%;
    padding: clamp(26px, 4.5vh, 56px) 0 clamp(18px, 3vh, 36px);}
.marketing .rv3 .pil-rail {align-self: start; display: flex; flex-direction: column; gap: 2px;
    padding: 4px 0; border-right: 1px solid var(--hair);}
.marketing .rv3 .pil-railitem {display: flex; align-items: center; gap: 12px;
    padding: 11px 18px 11px 0; text-decoration: none; color: var(--muted-foreground);
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: .08em; text-transform: uppercase; transition: color .2s; cursor: pointer;}
.marketing .rv3 .pil-railnum {display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 22px; font-size: 11px; border: 1px solid var(--hair);
    color: var(--muted-foreground); flex-shrink: 0; transition: all .2s;}
.marketing .rv3 .pil-railitem:hover {color: var(--foreground);}
.marketing .rv3 .pil-railitem.is-active {color: var(--foreground);}
.marketing .rv3 .pil-railitem.is-active .pil-railnum {background: var(--foreground);
    color: var(--background); border-color: var(--foreground);}

.marketing .rv3 .pil-stage {position: relative; min-width: 0;}
.marketing .rv3 .pil-slide {position: absolute; inset: 0;
    display: grid; grid-template-columns: minmax(0, 3.8fr) minmax(0, 6.6fr);
    gap: clamp(24px, 4vw, 52px); align-items: start; align-content: start;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .5s ease, visibility 0s linear .5s;}
.marketing .rv3 .pil-slide.is-active {opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .5s ease;}
.marketing .rv3 .pil-kick {display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--accent);}
.marketing .rv3 .pil-knum {color: var(--muted-foreground);}
.marketing .rv3 .pil-h {font-family: var(--font-serif); font-weight: 400;
    font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.015em;
    color: var(--foreground); margin: 0 0 18px; text-wrap: balance;}
.marketing .rv3 .pil-p {font-size: 16.5px; line-height: 1.6; color: var(--foreground);
    margin: 0 0 14px; max-width: 42ch; text-wrap: pretty;}
.marketing .rv3 .pil-sub {font-size: 15px; line-height: 1.6; color: var(--muted-foreground);
    margin: 0 0 22px; max-width: 42ch; text-wrap: pretty;}
.marketing .rv3 .pil-meta {font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground);}

/* the demonstration container per step */
.marketing .rv3 .pil-vis {min-width: 0;}
.marketing .rv3 .pil-embed {border: 1px solid var(--hair); border-radius: 5px;
    box-shadow: 0 22px 60px -34px rgba(0,0,0,.42);}
/* the Query slide's search starts at the top of the frame and grows downward */
.marketing .rv3 .pil-vis--search {align-self: start;}
.marketing .rv3 .pil-vis--search .mkt-search {max-height: 100%;}

/* ── Import "ingest" animation (decorative, CSS-only, staggered by --i) ── */
.marketing .rv3 .ingest {--ing-dur: 6s; position: relative; width: 100%;
    background: var(--card, #fff); border: 1px solid var(--hair); border-radius: 5px;
    box-shadow: 0 22px 60px -34px rgba(0,0,0,.4); padding: clamp(16px, 2.2vw, 26px);
    display: grid; grid-template-columns: 1fr auto 1.15fr; gap: clamp(12px, 1.8vw, 24px);
    align-items: stretch; font-family: var(--font-sans);}
.marketing .rv3 .ingest-col {display: flex; flex-direction: column; gap: 9px; min-width: 0;}
.marketing .rv3 .ingest-lbl {font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 2px;}
.marketing .rv3 .ingest-file {display: flex; align-items: center; gap: 9px; padding: 9px 11px;
    border: 1px solid var(--hair); border-radius: var(--radius-chip); background: var(--background);
    font-size: 13px; color: var(--foreground);
    animation: ingScan var(--ing-dur) calc(var(--i) * (var(--ing-dur) / 5)) infinite;}
.marketing .rv3 .ingest-ico {font-family: var(--font-mono); font-size: 9px;
    font-weight: 600; letter-spacing: .03em; padding: 3px 5px; border-radius: var(--radius-hair); color: #fff; flex-shrink: 0;}
.marketing .rv3 .ingest-ico.i-pdf {background: #c0392b;}
.marketing .rv3 .ingest-ico.i-doc {background: #2b6cb0;}
.marketing .rv3 .ingest-ico.i-aud {background: #8e44ad;}
.marketing .rv3 .ingest-ico.i-vid {background: #b5532b;}
.marketing .rv3 .ingest-ico.i-web {background: #3a7a3a;}
.marketing .rv3 .ingest-fn {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.marketing .rv3 .ingest-pipe {align-self: center; position: relative;
    width: clamp(26px, 4vw, 54px); height: 2px;
    background: linear-gradient(90deg, transparent, var(--hair), transparent);}
.marketing .rv3 .ingest-pipe i {position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
    border-radius: var(--radius-dot); background: var(--accent); animation: ingFlow var(--ing-dur) linear infinite;}
.marketing .rv3 .ingest-pipe i:nth-child(2) {animation-delay: calc(var(--ing-dur) / -3);}
.marketing .rv3 .ingest-pipe i:nth-child(3) {animation-delay: calc(var(--ing-dur) / -1.5);}
.marketing .rv3 .ingest-item {display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px;
    border: 1px solid var(--hair); border-radius: var(--radius-chip); background: var(--background);
    opacity: 0; transform: translateY(8px);
    animation: ingArrive var(--ing-dur) calc(var(--i) * (var(--ing-dur) / 5)) infinite;}
.marketing .rv3 .ingest-check {display: inline-flex; width: 18px; height: 18px; border-radius: var(--radius-dot);
    align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
    background: color-mix(in oklch, var(--good, #3a7a3a) 16%, transparent); color: var(--good, #3a7a3a);}
.marketing .rv3 .ingest-check svg {width: 11px; height: 11px;}
.marketing .rv3 .ingest-body {min-width: 0;}
.marketing .rv3 .ingest-title {display: block; font-size: 13px; font-weight: 500; color: var(--foreground);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.marketing .rv3 .ingest-tags {display: flex; gap: 5px; margin-top: 5px;}
.marketing .rv3 .ingest-tags b {font-family: var(--font-mono); font-size: 9px;
    font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--muted-foreground);
    border: 1px solid var(--hair); border-radius: var(--radius-hair); padding: 1px 4px;}
@keyframes ingFlow {0% {left: 0; opacity: 0;} 15% {opacity: 1;} 85% {opacity: 1;} 100% {left: 100%; opacity: 0;}}
@keyframes ingArrive {0%, 8% {opacity: 0; transform: translateY(8px);} 18% {opacity: 1; transform: none;}
    80% {opacity: 1; transform: none;} 92% {opacity: 0; transform: translateY(-6px);} 100% {opacity: 0;}}
@keyframes ingScan {0%, 8% {border-color: var(--hair);}
    14% {border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent);}
    26% {border-color: var(--hair); box-shadow: none;} 100% {border-color: var(--hair);}}

/* ── responsive: below 860px the pin is released and slides stack normally ── */
@media (max-width: 860px) {
  .marketing .rv3 .pil-track {height: auto;}
  .marketing .rv3 .pil-pin {position: static; height: auto; overflow: visible; display: block;}
  .marketing .rv3 .pil {grid-template-columns: 1fr; height: auto; padding: 0; margin-top: 24px;}
  .marketing .rv3 .pil-rail {position: sticky; top: 56px; z-index: 5; flex-direction: row; gap: 6px;
      overflow-x: auto; scrollbar-width: none; padding: 10px 0;
      border-right: 0; border-bottom: 1px solid var(--hair); background: var(--background);}
  .marketing .rv3 .pil-rail::-webkit-scrollbar {display: none;}
  .marketing .rv3 .pil-railitem {padding: 6px 10px; white-space: nowrap;}
  .marketing .rv3 .pil-stage {position: static;}
  .marketing .rv3 .pil-slide {position: static; opacity: 1; visibility: visible; pointer-events: auto;
      grid-template-columns: 1fr; gap: 22px; padding: 40px 0;}
  .marketing .rv3 .pil-slide + .pil-slide {border-top: 1px solid var(--hair);}
  .marketing .rv3 .pil-vis {order: 2;}
}
@media (max-width: 560px) {
  .marketing .rv3 .ingest {grid-template-columns: 1fr; gap: 14px;}
  .marketing .rv3 .ingest-pipe {width: 2px; height: 26px; justify-self: center;
      background: linear-gradient(180deg, transparent, var(--hair), transparent);}
  .marketing .rv3 .ingest-pipe i {top: 0; left: 50%; margin-left: -2.5px; margin-top: 0;
      animation-name: ingFlowV;}
}
@keyframes ingFlowV {0% {top: 0; opacity: 0;} 15% {opacity: 1;} 85% {opacity: 1;} 100% {top: 100%; opacity: 0;}}
@media (prefers-reduced-motion: reduce) {
  .marketing .rv3 .ingest * {animation: none !important;}
  .marketing .rv3 .ingest-item {opacity: 1; transform: none;}
  .marketing .rv3 .ingest-pipe i {display: none;}
}

/* ===========================================================================
   SITE-WIDE FLUID RESPONSIVE SYSTEM (appended last; wins on equal specificity).
   Fixes wasted width + small fixed-px type on large screens. Decisions:
   content caps ~1880px, BOLD type growth, §06 visual goes full-bleed.
   Clamp design: current px holds at ~1280px, grows to target by ~2560px.
   =========================================================================== */
.marketing { --page-max: clamp(1260px, 90vw, 1880px); --page-gutter: clamp(40px, 4.2vw, 96px); }
.marketing .rv3 {
  --fs-hero:  clamp(36px, 1.25rem + 2.50vw, 84px);   /* hero h1   52→84 */
  --fs-h2:    clamp(36px, 1.75rem + 1.72vw, 72px);   /* .h2       50→72 */
  --fs-h3:    clamp(19px, 0.70rem + 0.86vw, 34px);   /* sub-heads 22→34 */
  --fs-pil-h: clamp(25px, 0.9rem + 1.02vw, 40px);    /* §06 slide 30→40 */
  --fs-lede:  clamp(15px, 0.625rem + 0.47vw, 22px);  /* ledes     16→22 */
  --fs-body:  clamp(14.5px, 0.82rem + 0.23vw, 19px); /* body      16→19 */
  --fs-sm:    clamp(12px, 0.63rem + 0.23vw, 16px);
  --fs-mono:  clamp(10px, 0.56rem + 0.156vw, 13px);
}

/* fluid container + nav alignment */
.marketing .rv3 .wrap { max-width: var(--page-max); padding-inline: var(--page-gutter); margin-inline: auto; }
@media (max-width: 680px) { .marketing .rv3 .wrap { padding-inline: var(--page-gutter-phone); } }
.marketing .mkt-nav > div { max-width: var(--page-max); padding-inline: var(--page-gutter); }

/* type application (consume the tokens; later source order wins) */
.marketing .rv3 h2.h2 { font-size: var(--fs-h2); }
.marketing .rv3 .hero-b .col-left h1 { font-size: var(--fs-hero); }
.marketing .rv3 .cta-inner h2 { font-size: clamp(42px, 2.25rem + 1.88vw, 84px); }
.marketing .rv3 .mx .lead h3 { font-size: clamp(28px, 1rem + 1.41vw, 52px); }
.marketing .rv3 :is(.stage-cell h4, .way .wh .lbl h3, .aud-card .ah h3, .gov-item h3,
  .living-cell h3, .el-head .lbl h3, .trio .t h3, .fed-model .fm h4, .rail .c h4) { font-size: var(--fs-h3); }
.marketing .rv3 .pil-h { font-size: var(--fs-pil-h); }
.marketing .rv3 :is(.lede, .hero-deck, .cta-inner .deck, .pil-p) { font-size: var(--fs-lede); }
.marketing .rv3 :is(.gov-item p, .living-cell p, .trio .t p, .fed-model .fm p, .aud-card .desc,
  .plate-caption, .pil-sub, .rail .c p, .mx .lead p, details.faq p) { font-size: var(--fs-body); }
.marketing .rv3 :is(.mono-label, .pil-kick, .pil-meta) { font-size: var(--fs-mono); }

/* readable line-length caps for prose that lacked one */
.marketing .rv3 .cta-inner .deck { max-width: 48ch; }
.marketing .rv3 .gov-item p { max-width: 52ch; }
.marketing .rv3 .mx .lead p { max-width: 46ch; }

/* ── §06 framed slideshow (≥861px; the ≤860 stacked fallback is untouched) ──
   The heading + lede live INSIDE the pinned frame, stacked above the rail/slides,
   and everything sits in the normal capped .wrap so the visual aligns to the
   container's right edge (NOT bleeding past it) and the rail aligns to the left
   edge with the heading. The rail column auto-sizes so its labels never clip. */
@media (min-width: 861px) {
  .marketing .rv3 .pil-pin > .wrap { display: flex; flex-direction: column; height: 100%;
      padding-block: clamp(16px, 2.6vh, 36px); }
  .marketing .rv3 .pil-frame > .head-grid { margin: 0 0 clamp(20px, 3vh, 44px); }
  .marketing .rv3 .pil { grid-template-columns: auto minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);  /* the row fills the pin so the visual can center in it */
      column-gap: clamp(28px, 3vw, 56px); flex: 1 1 auto; min-height: 0; }
  .marketing .rv3 .pil-rail { align-self: start; }
  /* Text stays narrow + top-aligned to the rail; the visual takes the rest of the
     width AND fills the pane height — vertically centered so there's no dead space
     dumped below a short, wide demo (the §06 "void below" bug). */
  .marketing .rv3 .pil-slide { grid-template-columns: minmax(0, 34ch) minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);  /* fill the stage so the visual can center */
      column-gap: clamp(40px, 3.8vw, 88px); align-items: stretch; }
  .marketing .rv3 .pil-text { align-self: start; }
  .marketing .rv3 .pil-vis { width: 100%; min-width: 0; align-self: stretch;
      display: flex; flex-direction: column; justify-content: center; }
  .marketing .rv3 .pil-vis .cw-embed { width: 100%; height: auto; max-height: 100%;
      margin-inline-start: auto; }
  .marketing .rv3 .pil-vis .ingest { max-width: 100%; }
  /* Query: search bar stays TOP-anchored, results grow into the reclaimed height */
  .marketing .rv3 .pil-vis--search { justify-content: flex-start; }
  .marketing .rv3 .pil-vis--search .mkt-search { max-height: 100%; overflow: hidden; }
}

/* ===========================================================================
   §06 restructure (2026-06-19): stage toggles move from a left vertical rail to
   a horizontal tab strip sitting as a subheading under the heading (pinned with
   it). Freeing the rail column lets each slide's text + visual span the full
   width — more room for the labels and the demo. The rail is now a SIBLING of
   .pil (.pil-frame > .pil-rail). Overrides the base + earlier §06 rules; keep
   at file end. Design primitive only (number over label, active accent
   underline) — no card chrome.
   =========================================================================== */
.marketing .rv3 .pil-frame > .pil-rail {
  display: flex; flex-direction: row; align-items: stretch;
  gap: clamp(12px, 1.6vw, 30px);
  margin: 0 0 clamp(16px, 2.4vh, 32px); padding: 0; border: 0;
  /* flex: none so the strip keeps its content height in the pinned flex column;
     overflow-x:auto (for the mobile scroll) would otherwise let it shrink and
     the bottom border would clip through the labels. */
  align-self: stretch; flex: 0 0 auto; overflow-x: auto; scrollbar-width: none;
}
.marketing .rv3 .pil-frame > .pil-rail::-webkit-scrollbar { display: none; }
.marketing .rv3 .pil-frame > .pil-rail .pil-railitem {
  flex: 1 1 0; min-width: max-content;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 0 0 13px; border-bottom: 1.5px solid var(--hair);
  color: var(--muted-foreground); transition: color .2s, border-color .2s;
}
.marketing .rv3 .pil-frame > .pil-rail .pil-railnum {   /* plain number, no box */
  width: auto; height: auto; border: 0; background: none; padding: 0;
  font-size: var(--fs-mono); color: var(--muted-foreground); transition: color .2s;
}
.marketing .rv3 .pil-frame > .pil-rail .pil-raillabel {
  font-family: var(--font-mono);
  font-size: clamp(11.5px, 0.5rem + 0.32vw, 14.5px); letter-spacing: .05em;
  text-transform: uppercase; line-height: 1.1;
}
.marketing .rv3 .pil-frame > .pil-rail .pil-railitem:hover { color: var(--foreground); }
.marketing .rv3 .pil-frame > .pil-rail .pil-railitem.is-active {
  color: var(--foreground); border-bottom-color: var(--accent);
}
.marketing .rv3 .pil-frame > .pil-rail .pil-railitem.is-active .pil-railnum { color: var(--accent); }

/* the stage spans the full pinned width now (no rail column) */
@media (min-width: 861px) {
  .marketing .rv3 .pil-frame > .head-grid { margin: 0 0 clamp(14px, 2vh, 30px); }
  .marketing .rv3 .pil { display: flex; flex-direction: column; grid-template-columns: none;
      flex: 1 1 auto; min-height: 0; padding: 0; }
  .marketing .rv3 .pil-stage { flex: 1 1 auto; min-height: 0; }
  .marketing .rv3 .pil-slide { grid-template-columns: minmax(0, 40ch) minmax(0, 1fr);
      column-gap: clamp(44px, 4.5vw, 104px); }
}

/* ===========================================================================
   Mobile polish (2026-06-20) — appended at file end so it wins over the
   divergent earlier rules.
   1) Header gutter parity: the page-gutter mobile override (≤680px) dropped
      .wrap to 22px but never touched the nav, leaving the header at the 40px
      desktop gutter — visibly wider than the body. Match it.
   2) §06 stage rail: smaller mono labels + breathing room above the strip so
      the tabs sit balanced under the section lede instead of crowding it.
   =========================================================================== */
@media (max-width: 680px) {
  .marketing .mkt-nav > div,
  .marketing .mkt-nav-panel > nav { padding-inline: var(--page-gutter-phone); }
}
@media (max-width: 860px) {
  .marketing .rv3 .pil-frame > .pil-rail { margin-top: 20px; }
  .marketing .rv3 .pil-frame > .pil-rail .pil-raillabel { font-size: 10px; }
  .marketing .rv3 .pil-frame > .pil-rail .pil-railnum { font-size: 9px; }
}

/* Page-gutter parity (2026-06-20) — align the Tailwind utility pages + shared
   chrome (footer/CTA/strip) to the nav/.wrap --page-gutter. They used
   px-6 lg:px-10 (24px below 1024, 40px above), so at tablet the body sat at a
   24px gutter while the nav was at 40px. Swap those gutters to .mkt-px so every
   marketing container's left edge matches the header at every breakpoint. */
.marketing .mkt-px { padding-inline: var(--page-gutter); }
@media (max-width: 680px) { .marketing .mkt-px { padding-inline: var(--page-gutter-phone); } }

/* ===========================================================================
   §06 Publish carousel (2026-06-20) — the Publish slide's visual holds two demos
   (public church site, then the org workspace) that cross-fade. Both .pil-cslide
   stack in one grid cell so the carousel sizes to the taller demo and the visual
   pane keeps its footprint; marketing-carousel.js toggles .is-shown. The existing
   `.pil-vis .cw-embed` rules still size each embed (width-bound, centered).
   =========================================================================== */
.marketing .rv3 .pil-carousel { display: grid; width: 100%; max-height: 100%; min-width: 0; }
.marketing .rv3 .pil-cslide {
  grid-area: 1 / 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.marketing .rv3 .pil-cslide.is-shown {
  opacity: 1; visibility: visible;
  transition: opacity .6s ease;
}
/* ≤860 (stacked, no pin): the carousel stays a one-at-a-time crossfade — only the
   .is-shown demo is visible. marketing-carousel.js drives it via an
   IntersectionObserver here (the pinned active-slide event doesn't fire when
   stacked). If JS is unavailable, the first demo (is-shown in markup) shows. */

/* Home hero small-screen fix (2026-06-20): the .rv3-home 1.7/1fr split (~L1649)
   is a non-media rule that overrode the ≤1080 collapse, so the home hero stayed
   two-column on phones — cramming the assistant widget into a sliver (the
   minmax(0,…) tracks shrink rather than overflow, so overflow checks missed it).
   Collapse it to one column at ≤1080, matching the vertical pages. */
@media (max-width: 1080px) {
  .marketing .rv3-home .hero-b .grid { grid-template-columns: 1fr; }
}

/* Safari/WebKit shows the default <summary> disclosure triangle even with
   Tailwind `list-none` (which only sets list-style). The nav language-toggle
   <details> had just list-none, so an arrow appeared next to "EN" on mobile
   Safari (not in Firefox/Chromium). Strip the webkit marker for all marketing
   summaries — the FAQ already sets its own; this covers the language toggle. */
.marketing summary { list-style: none; }
.marketing summary::-webkit-details-marker { display: none; }

/* Legal pages: align .legal-wrap gutter with the nav/--page-gutter (2026-06-20).
   The base legal-wrap is min(1180px, 100%-80px) = 40px (matches the nav), but
   the ≤900 rule dropped it to 24px and ≤560 to 16px — re-introducing the
   header-vs-body gutter mismatch the .mkt-px pass fixed elsewhere. Hold 40px
   through tablet and drop to 22px on phones, matching the nav exactly. */
@media (max-width: 900px) {
  .marketing .legal-wrap { width: min(1180px, calc(100% - 80px)); }
}
@media (max-width: 680px) {
  .marketing .legal-wrap { width: calc(100% - 44px); }
}