/* Page-body system for every marketing page except the homepage (which carries its own poster CSS).
   Loaded BEFORE each page's own <style>, so a page-specific rule wins a tie; chrome.css (header/footer)
   loads after both. Design reference: index.html. One content width shared with the chrome (--tvx-max);
   long text sits in a 720px column left-aligned to that grid, headings and grids use the full width. */
:root {
  --bg: #08080a; --text: #e4e4e7; --muted: #d4d4d8; --dim: #a1a1aa;
  --hair: rgba(255,255,255,0.10); --hair2: rgba(255,255,255,0.18);
  --amber: #e8a832; --amber-hover: #d49a28;
  --serif: 'Instrument Serif', Georgia, serif; --sans: 'DM Sans', system-ui, sans-serif;
  --col: 720px;
  /* Old-theme names still referenced by page-specific rules and a few inline styles in post bodies.
     Mapped onto the new palette: surfaces and soft washes go flat, borders become hairlines. */
  --surface: transparent; --accent-soft: transparent; --border: var(--hair2);
  --accent: var(--amber); --text-muted: var(--muted); --text-dim: var(--dim);
}

/* ---------- base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--amber); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(232,168,50,0.45); }
a:hover { color: #f0c060; text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
img { max-width: 100%; height: auto; }

/* ---------- page grid ---------- */
.container, .page-wrap { max-width: var(--tvx-max, 1100px); margin: 0 auto; padding: 8px var(--tvx-gutter, 38px) 0; }
.container > *, .page-wrap > * { max-width: var(--col); }
.container > h1, .page-wrap > h1, .page-header, .container > .wide, .page-wrap > .wide { max-width: none; }

/* ---------- page header: label, big title, 3px rule ---------- */
.meta, .section-label { display: block; margin: 0 0 18px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.6; color: var(--dim); }
.meta strong { color: var(--muted); font-weight: 600; }
.meta a { color: var(--amber); text-decoration: none; }
.meta + .meta { margin-top: -12px; }
h1 { font-weight: 700; font-size: clamp(44px, 5.28vw, 67px); line-height: 0.95; letter-spacing: -0.05em; margin: 0 0 18px; padding-bottom: 18px; border-bottom: 3px solid var(--text); text-wrap: balance; }
.page-updated { display: block; margin: 0 0 32px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim); }
h1 + p, h1 + .page-updated + p { margin-top: 28px; }
.intro { font-size: 19px; line-height: 1.6; color: var(--muted); }

/* ---------- article type ---------- */
h2 { font-weight: 700; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.05; letter-spacing: -0.035em; margin: 64px 0 20px; padding-bottom: 12px; border-bottom: 3px solid var(--text); text-wrap: balance; }
h3 { font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; margin: 36px 0 12px; }
p { font-size: 17px; line-height: 1.7; color: var(--muted); margin-bottom: 18px; }
strong { color: var(--text); font-weight: 600; }
em { font-style: italic; }
ul, ol { margin: 0 0 20px; padding-left: 22px; }
li { font-size: 17px; line-height: 1.7; color: var(--muted); margin-bottom: 8px; padding-left: 4px; }
li::marker { color: var(--amber); }
ol > li::marker { font-weight: 700; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; color: var(--text); padding: 1px 5px; border: 1px solid var(--hair2); }
pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.6; color: var(--dim); border: 1px solid var(--hair2); padding: 16px; white-space: pre-wrap; margin: 0 0 18px; }
hr { border: 0; border-top: 1px solid var(--hair2); margin: 32px 0; }
.highlight { color: var(--amber); font-weight: 700; }
.fine { font-size: 14px; line-height: 1.55; color: var(--dim); }
.lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim); }
.lbl-amber { color: var(--amber); }
ul.plain { list-style: none; padding: 0; }
ul.plain li { padding: 0; }

/* pull quote: serif, hairlines above and below, no wash */
blockquote { margin: 36px 0; padding: 22px 0; border-top: 1px solid var(--hair2); border-bottom: 1px solid var(--hair2); }
blockquote p { font-family: var(--serif); font-style: italic; font-size: 27px; line-height: 1.25; letter-spacing: -0.005em; color: var(--text); margin-bottom: 10px; }
blockquote p:last-child { margin-bottom: 0; }
blockquote cite { display: block; font-style: normal; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim); }

