/* ============================================================
   FLIPPI.COM — styles.css
   Brändiohjeisto: BRAND.md v1.0
   Ydinsäännöt: --radius on 0. Varjoja ei ole. Erottelu on 1 px viiva
   ja pintaero. Messinki on varattu kolmeen asiaan: luvut, otsikon
   kärki, nappi (+ grafiikkaviivat).
   Rakenne: 1) TOKENIT  2) RESET  3) TYPOGRAFIA  4) SOMMITTELU
            5) TOISTUVAT ELEMENTIT  6) KOMPONENTIT  7) LIIKE
   ============================================================ */

/* ============================================================
   1. TOKENIT
   Jokainen väri on määritelty bare :root -lohkossa (BRAND 6.3).
   ============================================================ */
:root {
  /* --- Brändipaletti (BRAND 6.1), muuttumaton --- */
  --brand-metsa:      #10352A;
  --brand-havu:       #17402F;
  --brand-sammal:     #2C6350;
  --brand-metsa-syva: #0A241C;
  --brand-messinki:   #C98A16;
  --brand-kalkki:     #EDEEE9;
  --brand-savi:       #16211C;
  --brand-tammi:      #B58F5E;

  /* --- Semanttiset pinnat: VAALEA teema (oletus) ---
     surface / surface-sunk ovat kalkin johdannaisia, eivät uusia
     brändivärejä: pintaero on ainoa varjon korvike. */
  --bg:            var(--brand-kalkki);
  --surface:       #F4F5F1;
  --surface-sunk:  #E3E4DD;
  /* Sivun vaalea osiopinta. Erillinen tokeni, koska .section--dark
     ylikirjoittaa --surface:n — leikkauksen kiila tarvitsee alkuperäisen. */
  --page-surface:  #F4F5F1;
  --surface-dark:  var(--brand-metsa);
  --surface-dark-2:var(--brand-havu);
  --surface-deep:  var(--brand-metsa-syva);

  /* --- Teksti vaalealla (mitatut kontrastit, BRAND 6.4) --- */
  --ink:    #16211C; /* 14.2:1 */
  --ink-2:  #47544C; /*  6.8:1 */
  --ink-3:  #5C6A62; /*  4.9:1 — älä vaalenna tästä */

  /* --- Teksti tummalla --- */
  --ink-on-dark:   #EFF0E9; /* 11.7:1 */
  --ink-2-on-dark: #B3C6B8; /*  7.5:1 */
  --ink-3-on-dark: #96AC9C; /*  5.6:1 */

  /* --- Messinki: grafiikka vs. teksti erikseen --- */
  --accent:          var(--brand-messinki); /* vain grafiikka vaalealla */
  --accent-text:     #7E5309;               /* 5.8:1 tekstinä vaalealla */
  --accent-num:      #A06D0E;               /* 3.8:1 — vain ≥24px bold */
  --accent-on-dark:  #E3B156;               /* 6.8:1 tummalla */

  /* --- Viivat --- */
  --line:        #D2D4CB;
  --line-strong: #B7BAB0;
  --line-on-dark:        #234B3D;
  --line-strong-on-dark: var(--brand-sammal);

  /* --- Nappi --- */
  --btn-bg:       var(--brand-messinki);
  --btn-bg-hover: #B87B10;
  --btn-text:     var(--brand-savi); /* 5.6:1 */

  /* --- Fokus --- */
  --focus: #7E5309;

  /* --- Muoto: brändin tärkein yksittäinen sääntö --- */
  --radius: 0;

  /* --- Leikkaus: tan(8°) × 100vw (BRAND 9.1) --- */
  /* Leikkauksen nousu. BRAND 9.1 määrittää 8°, mutta 8° syö leveällä
     näytöllä lähes 200 px pystytilaa osiorajaa kohden. 4° antaa saman
     eleen puolella tilalla, joten sivua ei tarvitse vierittää turhaan.
     Kulma on silti vakio joka rajassa: tan(4°) x 100vw. */
  --cut: 6.993vw;

  /* --- Kirjaintyypit (BRAND 7.1) --- */
  --font-display: 'Zilla Slab', 'Zilla Fallback', 'Rockwell', Georgia, serif;
  --font-body:    'Archivo', 'Archivo Fallback', 'Helvetica Neue', Arial, sans-serif;
  --font-mark:    'Archivo Narrow', 'Archivo', 'Archivo Fallback', Arial, sans-serif;

  /* --- Asteikko (BRAND 7.2) --- */
  --t-display: clamp(2.9rem, 7.5vw, 5.6rem);
  --t-h1:      clamp(2.2rem, 5vw, 3.4rem);
  --t-h2:      clamp(1.75rem, 3.4vw, 2.4rem);
  --t-h3:      1.3rem;
  --t-lede:    clamp(1.15rem, 2vw, 1.3rem);
  --t-body:    1.0625rem;
  --t-small:   0.94rem;
  --t-mark:    0.78rem;

  /* --- Tila: 4 px pohja (BRAND 8) --- */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px;  --s-4: 16px;
  --s-6: 24px;  --s-8: 32px;  --s-12: 48px; --s-16: 64px;
  --s-24: 96px; --s-32: 128px;

  /* --- Sommittelu --- */
  --wrap:    1180px;
  --pad-x:   clamp(1.1rem, 4vw, 3rem);
  --pad-y:   clamp(3rem, 7vw, 5.5rem);
  --mark-col: 9.5rem;
  --measure: 65ch;

  /* --- Liike (BRAND 13) --- */
  --dur-micro: 180ms;
  --dur-reveal: 700ms;
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* --- Tumma teema: järjestelmävalinta --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           var(--brand-metsa);
    --surface:      var(--brand-havu);
    --page-surface: var(--brand-havu);
    --surface-sunk: var(--brand-metsa-syva);
    --surface-dark: var(--brand-metsa-syva);
    --surface-dark-2: #0D2B21;
    --surface-deep: #071A14;

    --ink:   var(--ink-on-dark);
    --ink-2: var(--ink-2-on-dark);
    --ink-3: var(--ink-3-on-dark);

    --accent-text: var(--accent-on-dark);
    --accent-num:  var(--accent-on-dark);

    --line:        var(--line-on-dark);
    --line-strong: var(--line-strong-on-dark);

    --btn-text: var(--brand-metsa-syva); /* 8.3:1 */
    --btn-bg:   var(--accent-on-dark);
    --btn-bg-hover: #EFC272;
    --focus:    var(--accent-on-dark);
  }
}

