/*
 * Suunnittelujärjestelmä.
 *
 * ── Miksi VAALEA on oletus ──────────────────────────────────────────────
 *
 * Aiempi tyylitiedosto perusteli tummaa teemaa näin: *"työpöytää luetaan
 * kammion vieressä seisten, usein käsineet kädessä ja heijastavassa
 * valossa."* Ensimmäinen puolisko on oikein, jälkimmäinen johtopäätös
 * väärä — ja se kääntää fysiikan päinvastoin.
 *
 * Heijastus on **additiivinen**: ympäristön valo lisää luminanssia ruudun
 * omaan. Tummalla taustalla heijastuva kattovalo tai ikkuna on kirkkaampi
 * kuin tausta itse, jolloin heijastus voittaa sisällön ja efektiivinen
 * kontrasti romahtaa. Vaalealla taustalla sama heijastus katoaa taustan
 * sisään. Siksi mittarit, kojelaudat ja tarkastuslomakkeet ovat vaaleita.
 *
 * Tumma teema on silti mukana ja huolella tehty: kammiohuone voi olla
 * hämärä, ja yövuoro on todellinen. Käyttäjä valitsee, järjestelmän
 * asetusta kunnioitetaan, eikä kumpikaan ole jälkiajatus.
 *
 * ── Miksi teräksensininen eikä brändiväri ───────────────────────────────
 *
 * Korostusväri on syvä teräksensininen: mittaritaulun ja painelaitteen
 * maailmaa. Se EI ole sama kuin merkitysvärit (punainen/keltainen/vihreä),
 * ja se on tarkoituksellista — jos korostus olisi vihreä, "kunnossa" ja
 * "painike" näyttäisivät samalta, ja tässä tuotteessa se ero on koko juoni.
 *
 * ── Neutraalit ──────────────────────────────────────────────────────────
 *
 * Pohja on hitusen lämmin (päällystämätön paperi), muste viileän tumma
 * (painomuste). Se on sama jännite kuin oikeassa tarkastustodistuksessa, ja
 * se erottaa pinnan pohjasta ilman varjoja.
 */

:root {
  /* ── neutraalit ──────────────────────────────────────────────────── */
  --ground:        #f5f4f1;
  --surface:       #ffffff;
  --surface-sunk:  #ecebe7;
  --line:          #ddd9d2;
  --line-strong:   #c4bfb6;
  --ink:           #15191e;
  --ink-soft:      #3d454e;
  --muted:         #6b7480;

  /* ── korostus ────────────────────────────────────────────────────── */
  --accent:        #1d4e6b;
  --accent-ink:    #ffffff;
  --accent-soft:   #e4eef4;
  --accent-line:   #a8c6d8;

  /* ── merkitysvärit ───────────────────────────────────────────────── */
  --danger:        #a92318;
  --danger-soft:   #fbe9e7;
  --danger-line:   #eab5ae;
  --caution:       #85570a;
  --caution-soft:  #fdf2dc;
  --caution-line:  #e5c98a;
  --ok:            #1c6340;
  --ok-soft:       #e3f2e9;
  --ok-line:       #a6cfb8;

  --focus:         #1d4e6b;
  --shadow:        0 1px 2px rgb(21 25 30 / .06), 0 4px 12px rgb(21 25 30 / .04);
  --shadow-lift:   0 2px 4px rgb(21 25 30 / .08), 0 12px 28px rgb(21 25 30 / .10);

  /* ── typografia ──────────────────────────────────────────────────── */
  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Vaatimaton asteikko: tämä on tiedon esitys, ei julistetypografiaa. */
  --t-xs:   0.75rem;   /* 12 — merkinnät, yksiköt */
  --t-sm:   0.8125rem; /* 13 — apuselitteet, taulukot */
  --t-base: 0.9375rem; /* 15 — leipäteksti */
  --t-md:   1.0625rem; /* 17 — korttien otsikot */
  --t-lg:   1.375rem;  /* 22 — sivun otsikko */
  --t-xl:   2rem;      /* 32 — luvut yhteenvedossa */

  /* ── mitat ───────────────────────────────────────────────────────── */
  --r-sm: 4px;
  --r:    6px;
  --r-lg: 10px;
  --nav-w: 15rem;
  --content-max: 74rem;

  color-scheme: light;
}

