/* ==========================================================================
   Sitrusmedia — Verkkosivujen kuntotesti
   Kaikki säännöt on rajattu .kuntotesti-juureen, jotta tyylit eivät vuoda
   muualle sivustolle. Värit, tila-arvot, pyöristykset, varjot ja liike
   seuraavat Sitrusmedia Design Systemiä (Montserrat 400/700, ei muita fontteja).
   Tiedosto on itsenäinen: se ei tarvitse design systemin token-tiedostoja.
   ========================================================================== */

.kuntotesti{
  /* brändi */
  --kt-black:#000000;
  --kt-yellow:#efe642;      --kt-yellow-500:#dcd22f;  --kt-yellow-100:#fbf8cf;
  --kt-orange:#f7a94a;      --kt-orange-500:#ef8f1e;  --kt-orange-600:#d0740f;
  --kt-orange-100:#fde8cc;

  /* lämpimät neutraalit */
  --kt-n0:#ffffff;  --kt-n25:#fbfaf7; --kt-n50:#f6f5f1; --kt-n100:#eceae4;
  --kt-n200:#dcd9d1; --kt-n300:#c2beb4; --kt-n400:#9d9990; --kt-n500:#78746c;
  --kt-n600:#5a5751; --kt-n700:#403e3a; --kt-n800:#262523; --kt-n900:#141413;

  /* tila-arvot (AA-tarkistetut tekstivärit) */
  --kt-good:#2f8f5b;  --kt-good-text:#1f6640;
  --kt-warn:#ef8f1e;  --kt-warn-text:#a2590c;
  --kt-bad:#c9352c;   --kt-bad-text:#c9352c;

  /* pinnat */
  --kt-surface:var(--kt-n0);
  --kt-text:var(--kt-n800);
  --kt-heading:var(--kt-black);
  --kt-muted:var(--kt-n600);
  --kt-border:var(--kt-n200);
  --kt-border-subtle:var(--kt-n100);

  /* tila ja mitat */
  --kt-section-y:clamp(3.5rem,7vw,6rem);
  /* Sama sisältöleveys kuin Kadencen lohkoilla. Teema julkaisee arvon
     muuttujassa --global-content-width (oletus 1290px); ilman sitä
     käytetään entistä 1200px:ää. Gutterit lisätään tämän päälle
     .kt-wrapissa, jotta sisältö on täsmälleen tämän levyinen. */
  --kt-container:var(--global-content-width,1200px);
  --kt-gutter:clamp(1.25rem,4vw,2.5rem);
  --kt-gap-grid:1.5rem;
  --kt-pad-card:1.5rem;
  --kt-pad-card-lg:2rem;

  --kt-r-sm:6px; --kt-r-md:10px; --kt-r-lg:16px; --kt-r-xl:24px; --kt-r-pill:999px;

  --kt-shadow-sm:0 2px 6px rgba(20,20,19,.07);
  --kt-shadow-md:0 8px 20px -6px rgba(20,20,19,.12);
  --kt-shadow-lg:0 18px 40px -12px rgba(20,20,19,.16);
  --kt-shadow-accent:0 12px 28px -10px rgba(239,230,66,.55);
  --kt-ring:0 0 0 3px rgba(239,143,30,.45);

  --kt-fast:150ms; --kt-base:240ms; --kt-slow:420ms;
  --kt-ease:cubic-bezier(.2,.7,.3,1);
  --kt-pop:cubic-bezier(.34,1.4,.64,1);

  --kt-font:"Montserrat",system-ui,-apple-system,"Segoe UI",Helvetica,sans-serif;

  background:var(--kt-surface);
  color:var(--kt-text);
  font-family:var(--kt-font);
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion:reduce){
  .kuntotesti{--kt-fast:0ms;--kt-base:0ms;--kt-slow:0ms}
}

.kuntotesti *,
.kuntotesti *::before,
.kuntotesti *::after{box-sizing:border-box}
.kuntotesti [hidden]{display:none !important}
.kuntotesti img{max-width:100%}
.kuntotesti p{margin:0}
/* Linkkien väri kuuluu vain työkalun omaan markupiin. Ennen 1.1.13 valitsin
   oli `.kuntotesti a`, joka voitti teeman linkkivärin (0,1,1 vs 0,0,1) ja
   mustasi myös Kadence-lohkoilla tehdyt tel:- ja mailto-linkit, koska koko
   sisältö on saman .kuntotesti-kääreen sisällä. Editorissa väri näytti
   oikealta, koska tämä tiedosto ladataan vain frontendissä.
   :where() pitää tarkkuuden ennallaan (0,1,1), jottei sääntö ala voittaa
   alempana olevia .kuntotesti a.kt-btn -sääntöjä (0,2,0). */
