/* ==========================================================================
   Will·e – will-e.app

   VÄRIJÄRJESTELMÄ (kolme sääntöä, kaikki muu seuraa niistä)

   1. Tausta on lähes musta, ei violetti. Neon ei erotu värillisestä pohjasta.
   2. REUNUS ON LIUKUVÄRI, sama kaikkialla: magenta -> violetti -> sininen.
      Kaikki kolme ovat apin omia värejä.
   3. HEHKU ON ERI VÄRI KUIN REUNUS — kulta. Tämä on koko efektin ydin:
      jos hehku olisi samaa väriä kuin reunus, se sulaisi siihen eikä
      erottuisi. Kulta on myös se väri jolla appi merkitsee kultakortin,
      arvoasteikon ja voiton, ja logon piste on samaa perhettä.

   Kulta on siis "neonväri": otsikoiden toinen rivi, pysäkkipisteet ja
   kaikki kuvien takaa tuleva valo. Liukuväri on "reunaväri".
   ========================================================================== */

/* --- 1. Tokenit ---------------------------------------------------------- */

:root {
  /* Pohja */
  --ink:        #0A0810;   /* lähes musta, hitunen violettia                */
  --ink-2:      #12101C;   /* nostettu pinta                                */

  /* Reunaliukuvärin kolme pistettä — apin omat sävyt */
  --rim-a:      #BF26B3;   /* magenta,  Color(0.75, 0.15, 0.70)             */
  --rim-b:      #7D3BED;   /* violetti, Color(0.49, 0.23, 0.93)             */
  --rim-c:      #2663EB;   /* sininen,  Color(0.15, 0.39, 0.92)             */

  /* Neonväri — hehku ja korostetut rivit */
  --neon:       #FFD700;   /* WilleUI.gold                                  */
  --neon-warm:  #F59E0A;   /* logon piste                                   */

  --lilac:      #A68CFA;
  --green:      #33BF66;

  --text:       #FFFFFF;
  --text-2:     rgba(255, 255, 255, .62);
  --text-3:     rgba(255, 255, 255, .40);
  --surface:    rgba(255, 255, 255, .05);
  --surface-2:  rgba(255, 255, 255, .08);
  --border:     rgba(255, 255, 255, .11);

  /* Reunus: yksi liukuväri, käytössä joka paikassa jossa on neonreuna. */
  --rim: linear-gradient(145deg, var(--rim-a) 0%, var(--rim-b) 48%, var(--rim-c) 100%);
  --rim-line: linear-gradient(90deg, var(--rim-a), var(--rim-c));

  /* Reunuksen oma hohde — pinkki ja sininen kummastakin päästä. */
  --rim-glow: 0 0 24px -4px rgba(191, 38, 179, .85),
              0 0 34px -6px rgba(38, 99, 235, .70);

  /* Nappien gradientti. */
  --cta: linear-gradient(100deg, var(--rim-b) 0%, var(--rim-a) 100%);

  --display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
          "Helvetica Neue", Arial, sans-serif;

  --wrap: 1120px;
  --radius: 20px;
}

/* --- 2. Perusta ---------------------------------------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.015em;
  margin: 0;
}

p { margin: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

:focus-visible {
  outline: 3px solid var(--neon);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Tähtitaivas — kiinteä, ei animaatiota. Vaimeampi kuin ennen, jotta
   rakeisuus ja neonit saavat tilan. */
.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 14%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.2px 1.2px at 78% 9%,  rgba(255,255,255,.7),  transparent),
    radial-gradient(1px 1px   at 34% 42%,   rgba(255,255,255,.6),  transparent),
    radial-gradient(1.6px 1.6px at 88% 55%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px   at 55% 78%,   rgba(255,255,255,.55), transparent),
    radial-gradient(1.3px 1.3px at 22% 88%, rgba(255,255,255,.7),  transparent),
    radial-gradient(1px 1px   at 66% 30%,   rgba(255,255,255,.5),  transparent),
    radial-gradient(1.1px 1.1px at 6% 62%,  rgba(255,255,255,.6),  transparent);
  background-size: 620px 620px;
  opacity: .34;
}

/* Filmirakeisuus. Referenssillä sama: se pehmentää tasaiset mustat pinnat
   ja saa neonreunat näyttämään valolta eikä vektorilta. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .042;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.site-header, main, .site-footer { position: relative; z-index: 1; }

/* --- 3. Logo ------------------------------------------------------------- */