/* --- Tumma teema: eksplisiittinen valinta --- */
:root[data-theme="dark"] {
  --bg:           var(--brand-metsa);
  --surface:      var(--brand-havu);
  --page-surface: var(--brand-havu);
  --surface-sunk: var(--brand-metsa-syva);
  --surface-dark: var(--brand-metsa-syva);
  --surface-dark-2: #0D2B21;
  --surface-deep: #071A14;

  --ink:   var(--ink-on-dark);
  --ink-2: var(--ink-2-on-dark);
  --ink-3: var(--ink-3-on-dark);

  --accent-text: var(--accent-on-dark);
  --accent-num:  var(--accent-on-dark);

  --line:        var(--line-on-dark);
  --line-strong: var(--line-strong-on-dark);

  --btn-text: var(--brand-metsa-syva);
  --btn-bg:   var(--accent-on-dark);
  --btn-bg-hover: #EFC272;
  --focus:    var(--accent-on-dark);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Kaikki: terävä kulma, ei varjoa (BRAND 10, 14) */
*, *::before, *::after { border-radius: var(--radius); box-shadow: none; }

html {
  /* overflow-x: clip eikä hidden. Hidden laskisi overflow-y:n arvoon auto ja
     tekisi elementistä vierityssäiliön, mikä rikkoo scrollIntoView():n:
     selain vierittäisi säiliötä eikä dokumenttia, eivätkä ankkurilinkit
     liikuttaisi sivua lainkaan. clip rajaa ilman vierityssäiliötä. */
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.62;
  color: var(--ink);
  background: var(--bg);
}

/* ============================================================
   FONTIT — itse isännöidyt
   Ladattu Google Fontsista ja tarjoillaan omalta palvelimelta, jotta kävijän
   IP ei välity Googlelle. Kolmannen osapuolen pyyntöä ei ole, joten näihin ei
   tarvita evästesuostumusta.

   Vain ne leikkaukset jotka sivustolla todella käytetään (BRAND 7.1):
   Zilla Slab 600/700 (otsikot, luvut), Archivo 400 + 400-kursiivi (leipä,
   sitaatit) ja 600 (lihavoinnit, napit), Archivo Narrow 600 (merkinnät).
   BRAND 7.1 ei sisällä Archivon painoa 700 — siksi strong on 600.

   Rakenne on Googlen oma: Archivo on muuttuva fontti, joten painot 400 ja 600
   osoittavat samaan tiedostoon ja selain valitsee painon akselilta. Zilla Slab
   on staattinen, joten sillä on oma tiedosto kummallekin painolle.

   Osajoukot latin ja latin-ext. Suomen ä ja ö ovat latinissa, joten latin-ext
   latautuu käytännössä vain jos sivulla on muiden kielten merkkejä.
   ============================================================ */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-400-italic-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: 'Archivo';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-400-italic-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: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-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: 'Archivo Narrow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/archivo-narrow-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: 'Archivo Narrow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/archivo-narrow-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;
}
@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/zilla-slab-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: 'Zilla Slab';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/zilla-slab-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;
}
@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/zilla-slab-700-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: 'Zilla Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/zilla-slab-700-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;
}

