/* ==========================================================================
   Certia marketing site — brand tokens match the actual certified report's
   stylesheet exactly (src/frontend/report/src/styles.css), not the older
   "teal" tokens in CLAUDE.md — that doc predates a 2026-09-01 teal->wine
   rebrand (accent moved to wine to match the seal icon's ribbons; CLAUDE.md
   wasn't updated after). The report's palette is the more current and more
   rigorously verified source (its own comments document AA contrast checks),
   so this site follows it instead. Do not add colors, fonts, or radii
   outside this token set.
   ========================================================================== */

@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand tokens — identical to the certified report's own palette */
  --ink: #060505;
  --paper: #F2F0EF;
  --accent: #8C2A3C;   /* wine — matches the seal icon's ribbons, verified AA-passing as text and as a button fill */
  --accent-ink: #F2F0EF;
  --gold: #D4A63D;     /* the icon's own showcase gold — used here only as a small decorative accent on dark (--ink) surfaces (~9:1 contrast). If ever used as text/a border on the light --paper surface, switch to the report's muted #9C6E16 instead — the bright value fails WCAG AA there. */

  /* Semantic (Keep/Revoke/Escalate, sent/not-sent, etc.) — same hexes the report and reviewer use */
  --success: #216E4E;
  --success-tint: #EFFAF5;
  --danger: #AE2E24;
  --danger-tint: #FDF1EF;
  --warning: #A54800;
  --warning-tint: #FEF3E6;

  /* Derived surfaces */
  --paper-raised: #E9E6E3;
  --ink-soft: #4A4A4A;
  --ink-faint: #767676;
  --border: #D9D6D3;
  --border-strong: #C2BDB8;
  --accent-soft: #F5E9EC;
  --accent-border: rgba(140, 42, 60, 0.28); /* wine, decomposed */

  --radius: 8px;
  --font: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --content-max: 1120px;
  --shadow-1: 0 1px 2px rgba(6, 5, 5, 0.06);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.lede {
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.65;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  min-height: 44px;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover { background: #201c1c; border-color: #201c1c; }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--ink); background: var(--paper-raised); }

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: transparent;
  padding: 12px 14px;
}
.btn-ghost:hover { color: var(--ink); }

.btn[disabled] { cursor: not-allowed; opacity: 0.6; }

.btn-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(242, 240, 239, 0.16);
  color: inherit;
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 2px;
}
.btn-secondary .btn-badge,
.btn-ghost .btn-badge {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------- Layout: section rhythm ---------- */

section { padding: 96px 0; }
section + section { border-top: 1px solid var(--border); }

@media (max-width: 720px) {
  section { padding: 64px 0; }
}

.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}

.section-head h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  margin-top: 12px;
}

.section-head .lede { margin-top: 14px; }

/* ---------- Nav ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(242, 240, 239, 0.92);
  backdrop-filter: none;
  border-bottom: 1px solid var(--border);
}

.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  flex: none;
}
.brand img { width: 30px; height: 30px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 6px;
  transition: color 150ms ease, background-color 150ms ease;
}
.nav-links a:hover { color: var(--ink); background: var(--paper-raised); }

.nav-cta { display: flex; align-items: center; gap: 10px; flex: none; }

.nav-toggle {
  display: none;
  border: 1px solid var(--border-strong);
  background: transparent;
  border-radius: 6px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
}

.mobile-menu {
  display: none;
  border-bottom: 1px solid var(--border);
  background: var(--paper);
}
.mobile-menu.is-open { display: block; }
.mobile-menu .wrap { padding: 12px 24px 20px; display: flex; flex-direction: column; gap: 4px; }
.mobile-menu a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child { border-bottom: none; }

/* ---------- Hero ---------- */

.hero { padding: 72px 0 64px; border-top: none; }

.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; }
}

.hero-copy h1 {
  font-size: clamp(34px, 4.6vw, 54px);
  margin-top: 16px;
}

.hero-copy .lede { margin-top: 20px; max-width: 46ch; font-size: 19px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}

.hero-note {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--ink-faint);
}

/* ---------- Hero mechanism diagram ---------- */

.mechanism {
  background: var(--ink);
  color: var(--paper);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--ink);
}

.mechanism-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.mechanism-title { font-size: 13px; font-weight: 600; color: rgba(242,240,239,0.9); }
.mechanism-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(212,166,61,0.4);
  border-radius: 4px;
  padding: 3px 7px;
}