.kuntotesti :where(.kt-hero,.kt-stage) a{color:var(--kt-black);text-decoration-thickness:1px;text-underline-offset:2px}
.kuntotesti :where(.kt-hero,.kt-stage) a:hover{color:var(--kt-orange-600)}
.kuntotesti :focus-visible{outline:2px solid var(--kt-orange-500);outline-offset:2px;border-radius:2px}
.kuntotesti .kt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- rakenne ---------- */
/* Ei omaa sivureunusta. Lohko upotetaan Kadencen rivilayoutiin, jossa on
   jo inheritMaxWidth (1290px) ja sivupadding, joten oma gutter kavensi
   sisältöä 2 x 40px muihin osioihin verrattuna. max-width jää varmistukseksi
   niitä tapauksia varten, joissa lohko pudotetaan rajaamattomaan konttiin. */
.kt-wrap{width:100%;max-width:var(--kt-container);margin-inline:auto;padding-inline:0}
.kt-band{padding-block:var(--kt-section-y);background:var(--kt-surface);scroll-margin-top:5.5rem}
.kt-band--subtle{--kt-surface:var(--kt-n50)}

/* ---------- typografia ---------- */
.kuntotesti h1,.kuntotesti h2,.kuntotesti h3,.kuntotesti h4{
  font-family:var(--kt-font);font-weight:700;color:var(--kt-heading);
  letter-spacing:-.02em;margin:0;text-wrap:pretty;
}
/* --kt-h1-max ja --kt-lead-size tulevat sivun ACF-kentistä heron
   style-attribuutissa. Ilman niitä käytetään oletusta.

   Alaraja johdetaan maksimista, ei kiinteästä arvosta. Kiinteä 2.5rem
   (40px) teki kahta vahinkoa: 40px:n tai sitä pienemmän ACF-asetuksen
   kanssa clamp() palautti aina alarajan, joten otsikko oli puhelimessa
   yhtä iso kuin työpöydällä — vastoin kentän ohjetta — ja 320px:n
   näytöllä pitkä sana ("yrityksesi") ei mahtunut riville vaan katkesi
   keskeltä. Suhteellinen alaraja pienenee asetuksen mukana. */
.kuntotesti h1{
  font-size:clamp(calc(var(--kt-h1-max,3.25rem) * .58),4.6vw,var(--kt-h1-max,3.25rem));
  line-height:1.06;
}
.kuntotesti h2{font-size:clamp(1.875rem,3.2vw,2.25rem);line-height:1.18}
.kuntotesti h3{font-size:1.375rem;line-height:1.24}
.kuntotesti h4{font-size:1.0625rem;line-height:1.3}

.kt-eyebrow{
  display:inline-block;font-weight:700;font-size:.8125rem;line-height:1.3;
  letter-spacing:.16em;text-transform:uppercase;color:var(--kt-orange-600);
}
.kt-lead{font-size:var(--kt-lead-size,1.1875rem);line-height:1.65;color:var(--kt-muted);max-width:60ch}
.kt-small{font-size:.9375rem;line-height:1.5;color:var(--kt-muted)}
.kt-fine{font-size:.8125rem;line-height:1.5;color:var(--kt-muted)}

.kt-head{display:grid;gap:.75rem;max-width:60ch;margin-bottom:2.5rem}
/* Otsikko on muotoa "verkkotunnus.fi tulokset"; verkkotunnus tulee JS:stä
   pienaakkosin, joten iso alkukirjain tehdään tyylillä. */
.kt-head h2::first-letter{text-transform:uppercase}

/* ---------- napit ---------- */
.kt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--kt-font);font-weight:700;font-size:.9375rem;line-height:1;
  padding:1rem 1.625rem;border:2px solid transparent;border-radius:var(--kt-r-pill);
  background:var(--kt-black);color:var(--kt-n0);text-decoration:none;cursor:pointer;
  transition:background-color var(--kt-fast) var(--kt-ease),
             border-color var(--kt-fast) var(--kt-ease),
             color var(--kt-fast) var(--kt-ease),
             transform var(--kt-base) var(--kt-ease),
             box-shadow var(--kt-base) var(--kt-ease);
}
.kt-btn:hover{background:var(--kt-n800);color:var(--kt-n0);transform:translateY(-2px);box-shadow:var(--kt-shadow-md)}
.kt-btn:active{transform:scale(.97)}
.kt-btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

