:root{
  /* Hieman lämpimämpi ja pehmeämpi paletti kuin aiemmin: puhdas musta ja
     kylmä betoninharmaa vaihdettu sävyihin, jotka eivät riko silmää. */
  --betoni:#F2F1EC;--betoni-2:#E6E4DD;--asfaltti:#26282D;--teippi:#FFD43B;
  --mittari:#15736A;--hylky:#C2453A;--harmaa:#6F747C;--paperi:#FCFCFA;--raja:#D8D6CE;
  /* Yksi selkeä groteski otsikoihin ja leipätekstiin. Otsikot erottuvat
     lihavuudella ja koolla, ei fontin luonteella — se on luettavin ratkaisu. */
  --display:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Ei enää kiinteälevyistä konekirjoitusfonttia: Space Grotesk on pehmeämpi
     ja luettavampi, mutta numerot ovat tasalevyisiä (tabular-nums). */
  --mono:"Space Grotesk",system-ui,sans-serif;
  --pyoristys:5px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--betoni);color:var(--asfaltti);font-family:var(--body);
  font-size:17.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Otsikot eivät ole enää VERSAALEJA — se oli suurin yksittäinen luettavuusongelma. */
h1,h2,h3.dp{font-family:var(--display);font-weight:700;
  margin:0;line-height:1.12;letter-spacing:-.021em;text-transform:none}
h2,h3.dp{font-weight:600;letter-spacing:-.015em}
/* Numerot tasalevyisinä kaikkialla, missä niitä luetaan sarakkeina. */
table,.kpis b,.kpigrid b,.strip b,.val,.idx,.readout .big,.mono,.readline,
.rank,.tunnus .txt{font-variant-numeric:tabular-nums}
p{margin:0 0 16px}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
@media(min-width:700px){.wrap{padding:0 28px}}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.prose{max-width:66ch;font-size:17.5px}
.prose h3{font-family:var(--display);font-size:20px;font-weight:600;margin:28px 0 8px;
  letter-spacing:-.008em;text-transform:none;line-height:1.3}
.prose ul{padding-left:20px;margin:0 0 16px}
.prose li{margin-bottom:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.tape{height:20px;background:var(--teippi);position:relative;overflow:hidden;
  border-top:2px solid var(--asfaltti);border-bottom:2px solid var(--asfaltti)}
.tape::after{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,var(--asfaltti) 0 1.5px,transparent 1.5px 20px);opacity:.55}
.tape.tall{height:28px}

header{position:sticky;top:0;z-index:40;background:var(--asfaltti);color:var(--betoni)}
.hbar{display:flex;align-items:center;gap:14px;padding:10px 20px;max-width:1080px;margin:0 auto}
.brand{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em;
  text-decoration:none;white-space:nowrap}
.brand span{color:var(--teippi)}
footer a{text-decoration:none;border-bottom:1px solid #4A4E56}
footer a:hover{border-color:var(--teippi);color:var(--teippi)}
nav{margin-left:auto;display:flex;gap:18px;font-family:var(--mono);font-size:12px;
  text-transform:uppercase;letter-spacing:.08em;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
nav::-webkit-scrollbar{display:none}
nav a{text-decoration:none;opacity:.72;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
nav a:hover,nav a:focus-visible{opacity:1;border-color:var(--teippi)}
@media(max-width:640px){
  .hbar{flex-wrap:wrap;gap:8px;padding:8px 16px}
  nav{margin-left:0;width:100%;gap:14px;padding-bottom:2px;font-size:11px}
}

.hero{padding:44px 0 26px}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--harmaa);margin-bottom:16px}
h1{font-size:clamp(30px,7.2vw,72px);max-width:16ch}
h1 .hl{background:var(--teippi);box-shadow:0 0 0 5px var(--teippi);border-radius:4px}
.lede{max-width:56ch;margin:24px 0 0;font-size:clamp(16px,4vw,19px);color:#3A3E45}

.search-slab{margin-top:28px;background:var(--asfaltti);color:var(--betoni);
  padding:18px 16px 20px;border-radius:var(--pyoristys)}
@media(min-width:700px){.search-slab{padding:20px 22px 24px}}
.search-slab label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teippi);margin-bottom:10px}
.combo{position:relative}
#q{width:100%;padding:14px 14px;font-family:var(--display);
  font-weight:700;font-size:clamp(18px,5vw,28px);
  text-transform:uppercase;background:var(--paperi);color:var(--asfaltti);
  border:0;border-bottom:5px solid var(--teippi);border-radius:4px 2px 0 0}