.review-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(242,240,239,0.05);
  border: 1px solid rgba(242,240,239,0.1);
  margin-bottom: 10px;
}

.review-person { font-size: 14px; font-weight: 600; color: var(--paper); }
.review-meta { font-size: 12.5px; color: rgba(242,240,239,0.55); margin-top: 2px; }

.risk-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
  margin-top: 6px;
}
.risk-flag.needs-review { background: rgba(165,72,0,0.18); color: #F2A65A; }
.risk-flag.safe { background: rgba(33,110,78,0.22); color: #6FCBA0; }

.decision-pills { display: flex; gap: 6px; }
.pill {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(242,240,239,0.18);
  color: rgba(242,240,239,0.55);
}
.pill.active.keep { background: rgba(33,110,78,0.3); color: #6FCBA0; border-color: transparent; }
.pill.active.revoke { background: rgba(174,46,36,0.3); color: #F0968C; border-color: transparent; }

.mechanism-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(242,240,239,0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(242,240,239,0.5);
}

.mechanism-footer strong { color: rgba(242,240,239,0.85); font-weight: 600; }

/* ---------- Logo strip / framing statement ---------- */

.framing-bar {
  background: var(--paper-raised);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}
.framing-bar .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-soft);
}
.framing-bar svg { flex: none; width: 18px; height: 18px; color: var(--accent); }

/* ---------- Problem section ---------- */

.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 860px) { .problem-grid { grid-template-columns: 1fr; gap: 32px; } }

.problem-old, .problem-new {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
}
.problem-old { background: var(--paper-raised); }
.problem-new { background: #fff; border-color: var(--accent-border); }

.problem-old h3, .problem-new h3 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 16px;
}
.problem-old h3 { color: var(--ink-faint); }
.problem-new h3 { color: var(--accent); }

.problem-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.problem-list li { font-size: 15px; color: var(--ink-soft); padding-left: 22px; position: relative; }
.problem-old .problem-list li::before {
  content: "×";
  position: absolute; left: 0; top: 0;
  color: var(--danger); font-weight: 700;
}
.problem-new .problem-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700;
}

/* ---------- How it works ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

.step {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px;
  background: #fff;
}
.step-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.step h3 { font-size: 16.5px; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }

/* ---------- Product screenshots ---------- */

.product-shots {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.product-shot {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-1);
}
.product-shot a { display: block; }
.product-shot img { width: 100%; height: auto; display: block; cursor: zoom-in; }
.product-shot figcaption {
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--ink-soft);
  border-top: 1px solid var(--border);
  background: var(--paper-raised);
}

/* ---------- Differentiators ---------- */

.diff-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) { .diff-layout { grid-template-columns: 1fr; gap: 32px; } }

.diff-ladder {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.diff-tier {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.diff-tier:last-child { border-bottom: none; }
.diff-tier.is-certia { background: var(--ink); color: var(--paper); }
.diff-tier-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.6; }
.diff-tier.is-certia .diff-tier-label { color: var(--gold); opacity: 1; }
.diff-tier-name { font-size: 16px; font-weight: 600; margin-top: 4px; }
.diff-tier-desc { font-size: 13.5px; margin-top: 6px; opacity: 0.72; }

.diff-cards { display: flex; flex-direction: column; gap: 16px; }
.diff-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
  background: #fff;
  display: flex;
  gap: 16px;
}
.diff-card-icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.diff-card-icon svg { width: 20px; height: 20px; }
.diff-card h3 { font-size: 16px; margin-bottom: 6px; }
.diff-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }

/* Standalone use of .diff-cards (no .diff-ladder alongside), e.g. the About section */
#about .diff-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { #about .diff-cards { grid-template-columns: 1fr; } }

/* ---------- Frameworks ---------- */

.framework-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 760px) { .framework-grid { grid-template-columns: 1fr; } }

.framework-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 26px;
  background: #fff;
}
.framework-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.framework-badge {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 12px;
}
.framework-card h3 { font-size: 17px; }
.framework-card p { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 14px; }
.control-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.control-tag {
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--paper-raised);
  color: var(--ink-soft);
  border: 1px solid var(--border);
}

.compliance-caveat {
  margin-top: 28px;
  padding: 16px 20px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--paper-raised);
  font-size: 14.5px;
  color: var(--ink-soft);
  display: flex;
  gap: 12px;
}
.compliance-caveat svg { flex: none; width: 18px; height: 18px; color: var(--ink-faint); margin-top: 2px; }
.compliance-caveat strong { color: var(--ink); }