/* Fallback-metriikat: ei layout-hyppäystä fonttien latautuessa */
@font-face {
  font-family: 'Zilla Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 102%; ascent-override: 88%; descent-override: 22%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 98%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

img, svg { max-width: 100%; display: block; }
/* Archivon brändipainot ovat 400/500/600 (BRAND 7.1) — ei 700. Ilman tätä
   selain pyytäisi painoa 700 ja piirtäisi synteettisen lihavoinnin. */
strong, b { font-weight: 600; }
::selection { background: var(--accent); color: var(--brand-savi); }

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

.skip {
  position: absolute; left: var(--s-4); top: -4rem; z-index: 100;
  background: var(--accent); color: var(--brand-savi);
  padding: var(--s-3) var(--s-4);
  font: 600 var(--t-mark)/1.4 var(--font-mark);
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: top var(--dur-micro) var(--ease);
}
.skip:focus { top: var(--s-4); }

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

/* ============================================================
   3. TYPOGRAFIA
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-wrap: balance;
  color: inherit;
}

.display {
  font-weight: 700; font-size: var(--t-display);
  line-height: .94; letter-spacing: -.03em;
}
h1, .h1 { font-weight: 700; font-size: var(--t-h1); line-height: 1.18; letter-spacing: -.03em; }
h2, .h2 { font-weight: 700; font-size: var(--t-h2); line-height: 1.18; letter-spacing: -.015em; }
h3, .h3 { font-weight: 600; font-size: var(--t-h3); line-height: 1.25; letter-spacing: 0; }

.lede {
  font-size: var(--t-lede); line-height: 1.5; color: var(--ink-2);
  max-width: 52ch;
}
p { max-width: var(--measure); }
p + p { margin-top: var(--s-4); }
.small { font-size: var(--t-small); line-height: 1.55; }

/* Merkintä — brändin kolmas kirjaintyyppi */
.mark {
  font: 600 var(--t-mark)/1.4 var(--font-mark);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mark--accent { color: var(--accent-text); }

/* Otsikon kärki: yksi rivi tai sana messingillä (BRAND 6.2) */
.tip { color: var(--accent-text); }
.section--dark .tip,
.hero .tip { color: var(--accent-on-dark); }

/* Luvut */
.num {
  font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1; letter-spacing: -.02em;
  color: var(--accent-num);
}
.tnum { font-variant-numeric: tabular-nums; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--ink); }

/* Ankkurilinkki: alleviivattu messinkiteksti, ei nappi (BRAND 10.7) */
.anchor {
  display: inline-block;
  font-family: var(--font-body); font-weight: 600;
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  transition: color var(--dur-micro) var(--ease), text-decoration-color var(--dur-micro) var(--ease);
}
.anchor::after { content: ' →'; font-family: var(--font-body); }
.anchor:hover { color: var(--ink); }
.section--dark .anchor { color: var(--accent-on-dark); }
.section--dark .anchor:hover { color: var(--ink-on-dark); }

/* ============================================================
   4. SOMMITTELU
   ============================================================ */
.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section {
  padding-block: var(--pad-y);
  background: var(--bg);
  color: var(--ink);
  position: relative;
}
.section--surface { background: var(--page-surface); }

/* Tummat osiot: hero, kolme seinää, CTA, footer */
.section--dark {
  background: var(--surface-dark);
  color: var(--ink-on-dark);
  --ink: var(--ink-on-dark);
  --ink-2: var(--ink-2-on-dark);
  --ink-3: var(--ink-3-on-dark);
  --accent-text: var(--accent-on-dark);
  --accent-num: var(--accent-on-dark);
  --line: var(--line-on-dark);
  --line-strong: var(--line-strong-on-dark);
  --surface: var(--surface-dark-2);
  --surface-sunk: var(--surface-deep);
}
.section--deep { background: var(--surface-deep); }

/* --- Merkintäpalsta: brändin sommittelusignatuuri (BRAND 8) --- */
.sheet {
  display: grid;
  gap: var(--s-6);
}
.sheet__mark { align-self: start; }
@media (min-width: 820px) {
  .sheet {
    grid-template-columns: var(--mark-col) minmax(0, 1fr);
    gap: var(--s-12);
  }
  /* Leveä sisältö (korttiristikot) saa koko arkin leveyden, merkintä pysyy
     omalla rivillään sisällön vierellä (BRAND 8). */
  .sheet__mark { grid-column: 1; grid-row: 1; }
  .sheet__body { grid-column: 2; }
  .sheet__wide { grid-column: 1 / -1; }
  .sheet__mark {
    position: sticky; top: 6rem;
    padding-top: .5rem;
    border-top: 1px solid var(--line-strong);
  }
}

/* Osion otsikkoryhmä */
.head { display: flex; flex-direction: column; gap: var(--s-4); }
.head p { color: var(--ink-2); }

/* Ruudukko jossa viivat muodostavat yhtenäisen verkon (BRAND 8) */
.grid-hair {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.grid-hair > * { background: var(--bg); }
.section--surface .grid-hair > * { background: var(--page-surface); }
.section--dark .grid-hair > * { background: var(--surface-dark); }
/* Hero ja rakenneosio eivät ole .section--dark, joten niiden ruudukot on
   merkittävä erikseen. Ilman tätä messinkiluku putoaisi vaalealle
   kalkkipohjalle (2.0:1 — ei riitä). */
@media (min-width: 720px) { .grid-hair--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .grid-hair--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-hair--4 { grid-template-columns: repeat(4, 1fr); } }

.scroll-x { overflow-x: auto; }

/* ============================================================
   5. TOISTUVAT ELEMENTIT
   ============================================================ */

/* 5.1 Leikkaus — aina 8°, aina vasen alareuna sisään.
   Käytössä täsmälleen kaksi kertaa sivulla (BRAND 9.1).

   Kaksi asiaa jotka ohjeiston esimerkki jättää auki:

   1) `polygon(0 0, 100% 0, 100% 100%, 7% 100%)` tuottaa 8° vain kun lohkon
      korkeus on noin puolet leveydestä. Korkealla osiolla polygoni muuttuu
      lähes pystysuoraksi ja leikkaa sisältöä pois. Kulma lasketaan siksi
      leveydestä: nousu = tan(8°) × 100vw.

   2) clip-path paljastaa sivun rungon värin, joka ei aina ole naapuriosion
      väri — rajaan syntyy sauma. Kiila piirretään siksi pseudoelementillä
      naapurin värillä (--cut-reveal) osion päälle. Sisältö ei voi leikkautua.
*/
.cut-bottom,
.cut-top { position: relative; isolation: isolate; }
.cut-bottom > *,
.cut-top > * { position: relative; z-index: 1; }

.cut-bottom { padding-bottom: calc(var(--cut) + var(--pad-y)); }
.cut-bottom::after {
  content: '';
  position: absolute; left: 0; right: 0;
  /* 1 px sauman yli: --cut on murtoluku (tan 8° x 100vw), joten kiilan
     alareuna osuisi osapikselille ja tumma osiotausta kuultaisi läpi
     hiusviivana koko leveydeltä. Ylivenytys on naapurin väriä, joten se
     ei näy. Kulmavirhe on ~0,03°. */
  bottom: -1px;
  height: calc(var(--cut) + 1px);
  background: var(--cut-reveal, var(--bg));
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  z-index: 0;
}

.cut-top { padding-top: calc(var(--cut) + var(--pad-y)); }
.cut-top::before {
  content: '';
  position: absolute; left: 0; right: 0;
  /* Sama osapikselikorjaus kuin .cut-bottom:issa, mutta ylöspäin. */
  top: -1px;
  height: calc(var(--cut) + 1px);
  background: var(--cut-reveal, var(--bg));
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 0;
}

/* 5.2 Lukupalkki */
.fig { display: flex; flex-direction: column; gap: var(--s-2); }
.fig .num { font-size: clamp(1.75rem, 3.4vw, 2.4rem); }
.fig--lg .num { font-size: clamp(2.2rem, 5vw, 3.4rem); }

/* Todistusrivi: neljä lukua, aina samassa järjestyksessä (BRAND 1.5) */
.proof { margin-top: var(--s-12); }
.proof .fig { padding: var(--s-6); }
.proof .num { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }

/* 5.3 Vaakaviiva — messinkinen mittaviiva päätypystyillä.
   Korvaa harmaan väliviivan koko brändissä. */
.rule {
  --rule-h: 9px;
  height: var(--rule-h);
  border: 0;
  background:
    linear-gradient(var(--accent), var(--accent)) left  center / 1px 100% no-repeat,
    linear-gradient(var(--accent), var(--accent)) right center / 1px 100% no-repeat,
    linear-gradient(var(--accent), var(--accent)) center center / 100% 1px no-repeat;
  width: 100%;
}
.section--dark .rule { --accent: var(--accent-on-dark); }
.rule--short { max-width: 5.5rem; }

/* 5.4 Sanamerkki */
.wordmark {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -.03em; line-height: 1;
  color: currentColor;
  font-size: 1.35rem;
  display: inline-block;
}
.wordmark .dot { color: var(--accent-text); }
.section--dark .wordmark .dot,
.topbar .wordmark .dot { color: var(--accent-on-dark); }
a.wordmark:hover { color: currentColor; }
a.wordmark:hover .dot { color: var(--ink-on-dark); }

/* 10.6 Varoitus- ja huomiolohko — ei punaista, ei ikonia */
.note {
  background: var(--surface);
  border-left: 2px solid var(--accent);
  padding: var(--s-6);
  color: var(--ink-2);
  font-size: var(--t-body);
}
.section--dark .note { border-left-color: var(--accent-on-dark); }
.note strong { color: var(--ink); }
.note p { max-width: 68ch; }

/* Sitaatti — aksenttireuna */
.quote {
  border-left: 2px solid var(--accent);
  padding-left: var(--s-6);
  font-style: italic;
  color: var(--ink-2);
  max-width: 58ch;
}
.section--dark .quote { border-left-color: var(--accent-on-dark); }
.quote cite {
  display: block; margin-top: var(--s-3);
  font-style: normal;
  font: 600 var(--t-mark)/1.4 var(--font-mark);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}

/* ============================================================
   6. KOMPONENTIT
   ============================================================ */

/* --- 6.1 Ohut yläpalkki --- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--brand-metsa-syva);
  color: var(--ink-on-dark);
  border-bottom: 1px solid var(--line-strong-on-dark);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  min-height: 3.5rem;
}
.topbar a { color: var(--ink-on-dark); }
/* Sanamerkki ja merkintä ovat yksi lockup vasemmassa laidassa:
   "flippi.com – SUOMEN #1 FLIPPAUSTALO". */
.topbar__brand { display: flex; align-items: baseline; gap: var(--s-3); min-width: 0; }
.topbar__meta {
  display: none;
  font: 600 var(--t-mark)/1.4 var(--font-mark);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3-on-dark);
  white-space: nowrap;
}
.topbar__meta::before {
  content: '–';
  color: var(--accent-on-dark);
  margin-right: var(--s-3);
  letter-spacing: 0;
}
@media (min-width: 900px) { .topbar__meta { display: block; } }

/* --- 6.1b Hampurilaisnappi ---
   Kolme 1 px messinkiviivaa, jotka kääntyvät ristiksi. Ei pyöristystä. */
/* CTA ja valikko ovat yksi kehystetty ryhmä, jonka puolikkaat erottaa
   hiusviiva. Kaksi erillistä reunustettua ja alleviivattua elementtiä
   rinnakkain luki sekavana. */
.topbar__actions {
  display: flex; align-items: stretch;
  border: 1px solid var(--line-strong-on-dark);
}
.topbar__cta {
  display: none;
  align-items: center;
  padding: .55rem .9rem;
  border-right: 1px solid var(--line-strong-on-dark);
  color: var(--accent-on-dark);
  text-decoration: none;
  font: 600 var(--t-mark)/1 var(--font-mark);
  letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur-micro) var(--ease);
}
@media (min-width: 720px) { .topbar__cta { display: flex; } }
.topbar__cta:hover { background: var(--brand-metsa); color: var(--accent-on-dark); }
/* Emoji on koristeellinen: aria-hidden, eikä se skaalaudu merkintäkoon
   mukaan vaan pysyy hieman tekstiä suurempana ja optisesti linjassa. */
