/* ---------------------------------------------------------------- tokens ---
   Cool, quiet neutrals and a single turquoise accent: deep #076663 on
   white clears AA as ordinary text; the dark accent #2AAFAF is the same
   hue at depth. Turquoise deliberately: green and orange already carry
   meaning in the severity chips, and the accent must never read as a
   verdict.

   Coverage severity stays a SEPARATE scale from the accent — a payout ratio's
   status is information, not decoration — and each severity colour is dark
   enough to read as text on its own tinted chip.                            */
:root{
  color-scheme:light;
  --ground:#F7F7F7; --surface:#FFFFFF; --surface-2:#F0F0F0; --surface-3:#E6E6E6;
  --line:#DCDCDC; --line-soft:#EAEAEA;
  --ink:#161616; --ink-2:#494949; --ink-3:#606060;
  --accent:#086A68; --on-accent:#FFFFFF; --accent-ink:#076663;
  --accent-soft:rgba(8,106,104,.08); --accent-line:rgba(8,106,104,.34);
  --ok:#0C7A3E;    --ok-bg:rgba(12,122,62,.13);
  --mid:#716B00;   --mid-bg:rgba(113,107,0,.12);
  --tight:#B34A00; --tight-bg:rgba(179,74,0,.13);
  --over:#C1271F;  --over-bg:rgba(193,39,31,.13);
  --peer:#7A4AD6;  --peer-bg:rgba(122,74,214,.09);
  --dir:#C81E68;   --dir-bg:rgba(200,30,104,.09);
  --stab:#0369A1;  --stab-bg:rgba(3,105,161,.10);
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 12px 28px -24px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#0A0A0A; --surface:#141414; --surface-2:#1B1B1B; --surface-3:#242424;
    --line:#2C2C2C; --line-soft:#202020;
    --ink:#ECECEC; --ink-2:#A9A9A9; --ink-3:#8F8F8F;
    --accent:#35BDB8; --on-accent:#0A0A0A; --accent-ink:#2AAFAF;
    --accent-soft:rgba(53,189,184,.10); --accent-line:rgba(53,189,184,.34);
    --ok:#4ADE87;    --ok-bg:rgba(74,222,135,.16);
    --mid:#E9DC4F;   --mid-bg:rgba(233,220,79,.13);
    --tight:#FB9B54; --tight-bg:rgba(251,155,84,.16);
    --over:#F87168;  --over-bg:rgba(248,113,104,.16);
    --peer:#CDBAF8;  --peer-bg:rgba(205,186,248,.14);
    --dir:#F7A0CC;   --dir-bg:rgba(247,160,204,.14);
    --stab:#38BDF8;  --stab-bg:rgba(56,189,248,.14);
    --shadow:0 1px 0 rgba(255,255,255,.03), 0 16px 34px -28px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0A0A0A; --surface:#141414; --surface-2:#1B1B1B; --surface-3:#242424;
  --line:#2C2C2C; --line-soft:#202020;
  --ink:#ECECEC; --ink-2:#A9A9A9; --ink-3:#8F8F8F;
  --accent:#35BDB8; --on-accent:#0A0A0A; --accent-ink:#2AAFAF;
  --accent-soft:rgba(53,189,184,.10); --accent-line:rgba(53,189,184,.34);
  --ok:#4ADE87;    --ok-bg:rgba(74,222,135,.16);
  --mid:#E9DC4F;   --mid-bg:rgba(233,220,79,.13);
  --tight:#FB9B54; --tight-bg:rgba(251,155,84,.16);
  --over:#F87168;  --over-bg:rgba(248,113,104,.16);
  --peer:#CDBAF8;  --peer-bg:rgba(205,186,248,.14);
  --dir:#F7A0CC;   --dir-bg:rgba(247,160,204,.14);
  --stab:#38BDF8;  --stab-bg:rgba(56,189,248,.14);
  --shadow:0 1px 0 rgba(255,255,255,.03), 0 16px 34px -28px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 16.5px/1.65 "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{max-width:70rem;margin:0 auto;padding:0 1.5rem 5rem}

/* ------------------------------------------------------------------ type --- */
h1,h2,h3{font-family:"DM Sans","Inter",sans-serif;font-weight:700;
  letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
.brand,.sp,.pl-price{font-family:"DM Sans","Inter",sans-serif}
h1{font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.15;margin:.2em 0 .5em}
h2{font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.3;margin:2.8rem 0 .8rem}
h3{font-size:1.06rem;margin:1.9rem 0 .5rem}
p{margin:0 0 1.05rem;max-width:66ch}
.lede{font-size:1.12rem;line-height:1.6;color:var(--ink-2);max-width:58ch}
a{color:var(--accent-ink);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{text-decoration-thickness:.12em}
strong{font-weight:600}
code{font:500 .87em/1 "DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--surface-2);padding:.16em .42em;border-radius:4px;color:var(--ink-2)}
hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
ul{padding-left:1.15rem;max-width:66ch}
li{margin:.4rem 0}
blockquote{margin:1.4rem 0;padding:1rem 1.2rem;background:var(--accent-soft);
  border-left:3px solid var(--accent-line);border-radius:0 10px 10px 0;
  color:var(--ink-2);max-width:66ch}
blockquote strong{color:var(--ink)}
blockquote p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- header --- */
.top{max-width:70rem;margin:0 auto;padding:1.4rem 1.5rem 1.1rem;
  display:flex;gap:.9rem;align-items:baseline;flex-wrap:wrap;
  border-bottom:1px solid var(--line-soft)}
.brand{font-weight:700;font-size:1.18rem;color:var(--ink);text-decoration:none;
  letter-spacing:-.02em}
.tag{color:var(--ink-3);font-size:.86rem}
.nav{margin-left:auto}
.mainnav{flex-basis:100%;display:flex;flex-wrap:wrap;gap:1.1rem;
  margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line-soft)}
.mainnav a{font-size:.9rem;font-weight:500;text-decoration:none;color:var(--ink-2)}
.mainnav a:hover{color:var(--accent-ink)}
.mainnav a[aria-current=page]{color:var(--accent-ink);font-weight:600}
.nav a{font-size:.88rem;text-decoration:none;color:var(--ink-2);
  padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px}
.nav a:hover{border-color:var(--accent-line);color:var(--accent-ink)}

/* ------------------------------------------------------------------ hero --- */
.hero{padding:2.2rem 0 1.4rem;border-bottom:1px solid var(--line-soft)}
.counts{font-size:.94rem;color:var(--ink-3);margin-top:1.1rem}
.counts strong{color:var(--accent-ink);font-variant-numeric:tabular-nums;font-weight:600}

/* ----------------------------------------------------------------- cards --- */
.cards{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr))}
.card{display:grid;gap:.2rem;padding:1.1rem 1.25rem;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;text-decoration:none;color:inherit;
  box-shadow:var(--shadow);transition:border-color .15s ease,transform .15s ease}
.card:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.tk{font:500 .78rem/1 "DM Mono",monospace;color:var(--accent-ink);letter-spacing:.05em}
.co{font-size:.9rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;
  font-variant-numeric:tabular-nums}
.sp small{font-size:.68rem;font-weight:500;color:var(--ink-3);margin-left:.4rem}
.ago{font-size:.76rem;color:var(--ink-3);margin-top:.15rem}

/* --------------------------------------------------------------- sectors --- */
.secs{display:flex;flex-wrap:wrap;gap:.5rem}
.sec{display:inline-flex;align-items:baseline;gap:.45rem;
  padding:.42rem .85rem;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;text-decoration:none;color:var(--ink);font-size:.9rem}
.sec:hover{border-color:var(--accent-line)}
.sec small{color:var(--ink-3);font-variant-numeric:tabular-nums}
.note{margin-top:1.3rem;padding:1rem 1.2rem;background:var(--over-bg);
  border-radius:10px;font-size:.94rem;max-width:none;color:var(--ink-2)}
.note strong{color:var(--over)}

/* --------------------------------------------------------------- toolbar ---
   One surface for every control. appearance:none matters: without it Safari
   and iOS draw native white selects and buttons whatever the palette says,
   which is how the dark toolbar shipped with light controls.               */
.toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
  margin:1.1rem 0 .3rem;padding:.65rem;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  position:sticky;top:.6rem;z-index:30}
