/* Valopiirtämö, main.css
   Palette: bg #000 · ink #FCFCFC · mute #9C9C9D · gradient #30CBF3 → #7762F0
   Type: Poppins self-hosted (200 headings / 300 body / 400 emphasis+UI) */

/* ---------- Fonts ---------- */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/assets/fonts/poppins-200.v2.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/poppins-300.v2.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-400.v2.woff2') format('woff2');
}
/* Metriikkayhteensopiva fallback (Arial + Poppinsin mitat): ei uudelleenrivitystä swapissa */
@font-face {
  font-family: 'Poppins-fallback';
  src: local('Arial');
  size-adjust: 112.78%;
  ascent-override: 93.11%;
  descent-override: 31.03%;
  line-gap-override: 8.87%;
}

/* ---------- Tokens ---------- */

:root {
  --bg: #000;
  --ink: #FCFCFC;
  --mute: #9C9C9D;
  --cyan: #30CBF3;
  --violet: #7762F0;
  --grad: linear-gradient(90deg, var(--cyan), var(--violet));
  /* --hot: VAIN hero-osion latausaikariville (.hero__load .hot). Molemmat päät mustalla ≥ 6,7:1. */
  --hot: linear-gradient(90deg, #FFB347, #FF5A36);
  --card: #0A0A0D;
  --line: rgba(252, 252, 252, .09);
  --line-strong: rgba(252, 252, 252, .16);
  --err: #FF7A85; /* vain virheille, ei muuhun käyttöön (ks. CLAUDE.md) */
  --radius: 20px;
  --fs-h1: clamp(2.125rem, 5vw + .6rem, 4rem);
  --fs-h2: clamp(1.75rem, 2.6vw + .8rem, 2.625rem);
  --fs-h3: 1.375rem;
  --section: clamp(5.5rem, 11vw, 10rem);
  color-scheme: dark;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Poppins', 'Poppins-fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
}

[hidden] { display: none !important; }

h1, h2, h3 {
  font-weight: 200;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

strong, b { font-weight: 400; }

a { color: var(--ink); }

a, button, summary { -webkit-tap-highlight-color: transparent; }

img, svg { max-width: 100%; height: auto; }

::selection { background: rgba(48, 203, 243, .35); color: var(--ink); }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.wrap { width: min(1120px, 100% - 44px); margin-inline: auto; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 14px; left: 16px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: .9375rem;
  transform: translateY(-78px); /* piilotus transformilla (kompositori), ei top-layoutilla */
  transition: transform .2s ease;
}
.skip-link:focus-visible { transform: none; }

/* Gradient text */
.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Signature ornament: a drawn stroke of light with endpoint dots (echo of the V mark) */
.stroke {
  position: relative;
  width: 64px; height: 2px;
  border-radius: 2px;
  background: var(--grad);
  box-shadow: 0 0 12px rgba(48, 203, 243, .35);
  margin: 0 0 22px;
}
.stroke::before, .stroke::after {
  content: '';
  position: absolute;
  top: -2px;
  width: 6px; height: 6px;
  border-radius: 50%;
}
.stroke::before { left: -3px; background: var(--cyan); box-shadow: 0 0 8px rgba(48, 203, 243, .8); }
.stroke::after { right: -3px; background: var(--violet); box-shadow: 0 0 8px rgba(119, 98, 240, .8); }
.stroke--center { margin-inline: auto; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 16px 34px;
  border: 0;
  border-radius: 999px;
  background: var(--grad);
  color: #000;
  font-family: inherit;
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .3s ease, transform .3s ease, opacity .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover { box-shadow: 0 0 28px rgba(48, 203, 243, .4), 0 0 56px rgba(119, 98, 240, .25); transform: translateY(-1px); }
}
.btn:active:not(:disabled) { transform: translateY(0) scale(.97); transition-duration: .1s; }
.btn:focus-visible { outline-offset: 4px; }
.btn:disabled { cursor: default; opacity: .85; transform: none; }

.btn--small { padding: 10px 22px; font-size: .9375rem; }

/* ---------- Ambient background canvas ---------- */

#bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

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

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  background: rgba(0, 0, 0, .65);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(252, 252, 252, .06);
}

.header-logo {
  width: clamp(132px, 30vw, 180px);
  height: auto;
  display: block;
}
/* Intro paints the logo in place (500 ms fade, no flight); hide it only when
   JS actually runs (html.js). No JS / failed script / reduced motion: visible. */
html.js .header-logo { visibility: hidden; opacity: 0; transition: opacity .5s ease; }
html.js .header-logo.header-logo--in { visibility: visible; opacity: 1; }
.header-logo--on { visibility: visible !important; opacity: 1 !important; }
.header-logo--mark { width: 44px; }

/* ---------- Intro overlay (logic ported 1:1 from _work/intro-esikatselu.html) ---------- */

/* The overlay exists only for the JS-driven intro: without html.js it never shows,
   so a failed/blocked main.js can not leave the page behind a black screen. */
.intro { display: none; }
html.js .intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  display: grid;
  place-items: center;
  transition: background-color .4s ease;
}
/* logo, viiva ja piste samaan keskisoluun päällekkäin */
html.js .intro > * { grid-area: 1 / 1; }
html.js .intro.done { display: none; }

.intro-logo {
  width: min(640px, 82vw);
  height: auto;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 10px rgba(48, 203, 243, .35)) drop-shadow(0 0 18px rgba(119, 98, 240, .22));
}

/* Act 1: the V draws itself (~0.7 s) */
.intro .vp-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro .vp-dot { opacity: 0; }
.intro.play .vp-line { animation: vpdraw .6s cubic-bezier(.4, 0, .2, 1) .1s forwards; }
.intro.play .vp-dot-a { animation: vpin .25s ease-out .1s forwards; }
.intro.play .vp-dot-b { animation: vpin .25s ease-out .55s forwards; }