/* ---------- Security ---------- */

.security-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 860px) { .security-grid { grid-template-columns: 1fr; } }

.security-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px;
  background: #fff;
}
.security-card h3 { font-size: 15.5px; margin-bottom: 8px; }
.security-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.security-card a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.ai-disclosure {
  margin-top: 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 24px;
  background: var(--paper-raised);
}
.ai-disclosure h3 { font-size: 15.5px; margin-bottom: 12px; }
.ai-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 700px) { .ai-columns { grid-template-columns: 1fr; } }
.ai-col-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
.ai-col-label.no { color: var(--danger); }
.ai-col-label.yes { color: var(--accent); }
.ai-columns ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-soft); line-height: 1.7; }

/* ---------- Pricing ---------- */

.pricing-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-faint);
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  padding: 6px 12px;
  margin-top: 14px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }

.price-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 26px;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.price-card.is-highlight {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.price-tier-name { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-faint); }
.price-card.is-highlight .price-tier-name { color: var(--gold); }
.price-amount { font-size: 34px; font-weight: 700; margin-top: 10px; }
.price-amount span { font-size: 14px; font-weight: 500; color: var(--ink-faint); }
.price-card.is-highlight .price-amount span { color: rgba(242,240,239,0.55); }
.price-desc { font-size: 14px; color: var(--ink-soft); margin-top: 8px; }
.price-card.is-highlight .price-desc { color: rgba(242,240,239,0.72); }
.price-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.price-list li { font-size: 13.5px; padding-left: 20px; position: relative; }
.price-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.price-card.is-highlight .price-list li::before { color: #DDB8C0; }

.pricing-table-wrap { margin-top: 32px; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
table.pricing-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; min-width: 480px; }
.pricing-table th, .pricing-table td { text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.pricing-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-faint); font-weight: 700; background: var(--paper-raised); }
.pricing-table tr:last-child td { border-bottom: none; }

/* ---------- FAQ ---------- */

