/*
 * Muistolan verkkotyylit: markkinointisivu (index.html, en/index.html), juridiset sivut ja
 * tyyliopas (designsystem.html) lukevat kaikki tätä tiedostoa.
 *
 * Säännöt, joiden takia tiedosto näyttää tältä:
 * - Arvot tulevat tokens.css:stä (generoitu packages/tokens/tokens.js:stä).
 *   Tässä tiedostossa ei ole yhtään heksaa. Uusi väri = uusi rooli tokeneihin.
 * - Johdetut sävyt (hiljainen täyte, kentän reuna) lasketaan rooleista
 *   color-mixillä, jolloin ne seuraavat teemaa ilman omia tumman tilan sääntöjä.
 * - Kortit säilyvät: pinta + pehmeä varjo + iso pyöristys. Se on Järvi-illan luonne.
 * - Mobiili ensin: perussäännöt ovat puhelimelle, leveämmät ruudut lisäävät.
 */

/* ===== Johdetut roolit ===== */
:root {
  /* hiljainen täyte pohjan päällä: sisällysluettelon napit, välilehden tausta */
  --c-quiet-fill: color-mix(in srgb, var(--c-ink) 7%, var(--c-bg));
  /* hieman pohjaa tummempi näyttämö tyylioppaan esimerkeille */
  --c-stage: color-mix(in srgb, var(--c-ink) 4%, var(--c-bg));
  /* kentän ja toissijaisen napin reuna: tummempi kuin border, jotta kenttä erottuu */
  --c-field-line: color-mix(in srgb, var(--c-ink-mid) 72%, var(--c-surface));
  /* ei käytettävissä -napin täyte */
  --c-disabled: color-mix(in srgb, var(--c-ink) 8%, var(--c-surface));
  /* aaltomuodon soittamaton osa */
  --c-wave: color-mix(in srgb, var(--c-ink-mid) 38%, var(--c-surface));
  /* perheen napit saavat olla 48 px; kertojan napit ovat aina size-tap-min (56) */
  --tap-family: calc(var(--size-tap-min) - var(--space-sm));
  --gutter: var(--space-md);
  --wrap: 1200px;
  /* herossa sallittu ainoa liukuväri: sininen → laventeli → persikka, kuten luonnoksessa */
  --hero-bg: linear-gradient(172deg, var(--c-hero-from) 0%, var(--c-hero-mid) 46%, var(--c-hero-to) 100%);
}
@media (min-width: 720px) {
  :root { --gutter: var(--space-xl); }
}

/* ===== Pohja ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--c-bg); }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--t-body-font);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line-height);
  font-weight: var(--t-body-weight);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--c-accent-text); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.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; }
.skip { position: absolute; left: var(--gutter); top: calc(-1 * var(--space-xxxl)); z-index: 50; padding: var(--space-sm) var(--space-md); border-radius: var(--r-sm); background: var(--c-accent); color: var(--c-accent-ink); font-weight: var(--fw-bold); text-decoration: none; }
.skip:focus { top: var(--space-sm); }
.wrap {
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ===== Typografia: yksi luokka per tokenin tyyli ===== */
.t-display-xl { font-family: var(--t-display-xl-font); font-size: var(--t-display-xl-size); line-height: var(--t-display-xl-line-height); font-weight: var(--t-display-xl-weight); letter-spacing: var(--t-display-xl-tracking); text-wrap: balance; overflow-wrap: break-word; }
.t-h1 { font-family: var(--t-h1-font); font-size: var(--t-h1-size); line-height: var(--t-h1-line-height); font-weight: var(--t-h1-weight); letter-spacing: var(--t-h1-tracking); text-wrap: balance; }
.t-h2 { font-family: var(--t-h2-font); font-size: var(--t-h2-size); line-height: var(--t-h2-line-height); font-weight: var(--t-h2-weight); letter-spacing: var(--t-h2-tracking); text-wrap: balance; }
.t-body-large { font-family: var(--t-body-large-font); font-size: var(--t-body-large-size); line-height: var(--t-body-large-line-height); font-weight: var(--t-body-large-weight); }
.t-body { font-family: var(--t-body-font); font-size: var(--t-body-size); line-height: var(--t-body-line-height); font-weight: var(--t-body-weight); }
.t-story { font-family: var(--t-story-font); font-size: var(--t-story-size); line-height: var(--t-story-line-height); font-weight: var(--t-story-weight); }
.t-caption { font-family: var(--t-caption-font); font-size: var(--t-caption-size); line-height: var(--t-caption-line-height); font-weight: var(--t-caption-weight); color: var(--c-ink-mid); }
.eyebrow { font-family: var(--font-body); font-size: var(--t-caption-size); line-height: 1.3; font-weight: var(--fw-bold); letter-spacing: .02em; color: var(--c-accent-text); }
.muted { color: var(--c-ink-mid); }

/* ===== Napit =====
   Viisi muunnelmaa, kaksi kokoa. Iso (--lg) on kertojan ja markkinoinnin pääkehotusten koko. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: var(--tap-family); padding: 0 var(--space-lg);
  border-radius: var(--r-md); border: 1px solid transparent;
  font-family: var(--font-body); font-size: var(--t-body-size); font-weight: var(--fw-bold); line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn .i { width: 1.15em; height: 1.15em; }
.btn--lg { min-height: var(--size-tap-min); padding: 0 var(--space-xl); font-size: var(--t-body-large-size); }
.btn--primary { background: var(--c-accent); color: var(--c-accent-ink); }
.btn--primary:hover { background: color-mix(in srgb, var(--c-accent) 86%, var(--c-ink)); }
.btn--secondary { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-field-line); }
.btn--secondary:hover { border-color: var(--c-ink); }
.btn--ghost { background: transparent; color: var(--c-accent-text); padding: 0 var(--space-sm); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.btn--danger { background: transparent; color: var(--c-danger); border-color: currentColor; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--c-disabled); color: var(--c-ink-mid); border-color: transparent; cursor: not-allowed; }
.btn--block { width: 100%; }

/* ===== Merkit (chip) ===== */
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: var(--space-xs) 14px; border-radius: var(--r-pill); border: 0;
  font-family: var(--font-body); font-size: var(--t-caption-size); font-weight: var(--fw-bold); line-height: 1.2; white-space: nowrap;
}
/* toinen korostus: lapsenlapsen ääni ja hinta */
.chip--highlight { background: var(--c-highlight); color: var(--c-highlight-ink); }
/* uusi tai tuleva asia */
.chip--new { background: var(--c-accent-soft); color: var(--c-ink); }
/* painettava merkki kertojalle: osumapinta kasvaa näkyvää muotoa suuremmaksi */
.chip--hit { min-height: 40px; font-size: 16px; padding: var(--space-xs) var(--space-md) var(--space-xs) 12px; }
.chip--hit::after { content: ""; position: absolute; inset: -10px -4px; }
.chip-play { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-highlight-ink); color: var(--c-highlight); }
.chip-play .i { width: 12px; height: 12px; margin-left: 1px; }

/* ===== Kortti ===== */
.card { background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: var(--space-lg); min-width: 0; }