/* Act 2: the word appears (letter delays set by JS, ~0.7 s wave) */
.intro .vp-valo path, .intro .vp-sana path {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .35s ease, transform .35s ease;
}
.intro.act2 .vp-valo path, .intro.act2 .vp-sana path { opacity: 1; transform: none; }

#introLogo { will-change: transform; }

/* Act 3: "kuvaputki sammuu".
   tv-flash: välähdys 120 ms. tv-collapse: logo lysähtää viivaksi 350 ms,
   overlayn tausta läpinäkyväksi (sivu paljastuu alla). tv-point: viiva
   pisteeksi 300 ms. Sen jälkeen JS poistaa overlayn ja spawnaa säteen. */
.intro.tv-flash .intro-logo {
  filter: drop-shadow(0 0 16px rgba(48, 203, 243, .65)) drop-shadow(0 0 30px rgba(119, 98, 240, .45)) brightness(1.6);
  transition: filter .12s ease-out;
}
.intro.tv-collapse { background-color: transparent; }
.intro.tv-collapse .intro-logo {
  transform: scaleX(1.06) scaleY(.02);
  opacity: 0;
  transition: transform .35s ease-in, opacity .35s cubic-bezier(.7, 0, 1, .6);
}

/* Erillinen viivaelementti: litistetty vektori menettäisi kirkkautensa */
.intro-line {
  width: min(640px, 82vw); /* sama kuin logon leveys */
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), #fff, var(--violet));
  box-shadow: 0 0 10px rgba(48, 203, 243, .85), 0 0 26px rgba(119, 98, 240, .6);
  opacity: 0;
}
.intro.tv-collapse .intro-line { opacity: 1; transition: opacity .35s ease-in; }
.intro.tv-point .intro-line { transform: scaleX(0); transition: transform .3s cubic-bezier(.45, 0, .55, 1), opacity .35s ease-in; }

.intro-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, .95), 0 0 18px rgba(48, 203, 243, .85), 0 0 34px rgba(119, 98, 240, .7);
  opacity: 0;
}
.intro.tv-point .intro-dot { opacity: 1; transition: opacity .16s ease-out .12s; }

@keyframes vpdraw { to { stroke-dashoffset: 0; } }
@keyframes vpin { to { opacity: 1; } }

/* ---------- Hero ---------- */

.hero-section {
  min-height: max(600px, 100vh);
  min-height: max(600px, 100svh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 120px 0 32px;
}

html.js .hero {
  opacity: .001; /* ei 0: LCP lasketaan ensimmäisestä maalauksesta; intro-overlay peittää heron joka tapauksessa */
  transform: translateY(14px);
  transition: opacity .7s ease .1s, transform .7s ease .1s;
}
html.js .page-in .hero { opacity: 1; transform: none; }

.hero__title {
  font-size: var(--fs-h1);
  max-width: 21ch;
  margin: 0 auto 22px;
}

.hero__sub {
  color: var(--mute);
  max-width: 58ch;
  margin: 0 auto 40px;
  text-wrap: pretty;
}

.hero__cta { margin: 0; }

.hero__note {
  color: var(--mute);
  font-size: .8125rem;
  margin: 16px 0 0;
}

.proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px;
  margin: 72px 0 0;
  padding: 0;
  font-size: .9375rem;
  color: var(--mute);
}
.proof li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.proof li::before {
  content: '';
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 8px rgba(48, 203, 243, .7);
}

.hero__load {
  color: var(--mute);
  font-size: .8125rem;
  margin: 64px 0 0;
}
/* Ilman JS:ää rivillä on staattinen mediaani. JS:n kanssa luku mitataan vasta load-tapahtuman
   jälkeen, joten koko rivi piilotetaan siihen asti: näkyvä hyppy staattisesta luvusta mitattuun olisi häiritsevä.
   Piiloon menee rivi eikä pelkkä luku, jottei lauseeseen jää aukkoa mittausta odotellessa.
   visibility (ei display) varaa tilan, joten vaihto ei aiheuta layout shiftia. Jos main.js ei
   koskaan käynnisty, vahti poistaa .js-luokan ja staattinen luku tulee näkyviin. */
html.js .hero__load { visibility: hidden; }
html.js .hero__load--mitattu { visibility: visible; }
/* Mitattu luku lämpimällä gradientilla (--hot); tekstin gradientti kuten .grad */
.hero__load .hot {
  background: var(--hot);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 400;
}
/* Yli 1,4 s: luku näkyy, mutta ilman korostusta. Järjestyksellä on väliä, sama
   tarkkuus kuin säännöllä yllä, joten tämän on oltava jäljessä. */
.hero__load--hidas .hot {
  background: none;
  color: var(--mute);
}

/* ---------- Sections ---------- */

.section { padding: calc(var(--section) / 2) 0; }
.section--first { padding-top: var(--section); }
main > .section:last-of-type { padding-bottom: var(--section); }

.section__head { max-width: 720px; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.section__title { font-size: var(--fs-h2); margin: 0 0 16px; }
.section__sub { color: var(--mute); margin: 0; text-wrap: pretty; }

/* ---------- Portfolio ---------- */

.works { display: grid; gap: 28px; }

.work {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 36px);
  transition: border-color .35s ease, box-shadow .35s ease;
}
.work:focus-within {
  border-color: rgba(48, 203, 243, .35);
  box-shadow: 0 0 40px rgba(48, 203, 243, .07);
}
@media (hover: hover) and (pointer: fine) {
  .work:hover {
    border-color: rgba(48, 203, 243, .35);
    box-shadow: 0 0 40px rgba(48, 203, 243, .07);
  }
}

