/* =====================================================================
   SIVUKAS-SAPLUUNA · KOMPONENTTITYYLIT
   =====================================================================
   Kaikki värit, fontit ja mitat tulevat teematiedostosta (teema.css)
   CSS-muuttujina. Tämä tiedosto on SAMA kaikilla sivustoilla — sivuston
   ilme vaihdetaan teematiedostoa vaihtamalla, ei tätä muokkaamalla.

   Uudet tokenit (--vari-hero, --vari-korostus-2, --vari-reuna,
   --vari-varjo, --vari-teksti-himmea, --vari-hover-pinta, --fontti-otsikko,
   --vari-nappi-teksti)
   on kirjoitettu var(x, fallback) -muodossa, jotta vanhat teemavariantit
   (css/teemat/) toimivat vaikka niistä puuttuisivat uudet arvot.

   --vari-tumma-rgb (lisätty 11.8.2026): --vari-tumma R,G,B pilkulla
   eroteltuna (esim. "22, 70, 60"), koska hex-/nimimuotoinen CSS-muuttuja
   ei sellaisenaan käy rgba()-funktion sisään läpikuultavaan taustaan.
   Käytössä osioissa 9 ja 10 alla. Kaikki neljä valmista teemaa sisältävät
   tämän jo — jos lisäät uuden teeman, muista laskea ja lisätä se myös.

   --vari-nappi-teksti (lisätty 6.8.2026): napin/korostuspallon tekstiväri
   --vari-korostus-taustaa vasten. Fallback on --vari-teksti-tummalla, joka
   riittää useimmille teemoille (korostusväri on tarpeeksi tumma valkoiselle
   tekstille). Aseta oma arvo teemassa VAIN jos --vari-teksti-tummalla
   epäonnistuisi WCAG-kontrastissa juuri --vari-korostus-taustalla — näin
   kävi "Tumma & näyttävä" -teemalle (kultainen nappi + valkoinen teksti =
   2,52:1, alle vaaditun 4,5:1). Älä sekoita --vari-teksti-tummalla:aan,
   joka on kiinteä footerin tekstiväri (--vari-tumma-taustaa vasten, eri pari).

   Sisällys:
     1. Perusasetukset
     2. Yleiset apuluokat (.rajaus, .nappi, .hyppylinkki)
     2b. Yläpalkki
     3. Hero
     4. Korttirivit (.kortit)
     5. Vaihekortit (.vaiheet)
     6. Hinnastotaulukko (.hinnasto)
     7. Footer
     8. Artikkeli (blogi)
     9. Hero-variantti: valokuva + CTA-laatikko (.hero-valokuva)
     10. Tumma tekstuuriosio (.osio-tumma)
   ===================================================================== */

/* --- 1. Perusasetukset --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--fontti);
  font-size: var(--fonttikoko-perus);
  color: var(--vari-teksti);
  background: var(--vari-tausta);
  line-height: var(--riviheitto);
}

h1, h2 {
  font-family: var(--fontti-otsikko, var(--fontti));
  font-weight: var(--otsikko-paino, 400);
}
h1 { font-size: var(--fonttikoko-h1); line-height: 1.06; }
h2 { font-size: var(--fonttikoko-h2); line-height: 1.15; margin-bottom: 2.25rem; }
h3 { font-size: var(--fonttikoko-h3); font-weight: 700; margin-bottom: .5rem; }

/* Rivitys: otsikot tasapainoisiksi, leipäteksti ilman yksinäisiä loppusanoja.
   Ei koskaan *-valitsimella — sillä on suorituskykyhinta. */
h1, h2, h3 { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }

section { padding: var(--lohkovali) 0; }

/* Peräkkäisten kappaleiden väli (reset nollaa marginit → palautetaan rytmi) */
section p + p { margin-top: .85rem; }

/* Leipätekstin mitta ja sävy lohkoissa */
section > .rajaus > p { max-width: 62ch; color: var(--vari-teksti-himmea, inherit); }

/* Vaalea taustalohko — anna sectionille class="vaalea" */
.vaalea { background: var(--vari-vaalea); }

/* Näppäimistökäyttäjän fokusrengas näkyviin kaikissa interaktiivisissa */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--vari-korostus);
  outline-offset: 2px;
}

/* --- 2. Yleiset apuluokat --- */

