/* Long-form content pages (comparisons, how-tos, guides) on top of /style.css. */
.article{max-width:72ch;padding-block:clamp(28px,4vw,48px) clamp(56px,7vw,88px);overflow-wrap:break-word}
.article .h1{margin-top:14px}
.article .stamp{margin:12px 0 28px;font-size:14px;color:var(--muted)}
.article h2{font-size:clamp(22px,2.6vw,26px);font-weight:700;letter-spacing:-.012em;line-height:1.25;margin:44px 0 12px;font-variation-settings:"wght" 700,"wdth" 95,"opsz" 26}
.article h3{font-size:19px;font-weight:700;margin:28px 0 8px}
.article p,.article li{max-width:68ch}
.article p{margin:0 0 14px}
.article ul,.article ol{padding-left:1.3em;margin:0 0 16px}
.article li{margin:0 0 6px}
.article .lede{font-size:clamp(18px,2vw,20px);line-height:1.5;margin-bottom:20px}
.crumbs{font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs span[aria-hidden]{margin:0 6px}

/* comparison tables: scroll sideways inside their own box on a phone, never the page */
.tbl{overflow-x:auto;margin:8px 0 22px;border:1px solid var(--hairline);border-radius:8px}
.tbl table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--hairline)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl thead th{font-weight:700;background:color-mix(in srgb,var(--hairline) 45%,transparent)}
.tbl tbody th{font-weight:600;white-space:nowrap}

/* terminal commands */
.article pre{background:var(--win-bar);color:var(--win-ink);border:1px solid var(--hairline);border-radius:8px;padding:12px 14px;overflow-x:auto;font-size:14px;line-height:1.5}
.article code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.92em}

.note{border-left:3px solid var(--amber-ink);padding:2px 0 2px 14px;margin:18px 0;color:var(--ink)}
#sources{margin-top:48px;border-top:1px solid var(--hairline);padding-top:8px;font-size:15px}
#sources li{color:var(--muted)}
.next{margin-top:40px}
.guide-list{list-style:none;padding:0;margin:8px 0 0;border-top:1px solid var(--hairline)}
.guide-list li{border-bottom:1px solid var(--hairline);padding:16px 0;color:var(--muted);max-width:none}
.guide-list b{font-size:18px}