/* ------------------------------------------------------------------
   Petari.fi
   Brändiohjeisto 1.0 / 2026. Yksi tiedosto, ei rakennusvaihetta.
   ------------------------------------------------------------------ */

:root{
  --sininen:#01263E;      /* Petari-sininen: logo, otsikot, tumma tausta */
  --utu:#70899B;          /* utuinen sininen: kuvatekstit, viivat, ikonit */
  --hehku:#C8894A;        /* aamun hehku: korostus ja CTA */
  --hehku-tumma:#B0743A;
  --pilvi:#EDF1F4;        /* pilviharmaa: pinnat ja laatikot */
  --paperi:#FBFAF8;       /* lämmin valkoinen: pääasiallinen tausta */
  --leipa:#33505F;        /* leipäteksti vaalealla */
  --raja:rgba(1,38,62,.14);
  --raja-tumma:rgba(251,250,248,.18);
  --leveys:1140px;
  --kapea:720px;
  --pyoreys:14px;
  --varjo:0 1px 2px rgba(1,38,62,.06), 0 8px 24px rgba(1,38,62,.07);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paperi);
  color:var(--leipa);
  font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.tumma{background:var(--sininen);color:var(--paperi)}

img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{
  font-family:"Hanken Grotesk",-apple-system,Arial,sans-serif;
  color:var(--sininen);
  line-height:1.15;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(34px,5vw,44px);font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(26px,3.4vw,30px);font-weight:700}
h3{font-size:22px;font-weight:700}
h4{font-size:17px;font-weight:700}
body.tumma h1,body.tumma h2,body.tumma h3,body.tumma h4{color:var(--paperi)}

p{margin:0 0 1em;max-width:70ch}
ul,ol{max-width:70ch}

a{color:var(--sininen);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--hehku-tumma)}
body.tumma a{color:var(--paperi)}
body.tumma a:hover{color:var(--hehku)}

:focus-visible{outline:3px solid var(--hehku);outline-offset:2px;border-radius:4px}

.kicker{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--utu);margin:0 0 12px;
}
body.tumma .kicker{color:var(--hehku)}

.wrap{width:min(100% - 40px,var(--leveys));margin-inline:auto}
.kapea{max-width:var(--kapea)}
.wrap.kapea{max-width:none;width:min(100% - 40px,var(--leveys))}
.wrap.kapea > *{max-width:var(--kapea)}

.skip{position:absolute;left:-9999px;top:0;background:var(--hehku);color:#fff;padding:10px 16px;z-index:400}
.skip:focus{left:12px;top:12px}

/* ------------------------------------------------------------ nappula */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:12px 26px;
  background:var(--hehku);color:#fff;
  border:2px solid var(--hehku);border-radius:999px;
  font-weight:700;font-size:17px;line-height:1.2;
  text-decoration:none;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .1s ease;
}
.btn:hover{background:var(--hehku-tumma);border-color:var(--hehku-tumma);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--sininen);border-color:var(--sininen)}
.btn.ghost:hover{background:var(--sininen);color:var(--paperi)}
body.tumma .btn.ghost{color:var(--paperi);border-color:rgba(251,250,248,.55)}
body.tumma .btn.ghost:hover{background:var(--paperi);color:var(--sininen)}
.btn.small{min-height:42px;padding:8px 20px;font-size:15.5px}
.btn-rivi{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px}
.btn-rivi .kevyt{font-size:16.5px}

/* ------------------------------------------------------------ ylapalkki */

header.site{
  position:sticky;top:0;z-index:100;
  background:var(--sininen);
  border-bottom:1px solid rgba(251,250,248,.12);
}
header.site .bar{display:flex;align-items:center;gap:18px;min-height:74px;padding:10px 0}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand .merkki{width:30px;height:30px;flex:0 0 auto}
.brand .sana{
  font-weight:800;font-size:21px;letter-spacing:.14em;
  color:var(--paperi);text-transform:uppercase;
}
.brand img{height:30px;width:auto}          /* leveys n. 136 px, yli minimin 90 px */

nav.main{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
nav.main a,.ryhma-nappi{
  display:inline-block;padding:9px 13px;border-radius:8px;
  color:var(--paperi);text-decoration:none;font-size:16.5px;font-weight:500;
  background:none;border:0;font-family:inherit;cursor:pointer;
}
nav.main a:hover,.ryhma-nappi:hover{background:rgba(251,250,248,.11);color:var(--paperi)}
nav.main a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--hehku)}

.ryhma{position:relative}
.ryhma-nappi[data-aktiivinen]{box-shadow:inset 0 -2px 0 var(--hehku)}
.nuoli{display:inline-block;width:7px;height:7px;margin-left:5px;vertical-align:2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.ryhma-lista{
  position:absolute;top:calc(100% + 6px);left:0;min-width:230px;margin:0;padding:8px;
  list-style:none;background:var(--paperi);border:1px solid var(--raja);
  border-radius:12px;box-shadow:var(--varjo);z-index:120;
}
/* Tarkkuus on oltava suurempi kuin saannolla "nav.main a", joka maalaa
   ylapalkin linkit vaaleiksi. Muuten pudotusvalikon teksti on valkoista
   valkoisella pohjalla eli nakymatonta. */
nav.main .ryhma-lista a{display:block;color:var(--sininen);padding:9px 12px;font-weight:500}
nav.main .ryhma-lista a:hover{background:var(--pilvi);color:var(--sininen)}
nav.main .ryhma-lista a[aria-current="page"]{box-shadow:none;color:var(--hehku-tumma);font-weight:700}

header.site .btn{flex:0 0 auto}

.valikko-nappi{
  display:none;align-items:center;gap:9px;margin-left:auto;
  background:none;border:1px solid rgba(251,250,248,.4);border-radius:999px;
  color:var(--paperi);font-family:inherit;font-size:16px;font-weight:600;
  padding:9px 16px;cursor:pointer;
}
.viivat{display:inline-flex;flex-direction:column;gap:3px;width:16px}
.viivat i{display:block;height:2px;background:currentColor;border-radius:2px}

#mobiilivalikko{background:var(--sininen);border-top:1px solid rgba(251,250,248,.12);padding:8px 0 18px}
#mobiilivalikko ul{list-style:none;margin:0;padding:0}
#mobiilivalikko a{display:block;padding:12px 2px;color:var(--paperi);text-decoration:none;font-size:18px;
  border-bottom:1px solid rgba(251,250,248,.1)}