/* Sisällön rajaus keskelle */
.rajaus {
  max-width: var(--sisallon-leveys);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Toimintanappi (linkki napin näköisenä) */
.nappi {
  display: inline-block;
  background: var(--vari-korostus);
  color: var(--vari-nappi-teksti, var(--vari-teksti-tummalla));
  padding: .85rem 1.85rem;
  border-radius: var(--pyoristys);
  text-decoration: none;
  font-weight: 700;
}
.nappi:hover { background: var(--vari-korostus-hover); }

/* Hyppylinkki ("Siirry sisältöön"): piilossa kunnes saa näppäimistöfokuksen.
   YHTEINEN-yläpalkin ensimmäinen linkki joka sivulla; kohde <main id="sisalto">. */
.hyppylinkki {
  position: absolute;
  left: 1rem;
  top: .75rem;
  z-index: 10;
  background: var(--vari-tumma);
  color: var(--vari-teksti-tummalla);
  padding: .6rem 1.1rem;
  border-radius: var(--pyoristys);
  text-decoration: none;
  transform: translateY(-250%);
}
.hyppylinkki:focus { transform: none; }

/* Hyppylinkin kohde: ei fokusrengasta koko sisältölohkon ympärille */
main[tabindex="-1"]:focus { outline: none; }

/* Toissijainen nappi (ääriviiva) */
.nappi--toissijainen {
  background: transparent;
  color: inherit;
  border: 2px solid currentColor;
  padding: calc(.85rem - 2px) calc(1.85rem - 2px);
}
.nappi--toissijainen:hover { background: var(--vari-hover-pinta, rgba(0 0 0 / .06)); }

/* --- 2b. Yläpalkki (YHTEINEN navigaatio) --- */
.ylapalkki {
  background: var(--vari-tausta);
  border-bottom: 1px solid var(--vari-reuna, rgba(0 0 0 / .1));
}
.ylapalkki .rajaus {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-top: .9rem; padding-bottom: .9rem;
}
.ylapalkki nav { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.ylapalkki nav a { color: var(--vari-teksti); text-decoration: none; font-size: 1rem; }
.ylapalkki nav a:hover { color: var(--vari-korostus); }
.ylapalkki .nappi { padding: .55rem 1.15rem; font-size: .95rem; border-radius: calc(var(--pyoristys) - 2px); }
/* KONTRASTIKORJAUS (PSI 30.7.2026): ".ylapalkki nav a" voittaa ".nappi"-säännön
   spesifisyydellä (0,1,2 > 0,1,0) → yläpalkin napin teksti peri tumman värin
   vihreällä pohjalla (kontrasti 2,1:1; WCAG AA vaatii 4,5:1). Palautetaan napin
   oma tekstiväri, myös hoverissa (nav a:hover voittaisi muuten samoin). */
.ylapalkki nav a.nappi,
.ylapalkki nav a.nappi:hover { color: var(--vari-nappi-teksti, var(--vari-teksti-tummalla)); }

/* Ankkurilinkkien pehmeä vieritys */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
section[id] { scroll-margin-top: 1rem; }

/* --- 3. Hero (kaksipalstainen: teksti + maskotti; kapealla pinoutuu) --- */
.hero {
  background: var(--vari-hero, var(--vari-vaalea));
  color: var(--vari-teksti);
  padding: var(--lohkovali) 0;
}
.hero .rajaus { display: flex; align-items: center; gap: 3rem; flex-wrap: wrap; }
.hero-teksti { flex: 1 1 26rem; }
.hero-kuva { flex: 0 1 auto; margin-inline: auto; }
.hero-kuva svg { width: clamp(220px, 30vw, 340px); height: auto; display: block; }
.hero h1 em { color: var(--vari-korostus-2-tumma, var(--vari-korostus)); font-style: italic; }
.hero p { margin: 1.35rem 0 2rem; font-size: 1.3125rem; max-width: 42ch; color: var(--vari-teksti-himmea, inherit); }
.hero .napit { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Logo: maskottimerkki (inline-SVG) + tekstiosa vierekkäin.
   SVG:n värit tulevat teemasta var()-arvoina, joten teemanvaihto värittää
   myös maskotin. */
.logo {
  color: var(--vari-teksti);
  font-weight: 700; letter-spacing: .02em;
  font-size: 1.25rem;
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none;
}
.logo svg { width: 48px; height: auto; flex: none; }

/* --- 4. Korttirivit --- */
.kortit {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.kortti {
  background: var(--vari-vaalea);
  border-radius: var(--pyoristys);
  padding: 1.75rem 1.6rem;
  box-shadow: 0 2px 10px var(--vari-varjo, rgba(0 0 0 / .06));
}
/* Kortit vaalealla taustalohkolla tarvitsevat vaalean pohjan */
.vaalea .kortti { background: var(--vari-tausta); }

/* Kortin otsikko oikealla otsikkotasolla (esim. h2 kun sivulla ei ole
   erillistä h2:ta ennen korttilistaa) mutta h3:n ulkoasulla — h2 perisi
   muuten Instrument Serifin ja ison koon. */
.kortti-otsikko { font-size: var(--fonttikoko-h3); font-weight: 700; margin-bottom: .5rem; font-family: var(--fontti); }

/* Ikonin värillinen ympyrä kortin yläreunassa */
.ikoni-tausta {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--vari-korostus-2, var(--vari-korostus));
  display: grid; place-items: center;
  margin-bottom: 1rem;
}
/* Ikonin viiva tummana oranssilla ympyrällä — valkoinen jäisi alle 3:1 (WCAG,
   ei-tekstisisältö). Jos --vari-korostus-2 on tumma, vaihda tämä vaaleaksi. */
.ikoni-tausta .ikoni { width: 23px; height: 23px; color: var(--vari-tumma); }
.kortti p { color: var(--vari-teksti-himmea, inherit); }

/* Linkkikortti (blogilistaus): koko kortti klikattavaksi otsikkolinkin
   ::before-peitolla. Rajattu :has(.kortti-otsikko):lla, jotta muut
   .kortti-käytöt (esim. etusivun ominaisuuskortit) eivät muutu. */
.kortti:has(.kortti-otsikko) {
  position: relative;
  transition: box-shadow .15s ease, transform .15s ease;
}
.kortti:has(.kortti-otsikko):hover {
  box-shadow: 0 4px 16px var(--vari-varjo, rgba(0 0 0 / .12));
  transform: translateY(-2px);
}
.kortti-otsikko a { text-decoration: none; }
.kortti-otsikko a::before { content: ""; position: absolute; inset: 0; }
.kortti-otsikko a::after { content: " →"; display: inline-block; transition: transform .15s ease; }
.kortti:has(.kortti-otsikko):hover .kortti-otsikko a::after { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .kortti:has(.kortti-otsikko) { transition: none; }
  .kortti-otsikko a::after { transition: none; }
}

/* --- 5. Vaihekortit (numeroitu prosessi) --- */
.vaiheet {
  list-style: none; counter-reset: vaihe;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.vaiheet li {
  counter-increment: vaihe;
  background: var(--vari-tausta);
  border-radius: var(--pyoristys);
  padding: 1.75rem 1.6rem;
  box-shadow: 0 2px 10px var(--vari-varjo, rgba(0 0 0 / .06));
}
.vaiheet li::before {
  content: counter(vaihe);
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--vari-korostus);
  color: var(--vari-nappi-teksti, var(--vari-teksti-tummalla));
  font-weight: 700; font-size: 1.1875rem;
  margin-bottom: 1rem;
}
.vaiheet p { color: var(--vari-teksti-himmea, inherit); }
.vaiheet a { color: var(--vari-korostus); font-weight: 700; }

/* --- 6. Hinnastotaulukko --- */
.hinnasto {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.hinnasto .hinta { font-size: 2rem; font-weight: 700; margin: .75rem 0; }
.hinnasto .hinta small { font-size: 1rem; font-weight: 400; }
.hinnasto ul { list-style: none; margin: 1rem 0; }
.hinnasto li { padding-left: 1.5rem; position: relative; margin-bottom: .4rem; }
.hinnasto li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--vari-korostus); font-weight: 700;
}

/* --- 7. Footer --- */
footer {
  background: var(--vari-tumma);
  color: var(--vari-teksti-tummalla);
  padding: 2.25rem 0;
  font-size: .9375rem;
}
footer a { color: var(--vari-linkki-tummalla); }
footer p + p { margin-top: .35rem; color: rgb(255 255 255 / .75); }

/* --- 8. Artikkeli (blogi) --- */
/* Leipätekstin ja seuraavan väliotsikon väliin ilmaa (globaali h2/h3 ei
   varaa margin-topia, koska sama sääntö kattaa myös sectionin ensimmäisen
   otsikon, jolle lisätila ei sopisi). */
article h2 { margin-top: 2.5rem; }
article h3 { margin-top: 1.75rem; }

article table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; }
article th, article td {
  padding: .6rem .9rem;
  border: 1px solid var(--vari-reuna, rgba(0 0 0 / .1));
  text-align: left;
}
article th { background: var(--vari-vaalea); }

/* =====================================================================
   9. HERO-VARIANTTI: VALOKUVA + CTA-LAATIKKO
   =====================================================================
   Vaihtoehto osion 3 tavalliselle .hero:lle. Käytä kun asiakkaalla on
   iso oma valokuva eikä maskotti-SVG:tä: full-bleed valokuva taustalla,
   puolikuultava värilaatikko sen päällä. Ei backdrop-filteriä — pidetty
   tarkoituksella yksinkertaisena. Laatikon rgba(var(--vari-tumma-rgb), .75)
   -tausta on tarkistettu WCAG AA:ksi worst-case-oletuksella (laatikko
   puhtaan valkoisen valokuvakohdan päällä — todellinen kuva on lähes aina
   tummempi, joten tämä on alaraja): leipäteksti (--vari-teksti-tummalla)
   5,16–8,56:1 kaikilla neljällä teemalla (vaatii 4,5:1) — läpäisee reilusti.
   Jos muutat alfa-arvon (.75) tai --vari-tumma-rgb:n, laske kontrasti
   uudelleen (ks. myös CLAUDE.md).

   HTML:
   <section class="hero-valokuva" style="background-image:url('images/hero.jpg')">
     <div class="rajaus">
       <div class="hero-laatikko">
         <h1>Otsikko <em>korostus</em></h1>
         <p>Lyhyt teksti.</p>
         <div class="napit">
           <a class="nappi" href="...">Ensisijainen CTA</a>
           <a class="nappi nappi--toissijainen" href="#...">Toissijainen</a>
         </div>
         <p class="hero-badge"><svg aria-hidden="true">...</svg> Pieni luottamuslause</p>
       </div>
     </div>
   </section>
   ===================================================================== */
.hero-valokuva {
  background-color: var(--vari-tumma); /* näkyy hetken ennen kuin kuva latautuu */
  background-size: cover;
  background-position: center;
  min-height: min(88vh, 620px);
  display: flex;
  align-items: center;
}
.hero-valokuva .rajaus { width: 100%; }

.hero-laatikko {
  background: rgba(var(--vari-tumma-rgb), .75);
  color: var(--vari-teksti-tummalla);
  padding: 2.5rem 2.25rem;
  border-radius: 4px; /* tarkoituksella pienempi kuin --pyoristys — laatikko, ei kortti */
  max-width: 32rem;
}
.hero-laatikko h1 { color: inherit; }
/* --vari-linkki-tummalla on isolle tekstille (≥3:1) mitattu tässä laatikossa
   (3,70–4,40:1 kaikilla neljällä teemalla, worst-case-laskelma alla) — käytä
   VAIN h1 em:ssä, ei koskaan pienessä tekstissä hero-laatikon sisällä. */
.hero-laatikko h1 em { color: var(--vari-linkki-tummalla); font-style: italic; }
.hero-laatikko p { margin: 1.1rem 0 1.75rem; font-size: 1.125rem; max-width: 40ch; color: inherit; }
.hero-laatikko .napit { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero-laatikko .nappi--toissijainen { border-color: currentColor; }
.hero-laatikko .nappi--toissijainen:hover { background: rgb(255 255 255 / .12); }

/* Valokuvan aihe usein toisella puolella kuvaa — siirrä laatikko tyhjälle
   puolelle tällä tai valitse background-position inline-tyylillä sivulla. */
.hero-laatikko--oikea { margin-left: auto; }

/* Pieni luottamusmerkintä laatikon alla (esim. vastausaikalupaus) */
.hero-badge {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  font-size: .9rem;
  color: inherit;
  opacity: .92;
}
.hero-badge svg { width: 18px; height: 18px; flex: none; }

@media (max-width: 640px) {
  .hero-laatikko { padding: 1.85rem 1.5rem; max-width: none; }
}

/* =====================================================================
   10. TUMMA TEKSTUURIOSIO
   =====================================================================
   Täysleveä tumma osio esim. palvelukorteille. Tausta on aina
   var(--vari-tumma) — sama pari kuin footerissa (--vari-teksti-tummalla
   päällä), joten kontrastia ei tarvitse laskea uudelleen. Dekoratiivinen
   tekstuurikuva on INLINE-SVG suoraan HTML:ssä (ei ulkoinen tiedosto),
   koska vain inline-SVG voi lukea teeman var()-värit; tee kuvasta oma/
   lisenssivapaa, ei koskaan kopioitu toiselta sivustolta. Kortit tällä
   pohjalla saavat automaattisesti valkoisen tekstin alla olevilla
   säännöillä — ei tarvitse lisätä luokkia HTML:ään.

   HTML:
   <section class="osio-tumma">
     <svg class="osio-tumma-tausta" aria-hidden="true" viewBox="...">...</svg>
     <div class="rajaus">
       <h2>Otsikko</h2>
       <div class="kortit"> <div class="kortti">...</div> ... </div>
     </div>
   </section>
   ===================================================================== */
.osio-tumma {
  position: relative;
  background: var(--vari-tumma);
  color: var(--vari-teksti-tummalla);
  overflow: clip;
}
.osio-tumma h2 { color: inherit; }
.osio-tumma > .rajaus { position: relative; z-index: 1; }
/* Voittaa globaalin "section > .rajaus > p" -säännön (osio 1), joka asettaisi
   tumman vari-teksti-himmea-värin — väärä tummalla pohjalla. */
.osio-tumma > .rajaus > p { color: inherit; }

.osio-tumma-tausta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%; height: auto;
  z-index: 0;
}

.osio-tumma .kortti {
  background: rgb(255 255 255 / .08);
  border: 1px solid rgb(255 255 255 / .14);
  box-shadow: none;
}
.osio-tumma .kortti h3 { color: var(--vari-teksti-tummalla); }
.osio-tumma .kortti p { color: var(--vari-teksti-tummalla); }

/* =====================================================================
   11. HILLA IT — SIVUSTOKOHTAISET LISÄT
   =====================================================================
   Nämä eivät ole osa Sivukas-sapluunaa. Jos jokin osoittautuu yleisesti
   hyödylliseksi, siirrä se sapluunaan omana osionaan.
   ===================================================================== */

/* Logo on koko lukitus (marja + sanamerkki) yhtenä inline-SVG:nä, ei
   kuvake + tekstinoodi kuten sapluunassa. Korkeus ohjaa kokoa. */
.logo svg { width: auto; height: 30px; }
.logo { gap: 0; }

/* --- Määrittelylista: palvelukuvaukset --- */
/* <dl class="maarittelyt"><dt>Nimi</dt><dd>Kuvaus</dd>...</dl>
   Käytetään palvelu- ja sopimusehtolistoissa, joissa on nimi + selitys. */
.maarittelyt { margin: 2rem 0 0; }
/* Palvelutermi + ikoniympyrä samalla rivillä. Ikoni on koriste (aria-hidden),
   joten se ei saa muuttaa termin luettavuutta: teksti omassa spanissaan,
   jotta pitkä nimi rivittyy ikonin viereen eikä sen alle. */
.maarittelyt dt {
  font-weight: 700;
  font-size: var(--fonttikoko-h3);
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: .85rem;
}
/* Sama logiikka kuin .ikoni-tausta: tumma viiva kirkkaalla oranssilla
   (valkoinen jäisi alle 3:1). Ympyrä ei kutistu pitkän nimen alta. */
.maarittelyt dt .ikoni-ympyra {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--vari-korostus-2);
  display: grid; place-items: center;
}
.maarittelyt dt .ikoni { width: 21px; height: 21px; color: var(--vari-tumma); }
/* Ikoniympyrän leveys + gap, jotta selite linjautuu termin tekstin kanssa. */
.maarittelyt dd { padding-left: calc(40px + .85rem); }
@media (max-width: 30rem) {
  .maarittelyt dd { padding-left: 0; }
}
.maarittelyt dt:first-child { margin-top: 0; }
.maarittelyt dd { margin: .5rem 0 0; color: var(--vari-teksti-himmea); }
.maarittelyt dd + dd { margin-top: .6rem; }