.logo {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  white-space: nowrap;
}

.logo .dot {
  color: var(--neon-warm);
  font-size: .78em;
  margin-inline: .04em;
  text-shadow: 0 0 14px rgba(245, 158, 10, .95),
               0 0 30px rgba(245, 158, 10, .55);
}

.logo .word {
  text-shadow: 0 0 16px rgba(166, 140, 250, .5),
               0 0 34px rgba(166, 140, 250, .24);
}

/* --- 4. Yläpalkki -------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 8, 16, .74);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 66px;
}

.site-header .logo { font-size: 26px; }

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.site-header .brand img { width: 32px; height: 32px; border-radius: 9px; }

.header-spacer { flex: 1; }

.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.lang a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 5px 11px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-2);
}

.lang a[aria-current="page"] { background: var(--surface-2); color: var(--text); }

/* --- 5. Napit ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  padding: 15px 30px;
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  background: var(--cta);
  box-shadow: var(--rim-glow), 0 12px 36px rgba(0, 0, 0, .55);
  transition: transform .18s ease, box-shadow .18s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px -2px rgba(191, 38, 179, .95),
              0 0 44px -4px rgba(38, 99, 235, .8),
              0 16px 44px rgba(0, 0, 0, .55);
}

/* Odotustila: sama liukuvärireunus kuin kuvissa, mutta täyttö on tumma. */
.btn.is-pending {
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) padding-box,
    var(--rim) border-box;
  border: 1.5px solid transparent;
  color: var(--text);
  cursor: default;
  box-shadow: 0 0 20px -6px rgba(191, 38, 179, .7),
              0 0 26px -8px rgba(38, 99, 235, .6);
}

.btn.is-pending:hover { transform: none; }

.btn-small { font-size: 15px; padding: 9px 18px; white-space: nowrap; }

.store-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.store-note { font-size: 14px; color: var(--text-3); margin-top: 14px; }

/* --- 6. Kuvakehys — koko sivun tunnusmerkki ------------------------------ */
/*
   .shot on liukuvärireunus: 2 px taustaa joka jää näkyviin kuvan ympärille.
   Toteutus padding + background, ei borderia — border-image ei taivu
   pyöristettyihin kulmiin luotettavasti.
*/

.shot {
  display: block;
  width: min(292px, 62vw);
  margin-inline: auto;
  padding: 2px;
  border-radius: 38px;
  background: var(--rim);
  box-shadow:
    var(--rim-glow),
    0 0 100px -22px rgba(255, 185, 30, .48),   /* kultahalo reunuksen ULKOPUOLELLA */
    0 0 150px -30px rgba(255, 165, 20, .55),
    0 32px 70px rgba(0, 0, 0, .75);
}

.shot img { width: 100%; border-radius: 36px; }

/* Kultahehku tulee kuvan TAKAA, eri väri kuin reunus. */
.glow-wrap { position: relative; isolation: isolate; }

.glow-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(560px, 92vw);
  height: min(560px, 92vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
              rgba(255, 195, 40, .42), rgba(255, 165, 20, .18) 55%, transparent 78%);
  filter: blur(44px);
}

/* --- 7. Liukuvärinen tunnusviiva ---------------------------------------- */
/* Korvaa tekstitunnuksen: sama ratkaisu kuin referenssillä. */

.rule {
  display: block;
  width: 128px;
  height: 3px;
  border-radius: 2px;
  background: var(--rim-line);
  margin-bottom: 26px;
  box-shadow: 0 0 14px -2px rgba(191, 38, 179, .8);
}

/* --- 8. Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  /* Pohjapehmuste EI ole koristetta: overflow:hidden rajaa heron ilmakehän,
     ja ilman tätä tilaa se leikkaisi myös kallistetun puhelimen kulmat ja
     kultahehkun suoraan viivaan. Varjot ulottuvat noin 105 px alaspäin. */
  /* Ei pohjapehmustetta: videossa on jo tyhjää tilaa puhelimen alapuolella
     (noin 20 % ruudun korkeudesta), joten pehmuste kaksinkertaistaisi välin
     faktanauhaan verrattuna siihen mikä nauhan alapuolella on. */
  padding: 84px 0 0;
  text-align: center;
  overflow: hidden;
}

