/* ============================================================================
   KOTISIVUT PLUS — konversiotyökalut
   Foorly Oy · versio 0.14
   ----------------------------------------------------------------------------
   Kolme työkalua: tarjousviesti, toimintopaneeli, vaiheittainen lomake.
   Kaikki natiivia DOMia — ei iframea, ei riippuvuuksia, ei ulkoisia kutsuja.

   TEEMA: perii sivuston omat :root-muuttujat jos ne ovat olemassa
   (--c-primary, --c-dark …). Jos ei, käytetään fallback-arvoja.
   Yliajo: KotisivutPlus.brand-objekti asettaa --kp-*-muuttujat suoraan.
   ============================================================================ */

:root {
  --kp-primary:    var(--c-primary, #00C0F6);
  --kp-primary-2:  var(--c-primary-2, #6D5BFF);
  --kp-on-primary: var(--c-on-primary, #FFFFFF);
  --kp-dark:       var(--c-dark, #111038);
  --kp-on-dark:    var(--c-on-dark, #F3F4FB);
  --kp-surface:    var(--c-surface, #FFFFFF);
  --kp-surface-2:  var(--c-surface-2, #F5F6FB);
  --kp-text:       var(--c-text, #374151);
  --kp-heading:    var(--c-heading, #111038);
  --kp-muted:      var(--c-muted, #6B7280);
  --kp-border:     var(--c-border, #E5E7F0);
  --kp-radius:     20px;
  --kp-radius-sm:  12px;
  --kp-font:       var(--font-body, inherit);
  --kp-shadow:     0 18px 50px -12px rgba(17, 16, 56, .28);
  --kp-shadow-sm:  0 6px 20px -8px rgba(17, 16, 56, .22);
  --kp-z:          2147483000;
}

/* ---------------------------------------------------------------- perusta */

.kp-root,
.kp-root * { box-sizing: border-box; }

.kp-root {
  font-family: var(--kp-font);
  color: var(--kp-text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.kp-root h2, .kp-root h3, .kp-root h4 {
  color: var(--kp-heading);
  margin: 0 0 8px;
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 700;
}

.kp-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Aksenttiviiva — Kotisivut Plus -tunnus. Ei logoa, ei "powered by". */
.kp-accent {
  height: 3px;
  background: linear-gradient(90deg, var(--kp-primary), var(--kp-primary-2));
  border-radius: 3px 3px 0 0;
}

/* ---------------------------------------------------------------- napit */

.kp-btn {
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: 999px;
  padding: 13px 26px;
  cursor: pointer;
  background: linear-gradient(120deg, var(--kp-primary), var(--kp-primary-2));
  color: var(--kp-on-primary);
  box-shadow: var(--kp-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  line-height: 1.2;
}
/* v0.12: ikonilla oma koko. Ilman sitä flex kutisti lomakkeen nuolen
   näkymättömäksi, ja leveämmässä napissa se venyi 83 px:iin. */
.kp-btn svg { width: 16px; height: 16px; flex: none; }
.kp-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

@media (hover: hover) {
  .kp-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--kp-primary-2) 60%, transparent);
    filter: saturate(1.08);
  }
}
.kp-btn:not(:disabled):active { transform: translateY(0); }

.kp-btn--hiljainen {
  background: transparent;
  color: var(--kp-muted);
  box-shadow: none;
  padding: 13px 18px;
  font-weight: 500;
}
/* Ääriviivanappi (v0.7): toissijainen toiminto, joka näyttää silti napilta.
   Hiljainen nappi tummalla hero-taustalla näkyi pelkkänä tekstinä eikä
   erottunut painettavaksi (Valtteri 2.10.2026). Väri tulee tekstistä, joten
   sama luokka toimii tummalla ja vaalealla taustalla. */
.kp-btn--aariviiva {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 55%, transparent);
  font-weight: 600;
}
@media (hover: hover) {
  .kp-btn--aariviiva:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
    box-shadow: inset 0 0 0 1.5px currentColor;
    transform: none;
  }
}
@media (hover: hover) {
  .kp-btn--hiljainen:hover { color: var(--kp-heading); background: var(--kp-surface-2); transform: none; }
}

.kp-btn--pieni { padding: 9px 18px; font-size: 14px; }

/* Sulje-nappi */
.kp-sulje {
  border: 0; background: transparent; cursor: pointer;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: var(--kp-muted);
  transition: background .16s ease, color .16s ease, transform .16s ease;
  flex: none;
}
@media (hover: hover) {
  .kp-sulje:hover { background: var(--kp-surface-2); color: var(--kp-heading); transform: rotate(90deg); }
}
.kp-sulje svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------------- kentät */

.kp-kentta { margin-bottom: 11px; }

.kp-kentta label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--kp-heading);
  margin-bottom: 5px;
}

.kp-kentta input,
.kp-kentta textarea,
.kp-kentta select {
  font: inherit;
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--kp-border);
  border-radius: var(--kp-radius-sm);
  background: var(--kp-surface);
  color: var(--kp-text);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.kp-kentta textarea { min-height: 78px; resize: vertical; }

.kp-kentta input:focus,
.kp-kentta textarea:focus,
.kp-kentta select:focus {
  outline: none;
  border-color: var(--kp-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kp-primary) 18%, transparent);
}

.kp-kentta--virhe input,
.kp-kentta--virhe textarea { border-color: #DC2626; }
.kp-virhe { color: #DC2626; font-size: 13px; margin-top: 5px; font-weight: 500; }

.kp-honey {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none;
}

.kp-ehdot { font-size: 12.5px; color: var(--kp-muted); margin: 12px 0 0; }
.kp-ehdot a { color: inherit; }

/* Näppäimistöfokus näkyy aina — myös korteissa ja riveissä */
.kp-root :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--kp-primary) 55%, transparent);
  outline-offset: 2px;
}

/* …paitsi elementeissä, joihin fokus siirretään ohjelmallisesti. Näkymän
   vaihtuessa fokus viedään otsikkoon, jotta ruudunlukijan paikka seuraa
   mukana. Otsikkoon ei pääse Tabilla, joten rengas ei kerro käyttäjälle
   mitään — se vain jää näkyviin kunnes käyttäjä klikkaa muualle. Osa
   selaimista (mm. Safari) piirtää sen silti, joten se nollataan tässä. */
.kp-root [tabindex="-1"]:focus,
.kp-root [tabindex="-1"]:focus-visible { outline: none; }

/* ============================================================================
   1. TARJOUSVIESTI
   Oletustyyli "kortti": liukuu alanurkkaan, ei tummenna sivua.
   Vaihtoehto "modaali": keskitetty, tummennus.
   ========================================================================= */

.kp-tarjous {
  position: fixed;
  z-index: var(--kp-z);
  background: var(--kp-surface);
  border-radius: var(--kp-radius);
  box-shadow: var(--kp-shadow);
  overflow: hidden;
  border: 1px solid var(--kp-border);
}

/* — korttityyli — */
.kp-tarjous--kortti {
  left: 24px; bottom: 24px;
  width: min(440px, calc(100vw - 32px));
  transform: translateY(18px);
  opacity: 0;
  transition: opacity .38s ease, transform .38s cubic-bezier(.22,.9,.3,1);
}
.kp-tarjous--kortti.kp-auki { opacity: 1; transform: translateY(0); }

/* — modaalityyli — */
.kp-tarjous--modaali {
  left: 50%; top: 50%;
  width: min(640px, calc(100vw - 32px));
  transform: translate(-50%, -46%) scale(.97);
  opacity: 0;
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,.9,.3,1);
}
.kp-tarjous--modaali.kp-auki { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Modaali mahtuu aina ruudulle (v0.5): ennen korkeusrajaa kuva + teksti +
   lomake valui 720 px:n näytöllä ylä- ja alareunan yli, eikä lähetysnappia
   saanut näkyviin vierittämällä, koska modaali on position: fixed. */
.kp-tarjous--modaali {
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto; overscroll-behavior: contain;
}
@media (max-height: 820px) {
  .kp-tarjous--modaali .kp-tarjous__kuva { aspect-ratio: 3 / 1; }
  .kp-tarjous--modaali .kp-tarjous__sisalto { padding: 24px 30px 26px; }
}
@media (max-height: 640px) {
  .kp-tarjous--modaali .kp-tarjous__kuva { display: none; }
}

.kp-varjo {
  position: fixed; inset: 0;
  background: rgba(17, 16, 56, .42);
  backdrop-filter: blur(2px);
  z-index: calc(var(--kp-z) - 1);
  opacity: 0;
  transition: opacity .3s ease;
}
.kp-varjo.kp-auki { opacity: 1; }

/* Himmennyksen aikana avausnappi ei saa jäädä hohtamaan taustan päälle. */
body[data-kp-himmennys] .kp-avaus {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.kp-tarjous__kuva {
  width: 100%; aspect-ratio: 5 / 2;
  object-fit: cover; display: block;
}

.kp-tarjous__sisalto { padding: 24px 26px 26px; }
.kp-tarjous--modaali .kp-tarjous__sisalto { padding: 30px 34px 32px; }

/* Sulkunappi on kortin tasolla → sama paikka riippumatta siitä onko kuvaa. */
.kp-tarjous__sulje {
  position: absolute; top: 9px; right: 9px; z-index: 3;
  background: color-mix(in srgb, var(--kp-surface) 88%, transparent);
  backdrop-filter: blur(4px);
}

.kp-tarjous h3 { font-size: 25px; margin-bottom: 10px; padding-right: 34px; line-height: 1.18; text-wrap: balance; }
/* Kuvan alla otsikko ei ole sulkunapin kohdalla, joten varaa ei tarvita. */
.kp-tarjous__kuva + .kp-tarjous__sisalto h3 { padding-right: 0; }
.kp-tarjous p  { margin: 0 0 20px; font-size: 16px; color: var(--kp-muted); }

.kp-tarjous--modaali h3 { font-size: 31px; margin-bottom: 12px; }
.kp-tarjous--modaali p  { font-size: 17px; margin-bottom: 24px; }
.kp-tarjous--modaali .kp-kentta input { padding: 15px 17px; font-size: 16px; }
.kp-tarjous--modaali .kp-btn { padding: 15px 30px; font-size: 16px; }

.kp-tarjous__rivi { display: flex; gap: 10px; }
.kp-tarjous__rivi .kp-kentta { flex: 1; margin-bottom: 0; }

/* Pieni tietosuojateksti kuuluu alimmaksi, ei napin viereen. */
.kp-tarjous .kp-ehdot {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--kp-border);
  font-size: 12.5px;
}

/* ============================================================================
   2. TOIMINTOPANEELI
   ========================================================================= */

.kp-avaus {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: var(--kp-z);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--kp-dark);
  color: var(--kp-on-dark);
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  box-shadow: var(--kp-shadow);
  transition: transform .28s cubic-bezier(.22,.9,.3,1), opacity .28s ease, box-shadow .2s ease;
  /* 🛑 Toistuva kimmahdus poistettu 21.9.2026 (Valtteri): animaatio oli
     `7s ease-in-out 3s infinite`, eli nappi hyppi 7 sekunnin välein niin kauan
     kuin sivu oli auki. Valtterin sanoin *"widget välkkyy monta kertaa alussa,
     eli ei niin. vain kerran ehkä 15 tai 20 sec"*. Huomio annetaan nyt
     täsmälleen kerran huomiorenkailla (ks. .kp-avaus--pulssi), ja nappi on
     muuten liikkumaton. Älä palauta `infinite`-animaatiota. */
}

/* Väistö: nappi liukuu pois näkyvistä kun käyttäjä lukee sivua alaspäin, ja
   palaa heti kun hän vierittää ylös tai on sivun ylälaidassa.
   🛑 Vain kapealla näytöllä. Mitattu 21.9.2026 Foorlyn sivustolla 390 px:llä:
   kelluva nappi peitti puhelinnumeron, sähköpostiosoitteet, navigointilinkkejä,
   lomakkeen palveluvalinnat ja UKK:n avausmerkin — 54 px leveän kaistan ruudun
   oikeasta alakulmasta. Työpöydällä peittoa ei ole, koska sisältö on keskellä,
   joten siellä nappi pysyy aina näkyvissä eikä konversio kärsi. */
@media (max-width: 640px) {
  .kp-avaus--vaista {
    transform: translateY(calc(100% + 34px));
    opacity: 0;
    pointer-events: none;
  }
}
.kp-avaus__pallo {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(120deg, var(--kp-primary), var(--kp-primary-2));
  color: var(--kp-on-primary);
  flex: none;
}
.kp-avaus__pallo svg { width: 14px; height: 14px; }

@media (hover: hover) {
  .kp-avaus:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -14px rgba(17,16,56,.5);
  }
}
.kp-avaus[hidden] { display: none; }

/* Huomiorenkaat: kutsuvat ottamaan yhteyttä, hiipuvat itsestään pois.
   🛑 **Yksi kierros, ei kolmea** (Valtteri 21.9.2026). Renkaita on kaksi ja
   jälkimmäinen lähtee puolen kierroksen jäljessä, jolloin ulospäin leviää yksi
   aaltosarja eikä yksittäinen sykähdys — se on se "kerran", jonka nappi saa
   näyttää. Ajoitus tulee JS:stä (`huomioViive`, oletus 15 s). */
.kp-avaus::before,
.kp-avaus::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: 999px; pointer-events: none;
  border: 2px solid var(--kp-primary);
  opacity: 0;
}
.kp-avaus--pulssi::after  { animation: kp-pulssi 2.1s ease-out 1; }
/* v0.14: yksi aalto per muistutus (Valtteri 5.10.2026: "vain kerran esim 10 sec välein").
   Toinen, 1,05 s myöhässä lähtenyt rengas näytti kahdelta aallolta. */
.kp-avaus--pulssi::before { animation: none; }
.kp-avaus--pulssi .kp-avaus__pallo { animation: kp-heilahdus 2.1s ease-in-out 1; }

/* Kasvu tehdään insetillä eikä scalella: leveä pilleri levittyisi scalella
   yli 40 px sivuille, ja nappi on vain 22 px ruudun reunasta (mobiilissa
   14 px) — oikea reuna leikkautuisi. Inset kasvattaa rengasta yhtä paljon
   joka suuntaan. Mobiilille oma, kapeampi kasvu alempana. */
@keyframes kp-pulssi {
  0%   { inset: -3px;  opacity: .9; border-width: 2.5px; }
  70%  { inset: -17px; opacity: 0;  border-width: 1px; }
  100% { inset: -17px; opacity: 0;  border-width: 1px; }
}
@keyframes kp-heilahdus {
  0%, 55%, 100% { transform: scale(1); }
  62% { transform: scale(1.16) rotate(-7deg); }
  72% { transform: scale(1.16) rotate(7deg); }
  82% { transform: scale(1); }
}

.kp-paneeli {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: var(--kp-z);
  width: min(384px, calc(100vw - 28px));
  /* Korkeus seuraa sisältöä, mutta muutos liukuu (v0.10, ks. JS
     seuraaKorkeutta). Kiinteä korkeus (v0.9) poisti hypyn, mutta Chat
     muutamalla napilla jäi turhan korkeaksi (Valtteri 2.10.2026). */
  max-height: min(730px, calc(100vh - 44px));
  background: var(--kp-surface);
  border-radius: var(--kp-radius);
  box-shadow: var(--kp-shadow);
  border: 1px solid var(--kp-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(26px) scale(.96);
  opacity: 0;
  transform-origin: bottom right;
  /* Käynnistyy heti ja asettuu rauhassa, ilman ylitystä (v0.9): ylittävä
     käyrä (1.14) kasvatti paneelin hetkeksi lopullista suuremmaksi. */
  transition: opacity .38s ease, transform .55s cubic-bezier(.2, .9, .3, 1),
              height .3s cubic-bezier(.3, .7, .3, 1);
}
.kp-paneeli.kp-auki { opacity: 1; transform: translateY(0) scale(1); }

/* Sisältö tulee esiin porrastettuna — siitä syntyy se liike, joka kutsuu
   ottamaan yhteyttä. Kertaluontoinen, ei jatkuvaa vilinää. */
/* 🛑 v0.11 (Valtteri 2.10.2026: "lataa ensin eri tavalla ja korjaa sitten").
   Ennen `translateY(12px)`: alas siirretty elementti kasvattaa vieritettävää
   aluetta, joten kun sisältö oli lähes paneelin korkuinen (Viestit 567/567 px),
   animaation ajaksi syntyi 12 px ylivuoto → vierityspalkki ilmestyi ~1 s ajaksi,
   kavensi sisällön ja Chatin pillerit rivittyivät uudelleen. Pienennys yläreunasta
   ei koskaan ylitä elementin omaa laatikkoa, joten ylivuotoa ei synny. */
@keyframes kp-esiin {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}
.kp-paneeli__runko > *, .kp-toiminnot li, .kp-pika { transform-origin: 50% 0; }
.kp-paneeli__runko > *   { animation: kp-esiin .58s cubic-bezier(.2,.92,.28,1) backwards; }
.kp-paneeli__runko > *:nth-child(1) { animation-delay: .14s; }
.kp-paneeli__runko > *:nth-child(2) { animation-delay: .22s; }
.kp-paneeli__runko > *:nth-child(3) { animation-delay: .30s; }
.kp-paneeli__runko > *:nth-child(4) { animation-delay: .40s; }

.kp-toiminnot li { animation: kp-esiin .54s cubic-bezier(.2,.92,.28,1) backwards; }
.kp-toiminnot li:nth-child(1) { animation-delay: .34s; }
.kp-toiminnot li:nth-child(2) { animation-delay: .44s; }
.kp-toiminnot li:nth-child(3) { animation-delay: .54s; }
.kp-toiminnot li:nth-child(4) { animation-delay: .64s; }
.kp-toiminnot li:nth-child(5) { animation-delay: .74s; }

.kp-pika { animation: kp-esiin .54s cubic-bezier(.2,.92,.28,1) backwards; }
.kp-pika:nth-child(1) { animation-delay: .26s; }
.kp-pika:nth-child(2) { animation-delay: .36s; }
.kp-pika:nth-child(3) { animation-delay: .46s; }
.kp-pika:nth-child(4) { animation-delay: .56s; }
.kp-pika:nth-child(5) { animation-delay: .66s; }

.kp-paneeli__ylapalkki {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 12px 12px 20px;
  border-bottom: 1px solid var(--kp-border);
  flex: none;
}
.kp-paneeli__nimi { font-weight: 700; color: var(--kp-heading); font-size: 15px; flex: 1; }

.kp-takaisin {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  color: var(--kp-muted); font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 10px 8px 6px; border-radius: 10px; margin-right: auto;
  transition: color .16s ease, background .16s ease;
}
.kp-takaisin svg { width: 14px; height: 14px; }
@media (hover: hover) { .kp-takaisin:hover { color: var(--kp-heading); background: var(--kp-surface-2); } }

.kp-paneeli__runko { --kp-rp: 20px; overflow-y: auto; padding: var(--kp-rp); flex: 1; }
/* v0.11: kun vierityspalkki vie tilaa (JS lisää kp-palkit), sen tila varataan
   aina, jotta sisällön leveys ei vaihdu näkymästä toiseen (Koti vierittyy,
   Chat ei) eikä korkeuden liukuessa. Päällekkäisillä palkeilla luokkaa ei
   lisätä, koska Chrome varaisi silti 15 px tyhjää oikeaan reunaan. */
.kp-palkit .kp-paneeli__runko { scrollbar-gutter: stable; }
.kp-paneeli__runko > h3 { font-size: 20px; }
.kp-paneeli__runko > p  { margin: 0 0 18px; color: var(--kp-muted); font-size: 14.5px; }

/* toimintorivit */
.kp-toiminnot {
  list-style: none; margin: 0 0 18px; padding: 0;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-sm);
  overflow: hidden;
}
.kp-toiminnot li + li { border-top: 1px solid var(--kp-border); }

.kp-toiminto {
  width: 100%; text-align: left;
  border: 0; background: var(--kp-surface); font: inherit; cursor: pointer;
  padding: 14px 16px 14px 17px;
  display: flex; align-items: center; gap: 12px;
  color: var(--kp-heading);
  position: relative;
  transition: background .16s ease, padding-left .16s ease, padding-right .16s ease;
  text-decoration: none;
}
.kp-toiminto::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--kp-primary), var(--kp-primary-2));
  transform: scaleY(0); transform-origin: center;
  transition: transform .2s ease;
}
@media (hover: hover) {
  /* 🛑 v0.11: oikea reunus pienenee yhtä paljon kuin vasen kasvaa, joten tekstin
     leveys pysyy samana. Ennen pelkkä padding-left kavensi tekstiä 4 px, ja
     rajalla oleva rivi hyppäsi hoverissa toiselle riville (Valtteri 2.10.2026). */
  .kp-toiminto:hover { background: var(--kp-surface-2); padding-left: 21px; padding-right: 12px; }
  .kp-toiminto:hover::before { transform: scaleY(1); }
}
.kp-toiminto__teksti { flex: 1; font-weight: 600; font-size: 14.5px; }
.kp-toiminto__kuvaus { display: block; font-weight: 400; font-size: 13px; color: var(--kp-muted); margin-top: 2px; }
.kp-toiminto__nuoli { width: 15px; height: 15px; color: var(--kp-muted); flex: none; }
.kp-toiminto__ikoni { width: 19px; height: 19px; color: var(--kp-primary); flex: none; }
.kp-toiminto__kuva { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
/* Valikon kohteen kuva (v0.4): henkilö tai paikka otsikon vieressä. */
.kp-kohde__paa { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.kp-kohde__paa h3 { margin: 0; }
.kp-kohde__kuva { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }

/* ------------------------------------------------- valikko ja sen kohteet */

/* Leveä painike alanäkymässä: ensisijainen toiminto (esim. "Varaa aika")
   nostetaan riviltä painikkeeksi, jotta se ei huku muiden sekaan. */
.kp-napit-pysty { display: grid; gap: 9px; margin: 0 0 16px; }
.kp-btn--levea { width: 100%; justify-content: center; text-align: center; }

/* Hakukenttä. Ikoni on koristeltu tausta, ei nappi — kenttä täyttää koko rivin
   jotta osumaan pääsee kiinni myös peukalolla. */
.kp-haku { position: relative; margin: 0 0 14px; }
.kp-haku__ikoni {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--kp-muted); pointer-events: none;
}
.kp-haku__kentta {
  width: 100%; font: inherit; font-size: 14.5px;
  padding: 11px 14px 11px 38px;
  border: 1.5px solid var(--kp-border); border-radius: var(--kp-radius-sm);
  background: var(--kp-surface); color: var(--kp-text);
  transition: border-color .16s ease;
}
.kp-haku__kentta:focus { outline: none; border-color: var(--kp-primary); }
.kp-haku__kentta::-webkit-search-cancel-button { cursor: pointer; }

.kp-tyhja { font-size: 14px; color: var(--kp-muted); margin: 0 0 18px; }

/* Kohteen tiedot: otsikko–arvo -parit. Kaksi saraketta on kapealla paneelilla
   liian ahdas, joten arvo tulee otsikon alle. */
.kp-tiedot {
  margin: 0 0 16px; padding: 14px 16px;
  border: 1px solid var(--kp-border); border-radius: var(--kp-radius-sm);
  background: var(--kp-surface-2);
}
.kp-tiedot dt {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--kp-muted);
}
.kp-tiedot dd {
  margin: 2px 0 0; font-size: 14.5px; font-weight: 600; color: var(--kp-heading);
  line-height: 1.45;
}
.kp-tiedot dd + dt { margin-top: 13px; }
.kp-tiedot dd a { color: inherit; }
.kp-tiedot__ikoni { width: 14px; height: 14px; color: var(--kp-primary); flex: none; }