/* ===== Tarinakortti (perhe) ===== */
.story { display: grid; gap: var(--space-md); }
.story-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.story-head > div { display: grid; gap: var(--space-xs); min-width: 0; }
.player { display: flex; align-items: center; gap: 12px; min-width: 0; }
.play { flex: none; display: grid; place-items: center; width: var(--tap-family); height: var(--tap-family); border-radius: 50%; border: 0; background: var(--c-accent); color: var(--c-accent-ink); }
.play .i { width: 20px; height: 20px; margin-left: 3px; }
/* Heron esimerkkimuisto soi (player.js) */
button.play { cursor: pointer; font: inherit; padding: 0; }
button.play:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
button.play[aria-pressed="true"] .i { margin-left: 0; }
.wave { flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.wave i { display: block; flex: 0 1 3px; min-width: 1px; border-radius: 2px; background: var(--c-wave); }
.wave i.on { background: var(--c-accent); }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.story-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.listened { display: flex; align-items: center; gap: 10px; }
.avatars { display: flex; }
.av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--c-surface); font-size: 13px; font-weight: var(--fw-bold); line-height: 1; }
.av + .av { margin-left: calc(-1 * var(--space-sm)); }
.av--a { background: var(--c-highlight); color: var(--c-highlight-ink); }
.av--m { background: var(--c-accent-soft); color: var(--c-ink); }
.av--e { width: 44px; height: 44px; font-size: 17px; background: var(--c-accent); color: var(--c-accent-ink); border: 0; }
.story-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.heart { display: inline-flex; align-items: center; gap: 7px; min-height: var(--tap-family); padding: 0 var(--space-md); border-radius: var(--r-pill); border: 1px solid var(--c-border); background: transparent; color: var(--c-ink); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.heart .i { color: var(--c-ink-mid); }
.heart[aria-pressed="true"], .heart[data-on] { background: var(--c-accent-soft); border-color: transparent; }
.heart[aria-pressed="true"] .i, .heart[data-on] .i { color: var(--c-accent); }
.story--compact { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: var(--space-md); }
.story--compact .t-h2 { font-size: var(--t-body-size); line-height: 1.3; }
.story--compact .heart { padding: 0 10px; }
.story--compact .t-caption { white-space: nowrap; }

/* ===== Sovelluksen komponentit =====
   Näkyvät verkossa vain tyylioppaassa. Expo toteuttaa omansa samoista
   tokeneista; tämä on niiden verkkoviite, jotta molemmat näyttävät samalta. */

/* Viikon kysymys (kertoja) */
.qcard { display: grid; gap: var(--space-md); justify-items: start; }
.opts { display: grid; width: 100%; border-top: 1px solid var(--c-border); }
.opt { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--size-tap-min); padding: 10px 2px; border: 0; border-bottom: 1px solid var(--c-border); background: transparent; color: var(--c-ink); font-family: var(--font-body); font-size: var(--t-body-large-size); line-height: 1.3; text-align: left; }
.opt .i { color: var(--c-ink-mid); }
.opt:hover { color: var(--c-accent-text); }
.opt--own { justify-content: flex-start; color: var(--c-accent-text); font-weight: var(--fw-bold); }
.opt--own .i { color: inherit; }
/* "Ei tällä viikolla": aina näkyvissä, hiljainen, ei syyllistä */
.quiet { min-height: var(--size-tap-min); padding: 0 2px; border: 0; background: transparent; color: var(--c-ink-mid); font-family: var(--font-body); font-size: var(--t-body-large-size); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.quiet:hover { color: var(--c-ink); }

/* Puhu-nappi: kertojan tärkein ja usein ainoa toiminto */
.puhu {
  position: relative; flex: none; width: var(--size-puhu); height: var(--size-puhu); margin: 12px;
  border-radius: 50%; border: 0; display: grid; place-content: center; justify-items: center; gap: 6px;
  background: var(--c-accent); color: var(--c-accent-ink);
  box-shadow: 0 0 0 12px var(--c-accent-soft), var(--shadow-puhu);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 30px; line-height: 1; letter-spacing: var(--t-display-xl-tracking);
  transition: transform .15s, background-color .2s;
}
.puhu .i { width: 56px; height: 56px; stroke-width: 1.8; }
button.puhu:hover { background: color-mix(in srgb, var(--c-accent) 88%, var(--c-ink)); }
button.puhu:active { transform: scale(.97); }
.puhu--rec { background: var(--c-surface); color: var(--c-ink); box-shadow: 0 0 0 6px var(--c-danger), var(--shadow-card); }
.puhu--rec::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 6px solid var(--c-danger); animation: puhu-pulse 1.8s ease-out infinite; }
@keyframes puhu-pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(1.3); opacity: 0; } }
.rec-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c-danger); animation: rec-blink 1.2s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: .35; } }
.rec-time { font-size: 44px; font-variant-numeric: tabular-nums; }
.rec-lbl { font-family: var(--font-body); font-size: var(--t-caption-size); font-weight: var(--fw-bold); color: var(--c-ink-mid); letter-spacing: 0; }
.puhu--done { background: color-mix(in srgb, var(--c-success) 14%, var(--c-surface)); color: var(--c-success); box-shadow: 0 0 0 6px var(--c-success), var(--shadow-card); }
.puhu--done .i { width: 72px; height: 72px; stroke-width: 2.4; }
/* pieni Puhu markkinointisivun kuvitukseen: sama muoto, pienempi mitta */
.puhu--mini { width: 92px; height: 92px; margin: 10px; gap: 2px; font-size: 18px; box-shadow: 0 0 0 8px var(--c-accent-soft), var(--shadow-card); }
.puhu--mini .i { width: 30px; height: 30px; }

/* Lomakkeet */
.field { display: grid; gap: var(--space-sm); align-content: start; min-width: 0; }
.f-label { font-weight: var(--fw-bold); line-height: 1.3; }
.input { width: 100%; min-height: var(--tap-family); padding: 10px 14px; border: 1px solid var(--c-field-line); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink); font-size: var(--t-body-size); line-height: 1.4; }
textarea.input { display: block; min-height: 116px; resize: vertical; }
.input:focus, .code input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.hint { font-size: var(--t-caption-size); line-height: 1.4; color: var(--c-ink-mid); }
.is-error .input { border-color: var(--c-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-danger) 16%, transparent); }
.err { display: flex; align-items: flex-start; gap: var(--space-sm); color: var(--c-danger); font-size: var(--t-caption-size); font-weight: var(--fw-bold); line-height: 1.4; }
.err .i { width: 18px; height: 18px; margin-top: 1px; }
/* Kuusinumeroinen koodi: yksi ruutu per numero, iso ja tasalevyinen */
.code { display: grid; grid-template-columns: repeat(6, minmax(0, 54px)); gap: var(--space-sm); }
.code input, .code span { width: 100%; height: calc(var(--size-tap-min) + var(--space-xs)); padding: 0; text-align: center; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 26px; font-variant-numeric: tabular-nums; border: 1px solid var(--c-field-line); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink); }
.code span { display: grid; place-items: center; }
.switches { display: grid; gap: var(--space-xs); }
.switch { display: flex; align-items: center; gap: 14px; min-height: var(--tap-family); cursor: pointer; line-height: 1.35; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.track { position: relative; flex: none; width: 56px; height: 32px; border-radius: var(--r-pill); background: var(--c-field-line); transition: background-color .2s; }
.track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--c-surface); box-shadow: var(--shadow-card); transition: transform .2s; }
.switch input:checked + .track { background: var(--c-accent); }
.switch input:checked + .track::after { transform: translateX(24px); }
.switch input:focus-visible + .track { outline: 3px solid var(--c-accent); outline-offset: 3px; }

