/* Hintalaatu – visuaalinen identiteetti.
   Layout: avara lukupalsta, data kortteina; kartat ja kaaviot samassa havupuun vihreässä sävyskaalassa,
   hinta aina lakkakeltaisessa hintalapussa. */
:root{
  --bg:#F3F6F4; --surface:#FFFFFF; --sunk:#E9EFEC; --ink:#0F2A25; --muted:#586A65; --line:#D7E0DC;
  --accent:#0E6B5A; --accent-ink:#FFFFFF; --hot:#E9782F; --hot-soft:#FCE8DA;
  --s1:#E1EEE8; --s2:#B3D7C8; --s3:#6EB49D; --s4:#2C8A71; --s5:#0C5546; --nodata:#E3E8E5;
  --good:#11795C; --bad:#B44A2A;
  --display:"Bricolage Grotesque","Avenir Next Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:14px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0B1613; --surface:#12211D; --sunk:#0F1C19; --ink:#E5EEEA; --muted:#93A7A0; --line:#22352F;
  --accent:#4CC4A4; --accent-ink:#06231C; --hot:#F2944F; --hot-soft:#3A2414;
  --s1:#16302A; --s2:#1E5344; --s3:#2B7F67; --s4:#4BB292; --s5:#97E2C8; --nodata:#182622;
  --good:#5ED3A8; --bad:#F2906F; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B1613; --surface:#12211D; --sunk:#0F1C19; --ink:#E5EEEA; --muted:#93A7A0; --line:#22352F;
  --accent:#4CC4A4; --accent-ink:#06231C; --hot:#F2944F; --hot-soft:#3A2414;
  --s1:#16302A; --s2:#1E5344; --s3:#2B7F67; --s4:#4BB292; --s5:#97E2C8; --nodata:#182622;
  --good:#5ED3A8; --bad:#F2906F; color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--body)}
a{color:var(--accent);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--hot);outline-offset:2px;border-radius:4px}
.wrap{max-width:72rem;margin:0 auto;padding-inline:1rem}
img,svg{max-width:100%}

