/* Pysty Studio – sivuston tyylit
   Ilme: logokonsepti 4, Pystyviiva (08_brandi/2026-10-23_logo-perustelut.md, osio 4).
   Brändivärit ja fontit ovat heti alla :root-osassa. Logo on tiedostossa assets/logo.svg
   (vaalea pohja) ja assets/logo-tumma.svg (tumma pohja).

   Kontrasti: keltainen ei erotu valkoisesta eikä betonista (1,3:1). Käytä keltaista
   vain mustalla pohjalla, korostuksena mustan tekstin takana tai mustan reunan kanssa. */

:root {
  /* Brändivärit (konsepti 4) */
  --musta: #000000;
  --keltainen: #FFE100;           /* tekstityskeltainen: pystyviiva ja korostus */
  --valkoinen: #FFFFFF;
  --betoni: #E4E4E1;              /* vaalea tausta */

  /* Käyttötarkoitukset */
  --vari-brandi: var(--musta);    /* napit, linkit, numerot */
  --vari-muste: var(--musta);     /* leipäteksti ja otsikot */
  --vari-paperi: var(--betoni);   /* sivun tausta */
  --vari-pinta: var(--valkoinen); /* vaaleat osiot */
  --vari-tumma: var(--musta);     /* tummat osiot ja alapalkki */
  --vari-harmaa: #4F4F4B;         /* toissijainen teksti, 6,4:1 betonilla ja 8,1:1 valkoisella */
  --vari-harmaa-tumma: #B8B8B3;   /* toissijainen teksti mustalla, 10,6:1 */
  --vari-viiva: #BDBDB8;          /* erotinviivat */
  --vari-korostus: var(--keltainen); /* valitut kohdat, hover, pystyviiva */

  --fontti-otsikko: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --fontti-teksti: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fontti-tekstitys: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Esimerkkikuvan podcaststudio */
  --k-seina: #262624;
  --k-rima: #31312E;
  --k-lamppu: var(--keltainen);
  --k-tumma: #000000;
  --k-poyta: #0B0B0A;
  --k-poyta-reuna: #45453F;
  --k-muki: var(--betoni);
  --k-paita-a: var(--betoni);
  --k-paita-b: #FFFFFF;
  --k-iho-a: #E8B48E;
  --k-iho-a-varjo: #D19A74;
  --k-iho-b: #A56E4B;
  --k-iho-b-varjo: #8C5A3B;
  --k-hius-a: #2A1A15;
  --k-pipo: var(--keltainen);
  --k-pipo-varjo: #D9BF00;
  --k-silma: #1A1010;
  --k-suu: #5A2E22;

  --sade-iso: 1.25rem;
  --sade: .375rem;

  /* Liike (28.10.2026): yksi pehmeä hidastuva käyrä kaikkeen käyttöliittymän liikkeeseen, ei pomppua. */
  --ease-ulos: cubic-bezier(.22, 1, .36, 1);
}