/* Avaruuden ilmakehä — violetti, hyvin haalea. Kultahehku tulee vasta
   kuvan kohdalla, jotta nämä kaksi eivät sekoitu toisiinsa. */
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -260px;
  width: 1200px;
  height: 900px;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(125, 59, 237, .32), transparent 72%),
    radial-gradient(closest-side, rgba(191, 38, 179, .24), transparent 66%);
  filter: blur(14px);
  pointer-events: none;
}

/* Heron palsta on leveämpi kuin muun sivun. Otsikko ei ole leipätekstiä
   eikä sitä sido sama luettavuusleveys — ja pitkä otsikko mahtuu näin
   kahdelle riville kolmen sijaan. Muut heron elementit rajaavat itse
   oman leveytensä, joten tämä koskee käytännössä vain otsikkoa. */
.hero > .wrap { position: relative; max-width: 1280px; }

.hero h1 {
  /* Mitoitettu pitkälle otsikolle: kaksi riviä työpöydällä, kolme
     kapealla näytöllä. Jos otsikko lyhenee, maksimikokoa voi nostaa
     takaisin — 4.7rem oli aiemmin sopiva neljän sanan otsikolle. */
  font-size: clamp(1.5rem, 5.6vw, 4.75rem);
  line-height: 1.0;
  margin: 22px auto 0;
  /* EI text-wrap: balance. Se pilkkoisi kultaisen rivin kahtia tasatakseen
     rivien pituudet, vaikka rivi mahtuisi kokonaan yhdelle riville. */
}

.hero .lead {
  font-size: clamp(1.05rem, 2.1vw, 1.3rem);
  color: var(--text-2);
  max-width: 46ch;
  margin: 22px auto 34px;
}

.hero .store-row { justify-content: center; }

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lilac);
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) padding-box,
    var(--rim) border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 16px;
}

.hero-figure {
  width: min(310px, 66vw);
  margin: 56px auto 0;
}

.hero-figure .shot {
  width: 100%;
  transform: rotate(-3deg);
}

/* --- 9. Neonrivi otsikoissa --------------------------------------------- */
/* Otsikon toinen rivi on kulta ja hohtaa. Tämä on sivun ainoa hohtava
   tekstityyli — jos sitä käyttää muualla, se lakkaa merkitsemästä mitään. */

/* Heron kultainen rivi on 84 % valkoisesta: väite johtaa, tarkennus tukee.
   Se on myös pidempi teksti, joten pienempi koko pitää sen yhdellä rivillä
   silloinkin kun ensimmäinen rivi kasvaa. */
.hero h1 em { font-size: .84em; }

.hero h1 em,
.feature h2 em,
.section-head h2 em,
.closing-card h2 em,
.notfound h1 em {
  font-style: normal;
  display: block;
  color: var(--neon);
  text-shadow: 0 0 26px rgba(255, 215, 0, .55),
               0 0 70px rgba(255, 180, 0, .32);
}

/* --- 10. Ominaisuudet ---------------------------------------------------- */

.features {
  position: relative;
  padding-block: 96px 40px;
}

.features::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 120px;
  bottom: 120px;
  width: 0;
  border-left: 2px dashed rgba(166, 140, 250, .16);
  transform: translateX(-1px);
}

.feature {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px 88px;
  padding-block: 62px;
}

.feature:nth-child(even) .feature-text { order: 2; }

/* Kallistus vuorottelee puolen mukaan — kuva "nojaa" tekstiä kohti. */
.feature:nth-child(odd)  .shot { transform: rotate(2.5deg); }
.feature:nth-child(even) .shot { transform: rotate(-2.5deg); }

.stop {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  margin-top: -6.5px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 0 6px var(--ink),
              0 0 12px rgba(255, 215, 0, .95),
              0 0 34px rgba(255, 180, 0, .5);
}

.feature h2 {
  font-size: clamp(1.85rem, 3.5vw, 2.55rem);
  line-height: 1.06;
  text-wrap: balance;
}

.feature-text p {
  color: var(--text-2);
  margin-top: 18px;
  max-width: 40ch;
  font-size: 1.05rem;
}

/* --- 11. Vanhemmille ----------------------------------------------------- */

.parents {
  padding: 96px 0;
  border-top: 1px solid var(--border);
  background: rgba(46, 31, 115, .12);
}

.section-head { text-align: center; margin: 0 auto 52px; }

.section-head h2 {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.06;
  max-width: 20ch;
  margin-inline: auto;
}

.section-head p {
  color: var(--text-2);
  margin-top: 16px;
  max-width: 44ch;
  margin-inline: auto;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 18px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
}

