/* Capabilities: a catalogue of questions, not a tile wall. One heading leads,
   the readiness boundary sits directly under it, then each question is a
   section with short answers and one next action. Platform tokens only. */
.cap-heading{padding-block-end:28px;border-block-end:1px solid var(--platform-line)}
.cap-heading .page-title{font-size:clamp(32px,4.2vw,52px);letter-spacing:-.035em;max-inline-size:20ch}
/* R2: the boundary is stated in one line beside the introduction, so the first
   question stays in the initial phone view; the full card follows the questions. */
.cap-qualify{margin:10px 0 0;color:var(--platform-dim);font-size:14px;line-height:1.5;max-inline-size:65ch}
.cap-qualify a{color:var(--platform-accent);text-underline-offset:3px;font-weight:600;white-space:nowrap}
.cap-qualify a:focus-visible,.cap-readiness:focus-visible{outline:2px solid var(--platform-accent);outline-offset:2px}
.cap-actions{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:20px}
.cap-actions .btn{text-decoration:none;min-block-size:44px;padding-inline:16px}
/* Light theme only: page.css lightens the primary toward the page ground on
   hover, which drops its label to 4.03:1. Deepen toward ink instead, so hover
   reads as a press and the label stays above AA. Dark theme is unchanged. */
:root[data-theme="light"] .cap-actions .btn.is-go:hover{background:color-mix(in srgb,var(--platform-accent) 84%,var(--platform-ink))}
.cap-readiness{margin-block:28px 8px;scroll-margin-block-start:96px;padding:16px 18px;border:1px solid var(--platform-line);
  border-inline-start:3px solid var(--platform-warn);border-radius:var(--platform-radius);background:var(--platform-panel)}
.cap-readiness h2,.cap-limits h2{margin:0 0 6px;font-size:16px;font-weight:600}
.cap-readiness p{margin:0;color:var(--platform-dim);font-size:14px;line-height:1.6;max-inline-size:80ch}
.cap-readiness a,.cap-list a,.cap-next{color:var(--platform-accent);text-underline-offset:3px}
.cap-sections{display:grid;gap:0}
.cap-section{border-block-end:1px solid var(--platform-line)}
/* ENF-871 B: each question is a native disclosure. The summary is the whole
   row (a 44px+ target), the chevron turns when open, and the body holds the
   descriptions and links that used to be shown all at once. */
.cap-disclosure>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;min-block-size:56px;padding-block:14px;border-radius:var(--platform-radius)}
.cap-disclosure>summary::-webkit-details-marker{display:none}
.cap-disclosure>summary::after{content:"";inline-size:9px;block-size:9px;flex:none;border-inline-end:2px solid var(--platform-dim);border-block-end:2px solid var(--platform-dim);transform:rotate(-45deg)}
.cap-disclosure[open]>summary::after{transform:rotate(45deg)}
.cap-disclosure>summary:hover h2{color:var(--platform-accent)}
.cap-disclosure>summary:focus-visible{outline:2px solid var(--platform-accent);outline-offset:2px}
.cap-section h2{margin:0;font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.01em;min-inline-size:0;overflow-wrap:anywhere}
.cap-count{margin-inline-start:auto;flex:none;font:500 12px var(--platform-mono);color:var(--platform-dim)}
.cap-body{display:grid;gap:14px;padding-block:4px 24px}
.cap-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cap-list li{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:16px;align-items:baseline}
.cap-list a{font-weight:600;font-size:14px;min-block-size:24px;display:inline-flex;align-items:center}
.cap-list p{margin:0;color:var(--platform-dim);font-size:14px;line-height:1.55}
.cap-next{justify-self:start;font-size:13px;font-weight:600;min-block-size:24px;display:inline-flex;align-items:center}
.cap-section :is(a):focus-visible,.cap-readiness a:focus-visible{outline:2px solid var(--platform-accent);outline-offset:2px}
/* ENF-1106 UX baseline: Insights sections are plain (not disclosures), so they get their
   own breathing room, and each destination link a 44px touch height. Scoped to #insights;
   the Capabilities disclosures above are unchanged. */
#insights .cap-section{padding-block:16px}
#insights .cap-section h2{margin-block-end:8px}
#insights .cap-list a{min-block-size:44px}
.cap-limits{margin-block-start:28px}
.cap-limits ul{margin:0;padding-inline-start:18px;color:var(--platform-dim);font-size:14px;line-height:1.7}
@media(max-width:760px){
  .cap-section h2{font-size:17px}
  .cap-list li{grid-template-columns:minmax(0,1fr);gap:2px}
  /* Phone: tighter rhythm only, text sizes unchanged. */
  .cap-heading{padding-block-end:12px}
  .cap-heading .eyebrow{margin-block-end:4px}
  .cap-heading .page-title{margin-block:0 8px;line-height:1.1}
  .cap-heading .prose{margin-block:0}
  .cap-actions{gap:8px;margin-block-start:14px}
  .cap-actions .btn{min-block-size:44px;padding-block:0}
}