/* =========================================================
   Ziigaa – Aino. Uusi sivusto (kokeilu)
   ========================================================= */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --brown: #8F4C10;
  --brown-deep: #6E3A0B;
  --orange: #D0891C;
  --ink: #0B0E15;
  --ink-soft: #45464D;
  --paper: #F6F1E7;
  --line: #E8E4DA;
  --note: #FFF3C4;
  --card: #FFFDF8;
  --desk: #EADCC5;
  --paper-deep: #EFE7D9;
  --line-strong: #DCD3C3;
  --error: #A3311B;

  --f-head: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --f-hand: "Caveat", "Segoe Print", cursive;

  /* Valo tulee vasemmalta: varjot oikealle alas */
  --shadow-obj: 8px 12px 22px rgba(94, 50, 9, .16), 2px 3px 6px rgba(94, 50, 9, .12);
  --shadow-paper: 10px 16px 30px rgba(94, 50, 9, .16), 2px 3px 6px rgba(94, 50, 9, .10);

  --ease-soft: cubic-bezier(.22, .7, .2, 1);
  --ease-stick: cubic-bezier(.2, 1.35, .4, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.55;
  overflow-x: clip;
}
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
p { margin: 0; }
a { color: var(--brown); }
a:hover { color: var(--brown-deep); }
:focus-visible { outline: 3px solid var(--brown); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; color: var(--paper); }

/* ---------- Painikkeet ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 22px;
  background: var(--brown); color: var(--paper);
  border: 2px solid var(--brown); border-radius: 999px;
  font-family: var(--f-head); font-weight: 600; font-size: 17px; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn:hover { background: var(--brown-deep); border-color: var(--brown-deep); color: var(--paper); }
.btn-ghost { background: var(--card); color: var(--brown); }
.btn-ghost:hover { background: #F3E9DA; color: var(--brown-deep); border-color: var(--brown-deep); }
.btn-small { min-height: 44px; padding: 8px 18px; font-size: 16px; }

/* ---------- Ylätunniste (kiinteä) ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 16px;
  background: rgba(246, 241, 231, .95);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--f-head); font-weight: 700; font-size: 24px; letter-spacing: -0.03em;
  color: var(--ink); text-decoration: none;
}
.brand:hover { color: var(--brown); }
.site-nav { display: flex; align-items: center; gap: 8px; }
.nav-links { order: 0; }
.nav-cta { order: 1; }
.menu-toggle {
  order: 2;
  width: 44px; height: 44px; display: inline-grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--card); color: var(--ink); cursor: pointer;
}
.menu-toggle path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transform-origin: 12px 12px; transition: transform .25s ease, opacity .2s ease; }
.menu-open .mt-a { transform: translateY(5px) rotate(45deg); }
.menu-open .mt-b { opacity: 0; }
.menu-open .mt-c { transform: translateY(-5px) rotate(-45deg); }
.nav-links {
  list-style: none; margin: 0; padding: 4px 16px 12px;
  position: absolute; left: 0; right: 0; top: 64px;
  display: none; flex-direction: column;
  background: var(--paper);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 18px 30px rgba(94, 50, 9, .10);
}
.menu-open .nav-links { display: flex; }
.nav-link {
  display: flex; align-items: center; min-height: 52px; white-space: nowrap; padding: 0 4px;
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 18px;
  border-bottom: 1px solid var(--line);
}
.nav-links li:last-child .nav-link { border-bottom: 0; }
.nav-link:hover { color: var(--brown); }

@media (min-width: 960px) {
  .site-header { height: 72px; padding: 0 clamp(32px, 5vw, 80px); }
  .menu-toggle { display: none; }
  .nav-links {
    display: flex; position: static; flex-direction: row; gap: 2px;
    padding: 0; margin-right: 10px; background: none; border: 0; box-shadow: none;
  }
  .nav-link { min-height: 44px; padding: 0 12px; font-size: 16px; border: 0; }
  .nav-link:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* =========================================================
   TARINA
   ========================================================= */
.story { position: relative; }

.stage {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 12px;
  padding: 96px 16px 20px;
  overflow: hidden;
}

/* --- Valo --- */
.light { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.beam {
  position: absolute; left: -10%;
  width: 95%; height: 34%;
  background: linear-gradient(100deg, rgba(255, 250, 238, .95) 0%, rgba(255, 246, 226, .55) 45%, rgba(255, 246, 226, 0) 100%);
  transform: skewY(14deg);
  filter: blur(14px);
  opacity: .9;
}
.beam { transition: opacity 1.4s ease; }
.beam-1 { top: 10%; }
.beam-2 { top: 50%; height: 26%; opacity: .7; }
.light-warm {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 0% 55%, rgba(208, 137, 28, .30), rgba(208, 137, 28, 0) 70%),
    linear-gradient(180deg, rgba(208, 137, 28, .06), rgba(208, 137, 28, .12));
  opacity: 0;
  transition: opacity 1.6s ease .2s;
}

/* --- Edistyminen --- */
.progress {
  display: none; position: absolute; z-index: 4;
  left: 16px; right: 16px; top: 72px;
  flex-direction: row; gap: 6px;
  pointer-events: none;
  --p-active: scaleY(1.7);
}
.progress i {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(143, 76, 16, .22);
  transition: background-color .4s ease, transform .4s var(--ease-soft);
}
.progress i:first-child { background: var(--brown); }

/* --- Tekstit --- */
.captions { position: relative; z-index: 3; display: grid; align-content: start; }
.cap {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: 14px;
}
.kicker {
  display: block;
  font-family: var(--f-body); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brown);
  margin-bottom: 14px;
}
.cap-line { display: block; font-size: 31px; max-width: 16ch; }
.cap-sub { font-size: 17px; color: var(--ink-soft); max-width: 34ch; }
.cap-t .cap-line { font-family: var(--f-head); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; }
.cap-t-2 { color: var(--brown); }
.cap-1 .cap-sub { font-family: var(--f-hand); font-size: 26px; color: var(--brown); line-height: 1.1; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.scroll-hint {
  display: none; align-items: center; gap: 10px;
  font-size: 14px; color: var(--ink-soft); margin-top: 18px;
}
.scroll-dot {
  width: 22px; height: 34px; border: 2px solid var(--ink-soft); border-radius: 12px; position: relative;
}
.scroll-dot::after {
  content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px;
  background: var(--ink-soft); border-radius: 2px;
  animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

/* --- Pöytä --- */
.desk-wrap { position: relative; z-index: 2; min-height: 0; }
.desk {
  --desk-w: 360px; --desk-h: 480px;
  position: absolute; left: 50%; top: 50%;
  width: var(--desk-w); height: var(--desk-h);
  transform: translate(-50%, -50%) scale(var(--s, 1));
  transform-origin: 50% 50%;
}
.desk-surface {
  position: absolute; inset: 0;
  border-radius: 26px;
  background-color: var(--desk);
  background-image:
    repeating-linear-gradient(90deg, rgba(143, 76, 16, .045) 0 2px, transparent 2px 23px),
    repeating-linear-gradient(90deg, rgba(143, 76, 16, .03) 0 1px, transparent 1px 61px),
    linear-gradient(100deg, rgba(255, 250, 238, .55), rgba(255, 250, 238, 0) 60%);
  box-shadow: inset 0 0 0 1px rgba(143, 76, 16, .10), 14px 22px 50px rgba(94, 50, 9, .14);
}
.desk-surface::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(46, 24, 4, .17);
  opacity: 0; transition: opacity 1.4s ease;
}
.desk-surface::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(100deg, rgba(208, 137, 28, .26), rgba(208, 137, 28, .10) 70%);
  opacity: 0; transition: opacity 1.8s ease .3s;
}

