/* The app's own pages (help, privacy, terms, billing, codes): the article layout from site.css, plus the few parts these
   pages add. Tokens only, so light, dark and 200% text follow site.css. */
.draft-banner{margin:16px 0 0;padding:14px 18px;border:2px solid var(--ink);border-radius:16px;background:var(--caption);color:var(--ink);font-weight:700;max-width:62ch}
.draft-banner span{display:block;font-weight:400;margin-top:4px}
mark.confirm{background:var(--caption);color:var(--ink);padding:0 4px;border-radius:4px;font-weight:700}
.article-body .table-scroll{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.article-body table{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}
.article-body th,.article-body td{text-align:start;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.article-body tr:last-child td{border-bottom:0}
.article-body th{background:var(--well);font-weight:700}
.article-body ul{padding-inline-start:1.2em;display:grid;gap:8px}
.article-body section{scroll-margin-top:24px}
.helplines{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;margin:18px 0}
.helpline{border:3px solid var(--ink);border-radius:18px;background:var(--card);padding:16px;display:grid;gap:6px;min-width:0}
.helpline h3{margin:0;font-size:1.05rem}
.helpline p{margin:0}
.helpline .numbers{display:flex;flex-wrap:wrap;gap:8px 16px;font-variant-numeric:tabular-nums}
.helpline .numbers b{font-size:1.15rem}
.helpline .note{color:var(--muted);font-size:.9rem;margin:0}
.crisis-note{border-inline-start:6px solid var(--teal);padding:12px 16px;background:var(--mint);border-radius:0 14px 14px 0;margin:16px 0}
.plan-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;margin:18px 0}
.plan-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:18px;min-width:0}
.plan-card.pro{border:3px solid var(--ink)}
.plan-card h3{margin:0 0 8px}
.plan-card ul{margin:0}
.steps{counter-reset:step;list-style:none;padding:0;display:grid;gap:10px}
.steps li{counter-increment:step;display:grid;grid-template-columns:2.2em 1fr;gap:10px;align-items:start}
.steps li::before{content:counter(step);display:grid;place-items:center;width:2em;height:2em;border-radius:50%;background:var(--teal);color:var(--teal-on);font-weight:800}
.app-path{font-weight:700;color:var(--ink)}
/* Phones: each table row becomes a card, each cell labelled with its column. */
@media(max-width:640px){.article-body .table-scroll{overflow:visible;border:0;background:none}.article-body table{min-width:0}
.article-body thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.article-body tbody,.article-body tr,.article-body td{display:block}.article-body tr{border:1px solid var(--line);border-radius:16px;background:var(--card);margin:0 0 12px;padding:6px 0}
.article-body td{border:0;padding:8px 14px}.article-body td::before{content:attr(data-label);display:block;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}}