/* R&D Binder marketing site, v0 (W1 day 3 first draft).
   Design tokens kept aligned with the binder PDF for brand cohesion. */

:root {
  --ink: #0f172a;
  --paper: #ffffff;
  --rule: #cbd5e1;
  --rule-soft: #e2e8f0;
  --accent: #1e3a8a;
  --accent-strong: #172554;
  --muted: #475569;
  --soft: #f8fafc;
  --warn-bg: #fef3c7;
  --warn-border: #b45309;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover { color: var(--accent-strong); }

h1, h2, h3, h4 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-top: 0;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}

header.site-header {
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 100;
  border-bottom: 1px solid var(--rule-soft);
  padding: 20px 0;
  font-size: 14.5px;
}
header.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
header.site-header .brand {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
header.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 8px;
  font-weight: 500;
  padding: 8px 10px;
  display: inline-block;
}
header.site-header nav a:hover { color: var(--accent); }

section.hero {
  padding: 88px 0 72px;
  border-bottom: 1px solid var(--rule-soft);
}
section.hero h1 {
  font-size: 52px;
  line-height: 1.08;
  margin: 0 0 24px;
  max-width: 880px;
}
section.hero p.lead {
  font-size: 21px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 760px;
  margin: 0 0 36px;
}
.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 26px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cta-primary {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
.cta-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #ffffff;
}
.cta-secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.cta-secondary:hover {
  background: var(--soft);
  color: var(--accent-strong);
}

section.section {
  padding: 72px 0;
  border-bottom: 1px solid var(--rule-soft);
}
section.section h2 {
  font-size: 34px;
  margin: 0 0 16px;
}
section.section p.section-lead {
  font-size: 18px;
  color: var(--muted);
  max-width: 720px;
  margin: 0 0 40px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.step {
  background: var(--soft);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--accent);
  padding: 22px 24px;
  border-radius: 4px;
}
.step .num {
  display: inline-block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.step h3 {
  font-size: 20px;
  margin: 0 0 8px;
}
.step p {
  margin: 0;
  font-size: 15.5px;
  color: var(--muted);
}

.tier {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 28px;
  background: var(--paper);
}
.tier.featured {
  border-color: var(--accent);
  border-width: 2px;
  position: relative;
}
.tier.featured::before {
  content: "Most common";
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--accent);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
}
.tier h3 {
  font-size: 22px;
  margin: 0 0 6px;
}
.tier .price {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 38px;
  color: var(--ink);
  margin: 12px 0 4px;
}
.tier .price-meta {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 18px;
}
.tier ul {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 15px;
}
.tier ul li { margin: 6px 0; color: var(--muted); }


.faq dt {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}
.faq dd {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

footer.site-footer {
  padding: 36px 0 56px;
  font-size: 14px;
  color: var(--muted);
}
footer.site-footer p { margin: 6px 0; }
footer.site-footer a { color: var(--muted); }

@media (max-width: 760px) {
  body { font-size: 16px; }
  section.hero { padding: 56px 0 48px; }
  section.hero h1 { font-size: 36px; }
  section.hero p.lead { font-size: 18px; }
  section.section { padding: 56px 0; }
  section.section h2 { font-size: 28px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  header.site-header .wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
  header.site-header nav a { margin: 0 4px 0 0; }
  .wrap { padding: 0 20px; }
  .tier .cta { display: flex; width: 100%; text-align: center; margin-top: 16px; }
  footer.site-footer ul li a { display: inline-block; padding: 4px 0; }
}

/* ============================================================
   Components added 2026-05-06 for Privacy / Terms / Contact pages.
   ============================================================ */

/* Skip link (a11y). Visible only when focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  background: var(--accent);
  color: #ffffff;
  text-decoration: none;
  z-index: 1000;
  border-radius: 4px;
  outline: 3px solid var(--accent-strong);
}

/* Visually-hidden but screen-reader available. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Banner used by inner pages (privacy, terms, contact). */
section.banner {
  padding: 64px 0 28px;
  background: var(--soft);
  border-bottom: 1px solid var(--rule-soft);
}
section.banner h1 {
  font-size: 44px;
  line-height: 1.12;
  margin: 8px 0 16px;
  max-width: 760px;
}
section.banner .lead {
  font-size: 18px;
  color: var(--muted);
  max-width: 720px;
  margin: 0 0 12px;
}
section.banner .hint {
  color: var(--muted);
  font-size: 14.5px;
  margin: 8px 0 0;
}
.eyebrow {
  display: inline-block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Long-form prose (privacy, terms). */
.prose {
  max-width: 760px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
}
.prose h2 {
  font-size: 24px;
  margin: 36px 0 12px;
}
.prose h3 {
  font-size: 18px;
  margin: 24px 0 8px;
  color: var(--ink);
}
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin: 4px 0; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--soft);
  padding: 1px 6px;
  border-radius: 3px;
}
.prose .meta-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 24px;
  padding: 12px 16px;
  background: var(--soft);
  border-left: 3px solid var(--accent);
  font-size: 14px;
  color: var(--muted);
}