/* kampanjakortti */
.kp-kampanja {
  border-radius: var(--kp-radius-sm);
  padding: 18px;
  background: var(--kp-dark);
  color: var(--kp-on-dark);
  position: relative;
  overflow: hidden;
}
.kp-kampanja::after {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 150px; height: 150px; border-radius: 50%;
  background: linear-gradient(120deg, var(--kp-primary), var(--kp-primary-2));
  opacity: .28;
}
.kp-kampanja h4 { color: var(--kp-on-dark); font-size: 16px; margin-bottom: 4px; position: relative; }
.kp-kampanja p  { font-size: 13.5px; opacity: .82; margin: 0 0 14px; position: relative; }
/* 🛑 Kampanjanapin hohde oli `infinite` eli se sykki niin kauan kuin kortti oli
   näkyvissä (Valtteri 21.9.2026: liikettä oli aivan liikaa). Nyt se sykähtää
   kaksi kertaa ja jää rauhaan, samalla periaatteella kuin avausnapin
   huomiorenkaat: huomio annetaan kerran, ei jatkuvasti. */
.kp-kampanja__teksti { position: relative; }
/* Koristepallo aina sisällön alla (v0.6): ::after tulee DOMissa viimeisenä ja
   piirtyi napin päälle, jolloin nappi näytti puoliksi peitetyltä. */