#q:focus{outline:3px solid var(--teippi);outline-offset:3px}
#sugg{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--paperi);
  color:var(--asfaltti);max-height:min(56vh,340px);overflow:auto;z-index:30;display:none;
  border:2px solid var(--asfaltti);box-shadow:0 14px 30px rgba(0,0,0,.25);
  -webkit-overflow-scrolling:touch}
#sugg.open{display:block}
#sugg button{display:flex;width:100%;gap:10px;align-items:baseline;text-align:left;min-height:48px;
  background:none;border:0;border-bottom:1px solid var(--raja);padding:10px 14px;font:inherit;cursor:pointer}
#sugg button:hover,#sugg button.on{background:var(--teippi)}
#sugg .mk{font-family:var(--mono);font-size:11.5px;color:var(--harmaa);text-transform:uppercase}
#sugg button:hover .mk,#sugg button.on .mk{color:var(--asfaltti)}
#sugg .ml{font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:16px}
#sugg .cnt{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--harmaa)}
@media(max-width:520px){#sugg .cnt{display:none}}
.hint{font-family:var(--mono);font-size:11.5px;color:#9AA0A8;margin:12px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  background:transparent;color:var(--betoni);border:1px solid #4A4E56;border-radius:4px;
  padding:9px 11px;min-height:40px;cursor:pointer}
.chip:hover{border-color:var(--teippi);color:var(--teippi)}
.chip.on{border-color:var(--teippi);color:var(--asfaltti);background:var(--teippi)}
.chip.on b{font-weight:600;margin-left:8px}

.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--raja);
  border:1px solid var(--raja);margin-top:28px}
.strip div{background:var(--betoni);padding:12px 14px}
.strip b{display:block;font-family:var(--mono);font-weight:600;font-size:clamp(17px,4.4vw,25px)}
.strip span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--harmaa)}
@media(max-width:640px){.strip{grid-template-columns:repeat(2,1fr)}}

section{padding:52px 0}
@media(min-width:700px){section{padding:64px 0}}
#card{scroll-margin-top:96px}
section{scroll-margin-top:96px}
#merkit,#mallit,#trendi,#ukk{content-visibility:auto;contain-intrinsic-size:1px 900px}
.sechead{margin-bottom:24px}
.sechead h2{font-size:clamp(25px,6vw,44px);max-width:18ch}
.sechead p{margin:14px 0 0;max-width:62ch;color:#3A3E45;font-size:16px}
.num{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--harmaa);
  text-transform:uppercase;margin-bottom:10px}

.card{background:var(--paperi);border:2px solid var(--asfaltti);border-radius:var(--pyoristys)}
.cardtop{display:flex;gap:16px;align-items:flex-start;padding:18px}
@media(min-width:700px){.cardtop{gap:22px;padding:24px}}
.grade{width:72px;height:72px;flex:0 0 72px;display:grid;place-items:center;border-radius:var(--pyoristys);
  font-family:var(--display);font-weight:700;font-size:42px;
  color:var(--paperi);line-height:1}