/*
 * Tumma teema kolmessa tilassa.
 *
 * Selain on kolmessa tilassa, ei kahdessa: nimenomainen valinta leimaa
 * `data-theme`-attribuutin juureen, ja oletus "järjestelmä" ei leimaa
 * mitään. Media-kysely on siksi vartioitu `:not([data-theme="light"])`
 * -ehdolla, jotta nimenomainen vaalea voittaa tumman käyttöjärjestelmän.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:        #0f141a;
    --surface:       #161d25;
    --surface-sunk:  #0b1015;
    --line:          #26303a;
    --line-strong:   #3a4854;
    --ink:           #e8ebee;
    --ink-soft:      #bcc5cf;
    --muted:         #8d99a6;

    --accent:        #7fb4d6;
    --accent-ink:    #0f141a;
    --accent-soft:   #16303f;
    --accent-line:   #2d5a75;

    --danger:        #f08079;
    --danger-soft:   #33191a;
    --danger-line:   #6d2f2c;
    --caution:       #e0a84a;
    --caution-soft:  #2e2312;
    --caution-line:  #6a4f1f;
    --ok:            #63c391;
    --ok-soft:       #14291f;
    --ok-line:       #2c5a41;

    --focus:         #7fb4d6;
    --shadow:        0 1px 2px rgb(0 0 0 / .3), 0 4px 12px rgb(0 0 0 / .25);
    --shadow-lift:   0 2px 4px rgb(0 0 0 / .35), 0 12px 28px rgb(0 0 0 / .4);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground:        #0f141a;
  --surface:       #161d25;
  --surface-sunk:  #0b1015;
  --line:          #26303a;
  --line-strong:   #3a4854;
  --ink:           #e8ebee;
  --ink-soft:      #bcc5cf;
  --muted:         #8d99a6;

  --accent:        #7fb4d6;
  --accent-ink:    #0f141a;
  --accent-soft:   #16303f;
  --accent-line:   #2d5a75;

  --danger:        #f08079;
  --danger-soft:   #33191a;
  --danger-line:   #6d2f2c;
  --caution:       #e0a84a;
  --caution-soft:  #2e2312;
  --caution-line:  #6a4f1f;
  --ok:            #63c391;
  --ok-soft:       #14291f;
  --ok-line:       #2c5a41;

  --focus:         #7fb4d6;
  --shadow:        0 1px 2px rgb(0 0 0 / .3), 0 4px 12px rgb(0 0 0 / .25);
  --shadow-lift:   0 2px 4px rgb(0 0 0 / .35), 0 12px 28px rgb(0 0 0 / .4);

  color-scheme: dark;
}


/*
 * Käyttöliittymän kirjasimet — ITSE ISÄNNÖITYNÄ.
 *
 * ── Miksi ei Google Fontsia CDN:stä ─────────────────────────────────────
 *
 * Kirjasimen lataaminen `fonts.gstatic.com`-osoitteesta lähettää käyttäjän
 * IP-osoitteen Googlelle joka sivulatauksella. Münchenin aluetuomioistuin
 * (LG München I, 20.1.2022, 3 O 17493/20) katsoi sen GDPR-rikkomukseksi
 * ilman suostumusta, ja päätös on synnyttänyt Saksassa laajan
 * vaatimuskirjeaallon. Tämä tuote myydään DE-markkinalle ja myy itsensä
 * tietosuojan hallinnalla; ulkoinen fonttikutsu olisi ristiriita, jonka
 * ensimmäinen DPA-neuvottelu löytäisi.
 *
 * Tiedostot ovat repossa (`assets/fonts/ui`), lisenssi OFL 1.1.
 *
 * ── Miksi IBM Plex ──────────────────────────────────────────────────────
 *
 * Sans ja Mono on suunniteltu yhdessä, joten pari on taattu. Suku on
 * teollisesta ja teknisestä perinteestä — sama maailma kuin painelaitteet ja
 * tarkastuspöytäkirjat — eikä se ole Inter tai Space Grotesk, jotka lukevat
 * geneerisenä ohjelmistoprojektina.
 *
 * Mono ei ole koriste: sarjanumerot, päivämäärät, paineet ja tiivisteet
 * luetaan merkki merkiltä ja verrataan kammion kylkeen tai paperiin.
 * Tasalevyinen numero pitää sarakkeet linjassa ja tekee 0/O- ja 1/l-erosta
 * näkyvän.
 *
 * ── Miksi vain latin ja latin-ext ───────────────────────────────────────
 *
 * FI (ä ö), SV (å), DE (ü ß), ES (ñ), EN. Kyrillinen, kreikka ja vietnam
 * ovat latautumatta jäävää painoa; ne lisätään kun markkina vaatii.
 * `unicode-range` tarkoittaa, että suomenkielinen käyttäjä lataa vain
 * `latin`-osajoukon — latin-ext haetaan vasta jos sivulla on sen merkki.
 */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/*
 * Julkisen sivuston tyylikerros.
 *
 * ── Suhde sovellukseen ──────────────────────────────────────────────────
 *
 * Paletti, kirjasimet ja merkitysvärit tulevat sellaisenaan
 * `apps/web/src/tokens.css`-tiedostosta. Se ei ole laiskuutta vaan väite:
 * kävijä klikkaa "Kirjaudu" eikä sävy vaihdu, koska kyseessä on sama
 * tuote. Markkinointisivu, joka näyttää eri ohjelmalta kuin se, mitä ostaa,
 * on ensimmäinen pettymys ennen ensimmäistä kirjautumista.
 *
 * ── Mitä tämä kerros lisää ──────────────────────────────────────────────
 *
 * Vain sen, mitä instrumentti ei tarvitse: isomman otsikkoasteikon ja
 * kaistoitetun pystyrytmin. Sovelluksen asteikko pysähtyy 2 rem:iin, koska
 * siellä suurin luku on yhteenvedon numero. Sivulla suurin asia on väite,
 * ja väitteen on kannettava koko ruutu.
 *
 * ── Kaksi sääntöä, jotka peritään sovelluksesta ─────────────────────────
 *
 * 1. Merkitys ei ole koskaan pelkkä väri: vakavuus on myös sanana.
 * 2. Numerot, tunnisteet ja tiivisteet ovat tasalevyisiä.
 */