.kp-kampanja::after { z-index: 0; pointer-events: none; }
.kp-kampanja > * { position: relative; z-index: 1; }
/* Kampanjakortti on aina tumma, joten nappi on vaalea (v0.6). Sivuston
   pääväri tummalla pohjalla jäi huonosti erottuvaksi (Ateljé LKV: ruskea
   ruskealla, Karla: vihreä tummanvihreällä). */
.kp-kampanja .kp-btn { background: var(--kp-on-dark); color: var(--kp-dark); }
@media (hover: hover) { .kp-kampanja .kp-btn:hover { background: #fff; } }
.kp-kampanja .kp-btn {
  position: relative;
  animation: kp-hohde 3.4s ease-in-out 1.4s 2;
}
@keyframes kp-hohde {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kp-primary) 45%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--kp-primary) 0%, transparent); }
}

/* Kampanja nauhana listan yläpuolella (sijainti: 'ylos', v0.6): yksi rivi,
   kuva + teksti + nappi, jotta etu näkyy heti eikä vie listalta tilaa. */
.kp-kampanja--nauha {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 14px; margin: 0 0 14px;
}
.kp-kampanja--nauha::after { width: 120px; height: 120px; left: -44px; right: auto; top: auto; bottom: -70px; }
.kp-kampanja--nauha .kp-kampanja__teksti { flex: 1; min-width: 0; }
.kp-kampanja--nauha h4 { font-size: 15px; margin: 0 0 2px; line-height: 1.25; }
.kp-kampanja--nauha p  { font-size: 12.5px; margin: 0; line-height: 1.4; }
.kp-kampanja--nauha .kp-btn { padding-left: 14px; padding-right: 14px; }
.kp-kampanja--nauha .kp-btn { flex: none; white-space: nowrap; }
.kp-kampanja__kuva {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none;
  position: relative; border: 2px solid color-mix(in srgb, var(--kp-on-dark) 70%, transparent);
}
@media (max-width: 400px) { .kp-kampanja__kuva { display: none; } }