/* --- Haitari (usein kysytyt) --- */
/* Natiivi <details> — ei JavaScriptiä. */
.haitari {
  border: 1px solid var(--vari-reuna);
  border-radius: var(--pyoristys);
  padding: 1.1rem 1.35rem;
  margin-top: .85rem;
  background: var(--vari-tausta);
}
.haitari > summary {
  font-weight: 700;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style-position: outside;
}
.haitari > summary::marker { color: var(--vari-korostus); }
.haitari > *:not(summary) { margin-top: .85rem; color: var(--vari-teksti-himmea); }

/* --- Artikkelin metatiedot otsikon alla --- */
.meta {
  color: var(--vari-teksti-himmea);
  font-size: .9375rem;
  margin-bottom: 1.5rem;
}

/* --- Yhteystietoruudukko --- */
.yhteys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.yhteys h3 { margin-bottom: .35rem; }
.yhteys p { color: var(--vari-teksti-himmea); }
.yhteys a { color: var(--vari-korostus); }

/* --- Marjagradientti koristeviivana osioiden välissä --- */
.gradienttiviiva {
  height: 4px;
  border: 0;
  margin: 0;
  background: var(--gradientti-marja);
}

/* --- Sitaatti (asiakasreferenssi) --- */
.sitaatti {
  margin: 2rem 0 0;
  padding-left: 1.5rem;
  border-left: 4px solid var(--vari-korostus-2);
  font-size: 1.1875rem;
}
.sitaatti footer {
  background: none;
  color: var(--vari-teksti-himmea);
  padding: .75rem 0 0;
  font-size: .9375rem;
}