/* Kuvakaappaus 16:10 (assets/img/portfolio, immutable: sisällön muuttuessa nimeä tiedosto uudelleen) */
.work__shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #141417;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
}
.work__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Himmennys: vaalea kuvakaappaus mustalla pohjalla häikäisee, joten kuva on tumman kehyksen sisällä
   (ohut reuna + sisävarjo, ::before) ja himmennetty (brightness .82 + musta kerros .18, ::after).
   Hover ja fokus poistavat himmennyksen 400 ms ease-out. Kosketuslaitteilla (hover: none) himmennys on
   kevyempi (.9 / .1) ja poistuu, kun kortti on näkymän keskellä (.work--lit, IntersectionObserver
   main.js:ssä); ilman JS:ää kosketuslaitteilla ei himmennetä. Reduced motion: heti vaalea tila. */
.work__shot::before, .work__shot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.work__shot::before {                                      /* kehys: pysyy aina */
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), inset 0 0 26px rgba(0, 0, 0, .32);
}
.work__shot::after {                                       /* himmennyskerros */
  z-index: 1;
  background: rgba(0, 0, 0, .18);
  transition: opacity .4s ease-out;
}
.work__shot img { filter: brightness(.82); transition: filter .4s ease-out; }
.work:focus-within .work__shot img { filter: brightness(1); }
.work:focus-within .work__shot::after { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .work:hover .work__shot img { filter: brightness(1); }
  .work:hover .work__shot::after { opacity: 0; }
}
@media (hover: none) {
  .work__shot img { filter: none; }                        /* ilman JS:ää: ei himmennystä */
  .work__shot::after { opacity: 0; }
  html.js .work__shot img { filter: brightness(.9); }
  html.js .work__shot::after { opacity: 1; background: rgba(0, 0, 0, .1); }
  html.js .work--lit .work__shot img { filter: none; }
  html.js .work--lit .work__shot::after { opacity: 0; }
}
/* Pino (leveys ≥ 901 px ja korkeus ≥ 700 px): kortit liimautuvat porrastetusti (top 96 / 128 / 160 px).
   Kun kortti on kiinni yläreunassa, seuraavan yläreuna näkyy sen alla; vieritys nostaa seuraavan sen
   päälle ja edellisestä jää 32 px:n reuna näkyviin. Pelkkää CSS:ää: ei JS:ää eikä scroll-jackingia,
   näppäimistö ja ankkurit toimivat. Kortti on läpinäkymätön (--card). Fokus nostaa peitetyn kortin
   päällimmäiseksi. Ruudukon ::after-lisärivi (100 px + 28 px väli) pitää valmiin portaikon 128 px
   paikallaan; sen jälkeen pino painuu kasaan ja poistuu yhtenä kappaleena. (Säiliön padding ei
   pidennä sticky-aluetta, rajoite on sisältölaatikko.) Kiinteä otsake on n. 74 px, alle pienimmän topin. */
@media (min-width: 901px) and (min-height: 700px) {
  .works::after { content: ''; height: 100px; }
  .work { position: sticky; }
  .works > .work:nth-child(1) { top: 96px; }
  .works > .work:nth-child(2) { top: 128px; }
  .works > .work:nth-child(3) { top: 160px; }
  .work:focus-within { z-index: 2; }
}
@media (forced-colors: active) {
  /* pakotettu paletti tekisi kerroksesta läpinäkymättömän Canvas-laatan: kerrokset pois */
  .work__shot::before, .work__shot::after { display: none; }
  .work__shot img, html.js .work__shot img, .work:hover .work__shot img, .work:focus-within .work__shot img { filter: none; }
}

.work__title {
  font-size: var(--fs-h3);
  font-weight: 300;
  margin: 0 0 4px;
}
.work__title a {
  color: var(--ink);
  text-decoration: none;
}
/* stretched link: the whole card is clickable */
.work__title a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
/* tekstit overlayn päälle: maalattavissa, pitkä painallus toimii tekstinä */
.work__desc, .work .chips, .work .quote { position: relative; }
.work__title a:focus-visible::after { outline: 2px solid var(--cyan); outline-offset: -2px; border-radius: var(--radius); }
.work__title a:focus-visible { outline: none; }

.work__client { color: var(--mute); font-size: .9375rem; margin: 0 0 14px; }
.work__desc { margin: 0 0 18px; text-wrap: pretty; }

/* Kuvaus taitettuna (≤ 900 px): details/summary toimii ilman JS:ää. Nappi ”Lue kuvaus” vaihtuu
   auki-tilassa tekstiksi ”Piilota kuvaus” ja nuoli kääntyy. Työpöydällä (≥ 901 px) kuvaus on aina
   näkyvissä: JS avaa detailsin, ja CSS näyttää sisällön myös ilman JS:ää (::details-content) sekä
   piilottaa napin; selaimissa ilman ::details-content-tukea nappi jää näkyviin, kunnes details on auki.
   .work__more on position: relative, jotta nappi on venytetyn otsikkolinkin (::after) päällä. */
.work__more { position: relative; margin: 0 0 18px; }
.work__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  color: var(--cyan);
  font-size: .9375rem;
  line-height: 1.4;
  padding: 4px 0;
  min-height: 44px;                                      /* kosketusalue */
  border-radius: 6px;
}
.work__more-btn::-webkit-details-marker { display: none; }
.work__more-btn::marker { content: ''; }
.work__more-icon { flex: none; transition: transform .3s ease; }
.work__more[open] .work__more-icon { transform: rotate(180deg); }
.work__more[open] .work__more-open, .work__more:not([open]) .work__more-close { display: none; }
.work__more .work__desc { margin: 2px 0 0; }
@media (min-width: 901px) {
  .work__more { margin: 0 0 18px; }
  .work__more[open] > .work__more-btn { display: none; }
  .work__more .work__desc { margin: 0; }
  @supports selector(::details-content) {
    .work__more > .work__more-btn { display: none; }
    .work__more::details-content { content-visibility: visible; }
  }
}

