/* content.css -- the crawlable intro under the home menu and the static content
   pages (/how-to-play, /features, /about). Unlayered, every selector new and
   cp- prefixed, tokens only (tokens.css). Nothing here can match menu markup. */
.cp-intro{background:var(--bg);border-top:1px solid var(--line);color:var(--dim);font-family:var(--sans)}
.cp-page{min-height:100vh;min-height:100dvh;border-top:0}
.cp-wrap{max-width:760px;margin:0 auto;padding-block:var(--sp-7);padding-inline:20px;line-height:1.6;font-size:14px}
.cp-h1{color:var(--fg);font-size:20px;font-weight:600;letter-spacing:-.01em;margin:0 0 var(--sp-3)}
.cp-h2{color:var(--fg);font-size:16px;font-weight:600;margin:var(--sp-6) 0 var(--sp-2);scroll-margin-top:var(--sp-4)}
.cp-wrap p{margin:0 0 var(--sp-3)}
.cp-wrap strong{color:var(--fg);font-weight:600}
.cp-list{padding-left:1.25rem;margin:0 0 var(--sp-4)}
.cp-list li{margin-bottom:var(--sp-1)}
.cp-table-wrap{overflow-x:auto;margin:0 0 var(--sp-4)}
.cp-table{border-collapse:collapse;font-size:13px}
.cp-table th,.cp-table td{border:1px solid var(--line);padding:var(--sp-1) var(--sp-3);text-align:left}
.cp-table th{color:var(--fg);font-weight:600}
.cp-links{display:flex;flex-wrap:wrap;gap:var(--sp-4);border-top:1px solid var(--line);padding-top:var(--sp-4);margin-top:var(--sp-5)}
.cp-wrap a:not(.dsf-btn){color:var(--acc);text-decoration:none}
.cp-wrap a:not(.dsf-btn):hover{color:var(--acc-hover)}
/* The CTA keeps the kit button's own colours (.dsf-btn.pri): an unlayered link colour
   would beat the layered button rule and paint accent text on an accent fill. */
.cp-cta{display:inline-block;margin-top:var(--sp-4);text-decoration:none}
.cp-note{font-size:12px;color:var(--dim)}