/* ============================================================
   styles.css — AjoWeppi Valmentaja · tumma SaaS-sovellus

   KAKSI PINTAA, sama paletti:
   · MARKKINOINTI (kirjautuminen, tilaus) — aurora + rae, elokuvamainen.
     Siellä tunnelma myy.
   · SOVELLUS (Tänään/Ajokerrat/Edistyminen/Oma) — tasainen tumma pinta,
     ei liikkuvaa gradienttia. Data erottuu ja näkymä tuntuu työkalulta.
   Vaihto tapahtuu body-luokalla .aura-on (ks. app.js).
   ============================================================ */

:root {
  --bg:         #17110D;
  --bg2:        #1F1813;
  --card:       #221A14;
  --card-2:     #2A2019;
  --cream:      #F7F0E8;
  --mut:        #D3C9BC;   /* nostettu #B7AB9C:sta — teksti oli liian haalea */
  --faint:      #A99E90;   /* nostettu #8B8073:sta */
  --orange:     #F26322;
  --orange-lt:  #FF9455;
  --line:       rgba(247,240,232,.10);
  --line-2:     rgba(247,240,232,.16);

  --red:        #FF5A5F;
  --amber:      #FFB020;
  --green:      #3ED598;

  --radius:     18px;
  --radius-sm:  12px;
  --ease:       cubic-bezier(.22,.68,.32,1);

  --nav-w:      232px;
  --tabbar-h:   76px;   /* nostettu 64 -> 76 (Henri 3.9.): 64 oli laskettu taydeksi pikselilleen */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 18px;      /* SITOVA: ks. muisti henri-ui-iso-fontti */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100dvh;
}
button { font-family: inherit; color: inherit; }

/* ---------- Aurora: VAIN markkinointipinnoilla ---------- */
.aura, .grain { display: none; }
body.aura-on .aura, body.aura-on .grain { display: block; }

.aura { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aura::before, .aura::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
}
.aura::before {
  width: 60vw; height: 60vw; left: -12vw; top: -18vw;
  background: radial-gradient(circle, rgba(242,99,34,.32), transparent 68%);
  animation: drift1 24s var(--ease) infinite alternate;
}
.aura::after {
  width: 52vw; height: 52vw; right: -14vw; top: 30vh;
  background: radial-gradient(circle, rgba(255,148,85,.16), transparent 66%);
  animation: drift2 28s var(--ease) infinite alternate;
}
@keyframes drift1 { to { transform: translate(6vw, 8vh) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-6vw, -6vh) scale(1.15); } }
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  .aura::before, .aura::after { animation: none; }
}

/* ---------- Typografia ---------- */
h1, h2, h3 { margin: 0; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; }
h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); }
h2 { font-size: clamp(1.25rem, 2.6vw, 1.55rem); }
h3 { font-size: 18px; letter-spacing: -.015em; }
p  { margin: 0; }

.eyebrow {
  font-size: 16px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange-lt); margin-bottom: 14px;
}
.lead { font-size: clamp(1rem, 2vw, 1.14rem); font-weight: 600; color: var(--mut); line-height: 1.55; }
.fine { font-size: 16.5px; color: var(--faint); font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   SOVELLUSKUORI
   ════════════════════════════════════════════════════════════ */
.shell {
  position: relative; z-index: 5;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--nav-w) 1fr;
}

/* ---------- Sivupalkki (työpöytä) ---------- */
.sidenav {
  border-right: 1px solid var(--line);
  background: var(--bg2);
  padding: 20px 14px;
  position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column; gap: 26px;
}
.sidenav__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 900; font-size: 18px; letter-spacing: -.02em; padding: 4px 8px;
}
.sidenav__brand .mk {
  width: 30px; height: 30px; border-radius: 9px; background: var(--orange);
  color: #fff; display: grid; place-items: center; font-size: 16px; flex: none;
}
.sidenav__brand b { color: var(--orange-lt); }
.sidenav__nav { display: flex; flex-direction: column; gap: 4px; }

.navitem {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 12px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--mut); font-size: 17.5px; font-weight: 700;
  cursor: pointer; text-align: left;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.navitem:hover { background: rgba(247,240,232,.05); color: var(--cream); }
.navitem.on { background: rgba(242,99,34,.14); color: var(--cream); }
.navitem.on .navitem__i { color: var(--orange-lt); }
/* Vielä avautumaton kohta: hillitty, lukko perässä. Ei maksumuuri vaan opastus —
   tämä aukeaa tekemällä. Fonttikoko pysyy samana, vain väri kertoo tilan. */
.navitem--lukossa { color: var(--faint); cursor: default; }
.navitem--lukossa:hover { background: rgba(247,240,232,.03); color: var(--faint); }
.navitem--lukossa .navitem__i { color: rgba(247,240,232,.22); }
.navitem__lock { margin-left: auto; width: 17px; height: 17px; flex: none; color: var(--faint); }
.navitem__lock svg { width: 100%; height: 100%; display: block; }
.navitem--torjuu { animation: navTorju .4s var(--ease); }
@keyframes navTorju { 0%,100% { transform: translateX(0); } 30% { transform: translateX(4px); } 65% { transform: translateX(-3px); } }
/* Vihje elää bodyssa, ei navin sisällä — muuten se levisi seuraavien kohtien
   päälle. Leveys riittää yhdelle lauseelle ilman että se murtuu neljälle riville. */
.navvihje {
  position: fixed; z-index: 190; width: max-content; max-width: min(300px, 76vw);
  padding: 12px 15px; border-radius: 12px;
  background: #2A1B14; border: 1px solid rgba(255,148,85,.34);
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
  font-size: 16px; font-weight: 700; color: var(--cream); line-height: 1.4;
  text-align: left; pointer-events: none; user-select: none;
}
.navvihje--oikea { animation: navVihjeOikea .22s var(--ease); }
.navvihje--yla   { animation: navVihjeYla .22s var(--ease); }
@keyframes navVihjeOikea { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes navVihjeYla   { from { opacity: 0; transform: translateY(6px); }  to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .navitem--torjuu { animation: none; }
  .navvihje--oikea, .navvihje--yla { animation: none; }
}
/* Napautus ei saa maalata navin tekstiä siniseksi. */
.navitem { position: relative; user-select: none; -webkit-user-select: none; }
.navitem__i { width: 20px; height: 20px; flex: none; color: var(--faint); }
.navitem__i svg { width: 100%; height: 100%; display: block; }
.navitem__dot {
  margin-left: auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange); flex: none;
}