.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
}
.chips li {
  font-size: .8125rem;
  color: var(--mute);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 13px;
  white-space: nowrap;
}

.quote { position: relative; padding-left: 18px; margin: 0; }
.quote::before {
  content: '';
  position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--violet));
}
.quote__text { margin: 0 0 6px; }
.quote__by { display: block; color: var(--mute); font-size: .875rem; font-style: normal; }

/* ---------- Steps: a path of light ---------- */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps::before {
  content: '';
  position: absolute;
  top: 5px; left: 0; right: 0;
  height: 1px;
  background: var(--grad);
  opacity: .35;
  /* häivytä häntä viimeisen pisteen jälkeen, jotta viiva ei törmää reunaan */
  -webkit-mask-image: linear-gradient(90deg, #000 66%, transparent 98%);
  mask-image: linear-gradient(90deg, #000 66%, transparent 98%);
}

.step { position: relative; padding-top: 34px; }
.step::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 12px rgba(48, 203, 243, .8);
}

.step__num {
  display: block;
  color: var(--mute);
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.step__title { font-size: var(--fs-h3); font-weight: 300; margin: 0 0 12px; }
.step__text { color: var(--mute); margin: 0; text-wrap: pretty; }

/* ---------- Form ---------- */

.luonnos-form { display: grid; gap: 26px; }

/* Askellin: edistymisviiva (valon viiva), vain JS-tilassa */
.form-progress { display: none; }
html.js .form-progress {
  --p: .2;
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
html.js .form-progress::before {
  content: '';
  display: block;
  height: 100%;
  width: calc(var(--p) * 100%);
  background: var(--grad);
  box-shadow: 0 0 12px rgba(48, 203, 243, .5);
  transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

/* Osat: ilman JS:ää kaikki allekkain, JS näyttää yhden kerrallaan */
.fstep { border: 0; margin: 0; padding: 0; min-width: 0; }
html.js .fstep:not(.fstep--active) { display: none; }
.fstep + .fstep { margin-top: 30px; }
html.js .fstep + .fstep { margin-top: 0; }
.fstep__legend { padding: 0; margin: 0 0 22px; }
.fstep__legend:focus { outline: none; }
.fstep__legend:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; border-radius: 4px; }
.fstep__count {
  display: block;
  color: var(--mute);
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.fstep__name { display: block; font-size: var(--fs-h3); font-weight: 300; line-height: 1.2; }
.fstep__body { max-width: 620px; display: grid; gap: 26px; }
.fstep__nav { display: none; }
html.js .fstep__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.fstep__prev { display: none; }
html.js .fstep__prev { display: inline-block; }
.form-actions__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.form-note--lead { margin: 0; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding-block: 15px;
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:not(:disabled):hover { box-shadow: none; border-color: var(--cyan); transform: none; }
}

/* Tarkista ja lähetä (osa 5): tilauskortti + vastaukset ryhmittäin, JS kokoaa */
.fstep__body--review { max-width: 760px; }
.review { display: grid; gap: 30px; }
.review__group { display: grid; gap: 12px; }
.review__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.review__title { margin: 0; font-size: 1rem; font-weight: 400; }
.btn-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .9375rem;
  color: var(--cyan);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 3px; }
.review__plan { display: grid; gap: 12px; padding-top: 38px; }
.review__plan .plan__name { margin: 0; }
.review__plan .plan__fit { margin: 0 0 6px; }
.summary__list { margin: 0; display: grid; gap: 8px; font-size: .9375rem; }
.summary__row { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 12px; }
.summary__row dt { color: var(--mute); }
.summary__row dd { margin: 0; text-wrap: pretty; overflow-wrap: anywhere; white-space: pre-line; }
.summary__empty { color: var(--mute); }
.field--check { max-width: 360px; }

.field { display: grid; gap: 9px; }
.field__label { font-weight: 400; font-size: 1rem; }

.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%;
  padding: 13px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  /* kirkkaampi kuin koristeellinen --line-strong: kentän ainoa rajaus, WCAG 1.4.11 vaatii >= 3:1 */
  border: 1px solid rgba(252, 252, 252, .42);
  border-radius: 12px;
  transition: border-color .25s ease;
}
.field textarea { resize: vertical; min-height: 5.5em; line-height: 1.5; }
.field input:focus, .field textarea:focus { border-color: var(--cyan); }
/* :user-invalid = selaimen oma tila; .is-invalid = askelvalidoinnin merkintä (poistuu, kun kenttää muokataan).
   Elementtivalitsin mukaan, jotta tarkkuus (0,2,1) voittaa yllä olevan :focus-säännön; muuten
   fokusoitu virheellinen kenttä näyttäisi syaanilta ja vain muut kentät punaisilta. */
.field input:user-invalid, .field textarea:user-invalid,
.field input.is-invalid, .field textarea.is-invalid { border-color: var(--err); }
.fieldset.is-invalid legend { color: var(--err); }
.field__hint { color: var(--mute); font-size: .8125rem; margin: 0; }

.fieldset { border: 0; margin: 0; padding: 0; }
.fieldset legend { font-weight: 400; font-size: 1rem; padding: 0; margin-bottom: 9px; }

.choices { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.choice { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.choice input {
  width: 19px; height: 19px;
  margin: 0;
  accent-color: var(--cyan);
  cursor: pointer;
}

.subfield { margin-top: 12px; }
.subfield .field__label { font-weight: 300; color: var(--mute); font-size: .9375rem; }
/* reveal the address field only once "On" is picked (CSS-only, degrades to always visible) */
@supports selector(:has(*)) {
  .subfield {
    display: none;
    opacity: 0;
    transform: translateY(-4px);
    /* allow-discrete + @starting-style: pehmeä ilmestyminen; ilman tukea toimii kuten ennen */
    transition: opacity .3s ease, transform .3s ease, display .3s allow-discrete;
  }
  .fieldset:has(input[value="On"]:checked) .subfield,
  .fieldset:has(input[value="Kyllä"]:checked) .subfield--logo { display: grid; opacity: 1; transform: none; }
  @starting-style {
    .fieldset:has(input[value="On"]:checked) .subfield,
    .fieldset:has(input[value="Kyllä"]:checked) .subfield--logo { opacity: 0; transform: translateY(-4px); }
  }
}

.hp { display: none; }

.form-actions { margin-top: 6px; }
.form-note { color: var(--mute); font-size: .8125rem; margin: 14px 0 0; }
.form-note--error { color: var(--err); font-size: .9375rem; }
.form-note--ok { color: var(--ink); font-size: .9375rem; }
.form-note--req { margin: 0; }

/* ---------- Includes ---------- */

.includes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 56px;
  margin: 0;
  padding: 0;
}
.includes li {
  position: relative;
  padding-left: 26px;
}
.includes li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 8px rgba(48, 203, 243, .6);
}
.includes .lead { font-weight: 400; }
.includes .rest { color: var(--mute); }

/* ---------- Pakettikortti (laskurin tulos) ---------- */

.plan {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
}
/* Laskurin suositus: gradienttireunus + hehku; muut himmenevät (.8: mute-teksti pysyy ≥ 4,5:1) */
.plan--active {
  border-color: transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--grad) border-box;
  box-shadow: 0 0 44px rgba(48, 203, 243, .08);
}
.plan__badge {
  position: absolute;
  top: -15px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--grad);
  color: #000;
  font-weight: 400;
  font-size: .8125rem;
  white-space: nowrap;
}
.plan__badge .badge-star { width: 11px; height: 11px; vertical-align: -1px; margin-right: 4px; }