#mobiilivalikko .mob-otsikko{
  font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hehku);padding:18px 2px 6px}

/* ------------------------------------------------------------ murupolku */

.polku{font-size:15px;color:var(--utu);padding:16px 0 0}
.polku a{color:var(--utu)}
.polku span{margin:0 8px;color:var(--utu)}
.polku > span:last-child{margin-left:0}

/* ------------------------------------------------------------ osiot */

section{padding:64px 0}
section.tiivis{padding:44px 0}
section.pinta{background:var(--pilvi)}
body.tumma section.pinta{background:rgba(251,250,248,.06)}
section + section{padding-top:0}
section.pinta,section.tumma{padding-top:64px !important}
/* Kun varillinen osio paattyy, seuraava vaalea osio tarvitsee oman
   ylatilansa: muuten teksti alkaa heti varirajasta kiinni. */
section.pinta + section,
section.tumma + section{padding-top:64px}
section.pinta + section.tiivis,
section.tumma + section.tiivis{padding-top:44px}

.osio-otsikko{max-width:62ch;margin-bottom:36px}
.osio-otsikko p{font-size:19px;color:var(--leipa)}
body.tumma .osio-otsikko p{color:rgba(251,250,248,.86)}

/* ------------------------------------------------------------ hero */

.hero{
  background:var(--sininen);color:var(--paperi);
  padding:clamp(64px,10vw,120px) 0 clamp(56px,8vw,96px);
  position:relative;overflow:hidden;
}
.hero::after{
  /* Pehmea aamun hehku. Ei rajaa eika reunaa: liukuvari haipuu
     kokonaan nollaan ennen elementin reunaa, jottei synny nakyvaa
     ympyran kaarta tummalla pohjalla. */
  content:"";position:absolute;right:-180px;top:calc(50% - 380px);
  width:760px;height:760px;
  background:radial-gradient(circle,rgba(200,137,74,.26) 0%,rgba(200,137,74,.09) 30%,rgba(200,137,74,0) 56%);
  pointer-events:none;
}
.hero h1{color:var(--paperi);font-size:clamp(38px,6.4vw,64px);font-weight:800;max-width:16ch}
.hero .ingressi{font-size:clamp(19px,2.3vw,22px);max-width:56ch;color:rgba(251,250,248,.90)}
.hero .wrap{position:relative;z-index:2}

/* ------------------------------------------------------------ kortit */

.ruudukko{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
.ruudukko.kaksi{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}

.kortti{
  background:var(--paperi);border:1px solid var(--raja);border-radius:var(--pyoreys);
  padding:28px;box-shadow:var(--varjo);height:100%;
}
.kortti h3{margin-bottom:.4em}
.kortti p:last-child{margin-bottom:0}
.kortti .numero{
  font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.12em;
  color:var(--hehku);display:block;margin-bottom:10px;
}
.kortti .lisaa{display:inline-block;margin-top:14px;font-weight:700;text-decoration:none}
.kortti .lisaa::after{content:" \2192"}
.kortti .lisaa:hover{text-decoration:underline}
body.tumma .kortti{background:rgba(251,250,248,.07);border-color:var(--raja-tumma);box-shadow:none}
body.tumma .kortti p{color:rgba(251,250,248,.86)}

.kortti.korostus{border-color:var(--hehku);border-width:2px}

/* ketju: kolme vaihetta nuolineen */
.ketju{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.ketju .vaihe{
  background:var(--pilvi);border-radius:var(--pyoreys);padding:26px;position:relative;
}
body.tumma .ketju .vaihe{background:rgba(251,250,248,.08)}
.ketju .vaihe h3{font-size:20px}
.ketju .vaihe p{font-size:16.5px;margin-bottom:0}
.ketju .vaihe .numero{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.12em;color:var(--hehku);display:block;margin-bottom:8px}

/* ------------------------------------------------------------ listat */

ul.merkitty{list-style:none;padding:0;margin:0 0 1em}
ul.merkitty li{position:relative;padding-left:26px;margin-bottom:10px}
ul.merkitty li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border-radius:50%;background:var(--hehku);
}

ol.askeleet{list-style:none;counter-reset:a;padding:0;margin:0}
ol.askeleet li{counter-increment:a;position:relative;padding-left:52px;margin-bottom:22px}
ol.askeleet li::before{
  content:counter(a);position:absolute;left:0;top:-2px;
  width:34px;height:34px;border-radius:50%;
  background:var(--sininen);color:var(--paperi);
  display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:15px;
}
ol.askeleet li h3{margin-bottom:.25em}
ol.askeleet li p{margin-bottom:0}
body.tumma ol.askeleet li::before{background:var(--hehku)}

/* ------------------------------------------------------------ hintalaatikko */

.hintalaatikko{
  background:var(--sininen);color:var(--paperi);border-radius:var(--pyoreys);
  padding:34px;display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;
}
.hintalaatikko h2{color:var(--paperi);margin-bottom:.25em}
body.tumma .hintalaatikko{border:1px solid rgba(251,250,248,.22);background:rgba(251,250,248,.05)}
.hintalaatikko p{color:rgba(251,250,248,.88);margin-bottom:0;max-width:52ch}
.hinta-luku{
  font-family:"IBM Plex Mono",monospace;font-size:clamp(30px,4vw,40px);
  color:var(--hehku);display:block;line-height:1.1;
}
.hinta-luku small{display:block;font-size:15px;color:rgba(251,250,248,.8);letter-spacing:.06em;margin-top:8px}

/* ------------------------------------------------------------ taulukko */

.taulu-kaari{overflow-x:auto;margin:0 0 1.5em;border:1px solid var(--raja);border-radius:var(--pyoreys)}
table{border-collapse:collapse;width:100%;font-size:16.5px;background:var(--paperi)}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--raja);vertical-align:top}
th{background:var(--pilvi);color:var(--sininen);font-weight:700;white-space:nowrap}
tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------ FAQ */

