/* /capabilities: overview page. Shared parts only: .page-hero, .sec-head, .tile and .framed cards, .diagram-frame (dg.css), the shared section stepper (rail.css), .rm-sub, .btn, .m-rise. The diagrams are static inline SVG (tools/capdiagram-render.mjs); nothing moves on its own. */

/* hero */
.cv-sub { max-width: 62ch; text-wrap: balance; }
.cv-stats { width: 100%; max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; }
.cv-stat { display: grid; align-content: start; gap: .25rem; padding: 18px 20px; }
.cv-stat:hover { transform: none; }
.cv-stat__n { font: 600 clamp(2rem, 1.2rem + 2.6vw, 3.1rem)/1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; width: fit-content; background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cv-stat__l { color: var(--text); font-size: var(--text-body-size); line-height: 1.35; }
.cv-stat__s { color: var(--text-faint); font-size: var(--text-small-size); }
.cv-note { margin: 0; max-width: none; }
.cv-browse { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1rem; }
.cv-stat { position: relative; }
.cv-stat__a { display: grid; align-content: start; gap: .25rem; color: inherit; text-decoration: none; }
.cv-stat__a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.cv-stat__a:focus-visible { outline: none; }
.cv-stat__a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 3px; }
.cv-stat:hover { border-color: var(--border-hover); }