/* ---------- Yläpalkki ---------- */
.shell__main { min-width: 0; display: flex; flex-direction: column; }
.apptop {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 26px;
  background: rgba(23,17,13,.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.apptop__ctx { flex: 1; min-width: 0; }
.apptop__title { font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.apptop__sub { font-size: 16px; color: var(--faint); font-weight: 600; }

.tierchip {
  border-radius: 999px; padding: 6px 13px; font-size: 16px; font-weight: 800;
  letter-spacing: .04em; white-space: nowrap; border: 1px solid var(--line-2);
  background: rgba(247,240,232,.05); color: var(--mut);
}
.tierchip--pro { background: rgba(62,213,152,.14); border-color: rgba(62,213,152,.32); color: var(--green); }

/* Palautenappi. Pilotissa tämä on ainoa reitti käyttäjältä meille, joten se on
   näkyvissä joka näkymässä eikä piilossa Oma-sivun pohjalla. Kapealla ruudulla
   teksti jää pois ja jäljelle jää puhekupla — otsikkopalkissa on kolme muuta
   asiaa eikä nappi saa työntää oppilaan nimeä pois näkyvistä. */
.palautechip {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  border-radius: 999px; padding: 8px 15px; font-size: 16px; font-weight: 800;
  border: 1px solid var(--line-2); background: rgba(247,240,232,.05);
  color: var(--mut); cursor: pointer; font-family: inherit;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.palautechip svg { width: 18px; height: 18px; flex: none; }
.palautechip:hover { border-color: rgba(255,148,85,.5); color: var(--cream); background: rgba(242,99,34,.1); }
.palautechip:focus-visible { outline: 2px solid var(--orange-lt); outline-offset: 2px; }
@media (max-width: 560px) { .palautechip span { display: none; } .palautechip { padding: 8px 10px; } }

/* Palautelomake. Sama .varoitus-kehys kuin muillakin dialogeilla. */
.palaute__ala { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 6px;
  border-radius: var(--radius-sm); border: 1.5px solid var(--line-2);
  background: rgba(0,0,0,.22); color: var(--cream);
  font-family: inherit; font-size: 18px; line-height: 1.55; font-weight: 600;
  padding: 14px 16px; min-height: 148px; resize: vertical; }
.palaute__ala:focus { outline: none; border-color: var(--orange-lt); }
.palaute__ala::placeholder { color: var(--faint); font-weight: 600; }

/* 1180 px jätti isolla näytöllä oikean reunan tyhjäksi. Henrin sääntö:
   käytä leveyttä, vain lomake saa olla kapea. Sisältö on ruudukoita ja
   kortteja eikä yhtä tekstipalstaa, joten leveys menee käyttöön. */
.appbody { padding: 26px; max-width: 1500px; width: 100%; }
/* Animaatio elää .on-tilalla (ei base-luokalla): nodet uusiokäytetään, joten
   showApp/showFlow "replay"-nostaa sen force-reflowilla joka vaihdolla. */
.view { display: none; }
.view.on { display: block; animation: rise .34s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Sisällön porrastettu paljastuminen — ruutu "kokoaa itsensä". */
.view.on > * { animation: rise .5s var(--ease) both; }
/* 🔴 OSITTAIN VAIHDETTU SOLMU EI NOUSE.

   Nousuanimaatio on NÄKYMÄN VAIHTOA varten: ruutu kokoaa itsensä. Kun
   käyttäjä napauttaa suodatinta, vain osa sivusta rakennetaan uusiksi —
   mutta jos se osa sattuu olemaan näkymän suora lapsi, animaatio ajetaan
   sille uudestaan ja koko sivu näyttää välähtävän.

   vaihdaOsat() merkitsee jokaisen sijoittamansa solmun tällä luokalla.
   Näkymän avaus piirtää kaiken uusiksi ilman luokkaa, joten sisääntulon
   animaatio säilyy ennallaan. */
.view.on > .ei-nousua { animation: none !important; }
.view.on > *:nth-child(1) { animation-delay: .04s; }
.view.on > *:nth-child(2) { animation-delay: .10s; }
.view.on > *:nth-child(3) { animation-delay: .16s; }
.view.on > *:nth-child(4) { animation-delay: .22s; }
.view.on > *:nth-child(n+5) { animation-delay: .26s; }

/* ---------- Alapalkki (puhelin) ---------- */
.tabbar { display: none; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidenav { display: none; }
  .apptop { padding: 14px 18px; }
  .appbody { padding: 18px 16px calc(var(--tabbar-h) + 28px); }

  /* 64 px oli laskettu pikselilleen taydeksi: ikoni 22 + vali 3 + teksti 16
     + tayte 16 = 61 px. Mikaan ei hengittanyt, ja alapalkki luki "pienelta"
     vaikka fontti on saannon mukainen 16 px (Henri 3.9., mobiilitesti).
     Korkeus 76 px antaa tekstille rivivalin eika vaadi fontin kasvattamista. */
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(31,24,19,.96);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
  }
  .navitem {
    flex-direction: column; gap: 5px; justify-content: center;
    border-radius: 0; padding: 10px 2px; font-size: 16px; font-weight: 800;
    letter-spacing: .01em; line-height: 1.15;
  }
  /* Valittu kohta erottui VAIN varista, eika sen huomannut vilkaisulla.
     Nyt sen paalla on oranssi viiva ja ikoni saa oman taustansa: kaksi
     merkkia yhden sijaan kertoo missa ollaan ilman etta mitaan levenee. */
  .navitem.on { background: none; color: var(--orange-lt); }
  .navitem.on::before {
    content: ''; position: absolute; top: 0; left: 22%; right: 22%;
    height: 3px; border-radius: 0 0 3px 3px; background: var(--orange);
  }
  .navitem.on .navitem__i {
    background: rgba(242,99,34,.16); border-radius: 10px;
    padding: 4px; margin: -4px 0;
  }
  .navitem:hover { background: none; }
  .navitem__i { width: 22px; height: 22px; }
  .navitem__dot { position: absolute; margin: 0; transform: translate(14px, -12px); }
  .tabbar .navitem { position: relative; }
}

/* ════════════════════════════════════════════════════════════
   KORTIT JA SISÄLTÖ
   ════════════════════════════════════════════════════════════ */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.card + .card { margin-top: 16px; }
.card__label {
  font-size: 16px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 10px;
}

.sectionhead { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; }
.sectionhead h2 { flex: 1; min-width: 0; }

/* ---------- Mittariruudut ---------- */
.tiles {
  display: grid; gap: 12px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.tile {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 15px 16px;
}
.tile__v {
  font-size: 2rem; font-weight: 900; letter-spacing: -.04em; line-height: 1.05;
}
.tile__v span { font-size: 17px; font-weight: 700; color: var(--faint); letter-spacing: 0; }
.tile__l {
  font-size: 16px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--faint); margin-top: 5px;
  /* Mitattu 390 px:n ruudulla 17.9.2026: "ENSIMMÄINEN AJOKERTA" vaatii 140 px
     ja ruutu antaa 135. Kirjainväli on se mikä joustaa — fonttikokoa ei
     pienennetä (sitova sääntö: mikään teksti ei alle 16 px). */
  overflow-wrap: anywhere;
}
@media (max-width: 420px) { .tile__l { letter-spacing: .05em; } }
.tile--accent .tile__v { color: var(--orange-lt); }

/* ---------- Avattava lisätieto ---------- */
details.more { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 4px; }
details.more > summary {
  list-style: none; cursor: pointer; padding: 12px 0 4px;
  font-size: 16.5px; font-weight: 800; color: var(--orange-lt);
  display: flex; align-items: center; gap: 8px;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before {
  content: "›"; display: inline-block; font-size: 19px; line-height: 1;
  transition: transform .2s var(--ease);
}
details.more[open] > summary::before { transform: rotate(90deg); }
details.more > summary:hover { color: var(--cream); }
.more__body { padding: 6px 0 10px; }
.more__body p { font-size: 17.5px; font-weight: 600; color: var(--mut); line-height: 1.6; }
.more__body p + p { margin-top: 12px; }
.more__h {
  font-size: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin: 16px 0 7px;
}
.more__body > .more__h:first-child { margin-top: 4px; }

.quote {
  background: rgba(242,99,34,.10);
  border: 1px solid rgba(255,148,85,.22);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-top: 14px;
}
.quote small {
  display: block; color: var(--orange-lt); font-weight: 800; font-size: 16px;
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: .13em;
}
.quote p { font-size: 17.5px; font-weight: 700; line-height: 1.5; }

/* ---------- Ensisijainen toiminto ---------- */
.cta-row { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) { .cta-row .btn { width: 100%; } }

/* Puhelimessa pääteko kiinnitetään näkyviin alapalkin yläpuolelle.
   Ilman tätä "Aloita ajokerta" jää tavoitekortin alle fold-rajan taakse —
   ja juuri sitä nappia tarvitaan heti kun auto on pysähtynyt. */
@media (max-width: 860px) {
  .cta-sticky {
    position: fixed; left: 0; right: 0; z-index: 35;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    margin: 0; padding: 26px 16px 14px;
    /* Umpinainen napin takana, pehmeä häivytys vain yläreunassa — muuten
       alla vierivä teksti näkyy napin läpi ja katkeaa kesken sanan. */
    background: linear-gradient(to top, var(--bg) 0, var(--bg) 76%, rgba(23,17,13,0) 100%);
  }
  .cta-sticky .btn { width: 100%; }
  /* tilaa sekä alapalkille että kiinnitetylle napille */
  .appbody { padding-bottom: calc(var(--tabbar-h) + 96px); }
}

/* ---------- Ajokerrat ---------- */
.lessonlist { display: grid; gap: 10px; }
.lessonrow {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 15px;
}
.lessonrow__n {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-weight: 900; font-size: 16.5px;
  background: rgba(242,99,34,.14); color: var(--orange-lt);
}
.lessonrow__b { flex: 1; min-width: 0; }
.lessonrow__b b { display: block; font-weight: 800; font-size: 17.5px; }
.lessonrow__b span { color: var(--faint); font-size: 16px; font-weight: 600; }
.lessonrow__h { font-weight: 800; color: var(--mut); font-size: 16.5px; white-space: nowrap; }
/* Napautettava ajokerta: avaa tunnin tarkastelun. */
.lessonrow--tap {
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.lessonrow--tap:hover { border-color: var(--orange); background: rgba(242,99,34,.05); }
.lessonrow__ar { flex: none; font-size: 24px; font-weight: 700; color: var(--faint); line-height: 1; }

/* ── Ajokerran tarkastelu ── */
.lesson-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.lesson-meta span {
  font-size: 16px; font-weight: 700; color: var(--mut);
  padding: 5px 12px; border-radius: 999px; background: rgba(247,240,232,.05); border: 1px solid var(--line);
}
.lcard {
  text-align: left; padding: 20px; border-radius: 16px; margin-top: 14px;
  background: rgba(247,240,232,.04); border: 1px solid var(--line);
}
.lcard--report { background: rgba(242,99,34,.07); border-color: rgba(242,99,34,.34); }
.lcard__k {
  font-size: 16px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--orange-lt); margin-bottom: 12px;
}
.lcard__txt { font-size: 18px; font-weight: 600; line-height: 1.55; color: var(--cream); }
.lgroup { margin-top: 16px; }
.lgroup:first-child { margin-top: 0; }
.lgroup__h {
  font-size: 16px; font-weight: 800; color: var(--faint);
  letter-spacing: .03em; margin-bottom: 9px;
}
.lchips { display: flex; flex-wrap: wrap; gap: 9px; }
.lchip {
  font-size: 16.5px; font-weight: 700; color: var(--cream);
  padding: 8px 14px; border-radius: 999px;
  background: rgba(247,240,232,.06); border: 1px solid var(--line-2);
}
.lchip--ok { background: rgba(62,213,152,.14); border-color: rgba(62,213,152,.4); color: #7ee0b4; }
.lchip--hard { background: rgba(232,168,80,.14); border-color: rgba(232,168,80,.4); color: #e8a850; }
/* Ajokokeen käytännöt: lukossa kunnes riskikoulutus on merkitty. */
.koeinfo { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.koeinfo__k {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 800; margin-bottom: 10px;
}
.koeinfo__k svg { width: 17px; height: 17px; flex: none; }
.koeinfo p { font-size: 17px; line-height: 1.5; color: var(--mut); margin: 0 0 12px; }
.koeinfo--lukossa .koeinfo__k { color: var(--mut); }
.koelink { display: block; text-align: left; font-size: 17px; padding: 6px 0; }

.lchip--vaikea { background: rgba(255,90,95,.14); border-color: rgba(255,90,95,.42); color: #ff8b8f; }
.lkey { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.lkey .lchip { font-size: 16px; opacity: .85; }

/* Tallessa-laskuri: kasvava, ei kutistuva */
.vault {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(242,99,34,.13), rgba(255,148,85,.03));
  border: 1px solid rgba(255,148,85,.26);
  border-radius: var(--radius-sm); padding: 16px 18px; margin-top: 12px;
}
.vault__n { font-weight: 900; font-size: 2.3rem; line-height: 1; letter-spacing: -.04em; color: var(--orange-lt); }
.vault__t { flex: 1; min-width: 190px; }
.vault__t b { display: block; font-weight: 800; font-size: 17.5px; }
.vault__t span { color: var(--mut); font-size: 16.5px; font-weight: 600; }

/* ---------- Edistyminen ---------- */
.meters { display: grid; gap: 14px; }
.meter__top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.meter__name { font-weight: 800; font-size: 17.5px; flex: 1; min-width: 0; }
.meter__trend { font-size: 16.5px; font-weight: 800; }
.meter__trend.up { color: var(--green); }
.meter__trend.flat { color: var(--faint); }
.meter__trend.down { color: var(--amber); }
.meter__track { height: 8px; border-radius: 99px; background: rgba(247,240,232,.07); overflow: hidden; }
.meter__fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--orange), var(--orange-lt));
  transition: width .6s var(--ease);
}

.rank { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 13px; }
.rank:last-child { margin-bottom: 0; }
.rank__n {
  width: 24px; height: 24px; border-radius: 7px; flex: none; margin-top: 1px;
  display: grid; place-items: center; font-weight: 900; font-size: 16px;
  background: rgba(62,213,152,.16); color: var(--green);
}
.rank--focus .rank__n { background: rgba(255,148,85,.16); color: var(--orange-lt); }
.rank__t b { display: block; font-weight: 800; font-size: 17.5px; margin-bottom: 2px; }
.rank__t span { color: var(--mut); font-size: 16.5px; font-weight: 600; line-height: 1.5; }
.rank__t i { color: var(--faint); font-style: normal; }

/* ---------- Tyhjä tila ---------- */
.empty {
  text-align: center; padding: 44px 22px;
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  color: var(--faint);
}
.empty b { display: block; color: var(--mut); font-weight: 800; margin-bottom: 6px; font-size: 17.5px; }

/* ---------- Oma ---------- */
.rowlist { display: grid; }
.rowitem {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 17.5px;
}
.rowitem:last-child { border-bottom: 0; }
.rowitem__k { color: var(--faint); font-weight: 700; flex: 1; }
.rowitem__v { font-weight: 800; }

/* ════════════════════════════════════════════════════════════
   FLOWIT (kirjautuminen, onboarding, merkintä, tilaus)
   ════════════════════════════════════════════════════════════ */
.flow { position: relative; z-index: 5; padding: 46px 20px 70px; }
.screen { display: none; }
.screen.on { display: block; animation: riseFlow .42s var(--ease) both; }
@keyframes riseFlow { from { opacity: 0; transform: translateY(14px) scale(.992); } to { opacity: 1; transform: none; } }
/* 580 px oli liian kapea työpöydällä: sisältö valui pitkäksi nauhaksi ja
   ruudun reunoille jäi tyhjää (Henri 26.8. "vihaan tätä suippoa suprua").
   720 px pitää rivinpituuden yhä luettavana mutta lopettaa nauhamaisuuden. */
/* Nappi joka odottaa palvelinta. Harmaantuva nappi yksin näyttää rikkinäiseltä
   eikä kiireiseltä (Henri 26.8.). */
.btn--tyossa { position: relative; padding-left: 46px !important; }
.btn--tyossa::before {
  content: ''; position: absolute; left: 20px; top: 50%; margin-top: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.32); border-top-color: #fff;
  animation: btnPyori .7s linear infinite;
}
@keyframes btnPyori { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn--tyossa::before { animation-duration: 2.4s; }
}

.narrow { max-width: 720px; margin: 0 auto; }
/* Maksuseinä ei ole lomake vaan vertailu: kaksi hintakorttia tarvitsevat
   leveyttä ollakseen napattavia eivätkä kapeita liuskoja. */
#s-pro.narrow { max-width: 1000px; }
/* Auth + done: hitaampi, elokuvamainen porrastus ensivaikutelmaan/palkintohetkeen. */
#s-auth.on > *, #s-done.on > * { animation: rise .6s var(--ease) both; }
#s-auth.on > *:nth-child(1), #s-done.on > *:nth-child(1) { animation-delay: .10s; }
#s-auth.on > *:nth-child(2), #s-done.on > *:nth-child(2) { animation-delay: .22s; }
#s-auth.on > *:nth-child(3), #s-done.on > *:nth-child(3) { animation-delay: .34s; }
#s-auth.on > *:nth-child(4), #s-done.on > *:nth-child(4) { animation-delay: .48s; }
#s-auth.on > *:nth-child(n+5), #s-done.on > *:nth-child(n+5) { animation-delay: .56s; }
#s-auth.on h1 { animation: heroSettle .8s var(--ease) both; }
@keyframes heroSettle {
  from { opacity: 0; transform: translateY(16px); letter-spacing: .02em; }
  to   { opacity: 1; transform: none; letter-spacing: -.03em; }
}

/* ---------- Napit ---------- */
.btn {
  font-family: inherit; font-size: 18px; font-weight: 800;
  border: none; border-radius: var(--radius-sm); cursor: pointer;
  transition: background .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn--primary {
  background: var(--orange); color: #fff; min-height: 52px; padding: 0 24px;
  box-shadow: 0 10px 26px rgba(242,99,34,.34);
}
.btn--primary:hover:not(:disabled) { background: #FF7534; transform: translateY(-2px); }
.btn--ghost {
  background: rgba(247,240,232,.05); color: var(--cream); min-height: 52px; padding: 0 24px;
  border: 1.5px solid var(--line-2);
}
.btn--ghost:hover:not(:disabled) { border-color: rgba(255,148,85,.5); background: rgba(242,99,34,.08); }
.btn--block { width: 100%; display: block; }
.btn-link {
  background: none; border: none; color: var(--mut);
  font-size: 17.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  text-decoration: underline; text-underline-offset: 3px; padding: 10px 8px;
}
.btn-link:hover { color: var(--cream); }

/* ---------- Kentät ---------- */
.field {
  width: 100%; font-family: inherit; font-size: 18px; font-weight: 600;
  padding: 15px; margin-bottom: 11px;
  border: 1.5px solid var(--line-2); border-radius: var(--radius-sm);
  background: rgba(247,240,232,.04); color: var(--cream);
  outline: none; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field::placeholder { color: var(--faint); }
.field:focus { border-color: var(--orange); background: rgba(242,99,34,.07); }

.check { display: flex; gap: 11px; align-items: flex-start; font-size: 17.5px; font-weight: 600; color: var(--mut); cursor: pointer; line-height: 1.5; }
.check input { margin-top: 3px; width: 20px; height: 20px; flex: none; accent-color: var(--orange); }
.check a { color: var(--orange-lt); }

/* ---------- Ilmoitukset ---------- */
.note { border-radius: var(--radius-sm); padding: 14px 16px; font-size: 17.5px; font-weight: 600; margin: 13px 0; }
.note--err  { background: rgba(255,90,95,.12);  border: 1px solid rgba(255,90,95,.32);  color: #FFC2C4; }
.note--ok   { background: rgba(62,213,152,.12); border: 1px solid rgba(62,213,152,.32); color: #A8EFCE; }
.note--info { background: rgba(242,99,34,.09);  border: 1px solid rgba(255,148,85,.24); color: var(--cream); }
/* Yhteydenotto virheruudussa. Näytetään VAIN kun vika on meidän päässämme:
   käyttäjää ei pyydetä kirjoittamaan meille silloin kun hänen oma verkkonsa
   pätkii tai kun asia korjaantuu odottamalla. */
.note__yhteys { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,90,95,.24);
                font-size: 16px; font-weight: 600; line-height: 1.55; }
.note__yhteys a { color: #FFD9DA; }

/* ---------- Onboarding ---------- */
.dots { display: flex; gap: 7px; justify-content: center; margin-bottom: 26px; }
.dots span { width: 8px; height: 8px; border-radius: 999px; background: rgba(247,240,232,.20); transition: background .3s var(--ease), width .3s var(--ease); }
.dots span.active { background: var(--orange); width: 24px; }
.dots span.done   { background: var(--orange-lt); }
.q-title { font-weight: 900; font-size: clamp(1.75rem, 4vw, 2.4rem); letter-spacing: -.03em; text-align: center; margin-bottom: 30px; line-height: 1.2; }
.q-options { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.q-options.one-col { grid-template-columns: 1fr; }
@media (max-width: 520px) { .q-options { grid-template-columns: 1fr; } }
/* Jämäkämmät napit (Henri 26.8.). Kartoitus on ensivaikutelma ja siinä
   napautetaan kymmenen kertaa: ohut reunus ja matala laatikko tuntuivat
   hennoilta. Paksumpi reunus + korkeampi kohde + selvempi painallus. */
.opt {
  background: rgba(247,240,232,.05); border: 2px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 24px 24px;
  font-size: 21px; font-weight: 700; font-family: inherit; color: var(--cream);
  cursor: pointer; min-height: 84px; text-align: left;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .12s var(--ease);
}
.opt:active { transform: translateY(1px) scale(.995); }
.opt:hover { border-color: rgba(255,148,85,.6); background: rgba(242,99,34,.10); transform: translateY(-2px); }
.opt.selected { border-color: var(--orange); background: var(--orange); color: #fff; }

/* ---------- Lataus ---------- */
.loading { text-align: center; padding: 90px 20px; }
.spinner {
  width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 26px;
  border: 4px solid rgba(247,240,232,.12); border-top-color: var(--orange);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Hinnoittelu: vuosi oletus, kuukausi ANKKURI ---------- */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0 8px; }
@media (max-width: 620px) { .plans { grid-template-columns: 1fr; } }
/* Isommat kortit (Henri 26.8.): tämä on ostopäätöksen hetki eikä sivuhuomio.
   Reunus paksumpi jotta kortti näyttää napattavalta eikä laatikolta. */
.plan {
  position: relative; text-align: left;
  background: rgba(247,240,232,.035); border: 2px solid var(--line-2);
  border-radius: var(--radius); padding: 34px 30px; min-height: 200px;
  cursor: pointer; font-family: inherit;
  transition: border-color .2s var(--ease), transform .12s var(--ease);
}
.plan:hover { border-color: rgba(255,148,85,.55); transform: translateY(-2px); }
.plan--hero {
  border-color: var(--orange);
  background: linear-gradient(150deg, rgba(242,99,34,.16), rgba(255,148,85,.05));
  box-shadow: 0 18px 44px rgba(242,99,34,.2);
}
.plan__tag {
  position: absolute; top: -12px; left: 22px;
  background: var(--orange); color: #fff; border-radius: 999px;
  font-size: 16px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px;
}
.plan__name { font-size: 17px; font-weight: 800; color: var(--mut); margin-bottom: 9px; }
.plan__price { font-size: clamp(2rem, 4.6vw, 2.6rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.plan__price span { font-size: 18px; font-weight: 700; color: var(--mut); letter-spacing: 0; }
.plan__sub { margin-top: 9px; font-size: 17px; font-weight: 700; color: var(--mut); }
.plan__save {
  margin-top: 11px; display: inline-block;
  background: rgba(62,213,152,.14); border: 1px solid rgba(62,213,152,.3); color: var(--green);
  border-radius: 999px; padding: 5px 12px; font-size: 16.5px; font-weight: 800;
}
.perks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 11px; }
.perks li { display: flex; gap: 11px; align-items: flex-start; font-size: 17.5px; font-weight: 600; color: var(--mut); }
.perks li b { color: var(--cream); font-weight: 800; }
.perks__i { color: var(--green); font-weight: 900; flex: none; }



/* ════════════════════════════════════════════════════════════
   TANAAN — komentokeskus (uudistus 5.9.2026)

   Mitoitusperiaate: tilarivi + vaihepalkki + toimintokortti mahtuvat
   yhteen ruutuun 390x844 px:n puhelimessa. Kaikki mitat on valittu
   sen mukaan. Jos tanne lisataan jotain, jonkin muun on lahdettava.
   ════════════════════════════════════════════════════════════ */

/* A + B: tilarivi ja vaiheen edistyminen */
.tila { margin: 0 0 18px; }
.tila__rivi {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 17px; font-weight: 600; color: var(--cream);
}
.tila__rivi b { font-weight: 800; }
.tila__vaihe { margin-top: 14px; }
/* Segmentit joustavat, joten sama palkki toimii kahdella ja kuudellatoista
   ala-aiheella. Ei "10 % valmista": ajokerralla 3/30 se lannistaa. */
.tila__segit { display: flex; gap: 4px; margin-bottom: 9px; }
.tila__segit i {
  flex: 1; height: 8px; border-radius: 99px;
  background: rgba(247,240,232,.13);
}
.tila__segit i.on { background: var(--orange); }
.tila__vnimi { font-size: 19px; font-weight: 800; color: var(--cream); }
/* Luku vaiheen nimen perassa, ei omalla rivillaan. */
.tila__vnimi span { font-weight: 700; opacity: .72; margin-left: 4px; }
.tila__vluku { font-size: 16px; font-weight: 600; color: var(--cream); opacity: .78; margin-top: 2px; }


/* C: se yksi kortti joka kertoo mita nyt tehdaan */
.nyt {
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,148,85,.26); border-radius: 22px;
  background: linear-gradient(155deg, rgba(242,99,34,.13), rgba(247,240,232,.035));
  padding: 26px 24px 24px; margin: 0 0 24px;
}
.nyt__yla {
  font-size: 16px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--orange-lt); margin-bottom: 12px;
}
.nyt__h {
  font-size: 29px; font-weight: 900; letter-spacing: -.02em; line-height: 1.14;
  margin: 0 0 12px; color: var(--cream);
}
.nyt__lead { font-size: 18px; font-weight: 600; line-height: 1.55; margin: 0 0 18px; color: var(--cream); }
.nyt__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.nyt__meta span {
  font-size: 16px; font-weight: 700; padding: 6px 12px; border-radius: 99px;
  background: rgba(247,240,232,.07); border: 1px solid var(--line-2); color: var(--cream);
  /* Pilleri on YKSI rivi. Monirivinen teksti 99 px:n pyoristyksen sisalla
     nayttaa siita etta teksti valuu ulos laatikosta. */
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Tavoitteet ovat kortissa koska ne ovat se mita tunnilla tehdaan. */
.nyt__tav { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.nyt__tav li {
  font-size: 18px; font-weight: 700; color: var(--cream);
  padding-left: 20px; position: relative; line-height: 1.4;
}
.nyt__tav li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
}
.nyt__lista { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.nyt__lista li { line-height: 1.45; }
.nyt__lista b { display: block; font-size: 18px; font-weight: 800; color: var(--cream); }
.nyt__lista span { font-size: 16.5px; font-weight: 600; color: var(--cream); opacity: .8; }
/* Yksi ensisijainen nappi. Toissijainen on tekstilinkki eika nappi, jotta
   niiden valilla ei ole hetkeakaan epaselvyytta kumpi on se oikea. */
.nyt__act { display: grid; gap: 12px; justify-items: stretch; }
.nyt__act .btn { width: 100%; }
.nyt__toinen {
  background: none; border: 0; padding: 6px; cursor: pointer; font-family: inherit;
  font-size: 17px; font-weight: 700; color: var(--orange-lt); text-decoration: underline;
  text-underline-offset: 3px;
}
.nyt--esteet { border-color: rgba(255,90,95,.45); background: linear-gradient(155deg, rgba(255,90,95,.12), rgba(247,240,232,.03)); }
.nyt--esteet .nyt__yla { color: #FFC2C4; }

/* D: kolme viimeisinta ajokertaa */
.koti__osa { margin: 0 0 22px; }
.koti__k {
  font-size: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream); opacity: .62; margin-bottom: 11px;
}
.tehtyrivi {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 13px 2px; cursor: pointer; font-family: inherit; color: var(--cream);
}
.tehtyrivi:last-of-type { border-bottom: 0; }
.tehtyrivi__v { color: var(--green); font-weight: 900; font-size: 19px; flex: none; }
.tehtyrivi__b { display: grid; gap: 2px; min-width: 0; }
.tehtyrivi__b b { font-size: 17.5px; font-weight: 800; }
.tehtyrivi__b span {
  font-size: 16px; font-weight: 600; opacity: .78;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.koti__link {
  background: none; border: 0; padding: 10px 2px; cursor: pointer; font-family: inherit;
  font-size: 17px; font-weight: 700; color: var(--orange-lt);
}

/* Tukirivi etusivun pohjalla: reitti niihin joita ei enaa ole mobiilin
   alapalkissa. Vaisumpi kuin toimintokortti — nama eivat kilpaile paivan
   tekemisen kanssa vaan ovat siella kun se on hoidettu. */
.muut__r {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; background: none; cursor: pointer; font-family: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 15px 16px; margin-bottom: 9px; color: var(--cream);
}
.muut__r:hover { border-color: rgba(255,148,85,.42); }
.muut__r > span:first-child { display: grid; gap: 2px; min-width: 0; }
.muut__r b { font-size: 17.5px; font-weight: 800; }
.muut__r span span { font-size: 16px; font-weight: 600; opacity: .74; }
.muut__ar { font-size: 22px; opacity: .5; flex: none; }

/* Tunnin tausta: paikat ja Coach. Kiinni oletuksena — ne veivat ennen noin
   2 000 px eli lahes kolme ruutua, eivatka ne ole se mita sivulta haetaan. */
.tausta { margin: 4px 0 0; border-top: 1px solid var(--line); }
.tausta > summary {
  cursor: pointer; list-style: none; padding: 18px 2px;
  font-size: 17.5px; font-weight: 700; color: var(--orange-lt);
}
.tausta > summary::-webkit-details-marker { display: none; }
.tausta > summary::after { content: ' ▾'; }
.tausta[open] > summary::after { content: ' ▴'; }
.tausta__body { padding-bottom: 8px; }

/* ---------- Pakolliset asiat: korostus kun tanne tullaan lakiportista ----------
   Kayttaja painoi nappia jossa luki mita pitaa hoitaa. Han ansaitsee tietaa
   mihin han paatyi. Hehku sammuu itsestaan 2,6 sekunnissa: pysyva korostus
   olisi kohinaa kolmannella katselukerralla. */
.tkband--korosta {
  animation: kaytHehku 2.6s var(--ease) 1;
  border-radius: var(--radius); scroll-margin-top: 84px;
}
@keyframes kaytHehku {
  0%   { box-shadow: 0 0 0 0 rgba(242,99,34,0); }
  18%  { box-shadow: 0 0 0 4px rgba(242,99,34,.55), 0 0 34px rgba(242,99,34,.34); }
  60%  { box-shadow: 0 0 0 4px rgba(242,99,34,.42), 0 0 30px rgba(242,99,34,.26); }
  100% { box-shadow: 0 0 0 0 rgba(242,99,34,0); }
}
/* Liike pois jos kayttaja on sen kieltanyt. Reunus jaa hetkeksi nakyviin
   jotta kohde loytyy silti. */
@media (prefers-reduced-motion: reduce) {
  .tkband--korosta { animation: none; box-shadow: 0 0 0 3px rgba(242,99,34,.5); }
}

/* Lause siita mitka kohdat ovat lain vaatimia. Punainen katkoviiva on sama
   kieli kuin Tanaan-nakyman esteissa: sama asia nayttaa samalta kummassakin. */
.tkband__pakko {
  margin: 0 0 18px; padding: 16px 18px;
  border: 2px dashed rgba(255,90,95,.55); border-radius: var(--radius-sm);
  background: rgba(255,90,95,.09); color: var(--cream);
  font-size: 18px; font-weight: 600; line-height: 1.55;
}
.tkband__pakko b { font-weight: 800; color: #FFC2C4; }


/* Ammattilaisen sanat muistilapussa. Vaisumpi kuin "Sano nain" (joka on
   talle oppilaalle kirjoitettu) mutta luettava kadet ratissa: 18 px. */
.ammsan { margin-top: 16px; padding: 16px 18px; border-radius: var(--radius-sm);
          border: 1px solid var(--line-2); background: rgba(247,240,232,.04); }
.ammsan__k { font-size: 16px; font-weight: 800; letter-spacing: .08em;
             text-transform: uppercase; color: var(--orange-lt); margin-bottom: 10px;
             display: flex; align-items: center; gap: 9px; }
/* Robotti on allekirjoitus eika kuvitus: 22 px riittaa tunnistamiseen eika
   vie huomiota itse lauseilta (Henri 17.9.2026: "mutta ei isolla"). */
.ammsan__k svg { width: 22px; height: 22px; flex: none; opacity: .92; }
.ammsan__r { font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--cream);
             padding-left: 18px; position: relative; margin-bottom: 8px; }
.ammsan__r::before { content: ''; position: absolute; left: 0; top: .6em;
                     width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.ammsan__r--varo::before { background: #FF5A5F; }
.ammsan__l { font-size: 16px; font-weight: 600; opacity: .55; color: var(--cream); margin-top: 4px; }

/* ---------- Odotuskortti: 45 sekunnin tyhja aika taytetaan sisallolla ----------
   Vaisumpi kuin varsinainen sisalto: tama on lisa odotukseen eika se saa
   kilpailla sen kanssa mita kayttaja odottaa. Leipateksti 18 px kuten muuallakin. */
.odotus {
  margin: 26px auto 0; max-width: 420px; text-align: left;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: rgba(247,240,232,.04); padding: 20px 22px;
}
.odotus[hidden] { display: none; }
.odotus--sisaan { animation: odotusIn .45s var(--ease) both; }
@keyframes odotusIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.odotus__k {
  font-size: 16px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange-lt); margin-bottom: 12px;
}
.odotus__otsikko {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  font-size: 20px; font-weight: 900; color: var(--cream); margin-bottom: 8px;
}
.odotus__osuus {
  font-size: 16px; font-weight: 700; color: var(--orange-lt);
  padding: 3px 10px; border-radius: 99px; background: rgba(242,99,34,.14);
}
.odotus__lause { margin: 0 0 12px; font-size: 18px; font-weight: 600; line-height: 1.55; color: var(--cream); }
.odotus__lahde { font-size: 16px; font-weight: 600; color: var(--cream); opacity: .6; }
@media (prefers-reduced-motion: reduce) { .odotus--sisaan { animation: none; } }

/* ---------- Maksuseinän ennen/jälkeen (P0.4) ----------
   EI vierekkäin vaan allekkain: .narrow on 720 px ja kaksi palstaa
   puristaisi tekstin pitkulaiseksi. Lukija lukee nämä joka tapauksessa
   järjestyksessä — ensin mitä menettää, sitten mitä saa.
   Leipäteksti 18 px eikä --mut-himmennystä: tämä on ostopäätöksen
   perustelu eikä sivuhuomio (Henrin sitova fonttisääntö). */
.vertaa { margin: 26px 0 0; }
.vertaa__k {
  font-size: 18px; font-weight: 700; line-height: 1.6;
  color: var(--cream); margin: 0 0 18px;
}
.vertaa__rivi {
  border: 1px solid var(--line-2); border-left-width: 4px;
  border-radius: var(--radius-sm); padding: 20px 22px; margin-bottom: 14px;
}
.vertaa__rivi--nyt { border-left-color: rgba(247,240,232,.28); }
.vertaa__rivi--pro {
  border-left-color: var(--orange);
  background: rgba(242,99,34,.07);
  border-color: rgba(255,148,85,.24);
}
.vertaa__h {
  font-size: 16px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 9px; color: var(--orange-lt);
}
.vertaa__rivi--nyt .vertaa__h { color: rgba(247,240,232,.72); }
.vertaa__t { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.62; color: var(--cream); }



/* ════════════════════════════════════════════════════════════
   HERO — yksi asia ruudulla. Ei mittareita, ei listoja.
   Käyttäjä on hermostunut isä, ei opiskelija: jokainen ylimääräinen
   elementti on hänelle yksi asia lisää jonka voi tehdä väärin.
   ════════════════════════════════════════════════════════════ */
.hero {
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,148,85,.24);
  border-radius: 24px;
  background:
    radial-gradient(130% 100% at 100% 0%, rgba(242,99,34,.20), transparent 60%),
    linear-gradient(165deg, #2A1E16, var(--card) 62%);
  padding: clamp(26px, 4vw, 44px);
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--orange-lt); margin-bottom: 20px;
}
.hero__eyebrow svg { width: 15px; height: 15px; }
.hero__title {
  font-size: clamp(2.3rem, 6.4vw, 3.9rem); font-weight: 900;
  letter-spacing: -.045em; line-height: .98; margin: 0 0 18px;
  max-width: 15ch;
}
.hero__line {
  font-size: clamp(1.02rem, 2.1vw, 1.24rem); font-weight: 600;
  color: var(--mut); line-height: 1.5; max-width: 46ch; margin-bottom: 30px;
}
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn--xl {
  min-height: 62px; padding: 0 34px; font-size: 19.5px; border-radius: 15px;
}
.hero__why {
  background: none; border: 0; padding: 12px 4px; cursor: pointer;
  color: var(--faint); font: inherit; font-size: 17.5px; font-weight: 700;
}
.hero__why:hover { color: var(--cream); }

/* ── Käytännön tiedot heti otsikon alla: kesto ja paikka ────────────────── */
.hero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: -14px 0 26px; }
.chip {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 9px 16px; font-size: 16px; font-weight: 700;
  background: rgba(247,240,232,.07); border: 1px solid var(--line-2); color: var(--mut);
}

/* ── Päivän tavoitteet OPETUSRUNGOSSA ───────────────────────────────────────
   Tämä on se mitä Henri tarkoitti "sydämellä": ei irrallista listaa opeteltavia
   asioita, vaan jokainen asia paikallaan rungossa (pääaihe → ala-aihe →
   suoritus) ja perustelu miksi juuri se on nyt vuorossa. Polku ja taso tulevat
   coach-plan-lessonin runkoankkuroinnista — jos ne puuttuvat (vanha tallennettu
   suunnitelma), rivi näytetään ilman niitä eikä valehdella. */
.goals { display: flex; flex-direction: column; gap: 12px; margin: 26px 0 4px; }
.goal {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 20px; border-radius: 16px;
  background: rgba(247,240,232,.04); border: 1px solid var(--line);
}
.goal--main { border-color: rgba(242,99,34,.4); background: rgba(242,99,34,.09); }
.goal__n {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 900; font-size: 17px;
  background: rgba(247,240,232,.08); color: var(--mut);
}
.goal--main .goal__n { background: var(--orange); color: #fff; }
.goal__t { flex: 1; min-width: 0; }
.goal__path {
  font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 6px;
}
.goal__t b { display: block; font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.goal__t > span {
  display: block; color: var(--mut); font-size: 17.5px; font-weight: 600;
  line-height: 1.5; margin-top: 4px;
}
/* Vaativuus rungossa 1–5. Ei prosentteja, ei ennustetta — pelkkä sijainti. */
.lvl { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.lvl__l { font-size: 16px; font-weight: 700; color: var(--faint); }
.lvl__b { display: flex; gap: 4px; }
.lvl__b i { width: 22px; height: 6px; border-radius: 99px; background: rgba(247,240,232,.14); }
.lvl__b i.on { background: var(--orange-lt); }

/* ── OPETUSPOLKU: kuusi pääaihetta AjoMestan rungosta ────────────────────── */
.path { display: flex; flex-direction: column; gap: 2px; }
.pstep { display: flex; align-items: center; gap: 14px; padding: 11px 0; }
.pstep__d {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: rgba(247,240,232,.14); box-shadow: 0 0 0 4px var(--card); position: relative;
}
.pstep__d::before {
  content: ""; position: absolute; left: 50%; top: 14px; width: 2px; height: 26px;
  background: rgba(247,240,232,.12); transform: translateX(-50%);
}
.pstep:last-child .pstep__d::before { display: none; }
.pstep--done .pstep__d { background: var(--green); }
.pstep--now .pstep__d {
  background: var(--orange);
  box-shadow: 0 0 0 4px var(--card), 0 0 0 8px rgba(242,99,34,.22);
}
.pstep__t { font-size: 18px; font-weight: 700; color: var(--faint); }
.pstep--done .pstep__t { color: var(--mut); }
.pstep--now .pstep__t { color: var(--cream); font-weight: 800; }
.pstep__s {
  margin-left: auto; font-size: 16px; font-weight: 700; color: var(--faint); white-space: nowrap;
}
.pstep--now .pstep__s { color: var(--orange-lt); }

/* ── OPETUSPOLKU-NÄKYMÄ: koko runko selattavana ──────────────────────────── */
/* Selite: mitä palkit ovat ja mitä ne EIVÄT ole. */
.plegend {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 16px; border-radius: var(--radius-sm);
  background: rgba(247,240,232,.04); border: 1px solid var(--line);
}
.plegend__l {
  font-size: 16px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint);
}
.plegend__ex { display: flex; gap: 3px; }
.plegend__ex i { width: 16px; height: 5px; border-radius: 99px; background: rgba(247,240,232,.13); }
.plegend__ex i.on { background: var(--orange-lt); }
.plegend__t { font-size: 16px; font-weight: 700; color: var(--mut); }
.plegend__ar { color: var(--faint); font-weight: 800; }
.plegend__note {
  flex-basis: 100%; font-size: 16px; font-weight: 600; color: var(--faint); margin-top: 2px;
}

.ppanels { display: flex; flex-direction: column; gap: 10px; }
.ppanel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.ppanel.nyt { border-color: rgba(242,99,34,.42); }
.ppanel__h {
  width: 100%; display: flex; align-items: center; gap: 14px; position: relative;
  padding: 18px 20px; background: none; border: 0; cursor: pointer; text-align: left;
}
.ppanel__h:hover { background: rgba(247,240,232,.04); }
.ppanel__n {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px; font-weight: 900;
  background: rgba(247,240,232,.08); color: var(--mut);
}
.ppanel.nyt .ppanel__n { background: var(--orange); color: #fff; }
.ppanel__t {
  flex: 1; min-width: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ppanel__nyt {
  font-size: 16px; font-weight: 800; letter-spacing: .04em;
  color: var(--orange-lt); border: 1px solid rgba(242,99,34,.45);
  background: rgba(242,99,34,.14); border-radius: 999px; padding: 4px 12px;
}
/* "Missä mennään": harjoiteltu / kaikki + edistymispalkki. */
.ppanel__frac { flex: none; font-size: 17px; font-weight: 700; color: var(--faint); white-space: nowrap; }
.ppanel__frac b { font-size: 22px; font-weight: 900; color: var(--green); margin-right: 2px; }
.ppanel__frac span { color: var(--faint); }
.ppanel__ar { flex: none; font-size: 19px; color: var(--orange-lt); }
.ppanel__track {
  position: absolute; left: 20px; right: 20px; bottom: 8px; height: 4px;
  border-radius: 99px; background: rgba(247,240,232,.08); overflow: hidden;
}
.ppanel__track i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--green), #7ee0b4);
}
.ppanel__b { padding: 0 20px 18px; }
.palue + .palue { margin-top: 20px; }
.palue__h {
  display: flex; align-items: center; gap: 12px;
  font-size: 16px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 10px;
}
/* "Ei täällä" -toggle: opettaja merkitsee ala-aiheen pois laskennasta. */
.palue__na {
  margin-left: auto; flex: none; font: inherit; font-size: 16px; font-weight: 700;
  letter-spacing: 0; text-transform: none; cursor: pointer;
  color: var(--faint); background: rgba(247,240,232,.05);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 13px;
  transition: color .14s var(--ease), border-color .14s var(--ease), background .14s var(--ease);
}
.palue__na:hover { color: var(--cream); border-color: var(--faint); }
.palue__na.on { color: var(--orange-lt); background: rgba(242,99,34,.12); border-color: rgba(242,99,34,.4); }
.palue--na .psuor__nm { text-decoration: line-through; text-decoration-color: rgba(242,99,34,.55); }
.psuor__naflag { flex: none; font-size: 16px; font-weight: 700; font-style: italic; color: var(--faint); white-space: nowrap; }

/* Näpäytettävä ohjeteksti: näpäytä taitoa -> näet miten se tehdään. */
.psuor--info { cursor: pointer; }
.psuor__chev {
  flex: none; width: 9px; height: 9px; margin-left: 2px;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(45deg); transition: transform .2s var(--ease), border-color .16s var(--ease);
}
.psuor--info:hover .psuor__nm { color: var(--cream); }
.psuor--info:hover .psuor__chev { border-color: var(--orange-lt); }
.psuor.open .psuor__nm { color: var(--cream); }
.psuor.open .psuor__chev { transform: rotate(-135deg); border-color: var(--orange-lt); }
.psuor__info {
  margin: 0 0 6px; padding: 15px 17px; border-radius: 13px;
  background: rgba(242,99,34,.06); border: 1px solid rgba(242,99,34,.22);
  font-size: 18px; font-weight: 500; line-height: 1.6; color: var(--cream);
  animation: infoReveal .28s var(--ease) both;
}
@keyframes infoReveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* Ajotehtävät: korkeamman tason haasteet opetuspolun lopussa. */
/* Ajotehtävät ripoteltuna pääaiheeseen (opetuspolun ppanel__b:n sisällä). */
.ptehtavat { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line-2); }
.ptehtavat__k { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; letter-spacing: .02em; color: var(--orange-lt); margin-bottom: 12px; }
.ptehtavat__k svg { width: 20px; height: 20px; flex: none; }
.tehtava__done { flex: none; font-size: 16px; font-weight: 800; color: var(--ok, #4ea672); background: rgba(78,166,114,.14); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.tehtava.tehty { border-color: rgba(78,166,114,.28); }
.tehtava { border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden; margin-bottom: 12px; transition: border-color .16s var(--ease); }
.tehtava:hover { border-color: var(--line-2); }
.tehtava.open { border-color: rgba(242,99,34,.34); }
.tehtava__h { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 18px 20px; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
.tehtava__ic { flex: none; width: 30px; height: 30px; color: var(--orange-lt); }
.tehtava__ic svg { width: 100%; height: 100%; }
.tehtava__t { flex: 1; min-width: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--cream); }
.tehtava__vaihe { flex: none; font-size: 16px; font-weight: 800; letter-spacing: .02em; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.tehtava__vaihe.tv-keskivaihe { color: var(--mut); background: rgba(247,240,232,.07); }
.tehtava__vaihe.tv-itsenainen { color: var(--orange-lt); background: rgba(242,99,34,.14); }
.tehtava__chev { flex: none; width: 10px; height: 10px; border-right: 2.5px solid var(--faint); border-bottom: 2.5px solid var(--faint); transform: rotate(45deg); transition: transform .2s var(--ease); }
.tehtava.open .tehtava__chev { transform: rotate(-135deg); border-color: var(--orange-lt); }
.tehtava__body { padding: 0 20px 20px 64px; animation: infoReveal .28s var(--ease) both; }
.tehtava__body p { font-size: 18px; font-weight: 500; line-height: 1.6; color: var(--cream); margin-bottom: 14px; }
.tehtava__treenaa { font-size: 16.5px; font-weight: 600; color: var(--mut); }
.tehtava__treenaa b { color: var(--orange-lt); font-weight: 800; margin-right: 4px; }
@media (max-width: 560px) { .tehtava__body { padding-left: 20px; } .tehtava__vaihe { display: none; } }

/* Vaihe 2: ajotehtävän lisääminen tunnille (tavoitevaihe). */
.tehtpick { margin: 16px 0 4px; border: 1px solid rgba(242,99,34,.22); border-radius: 18px; background: rgba(242,99,34,.05); padding: 16px 18px; }
.tehtpick__hd { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tehtpick__hd svg { width: 26px; height: 26px; flex: none; color: var(--orange-lt); }
.tehtpick__tx { display: flex; flex-direction: column; gap: 2px; }
.tehtpick__tx b { font-size: 18px; font-weight: 800; color: var(--cream); }
.tehtpick__tx span { font-size: 16px; font-weight: 500; color: var(--mut); }
.tehtpick__list { display: flex; flex-direction: column; gap: 10px; }
.tehtpick__item { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 13px 15px; border: 1px solid var(--line-2); border-radius: 13px; background: var(--card); cursor: pointer; font: inherit; color: inherit; transition: border-color .16s var(--ease), background .16s var(--ease); }
.tehtpick__item:hover { border-color: rgba(242,99,34,.4); }
.tehtpick__item.on { border-color: var(--orange); background: rgba(242,99,34,.12); }
.tehtpick__add { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; font-weight: 800; color: var(--orange-lt); background: rgba(242,99,34,.14); }
.tehtpick__item.on .tehtpick__add { color: #fff; background: var(--orange); }
.tehtpick__it { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tehtpick__it b { font-size: 18px; font-weight: 800; color: var(--cream); }
.tehtpick__it span { font-size: 16px; font-weight: 500; color: var(--mut); }

/* Done-näkymä: tehdyt ajotehtävät. */
.done__teht { display: flex; flex-wrap: wrap; gap: 8px; }
.done__tehtchip { font-size: 16px; font-weight: 700; color: var(--cream); background: rgba(242,99,34,.12); border: 1px solid rgba(242,99,34,.24); padding: 6px 13px; border-radius: 999px; }

/* ── SYVYYS LUKOSSA (ilmainen tili): kartta näkyy, sisältö tilauksen takana ── */
/* Avausbanneri opetuspolun yläreunassa. */
.unlockbar { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin: 0 0 20px; padding: 16px 20px; border: 1px solid rgba(242,99,34,.34); border-radius: 18px; background: linear-gradient(120deg, rgba(242,99,34,.14), rgba(242,99,34,.05)); cursor: pointer; font: inherit; color: inherit; transition: border-color .16s var(--ease), transform .16s var(--ease); }
.unlockbar:hover { border-color: var(--orange); transform: translateY(-1px); }
.unlockbar__ic { flex: none; width: 30px; height: 30px; color: var(--orange-lt); }
.unlockbar__ic svg { width: 100%; height: 100%; }
.unlockbar__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.unlockbar__tx b { font-size: 18.5px; font-weight: 800; color: var(--cream); }
.unlockbar__tx span { font-size: 16px; font-weight: 500; color: var(--mut); }
.unlockbar__cta { flex: none; font-size: 16px; font-weight: 800; color: #fff; background: var(--orange); padding: 9px 16px; border-radius: 999px; white-space: nowrap; }

/* Lukittu taitorivi: nimi näkyy, ohje lukossa. */
.psuor--lock { cursor: pointer; }
.psuor--lock:hover { background: rgba(242,99,34,.05); }
.psuor__lockchip { flex: none; display: inline-flex; align-items: center; width: 26px; height: 26px; color: var(--faint); }
.psuor__lockchip svg { width: 17px; height: 17px; margin: 0 auto; }
.psuor--lock:hover .psuor__lockchip { color: var(--orange-lt); }

/* Lukittu ajotehtäväkortti: pelkkä nimi + "avaa tilauksella". */
.tehtava--lock { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); margin-bottom: 12px; cursor: pointer; font: inherit; color: inherit; transition: border-color .16s var(--ease); }
.tehtava--lock:hover { border-color: rgba(242,99,34,.4); }
.tehtava--lock .tehtava__ic { flex: none; width: 28px; height: 28px; color: var(--faint); }
.tehtava--lock .tehtava__ic svg { width: 100%; height: 100%; }
.tehtava--lock .tehtava__t { flex: 1; min-width: 0; font-size: 18.5px; font-weight: 800; color: var(--cream); }
.tehtava__lockchip { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 800; color: var(--orange-lt); background: rgba(242,99,34,.12); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.tehtava__lockchip svg { width: 15px; height: 15px; }

/* Merkitse tehdyksi -nappi (pro). */
.tehtava__done-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 11px 18px; border: 1.5px solid var(--orange); border-radius: 12px; background: rgba(242,99,34,.1); color: var(--orange-lt); font-size: 16.5px; font-weight: 800; cursor: pointer; transition: background .14s var(--ease), color .14s var(--ease); }
.tehtava__done-btn:hover { background: var(--orange); color: #fff; }
.tehtava__done-btn:disabled { background: rgba(78,166,114,.16); border-color: rgba(78,166,114,.4); color: var(--ok, #4ea672); cursor: default; }
@keyframes tehtJuhli { 0% { box-shadow: 0 0 0 0 rgba(78,166,114,.5); } 100% { box-shadow: 0 0 0 16px rgba(78,166,114,0); } }
.tehtava.juhli { border-color: rgba(78,166,114,.5); animation: tehtJuhli .6s var(--ease); }

/* Edistyminen: ajotehtävä-yhteenveto. */
.tsummary__big { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.tsummary__big b { font-size: 44px; font-weight: 900; letter-spacing: -.02em; color: var(--orange-lt); font-variant-numeric: tabular-nums; }
.tsummary__big span { font-size: 17px; font-weight: 600; color: var(--mut); }
.tsummary__list { display: flex; flex-direction: column; gap: 2px; }
.tsummary__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 17px; }
.tsummary__row span { font-weight: 600; color: var(--cream); }
.tsummary__row b { flex: none; font-weight: 800; color: var(--orange-lt); font-variant-numeric: tabular-nums; }
.psuor {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.psuor.harj .psuor__nm { color: var(--cream); }
.psuor__nm { flex: 1; min-width: 0; font-size: 17.5px; font-weight: 600; color: var(--mut); }
.psuor__c {
  flex: none; font-size: 16px; font-weight: 800; color: var(--green);
  background: rgba(62,213,152,.12); border-radius: 999px; padding: 3px 10px;
}
/* Toistosuositus: kesken (oranssi "N / M×") -> hallussa (vihreä "✓ hallussa"). */
.psuor__reps {
  flex: none; font-size: 16px; font-weight: 800; white-space: nowrap;
  color: var(--orange-lt); background: rgba(242,99,34,.14); border-radius: 999px; padding: 3px 11px;
}
.psuor__reps.done { color: var(--green); background: rgba(62,213,152,.14); }
/* Vaativuus TEKSTINÄ, hillitty — ei saa näyttää täyttömittarilta. */
.psuor__vaat { flex: none; font-size: 16px; font-weight: 700; color: var(--faint); white-space: nowrap; }
.psuor__vaat.v4, .psuor__vaat.v5 { color: var(--orange-lt); }

/* ── MUISTILAPPU (s-glance) ─────────────────────────────────────────────────
   Luetaan autossa pysähdyksessä, usein kirkkaassa valossa ja kiireessä. Siksi
   fontit ovat tässä selvästi isompia kuin muualla appissa: suoritukset 26 px
   ylöspäin, sanottava lause 21 px. Ei mitään mitä pitäisi selata. */
.glance { padding: 8px 0 20px; }
.glance__k {
  font-size: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 22px;
}
/* Taitolappu: nimi + ohjauslause + Coach-linkki. Lause on mukana suoraan
   eikä <details>-elementin takana — autossa ei avata mitään. */
.glist { counter-reset: g; display: flex; flex-direction: column; gap: 22px; margin: 0 0 28px; }
.glist__i { counter-increment: g; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 16px; }
.glist__i::before {
  content: counter(g);
  grid-row: 1 / 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 19px; font-weight: 900;
  background: rgba(242,99,34,.2); color: var(--orange-lt);
}
.glist__nm {
  grid-column: 2; align-self: center;
  font-size: clamp(1.5rem, 4.2vw, 1.9rem); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.18;
}
.glist__s {
  grid-column: 2; margin: 0;
  font-size: 19px; font-weight: 600; line-height: 1.5; color: var(--mut);
}
.glist__c { grid-column: 2; justify-self: start; font-size: 18px; padding: 4px 0; }
/* ── Ammattilaisdatan oma näkymä ──────────────────────────────────────────
   Rivi on aina sama kolmiosainen: nimi · jana · luku. Sama muoto sekä
   vaiheille että ongelmille, jotta lukija oppii lukemaan sen kerran. */
#s-ammatti { max-width: 920px; margin: 0 auto; }
#s-ammatti .lead { max-width: 62ch; }
.astat { display: flex; flex-wrap: wrap; gap: 34px; margin: 30px 0 8px; }
.astat b {
  display: block; font-size: 34px; font-weight: 900; letter-spacing: -.03em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.astat span { display: block; font-size: 16px; color: var(--mut); margin-top: 8px; }

.alohko { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.alohko h2 { font-size: 26px; font-weight: 900; letter-spacing: -.025em; margin: 0 0 12px; }
.alohko__t { font-size: 18px; line-height: 1.5; color: var(--mut); margin: 0 0 22px; max-width: 62ch; }
.alohko__f { font-size: 16px; line-height: 1.5; color: var(--mut); margin: 20px 0 0; max-width: 62ch; }

.arivi {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(90px, 1fr) 4.6rem;
  gap: 16px; align-items: center; width: 100%;
  padding: 12px 0; margin: 0; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: inherit; font: inherit; text-align: left;
}
.arivi--nap { cursor: pointer; transition: background .14s; }
.arivi--nap:hover { background: rgba(247,240,232,.04); }
.arivi--nap:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.arivi__nm { font-size: 18px; font-weight: 700; line-height: 1.3; }
.arivi__v {
  font-size: 18px; font-weight: 800; text-align: right; color: var(--orange-lt);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ajana { position: relative; display: block; height: 22px; }
.ajana::before {
  content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 2px;
  background: rgba(247,240,232,.10);
}
.ajana__b {
  position: absolute; top: 6px; height: 10px; border-radius: 5px;
  background: rgba(242,99,34,.55);
}
.ajana__m {
  position: absolute; top: 0; width: 4px; height: 22px; border-radius: 2px;
  background: var(--cream);
}
@media (max-width: 620px) {
  .arivi { grid-template-columns: minmax(0, 9.5rem) minmax(60px, 1fr) 4rem; gap: 10px; }
  .arivi__nm { font-size: 17px; }
}

/* Ammattilaisen sanat: haitari jossa yksi kategoria auki kerrallaan. */
.spankki { border-top: 1px solid var(--line); }
.spankki__i { border-bottom: 1px solid var(--line); }
.spankki__k {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 15px 0; border: 0; background: none; color: inherit;
  font: inherit; font-size: 18px; font-weight: 700; text-align: left; cursor: pointer;
}
.spankki__k:hover { color: var(--orange-lt); }
.spankki__k:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.spankki__n { font-size: 16px; font-weight: 600; color: var(--mut); white-space: nowrap; }
.spankki__i.on .spankki__k { color: var(--orange-lt); }
.spankki__b { padding: 0 0 18px; }
.spankki__t { margin-bottom: 18px; }
.spankki__t:last-child { margin-bottom: 0; }
.spankki__tl {
  display: block; font-size: 16px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mut); margin-bottom: 6px;
}
.spankki__t p { font-size: 18px; line-height: 1.6; margin: 0; max-width: 62ch; }
.spankki__kor { margin-top: 12px; padding-left: 16px; border-left: 2px solid rgba(242,99,34,.45); }
.spankki__korl {
  display: block; font-size: 16px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--orange-lt); margin-bottom: 8px;
}
.spankki__kor ul { margin: 0; padding-left: 20px; }
.spankki__kor li { font-size: 17px; line-height: 1.5; margin-bottom: 6px; }

.kayra__lisaa { display: block; font-size: 18px; text-align: left; margin: 18px 0 0; }

/* Ammattilaisten etenemisjärjestys Tilannekuvassa. */
.kayra { margin-top: 22px; padding: 20px 22px; background: var(--card); border-radius: var(--radius); }
.kayra__k {
  font-size: 16px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mut); margin-bottom: 10px;
}
.kayra__t { font-size: 18px; line-height: 1.5; margin: 0 0 18px; color: var(--mut); }
.kayra__r { display: grid; grid-template-columns: minmax(0,11rem) 1fr 3.4rem; gap: 14px; align-items: center; margin-bottom: 12px; }
/* "Kasittelyharjoitukset" on 20 merkkia ilman valilyontia eika mahdu 8 rem:iin,
   joten se valui palkin paalle (Henri 5.9.). Suomi tavuttuu hyvin, joten
   annetaan selaimen tavuttaa - html lang="fi" on jo paikallaan. */
.kayra__nm { font-size: 18px; font-weight: 700; min-width: 0;
             hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.kayra__trk { height: 10px; border-radius: 5px; background: rgba(247,240,232,.10); overflow: hidden; }
.kayra__trk i { display: block; height: 100%; background: var(--orange); border-radius: 5px; }
.kayra__v { font-size: 18px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; color: var(--orange-lt); }
.kayra__fine { font-size: 16px; line-height: 1.5; color: var(--mut); margin: 16px 0 0; }
@media (max-width: 560px) { .kayra__r { grid-template-columns: minmax(0,8rem) 1fr 3.2rem; gap: 10px; } }

/* Ammattivertailu palautteen löydöksen sisällä. Erottuu omaksi lohkokseen
   mutta ei kilpaile itse palautteen kanssa: tämä on tausta eikä viesti. */
.amm {
  margin-top: 16px; padding: 16px 18px;
  background: rgba(242,99,34,.07);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.amm__t { font-size: 18px; line-height: 1.5; margin: 0 0 12px; }
.amm__t b { color: var(--orange-lt); }
.amm__b { display: block; font-size: 18px; text-align: left; margin-bottom: 12px; }
.amm__ota { width: 100%; font-size: 18px; }
.amm__taso { margin: 0 0 14px; }
.amm__taso summary {
  cursor: pointer; font-size: 18px; font-weight: 700; color: var(--orange-lt);
  padding: 6px 0; list-style: none;
}
.amm__taso summary::-webkit-details-marker { display: none; }
.amm__taso summary::before { content: '+ '; font-weight: 900; }
.amm__taso[open] summary::before { content: '‘2 '; }
.amm__taso p { font-size: 18px; line-height: 1.6; margin: 8px 0 0; }
.amm__lahde { font-size: 16px !important; color: var(--mut); }
.amm__ota[disabled] { opacity: 1; color: var(--green); border-color: rgba(62,213,152,.45); cursor: default; }

.glance__none { font-size: 20px; font-weight: 600; color: var(--mut); margin-bottom: 26px; }
.glance__say {
  border-left: 4px solid var(--orange); padding: 14px 0 14px 18px;
  font-size: 21px; font-weight: 700; line-height: 1.45;
}
.glance__say small {
  display: block; font-size: 16px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 8px;
}

/* ── Harjoitus muistilapussa: iso, luettava pysähdyksessä ── */
.gex__t {
  font-size: clamp(1.6rem, 4.4vw, 2.1rem); font-weight: 900; letter-spacing: -.03em;
  line-height: 1.12; margin: 4px 0 14px;
}
.gex__task { font-size: 20px; font-weight: 600; color: var(--mut); line-height: 1.5; margin-bottom: 4px; }
.gex__ready {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: rgba(62,213,152,.09); border: 1px solid rgba(62,213,152,.26);
}
.gex__ready small {
  display: block; font-size: 16px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green); margin-bottom: 6px;
}
.gex__ready { font-size: 18px; font-weight: 600; color: var(--mut); }
.gex__nav { display: flex; gap: 12px; align-items: center; margin-top: 22px; }
.gex__nav .btn { flex: 1; }
.gex__nav .btn--primary { padding: 15px 20px; font-size: 18px; }
.gex__nav .btn--ghost { padding: 15px 20px; font-size: 18px; }
.gex__done { flex: 1; text-align: center; font-size: 16px; font-weight: 700; color: var(--faint); }

/* Vaihe 2: harjoitusten yleiskatsaus ennen lähtöä */
.exlist { list-style: none; counter-reset: e; margin: 22px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.exlist li {
  counter-increment: e; position: relative; padding: 16px 18px 16px 56px;
  background: rgba(247,240,232,.04); border: 1px solid var(--line); border-radius: 16px;
}
.exlist li::before {
  content: counter(e); position: absolute; left: 16px; top: 16px;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 16px; font-weight: 900; background: rgba(242,99,34,.2); color: var(--orange-lt);
}
.exlist li b { display: block; font-size: 18.5px; font-weight: 800; letter-spacing: -.01em; }
.exlist li span { display: block; font-size: 17px; font-weight: 600; color: var(--mut); line-height: 1.5; margin-top: 3px; }

/* Koevalmius — oikea laskettu luku (laskeKoevalmius), ei ennuste */
.readiness {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line);
}
.ring { width: 68px; height: 68px; flex: none; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__bg { fill: none; stroke: rgba(247,240,232,.09); stroke-width: 7; }
.ring__fg { fill: none; stroke: var(--orange); stroke-width: 7; stroke-linecap: round;
  transition: stroke-dashoffset 1.1s var(--ease); }
.ring__n {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 18px; font-weight: 900; letter-spacing: -.03em;
}
.readiness__t b { display: block; font-weight: 800; font-size: 17.5px; }
.readiness__t span { color: var(--faint); font-size: 16.5px; font-weight: 600; }

/* Hiljainen tilarivi heron alla — ei mittariruutuja */
.quietbar {
  display: flex; gap: 22px; flex-wrap: wrap; margin-top: 20px;
  font-size: 16.5px; font-weight: 700; color: var(--faint);
}
.quietbar b { color: var(--mut); font-weight: 800; }

/* ════════════════════════════════════════════════════════════
   OPASTUS — kolme vaihetta, yksi ruutu kerrallaan
   ════════════════════════════════════════════════════════════ */
.steps { max-width: 640px; margin: 0 auto; }
.steps__rail { display: flex; gap: 8px; margin-bottom: 34px; }
.steps__rail i {
  flex: 1; height: 5px; border-radius: 99px; background: rgba(247,240,232,.10);
  transition: background .4s var(--ease);
}
.steps__rail i.done { background: var(--orange-lt); }
.steps__rail i.on   { background: var(--orange); }

.stepcrumb {
  font-size: 16px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 16px; text-align: center;
}
.step { animation: rise .4s var(--ease) both; text-align: center; }
.step__k {
  font-size: 16px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--orange-lt); margin-bottom: 14px;
}
.step__h {
  font-size: clamp(1.75rem, 4.6vw, 2.5rem); font-weight: 900;
  letter-spacing: -.035em; line-height: 1.05; margin-bottom: 16px;
}
.step__p { font-size: 18.5px; font-weight: 600; color: var(--mut); line-height: 1.55; max-width: 42ch; margin: 0 auto; }

/* "Sano tämä ääneen" — iso kortti, ei tekstiboksi */
.sayit {
  margin: 32px 0 26px; padding: 32px 28px; border-radius: 22px;
  border: 1px solid rgba(255,148,85,.3);
  background: linear-gradient(155deg, rgba(242,99,34,.18), rgba(255,148,85,.04));
  position: relative;
}
.sayit__mark {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--orange); display: grid; place-items: center; font-size: 22px;
  box-shadow: 0 10px 26px rgba(242,99,34,.4);
}
.sayit__q {
  font-size: clamp(1.3rem, 3.4vw, 1.8rem); font-weight: 800; line-height: 1.32;
  letter-spacing: -.02em; color: var(--cream);
}
.sayit__tools { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.tool {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(247,240,232,.06); border: 1.5px solid var(--line-2);
  border-radius: 999px; padding: 11px 20px; cursor: pointer;
  font: inherit; font-size: 17.5px; font-weight: 800; color: var(--cream);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.tool:hover { border-color: rgba(255,148,85,.6); background: rgba(242,99,34,.12); }
.tool.is-on { border-color: var(--orange); background: rgba(242,99,34,.2); color: var(--orange-lt); }
.tool svg { width: 16px; height: 16px; }

/* Kolme muistettavaa — iso, ilmava, ei listaa */
.three { display: grid; gap: 12px; margin: 30px 0 26px; text-align: left; }
.threeitem {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 20px; border-radius: 16px;
  background: rgba(247,240,232,.04); border: 1px solid var(--line);
}
.threeitem__n {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 900; font-size: 17px;
  background: rgba(242,99,34,.2); color: var(--orange-lt);
}
.threeitem__t { flex: 1; min-width: 0; }
.threeitem__t b { display: block; font-weight: 800; font-size: 18.5px; margin-bottom: 3px; }
.threeitem__t span { color: var(--mut); font-size: 17.5px; font-weight: 600; line-height: 1.5; }

/* Ennen ajoa: napauta pois se mitä ette tänään ehdi. Tämä on VALINTA, ei
   arvio — arviointi kuuluu vasta ajon jälkeen -vaiheeseen. */
.tpick {
  width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.tpick:hover { border-color: var(--line-2); }
.tpick.on { border-color: rgba(242,99,34,.4); background: rgba(242,99,34,.09); }

.step__cta { margin-top: 8px; }
.step__cta .btn { width: 100%; }
.step__note { margin-top: 16px; font-size: 16.5px; color: var(--faint); font-weight: 600; }

/* Fokus-kortin päälle/pois — switch, jotta käyttäjä tajuaa sen olevan kytkin. */
.tpick__sw { margin-left: auto; align-self: center; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tswitch {
  width: 52px; height: 30px; border-radius: 999px; position: relative; flex: none;
  background: rgba(247,240,232,.1); border: 1px solid var(--line-2);
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.tswitch i {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--faint); transition: transform .16s var(--ease), background .16s var(--ease);
}
.tpick.on .tswitch { background: rgba(242,99,34,.32); border-color: rgba(242,99,34,.55); }
.tpick.on .tswitch i { transform: translateX(22px); background: var(--orange); }
.tpick__m {
  flex: none; font-size: 16px; font-weight: 800; letter-spacing: .02em; color: var(--faint);
}
.tpick.on .tpick__m { color: var(--cream); }

/* Vaihe 2: "Valmentaja suosittelee myös näitä" — nostettu, ei enää piiloon jäävä rivi. */
.reco {
  margin-top: 22px; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(242,99,34,.34); background: rgba(242,99,34,.06);
}
.reco__hd {
  display: flex; align-items: center; gap: 15px; width: 100%; text-align: left;
  padding: 20px 20px; font: inherit; cursor: pointer; color: inherit; background: transparent;
}
.reco__hd:hover { background: rgba(242,99,34,.05); }
.reco__ic {
  flex: none; width: 44px; height: 44px; border-radius: 13px;
  background: radial-gradient(circle at 35% 30%, var(--orange-lt), var(--orange) 70%);
  box-shadow: 0 6px 20px rgba(242,99,34,.34); position: relative;
}
.reco__ic::after {
  content: '★'; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 20px; line-height: 1;
}
.reco__tx { flex: 1; min-width: 0; }
.reco__tx b { display: block; font-size: 19px; font-weight: 800; color: var(--cream); line-height: 1.25; }
.reco__tx span { display: block; margin-top: 3px; font-size: 16px; font-weight: 600; color: var(--mut); line-height: 1.4; }
.reco__ch {
  flex: none; width: 14px; height: 14px; border-right: 2.5px solid var(--orange-lt);
  border-bottom: 2.5px solid var(--orange-lt); transform: rotate(45deg); margin-right: 4px;
  transition: transform .18s var(--ease);
}
.reco--open .reco__ch { transform: rotate(-135deg); }
.reco__list { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 18px; }
.reco__item {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 15px 16px; border-radius: 13px; cursor: pointer; font: inherit;
  background: rgba(20,14,10,.5); border: 1px solid var(--line-2);
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.reco__item:hover { border-color: var(--orange); }
.reco__item.on { background: rgba(242,99,34,.16); border-color: var(--orange); }
.reco__add {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 18px; font-weight: 900; line-height: 1;
  background: rgba(247,240,232,.1); color: var(--faint);
  transition: background .14s var(--ease), color .14s var(--ease);
}
.reco__item.on .reco__add { background: var(--orange); color: #fff; }
.reco__nm { flex: 1; min-width: 0; font-size: 17.5px; font-weight: 700; color: var(--cream); }
.reco__lvl {
  flex: none; font-size: 16px; font-weight: 800; letter-spacing: .02em;
  padding: 5px 11px; border-radius: 999px;
}
.reco__lvl--helppo { background: rgba(247,240,232,.09); color: var(--faint); }
.reco__lvl--keskitaso { background: rgba(232,168,80,.16); color: #e8a850; }
.reco__lvl--vaativa { background: rgba(242,99,34,.2); color: var(--orange-lt); }

/* Kevyt "puhelin taskuun" -tila */
.pocket {
  margin: 30px 0; padding: 26px; border-radius: 20px;
  border: 1px dashed var(--line-2); color: var(--mut);
  font-size: 18px; font-weight: 700;
}


/* ════════════════════════════════════════════════════════════
   ANALYYSI — "jumittiko tämä?" on tuotteen pahin hetki.
   Vaiheet EIVÄT ole koristetta: coach-feedback tekee juuri nämä asiat.
   Palkki on aika-arvio, ei mittaus — se ei väitä muuta.
   ════════════════════════════════════════════════════════════ */
.analyze { max-width: 460px; margin: 0 auto; padding: 60px 20px; text-align: center; }

.analyze__viz { position: relative; width: 132px; height: 132px; margin: 0 auto 34px; }
.analyze__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(242,99,34,.34);
  animation: pulseOut 2.6s var(--ease) infinite;
}
.analyze__ring.r2 { animation-delay: .85s; }
.analyze__ring.r3 { animation-delay: 1.7s; }
@keyframes pulseOut {
  0%   { transform: scale(.42); opacity: 0; }
  22%  { opacity: 1; }
  100% { transform: scale(1);   opacity: 0; }
}
/* Pyörivä kaari + AjoWeppi-logomerkki — brändi, ei pelkkä oranssi pallukka.
   Pyörintä on jatkuvaa liikettä: käyttäjä näkee ettei mikään ole jumissa. */
.analyze__spin {
  position: absolute; inset: 14px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 60%, var(--orange) 86%, var(--orange-lt) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.analyze__logo {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px;
  margin: -29px 0 0 -29px; border-radius: 16px; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 25%, var(--orange-lt), var(--orange) 70%);
  box-shadow: 0 8px 30px rgba(242,99,34,.5);
  animation: logoBeat 2.4s var(--ease) infinite;
}
.analyze__logo b { color: #fff; font-size: 30px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
@keyframes logoBeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes coreBeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.analyze__title {
  font-size: clamp(1.15rem, 2.6vw, 1.4rem); font-weight: 800;
  letter-spacing: -.02em; margin-bottom: 22px;
}
.analyze__bar {
  height: 6px; border-radius: 99px; background: rgba(247,240,232,.09);
  overflow: hidden; margin-bottom: 26px;
}
.analyze__bar i {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--orange), var(--orange-lt));
  transition: width .7s var(--ease);
}
/* Jatkuva pyyhkäisy palkin päällä: liike ei lopu vaikka % jää odottamaan palvelinta. */
.analyze__bar--live { position: relative; }
.analyze__bar--live::after {
  content: ""; position: absolute; inset: 0; border-radius: 99px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(247,240,232,.4), transparent);
  background-size: 42% 100%; background-repeat: no-repeat;
  animation: barflow 1.3s linear infinite;
}
@keyframes barflow { 0% { background-position: -42% 0; } 100% { background-position: 142% 0; } }
/* VALMIS-tila: pyyhkäisy pois, palkki vihreäksi — selkeä "valmistui" -signaali. */
.analyze__bar--done::after { animation: none; opacity: 0; }
.analyze__bar--done i { background: linear-gradient(90deg, var(--green), #6BE3B0); box-shadow: 0 0 16px rgba(62,213,152,.5); }
/* Yksi rivi kerrallaan. Korkeus on kiinteä ettei palkki nytkähdä kun teksti
   vaihtuu pidempään tai lyhyempään. Häivytys on liikettä, ei pysyvää himmennystä. */
.analyze__now { min-height: 56px; margin: 0; text-align: center; display: grid; place-items: center; }
.analyze__now span {
  display: inline-block; font-size: 18px; font-weight: 700; color: var(--cream); line-height: 1.45;
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.analyze__now span.vaihtuu { opacity: 0; transform: translateY(7px); }
@media (prefers-reduced-motion: reduce) {
  .analyze__now span { transition: none; }
  .analyze__now span.vaihtuu { opacity: 1; transform: none; }
}

.analyze__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; text-align: left; }
.analyze__steps li {
  display: flex; align-items: center; gap: 12px;
  font-size: 17.5px; font-weight: 700; color: var(--faint);
  transition: color .35s var(--ease);
}
.analyze__steps li .dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2px solid rgba(247,240,232,.16);
  display: grid; place-items: center; transition: all .35s var(--ease);
}
.analyze__steps li.on  { color: var(--cream); }
.analyze__steps li.on  .dot { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(242,99,34,.16); }
.analyze__steps li.on  .dot::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
  animation: coreBeat 1.2s var(--ease) infinite;
}
.analyze__steps li.done { color: var(--mut); }
.analyze__steps li.done .dot { border-color: var(--green); background: rgba(62,213,152,.18); }

/* ════════════════════════════════════════════════════════════
   AJOTUNTI MERKITTY — palaute valmis. Piirretään ennen Edistyminen-
   näkymää, ettei ajotunti pääty tyhjään listaan.
   ════════════════════════════════════════════════════════════ */
.done__seal { width: 88px; height: 88px; margin: 8px auto 24px; }
.done__seal svg { width: 100%; height: 100%; }
.done__seal-c {
  fill: none; stroke: var(--green); stroke-width: 3;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: sealC .5s var(--ease) forwards;
}
.done__seal-p {
  fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: sealP .35s var(--ease) .45s forwards;
}
@keyframes sealC { to { stroke-dashoffset: 0; } }
@keyframes sealP { to { stroke-dashoffset: 0; } }

/* Väljemmin ja napsu isommalla (Henri 26.8.). Palauteruutu on ajon palkinto
   eikä tiivistelmä: sitä luetaan rauhassa. */
.done__card {
  text-align: left; padding: 28px; border-radius: 18px; margin-top: 22px;
  background: rgba(247,240,232,.04); border: 1px solid var(--line);
  font-size: 18px; line-height: 1.62;
}
.done__card p, .done__card li { font-size: 18px; line-height: 1.62; }
#s-done .verdict { margin-top: 22px; }
#s-done .blocks { gap: 22px; }
.done__card--goal { background: rgba(242,99,34,.07); border-color: rgba(242,99,34,.34); }
/* ── COACH-VINKKI ─────────────────────────────────────────────────────────
   Yksi vinkki, ei laatikkorivistöä. Erottuu suunnitelmasta vaaleammalla
   pohjalla: tämä on käsikirjasta, ei valmentajan laskema tavoite.
   Fonttikoot noudattavat Henrin sääntöä — leipäteksti 18 px, ei alle 16 px. */
/* Isompi laatikko ja isompi teksti (Henri 26.8.): Coachin vinkki on ohje jota
   luetaan ennen ajoa eikä alaviite. */
.cvink {
  margin-top: 24px; padding: 30px 28px; border-radius: 18px;
  background: rgba(247,240,232,.055); border: 1px solid var(--line);
}
/* Merkinnän lukko: näyttää mitä jäi näkemättä muttei vie ostosivulle kesken
   merkinnän. Ei nappi eikä klikattava — pelkkä tieto. */
.awm-lukko {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 16px 18px; border-radius: 14px;
  background: rgba(242,99,34,.07); border: 1px dashed rgba(242,99,34,.4);
  font-size: 16px; font-weight: 600; color: var(--mut); cursor: default;
}
.awm-lukko__i { font-size: 18px; opacity: .8; }

.cvink__h { font-size: 22px; }
.cvink__p { font-size: 18px; line-height: 1.6; }
.cvink__eye {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange-lt); margin-bottom: 10px;
}
/* 🔴 Ilman tätä sääntöä kuvake venyi koko kortin levyiseksi tähdeksi. Inline-SVG
   ilman leveyttä ottaa flex-rivillä kaiken vapaan tilan, ja korttiin tuli 300
   pikselin koriste jonka alle varsinainen ohje jäi. Sama sääntö on jo
   .pteas__eye svg:llä — tästä se vain puuttui. */
.cvink__eye svg { width: 18px; height: 18px; flex: none; }
.cvink__h { font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--cream); margin-bottom: 10px; }
.cvink__k {
  font-size: 16px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--mut); margin-top: 12px;
}
.cvink__p { font-size: 18px; font-weight: 600; line-height: 1.55; color: var(--cream); margin-top: 4px; }
.cvink__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-top: 16px;
}
.cvink__lahde { font-size: 16px; font-weight: 700; color: var(--mut); }

/* ── TAUKOKARTOITUS ───────────────────────────────────────────────────────
   Tarjous eikä varoitus: perhe ei ole tehnyt mitään väärin. Siksi neutraali
   pohja eikä punaista. */
.tauko {
  margin-top: 20px; padding: 22px; border-radius: 18px;
  background: rgba(247,240,232,.05); border: 1px solid rgba(242,99,34,.30);
}
.tauko__k {
  font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange-lt); margin-bottom: 10px;
}
.tauko__p { font-size: 18px; font-weight: 600; line-height: 1.55; color: var(--cream); }
.tauko__p + .tauko__p { margin-top: 10px; color: var(--mut); }

.taukolista { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.taukoopt {
  text-align: left; padding: 16px 18px; border-radius: 14px;
  background: rgba(247,240,232,.04); border: 1px solid var(--line);
  color: var(--cream); font: inherit; font-size: 18px; font-weight: 600; cursor: pointer;
}
.taukoopt:hover { background: rgba(247,240,232,.08); }
.taukoopt.on {
  background: rgba(242,99,34,.15); border-color: rgba(242,99,34,.55); font-weight: 800;
}
.taukoopt.on::before { content: '✓ '; color: var(--orange-lt); font-weight: 900; }

/* ── TESTITILAUS ──────────────────────────────────────────────────────────
   Näyttää tarkoituksella työkalulta eikä tuotteen osalta: katkoviiva erottaa
   sen ostosivusta jotta sitä ei vahingossa luulla oikeaksi maksutavaksi. */
/* Tarjouskuponki. Kiinteä reunus eikä katkoviiva kuten testilaatikossa:
   tämä on oikea aktivointireitti eikä kehityksen apuväline. Oranssi hehku
   erottaa sen hintakorteista ilman että se kilpailee niiden kanssa. */
.kuponki {
  margin-top: 30px; padding: 22px; border-radius: 18px;
  background: rgba(232,106,42,.07); border: 2px solid rgba(232,106,42,.34);
}
.kuponki__k {
  font-size: 18px; font-weight: 800; color: var(--cream); margin-bottom: 6px;
}
.kuponki__p { font-size: 17px; font-weight: 600; line-height: 1.55; color: var(--mut); margin-bottom: 16px; }
.kuponki__rivi { display: flex; gap: 10px; flex-wrap: wrap; }
.kuponki__in {
  flex: 1 1 180px; min-width: 0; padding: 16px 18px; border-radius: 14px;
  font-size: 20px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cream); background: rgba(0,0,0,.28);
  border: 2px solid rgba(247,240,232,.22); font-family: inherit;
}
.kuponki__in::placeholder { letter-spacing: .04em; font-weight: 600; color: rgba(247,240,232,.34); }
.kuponki__in:focus { outline: none; border-color: var(--orange); }
/* Nappi ei kutistu kentän alle: sormella osuttava kohde pysyy 56 px:ssä.
   Kun rivi katkeaa puhelimessa, nappi ottaa koko leveyden — kapea nappi
   täysleveän kentän alla näyttää keskeneräiseltä ja on hankalampi osua. */
.kuponki__rivi .btn { flex: 1 1 auto; min-height: 56px; padding-left: 24px; padding-right: 24px; }
@media (max-width: 560px) {
  .kuponki__rivi .btn { flex: 1 1 100%; }
}
#kuponkiMsg:not(:empty) { margin-top: 14px; }

/* ── MAKSU (27.9.2026) ─────────────────────────────────────────────────── */
.plan--valittu { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242,99,34,.35); }
.maksu { margin-top: 26px; }
.maksu #maksuNappi { min-height: 60px; font-size: 19px; }
.maksu__p { margin-top: 12px; font-size: 17px; font-weight: 600; line-height: 1.55; color: var(--mut); }
.maksu__p a { color: var(--orange-lt); }
#maksuMsg:not(:empty) { margin-top: 14px; }

.testibox {
  margin-top: 30px; padding: 22px; border-radius: 18px;
  background: rgba(247,240,232,.04); border: 2px dashed rgba(247,240,232,.26);
}
.testibox__k {
  font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mut); margin-bottom: 10px;
}
.testibox__p { font-size: 17px; font-weight: 600; line-height: 1.55; color: var(--mut); margin-bottom: 18px; }
.testibox__lbl { display: block; font-size: 18px; font-weight: 600; color: var(--cream); margin-bottom: 10px; }
.testibox__lbl b { font-weight: 800; color: var(--orange-lt); }
.testibox__pikat { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.testibox__pikat .btn { flex: 1; min-width: 72px; padding: 12px 8px; font-size: 16px; }

.testislider { width: 100%; height: 34px; background: none; -webkit-appearance: none; appearance: none; }
.testislider::-webkit-slider-runnable-track {
  height: 8px; border-radius: 99px; background: rgba(247,240,232,.14);
}
.testislider::-moz-range-track { height: 8px; border-radius: 99px; background: rgba(247,240,232,.14); }
.testislider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -10px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--orange);
  border: 3px solid var(--cream); cursor: pointer;
}
.testislider::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; background: var(--orange);
  border: 3px solid var(--cream); cursor: pointer;
}
.testislider:focus { outline: none; }
.testislider:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(242,99,34,.34); }

/* Tilauskupu kun kausi on päättymässä */
.tierchip--loppuu { background: rgba(242,99,34,.18); border-color: rgba(242,99,34,.46); }

/* ── COACH-NÄKYMÄ ─────────────────────────────────────────────────────────
   Hakuteos eikä lukemisto: rivit ovat napautettavia eikä yhtään koko listaa
   näytetä kerralla. Leveyttä käytetään ruudukolla (Henrin sääntö: ei
   pitkulaista) mutta ohjerivit pysyvät yhdessä sarakkeessa luettavuuden takia. */
.csearch {
  width: 100%; margin: 18px 0 8px; padding: 15px 18px; border-radius: 14px;
  background: rgba(247,240,232,.05); border: 1px solid var(--line);
  color: var(--cream); font: inherit; font-size: 18px; font-weight: 600;
}
.csearch::placeholder { color: var(--mut); }
.csearch:focus { outline: none; border-color: rgba(242,99,34,.55); }
/* Tulosten vaihtuminen. Ei latausanimaatiota: haku on paikallinen ja
   välitön, joten spinneri vilahtaisi nollan ajan ja näyttäisi rikkinäiseltä.
   Tämä on pelkkä pehmennys jotta lista ei napsahda paikalleen. */
@keyframes ctulosSisaan {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.ctulos--sisaan { animation: ctulosSisaan .12s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .ctulos--sisaan { animation: none; } }

.csect {
  font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange-lt); margin: 26px 0 10px;
}
.crow {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  margin-bottom: 8px; padding: 16px 18px; border-radius: 14px;
  background: rgba(247,240,232,.04); border: 1px solid var(--line);
  color: var(--cream); font: inherit; cursor: pointer;
}
.crow:hover { background: rgba(247,240,232,.07); border-color: rgba(242,99,34,.34); }
.crow--toive { cursor: default; background: rgba(242,99,34,.07); border-color: rgba(242,99,34,.30); }
.crow--toive:hover { background: rgba(242,99,34,.07); }
.crow__b { flex: 1; min-width: 0; }
.crow__b b { display: block; font-size: 18px; font-weight: 800; line-height: 1.35; }
.crow__b span { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; color: var(--mut); line-height: 1.45; }
.crow__ar { font-size: 22px; color: var(--mut); }

.cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ctile {
  text-align: left; padding: 18px; border-radius: 16px;
  background: rgba(247,240,232,.04); border: 1px solid var(--line);
  color: var(--cream); font: inherit; cursor: pointer;
}
.ctile:hover { background: rgba(247,240,232,.07); border-color: rgba(242,99,34,.34); }
.ctile b { display: block; font-size: 18px; font-weight: 800; line-height: 1.3; }
.ctile span { display: block; margin-top: 6px; font-size: 16px; font-weight: 600; color: var(--mut); line-height: 1.45; }
.ctile i { display: block; margin-top: 10px; font-size: 16px; font-weight: 800; font-style: normal; color: var(--orange-lt); }

.ctokkii {
  display: block; width: 100%; text-align: left; margin-top: 26px; padding: 22px;
  border-radius: 18px; background: rgba(242,99,34,.09); border: 1px solid rgba(242,99,34,.34);
  color: var(--cream); font: inherit; cursor: pointer;
}
.ctokkii:hover { background: rgba(242,99,34,.14); }
.ctokkii b { display: block; font-size: 22px; font-weight: 800; }
.ctokkii span { display: block; margin-top: 8px; font-size: 17px; font-weight: 600; color: var(--mut); line-height: 1.5; }

/* Oppilaan oma linkki (Oma-näkymä) */
.linkki {
  margin-top: 14px; padding: 14px 16px; border-radius: 12px; word-break: break-all;
  background: rgba(23,17,13,.5); border: 1px solid var(--line-2);
  font-size: 16px; font-weight: 600; color: var(--mut); line-height: 1.45;
}
.linkki--ok { border-color: rgba(122,200,120,.5); color: var(--cream); }

/* Kalibrointi ajokerran kortissa */
.lcard--kalib { border-color: rgba(242,99,34,.30); background: rgba(242,99,34,.06); }
.kalib { display: grid; gap: 10px; }
.kalib__r {
  padding: 14px 16px; border-radius: 12px;
  background: rgba(23,17,13,.35); border: 1px solid var(--line);
}
.kalib__r b { display: block; font-size: 17px; font-weight: 800; }
.kalib__r span { display: block; margin-top: 4px; font-size: 16.5px; font-weight: 600;
  color: var(--mut); line-height: 1.45; }
.kalib__r--sama { background: rgba(122,200,120,.08); border-color: rgba(122,200,120,.28); }

/* Opetusvideot. Vaiheotsikko on kevyempi kuin .csect, koska videolistassa
   otsikoita on kuusi peräkkäin — täysi oranssi versaali kuudesti tekee
   listasta levottoman. */
.csect--kevyt { color: var(--mut); margin-top: 22px; }

.ctokkii--video { background: rgba(247,240,232,.05); border-color: var(--line); }
.ctokkii--video:hover { background: rgba(247,240,232,.08); }

.cvid {
  position: relative; margin-bottom: 8px; padding: 0; border-radius: 14px;
  background: rgba(247,240,232,.04); border: 1px solid var(--line); overflow: hidden;
}
.cvid--auki { border-color: rgba(242,99,34,.34); background: rgba(242,99,34,.06); }
.cvid--pois { opacity: .55; }
.cvid__paa {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px 92px 16px 18px; background: none; border: none;
  color: var(--cream); font: inherit; cursor: pointer;
}
.cvid__paa:hover { background: rgba(247,240,232,.04); }
.cvid__ic { font-size: 20px; color: var(--orange-lt); width: 18px; flex: none; }
.cvid__b { flex: 1; min-width: 0; }
.cvid__b b { display: block; font-size: 18px; font-weight: 800; line-height: 1.35; }
.cvid__b span { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; color: var(--mut); }
/* Piilota-nappi on rivin oikeassa yläkulmassa eikä listan alla: se koskee
   yhtä videota eikä koko listaa. Alalaidassa se osuisi soittimen viereen. */
.cvid__pois {
  position: absolute; top: 14px; right: 14px; padding: 8px 12px; border-radius: 10px;
  background: none; border: 1px solid var(--line); color: var(--mut);
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.cvid__pois:hover { color: var(--cream); border-color: rgba(242,99,34,.4); }
.cvid__lippu {
  display: inline-block; margin-left: 10px; padding: 3px 9px; border-radius: 8px;
  background: rgba(242,99,34,.16); border: 1px solid rgba(242,99,34,.34);
  font-size: 16px; font-style: normal; font-weight: 700; color: var(--orange-lt);
  vertical-align: 2px;
}
.cvid__esto { padding: 20px; border-radius: 12px; background: rgba(247,240,232,.05); }
.cvid__esto b { display: block; font-size: 18px; font-weight: 800; }
.cvid__esto span { display: block; margin-top: 8px; font-size: 17px; font-weight: 600;
  color: var(--mut); line-height: 1.5; }
.cvid__esto i { font-style: normal; color: var(--cream); }
.cvid__esto a { display: inline-block; margin-top: 12px; font-size: 17px; font-weight: 700;
  color: var(--orange-lt); }
.cvid__soitin { padding: 0 18px 18px; }
.cvid__soitin iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
  border-radius: 12px; background: #000; border: 0;
}

/* Coachista poimitut tavoitteet Tänään-näkymässä */
.ctoive { margin-top: 20px; padding: 20px; border-radius: 18px;
  background: rgba(242,99,34,.07); border: 1px solid rgba(242,99,34,.30); }
.ctoive__k {
  font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange-lt); margin-bottom: 10px;
}
.ctoive__r {
  display: block; width: 100%; text-align: left; padding: 12px 0;
  background: none; border: none; color: var(--cream); font: inherit; cursor: pointer;
}
.ctoive__r + .ctoive__r { border-top: 1px solid var(--line); }
.ctoive__r b { display: block; font-size: 18px; font-weight: 800; line-height: 1.35; }
.ctoive__r span { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; color: var(--mut); line-height: 1.45; }

.ccard--act { background: none; border: none; padding: 0; margin-top: 22px; }

/* ── COACHIN LUKKO ────────────────────────────────────────────────────────
   Sumennetut palkit ovat TYHJIÄ elementtejä. Lukittua tekstiä ei lähetetä
   selaimeen, joten sitä ei voi lukea kehitystyökaluilla. Sumennus on siis
   aitoa eikä CSS-temppu jonka voi kiertää. */
.clukko {
  margin-top: 16px; padding: 22px; border-radius: 16px;
  background: rgba(242,99,34,.07); border: 1px solid rgba(242,99,34,.30);
}
.clukko__k {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange-lt); margin-bottom: 14px;
}
.clukko__k svg { width: 17px; height: 17px; flex: none; }
.clukko__blur { display: flex; flex-direction: column; gap: 10px; }
.clukko__blur span {
  display: block; height: 13px; border-radius: 99px;
  background: linear-gradient(90deg, rgba(247,240,232,.22), rgba(247,240,232,.09));
  filter: blur(2.5px);
}
.clukko__blur span:nth-child(2) { width: 92%; }
.clukko__blur span:nth-child(3) { width: 97%; }
.clukko__blur span:nth-child(4) { width: 61%; }
.clukko__t { margin-top: 16px; font-size: 17px; font-weight: 600; color: var(--mut); line-height: 1.5; }

/* Coachin lukunäkymä */
.cbody p { font-size: 18px; font-weight: 500; line-height: 1.65; color: var(--cream); margin-top: 14px; }
.cbody b { font-weight: 800; }
.ccard {
  margin-top: 16px; padding: 20px; border-radius: 16px;
  background: rgba(247,240,232,.04); border: 1px solid var(--line);
}
.ccard__k {
  font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange-lt); margin-bottom: 8px;
}
.ccard__t { font-size: 18px; font-weight: 600; line-height: 1.6; color: var(--cream); }
.ccard__ok { background: rgba(74,168,110,.09); border-color: rgba(74,168,110,.32); }
.ccard__ok .ccard__k { color: #7ed3a0; }
.ccard__no { background: rgba(214,84,64,.09); border-color: rgba(214,84,64,.32); }
.ccard__no .ccard__k { color: #f0917c; }

/* TUTKI-briiffi. Erottuu artikkelista selvästi: tämä ei ole enää ohjetta
   vaan heidän omaa dataansa. Mikään teksti ei ole alle 16 px. */
.tutki {
  margin-top: 14px; padding: 20px; border-radius: 16px;
  background: rgba(242,99,34,.07); border: 1px solid rgba(242,99,34,.30);
}
.tutki__perusta {
  font-size: 16px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--orange-lt); margin-bottom: 14px;
}
.tutki__hav { padding: 14px 0; border-top: 1px solid rgba(247,240,232,.12); }
.tutki__hav:first-of-type { border-top: none; padding-top: 0; }
.tutki__hav b { display: block; font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.tutki__hav p { font-size: 18px; font-weight: 500; line-height: 1.6; color: var(--cream); }
.tutki__tyhja { font-size: 18px; font-weight: 600; line-height: 1.6; color: var(--cream); }
.tutki__fine {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(247,240,232,.12);
  font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--mut);
}

/* Rajailmoitus: asiallinen tiedote eikä myyntipalkki — siksi neutraali pohja
   eikä oranssia hehkua. Se kerrotaan kerran, rauhallisesti. */
.done__card--gate { background: rgba(247,240,232,.05); border-color: var(--line); }
.done__gate-t { font-size: 18px; font-weight: 600; line-height: 1.55; color: var(--cream); }
.done__gate-t + .done__gate-t { margin-top: 10px; color: var(--mut); }
.done__k {
  font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange-lt); margin-bottom: 10px;
}
.done__report { font-size: 18px; font-weight: 600; line-height: 1.55; color: var(--cream); }
.done__goal-nm { font-size: 20px; font-weight: 800; color: var(--cream); margin-bottom: 6px; }
.done__goal-why { font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--mut); }
.done__stats { display: flex; gap: 12px; margin-top: 18px; }
.done__stat {
  flex: 1; text-align: center; padding: 16px 10px; border-radius: 16px;
  background: rgba(247,240,232,.04); border: 1px solid var(--line);
}
.done__stat b { display: block; font-size: 30px; font-weight: 900; color: var(--orange-lt); line-height: 1; }
.done__stat span { display: block; margin-top: 6px; font-size: 16px; font-weight: 700; color: var(--mut); }

/* Uteliaisuussilmukka — session lopun avoin silmukka ("jää kytemään"). */
.done__card--watch {
  position: relative; overflow: hidden; border-color: rgba(255,148,85,.3);
  background: radial-gradient(120% 100% at 50% 0%, rgba(242,99,34,.10), transparent 62%), rgba(247,240,232,.04);
}
.watch__back {
  position: relative; font-size: 16.5px; font-weight: 600; color: var(--mut); line-height: 1.5;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.watch__back b { color: var(--cream); font-weight: 800; }
.watch__glow {
  position: absolute; inset: -50% 0 auto 0; height: 120px; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0, rgba(255,148,85,.32), transparent 70%);
  filter: blur(28px); animation: watchGlow 3s var(--ease) infinite alternate;
}
.watch__k { position: relative; display: flex; align-items: center; gap: 8px; }
.watch__eye { font-size: 18px; line-height: 1; color: var(--orange-lt); animation: watchPulse 2.2s var(--ease) infinite; }
.watch__lead { position: relative; font-size: 18px; font-weight: 600; color: var(--cream); line-height: 1.5; margin-bottom: 14px; }
.watch__chip {
  position: relative; overflow: hidden; display: inline-block; font-size: 19px; font-weight: 800; color: var(--cream);
  background: rgba(242,99,34,.14); border: 1px solid rgba(242,99,34,.4); padding: 11px 18px; border-radius: 13px; margin-bottom: 14px;
}
.watch__scan {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,148,85,.28) 50%, transparent 70%);
  transform: translateX(-120%); animation: watchScan 3.4s var(--ease) infinite;
}
.watch__fog { position: relative; font-size: 17px; font-weight: 700; color: var(--orange-lt); }
@keyframes watchGlow { to { opacity: .55; transform: translateY(6px); } }
@keyframes watchPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes watchScan { 0% { transform: translateX(-120%); } 55%,100% { transform: translateX(120%); } }
.analyze__steps li.done .dot::after {
  content: "✓"; font-size: 16px; font-weight: 900; color: var(--green);
}
@media (prefers-reduced-motion: reduce) {
  .analyze__ring, .analyze__core, .analyze__steps li.on .dot::after { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   PALAUTE — pääviesti on iso. Se on se mistä maksetaan.
   ════════════════════════════════════════════════════════════ */
.verdict {
  border: 1px solid rgba(255,148,85,.24); border-radius: 22px;
  background: linear-gradient(165deg, rgba(242,99,34,.13), var(--card) 58%);
  padding: clamp(24px, 3.4vw, 38px); margin-bottom: 18px;
}
.verdict__k {
  font-size: 16px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--orange-lt); margin-bottom: 18px;
}
.verdict__h {
  font-size: clamp(1.35rem, 3vw, 1.95rem); font-weight: 900;
  letter-spacing: -.03em; line-height: 1.24; max-width: 34ch;
}

/* Vahvuudet ja kehityskohteet omina lohkoinaan */
/* Kahteen sarakkeeseen vasta kun molemmille jää oikeasti tilaa. Raja oli 330 px,
   jolloin sarakkeista tuli ~340 px levyisiä — ja kun oikeaan sarakkeeseen tuli
   ammattivertailu, teksti kulki neljän sanan rivinä. Henri 23.8.: "liian
   kapealla on nyt tämä jotenkin omituisesti". */
.blocks { display: grid; gap: 16px; }
/* Kaksi saraketta vasta leveällä ruudulla. Sivupalkki vie 232 px, joten
   1280 px:n ikkunassa sisältöalue on noin 940 px eli kumpikin lohko yli
   460 px. Sen alle mennään yhteen sarakkeeseen. auto-fit + minmax ei kelvannut:
   prosenttiarvo minmax():n sisällä teki raidasta epämääräisen eikä toinen
   sarake syntynyt millään leveydellä. */
/* 🔴 EI kahta saraketta (Henri 26.8.: "ei sivuttain näitä laatikoita vaan aina
   oma laatikko yksi kerrallaan"). Palauteruudulla luetaan ensin mikä sujui ja
   vasta sitten mihin keskitytään — vierekkäin ne kilpailevat katseesta. */
.block { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px; }
.block__k {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  margin-bottom: 16px;
}
.block--good .block__k { color: var(--green); }
.block--next .block__k { color: var(--orange-lt); }
.block__pill {
  border-radius: 999px; padding: 3px 9px; font-size: 16px; letter-spacing: .04em;
}
.block--good .block__pill { background: rgba(62,213,152,.16); }
.block--next .block__pill { background: rgba(255,148,85,.16); }

/* ════════════════════════════════════════════════════════════
   MITTARIT — luku yksin ei kerro mitään. Jokaisella on nyt
   merkitys ja yksi niistä on merkitty seuraavaksi askeleeksi.
   ════════════════════════════════════════════════════════════ */
.meter { padding: 16px 0; border-top: 1px solid var(--line); }
.meter:first-child { border-top: 0; padding-top: 0; }
.meter__top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.meter__name { font-weight: 800; font-size: 18px; }
.meter__v { margin-left: auto; font-weight: 900; font-size: 18px; letter-spacing: -.02em; }
.meter__tag {
  border-radius: 999px; padding: 3px 10px; font-size: 16px; font-weight: 800;
  letter-spacing: .04em; white-space: nowrap;
}
.meter__tag--next { background: rgba(255,148,85,.18); color: var(--orange-lt); }
.meter__tag--best { background: rgba(62,213,152,.16); color: var(--green); }
.meter__track { height: 9px; border-radius: 99px; background: rgba(247,240,232,.07); overflow: hidden; }
.meter__fill {
  height: 100%; border-radius: 99px; width: 0;
  background: linear-gradient(90deg, var(--orange), var(--orange-lt));
  transition: width .9s var(--ease);
}
.meter--next .meter__fill { background: linear-gradient(90deg, #FF7534, var(--orange-lt)); }
.meter--best .meter__fill { background: linear-gradient(90deg, #2FB37F, var(--green)); }
.meter__why { margin-top: 8px; font-size: 16.5px; font-weight: 600; color: var(--faint); line-height: 1.5; }

/* Seuraava askel palautteen jälkeen — ei umpikujaa */
.nextup {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border: 1px solid rgba(62,213,152,.3);
  background: linear-gradient(135deg, rgba(62,213,152,.12), rgba(62,213,152,.03));
  border-radius: 18px; padding: 20px 22px; margin-bottom: 18px;
}
.nextup__i {
  width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: rgba(62,213,152,.18); color: var(--green);
}
.nextup__i svg { width: 22px; height: 22px; }
.nextup__t { flex: 1; min-width: 200px; }
.nextup__t b { display: block; font-weight: 800; font-size: 18px; margin-bottom: 2px; }
.nextup__t span { color: var(--mut); font-size: 17px; font-weight: 600; }


/* ── Palautteen paloittelu: yksi kohta kerrallaan, ei seinää ────────────────
   Data on tärkeää, joten sitä ei saa hukuttaa. Otsikko näkyy aina,
   perustelu avautuu napauttamalla. ------------------------------------- */
.finding { border-top: 1px solid var(--line); }
.finding:first-of-type { border-top: 0; }
.finding > summary {
  list-style: none; cursor: pointer; padding: 15px 0;
  display: flex; align-items: center; gap: 12px;
}
.finding > summary::-webkit-details-marker { display: none; }
.finding__n {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center; font-weight: 900; font-size: 16px;
}
.block--good .finding__n { background: rgba(62,213,152,.18); color: var(--green); }
.block--next .finding__n { background: rgba(255,148,85,.18); color: var(--orange-lt); }
.finding__t { flex: 1; min-width: 0; font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.finding__chev {
  flex: none; color: var(--faint); font-size: 21px; line-height: 1;
  transition: transform .2s var(--ease);
}
.finding[open] .finding__chev { transform: rotate(90deg); }
.finding > summary:hover .finding__t { color: var(--orange-lt); }
.finding__body {
  padding: 0 0 18px 38px; font-size: 18px; font-weight: 600;
  color: var(--mut); line-height: 1.62;
}
.finding__body i { color: var(--faint); font-style: normal; }

/* Analyysi tyylikkäämmäksi: hillitympi ydin, ei hehkupalloa */
.analyze__core {
  background: linear-gradient(150deg, var(--orange-lt), var(--orange) 70%);
  box-shadow: 0 0 0 1px rgba(255,148,85,.35), 0 10px 34px rgba(242,99,34,.32);
}
.analyze__ring { border-color: rgba(255,148,85,.22); }
.analyze__steps li { font-size: 17.5px; }


/* ── MATKA: mitä on tehty, mitä on edessä ──────────────────────────────────
   Lasketaan samasta taksonomiasta jota autokoulupuoli käyttää. --------- */
.journey__top { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.journey__n {
  font-size: 2.3rem; font-weight: 900; letter-spacing: -.04em; line-height: 1;
  color: var(--orange-lt); flex: none;
}
.journey__n span { font-size: 18.5px; font-weight: 700; color: var(--faint); letter-spacing: 0; }
.journey__t { flex: 1; min-width: 200px; }
.journey__t b { display: block; font-weight: 800; font-size: 18px; }
.journey__t span { color: var(--faint); font-size: 16.5px; font-weight: 600; }

.journey__track { height: 9px; border-radius: 99px; background: rgba(247,240,232,.07); overflow: hidden; }
.journey__fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--orange), var(--orange-lt));
  transition: width .9s var(--ease);
}

.journey__k {
  font-size: 16px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--faint); margin: 22px 0 10px;
}
.journey__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.journey__list li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.journey__list li:first-child { border-top: 0; }
.journey__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255,148,85,.5);
}
.journey__nm { flex: 1; min-width: 0; font-weight: 700; font-size: 17.5px;
               overflow-wrap: anywhere; }
.journey__gr {
  font-size: 16px; font-weight: 700; color: var(--faint);
  /* 🔴 min-width: 0 on pakollinen. Ilman sitä flex-kohde ei suostu
     kutistumaan nowrap-tekstinsä alle, jolloin max-width: 40 % ei päde
     eikä ellipsiä synny — rivi vain työntää kortin reunan yli.
     Mitattu 390 px:ssä: rivi 359 px listan 316 px sisällä, koko sivu
     vieri väärään suuntaan 6 px. */
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%;
}
.journey__rest { margin-top: 12px; font-size: 16.5px; font-weight: 700; color: var(--faint); }
.journey__locked {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: 16.5px; font-weight: 700; color: var(--faint);
}


/* ════════════════════════════════════════════════════════════
   LUETTAVUUDEN ALARAJA — SITOVA (muisti: henri-ui-iso-fontti)
   Mikään teksti ei saa alittaa 16 px. Jos jokin ei mahdu,
   POISTA SISÄLTÖÄ — älä pienennä fonttia.
   Tämä lohko on viimeisenä, joten se voittaa yllä olevat.
   ════════════════════════════════════════════════════════════ */
body, .view, .flow, .card, .step, .journey { font-size: 18px; }
.fine, .quietbar, .apptop__sub, .meter__why, .journey__gr, .journey__rest,
.tile__l, .lessonrow__b span, .vault__t span, .readiness__t span,
.analyze__steps li, .plan__sub, .plan__save, .rowitem, .check,
.finding__body, .more__body p, .journey__t span, .step__note {
  font-size: 16.5px;
}
.lead, .hero__line, .step__p, .verdict__h, .finding__t, .threeitem__t b {
  font-size: inherit;
}
/* Versaalilaput: EI poikkeusta alarajaan. 16 px, aina lihavoitu. */
.eyebrow, .card__label, .step__k, .stepcrumb, .verdict__k, .block__k,
.journey__k, .analyze__steps li, .tile__l, .meter__tag, .tierchip {
  font-weight: 800;
}
.eyebrow, .card__label, .step__k, .stepcrumb, .verdict__k, .block__k,
.journey__k, .more__h, .hero__eyebrow, .practical__row b, .tile__l,
.awm-skgroup, .meter__tag {
  font-size: 16px;
  letter-spacing: .12em;
}

/* Käytännön tiedot juuri ennen lähtöä: kauanko ja missä. */
.practical {
  margin: 22px 0 0; border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; text-align: left;
}
.practical__row {
  display: flex; align-items: baseline; gap: 16px;
  padding: 15px 18px; border-top: 1px solid var(--line);
}
.practical__row:first-child { border-top: 0; }
.practical__row b {
  flex: none; min-width: 68px; font-weight: 800; font-size: 16px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--faint);
}
.practical__row span { flex: 1; font-weight: 700; font-size: 18px; line-height: 1.45; }

/* Kehitystilan huomio: raja ei estä, se kertoo. Poistetaan ennen julkaisua. */
.devnote {
  margin: 0 0 4px; padding: 14px 18px; border-radius: 14px;
  border: 1.5px solid rgba(255, 176, 32, .5); background: rgba(255, 176, 32, .12);
  color: #ffd894; font-size: 17px; line-height: 1.5;
}
.devnote b { color: #ffb020; }
.devnote__x {
  font: inherit; font-size: 16px; font-weight: 700; margin-left: 8px;
  background: none; border: 0; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════
   PREMIUM POLISH — elokuvamainen tunnelma. Kaikki kunnioittaa
   prefers-reduced-motionia (turvaverkko lohkon lopussa).
   ════════════════════════════════════════════════════════════ */

/* Napautuspalaute: fyysinen "painallus" (mobiili — ei hoveria). */
.lessonrow--tap, .opt, .plan, .tpick, .reco__item, .additem, .navitem, .btn, .awm-chip {
  transition: transform .13s var(--ease), border-color .14s var(--ease), background .14s var(--ease), box-shadow .14s var(--ease);
}
.lessonrow--tap:active, .opt:active, .plan:active, .tpick:active, .reco__item:active, .additem:active, .awm-chip:active { transform: scale(.985); }
.navitem:active { transform: scale(.96); }
@media (hover: hover) {
  .lessonrow--tap:hover, .reco__item:hover { transform: translateY(-1px); }
}

/* Kytkin saa jousen — pientä ylitystä, ei sarjakuvaa. */
.tswitch i { transition: transform .22s cubic-bezier(.34,1.56,.64,1), background .16s var(--ease); }

/* Syvyys: heron ja verdictin nostaminen irti taustasta — yhtenäinen varjokieli. */
.hero, .verdict {
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.55), 0 0 40px -30px rgba(242,99,34,.4);
}
.hero { position: relative; }

/* Tyhjätilat hengittävät — "suunniteltu tähän hetkeen", ei keskeneräinen. */
.empty { position: relative; overflow: hidden; }
.empty::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 50% 0%, rgba(242,99,34,.08), transparent 70%);
  animation: emptyBreathe 4s var(--ease) infinite;
}
@keyframes emptyBreathe { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* Analyysi: vaiheen ✓ napsahtaa sisään; barflow sammuu kun valmis. */
.analyze__steps li.done .dot::after { animation: pop .3s var(--ease) both; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
.analyze__bar--live.is-done::after { animation: none; opacity: 0; }

/* Done: ensi kerran tavoite saa kertaluontoisen hehkupulssin — katse "seuraavaan". */
.done__card--goal { animation: goalGlow 1.5s var(--ease) 1s both; }
@keyframes goalGlow {
  0%   { box-shadow: 0 0 0 0 rgba(242,99,34,0); }
  40%  { box-shadow: 0 0 0 6px rgba(242,99,34,.16), 0 14px 40px rgba(242,99,34,.22); }
  100% { box-shadow: 0 0 0 0 rgba(242,99,34,0); }
}

/* Isot luvut: tasavälinumerot ettei count-up hyppää leveyttä. */
.vault__n, .journey__n, .done__stat b, .ppanel__frac b, .ring__n, .tile__v, .milestone__n, .momentum__t {
  font-variant-numeric: tabular-nums;
}
.journey__n b { font: inherit; color: inherit; }

/* Hero-momentum-nauha: "missä mennään + mikä aukeaa kohta". */
.momentum { margin-bottom: 22px; }
.momentum__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.momentum__row .hero__eyebrow { margin-bottom: 0; }
.momentum__t {
  font-size: 19px; font-weight: 800; color: var(--cream);
  letter-spacing: -.01em; line-height: 1.35; margin-bottom: 12px;
}
.momentum__track { height: 6px; border-radius: 99px; background: rgba(247,240,232,.09); overflow: hidden; max-width: 340px; }
.momentum__track i {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--orange), var(--orange-lt));
  transition: width .85s var(--ease);
}
.streakpill {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px; font-size: 16px; font-weight: 800;
  color: var(--orange-lt); background: rgba(242,99,34,.14); border: 1px solid rgba(255,148,85,.34);
}
.streakpill svg { width: 15px; height: 15px; }
.streakpill--cool { color: var(--mut); background: rgba(247,240,232,.06); border-color: var(--line-2); }

/* Seuraava virstanpylväs -kortti (Edistyminen). */
.milestone {
  display: flex; align-items: center; gap: 18px; margin: 18px 0 6px;
  padding: 20px 22px; border-radius: 18px;
  background: rgba(242,99,34,.06); border: 1px solid rgba(242,99,34,.28);
}
.milestone__n {
  flex: none; text-align: center; font-size: 40px; font-weight: 900;
  color: var(--orange-lt); line-height: 1; letter-spacing: -.03em;
}
.milestone__n span { display: block; margin-top: 5px; font-size: 16px; font-weight: 700; color: var(--mut); letter-spacing: 0; }
.milestone__b { flex: 1; min-width: 0; }
.milestone__k { font-size: 16px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--orange-lt); margin-bottom: 6px; }
.milestone__b b { display: block; font-size: 20px; font-weight: 800; color: var(--cream); margin-bottom: 12px; }
.milestone__track { height: 6px; border-radius: 99px; background: rgba(247,240,232,.09); overflow: hidden; margin-bottom: 8px; }
.milestone__track i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--orange), var(--orange-lt)); transition: width .85s var(--ease); }
.milestone__b > span { font-size: 16px; font-weight: 700; color: var(--mut); }

/* Reveal-overlay: "jotain uutta aukesi" — elokuvamainen, ei konfettia. */
.reveal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(12,8,5,.72); backdrop-filter: blur(6px); animation: revfade .4s var(--ease) both; }
.reveal__card {
  position: relative; overflow: hidden; max-width: 440px; margin: 20px;
  border: 1px solid rgba(255,148,85,.3); border-radius: 24px;
  background: radial-gradient(130% 100% at 50% 0%, rgba(242,99,34,.24), transparent 60%), var(--card);
  padding: 40px 32px; text-align: center; animation: revrise .5s var(--ease) both; }
.reveal__glow { position: absolute; inset: -40% 0 auto 0; height: 160px;
  background: radial-gradient(60% 100% at 50% 0, rgba(255,148,85,.5), transparent 70%);
  filter: blur(30px); animation: revglow 2.4s var(--ease) infinite alternate; }
.reveal__eye { position: relative; font-size: 16px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-lt); }
.reveal__h { position: relative; font-size: 30px; font-weight: 900; letter-spacing: -.03em; margin: 12px 0 14px; color: var(--cream); }
.reveal__p { position: relative; font-size: 18px; font-weight: 600; color: var(--mut); line-height: 1.5; margin-bottom: 26px; }
.reveal__card .btn { position: relative; }
@keyframes revfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes revrise { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes revglow { to { opacity: .5; transform: translateY(8px); } }

/* Matkakortti — jaettava kuva koko matkasta. */
.mkintro {
  margin-top: 20px; padding: 24px; border-radius: 18px;
  background: rgba(242,99,34,.06); border: 1px solid rgba(242,99,34,.28);
}
.mkintro__k { font-size: 16px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--orange-lt); margin-bottom: 10px; }
.mkintro__h { font-size: 22px; font-weight: 800; color: var(--cream); letter-spacing: -.01em; margin-bottom: 8px; }
.mkintro__p { font-size: 18px; font-weight: 600; color: var(--mut); line-height: 1.5; margin-bottom: 18px; }

.mkcard {
  position: relative; overflow: hidden; border-radius: 24px; padding: 32px 30px;
  background: radial-gradient(120% 80% at 15% 0%, rgba(242,99,34,.22), transparent 55%), var(--bg);
  border: 1px solid rgba(247,240,232,.14);
}
.mkcard__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.mkcard__eye { font-size: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-lt); }
.mkcard__brand { display: inline-flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 800; color: var(--cream); }
.mkcard__logo { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 17px; font-weight: 900; color: #fff;
  background: radial-gradient(circle at 35% 25%, var(--orange-lt), var(--orange) 70%); }
.mkcard__stats { display: flex; gap: 12px; margin-bottom: 26px; }
.mkcard__stat { flex: 1; text-align: center; }
.mkcard__stat b { display: block; font-size: 34px; font-weight: 900; color: var(--orange-lt); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.mkcard__stat span { display: block; margin-top: 8px; font-size: 16px; font-weight: 700; color: var(--mut); line-height: 1.3; }
.mkcard__kv { text-align: center; margin-bottom: 24px; }
.mkcard__kvn { font-size: 44px; font-weight: 900; color: var(--green); line-height: 1; font-variant-numeric: tabular-nums; }
.mkcard__kv span { display: block; margin-top: 6px; font-size: 16px; font-weight: 700; color: var(--mut); }
.mkcard__kv--collect { margin-bottom: 20px; }
.mkcard__kv--collect span { margin-top: 0; font-size: 16px; font-weight: 600; color: var(--faint); font-style: italic; }
.mkcard__nyt { font-size: 18px; font-weight: 700; color: var(--cream); margin-bottom: 20px; }
.mkcard__nyt b { color: var(--orange-lt); }
.mkcard__bars { display: grid; gap: 13px; margin-bottom: 24px; }
.mkbar { display: grid; grid-template-columns: 1fr; gap: 7px; }
.mkbar__nm { font-size: 16px; font-weight: 700; color: var(--mut); }
.mkbar__t { height: 10px; border-radius: 99px; background: rgba(247,240,232,.09); overflow: hidden; }
.mkbar__t i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--orange), var(--orange-lt)); transition: width .8s var(--ease); }
.mkcard__foot { font-size: 16px; font-weight: 600; color: var(--faint); margin-bottom: 6px; }
.mkcard__tag { font-size: 18px; font-weight: 800; color: var(--cream); }

/* ── Personoitu maksumuuri-teaser (s-pro) ─────────────────────────────────
   Näyttää MUODON + oikeat lasketut faktat, sumentaa vain sanallisen palautteen. */
.pteas {
  border: 1px solid rgba(255,148,85,.24); border-radius: 22px;
  background: linear-gradient(165deg, rgba(242,99,34,.13), var(--card) 60%);
  padding: clamp(20px, 3vw, 30px); margin: 22px 0 8px;
}
.pteas__eye {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--orange-lt); margin-bottom: 18px;
}
.pteas__eye svg { width: 18px; height: 18px; flex: none; }
.pteas__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.pteas__stat {
  background: rgba(247,240,232,.05); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 12px; text-align: center;
}
.pteas__stat b {
  display: block; font-size: 30px; font-weight: 900; line-height: 1;
  letter-spacing: -.03em; color: var(--cream); font-variant-numeric: tabular-nums;
}
.pteas__stat span {
  display: block; margin-top: 7px; font-size: 16px; font-weight: 700; color: var(--mut);
}
/* Sumennettu palaute-kortti — sisältö lukossa, muoto tunnistettava. */
.pteas__report {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: 18px; padding: 22px 22px 24px;
}
.pteas__lockchip {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; color: var(--orange-lt);
  display: flex; align-items: center; justify-content: center;
  background: rgba(242,99,34,.14); border-radius: 999px;
}
.pteas__lockchip svg { width: 19px; height: 19px; }
.pteas__rk {
  font-size: 16px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 16px; padding-right: 40px;
}
.pteas__blur { display: grid; gap: 11px; margin-bottom: 4px; }
.pteas__bl {
  display: block; height: 15px; border-radius: 99px;
  background: linear-gradient(90deg, rgba(247,240,232,.20), rgba(247,240,232,.09));
  filter: blur(4px); opacity: .85;
}
.pteas__bl:nth-child(1) { width: 96%; }
.pteas__bl:nth-child(2) { width: 88%; }
.pteas__bl:nth-child(3) { width: 62%; }
.pteas__block { margin-top: 20px; }
.pteas__bk {
  font-size: 16px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  margin: 16px 0 12px;
}
.pteas__bk--good { color: var(--green); }
.pteas__bk--next { color: var(--orange-lt); }
.pteas__block .pteas__bl:nth-child(even) { width: 80%; }
.pteas__lockrow {
  display: flex; align-items: flex-start; gap: 11px; margin-top: 18px;
  font-size: 16.5px; font-weight: 600; line-height: 1.5; color: var(--mut);
}
.pteas__lockrow svg { width: 22px; height: 22px; flex: none; color: var(--orange-lt); margin-top: 1px; }
/* Rehellinen maistiaista: oikea mennyt palaute — todiste laadusta. */
.pteas__sample {
  margin-top: 18px; padding: 18px 20px;
  background: rgba(62,213,152,.07); border: 1px solid rgba(62,213,152,.22);
  border-radius: 16px;
}
.pteas__samplek {
  font-size: 16px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green);
}
.pteas__sample p {
  margin: 8px 0 0; font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--cream);
}