details{border-bottom:1px solid var(--raja);padding:6px 0}
details summary{
  cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;
  font-weight:700;font-size:18.5px;color:var(--sininen);
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"";position:absolute;right:6px;top:calc(50% - 5px);
  width:9px;height:9px;border-right:2px solid var(--utu);border-bottom:2px solid var(--utu);
  transform:rotate(45deg);transition:transform .15s ease;
}
details[open] summary::after{transform:rotate(225deg)}
details > div{padding:0 0 18px}
details > div p:last-child{margin-bottom:0}
body.tumma details summary{color:var(--paperi)}
body.tumma details{border-color:var(--raja-tumma)}

/* ------------------------------------------------------------ taydennettava */

.taydenna{
  border-left:4px solid var(--hehku);background:rgba(200,137,74,.10);
  padding:18px 22px;border-radius:0 10px 10px 0;margin:0 0 26px;
}
.taydenna b{color:var(--hehku-tumma);display:block;margin-bottom:6px;font-size:15px;
  font-family:"IBM Plex Mono",monospace;letter-spacing:.06em}
.taydenna p{margin:0;font-size:16.5px}

/* ------------------------------------------------------------ lomake */

form.yhteys{max-width:560px}
label{display:block;font-weight:700;color:var(--sininen);margin:0 0 6px;font-size:16.5px}
input,textarea,select{
  width:100%;min-height:50px;padding:12px 14px;
  border:1px solid var(--utu);border-radius:10px;
  font-family:inherit;font-size:17px;color:var(--leipa);background:#fff;
}
textarea{min-height:130px;resize:vertical}
.kentta{margin-bottom:20px}
.apu{font-size:15px;color:var(--utu);margin:6px 0 0}

/* ------------------------------------------------------------ paatoslohko */

.paatos{background:var(--sininen);color:var(--paperi);padding:70px 0}
.paatos h2{color:var(--paperi)}
.paatos p{color:rgba(251,250,248,.9);font-size:19px}
/* Paatoslohko on aina tumma, myos vaalealla sivulla, joten napin
   vaalea variantti pitaa maaritella tassa erikseen. */
.paatos .btn.ghost{color:var(--paperi);border-color:rgba(251,250,248,.55);background:transparent}
.paatos .btn.ghost:hover{background:var(--paperi);color:var(--sininen)}

/* ------------------------------------------------------------ alatunniste */

footer.site{background:var(--sininen);color:rgba(251,250,248,.86);padding:56px 0 30px;font-size:16px}
footer.site .footgrid{
  display:grid;gap:32px;
  grid-template-columns:1.4fr repeat(var(--sarakkeet,3),1fr);
}
footer.site h4{color:var(--paperi);font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  font-family:"IBM Plex Mono",monospace;font-weight:500;margin-bottom:14px}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:9px}
footer.site a{color:rgba(251,250,248,.86);text-decoration:none}
footer.site a:hover{color:var(--hehku);text-decoration:underline}
footer.site p{color:rgba(251,250,248,.78)}
.footbrand .sana{font-weight:800;font-size:20px;letter-spacing:.14em;color:var(--paperi);text-transform:uppercase}
.footbrand img.footlogo{height:28px;width:auto;margin-bottom:4px}
.laki{margin:38px 0 0;padding-top:20px;border-top:1px solid rgba(251,250,248,.14);
  font-size:14.5px;color:rgba(251,250,248,.62)}

/* ------------------------------------------------------------ mobiili */

@media (max-width:960px){
  nav.main{display:none}
  header.site .btn{display:none}
  .valikko-nappi{display:inline-flex}
  footer.site .footgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:17px}
  section{padding:48px 0}
  .hintalaatikko{padding:26px}
  footer.site .footgrid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

@media print{
  header.site,footer.site,.paatos,.valikko-nappi{display:none}
  body{background:#fff;color:#000;font-size:12pt}
}

/* ==================================================================
   ETUSIVUN OSIOT
   Enemman tyhjaa tilaa ja rohkeampaa typografiaa. Ei korttiruudukkoa.
   Etusivu on tumma, joten varit maaritellaan ensin tummalle pohjalle
   ja vaalea variantti erikseen niita kohtia varten joissa samoja
   elementteja kaytetaan sisaltosivuilla.
   ================================================================== */

/* Hero: rytmilause arvolupauksen alla */
.rytmi{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(15px,1.9vw,18px);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--hehku);margin:26px 0 0;
}

/* Kysymysosio: oikeita kysymyksia isolla */
.kysymykset{padding:clamp(64px,9vw,104px) 0}
.kysymyslista{list-style:none;margin:0;padding:0;max-width:24ch;max-width:min(100%,28ch)}
.kysymyslista{max-width:none}
.kysymyslista li{
  font-size:clamp(23px,3.2vw,34px);
  font-weight:700;line-height:1.25;
  color:var(--paperi);
  border-left:2px solid var(--hehku);
  padding:2px 0 2px 26px;
  margin:0 0 32px;
  max-width:22ch;
  text-wrap:balance;
}
body:not(.tumma) .kysymyslista li{color:var(--sininen)}
@media (min-width:900px){
  .kysymyslista{
    display:grid;grid-template-columns:1fr 1fr;
    gap:34px 56px;
  }
  .kysymyslista li{margin:0}
}

/* Korostettu paatoslause osion lopussa */
.korostettu{
  font-size:clamp(20px,2.6vw,27px);
  font-weight:700;line-height:1.35;
  color:var(--paperi);
  margin:clamp(40px,6vw,64px) 0 0;
  max-width:42ch;text-wrap:balance;
}
body:not(.tumma) .korostettu{color:var(--sininen)}