.toolbar input,.toolbar select,.toolbar button{appearance:none;-webkit-appearance:none;
  font:inherit;font-size:.92rem;height:2.5rem;color:var(--ink);
  background-color:var(--surface-2);border:1px solid transparent;border-radius:10px;
  padding:0 .85rem;margin:0}
.toolbar input{flex:1 1 16rem;min-width:12rem}
.toolbar input::placeholder{color:var(--ink-3)}
.toolbar select{cursor:pointer;padding-right:2.1rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23909398' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center}
.toolbar button{cursor:pointer}
.toolbar .tgl{border-radius:999px;color:var(--ink-2)}
.toolbar .tgl[aria-pressed="true"]{background-color:var(--accent);color:var(--on-accent)}
.toolbar .ghost{background:transparent;color:var(--ink-3);padding:0 .6rem}
.toolbar .ghost:hover{color:var(--accent-ink)}
.toolbar :is(input,select,button):hover{border-color:var(--line)}
.toolbar :is(input,select,button):focus-visible{outline:2px solid var(--accent-line);
  outline-offset:1px;border-color:var(--accent)}
.toolbar .rng{display:flex;align-items:center;gap:.45rem;font-size:.88rem;
  color:var(--ink-2);padding:0 .5rem;white-space:nowrap}
.toolbar .rng b{font-variant-numeric:tabular-nums;min-width:1.6em;text-align:right;
  color:var(--accent-ink)}
.toolbar input[type=range]{appearance:none;-webkit-appearance:none;width:7.5rem;
  height:.3rem;background:var(--surface-3);border-radius:999px;border:0;padding:0}
.toolbar input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;
  width:1.05rem;height:1.05rem;border-radius:50%;background:var(--accent);
  border:2px solid var(--surface);box-shadow:var(--shadow);cursor:pointer}