/* Perusta */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
body {
  margin: 0;
  background: var(--vari-paperi);
  color: var(--vari-muste);
  font-family: var(--fontti-teksti);
  font-size: 1.0625rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a {
  color: var(--vari-brandi);
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}
/* Hover: linkki korostetaan keltaisella kuin tekstityksen sana. Teksti pysyy mustana (16:1). */
a:hover {
  color: var(--musta);
  background-color: var(--vari-korostus);
  text-decoration-color: var(--musta);
}
:focus-visible {
  outline: 3px solid var(--vari-brandi);
  outline-offset: 3px;
  border-radius: 4px;
}
h1, h2 {
  font-family: var(--fontti-otsikko);
  font-weight: 900;
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-size: clamp(2.5rem, 11vw, 4.5rem);
  line-height: .95;
  letter-spacing: 0;
  margin-bottom: 1.25rem;
}
h3 {
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 .4rem;
}
h4 { margin: 0; }

.kehys {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.piilotettu {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.svg-maaritykset { position: absolute; width: 0; height: 0; overflow: hidden; }
.ohituslinkki {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 20;
  padding: .75rem 1rem;
  background: var(--vari-muste);
  color: #fff;
  border-radius: var(--sade);
  font-weight: 700;
}
.ohituslinkki:focus { top: 1rem; color: #fff; }

/* Napit: musta pohja, hover keltainen. Mustalla pohjalla päinvastoin. */
.nappi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: .75rem 1.4rem;
  border: 2px solid var(--musta);
  border-radius: var(--sade);
  font-family: var(--fontti-teksti);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s, transform .25s var(--ease-ulos);
}
.nappi:hover { transform: translateY(-2px); }
.nappi:active { transform: scale(.98); transition-duration: .08s; }
.nappi-ensisijainen { background: var(--musta); color: var(--valkoinen); }
.nappi-ensisijainen:hover { background: var(--keltainen); color: var(--musta); }
.nappi-toissijainen { background: transparent; color: var(--musta); }
.nappi-toissijainen:hover { background: var(--keltainen); color: var(--musta); }
.nappi-kaanteinen { background: var(--keltainen); border-color: var(--keltainen); color: var(--musta); }
.nappi-kaanteinen:hover { background: var(--valkoinen); border-color: var(--valkoinen); color: var(--musta); }
.nappi-pieni { min-height: 2.5rem; padding: .45rem 1rem; font-size: .9375rem; }

/* Yläpalkki */
.ylapalkki {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--vari-paperi) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color .4s var(--ease-ulos);
}
.ylapalkki-sisalto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 4rem;
}
.logo { --logo-k: 1.625rem; display: grid; flex: 0 0 auto; }
.logo:hover { background: none; }
/* Logo (viewBox 536,9 × 121): kirjaimet ovat 2/3 kuvan korkeudesta, pystyviiva koko korkeus. */
/* Kapealla näytöllä logo, kielivalitsin ja nappi mahtuvat samalle riville (375 px). */
.logo img { height: var(--logo-k); width: auto; }
/* Etusivuilla tumma logo on vaalean päällä (sama leveys ja kirjaimet samassa kohdassa), ja ilme-uusi.js vaihtaa niitä. */
.logo img.logo-vaalea,
.logo img.logo-tumma { grid-area: 1 / 1; align-self: center; transition: opacity .3s var(--ease-ulos); }
.logo img.logo-tumma { height: calc(var(--logo-k) * 112 / 121); opacity: 0; }
.paavalikko { display: none; }

/* Kielivalitsin FI | EN. Nykyinen kieli musta ja alleviivattu, toinen harmaa. */
.kielet {
  display: flex;
  align-items: center;
  margin-left: auto;
  font-size: .875rem;
  font-weight: 800;
  line-height: 1;
}
.kielet a {
  display: inline-grid;
  place-items: center;
  min-width: 1.875rem;
  min-height: 2.5rem;
  padding: 0 .25rem;
  border-radius: 3px;
  color: var(--vari-harmaa);
  text-decoration: none;
}
.kielet a[aria-current] {
  color: var(--musta);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
}
.kielet a:hover { color: var(--musta); background: var(--vari-korostus); }
.kielet-vali { color: var(--vari-viiva); font-weight: 400; }
.ylapalkki-sisalto .kielet + .nappi { margin-left: -.25rem; }

/* Tumma yläpalkki heron päällä (28.10.2026): ilme-uusi.js lisää html-elementtiin luokan ylapalkki-tumma, kun musta hero on
   yläpalkin alla. Musta hero ja palkki ovat silloin yhtä pintaa. Avoin mobiilivalikko on aina vaalea. */
.ylapalkki-tumma:not(.valikko-auki) .ylapalkki { background: color-mix(in srgb, var(--musta) 88%, transparent); }
.ylapalkki-tumma:not(.valikko-auki) .logo-vaalea { opacity: 0; }
.ylapalkki-tumma:not(.valikko-auki) .logo-tumma { opacity: 1; }
.ylapalkki-tumma:not(.valikko-auki) .ylapalkki .kielet a { color: var(--vari-harmaa-tumma); }
.ylapalkki-tumma:not(.valikko-auki) .ylapalkki .kielet a[aria-current] { color: var(--valkoinen); }
.ylapalkki-tumma:not(.valikko-auki) .ylapalkki .kielet a:hover { color: var(--musta); }
.ylapalkki-tumma:not(.valikko-auki) .ylapalkki .kielet-vali { color: #5C5C58; }
.ylapalkki-tumma:not(.valikko-auki) .ylapalkki .paavalikko a { color: var(--valkoinen); }
.ylapalkki-tumma:not(.valikko-auki) .ylapalkki .paavalikko a:hover { color: var(--musta); }
.ylapalkki-tumma:not(.valikko-auki) .ylapalkki .nappi-ensisijainen { background: var(--keltainen); border-color: var(--keltainen); color: var(--musta); }
.ylapalkki-tumma:not(.valikko-auki) .ylapalkki .nappi-ensisijainen:hover { background: var(--valkoinen); border-color: var(--valkoinen); }
.ylapalkki-tumma:not(.valikko-auki) .ylapalkki .valikko-nappi { border-color: var(--valkoinen); color: var(--valkoinen); }
.ylapalkki-tumma:not(.valikko-auki) .ylapalkki .valikko-nappi:hover { background: var(--keltainen); border-color: var(--keltainen); color: var(--musta); }
.ylapalkki-tumma:not(.valikko-auki) .ylapalkki :focus-visible { outline-color: var(--keltainen); }

/* Mobiilivalikko (sivu.js lisää html-elementtiin luokat valikko-kaytossa ja auki ollessa valikko-auki).
   Alle 56em: yläpalkissa logo, Ilmaiset näytteet ja Valikko-nappi. Päävalikko ja kielivalinta avautuvat yläpalkin alle. */
.valikko-nappi,
.paavalikko-kielet { display: none; }
.valikko-kuvake,
.valikko-kuvake::before,
.valikko-kuvake::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: currentColor;
}
.valikko-kuvake { position: relative; }
.valikko-kuvake::before,
.valikko-kuvake::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform .2s ease-out;
}
.valikko-kuvake::before { top: -6px; }
.valikko-kuvake::after { top: 6px; }
.valikko-nappi[aria-expanded="true"] .valikko-kuvake { background: transparent; }
.valikko-nappi[aria-expanded="true"] .valikko-kuvake::before { transform: translateY(6px) rotate(45deg); }
.valikko-nappi[aria-expanded="true"] .valikko-kuvake::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 55.99em) {
  .valikko-kaytossa .ylapalkki .kielet { display: none; }
  .valikko-kaytossa .ylapalkki-sisalto > .nappi-pieni { margin-left: auto; }
  .valikko-kaytossa .valikko-nappi {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 2px solid var(--musta);
    border-radius: var(--sade);
    background: transparent;
    color: var(--musta);
    cursor: pointer;
  }
  .valikko-kaytossa .valikko-nappi:hover,
  .valikko-auki .valikko-nappi { background: var(--keltainen); }
  .valikko-auki .paavalikko {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
    padding: .25rem 1.25rem 1.5rem;
    background: var(--vari-paperi);
    border-bottom: 2px solid var(--musta);
  }
  .valikko-auki .paavalikko > a,
  .valikko-auki .paavalikko .paavalikko-tarjous {
    display: block;
    padding-block: .75rem;
    border-bottom: 1px solid var(--vari-viiva);
    color: var(--musta);
    font-family: var(--fontti-otsikko);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
  }
  .valikko-auki .paavalikko-kielet { display: flex; gap: .5rem; margin-top: 1.25rem; }
  .valikko-auki .paavalikko-kielet a {
    display: inline-grid;
    place-items: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 .5rem;
    border: 2px solid var(--musta);
    border-radius: var(--sade);
    color: var(--musta);
    font-size: .9375rem;
    font-weight: 800;
    text-decoration: none;
  }
  .valikko-auki .paavalikko-kielet a[aria-current] { background: var(--musta); color: var(--valkoinen); }
}

/* Hero */
.hero { padding-block: 2rem 4rem; }
.hero-ruudukko { display: grid; gap: 2.75rem; }
/* Kapealla (alle 64em) demo on heti otsikon alla, jotta liikkuva klippi näkyy ensimmäisellä ruudulla (28.10.2026).
   Tekstin osat ovat suoraan flex-säiliön lapsia (display: contents), ja järjestys tulee order-arvoista. */
@media (max-width: 63.99em) {
  .hero-ruudukko { display: flex; flex-direction: column; gap: 0; }
  .hero-teksti { display: contents; }
  .hero-teksti > * { order: 3; }
  .hero-teksti > .ylaotsake,
  .hero-teksti > h1 { order: 1; }
  .hero-ruudukko > .demo { order: 2; margin: .25rem 0 2.5rem; }
}
/* Yläotsake H1:n yläpuolella: keltainen pystyviiva mustalla reunalla kuin logossa. */
.ylaotsake {
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: 30em;
  margin: 0 0 1.1rem;
  font-size: .9375rem;
  font-weight: 800;
  line-height: 1.35;
}
.ylaotsake::before {
  content: "";
  flex: 0 0 auto;
  width: .3rem;
  height: 1.3em;
  background: var(--keltainen);
  box-shadow: 0 0 0 1.5px var(--musta);
}
h1 {
  font-size: clamp(4.25rem, 23vw, 9.5rem);
  line-height: .88;
  letter-spacing: 0;
  margin-bottom: 1.5rem;
}
h1 span { display: block; }
/* Pystyviiva otsikon lopussa kuin logossa: keltainen viiva mustalla reunalla. */
.kursori { white-space: nowrap; }
.kursori::after {
  content: "";
  display: inline-block;
  width: .12em;
  height: .9em;
  margin-left: .08em;
  vertical-align: -.1em;
  background: var(--keltainen);
  box-shadow: 0 0 0 .035em var(--musta);
}
.ingressi {
  font-size: 1.1875rem;
  line-height: 1.5;
  max-width: 33em;
}
.toiminnot {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}
.toiminnot .nappi { flex: 1 1 auto; }
@media (min-width: 30em) {
  .toiminnot .nappi { flex: 0 0 auto; }
}
.pienteksti {
  margin-top: .75rem;
  max-width: 36em;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--vari-harmaa);
}
.pienteksti a { color: var(--vari-muste); }
.yhteys .pienteksti { margin-top: 1rem; color: var(--vari-harmaa-tumma); }
.yhteys .pienteksti a { color: var(--valkoinen); }