/* Nelja hyotya: numeroitu lista, ei kortteja */
.hyodyt{list-style:none;counter-reset:h;margin:0;padding:0;max-width:none}
.hyodyt li{
  counter-increment:h;position:relative;
  padding-left:62px;margin:0 0 40px;max-width:56ch;
}
.hyodyt li::before{
  content:counter(h,decimal-leading-zero);
  position:absolute;left:0;top:2px;
  font-family:"IBM Plex Mono",monospace;font-size:15px;letter-spacing:.1em;
  color:var(--hehku);
}
.hyodyt li h3{font-size:clamp(20px,2.4vw,24px);margin-bottom:.3em}
.hyodyt li p{margin:0;color:rgba(251,250,248,.84)}
body:not(.tumma) .hyodyt li p{color:var(--leipa)}
@media (min-width:900px){
  .hyodyt{display:grid;grid-template-columns:1fr 1fr;gap:8px 64px}
  .hyodyt li{margin-bottom:24px}
}

/* Kaksi rinnakkaista nakokulmaa, erotinviiva valissa */
.kaksi{display:grid;gap:34px;grid-template-columns:1fr}
.kaksi > div{max-width:46ch}
.kaksi > div p{color:rgba(251,250,248,.86)}
body:not(.tumma) .kaksi > div p{color:var(--leipa)}
@media (min-width:820px){
  .kaksi{grid-template-columns:1fr 1fr;gap:56px}
  .kaksi > div + div{
    border-left:1px solid var(--raja-tumma);padding-left:56px;
  }
  body:not(.tumma) .kaksi > div + div{border-left-color:var(--raja)}
}

/* Merkitty lista isommalla rivikoolla */
ul.merkitty.iso{max-width:64ch}
ul.merkitty.iso li{margin-bottom:18px;font-size:17.5px}
ul.merkitty.iso li b{color:var(--paperi)}
body:not(.tumma) ul.merkitty.iso li b{color:var(--sininen)}

/* Jarjestelmat maaritelmalistana, ei kortteina */
dl.jarjestelmat{margin:0;max-width:72ch}
dl.jarjestelmat dt{
  font-weight:700;font-size:19px;color:var(--paperi);
  padding-top:20px;border-top:1px solid var(--raja-tumma);
}
dl.jarjestelmat dd{margin:6px 0 20px;color:rgba(251,250,248,.82);max-width:58ch}
body:not(.tumma) dl.jarjestelmat dt{color:var(--sininen);border-top-color:var(--raja)}
body:not(.tumma) dl.jarjestelmat dd{color:var(--leipa)}
@media (min-width:820px){
  dl.jarjestelmat{display:grid;grid-template-columns:220px 1fr;column-gap:40px}
  dl.jarjestelmat dt{grid-column:1}
  dl.jarjestelmat dd{grid-column:2;padding-top:20px;border-top:1px solid var(--raja-tumma);margin:0 0 0}
  body:not(.tumma) dl.jarjestelmat dd{border-top-color:var(--raja)}
  dl.jarjestelmat dd{padding-bottom:20px}
  dl.jarjestelmat dt{padding-bottom:20px}
}

/* Loppulohko: brandin rauhallinen aani */
.loppu{padding:clamp(72px,10vw,120px) 0}
.loppu h2{font-size:clamp(28px,4.2vw,40px);font-weight:800;max-width:26ch;margin-bottom:.5em}
.loppu .ingressi{font-size:19px;max-width:52ch;color:rgba(251,250,248,.86)}
body:not(.tumma) .loppu .ingressi{color:var(--leipa)}
.iso-lause{
  font-size:clamp(32px,5.6vw,54px);
  font-weight:800;line-height:1.1;letter-spacing:-.01em;
  color:var(--paperi);margin:0;max-width:none;
}
body:not(.tumma) .iso-lause{color:var(--sininen)}
.loppu .btn-rivi{margin-top:34px}

/* ==================================================================
   KAAVIO: kaksi reittia samaan dataan
   HTML ja CSS, ei kuvaa. Desktopilla kolme saraketta ja vaakanuolet,
   mobiilissa pysty pino. Varit tulevat brandimuuttujista, joten kaavio
   toimii seka tummalla etta vaalealla pohjalla.
   ================================================================== */

.kaavio{
  display:grid;gap:22px;
  grid-template-columns:1fr;
  align-items:center;
  margin:8px 0 48px;
}

/* Yhteiset laatikot */
.k-lahde,.k-kohde{
  background:var(--paperi);color:var(--sininen);
  border:1px solid var(--raja);border-radius:var(--pyoreys);
  padding:26px 22px;text-align:center;
}
/* Tarkkuus on oltava suurempi kuin saannolla "body.tumma h3", joka
   maalaa otsikot vaaleiksi. Kaavion laatikot ovat vaaleita myos
   tummalla sivulla, joten otsikon on pysyttava sinisena. */
.kaavio .k-lahde h3,.kaavio .k-kohde h3{color:var(--sininen);font-size:19px;margin:12px 0 4px;line-height:1.25}
.k-kohde p{margin:0;font-size:15.5px;color:var(--leipa)}
.k-lahteet{
  margin:8px 0 0;font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;letter-spacing:.06em;color:var(--utu);
}
.k-ikoni{display:block;width:30px;height:30px;margin:0 auto;color:var(--sininen)}
.k-ikoni svg{width:100%;height:100%;display:block}
.k-ikoni.pieni{width:22px;height:22px;margin:0 0 8px}

/* Reittien kehykset */
.k-reitit{display:grid;gap:22px}
.k-reitti{
  background:rgba(1,38,62,.05);
  border:1px solid var(--raja);border-radius:var(--pyoreys);
  padding:20px;
}
body.tumma .k-reitti{background:rgba(251,250,248,.06);border-color:var(--raja-tumma)}
.k-reitti.uusi{
  background:rgba(200,137,74,.10);
  border-color:rgba(200,137,74,.42);
}
.k-tunnus{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--utu);margin:0 0 14px;display:flex;align-items:center;gap:9px;
}
.k-tunnus::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--utu);flex:0 0 auto}
.k-reitti.uusi .k-tunnus{color:var(--hehku)}
.k-reitti.uusi .k-tunnus::before{background:var(--hehku)}
body.tumma .k-tunnus{color:rgba(251,250,248,.72)}
body.tumma .k-tunnus::before{background:rgba(251,250,248,.72)}
body.tumma .k-reitti.uusi .k-tunnus{color:var(--hehku)}
body.tumma .k-reitti.uusi .k-tunnus::before{background:var(--hehku)}

