/* QR Craft — document pages (legal, FAQ, 404).
 * Same tokens and relief as the landing page, set for long-form reading:
 * one measured column, a sticky contents rail, and quiet furniture.
 */

.doc-body { padding-top: calc(var(--hdr-h) + 40px); }

/* ── Document hero ──────────────────────────────────────────────────────── */
.doc-hero { position: relative; padding: clamp(30px, 5vw, 60px) 0 clamp(36px, 5vw, 64px); overflow: hidden; }
.doc-hero::before {
  content: ""; position: absolute; z-index: -1; width: 760px; height: 760px; right: -220px; top: -340px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(249, 115, 22, .20), transparent 70%);
}
.doc-hero .wrap { max-width: 1180px; }
.doc-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--bg); box-shadow: var(--raise-xs); font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--dim); text-decoration: none; }
.doc-kicker .ic { width: 18px; height: 18px; color: var(--brand); }
.doc-kicker:hover { color: var(--ink); }
.doc-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.02; letter-spacing: -.022em; }
.doc-title em { font-style: normal; color: var(--brand); }
.doc-sub { margin-top: 18px; max-width: 46em; font-size: clamp(1rem, 1.3vw, 1.12rem); color: var(--ink-2); line-height: 1.6; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.doc-meta span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--bg); box-shadow: var(--inset-sm); font-size: .84rem; font-weight: 600; color: var(--dim); }
.doc-meta .ic { width: 16px; height: 16px; color: var(--brand); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.doc-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: start; padding-bottom: 90px; }
.doc-layout .wrap { max-width: 1180px; }
.toc { position: sticky; top: calc(var(--hdr-h) + 24px); padding: 22px; border-radius: 26px; background: var(--sheen), var(--bg); box-shadow: var(--raise-sm); max-height: calc(100vh - var(--hdr-h) - 60px); overflow-y: auto; scrollbar-width: thin; }
.toc h2 { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.toc ol { display: grid; gap: 2px; counter-reset: toc; }
.toc a { display: block; padding: 7px 10px; border-radius: 10px; font-size: .88rem; font-weight: 500; color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.toc a:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand-ink); }
.toc a.on { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-ink); font-weight: 700; }

.doc { max-width: 76ch; font-size: 1.02rem; line-height: 1.72; color: var(--ink-2); }
.doc h2 { font-family: var(--f-display); font-size: clamp(1.5rem, 2.6vw, 2.05rem); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; color: var(--ink); margin: 52px 0 16px; scroll-margin-top: calc(var(--hdr-h) + 24px); }
.doc h2:first-child { margin-top: 0; }
.doc h2 .num { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-right: 12px; border-radius: 12px; background: linear-gradient(145deg, #FB923C, #EA580C); color: #fff; font-family: var(--f-sans); font-size: 1rem; font-weight: 700; vertical-align: 3px; }
.doc h3 { font-size: 1.12rem; font-weight: 700; color: var(--ink); margin: 30px 0 10px; }
.doc p { margin: 0 0 16px; }
.doc a { font-weight: 600; }
.doc strong, .doc b { color: var(--ink); font-weight: 700; }
.doc ul, .doc ol { margin: 0 0 18px; padding-left: 4px; display: grid; gap: 10px; }
.doc ul li { position: relative; padding-left: 26px; }
.doc ul li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 8px; height: 8px; border-radius: 3px; background: var(--brand); }
.doc ol { counter-reset: n; }
.doc ol li { position: relative; padding-left: 34px; counter-increment: n; }
.doc ol li::before { content: counter(n); position: absolute; left: 0; top: .1em; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: var(--brand-soft); color: var(--brand-ink); font-size: .8rem; font-weight: 700; }
.doc hr { margin: 40px 0; border: 0; border-top: 1px dashed var(--line-2); }
.doc code { padding: 2px 7px; border-radius: 7px; background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }

.callout { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; margin: 26px 0; padding: 20px 22px; border-radius: 22px; background: var(--sheen), var(--bg); box-shadow: var(--raise-sm); }
.callout .ic { width: 46px; height: 46px; padding: 11px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); }
.callout h3 { margin: 0 0 6px; font-size: 1.05rem; }
.callout p:last-child { margin-bottom: 0; }
.callout-warn .ic { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.callout-good .ic { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }

.summary { margin: 0 0 42px; padding: 26px 28px; border-radius: 28px; background: linear-gradient(140deg, color-mix(in srgb, var(--brand) 14%, var(--bg)), var(--bg) 70%); box-shadow: var(--raise-sm); }
.summary h2 { margin: 0 0 14px; font-size: 1.3rem; }
.summary ul { margin: 0; }

.doc-table { width: 100%; margin: 22px 0; border-collapse: separate; border-spacing: 0; font-size: .95rem; }
.table-scroll { overflow-x: auto; margin: 22px -4px; padding: 4px; }
.doc-table th, .doc-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.doc-table th { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table td:first-child { font-weight: 700; color: var(--ink); }
.pill-yes, .pill-no { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.pill-yes { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.pill-no { background: color-mix(in srgb, var(--dim) 16%, transparent); color: var(--dim); }

/* ── Hub cards ──────────────────────────────────────────────────────────── */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 26px; }
.doc-card { display: grid; gap: 8px; padding: 26px; border-radius: 26px; background: var(--sheen), var(--bg); box-shadow: var(--raise-sm); text-decoration: none; color: var(--ink-2); transition: transform .3s var(--ease), box-shadow .3s; }
.doc-card:hover { transform: translateY(-4px); color: var(--ink-2); box-shadow: var(--raise), 0 0 0 1.5px color-mix(in srgb, var(--brand) 40%, transparent); }
.doc-card .ic { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); }
.doc-card h3 { margin-top: 6px; font-family: var(--f-display); font-size: 1.22rem; font-weight: 700; color: var(--ink); }
.doc-card p { font-size: .94rem; line-height: 1.5; }

/* ── FAQ page ───────────────────────────────────────────────────────────── */
.faq-group { margin-bottom: 44px; }
.faq-group > h2 { display: flex; align-items: center; gap: 12px; }
.faq-page .qa { background: var(--sheen), var(--bg); }
.faq-page .qa-list { margin-top: 18px; }

/* ── 404 ────────────────────────────────────────────────────────────────── */
.nf { display: grid; place-items: center; text-align: center; min-height: 72vh; gap: 10px; }
.nf canvas { width: min(300px, 62vw); height: auto; border-radius: 26px; box-shadow: var(--raise); padding: 14px; background: #fff; }
.nf .doc-title { margin-top: 26px; }
.nf .cta-row { justify-content: center; }

@media (max-width: 900px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; max-height: none; order: -1; }
  .toc ol { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
@media (max-width: 560px) {
  .doc h2 .num { width: 32px; height: 32px; font-size: .9rem; margin-right: 9px; }
  .callout { grid-template-columns: minmax(0, 1fr); }
}

/* utility classes — the CSP forbids inline style attributes */
.doc-wide { max-width: none; }
.faq-search-top { margin: 0 0 30px; }
.faq-ic { width: 30px; height: 30px; color: var(--brand); }
.center { text-align: center; }
.callout-end { margin-top: 40px; }
.nf-page .doc-hero { padding-bottom: 0; }