.kt-btn--lemon{background:var(--kt-yellow);color:var(--kt-black)}
.kt-btn--lemon:hover{background:var(--kt-yellow-500);color:var(--kt-black);box-shadow:var(--kt-shadow-accent)}

.kt-btn--outline{background:transparent;color:var(--kt-black);border-color:var(--kt-black)}
.kt-btn--outline:hover{background:var(--kt-yellow-100);color:var(--kt-black);box-shadow:none}

/* Linkkinapit: .kuntotesti a (0,1,1) voitti .kt-btn:n (0,1,0), jolloin tumman
   napin teksti jäi mustaksi mustalla pohjalla — 1:1-kontrasti, käytännössä
   näkymätön. Korjattu 7.9.2026 samalla tarkkuudella kirjoitetuilla säännöillä. */
.kuntotesti a.kt-btn{color:var(--kt-n0)}
.kuntotesti a.kt-btn--lemon,
.kuntotesti a.kt-btn--outline{color:var(--kt-black)}
.kuntotesti .kt-cta a.kt-btn--outline{color:var(--kt-n0)}

.kt-btn svg{flex:0 0 auto}
.kt-btn-row{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- ylätunniste ----------
   Lisäosalla ei ole omaa ylätunnistetta: sivu käyttää Kadencen globaalia
   ylävalikkoa. .kt-nav-säännöt poistettiin 7.9.2026 templaten mukana. */

/* ---------- hero ---------- */
/* Taustan ja tekstien värit tulevat sivun ACF-kentistä muuttujina.
   Vain hero värjätään: tulosnäkymä on eri osio ja jää valkoiseksi, kun
   JS piilottaa heron mittauksen alkaessa. */
.kt-hero{padding-block:clamp(3rem,5.5vw,4.5rem) var(--kt-section-y);background:var(--kt-hero-bg,transparent)}
.kt-hero h1{color:var(--kt-hero-heading,var(--kt-heading))}
.kt-hero .kt-lead{color:var(--kt-hero-text,var(--kt-muted))}
.kt-hero .kt-eyebrow{color:var(--kt-hero-eyebrow,var(--kt-orange-600))}
/* Kun tausta on asetettu, osio saa oman reunuksen ja pyöristyksen, jottei
   väri ala keskeltä sisältöä. */
.kt-hero--bg{
  border-radius:var(--kt-r-xl);
  padding-inline:clamp(1.5rem,4vw,3rem);
  padding-block:clamp(2.5rem,5vw,4rem);
}
/* Puhelimessa väripalkki viedään reunasta reunaan ja sisältö saa saman
   16px:n reunapehmusteen kuin Kadence-lohkot. Ilman tätä heron oma 24px
   tuli Kadence-rivin oman reunuksen päälle, jolloin heron teksti alkoi
   40px:n kohdalta ja muut osiot 16px:n kohdalta — ero näkyi selvästi ja
   vei otsikolta 48px riviä. calc(50% - 50vw) ei oleta mitään rivin omista
   asetuksista, joten korjaus pitää vaikka rivin reunusta muutetaan. */
@media (max-width:767px){
  .kt-hero--bg{
    margin-inline:calc(50% - 50vw);
    padding-inline:1rem;
    border-radius:0;
  }
}
/* Hero on kaksi riviä: ylhäällä teksti ja esimerkkikortti vierekkäin,
   alla osoitekenttä koko leveydeltä. */
.kt-hero-inner{display:grid;gap:clamp(2rem,4vw,3rem)}
.kt-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:980px){.kt-hero-grid{grid-template-columns:1fr;gap:2.5rem}}
/* Yläotsikko kiinni otsikossa (kuten Kadencen advancedheading-parit),
   ingressille oma väljempi väli.

   !important on tässä harkittu: teema antaa otsikoille oman ylämarginaalin
   valitsimella joka on lisäosan omia tarkempi, ja se työnsi otsikon noin
   80px yläotsikosta irti. Väli kuuluu tälle komponentille, ei teemalle,
   joten se lukitaan. Rajaus on tiukka: vain heron tekstipalstan lapset. */
.kt-hero-copy{display:grid;gap:.5rem;justify-items:start}
.kuntotesti .kt-hero-copy > *{margin-block:0 !important}
.kuntotesti .kt-hero-copy .kt-lead{margin-top:.75rem !important}
.kt-hero h1{max-width:22ch;text-wrap:balance}
.kt-hero .kt-lead{max-width:48ch}