/* Tumma yläpalkki (ylapalkki: 'tumma', v0.6). Yläpalkki ja kotinäkymän
   tervehdys saavat sivuston tumman sävyn, muu paneeli pysyy vaaleana ja
   luettavana. Värit tulevat sivuston omista tokeneista. */
/* Vain yläpalkki on tumma, liukuvärinä (Valtteri 2.10.2026: "liukuvärinä,
   on tyylikkäämpi kuin yksi staattinen väri"). Tervehdys pysyy valkoisella. */
.kp-paneeli--tumma .kp-paneeli__ylapalkki {
  background: linear-gradient(120deg, var(--kp-dark) 0%, color-mix(in srgb, var(--kp-dark) 55%, var(--kp-primary)) 70%, color-mix(in srgb, var(--kp-dark) 35%, var(--kp-primary)) 100%);
  border-bottom: 0;
}
/* Tumman yläpalkin kanssa ylälaidan aksenttiviiva on turha toinen raja
   (Ateljé LKV piilotti sen sivun omalla tyylillä, nyt pohjassa). */
.kp-paneeli--tumma > .kp-accent { display: none; }
.kp-paneeli--tumma .kp-paneeli__nimi { color: var(--kp-on-dark); letter-spacing: .01em; }
.kp-paneeli--tumma .kp-paneeli__ylapalkki .kp-sulje,
.kp-paneeli--tumma .kp-paneeli__ylapalkki .kp-takaisin { color: var(--kp-on-dark); background: transparent; }
@media (hover: hover) {
  .kp-paneeli--tumma .kp-paneeli__ylapalkki .kp-sulje:hover,
  .kp-paneeli--tumma .kp-paneeli__ylapalkki .kp-takaisin:hover {
    color: #fff; background: color-mix(in srgb, var(--kp-on-dark) 14%, transparent);
  }
}
.kp-tervehdys > p { margin: 0 0 18px; color: var(--kp-muted); font-size: 14.5px; }
.kp-tervehdys > h3 { font-size: 20px; }
/* Pelkkä otsikko ilman tekstiä (Ateljé LKV: kappale poistettiin turhana). */
.kp-tervehdys > h3:last-child { margin-bottom: 14px; }