/* ── Sivukohtainen asteikko ─────────────────────────────────────────── */
:root {
  --d1: clamp(2.15rem, 1.2rem + 3.6vw, 3.35rem);
  --d2: clamp(1.5rem, 1.1rem + 1.5vw, 2.05rem);
  --d3: 1.0625rem;
  --gap: clamp(1rem, 2.5vw, 1.75rem);
  --band-y: clamp(3.5rem, 7vw, 6rem);
}

/*
 * Peruskerros.
 *
 * Sivusto EI lataa sovelluksen `styles.css`-tiedostoa: siellä on
 * sovelluskehys, sivupalkki ja taulukot, joita täällä ei ole, ja
 * markkinointisivun pystyrytmi on eri. Siksi perusasetukset toistuvat
 * tässä — ja vain ne, joita ilman sivu renderöityisi selaimen
 * oletusserifillä. Paletti ja kirjasintiedostot tulevat yhä
 * sovelluksesta, eli se, mikä voi eriytyä näkyvästi, ei ole kopio.
 */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }

/* Tunnisteet ja tiivisteet luetaan merkki merkiltä. Sama sääntö kuin
   sovelluksessa, ja samasta syystä: 0 vs O, 1 vs l. */
.mono, .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'zero' 1;
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/*
 * Ohut korostusviiva sivun ylälaidassa.
 *
 * Asiakirjan sidontareuna, ei bannerin gradientti. Se on ainoa koriste
 * tällä sivulla, ja se on siellä siksi, että sivu alkaa jostakin myös
 * silloin kun kävijä saapuu keskelle ankkurilinkillä.
 */
body::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--accent);
}

a { color: var(--accent); text-underline-offset: 2px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--ink);
  padding: .6rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r);
}
.skip:focus { left: 1rem; top: 1rem; z-index: 20; }

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

section { padding-block: var(--band-y); }

/*
 * Kaistat vuorottelevat pohjan ja pinnan välillä, ja ne erottaa VIIVA eikä
 * varjo. Varjo tarkoittaa kelluvaa korttia; tässä kyse on saman arkin
 * seuraavasta osastosta.
 */