/* Esimerkkiklippi */
.demo { margin: 0; }
.demo .klippi { margin-left: .4rem; }
.demo-rivi {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}
.klippi {
  position: relative;
  flex: 0 0 auto;
  width: min(58%, 19rem);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--sade-iso);
  background: var(--k-seina);
  box-shadow: 0 0 0 .4rem var(--vari-muste);
  container-type: inline-size;
}
.klippi-sisalto { position: absolute; inset: 0; }
.klippi .kohtaus {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  max-width: none;
  aspect-ratio: 16 / 9;
  /* Kuva on 16:9 ja kehys 9:16: kehyksen leveys on 81/256 kuvan leveydestä.
     translate = 15,82 % – puhujan kohta (A 30 %, B 70 %). */
  translate: -14.18% 0;
  scale: 1;
  transform-origin: 30% 46%;
  transition: scale .5s var(--ease-ulos);
}
.klippi-sisalto[data-puhuja="b"] .kohtaus,
.klippi-b .kohtaus {
  translate: -54.18% 0;
  transform-origin: 70% 46%;
}
.klippi-sisalto[data-zoomi="1"] .kohtaus { scale: 1.12; }

.tekstitys {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 57%;
  margin: 0;
  color: #fff;
  font-family: var(--fontti-tekstitys);
  font-size: 1.5rem;
  font-size: 11.5cqi;
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
  -webkit-text-stroke: .2em #000;
  paint-order: stroke fill;
  text-shadow: 0 .06em .14em rgba(0, 0, 0, .45);
}
.tekstitys.loppukehote { top: 44%; font-size: 9.5cqi; }
.tekstitys .emoji { -webkit-text-stroke: 0; text-shadow: none; }
.sana { display: inline-block; opacity: 0; }
.sana.nakyy { opacity: 1; animation: pomppu .26s cubic-bezier(.34, 1.56, .64, 1) both; }
.klippi-sisalto-vanha .sana.nakyy { animation: none; }
@keyframes pomppu {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: none; }
}

.demo-sivu {
  flex: 1 1 0;
  min-width: 0;
  max-width: 14rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.lahde {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: .4rem;
  background: var(--k-seina);
}
.lahde svg { width: 100%; height: 100%; }
.rajain {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14.18%;
  width: 31.64%;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .6);
}
.demo[data-puhuja="b"] .rajain { left: 54.18%; }
.demo-selite {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--vari-harmaa);
}
.demo-tauko {
  align-self: flex-start;
  padding: .35rem 0;
  border: 0;
  background: none;
  color: var(--vari-brandi);
  font: inherit;
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .18em;
  cursor: pointer;
}
.demo-tauko:hover { background: var(--vari-korostus); color: var(--musta); }

/* Aikajana: heron demossa puhelimen alla (28.10.2026). Keltainen kursori on logon pystyviiva, joka kelaa jaksoa (sivu.js). */
.aikajana { margin: 2.25rem 0 0; }
.aikajana-rata { position: relative; }
.aikajana-kursori {
  position: absolute;
  top: -.4rem;
  bottom: -.4rem;
  left: 0;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--keltainen);
  pointer-events: none;
}
.aikajana-kursori[hidden] { display: none; }
.aikajana-aika {
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% -.3rem;
  padding: .1rem .4rem;
  border-radius: 3px;
  background: var(--keltainen);
  color: var(--musta);
  font-size: .75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  white-space: nowrap;
}
.aikajana-kohdat rect { transition: opacity .5s var(--ease-ulos); }
.aikajana-kohdat:has(.nyt) rect:not(.nyt) { opacity: .45; }
.aikajana-aalto { width: 100%; height: 3rem; }
.aikajana-kohdat rect {
  fill: var(--vari-korostus);
  stroke: var(--musta);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}
.aikajana-puhe { fill: color-mix(in srgb, var(--vari-muste) 22%, transparent); }
.aikajana-valitut { fill: var(--vari-muste); }
.aikajana-ajat {
  display: flex;
  justify-content: space-between;
  margin-top: .4rem;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--vari-harmaa);
}
.aikajana figcaption {
  margin-top: .25rem;
  font-size: .9375rem;
  color: var(--vari-muste);
}

/* Osiot */
.osio { padding-block: 4.5rem; }
.osio-tiivis { padding-block: 3.5rem; }
.osio-pinta { background: var(--vari-pinta); }
.johdanto {
  font-size: 1.125rem;
  max-width: 38em;
}

/* Vaiheet */
.vaiheet {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem;
  counter-reset: vaihe;
}
.vaiheet li {
  counter-increment: vaihe;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-content: start;
  column-gap: 1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--vari-muste);
}
/* Numerot kuin klipin tekstitys: keltainen täyttö ja paksu musta reunus. */
.vaiheet li::before {
  content: counter(vaihe);
  grid-row: span 2;
  font-family: var(--fontti-otsikko);
  font-size: 3.5rem;
  font-weight: 900;
  line-height: .8;
  color: var(--keltainen);
  -webkit-text-stroke: .12em var(--musta);
  paint-order: stroke fill;
}
.vaiheet p { max-width: 30em; }
.vaiheet li > * { grid-column: 2; }

/* Mitä klipeissä on */
.anatomia {
  display: grid;
  gap: 3rem;
  margin-top: 2.5rem;
}
.anatomia-kuva { margin: 0; }
.anatomia .klippi { width: min(70%, 17rem); margin-inline: auto; }
.anatomia .tekstitys { top: 55%; }
.ui-yla {
  position: absolute;
  top: 4.5%;
  left: 30%;
  right: 30%;
  height: 2.6cqi;
  border-radius: 2cqi;
  background: rgba(255, 255, 255, .4);
}
.ui-kuvake {
  position: absolute;
  right: 4%;
  width: 10cqi;
  height: 10cqi;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
}
.ui-rivi {
  position: absolute;
  left: 5%;
  height: 2.8cqi;
  border-radius: 2cqi;
  background: rgba(255, 255, 255, .4);
}
.turva-alue {
  position: absolute;
  top: 11%;
  bottom: 20%;
  left: 6%;
  right: 18%;
  border: 2px dashed rgba(255, 255, 255, .8);
  border-radius: .5rem;
}
.merkki {
  position: absolute;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--keltainen);
  box-shadow: 0 0 0 2.5px var(--musta);
  color: var(--musta);
  font-size: .875rem;
  font-weight: 800;
  line-height: 1;
}
.merkki-lista { position: static; margin-top: .1rem; }
.ominaisuudet {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}
.ominaisuudet li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
}
.ominaisuudet p { max-width: 34em; }
.alaotsikko {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 2px solid var(--vari-muste);
  font-family: var(--fontti-otsikko);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}