.plan__name { font-size: var(--fs-h3); font-weight: 300; margin: 0 0 10px; }
.plan__alv { display: block; color: var(--mute); font-size: .875rem; }
.plan__fine { color: var(--mute); font-size: .8125rem; margin: 4px 0 0; text-wrap: pretty; }
.plan__fit { color: var(--mute); font-size: .875rem; margin: 0; text-wrap: pretty; }
.plan__fit-lead { color: var(--ink); font-weight: 400; }

.plan__list, .dot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: .9375rem;
}
.plan__list li, .dot-list li {
  position: relative;
  padding-left: 22px;
  color: var(--mute);
}
.plan__list li::before, .dot-list li::before {
  content: '';
  position: absolute;
  left: 0; top: .5em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 6px rgba(48, 203, 243, .45); /* sama valopistemotiivi kuin muissa listoissa */
}

.plans-foot { color: var(--mute); font-size: .875rem; margin: 22px 0 0; } /* alv-alaviite ylläpidon alla */

/* ---------- Hintalaskuri ---------- */

/* Kaksi palstaa: säätimet vasemmalla, valinnoista koottu tilauskortti oikealla (tahmea) */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 24px;
  align-items: start;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.calc__controls {
  display: grid;
  gap: 26px;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px);
}
/* Pakettimerkki sivuliu'un alla (JS päivittää; ilman JS:ää piilossa kuten liu'un arvo) */
.calc__tier { display: none; margin: 8px 0 0; }
html.js .calc__tier { display: block; }
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--grad);
  color: #000;
  font-size: .8125rem;
  font-weight: 400;
  white-space: nowrap;
}
.tier-badge .badge-star { width: 11px; height: 11px; flex: none; }

.calc__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  margin-bottom: 4px;
}
.calc__label { font-weight: 400; }
/* Liu'un arvo vain JS-tilassa; ilman JS:ää se jäisi vanhentuneeksi */
.calc__value { display: none; font-weight: 200; font-size: 1.5rem; line-height: 1.2; white-space: nowrap; }
html.js .calc__value { display: inline-block; }
.calc__scale { display: flex; justify-content: space-between; color: var(--mute); font-size: .8125rem; margin-top: 2px; }
.calc__hint { color: var(--mute); font-size: .875rem; margin: 10px 0 0; text-wrap: pretty; }

/* Liuku: näkymätön 44 px korkea osuma-alue, 4 px rata, gradienttitäyttö --p (0…1) nupin keskelle asti.
   Nuppi 22 px valkoinen valopiste (kaiku intron pisteestä). */
.calc__range {
  --p: 0;
  --thumb: 22px;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.calc__range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background:
    var(--grad) 0 0 / calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p)) 100% no-repeat,
    var(--line-strong);
}
.calc__range::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background:
    var(--grad) 0 0 / calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p)) 100% no-repeat,
    var(--line-strong);
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb); height: var(--thumb);
  margin-top: calc((4px - var(--thumb)) / 2);
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(48, 203, 243, .75), 0 0 22px rgba(119, 98, 240, .45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.calc__range::-moz-range-thumb {
  width: var(--thumb); height: var(--thumb);
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(48, 203, 243, .75), 0 0 22px rgba(119, 98, 240, .45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.calc__range:active::-webkit-slider-thumb { transform: scale(1.15); }
.calc__range:active::-moz-range-thumb { transform: scale(1.15); }
@media (hover: hover) and (pointer: fine) {
  .calc__range:hover::-webkit-slider-thumb { transform: scale(1.12); }
  .calc__range:hover::-moz-range-thumb { transform: scale(1.12); }
}
/* Fokusrengas nuppiin, ei 44 px korkeaan osuma-alueeseen */
.calc__range:focus-visible { outline: none; }
.calc__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--cyan), 0 0 22px rgba(119, 98, 240, .45); }
.calc__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--cyan), 0 0 22px rgba(119, 98, 240, .45); }