/* ── yläpalkki ── */
.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
@media (max-width:1180px){.top{position:static}}
.top .wrap{display:flex;align-items:center;gap:1.4rem;padding-block:.7rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);--lw-m:var(--ink);--lw-f:var(--accent)}
.logo-i{width:44px;height:44px;flex:none}
.logo-w{height:26px;width:auto}
@media (max-width:480px){.logo-i{width:38px;height:38px}.logo-w{height:22px}}
.lg-b{fill:#0E6B5A}.lg-l{fill:#FFF8EC}.lg-h{fill:var(--hot)}
.lw-m{fill:var(--lw-m)}.lw-f{fill:var(--lw-f)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lg-b{fill:#17866F}}
:root[data-theme="dark"] .lg-b{fill:#17866F}
.cities{display:flex;gap:.15rem;flex-wrap:wrap;margin-left:auto;min-width:0;order:2}
.cities a{flex:none;white-space:nowrap;padding:.35rem .6rem;border-radius:99px;color:var(--muted);text-decoration:none;font-weight:500;font-size:.92rem}
.cities a:hover{background:var(--sunk);color:var(--ink)}
.cities a[aria-current]{background:var(--ink);color:var(--bg)}
.cta{order:3;display:inline-flex;align-items:center;gap:.4rem;flex:none;padding:.5rem .95rem;border-radius:99px;background:var(--hot);color:#1A0E04;font:700 .92rem var(--body);text-decoration:none;box-shadow:0 2px 0 color-mix(in srgb,var(--hot) 55%,#000)}
.cta svg{width:1rem;height:1rem}
.cta:hover{filter:brightness(1.06)}.cta[aria-current]{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:1180px){.top .wrap{gap:.6rem 1rem}.cta{order:1;margin-left:auto}.cities{order:2;flex-basis:100%;margin-left:-.5rem;gap:.25rem .1rem}}
@media (max-width:480px){.cta{padding:.45rem .75rem;font-size:.85rem}.cities a{font-size:.86rem;padding:.3rem .5rem}}

/* ── typografia ── */
h1,h2,h3{font-family:var(--display);line-height:1.04;text-wrap:balance;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.3rem,6.4vw,4.4rem);font-weight:800;font-variation-settings:"wdth" 80,"opsz" 96}
h2{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:750;font-variation-settings:"wdth" 85,"opsz" 48;margin-bottom:.4rem}
h3{font-size:1.15rem;font-weight:700;font-variation-settings:"wdth" 90,"opsz" 24}
.lede{font-size:clamp(1.05rem,1.8vw,1.22rem);color:var(--muted);max-width:40rem;margin:1rem 0 0}
.eyebrow{font:600 .74rem/1.2 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.sub{color:var(--muted);margin:0 0 1.4rem;max-width:44rem}
.meta{font-size:.84rem;color:var(--muted)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
main{padding-block:1.4rem 4rem}
section.block{margin-top:4rem}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:1.2rem}
.crumbs a{color:var(--muted)}

/* ── hintalappu ── */
.tag{display:inline-flex;align-items:baseline;gap:.2rem;background:var(--hot);color:#1F1206;font:700 1rem/1 var(--mono);font-variant-numeric:tabular-nums;padding:.42rem .65rem .42rem 1.1rem;clip-path:polygon(.65rem 0,100% 0,100% 100%,.65rem 100%,0 50%);border-radius:0 6px 6px 0;white-space:nowrap;position:relative}
.tag::before{content:"";position:absolute;left:.5rem;top:50%;width:.3rem;height:.3rem;margin-top:-.15rem;border-radius:50%;background:var(--surface)}
.tag small{font-size:.62em;opacity:1;font-weight:700}
.tag.tag,.tag.tag small{color:#1A0E04}
.tag.tag.cool,.tag.tag.cool small{color:#fff}
.tag.tag.muted,.tag.tag.muted small{color:var(--muted)}
.tag.cool{background:var(--s4);color:#fff}
.tag.big{font-size:clamp(2.4rem,7vw,3.6rem);padding:.5rem 1rem .5rem 2rem;clip-path:polygon(1.2rem 0,100% 0,100% 100%,1.2rem 100%,0 50%)}
.tag.big::before{left:.9rem;width:.55rem;height:.55rem;margin-top:-.275rem}
.tag.muted{background:var(--sunk);color:var(--muted)}
.tag.muted::before{background:var(--line)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem}
.pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;font-weight:600;padding:.2rem .55rem;border-radius:99px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.pill.hot{background:var(--hot-soft);color:#8A3A0C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill.hot{color:var(--hot)}}
:root[data-theme="dark"] .pill.hot{color:var(--hot)}
.btn{display:inline-flex;align-items:center;gap:.4rem;font:600 .95rem var(--body);background:var(--ink);color:var(--bg);border:0;border-radius:99px;padding:.7rem 1.2rem;text-decoration:none;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}

/* ── etusivun hero ── */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:3rem;align-items:center;padding-block:0}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:2rem}}
.hero h1 em{font-style:normal;color:var(--accent)}
.search{position:relative;margin-top:1.8rem;max-width:30rem}
.search input{width:100%;font:500 1.05rem var(--body);padding:.95rem 1.1rem .95rem 2.9rem;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink)}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.search svg{position:absolute;left:1rem;top:50%;width:1.2rem;height:1.2rem;margin-top:-.6rem;color:var(--muted)}
.results{position:absolute;left:0;right:0;top:calc(100% + .4rem);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 40px -18px rgba(0,0,0,.35);list-style:none;margin:0;padding:.35rem;z-index:30;max-height:22rem;overflow:auto}
.results a{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .8rem;border-radius:10px;color:var(--ink);text-decoration:none}
.results a:hover,.results a.on{background:var(--sunk)}
.results small{color:var(--muted)}
.hint{font-size:.85rem;color:var(--muted);margin:.7rem 0 0 1rem}

.duo h3{margin-bottom:.2rem}
.bars{display:grid;gap:.75rem;margin-top:1.1rem}
.bar{display:grid;grid-template-columns:5.6rem minmax(0,1fr) auto;align-items:center;gap:.8rem;font-size:.95rem}
.bar .trk{height:1.6rem;background:var(--sunk);border-radius:6px;overflow:hidden}
.bar .trk i{display:block;height:100%;background:var(--s4);border-radius:6px}
.bar:first-child .trk i{background:var(--s5)}
.bar b{font:600 .95rem var(--mono);font-variant-numeric:tabular-nums}
.bars a.bar{color:inherit;text-decoration:none}.bars a.bar:hover span:first-child{text-decoration:underline}
.bar:first-child .trk i{background:var(--s4)}.bar.top1 .trk i{background:var(--hot)}
.tabs{margin-top:1rem}.tabnote{margin:.7rem 0 0}
.twocol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (max-width:860px){.twocol{grid-template-columns:1fr}}
.contrast{display:grid;gap:.8rem}.contrast h3{font-size:1.5rem}
.cx{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem .9rem;border-radius:10px;background:var(--sunk);color:inherit;text-decoration:none}
.cx:hover{outline:1.5px solid var(--accent)}
.cx b{display:block;font-weight:700}.cx small{color:var(--muted);font-size:.82rem}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .9rem;margin:0}
.facts div{border-top:1px solid var(--line);padding-top:.45rem;min-width:0}
.facts dt{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.facts dd{margin:.1rem 0 0;font:700 1.02rem var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.facts small{display:block;font-size:.76rem;color:var(--muted)}
.facts em{font-style:normal}.facts .up{color:var(--accent)}.facts .down{color:var(--hot)}
.strip-mob{display:none}
@media (max-width:700px){.strip-desk{display:none}.strip-mob{display:block}}
.ranges{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.ranges a{display:grid;gap:.35rem;padding:.6rem 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.rn{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline}.rn .num{font-size:.82rem;color:var(--muted)}
.rt{position:relative;height:.9rem;background:var(--sunk);border-radius:99px}
.rt i{position:absolute;top:0;height:100%;display:block}
.rb{background:var(--s2);border-radius:99px}
.ra{width:3px;margin-left:-1.5px;background:var(--hot);top:-.2rem!important;height:1.3rem!important;border-radius:2px}
.rbest{width:.8rem;height:.8rem!important;top:.05rem!important;margin-left:-.4rem;border-radius:50%;background:var(--s5);box-shadow:0 0 0 2px var(--surface)}
.rs{font-size:.8rem;color:var(--muted)}.rs b{color:var(--ink)}
.raxis{display:flex;justify-content:space-between;font:500 .72rem var(--mono);color:var(--muted);margin:.4rem 0 .6rem}
.sw.dot{border-radius:50%}
.commute{margin-bottom:1rem}.commute h3{margin-bottom:.8rem}
.cm{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:.6rem}
.cm a{display:grid;grid-template-columns:1fr auto;grid-template-areas:"from save" "arrow save" "to save";gap:.15rem .8rem;align-items:center;padding:.8rem .9rem;background:var(--sunk);border-radius:10px;color:inherit;text-decoration:none}
.cm a:hover{outline:1.5px solid var(--accent)}
.cm-from{grid-area:from;font-size:.9rem}.cm-arrow{grid-area:arrow;font:500 .74rem var(--mono);color:var(--muted)}.cm-to{grid-area:to}
.cm small{color:var(--muted);font:500 .78rem var(--mono)}
.cm-save{grid-area:save;text-align:right}.cm-save b{display:block;font:800 1.7rem/1 var(--display);color:var(--accent)}.cm-save small{display:block;max-width:7.5rem;font-family:var(--body)}

/* ── hajontakaavio ── */
.strip{width:100%;height:auto;display:block;overflow:visible}
.strip .row-label{font:700 13px var(--body);fill:var(--ink)}
.strip .row-sub{font:500 11px var(--body);fill:var(--muted)}
.strip .axis{font:500 11px var(--mono);fill:var(--muted)}
.strip .grid{stroke:var(--line);stroke-width:1}
.strip .base{stroke:var(--line);stroke-width:1.5}
.strip circle{stroke:var(--surface);stroke-width:1.2;cursor:pointer;transition:r .12s}
.strip a:hover circle,.strip a:focus circle{stroke:var(--ink);stroke-width:2}
.strip .avg{stroke:var(--hot);stroke-width:2.5;stroke-linecap:round}
.strip .avg-l{font:600 11px var(--mono);fill:var(--hot)}
.k1{fill:var(--s1)} .k2{fill:var(--s2)} .k3{fill:var(--s3)} .k4{fill:var(--s4)} .k5{fill:var(--s5)} .k0{fill:var(--nodata)}
.tip{position:fixed;z-index:50;pointer-events:none;background:var(--ink);color:var(--bg);padding:.55rem .75rem;border-radius:10px;font-size:.85rem;line-height:1.35;max-width:16rem;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.tip b{display:block}
.legend{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin-top:.8rem}
.legend .sw{display:inline-block;width:1.3rem;height:.7rem;border-radius:3px}
.legend .sep{width:1rem}
.chart-scroll{overflow-x:auto;margin-inline:-.25rem;padding-inline:.25rem}

/* ── kaupunkikortit ── */
.citygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1rem}
.citycard{display:grid;grid-template-rows:auto auto 1fr auto;gap:.9rem;padding:1.2rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.citycard:hover{border-color:var(--accent);transform:translateY(-3px)}
.citycard header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.citycard h3{font-size:1.6rem}
.citycard .mini{height:9.5rem;display:flex;align-items:center;justify-content:center;background:var(--sunk);border-radius:10px;padding:.6rem}
.citycard .mini svg{height:100%;width:auto}
.kv{display:grid;gap:.45rem;margin:0}
.kv div{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;border-top:1px solid var(--line);padding-top:.45rem}
.kv div:first-child{border-top:0;padding-top:0}
.kv dt{color:var(--muted)} .kv dd{margin:0;font:600 .9rem var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.best{display:flex;justify-content:space-between;align-items:center;gap:.8rem;background:var(--sunk);border-radius:10px;padding:.65rem .8rem}
.best>div>span{font:700 .72rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.15rem}
.best b{font-weight:700}
@media (prefers-reduced-motion:reduce){.citycard{transition:none}.citycard:hover{transform:none}}

/* ── nostot ── */
.insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1rem}
.insight{display:grid;gap:.5rem;align-content:start;padding:1.2rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);color:inherit;text-decoration:none}
.insight:hover{border-color:var(--accent)}
.insight .big{font:800 2.2rem/1 var(--display);font-variation-settings:"wdth" 80,"opsz" 72;color:var(--accent)}
.insight p{margin:0;color:var(--muted);font-size:.92rem}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.6rem;list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{display:grid;gap:.4rem;counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--ink);color:var(--bg);font:700 1rem var(--display)}
.steps p{margin:0;color:var(--muted)}

/* ── kaupunkisivu ── */
h1.long{font-size:clamp(2rem,4.6vw,3.3rem)}
.cityhead{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2rem;align-items:end}
@media (max-width:860px){.cityhead{grid-template-columns:1fr}}
.stats4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.stat{display:grid;gap:.15rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem}
.stat b{font:600 1.3rem/1.2 var(--mono);font-variant-numeric:tabular-nums}
.stat span{font-size:.8rem;color:var(--muted)}
.explorer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:1.5rem;align-items:start;margin-top:2.4rem}
@media (max-width:940px){.explorer{grid-template-columns:1fr}}
.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 4.6rem);display:grid;gap:1rem}
@media (max-width:940px){.side{position:static}}
.mapcard{padding:1rem}
svg.map{width:100%;height:auto;max-height:62vh;display:block}
svg.map path{stroke:var(--surface);stroke-width:1;vector-effect:non-scaling-stroke;transition:opacity .2s,fill .3s}
svg.map a:hover path,svg.map a:focus path{stroke:var(--ink);stroke-width:2}
svg.map .off path{opacity:.18}
svg.map .cur path{stroke:var(--hot);stroke-width:3}
svg.map .ctr{fill:var(--hot);stroke:var(--surface);stroke-width:2;vector-effect:non-scaling-stroke}

.controls{display:grid;gap:1.1rem}
.seg{display:flex;flex-wrap:wrap;gap:.35rem}
.seg button{font:600 .88rem var(--body);padding:.5rem .85rem;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ctrl{display:grid;gap:.3rem}
.ctrl label{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;font-weight:600}
.ctrl label output{font:600 .85rem var(--mono);color:var(--accent)}
input[type=range]{width:100%;accent-color:var(--accent)}
select{font:500 .92rem var(--body);padding:.55rem .7rem;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%}
.ctrlgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.2rem}
@media (max-width:520px){.ctrlgrid{grid-template-columns:1fr}}
details.weights summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--accent)}
details.weights[open] summary{margin-bottom:.8rem}
.listhead{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem}
.listhead select{width:auto}
.count{font-size:.9rem;color:var(--muted)}
.count b{color:var(--ink)}

.rank{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.rank a{display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;gap:.15rem .9rem;align-items:center;padding:.85rem 1rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:inherit;text-decoration:none}
.rank a:hover{border-color:var(--accent)}
.rank .pos{grid-column:1;grid-row:1 / span 2;font:800 1.6rem/1 var(--display);font-variation-settings:"wdth" 75;color:var(--muted)}
.rank li:nth-child(-n+3) .pos{color:var(--accent)}
.rank .nm{grid-column:2;grid-row:1;font-weight:700;min-width:0;overflow-wrap:anywhere}
.rank .nm small{font-weight:500;color:var(--muted);margin-left:.3rem}
.rank .sc{grid-column:3;grid-row:1 / span 2;justify-self:end}
.rank .chips{grid-column:2;grid-row:2}
.rank .chips{display:flex;flex-wrap:wrap;gap:.3rem}
.empty{padding:2rem;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:12px}

/* ── taulukot ── */
.tbl{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{text-align:right;padding:.6rem .8rem;border-bottom:1px solid var(--line);white-space:nowrap}
tr:last-child td{border-bottom:0}
th:first-child,td:first-child{text-align:left}
th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
td{font-family:var(--mono);font-variant-numeric:tabular-nums}
td:first-child{font-family:var(--body);font-weight:500}
td small{color:var(--muted)}
.up{color:var(--good)} .down{color:var(--bad)}

/* ── aluesivu ── */
.areahead{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2rem;align-items:start}
@media (max-width:860px){.areahead{grid-template-columns:1fr}}
.scorecard{display:grid;gap:1rem;background:var(--ink);color:var(--bg);border-radius:var(--r);padding:1.4rem}
.scorecard .eyebrow{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.scorecard .tag::before{background:var(--ink)}
.profiles{display:grid;gap:.4rem;margin:0}
.profiles div{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;border-top:1px solid color-mix(in srgb,var(--bg) 18%,transparent);padding-top:.45rem}
.profiles dd{margin:0;font:600 .9rem var(--mono)}
.parts{display:grid;gap:1.05rem}
.part{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;align-items:baseline}
.part .trk{grid-column:1 / -1;height:10px;background:var(--sunk);border-radius:5px;overflow:hidden}
.part .trk i{display:block;height:100%;background:var(--accent);border-radius:5px}
.part .why{grid-column:1 / -1;font-size:.85rem;color:var(--muted)}
.part.aside .trk i{background:var(--s3)}
.keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.8rem}
.key{display:grid;gap:.2rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem}
.key b{font:600 1.45rem/1.15 var(--mono);font-variant-numeric:tabular-nums}
.key span{font-size:.85rem;color:var(--muted)}
.key em{font-style:normal;font-size:.8rem;font-weight:600}
.alt{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.alt a{display:grid;gap:.45rem;padding:1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:inherit;text-decoration:none}
.alt a:hover{border-color:var(--accent)}
.prose{max-width:44rem}
.prose li{margin-bottom:.45rem}
details.faq{border-top:1px solid var(--line);padding-block:1rem}
details.faq:last-of-type{border-bottom:1px solid var(--line)}
details.faq summary{font-weight:600;cursor:pointer}
details.faq p{margin:.6rem 0 0;color:var(--muted)}

footer.site{--fbg:#0F2A25;--fink:#E8F1ED;--fmut:#9DB5AD;--fline:#21413A;background:var(--fbg);color:var(--fmut);font-size:.9rem;margin-top:2.5rem;padding-top:3rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) footer.site{--fbg:#07100E;--fline:#1A2C27}}
:root[data-theme="dark"] footer.site{--fbg:#07100E;--fline:#1A2C27}
footer.site .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:2rem}
footer.site .brand{color:var(--fink)}
footer.site .brand{--lw-m:var(--fink);--lw-f:#5FD0B0}
footer.site p{margin:.8rem 0 0;line-height:1.55}
footer.site h4{margin:0 0 .7rem;font:700 .74rem/1 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--fink)}
.f-col{display:flex;flex-direction:column;gap:.35rem}.f-col p{margin:0 0 .5rem}
footer.site a{color:var(--fmut);text-decoration:none}footer.site a:hover{color:var(--fink);text-decoration:underline}
.f-bottom{display:flex!important;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--fline);margin-top:2.5rem;padding-block:1.2rem 1.6rem;font-size:.8rem}
@media (max-width:860px){footer.site .wrap{grid-template-columns:1fr 1fr}.f-brand{grid-column:1/-1}}
.fresh{display:flex;align-items:center;gap:.55rem;font-size:.84rem}
footer.site .fresh{color:var(--fink)}
.pulse{width:.55rem;height:.55rem;border-radius:50%;background:#3DDC97;flex:none;box-shadow:0 0 0 0 rgba(61,220,151,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 .5rem rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}

.houseref{display:grid;gap:.7rem;margin-top:1rem;max-width:44rem}
.hr-row{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.hr-row p{margin:0;flex:1 1 18rem;color:var(--muted);font-size:.95rem}

/* ── esikatselu: aluesivut saman sivun osioina ── */
.apage{display:none}
.apage:target{display:block}
main:has(.apage:target) .kview{display:none}
.kview{scroll-margin-top:5rem}
.apage{scroll-margin-top:4.5rem}

/* mobiili: painikkeet kaksi rinnakkain, nostot kahdessa sarakkeessa */
@media (max-width:600px){
.seg{display:grid;grid-template-columns:1fr 1fr}
.seg button{padding:.6rem .5rem;text-align:center}
.insights{grid-template-columns:1fr 1fr;gap:.6rem}
.insight{padding:.85rem;gap:.35rem}
.insight .big{font-size:1.45rem}
.insight .eyebrow{font-size:.64rem;letter-spacing:.07em}
.insight p{font-size:.8rem}
.cm{grid-template-columns:1fr}
.contrast h3{font-size:1.25rem}
}

/* hero: Suomi lukuina */
.glance dl{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem;margin:1rem 0 1.1rem}
.glance dt{font-size:.8rem;color:var(--muted)}
.glance dd{margin:0;font:800 clamp(1.9rem,4vw,2.5rem)/1.05 var(--display);font-variation-settings:"wdth" 80,"opsz" 72;color:var(--accent);letter-spacing:-.02em}
.glance .fresh{border-top:1px solid var(--line);padding-top:.9rem;margin:0;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* hinta- ja vuokralistat */
.c-tools{display:flex;gap:.5rem;margin-top:.7rem}
.c-tools select,.c-tools input{font:500 .88rem var(--body);padding:.5rem .8rem;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink);min-width:0}
.c-tools input{flex:1}
.c-list{min-height:0}
.c-list .bar.feat span:first-child{font-weight:600}
.c-div{margin:.6rem 0 0;padding-top:.7rem;border-top:1px dashed var(--line);font:700 .72rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.c-div span{color:var(--accent)}
.c-more{margin-top:1rem;width:100%;justify-content:center}
.srcnote{margin:.5rem 0 0}
/* ääripäät */
.ext{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center}
.ext-card{display:grid;gap:.45rem;justify-items:start;padding:1.5rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);color:inherit;text-decoration:none}
.ext-card:hover{border-color:var(--accent)}
.ext-card.hi{background:linear-gradient(135deg,var(--hot-soft),var(--surface) 70%)}
.ext-name{font:800 1.6rem/1.05 var(--display);font-variation-settings:"wdth" 82}
.ext-card .tag.big{font-size:clamp(1.9rem,5vw,2.8rem);margin:.4rem 0}
.ext-k{font-size:.9rem;color:var(--muted)}.ext-k b{color:var(--ink);font-family:var(--mono)}
.ext-x b{display:grid;place-items:center;width:4.6rem;height:4.6rem;border-radius:50%;background:var(--ink);color:var(--bg);font:800 1.5rem var(--display)}
.ext-scale{display:grid;gap:.5rem;margin-top:1.2rem}
.ext-scale div{display:grid;grid-template-columns:11rem 1fr;gap:.8rem;align-items:center;font-size:.85rem;color:var(--muted)}
.ext-scale span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ext-scale i{display:block;height:.8rem;border-radius:99px;background:var(--hot)}.ext-scale i.lo{background:var(--s4);min-width:4px}
@media (max-width:760px){.ext{grid-template-columns:1fr}.ext-x{justify-self:center;margin:-1.6rem 0;position:relative;z-index:1}.ext-x b{width:3.6rem;height:3.6rem;font-size:1.15rem;box-shadow:0 0 0 5px var(--bg)}.ext-scale div{grid-template-columns:7rem 1fr}}
/* menetelmä */
.how-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2rem;align-items:start}
@media (max-width:860px){.how-grid{grid-template-columns:1fr}}
.how-steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.how-steps>li{display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;padding-bottom:1.3rem;position:relative}
.how-steps>li:not(:last-child)::after{content:"";position:absolute;left:1.27rem;top:2.7rem;bottom:.2rem;width:2px;background:var(--line)}
.hs-n{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--accent);color:#fff;font:800 1.1rem var(--display)}
.hs-n.hot{background:var(--hot);color:#1A0E04}
.how-steps h3{margin:.45rem 0 .25rem}.how-steps p{margin:0;color:var(--muted)}
.comps{list-style:none;padding:0;margin:.6rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem}
.comps li{font-size:.8rem;font-weight:600;padding:.25rem .65rem;border-radius:99px;background:var(--s1);color:var(--ink);border:1px solid var(--line)}
.how-card{margin:0;display:grid;gap:.8rem}
.how-fig{width:100%;height:auto}
.how-fig .ax{stroke:var(--line);stroke-width:1.5}
.how-fig .axl{font:500 10px var(--body);fill:var(--muted)}
.how-fig .fit{stroke:var(--ink);stroke-width:2;stroke-dasharray:6 5;opacity:.55}
.how-fig .pt{fill:var(--s3);opacity:.75}
.how-fig .pt.good{fill:var(--s5);opacity:1}.how-fig .pt.bad{fill:var(--hot);opacity:1}
.how-fig .dev{stroke:var(--hot);stroke-width:2}.how-fig .dev.up{stroke:var(--s5)}
.how-fig .lbl{font:700 12px var(--mono)}.how-fig .lbl.good{fill:var(--s5)}.how-fig .lbl.bad{fill:var(--hot)}
.how-fig .lbls{font:500 9.5px var(--body);fill:var(--muted)}
.scale i{display:block;height:.6rem;border-radius:99px;background:linear-gradient(90deg,var(--hot),var(--s1) 50%,var(--s5))}
.scale div{display:flex;justify-content:space-between;font:600 .75rem var(--mono);color:var(--muted);margin-top:.3rem}
.scale small{display:block;font:500 .7rem var(--body);text-align:center}
.scale div span:nth-child(2){text-align:center}
.how-facts{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.how-facts li{display:grid;gap:.2rem;padding:1rem 1.1rem;border-radius:var(--r);background:var(--sunk)}
.how-facts span{font-size:.88rem;color:var(--muted)}
@media (max-width:700px){.how-facts{grid-template-columns:1fr}}

.ext-tabs{margin:1rem 0 1.4rem}
.ext-title{font-size:clamp(1.25rem,2.6vw,1.6rem);margin-bottom:.3rem}
.ext-panel .sub{margin-bottom:1.1rem}
@media (max-width:600px){.ext-tabs button{padding:.5rem .4rem;font-size:.82rem}}

/* vertailutyökalu */
.vx-top{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between}
#vx-q{flex:1;max-width:22rem;min-width:12rem;font:500 1rem var(--body);padding:.65rem 1rem;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink)}
.vx-presets{margin:1.2rem 0 1rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.chip{font:600 .86rem var(--body);padding:.5rem .9rem;border-radius:99px;border:1px solid var(--line);background:var(--hot-soft);color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--hot);color:#1A0E04;border-color:var(--hot)}
.vx-filters{margin-bottom:1.2rem}
.vx-filters summary{cursor:pointer;font:700 1rem var(--display);display:flex;gap:.6rem;align-items:center}
.vx-filters summary b{font:600 .78rem var(--body);background:var(--accent);color:#fff;border-radius:99px;padding:.1rem .55rem}
.vx-filters summary b:empty{display:none}
.vx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.9rem 1.4rem;margin-top:1rem}
.vx-f label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.84rem;font-weight:600;margin-bottom:.3rem}.vx-f label small{color:var(--muted);font-weight:500}
.vx-mm{display:grid;grid-template-columns:1fr auto 1fr;gap:.4rem;align-items:center;color:var(--muted)}
.vx-mm input{width:100%;min-width:0;font:500 .9rem var(--mono);padding:.5rem .6rem;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.vx-mm input:focus{outline:none;border-color:var(--accent)}
.vx-tbl{max-height:none}
.vx-tbl th button{all:unset;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;white-space:nowrap}
.vx-tbl th button:hover,.vx-tbl th button.on{color:var(--accent)}
.vx-tbl td.on{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.vx-tbl tr.nat td{background:var(--sunk);font-weight:700;color:var(--muted)}
.vx-tbl th:first-child,.vx-tbl td:first-child{position:sticky;left:0;background:var(--surface);z-index:1;box-shadow:1px 0 0 var(--line)}
.vx-tbl tr.nat td:first-child{background:var(--sunk)}
.vx-tbl td:first-child a{text-decoration:none;font-weight:600}.vx-tbl td:first-child small{color:var(--muted);font-family:var(--mono);font-weight:500;margin-left:.2rem}
.vx-empty{padding:2rem;text-align:center;color:var(--muted);font-family:var(--body);white-space:normal}
@media (max-width:600px){.vx-top .seg{width:100%}#vx-q{max-width:none}.vx-grid{grid-template-columns:1fr 1fr;gap:.7rem}.vx-f label{font-size:.78rem}.vx-tbl td:first-child{max-width:9rem;overflow:hidden;text-overflow:ellipsis}}
.vx-grid::after{content:""}
.vx-hint{font-size:.74rem;color:var(--muted)}
.vx-tbl td .vx-sub{display:block;margin:0;font:500 .74rem var(--body);color:var(--muted)}

/* mainospaikat: varattu korkeus estää sivun hyppimisen mainoksen latautuessa */
.ad{display:grid;place-items:center;position:relative;margin:1.4rem auto;min-height:100px;max-width:970px;border-radius:10px;overflow:hidden}
.ad-l{position:absolute;top:.3rem;left:.6rem;font:600 .62rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ad ins{width:100%;min-height:90px}
.ad-home1,.ad-home2{margin-top:3rem;min-height:250px}
.ad-ph{background:repeating-linear-gradient(135deg,var(--sunk) 0 12px,transparent 12px 24px);border:1.5px dashed var(--line);color:var(--muted);font-size:.85rem;font-weight:600}
@media (max-width:600px){.ad{min-height:100px}.ad-home1,.ad-home2{min-height:280px}}
footer.site .wrap{grid-template-columns:1.5fr 1fr 1.3fr 1fr 1.2fr}
@media (max-width:1000px){footer.site .wrap{grid-template-columns:1fr 1fr}}
.prose{max-width:44rem}.prose h2{margin-top:2rem}.prose p{margin:.6rem 0}
.ad-top{margin:1rem auto 0}
@media (max-width:600px){main{padding-top:1.1rem}.ad-top{margin-top:.8rem}}

/* logon elävä valo */
.lg-cone{opacity:.6;transform-origin:50% 74%;animation:lgCone 4.8s ease-in-out infinite}
.lg-halo{opacity:.7;animation:lgHalo 4.8s ease-in-out infinite}
.lg-h{animation:lgBulb 4.8s ease-in-out infinite}
@keyframes lgCone{0%,100%{opacity:.5;transform:scaleX(1)}50%{opacity:.75;transform:scaleX(1.04)}61%{opacity:.42}63%{opacity:.72}}
@keyframes lgHalo{0%,100%{opacity:.6}50%{opacity:.95}61%{opacity:.45}63%{opacity:.9}}
@keyframes lgBulb{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}61%{filter:brightness(.9)}63%{filter:brightness(1.1)}}
@media (prefers-reduced-motion:reduce){.lg-cone,.lg-halo,.lg-h{animation:none}}
/* avausanimaatio: peittää sisällön, kunnes skripti ottaa ohjat (varmistus: häviää itsestään) */
html.intro body::before{content:"";position:fixed;inset:0;background:var(--bg);z-index:999;animation:introFailsafe .4s 2.6s forwards}
@keyframes introFailsafe{to{opacity:0;visibility:hidden}}
.intro-ov{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--bg);pointer-events:none}
.intro-ov .logo-i{width:min(42vw,200px);height:auto;transform-origin:0 0;will-change:transform}
.intro-ov .lg-cone,.intro-ov .lg-halo,.intro-ov .lg-h{animation:none}
.ad-bottom{margin:0 auto}
main:has(+ .wrap > .ad-bottom){padding-bottom:.6rem}
.wrap:has(> .ad-bottom) + footer.site{margin-top:1.4rem}
.hero-side{display:grid;gap:1rem}.hero-side .ad{margin:0;width:100%}
.f-co{font-size:.82rem;color:var(--fmut)}
.only-mob{display:none}
@media (max-width:700px){.only-desk{display:none}.only-mob{display:revert}}
.ad.ad-off,.ad:has(ins[data-ad-status="unfilled"]){display:none!important}
.ad ins{background:transparent}

/* ── v1.1: pisteiden selitykset ── */
.neutral{color:var(--muted)}
.scorehelp{font-size:.84rem;color:var(--muted);margin:0 0 .8rem;padding:.7rem .9rem;background:var(--sunk);border-radius:10px;line-height:1.5}
.scorehelp b{color:var(--ink)}
.rank .sc{display:grid;justify-items:end;gap:.15rem}
.sc-l{font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sc-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.verdict{display:block;font:700 1.15rem/1.2 var(--display);font-variation-settings:"wdth" 90}
.rankline{display:block;font-size:.88rem;opacity:.85;margin-top:.15rem}
.sc-note{margin:0;font-size:.8rem;opacity:.8}.sc-note a{color:inherit}
.scorecard .tag.muted-on-dark{background:color-mix(in srgb,var(--bg) 22%,transparent);color:var(--bg)}
.scorecard .tag.muted-on-dark small{color:var(--bg)}
.scorecard .tag.muted-on-dark::before{background:var(--ink)}
/* hero: haku ensisijaisena toimintona */
.searchlabel{display:block;margin:1.8rem 0 .5rem .2rem;font:700 1rem var(--body);color:var(--ink)}
.searchlabel + .search{margin-top:0}
.search input{border-color:var(--accent);border-width:2px;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 12%,transparent)}
/* suodatinpaneeli */
details.controls>summary{display:flex;align-items:center;gap:.6rem;cursor:pointer;font:700 1rem var(--display);list-style:none;min-height:2.75rem}
details.controls>summary::-webkit-details-marker{display:none}
details.controls>summary::after{content:"";margin-left:auto;width:.55rem;height:.55rem;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
details.controls[open]>summary::after{transform:rotate(-135deg)}
details.controls[open]{display:grid;gap:1.1rem}
.fcount{font:600 .75rem var(--body);background:var(--accent);color:#fff;border-radius:99px;padding:.15rem .55rem}
.fcount:empty{display:none}
/* taulukot: rivien otsikot, lukittu ensimmäinen sarake ja vierityksen vihje */
.tbl th[scope=row]{text-align:left;font:500 .92rem var(--body);letter-spacing:0;text-transform:none;color:var(--ink);white-space:nowrap}
.tbl th[scope=row] small{color:var(--muted);font-family:var(--mono)}
.tbl tbody tr:hover td,.tbl tbody tr:hover th{background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.tbl{background:linear-gradient(90deg,var(--surface) 30%,transparent) left/40px 100% no-repeat local,linear-gradient(270deg,var(--surface) 30%,transparent) right/40px 100% no-repeat local,radial-gradient(farthest-side at 100% 50%,color-mix(in srgb,var(--ink) 18%,transparent),transparent) right/14px 100% no-repeat scroll,var(--surface)}
@media (max-width:700px){
.tbl th:first-child,.tbl td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--line)}
.tbl th[scope=row]{max-width:10.5rem;overflow:hidden;text-overflow:ellipsis}
th,td{padding:.7rem .7rem}
}
/* mobiili: tiivis aluelista (nimi ja pisteet ensimmäisellä rivillä, tunnusluvut toisella) */
@media (max-width:600px){
.rank{gap:.4rem}
.rank a{grid-template-columns:1.9rem minmax(0,1fr) auto;padding:.65rem .75rem;gap:.1rem .6rem;min-height:3.5rem}
.rank .pos{font-size:1.3rem}
.rank .nm{font-size:.95rem}
.rank .chips{gap:0 .1rem;font-size:.78rem;color:var(--muted)}
.rank .chips .pill{background:none;padding:0;font-size:.78rem;font-weight:500;color:var(--muted)}
.rank .chips .pill.hot{color:var(--ink);font-weight:600}
.rank .chips .pill+.pill::before{content:"·";margin:0 .3rem;color:var(--line)}
.rank .tag{font-size:.9rem;padding:.35rem .5rem .35rem .95rem}
.sc-l{font-size:.6rem}
}
/* mobiili: kaupunkinavigaatio tasaisena ruudukkona, riittävän isot kosketuskohteet */
@media (max-width:600px){
.cities{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.25rem;margin-left:0}
.cities a{display:flex;align-items:center;justify-content:center;min-height:2.5rem;padding:.2rem .1rem;font-size:.8rem;background:var(--sunk);border-radius:8px;overflow:hidden;text-overflow:ellipsis}
.cities a[aria-current]{background:var(--ink);color:var(--bg)}
.cta{min-height:2.5rem}
}
/* mobiili: tiiviimpi footer */
@media (max-width:600px){
footer.site{padding-top:2rem;margin-top:1.5rem}
footer.site .wrap{gap:1.4rem 1rem}
.f-col{gap:.15rem}.f-col a{padding:.25rem 0}
.f-bottom{margin-top:1.4rem;flex-direction:column;gap:.3rem}
}
.calc td{white-space:normal;text-align:left}.calc .calc-n{color:var(--muted);font-size:.85rem}
.calc th[scope=row]{white-space:normal}
@media (max-width:600px){nav.f-col[aria-label="Suurimmat kaupungit"]{flex-direction:row;flex-wrap:wrap;gap:.1rem .8rem}nav.f-col[aria-label="Suurimmat kaupungit"] h4{flex-basis:100%}}
.tbl.calc th[scope=row]{max-width:none;white-space:normal;position:static;box-shadow:none}
@media (max-width:600px){
.rank .sc{grid-row:1;align-self:start}
.rank .chips{grid-column:2 / 4;line-height:1.5}
.rank .pos{grid-row:1 / span 2;align-self:center}
details.controls:not([open]){padding-block:.6rem}
}