.card h3 { font-size: 1.22rem; margin-bottom: 8px; }
.card p { color: var(--text-2); font-size: .97rem; }

.fineprint {
  margin: 34px auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-3);
  max-width: 62ch;
}

.fineprint a { color: var(--lilac); }

/* --- 12. Hinta ----------------------------------------------------------- */
/* Hintakortti poistettu: App Store hinnoittelee jokaisen markkinan erikseen,
   eikä yhtä lukua voi esittää sadalle maalle. Tilalle tulee latauskehote
   kun sovellus on julkaistu. Tyylit poistettu samalla, jotta ne eivät jää
   roikkumaan käyttämättöminä. */

/* --- 13. Loppu-CTA ------------------------------------------------------- */

.closing { padding: 96px 0 104px; }

.closing-card {
  position: relative;
  text-align: center;
  padding: clamp(48px, 8vw, 96px) 28px;
  border-radius: 32px;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) padding-box,
    var(--rim) border-box;
  box-shadow:
    var(--rim-glow),
    0 0 90px -20px rgba(255, 185, 30, .5),
    0 30px 80px rgba(0, 0, 0, .6);
}

.closing-card h2 {
  font-size: clamp(2rem, 5vw, 3.3rem);
  line-height: 1.04;
  max-width: 18ch;
  margin-inline: auto;
}

.closing-card .store-row { justify-content: center; margin-top: 34px; }

/* --- 14. Alatunniste ----------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 44px 0 56px;
  font-size: 15px;
  color: var(--text-3);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
}

.site-footer .logo { font-size: 24px; }

.footer-links { display: flex; flex-wrap: wrap; gap: 22px; margin-left: auto; }

.footer-links a { color: var(--text-2); text-decoration: none; }
.footer-links a:hover { color: var(--text); text-decoration: underline; }

.footer-legal {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* --- 15. Faktanauha ------------------------------------------------------ */

.factbar {
  border-block: 1px solid var(--border);
  background: rgba(255, 255, 255, .02);
}

.factbar .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 40px;
  padding-block: 20px;
  font-size: 15px;
  color: var(--text-2);
}

.factbar b { color: var(--text); font-weight: 600; }

/* --- 16. Sisääntuloanimaatio -------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
}

.reveal.in { opacity: 1; transform: none; }

/* --- 17. Kapea näyttö ---------------------------------------------------- */

@media (max-width: 900px) {
  .features::before { display: none; }
  .stop { display: none; }

  .feature {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-block: 46px;
    text-align: center;
  }

  .feature:nth-child(even) .feature-text { order: 0; }
  .feature-text p { margin-inline: auto; }
  .rule { margin-inline: auto; }
  .features { padding-top: 64px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding-top: 56px; padding-bottom: 0; }
  .hero-figure { margin-top: 44px; }
  .store-row { flex-direction: column; align-items: stretch; }
  .store-row .btn { width: 100%; }
  /* Odotustilan pilleri on MERKKI, ei nappi — se ei vie mihinkään, joten
     koko leveydelle venyttäminen jättäisi vain tyhjää. Kun APP_STORE_URL
     täytetään, is-pending katoaa ja nappi levenee taas koko leveydelle:
     silloin se on oikeasti painettava ja iso kosketusalue on oikein. */
  .store-row .btn.is-pending {
    width: auto;
    align-self: center;
    /* Fontti kutistuu näytön mukana, jotta teksti pysyy yhdellä rivillä
       myös 320 px:n puhelimessa. Yläraja 18px = sama kuin muualla. */
    font-size: clamp(14px, 4.2vw, 18px);
    padding-inline: clamp(18px, 6vw, 30px);
  }
  /* Yläpalkin nappi näkyy myös kapealla näytöllä: se on oikea latauslinkki
     ja yläpalkki on kiinteä, joten se kulkee mukana vieritettäessä. */
  .site-header .btn { font-size: 13px; padding: 8px 14px; }
  .site-header .wrap { gap: 10px; }
  .site-header .lang a { padding: 5px 8px; }
  .footer-links { margin-left: 0; }
  .closing-card { border-radius: 26px; }
}

/* Hyvin kapealla näytöllä (alle 360 px) logo, kielivalinta ja nappi eivät
   mahdu rinnakkain. Nappi piiloon — heron ja sivun lopun napit riittävät. */
@media (max-width: 359px) {
  .site-header .btn { display: none; }
}