.topbar__cta-icon { font-size: 1.05rem; line-height: 1; margin-right: .45rem; }

.burger {
  display: flex; align-items: center; gap: var(--s-3);
  background: none; border: 0;
  color: var(--ink-on-dark);
  padding: .55rem .9rem;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.burger:hover { background: var(--brand-metsa); color: var(--accent-on-dark); }
.burger__label {
  font: 600 var(--t-mark)/1 var(--font-mark);
  letter-spacing: .14em; text-transform: uppercase;
}
.burger__lines { display: block; width: 18px; height: 12px; position: relative; }
.burger__lines span {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--accent-on-dark);
  transition: transform var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease);
}
.burger__lines span:nth-child(1) { top: 0; }
.burger__lines span:nth-child(2) { top: 50%; }
.burger__lines span:nth-child(3) { bottom: 0; }
.burger[aria-expanded='true'] .burger__lines span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__lines span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] .burger__lines span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* --- 6.1c Valikko: piirustuslehden sisällysluettelo --- */
.menu {
  position: fixed; inset: calc(3.5rem + 1px) 0 0 0; z-index: 49;
  background: var(--brand-metsa-syva);
  color: var(--ink-on-dark);
  overflow-y: auto;
  border-top: 1px solid var(--line-strong-on-dark);
}
.menu[hidden] { display: none; }
.menu__inner {
  padding-block: var(--pad-y);
  display: flex; flex-direction: column; gap: var(--s-8);
  min-height: 100%;
}
.menu__title, .menu__foot { color: var(--ink-3-on-dark); }
.menu__foot { margin-top: auto; color: var(--accent-on-dark); }
.menu__list { list-style: none; border-top: 1px solid var(--line-on-dark); }
.menu__list > li { border-bottom: 1px solid var(--line-on-dark); }