.k-kortit{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* Uudella reitilla MCP-palvelin syottaa tekoalytyokalut, joten niiden
   valissa on pieni nuoli. Kapealla naytolla kortit pinoutuvat ja
   nuoli piilotetaan. */
.k-vali{display:none}
@media (min-width:560px){
  .k-kortit.ketju{grid-template-columns:1.15fr 14px 1fr 1fr;align-items:stretch}
  .k-vali{
    display:block;align-self:center;
    width:0;height:0;
    border-top:6px solid transparent;border-bottom:6px solid transparent;
    border-left:9px solid var(--hehku);
  }
}
.k-kortti{
  background:var(--paperi);border:1px solid var(--raja);border-radius:10px;
  padding:16px;color:var(--sininen);
}
.k-kortti b{display:block;font-size:16.5px;line-height:1.25}
.k-kortti span:not(.k-ikoni){display:block;font-size:14px;color:var(--utu);margin-top:3px}
.k-kortti .k-ikoni{color:var(--utu)}
.k-kortti.tumma{background:var(--sininen);border-color:var(--sininen);color:var(--paperi)}
.k-kortti.tumma .k-ikoni{color:var(--hehku)}
.k-selite{
  margin:14px 0 0;font-size:14.5px;color:var(--leipa);max-width:none;
}
body.tumma .k-selite{color:rgba(251,250,248,.72)}
.k-reitti.uusi .k-selite{color:var(--hehku-tumma)}
body.tumma .k-reitti.uusi .k-selite{color:var(--hehku)}

/* Mobiili: reitit ovat rinnakkaisia, eivat perakkaisia.
   Siksi tietovarastosta laskeutuu yksi pystyviiva, josta haarautuu
   tynka kumpaankin reittiin. Pelkat alasnuolet laatikoiden valissa
   antaisivat vaaran kuvan, jossa tekoalyreitti tulisi raportoinnin
   jalkeen eika suoraan tietovarastosta. */
@media (max-width:899px){
  .k-reitit{position:relative;padding-left:24px}
  /* Kokoava pystyviiva. Haipyy alareunassa, jolloin sen ei tarvitse
     tietaa viimeisen reitin korkeutta. */
  .k-reitit::before{
    content:"";position:absolute;left:0;top:-22px;bottom:0;width:1px;
    background:linear-gradient(to bottom,
      rgba(112,137,155,.75) 0,
      rgba(112,137,155,.75) 62%,
      rgba(112,137,155,0) 100%);
  }
  /* Vaakatynka reitin tunnuksen kohdalle */
  .k-reitti{position:relative}
  .k-reitti::before{
    content:"";position:absolute;left:-24px;top:33px;width:24px;height:1px;
    background:var(--utu);opacity:.75;
  }
  .k-reitti.uusi::before{background:var(--hehku);opacity:1}
  .k-nuoli{display:none}
  .k-nuoli.sisaan{
    display:block;position:absolute;left:-7px;top:28px;margin-top:0;
    width:0;height:0;
    border-top:5px solid transparent;border-bottom:5px solid transparent;
    border-left:8px solid var(--utu);opacity:.75;
  }
  .k-reitti.uusi .k-nuoli.sisaan{border-left-color:var(--hehku);opacity:1}
  /* Reiteista eteenpain kayttajaan: yksi nuoli koko ryhman alta */
  .k-lahde,.k-reitit{position:relative}
  .k-reitit::after{
    content:"";position:absolute;left:50%;bottom:-17px;
    width:0;height:0;margin-left:-6px;
    border-left:6px solid transparent;border-right:6px solid transparent;
    border-top:8px solid var(--utu);
  }
}

/* Desktop: kolme saraketta ja vaakanuolet */
@media (min-width:900px){
  .kaavio{
    grid-template-columns:minmax(140px,.82fr) minmax(150px,.92fr) minmax(0,2.5fr) minmax(140px,.8fr);
    gap:38px;
  }
  .k-reitit{gap:26px}
  .k-reitti{position:relative}
  /* Nuoli lahteesta reitille ja reitilta kayttajalle. Nuoli lahtee
     reitin pystykeskikohdasta, joten se osuu oikein vaikka reittien
     korkeudet eroavat. */
  .k-reitti::before,.k-reitti::after{
    content:"";position:absolute;top:50%;height:1px;
    background:var(--utu);opacity:.55;
  }
  .k-reitti::before{left:-38px;width:38px}
  .k-reitti::after{right:-38px;width:38px}
  .k-reitti.uusi::before,.k-reitti.uusi::after{background:var(--hehku);opacity:.9}
  /* Nuolenkarjet omina elementteinaan, jotta ne osuvat viivan paihin */
  .k-nuoli{
    position:absolute;top:50%;margin-top:-5px;
    width:0;height:0;
    border-top:5px solid transparent;border-bottom:5px solid transparent;
    border-left:8px solid var(--utu);opacity:.75;
  }
  .k-nuoli.sisaan{left:-9px}
  .k-nuoli.ulos{left:calc(100% + 28px)}
  .k-reitti.uusi .k-nuoli{border-left-color:var(--hehku);opacity:1}
}


/* ------------------------------------------------- lahdejarjestelmat
   Viisi lahdetta, joista tieto valuu yhteen tietovarastoon. Desktopilla
   rivit yhtyvat pystyviivaan ja siita yksi nuoli varastoon; kapealla
   naytolla rivit ovat pino ja nuoli osoittaa alas. */
.k-pino{position:relative;display:grid;gap:8px;align-content:center}
.k-lahde-lista{position:relative;display:grid;gap:8px}
.k-tunnus.hieno{margin-bottom:4px}
.k-lahde-rivi{
  background:rgba(1,38,62,.05);
  border:1px solid var(--raja);border-radius:9px;
  padding:9px 12px;min-height:46px;
  display:flex;flex-direction:column;justify-content:center;
  font-size:15px;font-weight:700;color:var(--sininen);line-height:1.2;
}
.k-lahde-rivi span{display:block;font-weight:400;font-size:12.5px;color:var(--utu);margin-top:2px}
body.tumma .k-lahde-rivi{
  background:rgba(251,250,248,.07);border-color:var(--raja-tumma);color:var(--paperi);
}
body.tumma .k-lahde-rivi span{color:rgba(251,250,248,.6)}

@media (max-width:899px){
  .k-pino{position:relative}
  .k-pino::after{
    content:"";position:absolute;left:50%;bottom:-17px;
    width:0;height:0;margin-left:-6px;
    border-left:6px solid transparent;border-right:6px solid transparent;
    border-top:8px solid var(--utu);
  }
  .k-nuoli.pino-ulos{display:none}
}

@media (min-width:900px){
  /* Vaakatynka jokaisesta lahteesta kokoavalle pystyviivalle */
  .k-lahde-rivi{position:relative}
  .k-lahde-rivi::after{
    content:"";position:absolute;top:50%;right:-14px;width:14px;height:1px;
    background:var(--utu);opacity:.5;
  }
  /* Kokoava pystyviiva. Ensimmainen ja viimeinen rivi ovat yksirivisia
     eli 46 px korkeita, joten viiva alkaa ensimmaisen rivin keskelta ja
     paattyy viimeisen keskelle riippumatta valissa olevien korkeudesta. */
  .k-lahde-lista::before{
    content:"";position:absolute;right:-14px;
    top:23px;bottom:23px;width:1px;
    background:var(--utu);opacity:.5;
  }
  /* Runkoviiva pystyviivalta tietovarastoon */
  .k-lahde-lista::after{
    content:"";position:absolute;top:50%;right:-52px;width:38px;height:1px;
    background:var(--utu);opacity:.5;
  }
  .k-nuoli.pino-ulos{left:calc(100% + 29px)}
}

/* ==================================================================
   TIETOPANKKI: kirjoitusten listaus ja artikkelisivu
   ================================================================== */

.kirjoituslista{display:grid;gap:2px}
a.kirjoitus{
  display:block;text-decoration:none;color:inherit;
  padding:28px 0;border-top:1px solid var(--raja);
  transition:background .12s ease;
}
a.kirjoitus:last-child{border-bottom:1px solid var(--raja)}
a.kirjoitus:hover{background:var(--pilvi)}
a.kirjoitus h2{font-size:clamp(22px,2.8vw,27px);margin:0 0 .35em;max-width:30ch}
a.kirjoitus p{margin:0;max-width:66ch}
a.kirjoitus .k-meta{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--utu);margin:0 0 10px;
}
a.kirjoitus .lisaa{
  display:inline-block;margin-top:14px;font-weight:700;color:var(--sininen);
}
a.kirjoitus .lisaa::after{content:" \2192"}
a.kirjoitus:hover .lisaa{color:var(--hehku-tumma)}

