/* Architecture page (architecture.html). The diagram is a fixed light plate in both themes,
   like an image; only the frame and the cards around it follow the site theme. */
:root{
  --d-frame:#1b211f; --d-plate:#f7f9f8; --d-ink:#1b211f; --d-quiet:#5d6863; --d-box:#ffffff; --d-edge:#d3dad6;
  --d-purple:#24614f; --d-purple-tint:#e3f1ea;
  --d-orange:#a8590c; --d-orange-tint:#fdf0e1; --d-orange-edge:#efc58f;
  --d-verify:#4a3fb8; --d-verify-tint:#eeecfb; --d-red:#c0392b; --d-dark:#1b211f;
}
.arch-head{padding-block:24px 8px;display:grid;gap:10px;max-width:46rem}
.arch-head .eyebrow{justify-self:start}
.arch-head h1{margin:0}
.arch-figure{margin:0 0 8px;overflow-x:auto;border-radius:18px}
.arch-figure svg{display:block;width:100%;min-width:880px;height:auto}
.arch-caption{margin:0 0 40px;font-size:13px;color:var(--muted)}
.arch-steps .steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px}
.arch-steps .card h3{display:flex;gap:10px;align-items:center}
.arch-steps .card h3 span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);font-size:12px;flex:none}
.arch-next{margin:28px 0 0;font-weight:650}