/* Alapalkki: Koti / Viestit / Chat.
   Osa pystysuuntaista flexiä — EI kellu sisällön päällä, joten se ei voi
   peittää kampanjakorttia kapealla näytöllä. */
.kp-navi {
  flex: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-top: 1px solid var(--kp-border);
  background: var(--kp-surface);
}
.kp-navi button {
  border: 0; background: transparent; font: inherit; cursor: pointer;
  padding: 11px 4px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--kp-muted);
  position: relative;
  transition: color .16s ease, background .16s ease;
}
.kp-navi button svg { width: 19px; height: 19px; }
.kp-navi button::before {
  content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--kp-primary), var(--kp-primary-2));
  transform: scaleX(0); transition: transform .2s ease;
}
.kp-navi button[aria-current="page"] { color: var(--kp-heading); }
.kp-navi button[aria-current="page"]::before { transform: scaleX(1); }
@media (hover: hover) { .kp-navi button:hover { color: var(--kp-heading); background: var(--kp-surface-2); } }

/* Chat-näkymä = pikanapit. Ei tyhjää tilaa, ei teeskenneltyä keskustelua. */
/* v0.15: avustajan tervehdys puhekuplana (`chatViesti`). Selvästi sivuston oma
   automaattinen viesti: nimi + tunnuskuva, ei aikaleimaa. */
.kp-botti { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; }
.kp-botti__kuva {
  width: 32px; height: 32px; border-radius: 50%; flex: none; object-fit: cover;
  background: var(--kp-surface-2); border: 1px solid var(--kp-border);
}
.kp-botti__kuva--ikoni { display: grid; place-items: center; color: var(--kp-primary); }
.kp-botti__kuva--ikoni svg { width: 18px; height: 18px; }
.kp-botti__kupla {
  background: var(--kp-surface-2); border: 1px solid var(--kp-border);
  border-radius: 4px 16px 16px 16px; padding: 10px 14px 11px;
  font-size: 14.5px; line-height: 1.5; color: var(--kp-heading); max-width: 88%;
}
.kp-botti__kupla p { margin: 0; }
.kp-botti__nimi { display: block; font-size: 12px; font-weight: 600; color: var(--kp-muted); margin-bottom: 3px; }
.kp-botti__ohje { margin: 0 0 12px; font-size: 13px; color: var(--kp-muted); }
.kp-pikanapit { display: flex; flex-wrap: wrap; gap: 9px; }
.kp-pika {
  border: 1.5px solid var(--kp-border); background: var(--kp-surface);
  border-radius: 999px; padding: 10px 17px; font: inherit; font-size: 14px;
  font-weight: 600; color: var(--kp-heading); cursor: pointer; text-align: left;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
  text-decoration: none; display: inline-block;
}
@media (hover: hover) {
  .kp-pika:hover {
    border-color: var(--kp-primary);
    background: color-mix(in srgb, var(--kp-primary) 8%, var(--kp-surface));
    transform: translateY(-2px);
  }
}

/* ============================================================================
   3. VAIHEITTAINEN LOMAKE / HINTALASKURI
   ========================================================================= */

/* Tiivis mitoitus: pienempi lomake on nopeampi käyttää kuin leveä.
   Sivun sisällä lomake ei venytä itseään koko palstan levyiseksi. */
.kp-lomake {
  background: var(--kp-surface);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius);
  overflow: hidden;
  box-shadow: var(--kp-shadow-sm);
  /* Leveys tulee säiliöstä — lomake asettuu samaan ruudukkoon kuin sivun muu
     sisältö. Ei omaa max-widthiä eikä keskitystä: silloin se olisi eri levyinen
     ja eri kohdassa kuin sen yläpuolella oleva teksti. */
}
.kp-lomake__sisalto { padding: 18px 22px 22px; }