/* Tarinan tila perheelle */
.status { display: flex; flex-wrap: wrap; gap: 10px; }
.st { --st: var(--c-ink-mid); display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 34px; padding: var(--space-xs) 14px; border-radius: var(--r-pill); font-size: var(--t-caption-size); font-weight: var(--fw-bold); color: var(--st); background: color-mix(in srgb, var(--st) 12%, var(--c-surface)); }
.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.st--ok { --st: var(--c-success); }
.st--wait { --st: var(--c-warning); }
.st--err { --st: var(--c-danger); }

/* Perheen välilehtipalkki */
.tabbar { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--c-surface); border-top: 1px solid var(--c-border); padding: 6px var(--space-sm) var(--space-lg); }
.tab { display: grid; justify-items: center; gap: 3px; padding-top: var(--space-xs); font-size: 13px; font-weight: var(--fw-bold); color: var(--c-ink-mid); line-height: 1.2; }
.tab-ic { display: grid; place-items: center; width: 58px; height: 32px; border-radius: var(--r-pill); }
.tab[aria-current="page"] { color: var(--c-ink); }
.tab[aria-current="page"] .tab-ic { background: var(--c-accent-soft); color: var(--c-accent-text); }

/* ===== Markkinointisivu ===== */

/* Ylätunniste. Tietokoneella (720 px ja leveämpi) yksi rivi: logo, linkit ja kielivalinta. Puhelimessa
   logo ja Valikko-nappi, joka avaa palkin alle valikon (menu.js, alempana): sivun osiot, sovelluksen
   Aloita käyttö- ja Kirjaudu-napit ja kielivalinta (Olli 19.10.2026: linkkirivi vieri sivusuunnassa ja
   Kirjaudu katkesi). Tarttuva kaikilla leveyksillä. HTML:n järjestys on logo, linkit, kielivalinta,
   Valikko-nappi (myös Tab-järjestys). Ilman JavaScriptiä (<html> ilman .js-luokkaa) puhelin näyttää
   linkit omalla rivillään rivittyen ja kielet logon rivillä, eikä kaksirivinen palkki ole tarttuva. */
.site-head { position: relative; z-index: 20; background: var(--c-bg); }
.site-head-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); padding-block: 12px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; font-family: var(--font-body); font-weight: 800; font-size: 24px; letter-spacing: var(--t-h1-tracking); color: var(--c-ink); text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-left: -12px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-pill); color: var(--c-ink-mid); font-weight: var(--fw-bold); text-decoration: none; }
.site-nav a:hover { color: var(--c-ink); background: var(--c-quiet-fill); }
@media (max-width: 719px) {
  .js .site-head { position: sticky; top: 0; background: color-mix(in srgb, var(--c-bg) 72%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
  /* linkit ja kielivalinta ovat valikossa; ilman JavaScriptiä linkit omalle rivilleen ja kielet logon riville */
  .js .site-nav, .js .site-head-in > .lang { display: none; }
  .site-nav { flex-basis: 100%; order: 2; }
  .lang { order: 1; }
}
@media (min-width: 720px) {
  .site-head { position: sticky; top: 0; background: color-mix(in srgb, var(--c-bg) 72%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
  /* yksi rivi: jos linkit eivät mahdu, ne rivittyvät oman alueensa sisällä eikä kielivalinta putoa alas */
  .site-head-in { flex-wrap: nowrap; padding-block: var(--space-md); }
  .site-nav { margin-left: 0; justify-content: flex-end; }
  .site-nav a { padding: 0 var(--space-md); }
  /* kielikoodi samalle etäisyydelle viimeisestä linkistä kuin linkit toisistaan */
  .lang { margin-left: calc(-1 * var(--space-md)); }
}
/* Kapealla tietokoneen näytöllä viisi linkkiä mahtuu yhdelle riville tiiviimmillä väleillä (20 kysymystä -linkki, Olli 20.10.2026) */
@media (min-width: 720px) and (max-width: 959px) {
  .site-head-in { column-gap: 12px; }
  .site-nav { gap: 0; }
  .site-nav a { padding: 0 9px; }
  .lang { margin-left: -9px; }
}

/* Kielivalinta (lang.js): huomaamaton pudotusvalikko yläpalkin oikeassa reunassa kuten sovelluksen
   LanguageSwitch. Nappi näyttää nykyisen kielikoodin ja nuolen, valikko kielet omalla nimellään ja
   valitun kohdalla rastin. Ilman JavaScriptiä (<html> ilman .js-luokkaa) kielet näkyvät napin paikalla
   pieninä linkkeinä. Pinta, varjo ja hiljainen täyte tulevat rooleista, joten tumma teema toimii itse. */
.lang { position: relative; flex: none; margin-right: calc(-1 * var(--space-sm)); }
.lang-btn { display: none; }
.lang-menu { display: flex; gap: 2px; }
.lang-menu a { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--r-sm); color: var(--c-ink-mid); font-size: var(--t-caption-size); font-weight: var(--fw-bold); line-height: 1.2; text-decoration: none; }
.lang-menu a:hover { color: var(--c-ink); background: var(--c-quiet-fill); }
.lang-menu a[aria-current] { color: var(--c-ink); }
.lang-check { display: none; }
.js .lang-btn {
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-sm) 0 12px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-ink-mid);
  font-family: var(--font-body); font-size: var(--t-caption-size); font-weight: var(--fw-bold); letter-spacing: .04em; line-height: 1;
}
.js .lang-btn:hover, .js .lang-btn[aria-expanded="true"] { color: var(--c-ink); background: var(--c-quiet-fill); }
.lang-caret { width: 16px; height: 16px; stroke-width: 2.4; transition: transform .15s; }
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }
.js .lang-menu {
  position: absolute; top: calc(100% + var(--space-xs)); right: var(--space-sm); z-index: 30;
  display: none; min-width: 200px; max-width: calc(100vw - 2 * var(--gutter)); padding: var(--space-xs);
  border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--shadow-card);
}
.js .lang.is-open .lang-menu { display: grid; }
.js .lang-menu a { display: flex; justify-content: space-between; gap: var(--space-md); min-height: 48px; padding: 0 var(--space-md); color: var(--c-ink); font-size: var(--t-body-size); font-weight: var(--fw-medium); }
.js .lang-menu a:focus-visible { outline-offset: -3px; }
.js .lang-menu a[aria-current] { font-weight: var(--fw-bold); }
.js .lang-check { display: block; color: var(--c-accent-text); }

/* Valikko puhelimessa (menu.js). Valikko-nappi yläpalkin oikeassa reunassa; auki ollessa sen viivat
   kääntyvät rastiksi. Paneeli on yläpalkin sisällä (absolute, top: 100%), joten se pysyy tarttuvan palkin
   alla koko levyisenä ja vierii itse, jos sisältö ei mahdu ruudulle. Auki ollessa palkki ja paneeli ovat
   yhtenäistä sivun taustaa (sumennus ei toimi sisäkkäin), ja muu sivu himmenee kuten palautelomakkeen
   takana; himmennyksen napautus sulkee. Tietokoneella nappia ja paneelia ei näytetä koskaan. Värit
   rooleista, joten tumma teema toimii itse; prefers-reduced-motion poistaa siirtymät (sivun lopussa). */