/* Artikkelin leipateksti: pidempi rivivali ja selkeat valit */
.artikkeli-meta{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:14px;color:var(--utu);margin:0;
}
.artikkeli{font-size:19px;line-height:1.72}
.artikkeli h2{font-size:clamp(23px,3vw,28px);margin:1.8em 0 .5em}
.artikkeli h3{font-size:21px;margin:1.6em 0 .4em}
.artikkeli h2:first-child,.artikkeli h3:first-child{margin-top:0}
.artikkeli p{margin:0 0 1.15em}
.artikkeli ul.merkitty{margin:0 0 1.4em}
.artikkeli a{color:var(--sininen)}
.artikkeli a:hover{color:var(--hehku-tumma)}

/* ------------------------------------------------------------------
   Tietovarastokaavio (/palvelut/tietovarasto/)
   Monesta lahteesta yhteen, yhdesta moneen kayttoon. Tietoisesti eri
   nakoinen kuin etusivun .kaavio: vaalea paneeli, yksi tayttolohko ja
   kuusi aariviivakorttia. Tyopoydalla virtaus vasemmalta oikealle,
   mobiilissa ylhaalta alas.
   ------------------------------------------------------------------ */

.tv-kaavio-kehys{margin:34px 0 0;padding:0}
.tv-kaavio-kehys figcaption{
  margin-top:16px;
  color:var(--utu);
  font-size:15px;
  line-height:1.5;
  max-width:62ch;
}

.tv-kaavio{
  display:grid;
  grid-template-columns:minmax(0,1fr) 54px minmax(0,1.15fr) 54px minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
  align-items:stretch;
  gap:0;
  background:var(--pilvi);
  border-radius:var(--pyoreys);
  padding:30px 26px;
}

/* Tekstivastine ruudunlukijalle. */
.tv-vaihtoehto{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

.tv-sarake{display:flex;flex-direction:column;gap:10px;grid-row:2}
.tv-kaavio .tv-viivat{grid-row:2}
.tv-kaavio .tv-keskus{grid-row:2}
.tv-otsikko-v{grid-row:1;grid-column:1}
.tv-otsikko-o{grid-row:1;grid-column:5}
.tv-tunnus{
  margin:0 0 10px;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--utu);
}

.tv-kortti{
  flex:1;
  display:flex;
  align-items:center;
  gap:11px;
  min-height:62px;
  padding:12px 14px;
  background:var(--paperi);
  border:1px solid var(--raja);
  border-radius:10px;
}
.tv-kortti b{
  font-size:15px;
  font-weight:600;
  line-height:1.3;
  color:var(--sininen);
}

.tv-ikoni{display:block;width:21px;height:21px;flex:0 0 21px;color:var(--utu)}
.tv-ikoni svg{width:100%;height:100%;display:block}
.tv-ikoni.hehku{color:var(--hehku)}
.tv-ikoni.iso{width:30px;height:30px;flex:0 0 30px;color:var(--hehku);margin-bottom:12px}

/* Keskuslohko: ainoa taytetty elementti, siksi painavin. */
.tv-keskus{
  align-self:center;
  padding:26px 24px;
  background:var(--sininen);
  border-radius:var(--pyoreys);
  box-shadow:var(--varjo);
}
.tv-kaavio .tv-keskus h3{
  margin:0 0 16px;
  color:var(--paperi);
  font-size:21px;
  line-height:1.2;
}
.tv-keskus ul{margin:0;padding:0;list-style:none}
.tv-keskus li{
  position:relative;
  padding-left:19px;
  margin-bottom:7px;
  color:rgba(251,250,248,.86);
  font-size:15px;
  line-height:1.4;
}
.tv-keskus li:last-child{margin-bottom:0}
.tv-keskus li::before{
  content:"";
  position:absolute;
  left:0;top:.5em;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--hehku);
}