/* Ääni ja tekniikka: hyöty lihavoituna, tekninen luku sulkeissa harmaana. */
.tekniikka { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; }
.tekniikka li { position: relative; max-width: 34em; padding-left: 1.1rem; }
.tekniikka li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: .3rem;
  height: 1.15em;
  background: var(--keltainen);
  box-shadow: 0 0 0 1.5px var(--musta);
}
.tekniikka strong { font-weight: 800; }
.tekninen { color: var(--vari-harmaa); font-weight: 600; }

/* Hinnat */
.hintaryhma { margin-top: 3rem; max-width: 58rem; }
.hintaryhma-otsikko {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1.5rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--vari-muste);
}
.hintaryhma-otsikko h3 {
  margin: 0;
  font-family: var(--fontti-otsikko);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}
.hintaryhma-otsikko p { margin: 0; font-size: .9375rem; color: var(--vari-harmaa); }
.hinnasto { list-style: none; margin: 0; padding: 0; }
.hintarivi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem 1.25rem;
  align-items: start;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--vari-viiva);
}
.hintarivi h4 {
  margin-bottom: .35rem;
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.25;
}
.hintarivi p { max-width: 32em; }
.hinta {
  margin: 0;
  text-align: right;
  white-space: nowrap;
  font-family: var(--fontti-otsikko);
  line-height: 1;
}
.hinta .summa { font-size: 2.75rem; font-weight: 900; }
.hinta .jakso { margin-left: .1em; font-size: 1.5rem; font-weight: 800; }
.hinta .alv {
  display: block;
  margin-top: .4rem;
  font-family: var(--fontti-teksti);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--vari-harmaa);
}
.hinta-huomio { margin-top: 1.5rem; color: var(--vari-harmaa); }
.hinta .kerta {
  display: block;
  max-width: 7.5em;
  margin: .4rem 0 0 auto;
  white-space: normal;
  line-height: 1.25;
  font-family: var(--fontti-teksti);
  font-size: .875rem;
  font-weight: 700;
}
.hinta .kerta + .alv { margin-top: .2rem; }

/* Aloita ilmaisilla näytteillä: musta laatikko hintaosion alussa. Keltainen vain mustalla pohjalla. */
.naytelaatikko {
  max-width: 58rem;
  margin: 1.75rem 0 0;
  padding: 1.5rem 1.25rem;
  border-radius: var(--sade);
  background: var(--vari-tumma);
  color: var(--valkoinen);
}
.naytelaatikko h3 {
  margin: 0 0 1.25rem;
  font-family: var(--fontti-otsikko);
  font-size: clamp(2rem, 9vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
}
.naytevaiheet {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  counter-reset: nayte;
}
.naytevaiheet li {
  counter-increment: nayte;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: .75rem;
  align-items: baseline;
  max-width: 40em;
  font-weight: 600;
  line-height: 1.45;
}
.naytevaiheet li::before {
  content: counter(nayte);
  font-family: var(--fontti-otsikko);
  font-size: 2.25rem;
  font-weight: 900;
  line-height: .8;
  color: var(--keltainen);
}
.naytelaatikko-toiminnot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin: 1.5rem 0 0;
}
.naytelaatikko a:not(.nappi) { color: var(--valkoinen); font-weight: 700; }
.naytelaatikko a:not(.nappi):hover { color: var(--keltainen); background: none; text-decoration-color: var(--keltainen); }
.naytelaatikko :focus-visible { outline-color: var(--keltainen); }

/* Lupaukset näytelaatikon alla: keltainen pystyviiva mustalla reunalla */
.lupaukset {
  list-style: none;
  margin: 1.5rem 0 2rem;
  padding: 0;
  display: grid;
  gap: .65rem;
  max-width: 58rem;
}
.lupaukset li {
  position: relative;
  padding-left: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
}
.lupaukset li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  width: .3rem;
  height: 1.2em;
  background: var(--keltainen);
  box-shadow: 0 0 0 1.5px var(--musta);
}

/* Valuuttavalitsin € EUR | $ USD (assets/valuutta.js). Ilman JavaScriptiä piilossa. */
.valuutta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  max-width: 58rem;
  margin: 0 0 1.25rem;
}
.valuutta[hidden] { display: none; }
/* Suomenkielisellä etusivulla valuuttavalitsin on hintaosion lopussa (28.10.2026). */
.valuutta-loppu { margin: 2.5rem 0 0; }
.valuutta-otsikko { font-size: .9375rem; font-weight: 700; }
.valuutta-napit {
  display: inline-flex;
  border: 2px solid var(--musta);
  border-radius: var(--sade);
  overflow: hidden;
}
.valuutta-napit button {
  min-height: 2.75rem;
  margin: 0;
  padding: .35rem .95rem;
  border: 0;
  background: transparent;
  color: var(--musta);
  font: inherit;
  font-size: .9375rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}
.valuutta-napit button + button { border-left: 2px solid var(--musta); }
.valuutta-napit button[aria-pressed="true"] { background: var(--keltainen); }
.valuutta-napit button:hover { text-decoration: underline; text-underline-offset: .18em; }
.valuutta-napit button:focus-visible { outline: 3px solid var(--musta); outline-offset: -6px; border-radius: 4px; }
.valuutta-huomio {
  flex-basis: 100%;
  max-width: 40em;
  margin: 0;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--vari-harmaa);
}

/* USD-tilassa iso hinta on dollareina (≈) ja euro näkyy sen alla pienellä. */
.hinta .noin { margin-right: .08em; font-size: .7em; vertical-align: .08em; }
.hinta-eur {
  display: block;
  margin-top: .35rem;
  font-family: var(--fontti-teksti);
  font-size: .875rem;
  font-weight: 700;
}
.hinta-eur[hidden] { display: none; }