@media(min-width:700px){.grade{width:96px;height:96px;flex-basis:96px;font-size:56px}}
.g-A{background:var(--mittari)}.g-B{background:#4F8B4A}.g-C{background:#A88200}
.g-D{background:#C4601F}.g-E{background:var(--hylky)}
.ttl h3{font-size:clamp(21px,5.4vw,36px)}
.ttl .mk2{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--harmaa);margin-bottom:6px}
.verdict{margin:12px 0 0;max-width:56ch;font-size:16px}
.verdict b{background:var(--teippi);padding:0 3px}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);border-top:2px solid var(--asfaltti)}
@media(min-width:760px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpis div{padding:14px 16px;border-right:1px solid var(--raja);border-bottom:1px solid var(--raja)}
.kpis b{display:block;font-family:var(--mono);font-weight:600;font-size:21px;line-height:1.2}
.kpis span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--harmaa)}
.chartbox{padding:18px 0 10px;border-top:2px solid var(--asfaltti)}
.chartbox h4{margin:0 18px 4px;font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;font-weight:600}
.chartbox p.sub{margin:0 18px 12px;font-size:14px;color:var(--harmaa)}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 18px 6px;min-width:0}
.scrollx svg{display:block}
.readline{margin:0 18px;padding:10px 12px;background:var(--betoni-2);border-left:4px solid var(--teippi);
  font-family:var(--mono);font-size:12.5px;line-height:1.5;min-height:44px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--harmaa);padding:14px 18px 16px}
.legend i{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px}

.agegrid{display:grid;grid-template-columns:1fr;gap:20px}
.agegrid>*{min-width:0}
@media(min-width:900px){.agegrid{grid-template-columns:1.35fr 1fr;gap:26px}}
.readout{background:var(--asfaltti);color:var(--betoni);padding:20px;border-radius:var(--pyoristys);
  display:flex;flex-direction:column;justify-content:center}
.readout .big{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(44px,13vw,74px);line-height:.9;color:var(--teippi)}
.readout .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:#A7ADB5;margin-top:12px}
.readout p{margin:14px 0 0;font-size:15px;color:#D6D8DA;max-width:36ch}
.readout p.agen{font-size:13px;color:#8B9198;margin-top:10px}
.slider{width:100%;margin-top:16px;accent-color:var(--teippi);height:44px}

.tabs{display:flex;border:2px solid var(--asfaltti);border-bottom:0;width:fit-content;max-width:100%}
.tabs button{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:13px 14px;min-height:46px;background:var(--paperi);border:0;
  border-right:2px solid var(--asfaltti);cursor:pointer}
.tabs button:last-child{border-right:0}
.tabs button[aria-selected="true"]{background:var(--asfaltti);color:var(--teippi)}
.filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0 0;
  font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--harmaa)}
.filters select{font-family:var(--mono);font-size:12px;padding:9px 8px;min-height:42px;
  border:2px solid var(--asfaltti);background:var(--paperi);border-radius:4px}
ol.list{list-style:none;margin:14px 0 0;padding:0;border:2px solid var(--asfaltti);background:var(--paperi)}
ol.list li{border-bottom:1px solid var(--raja)}
ol.list li:last-child{border-bottom:0}
.row{display:grid;grid-template-columns:34px 1fr 74px;gap:10px;align-items:center;width:100%;
  background:none;border:0;font:inherit;text-align:left;padding:11px 14px;min-height:56px;cursor:pointer}
@media(min-width:760px){.row{grid-template-columns:44px 1fr 150px 80px;gap:14px;padding:12px 16px}}
.row:hover,.row:focus-visible{background:var(--betoni-2)}
.rank{font-family:var(--mono);font-size:13px;color:var(--harmaa)}
.nm{font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:15.5px;line-height:1.15}
.nm small{display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.05em;color:var(--harmaa);text-transform:uppercase}
.bar{height:13px;background:var(--betoni-2);position:relative;border:1px solid var(--raja);display:none}
@media(min-width:760px){.bar{display:block}}
.bar i{position:absolute;left:0;top:0;bottom:0;display:block}
.bar u{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--asfaltti)}
.val{font-family:var(--mono);font-size:15px;font-weight:600;text-align:right}

.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:2px solid var(--asfaltti);background:var(--paperi)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15.5px}
caption{text-align:left;font-family:var(--mono);font-size:13px;letter-spacing:0;
  text-transform:none;color:var(--harmaa);padding:12px 14px 4px}