/* Header nav: ensure inner-page nav matches index. */
header.site-header nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
}

/* Footer (used on all pages). */
footer.site-footer {
  margin-top: 48px;
  padding: 56px 0 32px;
  background: var(--ink);
  color: #cbd5e1;
}
footer.site-footer .wrap { padding: 0 32px; }
footer.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 36px;
}
footer.site-footer .footer-brand {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
}
footer.site-footer .footer-tag {
  font-size: 14.5px;
  color: #94a3b8;
  margin: 0;
  max-width: 360px;
  line-height: 1.5;
}
footer.site-footer .footer-h {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 12px;
  font-weight: 600;
}
footer.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer.site-footer ul li {
  margin: 6px 0;
}
footer.site-footer a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 14.5px;
}
footer.site-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}
footer.site-footer .footer-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid #334155;
  font-size: 13px;
  color: #94a3b8;
}
/* Footer drops to two columns on tablet; the 760px block below takes it to one.
   Defined before that block so the narrower rule wins at small widths. */
@media (max-width: 980px) {
  footer.site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Form (contact page). */
.form {
  max-width: 720px;
}
.form .form-row {
  margin: 0 0 18px;
}
.form .form-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form label {
  display: block;
  font-weight: 600;
  margin: 0 0 6px;
  font-size: 14.5px;
  color: var(--ink);
}
.form input:not([type="radio"]):not([type="checkbox"]),
.form select,
.form textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  -webkit-appearance: none;
}
.form input:not([type="radio"]):not([type="checkbox"]):focus,
.form select:focus,
.form textarea:focus {
  outline: 3px solid rgba(30, 58, 138, 0.25);
  outline-offset: 0;
  border-color: var(--accent);
}
.form input:not([type="radio"]):not([type="checkbox"])[aria-invalid="true"],
.form select[aria-invalid="true"],
.form textarea[aria-invalid="true"] {
  border-color: #b91c1c;
  background: #fef2f2;
}
.form textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.5;
}
.form .hint {
  color: var(--muted);
  font-size: 14px;
  margin: 6px 0 0;
}
.form .field-error {
  color: #b91c1c;
  font-size: 14px;
  margin: 6px 0 0;
  font-weight: 600;
}
.form .submit-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.form .submit-note {
  color: var(--muted);
  font-size: 14px;
}

/* Honeypot field: hidden visually + assistively, but not display:none
   (display:none can be detected by some bots that scrape rendered DOM). */
.honeypot-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

/* Form-level error summary (focus-stealing banner). */
.form-error-summary {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 4px;
  color: #7f1d1d;
}
.form-error-summary-title {
  margin: 0 0 6px;
  font-weight: 700;
}
.form-error-summary ul {
  margin: 0;
  padding-left: 20px;
}
.form-error-summary a {
  color: #7f1d1d;
}

/* Form success + retry panels. */
.form-success,
.form-retry {
  max-width: 720px;
  padding: 24px 28px;
  border-radius: 4px;
  margin-top: 8px;
}
.form-success {
  background: #ecfdf5;
  border-left: 4px solid #047857;
  color: #064e3b;
}
.form-retry {
  background: #fef2f2;
  border-left: 4px solid #b91c1c;
  color: #7f1d1d;
}
.form-success h2,
.form-retry h2 {
  font-size: 22px;
  margin: 6px 0 12px;
}
.form-success p,
.form-retry p {
  margin: 0 0 12px;
}

.form-live { /* aria-live region; visually empty. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* ============================================================
   Components added 2026-05-07 for the /sample page.
   ============================================================ */

/* Binder table-of-contents list. Used on /sample to walk through
   the 8 sections of the demonstration PDF. Numbered, generous
   spacing, each item reads as a mini-card without a hard border. */
.binder-toc {
  list-style: none;
  counter-reset: binder-section;
  margin: 0;
  padding: 0;
}
.binder-toc > li {
  counter-increment: binder-section;
  position: relative;
  padding: 18px 0 18px 56px;
  border-top: 1px solid var(--rule-soft);
}
.binder-toc > li:last-child {
  border-bottom: 1px solid var(--rule-soft);
}
.binder-toc > li::before {
  content: counter(binder-section);
  position: absolute;
  left: 0;
  top: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: var(--accent);
  border-radius: 50%;
}
.binder-toc h3 {
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--ink);
}
.binder-toc p {
  margin: 0;
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.55;
}