.menu-btn { display: none; }
@media (max-width: 719px) {
  .js .menu-btn {
    display: inline-flex; align-items: center; gap: var(--space-sm); flex: none;
    min-height: 44px; margin-right: calc(-1 * var(--space-xs)); padding: 0 var(--space-md) 0 12px;
    border: 0; border-radius: var(--r-pill); background: var(--c-quiet-fill); color: var(--c-ink);
    font-family: var(--font-body); font-size: var(--t-body-size); font-weight: var(--fw-bold); line-height: 1;
  }
}
.menu-ic { width: 22px; height: 22px; stroke-width: 2.2; }
.menu-ic path { transform-box: view-box; transform-origin: 12px 12px; transition: transform .2s ease, opacity .15s ease; }
.menu-btn[aria-expanded="true"] .menu-ic-1 { transform: rotate(45deg) translateY(5px); }
.menu-btn[aria-expanded="true"] .menu-ic-2 { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-ic-3 { transform: rotate(-45deg) translateY(-5px); }
.menu-open .site-head { background: var(--c-bg); }
.site-menu {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
  /* 100 % = yläpalkin korkeus: paneeli ulottuu enintään ruudun alareunaan */
  max-height: calc(100vh - 100%); max-height: calc(100dvh - 100%); overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--c-border); background: var(--c-bg); box-shadow: var(--shadow-card);
  opacity: 0; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease;
}
.site-menu[hidden], .menu-scrim[hidden] { display: none; }
.menu-open .site-menu { opacity: 1; transform: none; }
.site-menu-in { padding-top: var(--space-sm); padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom, 0px)); }
.menu-links { display: grid; margin-inline: -12px; }
.menu-links a { display: flex; align-items: center; min-height: 52px; padding: 0 12px; border-radius: var(--r-sm); color: var(--c-ink); font-family: var(--font-display); font-size: 19px; font-weight: var(--fw-bold); line-height: 1.25; text-decoration: none; }
.menu-links a:hover, .menu-links a[aria-current="page"] { background: var(--c-quiet-fill); }
.menu-links a:focus-visible, .menu-lang a:focus-visible { outline-offset: -3px; }
.menu-actions { display: grid; gap: 12px; margin-top: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--c-border); }
/* kielivalinta kahtena vierekkäisenä vaihtoehtona; valittu nostettuna pinnalle ja rastilla */
.menu-lang { display: flex; gap: var(--space-xs); margin-top: var(--space-lg); padding: var(--space-xs); border-radius: var(--r-pill); background: var(--c-quiet-fill); }
.menu-lang li { display: flex; flex: 1 1 0; }
.menu-lang a { display: flex; flex: 1; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 44px; padding: 0 var(--space-md); border: 1px solid transparent; border-radius: var(--r-pill); color: var(--c-ink-mid); font-weight: var(--fw-bold); text-decoration: none; }
.menu-lang a:hover { color: var(--c-ink); }
.menu-lang a[aria-current] { border-color: var(--c-border); background: var(--c-surface); color: var(--c-ink); }
.menu-lang .lang-check { width: 18px; height: 18px; }
/* leveämmällä puhelimella ja pystytabletilla napit eivät veny koko ruudun levyisiksi */
.menu-actions, .menu-lang { max-width: 480px; }
.menu-scrim { position: fixed; inset: 0; z-index: 19; background: color-mix(in srgb, var(--c-surface-2) 72%, transparent); opacity: 0; transition: opacity .18s ease; }
.menu-open .menu-scrim { opacity: 1; }
@media (min-width: 720px) {
  .site-menu, .menu-scrim { display: none !important; }
}

/* Hero: ainoa paikka, jossa liukuväri on sallittu */
.hero-panel {
  display: grid; gap: var(--space-xl);
  padding: var(--space-xl) 20px var(--space-xl);
  border-radius: var(--r-lg);
  background: var(--hero-bg);
}
.hero-copy { display: grid; justify-items: start; min-width: 0; }
/* yläotsikko herossa isompi: kupari liukuvärin vaaleaa sinistä vasten täyttää vain ison tekstin kontrastivaatimuksen (3 : 1) */
.hero-copy .eyebrow { font-size: 19px; }
.hero-h { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(36px, 3.4vw + 22px, 62px); line-height: 1.06; letter-spacing: var(--t-display-xl-tracking); text-wrap: balance; margin: 14px 0 18px; }
.hero-sub { font-size: var(--t-body-large-size); line-height: var(--t-body-large-line-height); color: var(--c-ink-mid); max-width: 30em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-xl); width: 100%; }
.hero-cta .btn { flex: 1 1 100%; }
.hero-price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) 14px; margin-top: 20px; }
.hero-price .chip { font-size: 16px; min-height: 38px; }
.hero-art { display: grid; gap: 18px; min-width: 0; max-width: 560px; }
.hero-art .photo-ph--hero, .hero-art .photo--hero { max-width: 420px; justify-self: start; }
@media (min-width: 720px) { .hero-art .story { margin-top: -96px; justify-self: end; box-shadow: var(--shadow-card), 0 0 0 10px var(--c-bg); } }
.hero-q { justify-self: end; width: 88%; display: grid; gap: 12px; justify-items: start; }
.hero-art .story { width: 94%; }
/* Puhelin (Olli 19.10.2026: "kuvaa ylemmäs, kortti voi olla pienempänä ja vähän kuvan päällä, teksti kuvan
   alle"): kuva ensin koko leveydeltä, sen alareunan päällä pieni soitinkortti (otsikko ja soitin ilman
   tekstiä ja kuuntelijoita), otsikko ja teksti kuvan alla. */
/* Järjestys puhelimessa (Olli 19.10.2026: "otsikko ensin, sitten kuvat, ja sitten teksti"): yläotsikko ja
   otsikko, kuva korttineen, sitten teksti ja napit. hero-copy puretaan (display: contents), jotta sen
   lapset ovat paneelin ruudukon jäseniä ja ne voi järjestää kuvan ympärille; välit annetaan marginaaleina,
   koska ruudukon gap olisi sama joka väliin. DOM-järjestys (ruudunlukija) pysyy ennallaan. */
@media (max-width: 719px) {
  /* Ilmaa yläpalkin ja heron väliin (Olli 19.10.2026) */
  .hero-panel { gap: 12px; padding-top: 16px; margin-top: var(--space-md); }
  .hero-copy { display: contents; }
  .hero-copy .eyebrow { order: 0; }
  .hero-h { order: 1; margin: 0; }
  .hero-art { order: 2; gap: 0; max-width: none; margin-top: 6px; }
  .hero-sub { order: 3; margin-top: 4px; }
  .hero-cta { order: 4; margin-top: 10px; }
  .hero-note { order: 5; margin-top: 0; }
  .hero-art .photo--hero { max-width: none; aspect-ratio: 1 / 1; }
  .hero-art .photo--hero img { object-position: center 48%; }
  /* Sama taustavärinen reunus kuvan päällä kuin tietokoneella (Olli 19.10.2026: "että siinä on ne reunat") */
  .hero-art .story {
    width: 82%; justify-self: end; margin: -76px 12px 0 0; padding: 14px 16px; gap: 10px;
    box-shadow: var(--shadow-card), 0 0 0 10px var(--c-bg);
  }
  .hero-art .story .t-h2 { font-size: 19px; }
  .hero-art .story .t-story, .hero-art .story .story-foot { display: none; }
  .hero-art .story .player { gap: 10px; }
}
@media (min-width: 520px) {
  .hero-cta .btn { flex: 0 1 auto; }
}
@media (min-width: 720px) {
  .hero-panel { padding: var(--space-xxl) var(--space-xxl) 56px; }
}
@media (min-width: 1000px) {
  .hero-panel { grid-template-columns: 1.12fr .88fr; gap: 56px; align-items: center; padding: 76px 56px 84px; }
  .hero-q { width: 84%; }
  .hero-art { max-width: none; }
}

