/* =========================================================================
   OEF VARKE-TEKSTISIVUJEN JAETTU JARJESTELMA  (lohko D, 14.9.2026)
   =========================================================================
   Klusterissa on viisi tekstisivua joiden valilla sama isannoitsija liikkuu:

     energia-avustus-taloyhtio-2026          (MALLI, lohko C)
     mita-varke-avustus-tarkoittaa-taloyhtiolle-2026
     varke-avustus-turku-paljonko-tukea-2026
     varke-energia-avustus-asetusluonnos-2026
     varke-energia-avustus-hakuopas-2026

   Ennen lohko D:ta jokaisella oli oma kopionsa samasta ideasta: viisi
   .hero-inner-maaritysta, kolme eri .faq-item-geometriaa ja kaksi eri
   .vastauspalkki-ratkaisua. Sama sanasto, eri kirjoitusasu. Kopio ajautuu
   erilleen aina, joten runko on nyt YHDESSA tiedostossa ja sivun oma
   <style>-lohko sisaltaa vain sen mika on oikeasti vain sille.

   Runko on kopioitu SANASTA SANAAN mallista (commit 48b6655). Uudet
   lisaykset ovat tiedoston lopussa omassa lohkossaan ja jokainen on
   perusteltu erikseen.

   LATAUSJARJESTYS: oef-tokens.css -> oef-typo.css -> TAMA -> sivun <style>.
   Sivun oma lohko voittaa jarjestyksella, joten sivukohtainen poikkeus on
   yha mahdollinen ilman !importantia.
   ========================================================================= */

/* Varmuusarvot niille tokeneille joita kaikkien sivujen oma :root ei julista.
   Sivun oma :root tulee TAMAN JALKEEN ja voittaa, joten nama eivat ohita
   mitaan: ne vain estavat tyhjan var()-arvon jos sivulta puuttuu julistus. */
:root {
  --toiminta-pinta-active: #9C3906;
  --palsta: 1160px;
}

/* §3.2 TAUSTA. Sama kaikilla viidella. Mallissa tama on WebGL-kulmaglow'n
   dokumentoitu fallback; sivuilla joilla kangasta ei ole, se on itse tausta.
   Kaksi radiaalia ei ole "blur-blob-tausta" vaan §5.3:n kulmaglow: oranssi
   oikeaan ylakulmaan, syaani vasempaan alakulmaan, molemmat 10 %:n alfalla.
   background-attachment: fixed pitaa sen paikallaan koko sivun mitalta. */
body.varke-sivu {
  background:
    radial-gradient(circle at top right, rgba(255,92,0,0.10), transparent 50%),
    radial-gradient(circle at bottom left, rgba(0,229,255,0.10), transparent 50%),
    var(--bg-dark);
  background-attachment: fixed;
}
body.varke-sivu .hero, body.varke-sivu main,
body.varke-sivu .cta-block, body.varke-sivu .sources,
body.varke-sivu .site-footer { position: relative; z-index: 1; }
/* Heron oma ::before-glow purettiin: kun sama gradientti on bodylla koko sivun
   mitalta, hero-kohtainen kopio piirtyy sen PAALLE ja tekee heron reunaan
   naennaisen sauman. Mitattu mallista: mallissa glow on vain bodylla. */
body.varke-sivu .hero::before { content: none; }


/* --- §9.1 PALSTA. Vasen linja, ei keskitysta. ------------------------------
   Sivun jokainen alkulinja tulee tasta yhdesta saannosta: kicker, otsikko,
   leipa, luvut ja napit alkavat samasta x-koordinaatista. Aiemmin sisalto oli
   800 px keskitettyna 1440 px ruutuun, jolloin oikealle jai 344 px kuollutta
   aluetta koko heron korkeudelta. */
.palsta { max-width: var(--palsta); margin:0 auto; padding:0 var(--v6); }
.teksti-palsta { max-width: 72ch; }