/* Karlasta on ladattu vain regular ja bold — ei kursiivileikkausta.
   Selaimen synteettinen kursiivi näyttää vinolta Karlan geometrisilla
   muodoilla, joten h1:n korostus tehdään pelkällä värillä. */
.hero h1 em, .hero-laatikko h1 em { font-style: normal; }

/* Artikkelin lukumitta: .rajaus on 1080px, mikä on liikaa leipätekstille.
   ~44rem ≈ 70 merkkiä riviltä. */
article { max-width: 44rem; }
article ul, article ol { margin: 1.25rem 0 1.25rem 1.35rem; }
article li { margin-bottom: .5rem; }
article li::marker { color: var(--vari-korostus); }
article p + p { margin-top: 1rem; }

/* Artikkelilistan kortin päiväys */
.kortti .paivays { font-size: .875rem; color: var(--vari-teksti-himmea); margin-bottom: .35rem; }

/* Sapluunassa ei ole globaalia linkkiväriä (sen sivut käyttivät linkkejä
   vain napeissa ja footerissa). Hilla IT:llä on paljon leipätekstilinkkejä
   ja linkitettyjä korttiotsikoita, joten väri asetetaan tässä.
   --vari-korostus valkoisella 5,18:1 ja vaalealla 4,69:1 — molemmat AA. */