th,td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--raja);white-space:nowrap}
th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:var(--paperi)}
thead th{font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:none;
  color:var(--harmaa);font-weight:500;border-bottom:2px solid var(--asfaltti)}
tbody tr:hover td{background:var(--betoni-2)}
tbody tr:hover td:first-child{background:var(--betoni-2)}
td.idx{font-family:var(--mono);font-weight:600}
.pill{display:inline-block;min-width:22px;text-align:center;padding:1px 6px;border-radius:4px;
  font-family:var(--mono);font-size:12px;font-weight:600;color:#fff}

details{border-bottom:1px solid var(--raja)}
details summary{cursor:pointer;padding:16px 30px 16px 0;font-weight:600;font-size:17px;
  list-style:none;position:relative;min-height:52px;display:flex;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";position:absolute;right:4px;font-family:var(--mono);font-size:20px;color:var(--harmaa)}
details[open] summary::after{content:"–"}
details .ans{padding:0 0 18px;max-width:68ch;font-size:16px}
details .ans p:last-child{margin-bottom:0}

.notes{background:var(--asfaltti);color:#D6D8DA}
.notes .wrap{padding-top:48px;padding-bottom:48px}
.notes h2{color:var(--betoni);font-size:clamp(23px,5.6vw,38px);margin-bottom:20px}
.notecols{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:820px){.notecols{grid-template-columns:repeat(3,1fr);gap:26px}}
.notecols h3{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;
  color:var(--teippi);margin:0 0 8px;text-transform:uppercase}
.notecols p{margin:0 0 12px;font-size:15px}
.notes a{color:var(--teippi)}
footer{background:var(--asfaltti);color:#767B84;font-family:var(--mono);font-size:11.5px;padding:0 0 30px}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

svg text{font-family:var(--mono);font-size:11px;fill:var(--harmaa)}
:focus-visible{outline:3px solid var(--teippi);outline-offset:2px}

/* ---------- alasivut: mallikohtaiset ja merkkikohtaiset sivut ---------- */
.polku{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--harmaa);padding:22px 0 0}
.polku a{text-decoration:none;border-bottom:1px solid var(--raja)}
.polku a:hover{border-color:var(--asfaltti)}
.polku span{margin:0 7px;opacity:.6}
.sivuhero{padding:22px 0 10px}
.sivuhero .mk2{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--harmaa);margin:0 0 8px}
.sivuhero h1{font-size:clamp(27px,6.6vw,58px);max-width:20ch}
.sivuhero .lead{max-width:62ch;margin:20px 0 0;font-size:clamp(16px,4vw,18px);color:#3A3E45}
.tunnus{display:flex;gap:16px;align-items:center;margin:24px 0 0}
.tunnus .grade{width:64px;height:64px;flex:0 0 64px;font-size:38px}
.tunnus .txt{font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--harmaa)}
.tunnus .txt b{display:block;font-family:var(--body);font-size:17px;font-weight:600;color:var(--asfaltti)}
.kpigrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--raja);
  border:1px solid var(--raja);margin-top:26px}