.toolbar input[type=range]::-moz-range-thumb{width:1rem;height:1rem;border-radius:50%;
  background:var(--accent);border:2px solid var(--surface);cursor:pointer}
.toolbar .count{margin-left:auto;padding:0 .5rem;color:var(--ink-3);font-size:.85rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:46rem){
  .toolbar input{flex-basis:100%}
  .toolbar .count{flex-basis:100%;text-align:right;padding:.1rem .2rem 0}
}

/* ---------------------------------------------------------------- tables --- */
.tw{overflow-x:auto;margin:1.1rem 0;border:1px solid var(--line);border-radius:14px;
  background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{padding:.64rem .9rem;text-align:left;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
thead th{font-size:.71rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);font-weight:600;background:var(--surface-2);
  position:sticky;top:var(--tbh,0px);z-index:20;
  position:sticky;top:0;z-index:1}
tbody tr:last-child td{border-bottom:0}
tbody tr:not(.applies):hover{background:var(--surface-2)}
tbody tr.applies{background:var(--accent-soft)}
tbody tr.applies:hover{background:var(--accent-soft)}
tbody tr.applies td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tbody tr.applies td{font-weight:500}
td.t a{font:500 .86rem/1 "DM Mono",monospace;text-decoration:none;letter-spacing:.04em}
td.muted{color:var(--ink-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.num.wide{color:var(--accent-ink);font-weight:600}
thead th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap}
thead th[data-sort]:hover{color:var(--ink)}
thead th[aria-sort]{color:var(--accent-ink)}
thead th[aria-sort="ascending"]::after{content:"91";margin-left:.3rem}
thead th[aria-sort="descending"]::after{content:"93";margin-left:.3rem}

/* Coverage severity — encoded in form, not only in the digits. */
.pay{display:inline-block;padding:.1rem .45rem;border-radius:5px;font-weight:600;
  font-variant-numeric:tabular-nums}
.pay-ok{color:var(--ok);background:var(--ok-bg)}
.pay-mid{color:var(--mid);background:var(--mid-bg)}
.pay-tight{color:var(--tight);background:var(--tight-bg)}
.pay-over{color:var(--over);background:var(--over-bg)}
.pay-neg{color:var(--over);background:var(--over-bg)}

/* rating chip + method icon */
.qm{display:inline-flex;align-items:center;justify-content:center;width:1.05rem;height:1.05rem;
  border-radius:50%;background:var(--surface-3);color:var(--ink-2);font-size:.7rem;
  font-weight:600;text-decoration:none;vertical-align:.08em;margin-left:.1rem}
.qm:hover{background:var(--accent);color:var(--on-accent)}
.rate{display:inline-block;padding:.12rem .5rem;border-radius:6px;font-weight:600;
  font-variant-numeric:tabular-nums}
.rate-comfortable{color:var(--ok);background:var(--ok-bg)}
.rate-adequate{color:var(--ok);background:var(--ok-bg)}
.rate-tight{color:var(--mid);background:var(--mid-bg)}
.rate-strained{color:var(--tight);background:var(--tight-bg)}
.rate-uncovered{color:var(--over);background:var(--over-bg)}

/* ------------------------------------------------------------------ page --- */
.page h1{font-size:clamp(1.4rem,3vw,2rem)}
.back{font-size:.9rem;margin-bottom:.5rem}
.back a{text-decoration:none;color:var(--ink-3)}
.back a:hover{color:var(--accent-ink)}

/* ---------------------------------------------------------------- footer --- */
.fnav-legal{margin-top:.4rem;font-size:.82rem;opacity:.72}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:1rem 0}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .5rem .3rem .65rem;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font:600 .85rem/1 var(--mono);letter-spacing:.02em}
.chip button{border:0;background:none;color:var(--ink);opacity:.55;cursor:pointer;
  font:inherit;padding:0 .15rem;line-height:1}