.faq-list { max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.faq-q .icon { flex: none; width: 18px; height: 18px; transition: transform 200ms ease; color: var(--ink-faint); }
.faq-item[open] .faq-q .icon { transform: rotate(45deg); color: var(--accent); }
.faq-a { padding: 0 4px 20px; font-size: 14.5px; color: var(--ink-soft); max-width: 66ch; line-height: 1.65; }

/* ---------- Final CTA ---------- */

.final-cta { background: var(--ink); color: var(--paper); }
.final-cta .section-head { max-width: 620px; }
.final-cta .eyebrow { color: var(--gold); }
.final-cta .eyebrow::before { background: var(--gold); }
.final-cta .lede { color: rgba(242,240,239,0.72); }
.final-cta .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.final-cta .btn-primary:hover { background: #70222D; border-color: #70222D; }
.final-cta .founding-note { margin-top: 20px; font-size: 13.5px; color: rgba(242,240,239,0.55); max-width: 460px; }

/* ---------- Footer ---------- */

footer { background: var(--paper-raised); border-top: 1px solid var(--border); padding: 64px 0 32px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 40px;
}
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand .brand { margin-bottom: 12px; }
.footer-brand p { font-size: 13.5px; color: var(--ink-faint); max-width: 34ch; line-height: 1.6; }

.footer-col h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-faint); margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { text-decoration: none; font-size: 14px; color: var(--ink-soft); }
.footer-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ---------- Legal pages ---------- */

.legal-page { padding: 0 0 96px; }
.legal-header {
  background: var(--paper-raised);
  border-bottom: 1px solid var(--border);
  padding: 56px 0 40px;
}
.legal-header .eyebrow { margin-bottom: 14px; }
.legal-header h1 { font-size: clamp(26px, 3.6vw, 36px); }
.legal-header .lede { margin-top: 12px; }

.draft-banner {
  margin-top: 24px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  padding: 18px 20px;
  background: #fff;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.draft-banner svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--warning); }
.draft-banner strong { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.draft-banner p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

.legal-body { max-width: 760px; margin: 0 auto; padding-top: 48px; }
.legal-body h2 { font-size: 20px; margin-top: 40px; margin-bottom: 14px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { font-size: 15px; color: var(--ink-soft); line-height: 1.75; margin-bottom: 14px; }
.legal-body ul, .legal-body ol { color: var(--ink-soft); font-size: 15px; line-height: 1.75; padding-left: 22px; margin-bottom: 14px; }
.legal-body li { margin-bottom: 8px; }
.legal-body strong { color: var(--ink); }
.legal-body table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 14px; }
.legal-body th, .legal-body td { text-align: left; padding: 10px 14px; border: 1px solid var(--border); }
.legal-body th { background: var(--paper-raised); }

.todo {
  background: var(--accent-soft);
  border: 1px dashed var(--accent-border);
  color: var(--accent);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 0.92em;
  font-weight: 600;
  white-space: nowrap;
}

.unresolved-block {
  border: 1px solid var(--border-strong);
  background: var(--paper-raised);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.unresolved-block .unresolved-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 4px;
  padding: 2px 6px;
  margin-bottom: 10px;
}
.unresolved-block p { margin-bottom: 0; font-size: 14px; }

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.legal-back svg { width: 16px; height: 16px; }

/* ---------- Docs (sidebar-navigated reference) ---------- */
/* Two columns: a sticky left nav and the content column. Reuses every
   .legal-body typography rule above rather than redefining paragraph/
   list/table styles a second time -- only the things specific to a
   sidebar-navigated multi-section page live here. 88px sticky offsets
   (sidebar top, heading scroll-margin) clear .site-nav's fixed 72px
   height plus a small gap, so a clicked link's target heading doesn't
   land hidden under the sticky nav bar. */
.docs-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding: 48px 0 96px;
}

.docs-sidebar {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

.docs-sidebar-group { margin-bottom: 22px; }
.docs-sidebar-group:last-child { margin-bottom: 0; }
.docs-sidebar-group-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 10px;
  margin-bottom: 8px;
}
.docs-sidebar a {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 6px;
  line-height: 1.3;
}
.docs-sidebar a:hover { background: var(--paper-raised); color: var(--ink); }
.docs-sidebar a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Scroll-spy target (see assets/js/docs.js) -- same accent/accent-soft
   pairing as .docs-callout-note, so "here's where you are" reads as
   the same brand accent as everything else, not a new color. */
.docs-sidebar a.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.docs-content { min-width: 0; max-width: 760px; }
.docs-content > section { margin-bottom: 56px; }
.docs-content > section:last-child { margin-bottom: 0; }
.docs-content h2 { font-size: 22px; scroll-margin-top: 88px; }
.docs-content h3 { font-size: 16.5px; margin-top: 28px; margin-bottom: 10px; scroll-margin-top: 88px; }
.docs-content .docs-section-intro { margin-top: 12px; margin-bottom: 20px; }
.docs-content p, .docs-content li { font-size: 15px; color: var(--ink-soft); line-height: 1.75; }
.docs-content p { margin-bottom: 14px; }
.docs-content ul, .docs-content ol { padding-left: 22px; margin: 0 0 14px; }
.docs-content li { margin-bottom: 8px; }
.docs-content li:last-child { margin-bottom: 0; }
.docs-content strong { color: var(--ink); }
.docs-content table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; font-size: 14px; }
.docs-content th, .docs-content td { text-align: left; padding: 10px 14px; border: 1px solid var(--border); vertical-align: top; }
.docs-content th { background: var(--paper-raised); }

/* A single callout style, two color variants -- the "warning" variant
   for anything that means "something didn't go as expected," the
   "note" variant for a plain clarifying aside that isn't a warning.
   Border+tint pairing matches --warning/--warning-tint and
   --accent/--accent-soft, the same semantic pairs already used
   elsewhere on this site (e.g. .draft-banner, .todo above). */
.docs-callout {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 4px 0 20px;
  font-size: 14px;
  line-height: 1.65;
}
.docs-callout p { font-size: 14px; margin-bottom: 0; }
.docs-callout p + p { margin-top: 8px; }
.docs-callout-warning { border-color: var(--warning); background: var(--warning-tint); color: var(--warning); }
.docs-callout-warning strong { color: var(--warning); }
.docs-callout-note { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); }
.docs-callout-note strong { color: var(--accent); }

@media (max-width: 900px) {
  .docs-layout { grid-template-columns: 1fr; gap: 32px; }
  .docs-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
  }
}

/* ---------- Utility ---------- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
  z-index: 100;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { left: 0; }