/* On the /sample page the manual heading numerals inside h3
   ("1. Cover and engagement summary") would double up with
   the auto counter. Hide the manual numerals visually but keep
   them in the source so the heading still reads correctly out
   of context (e.g., screen-reader landmark scan). */
.binder-toc > li h3 {
  position: relative;
}

/* ============================================================
   Components added 2026-05-07 for the /estimate page.
   ============================================================ */

/* Estimator widget: 2-column on desktop (form left, result right);
   1-column on mobile (result first, form below). */
.estimator {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.estimator .form {
  margin: 0;
  max-width: none;
}
.estimator .form .form-row {
  margin: 0 0 18px;
}
.estimator details.advanced {
  margin: 8px 0 0;
  padding: 12px 14px;
  background: var(--soft);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
}
.estimator details.advanced summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--accent);
}
.estimator details.advanced[open] summary {
  margin-bottom: 12px;
}
.estimator details.advanced .form-row {
  margin: 12px 0 0;
}

/* Result panel. */
.result-panel {
  background: var(--soft);
  border: 1px solid var(--rule-soft);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  padding: 24px 26px;
  position: sticky;
  top: 24px;
}
.result-panel .result-eyebrow {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.result-panel .result-amount {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 36px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 4px;
  word-break: keep-all;
}
.result-panel .result-amount-meta {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 18px;
}
.result-panel .result-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  margin: 8px 0;
  color: var(--ink);
}
.result-panel .result-row .label {
  color: var(--muted);
}
.result-panel .result-row .value {
  font-weight: 600;
  font-family: Georgia, "Times New Roman", serif;
}
.result-panel hr {
  border: 0;
  border-top: 1px solid var(--rule-soft);
  margin: 16px 0;
}
.result-panel .result-tier {
  font-size: 15px;
  margin: 0 0 18px;
  color: var(--ink);
}
.result-panel .result-tier strong {
  font-family: Georgia, "Times New Roman", serif;
}
.result-panel .cta-row {
  margin-top: 4px;
}

/* Inline callouts (QSB cap, small team). */
.callout {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
}
.callout.warn {
  background: var(--warn-bg);
  border-left: 3px solid var(--warn-border);
  color: #78350f;
}
.callout.info {
  background: #eff6ff;
  border-left: 3px solid #1e3a8a;
  color: #1e3a8a;
}
.callout strong {
  font-weight: 700;
}

/* Breadcrumb trail (visible; mirrors the JSON-LD BreadcrumbList). */
nav.breadcrumb {
  border-bottom: 1px solid var(--rule-soft);
  font-size: 13px;
}
nav.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
nav.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
nav.breadcrumb li + li::before {
  content: "/";
  color: var(--rule);
}
nav.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}
nav.breadcrumb a:hover {
  color: var(--accent);
  text-decoration: underline;
}
nav.breadcrumb [aria-current="page"] {
  color: var(--ink);
}

/* Methodology + 'what this is not' collapsibles. */
details.disclosure {
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  margin: 0 0 14px;
  background: var(--paper);
}
details.disclosure summary {
  cursor: pointer;
  padding: 14px 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}
details.disclosure summary::-webkit-details-marker { display: none; }
details.disclosure summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  margin-right: 8px;
  color: var(--accent);
  font-weight: 700;
}
details.disclosure[open] summary::before { content: "\2212"; }
details.disclosure[open] summary { border-bottom: 1px solid var(--rule-soft); }
details.disclosure .disclosure-body {
  padding: 16px 18px 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
details.disclosure .disclosure-body p { margin: 0 0 12px; }
details.disclosure .disclosure-body p:last-child { margin: 0; }
details.disclosure .disclosure-body ul {
  margin: 0 0 12px;
  padding-left: 22px;
}
details.disclosure .disclosure-body li { margin: 4px 0; }
details.disclosure .disclosure-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--soft);
  padding: 1px 6px;
  border-radius: 3px;
}

/* ============================================================
   Components added 2026-05-08 for the /order page.
   ============================================================ */

/* Fieldset overrides (we use <fieldset class="form-row"> with
   <legend> for the radio group and the click-wrap section). */
.form fieldset.form-row {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
  min-width: 0;
}
.form fieldset.form-row legend {
  display: block;
  font-weight: 600;
  margin: 0 0 6px;
  font-size: 14.5px;
  color: var(--ink);
  padding: 0;
}

/* Radio group (CPA-of-record yes/no). */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  background: var(--paper);
}
.radio-option:hover {
  background: var(--soft);
}
.radio-option input[type="radio"] {
  margin: 3px 0 0;
  flex-shrink: 0;
  cursor: pointer;
}
.radio-option input[type="radio"]:checked + span {
  font-weight: 600;
}

/* Click-wrap checkbox (single combined acceptance). */
.checkbox-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--soft);
  font-size: 14.5px;
  line-height: 1.5;
  cursor: pointer;
  margin-top: 8px;
}
.checkbox-option input[type="checkbox"] {
  margin: 2px 0 0;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}