.chip button:hover{opacity:1;color:var(--over)}
footer{max-width:70rem;margin:0 auto;padding:2.2rem 1.5rem 4rem;
  border-top:1px solid var(--line);color:var(--ink-3);font-size:.88rem}
footer p{max-width:68ch;margin:0 0 .75rem}
footer strong{color:var(--ink-2)}
.stamp{font-variant-numeric:tabular-nums}

#themeToggle{width:2.1rem;height:2.1rem;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font-size:.95rem;cursor:pointer;
  margin-left:.5rem;vertical-align:middle;line-height:1}
#themeToggle:hover{border-color:var(--accent-line);color:var(--accent-ink)}
#themeToggle:focus-visible{outline:2px solid var(--accent-line);outline-offset:1px}
.nav{display:flex;align-items:center;gap:.4rem}

/* plans */
.plans{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(13rem,16rem));
  margin:1.6rem 0 .6rem}
.plan{position:relative;display:grid;gap:.15rem;padding:1.3rem 1.3rem 1.2rem;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.plan:hover{border-color:var(--accent-line)}
.plan.best{border-color:var(--accent)}
.pl-badge{position:absolute;top:-.65rem;right:1rem;font-size:.7rem;font-weight:600;
  padding:.15rem .55rem;border-radius:999px;background:var(--accent);color:var(--on-accent)}
.pl-price{font-size:2rem;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.pl-per{color:var(--ink-3);font-size:.9rem}
.pl-cta{margin-top:.8rem;text-align:center;padding:.55rem 0;border-radius:10px;
  background:var(--accent);color:var(--on-accent);font-weight:600;font-size:.95rem}
.fine{color:var(--ink-3);font-size:.85rem;max-width:none}
.nav .alink{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* ------------------------------------------------------- company pages ---
   The page is a sequence of small documents: identity, the four-way table,
   one summary card, then history and workings. Section heads step back into
   eyebrows so the numbers carry the hierarchy instead of competing with it. */
.co{display:flex;gap:1rem;align-items:center;margin:.4rem 0 1.4rem}
.co-tk{font:600 1.05rem/1 "DM Mono",monospace;letter-spacing:.04em;
  color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line);
  padding:.55rem .7rem;border-radius:12px;flex-shrink:0}
.co h1{font-size:1.55rem;margin:0;line-height:1.2}
.co-meta{margin:.25rem 0 0;font-size:.9rem;color:var(--ink-3)}
.co-meta a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.co-meta a:hover{color:var(--accent-ink);border-color:var(--accent-line)}
main h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-3);font-weight:600;margin:2.2rem 0 .7rem}
.page > p > em:only-child{font-size:.86rem;color:var(--ink-3);font-style:normal}
.page ul{padding-left:1.15rem}
.page li{margin:.4rem 0}
.page li::marker{color:var(--ink-3)}
.page code{font:.82rem "DM Mono",monospace;background:var(--surface-2);
  padding:.1rem .4rem;border-radius:6px}
