/* maturity.network base: type, links and the shared components. Load after /css/tokens_v2.css.
   INS-113 (v0.28.0): was /brand-tokens.css. Its token block is gone; every colour, radius and family here
   is a tokens_v2 token. Icons are inline SVG (Phosphor, MIT), so nothing loads from other CDNs.
   Type: shell, copy and titles are Inter (--f-body) and Manrope (--f-display). Heebo (--f-data) is for
   data surfaces only. Arial is only ever the declared fallback. */

*{box-sizing:border-box}
/* html carries the family too: without it the root element computes to the browser default (Times New Roman). */
html{font-family:var(--f-body),Arial,sans-serif;background:var(--page);color:var(--ink)}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--f-body),Arial,sans-serif;font-weight:400;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
/* Form controls do not inherit type by default, which is where the stray Arial came from. */
button,input,select,textarea,optgroup{font:inherit;color:inherit}
select{background-color:var(--page)}
h1,h2,h3,h4{font-family:var(--f-display),Arial,sans-serif;font-weight:700;margin:0;letter-spacing:-.025em}
h1{font-size:44px;line-height:1.1;letter-spacing:-.04em}
h2{font-size:26px;line-height:1.2}
h3{font-size:20px;line-height:1.25}
p{margin:0;font-size:15px;line-height:1.6;color:var(--muted);text-wrap:pretty}
/* Links: never underlined. A small right arrow after the text is the indicator (.arr, aria-hidden). */
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--muted)}
.arr{display:inline-block;margin-left:.3em;font-weight:400;transition:transform .15s}
a:hover .arr{transform:translateX(2px)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Surfaces */
.mn-card{border:1px solid var(--line);border-radius:var(--r-card);padding:22px;background:var(--page)}
.mn-callout{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--r-card);background:var(--vanilla);border:1px solid var(--vanillaline);color:var(--ink)}

/* Data marks: lightness ladder, light to dark: track, band, you. */
.mn-bar{position:relative;height:6px;border-radius:3px;background:var(--track)}
.mn-bar > span{position:absolute;inset:0 auto 0 0;border-radius:3px}          /* width set inline */
.fill-avg{background:var(--trend)} .fill-band{background:var(--band)} .fill-you{background:var(--raccoon)}
.mn-quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mn-quad-box{display:flex;flex-direction:column;padding:22px;border-radius:var(--r-card);border:1px solid var(--line);background:var(--surface)}

/* Ranked list (peer stall / ready) */
.mn-rank-row{display:grid;grid-template-columns:40px minmax(0,1fr) 44px;align-items:center;column-gap:10px;row-gap:6px;padding:10px 0;border-top:1px solid var(--grid)}
.mn-rank-row .id{font-family:var(--f-data),Arial,sans-serif;font-size:13px;font-weight:600;color:var(--data-label)}
.mn-rank-row .name{font-size:14px;line-height:1.4;color:var(--ink)}
.mn-rank-row .pct{font-family:var(--f-data),Arial,sans-serif;font-size:14px;font-weight:600;text-align:right}
.mn-rank-row .mn-bar{grid-column:2;height:5px}