/*
 * TuntiTassun markkinointisivun tyylit — tarkoitettu yhteiseksi pohjaksi
 * myös tuki.tuntitassu.fi:lle (suunnitelmat/markkinointisivu.md, 10.8.2026):
 * vaalea teema, viistelaatikot reunaviivoineen, kehykseton sininen
 * tassutunnus, sama typografia ja väripaletti.
 *
 * Viiste sovelluksen korttien tapaan: vasen ylä ja oikea ala leikattu.
 * clip-path leikkaa myös box-shadow'n, joten varjolliset laatikot
 * kääritään kääreeseen, jolla on filter: drop-shadow. Reunalliset
 * viistelaatikot ovat kaksi kerrosta: elementin tausta on reunaviivan
 * väri ja viistetty, valkoinen sisäkerros on pseudoelementti pykälää
 * pienemmällä viisteellä (z-index -1 + isolation), jolloin viiva kiertää
 * myös viistesärmän.
 */

/* Tuotenimen brändifontti omasta paketista, ei CDN:stä — ulkoinen
   fonttilataus lähettäisi kävijän IP:n Googlelle. Lisenssi fontin
   rinnalla: fonts/DynaPuff-OFL.txt (SIL OFL 1.1). */
@font-face {
  font-family: 'DynaPuff';
  src: url('fonts/dynapuff.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

/* --muted on #64748b:tä tummempi, koska sama teksti istuu myös --soft- ja
   --blue-bg-pohjilla: #64748b antaisi niillä vain 4,34:1 (< AA 4,5:1),
   #5f6c81 antaa 4,85:1 ja valkoisella 5,32:1. */
:root{
  --ink:#0f172a; --text:#334155; --muted:#5f6c81;
  --bg:#ffffff; --soft:#f1f5f9; --line:#e2e8f0;
  --blue:#2563eb; --blue-d:#1d4ed8; --blue-bg:#eff6ff;
  --amber:#d97706;
}
*{box-sizing:border-box;margin:0;padding:0}
/* scrollbar-gutter: modaalin avaus lukitsee taustan vierityksen
   (body:has(dialog[open])), ja ilman varattua uraa vierityspalkin
   katoaminen siirtäisi koko sivun sisältöä noin 15 px sivuun niillä
   alustoilla, joilla on perinteinen vierityspalkki (Windows, Linux).
   Varaus tehdään html-elementille, jolloin ura on sama sivulla kuin
   modaalin ollessa auki eikä nykäystä tule. Päällekkäisillä
   vierityspalkeilla (macOS oletuksena) ei näy mitään eroa. */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink);line-height:1.2;font-weight:800}
h2{font-size:clamp(1.5rem,3.5vw,2.1rem);margin-bottom:.5rem}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
section{padding:64px 0}
.kicker{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-bottom:.6rem}
.lead{color:var(--muted);max-width:60ch}
.center{text-align:center}
.mt{margin-top:32px}

/* Leipätekstin linkit. Tiedostossa ei ole yleistä a-sääntöä, koska
   linkit ovat yleensä jossakin luokassa (.btn, .kirjaudu, .vuosilinkki).
   UKK-vastauksissa on kuitenkin tavallisia linkkejä, jotka jäisivät
   selaimen oletussinisiksi (#0000EE) ja selaimen oletusfokusrenkaaseen.
   Tumman teeman vastinpari on osiossa TIIMIN TUMMA ILME. */
p a:not(.btn){color:var(--blue-d);text-decoration:underline;text-underline-offset:2px}
p a:not(.btn):focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* Ruudunlukijalle tarkoitettu teksti, jota ei piirretä näkyviin */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Tuotenimi: "TuntiTassu" mustalla, versiosana sinisellä (Kain speksi
   16.8.2026, sama kuin sovelluksen .tassu-brandi) */
.brandi{font-family:'DynaPuff',ui-rounded,'Trebuchet MS',system-ui,sans-serif;font-weight:600;color:var(--ink)}
.brandi-versio{color:var(--blue)}

/* Painikkeet */
.btn{display:inline-block;background:var(--blue);color:#fff;font-weight:700;padding:14px 26px;border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);text-decoration:none;transition:background .15s, transform .15s;border:none;font-size:1rem;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--blue-d);transform:translateY(-1px)}
/* Fokusrengas leikkausalueen SISÄPUOLELLE valkoisena: clip-path leikkaa
   kaiken elementin piirron, joten border-boxin ulkopuolinen outline
   katoaisi kokonaan. Valkoinen sinisellä on 5,2:1 (> 3:1). */
.btn:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.btn.small{padding:9px 18px;font-size:.9rem}
.cta-note{font-size:.8rem;color:var(--muted);margin-top:.6rem;max-width:34ch}

/* Yläpalkki */
header.top{position:sticky;top:0;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:10}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;padding-bottom:10px}
.logo{display:flex;align-items:center;gap:9px;font-size:1.15rem;text-decoration:none}
.logo img{flex:none}
.top nav{display:flex;align-items:center;gap:26px}
/* display + pystypadding kasvattavat ohuiden tekstilinkkien kosketusalueen
   ~44 px:iin muuttamatta ulkoasua oleellisesti */