/* figures */
figure { margin: 36px 0; }
figure img { display: block; width: 100%; height: auto; border: 1px solid var(--hair2); }
figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--dim); }

/* ---------- tables: like the homepage comparison ---------- */
.table-wrap { margin: 28px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; margin: 28px 0; border-top: 3px solid var(--text); }
.table-wrap table { margin: 0; }
th, td { text-align: left; vertical-align: top; padding: 13px 16px 13px 0; font-size: 15px; line-height: 1.45; }
th:last-child, td:last-child { padding-right: 0; }
thead th { padding-top: 14px; padding-bottom: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); vertical-align: bottom; }
tbody tr, tfoot tr { border-top: 1px solid var(--hair2); }
td { color: var(--muted); }
td:first-child, tbody th { color: var(--text); font-weight: 600; }

/* ---------- notes / callouts: hairline box, optional amber top rule ---------- */
.spec-box, .verdict, .local-faq, .toc, .box, .note { margin: 32px 0; padding: 22px 24px; border: 1px solid var(--hair2); }
p.note { padding: 14px 18px; }
.verdict { border-top: 3px solid var(--amber); }
.spec-box h3, .verdict h3, .toc h3 { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--amber); }
.spec-box p, .verdict p, .box p, .note p, .note { font-size: 16px; }
.spec-box p, .verdict p, .box p, .note p { margin-bottom: 10px; }
p.note.fine { font-size: 14px; }
.spec-box > :last-child, .verdict > :last-child, .box > :last-child, .note > :last-child { margin-bottom: 0; }
.local-faq h2 { margin-top: 0; }
.local-faq-item { border-top: 1px solid var(--hair2); padding-top: 16px; margin-top: 16px; }
.local-faq-item h3 { margin: 0 0 8px; font-size: 18px; }
.local-faq-item p { font-size: 16px; margin-bottom: 0; }
.local-faq-link { border-top: 1px solid var(--hair2); margin: 20px 0 0; padding-top: 16px; font-size: 15px; }
.toc ol { margin: 0; }
.toc li { font-size: 16px; margin-bottom: 4px; }
.toc a { color: var(--text); text-decoration-color: var(--hair2); }
.toc a:hover { color: var(--amber); }