.page hr{border:0;border-top:1px solid var(--line-soft);margin:2.2rem 0 1rem}
.page hr + p{font-size:.85rem;color:var(--ink-3)}
.sumr{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:1rem 1.15rem;display:grid;gap:.7rem;margin:1.2rem 0}
.sumr .spread,.sumr .rl,.sumr .hist-note{margin:0}
.spread{max-width:none}
details.why summary{list-style:none;cursor:pointer;display:inline-flex;
  font-size:.72rem;font-weight:600;letter-spacing:.05em;color:var(--ink-3);
  background:var(--surface-2);padding:.2rem .6rem;border-radius:999px;
  border:1px solid transparent;user-select:none}
details.why summary::-webkit-details-marker{display:none}
details.why summary:hover{color:var(--accent-ink);border-color:var(--accent-line)}
details.why[open] summary{color:var(--accent-ink);border-color:var(--accent-line)}
details.why > div{margin-top:.5rem;font-size:.85rem;color:var(--ink-2);
  line-height:1.55;max-width:34rem}
/* concept pages: an FAQ that opens rather than an accordion wall, a list that
   carries a figure on the right, and two columns that stack on a phone. */
details.faq{border-bottom:1px solid var(--line-soft);padding:.75rem 0}
details.faq summary{list-style:none;cursor:pointer;font-weight:600;
  color:var(--ink);display:flex;justify-content:space-between;gap:1rem;
  align-items:baseline;user-select:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--ink-3);font-weight:400;
  font-size:1.1rem;line-height:1}
details.faq[open] summary::after{content:"‘2"}
details.faq summary:hover{color:var(--accent-ink)}
details.faq > div{padding-top:.55rem;color:var(--ink-2);max-width:44rem}
details.faq > div p{margin:.5rem 0 0;max-width:none}
ul.blist,ol.blist{list-style:none;padding:0;margin:.7rem 0;display:grid;gap:.3rem}
ul.blist li,ol.blist li{display:flex;justify-content:space-between;gap:1rem;
  align-items:baseline;padding:.35rem 0;
  border-bottom:1px solid var(--line-soft);font-size:.94rem}