/* Korostettu kohta: lemon-alleviivaus, ei väritettyä tekstiä.
   Korostus on ACF-kentässä muokattava, joten se voi olla monta sanaa pitkä.
   nowrap työnsi pitkän korostuksen palstan ulkopuolelle, joten korostus saa
   katketa riviltä toiselle ja box-decoration-break piirtää viivan molemmille. */
.kt-mark{
  display:inline;color:var(--kt-black);
  background-image:linear-gradient(to top,var(--kt-yellow) .34em,transparent .34em);
  background-repeat:no-repeat;padding-inline:.06em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* osoitekenttä */
.kt-urlform{width:100%;display:grid;gap:.75rem}
.kt-urlfield{
  display:flex;align-items:center;gap:.25rem;background:var(--kt-n0);
  border:2px solid var(--kt-n300);border-radius:var(--kt-r-pill);
  padding:.4375rem .4375rem .4375rem 1.125rem;box-shadow:var(--kt-shadow-sm);
  transition:border-color var(--kt-fast) var(--kt-ease),box-shadow var(--kt-fast) var(--kt-ease);
}
.kt-urlfield:focus-within{border-color:var(--kt-black);box-shadow:var(--kt-ring)}
.kt-urlfield .kt-pre{font-size:.9375rem;color:var(--kt-n500);user-select:none}
/* .kuntotesti-etuliite: teema tyylittelee input[type=text] -kentät omalla
   reunuksellaan ja pyöristyksellään, mikä piirsi pillerin sisään toisen
   kehyksen. Kenttä on tarkoituksella pelkkä kirjoitusalue pillerin sisällä. */
.kuntotesti .kt-urlfield input{
  flex:1 1 auto;min-width:0;background:transparent;border:0;outline:0;box-shadow:none;
  border-radius:0;
  font-family:var(--kt-font);font-size:1rem;color:var(--kt-n900);padding:.75rem .375rem;
}
.kuntotesti .kt-urlfield input:focus{border:0;box-shadow:none}
.kt-urlfield input::placeholder{color:var(--kt-n400)}
.kt-urlfield .kt-btn{flex:0 0 auto;padding:.875rem 1.375rem}
@media (max-width:540px){
  .kt-urlfield{flex-wrap:wrap;border-radius:var(--kt-r-lg);padding:.75rem;gap:.5rem}
  .kt-urlfield .kt-pre{display:none}
  .kt-urlfield input{flex:1 0 100%;padding:.5rem}
  .kt-urlfield .kt-btn{width:100%}
}
.kt-note{display:flex;align-items:flex-start;gap:.5rem;font-size:.8125rem;line-height:1.5;color:var(--kt-muted)}
.kt-note svg{flex:0 0 auto;margin-top:.2em}
.kt-err{font-size:.875rem;font-weight:700;color:var(--kt-bad-text);min-height:1.25em}

.kt-trust{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:0;padding:0;list-style:none}
.kt-trust li{display:flex;align-items:center;gap:.5rem;font-size:.9375rem;color:var(--kt-muted)}
.kt-trust li::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--kt-yellow);flex:0 0 auto}

/* ---------- raporttikortti ---------- */
.kt-card{
  background:var(--kt-n0);border:1px solid var(--kt-border);
  border-radius:var(--kt-r-lg);box-shadow:var(--kt-shadow-lg);
}
.kt-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.875rem var(--kt-pad-card);border-bottom:1px solid var(--kt-border-subtle);
}
.kt-card-head .kt-tag{font-weight:700;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;color:var(--kt-orange-600)}
.kt-card-body{padding:var(--kt-pad-card)}
.kt-dots{display:flex;gap:.375rem}
.kt-dots i{width:.5rem;height:.5rem;border-radius:50%;background:var(--kt-n200);display:block}
.kt-dots i:first-child{background:var(--kt-yellow)}

/* mittarikiekko: kuusi lohkoa, viittaus sitrushedelmän poikkileikkaukseen */
.kt-dial{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.5rem;align-items:center}
@media (max-width:440px){.kt-dial{grid-template-columns:1fr;justify-items:center;text-align:center}}
.kt-dial-svg{width:148px;height:148px;flex:0 0 auto;transform:rotate(-90deg)}
.kt-dial-track{fill:none;stroke:var(--kt-n100);stroke-width:12}
.kt-dial-val{
  fill:none;stroke:var(--kt-yellow);stroke-width:12;stroke-linecap:round;
  stroke-dasharray:427;stroke-dashoffset:427;
  transition:stroke-dashoffset 1.4s var(--kt-ease),stroke var(--kt-slow) var(--kt-ease);
}
.kt-dial-seg{stroke:var(--kt-n0);stroke-width:5;stroke-linecap:butt}
.kt-dial-num{font-weight:700;font-size:3.25rem;line-height:1;letter-spacing:-.03em;color:var(--kt-black)}
.kt-dial-num small{font-size:1.0625rem;font-weight:400;color:var(--kt-n500);letter-spacing:0}
.kt-dial-verdict{font-weight:700;font-size:1.0625rem;margin-top:.375rem}
.kt-dial-sub{font-size:.9375rem;line-height:1.5;color:var(--kt-muted);margin-top:.375rem;max-width:34ch}