.checkbox-option a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Mobile responsive adjustments for new components. */
@media (max-width: 760px) {
  section.banner { padding: 40px 0 20px; }
  section.banner h1 { font-size: 32px; }
  .form .form-row-split { grid-template-columns: 1fr; }
  footer.site-footer .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .binder-toc > li { padding-left: 48px; }
  .binder-toc > li::before { width: 30px; height: 30px; font-size: 14px; }
  .estimator { grid-template-columns: 1fr; gap: 24px; }
  .result-panel { position: static; order: -1; }
  .result-panel .result-amount { font-size: 30px; }
}

/* Print-only rules for legal docs (MSA, DPA). */
/* Procurement teams print these to PDF for vendor files. */
@media print {
  @page {
    size: Letter;
    margin: 0.75in 0.75in 1in 0.75in;
    @bottom-center {
      content: "Page " counter(page) " of " counter(pages);
      font-family: Georgia, "Times New Roman", serif;
      font-size: 10pt;
      color: #555;
    }
    @top-right {
      content: "R&D Binder \2014 " string(doctitle);
      font-family: Georgia, "Times New Roman", serif;
      font-size: 9pt;
      color: #777;
    }
  }
  @page :first {
    @top-right { content: ""; }
  }
  html, body {
    background: #fff !important;
    color: #000;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 10.5pt;
    line-height: 1.45;
  }
  .skip-link, .site-header, .site-footer { display: none !important; }
  section.banner {
    background: none !important;
    padding: 0 0 12pt 0;
    border-bottom: 1px solid #999;
    margin-bottom: 18pt;
  }
  section.banner .eyebrow {
    font-size: 9pt;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #555;
  }
  section.banner h1 {
    font-size: 22pt;
    margin: 6pt 0 8pt;
    color: #000;
    string-set: doctitle content();
  }
  section.banner p.lead {
    font-size: 11pt;
    color: #222;
  }
  section.banner p.hint {
    font-size: 9.5pt;
    color: #555;
    border: 1px solid #ccc;
    padding: 6pt 10pt;
    margin-top: 10pt;
  }
  section.section { padding: 0 !important; }
  .wrap { max-width: none !important; padding: 0 !important; }
  .prose h2 {
    font-size: 13pt;
    margin: 18pt 0 6pt;
    page-break-after: avoid;
  }
  .prose p, .prose li { font-size: 10.5pt; }
  .prose a { color: #000; text-decoration: underline; }
  .prose ul, .prose ol { margin: 6pt 0 6pt 18pt; }
  .prose table { page-break-inside: avoid; }
  .meta-row {
    font-size: 9.5pt;
    color: #444;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 6pt 0;
    margin: 0 0 12pt;
  }
  .meta-row span { display: block; margin: 1pt 0; }
  details { margin: 12pt 0; }
  details summary { cursor: default; }
  details[open] > summary { font-weight: bold; }
}

/* ---------------------------------------------------------------------------
   Utility classes + table base styles.

   Added 2026-05-26 to replace the ~32 files of inline `style="..."`
   attributes that were being silently blocked by the strict CSP
   (style-src 'self'; no 'unsafe-inline'). Behavior is identical to the
   previously-inline declarations; the only change is the source of the
   rule. Class names follow Tailwind-style shorthand for readability
   (.mt-24 = margin-top:24px). Table styles target .prose context so
   they don't leak into hero/section/footer.
   --------------------------------------------------------------------------- */

/* Margin-top utilities. */
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-18 { margin-top: 18px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

/* Inline-block utility for .cta links that need to flow inline. */
.cta-inline { display: inline-block; }

/* Singleton replacements (kept for completeness; one occurrence each). */
.text-success      { color: #15803d; }
.text-deco-none    { text-decoration: none; }
.max-w-280         { max-width: 280px; }
.text-14           { font-size: 14px; }
.list-indent-left  { margin: 0 0 8px 28px; }
.list-indent-block { margin: 8px 0 12px 28px; }

/* Tables inside .prose (the long-form layout container used by MSA, DPA,
   privacy, FAQ, etc.). The 14.5px font + 8/12 cell padding match the
   binder PDF style and were previously declared inline on every cell. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin: 12px 0;
}
.prose table.compact-mb { margin: 0 0 16px; }
.prose th,
.prose td {
  padding: 8px 12px;
  vertical-align: top;
}
.prose th { text-align: left; }
.prose tr {
  border-bottom: 1px solid var(--rule-soft);
}

/* Editorial Research Team byline on generated reference pages (Section 41
   content engine). Sits in the banner under the lead. */
.byline {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.byline a {
  color: var(--accent);
  text-decoration: underline;
}