/* Yhdysviivat. non-scaling-stroke pitaa viivan paksuuden vakiona,
   vaikka SVG venyy epatasaisesti. */
.tv-viivat{width:100%;height:100%;display:block;overflow:visible}
.tv-viivat path{
  fill:none;
  stroke:var(--utu);
  stroke-width:1.5;
  opacity:.55;
  vector-effect:non-scaling-stroke;
}

@media (max-width:900px){
  .tv-kaavio{grid-template-columns:minmax(0,1fr) 36px minmax(0,1.2fr) 36px minmax(0,1fr);padding:26px 18px}
  .tv-kortti{min-height:58px;padding:11px 12px;gap:9px}
  .tv-kortti b{font-size:14px}
}

/* Mobiili: yksi sarake ylhaalta alas. SVG-viivat pois, tilalle
   pystysuora yhdysviiva. Lahteet 2x2-ruudukkona, jotta kaavio ei veny.
   Jarjestys hoidetaan orderilla, koska otsikot ovat DOM:ssa alussa. */
@media (max-width:740px){
  .tv-kaavio{
    display:flex;
    flex-direction:column;
    padding:22px 16px;
  }
  .tv-viivat{display:none}
  .tv-otsikko-v{order:1}
  .tv-lahteet{order:2}
  .tv-keskus{order:3}
  .tv-otsikko-o{order:4}
  .tv-kaytot{order:5}

  .tv-sarake{display:block}
  .tv-lahteet{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .tv-lahteet .tv-kortti{
    min-height:0;
    flex-direction:column;
    align-items:flex-start;
    gap:7px;
    padding:12px;
  }

  /* Yhdysviiva nuolineen keskuslohkon ja kayttotapojen edelle. */
  .tv-kaavio .tv-keskus,
  .tv-kaavio .tv-otsikko-o{position:relative;margin-top:42px}
  .tv-kaavio .tv-keskus::before,
  .tv-kaavio .tv-otsikko-o::before{
    content:"";
    position:absolute;
    left:50%;top:-32px;
    width:1.5px;height:19px;
    background:var(--utu);
    opacity:.55;
  }
  .tv-kaavio .tv-keskus::after,
  .tv-kaavio .tv-otsikko-o::after{
    content:"";
    position:absolute;
    left:50%;top:-16px;
    width:7px;height:7px;
    margin-left:-4px;
    border-bottom:1.5px solid var(--utu);
    border-right:1.5px solid var(--utu);
    transform:rotate(45deg);
    opacity:.55;
  }

  .tv-keskus{padding:22px 20px}
  .tv-kaavio .tv-keskus h3{font-size:20px}
  .tv-kaytot .tv-kortti{min-height:0;margin-bottom:8px}
  .tv-kaytot .tv-kortti:last-child{margin-bottom:0}
  .tv-kortti b{font-size:15px}
}

/* Kortti, jossa on ikoni otsikon ylapuolella. Kaytossa raportointisivun
   "Yhteinen nakyma jatkuvaan seurantaan" -osiossa. */
.kortti-ikoni{display:block;width:26px;height:26px;color:var(--hehku);margin-bottom:16px}
.kortti-ikoni svg{width:100%;height:100%;display:block}
body.tumma .kortti-ikoni{color:var(--hehku)}
.osion-loppu{margin:26px 0 0;color:var(--leipa)}

/* ------------------------------------------------------------------
   Raportointisivun aloitus: teksti vasemmalle, tyylitelty
   raporttinakyma oikealle. Mobiilissa kuva tekstin alle.
   ------------------------------------------------------------------ */

.rap-aloitus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:center}
.rap-aloitus-teksti p{max-width:52ch}
.rap-aloitus-teksti p:last-child{margin-bottom:0}

.rapkuva{margin:0;padding:0}
.rapkuva figcaption{
  margin-top:12px;
  color:var(--utu);
  font-size:13.5px;
  line-height:1.5;
}

.rk-kortti{
  background:var(--paperi);
  border:1px solid var(--raja);
  border-radius:var(--pyoreys);
  box-shadow:var(--varjo);
  padding:22px 22px 20px;
}

.rk-ylapalkki{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:18px}
.rk-otsikko{margin:0;font-size:17px;font-weight:700;color:var(--sininen);line-height:1.2}
.rk-jakso{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.06em;color:var(--utu);white-space:nowrap;
}