/* Hintasäätimet (assets/hinnat.js). Ilman JavaScriptiä .saadin on piilossa ja näkyy oletusporras. */
.saadinrivi > .saadin,
.saadinrivi > .saadin-yhteenveto,
.saadinrivi > .saadin-huomio,
.saadinrivi > .saadin-lisa { grid-column: 1 / -1; }
.saadinrivi > .saadin-lisa { justify-self: start; }
.saadin {
  --kahva: 1.75rem;
  --rata: .875rem;
  display: grid;
  gap: .25rem;
  max-width: 34rem;
  margin-top: .25rem;
}
.saadin[hidden] { display: none; }
.saadin-otsikko {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: .9375rem;
  font-weight: 700;
}
.saadin-arvo {
  font-family: var(--fontti-otsikko);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.saadin-input {
  --t: 1;
  width: 100%;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* Musta rata, valittu osa keltainen. Kahva keltainen mustalla reunalla. */
.saadin-input::-webkit-slider-runnable-track {
  box-sizing: border-box;
  height: var(--rata);
  border: 2px solid var(--musta);
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--keltainen) calc(var(--kahva) / 2 + (100% - var(--kahva)) * var(--t)),
    var(--musta) 0);
}
.saadin-input::-webkit-slider-thumb {
  width: var(--kahva);
  height: var(--kahva);
  margin-top: calc((var(--rata) - 4px - var(--kahva)) / 2);
  border: 3px solid var(--musta);
  border-radius: 50%;
  background: var(--keltainen);
  -webkit-appearance: none;
  appearance: none;
}
.saadin-input::-moz-range-track {
  height: var(--rata);
  border: 2px solid var(--musta);
  border-radius: 999px;
  background: var(--musta);
  box-sizing: border-box;
}
.saadin-input::-moz-range-progress {
  height: var(--rata);
  border: 2px solid var(--musta);
  border-radius: 999px;
  background: var(--keltainen);
  box-sizing: border-box;
}
.saadin-input::-moz-range-thumb {
  width: var(--kahva);
  height: var(--kahva);
  border: 3px solid var(--musta);
  border-radius: 50%;
  background: var(--keltainen);
  box-sizing: border-box;
}
.saadin-input:focus { outline: none; }
.saadin-input:focus-visible { outline: 3px solid var(--musta); outline-offset: 2px; border-radius: 4px; }
.saadin-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--valkoinen), 0 0 0 6px var(--musta); }
.saadin-input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--valkoinen), 0 0 0 6px var(--musta); }

/* Porrasnumerot säätimen alla, kohdistettu kahvan keskikohtiin */
.portaat {
  position: relative;
  height: 1.75rem;
  margin-inline: calc(var(--kahva) / 2);
  font-size: .9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.portaat span {
  position: absolute;
  top: .3rem;
  left: calc(var(--i) / (var(--n) - 1) * 100%);
  translate: -50% 0;
  padding: 0 .3rem;
  border-radius: 3px;
  line-height: 1.4;
  cursor: pointer;
}
.portaat span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -.4rem;
  width: 2px;
  height: .35rem;
  margin-left: -1px;
  background: var(--musta);
}
.portaat span.valittu { background: var(--keltainen); color: var(--musta); }

.saadin-lisa {
  display: inline-block;
  margin: 0;
  padding: .1rem .45rem;
  border-radius: 3px;
  background: var(--keltainen);
  color: var(--musta);
  font-weight: 800;
}
.saadin-lisa[hidden] { display: none; }
.saadin-yhteenveto {
  margin: 0;
  font-size: .9375rem;
  color: var(--vari-harmaa);
  font-variant-numeric: tabular-nums;
}
.saadin-huomio {
  margin: 0;
  padding-left: .75rem;
  border-left: 3px solid var(--musta);
  font-size: .875rem;
}

/* Klippaamon apusäätimet: videoita kuukaudessa × klippiä per video. Kapealla allekkain, 30em alkaen rinnakkain. */
.apusaatimet {
  display: grid;
  gap: .15rem 1.5rem;
  margin: .25rem 0 .9rem;
  padding: .75rem .9rem .85rem;
  border-radius: var(--sade);
  background: var(--vari-pinta);
}
.apusaatimet[hidden] { display: none; }
/* Laskuri suljettavan otsikon takana (index.html, lisätty 28.10.2026). Merkki on pienempi versio .avattava-osioiden pallosta. */
.apu-avattava { margin: 0 0 .5rem; }
.apu-avattava > summary {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  font-size: .9375rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.apu-avattava > summary::-webkit-details-marker { display: none; }
.apu-avattava > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--musta), var(--musta)) center / .7rem 2px no-repeat,
    linear-gradient(var(--musta), var(--musta)) center / 2px .7rem no-repeat,
    var(--keltainen);
  box-shadow: 0 0 0 2px var(--musta);
}
.apu-avattava[open] > summary::before {
  background:
    linear-gradient(var(--musta), var(--musta)) center / .7rem 2px no-repeat,
    var(--keltainen);
}
.apu-avattava > summary:hover { text-decoration: underline; text-underline-offset: .18em; }
.apu-avattava > .apusaatimet { margin-top: .25rem; }
.apu-otsikko { margin: 0 0 .1rem; font-size: .875rem; font-weight: 800; }
.apusaadin { display: grid; gap: 0; min-width: 0; }
.apusaadin .saadin-otsikko { font-size: .875rem; }
.apusaadin .saadin-arvo { font-size: 1.375rem; }
.apusaadin .saadin-input { height: 2.5rem; }
.apusaadin .portaat { height: 1.5rem; font-size: .8125rem; }
.apusaadin .portaat span { padding: 0 .25rem; }
.apu-tulos { margin-top: .35rem; }
.apu-yhteensa { margin: 0; font-weight: 800; }
.apu-viesti {
  margin: .35rem 0 0;
  padding-left: .65rem;
  border-left: 3px solid var(--musta);
  font-size: .875rem;
  line-height: 1.45;
}
.apu-viesti[hidden] { display: none; }
.apu-viesti a { font-weight: 800; white-space: nowrap; }
@media (min-width: 30em) {
  .apusaatimet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .apu-otsikko, .apu-tulos { grid-column: 1 / -1; }
}

/* Alustojen valinta (Klippitilin hoito) */
.alustat { margin: .5rem 0 .75rem; padding: 0; border: 0; min-width: 0; }
.alustat legend { padding: 0; margin-bottom: .4rem; font-size: .9375rem; font-weight: 700; }
.alustat-valinnat { display: flex; flex-wrap: wrap; gap: .5rem; }
.valinta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .35rem .85rem .35rem .65rem;
  border: 2px solid var(--musta);
  border-radius: var(--sade);
  font-size: .9375rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.valinta input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--musta); cursor: pointer; }
.valinta:has(input:checked) { background: var(--keltainen); }
.valinta:has(input:focus-visible) { outline: 3px solid var(--musta); outline-offset: 2px; }
.valinta-huomio { margin: .5rem 0 0; font-size: .875rem; font-weight: 700; }
.valinta-huomio[hidden] { display: none; }

/* Avattavat hintaosiot (Muut palvelut ja Lisäpalvelut). <details> toimii ilman JavaScriptiä.
   Plus-merkki keltaisessa ympyrässä mustalla reunalla; auki ollessa miinus. */