@media(min-width:760px){.kpigrid{grid-template-columns:repeat(4,1fr)}}
.kpigrid div{background:var(--paperi);padding:14px 16px}
.kpigrid b{display:block;font-family:var(--mono);font-weight:600;font-size:21px;line-height:1.25}
.kpigrid span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--harmaa)}
td a,th a{text-decoration:none;border-bottom:1px solid var(--raja)}
td a:hover{border-color:var(--asfaltti)}
.tarkka{font-size:14px;color:var(--harmaa);margin-top:10px}
.linkkiraita{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.linkkiraita a{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  text-decoration:none;border:1px solid var(--raja);border-radius:4px;padding:10px 12px;
  min-height:42px;display:flex;align-items:center;background:var(--paperi)}
.linkkiraita a:hover{border-color:var(--asfaltti);background:var(--teippi)}
.hakemisto{columns:2;column-gap:26px;font-size:15px}
@media(min-width:760px){.hakemisto{columns:4}}
.hakemisto div{break-inside:avoid;margin-bottom:16px}
.hakemisto h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--harmaa);margin:0 0 4px;font-weight:600}
.hakemisto ul{list-style:none;margin:0;padding:0}
.hakemisto li{margin-bottom:2px}
.hakemisto a{text-decoration:none;border-bottom:1px solid transparent}
.hakemisto a:hover{border-color:var(--asfaltti)}
.korttilinkki{display:inline-flex;align-items:center;gap:8px;margin:14px 18px 4px;padding:11px 14px;
  min-height:44px;background:var(--teippi);border:2px solid var(--asfaltti);border-radius:4px;
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
.korttilinkki:hover{background:var(--asfaltti);color:var(--teippi)}

/* ---------- vikakohteet ---------- */
.profiili{display:flex;height:22px;margin:6px 18px 0;border:1px solid var(--raja);overflow:hidden}
.profiili i{display:block;height:100%}
.kpiste{display:inline-flex;align-items:center;gap:5px;margin-right:12px;white-space:nowrap;
  font-family:var(--mono);font-size:11.5px;color:var(--asfaltti)}
.kpiste i{width:10px;height:10px;display:inline-block}
.kohdepalkki{display:flex;height:14px;border:1px solid var(--raja);overflow:hidden;min-width:110px}
.kohdepalkki i{display:block;height:100%}

/* ---------- avattava tarkempi vikaerittely ---------- */
.avaa{width:26px;height:26px;flex:0 0 26px;margin-right:8px;padding:0;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;vertical-align:-7px;
  font-family:var(--mono);font-size:17px;font-weight:500;cursor:pointer;
  background:var(--betoni-2);color:var(--asfaltti);border:1px solid var(--raja);
  border-radius:4px}
.avaa:hover{background:var(--teippi);border-color:var(--asfaltti)}
.avaa[aria-expanded="true"]{background:var(--asfaltti);color:var(--teippi);border-color:var(--asfaltti)}
.avaa.tyhja{background:none;border:0;cursor:default}
tr.alarivi>td{background:var(--betoni-2);padding:14px 16px 18px}
.alaotsikko{margin:0 0 10px;font-family:var(--mono);font-size:12.5px;color:var(--harmaa)}
table.alataulu{min-width:0;width:100%;font-size:14.5px;background:var(--paperi);
  border:1px solid var(--raja)}
table.alataulu th,table.alataulu td{padding:7px 10px;border-bottom:1px solid var(--raja)}
table.alataulu thead th{font-size:11.5px;border-bottom:1px solid var(--asfaltti)}
table.alataulu tr:last-child td{border-bottom:0}
table.alataulu td:first-child,table.alataulu th:first-child{position:static;background:none;
  white-space:normal}
/* kortin ja etusivun lista-versio */
.kohdelista{list-style:none;margin:10px 18px 0;padding:0}
.kohdelista li{border-top:1px solid var(--raja);padding:8px 0}
.kohdelista li:first-child{border-top:0}
.kohderivi{display:flex;align-items:center;gap:8px;font-size:15px}
.kohderivi .nimi{flex:1;min-width:0}
.kohderivi .osuus{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}
.kohderivi .merkki{width:11px;height:11px;flex:0 0 11px;border-radius:2px}
.ala{margin:8px 0 4px 34px;font-family:var(--mono);font-size:13px;color:var(--harmaa)}
.ala div{display:flex;justify-content:space-between;gap:12px;padding:3px 0;
  border-bottom:1px dotted var(--raja)}
.ala div:last-child{border-bottom:0}
.ala b{color:var(--asfaltti);font-weight:500;font-variant-numeric:tabular-nums}

/* tarkempi erittely tarvitsee kaksi prosenttisaraketta lisää — vieritetään tarvittaessa */
table.alataulu{min-width:660px}
.ala div span:last-child{white-space:nowrap;text-align:right}

/* kärkilistan palkki: vaalea vyöhyke = keskimmäinen puolikas vertailujoukosta */
.bar .vyo{position:absolute;top:0;bottom:0;display:block;background:var(--asfaltti);
  opacity:.10;pointer-events:none}