.menu__link {
  display: block;
  padding-block: var(--s-4);
  color: var(--ink-on-dark);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease), padding-left var(--dur-micro) var(--ease);
}
.menu__text {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em;
}
.menu__link:hover { color: var(--accent-on-dark); padding-left: var(--s-2); }
.menu__link--cta .menu__text {
  color: var(--accent-on-dark);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
}
.menu__link--cta .menu__text::after { content: ' →'; font-family: var(--font-body); }

/* Sivu ei vieritä valikon ollessa auki.
   Lukko on html-elementissä eikä bodyssä: body { overflow: hidden } tekisi
   bodystä vierityssäiliön, jolloin sticky-yläpalkin kiinnityspiste siirtyisi
   bodyn scrollporttiin ja palkki valuisi näkyvistä valikon ollessa auki.
   html on jo dokumentin vierityselementti, joten lukko pysäyttää vierityksen
   muuttamatta palkin kiinnitystä. */
html.menu-open { overflow: hidden; }

/* --- 6.2 Hero: pelkkä väite, koko leveydeltä --- */
.hero,
.rakenne {
  color: var(--ink-on-dark);
  --ink: var(--ink-on-dark);
  --ink-2: var(--ink-2-on-dark);
  --ink-3: var(--ink-3-on-dark);
  --accent-text: var(--accent-on-dark);
  --accent-num: var(--accent-on-dark);
  --line: var(--line-on-dark);
  --line-strong: var(--line-strong-on-dark);
  --surface: var(--brand-havu);
}

.hero {
  background: var(--brand-metsa);
  /* Vain padding-top ylhäältä + oma alapadding: taustaväri vaihtuu heti
     rakenneosioon, joten välissä ei ole ilmaa. Alapadding on tarkoituksella
     pienempi kuin yläpadding, jotta tulosnauha yltää taitteeseen tavallisella
     kannettavalla. Värinvaihto merkitsee rajan, joten ilmaa ei tarvita. */
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 3.5vw, 2.75rem);
}
.hero__claim { display: flex; flex-direction: column; gap: var(--s-12); min-width: 0; }
/* Yläotsikko kiinni pääotsikossa: se on otsikon merkintärivi, ei oma lohko.
   Merkintä pysyy yhdellä rivillä kaikilla leveyksillä: koko skaalautuu
   viewportin mukaan ja kirjainväli on hieman tiiviimpi kuin muissa
   merkinnöissä, koska rivi on pitkä. */
.hero__eyebrow {
  margin-bottom: calc(var(--s-12) * -1 + var(--s-6));
  white-space: nowrap;
  /* p:n yleinen max-width: 65ch kuristaisi rivin kapeammaksi kuin palsta. */
  max-width: none;
  font-size: clamp(0.48rem, 2.35vw, var(--t-mark));
  letter-spacing: .1em;
}

/* Display-otsikko saa koko sisältöleveyden: väite on sivun suurin
   yksittäinen elementti (BRAND 7.2, Display). Ei max-widthiä, ja
   text-wrap: balance jakaa rivit tasan koko palstan levyisenä. */
.hero .display {
  max-width: none;
  text-wrap: balance;
  /* Hieman asteikon display-kokoa pienempi, jotta "Tee kannattavia
     asuntoflippejä" mahtuu yhdelle riville tabletista ylöspäin. Mitattu:
     rivi vaatii 12.8em, joten koko on sidottu palstan leveyteen eikä
     asteikon ylärajaan. Yläraja 4.9rem on mitattu: sitä suuremmalla
     kiellot taittuvat kolmelle riville kahden sijaan. Kapealla näytöllä
     alaraja pitää otsikon luettavana ja rivit taittuvat. */
  font-size: clamp(2.9rem, 6.6vw, 4.9rem);
}
/* Otsikko on kaksi lohkoa: väite ja sen kiellot. Ajatusviiva aloittaa
   aina oman rivin, ja balance jakaa rivit tasan lohkon sisällä. */