/* Osiot */
.section { padding-top: 72px; scroll-margin-top: var(--space-md); }
.section-head { display: grid; gap: 12px; max-width: 42rem; margin-bottom: var(--space-xl); }
.section-h { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(28px, 1.6vw + 22px, 40px); line-height: 1.12; letter-spacing: var(--t-h1-tracking); text-wrap: balance; }
.section-lead { color: var(--c-ink-mid); max-width: 38em; }
@media (min-width: 720px) {
  .section { padding-top: 112px; scroll-margin-top: 96px; }
  .section-head { margin-bottom: var(--space-xxl); }
  .section-lead { font-size: var(--t-body-large-size); line-height: var(--t-body-large-line-height); }
}
.grid-3 { display: grid; gap: var(--space-lg); }
/* kolme saraketta vasta kun kaikki mahtuvat: kaksi plus orpo kolmas näyttää keskeneräiseltä */
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Miten se toimii: kolme askelta, jokaisessa pieni oikea komponentti kuvana */
.step { display: grid; gap: 12px; align-content: start; }
.step-vis { display: grid; place-items: center; min-height: 148px; margin-bottom: var(--space-sm); padding: var(--space-md); border-radius: var(--r-md); background: var(--c-bg); }
.step-n { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent-text); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 20px; line-height: 1; } /* 20 px lihava = iso teksti, kupari pehmeällä kuparilla riittää */
.step-title { display: flex; align-items: center; gap: 12px; }
.step p { color: var(--c-ink-mid); }
.step-vis .code { width: 100%; max-width: 246px; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.step-vis .code span { height: 48px; font-size: 22px; border-radius: var(--r-sm); }
.step-vis .player { width: 100%; max-width: 280px; padding: 12px; border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--shadow-card); }
.step-vis .step-q { display: grid; gap: 10px; justify-items: start; width: 100%; max-width: 280px; padding: var(--space-md); border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--shadow-card); }
.step-vis .step-q .t-h2 { font-size: 20px; }
/* Kolme kysymysehdotusta kuten muistelijan sovelluksessa: valintaympyrä vasemmalla, valittu kuparinen */
.step-vis .choices { display: grid; gap: 6px; width: 100%; max-width: 236px; }
.step-vis .choice { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 11px; background: var(--c-surface); box-shadow: var(--shadow-card); font-weight: var(--fw-bold); font-size: 12.5px; line-height: 1.25; color: var(--c-ink); }
.step-vis .choice > span:last-child { display: grid; gap: 3px; justify-items: start; }
.step-vis .choice .chip { min-height: 18px; padding: 1px 8px; font-size: 10px; }
.step-vis .radio { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--c-border); }
.step-vis .choice--on { box-shadow: inset 0 0 0 1.5px var(--c-accent), var(--shadow-card); }
.step-vis .choice--on .radio { border-color: var(--c-accent); background: radial-gradient(circle, var(--c-accent) 0 3px, transparent 3.5px); }
.step-vis .step-skip { display: inline-grid; place-items: center; min-height: 48px; padding: 0 var(--space-lg); border-radius: 999px; border: 1.5px solid var(--c-field-line); background: var(--c-surface); color: var(--c-ink); font-weight: var(--fw-bold); font-size: 18px; }

/* Mitä perhe saa */
.ben { display: grid; gap: 10px; align-content: start; }
.ben-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: var(--r-md); background: var(--c-accent-soft); color: var(--c-accent-text); }
.ben-ic .i { width: 24px; height: 24px; }
.ben p { color: var(--c-ink-mid); }

/* Hinta (Olli 19.10.2026): yksi kortti Aloita tänään -paneelissa, sisällä kaksi saraketta, kokeilukuukausi
   ja Muistola-vuosi. Puhelimessa allekkain viivalla erotettuina, leveällä rinnakkain. Ei pakettiruudukkoa
   eikä merkkejä. Kortin sisällä teksti on vasemmalla, vaikka paneeli on keskitetty. */
.prices { display: grid; gap: var(--space-xl); width: 100%; max-width: 860px; margin-block: var(--space-sm); text-align: left; }
.price { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
.price + .price { padding-top: var(--space-xl); border-top: 1px solid var(--c-border); }
@media (min-width: 900px) {
  .prices { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xxl); padding: var(--space-xl) var(--space-xl) var(--space-xxl); }
  .price + .price { padding-top: 0; border-top: 0; }
  /* Sarakkeiden rivit linjaan (otsikko, hinta, lisärivi, lista): sisarusrivi ei siirrä vain toisen
     sarakkeen viivaa alemmas (Olli). Kokeilusarakkeessa tyhjä lisärivi pitää paikan. */
  .prices { grid-template-rows: auto auto auto 1fr; }
  .price { grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--space-md); }
}
/* Puhelimessa sarakkeet ovat allekkain: tyhjä paikanpitäjä ei vie tilaa */
@media (max-width: 899px) { .price-split:empty { display: none; } }
.price-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); }
.price-amount b { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 48px; line-height: 1; letter-spacing: var(--t-display-xl-tracking); }
.price-amount span { color: var(--c-ink-mid); font-weight: var(--fw-bold); }
.price-term { margin-top: calc(-1 * var(--space-sm)); color: var(--c-ink-mid); }
/* Sisarusten jaettu hinta suoraan hinnan alla (Olli): kuvaus, ei maksun jakamisen ominaisuus */
.price-split { margin-top: calc(-1 * var(--space-sm)); color: var(--c-ink-mid); }
/* Esittelyhinnan lappu heron liukuvärillä, jotta se erottuu (Olli). Ei yliviivausta eikä
   "alennus"-sanaa. Teksti on mustetta, joten kontrasti on sama kuin herossa.
   Lihavoitu alku on kehotus, loppu tavallisella painolla (Olli). */
.price-badge { justify-self: start; display: inline-flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline;
  padding: 10px 18px; border-radius: 12px; background: var(--hero-bg); color: var(--c-ink);
  font-size: 19px; font-weight: 500; line-height: 1.3; }