.kirjaudu{display:inline-block;padding:10px 0;color:var(--text);font-weight:600;text-decoration:none;font-size:.95rem}
.kirjaudu:hover{color:var(--blue-d);text-decoration:underline}
.kirjaudu:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* Hero */
.hero{padding:72px 0 56px;background:linear-gradient(180deg,var(--blue-bg),#fff 70%)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(1.9rem,4.5vw,2.9rem);margin-bottom:.8rem}
.hero p.sub{font-size:1.1rem;color:var(--text);max-width:46ch;margin-bottom:1.4rem}
.offer-pill{display:inline-block;background:var(--blue);color:var(--blue-d);border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);padding:5px 14px;font-size:.82rem;font-weight:700;margin-bottom:16px;position:relative;isolation:isolate}
.offer-pill::before{content:"";position:absolute;inset:1.5px;z-index:-1;background:#fff;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}

/* Puhelinmalli */
.phone{width:min(280px,80vw);margin:0 auto;background:var(--ink);border-radius:36px;padding:12px;box-shadow:0 24px 48px -20px rgba(15,23,42,.35)}
.screen{background:#fff;border-radius:26px;overflow:hidden;font-size:.72rem}
.screen .bar{background:var(--ink);color:#fff;display:flex;align-items:center;gap:6px;padding:9px 12px;font-weight:700}
.screen .body{padding:12px;display:flex;flex-direction:column;gap:8px}
.field{border:1px solid var(--line);border-radius:4px;padding:7px 9px;color:var(--muted)}
.field b{color:var(--ink);font-weight:600}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{border:1px solid var(--line);border-radius:4px;padding:3px 9px;color:var(--muted)}
.chip.on{background:var(--blue-bg);border-color:var(--blue);color:var(--blue-d);font-weight:600}
.save{background:var(--blue);color:#fff;text-align:center;border-radius:4px;padding:8px;font-weight:700}
.paws{color:var(--muted);text-align:center;font-size:.75rem;letter-spacing:.35em;padding-top:2px}

/* Kortit ja ruudukot */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.card{background:var(--line);border-radius:0;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);padding:24px;position:relative;isolation:isolate}
.card::before{content:"";position:absolute;inset:1.5px;z-index:-1;background:#fff;clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px)}
.card .emoji{font-size:1.6rem}
.card h3{font-size:1.05rem;margin:.5rem 0 .3rem}
.card p{font-size:.95rem;color:var(--muted)}
.soft{background:var(--soft)}

.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:28px 0}
.step{background:var(--line);border-radius:0;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);padding:24px;position:relative;isolation:isolate}
/* Valkoinen sisäkerros ::afterissa, koska ::before on varattu numerolle */
.step::after{content:"";position:absolute;inset:1.5px;z-index:-1;background:#fff;clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px)}
/* Numeropallo elementin sisällä — clip-path leikkaisi reunan yli ulottuvan pois */
.step::before{counter-increment:step;content:counter(step);display:inline-grid;place-items:center;background:var(--blue);color:#fff;width:32px;height:32px;border-radius:50%;font-weight:800;margin-bottom:10px}
.step h3{font-size:1rem;margin-bottom:.3rem}
.step p{font-size:.95rem;color:var(--muted)}

.featgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.feat{background:var(--line);border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);padding:14px 16px;font-size:.92rem;font-weight:600;color:var(--ink);position:relative;isolation:isolate}
.feat::before{content:"";position:absolute;inset:1.2px;z-index:-1;background:#fff;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}

/* Hinta */
.price-wrap{max-width:520px;margin:28px auto 0;filter:drop-shadow(0 20px 32px rgba(37,99,235,.22))}
.price-card{background:var(--blue);border-radius:0;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);padding:32px;text-align:center;position:relative;isolation:isolate}
.price-card::before{content:"";position:absolute;inset:2px;z-index:-1;background:#fff;clip-path:polygon(17px 0,100% 0,100% calc(100% - 17px),calc(100% - 17px) 100%,0 100%,0 17px)}
.price-card .tuote{font-size:1.25rem}
.price{font-size:2.6rem;font-weight:800;color:var(--ink)}
.price small{font-size:1rem;color:var(--muted);font-weight:600}
.price s{color:var(--muted);font-size:1.25rem;font-weight:600}
.alt{color:var(--muted);margin:.2rem 0 1rem}
.price-card ul{list-style:none;margin:1rem 0 1.4rem;color:var(--text);font-size:.95rem}
.price-card li{padding:.2rem 0}
.vuosilinkki{display:inline-block;margin-top:.4rem;padding:10px 8px;color:var(--blue-d);font-weight:600;font-size:.92rem}
.vuosilinkki:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.paybox{margin-top:1.2rem;background:var(--blue-bg);border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);padding:12px 16px;font-size:.85rem;color:var(--blue-d)}

/* Luottamus */
.trust{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
.trust .card{display:flex;gap:12px;align-items:flex-start}
.trust .card .emoji{font-size:1.3rem}
.trust .card p{font-size:.92rem}
.trust .card h3{margin:0 0 .2rem;font-size:1rem}
/* Asiakirjakortit /tiimi-sivulla eivät ole linkkejä ennen kuin neljä
   asiakirjasivua julkaistaan. Ilman näkyvää merkintää kortti näyttää
   samalta kuin silloin, kun se oli linkki, ja kävijä yrittää klikata. */
.asiakirja-tila{margin-top:.45rem;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

/* UKK */
details{border-radius:0;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);margin-top:12px;background:var(--line);position:relative;isolation:isolate}
details::before{content:"";position:absolute;inset:1.2px;z-index:-1;background:#fff;clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px)}
summary{padding:16px 20px;font-weight:700;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.3rem;color:var(--blue);transition:transform .15s}
/* Plus on puhtaasti visuaalinen (details välittää tilan itse) — tyhjä
   alt-teksti pitää sen poissa ruudunlukijan lukemasta nimestä */
@supports (content:"x" / "y"){ summary::after{content:"+" / ""} }
details[open] summary::after{transform:rotate(45deg)}
summary:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
details p{padding:0 20px 16px;color:var(--muted);font-size:.95rem}

/* Loppu-CTA */
.final{background:var(--ink);color:#fff;text-align:center}
.final h2{color:#fff}
.final p{color:#cbd5e1;max-width:52ch;margin:0 auto 1.4rem}
.final .cta-note{margin:14px auto 0;color:#94a3b8;max-width:none}

footer{background:var(--ink);color:#94a3b8;font-size:.85rem;border-top:1px solid #1e293b;padding:28px 0}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center}
footer a{display:inline-block;padding:9px 0;color:#cbd5e1;text-decoration:none}
footer a:hover{text-decoration:underline}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
/* Sama 3 px:n meripihkarengas kuin muillakin linkeillä, ettei osa
   sivuston linkeistä jää selaimen oletusrenkaan varaan. Kontrastit:
   vaalea #d97706 / alatunniste #0f172a 5,5:1, tumma #fbbf24 / #070c16
   11,2:1; logolinkki valkoisella yläpalkilla 3,2:1 (> 3:1). */
footer a:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.logo:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

@media (max-width:820px){
  section{padding:48px 0}
  .hero .wrap{grid-template-columns:1fr;gap:36px}
  .hero p.sub{max-width:none}
  .grid3,.steps{grid-template-columns:1fr;gap:26px}
  .featgrid{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:1fr}
  /* Ristiinlinkki sivuston toiselle puolelle (.toinen-tuote yläpalkissa)
     piilotetaan tässä samassa kohdassa kuin muu tiivistys: 820 px:n
     alapuolella "Soolo yksinyrittäjälle" / "Tiimi organisaatiolle" ja
     "Kirjaudu Tiimiin" / "Kirjaudu Sooloon" eivät mahdu painikkeen
     kanssa samalle riville, vaan kiinteä yläpalkki kasvaa kaksi- ja
     lopulta kolmiriviseksi (mitattu 600 ja 650 px: palkki 90 px).
     Sama linkki on alatunnisteessa, ja juuren jakosivu on toinen
     reitti. Sääntö ei ole tumma- eikä sivukohtainen: sama linkki on
     sekä Soolon vaalealla että Tiimin tummalla sivulla. */
  .toinen-tuote{display:none}
}

/* Kapealla näytöllä yläpalkki tiivistyy, jotta kaikki pysyy yhdellä
   rivillä — raja 560, koska "Kirjaudu Sooloon" on leveä */
@media (max-width:560px){
  .top .wrap{padding-left:14px;padding-right:14px}
  .logo{font-size:1.05rem;gap:7px}
  .top nav{gap:10px}
  .kirjaudu{font-size:.9rem}
  .btn.small{padding:8px 13px;font-size:.85rem}
}

/* Kapealla näytöllä logo + "Kirjaudu Sooloon" + painike eivät mahdu
   samalle riville (myös WCAG 1.4.10:n 320 px). Yläpalkki muuttuu
   kaksiriviseksi: logo ja kirjautumislinkki ylärivillä, painike koko
   leveydeltään niiden alla (Kain valinta 17.8.2026). display:contents
   nostaa navin lapset kääreen flex-riveille; nav-maamerkki säilyy
   saavutettavuuspuussa nykyselaimissa. */
@media (max-width:480px){
  .top .wrap{flex-wrap:wrap}
  .top nav{display:contents}
  .top .btn{flex-basis:100%;text-align:center}
}

/* Ominaisuuslaatikot yhteen palstaan kapeimmalla näytöllä. Tiimin
   tekstit ("Tehtäväehdotukset omista kirjauksista…", "Jäsenten
   hallinta: ylläpitäjät ja käyttäjät, passivointi") ovat Soolon
   vastaavia pidempiä, eikä kahden palstan min-content-leveys mahdu
   320 px:iin: /tiimi sai vaakavierityksen (mitattu scrollWidth 340 px
   / clientWidth 320 px), mikä on WCAG 2.1 SC 1.4.10 Reflow -rike. */
@media (max-width:400px){
  .featgrid{grid-template-columns:1fr}
  .feat{padding:12px 14px}
}

/* Liike vain niille, jotka eivät ole sitä estäneet */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
  .btn:hover{transform:none}
}

/* Selaimet jättävät taustavärit tulostamatta — tummien osioiden vaalea
   teksti (mm. footerin y-tunnus) katoaisi valkoiselta paperilta */
@media print{
  header.top{position:static}
  .phone{display:none}
  .final,.final h2,.final p,footer,footer a{background:#fff;color:var(--ink)}
}

/* Dokumenttisivut (tietosuojaseloste, myöhemmin käyttöehdot): kapea
   palsta ja asiakirjamainen typografia samalla peruspaletilla */
.dokumentti{max-width:760px;margin:0 auto;padding:48px 20px 72px}
.dokumentti h1{font-size:clamp(1.7rem,4vw,2.3rem);margin-bottom:.4rem}
.dokumentti .paivays{color:var(--muted);margin-bottom:1.6rem}
.dokumentti h2{font-size:1.25rem;margin:2rem 0 .5rem}
.dokumentti h3{font-size:1.02rem;margin:1.2rem 0 .3rem}
.dokumentti p{margin:.6rem 0}
.dokumentti ul,.dokumentti ol{margin:.6rem 0 .6rem 1.4rem}
.dokumentti li{margin:.25rem 0}
.dokumentti a{color:var(--blue-d)}
/* Taulukot vierivät kapealla näytöllä oman kääreensä sisällä,
   jotta sivulle ei synny vaakavieritystä */
.taulukon-kaare{overflow-x:auto;margin:.8rem 0}
.dokumentti table{border-collapse:collapse;width:100%;font-size:.95rem}
.dokumentti th,.dokumentti td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
.dokumentti th{background:var(--soft);color:var(--ink)}

/* Luonnosvaiheen merkinnät — POISTETAAN LANSEERAUKSESSA sivun mukana.
   Ruskea keltaisella täyttää kontrastivaatimuksen (> 7:1). */
.luonnosbanneri{background:#fef3c7;color:#92400e;padding:14px 18px;margin:20px 0 28px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);font-size:.95rem}
.avoin{background:#fef3c7;color:#92400e;padding:1px 4px}

/* Alatunnisteen oma rivi: Stripe Climate -maininta /soolossa (liitytty
   17.8.2026) ja jakosivulla huomautus Tiimin omista asiakirjoista. */
footer .ilmasto,footer .lisatieto{width:100%;margin-top:2px;color:#94a3b8}

/* ==========================================================================
   TIIMIN TUMMA ILME (lisätty 20.9.2026, Kain päätös: /tiimi tummaksi)

   Koskee vain Tiimin markkinointisivua /tiimi. Juuren jakosivu EI
   käytä tätä teemaa — sivu itse on vaalea ja vain Tiimin kortti tumma,
   ks. osio JAKOSIVU tiedoston lopussa. Tiimin asiakirjasivut pysyvät
   vaaleina — ne generoidaan TASsu-repon skriptillä eikä niissä ole
   tätä luokkaa.

   VALITSIN: luokka `tumma` <html>-elementissä (:root.tumma), ei bodyssa.
   Kaksi syytä: (1) <html> on jäsennetty ennen <body>:ä, joten teema on
   voimassa ensimmäisestä piirrosta — bodyn luokka ehtisi välähtää
   vaaleana; (2) :root.tumma on spesifisyydeltään (0,2,0) eli varmasti
   vahvempi kuin :root (0,1,0) riippumatta siitä, mihin kohtaan tiedostoa
   tämä osio päätyy.

   PERIAATE: teema tehdään muuttujia uudelleen määrittelemällä, jotta
   olemassa olevat komponentit toimivat sellaisenaan. Alla olevat
   yksittäiset säännöt ovat VAIN niitä paikkoja, joissa vanhassa
   säännössä on kovakoodattu vaalea arvo (#fff, rgba(255,255,255,.92))
   tai joissa muuttujaa käytetään taustana JA tekstivärinä (--ink).
   Vanhoja rivejä ei ole muutettu.

   VÄRIT JA KONTRASTIT (WCAG 2.1 AA: teksti 4,5:1, isot otsikot ja
   ei-tekstuaaliset osat 3:1). Tiimin tunnusväri on oranssi #f28c38,
   sama kuin logo-tiimi.svg:ssä ja sovelluksen Tiimi-tunnuksessa.
     teksti #cbd5e1 / pohja #0b1220 .......... 12,6:1
     teksti #cbd5e1 / kortti #17213a ......... 10,8:1
     himmeä #94a3b8 / kortti #17213a .........  6,2:1
     oranssi #f28c38 / pohja #0b1220 .........  7,7:1  (.kicker, +-merkki)
     otsikko #f8fafc / pohja #0b1220 ......... 17,9:1
     painikkeen teksti #1a1205 / #f28c38 .....  7,6:1
     painikkeen teksti #1a1205 / #ffb570 .....  10,7:1 (hover)
     vaalea oranssi #ffb570 / pohja #0b1220 .. 10,8:1  (linkit)
     vaalea oranssi #ffb570 / #2a1e0f ........  9,4:1  (pilleri, paybox)
     fokusrengas #fbbf24 / pohja #0b1220 ..... 11,2:1

   HUOM painikkeet: VALKOINEN teksti oranssilla #f28c38 jää 2,4:1:een
   eikä kelpaa edes ei-tekstuaaliseksi rajaksi. Siksi .btn saa tummassa
   teemassa tumman tekstin (--painike-teksti) ja saman värin myös
   fokusrenkaaseen, joka .btn:ssä piirretään leikkausalueen sisään.
   ========================================================================== */

:root.tumma{
  --ink:#f8fafc; --text:#cbd5e1; --muted:#94a3b8;
  --bg:#0b1220; --soft:#111a2b; --line:#33425e;
  --blue:#f28c38; --blue-d:#ffb570; --blue-bg:#2a1e0f;
  --amber:#fbbf24;
  /* Uusi muuttuja, ei vaalean teeman puolella: viistelaatikoiden
     kaksikerrostekniikan sisäkerros (vaaleassa teemassa kovakoodattu
     #fff kunkin komponentin ::before/::after-säännössä). */
  --pinta:#17213a;
  /* Painikkeen ja numeropallon teksti oranssilla pohjalla. */
  --painike-teksti:#1a1205;
  color-scheme:dark;
}

/* Yläpalkki: rgba(255,255,255,.92) on kovakoodattu, jotta blur toimii. */
:root.tumma header.top{background:rgba(11,18,32,.92)}

/* Heron liukuväri päättyy kovakoodattuun valkoiseen. */
:root.tumma .hero{background:linear-gradient(180deg,var(--blue-bg),var(--bg) 70%)}

/* Viistelaatikoiden valkoiset sisäkerrokset. Ilman näitä kortit,
   askeleet, ominaisuuslaatikot, UKK ja hintakortti jäisivät
   valkoisiksi tummalla pohjalla. */
:root.tumma .card::before,
:root.tumma .step::after,
:root.tumma .feat::before,
:root.tumma details::before,
:root.tumma .price-card::before{background:var(--pinta)}
/* Tarjouspilleri istuu heron liukuvärillä, joten sen sisäkerros on
   lämmin --blue-bg eikä kortin pinta. */
:root.tumma .offer-pill::before{background:var(--blue-bg)}

/* Painikkeet: tumma teksti oranssilla (ks. HUOM yllä). */
:root.tumma .btn{color:var(--painike-teksti)}
:root.tumma .btn:focus-visible{outline-color:var(--painike-teksti)}
/* Askelten numeropallo on samaa oranssia kuin painike. */
:root.tumma .step::before{color:var(--painike-teksti)}

/* Leipätekstin linkit: tyyli.css:ssä ei ole yleistä a-sääntöä, koska
   vaaleilla sivuilla linkit ovat aina jossakin luokassa. Tummalla
   pohjalla selaimen oletussininen (#0000EE) jäisi 1,7:1:een. */
:root.tumma p a:not(.btn){color:var(--blue-d);text-decoration:underline;text-underline-offset:2px}
:root.tumma p a:not(.btn):focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* Hintakortin varjo on kovakoodattua sinistä. */
:root.tumma .price-wrap{filter:drop-shadow(0 20px 32px rgba(242,140,56,.22))}

/* Puhelinmalli. Kehys on vaaleassa teemassa var(--ink) eli tumma; tummassa
   --ink on vaalea, joten kehys määritellään tässä erikseen. Varjo on
   kovakoodattua tummaa, joka katoaa tummalle pohjalle — tilalle lämmin. */
:root.tumma .phone{background:#020617;box-shadow:0 24px 48px -20px rgba(242,140,56,.28)}
/* Näyttö on VAALEA SAARI: se esittää sovellusta, ja sovellus on
   Tiimissäkin vaalea ja sininen (bg-blue-600) — oranssi on vain
   tunnuksen väri. Muuttujat palautetaan saaren sisällä vaaleiksi, jolloin
   .field, .chip, .save ja .paws toimivat muuttamattomina. */
:root.tumma .screen{
  --ink:#0f172a; --text:#334155; --muted:#5f6c81;
  --line:#e2e8f0; --blue:#2563eb; --blue-d:#1d4ed8; --blue-bg:#eff6ff;
  color:var(--text);
}

/* Loppu-CTA ja alatunniste käyttävät var(--ink):iä TAUSTANA. Tummassa
   teemassa ne saavat omat sävynsä: loppu-CTA lämmin lähes musta (erottuu
   sitä edeltävästä .soft-osiosta), alatunniste pohjaa tummempi. */
:root.tumma .final{background:#1a1408}
:root.tumma footer{background:#070c16;border-top-color:var(--line)}

/* Tulostus. Selaimet jättävät taustavärit tulostamatta, joten tumman
   teeman vaalea teksti katoaisi paperilta kokonaan (vaalean teeman
   print-lohko korjaa vain .final- ja footer-alueet). Tummassa teemassa
   koko paletti palautetaan tulostettaessa vaaleaksi. */
@media print{
  :root.tumma{
    --ink:#0f172a; --text:#334155; --muted:#5f6c81;
    --bg:#ffffff; --soft:#f1f5f9; --line:#e2e8f0;
    --blue:#b45309; --blue-d:#9a3412; --blue-bg:#fff7ed;
    --amber:#d97706; --pinta:#ffffff; --painike-teksti:#0f172a;
    color-scheme:light;
  }
  :root.tumma header.top{background:none}
  :root.tumma .hero{background:none}
  :root.tumma .final,:root.tumma footer{background:#fff}
  :root.tumma .price-wrap{filter:none}
}


/* ==========================================================================
   JAKOSIVU (juuri tuntitassu.fi, lisätty 20.9.2026)

   Kain päätös 20.9.2026: sivusto on kaksiosainen, juuri kysyy vain
   kumpi puoli. Sivu on lyhyt (tunnus, yksi lause, kaksi korttia,
   alatunniste) eikä siinä ole yläpalkkia — kortin painike on ainoa
   reitti eteenpäin.

   SIVU ITSE ON VAALEA, vain Tiimin kortti on tumma. Siksi tässä EI
   käytetä :root.tumma-teemaa (osio "TIIMIN TUMMA ILME" yllä), vaan
   Tiimin kortti määrittelee saman paletin omina muuttuja-arvoinaan.
   Tekniikka on sama kuin tumman teeman .screen-säännössä, jossa
   puhelimen näyttö jää vaaleaksi saareksi — tässä vain toisin päin.
   Kortit siis esittelevät kohteensa: sininen vie /sooloon, tumma
   oranssi /tiimiin.

   KONTRASTIT tummassa kortissa (pinta #17213a, WCAG 2.1 AA 4,5:1):
     teksti   #cbd5e1 / #17213a .... 10,8:1
     himmeä   #94a3b8 / #17213a ....  6,2:1  (.jako-rooli, .jako-tarjous)
     oranssi  #f28c38 / #17213a ....  6,5:1  (.brandi-versio)
     painike  #1a1205 / #f28c38 ....  7,6:1  (valkoinen olisi 2,4:1 —
                                             siksi tumma teksti, myös
                                             fokusrenkaassa)
   ========================================================================== */

/* Pehmeä pohja: Soolon kortti on valkoinen, ja valkoisella sivulla sen
   ainoa raja olisi .card-tekniikan 1,5 px:n reunakerros (--line #e2e8f0,
   kontrasti valkoiseen 1,2:1). Tumma kortti dominoisi valintasivua,
   vaikka valinnan kuuluu olla neutraali. --soft erottaa kortin pinnan
   pohjasta ilman että kumpikaan kortti nousee toisen yli. */
.jako{padding:56px 0 64px;background:var(--soft)}
.jako-esittely{text-align:center;max-width:54ch;margin:0 auto 36px}
.jako-esittely img{display:block;margin:0 auto 10px}
.jako-esittely h1{font-size:clamp(2rem,6vw,2.7rem);margin-bottom:.4rem}
.jako-esittely .lead{margin:0 auto}

/* Kortit rinnakkain; align-items:stretch (gridin oletus) pitää ne
   samankorkuisina, ja painikkeen margin-top:auto lukitsee painikkeet
   samalle riville, vaikka tekstit olisivat eripituiset. */
.jako-kortit{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:880px;margin:0 auto}
.jako-kortti{display:flex;flex-direction:column;padding:28px}
.jako-kortti > img{margin-bottom:10px}
.jako-kortti h2{font-size:1.35rem;margin:0}
/* Tarkennin .jako-kortti eteen, koska .card p (0,1,1) voittaisi
   pelkän luokan (0,1,0) ja palauttaisi värin --mutediin. */
.jako-kortti .jako-rooli{color:var(--muted);font-size:.95rem;margin:.15rem 0 1rem}
.jako-kortti .jako-hinta{font-size:2.1rem;font-weight:800;color:var(--ink);line-height:1.15;margin:0}
.jako-kortti .jako-hinta small{font-size:.95rem;font-weight:600;color:var(--muted)}
/* Yliviivattu normaalihinta tarjoushinnan vieressä, sama kuvio kuin
   tuotesivujen .price s:ssä. aria-hidden HTML:ssä + .sr-only-selitys,
   koska ruudunlukija ei välitä yliviivausta. */
.jako-kortti .jako-hinta s{color:var(--muted);font-size:1.1rem;font-weight:600}
.jako-kortti .jako-tarjous{font-size:.85rem;color:var(--muted);margin:.35rem 0 0}
.jako-kortti ul{list-style:none;margin:1.2rem 0 1.6rem;font-size:.95rem;color:var(--text)}
.jako-kortti li{padding:.22rem 0}
.jako-kortti .btn{margin-top:auto;text-align:center}
.jako-yhteiset{text-align:center;color:var(--muted);font-size:.92rem;margin:28px auto 0;max-width:60ch}

/* Tiimin kortti: sama paletti kuin /tiimi-sivun tummassa teemassa.
   .card käyttää var(--line):ä reunakerroksen taustana ja ::before-
   sisäkerrosta pintana, joten kortti tummuu näillä arvoilla ilman
   muita muutoksia. */
.jako-kortti--tiimi{
  --ink:#f8fafc; --text:#cbd5e1; --muted:#94a3b8;
  --line:#33425e; --pinta:#17213a;
  --blue:#f28c38; --blue-d:#ffb570; --blue-bg:#2a1e0f; --amber:#fbbf24;
  --painike-teksti:#1a1205;
  color:var(--text);
}
/* Sama spesifisyys kuin .card::beforella (0,1,1) — ratkaisee järjestys,
   ja tämä osio on tiedoston lopussa. */
.jako-kortti--tiimi::before{background:var(--pinta)}
/* .btn:n valkoinen teksti ja valkoinen fokusrengas ovat kovakoodattuja;
   oranssilla kumpikin jäisi 2,4:1:een. */
.jako-kortti--tiimi .btn{color:var(--painike-teksti)}
.jako-kortti--tiimi .btn:focus-visible{outline-color:var(--painike-teksti)}

@media (max-width:820px){
  .jako{padding:40px 0 48px}
  .jako-kortit{grid-template-columns:1fr;gap:20px}
}

/* Tulostus: tumman kortin vaalea teksti katoaisi paperilta, koska
   selaimet jättävät taustavärit tulostamatta. Sama ratkaisu kuin
   tumman teeman print-lohkossa — koko kortti palautetaan vaaleaksi. */
@media print{
  .jako-kortti--tiimi{
    --ink:#0f172a; --text:#334155; --muted:#5f6c81;
    --line:#e2e8f0; --pinta:#ffffff;
    --blue:#b45309; --blue-d:#9a3412; --blue-bg:#fff7ed; --amber:#d97706;
    --painike-teksti:#0f172a;
    color:var(--text);
  }
}


/* ==========================================================================
   TUNNUSPYYNTÖMODAALI (/tiimi, lisätty 20.9.2026)

   Tiimin "Pyydä tunnukset" -painikkeet avaavat natiivin <dialog>-modaalin,
   jonka lomake lähetetään tukiprojektin päätepisteeseen
   (tuki.tuntitassu.fi/tunnuspyynto → Zoho Desk). Modaali on vain
   /tiimi-sivulla, joka on tumma (:root.tumma), mutta säännöt on kirjoitettu
   muuttujilla, jotta ne toimivat myös vaalealla sivulla, jos lomake
   joskus lisätään sellaiselle.

   KAKSI KERROSTA, KUTEN MUUALLAKIN SIVUSTOLLA: viistelaatikon reunaviiva
   syntyy siitä, että ulompi elementti on reunan värinen ja sisempi pykälää
   pienemmällä viisteellä pinnan värinen. Kortit tekevät sisäkerroksen
   ::before-pseudoelementillä, mutta modaali EI voi: sisus vierii, ja
   absoluuttisesti sijoitettu pseudoelementti vierisi sisällön mukana ja
   jättäisi alaosan paljaaksi. Siksi <dialog> on 2 px:n kehys ja <form>
   (.modaali-sisus) on erillinen vierivä pinta.

   KONTRASTIT (WCAG 2.1 AA: teksti 4,5:1, ei-tekstuaaliset osat 3:1).
   Tummassa teemassa pinta on --pinta #17213a ja kentän pohja --bg #0b1220:
     otsikko ja label #f8fafc / pinta #17213a ... 15,3:1
     kentän teksti  #f8fafc / kenttä #0b1220 ... 17,9:1
     himmeä  #94a3b8 / pinta #17213a ..........  6,2:1  (johdanto, ohje,
                                                        tietosuojateksti, ×)
     virhe   #f87171 / pinta #17213a ..........  5,8:1
     fokus   #fbbf24 / pinta #17213a ..........  9,7:1
     linkki  #ffb570 / pinta #17213a ..........  9,2:1  (p a:not(.btn))
   ========================================================================== */

/* VARASÄÄNTÖ ENSIN: selain, joka ei tunne <dialog>-elementtiä, ei myöskään
   piilota sitä omassa oletustyylissään. Ilman tätä koko lomake piirtyisi
   näkyvänä lohkona alatunnisteen alle, ja koska skriptin submit-kuuntelija
   rekisteröidään vasta tuen tarkistuksen jälkeen, natiivi lähetys menisi
   läpi — <form method="dialog"> ei tuossa selaimessa tarkoita mitään,
   joten sähköpostiosoite ja organisaation nimi päätyisivät URLin
   kyselyjonoon: selainhistoriaan, pääsylokeihin ja välityspalvelimiin
   (katselmointilöydös 20.9.2026). Yksi rivi, ja ilman <dialog>-tukea sivu
   pysyy siistinä mailto-sivuna. */
dialog:not([open]){display:none}

.modaali{
  /* Tiedoston alun * { margin:0 } nollaa dialogin oman keskityksen. */
  margin:auto;
  border:0;
  padding:2px;
  /* Prosentit suhteutuvat näkymään (dialog on ylimmässä kerroksessa),
     eivät 100vw:hen — silloin klassinen vierityspalkki ei työnnä modaalia
     reunan yli. max-width on pakko kirjoittaa auki, koska selaimen oma
     dialog-sääntö on max-width:calc(100% - 6px - 2em): ilman tätä
     kapealla näytöllä jäisi 38 px:n reunus tässä pyydetyn sijaan. */
  width:min(560px,calc(100% - 24px));
  max-width:calc(100% - 24px);
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  overflow:hidden;
  background:var(--line);
  color:var(--text);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);

  /* Kenttien reunaväri omana muuttujanaan: --line (#33425e tummassa) jää
     pintaan #17213a nähden 1,6:1:een eli alle WCAG 1.4.11:n 3:1:n, eikä
     kentän pohja (#0b1220) erotu pinnasta juuri lainkaan — reunaviiva on
     ainoa asia, joka kertoo missä kenttä on. #64748b antaa pintaan 3,4:1,
     kentän pohjaan 3,9:1 ja valkoiseen 4,8:1, joten sama arvo kelpaa
     kumpaankin teemaan. */
  --kentta-reuna:#64748b;
  /* Virheväri: tummalla pohjalla vaalea, vaalealla tumma. */
  --virhe:#b91c1c;
}
/* Tummassa teemassa #f87171 eikä aiempi #ffb4ab. Perustelu: sivun
   linkkiväri on #ffb570, ja #ffb4ab oli käytännössä sama kirkkaus (lum
   0,568 vs. 0,555) ja sama lämmin sävyperhe (sävykulma 6° vs. 29°) —
   virheteksti näytti sivun oranssilta korostusväriltä. #f87171 on
   sävykulmaltaan 0° eli puhdas punainen ja selvästi tummempi (lum
   0,330), joten se erottuu linkistä sekä sävyltä että kirkkaudelta.
   Kontrasti pintaan on 5,8:1 ja kentän pohjaan #0b1220 6,8:1 eli yhä
   reilusti yli AA:n 4,5:1:n.

   Väri ei yksin riitä: kaksi vaaleaa sävyä samalla tummalla pohjalla
   ovat väistämättä lähellä toisiaan keskinäiseltä kontrastiltaan
   (#f87171 vs. #ffb570 = 1,6:1). Siksi jokainen virherivi merkitään
   myös kuvakkeella ja ruudunlukijalle luettavalla "Virhe:"-alulla —
   ks. .virhe-kuvake alla ja skriptin asetaVirhe(). */
:root.tumma .modaali{--virhe:#f87171}

.modaali::backdrop{background:rgba(2,6,23,.72)}

/* Taustan vieritys lukkoon modaalin ollessa auki. Selaimet eivät tee tätä
   itse <dialog>:lle. :has puuttuu vain vanhoista selaimista, joissa tausta
   vierii kuten ennenkin — ei rikkoudu, vain tuntuu löysemmältä. */
body:has(dialog[open]){overflow:hidden}

.modaali-sisus{
  position:relative;
  background:var(--pinta,var(--bg));
  clip-path:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px);
  padding:28px 26px 24px;
  max-height:calc(100vh - 36px);
  max-height:calc(100dvh - 36px);
  overflow-y:auto;
}

.modaali-sulje{
  position:absolute;top:4px;right:4px;
  width:44px;height:44px;
  display:grid;place-items:center;
  background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:1.7rem;line-height:1;
  color:var(--muted);
}
.modaali-sulje:hover{color:var(--ink)}
.modaali-sulje:focus-visible{outline:3px solid var(--amber);outline-offset:-4px}

.modaali-otsikko{font-size:1.35rem;margin:0 44px .35rem 0}
/* Kiitosnäkymässä fokus siirretään otsikkoon (tabindex -1), jotta
   ruudunlukija lukee lopputuloksen. Fokusrengas on siksi näkyvä. */
.modaali-otsikko:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.modaali-johdanto{color:var(--muted);font-size:.95rem;margin-bottom:1.1rem}

.modaali-kentta{margin-bottom:1rem}
.modaali label{display:block;font-weight:600;color:var(--ink);font-size:.95rem;margin-bottom:.3rem}
.modaali input,.modaali textarea{
  display:block;width:100%;
  font-family:inherit;font-size:1rem;line-height:1.4;
  /* 1rem = 16px myös siksi, ettei iOS zoomaa sivua kenttään tartuttaessa.
     min-height 44 px on kosketuskoko. */
  min-height:44px;padding:11px 12px;
  color:var(--ink);background:var(--bg);
  border:1px solid var(--kentta-reuna);border-radius:4px;
}
.modaali textarea{min-height:88px;resize:vertical}
.modaali input::placeholder,.modaali textarea::placeholder{color:var(--muted)}
.modaali input:focus-visible,.modaali textarea:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-color:var(--amber)}
.modaali input[aria-invalid="true"],.modaali textarea[aria-invalid="true"]{border-color:var(--virhe)}

/* Selaimen automaattitäyttö maalaa kentän omalla vaalealla sävyllään ja
   ohittaa background-arvon. Sisävarjo on ainoa tapa peittää se, ja
   -webkit-text-fill-color ainoa tapa vaihtaa tekstin väri. */
.modaali input:-webkit-autofill,
.modaali input:-webkit-autofill:hover,
.modaali input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 40px var(--bg) inset;
  box-shadow:0 0 0 40px var(--bg) inset;
  caret-color:var(--ink);
}

/* Virherivin kuvake. Skripti rakentaa rivin osista (kuvake +
   ruudunlukijan "Virhe:" + teksti), joten virhe luettelee itsensä
   virheeksi myös silloin, kun väri ei sitä tee — eikä värin varaan
   jää mitään. */
.modaali .virhe-kuvake{font-style:normal;margin-right:.35rem}

.modaali .kentta-ohje{color:var(--muted);font-size:.85rem;margin-top:.3rem}
.modaali .kentta-virhe{color:var(--virhe);font-size:.88rem;font-weight:600;margin-top:.3rem}
/* Virherivit ovat aina DOM:ssa (aria-describedby osoittaa niihin ja
   yleisvirhe on role="alert"-elueue), joten tyhjä piilotetaan tyylillä. */
.modaali .kentta-virhe:empty{display:none}
.modaali-virhe{color:var(--virhe);font-weight:600;font-size:.92rem;margin-bottom:.9rem}
.modaali-virhe:empty{display:none}

/* Hunajapurkki. EI display:none eikä visibility:hidden: osa boteista
   jättää niin piilotetut kentät väliin, ja silloin ansa ei laukea.
   Kenttä on olemassa ja täytettävissä, mutta piirretään näkymän ulkopuolelle.
   Negatiivinen left ei tuota vaakavieritystä, koska vasemmalle jäävä
   ylivuoto ei ole vieritettävää. */
.modaali .hunaja{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

/* Varakanava yleisvirheen alla: sama mailto-linkki kuin
   tietosuojakappaleessa. Palvelimen virhetekstit tulevat textContentinä,
   joten osoite jäisi niissä pelkäksi tekstiksi — tämä rivi on linkki,
   jonka voi painaa. */
.modaali-varakanava{font-size:.9rem;margin-bottom:.9rem}
.modaali-varakanava[hidden]{display:none}

.modaali .btn{width:100%;text-align:center;margin-top:.4rem;font-family:inherit}
/* Lähetyksen ajaksi painiketta EI disabloida vaan sille asetetaan
   aria-disabled: disabloitu painike katoaa fokusjärjestyksestä ja sen
   tekstin vaihtumista ei ilmoiteta, ja opacity jätti ainoan näkyvän
   tilatiedon noin 3:1-kontrastiin. Nyt fokus ja kontrasti säilyvät, ja
   lähetyksen tila kerrotaan erikseen #tunnuspyynto-tila-alueessa
   (role=status). */
.modaali .btn[aria-disabled="true"]{cursor:progress}
.modaali .btn[aria-disabled="true"]:hover{background:var(--blue);transform:none}

.modaali-tietosuoja{color:var(--muted);font-size:.82rem;margin-top:1rem}
.modaali-kiitos p{margin-bottom:.7rem}

@media (max-width:480px){
  .modaali{
    width:calc(100% - 16px);
    max-width:calc(100% - 16px);
    max-height:calc(100vh - 16px);
    max-height:calc(100dvh - 16px);
  }
  .modaali-sisus{
    padding:24px 18px 20px;
    max-height:calc(100vh - 20px);
    max-height:calc(100dvh - 20px);
  }
  .modaali-otsikko{font-size:1.2rem}
}

/* Modaalin tietosuojalohko: yksi näkyvä virke ja loput details-lohkossa.
   13 artiklan tiedot on annettava keräyshetkellä, mutta koko teksti
   painikkeen yllä työnsi lähetyksen ruudun alareunan taakse puhelimessa
   (Kain sivu, 20.9.2026). Yhteenveto on aina näkyvissä, ja avaaminen
   näyttää loput ilman sivunvaihtoa. */
.modaali-tietosuoja{font-size:.78rem;color:var(--muted);line-height:1.5;margin:0 0 14px}
.modaali-tietosuoja p{margin:0}
.modaali-tietosuoja details{margin-top:10px}
/* Sisennys on sama kuin yleisessä summary-säännössä, vain pienemmässä
   mitassa: ilman vaakapaddingia teksti ja plus-merkki liimautuivat
   laatikon reunaan (Kain havainto 20.9.2026). Pystypadding pitää
   kosketusalueen riittävänä. */
.modaali-tietosuoja summary{cursor:pointer;color:var(--blue-d);font-weight:600;padding:11px 14px;font-size:.82rem}
.modaali-tietosuoja summary::after{font-size:1.1rem}
.modaali-tietosuoja summary:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
.modaali-tietosuoja details p{padding:0 14px 12px;margin-top:0;font-size:.78rem}

/* =====================================================================
   KIRJAUSDEMO (/soolo ja /tiimi): puhelinmalli täyttää lomakkeen vaihe
   vaiheelta (kirjausdemo.js) ja vieressä on sama neljä vaihetta
   tekstinä. Malli käyttää heron .phone/.screen-saarta, joten tumma ilme
   pitää sen vaaleana ilman omia sääntöjä; lista ja ohjaus seuraavat
   sivun paletti­muuttujia. Siirtymät poistetaan liikettä välttäviltä
   samassa mediakyselyssä, jossa skripti jättää kirjoitusanimaation pois.
   ===================================================================== */
.demo{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center;margin-top:28px}
.demo .phone{margin:0 auto}
.demo .screen .body{gap:7px}
.demo-kentta{border:1px solid var(--line);border-radius:4px;padding:6px 9px;display:flex;flex-direction:column;gap:4px;transition:border-color .25s,box-shadow .25s}
.demo-kentta.on{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-bg)}
.demo-nimio{font-size:.58rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.demo-valinta{display:flex;justify-content:space-between;gap:6px;color:var(--ink);font-weight:600}
.demo-valinta.tyhja{color:var(--muted);font-weight:400}
.demo-saadin{display:flex;align-items:center;gap:4px}
.demo-nappi{flex:1;border:1px solid var(--line);border-radius:4px;padding:3px 0;text-align:center;font-size:.6rem;color:var(--text);white-space:nowrap;transition:background .15s,color .15s}
.demo-nappi.painettu{background:var(--blue);border-color:var(--blue);color:#fff}
.demo-tunnit{flex:1.4;border:1px solid var(--blue);border-radius:4px;padding:3px 0;text-align:center;color:var(--ink);white-space:nowrap}
.demo-teksti{min-height:2.3em;color:var(--ink);font-weight:600;line-height:1.35}
.demo-teksti.tyhja{color:var(--muted);font-weight:400}
.demo-teksti.kirjoittaa::after{content:"";display:inline-block;width:1px;height:1em;margin-left:1px;vertical-align:-2px;background:var(--ink);animation:demo-kursori .8s steps(1) infinite}
@keyframes demo-kursori{50%{opacity:0}}
.demo-huomautus{font-size:.6rem;color:var(--muted);line-height:1.35}
.demo .save{transition:transform .15s,background .15s}
.demo .save.painettu{transform:scale(.97);background:var(--blue-d)}
/* Tallennuksen jälkeen: vihreä ilmoitus kuten sovelluksessa ja kirjaus
   listassa. Piilossa visibilityllä eikä displayllä, jotta puhelimen
   korkeus ei hypi kesken demon. */
.demo-ilmoitus{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;border-radius:4px;padding:6px 9px;font-weight:700;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.demo-rivi{display:flex;gap:6px;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:4px;padding:6px 9px;color:var(--muted);opacity:0;transition:opacity .3s .15s}
.demo-rivi span:first-child{white-space:nowrap}
.demo-rivi b{margin-left:auto;color:var(--ink);white-space:nowrap}
.demo[data-tila="4"] .demo-ilmoitus,.demo[data-tila="4"] .demo-rivi{opacity:1;transform:none}
.demo-vaiheet{list-style:none;counter-reset:vaihe;display:grid;gap:10px;padding:0;margin:0}
.demo-vaiheet li{counter-increment:vaihe;display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;padding:12px 14px;border:1.5px solid var(--line);border-radius:4px;background:#fff;transition:border-color .25s,background .25s}
/* Numero vie vasemman palstan molemmat rivit; otsikko ja selite ovat
   oikealla allekkain. */
.demo-vaiheet li::before{content:counter(vaihe);grid-row:1 / span 2;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--line);color:var(--ink);font-weight:800;transition:background .25s,color .25s}
.demo-vaiheet li p{grid-column:2}
.demo-vaiheet li.on{border-color:var(--blue);background:var(--blue-bg)}
.demo-vaiheet li.on::before{background:var(--blue);color:#fff}
.demo-vaiheet li.tehty::before{content:"✓";background:var(--blue-d);color:#fff}
.demo-vaiheet h3{font-size:1rem;margin-bottom:.15rem}
.demo-vaiheet p{font-size:.95rem;color:var(--muted)}
.demo-ohjaus{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:24px}
/* <button class="btn">: painikkeet eivät peri fonttia oletuksena. */
.demo-ohjaus .btn{font-family:inherit;line-height:inherit}
.demo-huomio{font-size:.85rem;color:var(--muted);max-width:40ch;text-align:center}
@media (max-width:820px){
  .demo{grid-template-columns:1fr;gap:28px}
}
@media (prefers-reduced-motion:reduce){
  .demo-teksti.kirjoittaa::after{animation:none}
  .demo-kentta,.demo-nappi,.demo .save,.demo-ilmoitus,.demo-rivi,.demo-vaiheet li,.demo-vaiheet li::before{transition:none}
}
:root.tumma .demo-vaiheet li{background:var(--pinta)}
:root.tumma .demo-vaiheet li.on{background:var(--blue-bg)}
:root.tumma .demo-vaiheet li.on::before,
:root.tumma .demo-vaiheet li.tehty::before{color:var(--painike-teksti)}