/* --- 18. Vähennetty liike ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* --- 19. Legal-sivut ----------------------------------------------------- */
/* Tietosuojaseloste ja käyttöehdot. Sama kuori kuin etusivulla, mutta
   kapeampi palsta ja rauhallisempi typografia — nämä ovat luettavia
   dokumentteja, eivät myyntisivuja. Kultaa käytetään vain lapsille
   suunnatussa laatikossa. */

.legal-head { padding-top: 56px; border-bottom: 1px solid var(--border); }

/* Legal-sivuilla koko sivu on yksi kapea palsta — myös ylä- ja
   alatunniste, jotta logo ei jää irralleen tekstin vasemmalta puolelta. */
.legal-page .site-header .wrap,
.legal-page .site-footer .wrap,
.legal-head .wrap,
.legal .wrap { max-width: 780px; }

.legal-head h1 { font-size: clamp(2rem, 5.4vw, 3.2rem); line-height: 1.04; }

.legal-head .meta {
  color: var(--text-3);
  font-size: 14px;
  margin-top: 14px;
  padding-bottom: 36px;
}

.legal { padding: 46px 0 96px; }

.legal h2 {
  font-size: clamp(1.28rem, 2.6vw, 1.62rem);
  line-height: 1.25;
  margin-top: 52px;
}

/* Sama liukuvärinen tunnusviiva kuin etusivun lohkoissa. */
.legal h2::before {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  border-radius: 2px;
  background: var(--rim-line);
  margin-bottom: 16px;
  box-shadow: 0 0 12px -2px rgba(191, 38, 179, .7);
}

.legal p {
  color: rgba(255, 255, 255, .76);
  margin-top: 16px;
  line-height: 1.78;
}

.legal strong { color: var(--text); font-weight: 600; }

.legal a { color: var(--lilac); text-underline-offset: 3px; }

/* Lapsille suunnattu laatikko — ainoa kohta jossa kulta esiintyy. */
.legal .kids {
  margin-top: 36px;
  padding: 26px 26px 30px;
  border-radius: 22px;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) padding-box,
    var(--rim) border-box;
  box-shadow: var(--rim-glow), 0 0 80px -26px rgba(255, 185, 30, .55);
}

.legal .kids h2 { margin-top: 0; color: var(--neon); }
.legal .kids h2::before { display: none; }
.legal .kids p { color: rgba(255, 255, 255, .82); }

/* Taulukot */
.legal table {
  width: 100%;
  margin-top: 24px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  font-size: .96rem;
}

.legal th {
  text-align: left;
  font-weight: 700;
  color: var(--text);
  background: var(--surface-2);
  padding: 13px 16px;
}

.legal td {
  padding: 13px 16px;
  color: rgba(255, 255, 255, .72);
  vertical-align: top;
  line-height: 1.6;
  border-top: 1px solid var(--border);
}

.legal tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .022); }

@media (max-width: 560px) {
  .legal table { font-size: .9rem; }
  .legal th, .legal td { padding: 10px 11px; }
  .legal h2 { margin-top: 42px; }
}

/* --- 20. Tulostus -------------------------------------------------------- */
/* Tietosuojaseloste tulostetaan toisinaan paperille. */