/* Kaikki pöydän esineet: sijainti left/top, liike vain transformilla ja opacityllä */
.obj, .task, .mail, .report, .note, .done {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w);
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  transition: transform .9s var(--ease-soft), opacity .7s ease;
  will-change: transform, opacity;
}
.obj { height: var(--h); }
.obj svg { display: block; overflow: visible; filter: drop-shadow(6px 9px 8px rgba(94, 50, 9, .18)); }

/* Kello */
.clock {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink); color: var(--paper);
  border-radius: 12px;
  box-shadow: var(--shadow-obj);
  font-family: var(--f-head); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: 19px;
}
.clock-day { color: var(--orange); }
.clock-time { position: relative; display: inline-grid; }
.clock-t1, .clock-t2, .clock-t3, .clock-t4 { grid-area: 1 / 1; transition: transform .6s var(--ease-soft), opacity .5s ease; }
.clock-t2, .clock-t3, .clock-t4 { opacity: 0; transform: translateY(10px); }

/* Tehtäväkortit */
.task {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-paper);
  font-family: var(--f-head); font-weight: 500; font-size: 16px; line-height: 1.22; letter-spacing: -0.01em;
  color: var(--ink);
}
.task::before {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 18px, transparent 18px 24px);
}
.task-type {
  align-self: flex-start;
  font-family: var(--f-body); font-weight: 700; font-size: 11px; letter-spacing: .08em;
  color: var(--brown); background: rgba(208, 137, 28, .16);
  padding: 2px 7px; border-radius: 5px;
}
.task-text { padding-bottom: 8px; }

/* Sähköposti */
.mail {
  z-index: 5;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 14px 22px 44px rgba(94, 50, 9, .20), 2px 4px 10px rgba(94, 50, 9, .10);
  font-size: 15px;
  opacity: 0;
  --dy: 70px; --sc: .98;
  overflow: hidden;
}
.mail-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: var(--ink); color: var(--paper);
  font-family: var(--f-head); font-weight: 600; font-size: 14px;
}
.mail-dots { display: flex; gap: 5px; }
.mail-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(246, 241, 231, .35); }
.mail-row {
  display: flex; gap: 10px; align-items: baseline;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
}
.mail-label { color: var(--ink-soft); font-size: 13px; flex: 0 0 auto; min-width: 86px; }
.mail-body { padding: 14px 14px 6px; font-size: 16px; line-height: 1.45; min-height: 74px; }
.mail-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 14px 14px;
}
.attach {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(143, 76, 16, .08); color: var(--brown-deep);
  font-weight: 600; font-size: 13px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s var(--ease-soft);
}
.send {
  display: inline-flex; align-items: center;
  padding: 9px 18px; border-radius: 999px;
  background: var(--brown); color: var(--paper);
  font-family: var(--f-head); font-weight: 600; font-size: 14px;
  box-shadow: 0 3px 0 var(--brown-deep);
}
.ch { opacity: 0; transition: opacity 40ms linear; }

/* Raportti */
.report {
  z-index: 4;
  opacity: 0;
  --dx: 160px; --dy: 30px; --rot: 7deg;
}
.report-file {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 8px 6px; padding: 5px 10px;
  background: var(--ink); color: var(--paper);
  border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-obj);
}
.report-file svg { color: var(--orange); }
.report-page {
  background: #FFFFFF;
  border-radius: 6px;
  padding: 16px 16px 18px;
  box-shadow: var(--shadow-paper);
  display: flex; flex-direction: column; gap: 12px;
}
.report-head { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-soft); }
.logo-mark {
  width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  background: var(--brown); color: var(--paper); font-family: var(--f-head); font-weight: 700; font-size: 13px;
}
.report-co { font-weight: 600; color: var(--ink); }
.report-date { margin-left: auto; }
.report-title { font-family: var(--f-head); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; border-bottom: 2px solid var(--brown); padding-bottom: 8px; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--paper); border-radius: 6px; }
.kpi-label { font-size: 10.5px; color: var(--ink-soft); }
.kpi-val { font-family: var(--f-head); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-up { color: var(--brown); }
.chart { display: flex; flex-direction: column; gap: 6px; }
.chart-label { font-size: 10.5px; color: var(--ink-soft); }
.bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 110px; border-bottom: 1px solid var(--line); }
.bar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; }
.bar i { display: block; height: 100%; background: #D6D2CA; border-radius: 3px 3px 0 0; transform: scaleY(var(--h)); transform-origin: bottom; }
.bar span { position: absolute; bottom: -17px; left: 0; right: 0; text-align: center; font-size: 9.5px; color: var(--ink-soft); }
.bar-hl i { background: var(--brown); }
.bar-val {
  position: absolute; right: 0; bottom: calc(var(--h) * 100% + 3px);
  white-space: nowrap; font-family: var(--f-head); font-weight: 700; font-size: 9.5px; letter-spacing: -0.01em;
  color: var(--brown);
}
.bar-hl span { color: var(--brown); font-weight: 700; }
.report-notes { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.report-notes span { font-family: var(--f-head); font-weight: 600; font-size: 12px; }
.report-notes i { display: block; height: 6px; border-radius: 3px; background: var(--line); }
.report-notes i + i { width: 72%; }

/* Muistilaput */
.note {
  z-index: 6;
  padding: 16px 16px 14px;
  background: var(--note);
  border-radius: 3px 3px 14px 3px;
  box-shadow: 8px 14px 22px rgba(94, 50, 9, .18), 1px 2px 3px rgba(94, 50, 9, .10);
  font-family: var(--f-hand); font-weight: 500; font-size: 21px; line-height: 1.12;
  color: #2A2415;
  opacity: 0;
  --sc: .82; --dy: -14px;
  transition: transform .75s var(--ease-stick), opacity .35s ease;
}
.note::before {
  content: ""; position: absolute; left: 50%; top: -9px; width: 64px; height: 20px; margin-left: -32px;
  background: rgba(232, 228, 218, .75); transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(94, 50, 9, .08);
}
.note-sign { display: block; margin-top: 6px; text-align: right; color: var(--brown); font-size: 20px; }

/* Valmiit viestit Ainolta (kohtaus 4) */
.done {
  z-index: 6;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px 11px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-paper);
  font-size: 16px; line-height: 1.25;
  opacity: 0; --dx: 60px; --dy: 10px;
  transition: transform .8s var(--ease-stick), opacity .45s ease;
}
.done-from { font-weight: 700; color: var(--brown); }
.done-text { flex: 1; font-weight: 500; }
.done-ok {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brown); color: var(--paper);
}

/* --- Sijainnit: mobiili (360 × 480) --- */
.notebook, .pen, .mug { display: none; }
.notebook { --x: 10px;  --y: 12px;  --w: 62px;  --h: 80px;  --rot: -8deg; }
.pen      { --x: 36px;  --y: 8px;   --w: 9px;   --h: 84px;  --rot: 24deg; }
.clock    { --x: 238px; --y: 12px;  --w: 110px; --h: 44px;  font-size: 17px; }
.mug      { --x: 286px; --y: 450px; --w: 72px;  --h: 60px; }
.bag      { --x: -22px; --y: 372px; --w: 150px; --h: 112px; --rot: -4deg; }
.keys     { --x: 150px; --y: 436px; --w: 60px;  --h: 36px;  --rot: 12deg; }
.task     { --w: 184px; }
.t-1 { --x: 22px;  --y: 78px;  --rot: -5deg; }
.t-2 { --x: 150px; --y: 128px; --rot: 4deg; }
.t-3 { --x: 18px;  --y: 214px; --rot: 2.5deg; }
.t-4 { --x: 148px; --y: 272px; --rot: -3.5deg; }
.mail   { --x: 8px;   --y: 74px;  --w: 344px; }
.report { --x: 8px;   --y: 34px;  --w: 204px; }
.note   { --w: 150px; font-size: 20px; padding: 14px 13px 12px; }
.n-1    { --x: 204px; --y: 84px;  --rot: 5deg; }
.n-2    { --x: 216px; --y: 262px; --rot: -4deg; --w: 140px; }
.report .kpis { grid-template-columns: 1fr; gap: 6px; }
.report .kpi { flex-direction: row; justify-content: space-between; align-items: baseline; }
.report .kpi-val { font-size: 16px; }
.report .bars { height: 88px; gap: 4px; }
.report-from { display: none; }
.done { --w: 304px; }
.d-1 { --x: 18px; --y: 108px; --rot: -1.5deg; }
.d-2 { --x: 28px; --y: 182px; --rot: 1deg; }
.d-3 { --x: 38px; --y: 256px; --rot: -.5deg; }
.d-4 { --x: 48px; --y: 330px; --rot: 1.5deg; }
.report .report-page { padding: 12px 12px 14px; gap: 10px; }
.report .report-title { font-size: 17px; }