/* mittarit */
.kt-meters{display:grid;gap:.75rem;margin-top:1.5rem}
.kt-meter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem 1rem;align-items:center}
.kt-meter .kt-m-name{font-size:.9375rem;color:var(--kt-n800)}
.kt-meter .kt-m-val{font-weight:700;font-size:.9375rem}
.kt-meter .kt-m-bar{grid-column:1/-1;height:6px;border-radius:var(--kt-r-pill);background:var(--kt-n100);overflow:hidden}
.kt-meter .kt-m-bar i{display:block;height:100%;width:0;border-radius:var(--kt-r-pill);transition:width 1s var(--kt-ease)}

/* ---------- skannaus ---------- */
.kt-stage{padding-block:var(--kt-section-y)}
.kt-scan{max-width:44rem;margin-inline:auto;display:grid;gap:1rem}
.kt-scan-target{font-weight:700;font-size:1.0625rem;color:var(--kt-black);word-break:break-all}
.kt-scan-bar{height:4px;background:var(--kt-n100);border-radius:var(--kt-r-pill);overflow:hidden}
.kt-scan-bar i{display:block;height:100%;width:0;background:linear-gradient(100deg,var(--kt-yellow) 0%,var(--kt-orange) 100%);transition:width .5s linear}
.kt-scan-list{list-style:none;margin:0;padding:0;display:grid}
.kt-scan-list li{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.875rem 0;border-bottom:1px solid var(--kt-border-subtle);
  font-size:.9375rem;color:var(--kt-n500);
  transition:color var(--kt-slow) var(--kt-ease);
}
.kt-scan-list li.is-active{color:var(--kt-black)}
.kt-scan-list li.is-done{color:var(--kt-n700)}
.kt-scan-list li b{font-weight:700;font-size:.8125rem;letter-spacing:.06em;flex:0 0 auto;color:var(--kt-n600)}
.kt-scan-list li.is-active b{color:var(--kt-orange-600)}
.kt-scan-list li.is-done b{color:var(--kt-good-text)}

/* ---------- tulokset ---------- */
/* Kaksi yhtä leveää saraketta samalla välillä kuin liidiportin
   havaintoruudukossa. Näin pistekortti ja sen vierestä alkavat havainnot
   ovat samassa linjassa alempien korttien ja liidiportin kanssa. */
.kt-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--kt-gap-grid);align-items:start}
@media (max-width:980px){.kt-result-grid{grid-template-columns:1fr}}
.kt-result-col{display:grid;gap:1rem;align-content:start}
/* Vasen palsta venyy oikean korkuiseksi ja pistekortti sen mukana, jolloin
   kortin alareuna osuu samaan linjaan liidiporttiin ohjaavan laatikon kanssa.
   Ylimääräinen tila jää kortin sisälle mittarien alle, eli se luetaan
   paddingina. Oikea palsta pysyy ennallaan: siellä havainnot eivät saa venyä. */
.kt-result-grid > .kt-result-col:first-child{align-self:stretch;align-content:stretch}
.kt-result-col:first-child > .kt-card{display:flex;flex-direction:column}
.kt-result-col:first-child .kt-card-body{flex:1 1 auto}

.kt-aside{
  padding:var(--kt-pad-card);border-radius:var(--kt-r-lg);
  background:var(--kt-yellow-100);border:1px solid var(--kt-yellow);
  display:grid;gap:.625rem;justify-items:start;
}
.kt-aside p{font-size:.9375rem;line-height:1.55;color:var(--kt-n800)}
.kt-aside a{font-weight:700;font-size:.9375rem;color:var(--kt-black)}
/* Ohjaus liidiporttiin: nuoli nyökkää alaspäin, jotta linkki luetaan
   sivun sisäisenä siirtymänä eikä ulkoisena. */