/* ---------- Forced colors (Windowsin suuri kontrasti) ----------
   Järjestelmä pakottaa background-imagen pois ja box-shadow'n pois, joten liu'un rata,
   nuppi ja fokusrengas katosivat kokonaan. HUOM: webkit- ja moz-pseudoelementit on
   kirjoitettava ERI sääntöihin; yhdistetyssä valitsinlistassa selain hylkää koko säännön. */
@media (forced-colors: active) {
  .calc__range { forced-color-adjust: none; }          /* omat järjestelmävärit alla säilyvät */
  .calc__range::-webkit-slider-runnable-track {
    background:
      linear-gradient(Highlight, Highlight) 0 0 / calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p)) 100% no-repeat,
      ButtonFace;
    border: 1px solid ButtonText;
  }
  .calc__range::-moz-range-track {
    background:
      linear-gradient(Highlight, Highlight) 0 0 / calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p)) 100% no-repeat,
      ButtonFace;
    border: 1px solid ButtonText;
  }
  .calc__range::-webkit-slider-thumb { background: ButtonText; border: 2px solid ButtonFace; box-shadow: none; }
  .calc__range::-moz-range-thumb { background: ButtonText; border: 2px solid ButtonFace; box-shadow: none; }
  /* fokus takaisin itse säätimeen: pseudoelementin outline ei ole luotettava */
  .calc__range:focus-visible { outline: 3px solid Highlight; outline-offset: -3px; }
  .calc__range:focus-visible::-webkit-slider-thumb { box-shadow: none; }
  .calc__range:focus-visible::-moz-range-thumb { box-shadow: none; }

  /* Napit: gradienttitausta katoaa, jäljelle jäisi pelkkä teksti ilman muotoa */
  .btn { border: 1px solid ButtonText; }

  /* Logo: fill/stroke presentaatioattribuutteina jää oikeiksi RGB-arvoiksi (vaalealla
     taustalla "piirtämö" oli valkoista valkoisella): koko merkki järjestelmän värillä */
  .header-logo .vp-sana, .header-logo .vp-valo,
  .intro-logo .vp-sana, .intro-logo .vp-valo { fill: CanvasText; }
  .header-logo .vp-line, .intro-logo .vp-line { stroke: CanvasText; }
  .header-logo .vp-dot, .intro-logo .vp-dot { fill: CanvasText; }

  /* Ambientti tausta: canvas piirtää omia RGB-värejään pakotetun paletin päälle */
  #bg { display: none; }
}

/* Lisävalinnat: laatat, koko laatta klikattava (label venytetty ::before-kerroksella) */
.calc__opts {
  display: grid;
  /* Kaksi tasalevyistä laattaa rivissä (Toinen kieli, Erikoistoteutus); leveät laatat (verkkokauppa,
     ylläpito, kalenteri) vievät koko palstan. minmax(0,…): pitkä nimi + nowrap-hinta ei levennä
     palstaa yli säiliön. align-items: start, jottei lyhyt laatta veny naapurin korkuiseksi. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.opt {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 15px 18px 15px 50px;
  transition: border-color .25s ease, background-color .25s ease;
}
.opt--on { border-color: rgba(48, 203, 243, .5); background: rgba(48, 203, 243, .04); }
.opt--wide { grid-column: 1 / -1; }
/* Ylläpidon jaksovalinnat: label::before peittää laatan, joten radiot tarvitsevat oman tason */
.opt__choices { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; }
.opt__radio { display: flex; align-items: center; gap: 8px; font-size: .9375rem; cursor: pointer; }
.opt__radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--cyan); cursor: pointer; }
.opt--off .opt__choices { opacity: .5; }
.opt--off .opt__radio, .opt--off .opt__radio input { cursor: default; }
/* Ylläpitolaatta työpöydällä: jaksot omalle riville, tekstit kahteen palstaan, jottei koko palstan
   levyinen laatta veny korkeaksi ja jää sivuilta tyhjäksi. Kapealla (≤900px) tavallinen pystysuunta. */
@media (min-width: 901px) {
  .opt--upkeep .opt__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: 26px;
  }
  .opt--upkeep .opt__choices { grid-column: 1 / -1; }
}
/* Suositusmerkki: sama muoto kuin Tulossa-merkillä, aksenttivärillä */
.opt__rec {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 9px;
  border: 1px solid rgba(48, 203, 243, .55);
  border-radius: 999px;
  color: var(--cyan);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .04em;
  vertical-align: 2px;
  white-space: nowrap;
}
.opt__check {
  position: absolute;
  left: 18px; top: 19px;
  width: 19px; height: 19px;
  margin: 0;
  accent-color: var(--cyan);
  cursor: pointer;
}
.opt__check:disabled { cursor: default; }
.opt__label {
  display: flex;
  flex-wrap: wrap; /* kapealla hinta putoaa nimen alle */
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  font-weight: 400;
  cursor: pointer;
}
.opt__name { min-width: 0; }
.opt__label::before { content: ''; position: absolute; inset: 0; border-radius: 14px; }
.opt__tag { color: var(--mute); font-size: .875rem; white-space: nowrap; }
.opt__hint { color: var(--mute); font-size: .875rem; margin: 6px 0 0; text-wrap: pretty; }
.opt__hint--own { color: var(--ink); }
/* Tulossa-laatta: päävalinta lukittu, sisäinen "Kiinnostaa" on oikea, klikattava valinta (venytetyn labelin päällä) */
.opt--soon { border-style: dashed; }
.opt--soon .opt__label { cursor: default; }
.opt__soon {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--mute);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .04em;
  vertical-align: 2px;
  white-space: nowrap;
}
.opt__sub {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 0;
  font-size: .9375rem;
  cursor: pointer;
}
.opt__sub input { width: 19px; height: 19px; margin: 0; accent-color: var(--cyan); cursor: pointer; }