ol.blist b{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.cols2{display:grid;gap:1.4rem;margin:1.2rem 0}
@media (min-width:44rem){.cols2{grid-template-columns:1fr 1fr;gap:2rem}}
.cols2 h3{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .2rem}

.peers{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.peers h2{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .3rem}
.peers h3{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:1.2rem 0 .2rem;font-weight:600}
.stands{font-size:.95rem;color:var(--ink-2);margin:.5rem 0 0;max-width:none}
.stands strong{color:var(--ink)}
.peers .note{margin-top:.8rem;font-size:.88rem}
.cta{margin-top:1.6rem;padding:1.1rem 1.2rem;border:1px solid var(--accent-line);
  border-radius:10px;background:var(--accent-soft)}
.cta h2{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 .4rem}
.cta p{font-size:.95rem;color:var(--ink-2);margin:0;max-width:none}
.cta p+p{margin-top:.7rem}
.cta-go{font-weight:600;color:var(--accent-ink);text-decoration:none}
.cta-go:hover{text-decoration:underline}

.mx th.vt{font-size:.68rem;letter-spacing:.02em;text-transform:none;
  white-space:nowrap;text-align:center;padding-left:.35rem;padding-right:.35rem}
.mx th.vt a{color:var(--ink-3);text-decoration:none}
.mx th.vt a:hover{color:var(--accent-ink)}
.mx td.num{text-align:center;padding-left:.35rem;padding-right:.35rem}

/* The home page, and the only place on this site written for someone who does
   not already read financial statements. Larger type, more air, one control. */
.hero.home{padding:1.2rem 0 .4rem}
.hero.home h1{font-size:clamp(1.9rem,4.6vw,2.9rem);line-height:1.12;
  letter-spacing:-.02em;margin:0 0 .7rem;max-width:20ch}
.hero.home .lede{font-size:clamp(1.02rem,1.9vw,1.2rem);color:var(--ink-2);
  max-width:46ch;margin:0 0 1.6rem}
.lookup{position:relative;max-width:30rem}
.lookup label{display:block;font-size:.8rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem}
.lookup input{width:100%;font:500 1.05rem/1.2 inherit;padding:.85rem 1rem;
  border:1px solid var(--line);border-radius:11px;background:var(--surface);
  color:var(--ink);box-shadow:var(--shadow)}
.lookup input:focus{outline:2px solid var(--accent-line);outline-offset:1px;
  border-color:var(--accent-line)}
.lqlist{position:absolute;z-index:20;left:0;right:0;top:100%;margin:.35rem 0 0;
  padding:.3rem;list-style:none;background:var(--surface);
  border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow)}
.lqlist li{display:flex;gap:.7rem;align-items:baseline;padding:.5rem .6rem;
  border-radius:7px;cursor:pointer}
.lqlist li:hover,.lqlist li.on{background:var(--accent-soft)}
.lqlist b{font:600 .85rem/1 var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  color:var(--accent-ink);min-width:3.4rem}
.lqlist span{font-size:.95rem;color:var(--ink-2)}
.hint{font-size:.9rem;color:var(--ink-3);margin:1rem 0 0}

.eg{margin-top:2.4rem;padding:1.5rem 1.6rem;border-radius:12px;
  background:var(--accent-soft);border:1px solid var(--accent-line)}
.eg h2{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 .7rem}
.eg p{font-size:1.02rem;line-height:1.6;color:var(--ink-2);margin:0 0 .7rem;
  max-width:56ch}
.eg strong{color:var(--ink)}
.egmore{margin-top:1rem !important}
.egmore a{font-weight:600;color:var(--accent-ink);text-decoration:none}
.egmore a:hover{text-decoration:underline}

.plain{margin-top:2.4rem}
.plain h2{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .8rem}
.lede2{color:var(--ink-2);margin:0 0 1rem;max-width:54ch}
.reasons{list-style:none;padding:0;margin:0;display:grid;gap:.9rem}
.reasons li{font-size:.98rem;line-height:1.6;color:var(--ink-2);max-width:62ch;
  padding-left:1.1rem;position:relative}
.reasons li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;
  height:.42rem;border-radius:50%;background:var(--accent-line)}
.reasons strong{color:var(--ink)}