.rk-luvut{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.rk-luku{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:var(--pilvi);
  border-radius:9px;
  padding:10px 12px;
}
.rk-luku span{display:block;font-size:11.5px;letter-spacing:.04em;color:var(--utu);margin-bottom:3px}
.rk-luku b{font-size:21px;font-weight:700;color:var(--sininen);line-height:1.1;display:block}
.rk-luku b.nousu{color:var(--hehku-tumma)}

.rk-kuvaaja{display:block;width:100%;height:auto}
.rk-apuviiva{stroke:var(--raja);stroke-width:1}
.rk-akseli{
  font-family:"Hanken Grotesk",Arial,sans-serif;
  font-size:8px;fill:var(--utu);
}
.rk-toteuma{fill:none;stroke:var(--sininen);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.rk-tavoite{fill:none;stroke:var(--hehku);stroke-width:2;stroke-dasharray:6 5;stroke-linecap:round}
.rk-nuppi{fill:var(--paperi);stroke:var(--sininen);stroke-width:2}

.rk-selite{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin:4px 0 20px;font-size:12.5px;color:var(--utu);
}
.rk-selite .rk-merkki{display:inline-block;width:18px;height:0;border-radius:2px}
.rk-selite .rk-merkki+.rk-merkki,
.rk-selite .rk-merkki:nth-of-type(2){margin-left:12px}
.rk-merkki.toteuma{border-top:2.5px solid var(--sininen)}
.rk-merkki.tavoite{border-top:2.5px dashed var(--hehku)}

.rk-vertailu{border-top:1px solid var(--raja);padding-top:16px}
.rk-alaotsikko{
  margin:0 0 11px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--utu);font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
.rk-palkki{display:grid;grid-template-columns:18px 1fr 34px;align-items:center;gap:10px;margin-bottom:8px}
.rk-palkki:last-child{margin-bottom:0}
.rk-palkki-nimi{font-size:12.5px;font-weight:600;color:var(--sininen)}
.rk-palkki-ura{display:block;height:9px;background:var(--pilvi);border-radius:5px;overflow:hidden}
.rk-palkki-taytto{display:block;height:100%;background:var(--sininen);border-radius:5px;opacity:.82}
.rk-palkki-arvo{font-size:12.5px;color:var(--leipa);text-align:right}

@media (max-width:1000px){
  .rap-aloitus{gap:36px}
  .rk-kortti{padding:18px}
  .rk-luku b{font-size:19px}
}

/* Mobiili: yksi sarake, kuva tekstien alle. Pienennetaan tiheimmat
   yksityiskohdat, jotta tekstit pysyvat luettavina. */
@media (max-width:760px){
  .rap-aloitus{grid-template-columns:1fr;gap:30px}
  .rap-aloitus-teksti p{max-width:none}
  .rk-luvut{gap:8px}
  .rk-luku{padding:9px 10px}
  .rk-luku span{font-size:11px;min-height:2.5em}
  .rk-luku b{font-size:18px}
  .rk-akseli{font-size:11px}
  .rk-selite{font-size:12px}
}

/* ------------------------------------------------------------------
   Tekoalysivun keskustelunakyma. Sama korttikieli kuin
   raportointisivun raporttikuvassa, mutta kuplina.
   ------------------------------------------------------------------ */

.keskustelukuva{margin:0;padding:0}
.keskustelukuva figcaption{
  margin-top:12px;color:var(--utu);font-size:13.5px;line-height:1.5;
}

.kk-kortti{
  background:var(--paperi);
  border:1px solid var(--raja);
  border-radius:var(--pyoreys);
  box-shadow:var(--varjo);
  padding:22px;
}
.kk-ylapalkki{border-bottom:1px solid var(--raja);padding-bottom:14px;margin-bottom:18px}
.kk-otsikko{margin:0;font-size:17px;font-weight:700;color:var(--sininen);line-height:1.2}

.kk-rivi{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:16px}
.kk-rivi.oma{align-items:flex-end}
.kk-rivi:last-child{margin-bottom:0}

.kk-leima{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--utu);margin-bottom:6px;
}

.kk-kupla{
  max-width:86%;
  margin:0;
  padding:12px 15px;
  border-radius:14px;
  font-size:15px;
  line-height:1.45;
}
.kk-kupla.kysymys{
  background:var(--sininen);
  color:var(--paperi);
  border-bottom-right-radius:5px;
}
.kk-kupla.vastaus{
  background:var(--pilvi);
  color:var(--leipa);
  border-bottom-left-radius:5px;
  max-width:92%;
}
.kk-kupla.vastaus p{margin:0;max-width:none}

.kk-kuvaaja{display:block;width:100%;max-width:230px;height:auto;margin-top:10px}
.kk-perusviiva{stroke:var(--utu);stroke-width:1.5;opacity:.45}
.kk-palkki.vanha{fill:var(--utu)}
.kk-palkki.uusi{fill:var(--sininen)}
.kk-arvo{
  font-family:"Hanken Grotesk",Arial,sans-serif;
  font-size:11px;font-weight:700;fill:var(--sininen);
}
.kk-nimi{
  font-family:"Hanken Grotesk",Arial,sans-serif;
  font-size:9.5px;fill:var(--utu);
}

@media (max-width:1000px){
  .kk-kortti{padding:18px}
}
@media (max-width:760px){
  .kk-kupla{max-width:92%;font-size:15px}
  .kk-kuvaaja{max-width:210px}
}

/* ------------------------------------------------------------------
   Referenssilogot. Hillitty rivi: logot ovat omissa vareissaan mutta
   pienina, ja rivi keskitetaan. Mobiilissa logot kiertyvat usealle
   riville. Leveys rajataan erikseen, jotta leveat sanamerkit eivat
   dominoi kapeita tunnuksia.
   ------------------------------------------------------------------ */

/* Oma vaalea kaista, jotta logot nakyvat myos tummalla etusivulla. */
.logolohko{background:var(--paperi)}
body.tumma .logolohko{background:var(--paperi)}
section.logolohko{padding-top:56px !important;padding-bottom:56px}

.logorivi-otsikko{
  margin:0 0 22px;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--utu);
  text-align:center;
  max-width:none;
}
.logorivi{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:30px 48px;
}
.logorivi img{
  height:34px;
  width:auto;
  max-width:150px;
  object-fit:contain;
  opacity:.85;
}
@media (max-width:740px){
  .logorivi{gap:24px 30px}
  .logorivi img{height:28px;max-width:120px}
}

/* ------------------------------------------------------------------
   Yhteyshenkilot kuvan kanssa. Kuva on neliona levylla ja rajataan
   pyoreaksi tassa. Jos kuvaa ei ole, tilalla on hahmokuvake samassa
   ympyrassa, jolloin rivien korkeus pysyy samana.
   ------------------------------------------------------------------ */

.henkilo{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.henkilo:last-of-type{margin-bottom:24px}
.henkilo p{margin:0;max-width:none}

.henkilo-kuva{
  flex:0 0 72px;
  width:72px;height:72px;
  border-radius:50%;
  object-fit:cover;
  background:var(--pilvi);
}
.henkilo-kuva.hahmo{
  display:flex;align-items:center;justify-content:center;
  color:var(--utu);
}
.henkilo-kuva.hahmo svg{width:36px;height:36px}

@media (max-width:420px){
  .henkilo{gap:13px}
  .henkilo-kuva{flex:0 0 60px;width:60px;height:60px}
  .henkilo-kuva.hahmo svg{width:30px;height:30px}
}