/*
Theme Name: Liidipalvelu
Description: liidipalvelu.fi:n teema. Ilme, mitat ja värit tulevat mockupista (docs/mockup.html), joka on käyttöliittymän totuus — tämä tiedosto on sen käännös tuotantoon.
Version: 2.0.0
Requires PHP: 8.0
Author: Atkpiste Helsinki Oy
Text Domain: liidipalvelu
*/

/* ═══════════════════════════════════════════════════════════════════
   TYYLIT TULEVAT MOCKUPISTA.

   docs/mockup.html on käyttöliittymän totuus: kun ilme muuttuu, se
   muuttuu ensin mockupissa ja siirretään sitten tänne. Lohkojako ja
   perustelut ovat mockupista sellaisenaan — kaksi eri perustelua
   samalle säännölle tarkoittaisi, että toinen on väärä.

   POIS JÄTETTY: mockupin omat työkalut (näkymävalitsin, demonapit).
   ═══════════════════════════════════════════════════════════════════ */


/* ── Sävykartta: petroli 205°, yksi sävy — vain vaaleus vaihtuu.
   Aksentti on signaalinvihreä (vapaa paikka, osta) ja varoitus
   meripihka (paikkoja vähän). Instituutiosävy, ei startup-ilme. ── */
:root{
  --ink:#122b3d;          /* teksti, petrolin tummin */
  --ink-2:#28465c;
  --muted:#54718a;
  --faint:#8aa0b2;
  --hair:#d9e2ea;
  --hair-strong:#b9c9d6;
  --ground:#f2f5f8;       /* sivun pohja, viileä */
  --surface:#ffffff;
  --surface-2:#e9eff4;
  /* SININEN REFERENSSIKUVAN SKAALAAN (Petri 18.8.2026). Vanha #0f4c74
     oli petroli: siinä on vihreää, ja se kilpaili tuotteen omasta
     signaalinvihreästä. Uusi on pölyinen denim — sama syvyys, mutta
     puhtaasti sininen, joten vihreä saa olla ainoa vihreä. Arvot on
     poimittu kuvasta ja tarkistettu kontrastia vasten. */
  --brand:#2b4763;        /* denim — otsikot, topbar, napit · valk. 9,6:1 */
  --brand-2:#4a6b8c;      /* vaaleampi denim — linkit · 5,6:1 */
  --tint:#e6ecf2;         /* denimin vaalein — korostuspohjat */
  /* MURRETTU EUKALYPTUS (Petri 18.8.2026). Vanha #0d7a52/#2ec27e oli
     täyskylläinen signaalinvihreä, joka huusi petrolin rinnalla. Sävy
     on sama, kylläisyys matalampi ja hitusen sinisempi — se asettuu
     petrolin viereen sen sijaan että kilpailisi siitä. Arvot on
     mitattu kontrastia vasten, ei valittu silmällä. */
  --ok:#3f6f5f;           /* vapaat paikat, osta · valkoinen teksti 5,8:1 */
  --ok-tint:#e9f1ee;      /* merkkipohja · --ok-teksti 5,0:1 */
  /* Rottinki referenssikuvan punoksesta ja puusta. Se on kuvan ainoa
     lämmin sävy, ja huomioväri on ainoa paikka, jossa lämmintä
     tarvitaan: se ei kilpaile sinisen eikä vihreän kanssa vaan
     keskeyttää molemmat. */
  --warn:#7d6033;         /* rottinki: paikkoja vähän, hyvitys · 5,8:1 */
  --warn-tint:#f1e9dc;
  --bad:#8f2d22;
  --r:12px;
  --step--1:14px; --step-0:16px; --step-1:20px; --step-2:26px; --step-3:34px;
  /* Nimet, joita evästekysely ja juridiset sivut käyttävät. Ne tulevat
     asunnonhinta-arvion teemasta, jossa sama merkkaus on jo tuotannossa:
     kaksi eri nimeä samalle sävylle olisi kaksi paikkaa, joista toinen
     unohtuu päivittää. Arvot ovat tämän sivuston omat. */
  --label:12px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --accent:var(--brand);
  --accent-2:var(--brand-2);
  /* Signaalikentän omat sävyt. Kenttä on tumma MOLEMMISSA teemoissa:
     se on kuva eikä pinta, eikä kuva vaihda väriä sen mukaan, mikä on
     sivun pohja. Siksi sen päällä olevat tekstivärit ovat kiinteitä
     eivätkä tokeneita — muuten vaalea teema kirjoittaisi tummaa
     tekstiä tummalle kartalle. */
  --kentta-1:#16273a; --kentta-2:#1d3448; --kentta-3:#26455f;
  --kentta-solmu:rgba(163,196,222,.5);
  /* Kartan lämmin sävy: pääväylät. Oikeat kartat erottavat pääväylän
     omalla lämpimällä värillään — tässä se on referenssikuvan
     rottinki, jolloin kartta saa saman puun ja punoksen sävyn. */
  --kentta-vayla:#b08550;
  /* Puu ja punos referenssikuvasta. Sivulla on kaksi kylmää pintaa,
     valkoinen ja denim; lämmin kaista niiden välissä antaa sivulle
     saman rytmin kuin kuvassa on lattian ja seinän välillä. */
  --puu:#b08550;          /* punos: merkit ja pinnat */
  --puu-tumma:#6f5630;    /* puu tekstinä · valkoisella 6,9:1 */
  --puu-tint:#f3ece2;
  --puu-viiva:#e3d6c3;
  --ok-kirkas:#7fbda6;    /* signaali tummalla: --ok katoaa kenttään */
}
:root[data-theme="dark"]{
  --ink:#e2ecf3; --ink-2:#c2d3e0; --muted:#8fa9bc; --faint:#5f7789;
  --hair:#22384a; --hair-strong:#35506a;
  --ground:#0b1620; --surface:#122333; --surface-2:#1a3042;
  --brand:#7ea6c8; --brand-2:#9cbcd8; --tint:#1c3145;
  --ok:#8cc7b1; --ok-tint:#1b342c;
  --warn:#c9a468; --warn-tint:#33291a;
  --bad:#e07a6d;
  --kentta-1:#101d2c; --kentta-2:#182b3c; --kentta-3:#213a51;
  --puu:#c9a468; --puu-tumma:#d9bd8c; --puu-tint:#241d14; --puu-viiva:#3a2f1f;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:var(--step-0);line-height:1.55;color:var(--ink);background:var(--ground)}
h1,h2,h3{line-height:1.2;text-wrap:balance}
h1{font-size:var(--step-3);font-weight:800}
h2{font-size:var(--step-2);font-weight:750}
h3{font-size:var(--step-1);font-weight:700}
p{max-width:64ch}
a{color:var(--brand);text-underline-offset:3px}
button{font:inherit;cursor:pointer}
input,select{font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--hair-strong);border-radius:8px;padding:10px 12px;width:100%}
.wrap{max-width:1020px;margin:0 auto;padding:0 20px}
.num{font-variant-numeric:tabular-nums}