.lens{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.lens h2{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .3rem}
.invs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.inv summary{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font-size:.9rem;font-weight:600;color:var(--ink-2);padding:.5rem .85rem;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  list-style:none;user-select:none}
.inv summary::-webkit-details-marker{display:none}
.inv summary:hover{border-color:var(--accent-line);color:var(--accent-ink)}
.inv[open]{flex-basis:100%}
.inv[open] summary{border-color:var(--accent-line);color:var(--accent-ink);
  background:var(--accent-soft)}
.invp{margin:.8rem 0 .4rem}
.ib{font:600 .74rem/1 var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  padding:.22rem .45rem;border-radius:5px}
.ib-ok{color:var(--ok);background:var(--ok-bg)}
.ib-mid{color:var(--mid);background:var(--mid-bg)}
.ib-over{color:var(--over);background:var(--over-bg)}
.ck{font-weight:700}
.ck-ok{color:var(--ok)}
.ck-no{color:var(--over)}

.tabs{display:flex;gap:.4rem;margin:.2rem 0 1.4rem;flex-wrap:wrap}
.tab{font-size:.85rem;font-weight:600;padding:.4rem .8rem;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-2);text-decoration:none;
  background:var(--surface)}
.tab:hover{border-color:var(--accent-line);color:var(--accent-ink)}
.tab.on{background:var(--accent-soft);border-color:var(--accent-line);
  color:var(--accent-ink)}

.valrow{display:flex;align-items:center;gap:.6rem;margin:.8rem 0 1rem}
.valrow label{font-size:.9rem;color:var(--ink-2)}
.valrow input{font:600 1rem/1 inherit;width:9rem;padding:.5rem .6rem;
  border:1px solid var(--line);border-radius:7px;background:var(--surface);
  color:var(--ink)}
.valrow input:focus{outline:2px solid var(--accent-line);outline-offset:1px}
.qual h3{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:1.4rem 0 .3rem}

