/* Shared styles for every public marketing page (Phase 8A). One file,
   loaded by every page under /public/marketing/*.html — kept separate
   from index.html's own <style> block on purpose: the dashboard shell and
   the marketing site are deliberately two different navigation/visual
   systems (see the migration note), and a shared external stylesheet
   avoids duplicating ~150 lines of CSS into 9 separate files while still
   letting each page's own <style> block hold only what's unique to it.

   Same CSS custom-property NAMES/VALUES as index.html's theme tokens
   (kept in sync manually — no build step in this codebase to share them
   for real) so a visitor bouncing between the marketing site and the
   dashboard never sees a jarring palette shift, and so the shared
   localStorage "theme" key means one flip of the toggle holds across
   both. Two marketing-only accents added on top (--accent2 purple,
   --accent-soft) for the "blue/purple" direction without touching any of
   the core tokens. */

:root {
  color-scheme: dark light;
  --bg: #17181c;
  --panel: #212228;
  --text: #eee;
  --muted: #999;
  --border: #3a3b42;
  --accent: #3b82f6;
  --accent-text: #08101f;
  --error: #f87171;
  --ok: #4ade80;
  --accent2: #a78bfa;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent2-soft: color-mix(in srgb, var(--accent2) 16%, transparent);
}
:root[data-theme="light"] {
  --bg: #f7f7f8;
  --panel: #ffffff;
  --text: #1a1a1a;
  --muted: #666;
  --border: #ddd;
  --accent: #2563eb;
  --accent-text: #ffffff;
  --error: #b91c1c;
  --ok: #15803d;
  --accent2: #7c3aed;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}
a { color: inherit; }
img, svg { max-width: 100%; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  /* Anchors the mobile dropdown below (position:absolute) to the header
     bar itself, not the page — see the media query's own comment. */
  position: relative;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  /* Matches the dashboard shell's h1 (public/index.html), which governs its
     own .brand-wordmark at 1.5rem — this was 1.05rem, so the same
     "AutoRankEngine" wordmark rendered visibly smaller on every marketing
     page than on the dashboard/login screens. .logo-tagline below keeps its
     own explicit smaller font-size, so this only affects the wordmark. */
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
/* Real icon mark (this request) — sits to the left of the existing text
   wordmark, which stays real HTML/CSS text (already theme-aware, uses the
   site's own fonts) rather than being baked into the image. The icon's
   own colors (blue/purple/green) are fixed, not currentColor-based — it
   doesn't need to flip with the theme toggle the way the text does, and
   reads fine on both light and dark headers as-is. Bumped 28px -> 42px
   per this request ("currently rendering too small"). */
.logo-icon {
  height: 42px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
/* Wordmark + tagline stack (this request) — the icon sits to the left of
   this whole column, wordmark on top, tagline directly beneath. */
.logo-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
/* "Engine" accent color (this request). No prior split-color treatment
   actually existed anywhere in the codebase before this — "AutoRankEngine"
   was one plain-colored text run everywhere (confirmed by search before
   adding this). Using var(--accent) rather than a hardcoded hex sampled
   from the icon: it's the same blue direction, already tuned per-theme
   (a lighter blue on dark backgrounds, a deeper blue on light ones) the
   way a fixed hex wouldn't be, and it's already this design system's own
   "blue" token (see the accent2/purple comment above). */
.logo-accent { color: var(--accent); }
.logo-tagline {
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.01em;
  white-space: normal;
}
.site-nav {
  display: flex;
  gap: 1.4rem;
  flex: 1;
  flex-wrap: wrap;
}
.site-nav a {
  text-decoration: none;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
.site-header-cta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
/* Desktop default: icon hidden, "Log in" text shown — swapped the other
   way under the mobile breakpoint below. */
.cta-login-icon { display: none; }

/* Real mobile-responsiveness fix (this request) — found via real device
   testing: .site-nav's own flex-wrap just let the 5 nav links wrap onto
   their own line(s) next to the logo instead of collapsing, cramped and
   messy on a real phone. Hidden here unconditionally on desktop/tablet;
   the media query below is what actually shows the toggle and changes
   .site-nav's own layout, scoped to real narrow-viewport widths only. */
.nav-toggle-btn {
  display: none;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 1.1rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
/* Real mobile fix (this request) — reported as "menu icon overlapping the
   logo text": .site-header-inner never wrapped, and on a real phone the
   logo (nowrap wordmark) plus the hamburger plus the full "Log in"/"Start
   Free Trial" CTA pair together are wider than the viewport has room for,
   even with .site-nav's links already hidden below. flex-wrap lets the
   CTA group drop to its own line instead of overlapping the logo when
   there genuinely isn't room — it stays on the same line on a wider
   phone/tablet where it does fit, since wrapping only happens when
   needed. Paired with the login-icon and shrunk-button rules below, which
   reduce how often wrapping is even necessary. */
@media (max-width: 720px) {
  .site-header-inner { flex-wrap: wrap; row-gap: 0.5rem; }
  .site-nav { display: none; }
  /* Reverted the person-icon swap (this request, follow-up) — now that
     .site-header-inner actually wraps (above), the CTA row gets its own
     full-width second line with real room, so "Log in" can stay as text
     instead of shrinking to an icon. .cta-login-icon/.cta-login-text
     markup is left in place (harmless, icon stays hidden at every width
     via the base .cta-login-icon rule) rather than re-touching all 10
     marketing pages again to remove it.
     Both CTA buttons shrunk to the same explicit height (this request) so
     "Log in" and "Start Free Trial" match each other exactly on their own
     line, not just individually shrunk. */
  .site-header-cta .btn-ghost,
  .site-header-cta .btn-primary {
    height: 2.15rem;
    padding: 0 0.85rem;
    font-size: 0.82rem;
  }
  /* Real fix (follow-up to the request above): a true floating dropdown,
     not an inline block that pushes the CTA row/page content down when
     opened — position:absolute against .site-header-inner's own
     position:relative, so it overlays the page below the header instead
     of shifting anything. Solid background (not the header's translucent
     blur) since it's covering real page content now, not sitting flush
     against it. */
  .site-nav.nav-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    gap: 0;
    padding: 0.4rem 1.5rem 0.8rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.25);
  }
  .site-nav.nav-open a { padding: 0.7rem 0.1rem; border-top: 1px solid var(--border); }
  .site-nav.nav-open a:first-child { border-top: none; }
  .nav-toggle-btn { display: flex; }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.15rem;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-lg { padding: 0.85rem 1.6rem; font-size: 1rem; }

#theme-toggle-btn {
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Auth-aware header's initials avatar (marketing.js) — no existing
   avatar/initials pattern exists in index.html to reuse (checked; the
   dashboard's own account display is a plain text email/name, no icon),
   so this is new but deliberately matches this file's own existing
   circular-icon convention (#theme-toggle-btn just above: same size,
   same border-radius:50%, same flex-centered single-glyph layout) rather
   than inventing an unrelated style. */
.user-avatar {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
}

/* --- Hero --- */
.hero {
  padding: 4.5rem 0 3.5rem;
}
/* Real mobile fix (this request) — 4.5rem (72px) of top padding above the
   "SEO on autopilot" eyebrow read as too much empty space under the
   sticky header on a real phone. Cut to under half; bottom padding left
   alone since only the top gap was reported. */
@media (max-width: 600px) {
  .hero { padding-top: 2rem; }
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 880px) {
  /* minmax(0, 1fr), not plain 1fr (real mobile fix, this request) — a
     plain 1fr track's minimum defaults to its content's min-content
     width, so the hero's checklist/h1 text couldn't shrink below that on
     a real phone and pushed the whole page into horizontal overflow.
     Confirmed via a real narrow-viewport DOM test: the computed track
     width was stuck at ~394px in a 312px-wide column until this fix.
     Same root-cause pattern as .stats-grid's own fix elsewhere. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
h1 { font-size: 2.7rem; line-height: 1.12; margin: 0 0 1rem; letter-spacing: -0.01em; }
h1 .accent2 { color: var(--accent2); }
/* Real mobile fix (this request) — 2.7rem (43.2px) is sized for the
   desktop hero; on a real narrow phone it read as oversized against the
   rest of the stacked content. 600px, not the 880px .hero-grid stacking
   breakpoint — this is specifically about real-phone widths, not the
   wider tablet range where 2.7rem still reads fine as one column.
   Matches .content-page h1's own already-established mobile-appropriate
   2rem size below, rather than inventing a new scale. */
@media (max-width: 600px) {
  h1 { font-size: 2rem; }
}
.subhead { font-size: 1.15rem; color: var(--muted); margin: 0 0 1.6rem; max-width: 42rem; }
.checklist { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.checklist li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.98rem; }
.checklist li::before { content: "✓"; color: var(--ok); font-weight: 700; flex-shrink: 0; }
.hero-cta-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hero-cta-note { font-size: 0.83rem; color: var(--muted); }

/* --- Dashboard preview mock ---
   Re-synced (this request) to the real dashboard's actual Phase 9B widget
   styling — this mock predates 9B's colored-left-border stat treatment,
   so it had drifted to a flatter, undifferentiated look. Still a CSS-only
   mock, not a screenshot (same reasoning as the original build: avoids
   staleness whenever the real dashboard changes, and never shows real
   account data on a public page) — only the visual language now genuinely
   matches, not the literal DOM structure of every real widget. */
.dash-preview {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px; /* was 14px — matches the real .panel radius exactly */
  padding: 1.1rem;
}
.dash-preview-topbar { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
.dash-preview-topbar span { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--border); }
/* minmax(0, 1fr), not plain 1fr (real mobile fix, this request): a plain
   1fr track's minimum defaults to its content's min-content width, so
   "Keywords tracked" couldn't shrink below its own rendered width — on a
   narrow phone (where .hero-grid has already stacked to 1 column) that
   pushed this row wider than the hero itself, the actual mechanism behind
   the reported mobile cut-off. */
.dash-preview-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin-bottom: 1rem; }
/* Real dashboard's .stat cards (index.html) sit on the SAME background as
   their own wrapping .panel — a full 1px border plus a colored left edge
   is what gives each one identity, not a background-color difference.
   Matched here exactly, including reusing the real per-stat accent
   colors/semantics (green = real output count, blue = ranking/performance
   metric, violet = a capability limit) rather than inventing new ones. */
.dash-preview-stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--stat-accent, var(--border));
  border-radius: 8px;
  /* Left/right padding trimmed 0.5rem -> 0.3rem (this request, real mobile
     fix), matching the real dashboard's own .stat rule (index.html) —
     more real room for "Keywords tracked" before it needs to wrap. */
  padding: 0.65rem 0.3rem;
  text-align: center;
}
.dash-preview-stat.ok { --stat-accent: var(--ok); }
.dash-preview-stat.accent { --stat-accent: var(--accent); }
.dash-preview-stat.violet { --stat-accent: #7c3aed; }
.dash-preview-stat .num { font-size: 1.25rem; font-weight: 700; }
.dash-preview-stat .lbl { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
.dash-preview-row {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.55rem 0.75rem; margin-bottom: 0.5rem; font-size: 0.83rem;
}
.dash-preview-row .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; }
.dash-preview-row .dot.ok { background: var(--ok); }
/* Was #d97706 (amber) — real .article-status-badge.status-generating
   (index.html) uses var(--accent) blue for "generating," not amber; amber
   is reserved for ready_for_review in the real product. Fixed to match. */
.dash-preview-row .dot.pending { background: var(--accent); }
.dash-preview-row .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-preview-row .meta { color: var(--muted); flex-shrink: 0; }

/* --- Trust badge row --- */
.trust-row {
  display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; justify-content: center;
  padding: 1.6rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  color: var(--muted); font-size: 0.85rem;
}
.trust-row span { display: flex; align-items: center; gap: 0.4rem; }

/* --- "Only tool that does all three" banner ---
   Reformatted (this request) — same wording throughout, including the
   hedged "commonly estimated at... published pricing" phrasing, which
   stays untouched. Was one centered wall-of-text paragraph; now three
   distinct blocks (comparison / cost framing / takeaway), left-aligned
   for readability, with the closing takeaway line visually promoted
   above the other two since it's the actual point of the section. */
.banner-section {
  margin: 4rem 0;
  background: linear-gradient(180deg, var(--accent-soft), var(--accent2-soft) 140%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2.8rem 2.5rem;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
/* min-width:0 — without it a flex child with unconstrained text content
   won't shrink below its content's natural width, which would push
   .banner-icon out instead of letting the text wrap. */
.banner-content { flex: 1; min-width: 0; }
.banner-section h2 { font-size: 1.9rem; margin: 0 0 1.3rem; max-width: 42rem; }
.banner-section p { font-size: 1.03rem; color: var(--text); max-width: 42rem; margin: 0 0 0.9rem; opacity: 0.92; }
.banner-section .banner-cost { margin-bottom: 1.5rem; }
/* Fills the real empty space that opened up on the right once the copy
   went left-aligned (this request, follow-up) — same real icon used in
   the header/footer, not a new asset. Hidden below 880px (same breakpoint
   the hero section already stacks at) rather than shrunk, since a small
   version doesn't add anything and just competes with the text for room
   at the point copy needs the space most. */
.banner-icon {
  height: 190px;
  width: auto;
  flex-shrink: 0;
}
@media (max-width: 880px) {
  .banner-section { flex-direction: column; }
  .banner-icon { display: none; }
}
/* The takeaway — same font as the body copy above it before this request;
   now sized up, full-opacity, and set off with its own top divider so it
   reads as the section's conclusion rather than a fourth sentence in the
   same paragraph. */
.banner-section .banner-takeaway {
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--text);
  opacity: 1;
  margin: 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--border);
}
.banner-section .price-line { font-weight: 700; color: var(--accent); }

/* --- Section heading --- */
.section { padding: 3.5rem 0; }
.section-head { text-align: center; max-width: 40rem; margin: 0 auto 2.6rem; }
.section-head h2 { font-size: 2rem; margin: 0 0 0.7rem; }
.section-head p { color: var(--muted); margin: 0; }

/* --- Step band --- */
.step-band { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
@media (max-width: 900px) { .step-band { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .step-band { grid-template-columns: repeat(2, 1fr); } }
.step-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 1.3rem 1rem; text-align: center;
}
.step-card .step-num {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem;
  margin: 0 auto 0.7rem;
}
.step-card .step-name { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.3rem; }
.step-card .step-desc { font-size: 0.78rem; color: var(--muted); }

/* --- Feature grid (Features page) --- */
/* minmax(0, 1fr) throughout (real mobile hardening, this request) — same
   overflow mechanism found and fixed on .hero-grid/.stats-grid elsewhere:
   a plain 1fr track can't shrink below its content's min-content width. */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
@media (max-width: 880px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } }
.feature-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; }
.feature-card .icon { font-size: 1.6rem; margin-bottom: 0.7rem; }
.feature-card h3 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.feature-card p { font-size: 0.88rem; color: var(--muted); margin: 0; }

/* --- Pricing table --- */
/* SEO_PLUGIN_MAPPING_MIGRATION.md — footnote on the "WordPress Publishing
   (5 SEO plugins)" line: 3 of the 5 need a one-time site-side snippet for
   full SEO meta auto-sync, so the plain claim overstated parity across all
   5. Same muted/small treatment as .price-note, just centered under the
   whole grid instead of scoped to one card. */
.pricing-footnote { text-align: center; font-size: 0.8rem; color: var(--muted); margin: 1rem auto 0; max-width: 40rem; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; align-items: stretch; }
@media (max-width: 880px) { .pricing-grid { grid-template-columns: minmax(0, 1fr); max-width: 26rem; margin: 0 auto; } }
.price-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.8rem 1.6rem; display: flex; flex-direction: column; position: relative;
}
.price-card.popular { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.price-card .popular-badge {
  position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--accent-text); font-size: 0.72rem; font-weight: 700;
  padding: 0.28rem 0.8rem; border-radius: 999px; white-space: nowrap;
}
.price-card h3 { font-size: 1.1rem; margin: 0 0 0.3rem; }
.price-card .price { font-size: 2.2rem; font-weight: 700; margin: 0.4rem 0 0.1rem; }
.price-card .price span { font-size: 0.95rem; font-weight: 500; color: var(--muted); }
.price-card .price .price-amount { font-size: inherit; font-weight: 700; color: var(--accent); }
.price-card .price-note { font-size: 0.8rem; color: var(--muted); margin-bottom: 1rem; }
.price-card .price-note .price-amount { font-weight: 700; color: var(--text); }
.price-card .price-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
  background: var(--accent-soft); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.85rem 0.5rem; margin: 0 0 1rem;
}
.price-card .price-stat { text-align: center; }
.price-card .price-stat .stat-num { font-size: 1.15rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.price-card .price-stat .stat-lbl { font-size: 0.68rem; color: var(--muted); margin-top: 0.15rem; }
.price-card .savings-callout {
  font-size: 0.78rem; color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent);
  border-radius: 6px; padding: 0.4rem 0.6rem; margin-bottom: 1.1rem;
}
.price-card ul { list-style: none; margin: 0 0 1.4rem; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 0.55rem; }
.price-card li { font-size: 0.87rem; display: flex; align-items: flex-start; gap: 0.5rem; }
.price-card li::before { content: "✓"; color: var(--ok); font-weight: 700; flex-shrink: 0; }
.price-card li.unavailable { color: var(--muted); }
.price-card li.unavailable::before { content: "–"; color: var(--muted); }

/* --- Final CTA --- */
.final-cta { text-align: center; padding: 4rem 0; }
.final-cta h2 { font-size: 2rem; margin: 0 0 0.8rem; }
.final-cta p { color: var(--muted); margin: 0 0 1.8rem; }

/* --- Simple content pages (About / legal) --- */
.content-page { padding: 3rem 0 4rem; max-width: 46rem; margin: 0 auto; }
.content-page h1 { font-size: 2rem; }
.content-page .updated { color: var(--muted); font-size: 0.85rem; margin-bottom: 2rem; }
.content-page h2 { font-size: 1.25rem; margin-top: 2.2rem; }
.content-page p, .content-page li { color: var(--text); font-size: 0.95rem; }
.content-page .placeholder-note {
  border: 1px dashed var(--error); color: var(--error); border-radius: 8px;
  padding: 0.9rem 1.1rem; font-size: 0.85rem; margin-bottom: 2rem;
}
/* One still-missing field inline within otherwise-real legal text (the
   business's real legal name) — flagged inline rather than blocking the
   rest of the real policy text behind a full placeholder block. */
.content-page .tbd {
  color: var(--error); font-weight: 700; border-bottom: 1px dashed var(--error);
}

/* --- Footer --- */
.site-footer { border-top: 1px solid var(--border); margin-top: 2rem; }
.site-footer-inner {
  max-width: 1120px; margin: 0 auto; padding: 3rem 1.5rem 2rem;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem;
}
@media (max-width: 700px) { .site-footer-inner { grid-template-columns: 1fr 1fr; } }
.footer-col h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin: 0 0 0.8rem; }
.footer-col a { display: block; text-decoration: none; color: var(--text); font-size: 0.88rem; margin-bottom: 0.55rem; }
.footer-tagline { color: var(--muted); font-size: 0.85rem; margin-top: 0.6rem; max-width: 18rem; }
.site-footer-bottom { text-align: center; color: var(--muted); font-size: 0.8rem; padding: 1.2rem 0 2rem; }