/* Tuoteliuku avautuu verkkokaupan alle: pehmeä ilmestyminen, ilman selaintukea pelkkä näyttö/piilotus */
.calc__products { border-top: 1px solid var(--line); padding-top: 22px; }
/* CSS avaa tuoteliu'un (toimii myös ilman JS:ää); ilman :has-tukea liuku on aina näkyvissä */
@supports selector(:has(*)) {
  .calc__products {
    display: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .3s ease, transform .3s ease, display .3s allow-discrete;
  }
  .calc:has(#calcMaksut:checked) .calc__products { display: block; opacity: 1; transform: none; }
  @starting-style {
    .calc:has(#calcMaksut:checked) .calc__products { opacity: 0; transform: translateY(-4px); }
  }
}

/* Tilauskortti: paketin nimi, sopii esimerkiksi, Sisältyy, arvio, toimitusaika (pakettikortin tyylit) */
.calc__result { display: grid; gap: 12px; padding-top: 38px; }
.calc__result .plan__name { margin: 0; }
.calc__result .plan__fit { margin: 0 0 6px; }
@media (min-width: 901px) {
  .calc__result { position: sticky; top: 96px; }
}
.calc__result-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 40px;
}
.calc__result-price { margin: 0; color: var(--mute); font-size: .9375rem; }
.calc__result-price .num {
  display: block;
  font-size: 2.125rem;
  font-weight: 200;
  line-height: 1.2;
  color: var(--ink);
}
.calc--quote .calc__result-price .num { font-size: 1.75rem; }
.calc__result-time { margin: 0; color: var(--mute); font-size: .9375rem; }
/* arvion ulkopuolinen lisäerä (ylläpito kuukausimaksuna) */
.calc__result-extra { margin: 0; font-size: .9375rem; }
.calc__result-sub { margin: 0; font-weight: 400; }
.calc__includes { margin-bottom: 8px; }

.upkeep__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.upkeep__card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
}
.upkeep__name { font-size: 1.125rem; font-weight: 400; margin: 0 0 4px; }
.upkeep__price { color: var(--mute); font-size: .9375rem; margin: 0 0 14px; }
.upkeep__text { color: var(--mute); font-size: .9375rem; margin: 0 0 14px; text-wrap: pretty; }
.upkeep__card .plan__list { margin-top: 0; }
.upkeep__deal { margin: 14px 0 0; font-size: .9375rem; text-wrap: pretty; }

/* ---------- FAQ ---------- */

.faq { max-width: 800px; }
.faq details { border-bottom: 1px solid var(--line); }
/* FAQ-vastauksen nappi (kalenteri-ilmoitus): oma rivi vastauksen alla */
.faq__cta { margin: 0 0 22px; }
.faq details:first-of-type { border-top: 1px solid var(--line); }

.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 2px;
  font-weight: 400;
  cursor: pointer;
  transition: color .25s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 14px; height: 14px;
  color: var(--mute);
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform .3s ease, color .25s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { color: var(--cyan); }
  .faq summary:hover::after { color: var(--cyan); }
}

/* Avautumisen pehmennys, progressiivinen: ilman selaintukea avautuu kuten ennen */
.faq { interpolate-size: allow-keywords; }
.faq details::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size .3s ease, content-visibility .3s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }

.faq__a { color: var(--mute); margin: 0; padding: 0 40px 24px 2px; max-width: 70ch; text-wrap: pretty; }

/* ---------- Final CTA ---------- */

.cta-section {
  text-align: center;
  padding: var(--section) 0;
  position: relative;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 60%, rgba(119, 98, 240, .12), transparent 70%);
  pointer-events: none;
}
.cta-section .wrap { position: relative; }
.cta__title { font-size: var(--fs-h2); margin: 0 auto 18px; max-width: 20ch; }
.cta__text { color: var(--mute); margin: 0 auto 36px; max-width: 52ch; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 48px;
  text-align: center;
  font-size: .875rem;
  color: var(--mute);
}
.site-footer .wrap { display: grid; gap: 9px; justify-items: center; }
.site-footer a { color: var(--ink); text-underline-offset: 3px; }
.footer-line { margin: 0; }
.footer-tagline {
  margin-top: 14px;
  font-size: .9375rem;
  letter-spacing: .06em;
}

/* ---------- 404 ---------- */

.notfound {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 120px 22px 64px;
}
.notfound__code { font-size: clamp(4rem, 12vw, 7rem); font-weight: 200; line-height: 1; margin: 0; }
.notfound__text { color: var(--mute); margin: 18px 0 34px; }

/* ---------- Kiitos (no-JS-lomakkeen paluusivu) ---------- */

.thanks {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 120px 22px 64px;
}
.thanks__title { font-size: var(--fs-h2); margin: 0 0 14px; }
.thanks__text { color: var(--mute); margin: 0 0 34px; text-wrap: pretty; }
.thanks__text a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- Legal (tietosuoja) ---------- */