.kt-aside-link{
  display:inline-flex;align-items:center;gap:.5rem;
  transition:gap var(--kt-fast) var(--kt-ease),color var(--kt-fast) var(--kt-ease);
}
.kt-aside-link svg{flex:0 0 auto;transition:transform var(--kt-base) var(--kt-pop)}
.kt-aside-link:hover{gap:.625rem}
.kt-aside-link:hover svg{transform:translateY(2px)}

/* Lukon auettua kehotus on vanhentunut: havainnot ovat jo auki. */
#kt-resultView:has(#kt-thanks:not([hidden])) .kt-aside{display:none}

/* Teeman omat ul-säännöt (esim. Kadencen .entry-content ul) ovat
   tarkempia kuin pelkkä .kt-findings ja työntävät listat sisennykseen,
   jolloin havainnot eivät ole samassa linjassa pistekortin eivätkä
   liidiportin kanssa. .kuntotesti-etuliite nostaa tarkkuuden riittäväksi. */
.kuntotesti .kt-findings,
.kuntotesti .kt-checks,
.kuntotesti .kt-scan-list,
.kuntotesti .kt-trust{margin:0;padding:0;list-style:none}
.kt-findings{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.kt-finding{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.875rem;
  padding:var(--kt-pad-card);background:var(--kt-n0);
  border:1px solid var(--kt-border);border-radius:var(--kt-r-lg);
}
.kt-finding .kt-sev{width:.625rem;height:.625rem;border-radius:50%;margin-top:.5rem;flex:0 0 auto}
.kt-finding .kt-cat{display:block;font-weight:700;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--kt-orange-600);margin-bottom:.25rem}
.kt-finding h4{margin-bottom:.25rem}
.kt-finding p{font-size:.9375rem;line-height:1.55;color:var(--kt-muted)}

/* liidiportti — täysleveä kaista .kt-result-gridin alla.
   Lähtee samasta vasemmasta reunasta kuin .kt-head, koska molemmat ovat
   suoraan .kt-wrapin lapsia. */
.kt-locked{position:relative;margin-top:var(--kt-gap-grid);scroll-margin-top:6rem}
/* Sumennetut havainnot kahdessa sarakkeessa: täysleveä yksi palsta venyttäisi
   rivit lukukelvottoman pitkiksi, kun lukko aukeaa. */
@media (min-width:900px){
  .kt-locked .kt-findings{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--kt-gap-grid)}
}
/* Sumennus: 9 px ja opacity .5 latisti pinon yhdeksi harmaaksi läiskäksi,
   jolloin lukon takana ei näyttänyt olevan mitään. 5 px ja .68 jättää
   korttien rajat ja rivirytmin näkyviin, mutta teksti pysyy lukukelvottomana. */
.kt-veil{
  filter:blur(5px);opacity:.68;user-select:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 78%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 78%,transparent 100%);
}
.kt-gate{
  position:relative;z-index:3;margin-top:-4.5rem;
  background:var(--kt-n0);border:1px solid var(--kt-border);
  border-radius:var(--kt-r-lg);padding:var(--kt-pad-card-lg);box-shadow:var(--kt-shadow-lg);
}
.kt-gate--flat{margin-top:1rem;box-shadow:var(--kt-shadow-md)}

/* Leveä portti: teksti vasemmalle, lomake oikealle. Kortin sisällä oma
   jako, jotta 1200 px:n leveydellä rivit eivät veny. */
.kt-gate--wide{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  column-gap:clamp(2rem,5vw,4rem);row-gap:2rem;align-items:start;
  padding:clamp(1.75rem,3.2vw,2.75rem);
}
/* Lomake on korkeampi kuin tekstipalsta, joten keskitys jätti lukon
   yläpuolelle ison tyhjän alueen. Teksti alkaa nyt kortin yläreunasta. */
.kt-gate-copy{align-self:start}
@media (max-width:860px){
  .kt-gate--wide{grid-template-columns:1fr;column-gap:0;row-gap:1.5rem}
  .kt-gate-copy{align-self:start}
}
/* Portin sisällä lomake on jo puolikas — kentät saavat pysyä kahdessa
   sarakkeessa pidempään kuin .kt-fields-oletus antaisi. */
.kt-gate--wide .kt-fields{margin-top:0}
.kt-gate--wide form > .kt-btn{max-width:22rem}
@media (max-width:860px){.kt-gate--wide form > .kt-btn{max-width:none}}