.qual{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.qual h2{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .6rem}
.qual th{font-weight:600}

.also{font-size:.92rem;color:var(--ink-2);margin:1.4rem 0 0}
.board-list b{font-variant-numeric:tabular-nums;color:var(--accent-ink)}

.tick{display:flex;flex-wrap:wrap;gap:.3rem;margin:.4rem 0 1.4rem;max-width:none}
.tick a{font:500 .82rem/1 var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  padding:.3rem .45rem;border:1px solid var(--line);border-radius:5px;
  color:var(--ink-2);text-decoration:none;background:var(--surface)}
.tick a:hover{border-color:var(--accent-line);color:var(--accent-ink)}

.bmore{font-size:.92rem;color:var(--ink-2);margin:1.4rem 0 0}
.chg{margin:0 0 .1rem;font-size:.92rem;color:var(--ink-2);max-width:none;
  padding-bottom:.7rem;border-bottom:1px solid var(--line-soft)}
.chg strong{color:var(--accent-ink)}
.hist-note{font-size:.9rem;color:var(--ink-2);max-width:none;
  padding-top:.7rem;border-top:1px solid var(--line-soft)}

/* rating breakdown: three components as chips, coloured by the share of
   available points earned — same severity vocabulary as everywhere else */
.rl{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;max-width:none}
.rl select{appearance:none;-webkit-appearance:none;font:inherit;font-size:.84rem;
  height:2rem;color:var(--ink);background-color:var(--surface-2);border:1px solid transparent;
  border-radius:999px;padding:0 2rem 0 .8rem;margin-left:auto;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23909398' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center}
.rl select:hover{border-color:var(--line)}
.rl-c{justify-content:center;margin-top:1.3rem}
.cl{text-decoration:none}
.cl:hover strong{text-decoration:underline;text-underline-offset:.18em}
.sub{margin:2.2rem 0 1rem;padding:1.15rem 1.25rem;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;display:grid;gap:.55rem}
.sub label{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-3);font-weight:600}
.sub-row{display:flex;gap:.5rem;flex-wrap:wrap}
.sub input{flex:1 1 15rem;min-width:11rem;appearance:none;font:inherit;
  font-size:.95rem;height:2.6rem;padding:0 .9rem;color:var(--ink);
  background:var(--surface-2);border:1px solid transparent;border-radius:10px}
.sub input::placeholder{color:var(--ink-3)}
.sub input:focus-visible{outline:2px solid var(--accent-line);outline-offset:1px;
  border-color:var(--accent)}
.sub button{appearance:none;font:inherit;font-size:.95rem;font-weight:600;
  height:2.6rem;padding:0 1.2rem;cursor:pointer;border:0;border-radius:10px;
  background:var(--accent);color:var(--on-accent)}
.sub button:hover{filter:brightness(1.06)}
.sub button:disabled{opacity:.6;cursor:default}
.sub-note{margin:0;font-size:.85rem;color:var(--ink-3);max-width:none}
.allco{margin:1.4rem 0 .2rem}
.allco a{font-weight:600;text-decoration:none;font-size:.98rem}
.allco a:hover{text-decoration:underline;text-underline-offset:.2em}
.fnav{display:flex;gap:1.2rem;margin-bottom:.9rem;flex-wrap:wrap}
.fnav a{color:var(--ink-2);text-decoration:none;font-size:.9rem}
.fnav a:hover{color:var(--accent-ink)}
.rl .rp{font-size:.84rem;font-weight:600;padding:.24rem .62rem;border-radius:999px;
  white-space:nowrap}
.rl .rp b{font-variant-numeric:tabular-nums}
a.rp{text-decoration:none;border:1px solid transparent;
  transition:border-color .15s ease,transform .15s ease}
a.rp:hover{transform:translateY(-1px)}
.rp-peer{color:var(--peer);background:var(--peer-bg)}
.rp-peer:hover,.rp-peer[aria-current]{border-color:var(--peer)}
.rp-dir{color:var(--dir);background:var(--dir-bg)}
.rp-dir:hover,.rp-dir[aria-current]{border-color:var(--dir)}
.rp-stab{color:var(--stab);background:var(--stab-bg)}
.rp-stab:hover,.rp-stab[aria-current]{border-color:var(--stab)}
.rp-na{color:var(--ink-3);background:var(--surface-2)}
.rp-na:hover{border-color:var(--line)}
.rp-rating{color:var(--accent-ink);background:var(--accent-soft)}
.rp-rating:hover,.rp-rating[aria-current]{border-color:var(--accent)}
a.rate{text-decoration:none}
a.rate:hover{box-shadow:0 0 0 1px currentColor}
.rl-score{text-decoration:none;color:inherit}
.rl-score:hover strong{text-decoration:underline;text-underline-offset:.18em}
.cv-peer{color:var(--peer)} .cv-dir{color:var(--dir)} .cv-stab{color:var(--stab)}
.rl-cap{flex-basis:100%;font-size:.9rem;color:var(--ink-2)}

/* vertical sticky needs an unclipped ancestor; keep the horizontal scroll
   only where the table can actually overflow */
@media (min-width:59rem){.tw{overflow:visible}}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
a:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px;border-radius:4px}
.pn{display:flex;justify-content:space-between;gap:1rem;margin-top:1.8rem;
  padding-top:1rem;border-top:1px solid var(--line-soft);font-size:.92rem}
.pn a{text-decoration:none;font-weight:600}
#btt{position:fixed;right:1.1rem;bottom:1.1rem;width:2.7rem;height:2.7rem;z-index:40;
  border-radius:50%;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);font-size:1.05rem;cursor:pointer;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .2s ease}
#btt.on{opacity:1;pointer-events:auto}
#btt:hover{color:var(--accent-ink);border-color:var(--accent-line)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}
  html{scroll-behavior:auto}}
@media (max-width:40rem){
  body{font-size:16px}
  main{padding:0 1.1rem 3.5rem}
  .top{padding:1.1rem 1.1rem .9rem}
  .nav{margin-left:0}
  th,td{padding:.55rem .7rem}
}