/* Guide pages (tools/build_pages.py) on top of landing.css. Design plan:
   docs/superpowers/specs/2026-11-05-guide-pages-v4-design.md. One bold element: the key board. */
.guide-hero{padding:22px 0 56px;display:grid;gap:22px}
.crumbs{font-size:.9rem;color:var(--band-mute)}
.crumbs a{color:var(--band-mute);text-decoration:none}
.crumbs a:hover{color:var(--band-ink);text-decoration:underline}
.guide-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.02;margin:0;max-width:18ch}
.guide-hero .sub{color:var(--band-mute);font-size:1.08rem;max-width:58ch;margin:0}
.answer{max-width:680px;grid-area:auto}
.answer .tags{min-height:0}
.answer .small{margin:16px 0 0;max-width:60ch}
.tag.down .body{background:var(--cost)}
.tag.flat .body{background:#3a4c58}
.guide .story{padding-top:56px}
.guide .story h2{font-size:clamp(1.4rem,3vw,1.9rem)}
.guide .story p{max-width:64ch}
.guide .bars .lab small{color:var(--mute);font-size:.82rem;margin-left:6px}
.bars li.neg .bar i{background:var(--neg)}
.dt{width:100%;border-collapse:collapse;font-size:.92rem}
.dt th,.dt td{padding:9px 8px;border-bottom:1px solid var(--rule);text-align:right;vertical-align:top}
.dt th:first-child,.dt td:first-child{text-align:left}
.dt thead th{font:600 .82rem var(--head);color:var(--mute)}
.dt td.up{color:var(--pos);font-weight:600;background:color-mix(in srgb,var(--pos) 12%,transparent)}
.dt td.down{color:var(--neg);font-weight:600;background:color-mix(in srgb,var(--neg) 12%,transparent)}
.dt td.none{color:var(--mute)}
.dt td:not(:first-child){white-space:nowrap}
.dt td:first-child,.dt th{hyphens:auto;-webkit-hyphens:auto}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.types{margin:0;display:grid;grid-template-columns:minmax(9em,auto) 1fr;gap:10px 18px}
.types dt{font:600 .98rem var(--head)}
.types dd{margin:0;color:var(--mute)}
@media (max-width:520px){.types{grid-template-columns:1fr;gap:2px}.types dd{margin-bottom:10px}
  .dt{font-size:.8rem}.dt th,.dt td{padding:8px 4px}}
.inline-cta{margin:30px 0 0;padding-left:14px;border-left:3px solid var(--brass);max-width:62ch}
.inline-cta a{font-weight:600;color:var(--ink)}
.guide .faq{padding-top:64px}
.guide-list{list-style:none;padding:0;margin:0;display:grid;gap:22px;max-width:70ch}
.guide-list a{font:800 1.25rem/1.2 var(--head);color:var(--ink);text-decoration:none}
.guide-list a:hover{text-decoration:underline}
.guide-list p{margin:6px 0 0;color:var(--mute)}
.guide .related{padding-top:48px}
.related ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.related a{font-weight:600;color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}