.kt-lockicon{
  width:2.5rem;height:2.5rem;border-radius:var(--kt-r-md);display:grid;place-items:center;
  background:var(--kt-yellow-100);border:1px solid var(--kt-yellow);margin-bottom:1rem;
}
.kt-gate h3{margin-bottom:.5rem}
.kt-gate .kt-lead{font-size:1.0625rem}
.kt-checks{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.625rem}
.kt-checks li{display:flex;gap:.625rem;align-items:flex-start;font-size:.9375rem;color:var(--kt-n800)}
.kt-checks li svg{flex:0 0 auto;margin-top:.35em}

/* Yksi kenttä riviä kohden. Kahdessa sarakkeessa pitkä nimi tai
   sähköpostiosoite ei mahtunut kenttään näkyviin, ja lomakkeen alle jäi
   työpöydällä iso tyhjä alue ennen painiketta. */
.kt-fields{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.5rem}
.kt-field{display:grid;gap:.375rem}
.kt-field--full{grid-column:1/-1}
.kt-field label{font-weight:700;font-size:.9375rem;color:var(--kt-black)}
.kt-field input{
  font-family:var(--kt-font);font-size:1rem;color:var(--kt-n900);
  background:var(--kt-n0);border:1px solid var(--kt-border);border-radius:var(--kt-r-md);
  padding:.8125rem .875rem;outline:0;
  transition:border-color var(--kt-fast) var(--kt-ease),box-shadow var(--kt-fast) var(--kt-ease);
}
.kt-field input::placeholder{color:var(--kt-n400)}
.kt-field input:focus{border-color:var(--kt-black);box-shadow:var(--kt-ring)}
.kt-field input[aria-invalid="true"]{border-color:var(--kt-bad)}
.kt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kt-consent{grid-column:1/-1;display:flex;gap:.75rem;align-items:flex-start;font-size:.875rem;line-height:1.55;color:var(--kt-n800)}
.kt-consent input{margin-top:.2rem;width:1.125rem;height:1.125rem;flex:0 0 auto;accent-color:var(--kt-black)}
/* .kuntotesti-etuliite: teeman omat form- ja button-säännöt ovat
   tarkempia kuin pelkkä .kt-gate ja kasvattivat väliä suostumustekstin
   ja painikkeen välillä. Tyhjä virheilmoitus ei vie tilaa lainkaan. */
.kuntotesti .kt-gate form .kt-err{margin-top:.5rem}
.kuntotesti .kt-gate form .kt-err:empty{display:none;margin:0}
.kuntotesti .kt-gate form .kt-btn{margin-top:1rem;margin-bottom:0;width:100%}
.kuntotesti .kt-gate form .kt-fields{margin-bottom:0}

.kt-thanks{text-align:center}
.kt-tick{
  width:3.5rem;height:3.5rem;border-radius:50%;margin:0 auto 1rem;display:grid;place-items:center;
  background:var(--kt-yellow);border:1px solid var(--kt-yellow-500);
}
.kt-thanks .kt-btn-row{justify-content:center;margin-top:1.5rem}

/* ---------- kuusi mittaria ---------- */
.kt-grid6{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--kt-gap-grid)}
.kt-tile{
  display:grid;gap:.75rem;align-content:start;padding:var(--kt-pad-card);
  background:var(--kt-n0);border:1px solid var(--kt-border);border-radius:var(--kt-r-lg);
  box-shadow:var(--kt-shadow-sm);
  transition:transform var(--kt-base) var(--kt-ease),box-shadow var(--kt-base) var(--kt-ease),border-color var(--kt-fast) var(--kt-ease);
}
.kt-tile:hover{transform:translateY(-2px);box-shadow:var(--kt-shadow-lg);border-color:var(--kt-yellow)}
.kt-tile-n{
  width:2.5rem;height:2.5rem;border-radius:var(--kt-r-sm);display:grid;place-items:center;
  background:var(--kt-yellow);color:var(--kt-black);font-weight:700;font-size:.9375rem;
}
.kt-tile p{font-size:.9375rem;line-height:1.55;color:var(--kt-muted)}

/* ---------- näin se etenee ---------- */
.kt-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--kt-gap-grid)}
.kt-step{display:grid;gap:.625rem;align-content:start;border-top:3px solid var(--kt-yellow);padding-top:1.25rem}
.kt-step-n{font-weight:700;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;color:var(--kt-orange-600)}
.kt-step p{font-size:.9375rem;line-height:1.55;color:var(--kt-muted)}