/* ── Koevalmius-sydänlyönti (Tänään-hero, done, Edistyminen) ──────────────────
   Iso mittari joka NOUSEE joka ajolla → näkyvä eteneminen kohti koetta. */
.kvmeter {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 22px; padding: 20px 22px; border-radius: 20px;
  background: linear-gradient(150deg, rgba(242,99,34,.13), var(--card) 62%);
  border: 1px solid rgba(255,148,85,.22);
}
.kvmeter--edist, .kvmeter--done { margin-top: 18px; }
/* "Kerätään pohjatietoa" — liian ohut data: hillitty, ei rengasta eikä isoa lukua. */
.kvmeter--collect {
  background: rgba(247,240,232,.04);
  border-color: var(--line);
}
.kvmeter--collect .kvmeter__k { color: var(--faint); }
.kvmeter--up {
  border-color: rgba(62,213,152,.42);
  background: linear-gradient(150deg, rgba(62,213,152,.15), var(--card) 62%);
}
.kvmeter__ring { position: relative; width: 112px; height: 112px; flex: none; }
.kvmeter__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.kvmeter__bg { fill: none; stroke: rgba(247,240,232,.10); stroke-width: 8; }
.kvmeter__fg {
  fill: none; stroke: var(--orange); stroke-width: 8; stroke-linecap: round;
  transition: stroke-dashoffset 1.2s var(--ease);
}
.kvmeter--up .kvmeter__fg { stroke: var(--green); }
.kvmeter__num { position: absolute; inset: 0; display: grid; place-items: center; }
.kvmeter__num b {
  font-size: 40px; font-weight: 900; letter-spacing: -.04em; line-height: 1;
  color: var(--cream); font-variant-numeric: tabular-nums;
}
.kvmeter__up-badge {
  position: absolute; top: 2px; right: -4px;
  background: var(--green); color: #0c2a1e;
  font-size: 16px; font-weight: 900; padding: 3px 10px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(62,213,152,.35);
}
/* Lasku ei ole virhe vaan tieto, joten se ei ole punainen. Meripihka erottuu
   noususta muttei huuda: koevalmius on käytöslaatu ja vaikeampi ajokerta
   laskee sitä ihan luonnostaan. */