.band {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

h1 { font-size: var(--d1); letter-spacing: -.02em; font-weight: 600; }
h2 { font-size: var(--d2); letter-spacing: -.01em; }
h3 { font-size: var(--d3); }

.eyebrow {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .75rem;
}

.lead  { font-size: 1.125rem; color: var(--ink-soft); max-width: 40rem; margin-top: 1rem; }
.sub   { color: var(--muted); max-width: 46rem; margin-top: .75rem; }
.fine  { font-size: var(--t-sm); color: var(--muted); }
.caption {
  font-size: var(--t-sm); color: var(--muted);
  max-width: 40rem; margin-top: 1rem;
}

h2 + .sub, h1 + .sub { margin-top: .75rem; }

/* ── Painikkeet ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .55rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 500; text-decoration: none;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: color-mix(in oklab, var(--accent) 84%, var(--ink)); }
.btn.ghost {
  background: transparent; color: var(--accent);
  border-color: var(--line-strong);
}
.btn.ghost:hover { border-color: var(--accent); background: var(--accent-soft); }
.btn.lg { padding: .75rem 1.5rem; font-size: var(--t-md); }

.cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.cta + .fine { margin-top: 1rem; }

/* ── Ylapalkki ──────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in oklab, var(--ground) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top-in {
  max-width: var(--content-max); margin-inline: auto;
  padding: .7rem clamp(1rem, 4vw, 2rem);
  display: flex; align-items: center; gap: 1.5rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; color: var(--ink); text-decoration: none;
  letter-spacing: -.01em;
}
.top-nav { display: flex; gap: 1.25rem; margin-inline-start: auto; }
.top-nav a {
  color: var(--ink-soft); text-decoration: none; font-size: var(--t-sm);
}
.top-nav a:hover { color: var(--accent); }
.top-act { display: flex; gap: .6rem; }
.top-act .btn { padding: .45rem .95rem; font-size: var(--t-sm); }

@media (max-width: 60rem) {
  .top-nav { display: none; }
  .top-act { margin-inline-start: auto; }
}
@media (max-width: 30rem) {
  .top-act .btn.ghost { display: none; }
}

/* ── Avaus ──────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2rem, 4vw, 3rem); }
.hero-in { max-width: 52rem; }

/* ── Työpöytänäyte ──────────────────────────────────────────────────── */
.desk {
  margin-top: 2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--ground);
  padding: var(--gap);
  display: grid; gap: .75rem;
  box-shadow: var(--shadow-lift);
}
.band .desk { background: var(--ground); }

.desk-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.sum-c {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  border-radius: var(--r);
  padding: .75rem .9rem;
  display: grid; gap: .1rem;
}
.sum-c b {
  font-size: var(--t-xl); font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.sum-c span { font-size: var(--t-sm); color: var(--muted); }
.sum-c.red   { border-top-color: var(--danger); }
.sum-c.red b { color: var(--danger); }
.sum-c.amber   { border-top-color: var(--caution); }
.sum-c.amber b { color: var(--caution); }
.sum-c.green   { border-top-color: var(--ok); }
.sum-c.green b { color: var(--ok); }

/*
 * Rivin vakavuus on VASEMMASSA REUNASSA eikä taustavärinä.
 *
 * Taustaväri lukee koko rivin läpi ja vie tekstin kontrastin mukanaan;
 * reunapalkki kertoo saman ja jättää sisällön luettavaksi. Sama ratkaisu
 * kuin sovelluksen työpöydällä, ja siksi näyte on tunnistettavasti tuote.
 */
.desk-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--line-strong);
  border-radius: var(--r);
  padding: .85rem 1rem;
}
.desk-row.red   { border-inline-start-color: var(--danger); }
.desk-row.amber { border-inline-start-color: var(--caution); }
.desk-row header {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: .6rem;
}
.desk-row .sn { font-weight: 500; font-size: var(--t-md); }
.desk-row ul { display: grid; gap: .4rem; }
.desk-row li {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem;
  align-items: baseline;
  font-size: var(--t-sm); color: var(--ink-soft);
}
.sev {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em;
  text-align: end; text-transform: uppercase;
}
.sev.red   { color: var(--danger); }
.sev.amber { color: var(--caution); }
.sev.grey  { color: var(--muted); }

.chip {
  margin-inline-start: auto;
  font-size: var(--t-xs); font-weight: 500;
  padding: .15rem .5rem; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--muted);
  background: var(--surface-sunk);
  white-space: nowrap;
}
.chip.red   { color: var(--danger);  background: var(--danger-soft);  border-color: var(--danger-line); }
.chip.amber { color: var(--caution); background: var(--caution-soft); border-color: var(--caution-line); }
.chip.green { color: var(--ok);      background: var(--ok-soft);      border-color: var(--ok-line); }

/* Taulukon tilamerkinta ei ole rivin lopussa, joten automaattimarginaali
   ei saa työntää sitä. */
.maat .chip { margin-inline-start: 0; }