/* =========================================================
   Tilat (JS lisää .is-1 … .is-6 tarinalle; staattisessa tilassa kopioille)
   ========================================================= */

/* Kello etenee kohtausten mukana: 16.47 → 16.48 → 16.50 → 16.52 */
.is-1 .clock-t1 { opacity: 0; transform: translateY(-10px); }
.is-1 .clock-t2 { opacity: 1; transform: none; transition-delay: .3s; }
.is-3 .clock-t2 { opacity: 0; transform: translateY(-10px); transition-delay: 0s; }
.is-3 .clock-t3 { opacity: 1; transform: none; transition-delay: .6s; }
.is-6 .clock-t3 { opacity: 0; transform: translateY(-10px); transition-delay: 0s; }
.is-6 .clock-t4 { opacity: 1; transform: none; transition-delay: .4s; }

/* 1: sähköposti liukuu esiin ja kirjoittuu */
.is-1 .mail { opacity: 1; --dy: 0px; --sc: 1; }
.is-1 .ch { opacity: 1; transition-delay: var(--d); }
.is-1 .attach { opacity: 1; transform: none; transition-delay: var(--d); }

/* 2: Lähetä painuu → kortit nousevat viestin päälle ja lentävät kevyesti ylös ja pois → viesti lähtee */
.is-2 .send { animation: press .45s ease; }
@keyframes press { 0% { transform: none; } 35% { transform: translateY(3px) scale(.94); box-shadow: 0 0 0 var(--brown-deep); } 100% { transform: none; } }
@keyframes cardAway {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--rot)) scale(1); opacity: 1; }
  22%  { transform: translate3d(0, -16px, 0) rotate(var(--rot)) scale(1.05); opacity: 1; }
  60%  { opacity: .9; }
  100% { transform: translate3d(var(--fx), -620px, 0) rotate(calc(var(--rot) + var(--fr))) scale(.92); opacity: 0; }
}
.is-2 .task {
  z-index: 7; opacity: 0; --dx: var(--fx); --dy: -620px; --sc: .92;
  animation: cardAway 1.4s cubic-bezier(.45, 0, .25, 1) both;
}
.t-1 { --fx: -40px; --fr: -8deg; }
.t-2 { --fx: 70px;  --fr: 10deg; }
.t-3 { --fx: -10px; --fr: -6deg; }
.t-4 { --fx: 90px;  --fr: 8deg; }
.is-2 .t-1 { animation-delay: .5s; }
.is-2 .t-2 { animation-delay: .7s; }
.is-2 .t-3 { animation-delay: .9s; }
.is-2 .t-4 { animation-delay: 1.1s; }
.is-2 .mail { opacity: 0; --dy: -80px; --dx: 40px; --sc: .9; transition-delay: 2.2s; }

/* 3: raportti liukuu pöydälle */
.is-3 .report { opacity: 1; --dx: 0px; --dy: 0px; --rot: -1.5deg; transition-duration: 1.1s, .6s; }

/* 4–5: muistilaput */
.is-4 .n-1, .is-5 .n-2 { opacity: 1; --sc: 1; --dy: 0px; }

/* 6: valmis – raportti pois, laukku ja avaimet otetaan mukaan, valmiit viestit pinoutuvat, valo lämpenee */
.is-6 .report, .is-6 .note { opacity: 0; --dx: -140px; --dy: 120px; --sc: .86; transition-duration: .9s, .6s; }
.is-6 .note { transition-delay: 0s; }
@keyframes takeAway {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--rot)) scale(1); opacity: 1; }
  28%  { transform: translate3d(8px, -22px, 0) rotate(calc(var(--rot) + 2deg)) scale(1.08); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate3d(-900px, -40px, 0) rotate(calc(var(--rot) - 6deg)) scale(1.08); opacity: 0; }
}
.is-6 .bag, .is-6 .keys {
  opacity: 0; --dx: -900px; --dy: -40px; --sc: 1.08;
  animation: takeAway 1.7s cubic-bezier(.5, 0, .3, 1) .5s both;
}
.is-6 .done { opacity: 1; --dx: 0px; --dy: 0px; }
.is-6 .d-1 { transition-delay: 1.7s; }
.is-6 .d-2 { transition-delay: 2s; }
.is-6 .d-3 { transition-delay: 2.3s; }
.is-6 .d-4 { transition-delay: 2.6s; }
.is-6 .light-warm, .is-6 .desk-surface::after { opacity: 1; }
/* lopuksi pöydän lamppu sammuu: valo himmenee hieman */
.is-6 .desk-surface::before { opacity: 1; transition-delay: 3.6s; }
.is-6 .beam { opacity: .3; transition-delay: 3.6s; }

/* Kun palataan taaksepäin, ei viiveitä */
.story:not(.is-1) .ch, .story:not(.is-1) .attach { transition-delay: 0s; }

/* Otsikoiden vaihto */
.cap { opacity: 1; }

/* =========================================================
   Scroll-animaatio (vain jos JS ja liike sallittu)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js .story { height: 620vh; }
  .js .story .stage {
    position: sticky; top: 0;
    height: 100vh; height: 100svh; min-height: 0;
  }
  .js .story .cap {
    opacity: 0; transform: translate3d(0, 18px, 0);
    transition: opacity .55s ease, transform .7s var(--ease-soft);
    pointer-events: none;
  }
  .js .story:not(.is-t1) .cap-1,
  .js .story.is-t1:not(.is-1) .cap-t,
  .js .story.is-1:not(.is-3) .cap-2,
  .js .story.is-3:not(.is-6) .cap-3,
  .js .story.is-6 .cap-4 {
    opacity: 1; transform: none; pointer-events: auto;
    transition-delay: .15s;
  }
  .js .story .scroll-hint { display: inline-flex; }

  /* Siirtymä: toinen rivi hetken päästä, pöytä väistyy taustalle */
  .js .story .cap-t-2 { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .7s ease, transform .8s var(--ease-soft); }
  .js .story.is-t2 .cap-t-2 { opacity: 1; transform: none; }
  .js .story .desk-wrap { transition: opacity .8s ease, transform .9s var(--ease-soft); }
  .js .story.is-t1:not(.is-1) .desk-wrap { opacity: .25; transform: scale(.97); }

  /* Edistyminen: ohut palkki (mobiili) / 4 pistettä (työpöytä) */
  .js .story .progress { display: flex; }
  .js .story:not(.is-1) .progress i:nth-child(1),
  .js .story.is-1:not(.is-3) .progress i:nth-child(2),
  .js .story.is-3:not(.is-6) .progress i:nth-child(3),
  .js .story.is-6 .progress i:nth-child(4) { transform: var(--p-active); }
  .js .story.is-1 .progress i:nth-child(2),
  .js .story.is-3 .progress i:nth-child(3),
  .js .story.is-6 .progress i:nth-child(4) { background: var(--brown); }

  /* CTA:t vasta viestipinon jälkeen */
  .js .story .cap-4 .cta-row { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .5s ease, transform .6s var(--ease-soft); }
  .js .story.is-6 .cap-4 .cta-row { opacity: 1; transform: none; transition-delay: 3.1s; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 959px) {
  .js .story .scroll-hint { display: none; }
}
.no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; animation: none !important; }

