/* site.css — shared page chrome and section rhythm for every route beyond the
   Home hero. Tokens and primitives come from design-system/; nothing here
   invents a colour. Dark is the default; light works via the token layer. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--body); font-family: var(--font); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(221,172,58,.26); }
a { color: var(--gold-text); }
/* Buttons are anchors too — excluding them here matters, because a bare
   `a:hover` outranks `.an-btn--primary`'s own colour and repaints the label
   gold on a gold fill. */
a:not(.an-btn):not(.nav-cta):not(.mnav-cta):hover { color: var(--gold-100); }
:root[data-theme="light"] a:not(.an-btn):not(.nav-cta):not(.mnav-cta):hover { color: var(--gold-600); }
.an-btn--primary, .an-btn--primary:hover { color: var(--ink); }
.an-btn--secondary:hover, .an-btn--tertiary:hover { color: var(--gold-text); }

.page { position: relative; min-height: 100vh; display: flex; flex-direction: column; isolation: isolate; }
.page-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 54% at 50% -16%, rgba(221,172,58,.06), transparent 62%); }
:root[data-theme="light"] .page-glow { background: radial-gradient(120% 54% at 50% -16%, rgba(221,172,58,.12), transparent 62%); }
.shell { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.shell--narrow { max-width: 860px; }

/* ── nav + footer: the unified chrome, owned by site/site-chrome.jsx (batch 6).
   Nothing chrome-scoped lives here anymore — one component, one stylesheet,
   every route. Dark-only production: no theme control, nothing sets data-theme. ── */

/* ── page head + section rhythm ── */
main { flex: 1; }
.page-head { padding: clamp(30px, 6vh, 68px) 0 clamp(24px, 4vh, 40px); }
.page-head-inner { max-width: 760px; }
.page-title { margin: 14px 0 0; font-weight: 700; font-size: clamp(33px, 4.8vw, 56px); line-height: 1.06; letter-spacing: -.02em; color: var(--heading); text-wrap: balance; }
.page-sub { margin: 20px 0 0; font-weight: 400; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.6; color: var(--body); max-width: 56ch; text-wrap: pretty; }

.section { padding: clamp(44px, 7vh, 82px) 0; }
.section--divide { border-top: 1px solid var(--hairline); }
.section-head { max-width: 720px; margin-bottom: clamp(26px, 4vh, 42px); }
.section-title { margin: 13px 0 0; font-weight: 700; font-size: clamp(25px, 3vw, 35px); line-height: 1.13; letter-spacing: -.015em; color: var(--heading); text-wrap: balance; }
.section-sub { margin: 15px 0 0; font-weight: 400; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.62; color: var(--body); max-width: 54ch; text-wrap: pretty; }

/* ── document prose (policy pages) ── */
.doc-prose p { margin: 0 0 18px; font-size: 16.5px; line-height: 1.68; color: var(--body); max-width: 62ch; text-wrap: pretty; }
.doc-prose p:last-child { margin-bottom: 0; }
.doc-prose strong { color: var(--heading); font-weight: 700; }

/* numbered principle list — used on /how-we-price */
.principles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(26px, 4vh, 44px); counter-reset: p; }
.principle { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
.principle-num { font-weight: 300; font-size: clamp(30px, 3.6vw, 44px); line-height: .9; color: var(--gold-text); opacity: .55; font-variant-numeric: tabular-nums; }
.principle-title { margin: 0 0 12px; font-weight: 700; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.25; letter-spacing: -.008em; color: var(--heading); }
.principle-body { margin: 0; font-size: 16px; line-height: 1.66; color: var(--body); max-width: 60ch; text-wrap: pretty; }

/* ── closing CTA band ── */
.cta-band { padding: clamp(38px, 6vw, 62px); border-radius: var(--r-xl); background: var(--surface-2); border: 1px solid var(--hairline); text-align: center; }
.cta-title { margin: 0; font-weight: 700; font-size: clamp(25px, 3vw, 36px); line-height: 1.14; letter-spacing: -.015em; color: var(--heading); text-wrap: balance; }
.cta-sub { margin: 16px auto 0; max-width: 54ch; font-size: 16px; line-height: 1.6; color: var(--body); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: clamp(24px, 3.4vh, 32px); }

/* ── content "soon" states (the nav/footer soon-tag lives in the chrome) ── */
.svc-card--soon { opacity: .72; border-style: dashed; }
.svc-chip--soon { color: var(--tertiary); cursor: default; }

/* ── reveal-on-scroll, matching the Home hero's motion vocabulary ── */
[data-rise] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--rd, 0ms); }
[data-rise].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-rise] { opacity: 1; transform: none; transition: none; } }

@media (max-width: 860px) {
  .principle { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 640px) {
  .cta-actions .an-btn { width: 100%; }
}

/* ── contents index (prototype navigation aid, not site chrome) ── */
.toc { display: flex; flex-direction: column; }
.toc-row { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr) auto; gap: clamp(14px, 2.4vw, 32px); align-items: baseline; padding: 18px 0; border-top: 1px solid var(--hairline); text-decoration: none; transition: background var(--dur) ease; }
.toc-row:last-child { border-bottom: 1px solid var(--hairline); }
a.toc-row:hover { background: var(--surface-1); }
.toc-route { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 700; color: var(--gold-text); }
.toc-row--soon .toc-route { color: var(--tertiary); }
.toc-desc { font-size: 14.5px; line-height: 1.5; color: var(--body); }
.toc-file { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--tertiary); white-space: nowrap; }
.toc-group-title { margin: clamp(28px, 4vh, 40px) 0 4px; font-weight: 700; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tertiary); }
@media (max-width: 720px) { .toc-row { grid-template-columns: 1fr; gap: 6px; } }