.kvmeter__down-badge {
  position: absolute; top: 2px; right: -4px;
  background: var(--amber); color: #2a1e05;
  font-size: 16px; font-weight: 900; padding: 3px 10px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(255,176,32,.30);
}
.kvmeter--down {
  border-color: rgba(255,176,32,.34);
  background: linear-gradient(150deg, rgba(255,176,32,.10), var(--card) 62%);
}
.kvmeter--down .kvmeter__fg { stroke: var(--amber); }
.kvmeter--down .kvmeter__k { color: var(--amber); }
.kvmeter__tx { flex: 1; min-width: 190px; }
.kvmeter__k {
  font-size: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange-lt); margin-bottom: 6px;
}
.kvmeter--up .kvmeter__k { color: var(--green); }
.kvmeter__tx b { display: block; font-size: 20px; font-weight: 800; color: var(--cream); line-height: 1.3; }
.kvmeter__tx span { display: block; margin-top: 6px; font-size: 16.5px; font-weight: 600; color: var(--mut); line-height: 1.45; }

/* Turvaverkko: liike pois jos käyttäjä niin haluaa (yksittäissäännöt voivat opt-inata). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .momentum__track i, .milestone__track i, .mkbar__t i, .kvmeter__fg { transition: none !important; }
  .reveal__glow { animation: none !important; }
  .watch__glow, .watch__scan, .watch__eye { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SISÄÄNTULO: etusivu (s-koti) + kartoituksen tilannekuva (s-kart)
   Fontit: leipä 18px, apuinfo 16.5px, versaalilaput 16px (BRIEF 6.1).
   ══════════════════════════════════════════════════════════════════════════ */

