/* taksiverkosto.com, oma tyyli pohja.css:n päälle. Ulkoasu 2.11.2026, perustelut ../BRANDI.md (ei julkaisukansiossa).
   Maailma: opastaulu. Petrooli kantaa ylätunnisteen ja etusivun yläosan, sisältö on rauhallisella vaalealla pinnalla,
   meripihka (kattovalo) on ainoa signaaliväri: tärkein painike tummalla pinnalla ja "Halvin". */

:root {
  --pohja: #F4F6F6;
  --pinta: #FFFFFF;
  --pinta-2: #E6EEF0;
  --muste: #0B1C22;
  --teksti: #2C3B42;
  --himmea: #55666E;
  --viiva: #D6DEE1;
  --viiva-2: #A9B8BE;
  --kentta-reuna: #71838B;

  --korostus: #0A4F66;
  --korostus-syva: #073A4B;
  --korostus-teksti: #FFFFFF;
  --korostus-vaalea: #E2EEF2;
  --linkki: #0A4F66;
  --valo: #F5B82E;
  --valo-hover: #FFC94D;
  --tumma-teksti: #D3E5EB;

  --varjo: 0 1px 2px rgb(11 28 34 / 0.08), 0 14px 32px -14px rgb(11 28 34 / 0.38);
  --sade-s: 8px;
  --sade: 12px;
  --sade-l: 16px;
  --kehys: 72rem;
  --reuna: 16px;
  --ulos: cubic-bezier(0.23, 1, 0.32, 1);

  /* pohja.css:n muuttujat samoihin arvoihin */
  --paperi: var(--pohja);
  --valkoinen: var(--pinta);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pohja: #0B171B;
    --pinta: #11232A;
    --pinta-2: #0F2229;
    --muste: #EEF3F4;
    --teksti: #C9D5D9;
    --himmea: #93A6AD;
    --viiva: #22383F;
    --viiva-2: #3A5761;
    --kentta-reuna: #6D8790;
    --korostus: #0A4F66;
    --korostus-syva: #062F3C;
    --korostus-vaalea: #10303A;
    --linkki: #7CC8DE;
    --varjo: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 36px -16px rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}

@media (min-width: 48rem) { :root { --reuna: 32px; } }

/* ---------- Perusta ---------- */
html { scrollbar-color: var(--viiva-2) var(--pohja); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  background: var(--pohja);
  color: var(--teksti);
  font-variation-settings: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--valo); color: #0B1C22; }
input { caret-color: var(--korostus); }
h1, h2, h3 { color: var(--muste); text-wrap: balance; margin: 0; }
h1 { font-size: 2.25rem; font-weight: 780; font-stretch: 112%; line-height: 1.04; letter-spacing: -0.022em; }
h2 { font-size: 1.5rem; font-weight: 720; font-stretch: 106%; line-height: 1.15; letter-spacing: -0.012em; }
h3 { font-size: 1.125rem; font-weight: 680; font-stretch: 102%; line-height: 1.25; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--linkki); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color 150ms ease, text-decoration-color 150ms ease; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--linkki); outline-offset: 2px; border-radius: 4px; }
@media (min-width: 48rem) {
  h1 { font-size: 3rem; }
  h2 { font-size: 1.75rem; }
}