.price-badge b { font-weight: 800; }
/* Lappu kortin alalaidassa molempien sarakkeiden alla keskellä (Olli), sarakkeet pysyvät linjassa */
.prices > .price-badge { grid-column: 1 / -1; justify-self: center; display: block; width: fit-content; max-width: 100%; text-align: center; }
/* Kehotus omalle rivilleen; laatikko on pisimmän rivin levyinen (Olli: ei tyhjää tilaa) */
.prices > .price-badge b { display: block; }
/* Hintakortin alla keskitetty pienteksti: ALV ja lisämuistelija (Olli) */
.prices-fine { color: var(--c-ink-mid); font-size: 0.9em; text-align: center; max-width: 860px; }
/* Sovelluksen latauslinkki vain Android-puhelimessa (html.android, sivun alun skripti) */
.android-only { display: none; }
html.android .android-only { display: block; }
.ios-only { display: none; }
html.ios .ios-only { display: block; }
/* Sovellus näkyvämmin herossa (Olli 20.10.2026): keskitetty puhelinikoni ja teksti ilman taustaa, erottuu
   heron napeista. Androidilla lataus ja iPhonella testipyyntö. Näkyy vain puhelimessa; tyhjä kappale ei vie
   tilaa muualla. Kun napit ovat rinnakkain (520 px), linkki napin alla vasemmalla. */
.store-note { display: none; text-align: center; }
html.android .store-note, html.ios .store-note { display: block; }
.store-pill { display: none; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 8px; color: var(--c-ink); font-weight: var(--fw-bold); text-decoration: none; }
.store-pill:hover { text-decoration: underline; }
.store-pill .i { color: var(--c-accent); width: 22px; height: 22px; }
html.android .store-pill.android-only, html.ios .store-pill.ios-only { display: inline-flex; }
@media (min-width: 520px) { .store-note { text-align: left; } .store-pill { padding: 0; } }
.checks { display: grid; gap: 12px; align-content: start; padding-top: var(--space-md); border-top: 1px solid var(--c-border); }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks .i { color: var(--c-accent-text); margin-top: 3px; }
/* Puhelimessa hintaosio tiiviimpi (Olli 19.10.2026: sarakkeet allekkain venyttivät osion pitkäksi):
   pienempi otsikko ja hinta, lyhyemmät välit, pienempi lappu. Sisältö ei muutu. */
@media (max-width: 899px) {
  #hinta .cta-h { font-size: clamp(28px, 7.4vw, 36px); }
  #hinta .cta-lead { font-size: var(--t-body-size, 17px); }
  .prices { gap: var(--space-md); margin-block: 0; }
  .price { gap: var(--space-sm); }
  .price + .price { padding-top: var(--space-md); }
  .price-amount b { font-size: 40px; }
  .price-split { margin-top: 0; }
  .checks { gap: 8px; padding-top: var(--space-sm); }
  .prices > .price-badge { font-size: 17px; padding: 8px 14px; }
}

/* Valokuvat (design/kuvat/README.md: lähteet ja kuvaajat). .photo-ph on tyhjä kuvapaikka, jos kuva puuttuu. */
.photo { aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--c-accent-soft); }
.photo picture { display: block; width: 100%; height: 100%; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo--hero { aspect-ratio: 4 / 5; width: 100%; max-width: 420px; justify-self: start; }
.why .photo { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.foot-credits { color: var(--c-ink-mid); }
.photo-ph { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--space-md); border-radius: var(--r-lg); border: 1.5px dashed var(--c-field-line); background: linear-gradient(135deg, var(--c-accent-soft), var(--c-bg)); color: var(--c-ink-mid); text-align: center; font-size: var(--t-caption-size); line-height: 1.4; }
.photo-ph--hero { aspect-ratio: 4 / 5; width: 100%; }
.hero-note { margin-top: 12px; color: var(--c-ink-mid); }
.why { display: grid; gap: var(--space-md); align-content: start; padding: 0; overflow: hidden; }
.why .photo-ph { border-radius: var(--r-lg) var(--r-lg) 0 0; border-width: 0 0 1.5px; }
.why p { padding: 0 var(--space-lg) var(--space-lg); color: var(--c-ink); font-size: var(--t-body-large-size); line-height: var(--t-body-large-line-height); }
.section--quiet .section-h { font-size: clamp(24px, 1vw + 20px, 32px); }
/* Muistelijat vapaana ryppäänä, ei rivinä: kortit hieman eri korkeuksilla ja kulmissa */
.step-vis .names { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 6px; max-width: 260px; padding: 4px 0; }
.step-vis .names .chip { font-size: 14px; min-height: 32px; padding: 0 11px 0 4px; gap: 6px; background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-card); }
.step-vis .names .chip:nth-child(3n+1) { transform: translateY(-5px) rotate(-2.5deg); }
.step-vis .names .chip:nth-child(3n+2) { transform: translateY(4px) rotate(1.5deg); }
.step-vis .names .chip:nth-child(3n) { transform: translateY(-1px) rotate(-0.5deg); }
.step-vis .names .ini { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-accent); color: var(--c-accent-ink); font-size: 12px; }
/* Aloita tänään: koko levyinen lämmin paneeli osion lopussa (Olli 19.10.2026: "paljon isompi").
   Tasaväri, koska liukuväri on varattu herolle. */
.cta-block {
  display: grid; gap: var(--space-md); justify-items: center; text-align: center;
  margin-top: 56px; padding: clamp(44px, 6vw, 96px) clamp(20px, 5vw, 72px);
  border-radius: var(--r-lg); background: var(--c-accent-soft);
  scroll-margin-top: 72px;
}
/* yläotsikko isompi: kupari pehmeällä kuparilla (4,2 : 1) täyttää vain ison tekstin kontrastivaatimuksen, kuten herossa */
.cta-block .eyebrow { font-size: 19px; }
.cta-h { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(36px, 3.4vw + 22px, 64px); line-height: 1.05; letter-spacing: var(--t-display-xl-tracking); text-wrap: balance; }
.cta-lead { max-width: 32em; color: var(--c-ink); font-size: var(--t-body-large-size); line-height: var(--t-body-large-line-height); }
/* Leveällä ruudulla johdanto yhdelle riville kortin levyisenä (Olli) */
@media (min-width: 900px) { .cta-lead { max-width: 860px; } }
.cta-btn { margin-top: var(--space-sm); min-height: 64px; padding: 0 48px; font-size: 21px; }
@media (min-width: 720px) { .cta-block { scroll-margin-top: 96px; } }