/* Paneelin sisällä lomake on osa paneelia — ei omaa kehystä eikä varjoa. */
.kp-paneeli .kp-lomake {
  border: 0; box-shadow: none; border-radius: 0; max-width: none;
  background: transparent;   /* v0.13: paneelin liukuväri näkyy läpi, ei erillistä laatikkoa */
  /* overflow: hidden estäisi lähetysrivin position: stickyn (v0.5). */
  overflow: visible;
}
.kp-paneeli .kp-lomake > .kp-accent { display: none; }
.kp-paneeli .kp-lomake__sisalto { padding: 14px 0 0; }
.kp-paneeli .kp-edistyminen,
.kp-paneeli .kp-vaihelaskuri { padding-left: 0; padding-right: 0; }
.kp-paneeli .kp-edistyminen { margin-top: 4px; }

/* Edistyminen: segmentit ylhäällä + vaiheen nimi. Ei piilotettuja vaiheita. */
.kp-edistyminen { display: flex; gap: 5px; padding: 0 22px; margin-top: 16px; }
.kp-edistyminen__pala {
  height: 5px; flex: 1; border-radius: 999px;
  background: var(--kp-border);
  overflow: hidden;
}
.kp-edistyminen__pala i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--kp-primary), var(--kp-primary-2));
  border-radius: 999px;
  transition: width .45s cubic-bezier(.22,.9,.3,1);
}
.kp-edistyminen__pala--tehty i { width: 100%; }
.kp-edistyminen__pala--nyt i { width: 100%; }

.kp-vaihelaskuri {
  padding: 8px 22px 0;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--kp-muted);
}

.kp-lomake h3 { font-size: 19px; margin-bottom: 4px; }
.kp-lomake__ohje { color: var(--kp-muted); margin: 0 0 14px; font-size: 14px; }
/* Ilman ohjetekstiä otsikko liimautui ensimmäisen kentän nimeen (v0.5). */
.kp-lomake h3 + :not(.kp-lomake__ohje) { margin-top: 12px; }