.legal { max-width: 760px; }
.legal-title { font-size: var(--fs-h2); margin: 0 0 10px; }
.legal-updated { color: var(--mute); font-size: .875rem; margin: 0 0 clamp(2.5rem, 6vw, 4rem); }
.legal-block { margin: 0 0 clamp(2rem, 5vw, 3rem); }
.legal-h { font-size: var(--fs-h3); font-weight: 300; margin: 0 0 12px; }
/* --ink, ei --mute: pitkän juridisen tekstin ensisijainen sisältö täydellä värillä */
.legal-p { color: var(--ink); margin: 0 0 12px; max-width: 70ch; text-wrap: pretty; }
.legal-p:last-child { margin-bottom: 0; }
.legal-p a { color: var(--ink); text-underline-offset: 3px; }
.legal-block .dot-list { margin: 0 0 12px; }
.legal-note {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 28px;
}

/* ---------- Scroll reveal (JS-scoped: hidden states exist only when html.js) ---------- */

html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}
html.js .reveal.in { opacity: 1; transform: none; }

/* Brändimotiivi: valon viiva piirtyy esiin osion paljastuessa (kaiku introsta) */
html.js .reveal .stroke { transform: scaleX(0); transform-origin: left; }
html.js .reveal .stroke::before,
html.js .reveal .stroke::after { opacity: 0; transition: opacity .3s ease .5s; }
html.js .reveal.in .stroke { transform: scaleX(1); transition: transform .5s cubic-bezier(.4, 0, .2, 1) .15s; }
html.js .reveal.in .stroke::before,
html.js .reveal.in .stroke::after { opacity: 1; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .work { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; }
  .calc__opts { grid-template-columns: minmax(0, 1fr); }
  .includes { grid-template-columns: 1fr; gap: 22px; }
  .upkeep__grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .steps::before { top: 5px; bottom: 5px; left: 5px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, var(--cyan), var(--violet)); -webkit-mask-image: linear-gradient(180deg, #000 66%, transparent 98%); mask-image: linear-gradient(180deg, #000 66%, transparent 98%); }
  .step { padding-top: 0; padding-left: 34px; }
}

@media (max-width: 600px) {
  .site-header { padding: 12px 16px; }
  /* 96px min: mahtuu 320 px:iin CTA-napin kanssa ilman että flex litistää logoa alle minimin */
  .header-logo { width: clamp(96px, 28vw, 180px); }
  .btn--small { padding: 9px 16px; font-size: .875rem; white-space: nowrap; }
  .wrap { width: calc(100% - 36px); }
  .proof { flex-direction: column; align-items: center; gap: 12px; margin-top: 56px; }
  /* piste rivin sisään: flex-pisteenä se irtoaisi kaksiriviseksi kiertyvästä keskitetystä tekstistä */
  .proof li { display: block; }
  .proof li::before { display: inline-block; margin-right: 10px; vertical-align: middle; }
  .faq__a { padding-right: 8px; }
  .plan { padding: 28px 22px; }
  .summary__row { grid-template-columns: 1fr; gap: 2px; } /* kapealla otsikko ja arvo allekkain */
}

@media (max-width: 380px) {
  .btn--small { padding: 8px 12px; font-size: .8125rem; }
}

/* ---------- Reduced motion: everything still, everything visible ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  #bg { display: none; }
  .intro { display: none !important; }
  .header-logo { visibility: visible !important; opacity: 1 !important; }
  html.js .hero { opacity: 1; transform: none; }
  html.js .reveal { opacity: 1; transform: none; }
  html.js .reveal .stroke { transform: none; }
  html.js .reveal .stroke::before,
  html.js .reveal .stroke::after { opacity: 1; }
  /* vain liike pois; staattinen hover-hehku on palautetta, ei animaatiota */
  .btn:not(:disabled):hover { transform: none; }
  /* portfolion himmennys: heti vaalea tila, ei häivytystä */
  .work__shot img, html.js .work__shot img { filter: none; }
  .work__shot::after, html.js .work__shot::after { opacity: 0; }
}

/* ---------- Print: vaalea paperipaletti, vain sisältö paperille ----------
   Selaimet eivät oletuksena tulosta taustoja: ilman näitä sääntöjä
   #FCFCFC-teksti ja color:transparent-gradientit katoavat valkoiselta paperilta. */

@media print {
  .work__more > .work__more-btn { display: none; }
  .work__more::details-content { content-visibility: visible; }
  .work { position: static; }              /* pino pois tulosteesta */
  .works::after { display: none; }
  :root {
    --bg: #fff;
    --ink: #000;
    --mute: #444;
    --card: #fff;
    --line: #ccc;
    --line-strong: #999;
    --section: 2.5rem;
  }
  body { background: #fff; color: #000; }
  a { color: #000; }
  #bg, .site-header, .skip-link, .intro, .calc { display: none !important; }
  /* Lomake on vuorovaikutteinen: paperille jää vain otsikko ja tarkistusosan kooste (kortti + vastaukset).
     Ilman JS:ää kooste on hidden, jolloin koko lomakkeesta jää vain otsikko. */
  .form-progress, .form-note--req, .fstep__legend, .fstep__nav, .form-actions,
  .fstep .field, .fstep .fieldset, .fstep .form-note { display: none !important; }
  html.js .fstep { display: block !important; }
  .review__plan { border-color: #999; box-shadow: none; }
  .grad, .hero__load .hot { background: none; color: #000; }
  .hero__load { visibility: visible; }   /* paperille myös mittaamaton staattinen luku */
  html.js .header-logo { visibility: visible; opacity: 1; }
  html.js .hero, html.js .reveal { opacity: 1 !important; transform: none !important; }
  html.js .reveal .stroke { transform: none !important; }
  html.js .reveal .stroke::before,
  html.js .reveal .stroke::after { opacity: 1 !important; }
  .hero-section, .notfound, .thanks { min-height: auto; }
}