@media print {
  .starfield, .grain, .site-header, .site-footer { display: none; }

  body { background: #fff; color: #000; font-size: 11pt; }

  .legal-head { border-bottom: 1px solid #999; padding-top: 0; }
  .legal-head h1, .legal h2, .legal strong { color: #000; }
  .legal p, .legal td, .legal-head .meta { color: #000; }
  .legal a { color: #000; }

  .legal h2::before { background: #000; box-shadow: none; width: 48px; height: 2px; }

  .legal .kids {
    background: #fff;
    border: 1px solid #000;
    box-shadow: none;
  }
  .legal .kids h2 { color: #000; }

  .legal table { border: 1px solid #999; }
  .legal th { background: #eee; }
  .legal td { border-top: 1px solid #ccc; }
  .legal tbody tr:nth-child(odd) td { background: #fff; }
}

/* --- 21. Tutkimuslohko --------------------------------------------------- */
/* Tarkoituksella hillitty: ei neonreunusta eikä hehkua. Hinta- ja loppukortti
   ovat jo reunustettuja, ja kolmas hohtava kortti söisi ne kaikki. Vaimeus on
   myös sisällöllisesti oikein — tämä on lähdeviite, ei myyntipuhe. */

/* Yläpehmuste tuli ennen hintalohkolta, joka on poistettu — ilman tätä
   tutkimuskortti liimautuisi kiinni Vanhemmille-osioon. */
.research { padding: 96px 0; }

.research-card {
  max-width: 740px;
  margin-inline: auto;
  text-align: center;
  padding: 44px 32px 38px;
  border-radius: 26px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.research-card .block-label,
.notfound .block-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 14px;
}

.research-card h2 {
  font-size: clamp(1.4rem, 3vw, 1.95rem);
  line-height: 1.14;
  max-width: 27ch;
  margin-inline: auto;
}

.research-card p { color: var(--text-2); margin-top: 18px; font-size: 1rem; }

.research-card .citation {
  margin-top: 26px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-3);
}

.research-card .citation a { color: var(--lilac); }

@media (max-width: 640px) {
  .research-card { padding: 34px 22px 30px; }
}

/* --- 22. Heron animaatio -------------------------------------------------- */
/*
   3D-puhelin, joka kääntyy paljastaen sovelluksen etusivun.

   TEKNIIKKA: "stacked alpha video". Video on kaksinkertaisen korkuinen —
   yläpuolisko on väri, alapuolisko sama kuva läpinäkyvyytenä mustavalkoisena.
   WebGL yhdistää ne kankaalle.

   Miksi näin: läpinäkyvää videota ei ole yhtenäisesti tuettu. WebM/VP9-alfa
   ei toimi Safarissa, ja HEVC-alfa vaatii Applen omat työkalut. Kun alfa
   hoidetaan itse, riittää tavallinen H.264 — se toistuu joka selaimessa,
   ja tiedosto on pienempi kuin kummassakaan natiivissa vaihtoehdossa.

   Video on 912 px leveä eli kaksinkertainen näyttökokoon nähden, joten se
   on terävä myös retinanäytöllä.

   Jos WebGL ei ole käytettävissä tai liike on vähennetty, kangas piilotetaan
   ja tilalla näkyy .hero-fallback — videon viimeinen ruutu läpinäkyvänä
   WebP-kuvana. Mikään ei jää tyhjäksi.
*/

.hero-figure--anim {
  position: relative;
  width: min(460px, 88vw);
}

/* Videolla ei ole .shot-kehystä, joten siltä puuttui kehyksen tiivis
   kultahalo — vain leveä taustahehku jäi. Tässä se korvataan toisella,
   kapeammalla kerroksella, jotta valo on yhtä voimakas kuin lohkojen
   kuvakaappauksilla. */
.hero-figure--anim::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  /* Puhelimen muotoinen, sumennettu kultapinta.

     EI box-shadow: läpinäkyvällä elementillä varjo jättää laatikon oman
     alueen kohdalle reiän, ja sen raja näkyi tummana kaistaleena puhelimen
     alapuolella. .shot-kehys ei kärsi tästä, koska sillä on läpinäkymätön
     tausta. Sumennettu taustaväri täyttää alueen, joten reikää ei synny. */
  width: 58%;
  height: 64%;
  transform: translate(-50%, -50%);
  border-radius: 18%;
  background: rgba(255, 182, 30, .52);
  filter: blur(54px);
  pointer-events: none;
}

/* Taustahehku hieman voimakkaammaksi samasta syystä. */
.hero-figure--anim.glow-wrap::before {
  background: radial-gradient(closest-side,
              rgba(255, 195, 40, .34), rgba(255, 165, 20, .16) 55%, transparent 78%);
}

.hero-canvas,
.hero-fallback {
  display: block;
  width: 100%;
  height: auto;
}

/* Kangas piilossa kunnes WebGL on varmasti käynnissä. */
.hero-canvas { display: none; }
.hero-figure--anim.on .hero-canvas { display: block; }
.hero-figure--anim.on .hero-fallback { display: none; }

/* Videoelementti on vain datan lähde WebGL:lle, sitä ei näytetä.

   MUTTA: sitä ei saa piilottaa display:none:lla, 1×1 pikseliin eikä
   opacity: 0:aan. iOS Safari kieltäytyy toistamasta videota jota se pitää
   näkymättömänä, jolloin kangas jää tyhjäksi ja tilalle tulee varakuva.
   Siksi elementti on oikean kokoinen ja lähes läpinäkyvä, kankaan takana. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  opacity: 0.001;
  z-index: -1;
  pointer-events: none;
}

.hero-canvas { position: relative; z-index: 1; }