/* ── kehys ── */
.topbar{position:sticky;top:0;z-index:30;background:var(--surface);
  /* Lämmin viiva heti sivun yläreunassa: sävy on läsnä ennen kuin
     kukaan on vierittänyt mihinkään. */
  border-bottom:1px solid var(--puu-viiva)}
.topbar .wrap{display:flex;align-items:center;gap:18px;height:60px}
.logo{font-size:19px;font-weight:800;letter-spacing:-.015em;color:var(--ink);
  text-decoration:none;white-space:nowrap}
/* Tunnuksen sininen osa on omalla sävyllään eikä brändivärillä:
   brändiväri on nappien ja otsikoiden syvä denim, joka valkoisella
   pohjalla sulautui mustaan "liidi"-osaan. Vaaleampi erottaa osat
   toisistaan ja pitää silti 5,6:1 kontrastin. */
.logo b{color:#4a6b8c}
.logo::after{content:'.';color:var(--ok);font-weight:800}
.topnav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
.topbar .cta{margin-left:0}
.topnav button{background:none;border:0;padding:8px 12px;border-radius:8px;
  color:var(--ink-2);font-weight:600;font-size:var(--step--1)}
.topnav button:hover{background:var(--surface-2)}
.topnav .cta,.topbar .cta{background:var(--brand);color:#fff}
.topnav .cta:hover,.topbar .cta:hover{background:var(--brand-2)}
.topbar .cta{padding:8px 13px;border-radius:8px;font-weight:600;
  font-size:var(--step--1);text-decoration:none;white-space:nowrap}
/* Kolmen pisteen valikko: piilossa leveällä ruudulla, koska silloin
   linkit mahtuvat riville eikä ylimääräistä klikkiä tarvita. */
.nav-avaa{display:none;border:0;background:none;color:var(--muted);
  width:34px;height:34px;padding:0;border-radius:50%;margin-left:auto;
  align-items:center;justify-content:center;cursor:pointer}
.nav-avaa:hover{color:var(--ink);background:var(--surface-2)}
.nav-avaa svg{width:20px;height:20px;fill:currentColor;stroke:none}
@media(max-width:760px){
  .nav-avaa{display:inline-flex}
  .topbar .wrap{position:relative;gap:10px;height:auto;
    padding-top:11px;padding-bottom:11px}
  /* Valikko putoaa palkin alle omana lokerokseen. CTA jää riville,
     koska se on sivun tarkoitus — se ei kuulu piiloon. */
  .topnav{position:absolute;top:100%;right:0;left:0;display:none;
    flex-direction:column;align-items:stretch;gap:0;margin-left:0;
    background:var(--surface);border-top:1px solid var(--hair);
    border-bottom:1px solid var(--hair);
    box-shadow:0 12px 26px rgba(0,0,0,.12);padding:6px 0}
  .topbar.valikko-auki .topnav{display:flex}
  .topnav a{padding:13px 20px;border-radius:0;font-size:var(--step-0)}
  /* Nykyinen sivu ei ole täytetty palkki avattavassa: koko rivin
     levyisenä se näyttää valitulta napilta, jota voisi painaa. Sävy
     riittää kertomaan missä ollaan. */
  .topnav a[aria-current="true"]{background:none;color:var(--brand);
    font-weight:750}
}
/* .view: mockupin näkymävaihto ei kuulu tuotantoon. */
.view.on{display:block;animation:sisaan .22s ease}
@keyframes sisaan{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── yleiskomponentit ── */
.btn{display:inline-block;background:var(--brand);color:#fff;border:0;
  border-radius:10px;padding:13px 22px;font-weight:700;text-decoration:none}
.btn:hover{background:var(--brand-2)}
.btn-osta{background:var(--ok)}
.btn-osta:hover{filter:brightness(1.08);background:var(--ok)}
/* Tummassa teemassa --ok on vaalea salvia, jolla valkoinen teksti jää
   2,2:1-kontrastiin. Teksti kääntyy tummaksi pohjan mukana. */
:root[data-theme="dark"] .btn-osta{color:#07231a}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--hair-strong)}
.btn-ghost:hover{background:var(--surface-2)}
.card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r)}
.pill{display:inline-block;font-size:13px;font-weight:700;border-radius:999px;
  padding:3px 11px;white-space:nowrap}
.pill.ok{background:var(--ok-tint);color:var(--ok)}
.pill.warn{background:var(--warn-tint);color:var(--warn)}
.pill.off{background:var(--surface-2);color:var(--faint)}
.eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.13em;
  font-weight:700;color:var(--brand)}
.selite{font-size:var(--step--1);color:var(--muted)}
section.lohko{padding:52px 0}
section.lohko.tint{background:var(--surface)}
/* Puukaista: yksi lämmin osio sinisen kentän ja valkoisten osioiden
   välissä. Rajaviivat ovat samasta perheestä, jottei kaista näytä
   liimatulta. */
section.lohko.puu{background:var(--puu-tint);
  border-top:1px solid var(--puu-viiva);border-bottom:1px solid var(--puu-viiva)}
section.lohko.puu .tiilet{background:transparent;border:1px solid var(--puu-viiva)}
section.lohko.puu input[type=range]{accent-color:var(--puu)}
section.lohko.puu .card{border-color:var(--puu-viiva)}

/* ── liidikortti (sama tietoraja kuin card_public) ── */
.kortti{padding:16px;display:flex;flex-direction:column;gap:8px}
.kortti-yla{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.kortti-alue{font-weight:750;font-size:17px}
.kortti-meta{font-size:var(--step--1);color:var(--muted)}
.kortti-rivi{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:var(--step--1);color:var(--ink-2)}
.kortti-alaosa{display:flex;justify-content:space-between;align-items:center;gap:10px;
  flex-wrap:wrap;margin-top:4px}
.kortti-hinta{font-weight:800;font-size:19px;color:var(--puu-tumma)}
.kortti.myyty{opacity:.55}
.kortti .btn-osta{padding:11px 18px}

/* ── yhteystietopaljastus. Sumennus on ESITYSTAPA: tuotannossa data
   haetaan palvelimelta vasta oston jälkeen. ── */
.yhteys{border-top:1px dashed var(--hair-strong);padding-top:10px;margin-top:4px}
.yhteys-sisus{filter:blur(7px);user-select:none;transition:filter .8s ease .15s}
.yhteys.auki .yhteys-sisus{filter:none;user-select:auto}
.yhteys-nimi{font-weight:800;font-size:18px}
.yhteys-toimet{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.yhteys-toimet a{flex:1;text-align:center;text-decoration:none;font-weight:700;
  border-radius:9px;padding:11px 8px;font-size:var(--step--1)}
.yhteys-toimet .soita{background:var(--ok);color:#fff}
.yhteys-toimet .viesti{background:var(--surface-2);color:var(--ink)}
.yhteys-lukko{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);
  margin-top:6px}
.yhteys.auki .yhteys-lukko{display:none}

/* ── puhelinkehys ── */
.puhelin{width:min(370px,100%);margin:0 auto;background:var(--surface);
  border:1px solid var(--hair-strong);border-radius:34px;padding:14px 12px 18px;
  box-shadow:0 18px 44px -22px rgba(15,40,60,.35)}
.puhelin-pykala{width:110px;height:22px;background:var(--ground);
  border-radius:0 0 14px 14px;margin:-14px auto 8px}
.puhelin-otsikko{text-align:center;font-size:13px;color:var(--muted);
  padding-bottom:8px;border-bottom:1px solid var(--hair)}
.puhelin-sisus{padding:12px 4px 0;display:flex;flex-direction:column;gap:10px;
  min-height:340px}
.sms{max-width:86%;border-radius:16px;padding:10px 13px;font-size:14px;line-height:1.45}
.sms.saapuva{background:var(--surface-2);border-bottom-left-radius:5px;align-self:flex-start}
.sms.oma{background:var(--brand);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.sms .aika{display:block;font-size:11px;color:var(--faint);margin-top:4px}
.sms.oma .aika{color:rgba(255,255,255,.7)}
.sms a{color:inherit;font-weight:700}
.sms.uusi{animation:smsSisaan .5s ease}
@keyframes smsSisaan{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── sähköpostimockup ── */
.mail{overflow:hidden}
.mail-otsake{background:var(--brand);color:#fff;padding:14px 18px;font-weight:700}
.mail-runko{padding:16px 18px;font-size:var(--step--1)}
.mail-runko table{width:100%;border-collapse:collapse}
.mail-runko td{padding:5px 0;vertical-align:top}
.mail-runko td:first-child{color:var(--muted);width:38%}
.mail-runko td:last-child{font-weight:650}
.mail-nappi{display:inline-block;background:var(--brand);color:#fff;border-radius:8px;
  padding:10px 16px;font-weight:700;text-decoration:none;margin-top:12px}
.mail-meta{font-size:12px;color:var(--muted);padding:8px 18px;border-bottom:1px solid var(--hair)}

/* ── työpöytä ── */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}
.tabs button{background:transparent;border:1px solid var(--hair-strong);border-radius:9px;
  padding:9px 16px;font-weight:650;color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.tiilet{display:flex;gap:12px;flex-wrap:wrap;background:var(--tint);
  border-radius:var(--r);padding:14px 16px;margin:16px 0}
.tiili{flex:1 1 120px}
.tiili b{display:block;font-size:21px}
.tiili span{font-size:12px;color:var(--muted)}

/* ── etusivun erikoislohkot ── */
/* ── HERO: signaalikenttä ──────────────────────────────────────────
   Asunnonhinta-arviossa hero on maisema, koska myyjä katsoo kotia.
   Välittäjä ei katso maisemaa — hän katsoo aluetta, jolla on
   kilpailijoita. Siksi tämä hero on kartta ja sen päällä tapahtuma:
   signaali lähtee myyjästä, kulkee aluerajojen yli ja tavoittaa
   jokaisen välittäjän samalla hetkellä. Kolme ensimmäistä jää
   vihreäksi. Sivun ainoa kohta, jossa tuotteen sääntö kerrotaan
   ilman sanoja.

   Kenttä on OMA KERROKSENSA heron takana eikä taustakuva: siihen
   piirretään kartta, solmut ja pulssi, ja sisältö elää sen päällä
   omassa z-tasossaan. */
/* KENTTÄ ULOTTUU REUNASTA REUNAAN, TEKSTI EI (Petri 18.8.2026).
   Kartta on kuva ja saa jatkua ruudun laitaan asti, mutta heron teksti
   on samaa tekstipalstaa kuin ylävalikon logo ja alempien osioiden
   otsikot — jos se olisi sisennetty kehyksen omalla padingilla,
   sivulla olisi kaksi eri vasenta reunaa. Siksi kehys on kehystämätön
   ja sisältö kulkee saman .wrapin läpi kuin kaikki muukin. */
.hero-kehys{position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 18% 12%, var(--kentta-3) 0%, transparent 62%),
    linear-gradient(160deg, var(--kentta-2) 0%, var(--kentta-1) 100%);
  isolation:isolate}
.kentta{position:absolute;inset:0;z-index:0;pointer-events:none}
/* Sisältö kentän päälle omaan z-tasoonsa. Ilman tätä .wrap jäisi
   kartan alle, koska kartta on absoluuttinen. */
.hero-kehys > .wrap{position:relative;z-index:1}
.kentta svg{width:100%;height:100%;display:block}
/* Varjostus tekstipuolelle: kartta on konteksti eikä saa kilpailla
   otsikon kanssa. Gradientti eikä laatikko, joten reunaa ei synny —
   kuva jatkuu, kontrasti vain kasvaa siellä missä luetaan. */
.kentta::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(6,22,36,.72) 0%, rgba(6,22,36,.38) 34%, rgba(6,22,36,0) 62%)}

/* KARTTA RAKENTUU KORTTELEISTA, EI VIIVOISTA (Petri 18.8.2026).
   Viivaruudukko monikulmiolla leikattuna näytti revityltä
   ruutupaperilta: katu katkesi keskelle korttelia, eikä yksikään
   viiva päättynyt mihinkään. Kun piirretään täytetyt korttelit ja
   jätetään niiden väliin rako, katuverkko syntyy itsestään —
   jatkuvana, oikean levyisenä ja aina korttelin reunaa myöten. Näin
   oikeatkin kartat toimivat pienellä zoomilla: katu ei ole piirretty
   viiva vaan se, mihin ei ole rakennettu.

   Kaupunginosilla on omat suuntansa. Niiden rajat ovat katuja, joten
   suunnanvaihdos lukee bulevardina eikä repeämänä. */
.korttelit rect{fill:rgba(163,196,222,.10)}
/* Kaupunginosien rajat ovat bulevardeja. Osat JAKAVAT kankaan eivätkä
   makaa toistensa päällä: aiemmin kaksi eri suuntaista ruudukkoa näkyi
   samassa kohdassa läpi toistensa, eikä mikään oikea kaupunki näytä
   siltä. Leveä pohjanvärinen nauha pyyhkii rajalla leikkautuneet
   korttelinpätkät, kapea katupinta jää päälle. */
/* Pääväylä piirretään kahdesti: leveä pohjanvärinen nauha pyyhkii
   korttelit alleen, kapeampi katupinta jää päälle. Ilman pyyhkivää
   nauhaa väylä kulkisi korttelien päällä kuin viiva paperilla. */
/* KOLME PÄÄVÄYLÄÄ, EI YHTÄ RISTEYSTÄ (Petri 18.8.2026). Edellinen
   versio kasvatti kaupungin säteittäin yhdestä keskustasta, jolloin
   seitsemän väylää kohtasi yhdessä näkyvässä pisteessä ja kuvio luki
   joulutähtenä. Kolme riittää kertomaan, että kartalla on hierarkia;
   ne kulkevat kankaan poikki eri suuntiin kohtaamatta toisiaan
   samassa pisteessä.

   Jokainen tie piirtyy kahdesti: pohjanvärinen nauha pyyhkii
   korttelit alleen, katupinta jää päälle. Ilman pyyhkivää nauhaa tie
   kulkisi korttelien päällä kuin viiva paperilla. */
.tie-pohja path{fill:none;stroke:var(--kentta-1);stroke-width:10;stroke-linecap:round}
.tie path{fill:none;stroke:var(--kentta-vayla);opacity:.40;
  stroke-width:3.4;stroke-linecap:round}
/* Kaupunginosien rajat ovat tavallisia katuja eivätkä bulevardeja:
   leveä nauha tekisi niistä yhtä äänekkäitä kuin pääväylistä, ja
   juuri liika tie oli edellisen version vika. */
.raja-pohja{fill:none;stroke:var(--kentta-1);stroke-width:5}
.raja{fill:none;stroke:rgba(163,196,222,.13);stroke-width:1.4}
/* Vesi ja puistot piirtyvät korttelien päälle: ranta katkaisee
   ruudukon epäsäännöllisesti, ja juuri se erottaa kartan kaaviosta
   silmänräpäyksessä. */
.vesi{fill:#0b1622}
.ranta{fill:none;stroke:rgba(163,196,222,.30);stroke-width:1.6}
.joki{fill:none;stroke:var(--kentta-1);stroke-width:9;stroke-linecap:round}
.joki-reuna{fill:none;stroke:rgba(163,196,222,.22);stroke-width:5;stroke-linecap:round}
.puisto{fill:rgba(127,189,166,.13)}

/* AALLOT LÄHTEVÄT KOHTEESTA JOKA SUUNTAAN (Petri 18.8.2026). Yksi
   valtava kaari luki pyyhkäisynä, ei aaltona. Neljä porrastettua
   rengasta pitää ruudulla koko ajan 2–3 rengasta eri säteillä,
   jolloin silmä näkee leviämisen eikä liikkuvaa viivaa. Ilmoitus
   asunnon myynnistä leviää kartalle — koko tuote yhdessä kuvassa. */
.aalto{fill:none;stroke:var(--ok-kirkas);stroke-width:2;
  transform-origin:560px 330px}
.aalto.a1{animation:aalto 20.8s cubic-bezier(.25,.55,.4,1) infinite}
.aalto.a2{animation:aalto 20.8s cubic-bezier(.25,.55,.4,1) infinite 1.36s}
.aalto.a3{animation:aalto 20.8s cubic-bezier(.25,.55,.4,1) infinite 2.72s}
.aalto.a4{animation:aalto 20.8s cubic-bezier(.25,.55,.4,1) infinite 4.08s}
@keyframes aalto{
  0%{transform:scale(.012);opacity:0}
  5%{opacity:.85}
  32%{opacity:.4}
  48%{transform:scale(1);opacity:0}
  100%{transform:scale(1);opacity:0}
}

/* Kohde on karttamerkki eikä piste: sama pisara kuin sivuston
   tunnuksessa, jolloin merkki ja hero kertovat saman asian kahdessa
   koossa. Hengittää hitaasti, jotta katse löytää lähtöpisteen. */
.kohde{animation:hengitys 20.8s ease-in-out infinite}
.kohde-varjo{fill:rgba(0,0,0,.35)}
.kohde-pin{fill:var(--ok-kirkas)}
.kohde-silma{fill:var(--kentta-1)}
@keyframes hengitys{0%,100%{opacity:.92}50%{opacity:1}}

/* Solmut = alueen välittäjät. Jokainen syttyy sillä hetkellä, kun
   aalto ohittaa sen — viive on laskettu etäisyydestä eikä arvattu,
   joten samanaikaisuus näkyy ilman että sitä tarvitsee selittää.

   `backwards` ja oma fill EIVÄT ole koristetta: ilman niitä elementti
   on animaation viiveen ajan — eli heti sivun auettua — ilman arvoa,
   jolloin SVG:n oletusväri on MUSTA. Kolme mustaa pistettä välähti
   kartalla joka latauksella. */
.solmu{fill:var(--kentta-solmu);animation:syttyy 20.8s ease-out infinite backwards}
@keyframes syttyy{
  0%,6%{fill:var(--kentta-solmu);r:4}
  12%{fill:#cfe8f7;r:5.5}
  34%{fill:var(--kentta-solmu);r:4}
  100%{fill:var(--kentta-solmu);r:4}
}

/* Kolme ensimmäistä jää vihreäksi ja saa renkaan. Tässä on koko tuote
   yhdessä kuvassa — muut himmenevät takaisin. */
.lunastettu{fill:var(--kentta-solmu);
  animation:lunastus 20.8s ease-out infinite backwards}
@keyframes lunastus{
  0%,10%{fill:var(--kentta-solmu);r:4}
  18%{fill:var(--ok-kirkas);r:7}
  62%{fill:var(--ok-kirkas);r:6.5}
  78%{fill:var(--kentta-solmu);r:4}
  100%{fill:var(--kentta-solmu);r:4}
}
.lunastettu-keha{fill:none;stroke:var(--ok-kirkas);stroke-width:1.5;
  opacity:0;animation:kehaNaky 20.8s ease-out infinite backwards}
@keyframes kehaNaky{0%,14%{opacity:0;r:6}22%{opacity:.9;r:12}
  62%{opacity:.55;r:12}80%{opacity:0;r:14}100%{opacity:0}}

/* Liike on koriste. Jos käyttöjärjestelmä pyytää sen pois, kenttä jää
   siihen asentoon, jossa se kertoo asian: kolme lunastettua vihreänä. */
@media (prefers-reduced-motion: reduce){
  .aalto,.solmu,.lunastettu,.lunastettu-keha,.kohde{animation:none}
  .lunastettu{fill:var(--ok-kirkas)}
  .lunastettu-keha{opacity:.8}
}

/* Sisältö kentän päällä. Korkeus on mitoitettu niin, että aalto ehtii
   näkyä kokonaan, muttei niin, että ensimmäinen sisältöosio putoaisi
   kokonaan taitteen alle. */
.hero{position:relative;z-index:1;display:grid;
  grid-template-columns:1.08fr .92fr;gap:44px;align-items:center;
  padding:92px 0 96px;min-height:520px}
@media(max-width:840px){.hero{grid-template-columns:1fr;gap:28px;
  padding:52px 0 56px;min-height:0}}
/* Kentän yläotsikko samasta tokenista kuin solmut ja napit: oma
   kovakoodattu vihreä jäi sävynvaihdossa vanhaan perheeseen. */
.hero .eyebrow{color:var(--ok-kirkas)}
/* Heron otsikko on isompi kuin sivun muut h1:t: kenttä on kuva, ja
   kuvan päällä oleva teksti tarvitsee enemmän massaa pysyäkseen
   pääasiana. Skaalautuu leveyden mukaan, jottei se katkea kahdelle
   riville väärästä kohdasta kapealla ruudulla. */
.hero h1{color:#fff;margin:12px 0 16px;
  font-size:clamp(30px,4.4vw,44px);line-height:1.08;letter-spacing:-.025em}
.hero .johdanto{color:#b7cede;font-size:17px;max-width:46ch}
.hero .napit{display:flex;gap:11px;margin-top:26px;flex-wrap:wrap}
/* Napit kentällä: brändipetroli katoaisi petrolipohjaan, joten
   ensisijainen nappi on sama signaalinvihreä kuin kentän solmut ja
   toissijainen lasia. */
.hero .napit .btn{background:var(--ok-kirkas);color:#07231a}
.hero .napit .btn:hover{background:var(--ok-kirkas);filter:brightness(1.07)}
.hero .napit .btn-ghost{background:rgba(255,255,255,.09);color:#eaf3f9;
  border:1px solid rgba(255,255,255,.22)}
.hero .napit .btn-ghost:hover{background:rgba(255,255,255,.15)}
.hero .selite{color:#8aa8bd}
.hero-demo{position:relative}
.hero-demo .kortti{box-shadow:0 30px 60px -30px rgba(3,20,34,.75)}
.hero-demo .leima{position:absolute;top:-13px;right:14px;
  background:var(--ok-kirkas);color:#07231a;
  font-size:12px;font-weight:800;border-radius:999px;padding:4px 12px;
  text-transform:uppercase;letter-spacing:.06em;z-index:2}
.askeleet{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
@media(max-width:760px){.askeleet{grid-template-columns:1fr}}
.askel{padding:18px}
.askel .nro{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:800;margin-bottom:10px}
.lupaukset{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:24px}
.lupaus{padding:16px 18px}
.lupaus b{display:block;margin-bottom:4px}
.lupaus p{font-size:var(--step--1);color:var(--muted)}
/* HINNASTO KAHTEEN PALSTAAN. Taulukko, säännöt ja laskutusrivi
   jonottivat kapeana palstana vasemmassa reunassa, jolloin lohkon
   oikea puoli jäi tyhjäksi. Luvut ovat vasemmalla, koska niitä
   silmäillään; säännöt oikealla, koska ne luetaan lauseina. */
.hinnasto-jako{display:grid;grid-template-columns:1.02fr .98fr;
  gap:8px 48px;align-items:start;margin-top:22px}
.hinnasto-taulu{grid-column:1;grid-row:1/3}
.hinnasto-saannot{grid-column:2;grid-row:1}
.hinnasto-jako .huomiorivi{grid-column:2;grid-row:2;margin-top:6px;max-width:none}
@media(max-width:820px){
  .hinnasto-jako{grid-template-columns:1fr;gap:0}
  .hinnasto-taulu,.hinnasto-saannot,.hinnasto-jako .huomiorivi{grid-column:1;grid-row:auto}
  /* Pinottuna taulukko ja säännöt tarvitsevat välin: rinnakkain ne
     erottuvat palstavälistä, allekkain eivät mistään. */
  .hinnasto-saannot{margin-top:22px}
  .hinnasto-jako .huomiorivi{margin-top:26px}
}
/* Hinnastosivu samalla jaolla kuin etusivun lohko: luvut vasemmalle,
   ehdot oikealle. Yhtenä palstana sivun oikea puoli jäi tyhjäksi ja
   lukija joutui vierittämään ehdot esiin, vaikka ne mahtuvat samaan
   näkymään. */
.hinnasto-sivu{display:grid;grid-template-columns:1.02fr .98fr;
  gap:0 48px;align-items:start}
@media(max-width:820px){.hinnasto-sivu{grid-template-columns:1fr}
  .hinnasto-ehdot{margin-top:30px}}
.hinnasto-sivu .hinnasto{max-width:none}
.hinnasto-sivu .alv{color:var(--muted);font-size:var(--step--1);margin-top:14px}
.hinnasto-ehdot h2{font-size:var(--step-1);margin:0 0 8px}
.hinnasto-ehdot h2 + p{margin-bottom:12px}
.hinnasto-ehdot h2 ~ h2{margin-top:28px}
.hinnasto-ehdot p{color:var(--muted);font-size:var(--step--1)}
.hinnasto-ehdot ul{margin:0 0 12px 20px;color:var(--muted);font-size:var(--step--1)}
.hinnasto-ehdot li{margin-bottom:7px}
.hinnasto-ehdot strong{color:var(--ink)}
.hinnasto-saannot p{color:var(--muted);font-size:var(--step--1);margin-bottom:14px}
.hinnasto-saannot p:last-child{margin-bottom:0}
.hinnasto-saannot strong{color:var(--ink)}
/* Taulukolla on oma luettava mittansa omalla sivullaan; etusivun
   kahden palstan ruudukossa palsta määrää leveyden. Ilman tätä
   hinnasto venyi omalla sivullaan koko tekstipalstan levyiseksi. */
.hinnasto{width:100%;border-collapse:collapse;max-width:560px}
.hinnasto-jako .hinnasto{max-width:none}
.hinnasto th,.hinnasto td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--hair)}
.hinnasto th{font-size:13px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);border-bottom:2px solid var(--puu-viiva)}
.hinnasto td:last-child,.hinnasto th:last-child{text-align:right}
.hinnasto td:last-child{font-weight:750;color:var(--puu-tumma)}
.laskuri{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
@media(max-width:760px){.laskuri{grid-template-columns:1fr}}
.laskuri label{display:block;font-size:var(--step--1);font-weight:650;margin:14px 0 4px}
.laskuri input[type=range]{padding:0;border:0;background:none;accent-color:var(--brand)}
.laskuri-arvo{font-weight:750}
.laskuri-tulos{padding:20px}
.laskuri-tulos .iso{font-size:30px;font-weight:800}
/* ── MARKKINATIETO ───────────────────────────────────────────────
   Kolme lukua vierekkäin, sitten menetelmä tekstinä. Järjestys on
   tarkoituksellinen: välittäjä katsoo ensin luvut ja lukee perustelun
   vain jos luku yllättää. Käänteinen järjestys hukkaisi luvut
   kappaleiden sekaan.

   Lohkolla ei ole taustaväriä, koska sen molemmin puolin on värjätty
   lohko (laskuri puulla, hinnasto valkoisella) — kolmas sävy peräkkäin
   tekisi sivusta raidallisen. */
.markkina-luvut{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin:22px 0 34px}
@media(max-width:760px){.markkina-luvut{grid-template-columns:1fr}}
.markkina-luvut .card{padding:20px}
.markkina-luvut .iso{font-size:30px;font-weight:800;margin:4px 0 6px}
.markkina-luvut .selite{display:block}
#markkina h3{margin:30px 0 10px;font-size:var(--step-0)}
#markkina p{max-width:74ch}
.lahderivi{font-size:var(--step--1);color:var(--muted);margin-top:26px;
  padding-top:16px;border-top:1px solid var(--hair);max-width:74ch}

.luvut{display:flex;gap:26px;flex-wrap:wrap}
.luku b{display:block;font-size:32px;font-weight:800}
.luku span{color:var(--muted);font-size:var(--step--1)}
.tulossa{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.tulossa{grid-template-columns:1fr}}
.tulossa .card{padding:18px;opacity:.75}
/* UKK KAHTEEN PALSTAAN. Yhdeksän kysymystä yhtenä kapeana pinona jätti
   lohkon oikean puolen tyhjäksi ja venytti osion korkeaksi. Otsikko ja
   johdanto ovat nyt omana palstanaan vasemmalla, kysymykset oikealla —
   sama jako kuin hinnastossa, jolloin sivulla on yksi rytmi eikä
   kolme.

   Vasen palsta on tarttuva: yhdeksän kysymyksen listaa selatessa
   otsikko katoaisi muuten näkyvistä, eikä lukija näkisi mistä
   osiosta on kyse. */
.ukk-jako{display:grid;grid-template-columns:.84fr 1.16fr;
  gap:0 56px;align-items:start}
.ukk-otsikko{position:sticky;top:84px}
.ukk-lisa{margin-top:18px;color:var(--muted);font-size:var(--step--1)}
.ukk{margin-top:4px}
@media(max-width:860px){
  .ukk-jako{grid-template-columns:1fr}
  .ukk-otsikko{position:static}
  .ukk{margin-top:24px}
}
/* Ylin viiva tekee listasta rajatun: pelkillä alaviivoilla ensimmäinen
   kysymys näyttää irralliselta otsikon alla. */
.ukk details:first-child{border-top:1px solid var(--hair)}
.ukk details{border-bottom:1px solid var(--hair)}
.ukk summary{cursor:pointer;list-style:none;padding:15px 30px 15px 0;font-weight:650;position:relative}
.ukk summary::-webkit-details-marker{display:none}
.ukk summary::after{content:"+";position:absolute;right:2px;color:var(--puu);font-size:20px}
.ukk details[open] summary::after{content:"–"}
.ukk .vastaus{padding:0 0 16px;color:var(--muted);font-size:var(--step--1);max-width:70ch}
/* ── alatunniste ─────────────────────────────────────────────────────
   Sävyt tulevat muuttujista eivätkä sisäänkirjoitetuista hex-arvoista:
   tumma teema vaihtaa pohjan, ja kovakoodattu teksti jäisi silloin
   väärän väriseksi. Rakenne on sama kuin asunnonhinta-arviossa —
   brändilohko, nimetyt linkkisarakkeet ja oma alarivi — koska ne ovat
   saman yhtiön kaksi sivustoa eivätkä kaksi eri tuotetta. */
:root{--foot-bg:#0b1b28; --foot-ink:#eef4f8; --foot-muted:#a9bccb;
  --foot-faint:#7d92a3; --foot-hair:#1d3346;
  /* Alatunniste on tumma molemmissa teemoissa, joten sen puuviiva
     on oma sävynsä eikä vaalean teeman --puu-viiva. */
  --puu-viiva-tumma:#3c3222}
:root[data-theme="dark"]{--foot-bg:#081019; --foot-ink:#e2ecf3;
  --foot-muted:#93a9ba; --foot-faint:#6b8092; --foot-hair:#16283a;
  --puu-viiva-tumma:#33291a}
footer{background:var(--foot-bg);color:var(--foot-muted);margin-top:56px}
footer .wrap{padding:40px 20px 0;font-size:var(--step--1)}
.foot-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px 26px}
@media(max-width:760px){.foot-cols{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.foot-cols{grid-template-columns:1fr}}
footer .lede{color:var(--foot-muted);max-width:34ch;line-height:1.55;
  margin:10px 0 0}
/* Lupaus samalla ladonnalla kuin kuvaus sen yllä: kaksi peräkkäistä
   kappaletta samassa sarakkeessa eivät saa olla eri tuotetta. Lihavoitu
   kärki ei saa omaa väriä — lihavointi erottaa sen jo. */
footer .free{color:var(--foot-muted);max-width:34ch;line-height:1.55;
  margin:12px 0 0}
footer h4{font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--foot-faint);font-weight:700;margin:0 0 12px}
footer ul{list-style:none;padding:0;margin:0;display:flex;
  flex-direction:column;gap:9px}
footer a{color:var(--foot-ink);text-decoration:none}
footer a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 26px;
  margin-top:34px;padding:18px 0 26px;border-top:1px solid var(--puu-viiva-tumma);
  color:var(--foot-faint);font-size:12px}
footer .logo{color:var(--foot-ink)}
/* Alatunnisteessa sama osa on paljon vaaleampi: pohja on tumma, ja
   vaalean teeman --brand-2 jäi siinä 3,1:1 kontrastiin eli tummaksi
   läiskäksi valkoisen tekstin vieressä. Nyt se on lähellä valkoista
   osaa mutta yhä erottuva. */
footer .logo b{color:#9cbcd8}
footer .logo::after{color:var(--ok-kirkas)}

/* ── lomakkeet (liity/kirjaudu/vahti) ──
   [hidden] on selaimen oma sääntö, ja MIKÄ TAHANSA tekijätyyli, joka
   asettaa display-arvon, voittaa sen — myös .lomake{display:flex}.
   Juuri tähän kaatuivat kirjautumis- ja liittymislomakkeen
   koodivaiheet: ne näkyivät sivulla ennen kuin koodia oli lähetetty.
   Sääntö on globaali, koska sama ansa toistuu jokaisessa vaiheittain
   paljastuvassa lomakkeessa. */
[hidden]{display:none !important}
.lomake{max-width:480px;display:flex;flex-direction:column;gap:13px}
.lomake label{font-size:var(--step--1);font-weight:650}
.lomake label input{margin-top:5px;font-weight:400}
/* Rasti on label kuten muutkin, joten .lomake label -sääntö lihavoisi
   sen tekstin. Ehtolause on luettavaa tekstiä eikä kentän otsikko. */
.lomake label.rasti,.rasti{display:flex;gap:10px;align-items:flex-start;
  font-size:var(--step--1);font-weight:400;line-height:1.5}
.rasti input{width:auto;margin-top:3px}
.viesti-ok{color:var(--ok);font-size:var(--step--1);font-weight:650}


/* ── ohituslinkki ─────────────────────────────────────────────────────
   "Siirry sisältöön" on näppäimistökäyttäjän oikopolku valikon ohi. Se
   kuuluu sivulle, muttei näkyviin ennen kuin sarkain osuu siihen.
   Piilotus ei saa olla display:none: silloin sitä ei voi kohdistaa. */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.screen-reader-text:focus-visible{position:fixed;top:12px;left:12px;
  z-index:100;width:auto;height:auto;clip-path:none;margin:0;
  padding:12px 18px;background:var(--surface);color:var(--ink);
  border:2px solid var(--brand);border-radius:8px;
  font-weight:650;text-decoration:none}

/* Valikko ja napit ovat tuotannossa oikeita linkkejä, mockupissa
   näkymää vaihtavia nappeja. Sama ilme molemmille. */
.topnav a{background:none;border:0;padding:8px 12px;border-radius:8px;
  color:var(--muted);font-size:var(--step--1);font-weight:600;
  text-decoration:none;display:inline-block}
.topnav a:hover{color:var(--ink);background:var(--surface-2)}
.topnav a[aria-current="true"]{background:var(--brand);color:#fff}

/* ── evästekysely ───────────────────────────────────────────────────
   LAKISÄÄTEINEN VAIN JOS EI-VÄLTTÄMÄTTÖMIÄ EVÄSTEITÄ ON. Pelkällä
   kirjautumisistunnolla banneria ei saa näyttää lainkaan — turha
   banneri on sekin väärä väite. Tämä mockup olettaa, että analytiikka
   otetaan käyttöön, joten kysely näytetään.

   TRAFICOMIN LINJAUS: hylkäämisen on oltava yhtä helppoa kuin
   hyväksymisen. Siksi Hylkää on bannerissa samalla rivillä ja samman
   kokoisena kuin Hyväksy — ei paneelin takana. */
/* MATALA ALAPALKKI. Koko leveys (kulmakortti kokeiltiin ja hylättiin
   5.8.2026), mutta yhden rivin korkuinen: banneri on velvoite eikä
   sisältöä, joten se saa viedä mahdollisimman vähän ruutua.
   Traficomin vaatimus täyttyy — Hylkää on samalla rivillä ja saman
   kokoisena kuin Hyväksy. */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--surface);border-top:1px solid var(--hair);
  box-shadow:0 -3px 12px rgba(0,0,0,.06)}
.cookie .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-top:8px;padding-bottom:8px}
.cookie p{margin:0;font-size:var(--label);color:var(--muted);flex:1 1 260px}
.cookie p a{color:var(--ink)}
.cookie-napit{display:flex;gap:8px;flex-wrap:wrap}
.cookie-napit .btn{margin:0;padding:6px 12px;font-size:var(--label);
  font-weight:600;border-radius:5px}
.cookie-paneeli{position:fixed;left:0;right:0;bottom:0;z-index:61;
  background:var(--surface);border-top:1px solid var(--hair-strong);
  box-shadow:0 -10px 34px rgba(0,0,0,.16);display:none}
.cookie-paneeli.on{display:block}
.cookie-paneeli .wrap{padding-top:22px;padding-bottom:22px}
.cookie-paneeli h2{display:flex;justify-content:space-between;align-items:center;
  font-size:var(--step-1);margin-bottom:10px}
.cookie-sulje{font:inherit;background:none;border:0;cursor:pointer;
  font-size:var(--step-1);color:var(--muted);padding:4px 8px}
.cookie-sulje:hover{color:var(--ink)}
.cookie-paneeli>.wrap>p{font-size:var(--step--1);color:var(--muted);max-width:70ch}
.cookie-luokka{display:flex;gap:12px;align-items:flex-start;
  padding:12px 0;border-top:1px solid var(--hair)}
.cookie-luokka:first-of-type{border-top:0}
.cookie-luokka input{width:18px;height:18px;margin-top:2px;flex:none;
  accent-color:var(--accent)}
.cookie-luokka b{display:block;font-size:var(--step--1)}
.cookie-luokka span{font-size:var(--label);color:var(--muted);line-height:1.5}
/* Paneelin napit sisällön kokoisina, ei koko leveydeltä: valinta on
   jo tehty ruuduilla, napin tehtävä on vain vahvistaa se. */
.cookie-paneeli .cookie-napit{margin-top:16px;justify-content:flex-end}

/* ── sisältösivut ja juridiset sivut ─────────────────────────────────
   Leipätekstipalsta on kapea tarkoituksella: rivi, joka jatkuu koko
   1080 pikselin levyisenä, on mitattavasti raskaampi lukea. Taulukot
   saavat oman vaakavierityksensä, koska seloste luetaan usein
   puhelimella eikä sivu saa vieriä sivusuunnassa. */
.aha-sisalto{padding:40px 0 64px;max-width:74ch}
.aha-sisalto.aha-levea{max-width:none}
.aha-sisalto h1{margin-bottom:22px}
.aha-runko h2{margin:38px 0 12px;font-size:var(--step-1)}
.aha-runko h3{margin:26px 0 8px}
.aha-runko p{margin:0 0 14px;color:var(--muted);line-height:1.7}
.aha-runko p b,.aha-runko li b{color:var(--ink)}
.aha-runko a{color:var(--accent-2)}
.aha-lista{margin:0 0 16px;padding-left:20px;color:var(--muted);line-height:1.7}
.aha-lista li{margin-bottom:7px}
.aha-runko code{font-family:var(--mono);font-size:.92em;background:var(--surface-2);
  padding:1px 5px;border-radius:3px;color:var(--ink)}
.aha-taulu-kaari{overflow-x:auto;margin:0 0 20px}
.aha-taulu{border-collapse:collapse;width:100%;font-size:var(--step--1)}
.aha-taulu th,.aha-taulu td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;
  border-bottom:1px solid var(--hair);color:var(--muted);line-height:1.6}
.aha-taulu th{color:var(--faint);font-family:var(--mono);font-size:var(--label);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;white-space:nowrap}
.aha-taulu td b{color:var(--ink)}
.aha-paivays{margin-top:34px;padding-top:18px;border-top:1px solid var(--hair);
  font-size:var(--step--1);color:var(--faint)}

/* ── KAAVIOT JA VÄLJEMPI RAKENNE (Petri 17.8.2026) ───────────────────
   Etusivulla oli 24 tekstilaatikkoa ja nolla kuvaa: jokainen lupaus
   oli oma kortti, ja kortti kortin perään lukija lakkaa lukemasta.
   Lupaukset eivät hävinneet vaan vaihtoivat muotoa — tärkein on nyt
   kaavio, loput lyhyitä rivejä ilman kehystä, ja yksityiskohdat ovat
   UKK:ssa jossa ne haetaan silloin kun ne kiinnostavat. */

/* Osioiden väljyys: kaavio tarvitsee ilmaa ympärilleen tai se näyttää
   kuvituskuvalta tekstin seassa. */
section.lohko{padding:76px 0}
@media(max-width:700px){section.lohko{padding:52px 0}}
.lohko > .wrap > h2{max-width:22ch}
.lohko-johdanto{color:var(--muted);max-width:56ch;margin-top:10px;
  font-size:var(--step-0)}

/* Kaavio on leveä ja keskitetty; se skaalautuu ruudun mukana, koska
   viewBox tekee siitä yhden kuvan eikä pinoa laatikoita. */
.kaavio{margin:38px auto 0;max-width:900px}
.kaavio svg{display:block;width:100%;height:auto}
.kaavio-tekstit{display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;margin-top:18px;max-width:900px}
@media(max-width:700px){.kaavio-tekstit{grid-template-columns:1fr;gap:14px}}
.kaavio-tekstit h3{font-size:var(--step-0);font-weight:750;margin-bottom:4px}
.kaavio-tekstit p{color:var(--muted);font-size:var(--step--1);max-width:34ch}

/* Lupaukset ilman kehystä: merkki, väite ja yksi rivi selitystä.
   Kehys ei lisää mitään, kun rivejä on kuusi peräkkäin. */
.vaitteet{display:grid;grid-template-columns:repeat(2,1fr);
  gap:26px 40px;margin-top:34px}
@media(max-width:760px){.vaitteet{grid-template-columns:1fr;gap:22px}}
.vaite{display:flex;gap:14px;align-items:flex-start}
.vaite-merkki{flex:none;width:26px;height:26px;margin-top:1px;
  color:var(--ok)}
.vaite-merkki svg{width:100%;height:100%;display:block;fill:none;
  stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vaite b{display:block;font-size:var(--step-0);font-weight:750;
  color:var(--ink);margin-bottom:3px}
.vaite p{color:var(--muted);font-size:var(--step--1);max-width:40ch}

/* Yksi rivi, jolla on paino: käytetään "tulossa"-tiedoille, jotka eivät
   ansaitse omaa korttia mutta joita ei saa piilottaa. */
.huomiorivi{margin-top:34px;padding:16px 20px;border-left:3px solid var(--hair-strong);
  color:var(--muted);font-size:var(--step--1);max-width:66ch}
.huomiorivi b{color:var(--ink)}