/* layout: the section stepper is the shared component (rail.css); the content column is untouched */
.cv-shell { display: block; }
.cv-body section[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

.cv-head .cv-lede { max-width: 70ch; }
.cv-sec + .cv-sec { padding-top: clamp(1rem, 2vw, 2rem); }

/* diagrams: wide and narrow drawings in one figure, the container width picks one (a container query, no script) */
.cv-fig { margin: 0; container-type: inline-size; padding: 12px; padding-top: calc(12px + 28px); min-width: 0; }
.cv-fig--p { padding: var(--dg-pad, 20px); padding-top: calc(var(--dg-pad, 20px) + 28px); }
.cd { display: block; width: 100%; height: auto; margin-inline: auto; overflow: visible; }
.cd--n { display: none; }
.cd--w { max-width: 640px; }
.cv-fig--p .cd--w { max-width: 1060px; }
@container (max-width: 599px) { .cv-fig--g .cd--w { display: none; } .cv-fig--g .cd--n { display: block; max-width: 304px; } }
@container (max-width: 959px) { .cv-fig--p .cd--w { display: none; } .cv-fig--p .cd--n { display: block; max-width: 304px; } }
.cd text { font-family: var(--font); fill: var(--text-dim); }
.cd-nm { fill: var(--text); font-size: 14px; font-weight: 600; }
.cd-sb { fill: var(--text-dim); font-size: 12.5px; font-weight: 400; }
.cd-num { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .06em; fill: var(--text-faint); }
.cd-lab { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .08em; fill: var(--text-faint); }
.cd-lb { font-family: var(--mono); font-size: 12.5px; fill: var(--text-dim); }
.cd-ct { font-family: var(--mono); font-size: 12.5px; font-weight: 500; fill: var(--text); }
.cd-bt { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; fill: var(--brand-red); }
.cd-n rect, .cd-c rect, .cd-colbg { fill: var(--surface-2); stroke: var(--border-hover); stroke-width: 1; }
.cd-colbg { fill: color-mix(in srgb, var(--surface-1) 85%, transparent); stroke: var(--border); }
.cd-n--core rect, .cd-c--core rect { fill: color-mix(in srgb, var(--brand-magenta) 14%, var(--surface-1)); stroke: var(--brand-magenta); stroke-width: 1.4; }
.cd-n--ver rect, .cd-c--ver rect { stroke: var(--brand-blue); stroke-width: 1.4; }
.cd-n--amber rect { stroke: var(--brand-amber); }
.cd-n--red rect { stroke: var(--brand-red); stroke-width: 1.4; }
.cd-blk rect { fill: transparent; stroke: var(--brand-red); stroke-width: 1; }
.cd-e { fill: none; stroke: var(--text-faint); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.cd-ah { fill: var(--text-faint); stroke: var(--text-faint); stroke-width: 1; stroke-linejoin: round; }
.cd-e--blue, .cd-ah.cd-e--blue { stroke: var(--brand-blue); }
.cd-e--red, .cd-ah.cd-e--red { stroke: var(--brand-red); }
.cd-ah.cd-e--blue { fill: var(--brand-blue); } .cd-ah.cd-e--red { fill: var(--brand-red); }
.cd-dash { stroke-dasharray: 4 4; }
.cd-top { fill: none; stroke-width: 2; stroke-linecap: round; }
.cd-k1 .cd-top { stroke: var(--brand-amber); } .cd-k2 .cd-top { stroke: var(--brand-orange); } .cd-k3 .cd-top { stroke: var(--brand-red); } .cd-k4 .cd-top { stroke: var(--brand-magenta); } .cd-k5 .cd-top { stroke: var(--brand-blue); }
.cd-found .cd-nm { fill: var(--text); }
.cd--n .cd-nm { font-size: 14px; } .cd--n .cd-sb { font-size: 13px; } .cd--n .cd-num, .cd--n .cd-lab, .cd--n .cd-lb, .cd--n .cd-ct { font-size: 13px; } .cd--n .cd-bt { font-size: 12px; }
:root[data-theme="light"] .cd-bt { fill: var(--bad-on-light); }

/* path: three ideas */
.cv-ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 14px 0 0; padding: 0; }
.cv-idea { align-content: start; }
.cv-idea:hover, .cv-why:hover, .cv-card:hover { transform: none; }
.cv-idea__k { font: 500 var(--text-small-size)/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.cv-idea__k i { font-style: normal; color: var(--brand-orange); }
.cv-idea h3 { text-wrap: balance; }

/* groups */
.cv-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cv-g { min-width: 0; content-visibility: auto; contain-intrinsic-size: auto 520px; }
.cv-card { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 1.25rem clamp(1.25rem, 2.4vw, 2.25rem); align-items: center; padding: clamp(1.1rem, 2vw, 1.75rem); }
.cv-card__txt { display: grid; gap: .7rem; align-content: start; min-width: 0; }
.cv-card__txt > * { margin: 0; }
.cv-num { font: 600 1.5rem/1 var(--mono); letter-spacing: .04em; background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cv-card__p { color: var(--text-dim); line-height: 1.6; }
.cv-chips { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: .2rem 0 0; }
.cv-chips li { padding: .22rem .7rem; border: 1px solid var(--border-hover); border-radius: 999px; background: rgba(255, 255, 255, .03); color: var(--text-dim); font-size: .8125rem; line-height: 1.4; }
.cv-g:nth-child(1) .cv-num { background-image: linear-gradient(90deg, #FBBA02, #FC6A02); } .cv-g:nth-child(2) .cv-num { background-image: linear-gradient(90deg, #FC6A02, #F81530); }
.cv-g:nth-child(3) .cv-num { background-image: linear-gradient(90deg, #F81530, #C02E62); } .cv-g:nth-child(4) .cv-num { background-image: linear-gradient(90deg, #F81530, #C02E62); }
.cv-g:nth-child(5) .cv-num { background-image: linear-gradient(90deg, #C02E62, #5A5DCB); } .cv-g:nth-child(6) .cv-num { background-image: linear-gradient(90deg, #C02E62, #5A5DCB); }
.cv-g:nth-child(7) .cv-num { background-image: linear-gradient(90deg, #5A5DCB, #0189FD); } .cv-g:nth-child(8) .cv-num { background-image: linear-gradient(90deg, #5A5DCB, #0189FD); }
.cv-g:nth-child(9) .cv-num, .cv-g:nth-child(10) .cv-num { background-image: linear-gradient(90deg, #5A5DCB, #0189FD); }

/* why */
.cv-whys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.cv-why { align-content: start; padding: 18px; }
.cv-why h3 { font-size: 1rem; line-height: 1.3; text-wrap: balance; }
.cv-why p { font-size: .875rem; line-height: 1.55; }
.cv-why__n { font: 600 1.25rem/1 var(--mono); color: var(--text-faint); }
.cv-claim { display: grid; gap: .6rem; margin-top: 14px; padding: 18px 22px; border-radius: var(--r-panel); --fx: 0%; --fy: 100%; --fc1: var(--framed-orange); --fc2: var(--framed-blue); }
.cv-claim p { margin: 0; max-width: 90ch; }
.cv-claim__a { color: var(--text); }
.cv-claim__b { color: var(--text-dim); }

/* close */
.cv-close { padding-top: clamp(1rem, 2vw, 2rem); }
.cv-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 20px 24px; border-radius: var(--r-panel); --fx: 100%; --fy: 0%; --fc1: var(--framed-orange); --fc2: var(--framed-blue); }
.cv-end__t { margin: 0; color: var(--text-dim); }

@media (max-width: 75rem) { .cv-whys { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 62rem) {
  .cv-card { grid-template-columns: minmax(0, 1fr); }
  .cv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-ideas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) { .cv-whys { grid-template-columns: minmax(0, 1fr); } .cv-end { align-items: flex-start; } .cv-chips li { font-size: .875rem; } }