/* Usein kysyttyä: details-elementti kortissa, toimii ilman JavaScriptiä */
.faq { display: grid; gap: 12px; max-width: 800px; }
.faq details { padding: 0; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: var(--size-tap-min); padding: var(--space-md) 20px; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 19px; line-height: 1.3; border-radius: var(--r-lg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { color: var(--c-ink-mid); transition: transform .2s; }
.faq details[open] summary .i { transform: rotate(90deg); }
.faq details p { padding: 0 20px 20px; max-width: 62ch; }
@media (min-width: 720px) {
  .faq summary { padding: 20px var(--space-lg); font-size: var(--t-h2-size); }
  .faq details p { padding: 0 var(--space-lg) var(--space-lg); }
}

/* Alatunniste ja kirjautuminen */
.site-foot { margin-top: 96px; padding-block: var(--space-xxl); border-top: 1px solid var(--c-border); }
.foot-grid { display: grid; gap: var(--space-xl); }
.foot-about { display: grid; gap: 12px; align-content: start; max-width: 28em; }
.foot-about p { color: var(--c-ink-mid); }
.login { display: grid; gap: 12px; align-content: start; scroll-margin-top: 96px; }
/* Aloita (Olli 20.10.2026: muistelijan kortti pois, "nyt se vaan sekoittaa"): Selaimessa, Android ja iPhone
   samanarvoisina ja samankokoisina allekkain (kolme ei mahdu rinnakkain alatunnisteen sarakkeeseen) */
.login-links { display: grid; gap: 12px; }
.login-link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 76px; padding: var(--space-md) 20px; border-radius: var(--r-md); color: var(--c-ink); text-decoration: none; }
.login-link span { display: grid; gap: 2px; }
/* Kortin kuvake vasemmalla (Olli 20.10.2026: "laita niihin ikonit", "android, ios/apple ja web"): Phosphor-kuvakkeet
   Globe, AndroidLogo ja AppleLogo (bold, MIT, samat kuin sovelluksessa) */
.login-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--c-accent-soft); color: var(--c-accent-text); }
.login-ic .i { width: 24px; height: 24px; }
.login-ic + span { flex: 1 1 auto; }
.login-link b { font-family: var(--font-display); font-size: 20px; }
/* Sovellukset ovat testivaiheessa (Olli 20.10.2026: "pienellä beta-badge") */
.login-link .beta { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-ink); font-family: var(--font-body); font-size: 13px; font-style: normal; font-weight: var(--fw-bold); line-height: 1.4; vertical-align: 3px; }
.login-link .i { color: var(--c-accent-text); }
.login-link:hover b { color: var(--c-accent-text); }
.foot-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-xxl); padding-top: 20px; border-top: 1px solid var(--c-border); color: var(--c-ink-mid); font-size: var(--t-caption-size); }
.foot-meta a { color: var(--c-ink-mid); }
.foot-meta a:hover { color: var(--c-ink); }
@media (min-width: 900px) {
  .site-foot { margin-top: 128px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-xxl); }
}
/* alatunnisteen linkit (tietosuoja, käyttöehdot) samalla rivillä */
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.site-nav a[aria-current="page"] { color: var(--c-ink); background: var(--c-quiet-fill); }

/* ===== Tietosuoja ja käyttöehdot =====
   tietosuoja/, kayttoehdot/, poista-tili/ ja englanniksi en/privacy/, en/terms/, en/delete-account/. Pitkä teksti luettavaksi: noin 70 merkin
   rivi, numeroidut väliotsikot ja sisällysluettelo. Ei kortteja tekstin ympärillä; sisällys on
   hiljaisella pohjalla ja kulkee leveällä ruudulla sivussa mukana. */
.legal { padding-top: var(--space-lg); }
.legal-head { display: grid; gap: 12px; max-width: 40rem; }
.legal-h { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(34px, 2.2vw + 26px, 52px); line-height: 1.08; letter-spacing: var(--t-display-xl-tracking); text-wrap: balance; }
.legal-meta { color: var(--c-ink-mid); font-size: var(--t-caption-size); font-weight: var(--fw-bold); }
.legal-lead { color: var(--c-ink-mid); font-size: var(--t-body-large-size); line-height: var(--t-body-large-line-height); }
.legal-layout { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
.legal-toc { align-self: start; max-width: 40rem; padding: 20px var(--space-lg); border-radius: var(--r-lg); background: var(--c-quiet-fill); }
.legal-toc h2 { font-family: var(--font-body); font-size: var(--t-caption-size); font-weight: var(--fw-bold); letter-spacing: .02em; color: var(--c-accent-text); }
.legal-toc ol { display: grid; gap: 2px; margin-top: var(--space-sm); }
.legal-toc a { display: block; padding: 5px 0; color: var(--c-ink); font-size: 16px; line-height: 1.35; text-decoration: none; }
.legal-toc a:hover { color: var(--c-accent-text); text-decoration: underline; }
.prose { max-width: 40rem; min-width: 0; }
.prose h2 { margin-top: var(--space-xxl); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(23px, .8vw + 20px, 28px); line-height: 1.2; letter-spacing: var(--t-h1-tracking); text-wrap: balance; scroll-margin-top: 72px; }
.prose h3 { margin-top: var(--space-lg); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 19px; line-height: 1.3; scroll-margin-top: 72px; }
.prose p, .prose ul, .prose ol, .prose dl, .prose address, .prose .legal-note { margin-top: 12px; }
.prose h2 + p, .prose h3 + p, .prose h2 + ul, .prose h3 + ul, .prose h2 + dl { margin-top: var(--space-sm); }
.prose > :first-child { margin-top: 0; }
.prose ul { list-style: disc; padding-left: 1.3em; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--c-accent-text); }
.prose strong, .prose dt { font-weight: 800; }
.prose dd { margin: 2px 0 0; }
.prose dt:not(:first-child) { margin-top: 14px; }
.prose address { font-style: normal; }
.prose a { overflow-wrap: anywhere; }
.legal-note { padding: var(--space-md) 20px; border-radius: var(--r-md); background: var(--c-accent-soft); color: var(--c-ink); }
.legal-version { margin-top: var(--space-xxl); padding-top: var(--space-md); border-top: 1px solid var(--c-border); color: var(--c-ink-mid); font-size: var(--t-caption-size); }
@media (min-width: 720px) {
  .legal { padding-top: var(--space-xxl); }
  .prose h2, .prose h3 { scroll-margin-top: 104px; }
}
@media (min-width: 1080px) {
  .legal-layout { grid-template-columns: 15rem minmax(0, 40rem); gap: 72px; margin-top: var(--space-xxl); }
  .legal-toc { position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow-y: auto; padding: 20px; }
  .legal-toc a { font-size: 15px; }
}

/* Android-sovelluksen lataussivu (lataa/, en/download/; Olli 19.10.2026): iso latausnappi ja
   vaiheet isommalla tekstillä, koska lukijoina on myös iäkkäitä muistelijoita. Puhelimella nappi on
   koko levyinen, leveällä ruudulla enintään 28rem. */
/* Kysymyssivu (kysymyksia-isovanhemmalle/, Olli 20.10.2026: "kivemman näköinen, kuva, laatikoita, värejä"):
   heron liukuväripaneeli kuvalla, vinkit kortteina kuvakkeineen, kysymysryhmät eri sävyisinä laatikoina
   (numerot jatkuvat ryhmästä toiseen) ja loppuun Muistolan kortti, jossa sovelluksen kolme kysymystä. */