/* ---------- luottamus ---------- */
.kt-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--kt-gap-grid);margin-bottom:2.5rem}
.kt-stat{padding:var(--kt-pad-card);background:var(--kt-n0);border:1px solid var(--kt-border);border-radius:var(--kt-r-lg)}
.kt-stat-num{font-weight:700;font-size:2.75rem;line-height:1;letter-spacing:-.03em;color:var(--kt-black)}
.kt-stat-cap{font-size:.9375rem;line-height:1.5;color:var(--kt-muted);margin-top:.625rem}
.kt-logos{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.5rem;padding-top:2rem;border-top:1px solid var(--kt-border-subtle);margin:0;list-style:none}
.kt-logos img{height:40px;width:auto;display:block;filter:grayscale(1);opacity:.75;transition:filter var(--kt-slow) var(--kt-ease),opacity var(--kt-slow) var(--kt-ease)}
.kt-logos li:hover img{filter:none;opacity:1}

/* ---------- ukk ---------- */
.kt-faq{display:grid;max-width:52rem}
.kt-faq details{border-bottom:1px solid var(--kt-border-subtle)}
.kt-faq summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.125rem 0;font-weight:700;font-size:1.0625rem;line-height:1.3;color:var(--kt-black);
  transition:color var(--kt-fast) var(--kt-ease);
}
.kt-faq summary::-webkit-details-marker{display:none}
.kt-faq summary:hover{color:var(--kt-orange-600)}
.kt-faq summary .kt-pm{flex:0 0 auto;font-weight:700;color:var(--kt-orange-600);transition:transform var(--kt-base) var(--kt-pop)}
.kt-faq details[open] summary .kt-pm{transform:rotate(45deg)}
.kt-faq details > p,.kt-faq .wp-block-details__content{font-size:.9375rem;line-height:1.6;color:var(--kt-muted);max-width:66ch;padding-bottom:1.5rem}

/* ---------- cta (yksi tumma osio sivulla) ---------- */
.kt-cta{
  background:var(--kt-n900);color:var(--kt-n0);border-radius:var(--kt-r-xl);
  padding:clamp(2rem,5vw,3.5rem);display:grid;gap:1rem;justify-items:start;
}
.kt-cta h2{color:var(--kt-n0);max-width:22ch}
.kt-cta .kt-eyebrow{color:var(--kt-orange)}
.kt-cta .kt-lead{color:var(--kt-n200);max-width:52ch}
.kt-cta .kt-btn--outline{color:var(--kt-n0);border-color:var(--kt-n0)}
.kt-cta .kt-btn--outline:hover{background:rgba(255,255,255,.1);color:var(--kt-n0)}

/* ---------- alatunniste ----------
   .kt-foot-, .kt-person- ja .kt-foot-bottom-säännöt poistettiin 1.1.4:ssä
   yhdessä footer.php:n kanssa. Alatunniste tulee Kadencelta. */

/* ---------- WordPress-lohkojen tasoitus ---------- */
.kuntotesti .wp-block-group,
.kuntotesti .wp-block-columns,
.kuntotesti .wp-block-column,
.kuntotesti .wp-block-details,
.kuntotesti .wp-block-image,
.kuntotesti .wp-block-html{margin-block:0}
.kuntotesti .wp-block-image figure{margin:0}
.kuntotesti .wp-block-group.kt-wrap{max-width:none}

/* hero: core/columns käyttäytyy kuin .kt-hero-grid */
.kt-hero .wp-block-columns{align-items:center;gap:clamp(2rem,5vw,4rem);margin-bottom:0}
.kt-hero .wp-block-column{display:grid;gap:1.25rem;align-content:start;justify-items:start;min-width:0}
.kt-hero .wp-block-column > *{margin-block:0}

/* logorivi core/image-lohkoina */
.kt-logos.wp-block-group{display:flex}
.kt-logos figure{margin:0}
.kt-logos figure:hover img{filter:none;opacity:1}

/* UKK core/details-lohkoina: oma plus-merkki, ei selaimen kolmiota */
.kt-faq .wp-block-details{border-bottom:1px solid var(--kt-border-subtle)}
.kt-faq .wp-block-details summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1.125rem;font-weight:700;font-size:1.0625rem;line-height:1.3;color:var(--kt-black);
}
.kt-faq .wp-block-details summary::-webkit-details-marker{display:none}
.kt-faq .wp-block-details summary::after{
  content:"+";flex:0 0 auto;font-weight:700;color:var(--kt-orange-600);
  transition:transform var(--kt-base) var(--kt-pop);
}
.kt-faq .wp-block-details[open] summary::after{transform:rotate(45deg)}
.kt-faq .wp-block-details p{font-size:.9375rem;line-height:1.6;color:var(--kt-muted);max-width:66ch;padding-bottom:1.5rem;margin:0}