/* Text pages: hero, stepper, sticky table of contents, long-form prose, FAQ, contact.
 * Same tokens and surfaces as the home bento: hairlines, radius 16/26, navy scrims. */

.doc__hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 5vw, 64px); border-radius: var(--radius-lg); background: radial-gradient(110% 90% at 0% 0%, color-mix(in oklab, var(--color-brand) 20%, transparent), transparent 60%), var(--surface-1); border: 1px solid var(--line); }
.doc__hero--pic { min-height: 380px; display: flex; align-items: flex-end; }
.doc__hero .doc__hero-bg { position: absolute; inset: 0; z-index: -2; }
.doc__hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.doc__hero--pic::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(16 27 43 / .96) 0%, rgb(16 27 43 / .82) 50%, rgb(16 27 43 / .35) 100%); }
.doc__hero-body { display: grid; gap: 14px; max-width: 760px; }
.doc__title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); }
.doc__lead { font-size: var(--fs-lead); color: #D7E1EC; }
.doc__lead p + p { margin-top: 10px; }
.doc__updated { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--color-muted); }
.doc__updated .icon { width: 15px; height: 15px; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--color-muted); }
.crumbs a { color: var(--color-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-brand); }
.crumbs .icon { width: 14px; height: 14px; }

/* stepper (how it works) */
.stepper { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 18px; counter-reset: none; }
.stepper a { position: relative; display: grid; gap: 8px; height: 100%; padding: 16px; border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--line); text-decoration: none; font-size: .88rem; font-weight: 600; transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.stepper a:hover { border-color: var(--color-brand); transform: translateY(-3px); }
.stepper .icon { width: 22px; height: 22px; color: var(--color-brand); }
.stepper__n { position: absolute; top: 12px; right: 14px; font: 800 1.4rem var(--font-display); color: color-mix(in oklab, var(--color-gold) 70%, transparent); }

/* layout */
.doc__layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: var(--section-gap); align-items: start; }
.doc__aside { position: sticky; top: 92px; display: grid; gap: 14px; max-height: calc(100vh - 110px); overflow: auto; scrollbar-width: thin; }
.toc { padding: 18px; border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--line); }
.toc__title { margin-bottom: 10px; font: 700 .74rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); }
.toc ol { display: grid; gap: 2px; }
.toc a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--color-muted); font-size: .86rem; line-height: 1.35; text-decoration: none; border-left: 2px solid transparent; transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.toc a:hover { color: var(--color-text); background: var(--surface-2); }
.toc a.is-current { color: var(--color-text); border-left-color: var(--color-brand); background: var(--brand-tint); }
.aside-card { display: grid; gap: 10px; padding: 18px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-small); }
.aside-card p { color: var(--color-muted); }
.aside-card .btn { justify-self: start; }

/* prose */
.prose { min-width: 0; max-width: 820px; }
.prose__sec { padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--line); scroll-margin-top: 92px; }
.prose__sec:last-of-type { border-bottom: 0; }
.prose h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin-bottom: 14px; }
.prose h3 { font: 700 1.08rem var(--font-display); margin: 20px 0 8px; }
.prose p, .prose li { color: #CBD6E3; }
.prose p + p, .prose p + ul, .prose ul + p, .prose p + ol, .prose ol + p, .prose .data-table + p, .prose p + .data-table { margin-top: 12px; }
.prose ul, .prose ol { display: grid; gap: 8px; margin-top: 12px; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand); }
.prose ol { counter-reset: li; }
.prose ol li { position: relative; padding-left: 30px; counter-increment: li; }
.prose ol li::before { content: counter(li); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold-tint); color: var(--color-gold); font: 700 .72rem var(--font-body); }
.prose strong { color: var(--color-text); }
.prose a { color: var(--color-brand); text-underline-offset: 3px; }
.prose .data-table { margin-top: 14px; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-1); border: 1px solid var(--line); display: block; overflow-x: auto; }
.prose .data-table tbody th { width: 40%; }
.step-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 12px 6px 8px; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--color-brand); font-size: .8rem; font-weight: 700; }
.step-badge .icon { width: 18px; height: 18px; }

/* FAQ */
.faq__tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: var(--section-gap); }
.faq__tools .search { max-width: 520px; }
.faq__group { margin-top: 36px; scroll-margin-top: 92px; }
.faq__group h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.faq__group h2 .num { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--surface-3); font: 700 .8rem var(--font-body); color: var(--color-muted); }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: var(--section-gap); align-items: start; }
.contact__form { padding: clamp(20px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--line); }
.contact__done { display: grid; gap: 12px; justify-items: start; padding: 24px; border-radius: var(--radius-md); background: color-mix(in oklab, var(--color-success) 10%, transparent); border: 1px solid color-mix(in oklab, var(--color-success) 35%, transparent); }
.contact__done .icon { width: 36px; height: 36px; color: var(--color-success); }
.contact__side { display: grid; gap: 14px; }
.info-card { display: grid; gap: 8px; padding: 20px; border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--line); }
.info-card > .icon { width: 24px; height: 24px; color: var(--color-brand); }
.info-card p, .info-card dd { font-size: var(--fs-small); color: var(--color-muted); }
.info-card a { color: var(--color-brand); }
.info-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: var(--fs-small); }
.info-card dt { color: var(--color-muted); }
.info-card dd { margin: 0; color: var(--color-text); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 1100px) {
  .doc__layout { grid-template-columns: 1fr; }
  .doc__aside { position: static; max-height: none; }
  .toc ol { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .doc__hero--pic { min-height: 0; }
  .doc__hero--pic::after { background: rgb(16 27 43 / .86); }
  .stepper { grid-template-columns: 1fr 1fr; }
  .toc { display: none; }
  .info-card dl { grid-template-columns: 1fr; }
}
/* stepper: 9 → 3×3; toc and chips never leave a single orphan */
.stepper { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.stepper a { font-size: .8rem; padding: 14px 12px; }
@media (max-width: 1280px) { .stepper { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .stepper { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 150px; overflow-x: auto; scrollbar-width: none; } }
@media (max-width: 1100px) { .toc ol { display: block; columns: 3 200px; column-gap: 12px; } .toc li { break-inside: avoid; } }
.faq__tools .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.faq__tools .chips .chip { flex: none; }