/* Hallmark · macrostructure: Long Document · tone: utilitarian/technical · anchor hue: electric blue (kept)
 * Guides + privacy: one column, display headings, real copy, comparison tables. Tokens only — see DESIGN.md. */

.doc { display: flex; flex-direction: column; gap: var(--space-2xl); max-width: 52rem; margin-inline: auto; width: 100%; min-width: 0; }
.doc__head { display: flex; flex-direction: column; gap: var(--space-sm); padding-bottom: var(--space-md); border-bottom: var(--rule); }
.doc__head h1 { font-size: var(--text-3xl); max-width: 22ch; }
.doc__head .lede { max-width: 66ch; }
.doc__stamp { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-mono); color: var(--color-ink-3); text-transform: uppercase; }
.doc__toc { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.doc__toc a {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-ink-2); text-decoration: none; white-space: nowrap;
  padding: 0.5rem 0.8rem; border: var(--rule-cut); border-radius: var(--radius-label);
}
.doc__toc a:hover { color: var(--color-stock-ink); background: var(--color-stock); border-color: var(--color-stock); border-style: solid; }

.doc__section { display: flex; flex-direction: column; gap: var(--space-sm); scroll-margin-top: calc(var(--masthead-h) + var(--space-sm)); min-width: 0; }
.doc__section > h2 { font-size: var(--text-2xl); }
.doc__section > .lede { font-size: var(--text-base); }
.doc__section .table-wrap { margin-top: var(--space-2xs); }
.doc__section .table td:first-child { color: var(--color-ink); font-weight: 600; }
.doc__section .table td { min-width: 10rem; }
.doc__section .table td:first-child { min-width: 12rem; }
.doc__section .table a { white-space: nowrap; }

/* ordered steps — the numbering is the content (setup order) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); counter-reset: step; }
@media (min-width: 640px) { .steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.steps > li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-sm); border: var(--rule); border-radius: var(--radius-label); background: var(--color-chassis-2); counter-increment: step; min-width: 0; }
.steps > li::before { content: counter(step); font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: 1; color: var(--color-ink-3); }
.steps h3 { font-size: var(--text-lg); margin-bottom: var(--space-3xs); }
.steps p, .steps li li { color: var(--color-ink-2); font-size: var(--text-sm); }
.steps--plain > li { padding: 0; border: 0; background: transparent; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-2xs); }
.steps--plain > li::before { font-size: var(--text-md); color: var(--color-ink-3); padding-top: 0.15rem; }
.steps--plain > li > span { color: var(--color-ink-2); font-size: var(--text-sm); }

/* brand guides — one per article, stacked */
.brand { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); border: var(--rule); border-radius: var(--radius-card); background: var(--color-chassis-2); scroll-margin-top: calc(var(--masthead-h) + var(--space-sm)); min-width: 0; }
.brand h3 { font-size: var(--text-xl); }
.brand__searches { font-size: var(--text-xs); color: var(--color-ink-3); }
.brand__searches strong { color: var(--color-ink-2); font-weight: 600; }
.brand__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); padding-top: var(--space-2xs); }
.brand__actions .btn { text-decoration: none; }

/* the note that holds the test prints */
.note__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-xs); }
.note__actions .btn { text-decoration: none; }
.note h3 { font-size: var(--text-md); margin-bottom: var(--space-3xs); }

/* plan bullets on the guide's pricing section */
.plan { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
@media (min-width: 640px) { .plan { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan > li { padding: var(--space-sm); border: var(--rule); border-radius: var(--radius-label); background: var(--color-chassis-2); min-width: 0; }
.plan > li strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: 0.04em; text-transform: uppercase; }
.plan > li span { display: block; color: var(--color-ink-2); font-size: var(--text-sm); margin-top: var(--space-3xs); }

/* faq — stacked question / answer */
.faq { display: flex; flex-direction: column; gap: 0; border-top: var(--rule); }
.faq > article { padding: var(--space-sm) 0; border-bottom: var(--rule); min-width: 0; }
.faq h3 { font-size: var(--text-lg); margin-bottom: var(--space-3xs); }
.faq p { color: var(--color-ink-2); font-size: var(--text-sm); max-width: 70ch; }

/* static pages (privacy) reuse the shell chrome without the module script */
.static-nav { display: flex; align-items: center; gap: var(--space-2xs); justify-self: end; flex-wrap: wrap; }
.static-nav a { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-2); text-decoration: none; padding: 0.5rem 0.7rem; border-radius: 3px; white-space: nowrap; }
.static-nav a:hover { color: var(--color-ink); background: var(--color-chassis-3); }
.static-nav a[aria-current="page"] { background: var(--color-stock); color: var(--color-stock-ink); }
@media (max-width: 899px) { .masthead--static { grid-template-columns: minmax(0, 1fr) auto; } }