main a { color: var(--vari-korostus); }
main a:hover { color: var(--vari-korostus-hover); }
.nappi, .nappi:hover { color: var(--vari-teksti-tummalla); }
.nappi--toissijainen, .nappi--toissijainen:hover { color: var(--vari-teksti); }
.ylapalkki nav a { color: var(--vari-teksti); }

/* Korttiotsikko luetaan otsikkona, ei linkkinä — tumma teksti (16,3:1),
   nuoli ja hover kertovat klikattavuuden. */
.kortti-otsikko a { color: var(--vari-teksti); }
.kortti-otsikko a:hover { color: var(--vari-korostus); }

/* Otsikon ja sitä seuraavan ingressin väli (reset nollaa marginit). */
h1 + p, h1 + .meta { margin-top: 1.25rem; }

/* --- Prosessikaavio (.prosessi) --- */
/* Käytetään artikkeleissa, joissa alkuperäinen kuva oli vuokaavio. Tehty
   HTML:nä eikä kuvana: teksti on valittavissa, ruudunlukija lukee sen,
   se skaalautuu kapealle näytölle luettavana eikä maksa yhtään tavua
   kuvalatauksena. Leveällä yksi rivi nuolineen, kapealla pystysuunnassa.

   flex: 1 1 0 (ei flex-basis rem-arvona): kaikki askeleet mahtuvat samalle
   riville lukusarakkeen leveydellä eivätkä rivity 4+1. Mobiilissa basis
   nollataan autoksi, muuten se tulkittaisiin laatikon KORKEUDEKSI. */