.wide { max-width: 1120px; margin: 0 auto; }

/* Pystykeskitys: sisältö katseen tasolle, ei yläreunaan roikkumaan.
   `safe center` — jos sisältö on näyttöä korkeampi, se alkaa ylhäältä
   eikä leikkaudu. Koskee vain sisääntuloa ja lomakeruutuja. */
#s-koti.on, #s-onb.on, #s-auth.on, #s-kart.on, #s-kaytanto.on {
  display: grid; align-content: safe center;
  min-height: calc(100vh - 116px);
}
#s-onb.on { max-width: 700px; }

/* 🔴 ROBOTTI EI SAA HYPPIÄ (Henri 20.9.2026).
   Kartoitusruutu oli pystykeskitetty yllä olevalla säännöllä. Kun kysymys
   vaihtui, vastausvaihtoehtojen korkeus muuttui — kaksi vaihtoehtoa, viisi
   vaihtoehtoa, tekstikenttä — ja KOKO lohko keskittyi uudelleen. Robotti ja
   otsikko liikkuivat joka vastauksella vaikka ne eivät itse muuttuneet.

   Nyt ruutu alkaa yläreunasta ja kysymysalueella on kiinteä vähimmäiskorkeus.
   Robotti, sen teksti ja pisteet pysyvät pikselilleen paikallaan koko
   kartoituksen ajan ja vain kysymys vaihtuu niiden alla. */
#s-onb.on { align-content: start; padding-top: 22px; }
#onbStage { min-height: 430px; }
@media (max-width: 640px) { #onbStage { min-height: 400px; } }

/* Etusivu: myyntipuhe vasemmalle, askeleet oikealle. Ei suikaletta. */
.koti__grid {
  display: grid; gap: 40px; align-items: start;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}
.koti__act { max-width: 420px; }
.koti__side { display: grid; gap: 22px; align-content: start; }
.koti__peek .kart__lead { font-size: 19px; }
.kart__phases--mini .kart__ph { padding: 7px 0; grid-template-columns: 26px 1fr auto; }
.kart__phases--mini .kart__ph-n { font-size: 16.5px; }
.koti__steps { list-style: none; counter-reset: koti; margin: 0; padding: 0; }
.koti__steps li {
  counter-increment: koti;
  position: relative; padding: 14px 0 14px 50px;
  border-top: 1px solid var(--line);
}
.koti__steps li:last-child { border-bottom: 1px solid var(--line); }
.koti__steps li::before {
  content: counter(koti);
  position: absolute; left: 0; top: 13px;
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(242,99,34,.16); color: var(--orange-lt);
  font-size: 17px; font-weight: 900;
}
.koti__steps b { display: block; font-size: 18px; font-weight: 800; color: var(--cream); line-height: 1.35; }
.koti__steps span { display: block; margin-top: 3px; font-size: 16.5px; font-weight: 600; color: var(--mut); line-height: 1.45; }

/* Tilannekuva: mittarit yli koko leveyden, kortit kahteen sarakkeeseen. */
.kart__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0 18px; }
.kart__grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.kart__col { display: grid; gap: 18px; align-content: start; }
.kart__cta { max-width: 460px; margin: 26px auto 0; }
.kart__next { margin-top: 18px; }
.koti__steps--tight li { padding: 11px 0 11px 46px; }
.koti__steps--tight li::before { top: 10px; }

.kart__lead {
  font-size: 21px; font-weight: 800; color: var(--orange-lt);
  line-height: 1.3; margin: 0 0 10px;
}
.kart__p { font-size: 18px; font-weight: 600; color: var(--mut); line-height: 1.55; margin: 10px 0 0; }
.kart__list { margin: 8px 0 0; padding: 0; list-style: none; }
.kart__list li {
  font-size: 18px; font-weight: 700; color: var(--cream);
  line-height: 1.4; padding: 7px 0 7px 22px; position: relative;
}
.kart__list li::before {
  content: ''; position: absolute; left: 2px; top: 15px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
}

/* Opetusrungon kuusi vaihetta listana. Ei palkkeja — luku on vaiheen koko,
   ei edistymä. Palkki luki väärin (pisin = "valmis"). */