.display__line { display: block; }

.hero__under { display: grid; gap: var(--s-12); align-items: start; }
@media (min-width: 900px) {
  .hero__under { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-16); }
}
.hero__col { display: flex; flex-direction: column; gap: var(--s-6); }
.hero__quote { align-self: start; }

/* --- 6.2b Rakenneosio: taustaväri vaihtuu, luvut ja piirros --- */
.rakenne {
  background: var(--brand-metsa-syva);
  /* Ks. .hero: pariksi kevennetty, jotta luvut nousevat taitteeseen. */
  padding-top: clamp(2rem, 3.5vw, 3rem);
}
.rakenne .proof { margin-top: 0; }
.rakenne .grid-hair { background: var(--line-on-dark); border-color: var(--line-on-dark); }
.rakenne .grid-hair > * { background: var(--brand-metsa); }

/* --- 6.3 Rakenne: palkki + kolme seinää + perustus ---
   BRAND 4 esittää tämän inline SVG:nä. Verkkosivulla se on HTML, koska
   kortit ovat samat seinät: teksti ei toistu, mitoitus elää responsiivisesti
   eikä piirros tarvitse vaakavieritystä kapealla näytöllä. Visuaalinen kieli
   on sama — messinkinen palkki, 1 px viivat, kolme samankokoista seinää ja
   perustus. Mainoksiin ja PDF:ään jää SVG-versio. */
.structure { display: flex; flex-direction: column; }
.structure__cap { display: flex; flex-direction: column; gap: var(--s-3); }
.structure__cap .mark { text-align: center; }

/* Palkki: seinien kantama. Tumma teksti messingillä (BRAND 6.2). */
.beam {
  background: var(--accent);
  color: var(--brand-savi);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  letter-spacing: .08em; text-transform: uppercase;
  text-align: center;
  padding: var(--s-4) var(--s-4);
  margin-top: var(--s-6);
  max-width: none;
}

/* Seinät kiinni palkissa: yksi yhtenäinen rakenne, ei kolme irrallista korttia */
.walls { border-top: 0; }
/* Numerointi on tässä perusteltu: se on flippausprojektin aikajärjestys
   (kohde -> rahoitus -> toteutus), samalla logiikalla kuin kiitossivun
   askeleet. Tabular-nums pitää numerot samassa linjassa. */
.walls .mark { font-variant-numeric: tabular-nums; }
.wall__tool {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font: 600 var(--t-mark)/1.4 var(--font-mark);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-on-dark);
}

/* Perustus: messinkinen kaksoisviiva, jonka päällä seinät seisovat */
.structure__base { display: flex; flex-direction: column; gap: var(--s-3); }
.foundation {
  height: 5px;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
}


/* --- 6.4 Casekortti --- */
.case { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.case__head { display: flex; flex-direction: column; gap: var(--s-1); }
.case__title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
/* Huoneistotyyppi ei versaloidu: BRAND 5.3 vaatii muodon "3h+k, 82 m²",
   ja versaali tekisi siitä "3H+K, 82 M²". */
.case__type { text-transform: none; letter-spacing: .04em; }
.case__flow {
  font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem; line-height: 1.25; color: var(--ink);
}
.case__profit { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.case__profit .num { font-size: 1.95rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.case dl { display: grid; gap: var(--s-2); font-size: var(--t-small); }
/* Nimike ja summa samalle riville, mutta jos tila loppuu, summa siirtyy
   omalle rivilleen oikeaan reunaan. Aiemmin auto-sarake saattoi ylittää
   säiliön ja summa piirtyi nimikkeen päälle kapeassa sarakkeessa. */
.case dl div {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  align-items: baseline;
  border-bottom: 1px dotted var(--line); padding-bottom: var(--s-2);
}
.case dt { color: var(--ink-3); }
.case dd {
  font-variant-numeric: tabular-nums; color: var(--ink);
  text-align: right; white-space: nowrap; margin-left: auto;
}
.case__time { color: var(--ink-3); white-space: nowrap; }
.case p { font-size: var(--t-small); color: var(--ink-2); max-width: none; }
/* Tunniste jokaisessa casessa. Oma case on hiljainen, asiakkaan case
   merkitään näkyvästi (BRAND 10.2) — messinkinen reuna ja teksti, ei
   täyttöä, jottei se lue napiksi (BRAND 10.7: yksi nappityyppi). */
.case__tag {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
}
/* .case-etuliite tarvitaan, koska .case p (0,1,1) voittaisi pelkän
   luokkavalitsimen (0,1,0) ja pakottaisi värin --ink-2:ksi. */
.case .case__badge {
  border: 1px solid var(--line-strong);
  color: var(--ink-3);
  padding: 2px var(--s-2);
  font: 600 var(--t-mark)/1.4 var(--font-mark);
  letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
}
.case .case__badge--asiakas {
  border-color: var(--accent);
  color: var(--accent-text);
}

/* --- 6.5 Kolme seinää --- */
.wall { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.wall > p:last-child { margin-top: auto; }
.wall__promise { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
.wall p { font-size: var(--t-small); color: var(--ink-2-on-dark); max-width: none; }
/* Leipätekstin sisäinen linkki alleviivataan, jotta se erottuu muusta
   tekstistä myös ilman väriä (saavutettavuus). */
.wall p a {
  color: var(--accent-on-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color var(--dur-micro) var(--ease);
}
.wall p a:hover { color: var(--ink-on-dark); }

.profiles-head { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-16); }
.profiles-head p { color: var(--ink-2); }
.profiles { margin-top: var(--s-8); }
.profiles-cta { margin-top: var(--s-8); font-size: var(--t-lede); max-width: none; }
.profile { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.profile__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.15rem; line-height: 1.3;
  /* balance jakaa rivit tasan, jolloin otsikot pysyvät kahdella rivillä */
  text-wrap: balance;
  hyphens: none;
}
.profile p { font-size: var(--t-small); color: var(--ink-2); max-width: none; }

/* --- 6.6 Rivilista ("Missä me autamme sinua") --- */
.rows { border-top: 1px solid var(--line); }
.rows > li {
  list-style: none;
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-6);
  display: grid; gap: var(--s-3);
}
@media (min-width: 760px) {
  /* Sarake mahtuu "Vaihe 5" -merkinnälle katkeamatta. */
  .rows > li { grid-template-columns: 6rem minmax(0,1fr); gap: var(--s-6); align-items: baseline; }
}
/* Vaihemerkintä on numeron rooli, joten se on messinkiä kuten luvut. */
.rows__vaihe { color: var(--accent-text); white-space: nowrap; }
.rows__otsikko {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.15rem; line-height: 1.3;
  margin-bottom: var(--s-2);
  max-width: none;
}
.rows p { max-width: 62ch; }

/* --- 6.7 Henkilökortti --- */
.people { display: grid; gap: var(--s-12); }
@media (min-width: 860px) { .people { grid-template-columns: 1fr 1fr; gap: var(--s-16); } }
.person { display: flex; flex-direction: column; gap: var(--s-4); }
.person__plate {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line-strong);
  background: var(--surface-sunk);
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
}
.person__plate img { width: 100%; height: 100%; object-fit: cover; }
/* Kuvapaikka ennen valokuvia: suunniteltu levy, ei rikkinäinen kuva */
.person__mono {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 9vw, 5rem); line-height: 1;
  letter-spacing: -.03em; color: var(--ink-3);
}
.person__plate::before,
.person__plate::after {
  content: ''; position: absolute; background: var(--accent); opacity: .85;
}
.person__plate::before { left: var(--s-4); right: var(--s-4); bottom: var(--s-4); height: 1px; }
.person__plate::after  { left: var(--s-4); bottom: var(--s-4); width: 1px; height: var(--s-4); }
.person__cap {
  display: flex; flex-direction: column; gap: var(--s-1);
}
.person p { font-size: var(--t-small); }

/* --- 6.8 Sopii / ei sovi --- */
.fit { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 760px) { .fit { grid-template-columns: 1fr 1fr; } }
.fit__col { background: var(--surface); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.fit ul { list-style: none; display: flex; flex-direction: column; gap: var(--s-4); }
.fit li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--s-3); font-size: var(--t-small); }
.fit li::before { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.35; }
.fit--yes li::before { content: '+'; color: var(--accent-text); }
.fit--no  li::before { content: '–'; color: var(--ink-3); }
.fit--no li span { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); color: var(--ink-2); }