/* =========================================================
   Staattinen tarina (prefers-reduced-motion tai ei JS:ää)
   ========================================================= */
.story--static .stage { display: none; }
.static-scene {
  position: relative; overflow: hidden;
  display: grid; gap: 20px;
  padding: 72px 16px 40px;
  border-bottom: 1px solid var(--line);
}
.static-scene:first-of-type { padding-top: 96px; }
.static-scene .cap { position: relative; }
.static-scene--text { padding-block: 56px; }
.static-scene .desk-wrap { height: 480px; }
.static-scene .desk { transform: translate(-50%, -50%) scale(var(--s, 1)); }

/* =========================================================
   Työpöytä-asettelu ≥ 960 px
   ========================================================= */
@media (min-width: 960px) {
  .stage {
    grid-template-columns: minmax(380px, 5fr) 7fr;
    grid-template-rows: 1fr;
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    padding: 96px clamp(32px, 5vw, 80px) 40px;
  }
  .captions { align-content: center; }
  .desk-wrap { height: 100%; }
  .cap-line { font-size: clamp(42px, 4.1vw, 62px); max-width: 13ch; }
  .cap-sub { font-size: 19px; }
.cap-1 .cap-sub { font-size: 32px; }
  .cap { gap: 18px; }
  .cta-row { margin-top: 10px; }

  .desk { --desk-w: 720px; --desk-h: 600px; }
  .notebook { --x: 26px;  --y: 26px;  --w: 104px; --h: 132px; --rot: -8deg; }
  .notebook, .pen, .mug { display: block; }
  .pen      { --x: 70px;  --y: 22px;  --w: 14px;  --h: 132px; --rot: 24deg; }
  .clock    { --x: 560px; --y: 24px;  --w: 136px; --h: 56px;  font-size: 21px; }
  .mug      { --x: 26px;  --y: 250px; --w: 100px; --h: 84px; }
  .bag      { --x: -40px; --y: 430px; --w: 230px; --h: 170px; --rot: -4deg; }
  .keys     { --x: 44px;  --y: 364px; --w: 80px;  --h: 46px;  --rot: 12deg; }
  .task     { --w: 248px; font-size: 18px; padding: 14px 16px 16px; }
  .t-1 { --x: 138px; --y: 118px; --rot: -5deg; }
  .t-2 { --x: 398px; --y: 156px; --rot: 4deg; }
  .t-3 { --x: 176px; --y: 262px; --rot: 2.5deg; }
  .t-4 { --x: 396px; --y: 318px; --rot: -3.5deg; }
  .mail   { --x: 90px;  --y: 116px; --w: 552px; font-size: 16px; }
  .mail-body { font-size: 18px; min-height: 96px; padding: 18px 18px 8px; }
  .mail-row { padding: 11px 18px; }
  .mail-foot { padding: 10px 18px 18px; }
  .report { --x: 140px; --y: 40px; --w: 380px; }
  .report .kpi-val { font-size: 23px; }
  .report .bars { height: 140px; gap: 10px; }
  .report .report-page { padding: 20px 22px 22px; gap: 14px; }
  .report .report-title { font-size: 24px; }
  .kpi-label, .chart-label { font-size: 12px; }
  .bar span { font-size: 11px; }
  .note   { --w: 208px; font-size: 24px; padding: 18px 18px 16px; }
  .n-1    { --x: 500px; --y: 108px; --rot: 5deg; }
  .n-2    { --x: 498px; --y: 392px; --rot: -4deg; }
  .report .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .report .kpi { flex-direction: column; }
  .report .bars { gap: 10px; }
  .report-from { display: inline; }
  .bar-val { font-size: 12px; }
  .done { --w: 364px; font-size: 18px; padding: 14px 14px 14px 18px; gap: 10px; }
  .d-1 { --x: 296px; --y: 138px; }
  .d-2 { --x: 312px; --y: 228px; }
  .d-3 { --x: 328px; --y: 318px; }
  .d-4 { --x: 344px; --y: 408px; }
  .progress { --p-active: scale(1.35); left: auto; right: 22px; top: 50%; flex-direction: column; gap: 12px; transform: translateY(-50%); }
  .progress i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
  .note-sign { font-size: 22px; }

  .static-scene { grid-template-columns: minmax(360px, 5fr) 7fr; align-items: center; padding: 72px 64px; }
  .static-scene .desk-wrap { height: 620px; }
  .static-scene--text { grid-template-columns: 1fr; padding-block: 72px; }
}

/* =========================================================
   LOPPUSIVU – rauhallisempi kuin tarina: luettavuus ensin
   ========================================================= */
html { scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.wrap { max-width: 1180px; margin-inline: auto; padding-inline: 16px; }
.wrap-narrow { max-width: 880px; }
.sec { padding-block: 80px; font-size: 16px; }
.sec-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; max-width: 760px; }
.sec h2 { font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -0.025em; text-wrap: balance; }
.sec h3 { letter-spacing: -0.015em; line-height: 1.15; }
.lead { font-size: 18px; color: var(--ink-soft); max-width: 46ch; text-wrap: pretty; }

/* Muistilappu (sama kuin tarinassa) */
.hand-note {
  position: relative;
  width: min(100%, 290px);
  padding: 22px 20px 18px;
  background: var(--note);
  border-radius: 3px 3px 14px 3px;
  box-shadow: 8px 14px 22px rgba(94, 50, 9, .16), 1px 2px 3px rgba(94, 50, 9, .10);
  font-family: var(--f-hand); font-weight: 500; font-size: 25px; line-height: 1.15;
  color: #2A2415;
  transform: rotate(var(--r, 0deg));
}
.hand-note::before {
  content: ""; position: absolute; left: 50%; top: -9px; width: 64px; height: 20px; margin-left: -32px;
  background: rgba(232, 228, 218, .8); transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(94, 50, 9, .08);
}

/* ---------- B1. Mitä voit antaa Ainolle? ---------- */
.sec-tasks { overflow: hidden; }
.bomb { position: relative; display: flex; flex-direction: column; gap: 28px; }
.bomb-line {
  font-family: var(--f-head); font-weight: 600; font-size: 36px; line-height: 1.05; letter-spacing: -0.03em;
  text-wrap: balance;
}
.bomb-line-2 { display: block; color: var(--brown); }
.asks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ask {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "to out" "text text";
  align-items: center; gap: 8px 12px;
  padding: 14px 16px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-paper);
  transform: rotate(var(--r, 0deg));
}
.ask:nth-child(odd)  { --r: -.8deg; margin-right: 20px; }
.ask:nth-child(even) { --r: .8deg;  margin-left: 20px; }
.ask-to { grid-area: to; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brown); }
.ask-text { grid-area: text; font-family: var(--f-head); font-weight: 500; font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; }
.ask-out {
  grid-area: out; justify-self: end;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(208, 137, 28, .18); color: var(--brown-deep);
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
}
.ask-out-text { background: transparent; box-shadow: inset 0 0 0 1px rgba(143, 76, 16, .5); letter-spacing: .02em; }

.sticky-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 36px; margin-top: 56px; }
.hn-1 { --r: -2deg; }
.hn-2 { --r: 2.5deg; }

