/* Client-facing architecture overview — reads on screen, prints to PDF. */

.hiw {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 24px 72px;
}

.hiw-cover { padding: 24px 0 8px; border-bottom: 1px solid var(--border-light); margin-bottom: 12px; }
.hiw-logo { display: block; margin-bottom: 14px; }
.hiw-kicker {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted);
    margin: 0 0 6px;
}
.hiw h1 {
    font-size: clamp(2rem, 5vw, 2.9rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.1;
    margin: 0 0 14px;
}
.hiw-sub { color: var(--text-secondary); font-size: 1.05rem; max-width: 64ch; }
.hiw-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 14px; }
.hiw-meta a { color: var(--blue-600); }

.hiw section { margin-top: 40px; }
.hiw h2 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.hiw h3 { font-size: 1.02rem; font-weight: 800; margin: 24px 0 8px; }
.hiw p, .hiw li { color: var(--text-secondary); line-height: 1.75; }
.hiw ul, .hiw ol { margin: 0 0 14px 22px; }
.hiw li { margin-bottom: 7px; }
.hiw strong { color: var(--text-primary); }
.hiw a { color: var(--blue-600); }
.hiw code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.86em;
    background: var(--bg-card-alt);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 1px 6px;
    color: var(--text-primary);
}

.hiw-figure pre {
    background: var(--bg-card-alt);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 16px;
    overflow-x: auto;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.hiw-steps { counter-reset: none; }
.hiw-steps li { margin-bottom: 10px; }

.hiw-table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font-size: 0.9rem; }
.hiw-table th, .hiw-table td {
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    vertical-align: top;
}
.hiw-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.hiw-note {
    border-left: 3px solid var(--blue-500, #3b82f6);
    padding: 8px 0 8px 14px;
    margin: 14px 0;
    font-size: 0.94rem;
}

.hiw-end { border-top: 1px solid var(--border-light); padding-top: 26px; }
.hiw-links { font-size: 0.88rem; }
.hiw-footer {
    margin-top: 44px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* --- print / PDF ------------------------------------------------------- */
@media print {
    @page {
        size: A4;
        margin: 18mm 16mm 20mm;
        @bottom-center {
            content: "ElephantPool — how it works · page " counter(page) " / " counter(pages);
            font-family: Inter, sans-serif;
            font-size: 8pt;
            color: #6b7280;
        }
    }
    .screen-only { display: none !important; }
    body { background: #fff; color: #1f2937; }
    .hiw { max-width: none; padding: 0; }
    .hiw h1 { font-size: 26pt; }
    .hiw h2 { font-size: 14pt; margin-top: 0; }
    .hiw h3 { font-size: 11pt; }
    .hiw p, .hiw li, .hiw-table td { font-size: 10pt; color: #374151; line-height: 1.55; }
    /* Headings are centred on the marketing site; a document wants them left. */
    .hiw h1, .hiw h2, .hiw h3, .hiw p, .hiw li { text-align: left; }
    /* The site collapses paragraph margins; a printed page needs the air. */
    .hiw p { margin-bottom: 8pt; }
    /* Keep sections together only when they are short: forcing every section
       whole leaves half-empty pages, which reads worse than a split. */
    .hiw section { margin-top: 22pt; }
    .hiw h2, .hiw h3 { break-after: avoid; }
    .hiw-cover { break-after: page; padding-top: 40mm; border: none; }
    .hiw-figure pre { font-size: 7pt; background: #f9fafb; color: #374151; }
    .hiw-table th { color: #6b7280; }
    .hiw-table, .hiw-figure { break-inside: avoid; }
    .hiw a { color: #1d4ed8; text-decoration: none; }
    .hiw-note { border-left-color: #3b82f6; }
}