/* Valintakortit — kaikki näkyvissä, ei karusellia */
.kp-kortit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}
.kp-kortti {
  border: 1.5px solid var(--kp-border);
  background: var(--kp-surface);
  border-radius: var(--kp-radius-sm);
  padding: 14px 10px 12px;
  cursor: pointer;
  font: inherit;
  text-align: center;
  color: var(--kp-heading);
  font-weight: 600;
  font-size: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  position: relative;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.kp-kortti svg { width: 34px; height: 34px; color: var(--kp-primary); transition: transform .22s ease; }
@media (hover: hover) {
  .kp-kortti:hover {
    border-color: color-mix(in srgb, var(--kp-primary) 55%, var(--kp-border));
    transform: translateY(-3px);
    box-shadow: var(--kp-shadow-sm);
  }
  .kp-kortti:hover svg { transform: scale(1.08); }
}
.kp-kortti[aria-pressed="true"],
.kp-kortti[aria-checked="true"] {
  border-color: var(--kp-primary);
  background: color-mix(in srgb, var(--kp-primary) 7%, var(--kp-surface));
}
/* Kuvakortti — vaakakuva. Matala kortti mahtuu ruudulle kokonaan, jolloin
   kaikki vaihtoehdot näkyvät yhdellä silmäyksellä ilman vieritystä. */
.kp-kortit--kuvat { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.kp-kortti--kuva { padding: 0; overflow: hidden; gap: 0; }
/* height:auto on pakollinen — <img height="…"> on esitysvihje, joka muuten
   voittaa aspect-ration ja venyttää kortin korkeaksi. */
.kp-kortti--kuva img {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; display: block;
  transition: transform .35s cubic-bezier(.22,.9,.3,1);
}
.kp-kortti--kuva .kp-kortti__nimi {
  padding: 10px 11px 12px; width: 100%;
  font-size: 13.5px; line-height: 1.3;
}
@media (hover: hover) { .kp-kortti--kuva:hover img { transform: scale(1.05); } }
.kp-kortti--kuva[aria-checked="true"] img,
.kp-kortti--kuva[aria-pressed="true"] img { transform: scale(1.05); }

.kp-kortti__merkki {
  position: absolute; top: 9px; right: 9px;
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(120deg, var(--kp-primary), var(--kp-primary-2));
  color: #fff; display: none; place-items: center;
}
.kp-kortti__merkki svg { width: 11px; height: 11px; color: #fff; }
.kp-kortti[aria-pressed="true"] .kp-kortti__merkki,
.kp-kortti[aria-checked="true"] .kp-kortti__merkki { display: grid; }

.kp-valittu {
  display: inline-block;
  font-size: 12.5px; font-weight: 600;
  color: var(--kp-muted);
  background: var(--kp-surface-2);
  border-radius: 999px;
  padding: 5px 13px;
  margin-bottom: 14px;
}

/* Lähetysvirhe napinrivin yläpuolella, hyvin näkyvä (v0.12). */
.kp-lahetysvirhe {
  margin: 14px 0 0; padding: 10px 12px; border-radius: var(--kp-radius-sm);
  background: #FDECEC; color: #9B1C1C; font-size: 14px; line-height: 1.45;
}
.kp-toiminnot-rivi {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px;
  /* v0.12: ei viivaa vaihtoehtojen ja napin välissä (Valtteri 2.10.2026). */
}
.kp-toiminnot-rivi .kp-btn:last-child { margin-left: auto; }
/* v0.12: itsestään etenevässä korttivaiheessa rivillä on vain Takaisin, ja se
   pysyy vasemmalla. */
.kp-toiminnot-rivi .kp-btn--hiljainen:only-child { margin-left: 0; }
/* Lähetysnappi ei saa kutistua rivin flexissä: kapeassa paneelissa "Lähetä
   viesti" katkesi kahdelle riville ja nuoli jäi tekstin viereen roikkumaan. */
.kp-toiminnot-rivi .kp-btn { flex: none; white-space: nowrap; }

/* Paneelissa lähetys/jatka-rivi tarttuu alalaitaan (v0.5). Viestit-lomake
   oli 642 px korkea, mutta paneelin runkoon mahtui 601 px (1440×900) ja
   547 px (1280×720): "Lähetä viesti" jäi näkymän alle, eikä kävijä tiennyt
   että alla on vielä jotain. Nyt rivi näkyy aina, ja kentät vierivät sen alla. */
.kp-paneeli .kp-toiminnot-rivi {
  position: sticky; bottom: calc(-1 * var(--kp-rp, 20px)); z-index: 2;
  margin: 14px calc(-1 * var(--kp-rp, 20px)) calc(-1 * var(--kp-rp, 20px));
  padding: 18px var(--kp-rp, 20px) 16px;
  /* Ei omaa viivaa eikä varjoa (v0.6, Valtteri: "palkki rajaa sitä oudosti"):
     kun kaikki mahtuu, nappi istuu samalla taustalla kuin kentät. Vieritettäessä
     yläreunan häivytys liu'uttaa kentät napin alle ilman kovaa reunaa. */
  border-top: 0;
  background: linear-gradient(to bottom, transparent, var(--kp-pohja-ala, var(--kp-surface)) 16px);
}
/* v0.12: pelkkä Takaisin ei tartu alalaitaan. Yläpalkissa on jo oma Takaisin,
   ja tarttuva rivi peitti välittäjävaiheen viimeisen kortin (Ei väliä). */
.kp-paneeli .kp-toiminnot-rivi:has(> .kp-btn--hiljainen:only-child) { position: static; }
/* Tiiviimpi lomake paneelissa: sama sisältö ilman vieritystä tavallisella
   työpöytänäytöllä. */
.kp-paneeli .kp-lomake__sisalto { padding-top: 4px; }
.kp-paneeli .kp-kentta { margin-bottom: 9px; }
.kp-paneeli .kp-kentta label { margin-bottom: 4px; }
.kp-paneeli .kp-kentta input { padding-top: 9px; padding-bottom: 9px; }
.kp-paneeli .kp-kentta textarea { min-height: 64px; padding-top: 9px; padding-bottom: 9px; }
.kp-paneeli .kp-lomake__ohje { margin-bottom: 10px; }
.kp-paneeli .kp-ehdot { margin-top: 8px; }

/* Hinta-arvio */
.kp-arvio {
  background: var(--kp-surface-2);
  border-radius: var(--kp-radius-sm);
  padding: 16px;
  text-align: center;
  margin-bottom: 15px;
}
.kp-arvio__luku {
  font-size: 34px; font-weight: 700; color: var(--kp-heading);
  line-height: 1.1; letter-spacing: -.03em;
  font-family: var(--font-mono, inherit);
}
.kp-arvio__yksikko { font-size: 17px; font-weight: 600; color: var(--kp-muted); }
.kp-arvio__selite { font-size: 13.5px; color: var(--kp-muted); margin: 8px 0 0; }

/* Valmis-näkymä */
.kp-valmis { text-align: center; padding: 12px 0 4px; }
.kp-valmis__ikoni {
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(120deg, var(--kp-primary), var(--kp-primary-2));
  color: #fff; display: grid; place-items: center; margin: 0 auto 16px;
}
.kp-valmis__ikoni svg { width: 26px; height: 26px; }
.kp-valmis h3 { font-size: 21px; }
.kp-valmis p { color: var(--kp-muted); margin: 0; }

/* Palautettu kesken jäänyt lomake — teksti ensin, valinnat omina painikkeinaan
   sen alle. Rivissä olevat tekstilinkit eivät erottuneet valinnoiksi. */
.kp-jatka {
  background: var(--kp-surface-2);
  border-radius: var(--kp-radius-sm);
  padding: 14px 16px 15px;
  margin-bottom: 16px;
}
.kp-jatka__teksti {
  margin: 0 0 11px;
  font-size: 14px;
  color: var(--kp-heading);
  font-weight: 600;
}
.kp-jatka__napit { display: flex; gap: 8px; flex-wrap: wrap; }
.kp-jatka__nappi {
  font: inherit; font-size: 13.5px; font-weight: 600;
  border: 1.5px solid var(--kp-border);
  background: var(--kp-surface);
  color: var(--kp-heading);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.kp-jatka__nappi--paa {
  border-color: var(--kp-primary);
  background: color-mix(in srgb, var(--kp-primary) 9%, var(--kp-surface));
}
@media (hover: hover) {
  .kp-jatka__nappi:hover { border-color: var(--kp-primary); transform: translateY(-1px); }
}

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

/* ============================================================================
   MOBIILI
   Kolme asiaa ratkaistaan tässä:
   1. Avausnappi kutistuu pelkäksi ikoniksi — pilleri peittää kapealla
      ruudulla liikaa sisältöä juuri siitä nurkasta, jota peukalo käyttää.
   2. Turva-alueet (env(safe-area-inset-*)) — iPhonen kotipalkki ja
      vaakatilan lovi söivät muuten alalaidan napit.
   3. Kosketuskohteet vähintään 44 px.
   Paneeli EI avaudu itsestään puhelimessa (ks. avaaTyopoydalla) — se peittäisi
   koko ruudun ennen kuin kävijä on lukenut mitään.
   ========================================================================= */

@media (max-width: 640px) {
  .kp-tarjous--kortti {
    left: 12px; right: 12px; width: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .kp-tarjous__rivi { flex-direction: column; }
  .kp-tarjous__rivi .kp-btn { width: 100%; justify-content: center; }
  .kp-tarjous--modaali { width: min(640px, calc(100vw - 24px)); }

  /* Avausnappi = pyöreä ikoninappi. Sisempi pallo kasvaa täyteen kokoon,
     jolloin napista tulee yksi ympyrä sivuston omassa korostusvärissä eikä
     kahta sisäkkäistä ympyrää. Saavutettava nimi tulee aria-labelista. */
  .kp-avaus {
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    padding: 0; gap: 0; width: 56px; height: 56px; justify-content: center;
  }
  .kp-avaus__teksti { display: none; }
  .kp-avaus__pallo { width: 100%; height: 100%; }
  .kp-avaus__pallo svg { width: 23px; height: 23px; }
  /* Nappi on puhelimessa 14 px reunasta, joten rengas kasvaa vähemmän —
     muuten se leikkautuisi ruudun laitaan. */
  @keyframes kp-pulssi {
    0%   { inset: -3px;  opacity: .9; border-width: 2.5px; }
    70%  { inset: -12px; opacity: 0;  border-width: 1px; }
    100% { inset: -12px; opacity: 0;  border-width: 1px; }
  }
  /* dvh ennen vh:ta ei kelpaa: vanhemmat selaimet tarvitsevat vh-varasuureen
     ensin ja uudemmat ylikirjoittavat sen. Ilman dvh:ta paneelin alareuna jää
     mobiiliselaimen osoitepalkin alle, kun palkki liukuu esiin. */
  .kp-paneeli {
    right: calc(10px + env(safe-area-inset-right, 0px));
    left: calc(10px + env(safe-area-inset-left, 0px));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: calc(100vh - 20px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 20px - env(safe-area-inset-bottom, 0px));
  }
  /* Kosketuskohteet 44 px. Sulkunappi oli 38 px eli peukalolle liian pieni. */
  .kp-sulje { width: 44px; height: 44px; }
  .kp-navi button { padding: 13px 4px 12px; }
  .kp-takaisin { padding: 9px 12px 9px 6px; }
  .kp-lomake__sisalto { padding: 16px 16px 18px; }
  .kp-edistyminen, .kp-vaihelaskuri { padding-left: 16px; padding-right: 16px; }
  .kp-kortit { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
  .kp-kortit--kuvat { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .kp-toiminnot-rivi { flex-wrap: wrap; }
  .kp-tarjous h3 { font-size: 21px; }
  .kp-tarjous--modaali h3 { font-size: 23px; }
  .kp-tarjous--modaali .kp-tarjous__sisalto { padding: 22px 20px 24px; }
}

/* Vaakatila puhelimessa: korkeutta on vain n. 390 px, ja ylä- ja alapalkki
   veisivät siitä puolet. Karsitaan tyhjää, jotta luettavaa jää enemmän kuin
   pari riviä. Kosketuskohteet pidetään silti riittävinä. */
@media (max-height: 460px) and (orientation: landscape) {
  .kp-paneeli {
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - 12px);
    max-height: calc(100dvh - 12px);
  }
  .kp-paneeli__ylapalkki { padding: 6px 8px 6px 16px; }
  .kp-paneeli__runko { --kp-rp: 15px; padding: 15px; }
  .kp-sulje { width: 38px; height: 38px; }
  .kp-navi button { padding: 8px 4px 7px; font-size: 11px; gap: 2px; }
  .kp-navi button svg { width: 16px; height: 16px; }
  .kp-avaus { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------- liikkeen vähennys */

@media (prefers-reduced-motion: reduce) {
  .kp-root *,
  .kp-tarjous, .kp-paneeli, .kp-varjo, .kp-avaus, .kp-kortti, .kp-btn {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .kp-tarjous--kortti { transform: none; }
  .kp-tarjous--modaali { transform: translate(-50%, -50%); }
  .kp-paneeli { transform: none; }
  .kp-avaus,
  .kp-avaus--pulssi::before,
  .kp-avaus--pulssi::after,
  .kp-avaus--pulssi .kp-avaus__pallo,
  .kp-paneeli__runko > *,
  .kp-toiminnot li,
  .kp-pika,
  .kp-kampanja .kp-btn { animation: none !important; }
  .kp-kortti--kuva img { transition: none; }
}


/* ============================================================================
   v0.13 OLETUSILME: yhtenäinen yläosa, logo ja liukuväri sivuston väreistä
   (Valtteri 2.10.2026: "oletuksena se tausta on tyylikäs ja yhtenäinen ja
   ylhäällä on se logo, ei tekstiä, niin kuin foorlylla. taustalla joku siisti
   liukuväri, riippuen vaalea tai tumma asiakkaan sivuston väreistä").
   JS lisää kp-teema-vaalea | kp-teema-tumma sivun taustan perusteella
   (asetus paneeli.teema ohittaa) ja --kp-sivu = sivun taustaväri.
   🛑 Valitsimet ovat yhden luokan painoisia ja tiedoston lopussa: ne voittavat
   kirjaston perusarvot, mutta sivuston oma .kp-root.kp-paneeli -ohitus
   (kaksi luokkaa, esim. Foorlyn styles.css) voittaa ne.
   ========================================================================= */
.kp-paneeli > .kp-accent { display: none; }
.kp-paneeli__ylapalkki { background: transparent; border-bottom: 0; }
.kp-paneeli__runko { padding-top: 2px; }
.kp-paneeli--tumma .kp-paneeli__runko { padding-top: var(--kp-rp); }   /* opt-in tumma palkki säilyttää välin */
.kp-paneeli__nimi--logo { display: flex; align-items: center; }
.kp-paneeli__nimi--logo img { display: block; height: 30px; width: auto; max-width: 160px; object-fit: contain; }
/* Valkopohjainen logotiedosto (esim. Ateljé LKV) jätti liukuvärin päälle valkoisen
   laatikon. multiply tekee valkoisesta läpinäkyvän, läpinäkyvä logo ei muutu. */
.kp-teema-vaalea .kp-paneeli__nimi--logo img { mix-blend-mode: multiply; }

.kp-teema-vaalea {
  --kp-pohja-ala: color-mix(in srgb, var(--kp-primary) 7%, #FFFFFF);
  background:
    radial-gradient(70% 46% at 0% 0%, color-mix(in srgb, var(--kp-primary) 14%, transparent), transparent 70%),
    radial-gradient(60% 46% at 100% 0%, color-mix(in srgb, var(--kp-primary-2) 12%, transparent), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, var(--kp-pohja-ala) 100%);
}

/* Tumma: sävyt johdetaan sivun omasta taustasta (--kp-sivu), joten paneeli on
   saman sävyinen kuin sivusto. Rivit ja kentät läpikuultavina pintoina. */
.kp-teema-tumma {
  --kp-sivu-v:     var(--kp-sivu, var(--kp-dark));
  --kp-pohja-ala:  var(--kp-sivu-v);
  --kp-surface:    color-mix(in srgb, #FFFFFF 6%, var(--kp-sivu-v));
  --kp-surface-2:  color-mix(in srgb, #FFFFFF 11%, var(--kp-sivu-v));
  --kp-heading:    #FFFFFF;
  --kp-text:       #E4E6F1;
  --kp-muted:      #B4B8CC;
  --kp-border:     color-mix(in srgb, #FFFFFF 14%, var(--kp-sivu-v));
  --kp-on-dark:    #FFFFFF;
  --kp-shadow:     0 24px 60px -16px rgba(0, 0, 0, .7);
  --kp-shadow-sm:  0 8px 22px -10px rgba(0, 0, 0, .6);
  color: var(--kp-text);
  border-color: color-mix(in srgb, var(--kp-primary) 30%, var(--kp-border));
  background:
    radial-gradient(60% 46% at 0% 0%, color-mix(in srgb, var(--kp-primary) 26%, transparent), transparent 70%),
    radial-gradient(56% 46% at 100% 10%, color-mix(in srgb, var(--kp-primary-2) 22%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, #FFFFFF 5%, var(--kp-sivu-v)), var(--kp-sivu-v));
}
/* Tumma kortti tummalla paneelilla ei erottuisi: kampanja pääväristä,
   tummennettuna, jotta valkoinen teksti pysyy luettavana. */
.kp-teema-tumma .kp-kampanja {
  background: linear-gradient(118deg, color-mix(in srgb, var(--kp-primary) 52%, #000), color-mix(in srgb, var(--kp-primary-2) 52%, #000));
}
.kp-teema-tumma .kp-virhe { color: #FCA5A5; }
/* Alapalkki samaa pintaa paneelin kanssa: valkoinen palkki sävytetyn pohjan
   alareunassa näytti erilliseltä kaistalta (esittelykuva 2.10.2026). */
.kp-teema-vaalea .kp-navi,
.kp-teema-tumma .kp-navi { background: transparent; }

/* Lähetysvirheen laatikko pysyy luettavana myös tummassa teemassa (v0.12). */
.kp-teema-tumma .kp-lahetysvirhe, .kp-root .kp-lahetysvirhe { color: #9B1C1C; }
.kp-lahetysvirhe[hidden] { display: none; }
.kp-tarjous .kp-lahetysvirhe { margin-top: 10px; }