/* Visual roles for standalone pages. Load after each page's layout CSS.
   Do not add global layout resets: legacy templates have different markup. */
:root {
  --foreground: var(--brand-ink);
  --muted-foreground: var(--brand-muted);
  --border: var(--brand-border);
  --radius: var(--brand-radius);
  --primary: var(--brand-blue);
  --primary-foreground: var(--brand-surface);
  --link: var(--brand-blue);
  --stat: var(--brand-ink);
  --bullet: var(--brand-muted);
}
body {
  font-family: var(--brand-font);
  color: hsl(var(--brand-body));
  background: hsl(var(--brand-surface));
}
h1, h2, h3, h4 { color: hsl(var(--brand-ink)); text-wrap: balance; }
a { color: hsl(var(--brand-blue)); text-underline-offset: .2em; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid hsl(var(--brand-blue)); outline-offset: 4px;
}
nav .logo, .nav .logo { color: hsl(var(--brand-ink)); }
.btn, .cta-button, .btn-primary, .button-primary {
  background: hsl(var(--brand-blue)); color: hsl(var(--brand-surface));
  border: 1px solid hsl(var(--brand-blue)); border-radius: var(--brand-radius);
  box-shadow: var(--brand-button-shadow); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; text-align: center; text-decoration: none;
}
.btn:hover, .cta-button:hover, .btn-primary:hover, .button-primary:hover {
  background: hsl(var(--brand-blue-hover)); color: hsl(var(--brand-surface)); text-decoration: none;
}
.btn-outline, .btn-secondary, .cta-button.secondary {
  background: hsl(var(--brand-surface)); color: hsl(var(--brand-ink));
  border: 1px solid hsl(var(--brand-border)); box-shadow: none;
}
.btn-outline:hover, .btn-secondary:hover, .cta-button.secondary:hover {
  background: hsl(var(--brand-surface-muted)); color: hsl(var(--brand-ink));
}
.card, .pricing-card, .stat, .fact, .feature, .faq-item, .related-link {
  border-color: hsl(var(--brand-border)); border-radius: var(--brand-radius);
}
.quick-answer, .internal-links, .links, .expert-insight {
  background: hsl(var(--brand-blue-soft)); border-color: hsl(var(--brand-blue-border));
}
/* Muted page text is too light on tinted article callouts. Links and headings
   retain their own roles; reading text needs the normal body contrast. */
.brand-callout :is(p, li, td) { color: hsl(var(--brand-body)); }
.price, .stat-number, .stat-value, .fact-value { font-variant-numeric: tabular-nums; }

/* Standalone site navigation uses the homepage's light header. The .links
   name also exists on article panels, so reset it only inside navigation. */
.nav, .nav-bar, body > nav:not(.breadcrumb), #seo-content > nav:first-child {
  background: hsl(var(--brand-surface)); color: hsl(var(--brand-ink));
  border-bottom-color: hsl(var(--brand-border));
}
.nav a, .nav .links a, .nav-bar a { color: hsl(var(--brand-body)); }
.nav > a:first-child, .nav-logo { color: hsl(var(--brand-ink)); }
.nav .links { background: transparent; padding: 0; margin: 0; }

/* These legacy CTA panels use the brand blue surface. Keep heading contrast
   independent of the global article heading color. */
.cta-box-primary h2, .cta-box-primary h3, .cta-box-primary h4 { color: hsl(var(--brand-surface)); }
.cta-box-primary a { background: hsl(var(--brand-surface)); color: hsl(var(--brand-blue)); }
.cta-box-primary a:hover { background: hsl(var(--brand-surface-muted)); color: hsl(var(--brand-blue)); }
.cta-box-primary a:focus-visible { outline-color: hsl(var(--brand-surface)); }

/* These footers already use a flex gap; legacy link margins must not add
   a second gap and squeeze words onto multiple lines on narrow screens. */
.brand-footer-light a { margin: 0; white-space: nowrap; }
.brand-footer-light > div { flex-wrap: wrap; }

/* Keep tables readable through local scrolling, never clip page content. */
@media (max-width: 640px) {
  body { overflow-wrap: anywhere; }
  body:not(.pfc-public-document) :is(nav, .nav, .nav-container, .nav-content) { flex-wrap: wrap; gap: .75rem; }
  .nav .links { display: flex; flex-wrap: wrap; gap: .75rem; }
  table { display: block; max-width: 100%; overflow-x: auto; }
  pre { max-width: 100%; overflow-x: auto; }
  .stats-grid, .quick-facts, .grid, .related, .features, .seo-pricing {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Older pages declare desktop columns inline; this is a mobile override. */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Shared article attribution stays compact and uses the existing brand palette. */
.pfc-editorial-note {
  margin: 1rem 0 1.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid hsl(var(--brand-border));
  color: hsl(var(--brand-muted));
  font-size: 0.875rem;
  line-height: 1.6;
}
.pfc-editorial-note a { color: hsl(var(--brand-blue)); text-underline-offset: 3px; }