.avattava {
  max-width: 58rem;
  margin-top: 2.5rem;
  border-top: 2px solid var(--vari-muste);
  border-bottom: 2px solid var(--vari-muste);
}
.avattava + .avattava { margin-top: 0; border-top: 0; }
.avattava > summary {
  position: relative;
  display: block;
  padding: 1.15rem 3.5rem 1.15rem 0;
  cursor: pointer;
  list-style: none;
}
.avattava > summary::-webkit-details-marker { display: none; }
.avattava > summary::before,
.avattava > summary::after {
  content: "";
  position: absolute;
  top: 50%;
}
.avattava > summary::before {
  right: .2rem;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: -1.125rem;
  border-radius: 50%;
  background: var(--keltainen);
  box-shadow: 0 0 0 2px var(--musta);
}
.avattava > summary::after {
  right: .825rem;
  width: 1rem;
  height: 1rem;
  margin-top: -.5rem;
  background:
    linear-gradient(var(--musta), var(--musta)) center / 100% 2.5px no-repeat,
    linear-gradient(var(--musta), var(--musta)) center / 2.5px 100% no-repeat;
}
.avattava[open] > summary::after {
  background: linear-gradient(var(--musta), var(--musta)) center / 100% 2.5px no-repeat;
}
.avattava-otsikko {
  display: block;
  font-family: var(--fontti-otsikko);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}
.avattava-selite {
  display: block;
  margin-top: .35rem;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--vari-harmaa);
}
.avattava > summary:hover .avattava-otsikko { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }
.avattava[open] > summary { border-bottom: 1px solid var(--vari-viiva); }
.avattava-johdanto { margin: 1.25rem 0 0; color: var(--vari-harmaa); }
.avattava > .hinnasto > .hintarivi:last-child { border-bottom: 0; }
.avattava > .lisapalvelut { margin-top: 1.5rem; padding-bottom: 2rem; }

/* Lisäpalvelut */
.lisapalvelut {
  display: grid;
  gap: 2.5rem;
  margin-top: 2.5rem;
}
.lisaryhma + .lisaryhma { margin-top: 2.5rem; }
.lisaryhma h3 {
  margin: 0;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--vari-muste);
  font-family: var(--fontti-otsikko);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
}
.hinnasto-tiivis .hintarivi {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-block: 1rem;
}
.hinnasto-tiivis .hintarivi h4 {
  margin-bottom: .2rem;
  font-family: var(--fontti-teksti);
  font-size: 1.0625rem;
  line-height: 1.3;
}
.hinnasto-tiivis .hintarivi p { font-size: .9375rem; }
.hinnasto-tiivis .hinta .summa { font-size: 1.75rem; }
.hinnasto-tiivis .hinta .jakso { font-size: 1rem; }

/* Referenssien paikat (vaihda klippeihin, kun luvat on saatu) */
.referenssit {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  max-width: 30rem;
}
.referenssi-paikka {
  display: grid;
  place-items: center;
  aspect-ratio: 9 / 16;
  padding: .5rem;
  border: 2px dashed var(--vari-viiva);
  border-radius: var(--sade);
  font-size: .8125rem;
  text-align: center;
  color: var(--vari-harmaa);
}

/* Kuka klipit tekee. Kuvan paikka (.kuka-kuva) on valmiina, mutta kuvaa ei näytetä ennen kuin se on saatu. */
.kuka-sisalto { display: grid; gap: 1.5rem 2.5rem; align-items: center; }
.kuka-sisalto h2 { margin-bottom: 1rem; }
.kuka-kuva {
  width: 9rem;
  height: 9rem;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 .3rem var(--musta);
}
@media (min-width: 45em) {
  .kuka-sisalto:has(.kuka-kuva) { grid-template-columns: auto minmax(0, 1fr); }
}

/* Avattavat osiot (<details>) avautuvat ja sulkeutuvat pehmeästi selaimissa, jotka osaavat animoida korkeuden
   (interpolate-size, 28.10.2026). Muissa selaimissa ne avautuvat heti kuten ennen. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size .45s var(--ease-ulos), content-visibility .45s allow-discrete;
  }
  details[open]::details-content { block-size: auto; }
}

/* UKK */
.ukk-lista {
  max-width: 48rem;
  margin-top: 2rem;
  border-top: 2px solid var(--vari-muste);
}
.ukk-lista details { border-bottom: 1px solid var(--vari-viiva); }
.ukk-lista summary {
  position: relative;
  padding: 1.1rem 2.5rem 1.1rem 0;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.ukk-lista summary::-webkit-details-marker { display: none; }
.ukk-lista summary::before,
.ukk-lista summary::after {
  content: "";
  position: absolute;
  right: .35rem;
  top: 50%;
  width: 1rem;
  height: 2.5px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--vari-brandi);
  transition: transform .2s;
}
.ukk-lista summary::after { transform: rotate(90deg); }
.ukk-lista details[open] summary::after { transform: rotate(0deg); }
.ukk-lista details p { max-width: 40em; padding-bottom: 1.25rem; margin: 0; }

/* Yhteys: musta osio, keltainen nappi ja korostus */
.yhteys { background: var(--vari-tumma); color: var(--valkoinen); }
.yhteys h2 { color: var(--valkoinen); }
.yhteys a { color: var(--valkoinen); }
.yhteys a:hover { color: var(--keltainen); background: none; text-decoration-color: var(--keltainen); }
.yhteys a.nappi-kaanteinen { color: var(--musta); margin-top: .5rem; }
.yhteys a.nappi-kaanteinen:hover { color: var(--musta); background: var(--valkoinen); }
.yhteys :focus-visible { outline-color: var(--keltainen); }
.yhteys-puhelin,
.yhteys-vastaus { margin: 1.1rem 0 0; }
.yhteys-puhelin a { font-weight: 800; }
/* Kopioi osoite -nappi mustalla pohjalla (sivu.js): valkoinen reuna, hover keltainen. */
.kopioi-nappi {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  margin-top: .6rem;
  padding: .4rem 1rem;
  border: 2px solid var(--valkoinen);
  border-radius: var(--sade);
  background: transparent;
  color: var(--valkoinen);
  font: inherit;
  font-size: .9375rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}