/* numbered steps, check / reject lists */
.step-list { list-style: none; counter-reset: steps; padding: 0; margin: 28px 0; }
.step-list li { counter-increment: steps; display: flex; gap: 16px; padding: 14px 0 0; margin: 0 0 14px; border-top: 1px solid var(--hair2); }
.step-list li::before { content: counter(steps); flex: 0 0 auto; min-width: 32px; font-weight: 700; font-size: 32px; line-height: 0.9; letter-spacing: -0.06em; color: var(--amber); }
.step-content strong { display: block; font-size: 17px; margin-bottom: 4px; }
.step-content span { font-size: 16px; color: var(--muted); line-height: 1.6; }
.spec-badge { display: inline-block; padding: 1px 7px; border: 1px solid rgba(232,168,50,0.5); color: var(--amber); font: 600 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
ul.checklist, ul.reject-list { list-style: none; padding: 0; margin: 16px 0 24px; border-top: 1px solid var(--hair2); }
ul.checklist li, ul.reject-list li { position: relative; margin: 0; padding: 9px 0 9px 26px; font-size: 16px; border-bottom: 1px solid var(--hair2); }
ul.checklist li::before, ul.reject-list li::before { position: absolute; left: 2px; top: 9px; font-weight: 700; }
ul.checklist li::before { content: "✓"; color: var(--amber); }
ul.reject-list li::before { content: "✗"; color: #f87171; }

/* two-up blocks (choose-AI / choose-human, winner columns, stat pairs, values): hairline-topped columns */
.duo, .comparison-grid, .winner-grid, .values-grid, .problem-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 32px 0; }
.duo > *, .comparison-col, .winner-col, .value-card, .problem-stat { min-width: 0; padding: 14px 0 6px; border-top: 3px solid var(--text); }
.duo > :first-child, .comparison-col.gold, .problem-stat { border-top-color: var(--amber); }
.duo .lbl { margin-bottom: 10px; }
.duo ul.plain li { font-size: 16px; margin-bottom: 6px; }

/* ---------- buttons: square amber / outline, as on the homepage ---------- */
.btn-xl, .cta-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; font-family: var(--sans); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; }
a.btn-amber, .btn-amber, a.cta-btn, .cta-btn { background: var(--amber); color: #000; }
a.btn-amber:hover, .btn-amber:hover, a.cta-btn:hover, .cta-btn:hover { background: var(--amber-hover); color: #000; text-decoration: none; }
a.btn-ghost, .btn-ghost { border: 2px solid var(--text); color: var(--text); padding: 0 20px; background: transparent; }
a.btn-ghost:hover, .btn-ghost:hover { background: var(--text); color: var(--bg); text-decoration: none; }

/* closing call to action: a 3px rule, a big line, the amber button */
.cta-box { margin: 64px 0 0; padding: 20px 0 0; border-top: 3px solid var(--text); }
.cta-box h2, .cta-box h3 { margin: 0 0 12px; padding: 0; border: 0; font-weight: 700; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.05; letter-spacing: -0.04em; }
.cta-box p { margin-bottom: 22px; }

/* ---------- card grid (related guides, glossary index): hairline-topped, no boxes ---------- */
.related { max-width: var(--tvx-max, 1100px); margin: 0 auto; padding: 80px var(--tvx-gutter, 38px) 0; }
.related > h2 { margin: 0 0 16px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; margin: 0 0 8px; }
.cards > a { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 0 24px; border-top: 1px solid var(--hair2); color: inherit; text-decoration: none; }
.card-t { font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); overflow-wrap: break-word; }
.card-d { font-size: 15px; line-height: 1.55; color: var(--muted); }
.card-go { margin-top: auto; padding-top: 6px; font-size: 15px; font-weight: 600; color: var(--amber); }
.cards > a:hover .card-t { color: var(--amber); }
.cards > a:hover .card-go { text-decoration: underline; text-underline-offset: 3px; }
.related > h2 + .cards, h2 + .cards { margin-top: 0; }

/* ---------- phones ---------- */
@media (max-width: 880px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .container, .page-wrap { padding: 0 16px; }
  h1 { font-size: clamp(34px, 10vw, 44px); line-height: 1; letter-spacing: -0.045em; padding-bottom: 14px; }
  h2 { font-size: 26px; margin-top: 52px; }
  h3 { font-size: 19px; }
  p, li { font-size: 16px; }
  .intro { font-size: 18px; }
  blockquote p { font-size: 23px; }
  .spec-box, .verdict, .local-faq, .toc, .box, .note { padding: 18px 16px; }
  th, td { font-size: 14px; padding: 11px 12px 11px 0; }
  /* wide tables scroll inside their box; the page itself never scrolls sideways */
  .table-wrap { margin-right: -16px; padding-right: 16px; }
  /* 2-3 column tables fit the phone; wider ones overflow into the scroll box */
  .table-wrap th, .table-wrap td { min-width: 7.5em; }
  .cta-btn, .btn-xl { width: 100%; min-height: 52px; }
  .related { padding: 64px 16px 0; }
  /* related guides: a swipe row, as on the homepage */
  .related .cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-right: -16px; padding-right: 16px; scrollbar-width: thin; }
  .related .cards > a { flex: 0 0 78%; scroll-snap-align: start; }
  .toc li { margin-bottom: 0; }
  .toc a { display: inline-block; padding: 9px 0; }
  .card-go { display: inline-flex; align-items: center; min-height: 44px; padding-top: 0; }
  .cards { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .duo, .comparison-grid, .winner-grid, .problem-stats { gap: 20px 14px; }
  .duo ul.plain li { font-size: 15px; }
}