/* HEADER */
.site-header { border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(10,15,20,0.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 50; }
.header-inner { max-width: var(--palsta); margin:0 auto; padding:16px var(--v6); display: flex; align-items: center; justify-content: space-between; }
.logo { font-family: var(--f-naytto); font-weight: 700; font-size:var(--t-1); letter-spacing: 0.16em; color: var(--white); line-height: 1.3; text-transform: uppercase; }
.logo span { display: block; }
/* §8.1: YKSI taytetty paatoiminto per ruudullinen, ja tarttuvan ylatunnisteen
   CTA lasketaan mukaan. Heron CTA on nyt se taytetty, joten ylatunnisteen CTA
   on toissijainen. Teksti on sama, vain paino muuttuu. */
.header-cta, .content-section a.header-cta { font-family: var(--f-kone); font-size:var(--t-1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); text-decoration: none; background: transparent; border: 1px solid var(--line); padding:10px var(--v4); border-radius: var(--r-pieni); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.header-cta:hover, .content-section a.header-cta:hover { border-color: rgba(255,255,255,0.38); background: rgba(255,255,255,0.035); }

/* --- §8.10 KICKER: mono, koneen etiketti. Ei koskaan otsikko. ------------- */
.kicker { font-family: var(--f-kone); font-size:var(--t-0); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-400);
  display: flex; align-items: center; gap:var(--v2); margin-bottom:var(--v3); }
.kicker::before { content:""; width: 16px; height: 2px; background: var(--primary); flex-shrink: 0; }
.kicker--ehto::before { background: var(--accent); }
/* Osiomerkki on sama kicker ilman sanoja: se antaa osiorytmin ilman etta
   sivulle lisataan yhtaan uutta tekstia tai numeroa. */
.osio-merkki { width: 16px; height: 2px; background: var(--primary); display: block; margin-bottom:var(--v4); }
.osio--tiivis .osio-merkki { background: var(--line); }
.osio--data .osio-merkki { background: var(--accent); }

/* HERO: kaksipalstainen. Oikea palsta ON vastauspalkki, ei tyhjaa. */
.hero { position: relative; border-bottom: 1px solid var(--line); }
.hero-inner { position: relative; max-width: var(--palsta); margin:0 auto; padding:var(--v16) var(--v6) var(--v12); }
@media (min-width: 1100px) {
  .hero-inner { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(330px,0.88fr); gap:var(--v12); align-items: start; }
}
.eyebrow { font-family: var(--f-kone); font-size:var(--t-0); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-400); display: flex; align-items: center; gap:var(--v2); margin-bottom:var(--v4); }
.eyebrow::before { content:""; width: 16px; height: 2px; background: var(--primary); flex-shrink: 0; }
h1 { font-family: var(--f-naytto); font-size:var(--t-h1); font-weight: 900; line-height: 1.06; letter-spacing: -0.02em; margin-bottom:var(--v5); }
/* §5.4.1 (14.9.2026): `h1 .grad` POISTETTU. Se oli lohko A:n ja C:n ratkaisu
   otsikon jalkimmaiselle puoliskolle, ja se toteutti kuvion jonka Dani hylkasi:
   otsikko kahdessa savyssa. RIVINVAIHTO oli aina se osa joka toimi, ei vari,
   joten se sailyy `.otsikko-rivi`-luokassa (css/oef-tokens.css §5.4.1) joka on
   display:block ilman omaa varia. Kuollutta saantoa ei jateta tanne odottamaan
   uudelleenkayttoa: portti OTSIKKOVARI kaataisi sen, mutta vasta jalkikateen. */
/* §5.3 rivin mitta. 54ch teki leadista 7 rivin kapean pylvaan jossa lause
   katkesi oudosti; 62ch antaa 5 rivia samalla kirjasinkoolla. */
.hero-lead { font-size:var(--t-3); font-weight: 400; color: var(--slate-300); line-height: 1.55; max-width: 62ch; }
.hero-toimet { display: flex; align-items: center; gap:var(--v4); flex-wrap: wrap; margin-top:var(--v6); }
/* Byline on metatietoa ja se tulee TOIMINNAN JALKEEN, ei sen eteen. t-0,
   jotta se mahtuu yhdelle riville eika jata erotinpistetta roikkumaan
   rivin loppuun. */
.byline { margin-top:var(--v6); display: flex; align-items: center; gap:var(--v2); font-size:var(--t-0); color: var(--slate-500); flex-wrap: wrap; }
.byline strong { color: var(--slate-300); font-weight: 600; }
.byline .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--slate-500); }

/* --- §8.4 VASTAUSPALKKI ---------------------------------------------------
   OEF:n oma rakenteellinen komponentti. Kolme kysymysta ja KOLME ERI PAINOA.
   Nama kolme lukua olivat aiemmin kolme SAMANLEVYISTA JA SAMANKOKOISTA
   korttia keskella artikkelia (.stats), eli juuri se kuvio jossa sivulla ei
   ole hallitsevaa elementtia. Sama sisalto, sama teksti, eri paino ja eri
   paikka. */
.stats { display: grid; grid-template-columns: 1fr; gap:1px;
  background: var(--line-soft); border: 1px solid var(--line-soft);
  border-radius: var(--r-kortti); overflow: hidden; }
.stat { display: block; background: var(--bg-deep); padding:var(--v5) var(--v6);
  text-decoration: none; color: inherit; transition: background var(--dur) var(--ease); }
a.stat:hover { background: var(--pinta-2, rgba(255,255,255,0.06)); }
/* Leikkaava sailio (overflow:hidden) syo ulkopuolisen renkaan, joten rengas on
   outline negatiivisella offsetilla. */
a.stat:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; box-shadow: none; }
.stat .num { font-family: var(--f-naytto); font-weight: 900; font-size:var(--t-4);
  color: var(--white); letter-spacing: -0.02em; line-height: 1.05; margin-bottom:var(--v2); }
.stat .desc { font-size:var(--t-1); color: var(--slate-400); line-height: 1.45; }
/* §9.3 HALLITSEVA ELEMENTTI, TASAN YKSI: haun aukeamispaiva. Oranssi =
   maaraaika (merkityskartta §3.1). Rivi saa oman pinnan ja oranssin
   ylareunan, jotta se luetaan sumennettunakin yhtena laikkuna eika
   kolmen samanarvoisen rivin ensimmaisena. Efektibudjetti: tausta + reuna = 2. */
.stat--paa { background: var(--bg-deep); border-top: 2px solid var(--primary); }
.stat--paa .num { font-size:var(--t-5); color: var(--primary); }
.stat--paa .desc { color: var(--slate-300); }
.stat--ehto .num { font-size:var(--t-3); color: var(--accent); }
.stat--tiivis .num { font-size:var(--t-3); }
/* Vastauspalkin oma toimintarivi. Se on kolmannen asteen painike (§8.1):
   tekstilinkki ilman laatikkoa, ja se on TAVALLISELLA kirjainkoolla eika
   versaalimonolla, koska sen teksti on lause eika verbi. */