.prosessi {
  display: flex;
  gap: .55rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
  counter-reset: askel;
}
.prosessi li {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: .85rem .9rem;
  background: var(--vari-vaalea);
  border-radius: var(--pyoristys);
  font-size: .875rem;
  line-height: 1.4;
  position: relative;
}
.prosessi li::marker { content: none; }
.prosessi b {
  display: block;
  counter-increment: askel;
  margin-bottom: .25rem;
  font-size: .6875rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--vari-korostus);
}
.prosessi b::before { content: counter(askel) ". "; }
/* Nuoli laatikoiden väliin — koristetta, ei sisältöä. */
.prosessi li:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  right: -.5rem; top: 50%;
  transform: translateY(-50%);
  color: var(--vari-korostus-2);
  font-size: .95rem;
  line-height: 1;
}
@media (max-width: 700px) {
  .prosessi { flex-direction: column; gap: 1.1rem; }
  .prosessi li { flex: 0 0 auto; font-size: .9375rem; padding: .9rem 1.1rem; }
  .prosessi li:not(:last-child)::after {
    content: "\2193";
    right: auto; left: 1.1rem; top: auto; bottom: -.95rem; transform: none;
  }
}

/* Artikkelikuva: aina täysleveä lukusarakkeessa, kuvateksti alle. */
figure { margin: 2rem 0; }
figure img { width: 100%; height: auto; border-radius: var(--pyoristys); display: block; }
figcaption {
  margin-top: .6rem;
  font-size: .875rem;
  color: var(--vari-teksti-himmea);
}
/* Kapea kuvakaappaus (esim. dialogi) ei venytettynä */
figure.kapea img { width: auto; max-width: 100%; }

