/* Shared chrome (header nav, trust footer, cookie consent) + content pages for the public site
   (About / Methodology / FAQ / Pricing / Contact / legal). Additive — reuses tokens.css variables
   and lp.css classes (.wrap/.block/.card/.plans/.site-footer/.topbar). #119–124 / content-8. */

/* --- header nav --- */
.topnav { display: flex; gap: 20px; align-items: center; margin-left: auto; }
.topnav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.topnav a:hover, .topnav a[aria-current="page"] { color: var(--text); }
.topnav .app-link { color: var(--accent); font-weight: 600; }
@media (max-width: 760px) { .topnav { display: none; } }   /* small screens: use the footer nav */

/* --- prose / document pages --- */
.doc { max-width: 760px; }
.doc .eyebrow { text-transform: uppercase; letter-spacing: var(--track-label); font-size: var(--fs-xs); color: var(--gold); font-weight: 600; }
.doc h1 { font-family: var(--font-display), serif; font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; margin: 8px 0 12px; }
.doc .lead { color: var(--muted); font-size: 1.12rem; line-height: 1.62; margin-bottom: 8px; }
.doc h2 { font-family: var(--font-display), serif; font-size: 1.5rem; margin: 42px 0 10px; letter-spacing: -.01em; }
.doc h3 { font-size: 1.08rem; margin: 24px 0 6px; }
.doc p, .doc li { line-height: 1.72; color: var(--text); }
.doc ul { padding-left: 1.2em; }
.doc li { margin: 5px 0; }
.doc .ja { display: block; color: var(--muted); font-size: .9em; margin-top: 2px; }
.doc table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .92rem; }
.doc th, .doc td { border: 1px solid var(--border); padding: 8px 11px; text-align: left; vertical-align: top; }
.doc th { background: var(--surface-2); font-weight: 600; }
.doc a { color: var(--info); }
/* CTA buttons inside .doc must keep their own ink — `.doc a` (green) was overriding .btn-primary's
   white text → green-on-green, unreadable in light. */
.doc a.btn-primary { color: #fff; }
[data-theme="dark"] .doc a.btn-primary { color: var(--on-a); }
.doc a.btn-outline { color: var(--text); }
.doc .updated { color: var(--faint); font-size: var(--fs-xs); }

.pill { display: inline-block; font-size: var(--fs-2xs); font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.pill.soon { border-color: var(--gold); color: var(--gold); }
.pill.live { border-color: var(--up); color: var(--up); }

.legal-note { border: 1px dashed var(--gold); border-radius: var(--r-md); padding: 10px 14px; color: var(--muted); font-size: .85rem; margin: 16px 0; background: var(--gold-soft); }

/* --- FAQ --- */
.faq-cat { margin-top: 40px; }
.faq-item { border-bottom: 1px solid var(--border); padding: 16px 0; }
.faq-item h3 { margin: 0 0 6px; font-size: 1.05rem; }
.faq-item p { margin: 0; }

/* --- trust footer columns --- */
.foot-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; padding-bottom: 22px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.foot-col h4 { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--faint); margin: 0 0 10px; }
.foot-col a { display: block; color: var(--text); text-decoration: none; font-size: .9rem; padding: 3px 0; }
.foot-col a:hover { color: var(--accent); }
.foot-brand .logo-word { font-weight: 600; letter-spacing: .14em; font-size: 14px; }
.foot-brand .logo-word i { color: color-mix(in srgb, var(--gold) 55%, transparent); font-style: normal; padding: 0 .12em; }
@media (max-width: 640px) { .foot-cols { grid-template-columns: 1fr 1fr; } }

/* --- cookie consent --- */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 540px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: 0 10px 40px rgba(0,0,0,.18); z-index: 60; font-size: .9rem; color: var(--text); }
.consent[hidden] { display: none; }
.consent p { margin: 0; line-height: 1.55; }
.consent .row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.consent button { border-radius: var(--r-sm); padding: 8px 16px; font-weight: 600; font-size: .85rem; cursor: pointer; border: 1px solid var(--border-strong); background: transparent; color: var(--text); }
.consent button.primary { background: var(--a); border-color: var(--a); color: var(--on-a); }

/* page intro spacing under the fixed header */
.page-top { padding-top: 96px; }