/* ── Ruudukot ───────────────────────────────────────────────────────── */
.grid4 {
  margin-top: 2rem;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.25rem;
}
.band .tile { background: var(--ground); }
.tile h3 { margin-bottom: .5rem; }
.tile p  { font-size: var(--t-sm); color: var(--ink-soft); }
/*
 * Lainattu lomakkeen sanamuoto on lainaus, ei tunniste.
 *
 * Ensimmäinen versio latoi ne monolla, ja "Pieni vuoto luukussa" näytti
 * muuttujanimeltä. Mono on varattu sille, mitä verrataan merkki merkiltä:
 * sarjanumerot, tiivisteet, päivämäärät.
 */
.tile em { color: var(--ink); font-style: normal; }
.tile em::before { content: '\201D'; }
.tile em::after  { content: '\201D'; }

/* ── Vaiheet ────────────────────────────────────────────────────────── */
.steps {
  margin-top: 2rem;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  counter-reset: none;
}
.steps li {
  border-top: 2px solid var(--accent-line);
  padding-top: 1rem;
}
.step-n {
  display: block;
  font-family: var(--mono); font-size: var(--t-sm); font-weight: 500;
  color: var(--accent); letter-spacing: .05em;
  margin-bottom: .35rem;
}
.steps h3 { margin-bottom: .5rem; }
.steps p  { font-size: var(--t-sm); color: var(--ink-soft); }

/* ── Kahden palstan osiot ───────────────────────────────────────────── */
.split {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  align-items: start;
}
.split p { max-width: 34rem; color: var(--ink-soft); }
.split h2 + p { margin-top: 1rem; }
.split p + p  { margin-top: .85rem; }

/* ── Ketjunäyte ─────────────────────────────────────────────────────── */
.chain { display: grid; gap: .5rem; }
.link, .anchor {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .7rem .85rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem .75rem;
  align-items: baseline;
}
.band .link, .band .anchor { background: var(--ground); }
.link .seq { color: var(--muted); font-size: var(--t-sm); }
.link .act, .anchor .act { font-size: var(--t-sm); font-weight: 500; }
.link .hash, .anchor .hash {
  grid-column: 2; font-size: var(--t-xs); color: var(--muted);
}
.link .hash.b, .anchor .hash.b { color: var(--accent); }

/*
 * Lenkkien valissa nakyva side.
 *
 * Ilman sitä kolme laatikkoa on lista; sen kanssa ne ovat ketju. Kuva
 * kertoo saman kuin viereinen kappale, ja juuri se on kuvan tehtävä.
 */
.link + .link::before, .link + .anchor::before {
  content: '';
  grid-column: 1 / -1;
  width: 1px; height: .5rem;
  margin: -.95rem 0 .25rem 1.4rem;
  background: var(--line-strong);
}
.anchor {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  grid-template-columns: 1fr auto;
}
.band .anchor { background: var(--accent-soft); }
.anchor .hash { grid-column: auto; }

/* ── Taulukko ───────────────────────────────────────────────────────── */
.tablewrap { margin-top: 1.75rem; overflow-x: auto; }
table.maat { border-collapse: collapse; width: 100%; min-width: 34rem; }
table.maat th, table.maat td {
  text-align: start; padding: .7rem .8rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}
table.maat th {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 600;
  border-bottom-color: var(--line-strong);
}
table.maat td .mono { color: var(--muted); margin-inline-end: .4rem; }

/* ── Hinnat ─────────────────────────────────────────────────────────── */
.plans {
  margin-top: 2rem;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: stretch;
}
.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.band .plan { background: var(--ground); }
.plan.pick { border-color: var(--accent); box-shadow: var(--shadow); }
/*
 * Merkintä on otsikkorivillä eikä sen yläpuolella.
 *
 * Omalla rivillään se työnsi Pron hinnan alemmas kuin muiden, ja neljä
 * hintaa eri korkeudella tekee vertailusta työtä. Vertailu on koko
 * osaston tarkoitus.
 */
.plan h3 { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.plan .tag {
  font-size: var(--t-xs); font-weight: 500; letter-spacing: .04em;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-line); border-radius: 999px;
  padding: .05rem .5rem;
}
.plan .price { margin-top: .35rem; min-height: 2.6rem; display: flex; align-items: flex-end; }
.plan .price.word b { font-size: var(--t-md); letter-spacing: 0; }
.plan .price b {
  font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.plan .per { font-size: var(--t-sm); color: var(--muted); }
.plan ul {
  display: grid; gap: .4rem;
  margin-top: .85rem; padding-top: .85rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--ink-soft);
}
.plan li { padding-inline-start: 1.1rem; position: relative; }
.plan li::before {
  content: '\00B7';
  position: absolute; inset-inline-start: .3rem;
  color: var(--accent); font-weight: 700;
}
.plan .btn { margin-top: auto; align-self: start; }
.plan.soon { opacity: .82; }
.plan.soon .price b { color: var(--muted); }
.soon-note {
  margin-top: auto; padding-top: .85rem;
  font-size: var(--t-xs); color: var(--muted);
}