.kart__phases { list-style: none; margin: 0; padding: 0; }
.kart__ph {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.kart__ph:last-child { border-bottom: none; }
.kart__ph-i {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(247,240,232,.07); color: var(--faint);
  font-size: 16px; font-weight: 800;
}
.kart__ph-n { font-size: 17px; font-weight: 700; color: var(--mut); line-height: 1.3; }
.kart__ph-v { font-size: 16.5px; font-weight: 700; color: var(--faint); white-space: nowrap; }
.kart__ph-tag {
  display: inline-block; margin-left: 10px; vertical-align: 1px;
  background: rgba(242,99,34,.16); color: var(--orange-lt);
  font-size: 16px; font-weight: 800; padding: 2px 9px; border-radius: 999px;
}
.kart__ph--past .kart__ph-n, .kart__ph--past .kart__ph-v { color: var(--faint); }
.kart__ph--now .kart__ph-i { background: var(--orange); color: #fff; }
.kart__ph--now .kart__ph-n { color: var(--cream); font-weight: 800; }
.kart__ph--now .kart__ph-v { color: var(--orange-lt); font-weight: 800; }

@media (max-width: 900px) {
  .koti__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .koti__act { max-width: none; }
  .kart__grid { grid-template-columns: minmax(0, 1fr); }
  .kart__tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 520px) {
  .kart__ph { grid-template-columns: 26px 1fr; row-gap: 2px; }
  .kart__ph-v { grid-column: 2; }
}


/* Käytännön asiat: rastitettava tarkistuslista. Koko rivi on nappi. */
.kayt__list { display: grid; gap: 10px; }
.kayt {
  display: grid; grid-template-columns: 30px 1fr; gap: 13px; align-items: start;
  width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  background: rgba(247,240,232,.04); border: 1.5px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 15px 16px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.kayt:hover { border-color: var(--orange); }
.kayt__box {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  border: 2px solid var(--line-2); color: #fff; font-size: 17px; font-weight: 900;
}
.kayt__tx b { display: block; font-size: 18px; font-weight: 800; color: var(--cream); line-height: 1.35; }
.kayt__tx span { display: block; margin-top: 3px; font-size: 16.5px; font-weight: 600; color: var(--mut); line-height: 1.45; }
.kayt__tx i { display: block; margin-top: 6px; font-size: 16px; font-style: normal; font-weight: 600; color: var(--faint); line-height: 1.45; }
.kayt--on { background: rgba(62,213,152,.07); border-color: rgba(62,213,152,.45); }
.kayt--on .kayt__box { background: var(--green); border-color: var(--green); color: #0c2a1e; }
.kayt--on .kayt__tx b { color: var(--cream); }

/* Moottorikortti: mikä AjoWeppi on. Kuva + kolme lukua + kolme lausetta —
   ei kolmea kappaletta tekstiä, joita kukaan ei tässä kohtaa lue. */
.engine { display: grid; gap: 18px; }
.engine__top { display: grid; grid-template-columns: 116px 1fr; gap: 18px; align-items: center; }
.engine__viz { position: relative; width: 108px; height: 108px; }
.engine__core {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px;
  margin: -27px 0 0 -27px; border-radius: 16px; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 25%, var(--orange-lt), var(--orange) 70%);
  box-shadow: 0 8px 30px rgba(242,99,34,.45);
  animation: logoBeat 2.4s var(--ease) infinite;
}
.engine__core b { color: #fff; font-size: 28px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.engine__h { font-size: 27px; font-weight: 900; letter-spacing: -.03em; color: var(--cream); line-height: 1.1; margin: 2px 0 0; }
.engine__lead { font-size: 18px; font-weight: 700; color: var(--orange-lt); line-height: 1.4; margin: 8px 0 0; }

.engine__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.engine__stats > div {
  background: rgba(242,99,34,.08); border: 1px solid rgba(242,99,34,.22);
  border-radius: var(--radius-sm); padding: 13px 10px; text-align: center;
}
.engine__stats b {
  display: block; font-size: 26px; font-weight: 900; letter-spacing: -.04em;
  color: var(--orange-lt); line-height: 1.05;
}
.engine__stats span { display: block; margin-top: 4px; font-size: 16px; font-weight: 700; color: var(--mut); line-height: 1.3; }

@media (max-width: 520px) {
  .engine__top { grid-template-columns: 88px 1fr; gap: 14px; }
  .engine__viz { width: 84px; height: 84px; }
  .engine__stats { grid-template-columns: 1fr; }
}

/* Tervetuloa + esittely ensimmäisellä kerralla. */
.terve__viz { position: relative; width: 132px; height: 132px; margin: 0 auto 26px; }
.tour__i {
  width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 22px;
  display: grid; place-items: center;
  background: rgba(242,99,34,.14); color: var(--orange-lt);
  box-shadow: 0 10px 34px rgba(242,99,34,.18);
}
.tour__i svg { width: 32px; height: 32px; }
.tour__h { font-size: clamp(1.6rem, 3.4vw, 2.1rem); text-align: center; line-height: 1.2; margin-bottom: 18px; }
.tour__p { font-size: 18px; font-weight: 600; color: var(--mut); line-height: 1.55; margin: 0 0 14px; text-align: center; }
#s-terve.on, #s-tour.on {
  display: grid; align-content: safe center;
  min-height: calc(100vh - 116px);
}

/* Monivalintakysymys: rasti + teksti, ei automaattista etenemistä. */
.q-apu { font-size: 16.5px; font-weight: 600; color: var(--faint); text-align: center; margin: -18px 0 22px; }
.opt--multi { display: grid; grid-template-columns: 30px 1fr; gap: 13px; align-items: center; }
.opt__box {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  border: 2px solid var(--line-2); color: #fff; font-size: 17px; font-weight: 900;
}
.opt--multi.selected { background: rgba(242,99,34,.10); border-color: var(--orange); }
.opt--multi.selected .opt__box { background: var(--orange); border-color: var(--orange); }

/* Opetuspolku: alkukartoituksessa arvioitu taito. Erottuu tarkoituksella
   oikeasta toistolaskurista — arvio ei ole mittaus. Katkoviiva = kesken,
   yhtenäinen vihreä = opettaja on vahvistanut. Lappu on nappi: siitä pääsee
   kertomaan onko taito jo harjoiteltu. */
.psuor__arvio {
  flex: none; font-family: inherit; font-size: 16px; font-weight: 800; color: var(--faint);
  background: rgba(247,240,232,.07); border: 1px dashed var(--line-2);
  padding: 3px 11px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.psuor__arvio:hover { color: var(--cream); border-color: var(--orange); background: rgba(242,99,34,.10); }
.psuor__arvio--ok {
  color: var(--green); border-style: solid; border-color: rgba(62,213,152,.45);
  background: rgba(62,213,152,.12);
}
.psuor__arvio--ok:hover { color: var(--green); border-color: var(--green); background: rgba(62,213,152,.18); }

/* Päätösrivi alustavalle merkinnälle: yksi kysymys, kaksi nimettyä nappia.
   Ei kiertävää näpäytystä — nimetty nappi kertoo mitä tapahtuu (BRIEF 6.4). */
.psuor__paatos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 2px 0 12px; padding: 14px 16px;
  background: rgba(242,99,34,.06); border: 1px solid rgba(255,148,85,.22); border-radius: 14px;
}
.psuor__paatosq { flex: 1; min-width: 210px; font-size: 16.5px; font-weight: 700; color: var(--mut); }
.psuor__pb {
  flex: none; font-family: inherit; font-size: 16.5px; font-weight: 800; color: var(--cream);
  background: rgba(247,240,232,.06); border: 1.5px solid var(--line-2);
  padding: 9px 17px; border-radius: 999px; cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.psuor__pb:hover { border-color: var(--orange); background: rgba(242,99,34,.12); }
.psuor__pb--ok { color: var(--green); border-color: rgba(62,213,152,.5); }
.psuor__pb--ok:hover { color: var(--green); border-color: var(--green); background: rgba(62,213,152,.14); }
.psuor__pb[disabled] { color: var(--mut); border-color: var(--line); background: none; cursor: default; }
.kart__more { color: var(--faint) !important; font-weight: 700 !important; }
.kart__more::before { display: none !important; }

/* Etusivun uusi ilme: lähtölaukaus, ei ohjekirja. */
.koti__h {
  font-size: clamp(2.4rem, 5.6vw, 4rem); line-height: 1.02; letter-spacing: -.045em;
  margin: 6px 0 0;
}
.btn--iso { min-height: 62px; font-size: 20px; letter-spacing: -.01em; }
.koti__path {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px;
  counter-reset: kpath;
}
.koti__path li {
  counter-increment: kpath;
  font-size: 16px; font-weight: 800; color: var(--faint);
  display: flex; align-items: center; gap: 8px;
}
.koti__path li::before {
  content: counter(kpath);
  width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  background: rgba(247,240,232,.07); color: var(--faint); font-size: 16px; font-weight: 900;
}
.koti__path li:not(:last-child)::after { content: '›'; margin-left: 6px; color: rgba(247,240,232,.25); }
.koti__path li:last-child { color: var(--orange-lt); }
.koti__path li:last-child::before { background: rgba(242,99,34,.18); color: var(--orange-lt); }
.koti__peek .engine__top { margin-bottom: 16px; }
.koti__peek .kart__p { margin-top: 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   YLÄLAIDAN PALUU + POISTUMISVARMISTUS
   ══════════════════════════════════════════════════════════════════════════ */

/* Pitkillä ruuduilla alalaidan paluulinkki on näytön ulkopuolella eikä sitä
   löydä. Sama toiminto myös ylös, pillerinä ettei se sekoitu otsikkoon. */
.flowback {
  /* Ruutu voi olla grid → ilman näitä nappi venyisi koko leveydelle. */
  display: inline-flex; align-items: center; gap: 6px;
  width: fit-content; align-self: start; justify-self: start;
  margin: 0 0 20px; padding: 9px 16px;
  font-family: inherit; font-size: 16.5px; font-weight: 700; color: var(--mut);
  background: rgba(247,240,232,.05); border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; text-align: left;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.flowback:hover { color: var(--cream); border-color: var(--orange); background: rgba(242,99,34,.10); }
.flowback[hidden] { display: none; }

.exitask {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px;
  background: rgba(10,7,5,.74); backdrop-filter: blur(6px);
  animation: exitIn .18s var(--ease);
}
.exitask[hidden] { display: none; }
@keyframes exitIn { from { opacity: 0; } to { opacity: 1; } }
.exitask__box {
  width: 100%; max-width: 460px; padding: 32px 30px; border-radius: 22px;
  background: #211610; border: 1px solid rgba(255,148,85,.28);
  box-shadow: 0 26px 70px rgba(0,0,0,.6);
}
.exitask__box h2 { font-size: 27px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 12px; }
.exitask__box p { font-size: 18px; font-weight: 600; color: var(--mut); line-height: 1.5; margin: 0 0 26px; }
.exitask__act { display: grid; gap: 12px; justify-items: center; }
.exitask__act .btn { width: 100%; }
@media (prefers-reduced-motion: reduce) { .exitask { animation: none; } }

/* Opetuspolun portaittainen avaus: lista jatkuu, mutta ei kaadu kerralla niskaan. */
.palisaa {
  display: block; width: 100%; margin: 4px 0 6px; padding: 14px 18px;
  font-family: inherit; font-size: 17px; font-weight: 800; color: var(--orange-lt);
  background: rgba(242,99,34,.07); border: 1px dashed rgba(255,148,85,.34);
  border-radius: 14px; cursor: pointer; text-align: center;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.palisaa:hover { background: rgba(242,99,34,.14); border-color: var(--orange); color: var(--cream); }

/* ══════════════════════════════════════════════════════════════════════════
   ESITTELY — OPASTUSLAPUT APIN PÄÄLLÄ
   Reikä tehdään valtavalla box-shadowilla: se pimentää kaiken paitsi kohteen,
   ilman erillistä maskia tai neljää päällekkäistä laatikkoa.
   ══════════════════════════════════════════════════════════════════════════ */
.coach { position: fixed; inset: 0; z-index: 180; animation: coachIn .2s var(--ease); }
.coach[hidden] { display: none; }
@keyframes coachIn { from { opacity: 0; } to { opacity: 1; } }
.coach__hole {
  position: fixed; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(10,7,5,.80), 0 0 0 2px var(--orange), 0 0 26px rgba(242,99,34,.55);
  transition: left .28s var(--ease), top .28s var(--ease), width .28s var(--ease), height .28s var(--ease);
}
.coach__hole[hidden] { display: none; }
.coach__box {
  /* width EIKA pelkka max-width: laatikko on position:fixed, joten ilman
     leveytta se kutistuu sisaltonsa mittaiseksi. Keskitetyssa haarassa
     (kohdetta ei loydy) JS ei aseta leveytta lainkaan, ja puhelimessa se
     haara on tavallinen koska osa kohteista on piilotetussa sivupalkissa.
     min() pitaa lapun 16 px:n marginaalilla reunoista kaikilla ruuduilla. */
  position: fixed; width: min(430px, calc(100vw - 32px));
  padding: 22px 26px 22px; border-radius: 20px;
  /* 🔴 VAALEA KORTTI TUMMAN SOVELLUKSEN PAALLA (Henri 17.9.2026).
     Aiemmin lappu oli lapinakyva tumma laatikko: sama tausta, samat oranssit
     kuvakkeet ja samat valkeat tekstit kuin sovelluksessa. Kayttaja ei
     hahmottanut sita erilliseksi opastukseksi vaan luki sita osana sivua.

     Vaalea kortti ratkaisee sen ilman yhtaakaan lisasanaa: se on selvasti
     "paalla" eika "osa". Sumennus jaa reunoille ja varjoon, joten kohde nakyy
     yha lapun ymparilta. Oranssi pysyy toiminnan varina (nappi) - se ei ole
     enaa myos taustan, otsikon ja kuvakkeen vari yhta aikaa. */
  background: linear-gradient(168deg, #FFFDFA, #F4EADF 62%, #EFE2D4);
  color: #241A12;
  border: 1px solid rgba(36,26,18,.14);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.35) inset,
              0 0 64px rgba(242,99,34,.16);
  transition: left .28s var(--ease), top .28s var(--ease);
}
/* Otsikkorivi: kuvake, monesko lappu ja pisteet samalla rivilla. */
.coach__hd { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.coach__ikoni {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--orange), #D2500F);
  box-shadow: 0 6px 16px rgba(242,99,34,.34);
}
.coach__ikoni svg { width: 22px; height: 22px; color: #fff; }
.coach__vaihe {
  font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #9A6134;
}
/* Pisteet oikeaan reunaan ja tummiksi: vaalealla kortilla valkoiset katosivat. */
.coach__box .dots { margin: 0 0 0 auto; }
.coach__box .dots span { background: rgba(36,26,18,.18); }
.coach__box .dots span.done { background: rgba(36,26,18,.34); }
.coach__box .dots span.active { background: var(--orange); }
/* Toissijaiset linkit vaalealla pohjalla. Ilman tata ne olivat kermanvarisia
   eli kaytannossa nakymattomia. */
.coach__box .btn-link { color: #7A5433; }
.coach__box .btn-link:hover { color: var(--orange); }

/* Korostettu kohde valikossa: se kuvake josta lappu juuri nyt kertoo.
   Rengas (.coach__hole) kertoo paikan, tama nostaa itse kuvakkeen. */
.tour-korosta { position: relative; z-index: 181; }
.tour-korosta .navitem__i {
  color: var(--orange-lt);
  transform: scale(1.18);
  filter: drop-shadow(0 0 10px rgba(255,148,85,.85));
  transition: transform .3s var(--ease);
}
.tour-korosta > span:not(.navitem__i) { color: var(--cream); }
@media (prefers-reduced-motion: reduce) {
  .tour-korosta .navitem__i { transform: none; }
}
/* Jos kohdetta ei löydy (kapea ruutu, näkymä kesken), lappu keskelle. */
.coach__box--keskella { left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* 🔴 VARIT: vaalea kortti (ks. .coach__box yllä). Nama saannot tulevat
   tiedostossa MYOHEMMIN kuin varimaarittelyt, joten varit ovat TASSA eivatka
   siella - muuten cream-teksti jai kermanvalkoiselle kortille eli
   nakymattomiin. */
.coach__box h2 { font-size: 25px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 10px; color: #1C140E; }
.coach__box p { font-size: 18px; font-weight: 600; color: #4A3A2C; line-height: 1.55; margin: 0 0 22px; }
.coach__act { display: grid; gap: 10px; justify-items: center; }
.coach__act .btn { width: 100%; }
.coach__act .btn-link[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .coach { animation: none; }
  .coach__hole, .coach__box { transition: none; }
}

/* ---------- Kirjautumisruudun saate + tuote-esittely ----------
   Ruutu ei aiemmin kertonut mihin tuotteeseen ollaan liittymässä. */
.authfrom {
  display: flex; gap: 13px; align-items: flex-start;
  margin: 0 0 20px; padding: 16px 18px; border-radius: 14px;
  background: rgba(62,213,152,.10); border: 1px solid rgba(62,213,152,.30);
}
.authfrom__ic {
  flex: none; width: 26px; height: 26px; border-radius: 999px;
  background: var(--green); color: #0E0A07;
  display: grid; place-items: center; font-weight: 900; font-size: 16px;
}
.authfrom b { display: block; font-size: 17px; color: var(--cream); margin-bottom: 3px; }
.authfrom span { font-size: 16px; color: var(--mut); line-height: 1.55; }

.authwhat {
  margin: 0 0 22px; padding: 18px 20px; border-radius: 14px;
  background: rgba(247,240,232,.04); border: 1px solid var(--line);
}
.authwhat__head {
  font-size: 16px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--orange-lt); margin-bottom: 13px;
}
.authwhat__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.authwhat__list li {
  position: relative; padding-left: 26px; font-size: 16.5px;
  line-height: 1.55; color: var(--mut);
}
.authwhat__list li::before {
  content: ''; position: absolute; left: 4px; top: 9px;
  width: 7px; height: 7px; border-radius: 999px; background: var(--orange);
}
.authwhat__list b { color: var(--cream); font-weight: 800; }

/* ---------- Vahvistuskoodin kenttä ----------
   Iso, väljä ja monospace: kahdeksan numeroa pitää pystyä lukemaan
   sähköpostista ja tarkistamaan silmällä ilman että ne sekoittuvat. */
.koodikentta {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 30px; font-weight: 700; letter-spacing: .22em;
  text-align: center; min-height: 66px; padding: 12px 10px;
}
.koodikentta::placeholder {
  font-family: inherit; font-size: 19px; letter-spacing: .06em; font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   TILANNEKUVA  (tk-*)
   Kolme kaistaa: missä olemme · mitä opetella · mitä suorittaa.
   Rakennettu mobiili edellä: nauha kääntyy pystyaikajanaksi eikä
   mitään piiloteta vaakavierityksen taakse.
   ════════════════════════════════════════════════════════════ */
@property --p { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.tktop {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 6px;
}
.tktop__h { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; letter-spacing: -.03em; }
.tktop__k { font-size: 16px; font-weight: 600; color: var(--faint); margin-top: 6px; }
.tktop__k b { color: var(--mut); font-weight: 800; }
.tkghost {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-2);
  border-radius: 12px; padding: 11px 18px; background: none;
  font-size: 16px; font-weight: 700; color: var(--mut); cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.tkghost:hover { border-color: var(--orange); color: var(--cream); background: var(--card-2); }
.tkghost svg { width: 20px; height: 20px; flex: none; }

/* ── Vaihenauha ─────────────────────────────────────────── */
/* 🔴 minmax(0, 1fr) EIKÄ 1fr. Pelkkä 1fr on minmax(auto, 1fr), jolloin sisältö
   saa kasvattaa saraketta: valittu kortti lihavoi otsikkonsa (.tkstep.on
   .tkstep__t on 800), leveni 200 → 254 px ja siirsi KAIKKIEN muiden korttien
   rajat. Klikkaus osui silloin eri korttiin kuin mihin tähtäsi, koska raja oli
   liikkunut valinnan mukana (Henri 26.8.). Nyt sarakkeet ovat aina yhtä
   leveitä eikä valinta liikuta mitään. */
.tkrail {
  position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px; padding-bottom: 66px; margin: 14px 0 24px;
}
/* Rata on PÄTKISSÄ, yksi per pallonväli, molemmat päät irti pallosta. */
.tkseg {
  position: absolute; bottom: 24px; height: 4px; border-radius: 99px;
  pointer-events: none; transform-origin: left center; transform: scaleX(0);
  transition: transform 1s var(--ease);
}
.tkseg.nakyy { transform: scaleX(1); }
.tkseg--todo { background: rgba(247,240,232,.075); }
.tkseg--done { background: linear-gradient(90deg, rgba(62,213,152,.45), rgba(62,213,152,.85)); }
.tkseg--active {
  overflow: hidden; background: linear-gradient(90deg, rgba(62,213,152,.3), rgba(242,99,34,.5));
  box-shadow: 0 0 14px -4px rgba(242,99,34,.55);
}
.tkseg--active::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,201,158,.95), transparent);
  animation: tkValo 3s cubic-bezier(.4,0,.25,1) infinite;
}
@keyframes tkValo { 0% { transform: translateX(-110%); } 55%,100% { transform: translateX(275%); } }

.tkstep {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px 18px 18px; text-align: left; min-height: 136px;
  display: flex; flex-direction: column; gap: 11px; cursor: pointer;
  opacity: 0; transform: translateY(12px); animation: tkTulo .55s var(--ease) forwards;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tkstep.heti { opacity: 1; transform: none; animation: none; }
@keyframes tkTulo { to { opacity: 1; transform: none; } }
.tkstep:nth-child(2) { animation-delay: .06s; }
.tkstep:nth-child(3) { animation-delay: .12s; }
.tkstep:nth-child(4) { animation-delay: .18s; }
.tkstep:nth-child(5) { animation-delay: .24s; }
.tkstep:nth-child(6) { animation-delay: .30s; }
.tkstep:hover {
  transform: translateY(-3px); border-color: var(--line-2); background: var(--card-2);
  box-shadow: 0 14px 34px -18px rgba(0,0,0,.9);
}
.tkstep.on {
  border-color: var(--orange); background: var(--card-2);
  box-shadow: 0 0 0 1px var(--orange), 0 22px 54px -18px rgba(242,99,34,.55);
}
.tkstep.on::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 2px;
  border-radius: 99px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--orange-lt), transparent);
  animation: tkJuova 3.2s ease-in-out infinite;
}
@keyframes tkJuova { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

.tkstep__top { display: flex; align-items: center; gap: 12px; }
.tkstep__n {
  width: 36px; height: 36px; flex: none; border-radius: 12px;
  background: rgba(247,240,232,.08); display: grid; place-items: center;
  font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums;
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.tkstep.on .tkstep__n { background: var(--orange); color: #fff; box-shadow: 0 8px 20px -6px rgba(242,99,34,.8); }
.tkstep.done .tkstep__n { background: rgba(62,213,152,.16); color: var(--green); }
.tkstep__t { font-size: 17px; font-weight: 700; line-height: 1.28; letter-spacing: -.015em; }
.tkstep.on .tkstep__t { font-weight: 800; }
.tkstep__f { margin-top: auto; font-size: 16px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.tkstep__f b { color: var(--mut); font-weight: 800; }
.tkstep.done .tkstep__f b { color: var(--green); }
.tkstep__tag {
  margin-top: auto; display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange-lt);
}
.tkstep__tag i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none;
  animation: tkVilku 4s ease-in-out infinite;
}
@keyframes tkVilku { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.tkstep__gate { margin-top: auto; font-size: 16px; font-weight: 700; color: var(--amber); line-height: 1.3; }

.tkstep__dot {
  position: absolute; left: 50%; bottom: -58px; transform: translateX(-50%);
  width: 36px; height: 36px; border-radius: 50%; background: var(--bg);
  border: 3px solid rgba(247,240,232,.15); display: grid; place-items: center;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.tkstep.done .tkstep__dot { border-color: var(--green); background: var(--green); }
.tkstep.on .tkstep__dot { border-color: var(--orange); background: var(--orange); box-shadow: 0 6px 20px -4px rgba(242,99,34,.9); }
/* Nykyisen vaiheen merkki hengittää PAIKALLAAN. Laajeneva pulssi vetää katseen
   puoleensa parin sekunnin välein ja käy hermoille pitkässä käytössä. */
.tkstep.on .tkstep__dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--orange); animation: tkSyke 4s ease-in-out infinite;
}
@keyframes tkSyke { 0%,100% { opacity: .5; } 50% { opacity: .12; } }
.tkstep__dot svg { width: 17px; height: 17px; color: #0C2C1F; }
.tkstep__dot--part i {
  position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(var(--green) var(--p), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 13px, #000 14px);
          mask: radial-gradient(circle, transparent 13px, #000 14px);
  transition: --p 1.15s var(--ease) .45s;
}
/* Pystyliitos: vain kapealla ruudulla */
.tklink { display: none; position: absolute; left: 32px; width: 4px; border-radius: 99px; }
.link--todo { background: rgba(247,240,232,.075); }
.link--done { background: linear-gradient(180deg, rgba(62,213,152,.45), rgba(62,213,152,.85)); }
.link--active {
  overflow: hidden; background: linear-gradient(180deg, rgba(62,213,152,.3), rgba(242,99,34,.5));
  box-shadow: 0 0 14px -4px rgba(242,99,34,.55);
}
.link--active::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%;
  background: linear-gradient(180deg, transparent, rgba(255,201,158,.95), transparent);
  animation: tkValoY 3s cubic-bezier(.4,0,.25,1) infinite;
}
@keyframes tkValoY { 0% { transform: translateY(-110%); } 55%,100% { transform: translateY(260%); } }

/* ── Hero ───────────────────────────────────────────────── */
/* "Miksi nyt" on tunnin tärkein perustelu eikä sivuhuomio. 380 px jätti sen
   kapeaksi liuskaksi samalla kun vasemmalle jäi tyhjää (Henri 26.8.). */
.tkhero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 480px);
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.tkhero__l { padding: 28px 30px; }
.tkhero__l h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); font-weight: 900; letter-spacing: -.03em; margin: 8px 0 10px; }
.tkhero__polku { font-size: 16px; font-weight: 700; color: var(--faint); margin-bottom: 12px; }
.tkhero__d { color: var(--mut); font-size: 18px; max-width: 48ch; }
.tkhero__goal {
  display: flex; gap: 11px; align-items: flex-start; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--line); font-size: 17px; color: var(--mut);
}
.tkhero__goal svg { width: 21px; height: 21px; flex: none; margin-top: 3px; color: var(--orange-lt); }
.tkhero__r {
  background: var(--card-2); border-left: 1px solid var(--line); padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.tkhero__why { color: var(--mut); font-size: 17px; }
.tkhero__cta { margin-top: auto; }
.tkhero--tyhja { grid-template-columns: 1fr; }
.tkhero--tyhja .tkhero__r { border-left: 0; border-top: 1px solid var(--line); }

/* ── Suodattimet ja rivilista ───────────────────────────── */
.tkpanel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  margin-top: 20px; overflow: hidden;
}
/* ⚠️ Tassa oli ennen vaakavieritys ja oikean reunan haipuma vihjeena
   siita etta rivi jatkuu (5.9.). Vihje oli laastari: sisaltoa oli piilossa.
   Mitattu 1280 px:n ruudulla viisi valilehtea = 1050 px 994 px:n tilassa,
   eli "Myohemmin (127)" jai osin nakymattomiin tyopoydallakin.
   Rivitys ei voi koskaan olla huonompi kuin piilottaminen: leveassa
   ikkunassa kaikki mahtuu silti yhdelle riville. */
.tktabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 14px 0;
          border-bottom: 1px solid var(--line); }
.tktab {
  display: flex; align-items: center; gap: 10px; padding: 15px 16px; background: none;
  border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer;
  font-size: 16px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap;
}
.tktab:hover { color: var(--mut); }
.tktab.on { color: var(--cream); border-bottom-color: var(--orange); }
.tktab__i { width: 21px; height: 21px; flex: none; }
.tktab__i svg { width: 100%; height: 100%; display: block; }
.tktab__i.i-done { color: var(--green); }
.tktab__i.i-harj, .tktab__i.i-next { color: var(--orange); }
.tktab__i.i-todo { color: var(--faint); }
.tktab__n { font-weight: 700; color: var(--faint); }
.tktab.on .tktab__n { color: var(--mut); }

/* 🔴 PUHELIMESSA VALILEHDET RIVITTYVAT, EIVAT VIERI SIVUUN.
   Henri 20.9.2026 puhelimella: "tulee ihmeellinen SCROLLAUS valikko
   oikealle? eiha tommoista mobiilissa nyt tarvitse".

   Mitattu 390 px:ssa: viisi valilehtea = 1038 px sisaltoa 356 px:n
   tilassa. Nakyvissa oli "KAIKKI" ja puolet seuraavasta; kolme muuta
   olivat pyyhkaisyn takana. Oikean reunan haipuma oli lisatty vihjeeksi
   etta rivi jatkuu (5.9.) — se oli laastari vaaran ratkaisun paalle.

   Leveydesta suurin osa tuli typografiasta: versaalit ja .04em harvennus
   paisuttivat "Harjoittelussa (0)":n 245 pikseliin. Ilman niita sama
   teksti mahtuu reilusti pienempaan, joten fonttikokoon ei tarvitse
   koskea (16 px sailyy, [[henri-ui-iso-fontti]]).

   Alarajaviiva ei toimi rivittyvilla napeilla — aktiivinen merkitaan
   pillerina. */
@media (max-width: 560px) {
  .tktabs {
    flex-wrap: wrap;
    overflow-x: visible;
    -webkit-mask-image: none; mask-image: none;
    /* Mitattu: sisatila oli 328 px ja "Harjoittelussa (0)" + "Seuraavaksi (0)"
       + vali = tasan 328 px, joten ne jaivat eri riveille yhden pikselin
       takia. 6 px vali ja 12 px reunus antavat 366 px eli parit mahtuvat. */
    gap: 6px; padding: 12px;
  }
  .tktab {
    /* Runko perii rivinvalin 1.85, jolloin 16 px:n pillerista tuli 50 px
       korkea ja neljasta rivista 249 px. Teksti pysyy 16 px:ssa. */
    line-height: 1.2;
    padding: 9px 13px; gap: 7px;
    text-transform: none; letter-spacing: 0;
    border: 1px solid var(--line); border-radius: 999px;
    margin-bottom: 0;
  }
  .tktab.on {
    border-color: var(--orange);
    background: rgba(255, 148, 85, .12);
  }
  /* Ikoni pois: se vei 25 px per pilleri eli 125 px yhteensa, mika oli
     yhden kokonaisen rivin verran. Teksti kertoo jo saman asian, joten
     ikoni oli tassa koristelua jonka hinta oli pystytilaa. 4 rivia -> 3. */
  .tktab__i { display: none; }
}

.tkrows { padding: 6px 0; }
.tkrow {
  display: grid; grid-template-columns: 26px 1fr 200px 84px 24px; align-items: center;
  gap: 16px; padding: 14px 22px; border-bottom: 1px solid var(--line);
}
.tkrow:last-child { border-bottom: 0; }
.tkrow__i { width: 26px; height: 26px; }
.tkrow__i svg { width: 100%; height: 100%; display: block; }
.tkrow__n { font-size: 17px; font-weight: 600; }
.tkrow__v { font-size: 16px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; color: var(--mut); }
.tkrow__c { color: var(--faint); width: 22px; height: 22px; justify-self: end; }
.tkrow__c svg { width: 100%; height: 100%; display: block; }
.tktrk { height: 9px; border-radius: 99px; background: rgba(247,240,232,.09); display: flex; overflow: hidden; }
.tktrk i { display: block; height: 100%; }
.tktrk .hall { background: var(--green); }
.tktrk .harj { background: var(--orange); }
.tkrow--done .tkrow__i, .tkrow--done .tkrow__v { color: var(--green); }
.tkrow--harj .tkrow__i { color: var(--orange); }
.tkrow--todo .tkrow__i { color: var(--faint); }
.tkrow--next {
  background: rgba(242,99,34,.11);
  box-shadow: inset 3px 0 0 var(--orange), inset 0 0 0 1px rgba(242,99,34,.3);
}
.tkrow--next .tkrow__n { font-weight: 800; }
.tkrow--next .tkrow__i { color: var(--orange); }
.tkrow--na .tkrow__n { color: var(--faint); text-decoration: line-through; }
.tkrow--na .tkrow__v { font-size: 16px; font-weight: 600; color: var(--faint); }
.tkrows__tyhja { padding: 34px 22px; color: var(--faint); font-size: 17px; }
.tkfoot {
  display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%;
  padding: 18px; border: 0; border-top: 1px solid var(--line); background: none;
  cursor: pointer; font-size: 17px; font-weight: 700; color: var(--mut);
}
.tkfoot:hover { color: var(--cream); background: rgba(247,240,232,.035); }
.tkfoot svg { width: 21px; height: 21px; flex: none; }

/* ── Kaista 3: mitä pitää suorittaa ─────────────────────── */
.tkband { margin-top: 30px; }
.tkband__h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.tkband__q { font-size: 16px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-lt); }
.tkband__note { color: var(--faint); font-size: 16px; }
.tkband__note b { color: var(--mut); font-weight: 800; }
.tksplit { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }
.tkchecks { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 24px; }
.tkchk {
  display: flex; align-items: flex-start; gap: 13px; padding: 12px 0; width: 100%;
  border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; text-align: left;
}
.tkchk:last-child { border-bottom: 0; }
.tkchk__b {
  width: 27px; height: 27px; flex: none; border-radius: 8px; border: 2px solid var(--line-2);
  display: grid; place-items: center; margin-top: 2px; color: transparent;
}
.tkchk__b svg { width: 16px; height: 16px; }
.tkchk--ok .tkchk__b { background: var(--green); border-color: var(--green); color: #0F2A1E; }
.tkchk__t { font-size: 17px; font-weight: 600; line-height: 1.35; display: block; color: var(--cream); }
.tkchk--ok .tkchk__t { color: var(--mut); }
.tkchk__d { font-size: 16px; color: var(--faint); display: block; margin-top: 2px; }
.tkchk--nyt { background: rgba(255,176,32,.08); border-bottom: 0; border-radius: 10px; padding: 12px; }
.tkchk--nyt .tkchk__b { border-color: var(--amber); }
.tkaika__big { font-size: 30px; font-weight: 900; letter-spacing: -.03em; line-height: 1.15; }
.tkaika__row {
  display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
  border-bottom: 1px solid var(--line); font-size: 17px; color: var(--mut);
}
.tkaika__row:last-child { border-bottom: 0; }
.tkaika__row b { font-weight: 800; white-space: nowrap; color: var(--cream); font-variant-numeric: tabular-nums; }

.tklinkit { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.tklinkki {
  border: 1px solid var(--line-2); border-radius: 12px; padding: 13px 20px; background: none;
  font-size: 17px; font-weight: 700; color: var(--mut); cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.tklinkki:hover { border-color: var(--orange); color: var(--cream); }

/* ════════════════════════════════════════════════════════════
   AJOTUNTIREITIT  (r-*)
   ════════════════════════════════════════════════════════════ */
.rbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.rpill, .rtoggle {
  display: flex; align-items: center; gap: 10px; background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px;
  font-size: 16px; font-weight: 700; color: var(--mut); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.rpill i { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.rpill.on, .rtoggle.on { border-color: var(--orange); color: var(--cream); background: var(--card-2); }
.rpill--g i { background: var(--green); }
.rpill--y i { background: var(--amber); }
.rpill--w i { background: #6C6459; }
.rbar__sp { flex: 1; }
.rtoggle .sw {
  width: 42px; height: 24px; border-radius: 99px; background: rgba(247,240,232,.14);
  position: relative; transition: background .2s var(--ease); flex: none;
}
.rtoggle .sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--faint);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.rtoggle.on .sw { background: var(--orange); }
.rtoggle.on .sw::after { transform: translateX(18px); background: #fff; }

.rsplit { display: grid; grid-template-columns: 1fr 420px; gap: 20px; align-items: start; }
.rcol { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

.rmapwrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.rmaph { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.rmaph b { font-size: 16px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }
.rmaph span { font-size: 16px; color: var(--faint); }
.rmap { position: relative; width: 100%; aspect-ratio: 400/273; border-radius: 14px; background: #1B1610; overflow: hidden; }
.rgeo { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Kartalla ei ole tekstiä — vain numeroidut pallot. Kosketusalue on pallon
   ympärillä läpinäkyvänä reunuksena, joten sormella ei tarvitse osua tarkasti. */
.rdot {
  position: absolute; transform: translate(-50%, -50%); width: 50px; height: 50px;
  padding: 11px; display: grid; place-items: center; border-radius: 50%;
  border: 0; background: none; cursor: pointer;
}
.rdot__c {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 16px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
  border: 2px solid rgba(23,17,13,.85); box-shadow: 0 2px 8px rgba(0,0,0,.55);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.rdot--g .rdot__c { background: var(--green); color: #0C2C1F; }
.rdot--y .rdot__c { background: var(--amber); color: #3A2600; }
.rdot--w .rdot__c { background: #6C6459; color: #F0EAE2; }
.rdot--usein .rdot__c { width: 36px; height: 36px; font-size: 18px; }
.rdot:hover .rdot__c { transform: scale(1.14); }
.rdot.on { z-index: 9; }
.rdot.on .rdot__c { box-shadow: 0 0 0 4px var(--orange), 0 4px 14px rgba(0,0,0,.6); transform: scale(1.14); }
.rdot--himmea { opacity: .28; }
.rdot--himmea:hover { opacity: .6; }
.rdot__alas { position: absolute; left: 50%; top: calc(100% - 8px); transform: translateX(-50%); color: var(--faint); font-size: 16px; font-weight: 900; }
.ralku {
  position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 7px;
  background: rgba(242,99,34,.2); border: 1px solid rgba(242,99,34,.6); border-radius: 999px;
  padding: 5px 12px; font-size: 16px; font-weight: 800; color: var(--orange-lt);
  white-space: nowrap; pointer-events: none;
}
.ralku svg { width: 14px; height: 14px; }
.rlegend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 16px; color: var(--mut); }
.rlegend span { display: flex; align-items: center; gap: 8px; }
.rlegend i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.rlegend i.iso { width: 19px; height: 19px; }
.rmapnote { margin-top: 12px; font-size: 16px; color: var(--faint); }

.rgroups { display: flex; flex-direction: column; gap: 26px; }
.rgrp__h { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.rgrp__k { font-size: 16px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.rgrp__ln { flex: 1; height: 1px; background: var(--line); }
.rgrp__n { font-size: 16px; font-weight: 700; color: var(--faint); }
.rtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.rtile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; text-align: left; display: flex; flex-direction: column; gap: 9px;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.rtile:hover { border-color: var(--line-2); background: var(--card-2); transform: translateY(-2px); }
.rtile.on { border-color: var(--orange); background: var(--card-2); box-shadow: 0 0 0 1px var(--orange); }
.rtile__top { display: flex; align-items: flex-start; gap: 11px; }
.rtile__nro {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 16px; font-weight: 900; margin-top: 2px; border: 2px solid rgba(23,17,13,.85);
  font-variant-numeric: tabular-nums;
}
.rtile--g .rtile__nro { background: var(--green); color: #0C2C1F; }
.rtile--y .rtile__nro { background: var(--amber); color: #3A2600; }
.rtile--w .rtile__nro { background: #6C6459; color: #F0EAE2; }
.rtile__nm { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; flex: 1; }
.rtile__star { flex: none; width: 19px; height: 19px; color: var(--orange-lt); margin-top: 5px; }
.rtile__star svg { width: 100%; height: 100%; display: block; }
.rtile__tyyli { font-size: 16px; color: var(--mut); line-height: 1.45; }
.rtile__foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 3px;
  padding-top: 12px; border-top: 1px solid var(--line); font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rtile__t { color: var(--mut); }
.rtile--g .rtile__t { color: var(--green); }
.rtile__k { margin-left: auto; color: var(--faint); }
.rtile__k.on { color: var(--orange-lt); }

.rdet {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; position: sticky; top: 20px;
}
.rdet__h { padding: 24px 24px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--card-2), var(--card)); }
.rdet__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 13px; }
.rbadge {
  display: flex; align-items: center; gap: 7px; border-radius: 999px; padding: 5px 13px;
  font-size: 16px; font-weight: 800; border: 1px solid;
}
.rbadge svg { width: 15px; height: 15px; flex: none; }
.rbadge--g { color: var(--green); border-color: rgba(62,213,152,.45); background: rgba(62,213,152,.1); }
.rbadge--y { color: var(--amber); border-color: rgba(255,176,32,.45); background: rgba(255,176,32,.1); }
.rbadge--w { color: var(--mut); border-color: var(--line-2); }
.rbadge--alku { color: #fff; border-color: var(--orange); background: var(--orange); }
.rbadge--usein { color: var(--orange-lt); border-color: rgba(242,99,34,.5); background: rgba(242,99,34,.12); }
.rbadge--harv { color: var(--faint); border-color: var(--line-2); }
.rdet__nimi { display: flex; align-items: center; gap: 12px; }
.rdet__nimi h3 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); font-weight: 900; letter-spacing: -.03em; }
.rdet__nro {
  width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums;
}
.rdet__nro--g { background: var(--green); color: #0C2C1F; }
.rdet__nro--y { background: var(--amber); color: #3A2600; }
.rdet__nro--w { background: #6C6459; color: #F0EAE2; }
.rdet__suunta { font-size: 16px; color: var(--faint); margin-top: 8px; }
.rdet__b { padding: 22px 24px; }
.rskl { display: flex; flex-direction: column; }
.rskl__i { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rskl__i:last-child { border-bottom: 0; }
.rskl__ic { width: 24px; height: 24px; }
.rskl__ic svg { width: 100%; height: 100%; display: block; }
.rskl__n { font-size: 17px; font-weight: 600; }
.rskl__s { font-size: 16px; font-weight: 800; white-space: nowrap; }
.rskl__i.s-2 .rskl__ic, .rskl__i.s-2 .rskl__s { color: var(--green); }
.rskl__i.s-1 .rskl__ic, .rskl__i.s-1 .rskl__s { color: var(--amber); }
.rskl__i.s-0 .rskl__ic, .rskl__i.s-0 .rskl__s { color: var(--faint); }
.rskl__i.s-0 .rskl__n { color: var(--mut); }
.rhuom {
  margin-top: 20px; background: var(--card-2); border: 1px solid var(--line);
  border-left: 3px solid var(--orange); border-radius: var(--radius-sm); padding: 16px 18px;
}
.rhuom__k { font-size: 16px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; color: var(--orange-lt); margin-bottom: 8px; }
.rhuom p { font-size: 17px; color: var(--mut); }
.rkaynti {
  margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 16px; font-size: 17px; color: var(--mut);
}
.rkaynti.on { border-color: rgba(242,99,34,.35); background: rgba(242,99,34,.08); }
.rkaynti b { font-weight: 800; color: var(--cream); }
.rlahde { margin-top: 14px; font-size: 16px; color: var(--faint); }

/* ════════════════════════════════════════════════════════════
   MOBIILI — 90 % käyttäjistä on täällä
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  /* Vaihenauha kääntyy pystyaikajanaksi: kaikki kuusi näkyvät kerralla
     eikä mitään jää vaakavierityksen taakse. */
  .tkrail { display: flex; flex-direction: column; gap: 14px; padding: 0; margin: 12px 0 24px; }
  .tkseg { display: none; }
  .tklink { display: block; }
  .tkstep {
    display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; align-items: center;
    min-height: 0; padding: 15px 18px 15px 12px; border-radius: 14px;
  }
  .tkstep:hover, .tkstep.on:hover { transform: none; }
  .tkstep.on::before { left: 12px; right: 18px; }
  .tkstep__top { grid-column: 2; grid-row: 1; gap: 11px; }
  .tkstep__n { width: 31px; height: 31px; border-radius: 10px; font-size: 16px; }
  .tkstep__f, .tkstep__tag, .tkstep__gate { grid-column: 2; grid-row: 2; margin-top: 3px; font-size: 16px; }
  .tkstep__dot {
    position: relative; left: auto; bottom: auto; transform: none;
    grid-column: 1; grid-row: 1 / span 2; justify-self: center;
  }
  .tklink--yla { top: -14px; height: calc(50% - 9px); }
  .tklink--ala { top: calc(50% + 23px); bottom: -14px; }
  .tkstep:first-child .tklink--yla, .tkstep:last-child .tklink--ala { display: none; }

  .tkhero { grid-template-columns: 1fr; }
  .tkhero__r { border-left: 0; border-top: 1px solid var(--line); }
  .tksplit { grid-template-columns: 1fr; }
  .tkrow { grid-template-columns: 26px 1fr 76px; gap: 12px; padding: 14px 16px; }
  .tkrow .tktrk, .tkrow__c { display: none; }

  .rsplit { grid-template-columns: 1fr; }
  .rdet { position: static; }
  .rcol { gap: 24px; }
}
@media (max-width: 680px) {
  .tktop__h { font-size: 1.5rem; }
  .tkghost { width: 100%; justify-content: center; }
  .tkstep { padding: 14px 14px 14px 8px; grid-template-columns: 40px 1fr; gap: 0 12px; }
  .tklink { left: 26px; }
  .tkhero__l, .tkhero__r { padding: 22px 18px; }
  .tktab { padding: 14px 12px; font-size: 16px; }
  .tkchecks { grid-template-columns: 1fr; }
  .tklinkit { flex-direction: column; }
  .tklinkki { width: 100%; text-align: center; }

  /* Kartta reunasta reunaan ja KORKEAMMAKSI: pallot tarvitsevat tilaa jotta
     numero mahtuu 16 px:n kokoisena. Fonttia ei pienenneta (henri-ui-iso-fontti),
     joten kasvatetaan karttaa. Kaavakuva kestaa pystyvenytyksen. */
  .rmapwrap { padding: 12px 10px; }
  .rmap { aspect-ratio: 400/330; }
  .rdot { width: 48px; height: 48px; padding: 9px; }
  .rdot__c { width: 30px; height: 30px; font-size: 16px; }
  .rdot--usein .rdot__c { width: 36px; height: 36px; font-size: 18px; }
  /* Lippu ei mahdu kapealle kartalle 16 px:lla — POISTETAAN se, ei pienenneta.
     Sama tieto on aluekortin merkkina "Ajokoe alkaa taalta". */
  .ralku { display: none; }
  .rlegend { gap: 10px 16px; }
  .rtiles { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tkstep { opacity: 1; transform: none; animation: none; }
  .tkseg { transform: scaleX(1); transition: none; }
  .tkseg--active::after, .link--active::after, .tkstep.on::before,
  .tkstep__tag i, .tkstep.on .tkstep__dot::after { animation: none; }
}

/* ── TULOSTUS: paperi menee autoon, ei väriä hukkaan ────── */
@media print {
  @page { margin: 16mm; }
  body { background: #fff; color: #111; font-size: 11pt; }
  .sidenav, .tabbar, .apptop, .devnote, .tktabs, .tkghost, .tkfoot,
  .tkhero__cta, .tklinkit, .unlockbar { display: none !important; }
  .shell { display: block; }
  .appbody { padding: 0; max-width: none; }
  .view { display: none !important; }
  .view.on { display: block !important; }
  .card, .tkpanel, .tkhero, .tkstep { background: #fff !important; border-color: #bbb !important; box-shadow: none !important; color: #111; }
  .tktop__h { font-size: 20pt; }
  .tktop__k, .tkband__note, .tkhero__d, .tkhero__why, .tkstep__f, .tkrow__v, .tkchk__d { color: #333 !important; }
  .tkhero { grid-template-columns: 1fr; }
  .tkhero__r { border-left: 0; border-top: 1px solid #bbb; background: #fff; }
  .tkstep__n, .tkstep__dot { background: #eee !important; color: #111 !important; border-color: #999 !important; }
  .tkstep.on .tkstep__n { background: #111 !important; color: #fff !important; }
  .tkseg, .tklink { background: #ccc !important; box-shadow: none !important; transform: none !important; }
  .tkseg--done, .link--done { background: #666 !important; }
  .tkseg--active, .link--active { background: #222 !important; }
  .tkseg--active::after, .link--active::after { display: none; }
  .tktrk { border: 1px solid #999; background: #fff; }
  .tktrk .hall { background: #111; }
  .tktrk .harj { background: #888; }
  .tkrow { break-inside: avoid; border-bottom: 1px solid #ddd; }
  .tkrow--next { background: #f0f0f0 !important; box-shadow: none !important; }
  .tkchk--nyt { background: #eee !important; }
  .tkchk__b { border-color: #999 !important; }
  .tkchk--ok .tkchk__b { background: #666 !important; color: #fff !important; }
}

/* ---------- Koodikentän tunnelma ----------
   Kenttä hengittää kunnes koodi on syötetty: se kertoo ilman tekstiä että
   tässä odotetaan sinua. Lakkaa heti kun kenttään tulee sisältöä. */
.koodikentta:placeholder-shown {
  animation: koodiOdottaa 2.6s var(--ease) infinite;
}
@keyframes koodiOdottaa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,99,34,0); border-color: var(--line-2); }
  50%      { box-shadow: 0 0 0 5px rgba(242,99,34,.10); border-color: rgba(242,99,34,.55); }
}
.koodikentta:focus { animation: none; }
@media (prefers-reduced-motion: reduce) { .koodikentta:placeholder-shown { animation: none; } }

/* ---------- Kuva sovelluksesta rekisteröintiruudussa ----------
   Tekstilista ei kertonut käyttäjälle että kyseessä on sovellus. Tämä on
   pelkkää CSS:ää: ei kuvatiedostoa jota pitäisi ylläpitää erikseen, eikä
   latausta joka voisi epäonnistua. */
.appshot {
  border-radius: 12px; overflow: hidden; margin: 0 0 18px;
  border: 1px solid var(--line-2); background: #17110D;
  box-shadow: 0 14px 34px rgba(0,0,0,.4);
}
.appshot__bar { display: flex; gap: 6px; padding: 9px 12px; background: rgba(247,240,232,.05); }
.appshot__bar i { width: 9px; height: 9px; border-radius: 999px; background: rgba(247,240,232,.20); }
.appshot__body { display: grid; grid-template-columns: 108px 1fr; min-height: 168px; }
.appshot__nav {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 10px; border-right: 1px solid var(--line);
  background: rgba(247,240,232,.02);
}
.appshot__logo {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 800; color: var(--cream); margin-bottom: 4px;
}
.appshot__logo b {
  width: 15px; height: 15px; border-radius: 5px; background: var(--orange);
  color: #fff; display: grid; place-items: center; font-size: 10px;
}
.appshot__navi { font-size: 11px; font-weight: 600; color: var(--faint); }
.appshot__navi.on { color: var(--orange-lt); font-weight: 800; }
.appshot__main { padding: 13px 15px; }
.appshot__eyebrow {
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange-lt); margin-bottom: 5px;
}
.appshot__h { font-size: 15px; font-weight: 900; color: var(--cream); line-height: 1.2; letter-spacing: -.02em; }
.appshot__pill {
  display: inline-block; margin: 9px 0 11px; padding: 3px 9px; border-radius: 999px;
  background: rgba(247,240,232,.07); font-size: 10px; font-weight: 700; color: var(--mut);
}
.appshot__row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.appshot__n {
  flex: none; width: 15px; height: 15px; border-radius: 999px;
  background: rgba(242,99,34,.22); color: var(--orange-lt);
  display: grid; place-items: center; font-size: 9px; font-weight: 800;
}
.appshot__l { height: 7px; border-radius: 999px; background: rgba(247,240,232,.09); flex: 1; }
.appshot__l--lyhyt { max-width: 62%; }

/* ---------- Henrin tervehdys (ennen esittelykierrosta) ---------- */
.tervehdys {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(14,10,7,.86); backdrop-filter: blur(7px);
  display: grid; place-items: center; padding: 20px;
  animation: fadeIn .3s ease both; overflow-y: auto;
}
.tervehdys__box {
  width: min(520px, 100%); text-align: center;
  background: linear-gradient(165deg, rgba(242,99,34,.16), var(--card) 46%);
  border: 1px solid rgba(255,148,85,.30); border-radius: 22px;
  padding: 34px 30px 30px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 70px rgba(242,99,34,.12);
  animation: tervehdysIn .55s var(--ease) both;
}
@keyframes tervehdysIn {
  from { opacity: 0; transform: translateY(26px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.tervehdys__kuva {
  width: 112px; height: 112px; border-radius: 999px; object-fit: cover;
  border: 3px solid rgba(255,148,85,.55);
  box-shadow: 0 0 0 7px rgba(242,99,34,.10), 0 14px 34px rgba(0,0,0,.5);
  margin-bottom: 16px;
}
.tervehdys__nimi { font-size: 19px; font-weight: 800; color: var(--cream); }
.tervehdys__titteli { font-size: 16px; color: var(--mut); margin-bottom: 20px; font-weight: 600; }
.tervehdys__box h2 {
  font-size: clamp(1.7rem, 4vw, 2.1rem); font-weight: 900; letter-spacing: -.03em;
  color: var(--cream); margin: 0 0 16px;
}
.tervehdys__box p {
  font-size: 17px; line-height: 1.62; color: var(--mut);
  margin: 0 0 16px; text-align: left;
}
/* Rehellinen kohta erottuu: se on koko tervehdyksen painavin osa. Kaksi
   kappaletta — ensin se mitä myönnetään, sitten se miksi se ei haittaa. */
/* Henrin oma puheenvuoro erottuu sovelluksen äänestä: hieman kallistettu,
   lämpimämpi tausta ja iso lainausmerkki. Tavoite on että se näyttää siltä
   mitä se on — ihmisen kirjoittamalta (Henri 26.8.). */
.tervehdys__rehellinen {
  position: relative;
  border-left: 3px solid var(--orange);
  padding: 18px 20px 18px 26px;
  margin: 0 0 24px;
  background: linear-gradient(100deg, rgba(242,99,34,.08), rgba(242,99,34,.02));
  border-radius: 0 14px 14px 0;
}
.tervehdys__rehellinen::before {
  content: '”'; position: absolute; left: 10px; top: -14px;
  font-size: 62px; line-height: 1; color: rgba(242,99,34,.34);
  font-family: Georgia, 'Times New Roman', serif; pointer-events: none;
}
.tervehdys__rehellinen p {
  color: var(--cream); margin: 0 0 12px;
  font-style: italic; letter-spacing: .005em;
}
.tervehdys__rehellinen p:last-child { margin-bottom: 0; }
/* Johtolause ominaisuuslistan ylle. Erottaa Henrin puheenvuoron siitä mitä
   sovellus tekee — kaksi eri ääntä samassa laatikossa (Henri 17.9.2026). */
.tervehdys__joht {
  text-align: left; font-weight: 700; color: var(--cream) !important;
  margin: 0 0 14px !important;
}
@media (prefers-reduced-motion: reduce) {
  .tervehdys, .tervehdys__box { animation: none; }
}

/* ---------- Kartoituksen robotti ----------
   Ruudun yläosa oli tyhjä eikä mikään kertonut että vastauksille tapahtuu
   jotain. Robotti nielaisee jokaisen vastauksen ja raportti kasvaa rivin.
   Kaikki CSS:llä: ei kuvatiedostoja eikä kirjastoja. */
.robo {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  gap: 30px; min-height: 190px; margin: 0 auto 22px; max-width: 470px;
}
.robo__hahmo { position: relative; width: 112px; flex: none; }
.robo__antenni {
  display: block; width: 4px; height: 18px; margin: 0 auto;
  background: rgba(255,148,85,.6); border-radius: 2px; position: relative;
}
.robo__antenni::after {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 999px; background: var(--orange);
  box-shadow: 0 0 12px var(--orange); animation: roboSyke 1.9s ease-in-out infinite;
}
@keyframes roboSyke { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.robo__paa {
  height: 62px; border-radius: 17px;
  background: linear-gradient(160deg, #3A2C22, #241C16);
  border: 1px solid rgba(255,148,85,.32);
  display: flex; align-items: center; justify-content: center; gap: 11px;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.robo__silma {
  width: 13px; height: 13px; border-radius: 999px; background: var(--orange-lt);
  box-shadow: 0 0 9px rgba(255,148,85,.8);
  animation: roboRapsy 4.2s infinite;
}
@keyframes roboRapsy { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
.robo__suu {
  width: 48px; height: 8px; margin: 7px auto 0; border-radius: 0 0 6px 6px;
  background: rgba(14,10,7,.85); border: 1px solid rgba(255,148,85,.28); border-top: none;
  transition: height .18s var(--ease);
}
.robo--syo .robo__suu { height: 19px; }
.robo__vartalo {
  margin: 8px auto 0; width: 80px; height: 42px; border-radius: 13px;
  background: linear-gradient(160deg, #33271E, #201911);
  border: 1px solid rgba(247,240,232,.10);
  display: grid; place-items: center;
}
.robo__merkki { font-size: 18px; font-weight: 900; color: var(--orange); }

/* Raportti kasvaa rivi kerrallaan */
.robo__raportti {
  flex: none; width: 176px; min-height: 138px; border-radius: 12px;
  background: rgba(247,240,232,.05); border: 1px solid var(--line-2);
  padding: 13px 14px; box-shadow: 0 8px 20px rgba(0,0,0,.3);
  transition: transform .3s var(--ease);
}
.robo--kirjoittaa .robo__raportti { transform: translateY(-3px) rotate(-1.2deg); }
/* 🔴 "OPETUSSUUNNITELMA" EI MAHTUNUT (Henri 17.9.2026, puhelin).
   17 merkkia versaalina 11 px:lla + kirjainvali .07em vie noin 129 px, ja
   kortin sisus oli 124 px tyopoydalla seka 96 px puhelimessa. Yksi sana ei
   voi rivittya, joten se valui ulos laatikosta. Kortti levennettiin ja
   kirjainvali kavennettiin. overflow-wrap on viimeinen varmistus: jos
   otsikko joskus vaihtuu pidempaan, se katkeaa laatikon sisalla eika vuoda
   reunan yli. */
.robo__rapotsikko {
  font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--orange-lt); margin-bottom: 7px;
  overflow-wrap: anywhere;
}
.robo__rivit { display: flex; flex-direction: column; gap: 7px; }
.robo__rivi {
  height: 7px; border-radius: 999px; background: rgba(247,240,232,.20);
  animation: roboRiviIn .45s var(--ease) both;
}
@keyframes roboRiviIn { from { opacity: 0; width: 0; } to { opacity: 1; } }

/* Vastauspala lentää robotin suuhun */
.robo__pala {
  position: absolute; right: 128px; top: 48px; opacity: 0;
  width: 34px; height: 12px; border-radius: 3px; background: var(--orange);
  box-shadow: 0 0 14px rgba(242,99,34,.6);
}
.robo--syo .robo__pala { animation: palaLentaa .62s var(--ease) both; }
@keyframes palaLentaa {
  0%   { opacity: 0; transform: translate(46px, 16px) scale(.7); }
  25%  { opacity: 1; }
  75%  { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(-8px, 6px) scale(.35); }
}
.robo__teksti {
  text-align: center; font-size: 17px; font-weight: 700; color: var(--faint);
  margin: 0 0 26px; min-height: 26px; transition: color .3s var(--ease);
}
.robo--kirjoittaa .robo__teksti, .robo--syo ~ .robo__teksti { color: var(--orange-lt); }

@media (max-width: 520px) { .robo { gap: 14px; max-width: 350px; } .robo__hahmo { width: 92px; } .robo__raportti { width: 166px; padding: 13px 11px; } }
@media (prefers-reduced-motion: reduce) {
  .robo__antenni::after, .robo__silma, .robo--syo .robo__pala { animation: none; }
  .robo__rivi { animation: none; }
}

/* ---------- Paikkakunnan pikavalinta ----------
   Vain ne kaupungit joista ajotuntireitit on oikeasti kartoitettu. Muiden
   ehdottaminen lupaisi reittejä joita ei ole. */
.kaupunkiehdot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  margin: 12px 0 4px; justify-content: center;
}
.kaupunkiehdot__otsikko { font-size: 16px; color: var(--faint); font-weight: 600; }
.kaupunkiehto {
  font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  color: var(--green); background: rgba(62,213,152,.12);
  border: 1px solid rgba(62,213,152,.35); border-radius: 999px; padding: 7px 15px;
  transition: .18s var(--ease);
}
.kaupunkiehto:hover { background: rgba(62,213,152,.22); transform: translateY(-1px); }

/* ---------- Lukittu ajotuntialue ----------
   Nimi ja tyyli sumeana: näkee että täällä on jotain mutta ei mitä.
   EI maksumuuri — aukeaa ajamalla. Siksi sanamuoto puhuu ajokerroista. */
.rtile--lukossa {
  position: relative; cursor: default; overflow: hidden;
  background: rgba(247,240,232,.025); border: 1px dashed var(--line-2);
}
.rtile--lukossa .rtile__sumu {
  display: block; filter: blur(4.5px); opacity: .5; user-select: none; pointer-events: none;
}
.rtile__lukko {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 16px; font-weight: 700; color: var(--orange-lt);
  background: linear-gradient(180deg, rgba(23,17,13,.55), rgba(23,17,13,.82));
  text-align: center; padding: 10px;
}
.rtile__lukko svg { width: 15px; height: 15px; flex: none; }

/* ---------- Lakisääteiset esteet ennen ensimmäistä ajokertaa ----------
   Nämä eivät ole vinkkejä vaan ehtoja: ilman opetuslupaa ja poljinta ei saa
   ajaa. Siksi ne ovat suunnitelman YLÄPUOLELLA eivätkä listan alalaidassa. */
/* 🔴 Tämä ei ole huomautus vaan este: ajotuntia EI SAA aloittaa ennen kuin
   opetuslupa, EAS, opetuspoljin ja lisäpeili ovat kunnossa. Se jäi aiemmin
   muiden korttien joukkoon (Henri 26.8.). Katkoviiva ja punainen sävy
   erottavat sen kaikesta muusta sivulla. */
.esteet {
  margin: 0 0 26px; padding: 26px 28px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(226,58,44,.14), rgba(34,26,20,.72));
  border: 2px dashed rgba(232,82,62,.72);
  box-shadow: 0 0 0 4px rgba(226,58,44,.07), 0 18px 44px -22px rgba(226,58,44,.6);
  animation: esteSyke 3.4s ease-in-out infinite;
}
@keyframes esteSyke {
  0%, 100% { border-color: rgba(232,82,62,.72); }
  50%      { border-color: rgba(255,124,104,.95); }
}
@media (prefers-reduced-motion: reduce) { .esteet { animation: none; } }
.esteet__h {
  font-size: 16px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 9px;
}
.esteet__lead { font-size: 17px; color: var(--mut); margin: 0 0 16px; font-weight: 500; }
.esteet__lista { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.esteet__lista li { position: relative; padding-left: 26px; }
.esteet__lista li::before {
  content: ''; position: absolute; left: 4px; top: 8px;
  width: 9px; height: 9px; border-radius: 999px;
  border: 2px solid var(--amber);
}
.esteet__lista b { display: block; font-size: 17.5px; color: var(--cream); font-weight: 800; }
.esteet__lista span { font-size: 16px; color: var(--mut); line-height: 1.5; }
.esteet__cta { width: 100%; }

/* Uusin raporttirivi korostuu hetken: näkee että juuri TÄMÄ klikkaus
   tuotti uutta tekstiä eikä vain että palkkeja on enemmän. */
.robo__rivi--uusi { background: var(--orange); animation: roboUusiRivi 1.5s var(--ease) both; }
@keyframes roboUusiRivi {
  0%   { opacity: 0; width: 0 !important; background: var(--orange); }
  40%  { opacity: 1; background: var(--orange); }
  100% { opacity: 1; background: rgba(247,240,232,.20); }
}

/* "Mikä tämä on" tervehdyksessä: kaksi lausetta riittää. Ilman tätä
   käyttäjä ei tiennyt onko kyseessä sovellus, nettisivu vai opas. */
.tervehdys__mika { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; text-align: left; }
.tervehdys__mika li {
  position: relative; padding-left: 30px; font-size: 17px; line-height: 1.6; color: var(--mut);
}
.tervehdys__mika li::before {
  content: ''; position: absolute; left: 5px; top: 9px;
  width: 9px; height: 9px; border-radius: 999px; background: var(--orange);
  box-shadow: 0 0 10px rgba(242,99,34,.7);
}
.tervehdys__mika b { color: var(--cream); font-weight: 800; }

/* Sovelluksen nimi kuvan yllä: pelkkä kuvakaappaus ei kerro mihin ollaan
   liittymässä jos tuotteen nimeä ei sanota ääneen. */
.authwhat__nimi {
  font-size: 17px; color: var(--mut); margin: 0 0 14px; font-weight: 600;
}
.authwhat__nimi b { color: var(--cream); font-weight: 800; }

/* ══════════════════════════════════════════════════════════════════════
   ETUSIVU — aula, ei työpöytä
   Kevyemmät kortit, enemmän ilmaa ja vähemmän tekstiä kuin Tilannekuvassa.
   Tyhjä tila on tarkoituksellista: jos tämä alkaa näyttää Tilannekuvalta,
   jokin on mennyt pieleen.
   ══════════════════════════════════════════════════════════════════════ */
#view-etusivu { max-width: 1100px; }

.eHead { margin: 4px 0 34px; }
.eHead__h {
  font-size: clamp(1.9rem, 3.6vw, 2.5rem); font-weight: 900; letter-spacing: -.03em;
  color: var(--cream); margin: 0 0 8px;
}
.eHead__p { font-size: 18.5px; color: var(--mut); margin: 0; font-weight: 500; }

.eOsio { margin: 0 0 40px; }
.eOsio__h {
  font-size: 16px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 18px;
}

/* ---- Hoidettava ---- */
.eKortti {
  border-radius: 18px; padding: 26px 28px; margin: 0 0 32px;
  border: 1px solid rgba(255,176,32,.34);
  background: linear-gradient(160deg, rgba(255,176,32,.12), rgba(34,26,20,.66));
}
.eKortti__kicker {
  font-size: 16px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 10px;
}
.eKortti__luku { font-size: 22px; font-weight: 900; color: var(--cream); margin-bottom: 16px; }
.eLista { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.eLista li { font-size: 17.5px; color: var(--mut); display: flex; gap: 11px; align-items: baseline; }
.eLista li span { color: var(--faint); font-weight: 800; width: 15px; flex: none; }
.eLista li.on { color: var(--faint); }
.eLista li.on span { color: var(--green); }
.eKortti__teksti { font-size: 17.5px; color: var(--cream); margin: 0 0 20px; font-weight: 600; }

.eKuittaus {
  display: flex; align-items: center; gap: 12px; margin: 0 0 30px;
  font-size: 17px; color: var(--mut); font-weight: 600;
}
.eKuittaus__v {
  flex: none; width: 26px; height: 26px; border-radius: 999px;
  background: rgba(62,213,152,.16); color: var(--green);
  display: grid; place-items: center; font-weight: 900; font-size: 16px;
}

/* ---- Jatka siitä mihin jäit ---- */
.eJatka {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 0 30px; padding: 15px 20px; cursor: pointer; font-family: inherit; text-align: left;
  background: rgba(247,240,232,.04); border: 1px solid var(--line);
  border-radius: 13px; transition: .18s var(--ease);
}
.eJatka:hover { border-color: rgba(255,148,85,.45); background: rgba(242,99,34,.08); }
.eJatka__t { font-size: 17px; color: var(--mut); font-weight: 500; }
.eJatka__t b { color: var(--cream); font-weight: 800; }
.eJatka__n { font-size: 16.5px; font-weight: 800; color: var(--orange-lt); white-space: nowrap; }

/* ---- Kolme ovea ---- */
.eOvet { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .eOvet { grid-template-columns: repeat(3, 1fr); } }
.eOvi {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 26px 24px 24px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--line);
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.eOvi:hover { transform: translateY(-2px); border-color: var(--line-2); }
.eOvi--paa {
  background: linear-gradient(160deg, rgba(242,99,34,.15), var(--card) 62%);
  border-color: rgba(255,148,85,.34);
}
.eOvi__i { width: 30px; height: 30px; color: var(--orange-lt); margin-bottom: 16px; }
.eOvi__i svg { width: 100%; height: 100%; }
.eOvi__h { font-size: 21px; font-weight: 900; letter-spacing: -.02em; color: var(--cream); margin: 0 0 9px; }
.eOvi__p { font-size: 16.5px; line-height: 1.55; color: var(--mut); margin: 0 0 18px; flex: 1; }
.eOvi__tila {
  font-size: 16px; font-weight: 700; color: var(--faint);
  margin: -8px 0 16px;
}
.eOvi .btn { width: 100%; }
.btn--hillitty {
  background: rgba(247,240,232,.07); color: var(--cream);
  border: 1px solid var(--line-2); min-height: 52px; padding: 0 22px;
}
.btn--hillitty:hover { background: rgba(247,240,232,.12); }
.eOvi--lukossa { opacity: .72; }
.eOvi__lukko {
  display: flex; align-items: center; gap: 9px; width: 100%;
  font-size: 16px; font-weight: 700; color: var(--orange-lt);
  padding: 14px 0 2px;
}
.eOvi__lukko svg { width: 15px; height: 15px; flex: none; }

/* ---- Tiedote ---- */
.eTiedote {
  border-radius: 18px; padding: 24px 26px; margin: 0 0 18px;
  background: rgba(247,240,232,.04); border: 1px solid var(--line);
}
.eTiedote--important { border-color: rgba(255,148,85,.40); background: rgba(242,99,34,.09); }
.eTiedote--critical  { border-color: rgba(255,90,95,.50);  background: rgba(255,90,95,.10); }
.eTiedote__ylä { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.eTiedote__kicker {
  font-size: 16px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--orange-lt);
}
.eTiedote__x {
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--faint); font-size: 26px; line-height: 1; padding: 0 4px;
}
.eTiedote__x:hover { color: var(--cream); }
.eTiedote__h { font-size: 21px; font-weight: 900; letter-spacing: -.02em; color: var(--cream); margin: 0 0 9px; }
.eTiedote__p { font-size: 17px; line-height: 1.6; color: var(--mut); margin: 0 0 18px; }
.eTiedote__pvm { font-size: 16px; color: var(--faint); margin-top: 14px; font-weight: 600; }

/* ---- Ajankohtaista ---- */
.eAjank { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .eAjank { grid-template-columns: repeat(3, 1fr); } }
.eAjank__k {
  padding: 22px; border-radius: 15px;
  background: rgba(247,240,232,.03); border: 1px solid var(--line);
}
.eAjank__kicker {
  font-size: 16px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 10px;
}
.eAjank__k h3 { font-size: 18.5px; font-weight: 800; color: var(--cream); margin: 0 0 8px; letter-spacing: -.01em; }
.eAjank__k p { font-size: 16.5px; line-height: 1.55; color: var(--mut); margin: 0 0 12px; }

/* ---------- Varoitus ennen ajotunnin aloitusta ----------
   Ei pelottelua vaan perustelu: kerrotaan MIKSI turha merkintä haittaa. */
.varoitus {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(14,10,7,.86); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 20px; overflow-y: auto;
  animation: fadeIn .25s ease both;
}
.varoitus__box {
  width: min(500px, 100%);
  background: linear-gradient(165deg, rgba(255,176,32,.12), var(--card) 52%);
  border: 1px solid rgba(255,176,32,.34); border-radius: 20px;
  padding: 30px 28px 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: tervehdysIn .45s var(--ease) both;
}
.varoitus__k {
  font-size: 16px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 10px;
}
.varoitus__box h2 {
  font-size: clamp(1.5rem, 3.4vw, 1.9rem); font-weight: 900; letter-spacing: -.03em;
  color: var(--cream); margin: 0 0 16px;
}
.varoitus__box p { font-size: 17px; line-height: 1.6; color: var(--mut); margin: 0 0 14px; }
.varoitus__lisa { color: var(--faint) !important; font-size: 16px !important; }
.varoitus__chk {
  display: flex; align-items: center; gap: 11px; margin: 18px 0 22px;
  font-size: 16.5px; color: var(--mut); cursor: pointer; font-weight: 600;
}
.varoitus__chk input { width: 21px; height: 21px; accent-color: var(--orange); flex: none; cursor: pointer; }
.varoitus__act { display: grid; gap: 6px; }
.varoitus__act .btn-link { display: block; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) { .varoitus, .varoitus__box { animation: none; } }

/* ---------- Vapaan tekstin ohje (kerran) ----------
   Ilman tätä moni joko jättää tyhjäksi tai yrittää kirjoittaa raportin. */
.awm-ohje {
  margin: 0 0 14px; padding: 16px 18px; border-radius: 13px;
  background: rgba(242,99,34,.09); border: 1px solid rgba(255,148,85,.28);
  font-size: 16.5px; line-height: 1.6; color: var(--mut);
}
.awm-ohje b { color: var(--cream); font-weight: 800; }
.awm-ohje__esim {
  display: block; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,148,85,.20);
  font-size: 16px; color: var(--faint);
}
.awm-ohje__esim i { color: var(--orange-lt); font-style: normal; }

/* Odotusarvo latausruudussa: hillitty, ei kilpaile vaihtuvan lauseen kanssa. */
.analyze__arvio {
  margin: 18px auto 0; max-width: 380px; text-align: center;
  font-size: 16px; line-height: 1.55; color: var(--faint); font-weight: 600;
  animation: fadeIn .5s ease both;
}
/* Kannustuslause erottuu aika-arviosta lampimammalla varilla. Sama rivi, eri
   tehtava: arvio on tietoa ja kannustus on seuraa (Henri 17.9.2026). */
.analyze__arvio--tsemppi {
  color: var(--orange-lt); font-weight: 700;
  animation: tsemppiIn .45s var(--ease) both;
}
@keyframes tsemppiIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .analyze__arvio--tsemppi { animation: none; } }

/* ---------- Ensimmäisen ajotunnin virstanpylväs ----------
   Näkyy kerran. Toisella kerralla onnittelu olisi jo tyhjä ele. */
.virsta {
  margin: 0 0 24px; padding: 22px 24px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(62,213,152,.14), rgba(34,26,20,.7));
  border: 1px solid rgba(62,213,152,.34);
}
.virsta__h { font-size: 20px; font-weight: 900; color: var(--cream); letter-spacing: -.02em; margin-bottom: 9px; }
.virsta__p { font-size: 17px; line-height: 1.6; color: var(--mut); margin: 0; }

/* ---------- Palauteruutu väljemmäksi ----------
   580 px oli liian kapea tälle sisällölle: kaksi mittaria vierekkäin, pitkä
   palaute ja taitolista ahtautuivat. Fontit napsun ylös samalla. */
#s-done.narrow { max-width: 720px; }
#s-done .card, #s-done .done__blk { padding: 24px 26px; }
#s-done .rowitem__k, #s-done .rowitem__v { font-size: 17.5px; }
@media (min-width: 760px) {
  #s-done .virsta__h { font-size: 22px; }
}

/* Lakiesteiden varoitus: punaisempi sävy kuin yleinen "aloitatteko oikeasti". */
.varoitus__box--este {
  background: linear-gradient(165deg, rgba(255,90,95,.13), var(--card) 52%);
  border-color: rgba(255,90,95,.36);
}
.varoitus__k--puna { color: var(--red); }
.varoitus__lista { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 13px; }
.varoitus__lista li { position: relative; padding-left: 26px; }
.varoitus__lista li::before {
  content: ''; position: absolute; left: 4px; top: 8px;
  width: 9px; height: 9px; border-radius: 999px; border: 2px solid var(--red);
}
.varoitus__lista b { display: block; font-size: 17.5px; color: var(--cream); font-weight: 800; }
.varoitus__lista span { font-size: 16px; color: var(--mut); line-height: 1.5; }

/* Vihje "Merkitse unohtunut ajo" -napin alla. Leipätekstin alaraja on 18 px
   (Henrin sitova sääntö), joten tämä ei ole himmennetty pikkuteksti vaan
   luettava lause omalla rivillään. */
.lessonlist__vihje { margin-top: 10px; font-size: 18px; line-height: 1.5; color: var(--mut); text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════
   TASOKOE (aw-tasokoe.js + app.js:n tasokoe-lohko)

   Henrin sitova fonttisääntö: mikään ei alle 16 px, leipäteksti 18 px.
   Jos ei mahdu, poistetaan sisältöä eikä pienennetä. Siksi asteikossa on
   kolme askelmaa eikä viittä: viisi vaihtoehtoa täysillä lauseilla ei
   mahdu puhelimen leveydelle 18 pikselillä.

   🔴 Täällä ei ole yhtään sääntöä joka näyttäisi numeron. Tasokokeen
      asteikko on päinvastainen kuin merkinnän. Numeroton näkymä ei voi
      näyttää käännettyä numeroa väärin päin.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Kutsukortti Etusivulla ─────────────────────────────────────────────── */
.tkkutsu { margin-top: 18px; border-color: rgba(255,148,85,.30); }
.tkkutsu__h { font-size: 26px; font-weight: 900; letter-spacing: -.02em; margin: 6px 0 10px; }

/* ── Kysymysruutu ───────────────────────────────────────────────────────── */
.tkq { max-width: 640px; margin: 0 auto; }
.tkq__prog { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.tkq__prog span {
  font-size: 16px; font-weight: 800; color: var(--faint);
  font-variant-numeric: tabular-nums; flex: none;
}
.tkq__track { flex: 1; height: 6px; border-radius: 999px; background: rgba(247,240,232,.10); overflow: hidden; }
.tkq__track i { display: block; height: 100%; background: var(--orange); transition: width .3s var(--ease); }
.tkq__h { font-size: 27px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 10px; }
.tkq__ala { font-size: 18px; line-height: 1.5; color: var(--mut); margin: 0 0 22px; }
.tkq__kysymys { font-size: 19px; font-weight: 700; color: var(--cream); margin: 0 0 16px; }
.tkq__valinnat { display: grid; gap: 10px; }

.tkval {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1.5px solid var(--line-2); border-radius: 16px;
  background: rgba(247,240,232,.04); color: var(--cream);
  padding: 17px 19px; font: inherit;
  transition: all .16s var(--ease);
}
.tkval b { display: block; font-size: 19px; font-weight: 800; }
.tkval span { display: block; margin-top: 4px; font-size: 16.5px; font-weight: 600; color: var(--mut); }
.tkval:hover { border-color: rgba(255,148,85,.55); background: rgba(242,99,34,.10); transform: translateY(-2px); }
.tkval:active { transform: scale(.99); }
.tkval.on { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 12px 28px rgba(242,99,34,.32); }
.tkval.on span { color: rgba(255,255,255,.86); }

/* "Emme ole ajaneet tätä" on eri asia kuin heikko taso. Se on neutraali
   tosiasia eikä arvio, joten se on erillään kolmesta askelmasta. */
.tkval--ei {
  margin-top: 16px; text-align: center; border-style: dashed;
  font-size: 17.5px; font-weight: 700; color: var(--mut);
}
.tkval--ei.on { background: rgba(247,240,232,.10); border-color: var(--line-2); color: var(--cream); border-style: solid; }

/* Tarkennus ääripäähän. Ilmestyy valinnan alle eikä omaksi ruudukseen:
   tasot 1 ja 5 ovat 1 % arvioista. */
.tktark {
  display: block; width: calc(100% - 24px); margin: -4px 0 0 24px;
  text-align: left; cursor: pointer;
  border: 1.5px dashed rgba(255,148,85,.40); border-top: none;
  border-radius: 0 0 14px 14px;
  background: rgba(242,99,34,.06); color: var(--orange-lt);
  padding: 12px 18px; font: inherit; font-size: 17px; font-weight: 700;
}
.tktark:hover { background: rgba(242,99,34,.13); }
.tktark.on { background: var(--orange-lt); border-color: var(--orange-lt); border-style: solid; color: #17110D; }

/* Kontekstirivi: tieto eikä ehdotus. Siksi se on rauhallinen laatikko eikä
   korostus — esitäyttö tekisi lomakkeesta klikkailtavan. */
.tkq__ktx {
  margin-top: 20px; padding: 15px 17px; border-radius: 14px;
  background: rgba(247,240,232,.05); border-left: 3px solid rgba(255,148,85,.45);
  font-size: 17px; line-height: 1.5; color: var(--mut);
}
.tkq__nav { display: flex; align-items: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.tkq__spacer { flex: 1; }
.tkq--intro h1 { font-size: 30px; line-height: 1.18; margin: 6px 0 18px; }
.tkq--intro .lead { margin-bottom: 14px; }

/* Huomiorivit. Yksirivinen kenttä eikä tekstialue: aineistossa opettajan
   kommentin mediaanipituus on 57 merkkiä. Iso laatikko viestisi väärää
   odotusta siitä mitä tähän pitäisi kirjoittaa. */
.tkhuom { display: grid; gap: 14px; margin: 20px 0 6px; }
.tkhuom__r { display: block; }
.tkhuom__r span { display: block; font-size: 17px; font-weight: 700; color: var(--cream); margin-bottom: 6px; }
.tkhuom__r input {
  width: 100%; box-sizing: border-box; border: 1.5px solid var(--line-2);
  border-radius: 14px; padding: 14px 16px; font: inherit; font-size: 18px;
  background: rgba(247,240,232,.04); color: var(--cream);
}
.tkhuom__r input::placeholder { color: var(--faint); }
.tkhuom__r input:focus { outline: none; border-color: var(--orange); background: rgba(242,99,34,.07); }

/* ── Tulos ──────────────────────────────────────────────────────────────── */
.tktulos { max-width: 780px; margin: 0 auto; }
.tktulos h1 { font-size: 27px; line-height: 1.25; margin: 6px 0 14px; }
.tktulos__yv {
  font-size: 21px; font-weight: 700; line-height: 1.45; color: var(--cream);
  margin: 0 0 22px; padding-left: 16px; border-left: 3px solid var(--orange);
}
.tktulos__jaettu {
  display: inline-flex; align-items: center; padding: 15px 20px;
  font-size: 18px; font-weight: 800; color: var(--green);
}
.tktulos__ei { margin-top: 18px; font-size: 18px; line-height: 1.55; color: var(--mut); }
.tktulos__ei b { color: var(--cream); }

/* Kategoriakortti */
.tkkortti { margin-top: 18px; }
.tkkortti__h { font-size: 22px; font-weight: 900; letter-spacing: -.02em; margin: 0 0 12px; }
.tkkortti__t { font-size: 18px; line-height: 1.6; color: var(--mut); margin: 16px 0 0; }

/* Palkki ilman numeroita. Viisi askelmaa, valittu korostettuna. */
.tkpalkki { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tkpalkki i {
  display: block; width: 34px; height: 9px; border-radius: 999px;
  background: rgba(247,240,232,.12);
}
.tkpalkki i.on { background: rgba(255,148,85,.55); }
.tkpalkki i.nyt { background: var(--orange); box-shadow: 0 0 0 3px rgba(242,99,34,.20); }
.tkpalkki span {
  margin-left: 10px; font-size: 17px; font-weight: 800; color: var(--orange-lt);
}

.tkkortti__huom {
  margin-top: 16px; padding: 14px 16px; border-radius: 14px;
  background: rgba(247,240,232,.05); font-size: 18px; line-height: 1.5; color: var(--cream);
}
.tkkortti__huom span {
  display: block; font-size: 16px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px;
}
/* Ammattilaisvertailu. Sitova sääntö: "näin me teemme", ei "sinun pitäisi
   yltää tähän". Siksi alaviite on osa lohkoa eikä valinnainen lisä. */
.tkkortti__amm {
  margin-top: 16px; padding: 14px 16px; border-radius: 14px;
  background: rgba(255,176,32,.08); border: 1px solid rgba(255,176,32,.22);
  font-size: 17px; line-height: 1.5; color: var(--cream);
}
.tkkortti__amm-f { display: block; margin-top: 8px; font-size: 16px; color: var(--mut); }
.tkkortti__nav { display: flex; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.tkkortti__ota { font-weight: 800; color: var(--orange-lt); }

/* Muutos edellisestä. Lasku näytetään: kahden mittauksen välissä on viikkoja
   ja työkalu joka voi vain nousta ei mittaa mitään. */
.tkmuutos { margin-top: 18px; }
.tkmuutos__l { display: grid; gap: 10px; margin-top: 14px; }
.tkmuutos__r {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 15px; border-radius: 13px; background: rgba(247,240,232,.04);
}
.tkmuutos__k { flex: 1; min-width: 160px; font-size: 18px; font-weight: 700; color: var(--cream); }
.tkmuutos__v { font-size: 17px; font-weight: 700; color: var(--mut); }
.tkmuutos__s { font-size: 19px; font-weight: 900; width: 24px; text-align: center; }
.tkmuutos__r--ylos .tkmuutos__s { color: var(--green); }
.tkmuutos__r--alas .tkmuutos__s { color: var(--amber); }
.tkmuutos__r--sama .tkmuutos__s { color: var(--faint); }

/* Arkiston rivi Tilannekuvassa on nappi eikä pelkkä rivi. */
.rowitem--tap {
  width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  font: inherit; color: inherit;
}
.rowitem--tap:hover .rowitem__v { color: var(--orange-lt); }

@media print {
  .tktulos__jaettu, .tkkortti__nav, .cta-row, .btn-link { display: none !important; }
  .tkkortti, .tkmuutos { break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TÄNÄÄN — viisi kysymystä

   Sivu vastaa aina samoihin viiteen kysymykseen samassa järjestyksessä.
   Numero ei ole koriste vaan lupaus: kysymys 3 on aina samassa kohdassa,
   joten käyttäjän ei tarvitse opetella sivua vaan lukea se.
   ═══════════════════════════════════════════════════════════════════════ */
.tsec { margin-top: 34px; }
.tsec:first-child { margin-top: 0; }
.tsec__h {
  display: flex; align-items: center; gap: 12px;
  font-size: 20px; font-weight: 900; letter-spacing: -.01em;
  color: var(--cream); margin: 0 0 14px;
}
/* Numeroton osio tunnin taustassa (5.9.2026). Otsikko ilman numerolappua
   tarvitsee oman vasemman reunuksensa, koska lappu piti sen ennen linjassa. */
.tsec--numeroton > .tsec__h { padding-left: 0; }
.tsec--numeroton { margin-top: 22px; }

.tsec__n {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(242,99,34,.16); border: 1.5px solid rgba(255,148,85,.42);
  color: var(--orange-lt); font-size: 17px; font-weight: 900;
}

/* Osio 1 kokoaa kolme mittaria yhteen korttiin. Ne olivat ennen hajallaan
   sivulla eri korkeuksilla, jolloin "missä mennään" oli koottava itse. */
.tnyt { display: grid; gap: 18px; }
.tnyt .quietbar { margin-top: 0; }

/* Osio 2: hero ei ole enää sivun ylin elementti vaan yksi vastaus viidestä.
   Siksi se ei myöskään huuda yhtä kovaa kuin ennen. */
.hero--tanaan { margin-top: 0; }

/* Osio 3: harjoittelupaikat. Nämä eivät ole linkkejä vaan vastauksia —
   käyttäjän ei tarvitse mennä minnekään lukeakseen ne. */
.tpaikka {
  margin-top: 16px; padding: 16px 18px; border-radius: 15px;
  background: rgba(247,240,232,.04); border: 1px solid var(--line);
}
.tpaikka__n {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 20px; font-weight: 800; color: var(--cream);
}
.tpaikka__k {
  font-size: 16px; font-weight: 700; color: var(--faint);
}
/* Uusi alue on huomio eikä varoitus: sama maisema opettaa lopulta vain sen
   maiseman, joten uusi paikka on hyvä uutinen. */
.tpaikka__k--uusi { color: var(--green); }
.tpaikka__t { margin-top: 6px; font-size: 18px; line-height: 1.5; color: var(--mut); }
.tpaikka__m {
  margin-top: 10px; font-size: 16.5px; font-weight: 700; color: var(--orange-lt);
}
.tpaikka__h {
  margin: 12px 0 0; font-size: 17px; line-height: 1.55; color: var(--mut);
  padding-left: 14px; border-left: 2px solid rgba(255,148,85,.35);
}

/* Osio 4: Coach tuo ohjeen käyttäjän luo eikä käyttäjä hae sitä. */
.tcoach__h {
  font-size: 22px; font-weight: 900; letter-spacing: -.02em;
  margin: 8px 0 10px; color: var(--cream);
}

/* Osio 5: silmukan sulkeva nappi. Se on koko tuotteen tärkein napautus —
   ilman sitä seuraavaa suunnitelmaa ei synny. */
.tjalkeen { border-color: rgba(255,148,85,.30); }

/* Esteet yhdellä rivillä. Ennen ensimmäistä ajoa lista on koko ruudun
   kokoinen ja se on oikein — ilman opetuslupaa ei saa ajaa. Sen jälkeen
   sama tieto on muistutus eikä portti, joten se mahtuu riville. */
.esteet--rivi {
  display: flex; align-items: center; gap: 14px; width: 100%;
  text-align: left; cursor: pointer; font: inherit;
  padding: 14px 16px; margin-bottom: 18px;
}
.esteet__rn {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--amber); color: #2a1e05; font-size: 17px; font-weight: 900;
}
.esteet__rt { flex: 1; min-width: 0; }
.esteet__rt b { display: block; font-size: 18px; font-weight: 800; color: var(--cream); }
.esteet__rt span {
  display: block; margin-top: 3px; font-size: 16px; color: var(--mut);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.esteet__ra { flex: none; font-size: 22px; color: var(--faint); }

/* ── Matkanne lohko B: rivi avautuu paikallaan ─────────────────────────────
   Rivi näytti napautettavalta (nuoli reunassa) muttei ollut sitä, ja vastaus
   kysymykseen "mikä tämä asia on" löytyi vasta Opetuspolusta. Nyt se on
   siinä missä kysymys herää. */
.tkrowwrap { border-bottom: 1px solid var(--line); }
.tkrowwrap:last-child { border-bottom: none; }
/* 🔴 NAPIN OLETUSTAUSTA ON NOLLATTAVA.

   Rivit muutettiin diveistä napeiksi jotta ne saa avattua. Selaimen oma
   tyylitiedosto antaa napille vaalean buttonface-taustan ja oman
   reunuksensa — ja koska rivin teksti on lähes valkoinen, se katosi
   kokonaan. Sivu näytti rikkinäiseltä.

   background ja border on siis pakko nollata NIMENOMAISESTI. Pelkkä
   font/color/cursor ei riitä. */
.tkrow {
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: none; border: none;
  -webkit-appearance: none; appearance: none;
}
.tkrow:hover { background: rgba(247,240,232,.04); }

/* 🔴 EROTINVIIVA KUULUU KÄÄREELLE EIKÄ RIVILLE.

   Rivi on kääreensä ainoa lapsi silloin kun se on kiinni, joten
   `.tkrow:last-child` osui JOKAISEEN riviin ja poisti viivan kaikkialta.
   Kääre on oikea sisarusketju: viiva jokaisen väliin, viimeiseltä pois. */
.tkrowwrap { border-bottom: 1px solid var(--line); }
.tkrowwrap:last-child { border-bottom: none; }
.tkrowwrap.auki .tkrow__c { transform: rotate(90deg); }
.tkrow__c { transition: transform .18s var(--ease); }

.tkala { padding: 4px 16px 18px; display: grid; gap: 12px; }
.tksuor {
  padding: 14px 16px; border-radius: 13px;
  background: rgba(247,240,232,.04); border: 1px solid var(--line);
}
.tksuor.on { border-color: rgba(62,213,152,.34); background: rgba(62,213,152,.06); }
.tksuor__h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tksuor__n { flex: 1; min-width: 150px; font-size: 18px; font-weight: 800; color: var(--cream); }
.tksuor__v { font-size: 16px; font-weight: 700; color: var(--faint); }
.tksuor__t {
  font-size: 16px; font-weight: 800; color: var(--orange-lt);
  font-variant-numeric: tabular-nums;
}
.tksuor.on .tksuor__t { color: var(--green); }
.tksuor__i { margin: 10px 0 0; font-size: 17px; line-height: 1.55; color: var(--mut); }
.tksuor__i--tyhja { color: var(--faint); font-style: italic; }
.tkala__lisaa { margin-top: 4px; font-weight: 800; }

/* Ala-aiheen alla olevat konkreettiset suoritukset. Otsikko kertoo aiheen,
   nämä kertovat mitä autossa oikeasti tehdään. */
.tpaikka__taidot, .rskl__n .tpaikka__taidot {
  list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px;
}
.tpaikka__taidot li {
  font-size: 16.5px; line-height: 1.4; color: var(--mut);
  padding-left: 16px; position: relative;
}
.tpaikka__taidot li::before {
  content: "•"; position: absolute; left: 3px; color: var(--orange-lt);
}
.tpaikka__taidot-lisaa { color: var(--faint) !important; font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════
   ENNEN SEURAAVAA VAIHETTA (brief P0)

   Tämä on se komponentti joka muuttaa "18 / 24 harjoiteltu" muotoon
   "kuusi asiaa kannattaa vielä harjoitella". Numero on tuki, lause on
   vastaus — siksi otsikko on isompi kuin luvut riveillä.
   ═══════════════════════════════════════════════════════════════════════ */
.ennen { margin-top: 18px; border-color: rgba(255,148,85,.28); }
.ennen__h {
  font-size: 21px; font-weight: 800; line-height: 1.4; color: var(--cream);
  margin: 8px 0 16px;
}
.ennen__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ennen__r {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 10px; border-radius: 11px;
}
.ennen__r--harj { background: rgba(255,176,32,.07); }
.ennen__m { font-size: 19px; font-weight: 900; text-align: center; }
.ennen__r--done .ennen__m { color: var(--green); }
.ennen__r--harj .ennen__m { color: var(--amber); }
.ennen__r--todo .ennen__m { color: var(--faint); }
.ennen__n { font-size: 18px; font-weight: 700; color: var(--cream); line-height: 1.35; }
.ennen__r--done .ennen__n { color: var(--mut); }
.ennen__v { font-size: 16px; font-weight: 700; color: var(--faint); white-space: nowrap; }
.ennen__r--harj .ennen__v { color: var(--amber); }
.ennen__lisaa {
  padding: 12px 10px 4px 48px; font-size: 16.5px; color: var(--faint); font-style: italic;
}
.ennen__valmis { margin-top: 12px; }
.ennen__valmis summary {
  cursor: pointer; font-size: 17px; font-weight: 700; color: var(--green);
  padding: 8px 0; list-style: none;
}
.ennen__valmis summary::-webkit-details-marker { display: none; }
.ennen__valmis summary::before { content: "ƒa "; display: inline-block; transition: transform .18s var(--ease); }
.ennen__valmis[open] summary::before { transform: rotate(90deg); }
.ennen__f { margin-top: 14px; }

/* Tiivis rivi Tänään-sivulla: sama tieto yhtenä lauseena, vie Matkanteeseen. */
.ennenrivi {
  display: flex; align-items: center; gap: 14px; width: 100%;
  text-align: left; cursor: pointer; font: inherit;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(242,99,34,.08); border: 1px solid rgba(255,148,85,.28);
  color: var(--cream);
}
.ennenrivi:hover { background: rgba(242,99,34,.14); }
.ennenrivi--ok { background: rgba(62,213,152,.08); border-color: rgba(62,213,152,.28); }
.ennenrivi__n {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--orange); color: #fff; font-size: 18px; font-weight: 900;
}
.ennenrivi--ok .ennenrivi__n { background: var(--green); color: #0c2a1e; }
.ennenrivi__t { flex: 1; min-width: 0; }
.ennenrivi__t b { display: block; font-size: 18px; font-weight: 800; line-height: 1.35; }
.ennenrivi__t span { display: block; margin-top: 2px; font-size: 16px; color: var(--mut); }

/* Check-out: mitä suunnitelmassa muuttui (brief §16). */
.muutos { margin-top: 18px; border-color: rgba(62,213,152,.30); }
.muutos__valmis { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 8px; }
.muutos__valmis li { font-size: 19px; font-weight: 800; color: var(--green); }
.muutos__r {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--line); flex-wrap: wrap;
}
.muutos__r span { font-size: 17px; color: var(--mut); }
.muutos__r b { font-size: 18px; font-weight: 800; color: var(--cream); font-variant-numeric: tabular-nums; }
.muutos__f { margin: 14px 0 0; font-size: 18px; line-height: 1.5; color: var(--green); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════
   NOPEA MERKINTÄ (brief P0.5)

   Yksi ruutu, noin seitsemän napautusta. Kaikki valinnat ovat sirujen tai
   nappien napautuksia — ei yhtään pakollista tekstikenttää. Fontit ovat
   samat 18 px kuin muualla: nopeus tulee askelten määrästä eikä siitä
   että teksti kutistetaan.
   ═══════════════════════════════════════════════════════════════════════ */
.nopea { max-width: 640px; margin: 0 auto; }
.nopea h1 { font-size: 30px; line-height: 1.18; margin: 6px 0 10px; }
.nlohko { margin-top: 26px; }
.nlohko__k {
  font-size: 18px; font-weight: 800; color: var(--cream); margin-bottom: 12px;
}
.nsirut { display: flex; flex-wrap: wrap; gap: 9px; }
.nsiru {
  border: 1.5px solid var(--line-2); background: rgba(247,240,232,.04);
  color: var(--cream); border-radius: 999px; padding: 12px 18px;
  font: inherit; font-size: 17.5px; font-weight: 700; cursor: pointer;
  transition: all .14s var(--ease);
}
.nsiru:hover { border-color: rgba(255,148,85,.55); background: rgba(242,99,34,.10); }
.nsiru.on { background: var(--orange); border-color: var(--orange); color: #fff; }

.ntaito {
  margin-top: 12px; padding: 15px 16px; border-radius: 15px;
  background: rgba(247,240,232,.04); border: 1.5px solid var(--line-2);
}
.ntaito.r1 { border-color: rgba(62,213,152,.40); background: rgba(62,213,152,.07); }
.ntaito.r2 { border-color: rgba(255,176,32,.40); background: rgba(255,176,32,.07); }
.ntaito.r3 { border-color: rgba(255,90,95,.40); background: rgba(255,90,95,.07); }
.ntaito__n { font-size: 18.5px; font-weight: 800; color: var(--cream); margin-bottom: 11px; }
.ntaito__v { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ntaito__b {
  border: 1.5px solid var(--line-2); background: rgba(247,240,232,.04);
  color: var(--mut); border-radius: 12px; padding: 12px 6px;
  font: inherit; font-size: 16.5px; font-weight: 700; cursor: pointer;
}
.ntaito__b:hover { border-color: rgba(255,148,85,.5); }
.ntaito__b.b1.on { background: var(--green); border-color: var(--green); color: #0c2a1e; }
.ntaito__b.b2.on { background: var(--amber); border-color: var(--amber); color: #2a1e05; }
.ntaito__b.b3.on { background: var(--red); border-color: var(--red); color: #fff; }

.ndate, .nteksti {
  width: 100%; box-sizing: border-box; border: 1.5px solid var(--line-2);
  border-radius: 14px; padding: 14px 16px; font: inherit; font-size: 18px;
  background: rgba(247,240,232,.04); color: var(--cream);
}
.ndate::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); cursor: pointer; }
.nteksti { margin-top: 10px; min-height: 90px; resize: vertical; }
.nteksti::placeholder { color: var(--faint); }
.nlisa { margin-top: 24px; }
.nlisa summary {
  cursor: pointer; font-size: 17.5px; font-weight: 800; color: var(--orange-lt);
  padding: 8px 0; list-style: none;
}
.nlisa summary::-webkit-details-marker { display: none; }

.nopea__cta { margin-top: 30px; }
.nopea__alt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 16px; flex-wrap: wrap;
}

/* ── Tietojen poisto (Oma-sivu) ─────────────────────────────────────────────
   Suljettuna hillitty: poisto ei ole toiminto jota tarjotaan. Avattuna
   punainen, koska silloin ollaan tekemässä jotain peruuttamatonta.
   Fonttikoot noudattavat 16 px:n alarajaa (sitova). */
.poisto { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.poisto__vihje { margin: 10px 0 0; font-size: 16px; color: var(--faint); }

.btn--vaara { border-color: rgba(255,90,95,.45); color: var(--red); }
.btn--vaara:hover:not(:disabled) {
  border-color: var(--red); background: rgba(255,90,95,.10);
}
/* Avatussa laatikossa vahvistusnappi on täytetty, ei haamu. */
.poisto--auki .btn--vaara {
  background: var(--red); border-color: var(--red); color: #2A0C0D;
}
.poisto--auki .btn--vaara:hover:not(:disabled) { background: #FF7276; }
.poisto--auki .btn--vaara:disabled {
  background: rgba(255,90,95,.14); border-color: rgba(255,90,95,.28);
  color: rgba(255,143,146,.9); cursor: not-allowed;
}

.poisto--auki {
  border: 2px solid rgba(255,90,95,.45); border-radius: var(--radius);
  background: rgba(255,90,95,.06); padding: 26px; margin-top: 22px;
}
.poisto__ots { margin: 0 0 12px; font-size: 22px; font-weight: 800; color: var(--cream); }
.poisto__teksti { margin: 0 0 14px; font-size: 18px; line-height: 1.6; color: var(--mut); }
.poisto__teksti strong { color: var(--cream); }
.poisto__kentta {
  width: 100%; max-width: 340px; box-sizing: border-box;
  padding: 16px 18px; margin-bottom: 18px;
  font-family: inherit; font-size: 18px; font-weight: 700;
  color: var(--cream); background: var(--bg2);
  border: 2px solid var(--line-2); border-radius: var(--radius-sm);
}
.poisto__kentta:focus { outline: none; border-color: var(--red); }
.poisto__virhe {
  margin-top: 18px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: rgba(255,90,95,.12); border: 1px solid rgba(255,90,95,.4);
  font-size: 17px; line-height: 1.55; color: var(--cream);
}

/* ── Tallennus ei onnistunut ────────────────────────────────────────────
   Nauha ruudun ylalaidassa. Syntyi 6.9. auditista: lakiportin rasti ja
   taukokartoituksen vastaukset epaonnistuivat HILJAA - kayttoliittyma
   nautti onnistumista mutta kanta ei muuttunut, ja seuraavana paivana
   kaikki oli takaisin alkutilassa. Nauha on ainoa kohta jossa sanotaan
   ääneen ettei tallennus mennyt lapi. */
.tallvirhe {
  position: fixed; left: 12px; right: 12px; top: 12px; z-index: 9000;
  background: #7f1d1d; color: #fff; border: 1px solid #b91c1c;
  border-radius: 12px; padding: 14px 16px; font-size: 16px; line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}


/* ══════════════════════════════════════════════════════════════════════════
   POKAALI — pakolliset asiat hoidettu (Henri 17.9.2026)

   Tämä on ainoa paikka sovelluksessa jossa juhlitaan isosti. Syy on se että
   tämä on ainoa hetki jolla on oikea lakisääteinen merkitys: ennen sitä
   opetusajo on kielletty, sen jälkeen sallittu. Jos samaa juhlaa käytettäisiin
   pienempiin asioihin, tämä hetki latistuisi.
   ══════════════════════════════════════════════════════════════════════════ */
.pokaali {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(14,10,7,.88); backdrop-filter: blur(8px);
  display: grid; place-items: center; padding: 20px;
  overflow-y: auto; animation: fadeIn .3s ease both;
}
.pokaali__box {
  width: min(480px, 100%); text-align: center;
  background: linear-gradient(168deg, rgba(255,176,32,.20), var(--card) 52%);
  border: 1px solid rgba(255,176,32,.40); border-radius: 22px;
  padding: 34px 30px 30px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 80px rgba(255,176,32,.14);
  animation: pokaaliIn .6s var(--ease) both;
}
@keyframes pokaaliIn {
  from { opacity: 0; transform: translateY(24px) scale(.95); }
  to   { opacity: 1; transform: none; }
}
.pokaali__viz { position: relative; width: 108px; height: 108px; margin: 0 auto 18px; }
.pokaali__ik {
  position: relative; z-index: 2; width: 108px; height: 108px;
  color: var(--amber); filter: drop-shadow(0 8px 24px rgba(255,176,32,.45));
}
/* Kaksi hitaasti laajenevaa rengasta. Konfettia ei käytetä: se on halpa efekti
   eikä sovi muuten hillittyyn ilmeeseen. */
.pokaali__sade {
  position: absolute; inset: 0; border-radius: 999px;
  border: 1px solid rgba(255,176,32,.45);
  animation: pokaaliSade 2.8s var(--ease) infinite;
}
.pokaali__sade.s2 { animation-delay: 1.1s; }
@keyframes pokaaliSade {
  0%   { opacity: .75; transform: scale(.72); }
  100% { opacity: 0;   transform: scale(1.5); }
}
.pokaali__eyebrow {
  font-size: 16px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber); margin: 0 0 10px;
}
.pokaali__box h2 {
  font-size: clamp(1.55rem, 4.2vw, 2rem); font-weight: 900; letter-spacing: -.03em;
  line-height: 1.16; color: var(--cream); margin: 0 0 14px;
}
.pokaali__p { font-size: 17px; line-height: 1.6; color: var(--mut); margin: 0 0 24px; }
@media (prefers-reduced-motion: reduce) {
  .pokaali, .pokaali__box { animation: none; }
  .pokaali__sade { animation: none; opacity: .4; }
}

/* ── AJOKERRAN JÄRJESTYS: suunnitelma › ajo › merkintä ──────────────────────
   Kolme askelta yhdellä rivillä toimintokortin sisällä. Ei ole oma lohkonsa
   eikä vie pystytilaa napilta: 34 px korkea rivi joka vastaa kysymykseen
   "kumpi näistä napeista pitää painaa ensin". */
.jarj {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 8px; margin: 16px 0 2px;
}
.jarj__a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 16px; font-weight: 700; color: var(--faint);
  padding: 5px 11px 5px 5px; border-radius: 999px;
  border: 1px solid transparent;
}
.jarj__a b {
  width: 26px; height: 26px; flex: none; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(247,240,232,.10); color: var(--faint);
  font-size: 16px; font-weight: 800;
}
.jarj__a.on {
  color: var(--cream); background: rgba(242,99,34,.12);
  border-color: rgba(255,148,85,.32);
}
.jarj__a.on b { background: var(--orange); color: #fff; }
.jarj__n { color: rgba(247,240,232,.26); font-size: 16px; }
@media (max-width: 380px) { .jarj__a { font-size: 16px; padding-right: 8px; gap: 5px; } }

/* ── "JÄI TEKEMÄTTÄ" + TUTUSTUMINEN YKSITELLEN (Henri 17.9.2026) ──────────── */
/* Tekemättä jäänyt tavoite himmenee mutta pysyy luettavana: se on vastaus eikä
   virhe. Reunaväri on neutraali harmaa — ei punainen, koska mitään ei mennyt
   pieleen. */
.ntaito--ei { border-color: var(--line-2); background: rgba(247,240,232,.03); }
.ntaito--ei .ntaito__n { color: var(--faint); }
.ntaito--ei .ntaito__v { opacity: .45; }
.ntaito__ei {
  display: block; width: 100%; margin-top: 8px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: transparent; border: 1px dashed var(--line-2);
  color: var(--faint); font: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: border-color .18s var(--ease), color .18s var(--ease);
}
.ntaito__ei:hover { border-color: rgba(255,148,85,.45); color: var(--mut); }
.ntaito__ei.on {
  border-style: solid; border-color: rgba(247,240,232,.34);
  background: rgba(247,240,232,.07); color: var(--cream);
}

.ntutlista { display: grid; gap: 8px; }
.ntut {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--card-2); border: 1px solid var(--line);
  color: var(--mut); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.ntut:hover { border-color: rgba(255,148,85,.42); }
.ntut__b {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  border: 1.5px solid var(--line-2); color: transparent;
  font-size: 15px; font-weight: 900;
}
.ntut.on { background: rgba(62,213,152,.09); border-color: rgba(62,213,152,.42); color: var(--cream); }
.ntut.on .ntut__b { background: var(--green); border-color: var(--green); color: #0c2a1e; }

/* ── MIKÄ TÄMÄ TAITO ON (Henri 17.9.2026) ────────────────────────────────────
   Info-nappi ehdotusrivin oikeassa reunassa + sen avaama tietoruutu. Nappi on
   tarkoituksella hillitty: rivin päätoiminto on ottaa taito mukaan, ja info on
   se mitä tarvitaan vain silloin kun nimi ei kerro tarpeeksi. */
.reco__row, .threerow { display: flex; align-items: stretch; gap: 8px; }
.reco__row > .reco__item, .threerow > .threeitem { flex: 1 1 auto; min-width: 0; }
.tinfo {
  flex: none; width: 46px; align-self: stretch;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(247,240,232,.04); border: 1px solid var(--line);
  color: var(--faint); cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.tinfo svg { width: 21px; height: 21px; }
.tinfo:hover {
  color: var(--orange-lt); border-color: rgba(255,148,85,.45);
  background: rgba(242,99,34,.10);
}
.tinfo__ov {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(14,10,7,.84); backdrop-filter: blur(7px);
  display: grid; place-items: center; padding: 20px; overflow-y: auto;
  animation: fadeIn .22s ease both;
}
.tinfo__box {
  width: min(520px, 100%);
  background: linear-gradient(168deg, var(--card-2), var(--card) 58%);
  border: 1px solid rgba(255,148,85,.26); border-radius: 20px;
  padding: 26px 26px 24px;
  box-shadow: 0 26px 70px rgba(0,0,0,.6);
  animation: tinfoIn .3s var(--ease) both;
}
@keyframes tinfoIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tinfo__yla {
  font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--orange-lt); margin: 0 0 8px;
}
.tinfo__box h2 {
  font-size: clamp(1.35rem, 3.6vw, 1.7rem); font-weight: 900; letter-spacing: -.02em;
  line-height: 1.2; color: var(--cream); margin: 0 0 14px;
}
.tinfo__body p { font-size: 17px; line-height: 1.62; color: var(--mut); margin: 0 0 14px; }
.tinfo__body p:last-child { margin-bottom: 0; }
.tinfo__coach { display: block; margin-top: 16px; text-align: left; }
@media (prefers-reduced-motion: reduce) { .tinfo__ov, .tinfo__box { animation: none; } }

/* ── MISTÄ TÄMÄN SAA + SELKEYTETTY KÄYTÄNNÖN LOHKO (Henri 17.9.2026) ───────── */
/* Linkki on tarkoituksella TOISSIJAINEN: rivin päätoiminto on rastittaa kohta
   hoidetuksi. Linkki vastaa kysymykseen "mistä", ei kehota ostamaan. */
.tkchk__wrap { border-bottom: 1px solid var(--line); }
.tkchk__wrap:last-child { border-bottom: 0; }
.tkchk__wrap > .tkchk { border-bottom: 0; padding-bottom: 4px; }
.mista {
  /* Kahden sarakkeen rastilistassa sarake on kapea, ja space-between puristi
     linkin kolmelle riville (mitattu 17.9.2026). Rivi saa kiertya: lahde
     putoaa omalle rivilleen kun tilaa ei ole. */
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 12px;
  margin: 0 0 12px 40px; padding: 9px 13px;
  border-radius: var(--radius-sm);
  background: rgba(247,240,232,.04); border: 1px solid var(--line);
  color: var(--mut); text-decoration: none;
  font-size: 16px; font-weight: 700;
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.mista:hover {
  border-color: rgba(255,148,85,.42); background: rgba(242,99,34,.09); color: var(--cream);
}
.mista__l { font-size: 14px; font-weight: 600; color: var(--faint); white-space: nowrap; }
.tklisat { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.tklisat__k {
  font-size: 14px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 10px;
}
.tklisat .mista { margin-left: 0; }

/* Oikea palsta on nyt kolme erillistä korttia: aikataulu, kulut ja ajokokeen
   käytännöt. Ne vastaavat eri kysymyksiin eivätkä kuulu samaan pinoon. */
.tkoikea { display: grid; gap: 14px; }
.tkoikea .koeinfo { margin-top: 0; padding-top: 0; border-top: 0; }
.tkaika__row--yht {
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line-2);
}
.tkaika__row--yht b { color: var(--orange-lt); }
@media (max-width: 720px) {
  .mista { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MODUULIEN EROTTELU (Henri 17.9.2026)

   "musta tausta ja oranssit iconit ja valkeat tekstit ... tätä pitäisi vähän
   jotenkin erotella että käyttäjä älyäisi näitä eri elementtejä"

   RATKAISUN RAJAT — nämä ovat tärkeämmät kuin itse värit:

   1. Tumma elokuvamainen pohja EI muutu. Se on sitova visuaalinen linjaus
      (muisti: ajoweppi-visuaalinen-kieli). Tässä ei vaihdeta ilmettä vaan
      lisätään siihen erottelu jota siitä puuttui.

   2. ORANSSI ON VARATTU TOIMINNALLE. Jokainen nappi on oranssi joka
      näkymässä. Jos tunnusväri valuisi nappeihin, käyttäjä menettäisi
      ainoan merkin joka kertoo mihin painetaan.

   3. Tunnusväri näkyy KOLMESSA paikassa eikä useammassa: osion
      otsikkosirussa, korttien pikkuotsikoissa ja valikon aktiivisessa
      kohdassa. Neljäs paikka tekisi tästä sekavan kirjavaa.

   Värit on valittu niin että ne ovat samalla lämpöasteikolla kuin oranssi
   eivätkä riitele sen kanssa: ei kylmää sinistä eikä kirkasta vihreää.
   ══════════════════════════════════════════════════════════════════════════ */
body { --acc: var(--orange-lt); --acc-bg: rgba(242,99,34,.14); }
body[data-aw-view="tanaan"]    { --acc: #FF9455; --acc-bg: rgba(242,99,34,.14); }  /* tekeminen */
body[data-aw-view="matka"]     { --acc: #7FC8E8; --acc-bg: rgba(127,200,232,.13); } /* eteneminen */
body[data-aw-view="coach"]     { --acc: #C79BE8; --acc-bg: rgba(199,155,232,.13); } /* tieto */
body[data-aw-view="ajokerrat"] { --acc: #6FD8A8; --acc-bg: rgba(111,216,168,.13); } /* tehty */
body[data-aw-view="reitit"]    { --acc: #F2C14E; --acc-bg: rgba(242,193,78,.13); }  /* paikat */
body[data-aw-view="ammatti"]   { --acc: #E8A87C; --acc-bg: rgba(232,168,124,.13); } /* aineisto */
body[data-aw-view="polku"]     { --acc: #9DB8E8; --acc-bg: rgba(157,184,232,.13); } /* runko */
body[data-aw-view="oma"]       { --acc: #D3C9BC; --acc-bg: rgba(211,201,188,.11); } /* neutraali */

/* ── Osion otsikko: kuvakesiru + otsikko + yksi rivi ─────────────────────── */
.sectionhead--ik { align-items: center; gap: 16px; margin-bottom: 22px; }
.sectionhead__ik {
  width: 52px; height: 52px; flex: none; border-radius: 15px;
  display: grid; place-items: center;
  background: var(--acc-bg); border: 1px solid color-mix(in srgb, var(--acc) 34%, transparent);
  color: var(--acc);
}
.sectionhead__ik svg { width: 25px; height: 25px; }
.sectionhead__tx { flex: 1; min-width: 0; }
.sectionhead--ik h2 { margin: 0; }
.sectionhead--ik p {
  margin: 3px 0 0; font-size: 16px; font-weight: 600; color: var(--faint); line-height: 1.4;
}
/* Selaimet ilman color-mixiä saavat kiinteän reunan. Ilman tätä reuna katoaisi
   kokonaan eikä siru erottuisi taustasta. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .sectionhead__ik { border-color: var(--line-2); }
}

/* ── Korttien pikkuotsikot seuraavat näkymän tunnusväriä ─────────────────── */
.card__label { color: var(--acc); opacity: .9; }

/* ── Valikon aktiivinen kohta ──────────────────────────────────────────────
   Rajattu SIVUPALKKIIN. Puhelimen alapalkilla on oma korostus (oranssi viiva
   yläreunassa + kuvakkeen tausta), ja se on rakennettu 76 px:n korkeuteen
   pikselilleen — tämän säännön vuotaminen sinne söisi juuri sen korostuksen. */
.sidenav .navitem.on { background: var(--acc-bg); }
.sidenav .navitem.on .navitem__i { color: var(--acc); }
/* Alapalkissa vaihtuu vain sävy, ei rakenne. */
.tabbar .navitem.on { color: var(--acc); }
.tabbar .navitem.on::before { background: var(--acc); }
.tabbar .navitem.on .navitem__i { background: var(--acc-bg); color: var(--acc); }

@media (max-width: 640px) {
  .sectionhead--ik { gap: 13px; margin-bottom: 18px; }
  .sectionhead__ik { width: 46px; height: 46px; border-radius: 13px; }
  .sectionhead__ik svg { width: 22px; height: 22px; }
  .sectionhead--ik p { font-size: 15.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIILIN LÄPIKÄYNTI 17.9.2026 — mitattu 390 px:n ruudulla (iPhone 14/15).

   🔴 SÄÄNTÖ JOTA NÄMÄ NOUDATTAVAT: fonttikokoa ei pienennetä (muisti:
   henri-ui-iso-fontti, sanottu kolmesti). Jos teksti ei mahdu, joustaa
   kirjainväli, sarakkeen leveys tai rivitys — ei koko.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. Osion kuvaus, "mistä tämän saa" -linkin lähde ja lisäotsikko olivat
      15,5 ja 14 px. Nostettu 16:een. */
.sectionhead--ik p { font-size: 16px; }
@media (max-width: 640px) { .sectionhead--ik p { font-size: 16px; } }
.mista__l { font-size: 16px; }
.mista > span:first-child { flex: 1 1 auto; min-width: 0; }
.tklisat__k { font-size: 16px; }

/* 2. Järjestysrivi (suunnitelma › ajo › merkintä). 14 px oli liian pieni ja
      13 px kapealla ruudulla vielä pahempi. 16 px mahtuu kun merkkiväli on
      tiukempi ja rivi saa kiertyä kahdelle riville. */
.jarj__a { font-size: 16px; }
@media (max-width: 380px) {
  .jarj__a { font-size: 16px; padding-right: 9px; letter-spacing: -.01em; }
  .jarj { gap: 5px 5px; }
}

/* 3. "Havainnointi" leikkautui profiilimittarin nimessä (113 px tarvittiin,
      98 px oli tarjolla). Nimi saa nyt kutistua ja arvo pysyy oikeassa
      reunassa — luku on se joka ei saa katketa. */
.meter__name { min-width: 0; overflow-wrap: anywhere; }
.meter__top { flex-wrap: wrap; }

/* 4. "Käsittelyharjoitukset" leikkautui ammattilaisdatan riviltä (173 / 152).
      Ensimmäinen sarake on kiinteä 13rem eikä se jousta kapealla ruudulla. */
@media (max-width: 560px) {
  .arivi { grid-template-columns: minmax(0, 1fr) minmax(70px, .9fr) 4.2rem; gap: 12px; }
  .arivi__nm { overflow-wrap: anywhere; }
}

/* ══════════════════════════════════════════════════════════════════════════
   KATSELMUSPANEELI (?katselmus=1)

   Työkalu Henrille eikä käyttäjälle. Ilme on tarkoituksella ERI kuin muualla
   — vihreä ja tekninen — jotta katselmoija ei koskaan sekoita sitä tuotteeseen
   eikä jää miettimään kuuluuko tämä laatikko sovellukseen.
   ══════════════════════════════════════════════════════════════════════════ */
.katselmus {
  position: fixed; right: 16px; bottom: 16px; z-index: 300;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  max-width: calc(100vw - 32px);
}
.katselmus__kahva {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 16px; border-radius: 999px; cursor: pointer;
  background: #0E241B; border: 1px solid rgba(62,213,152,.55);
  color: var(--green); font: inherit; font-size: 16px; font-weight: 800;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.katselmus__kahva i {
  font-style: normal; font-size: 16px; font-weight: 800;
  background: var(--green); color: #07281B;
  border-radius: 999px; padding: 1px 8px;
}
.katselmus__body {
  width: min(340px, calc(100vw - 32px));
  max-height: min(70vh, 640px); overflow-y: auto;
  background: #0E1512; border: 1px solid rgba(62,213,152,.34);
  border-radius: 18px; padding: 18px 16px 14px;
  box-shadow: 0 26px 70px rgba(0,0,0,.66);
}
.katselmus__body[hidden] { display: none; }
.katselmus__k {
  font-size: 16px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--green); margin-bottom: 8px;
}
.katselmus__p { font-size: 16px; line-height: 1.45; color: var(--faint); margin: 0 0 14px; }
.katselmus__r {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 12px; margin-bottom: 7px; border-radius: 12px; cursor: pointer;
  background: rgba(62,213,152,.06); border: 1px solid rgba(62,213,152,.20);
  color: var(--cream); font: inherit;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.katselmus__r:hover { border-color: rgba(62,213,152,.55); background: rgba(62,213,152,.12); }
.katselmus__nro {
  flex: none; min-width: 42px; text-align: center;
  font-size: 16px; font-weight: 800; color: var(--green);
  background: rgba(62,213,152,.12); border-radius: 7px; padding: 3px 7px;
}
.katselmus__tx { min-width: 0; }
.katselmus__tx b { display: block; font-size: 16px; font-weight: 800; }
.katselmus__tx span { display: block; font-size: 16px; color: var(--faint); font-weight: 600; line-height: 1.35; }
.katselmus__pois { display: block; margin: 10px auto 0; color: var(--faint); }
/* Puhelimessa alapalkki on 76 px, joten kahva nousee sen yläpuolelle. */
@media (max-width: 900px) {
  .katselmus { bottom: calc(var(--tabbar-h) + 12px); right: 12px; }
}

/* ── OPPILAAN KUTSULOMAKE (M151) ──────────────────────────────────────────── */
.kutsu { display: grid; gap: 6px; margin-top: 16px; }
.kutsu__l {
  font-size: 16px; font-weight: 700; color: var(--mut); margin-top: 8px;
}
.kutsu .field { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   LAKIPORTTI SELKEÄKSI (Henri 20.9.2026)

   Kaksi eri ongelmaa samassa paikassa:
   1. Etusivun kortti ei kertonut mihin rastit johtavat — sanaa "ajotunti" ei
      näkynyt ruudulla lainkaan, joten portti näytti omalta tehtävältään.
   2. Seitsemän kohdan listassa kaikki näyttivät samanarvoisilta, vaikka kolme
      estää ajamisen kokonaan ja yksi estää ajokokeen.
   ══════════════════════════════════════════════════════════════════════════ */

/* Lukittu päänappi: näyttää mihin tämä johtaa, muttei ole painettavissa. */
.esteLukko {
  display: flex; align-items: center; gap: 13px;
  margin-top: 18px; padding: 14px 16px;
  border: 1px dashed var(--line-2); border-radius: var(--radius-sm);
  background: rgba(247,240,232,.03); color: var(--faint);
}
.esteLukko svg { width: 21px; height: 21px; flex: none; }
.esteLukko > span:nth-child(2) { flex: 1; min-width: 0; }
.esteLukko b { display: block; font-size: 17px; font-weight: 800; color: var(--mut); }
.esteLukko b + span { display: block; font-size: 16px; margin-top: 2px; }
.esteLukko__n {
  flex: none; font-size: 17px; font-weight: 800; color: var(--mut);
  background: rgba(247,240,232,.07); border-radius: 999px; padding: 4px 12px;
}

/* Pakollisuusmerkintä rastilistassa. Oranssi = estää ajamisen, keltainen =
   estää ajokokeen. Kumpikin sanoo sen ääneen eikä nojaa pelkkään väriin. */
.tkchk__pak {
  display: inline-block; margin-left: 9px; vertical-align: 2px;
  font-size: 16px; font-weight: 800; letter-spacing: .02em;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(242,99,34,.16); color: var(--orange-lt);
  border: 1px solid rgba(255,148,85,.34);
}
.tkchk__pak--koe {
  background: rgba(255,176,32,.14); color: var(--amber);
  border-color: rgba(255,176,32,.34);
}
/* Hoitamaton pakollinen erottuu myös ruudun reunasta silmäiltäessä. */
.tkchk--pakko .tkchk__b { border-color: rgba(255,148,85,.55); }
.tkchk--ok .tkchk__pak { opacity: .45; }
@media (max-width: 520px) {
  .tkchk__pak { margin-left: 0; margin-top: 5px; display: block; width: fit-content; }
}

/* Ulospääsy latausruudulta. Ilmestyy vasta 120 s jälkeen; selitys kertoo
   miksi se ilmestyi, jottei se näytä siltä että jokin meni juuri rikki. */
.analyze__ulosrivi { margin-top: 22px; text-align: center; }
.analyze__ulosrivi p {
  font-size: 16px; line-height: 1.5; color: var(--faint);
  margin: 0 0 8px; font-weight: 600;
}

/* ── MITÄ SANOT OPPILAALLE (Henri 20.9.2026) ───────────────────────────────
   Oli aakkosellinen lista 31 otsikosta eli vastaus kysymykseen "mitä kaikkea
   täällä on" — jota kukaan ei kysy. Nyt haku + oman vaiheen aiheet ensin. */
.spankki__haku { margin: 16px 0 6px; }
.spankki__haku .field { margin: 0; }
.spankki__ryhma { margin-top: 18px; }
.spankki__rk {
  font-size: 16px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--acc, var(--orange-lt)); margin-bottom: 10px;
}
/* Tason numero ja nimi rinnakkain: numero on tunniste, nimi on se joka
   kertoo mitä tehdä. Pelkkä "Taso 3 / 5" ei kerro kummallekaan. */
.spankki__tl {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 800; color: var(--cream);
  margin-bottom: 6px; text-transform: none; letter-spacing: 0;
}
.spankki__tl i {
  font-style: normal; flex: none;
  width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(242,99,34,.16); color: var(--orange-lt);
  font-size: 15px; font-weight: 800;
}

/* ── TILAUSLUKKO: Matkanne + Opetuspolku (27.9.2026) ─────────────────── */
.tlukko { text-align: center; padding: 36px 26px; margin-top: 8px; }
.tlukko__ik {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; color: var(--orange-lt);
  background: rgba(242,99,34,.12); border: 1px solid rgba(242,99,34,.3);
}
.tlukko__ik svg { width: 26px; height: 26px; }
.tlukko__h { font-size: 24px; font-weight: 900; margin: 0 0 12px; }
.tlukko__p { font-size: 18px; font-weight: 600; line-height: 1.6; color: var(--cream); max-width: 560px; margin: 0 auto 14px; }
.tlukko .btn { margin-top: 10px; min-height: 56px; padding-left: 28px; padding-right: 28px; }

/* Kuponki pienenä linkkinä maksunapin alla (Henri 27.9.2026) */
.kuponki--pieni { margin-top: 18px; padding: 0; background: none; border: 0; text-align: center; }
.kuponki--pieni summary {
  display: inline-block; cursor: pointer; list-style: none; margin: 0;
  font-size: 17px; font-weight: 700; color: var(--orange-lt); text-decoration: underline; text-underline-offset: 3px;
}
.kuponki--pieni summary::-webkit-details-marker { display: none; }
.kuponki--pieni[open] summary { margin-bottom: 14px; }
.kuponki--pieni .kuponki__rivi { text-align: left; }

/* ── Ammattilaisdata: teidän tilanne + ota mukaan (27.9.2026) ─────────── */
/* Rivi ja sen toimintorivi ovat yksi ryhmä: raja vasta toimintorivin alla. */
.arivi-ryhma { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.arivi-ryhma .arivi { border-bottom: 0; padding-bottom: 6px; }
.arivi__oma { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.arivi__omat { font-size: 16px; font-weight: 600; color: var(--mut); }
.arivi__omat.on { color: var(--green); }
.arivi__ota {
  font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
  color: var(--orange-lt); background: none; border: 0; padding: 4px 0;
}
.arivi__ota:hover { text-decoration: underline; text-underline-offset: 3px; }
.arivi__ota:disabled { color: var(--green); cursor: default; text-decoration: none; }