/* Wave-1 SEO pages (/guide/*, /about/). Additions on top of styles.css: same tokens, header, footer, .cta-band and .next card look
   as the help-centre spec (wiki design/help-center-2026-10-25.md). Nothing here changes a rule in styles.css. */
.guide-page{padding-bottom:0}
/* .lp is overflow:hidden (landing glow); on guide pages use clip so the contents TOC can stay sticky */
.lp:has(.guide-page){overflow:clip}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:15px;color:var(--ink-muted)}
.crumbs a{text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.crumbs a:hover{text-decoration:underline;opacity:1}
.crumbs .sep{opacity:.6}

.art-hero{background:linear-gradient(150deg,var(--court-wash),var(--surface) 70%);border-bottom:1px solid var(--line);padding:32px 0}
.art-hero-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.art-hero-copy{display:flex;flex-direction:column;gap:12px;min-width:0}
.art-hero-copy .eyebrow{margin:0;font-size:15px}
.art-hero h1{font-size:38px;line-height:1.3;font-weight:700;max-width:820px}
.art-hero-art{flex:none;width:120px;height:120px;object-fit:contain}
.meta{display:flex;flex-wrap:wrap;gap:8px}
.meta .m{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:var(--surface-raised);border:1px solid var(--line);font-size:14px}

.art-layout{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px 64px;padding-top:40px;padding-bottom:96px}
html.show--consent .guide-page .art-layout{padding-bottom:calc(var(--bk-cc-h,82px) + 96px)}
.art-toc{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:15px;position:sticky;top:24px}
.art-toc b{font-size:14px;color:var(--ink-muted);margin-bottom:6px}
.art-toc a{text-decoration:none;padding:4px 0 4px 12px;border-left:2px solid var(--line);color:var(--ink-muted);min-height:36px;display:flex;align-items:center}
.art-toc a:hover{color:var(--ink);opacity:1}
.art-doc{flex:999 1 560px;min-width:0;max-width:720px;display:flex;flex-direction:column;gap:16px;line-height:1.75}
.art-doc h2{font-size:24px;line-height:1.4;font-weight:700;margin-top:24px;scroll-margin-top:16px}
.art-doc>h2:first-child{margin-top:0}
.art-doc a{text-underline-offset:3px}
.art-doc .g-list{padding-left:22px;display:flex;flex-direction:column;gap:8px}
.art-doc .g-list li{list-style:disc}
.art-doc .g-steps{display:flex;flex-direction:column;gap:18px;counter-reset:gstep}
.art-doc .g-steps li{position:relative;padding-left:52px;min-height:36px;counter-increment:gstep}
.art-doc .g-steps li::before{content:counter(gstep);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--pop);color:var(--on-pop);font-weight:700;font-size:17px;line-height:36px;text-align:center;font-variant-numeric:tabular-nums}
.limit{background:var(--butter);color:var(--ink);border-radius:16px;padding:12px 16px;font-size:16px;line-height:1.6}

.g-table-wrap{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--surface-raised)}
.g-table-wrap table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.6}
.g-table-wrap th,.g-table-wrap td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--line)}
.g-table-wrap thead th{font-weight:700;border-bottom-width:2px}
.g-table-wrap tbody th{font-weight:600}
.g-table-wrap tbody tr:last-child>*{border-bottom:0}

/* copy-to-clipboard example (club etiquette). The button is hidden until guide.js runs, so without JS the text is still selectable. */
.copybox{background:var(--surface-raised);border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-soft)}
.copy-text{white-space:pre-wrap;font-size:17px;line-height:1.8;-webkit-user-select:all;user-select:all}
.copy-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.copy-btn[hidden]{display:none}
.copy-status{min-height:1.5em}

.g-next{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.g-next h2{margin-top:0}
.next{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.next a{display:flex;flex-direction:column;gap:2px;min-height:72px;justify-content:center;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:var(--surface-raised);text-decoration:none}
.next a>span{font-size:13px;color:var(--ink-muted)}
.next a b{font-size:16px;line-height:1.45;font-weight:600}
.next a:hover{opacity:1;border-color:var(--ink-muted)}
.g-endnote{margin-top:8px}

.guide-cta{margin-top:24px;padding:36px;border-radius:28px;gap:24px}
.guide-cta .h2{font-size:30px}
.guide-cta>img{width:140px;height:auto}

/* /guide/ index */
.g-index{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.g-index li{border-bottom:1px solid var(--line)}
.g-card{display:flex;align-items:center;gap:12px;min-height:56px;padding:16px 0;text-decoration:none}
.g-card .t{flex:1;min-width:0}
.g-card b{display:block;font-size:18px;line-height:1.45;font-weight:600}
.g-card .t>span{display:block;font-size:15px;line-height:1.6;color:var(--ink-muted)}
.g-card svg{flex:none;color:var(--ink-muted)}
.g-card:hover{opacity:1}
.g-card:hover b{text-decoration:underline;text-underline-offset:3px}

@media (max-width:820px){
.art-hero{padding:24px 0}
.art-hero h1{font-size:30px}
.art-toc{display:none}
.art-layout{padding-top:28px;padding-bottom:64px}
.art-doc h2{font-size:21px}
.guide-cta{padding:28px 24px}
.guide-cta .h2{font-size:26px}
.g-table-wrap th,.g-table-wrap td{padding:12px 10px}
.g-table-wrap table{font-size:14px}
}
@media (max-width:600px){
.art-hero-art{display:none}
.guide-cta>img{display:none}
}
/* /guide/ index (G0): intro, two titled groups, footer block with the about link */
.g-intro{font-size:18px;line-height:1.7;margin:0 0 8px}
.art-doc .g-intro+h2,.art-doc .g-index+h2{margin-top:32px}
.art-doc h2+.g-index{margin-top:8px}
.g-about{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--on-band);text-decoration:underline;text-underline-offset:3px;font-weight:600}