/* --- 6.9 Nappi: sivun ainoa nappityyppi (BRAND 10.7) --- */
.btn {
  display: inline-block;
  background: var(--btn-bg);
  color: var(--btn-text);
  padding: 1rem 2rem;
  font-family: var(--font-body); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: .02em;
  text-transform: uppercase;
  border: 1px solid var(--btn-bg);
  cursor: pointer;
  text-align: center;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-text); }
.cta-group { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
.cta-group .release { font-size: var(--t-small); font-style: italic; color: var(--ink-2); }

/* --- 6.11 FAQ --- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding-block: var(--s-6);
  display: grid; grid-template-columns: 1fr 1.5rem; gap: var(--s-4);
  align-items: baseline;
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.35;
  transition: color var(--dur-micro) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; justify-self: end;
  font-family: var(--font-display); font-weight: 700; color: var(--accent-text);
  transition: transform var(--dur-micro) var(--ease);
}
.faq details[open] summary::after { content: '–'; }
.faq summary:hover { color: var(--accent-text); }
.faq__body { padding-bottom: var(--s-6); }
.faq__body p { color: var(--ink-2); }

/* --- 6.12 Footer --- */
.footer {
  background: var(--brand-metsa-syva);
  color: var(--ink-on-dark);
  padding-block: var(--pad-y) var(--s-12);
  --ink: var(--ink-on-dark);
  --ink-2: var(--ink-2-on-dark);
  --ink-3: var(--ink-3-on-dark);
  --accent-text: var(--accent-on-dark);
  --line: var(--line-on-dark);
  --surface: var(--brand-metsa);
}
.footer__grid { display: grid; gap: var(--s-12); }
@media (min-width: 860px) { .footer__grid { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: var(--s-16); } }
.footer .wordmark { font-size: 1.6rem; }
.footer__legal {
  margin-top: var(--s-12); padding-top: var(--s-6);
  border-top: 1px solid var(--line-on-dark);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  align-items: baseline; justify-content: space-between;
  font-size: var(--t-small); color: var(--ink-3-on-dark);
}
.footer__legal a { color: var(--ink-2-on-dark); text-decoration: underline; text-underline-offset: .25em; }
.footer__legal a:hover { color: var(--accent-on-dark); }

/* --- 6.13 Pitkä tekstisivu (tietosuojaseloste, kiitos) --- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 {
  margin-top: var(--s-12); padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
}
.prose h3 { margin-top: var(--s-8); }
.prose ul, .prose ol { padding-left: 1.15rem; display: flex; flex-direction: column; gap: var(--s-2); }
.prose li { max-width: var(--measure); }
.prose ol li::marker { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.prose dl { display: grid; gap: var(--s-2); }
.prose dt { font: 600 var(--t-mark)/1.4 var(--font-mark); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.prose dd { font-variant-numeric: tabular-nums; }
.prose a { text-decoration: underline; text-underline-offset: .25em; }

/* Numeroidut askeleet (kiitossivu) */
.steps { list-style: none; border-top: 1px solid var(--line); }
.steps > li { border-bottom: 1px solid var(--line); padding-block: var(--s-6); display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .steps > li { grid-template-columns: 3rem 1fr; gap: var(--s-6); } }
.steps .num { font-size: 1.5rem; }

/* --- 6.14 Evästesuostumus ---
   Matala palkki alalaidassa: yksi rivi tekstiä ja napit rinnakkain jo
   kapeimmalla ruudulla. Banneri ei peitä sivua eikä estä sen käyttöä —
   evästeseinä olisi joka tapauksessa kielletty.
   z-index 48 eli valikon (49) alle: jos valikko on auki, se peittää bannerin.
   Molemmat napit ovat samaa .btn-tyyppiä ja grid-auto-columns: 1fr tekee
   niistä pikselilleen samanlevyiset. Hylkäämisen pitää olla yhtä helppoa
   kuin hyväksymisen — se on juridinen vaatimus, ei tyylivalinta. */
.suostumus {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 48;
  /* Banneri kelluu sekä tummien että vaaleiden osioiden yli, joten mikään
     yksittäinen täyttö ei erotu kaikkialla: havu oli hero-taustaa vasten
     vain 1.16:1. Täyttö ja reunaviiva paikkaavat siksi toisiaan.
     Metsä syvä erottuu vaaleista osioista (14:1), ja messinkiviiva hoitaa
     erottelun tummilla (6.8:1 heroa ja 8.3:1 tulosnauhaa vasten), missä
     täyttö yksin hukkuisi. Messinki on brändissä sallittu grafiikkaviivoissa
     ja sitoo palkin Hyväksy-nappiin. Ei varjoa (BRAND 5). */
  background: var(--surface-deep);
  border-top: 2px solid var(--accent-on-dark);
  color: var(--ink-on-dark);
  --ink: var(--ink-on-dark);
  --ink-2: var(--ink-2-on-dark);
  --ink-3: var(--ink-3-on-dark);
  --btn-text: var(--brand-metsa-syva);
  --btn-bg: var(--accent-on-dark);
  --btn-bg-hover: #EFC272;
  /* Ilman tätä fokusreunaksi jäisi vaalean teeman tumma messinki,
     joka ei erotu tummalta pohjalta. */
  --focus: var(--accent-on-dark);
}
.suostumus[hidden] { display: none; }

.suostumus__sisus {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  /* Alareunaan iOS:n kotipalkin turva-alue, jotta nappi ei jää sen alle. */
  padding-top: var(--s-4);
  padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  padding-inline: var(--pad-x);
  display: grid;
  gap: var(--s-4);
  align-items: center;
}
.suostumus .small {
  color: var(--ink-2-on-dark);
  font-size: var(--t-small);
  line-height: 1.45;
  /* Yleinen p-mittaleveys kaventaisi tämän turhaan kahdelle riville;
     ruudun leveyden rajaa jo ruudukon 1fr-sarake. */
  max-width: none;
}
.suostumus .small a { color: var(--ink-on-dark); text-decoration: underline; text-underline-offset: .25em; white-space: nowrap; }
.suostumus .small a:hover { color: var(--accent-on-dark); }

.suostumus__napit {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--s-3);
}
/* Matalampi nappi kuin sivun CTA:lla: tämä on kuittaus, ei kutsu toimintaan.
   44 px säilyy eli kosketuskohde pysyy riittävänä. */
