/* page.css — shared shell for secondary pages (about, pillars, comparisons).
 *
 * Extracted 2026-07-26 when Phase 4 started adding pages. Previously each
 * secondary page carried its own ~80-line inline <style>; at 1-2 pages that was
 * fine, at a dozen it guarantees they drift apart. index.html keeps its own
 * styles.css — it is a different, much richer layout and not worth merging.
 *
 * Self-hosted Inter is declared here, so any page linking page.css gets the font
 * without needing its own @font-face.
 */

@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
}
:root {
  --slate: #1A1F2E;
  --slate-2: #232938;
  --slate-line: rgba(250,249,247,0.08);
  --warm-white: #FAF9F7;
  --warm-white-dim: rgba(250,249,247,0.72);
  --warm-white-faint: rgba(250,249,247,0.48);
  --warm-white-quiet: rgba(250,249,247,0.20);
  --brass: #D4A574;
  --brass-bright: #E5BE92;
  --font: 'InterVariable','Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --ease: cubic-bezier(0.16,1,0.3,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-family:var(--font); -webkit-font-smoothing:antialiased; }
body { background:var(--slate); color:var(--warm-white-dim); font-size:17px; line-height:1.7; }
a { color:var(--brass); text-decoration:none; }
a:hover { text-decoration:underline; }

.topbar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px;
  background:rgba(26,31,46,0.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--slate-line);
}
.topbar__wordmark { height:30px; width:auto; }
.topbar__back { font-size:14px; color:var(--warm-white-faint); transition:color .2s var(--ease); }
.topbar__back:hover { color:var(--brass); text-decoration:none; }

.legal { max-width:720px; margin:0 auto; padding:120px 32px 80px; }
.legal__label {
  font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--brass); margin-bottom:12px;
}
.legal__h1 {
  font-size:clamp(28px,4vw,40px); font-weight:700; color:var(--warm-white);
  letter-spacing:-0.02em; line-height:1.15; margin-bottom:20px;
}
.legal__lead { font-size:19px; color:var(--warm-white-dim); margin-bottom:44px; }
.legal h2 {
  font-size:20px; font-weight:600; color:var(--warm-white);
  margin-top:48px; margin-bottom:16px; letter-spacing:-0.01em;
}
.legal p { margin-bottom:16px; }
.legal ul { margin:0 0 16px 24px; list-style:disc; }
.legal ul li { margin-bottom:8px; color:var(--warm-white-dim); }
.legal strong { color:var(--warm-white); font-weight:600; }

.cta {
  margin-top:56px; padding:28px; border:1px solid var(--slate-line);
  border-radius:14px; background:var(--slate-2);
}
.cta__h { color:var(--warm-white); font-weight:600; font-size:18px; margin-bottom:8px; }
.cta__btn {
  display:inline-block; margin-top:14px; background:var(--brass); color:var(--slate);
  padding:13px 20px; border-radius:8px; font-weight:600; font-size:15px;
}
.cta__btn:hover { background:var(--brass-bright); text-decoration:none; }

.footer {
  background:#0E1219; padding:40px 0;
  border-top:1px solid var(--slate-line); text-align:center;
}
.footer__copy { font-size:12px; color:var(--warm-white-quiet); }
.footer__links { display:flex; justify-content:center; gap:24px; margin-bottom:12px; font-size:14px; flex-wrap:wrap; }
.footer__links a { color:var(--warm-white-faint); transition:color .2s var(--ease); }
.footer__links a:hover { color:var(--brass); text-decoration:none; }

/* --- Phase 4 additions: content-page building blocks --- */

/* Answer-first block. Every content page opens with a direct 2-3 sentence answer
   before anything else — this is what AI assistants quote, and what a skimming
   broker-owner reads. */
.answer {
  border-left: 3px solid var(--brass);
  padding: 4px 0 4px 20px;
  margin-bottom: 40px;
  font-size: 19px;
  color: var(--warm-white-dim);
}
.answer strong { color: var(--warm-white); }

/* Numbered stage list */
.steps { counter-reset: step; list-style: none; margin: 0 0 24px 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 44px;
  margin-bottom: 18px;
  color: var(--warm-white-dim);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--brass);
}
.steps li strong { color: var(--warm-white); display: block; margin-bottom: 2px; }

/* Comparison / spec table */
.tbl-wrap { overflow-x: auto; margin: 0 0 24px; }
.tbl { border-collapse: collapse; width: 100%; font-size: 15.5px; min-width: 460px; }
.tbl th, .tbl td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--slate-line);
  vertical-align: top;
}
.tbl th { color: var(--warm-white); font-weight: 600; }
.tbl td { color: var(--warm-white-dim); }

/* Cross-links between pillar pages */
.siblings { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.sibling {
  flex: 1 1 200px;
  border: 1px solid var(--slate-line);
  border-radius: 12px;
  padding: 18px;
  transition: border-color .2s var(--ease);
}
.sibling:hover { border-color: var(--brass); text-decoration: none; }
.sibling__k {
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brass); font-weight: 700; margin-bottom: 6px;
}
.sibling__t { color: var(--warm-white); font-weight: 600; margin-bottom: 4px; }
.sibling__d { font-size: 14.5px; color: var(--warm-white-faint); line-height: 1.5; }

/* Secondary CTA button (about.html previously inlined these styles) */
.cta__btn--ghost {
  background: transparent;
  color: var(--warm-white);
  border: 1px solid var(--slate-line);
  margin-left: 8px;
}
.cta__btn--ghost:hover { background: rgba(250,249,247,0.06); }

/* Q&A heading inside a buyer's-guide FAQ block. Visually subordinate to a section
   h2 but still a real heading, so the FAQPage schema has genuine on-page questions
   to point at rather than styled paragraphs. */
.qa { font-size: 17px !important; margin-top: 30px !important; }

/* Sub-heading inside a section (used for the Events block on the resources hub) */
.legal h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--warm-white);
  margin-top: 32px;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

/* Resource cards with graphics. The image is the link's hero; text sits beneath so
   the card still reads if the image is slow or blocked. */
.rcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 8px 0 24px; }
.rcard {
  display: block;
  border: 1px solid var(--slate-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--slate-2);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.rcard:hover { border-color: var(--brass); text-decoration: none; transform: translateY(-2px); }
.rcard__img { display: block; width: 100%; height: auto; }
.rcard__body { padding: 18px 20px 20px; }
.rcard__t { color: var(--warm-white); font-weight: 600; font-size: 17px; margin-bottom: 6px; }
.rcard__d { font-size: 14.5px; color: var(--warm-white-faint); line-height: 1.5; }