/* ── Rajaus- ja tietosuojakortit ────────────────────────────────────── */
.note-card { max-width: 36rem; }
.note-card h2 { margin-bottom: .85rem; }

.check { display: grid; gap: .45rem; margin: 1.25rem 0; font-size: var(--t-sm); }
.check li {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: .5rem;
  align-items: baseline;
  color: var(--ink-soft);
}
.check li::before { font-weight: 700; font-size: var(--t-md); line-height: 1; }
.check li.yes::before { content: '✓'; color: var(--ok); }
.check li.no::before  { content: '✕'; color: var(--danger); }

.facts { display: grid; gap: .9rem; margin-top: 1.25rem; font-size: var(--t-sm); }
.facts li {
  border-inline-start: 2px solid var(--ok-line);
  padding-inline-start: .85rem;
  color: var(--ink-soft);
}
.facts li b { display: block; color: var(--ink); font-weight: 600; }
/* Se, mitä EI ole, ei saa reunustaa "todennettu"-värillä. */
.facts li.plain { border-inline-start-color: var(--line-strong); }

/* ── Loppu ja alatunniste ───────────────────────────────────────────── */
.end { text-align: center; }
.end .sub { margin-inline: auto; }
.end .cta { justify-content: center; }

.foot {
  background: var(--surface-sunk);
  border-top: 1px solid var(--line);
  padding-block: 2.5rem;
}
.foot-in {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  align-items: start; justify-content: space-between;
}
.foot-in .fine { margin-top: .5rem; max-width: 22rem; }
.foot nav { display: grid; gap: .35rem; }
.foot nav a { color: var(--ink-soft); text-decoration: none; font-size: var(--t-sm); }
.foot nav a:hover { color: var(--accent); }
.foot .loc { align-self: end; }

@media (max-width: 45rem) {
  .desk-sum { grid-template-columns: 1fr; }
  .desk-row li { grid-template-columns: 1fr; gap: .1rem; }
  .sev { text-align: start; }
}

/* ── Dokumenttisivu (tietosuojaseloste) ─────────────────────────────── */
/*
 * Yhtenäinen typografia pitkälle luettavalle tekstille. Seloste on
 * juridinen dokumentti eikä markkinointisivu: rivinpituus on rajattu,
 * otsikot ovat rauhallisia, eikä mitään korosteta myyntitarkoituksessa.
 */
.doc { padding-block: 4rem 5rem; max-width: 46rem; }
.doc h1 { font-size: var(--t-xl); line-height: 1.15; text-wrap: balance; }
.doc h2 {
  font-size: var(--t-lg); margin-top: 2.75rem;
  padding-top: 1.25rem; border-top: 1px solid var(--line);
  text-wrap: balance;
}
.doc h3 { font-size: var(--t-md); margin-top: 1.75rem; }
.doc p { margin-top: 1rem; line-height: 1.65; color: var(--ink-soft); }
.doc h1 + p { margin-top: .75rem; color: var(--muted); font-size: var(--t-sm); }
.doc ul { margin-top: 1rem; padding-inline-start: 1.15rem; }
.doc li {
  margin-top: .55rem; line-height: 1.6; color: var(--ink-soft);
  list-style: disc;
}
/*
 * Ei taustalaatikkoa: `autobaric.com`-sivusto on lähteessä yksi sana, ja
 * laatikon vaakapehmuste avaa siihen näkyvän raon juuri ennen viivaa.
 * Dokumentissa, jonka on oltava tarkka, se näyttää huolimattomalta.
 */
.doc code { font-family: var(--mono); font-size: .92em; color: var(--ink); }
.doc a { color: var(--accent); text-underline-offset: .2em; }
.doc .tablewrap { margin-top: 1.25rem; }
.doc table { border-collapse: collapse; width: 100%; min-width: 30rem; }
.doc th, .doc td {
  text-align: start; padding: .65rem .8rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm); vertical-align: top;
}
.doc th {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 600;
  border-bottom-color: var(--line-strong);
}