.kehys { max-width: var(--kehys); margin: 0 auto; padding: 0 var(--reuna); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ohita { position: absolute; left: 8px; top: -100px; z-index: 20; padding: 12px 16px; background: var(--valo); color: #0B1C22; font-weight: 700; border-radius: var(--sade-s); }
.ohita:focus { top: 8px; }
.ikoni { width: 1.15em; height: 1.15em; flex: none; }
.ikoni--pieni { width: 0.95em; height: 0.95em; }
.meta { color: var(--himmea); font-size: 0.9375rem; font-stretch: 96%; }
p.meta { max-width: 38rem; }
.ingressi { font-size: 1.1875rem; line-height: 1.5; color: var(--muste); max-width: 40rem; }
@media (min-width: 48rem) { .ingressi { font-size: 1.3125rem; } }
.paikka { font-family: inherit; }
[hidden] { display: none !important; }

/* ---------- Ylätunniste ---------- */
.ylapalkki { background: var(--korostus-syva); color: #fff; }
.ylapalkki__rivi { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 64px; flex-wrap: wrap; }
.sanamerkki { color: #fff; text-decoration: none; font-weight: 800; font-stretch: 116%; font-size: 1.25rem; letter-spacing: -0.015em; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.sanamerkki__symboli { width: 32px; height: 32px; flex: none; }
.paavalikko { display: flex; gap: 4px; font-size: 0.9375rem; font-weight: 600; }
.paavalikko a { color: var(--tumma-teksti); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--sade-s); transition: background-color 150ms ease, color 150ms ease; }
.paavalikko a:hover { color: #fff; background: rgb(255 255 255 / 0.08); }
.paavalikko a[aria-current] { color: #fff; box-shadow: inset 0 -3px 0 var(--valo); border-radius: var(--sade-s) var(--sade-s) 0 0; }
.ylapalkki a:focus-visible, .sankari a:focus-visible, .sankari button:focus-visible, .sankari input:focus-visible, .alatunniste a:focus-visible { outline-color: var(--valo); }
@media (max-width: 27rem) {
  .ylapalkki__rivi { padding-top: 6px; padding-bottom: 6px; }
  .paavalikko { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .paavalikko a { justify-content: center; background: rgb(255 255 255 / 0.06); }
  .paavalikko a[aria-current] { border-radius: var(--sade-s); box-shadow: inset 0 -3px 0 var(--valo); }
}

/* ---------- Sivun alkuosa (alasivut) ---------- */
.sivupaa { background: var(--pinta-2); border-bottom: 1px solid var(--viiva); padding: 28px 0 36px; }
.sivupaa h1 { margin: 0 0 16px; }
.sivupaa .ingressi { margin-bottom: 10px; }
@media (min-width: 48rem) { .sivupaa { padding: 44px 0 52px; } }
.sivupaa--404 { min-height: 60vh; padding-top: 56px; }
.sivupaa--404 .yleiso__linkit { margin-top: 24px; }

.murut ol { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; font-size: 0.9375rem; color: var(--himmea); }
.murut li { display: inline-flex; align-items: center; }
.murut li + li::before { content: "/"; padding: 0 8px; color: var(--viiva-2); }
.murut a { color: var(--himmea); display: inline-flex; align-items: center; min-height: 44px; }
.murut [aria-current] { color: var(--muste); font-weight: 600; }

/* ---------- Haku ---------- */
.haku { margin-top: 24px; max-width: 40rem; }
.haku__otsikko { display: block; font-weight: 700; color: var(--muste); margin-bottom: 8px; }
.haku__kentta, .suodatin__kentta { position: relative; display: flex; align-items: center; background: var(--pinta); border: 1px solid var(--kentta-reuna); border-radius: var(--sade); transition: border-color 150ms ease, box-shadow 150ms ease; }
.haku__kentta:focus-within, .suodatin__kentta:focus-within { border-color: var(--korostus); box-shadow: 0 0 0 3px rgb(10 79 102 / 0.18); }
.haku__ikoni { position: absolute; left: 14px; width: 20px; height: 20px; color: var(--himmea); pointer-events: none; }
.haku input, .suodatin input { flex: 1; min-width: 0; min-height: 52px; border: 0; background: transparent; padding: 0 12px 0 44px; color: var(--muste); font-size: 1.0625rem; border-radius: var(--sade); }
.haku input::placeholder, .suodatin input::placeholder { color: var(--himmea); opacity: 1; }
.haku input:focus-visible, .suodatin input:focus-visible { outline: none; }
.haku button { margin: 4px; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--sade-s); background: var(--korostus); color: #fff; font-weight: 700; font-stretch: 104%; cursor: pointer; transition: background-color 150ms ease, transform 160ms var(--ulos); }
.haku button:hover { background: var(--korostus-syva); }
.haku button:active { transform: scale(0.97); }
.haku--iso input { min-height: 56px; font-size: 1.125rem; }
.haku__tila { min-height: 1.5em; margin-top: 8px; font-size: 0.9375rem; color: var(--himmea); }

/* tumma: etusivun petroolipinnalla, kaksinkertainen reuna */
.haku--tumma .haku__otsikko { color: var(--tumma-teksti); }
.haku--tumma .haku__kentta { border: 0; box-shadow: 0 0 0 6px rgb(255 255 255 / 0.12), 0 18px 40px -18px rgb(0 0 0 / 0.55); }
.haku--tumma .haku__kentta:focus-within { box-shadow: 0 0 0 6px rgb(245 184 46 / 0.45), 0 18px 40px -18px rgb(0 0 0 / 0.55); }
.haku--tumma .haku__kentta { background: #fff; }
.haku--tumma input { color: #0B1C22; }
.haku--tumma input::placeholder { color: #55666E; }
.haku--tumma .haku__ikoni { color: #55666E; }
.haku--tumma button { background: var(--valo); color: #0B1C22; }
.haku--tumma button:hover { background: var(--valo-hover); }
.haku--tumma .haku__tila { color: var(--tumma-teksti); margin-top: 12px; }

.haku__tulokset { margin-top: 4px; background: var(--pinta); color: var(--teksti); border-radius: var(--sade-l); box-shadow: var(--varjo); padding: 8px; max-height: min(28rem, 70vh); overflow-y: auto; overscroll-behavior: contain; }
@media (prefers-reduced-motion: no-preference) {
  .haku__tulokset { transition: opacity 180ms var(--ulos), transform 180ms var(--ulos); }
  @starting-style { .haku__tulokset { opacity: 0; transform: translateY(-4px); } }
}
.tulokset__otsikko { font-size: 0.8125rem; font-weight: 700; color: var(--himmea); padding: 8px 12px 4px; }
.tulokset { list-style: none; margin: 0; padding: 0; }
.tulokset a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; min-height: 48px; padding: 10px 12px; border-radius: var(--sade-s); text-decoration: none; color: var(--muste); }
.tulokset a:hover, .tulokset a:focus-visible { background: var(--korostus-vaalea); }
.tulos__nimi { font-weight: 650; }
.tulos__tieto { font-size: 0.875rem; color: var(--himmea); }
.tulokset__tyhja { padding: 12px; color: var(--teksti); }

/* ---------- Etusivu ---------- */
.sankari {
  color: #fff;
  background-color: var(--korostus);
  position: relative;
  isolation: isolate;
  padding: 40px 0 56px;
}
/* Pistekuvio: verkoston solmut. Erillisellä kerroksella, jotta taustaväri pysyy yhtenäisenä. */
.sankari::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgb(255 255 255 / 0.075) 1px, transparent 1.6px); background-size: 22px 22px; }
.sankari__rivi { display: grid; gap: 40px; }
.sankari h1 { color: #fff; font-size: 2.375rem; margin-bottom: 16px; max-width: 16ch; }
.sankari .ingressi { color: var(--tumma-teksti); max-width: 34rem; }
@media (min-width: 60rem) {
  .sankari { padding: 72px 0 88px; }
  .sankari__rivi { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: 64px; align-items: start; }
  .sankari h1 { font-size: 3.125rem; max-width: none; }
}
.pikalinkit { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pikalinkit a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgb(255 255 255 / 0.32); border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600; font-size: 0.9375rem; transition: background-color 150ms ease, border-color 150ms ease; }
.pikalinkit a:hover { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.6); }

.hintapaneeli__sisa { background: var(--pinta); color: var(--teksti); border-radius: 20px; padding: 24px; box-shadow: 0 0 0 8px rgb(255 255 255 / 0.1), 0 24px 48px -24px rgb(0 0 0 / 0.5); }
.hintapaneeli h2 { font-size: 1.25rem; margin-bottom: 6px; }
.hintapaneeli ul { list-style: none; margin: 16px 0 12px; padding: 0; }
.hintapaneeli li + li { border-top: 1px solid var(--viiva); }
.hintarivi { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 0; text-decoration: none; color: var(--muste); }
.hintarivi__nimi { font-weight: 600; font-size: 0.9375rem; }
.hintarivi__hinta { font-weight: 760; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 1.0625rem; }
.hintarivi__alkaen { font-weight: 400; font-size: 0.8125rem; color: var(--himmea); margin-right: 2px; }
.hintarivi:hover .hintarivi__nimi { color: var(--linkki); text-decoration: underline; text-underline-offset: 0.18em; }

.nuolilinkki { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--linkki); text-decoration: none; }
.nuolilinkki .ikoni { transition: transform 200ms var(--ulos); }
.nuolilinkki:hover { text-decoration: underline; text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) { .nuolilinkki:hover .ikoni { transform: translateX(3px); } }

.osio { padding-top: 48px; }
.osio > h2 { margin-bottom: 8px; }
.osio > h2 + .meta { margin-bottom: 8px; }
@media (min-width: 48rem) { .osio { padding-top: 72px; } }
.jatko { margin-top: 16px; }
.jatko .nuolilinkki { display: inline; padding-block: 14px; line-height: 1.5; }
.jatko .nuolilinkki .ikoni { display: inline-block; vertical-align: -0.2em; margin-left: 4px; }

.yleisot { display: grid; gap: 16px; }
@media (min-width: 48rem) { .yleisot { grid-template-columns: 1fr 1fr; gap: 24px; } }
.yleiso { background: var(--pinta); border: 1px solid var(--viiva); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.yleiso--yritys { background: var(--korostus-vaalea); border-color: transparent; }
@media (min-width: 48rem) { .yleiso { padding: 32px; } }
.yleiso p { max-width: 36rem; }
.yleiso__linkit { list-style: none; margin: 0; padding: 0; }
.tulossa { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--viiva-2); font-size: 0.9375rem; color: var(--himmea); }
.tulossa__merkki { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 6px; background: var(--pohja); border: 1px solid var(--viiva-2); color: var(--muste); font-size: 0.8125rem; font-weight: 700; }

.lahteet { margin-top: 64px; background: var(--pinta-2); border-top: 1px solid var(--viiva); padding: 40px 0 48px; }
.lahteet h2 { font-size: 1.25rem; margin-bottom: 16px; }
.lahteet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 48rem) { .lahteet ul { grid-template-columns: 1fr 1fr; gap: 32px; } }
.lahteet li { max-width: 36rem; font-size: 0.9375rem; }
.lahteet strong { display: block; color: var(--muste); margin-bottom: 4px; font-size: 1rem; }

/* ---------- Opastaulu: paikkakunta, katkoviiva, luku ---------- */
.taulu-lista { list-style: none; margin: 8px 0 0; padding: 0; }
@media (min-width: 48rem) { .taulu-lista--kaksi { columns: 2; column-gap: 56px; } .taulu-lista--kaksi li { break-inside: avoid; } }
.taulu-rivi { display: flex; align-items: baseline; min-height: 48px; padding: 10px 0; text-decoration: none; color: var(--muste); }
.taulu-rivi__nimi { font-size: 1.125rem; font-weight: 650; font-stretch: 104%; }
.taulu-rivi__viiva { flex: 1; min-width: 24px; margin: 0 12px; border-bottom: 2px dotted var(--viiva-2); transform: translateY(-5px); }
.taulu-rivi__luku { font-weight: 760; font-variant-numeric: tabular-nums; color: var(--linkki); font-size: 1.0625rem; }
.taulu-rivi:hover .taulu-rivi__nimi { color: var(--linkki); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.taulu-rivi:hover .taulu-rivi__viiva { border-bottom-color: var(--linkki); }

/* Kaikki kaupungit A-Ö */
.hakemisto { columns: 2; column-gap: 24px; margin-top: 16px; }
@media (min-width: 40rem) { .hakemisto { columns: 3; } }
@media (min-width: 64rem) { .hakemisto { columns: 4; column-gap: 40px; } }
.hakemisto__ryhma { break-inside: avoid; margin-bottom: 20px; }
.hakemisto h3 { display: inline-block; font-size: 0.9375rem; font-weight: 800; font-stretch: 110%; color: var(--linkki); border-bottom: 2px solid var(--korostus); padding-bottom: 2px; margin-bottom: 4px; }
.hakemisto ul { list-style: none; margin: 0; padding: 0; }
.hakemisto a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; color: var(--muste); text-decoration: none; font-weight: 600; }
.hakemisto a:hover { color: var(--linkki); text-decoration: underline; }
.hakemisto__luku { color: var(--himmea); font-weight: 500; font-size: 0.875rem; font-variant-numeric: tabular-nums; }

/* ---------- Yrityslistat ---------- */
.osio--lista { padding-top: 24px; }
.tyokalut { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.suodatin { max-width: 32rem; }
.suodatin label { display: block; font-weight: 700; color: var(--muste); margin-bottom: 6px; font-size: 0.9375rem; }
.suodatin__tila { margin-top: 6px; font-size: 0.875rem; color: var(--himmea); font-variant-numeric: tabular-nums; }
.suodatin__tyhja { margin-top: 16px; padding: 16px; background: var(--pinta); border: 1px dashed var(--viiva-2); border-radius: var(--sade); }

.kirjaimet { position: sticky; top: 0; z-index: 5; margin: 0 calc(var(--reuna) * -1); padding: 8px var(--reuna); background: color-mix(in srgb, var(--pohja) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--viiva); }
.kirjaimet ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.kirjaimet ul::-webkit-scrollbar { display: none; }
.kirjaimet a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: var(--sade-s); font-weight: 750; font-stretch: 108%; color: var(--muste); text-decoration: none; background: var(--pinta); border: 1px solid var(--viiva); transition: background-color 150ms ease, border-color 150ms ease; }
.kirjaimet a:hover { border-color: var(--korostus); color: var(--linkki); }
.kirjainryhma, .kunta, .firma, .kurssiosio { scroll-margin-top: 72px; }
.kirjainryhma { margin-top: 28px; }
.kirjainryhma__otsikko { font-size: 1.75rem; font-weight: 800; font-stretch: 116%; color: var(--linkki); line-height: 1; margin-bottom: 12px; }

.firmat { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 40rem) { .firmat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .firmat { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.firma { background: var(--pinta); border: 1px solid var(--viiva); border-radius: var(--sade); padding: 12px 16px 4px; min-width: 0; transition: border-color 150ms ease, background-color 150ms ease; }
.firma:target { border-color: var(--korostus); background: var(--korostus-vaalea); box-shadow: 0 0 0 2px var(--korostus); }
.firma__nimi { display: block; color: var(--muste); font-weight: 650; font-size: 1.0625rem; line-height: 1.3; overflow-wrap: anywhere; }
.firma__tiedot { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; font-size: 0.875rem; color: var(--himmea); font-variant-numeric: tabular-nums; }
.firma__muoto { font-weight: 600; color: var(--teksti); }
.firma__tiedot a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--himmea); text-decoration-color: var(--viiva-2); }
.firma__tiedot a:hover { color: var(--linkki); text-decoration-color: currentColor; }
.firma__tiedot .firma__sivu { color: var(--linkki); font-weight: 600; min-width: 0; }
.firma__sivu span { overflow-wrap: anywhere; }

.kuntahypyt ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kuntahypyt a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--viiva); background: var(--pinta); border-radius: 999px; color: var(--muste); text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
.kuntahypyt a span { color: var(--himmea); font-weight: 500; font-variant-numeric: tabular-nums; }
.kuntahypyt a:hover { border-color: var(--korostus); }
.kunta { margin-top: 32px; }
.kunta h3 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; font-size: 1.25rem; }
.kunta__luku { color: var(--himmea); font-weight: 500; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }

/* ---------- Koulutus ja tietolaatikko ---------- */
.koulutus { margin-top: 48px; }
.koulutus p { max-width: 44rem; padding: 20px 24px; background: var(--pinta); border: 1px solid var(--viiva); border-radius: var(--sade-l); }
.tieto { margin-top: 24px; display: grid; gap: 0; }
.tieto__osa { background: var(--korostus-vaalea); padding: 24px; }
.tieto__osa:first-child { border-radius: var(--sade-l) var(--sade-l) 0 0; }
.tieto__osa:last-child { border-radius: 0 0 var(--sade-l) var(--sade-l); border-top: 1px solid color-mix(in srgb, var(--korostus) 18%, transparent); }
.tieto h2 { font-size: 1.125rem; margin-bottom: 8px; }
.tieto p { font-size: 0.9375rem; max-width: 40rem; }
@media (min-width: 48rem) {
  .tieto { grid-template-columns: 1fr 1fr; }
  .tieto__osa { padding: 28px 32px; }
  .tieto__osa:first-child { border-radius: var(--sade-l) 0 0 var(--sade-l); }
  .tieto__osa:last-child { border-radius: 0 var(--sade-l) var(--sade-l) 0; border-top: 0; border-left: 1px solid color-mix(in srgb, var(--korostus) 18%, transparent); }
}

/* ---------- Hintavertailu ---------- */
.kurssivalikko ul { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kurssivalikko a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--viiva-2); border-radius: 999px; background: var(--pinta); color: var(--muste); text-decoration: none; font-weight: 600; font-size: 0.9375rem; transition: border-color 150ms ease, background-color 150ms ease; }
.kurssivalikko a:hover { border-color: var(--korostus); background: var(--korostus-vaalea); }
.kurssiosio { margin-top: 48px; }
.kurssiosio__paa { margin-bottom: 16px; display: grid; gap: 6px; }
.kurssiosio__paa p:not(.meta) { max-width: 40rem; }
.taulukehys { background: var(--pinta); border: 1px solid var(--viiva); border-radius: var(--sade-l); overflow: hidden; }
.hintataulu { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.hintataulu thead th { background: var(--pinta-2); color: var(--himmea); font-size: 0.8125rem; font-weight: 650; text-align: left; padding: 12px 16px; white-space: nowrap; }
.hintataulu tbody th, .hintataulu td { text-align: left; vertical-align: top; padding: 16px; border-top: 1px solid var(--viiva); font-weight: 400; }
.kouluttaja { display: block; font-weight: 680; color: var(--muste); font-size: 1.0625rem; }
.kurssi { display: block; font-size: 0.875rem; color: var(--himmea); margin-top: 2px; }
.hinta__luku { display: block; font-size: 1.25rem; font-weight: 760; color: var(--muste); font-variant-numeric: tabular-nums; white-space: nowrap; }
.merkki { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 6px; background: var(--valo); color: #0B1C22; font-size: 0.8125rem; font-weight: 750; }
.hintataulu tr.halvin > * { background: var(--korostus-vaalea); }
.ei-hintaa .hinta__luku { font-size: 0.9375rem; font-weight: 500; color: var(--himmea); white-space: normal; }
.hintataulu td a { display: inline-flex; align-items: center; min-height: 44px; }
.lahde { display: flex; flex-direction: column; align-items: flex-start; }
.lahde a { white-space: nowrap; }
.lahde .meta { font-size: 0.8125rem; margin-top: -8px; white-space: nowrap; }

@media (max-width: 47.99rem) {
  .hintataulu thead { display: none; }
  .hintataulu, .hintataulu tbody, .hintataulu tr, .hintataulu th, .hintataulu td { display: block; width: 100%; }
  .hintataulu tr { padding: 16px; border-top: 1px solid var(--viiva); }
  .hintataulu tbody tr:first-child { border-top: 0; }
  .hintataulu tbody th, .hintataulu td { border: 0; padding: 0; }
  .hintataulu tbody th { padding-bottom: 8px; }
  .hintataulu td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 8px; padding: 4px 0; }
  .hintataulu td::before { content: attr(data-otsikko); color: var(--himmea); font-size: 0.8125rem; padding-top: 2px; }
  .hintataulu td.hinta { align-items: baseline; }
  .hintataulu td.hinta .merkki { grid-column: 2; justify-self: start; margin-top: 0; }
  .hintataulu tr.halvin { background: var(--korostus-vaalea); }
  .hintataulu td a { min-height: 32px; }
}

/* ---------- Alatunniste ---------- */
.alatunniste { margin-top: 72px; border-top: 0; padding: 40px 0 48px; background: var(--korostus-syva); color: var(--tumma-teksti); font-size: 0.9375rem; }
.alatunniste__rivi { display: grid; gap: 24px; }
@media (min-width: 48rem) { .alatunniste__rivi { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.alatunniste__merkki { color: #fff; font-weight: 800; font-stretch: 116%; font-size: 1.125rem; margin-bottom: 4px; }
.alatunniste nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.alatunniste nav a { color: #fff; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.alatunniste__pieni { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / 0.14); font-size: 0.875rem; }
main:has(> .lahteet:last-child) + .alatunniste { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Painikkeet ja rekisteröityminen (3.11.2026) ---------- */
.painike { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border: 2px solid var(--korostus); border-radius: var(--sade); background: var(--korostus); color: #fff; font: inherit; font-size: 1.0625rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color 150ms ease, transform 160ms var(--ulos); }
.painike:hover { background: var(--korostus-syva); border-color: var(--korostus-syva); }
.painike:active { transform: scale(0.97); }
.painike:disabled { opacity: 0.6; cursor: wait; }
.painike--toinen { background: transparent; color: var(--linkki); border-color: var(--linkki); }
.painike--toinen:hover { background: var(--korostus-vaalea); border-color: var(--linkki); }
.painike .ikoni { width: 1.1em; height: 1.1em; }
@media (prefers-color-scheme: dark) {
  .painike:not(.painike--toinen) { background: #0E6684; border-color: #0E6684; }
  .painike:not(.painike--toinen):hover { background: #12789B; border-color: #12789B; }
}
.yleiso .painike { margin-top: 18px; }
.yleiso__tekstit { display: grid; gap: 10px; }

.valinta-kortit { display: grid; gap: 16px; margin-top: 8px; }
@media (min-width: 48rem) { .valinta-kortit { grid-template-columns: 1fr 1fr; } }
.valinta-kortti { background: var(--pinta); border: 1px solid var(--viiva); border-radius: var(--sade-l); padding: 24px; display: grid; gap: 10px; align-content: start; }
.valinta-kortti h2 { font-size: 1.375rem; }
.valinta-kortti .painike { justify-self: start; margin-top: 8px; }

.lomakesivu { padding-top: 28px; }
.lomake { max-width: 40rem; display: grid; gap: 22px; }
.kentta { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.kentta > label, .kentta > legend { font-weight: 700; color: var(--muste); padding: 0; }
.kentta__lisa { font-weight: 400; color: var(--himmea); font-size: 0.9375rem; margin-left: 4px; }
.kentta__vihje { color: var(--himmea); font-size: 0.9375rem; max-width: 36rem; }
.kentta input[type=text], .kentta input[type=tel], .kentta input[type=email] { width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--kentta-reuna); border-radius: var(--sade); background: var(--pinta); color: var(--muste); font: inherit; font-size: 1.0625rem; transition: border-color 150ms ease, box-shadow 150ms ease; }
.kentta input[type=text]:focus-visible, .kentta input[type=tel]:focus-visible, .kentta input[type=email]:focus-visible { outline: none; border-color: var(--korostus); box-shadow: 0 0 0 3px rgb(10 79 102 / 0.22); }
@media (prefers-color-scheme: dark) {
  .kentta input[type=text]:focus-visible, .kentta input[type=tel]:focus-visible, .kentta input[type=email]:focus-visible { border-color: var(--linkki); box-shadow: 0 0 0 3px rgb(124 200 222 / 0.28); }
}
.kentta input[aria-invalid=true] { border-color: var(--virhe); border-width: 2px; }
.kentta__virhe { color: var(--virhe); font-size: 0.9375rem; font-weight: 600; }
.kentta__virhe::before { content: "! "; font-weight: 800; }
:root { --virhe: #B3261E; --ok: #17693A; --ok-tausta: #E7F3EB; --virhe-tausta: #FBEAE8; }
@media (prefers-color-scheme: dark) { :root { --virhe: #FF9C93; --ok: #7BD6A0; --ok-tausta: #12281D; --virhe-tausta: #33181A; } }

.valinnat { display: flex; flex-wrap: wrap; gap: 10px; }
.valinta { position: relative; flex: 1 1 8rem; }
.valinta input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.valinta span { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 16px; border: 1px solid var(--kentta-reuna); border-radius: var(--sade); background: var(--pinta); color: var(--muste); font-weight: 600; text-align: center; transition: background-color 150ms ease, border-color 150ms ease; }
.valinta input:checked + span { background: var(--korostus-vaalea); border: 2px solid var(--korostus); color: var(--muste); }
.valinta input:focus-visible + span { outline: 3px solid var(--linkki); outline-offset: 2px; }
.valinta input[aria-invalid=true] + span { border-color: var(--virhe); }
@media (prefers-color-scheme: dark) { .valinta input:checked + span { border-color: var(--linkki); } }

.ruksi { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; cursor: pointer; padding: 14px; border: 1px solid var(--viiva-2); border-radius: var(--sade); background: var(--pinta); }
.ruksi input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--korostus); }
.ruksi input[aria-invalid=true] { outline: 2px solid var(--virhe); outline-offset: 2px; }
.ruksi > span { font-size: 1rem; color: var(--teksti); }
.ruksi > span small { display: block; margin-top: 4px; font-size: 0.9375rem; color: var(--himmea); }
.ruksi:has(input:checked) { border-color: var(--korostus); background: var(--korostus-vaalea); }
@media (prefers-color-scheme: dark) { .ruksi { accent-color: #7CC8DE; } .ruksi input { accent-color: #7CC8DE; } }

.kierto { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.lomake__alla { display: grid; gap: 12px; justify-items: start; }
.lomake__alla .painike { width: 100%; }
@media (min-width: 40rem) { .lomake__alla .painike { width: auto; min-width: 16rem; } }
.lomake__pieni { color: var(--himmea); font-size: 0.9375rem; max-width: 36rem; }

.ilmoitus { max-width: 40rem; padding: 14px 16px; border-radius: var(--sade); border: 1px solid var(--viiva-2); background: var(--korostus-vaalea); color: var(--muste); margin-bottom: 22px; }
.ilmoitus strong { display: block; }
.tulos { max-width: 40rem; margin-top: 18px; padding: 16px 18px; border-radius: var(--sade); border: 2px solid var(--viiva-2); color: var(--muste); display: grid; gap: 4px; }
.tulos:focus { outline: 3px solid var(--linkki); outline-offset: 2px; }
.tulos--ok { background: var(--ok-tausta); border-color: var(--ok); }
.tulos--virhe { background: var(--virhe-tausta); border-color: var(--virhe); }
.tulos--info { background: var(--korostus-vaalea); border-color: var(--korostus); }

.teksti-sivu { max-width: 44rem; padding-top: 28px; display: grid; gap: 12px; }
.teksti-sivu h2 { margin-top: 20px; font-size: 1.375rem; }
.teksti-sivu ul { margin: 0; padding-left: 1.25rem; display: grid; gap: 6px; }
.teksti-sivu table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
.teksti-sivu th, .teksti-sivu td { text-align: left; vertical-align: top; padding: 10px 12px; border-top: 1px solid var(--viiva); }
.teksti-sivu thead th { background: var(--pinta-2); color: var(--himmea); font-size: 0.8125rem; }
.teksti-sivu .taulukehys { overflow-x: auto; }
.alatunniste__pieni a { color: #fff; }
.yleiso .painike { align-self: flex-start; }
.valinta { flex: 1 1 6rem; }

/* Hakemuksen liite (3.11.2026) */
.kentta input[type=file] { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--kentta-reuna); border-radius: var(--sade); background: var(--pinta); color: var(--teksti); font: inherit; font-size: 1rem; }
.kentta input[type=file]::file-selector-button { margin-right: 12px; min-height: 36px; padding: 0 14px; border: 1px solid var(--kentta-reuna); border-radius: 8px; background: var(--pinta-2); color: var(--muste); font: inherit; font-weight: 600; cursor: pointer; }
.kentta input[type=file]:focus-visible { outline: none; border-color: var(--korostus); box-shadow: 0 0 0 3px rgb(10 79 102 / 0.22); }
.kentta input[type=file][aria-invalid=true] { border-color: var(--virhe); border-width: 2px; }
@media (prefers-color-scheme: dark) { .kentta input[type=file]:focus-visible { border-color: var(--linkki); box-shadow: 0 0 0 3px rgb(124 200 222 / 0.28); } }