.qhero { display: grid; gap: var(--space-lg); margin-top: var(--space-md); padding: var(--space-lg) 20px; border-radius: var(--r-lg); background: var(--hero-bg); }
.qhero-copy { display: grid; gap: 12px; align-content: center; }
.qhero-h { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(36px, 2.6vw + 26px, 60px); line-height: 1.06; letter-spacing: var(--t-display-xl-tracking); text-wrap: balance; }
.qhero-sub { color: var(--c-ink-mid); font-size: var(--t-body-large-size); line-height: var(--t-body-large-line-height); max-width: 34em; }
.qhero-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.qhero-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink); font-weight: var(--fw-bold); text-decoration: none; box-shadow: var(--shadow-card); }
.qhero-jump a:hover { color: var(--c-accent-text); }
.qhero-photo { aspect-ratio: 3 / 2; box-shadow: var(--shadow-card); }
@media (min-width: 860px) {
  .qhero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-xxl); padding: var(--space-xxl); }
  .qhero-photo { aspect-ratio: 4 / 3.4; }
}
.tip-grid { display: grid; gap: var(--space-md); }
.tip { display: grid; gap: 8px; align-content: start; }
.tip .ben-ic { margin-bottom: 4px; }
.tip p { color: var(--c-ink-mid); }
.tip-source { margin-top: var(--space-lg); color: var(--c-ink-mid); font-size: var(--t-caption-size); }
@media (min-width: 620px) { .tip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); } }
@media (min-width: 1000px) { .tip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qgroups { display: grid; gap: var(--space-md); counter-reset: q; }
.qgroup { display: grid; gap: var(--space-md); align-content: start; padding: var(--space-lg); border-radius: var(--r-lg); background: var(--c-surface); }
.qgroup--1 { background: var(--c-hero-to); }
.qgroup--2 { background: var(--c-highlight); }
.qgroup--3 { background: var(--c-hero-mid); }
.qgroup--4 { background: color-mix(in srgb, var(--c-danger) 13%, var(--c-surface)); }
.qgroup--5 { background: color-mix(in srgb, var(--c-success) 16%, var(--c-surface)); }
.qlist { display: grid; gap: 12px; list-style: none; padding: 0; }
.qlist li { counter-increment: q; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 18px; line-height: 1.4; font-weight: 600; }
.qlist li::before { content: counter(q); display: grid; place-items: center; width: 34px; height: 34px; margin-top: -4px; border-radius: 50%; background: var(--c-surface); color: var(--c-accent-text); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 16px; font-variant-numeric: tabular-nums; }
@media (min-width: 720px) {
  .qgroups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
  /* kuva täyttää viimeisen rivin: 2 saraketta (5 + kuva), 3 saraketta (4, 5 + kuva) */
  .qphoto { position: relative; aspect-ratio: auto; min-height: 260px; }
  .qphoto picture { position: absolute; inset: 0; } /* kuva ei kasvata riviä, korttien korkeus ratkaisee */
}
@media (min-width: 1080px) { .qgroups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qcta { display: grid; gap: var(--space-lg); padding: var(--space-lg) 20px; border-radius: var(--r-lg); background: linear-gradient(8deg, var(--c-hero-from) 0%, var(--c-hero-mid) 50%, var(--c-hero-to) 100%); }
.qcta-copy { display: grid; gap: 12px; align-content: center; }
.qcta-copy p { color: var(--c-ink-mid); max-width: 34em; }
.qcta-copy .qcta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.qcta-vis { min-height: 200px; background: color-mix(in srgb, var(--c-surface) 45%, transparent); }
.qcta-vis .choices { max-width: 300px; gap: 8px; }
.qcta-vis .choice { padding: 10px 12px; font-size: 15px; }
.qcta-vis .choice .chip { font-size: 11px; }
@media (min-width: 860px) {
  .qcta { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-xxl); padding: var(--space-xxl); }
}
.notfound-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-xl); }
/* Lataussivulla ei alatunnistetta (Olli 20.10.2026), joten tilaa sivun loppuun */
.download { margin-top: var(--space-xl); padding-bottom: var(--space-xxxl); }
.download .btn { max-width: 28rem; }
.download ol { margin-top: var(--space-lg); font-size: var(--t-body-large-size); line-height: var(--t-body-large-line-height); }
.download ol li + li { margin-top: 12px; }
.download ol li::marker { font-weight: var(--fw-bold); }
.download ol + p { margin-top: var(--space-lg); }

/* ===== Palautelomake (feedback.js, 0025) =====
   Jokaisen sivun alalaidan "Anna palautetta" avaa dialogin: kortin pinta ja varjo, isot peukut
   (valittu korostuu kuparilla kuten sovelluksen valinnat), kentät .field/.input. Tausta himmenee
   pinnan 2 sävyyn, joten verho on vaalealla teemalla vaalea ja tummalla tumma. */
.fb {
  width: min(100% - 2 * var(--gutter), 34rem); max-height: calc(100dvh - 2 * var(--space-md));
  margin: auto; padding: 0; border: 0; border-radius: var(--r-lg);
  background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-card);
  overflow: auto; overscroll-behavior: contain;
}
.fb::backdrop { background: color-mix(in srgb, var(--c-surface-2) 80%, transparent); }
.fb-in { position: relative; padding: var(--space-lg); }
.fb-form, .fb-thanks { display: grid; gap: 20px; }
.fb-form[hidden], .fb-thanks[hidden], .fb-err[hidden], .fb-thanks-contact[hidden] { display: none; }
.fb-h { padding-right: var(--space-xxl); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-h1-size); line-height: var(--t-h1-line-height); letter-spacing: var(--t-h1-tracking); text-wrap: balance; }
.fb-h:focus { outline: none; }
.fb-lead { margin-top: calc(-1 * var(--space-sm)); color: var(--c-ink-mid); }
.fb-close { position: absolute; top: var(--space-sm); right: var(--space-sm); display: grid; place-items: center; width: var(--tap-family); height: var(--tap-family); border: 0; border-radius: 50%; background: transparent; color: var(--c-ink-mid); }
.fb-close:hover { background: var(--c-quiet-fill); color: var(--c-ink); }
.fb-rating { display: grid; gap: var(--space-sm); }
.fb-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fb-thumb {
  display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 104px; padding: var(--space-md) var(--space-sm);
  border: 2px solid var(--c-field-line); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-ink-mid);
  font-family: var(--font-body); font-size: var(--t-body-size); font-weight: var(--fw-bold); line-height: 1.25; text-align: center;
  transition: background-color .15s, border-color .15s, color .15s;
}
.fb-thumb:hover { border-color: var(--c-ink-mid); color: var(--c-ink); }
.fb-thumb[aria-pressed="true"] { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-ink); }
.fb-thumb-i { width: 40px; height: 40px; fill: currentColor; }
.fb-thumb[aria-pressed="true"] .fb-thumb-i { color: var(--c-accent-text); }
.fb-ic-on, .fb-thumb[aria-pressed="true"] .fb-ic-off { display: none; }
.fb-thumb[aria-pressed="true"] .fb-ic-on { display: inline; }
/* hunajapurkki: ruudun ulkopuolella, ei näy eikä saa fokusta (tabindex -1, aria-hidden) */
.fb-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fb .input[aria-invalid="true"] { border-color: var(--c-danger); }
.fb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fb-actions .btn--primary { flex: 1 1 12rem; }
.fb-thanks { justify-items: center; padding-block: var(--space-md); text-align: center; }
.fb-thanks .fb-h { padding-right: 0; }
.fb-thanks p { max-width: 26em; color: var(--c-ink-mid); }
.fb-thanks .fb-actions { width: 100%; }
.fb-thanks-ic { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent-text); }
.fb-thanks-ic .i { width: 44px; height: 44px; stroke-width: 2.4; }
@media (max-width: 479px) {
  .fb-in { padding: 20px var(--space-md); }
  .fb-h { font-size: var(--t-h2-size); line-height: var(--t-h2-line-height); }
}

@media print {
  .site-head, .site-foot, .legal-toc, .skip, .fb { display: none; }
  .legal-layout { display: block; }
  .prose { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .puhu--rec::before { transform: scale(1.12); opacity: .35; }
}

/* Usein kysyttyä keskitettynä kuten hintaosio (Olli): otsikko keskellä, lista keskellä,
   kysymysten ja vastausten teksti vasemmalla luettavuuden vuoksi */
#kysyttya .section-head, #faq .section-head { text-align: center; margin-inline: auto; }
#kysyttya .faq, #faq .faq { max-width: 760px; margin-inline: auto; }