.kopioi-nappi[hidden] { display: none; }
.kopioi-nappi:hover { background: var(--keltainen); border-color: var(--keltainen); color: var(--musta); }
.yhteys-ruudukko { display: grid; gap: 2.5rem; }
.yhteystiedot { margin: 0; display: grid; gap: 1.25rem; }
.yhteystiedot dt { font-size: .875rem; font-weight: 700; opacity: .8; }
.yhteystiedot dd { margin: 0; font-size: 1.125rem; }
.iso-linkki {
  font-family: var(--fontti-otsikko);
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 900;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.yhteys-huomio { margin: 0; font-size: .9375rem; opacity: .85; }

/* Alapalkki: musta pohja ja tumma logo (assets/logo-tumma.svg, viewBox 536,9 × 112) */
.alapalkki {
  padding-block: 3rem 4rem;
  border-top: 1px solid #2E2E2C;
  background: var(--vari-tumma);
  font-size: .9375rem;
  color: var(--vari-harmaa-tumma);
}
.alapalkki-sisalto { display: grid; gap: 1.25rem; }
.alapalkki-logo { height: 1.75rem; width: auto; margin-bottom: .5rem; }
.alapalkki p { margin: 0; max-width: 34em; line-height: 1.8; }
.alapalkki a { color: var(--valkoinen); }
.alapalkki a:hover { color: var(--keltainen); background: none; text-decoration-color: var(--keltainen); }
.alapalkki :focus-visible { outline-color: var(--keltainen); }

/* Tietosuojaseloste */
.seloste { padding-block: 3rem 5rem; }
.seloste h1 { font-size: clamp(2.5rem, 12vw, 5.5rem); line-height: .95; margin-bottom: 1rem; }
.seloste h2 { font-size: 2rem; margin: 2.75rem 0 .75rem; }
.seloste p, .seloste ul { max-width: 40em; }
.seloste ul { padding-left: 1.25rem; margin: 0 0 1em; }
.seloste li + li { margin-top: .35rem; }
.seloste-paiva { color: var(--vari-harmaa); }
.seloste ol { max-width: 40em; margin: 2rem 0 1em; padding-left: 1.75rem; }
.ehdot li + li { margin-top: 1rem; }
/* Englanninkielisten ehtojen ja selosteen käännösmerkintä sivun lopussa */
.kaannos-huomio {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--vari-viiva);
  font-size: .9375rem;
  color: var(--vari-harmaa);
}
.kaannos-huomio a { color: var(--vari-muste); }
.ehdot li { padding-left: .25rem; }
/* 404-sivu (404.html): suomi ensin, englanti alla. */
.virhe-koodi {
  margin: 0 0 .5rem;
  font-family: var(--fontti-otsikko);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--vari-harmaa);
}
.virhe-otsikko span { display: inline; }
.virhe-toiminnot { margin-top: 1.5rem; }
.virhe-en { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--vari-viiva); }
.virhe-en h2 { margin-top: 0; }
.ehdot li::marker {
  font-family: var(--fontti-otsikko);
  font-size: 1.375rem;
  font-weight: 900;
}

/* Räätälöity tarjous -painike etusivulla (data-tarjouslinkki) */
.tarjous-kehote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  max-width: 58rem;
  margin: 0 0 .5rem;
}
.tarjous-kehote span { font-size: .9375rem; color: var(--vari-harmaa); }
.tarjous-kehote + .johdanto { margin-top: 1.25rem; }
.tarjous-kehote-loppu { margin-top: 3rem; }
.paavalikko .paavalikko-tarjous { display: none; }