.suostumus .btn { padding: .8rem 1rem; font-size: 1rem; }

/* Toissijainen nappi: sama koko, sama paikka, sama fontti, sama yhden
   klikkauksen etäisyys — vain täyttö puuttuu. Teksti ja reunus ovat samaa
   messinkiä (5.9:1 pohjaa vasten), joten nappi on täysin luettava.
   Tästä pidemmälle ei mennä: hylkäysvaihtoehdon haalistaminen tai
   piilottaminen on evästebannereissa kielletty hämäräkuvio. */
.suostumus .btn--toissijainen {
  background: transparent;
  color: var(--accent-on-dark);
  border-color: var(--accent-on-dark);
}
.suostumus .btn--toissijainen:hover {
  background: var(--accent-on-dark);
  color: var(--brand-metsa-syva);
  border-color: var(--accent-on-dark);
}

@media (min-width: 48rem) {
  .suostumus__sisus { grid-template-columns: 1fr auto; gap: var(--s-8); }
  .suostumus .btn { padding: .75rem 1.75rem; }
}

/* Painike joka näyttää linkiltä. Semanttisesti nappi, koska se ei vie
   mihinkään vaan avaa bannerin. */
.linkkinappi {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--ink-2-on-dark);
  text-decoration: underline; text-underline-offset: .25em;
  cursor: pointer;
}
.linkkinappi:hover { color: var(--accent-on-dark); }

/* ============================================================
   7. LIIKE
   Paljastus: opacity + translateY, kerran per elementti.
   Ei parallaksia, ei lukulaskureita, ei karusellia (BRAND 13).
   ============================================================ */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
/* Latauksessa jo näkyvä lohko ei liu'u sisään: se on vain paikallaan. */
.js .reveal.is-in--heti { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   8. TULOSTUS
   ============================================================ */
@media print {
  .topbar, .btn { display: none; }
  body { background: #fff; color: #000; }
}