/* paljastus vieritettäessä (JS lisää .reveal-on vain, jos liike sallittu) */
.reveal-on .ask, .reveal-on .hand-note {
  opacity: 0;
  transform: translate3d(0, 26px, 0) rotate(var(--r, 0deg)) scale(.97);
  transition: opacity .6s ease, transform .8s var(--ease-soft);
  transition-delay: var(--rd, 0s);
}
.reveal-on .ask.is-in, .reveal-on .hand-note.is-in { opacity: 1; transform: rotate(var(--r, 0deg)); }
.reveal-on .hn-2 { --rd: .15s; }

/* ---------- B2. Eikö tähän riitä ChatGPT? ---------- */
.sec-compare { background: var(--paper-deep); }
.cmp-head { display: none; }
.cmp-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cmp-row {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
}
.cmp-self, .cmp-aino { padding: 14px 16px; }
.cmp-self { color: #34353B; border-bottom: 1px dashed var(--line-strong); }
.cmp-aino { font-weight: 500; padding-bottom: 16px; }
.cmp-label {
  display: block; margin-bottom: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.cmp-self .cmp-label { color: var(--ink-soft); }
.cmp-aino .cmp-label { color: var(--brown); }

/* ---------- B3. Paketit ---------- */
.packs { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pack {
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 22px 26px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: var(--shadow-paper);
}
.pack-2 { background: #FEFAF2; }
.pack-3 { background: #FCF5E9; }
.pack-4 { background: #FAF0DF; }
.pack h3 { font-size: 26px; }
.pack-steps { display: flex; gap: 4px; }
.pack-steps i { width: 24px; height: 8px; border-radius: 2px; background: var(--line-strong); }
.pack-steps i.on { background: var(--brown); }
.pack-plus { font-weight: 600; font-size: 15px; color: var(--brown); }
.packs-all { margin-top: 32px; text-align: center; color: var(--ink-soft); font-size: 16px; text-wrap: balance; }
.packs-all-label { font-weight: 600; color: var(--ink); }
.packs-cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; }
.packs-cta p { font-size: 18px; font-weight: 500; }

/* ---------- B4. Tietoturva ---------- */
.sec-trust { background: var(--paper-deep); }
.trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.trust-item { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; row-gap: 6px; align-items: start; align-content: start; }
.trust-icon {
  grid-row: span 2;
  width: 52px; height: 52px; padding: 12px;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 14px;
  fill: none; stroke: var(--brown); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.trust-item h3 { font-size: 21px; padding-top: 2px; }
.trust-item p { color: var(--ink-soft); max-width: 44ch; }
.trust-more { margin-top: 40px; }
.trust-more a {
  display: inline-block; padding-block: 11px; text-underline-offset: 4px; font-weight: 600;
}

/* ---------- B5. Usein kysyttyä ---------- */
.faq { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 0;
  font-family: var(--f-head); font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%238F4C10' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: transform .25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--brown); }
.faq-a { padding: 0 44px 22px 0; }
.faq-a p { color: var(--ink-soft); max-width: 62ch; }

/* ---------- B6. Lopetus ja yhteydenotto ---------- */
.sec-contact {
  background-color: var(--desk);
  background-image:
    repeating-linear-gradient(90deg, rgba(143, 76, 16, .04) 0 2px, transparent 2px 23px),
    repeating-linear-gradient(90deg, rgba(143, 76, 16, .025) 0 1px, transparent 1px 61px);
}
.contact-grid { display: grid; gap: 40px; }
.contact-intro { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.contact-intro h2 { font-size: clamp(36px, 5vw, 64px); max-width: 13ch; }
.contact-intro .lead { color: #3D3E45; }
.contact-actions { margin-top: 6px; }
.contact-mail { font-size: 16px; color: #3D3E45; }
.contact-mail a { color: var(--brown-deep); }
.contact-form {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 14px 22px 44px rgba(94, 50, 9, .16), 2px 4px 10px rgba(94, 50, 9, .08);
}
.contact-form h3 { font-size: 23px; }
.form-req { font-size: 14px; color: var(--ink-soft); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 15px; }
.field-opt { font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea {
  font: inherit; font-size: 16px; color: var(--ink);
  min-height: 48px; padding: 11px 14px;
  background: #FFFFFF;
  border: 1.5px solid #8E8373;
  border-radius: 10px;
}
.field textarea { min-height: 136px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #6C6D73; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--brown); outline-offset: 1px; border-color: var(--brown); }
.field [aria-invalid="true"] { border-color: var(--error); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-error { font-size: 14px; font-weight: 600; color: var(--error); }
.btn-submit { align-self: flex-start; cursor: pointer; }
.btn-submit:disabled { opacity: .6; cursor: progress; }
.form-status { font-size: 15px; }
.form-status:empty { display: none; }
.form-status[data-state="warn"] { padding: 12px 14px; border-radius: 10px; background: rgba(208, 137, 28, .16); color: var(--brown-deep); font-weight: 500; }
.form-status[data-state="error"] { padding: 12px 14px; border-radius: 10px; background: rgba(163, 49, 27, .08); color: var(--error); font-weight: 600; }
.form-status[data-state="ok"] { padding: 12px 14px; border-radius: 10px; background: var(--paper); color: var(--ink); font-weight: 600; }
.form-privacy { font-size: 14px; color: var(--ink-soft); }
.form-privacy a, .contact-mail a { font-weight: 600; text-underline-offset: 3px; }

/* ---------- B7. Alatunniste ---------- */
.site-footer { background: var(--ink); color: #E4DDCF; padding-block: 28px; font-size: 15px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.footer-brand { font-family: var(--f-head); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; color: var(--paper); }
.footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.footer-list li + li::before { content: "·"; margin: 0 10px; color: #8C8677; }
.site-footer a { display: inline-block; padding-block: 12px; color: var(--paper); text-underline-offset: 4px; }
.site-footer a:hover { color: #F3D9A8; }
.site-footer :focus-visible { outline-color: var(--orange); }

/* ---------- Loppusivu ≥ 960 px ---------- */
@media (min-width: 960px) {
  .wrap { padding-inline: 40px; }
  .sec { padding-block: 120px; font-size: 18px; }
  .sec-head { margin-bottom: 56px; }
  .lead { font-size: 21px; }

  /* B1: kortit ympärillä, lause keskellä */
  .bomb { display: block; height: 700px; --cw: clamp(236px, 25%, 300px); }
  .bomb-line {
    position: absolute; left: 50%; top: 50%; width: 40%;
    transform: translate(-50%, -50%);
    text-align: center; font-size: clamp(40px, 4.4vw, 60px);
  }
  .asks { display: block; position: absolute; inset: 0; }
  .ask { position: absolute; left: var(--ax); top: var(--ay); width: var(--cw); margin: 0 !important; }
  .ask-text { font-size: 18px; }
  .a-1 { --ax: 0px;                           --ay: 24px;  --r: -2deg;   --rd: 0s; }
  .a-4 { --ax: calc(50% - var(--cw) / 2);     --ay: 0px;   --r: 1deg;    --rd: .08s; }
  .a-5 { --ax: calc(100% - var(--cw));        --ay: 16px;  --r: 2deg;    --rd: .16s; }
  .a-2 { --ax: 3%;                            --ay: 262px; --r: 1.5deg;  --rd: .24s; }
  .a-6 { --ax: calc(97% - var(--cw));         --ay: 250px; --r: -1.5deg; --rd: .32s; }
  .a-8 { --ax: calc(50% - var(--cw) + 6px);   --ay: 540px; --r: -1.5deg; --rd: .40s; }
  .a-3 { --ax: 0px;                           --ay: 486px; --r: -1deg;   --rd: .48s; }
  .a-9 { --ax: calc(50% + 14px);              --ay: 562px; --r: 2deg;    --rd: .56s; }
  .a-7 { --ax: calc(100% - var(--cw));        --ay: 494px; --r: 1deg;    --rd: .64s; }
  .reveal-on .bomb-line { transition: opacity .8s ease; }
  .sticky-notes { margin-top: 64px; gap: 48px; }

  /* B2: kaksi saraketta, Ainon puoli yhtenä paperina */
  .cmp-head { display: grid; grid-template-columns: 1fr 1fr; }
  .cmp-head span {
    padding: 18px 28px 14px;
    font-family: var(--f-head); font-weight: 600; font-size: 20px; letter-spacing: -0.01em;
  }
  .cmp-head span:first-child { color: var(--ink-soft); }
  .cmp-head span:last-child { background: var(--card); color: var(--brown); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 16px 16px 0 0; }
  .cmp-rows { gap: 0; }
  .cmp-row { display: grid; grid-template-columns: 1fr 1fr; background: none; border: 0; border-radius: 0; overflow: visible; }
  .cmp-self, .cmp-aino { padding: 20px 28px; border-top: 1px solid var(--line-strong); }
  .cmp-self { border-bottom: 0; }
  .cmp-aino {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--card); border-left: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong);
  }
  .cmp-aino::before {
    content: ""; flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
    background: var(--brown) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23F6F1E7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  }
  .cmp-row:last-child .cmp-aino { border-bottom: 1px solid var(--line-strong); border-radius: 0 0 16px 16px; }
  .cmp-row:last-child .cmp-self { border-bottom: 1px solid var(--line-strong); }
  .cmp-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  /* B3: portaat – jokainen kortti edellistä korkeammalla */
  .packs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  .pack { padding: 26px 24px 30px; }
  .pack-1 { margin-top: 108px; }
  .pack-2 { margin-top: 72px; }
  .pack-3 { margin-top: 36px; }
  .pack p { font-size: 17px; }
  .pack .pack-plus { font-size: 15px; }
  .packs-all { margin-top: 40px; }

  /* B4 */
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; }
  .trust-item:nth-child(5) { grid-column: 1 / -1; }
  .trust-item:nth-child(5) p { max-width: 72ch; }
  .trust-item h3 { font-size: 23px; }

  /* B5 */
  .faq-item summary { font-size: 22px; min-height: 76px; }

  /* B6 */
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .contact-intro { position: sticky; top: 120px; }
  .contact-form { padding: 34px 32px; }
}

/* =========================================================
   Kierros 5: tietopankki, tietoturva ja vastuullisuus, tietosuojasivu
   ========================================================= */
.eyebrow {
  font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brown);
}

/* osioiden taustat vuorottelevat */
.sec-kb { background: var(--paper-deep); }
.sec-trust { background: var(--paper); }
.sec-faq { background: var(--paper); }

/* pakettien luetelmat */
.pack-list { font-size: 16px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pack-list li { position: relative; padding-left: 18px; line-height: 1.4; }
.pack-list li::before {
  content: ""; position: absolute; left: 2px; top: .6em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--orange);
}
.pack-list a { color: var(--brown-deep); font-weight: 600; text-underline-offset: 3px; }

/* ---------- B3b. Tietopankki ---------- */
.kb-grid { display: grid; gap: 40px; }
.kb-steps-col { display: flex; flex-direction: column; gap: 20px; }
.kb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.kb-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.kb-num {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); border: 1.5px solid var(--brown);
  font-family: var(--f-head); font-weight: 700; font-size: 19px; color: var(--brown);
}
.kb-steps p { padding-top: 9px; font-size: 17px; font-weight: 500; }
.kb-small { font-size: 15px; color: var(--ink-soft); padding-left: 58px; }

.kb-examples { display: flex; flex-direction: column; gap: 18px; }
.kb-mail {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 14px 22px 44px rgba(94, 50, 9, .16), 2px 4px 10px rgba(94, 50, 9, .08);
  overflow: hidden;
  transform: rotate(-.6deg);
}
.kb-mail-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: var(--ink); color: var(--paper);
  font-family: var(--f-head); font-weight: 600; font-size: 14px;
}
.kb-dots { display: flex; gap: 5px; }
.kb-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(246, 241, 231, .35); }
.kb-msg { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.kb-msg + .kb-msg { border-top: 1px solid var(--line); }
.kb-msg-q { background: #FBF7EF; }
.kb-from { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.kb-from-aino { color: var(--brown); }
.kb-msg p:not(.kb-from):not(.kb-source):not(.kb-sign) { font-size: 16px; line-height: 1.5; }
.kb-source {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-top: 4px; padding: 5px 10px; border-radius: 8px;
  background: rgba(208, 137, 28, .14); color: var(--brown-deep);
  font-size: 14px; font-weight: 600;
}
.kb-source-ok { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--brown); color: var(--paper); }
.kb-sign { font-family: var(--f-hand); font-size: 22px; line-height: 1; color: var(--brown); }
.kb-mail-small { width: 88%; margin-left: auto; transform: rotate(.8deg); }
.kb-mail-small .kb-msg p:not(.kb-from):not(.kb-sign) { font-size: 15px; }

/* ---------- Anna / älä anna -lohko (tietopankki + tietoturva) ---------- */
.dodont { margin-top: 64px; display: flex; flex-direction: column; gap: 20px; }
.dodont-title { font-size: 26px; text-wrap: balance; }
.dd-grid { display: grid; gap: 18px; }
.dd-card { padding: 22px 20px 24px; border-radius: 16px; }
.dd-card h4 { display: flex; align-items: center; gap: 10px; font-size: 20px; letter-spacing: -0.01em; }
.dd-do {
  background: var(--card);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-paper);
  transform: rotate(-.4deg);
}
.dd-dont {
  background: rgba(143, 76, 16, .045);
  border: 1.5px dashed #BDB2A1;
  transform: rotate(.4deg);
}
.dd-mark { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; position: relative; }
.dd-do .dd-mark { background: var(--brown) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23F6F1E7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.dd-dont .dd-mark { box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.dd-dont .dd-mark::after { content: ""; position: absolute; left: 7px; right: 7px; top: 12px; height: 2px; border-radius: 1px; background: var(--ink-soft); }
.dd-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.dd-list li { position: relative; padding-left: 28px; line-height: 1.45; }
.dd-do .dd-list li::before {
  content: ""; position: absolute; left: 2px; top: .2em; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%238F4C10' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.dd-dont .dd-list li::before {
  content: ""; position: absolute; left: 5px; top: .72em; width: 12px; height: 2px; border-radius: 1px;
  background: var(--ink-soft);
}
.dd-note { margin-top: 18px; font-size: 16px; color: var(--ink-soft); max-width: 70ch; }

/* Nyrkkisääntö */
.kb-rule { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.kb-note { --r: -1.5deg; width: min(100%, 440px); font-size: 27px; text-align: left; }
.kb-rule-note { font-size: 16px; color: var(--ink-soft); max-width: 46ch; }
.kb-lines {
  list-style: none; margin: 40px auto 0; padding: 0; max-width: 760px;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--line-strong); padding-top: 24px;
  font-size: 16px; color: #3D3E45;
}

/* Näin Aino toimii */
.principles { margin-top: 64px; display: flex; flex-direction: column; gap: 24px; }
.principle-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.principle { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; row-gap: 4px; align-content: start; }
.principle .trust-icon { grid-row: span 2; }
.principle h4 { font-size: 20px; letter-spacing: -0.01em; padding-top: 2px; }
.principle p { color: var(--ink-soft); }

/* ---------- Tietosuojasivu ---------- */
.subpage main.doc { padding-top: 64px; }
.doc-wrap { max-width: 820px; padding-block: 48px 96px; display: flex; flex-direction: column; gap: 40px; }
.doc-head { display: flex; flex-direction: column; gap: 14px; }
.doc-head h1 { font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.025em; text-wrap: balance; }
.doc-head .lead a { color: var(--brown-deep); font-weight: 600; text-underline-offset: 3px; }
.doc-toc { padding: 18px 20px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 14px; }
.doc-toc ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 2px; }
.doc-toc li { padding-block: 8px; }
.doc-toc a { display: inline-block; vertical-align: top; color: var(--brown-deep); font-weight: 500; text-underline-offset: 3px; }
.doc-sec { display: flex; flex-direction: column; gap: 14px; font-size: 17px; scroll-margin-top: 88px; }
.doc-sec + .doc-sec { border-top: 1px solid var(--line-strong); padding-top: 36px; }
.doc-sec h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; }
.doc-sec h3 { font-size: 20px; margin-top: 8px; }
.doc-n { color: var(--brown); }
.doc-sub { color: var(--ink-soft); }
.doc-note { font-size: 15px; color: var(--ink-soft); }
.doc-note a { color: var(--brown-deep); font-weight: 600; }
.doc-list li strong { color: var(--ink); }
.doc-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.doc-list li { position: relative; padding-left: 26px; line-height: 1.5; }
.doc-list li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--orange); }
.doc-list-check li::before {
  left: 0; top: .2em; width: 18px; height: 18px; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%238F4C10' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.doc-list-dash li::before { left: 4px; top: .75em; width: 12px; height: 2px; border-radius: 1px; background: var(--ink-soft); }
.doc-rule { padding: 16px 18px; background: var(--note); border-radius: 4px 4px 14px 4px; box-shadow: var(--shadow-paper); }
mark.todo {
  padding: 2px 8px; border-radius: 6px;
  background: rgba(208, 137, 28, .18); color: var(--brown-deep);
  font-weight: 600; font-size: .95em;
}
.table-scroll { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); }
.doc-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.doc-table th, .doc-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.doc-table thead th { font-family: var(--f-head); font-weight: 600; font-size: 15px; color: var(--ink-soft); background: var(--paper); }
.doc-table tbody tr:last-child th, .doc-table tbody tr:last-child td { border-bottom: 0; }
.doc-table tbody th { font-weight: 600; }
.doc-sec p a { color: var(--brown-deep); font-weight: 600; }

@media (min-width: 960px) {
  .pack-list { font-size: 17px; }
  .kb-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; }
  .kb-steps p { font-size: 19px; }
  .kb-msg { padding: 18px 22px; }
  .kb-msg p:not(.kb-from):not(.kb-source):not(.kb-sign) { font-size: 17px; }
  .dodont { margin-top: 88px; }
  .dodont-title { font-size: 32px; }
  .dd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .dd-card { padding: 28px 28px 30px; }
  .dd-list li { font-size: 17px; }
  .kb-rule { margin-top: 64px; }
  .principles { margin-top: 88px; }
  .principle-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .principle { grid-template-columns: 1fr; row-gap: 10px; }
  .principle .trust-icon { grid-row: auto; }
  .subpage main.doc { padding-top: 72px; }
  .doc-wrap { padding-block: 72px 120px; }
}

/* =========================================================
   Kierros 6: nimisiru, vastuullisuus-sivun sisällys, taulukkokortit, seloste, alatunniste
   ========================================================= */

/* Kohtaus 2: vastaanottaja nimisiruna, kuten sähköpostiohjelmissa */
.to-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px 3px 3px; border-radius: 999px;
  background: rgba(143, 76, 16, .10);
  color: var(--ink); font-weight: 600;
  opacity: 0; transform: scale(.9);
  transition: opacity .35s ease, transform .45s var(--ease-stick);
}
.to-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brown); color: var(--paper);
  font-family: var(--f-head); font-size: 12px; font-weight: 700;
}
.mail-row { align-items: center; }
.is-1 .to-chip { opacity: 1; transform: none; transition-delay: .2s; }
.story:not(.is-1) .to-chip { transition-delay: 0s; }

/* Vastuullisuus: sisällys ja paluulinkit */
.doc-toc-title { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.doc-toc a[aria-current] { color: var(--ink); font-weight: 700; }
.doc-main { display: flex; flex-direction: column; gap: 40px; }
.doc-back { margin-top: 4px; font-size: 15px; }
.doc-back a { display: inline-block; padding-block: 10px; color: var(--brown-deep); font-weight: 600; text-underline-offset: 3px; }

/* Palveluntarjoajat: alle 640 px kortteina */
@media (max-width: 639px) {
  .table-scroll { overflow: visible; border: 0; border-radius: 0; background: none; }
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table th, .doc-table td { display: block; width: 100%; }
  .doc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .doc-table tr {
    padding: 16px 18px; margin-bottom: 12px;
    background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px;
  }
  .doc-table tbody th { padding: 0 0 8px; border: 0; font-family: var(--f-head); font-size: 20px; }
  .doc-table td { padding: 6px 0; border: 0; }
  .doc-table tbody tr:last-child td { border: 0; }
  .doc-table td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
  }

  /* Alatunniste: linkit omille riveilleen ilman erottimia */
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-list { flex-direction: column; align-items: flex-start; }
  .footer-list li + li::before { content: none; }
  .footer-list li:not(:has(a)) { padding-block: 6px; }
}

/* Tietosuojaseloste (/tietosuoja/) */
.doc-legal { gap: 16px; }
.doc-legal h1 { font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.025em; }
.doc-legal h2 { font-size: clamp(22px, 2.4vw, 27px); letter-spacing: -0.015em; margin-top: 24px; }
.doc-legal p, .doc-legal li { font-size: 17px; line-height: 1.6; }
.doc-legal ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.doc-legal a { color: var(--brown-deep); font-weight: 600; text-underline-offset: 3px; }
.doc-meta { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--ink-soft); }
.doc-backhome a { display: inline-block; padding-block: 10px; }

@media (min-width: 1024px) {
  .doc-layout {
    max-width: 1180px;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    grid-template-areas: "toc head" "toc main";
    column-gap: 72px; row-gap: 48px;
    align-items: start;
  }
  .doc-layout .doc-head { grid-area: head; max-width: 780px; }
  .doc-layout .doc-main { grid-area: main; max-width: 780px; }
  .doc-layout .doc-toc {
    grid-area: toc;
    position: sticky; top: 104px;
    padding: 4px 0 4px 18px;
    background: none; border: 0; border-left: 2px solid var(--line-strong); border-radius: 0;
  }
  .doc-layout .doc-toc li { padding-block: 6px; }
  .doc-layout .doc-toc a { position: relative; color: var(--ink-soft); text-decoration: none; }
  .doc-layout .doc-toc a:hover { color: var(--brown-deep); text-decoration: underline; }
  .doc-layout .doc-toc a[aria-current] { color: var(--brown-deep); }
  .doc-layout .doc-toc li { position: relative; }
  .doc-layout .doc-toc li:has(a[aria-current])::before {
    content: ""; position: absolute; left: -42px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--brown);
  }
  .doc-back { display: none; }
}

/* =========================================================
   Hinnat (#hinnat)
   ========================================================= */
.anchor-alias { display: block; height: 0; }
.price-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.price-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px 22px 26px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: var(--shadow-paper);
}
.price-card h3 { font-size: 26px; }
.price { display: flex; align-items: baseline; gap: 4px; font-family: var(--f-head); }
.price-num { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price-unit { font-size: 18px; font-weight: 600; color: var(--ink-soft); }
.price-quota {
  align-self: flex-start; padding: 4px 11px; border-radius: 999px;
  background: rgba(208, 137, 28, .16); color: var(--brown-deep);
  font-size: 14px; font-weight: 700;
}
.pack-list-all { font-weight: 600; color: var(--brown-deep); }
.price-foot {
  margin-top: auto; padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
  font-size: 14px; color: var(--ink-soft);
}
.price-btn { align-self: stretch; white-space: normal; text-align: center; }
.btn-large { min-height: 56px; padding: 14px 32px; font-size: 19px; }

/* Räätälöity: osion pääosa */
.custom-card {
  position: relative;
  margin-top: 28px;
  padding: 28px 20px;
  display: flex; flex-direction: column; gap: 24px;
  background: var(--card);
  border: 2px solid var(--brown);
  border-radius: 22px;
  box-shadow: 14px 22px 50px rgba(94, 50, 9, .16), 2px 4px 10px rgba(94, 50, 9, .08);
}
.custom-badge {
  align-self: flex-start;
  padding: 6px 14px; border-radius: 999px;
  background: var(--brown); color: var(--paper);
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
}
.custom-head { display: flex; flex-direction: column; gap: 12px; }
.custom-head h3 { font-size: clamp(28px, 3.2vw, 40px); max-width: 22ch; text-wrap: balance; }
.custom-price { font-size: 18px; font-weight: 600; color: var(--brown-deep); }
.custom-grid { display: grid; gap: 24px; }
.custom-kb {
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px 18px;
  background: var(--paper-deep);
  border-radius: 16px;
}
.custom-kb h4, .custom-more h4 { font-size: 21px; letter-spacing: -0.01em; }
.custom-intro { font-size: 17px; }
.custom-steps p { font-size: 16px; }
.bubbles-label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.bubbles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.bubbles li {
  padding: 9px 14px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 16px 16px 16px 4px;
  box-shadow: 0 2px 6px rgba(94, 50, 9, .06);
  font-family: var(--f-head); font-weight: 500; font-size: 15px;
}
.custom-kb-link { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; font-size: 15px; }
.custom-kb-link a { display: inline-block; padding-block: 10px; color: var(--brown-deep); font-weight: 600; text-underline-offset: 3px; }
.custom-kb-note { color: var(--ink-soft); }
.custom-more { display: flex; flex-direction: column; gap: 16px; }
.custom-more .btn-large { align-self: flex-start; margin-top: 8px; }

/* Näin hinnoittelu toimii */
.howprice { margin-top: 64px; display: flex; flex-direction: column; gap: 20px; }
.howprice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.howprice-list li { padding-top: 16px; border-top: 2px solid var(--brown); }
.howprice-list h4 { font-size: 19px; margin-bottom: 6px; }
.howprice-list p { color: var(--ink-soft); }
.howprice-note { font-size: 14px; color: var(--ink-soft); }

/* Usein kysyttyä hinnoista */
.price-faq { margin-top: 64px; display: flex; flex-direction: column; gap: 12px; max-width: 880px; }
.faq-a a { color: var(--brown-deep); font-weight: 600; text-underline-offset: 3px; }

@media (min-width: 960px) {
  .price-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  .price-card { padding: 28px 26px 30px; }
  .custom-card { margin-top: 48px; padding: 44px 40px 40px; }
  .custom-badge { position: absolute; top: -16px; right: 36px; }
  .custom-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: start; }
  .custom-kb { padding: 30px 30px 32px; }
  .custom-intro { font-size: 18px; }
  .custom-steps p { font-size: 17px; }
  .howprice { margin-top: 88px; }
  .howprice-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .price-faq { margin-top: 88px; }
}

/* =========================================================
   Konsultointi (#konsultointi) – rauhallisempi: aikajana ja lyhyet tekstit
   ========================================================= */
.sec-consult { background: var(--paper-deep); }
.consult-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.consult-step {
  position: relative; align-content: start;
  display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; row-gap: 4px;
  padding-bottom: 28px;
}
.consult-step .kb-num { grid-row: span 2; position: relative; z-index: 1; }
/* pystysuora aikajana mobiilissa */
.consult-step:not(:last-child)::before {
  content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px;
  background: var(--line-strong);
}
.consult-step h3 { font-size: 21px; padding-top: 9px; }
.consult-step p { color: var(--ink-soft); max-width: 46ch; }

.consult-grid { margin-top: 48px; display: grid; gap: 40px; }
.consult-get, .consult-examples { display: flex; flex-direction: column; gap: 16px; }
.consult-list { margin-top: 0; }
.consult-list li::before {
  content: ""; position: absolute; left: 2px; top: .2em; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%238F4C10' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.consult-ex { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.consult-ex li {
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font-size: 16px; line-height: 1.45;
}
.consult-note { --r: -1.2deg; margin: 48px auto 0; width: min(100%, 520px); font-size: 26px; }
.consult-cta { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; }
.consult-price { font-size: 18px; font-weight: 500; }

@media (min-width: 960px) {
  .consult-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .consult-step { grid-template-columns: 1fr; row-gap: 10px; padding-bottom: 0; align-content: start; }
  .consult-step .kb-num { grid-row: auto; }
  .consult-step h3 { padding-top: 6px; }
  /* vaakasuora aikajana työpöydällä */
  .consult-step:not(:last-child)::before { left: 56px; right: -24px; top: 21px; bottom: auto; width: auto; height: 2px; }
  .consult-grid { margin-top: 72px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .consult-ex li { font-size: 17px; }
  .consult-note { margin-top: 64px; }
}

/* Kuusi navigaatiolinkkiä mahtuu riville vasta 1180 px:stä: sitä kapeammilla työpöydillä valikko */
@media (min-width: 960px) and (max-width: 1179px) {
  .menu-toggle { display: inline-grid; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 72px;
    flex-direction: column; gap: 0; margin: 0;
    padding: 4px clamp(32px, 5vw, 80px) 12px;
    background: var(--paper); border-bottom: 1px solid var(--line-strong);
    box-shadow: 0 18px 30px rgba(94, 50, 9, .10);
  }
  .menu-open .nav-links { display: flex; }
  .nav-link { min-height: 52px; font-size: 18px; border-bottom: 1px solid var(--line); }
  .nav-links li:last-child .nav-link { border-bottom: 0; }
}

/* =========================================================
   Ensimmäinen näkymä, esimerkkien pakettimerkki, tietoturvalinkki, asiakastarina
   ========================================================= */
.hero-intro { font-size: 16px; line-height: 1.5; color: var(--ink); max-width: 44ch; }
.hero-cta { margin-top: 2px; gap: 10px; }
.hero-cta .btn { min-height: 46px; padding: 10px 18px; font-size: 16px; }
.cap-1 { gap: 10px; }
.cap-1 .kicker { margin-bottom: 10px; }

.ask-chips { grid-area: out; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ask-chips .ask-out { grid-area: auto; }
.ask-tier {
  padding: 3px 8px; border-radius: 6px;
  background: rgba(208, 137, 28, .18); color: var(--brown-deep);
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
}

.trust-link { display: inline-block; padding-block: 8px; color: var(--brown-deep); font-weight: 600; text-underline-offset: 3px; }

/* Asiakastarina (index.html:ssä kommenttina, kunnes oikea sisältö on saatu) */
.sec-quote { background: var(--paper); }
.testimonial { margin: 0 auto; max-width: 760px; display: flex; flex-direction: column; gap: 16px; text-align: center; }
.testimonial-figure { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.testimonial-num { font-family: var(--f-head); font-weight: 700; font-size: clamp(44px, 6vw, 72px); line-height: 1; color: var(--brown); letter-spacing: -0.03em; }
.testimonial-num-label { font-size: 15px; color: var(--ink-soft); }
.testimonial blockquote { margin: 0; font-family: var(--f-head); font-weight: 500; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; letter-spacing: -0.015em; text-wrap: balance; }
.testimonial figcaption { font-size: 16px; color: var(--ink-soft); }
.testimonial-name { font-weight: 700; color: var(--ink); }

@media (min-width: 960px) {
  .hero-intro { font-size: 19px; }
  .hero-cta .btn { min-height: 50px; padding: 12px 22px; font-size: 17px; }
  .cap-1 { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}