/* Räätälöity tarjous (tarjous.html ja en/quote.html, assets/tarjous.js) */
.tarjous-sivu { padding-block: 3rem 5rem; }
.tarjous-sivu h1 { font-size: clamp(2.5rem, 12vw, 5.5rem); line-height: .95; margin-bottom: 1rem; }
.tarjous-sivu > .johdanto { margin-bottom: 1.5rem; }
.tarjous-ilman-js {
  max-width: 40em;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--musta);
  background: var(--vari-pinta);
}
.tarjous-ilman-js[hidden] { display: none; }
.tarjous-ruudukko { display: grid; gap: 2.5rem; margin-top: 1.5rem; }
.tarjous-valinnat { min-width: 0; }
.tarjous-alv { margin: 0 0 1.5rem; color: var(--vari-harmaa); }
.tarjous-osio { min-width: 0; margin: 0 0 2.5rem; padding: 0; border: 0; }
.tarjous-osio[hidden] { display: none; }
.tarjous-osio > legend {
  float: left;
  width: 100%;
  padding: 0 0 .6rem;
  border-bottom: 2px solid var(--vari-muste);
  font-family: var(--fontti-otsikko);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
}
.tarjous-osio > legend + * { clear: both; }
.tarjous-osio-ohje { margin: .75rem 0 0; font-size: .9375rem; color: var(--vari-harmaa); }
/* Kapealla hinta on nimen alla, 40em alkaen oikeassa reunassa. */
.palvelu {
  display: grid;
  grid-template-columns: 1.375rem minmax(0, 1fr);
  gap: .35rem .75rem;
  align-items: start;
  padding-block: 1rem;
  border-bottom: 1px solid var(--vari-viiva);
}
.palvelu > input[type="checkbox"] {
  width: 1.375rem;
  height: 1.375rem;
  margin: .1rem 0 0;
  accent-color: var(--musta);
  cursor: pointer;
}
.palvelu > label { cursor: pointer; }
.palvelu-nimi { display: block; font-size: 1.0625rem; font-weight: 800; line-height: 1.3; }
.palvelu-kuvaus { display: block; margin-top: .15rem; font-size: .9375rem; color: var(--vari-harmaa); }
.palvelu-kuvaus a { color: var(--vari-muste); }
.palvelu-hinta {
  grid-column: 2;
  margin: 0;
  font-size: .9375rem;
  font-weight: 800;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.palvelu-hinta:empty { display: none; }
.palvelu-asetukset,
.palvelu-huomio { grid-column: 2 / -1; }
.palvelu-asetukset { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; }
.palvelu-asetukset .alustat { flex-basis: 100%; margin: 0; }
.palvelu-huomio { margin: 0; font-size: .875rem; font-weight: 700; }
.palvelu-huomio[hidden] { display: none; }
.palvelu-naytteet { grid-template-columns: 1.375rem minmax(0, 1fr); }
.kentta-pieni { display: grid; gap: .25rem; min-width: 0; }
.kentta-pieni label { font-size: .875rem; font-weight: 700; }
.tarjous-sivu select,
.tarjous-sivu input[type="text"],
.tarjous-sivu input[type="email"],
.tarjous-sivu input[type="number"],
.tarjous-sivu textarea {
  max-width: 100%;
  min-height: 2.75rem;
  padding: .45rem .7rem;
  border: 2px solid var(--musta);
  border-radius: var(--sade);
  background: var(--valkoinen);
  color: var(--musta);
  font: inherit;
  font-size: 1rem;
}
.tarjous-sivu select { cursor: pointer; }
.kentta-maara input { width: 6.5rem; }
.kentta { display: grid; gap: .3rem; max-width: 34rem; margin-top: 1rem; }
.kentta label { font-weight: 700; }
.kentta input, .kentta textarea { width: 100%; }
.valinnainen { font-weight: 400; color: var(--vari-harmaa); }

/* Yhteenveto */
.tarjous-yhteenveto {
  align-self: start;
  min-width: 0;
  padding: 1.25rem;
  border: 2px solid var(--musta);
  border-radius: var(--sade);
  background: var(--vari-pinta);
}
.tarjous-yhteenveto[hidden] { display: none; }
.tarjous-yhteenveto h2 { margin-bottom: .75rem; font-size: 2.25rem; }
.tarjous-yhteenveto h3 { margin: 1rem 0 .35rem; font-size: .9375rem; }
.tarjous-yhteenveto ul { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; font-size: .9375rem; line-height: 1.4; }
.tarjous-yhteenveto li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; }
.yhteenveto-hinta { max-width: 9rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.yhteenveto-tyhja { margin: 0; color: var(--vari-harmaa); }
.yhteenveto-summat { display: grid; gap: .75rem; margin: 1.25rem 0 0; padding-top: 1rem; border-top: 2px solid var(--musta); }
.yhteenveto-summat dt { font-weight: 800; }
.yhteenveto-summat dd { margin: 0; font-variant-numeric: tabular-nums; }
.yhteenveto-summat dd span { display: block; }
.yhteenveto-summat dd span + span { font-size: .875rem; color: var(--vari-harmaa); }
.yhteenveto-arvio { margin: 1rem 0; font-weight: 700; }
.tarjous-virhe { margin: 0 0 .75rem; font-weight: 800; }
.tarjous-virhe:empty { display: none; }
.tarjous-laheta { width: 100%; }
.tarjous-yhteenveto .pienteksti { margin-top: .6rem; }
.tarjous-yhteenveto .pienteksti:empty { display: none; }
.tarjous-pitka[hidden] { display: none; }
.tarjous-yhteenveto [data-kopioi] { margin-top: .75rem; }
.tarjous-kopio { width: 100%; margin-top: .5rem; font-size: .875rem; }
.tarjous-kopio[hidden] { display: none; }

/* Mobiilin hintapalkki: näkyy näytön alareunassa, kunnes yhteenveto tulee näkyviin. */
.tarjous-palkki {
  position: sticky;
  bottom: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.25rem;
  background: var(--musta);
  color: var(--valkoinen);
  font-size: .9375rem;
  transition: opacity .2s, visibility .2s;
}
.tarjous-palkki[hidden] { display: none; }
.tarjous-palkki.piiloon { opacity: 0; visibility: hidden; }
.tarjous-palkki a { color: var(--valkoinen); font-weight: 800; white-space: nowrap; }
.tarjous-palkki a:hover { color: var(--musta); }
.tarjous-palkki :focus-visible { outline-color: var(--keltainen); }
/* Hintapalkki ei peitä näppäimistöllä kohdistettua kenttää. */
@media (max-width: 63.99em) {
  html:has(.tarjous-palkki:not([hidden])) { scroll-padding-bottom: 5.5rem; }
}

@media (min-width: 40em) {
  .palvelu { grid-template-columns: 1.375rem minmax(0, 1fr) auto; }
  .palvelu-hinta { grid-column: auto; max-width: 11rem; text-align: right; }
}

@media (min-width: 64em) {
  .paavalikko .paavalikko-tarjous { display: inline; }
  .tarjous-ruudukko { grid-template-columns: minmax(0, 1fr) 23rem; column-gap: 3.5rem; }
  .tarjous-yhteenveto { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow-y: auto; }
  .tarjous-palkki, .tarjous-palkki[hidden] { display: none; }
}

/* Leveämmät näytöt */
@media (max-width: 29.99em) {
  .ylapalkki .nappi-pieni { padding-inline: .8rem; }
}

/* Hyvin kapealla (alle 360 px) isot hinnat hieman pienempinä, jotta pitkä hinta (esim. ≈ 1 333 $) jättää tilaa otsikolle. */
@media (max-width: 22.49em) {
  .hinta .summa { font-size: 2.375rem; }
  .hinta .jakso { font-size: 1.25rem; }
}
/* Kapealla puhelimella (enintään 384 px) hintarivi on yhtenä sarakkeena: hinta nimen ja kuvauksen alla,
   jotta USD-tilan pitkä hinta (≈ 1 333 $ ja euro alla) ei puristu. Tiiviit lisäpalvelurivit pysyvät kahdessa sarakkeessa. */
@media (max-width: 24em) {
  .hinnasto:not(.hinnasto-tiivis) > .hintarivi { grid-template-columns: minmax(0, 1fr); }
  .hinnasto:not(.hinnasto-tiivis) > .hintarivi > .hinta { text-align: left; }
  .hinnasto:not(.hinnasto-tiivis) > .hintarivi > .hinta .kerta { margin-left: 0; max-width: none; }
}
/* Vaakasuuntainen puhelin: matala näyttö, joten yläpalkki ei jää kiinni yläreunaan. */
@media (max-height: 30em) {
  .ylapalkki { position: static; }
}

@media (min-width: 30em) {
  .demo-rivi { gap: 1.5rem; }
  .ylapalkki-sisalto { gap: 1rem; }
  .logo { --logo-k: 2.125rem; }
}

@media (min-width: 45em) {
  .kehys { padding-inline: 2rem; }
  .yhteys-ruudukko { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; column-gap: 4rem; }
  .yhteys-huomio { grid-column: 1 / -1; }
  .alapalkki-sisalto { grid-template-columns: 1.2fr 1.4fr 1fr 1fr; align-items: start; }
}

@media (min-width: 56em) {
  .paavalikko { display: flex; gap: 1.75rem; margin-left: auto; margin-right: .5rem; }
  .paavalikko + .kielet { margin-left: 0; margin-right: .5rem; }
  .paavalikko a {
    color: var(--vari-muste);
    font-size: .9375rem;
    font-weight: 700;
    text-decoration: none;
  }
  .paavalikko a:hover { color: var(--musta); background: var(--vari-korostus); text-decoration: underline; }
  .logo { --logo-k: 2.375rem; }
  .osio { padding-block: 7rem; }
  .osio-tiivis { padding-block: 4.5rem; }
  .vaiheet { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .vaiheet li { grid-template-columns: minmax(0, 1fr); }
  .vaiheet li > * { grid-column: auto; }
  .vaiheet li::before { grid-row: auto; margin: .25rem 0 1rem; font-size: 4.5rem; }
  .anatomia { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); column-gap: 5rem; align-items: start; }
  .anatomia .klippi { width: 100%; }
  .anatomia-kuva { position: sticky; top: 6rem; }
  .hintarivi { grid-template-columns: minmax(0, 1fr) minmax(10rem, auto); padding-block: 1.6rem; }
  .hintarivi h4 { font-family: var(--fontti-otsikko); font-size: 2.25rem; font-weight: 900; line-height: 1; margin-bottom: .5rem; }
  .hinta .summa { font-size: 3.5rem; }
  .lisapalvelut { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; align-items: start; }
  .naytelaatikko { padding: 2rem; }
  .naytevaiheet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .naytevaiheet li { grid-template-columns: minmax(0, 1fr); }
  .naytevaiheet li::before { margin-bottom: .6rem; font-size: 3rem; }
  .avattava-otsikko { font-size: 2.25rem; }
}

@media (min-width: 64em) {
  .kehys { padding-inline: 3rem; }
  .hero { padding-block: 3.5rem 5rem; }
  .hero-ruudukko {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 4rem;
  }
  .klippi { width: min(62%, 19rem); }
  .ingressi { font-size: 1.25rem; }
  /* Kahdessa sarakkeessa otsikko skaalataan sarakkeen mukaan, jotta "pystyyn.|" mahtuu. */
  h1 { font-size: clamp(5rem, 14.5vw - 1.5rem, 9.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .klippi .kohtaus, .ukk-lista summary::after, .valikko-kuvake::before, .valikko-kuvake::after, .aikajana-kursori { transition: none; }
  .nappi:hover, .nappi:active { transform: none; }
  details::details-content { transition: none; }
  .sana.nakyy { animation: none; }
}