/* =====================================================================
   12. YHTEYDENOTTOLOMAKE
   =====================================================================
   Tavallinen HTML-lomake joka POSTaa n8n-webhookiin (ei JavaScriptiä,
   ei fetchiä). Selain hoitaa pakollisten kenttien tarkistuksen natiivisti
   ja n8n ohjaa 303-vastauksella kiitossivulle.

   Kenttien reuna käyttää --vari-reuna-kentta:aa, ei --vari-reuna:aa:
   WCAG 1.4.11 vaatii lomakekentän rajalta 3:1 kontrastin taustaan, ja
   vaalea koristereuna jää 1,33:1:een.
   ===================================================================== */
.lomake { max-width: 34rem; margin-top: 2rem; }
.lomake p { margin: 0 0 1.15rem; }
.lomake label {
  display: block;
  font-weight: 700;
  font-size: .9375rem;
  margin-bottom: .35rem;
}
.lomake input,
.lomake textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--vari-teksti);
  background: var(--vari-tausta);
  border: 1px solid var(--vari-reuna-kentta);
  border-radius: calc(var(--pyoristys) - 6px);
  padding: .6rem .7rem;
}
.lomake textarea { resize: vertical; min-height: 8rem; }
.lomake input:focus-visible,
.lomake textarea:focus-visible {
  outline: 3px solid var(--vari-korostus);
  outline-offset: 1px;
}
.lomake button { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.lomake .pakollinen { color: var(--vari-korostus); }
.lomake-ohje,
.lomake-tietosuoja,
.lomake-lupaus {
  font-size: .875rem;
  color: var(--vari-teksti-himmea);
}
.lomake-lupaus { margin-top: -.4rem; }

/* Roskapostiansa: piilotetaan näkyvistä mutta EI display:none/hidden —
   osa boteista ohittaa piilotetut kentät, ja tämän pitää houkutella ne
   täyttämään se. Ruudunlukijalta piilotettu aria-hiddenillä ja
   näppäimistöltä tabindexillä, joten oikea käyttäjä ei törmää siihen. */
.hunaja-kentta {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* =====================================================================
   13. KASVURAUHA-ETUSIVU (2.9.2026, Nosteen leiskasta)
   =====================================================================
   Leiska: kh-obsidian/Projektit/Hilla IT/Sisältö/Kasvurauha - verkkosivun
   leiska.pdf. Hinta EI ole julkinen (Rissen päätös 2.9.2026) — leiskan
   49 €-blokit korvattu "kiinteä hinta" -viestillä.
   ===================================================================== */

/* Pieni oranssi osiotunniste otsikon yllä (leiskan "eyebrow") */
.tunniste {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--vari-korostus);
  margin-bottom: .65rem;
}

/* Pieni meta-rivi CTA-nappien alla ("5 työpäivässä käyttöön · ...") */
.hero-meta {
  margin-top: 1.35rem;
  font-size: .875rem;
  color: var(--vari-teksti-himmea);
  letter-spacing: .02em;
}

/* Iso marjakuva herossa — sama muoto kuin logossa, skaalattuna */
.hero-marja svg { width: clamp(200px, 26vw, 300px); height: auto; display: block; }

/* Numeroidut ongelmakortit (nykytilanne): numero korostusvärillä */
.kortti .nro {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--vari-korostus);
  margin-bottom: .4rem;
}