.hero-vastaus { display: flex; flex-direction: column; }
.stats-toimi { margin:var(--v3) 0 0; font-family: var(--f-kone); font-size:var(--t-1);
  line-height: 1.5; }
.stats-toimi a { color: var(--orange-400); text-decoration: underline;
  text-underline-offset: 4px; }
.stats-toimi a:hover { color: var(--white); }

/* §8.1 PAINIKE */
.btn-primary, .content-section a.btn-primary,
.btn-secondary, .content-section a.btn-secondary {
  font-family: var(--f-kone); font-size:var(--t-1); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap:var(--v2);
  padding:14px var(--v6); min-height: 44px; border-radius: var(--r-pieni);
  border: 1px solid transparent; text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn-primary, .content-section a.btn-primary { background: var(--toiminta-pinta); color: #fff; }
.btn-primary:hover, .content-section a.btn-primary:hover { background: var(--toiminta-pinta-hover); }
.btn-primary:active { background: var(--toiminta-pinta-active); }
.btn-secondary, .content-section a.btn-secondary { background: transparent; border-color: var(--line); color: #fff; }
.btn-secondary:hover { border-color: rgba(255,255,255,0.38); background: rgba(255,255,255,0.035); }
/* Kolmannen asteen: tekstilinkki, ei laatikkoa. */
.btn-kevyt { font-family: var(--f-kone); font-size:var(--t-1); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--orange-400);
  text-decoration: underline; text-underline-offset: 4px; }
.btn-kevyt:hover { color: var(--white); }

/* --- §9.1 OSIOIDEN PAINOLUOKAT --------------------------------------------
   Sapluunaportti: peräkkäisiä samantyylisiä osioita enintaan 3, uniikkeja
   osiotyyleja / osiot vahintaan 0,40. Mitattu 13.9.2026 tasta sivusta:
   8 osiota, 1 uniikki tyyli, suhde 0,13 ja pisin putki 8. Nyt neljä luokkaa
   eika kahta peräkkäistä samaa. */
main { display: block; }
.osio { padding:var(--v12) 0; }
.osio > .palsta > h2 { margin-top: 0; }
.osio--nosto { background: var(--bg-deep); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); padding:var(--v16) 0; }
.osio--data { padding:var(--v16) 0 var(--v12); border-top: 1px solid var(--line-soft); }
.osio--tiivis { padding:var(--v8) 0; }
article { max-width: none; margin:0; padding:0; }
h2 { font-family: var(--f-naytto); font-size:var(--t-4); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin:0 0 var(--v5); }
.osio--nosto h2 { font-size:var(--t-5); }
.osio--tiivis h2 { font-size:var(--t-3); }
h3 { font-family: var(--f-naytto); font-size:var(--t-3); font-weight: 700; letter-spacing: -0.01em; margin:var(--v8) 0 var(--v2); }
article p { margin-bottom:var(--v4); color: var(--slate-300); max-width: 72ch; }
article p.bright { color: var(--white); }
article ul, article ol { margin:0 0 var(--v5); padding-left:var(--v1); list-style: none; max-width: 72ch; }
article ul li, article ol li { position: relative; padding-left:32px; margin-bottom:var(--v3); color: var(--slate-300); }
article ul li::before { content: "check_circle"; font-family: 'Material Symbols Rounded'; position: absolute; left: 0; top: 1px; color: var(--primary); font-size:var(--t-3); font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
article ol { counter-reset: step; }
article ol li { counter-increment: step; }
article ol li::before { content: counter(step); position: absolute; left: 0; top: 2px; width: 22px; height: 22px; background: var(--toiminta-pinta); color: #fff; border-radius: var(--r-ympyra); font-size:var(--t-1); font-weight: 700; display: flex; align-items: center; justify-content: center; }
article strong { color: var(--white); font-weight: 600; }
article a { color: var(--orange-400); text-decoration: underline; text-underline-offset: 2px; }

/* §7.4 EFEKTIBUDJETTI: enintaan kaksi efektia per elementti. Lasikortti
   (tausta + backdrop-filter + reuna) on kolme, ja se purettiin. Kortti
   erottuu pintaerolla ja hiusviivalla, ei blurilla. */
.quick { background: linear-gradient(180deg, var(--bg-deep) 0%, #0C1116 100%);
  border: 1px solid var(--line); border-left: 3px solid var(--primary);
  border-radius: 0 var(--r-kortti) var(--r-kortti) 0; padding:var(--v6); margin:0; }
.quick-label { font-family: var(--f-kone); font-size:var(--t-0); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); margin-bottom:var(--v3); display: flex; align-items: center; gap:var(--v2); }
.quick-label .material-icons-round { font-size:var(--t-2); }
.quick p { font-size:var(--t-2); margin-bottom:0; color: var(--white); font-weight: 400; max-width: 72ch; }

/* INFO BLOCK (cyan) */
.info-block { padding:var(--v5) var(--v6); border-left: 3px solid rgba(0,229,255,0.5); background: rgba(0,229,255,0.03); border-radius: 0 var(--r-kortti) var(--r-kortti) 0; margin:var(--v6) 0; display: flex; gap:var(--v3); max-width: 72ch; }
.info-block .material-icons-round { color: var(--accent); font-size:var(--t-3); flex-shrink: 0; margin-top:var(--v1); }
.info-block p { margin-bottom:0; font-size:var(--t-2); color: var(--slate-300); }
.info-block strong { color: var(--white); }

/* TIMELINE */
.timeline { margin:var(--v6) 0 var(--v2); max-width: 72ch; }
.timeline-item { position: relative; padding-left:var(--v8); padding-bottom:var(--v6); }
.timeline-item:last-child { padding-bottom:0; }
.timeline-item::before { content: ""; position: absolute; left: 6px; top: 18px; bottom: -4px; width: 2px; background: linear-gradient(to bottom, var(--primary), transparent); }
.timeline-item:last-child::before { display: none; }
.timeline-dot { position: absolute; left: 0; top: 4px; width: 14px; height: 14px; background: var(--primary); border-radius: 50%; border: 3px solid var(--bg-dark); }
.timeline-item h3 { margin:0 0 var(--v1); font-size:var(--t-3); }
.timeline-item p { margin-bottom:0; font-size:var(--t-2); color: var(--slate-400); }

/* --- §8.7 FAQ-HARMONIKKA: hiusviivarivit, ei kortteja -----------------------
   YKSI mekanismi: <details> + <summary>, ei JavaScriptia eika max-height-
   transitiota. Kaksi kovaa saantoa:
   1. Sisalto on AINA DOMissa, myos kiinni. Selain piilottaa sen omalla
      mekanismillaan, joten AEO-rakenne ja FAQPage-schema sailyvat.
   2. Tyopoydalla auki, mobiilissa kiinni, SAMA DOM. Sivun pystybudjetti on
      mobiiliongelma, eika sita ratkaista piilottamalla sisaltoa tyopoydalta.
   Mitattu tasta sivusta: 11 vastausta auki maksoi mobiilissa noin 1 600 px.

   HUOM max-height-ansa: talla ratkaisulla sita ei ole. Jos joskus vaihdat
   max-height:0 + overflow:hidden -pariin, muista nollata MYOS pystypehmuste
   samassa saannossa, muuten sisallon ensimmainen 24 px nakyy kortin alareunan
   ali (max-height rajaa sisaltolaatikon, overflow leikkaa pehmustelaatikon). */
.faq { margin-top:var(--v3); max-width: 72ch; }
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-item:first-child { border-top: 1px solid var(--line-soft); }
.faq-q { font-size:var(--t-2); font-weight: 600; color: var(--white);
  display: flex; gap:var(--v2); align-items: flex-start;
  padding:var(--v4) 0; min-height: 44px; cursor: pointer; list-style: none; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q .material-icons-round { color: var(--accent); font-size:var(--t-3); margin-top:var(--v1); flex-shrink: 0; }
.faq-q::after { content: "expand_more"; font-family: 'Material Symbols Rounded';
  font-size:var(--t-3); color: var(--slate-400); margin-left: auto; flex-shrink: 0;
  transition: transform var(--dur) var(--ease); }
.faq-item[open] .faq-q::after { transform: rotate(180deg); }
.faq-q:hover { color: var(--orange-400); }
.faq-a { font-size:var(--t-2); color: var(--slate-400); margin-bottom:0;
  padding:0 0 var(--v5) var(--v6); }
@media (min-width: 821px) {
  /* Tyopoydalla auki eika avattavissa: ei osoitinta, ei nuolta, sisalto nakyviin.
     ::details-content tarvitaan uusissa selaimissa, display:block vanhoissa. */
  .faq-q { cursor: default; }
  .faq-q::after { display: none; }
  .faq-item > *:not(summary) { display: block !important; }
  .faq-item::details-content { content-visibility: visible !important; block-size: auto !important; }
}

/* §8.12 YHTEYSKOHTA sisallon lopussa */
.cta-block { background: linear-gradient(180deg, var(--bg-deep) 0%, #0C1116 100%); border: 1px solid var(--line); border-top: 2px solid var(--primary); border-radius: var(--r-kortti); padding:var(--v12) var(--v8); margin:var(--v16) auto 0; max-width: var(--palsta); }
.cta-block h2 { color: var(--white); margin:0 0 var(--v3); font-size:var(--t-4); }
.cta-block p { color: var(--slate-400); margin-bottom:var(--v6); font-size:var(--t-2); max-width: 60ch; }
.cta-row { display: flex; gap:var(--v3); flex-wrap: wrap; }
.cta-fine { margin-top:var(--v5); font-size:var(--t-1); color: var(--slate-500); }

/* SOURCES + FOOTER */
.sources { max-width: var(--palsta); margin:var(--v12) auto 0; padding:0 var(--v6); }
.sources h3 { font-family: var(--f-kone); font-size:var(--t-0); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-400); margin:0 0 var(--v3); display: flex; align-items: center; gap:var(--v2); }
.sources h3::before { content:""; width: 16px; height: 2px; background: var(--line); flex-shrink: 0; }
.sources ul { list-style: none; padding:0; max-width: 72ch; }
.sources li { padding-left:0; margin-bottom:var(--v2); font-size:var(--t-1); color: var(--slate-400); }
.sources li::before { content: none; }
.sources a { color: var(--orange-400); word-break: break-word; }
.site-footer { border-top: 1px solid var(--line); margin-top:var(--v12); background: var(--bg-deep); }
.footer-inner { max-width: var(--palsta); margin:0 auto; padding:var(--v8) var(--v6); font-size:var(--t-1); color: var(--slate-500); display: grid; grid-template-columns: 1.5fr 1fr; gap:var(--v6); }
.footer-inner .logo { color: var(--slate-300); margin-bottom:var(--v2); }
.footer-col strong { color: var(--slate-300); font-weight: 600; display: block; margin-bottom:var(--v2); font-size:var(--t-1); }
.footer-col p { margin-bottom:var(--v1); }
.footer-col a { color: var(--slate-400); text-decoration: none; }

/* CREDIT */
.site-credit { text-align: center; padding:0 var(--v6) var(--v6); font-size:var(--t-0); color: var(--slate-500); }
.site-credit a { color: inherit; text-decoration: none; }
.site-credit a:hover { color: var(--slate-300); }
.site-credit .pulse-dot { display: inline-block; width: 5px; height: 5px; background: #22c55e; border-radius: 50%; vertical-align: middle; margin:0 4px var(--v1); animation: site-credit-pulse 2s ease-in-out infinite; }
@keyframes site-credit-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* --- §8.11 MOBIILIANKKURI KORVAA KELLUVAN CTA:N --------------------------
   Kelluva pyorea CTA peitti sisaltoa tyopoydalla ja oli toinen rinnakkainen
   paatoiminto samalla ruudulla. Sama linkki ja sama teksti elaa nyt
   ankkurissa, joka ei peita mitaan koska body saa sille pehmusteen. */
.floating-cta { display: none; }
@media (max-width: 1023px) {
  .floating-cta { display: flex; align-items: center; justify-content: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: rgba(15,20,25,0.96); backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line);
    padding:var(--v3) var(--v4) calc(var(--v3) + env(safe-area-inset-bottom, 0px)); }
  .floating-cta a, .content-section .floating-cta a {
    font-family: var(--f-kone); font-size:var(--t-1); font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    background: var(--toiminta-pinta); color: #fff; text-decoration: none;
    padding:14px var(--v6); min-height: 44px; border-radius: var(--r-pieni);
    display: inline-flex; align-items: center; justify-content: center;
    gap:var(--v2); width: 100%; }
  .floating-cta .material-icons-round { font-size:var(--t-3); }
  body { padding-bottom: 82px; }
  /* §8.1: yksi taytetty paatoiminto per ruudullinen, ja tarttuvan ylatunnisteen
     CTA lasketaan mukaan. Mobiilissa kiinteä ankkuri kantaa yhteydenoton koko
     sivun ajan, joten ylatunnisteen CTA on kolmas rinnakkainen toiminto.
     Se myos rivittyi kahdelle riville ja vei 219 px eli 56 % ruudun leveydesta,
     jolloin logo ja nappi olivat lahes yhta painavat. Sama kohde (contact.html)
     on heron paa-CTA:ssa 623 px kohdalla, eli mitaan ei menetea. */
  .site-header .header-cta { display: none; }
}

@media (max-width: 1099px) {
  .stats { margin-top:var(--v8); }
}
@media (max-width: 600px) {
  .header-inner { padding:var(--v3) var(--v4); }
  .header-cta { padding:var(--v2) var(--v3); font-size:var(--t-0); }
  /* §6.5 lepotilan portti on mobiilissa se vaikein: ensimmaisella ruudulla on
     5-rivinen H1 ja 5 lauseen lead, ja molemmat ovat lukittua tekstia.
     Ainoa vipu joka ei koske tekstiin on ilma niiden ymparilla. */
  .hero-inner { padding:var(--v12) var(--v4) var(--v8); }
  h1 { margin-bottom:var(--v6); line-height: 1.1; }
  .hero-toimet { margin-top:var(--v6); }
  /* Byline rivittyi kolmelle riville ja jokaisen rivin loppuun jai erotinpiste
     roikkumaan. Mobiilissa se on pino ilman erottimia. */
  .byline { flex-direction: column; align-items: flex-start; gap:var(--v1); }
  .byline .dot { display: none; }
  .palsta, .sources { padding:0 var(--v4); }
  .osio { padding:var(--v8) 0; }
  .osio--nosto { padding:var(--v12) 0; }
  .osio--tiivis { padding:var(--v6) 0; }
  .quick { padding:var(--v5); }
  .cta-block { padding:var(--v8) var(--v5); margin-top:var(--v12); }
  .cta-block h2 { font-size:var(--t-3); }
  .cta-row .btn-primary, .cta-row .btn-secondary { width: 100%; }
  .footer-inner { grid-template-columns: 1fr; }
}

/* =========================================================================
   LOHKO D:N LISAYKSET. Jokainen on perusteltu, eika yksikaan ole tyylivalinta.
   ========================================================================= */

/* --- §8.4 VASTAUSPALKIN HALLITSEVA RIVI -----------------------------------
   SAANTO joka lukittiin lohko D:ssa: hallitseva luku on se joka vastaa sivun
   OMAN H1:n kysymykseen, ei se joka sattuu olemaan suurin. Vari tulee
   merkityskartasta (§3.1) eika painoarvosta:

     maaraaika -> oranssi   (.stat--paa, malli: "28.9.2026")
     vastaus   -> valkoinen (.stats--rauha .stat--paa)
     sitova ehto -> syaani  (.stat--ehto)

   Miksi tama tarvitaan: mallin hallitseva on oranssi koska se ON maaraaika.
   Jos sama oranssi kopioidaan sivulle jonka vastaus ei ole maaraaika, sama
   vari alkaa tarkoittaa kahta asiaa ja merkityskartta (makuportti §2 mitta
   10) kaatuu. Rauha-variantti pitaa hallitsevan SUURUUDEN mutta vaihtaa sen
   MERKIN. Efektibudjetti kummassakin: tausta + ylareuna = 2. */
.stats--rauha .stat--paa { border-top: 2px solid rgba(255,255,255,0.38); }
.stats--rauha .stat--paa .num { color: var(--white); }

/* --- HERON OIKEA PALSTA ON SIVUN VASTAUS ----------------------------------
   Mallissa vastaus on kolme lukua. Sivulla jolla lukuja ei ole, vastaus on
   sivun oma "Lyhyt vastaus" -kappale. Sama paikka, sama tehtava, eri
   sisaltotyyppi. Vaihtoehto olisi jattaa oikea palsta tyhjaksi, ja se on
   tasan se vika josta koko lohko C lahti liikkeelle (344 px kuollutta
   aluetta heron korkeudelta).
   Oranssi ylareuna merkitsee taman hallitsevaksi samalla mekanismilla kuin
   .stat--paa, joten sivulla on yha TASAN YKSI hallitseva elementti. */
.hero-vastaus > .quick {
  border-radius: var(--r-kortti); border-left: 1px solid var(--line);
  border-top: 2px solid var(--primary);
  background: var(--bg-deep);
}
.hero-vastaus > .quick p { font-size:var(--t-2); color: var(--slate-300); }
.hero-vastaus > .quick p.bright, .hero-vastaus > .quick > p:first-of-type { color: var(--white); }

/* --- §8.10 KICKER: TASAN YKSI PER SIVU ------------------------------------
   Turun sivulla oli kaksi etikettia pinossa ennen H1:ta: pillerinmuotoinen
   sijaintimerkki ja eyebrow. Kaksi etikettia perakkain on kaksi kickeria,
   ja pilleri oli lisaksi kehyksellinen 9999px-elementti (§7.1 kieltaa).
   Sijaintitieto on metatietoa, joten se elaa bylinessa muun metatiedon
   kanssa. Yhtaan sanaa ei poistettu. */
.byline .paikka { display: inline-flex; align-items: center; gap:var(--v1); }

/* --- KORTTIRUUDUKOT -> HIUSVIIVALOHKOT ------------------------------------
   .card ja .related-card olivat taustallisia, reunallisia ja pyoristettyja
   laatikoita, eli kolmas ja neljas kehyskulma sivulla. Malli kayttaa samaan
   tehtavaan pintaeroa ja hiusviivaa. Kulmia jaa 2 (6px ja 12px). */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap:1px; background: var(--line-soft); border: 1px solid var(--line-soft);
  border-radius: var(--r-kortti); overflow: hidden; margin:var(--v6) 0; max-width: 72ch; }
.card { background: var(--bg-deep); border: 0; border-radius: 0; padding:var(--v6); }
.card h3 { color: var(--white); margin:0 0 var(--v3); font-size:var(--t-3); }
.card ul { padding-left:0; margin-bottom:0; max-width: none; }

.related-links { display: grid; grid-template-columns: 1fr; gap:0; max-width: 72ch;
  border-top: 1px solid var(--line-soft); }
.related-card { display: block; padding:var(--v4) 0; border-bottom: 1px solid var(--line-soft);
  text-decoration: none; }
.related-card:hover .rl-title { color: var(--orange-400); }
.rl-label { font-family: var(--f-kone); font-size:var(--t-0); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-400);
  display: block; margin-bottom:var(--v1); }
.rl-title { font-size:var(--t-2); font-weight: 600; color: var(--white); display: block;
  transition: color var(--dur) var(--ease); }

/* --- §8.9 NOSTOLAUSE (.callout) -------------------------------------------
   Oli rgba(255,92,0,0.08)-tausta + 3px oranssi reuna + 12px kulma. Oranssi
   tausta tarkoitti "toiminta", mutta nostolause ei ole toiminto vaan
   painotettu lause. Se on nyt sama hiusviiva+pinta -kuvio kuin .quick,
   ilman oranssia pintaa. */
.callout { background: var(--bg-deep); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: 0 var(--r-kortti) var(--r-kortti) 0;
  padding:var(--v5) var(--v6); margin:var(--v6) 0; color: var(--slate-300);
  max-width: 72ch; }
.callout strong { color: var(--white); }

/* --- TAULUKOT --------------------------------------------------------------
   Hiusviivarivit, ei kortteja, ei raitoja. Luvut monoa (rekisterisaanto). */
.varke-taulu { width: 100%; border-collapse: collapse; margin:var(--v6) 0; max-width: 72ch;
  font-size:var(--t-1); }
.varke-taulu th, .varke-taulu td { text-align: left; padding:var(--v3) var(--v4) var(--v3) 0;
  border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--slate-300); }
.varke-taulu th { font-family: var(--f-kone); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; font-size:var(--t-0); color: var(--slate-400); }
.varke-taulu td.tnum { font-family: var(--f-kone); color: var(--white); }

/* --- §8.1 YKSI TAYTETTY PAATOIMINTO PER RUUDULLINEN ------------------------
   Neljalla sivulla ylatunnisteen CTA oli taytetty oranssi laatikko jolla oli
   30 px oranssi hehkuvarjo. Kolme asiaa vikana: (1) se oli ruudun ainoa
   taytetty painike ja veti katseen pois otsikosta, (2) hehku on
   efektibudjetin kolmas efekti (tausta + kulma + varjo), (3) tarttuva
   ylatunniste lasketaan mukaan paatoimintoihin. Heron CTA on nyt se taytetty.
   Sama teksti, vain paino muuttuu. */
.varke-sivu .site-header .header-cta,
.varke-sivu .content-section a.header-cta {
  background: transparent; border: 1px solid var(--line); color: var(--white);
  box-shadow: none; transform: none;
  font-family: var(--f-kone); font-size:var(--t-1); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding:10px var(--v4); border-radius: var(--r-pieni); }
.varke-sivu .site-header .header-cta:hover {
  border-color: rgba(255,255,255,0.38); background: rgba(255,255,255,0.035);
  box-shadow: none; transform: none; }

/* §7.3 varjolista: vain --varjo-nosto ja --varjo-modaali ovat olemassa.
   Oranssi hehku painikkeen alla ei ole kummassakaan. */
/* :not(:focus-visible) on PAKOLLINEN. Ilman sita tama saanto (0,2,0) voittaa
   sivun oman box-shadow-fokusrenkaan (0,1,1) ja vie renkaan mukanaan. Mitattu
   hakuoppaalta: nelja kohdetta jai ilman rengasta, ja laskettu outline nayttti
   validilta koska rengas ei ollut outline vaan varjo. */
.varke-sivu .btn-primary:not(:focus-visible), .varke-sivu .cta-button:not(:focus-visible),
.varke-sivu .content-section a.btn-primary:not(:focus-visible),
.varke-sivu .content-section a.cta-button:not(:focus-visible),
.varke-sivu .floating-cta a:not(:focus-visible) { box-shadow: none; }
.varke-sivu .btn-primary:hover:not(:focus-visible), .varke-sivu .cta-button:hover:not(:focus-visible),
.varke-sivu .content-section a.btn-primary:hover:not(:focus-visible) { box-shadow: none; transform: none; }

/* --- §8.7 FAQ ON AINA YKSIPALSTAINEN --------------------------------------
   LOHKO D:N PAATOS, ja se koskee myos mallia.
   Brandbook §8.7 suositteli tyopoydalla kahta palstaa. Se ei kanna, ja syy on
   mitattava eika makuasia:
   1. 1160 px palsta kahtena palstana 32 px valilla = 564 px per palsta, eli
      n. 62 merkkia rivilla. Sivun muu leipateksti on 72ch. Sivulle syntyisi
      TOINEN rivimitta, ja §9.1:n "yksi ruudukko koko sivulle" rikkoutuisi.
   2. Pystylinjoja tulisi yksi lisaa. Makuportti §2 mitta 4 sallii enintaan 4
      alkulinjaa, ja nailla sivuilla niita on jo 3 (palsta, listan sisennys,
      heron oikea palsta).
   3. Palstat ovat eripituiset aina kun vastaukset ovat eripituisia, ja ne
      ovat: mitattu 2-9 rivia per vastaus kaikilla viidella sivulla.
   4. Hyoty koskisi vain tyopoytaa. Kirea pystybudjetti on mobiilissa, jossa
      palstoja on aina yksi.
   Pystybudjetti ratkaistaan siis harmonikalla (mobiilissa kiinni,
   tyopoydalla auki), ei palstoituksella. */
.faq { column-count: auto; }

/* --- MAININ ULKOPUOLISET PINNAT JA VANHAT LUOKKANIMET ---------------------
   Mallissa leipatekstin saannot ovat muodossa "article p", koska mallin main
   on <main><article><section class="osio">. Kolmella muulla sivulla <article>
   puuttui, jolloin linkit putosivat selaimen oletusvarille rgb(0,0,238) =
   1,88:1 tummaa pintaa vasten. Mitattu: 5 kontrastirikketta yhdella sivulla.
   Rakenne yhtenaistettiin (<article> lisattiin), ja lisaksi samat saannot
   annetaan tassa mainin ULKOPUOLISILLE pinnoille .cta-block ja .sources,
   jotka eivat ole minkaan articlen sisalla millaan sivulla. */
.cta-block a, .muted-note a, .cta-fine a { color: var(--orange-400);
  text-decoration: underline; text-underline-offset: 2px; }
/* Painike .cta-blockin sisalla: .cta-block a (0,1,1) voittaa .btn-primaryn
   (0,1,0), joten pelkka text-decoration ei riita. Ilman color-julistusta
   taytetyn painikkeen teksti peri oranssin linkkivarin ja mitattiin
   2,19:1 = FAIL taytetta #CC4A08 vasten. */
.cta-block a.btn-primary, .cta-block a.btn-secondary, .cta-block a.cta-button,
.varke-sivu a.cta-button { text-decoration: none; color: #fff; }
.muted-note { font-size:var(--t-1); color: var(--slate-500); margin-top:var(--v3); }

/* .cta-button on kolmen sivun vanha nimi samalle asialle kuin .btn-primary.
   Nimi jaa, ulkoasu yhtenaistetaan. Nimien siivous on lohko G. */
.varke-sivu .cta-button, .varke-sivu .content-section a.cta-button {
  font-family: var(--f-kone); font-size:var(--t-1); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap:var(--v2);
  padding:14px var(--v6); min-height: 44px; border-radius: var(--r-pieni);
  border: 1px solid transparent; background: var(--toiminta-pinta); color: #fff;
  text-decoration: none; margin:0;
  transition: background var(--dur) var(--ease); }
.varke-sivu .cta-button:hover { background: var(--toiminta-pinta-hover); }
.varke-sivu .cta-button:active { background: var(--toiminta-pinta-active); }

/* --- KAKSISAVYISEN OTSIKON VAIMEA PUOLISKO: POISTETTU 14.9.2026 -----------
   Tama saanto oli lohko D:n korjaus siihen, ettei lohko C:n paatos vaimean
   puoliskon savysta tullut voimaan kaskadissa. Korjaus oli oikea, mutta se
   korjasi varin VAARASSA kuviossa. §5.4.1 poisti koko kuvion, joten myos
   saanto lahtee. Opetus joka jaa: kun `-webkit-text-fill-color` on asetettu,
   pelkka `color` ei riita kumoamaan sita, ja se koskee myos `.otsikko-rivi`
   -saantoa joka nollaa molemmat. */

/* Sama leipatekstin sopimus myos silloin kun <article> puuttuu. Kolme sivua
   viidesta rakensi mainin ilman sita, ja silloin "article a" -saanto ei osu
   ja linkki putoaa selaimen oletusvarille rgb(0,0,238) = alle 2:1 tummalla
   pinnalla. Rakenne yhtenaistettiin, mutta saannon ei pida NOJATA siihen:
   yksi unohtunut kaare ei saa olla kontrastirike. */
/* Linkkivari kuuluu LEIPATEKSTIN linkille, ei jokaiselle .osion sisalla
   olevalle a-elementille. Ensimmainen versio oli ".osio a" poissulkulistalla,
   ja se on vaara rakenne: jokainen uusi painikeluokka (.yhteys-nappi,
   .ankkuri-nappi, .lm-nappi) pitaisi muistaa lisata listalle, ja unohtuessaan
   taytetyn painikkeen teksti muuttuu oranssiksi oranssilla = 2,19:1 FAIL.
   Mitattu tasmalleen nain hakuoppaan .yhteys-nappi--paa -painikkeesta.
   Kaksi saantoa, ja NIISTA ENSIMMAINEN on se kestava: LUOKATON linkki on aina
   leipatekstin linkki, koska jokaisella painikkeella on luokka. Se kattaa
   myos ne kohdat joissa linkki ei ole suoraan p/li/td:n lapsi, esimerkiksi
   .calloutin sisalla (mitattu: se jai ensimmaisesta versiosta ulos ja nayttti
   selaimen oletussinista 1,82:1 tummalla pinnalla). */
.varke-sivu .osio a:not([class]),
.varke-sivu .osio p > a, .varke-sivu .osio li > a, .varke-sivu .osio td > a,
.varke-sivu .osio dd > a {
  color: var(--orange-400); text-decoration: underline; text-underline-offset: 2px; }
.varke-sivu .osio p > a.btn-primary, .varke-sivu .osio p > a.cta-button,
.varke-sivu .osio p > a[class*="nappi"] { color: #fff; text-decoration: none; }
.varke-sivu .osio p { color: var(--slate-300); }
.varke-sivu .osio strong { color: var(--white); font-weight: 600; }

/* -----------------------------------------------------------------------------
   LOHKO I OSA 2: YLATUNNISTEEN LOGO ON LINKKI KOTIIN
   Mitattu 16.9.2026: VARKE-klusterin kuudelta sivulta ei vienyt YHTAKAAN
   linkkia sivuston etusivulle, palveluihin eika konsultointiin. Ainoat ulos
   vievat linkit olivat /contact, klusterin omat sivut ja ulkoiset lahteet
   (varke.fi, ym.fi, motiva.fi, vero.fi). Logo oli <div>, ei linkki.

   Seuraus on tasan se jota tama lohko yrittaa valttaa: Googlesta hakuoppaalle
   laskeutuva lukija nakee yrityksen joka nayttaa tekevan pelkkaa VARKEa.
   Avustus on ovi, ja ovesta on paastava myos sisaan taloon. Siksi logo on nyt
   linkki eika koriste. Yhtaan lausetta ei muutettu.

   Tyyli: `.logo` on jo olemassa ja se kantaa kirjasimen, koon, valistyksen ja
   varin. Linkille lisataan vain alleviivauksen poisto ja interaktiotilat,
   jotta se ei jaa ainoaksi tilattomaksi kohteeksi sivulla.
   -------------------------------------------------------------------------- */
a.logo { text-decoration: none; transition: color var(--dur, 200ms) var(--ease, cubic-bezier(0.2, 0, 0, 1)); }
a.logo:hover { color: var(--toiminta); }
a.logo:focus-visible { outline: 2px solid var(--toiminta); outline-offset: 4px; border-radius: var(--r-pieni, 6px); }