/* Kahden kortin vertailurivi (sopii / ei sovi, tekoäly-palstat) */
.vertailu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.vertailu .kortti ul { list-style: none; margin: .75rem 0 0; }
.vertailu .kortti li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: .6rem;
  color: var(--vari-teksti-himmea);
}
.vertailu .kortti li::before {
  content: "→"; position: absolute; left: 0;
  color: var(--vari-korostus); font-weight: 700;
}
.vertailu .kortti.sopii li::before { content: "✓"; }
.vertailu .kortti.eisovi li::before { content: "–"; color: var(--vari-teksti-himmea); }

/* --- Säästölaskuri --- */
/* Toimii ilman JS:ää: kentissä on 50 hengen esimerkin oletusarvot ja
   tulosruudussa vastaavat valmiiksi lasketut luvut. JS (js/laskuri.js,
   ulkoinen tiedosto CSP:n script-src 'self' takia) vain päivittää luvut
   säätimien mukana. */
.laskuri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 2rem;
  margin-top: 2rem;
  align-items: start;
}
.laskuri-saatimet p { margin: 0 0 1.5rem; }
/* Otsikkorivi: label vasemmalla, output oikealla. Output on labelin
   ULKOPUOLELLA — <output> on labelable-elementti, joten labelin sisällä
   se olisi HTML-virhe (W3C Nu, CI 2.9.2026). Yhteinen flex-rivi hoitaa
   asemoinnin. */
.laskuri-saatimet .laskuri-otsikko {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .4rem;
}
.laskuri-saatimet label {
  font-weight: 700;
  font-size: .9375rem;
}
.laskuri-saatimet output { color: var(--vari-korostus); white-space: nowrap; }
.laskuri-saatimet input[type="range"] {
  width: 100%;
  accent-color: var(--vari-korostus);
}
.laskuri-vihje { font-size: .8125rem; color: var(--vari-teksti-himmea); margin-top: .3rem; }

.laskuri-tulos {
  background: var(--vari-tumma);
  color: var(--vari-teksti-tummalla);
  border-radius: var(--pyoristys);
  padding: 1.75rem 1.6rem;
}
.laskuri-tulos dl { margin: 0; display: grid; gap: 1.1rem; }
.laskuri-tulos dt {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .75);
}
.laskuri-tulos dd { margin: .15rem 0 0; font-size: 1.75rem; font-weight: 700; }
.laskuri-tulos dd small { font-size: 1rem; font-weight: 400; color: rgb(255 255 255 / .75); }
/* Korostusluku tummalla: vaalea keltaoranssi (10,05:1) — EI kirkas oranssi */
.laskuri-tulos .korostettu dd { color: var(--vari-linkki-tummalla); }
.laskuri-selite { font-size: .875rem; color: var(--vari-teksti-himmea); margin-top: 1.25rem; max-width: 62ch; }

/* Gradientti-CTA-lohko (leiskan loppu-CTA). Teksti tummana marjagradientin
   päällä: tarkistettu vaaleinta gradienttikohtaa (#FDC15A) vasten 10,05:1
   ja tummin kohta (#EF5B21) vasten 5,7:1 → AA kunnossa koko liulla. */
.cta-gradientti {
  background: var(--gradientti-marja);
  border-radius: var(--pyoristys);
  padding: 3rem 2.5rem;
  color: var(--vari-tumma);
}
.cta-gradientti h2 { color: inherit; margin-bottom: 1rem; }
.cta-gradientti p { color: inherit; max-width: 46ch; }
.cta-gradientti .nappi {
  background: var(--vari-tumma);
  color: var(--vari-teksti-tummalla);
  margin-top: 1.25rem;
}
.cta-gradientti .nappi:hover { background: #000; }
.cta-gradientti .hero-meta { color: inherit; opacity: .85; }
@media (max-width: 640px) { .cta-gradientti { padding: 2rem 1.5rem; } }

/* Tunniste tummalla pohjalla: #C2410C jää 3,15:1 (vaatii 4,5:1) →
   käytetään samaa vaaleaa kuin linkeissä tummalla (10,05:1). */
.osio-tumma .tunniste { color: var(--vari-linkki-tummalla); }