/* ════════════════════════════════════════════════════════════════
   NKCompany — ulkoasu (v5: tuotesivu, puhdas sans-typografia)
   Rakenne:  1 Värit ja mitat · 2 Perusasiat · 3 Yläpalkki · 4 Aloitusosio (tuotenäkymä)
             5 Apuri (chat) · 6 Kelluva apuri · 7 Osiot · 8 Liikkeet · 9 Responsiivisuus
             10 Tietosuojasivu
   Värit muutat kohdasta 1. Kaikki fontit ovat omalla palvelimella (Inter).
   ════════════════════════════════════════════════════════════════ */

/* 1. VÄRIT JA MITAT ─────────────────────────────────────────────── */
:root {
  --bg:      #FFFFFF;   /* pääpohja */
  --bg-2:    #F5F6F8;   /* vaaleanharmaa osiotausta */
  --bg-3:    #ECEEF2;
  --card:    #FFFFFF;
  --ink:     #0E1116;   /* lähes musta teksti */
  --muted:   #596170;   /* toissijainen teksti, kontrasti ≥ 5,5:1 */
  --dim:     #7C8493;   /* otsikoiden hiljaisempi puoli (vain suuri teksti) */
  --line:    #E3E6EC;
  --blue:    #1448E6;   /* korostusväri */
  --blue-d:  #0F37B8;
  --tint:    #E9EFFE;
  --tint-2:  #D2DEFC;
  --night:   #0A0C10;   /* tumma yhteysosio */
  --ok:      #12703F;
  --warn:    #9B2C20;
  --red:     #D0291E;   /* yläpalkin Kokeile-linkki (kontrasti valkoisella ≥ 4,5:1) */
  --red-d:   #B01F16;
  --red-tint:#FDECEA;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);   /* sisääntulot */
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);     /* poistumiset */
  --spring:   cubic-bezier(0.34, 1.36, 0.64, 1); /* käyttöliittymä: jousi, pieni ylitys */
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --chat-h:  clamp(520px, 64svh, 620px);   /* apurin korkeus aloitusosiossa */
  --shadow:  0 1px 2px rgba(14,17,22,.05), 0 24px 48px -24px rgba(14,17,22,.22), 0 60px 120px -60px rgba(20,72,230,.35);
  color-scheme: light;
}

/* 2. PERUSASIAT ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; }
img, svg { max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--tint-2); }
.wrap { width: min(1240px, calc(100% - 56px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: 10px; }
.skip:focus { top: 12px; }

/* Otsikot: Inter, tiukka laskeva kirjainväli. Sininen korostus (.grad) tai hiljaisempi toinen puoli (.dim). */
h1, h2 { font-weight: 600; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.02em; font-weight: 600; }
.grad { color: var(--blue); }
.dim { color: var(--dim); }
.eyebrow { margin-bottom: 18px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--blue); }
.lede { max-width: 34em; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--muted); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; background: var(--blue); color: #fff; border: 1px solid var(--blue); border-radius: 999px; font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; transition: background .25s var(--ease-out), transform .3s var(--spring), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out); }
.btn:hover { background: var(--blue-d); border-color: var(--blue-d); box-shadow: 0 14px 30px -14px rgba(20,72,230,.85); transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
.btn--ghost { background: transparent; color: inherit; border-color: rgba(14,17,22,.2); }
.btn--ghost:hover { background: rgba(14,17,22,.04); border-color: currentColor; box-shadow: none; }
.btn--small { min-height: 38px; padding: 0 18px; font-size: 14px; }
.text-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--blue); text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--tint); color: var(--blue-d); font-size: 11.5px; font-weight: 650; letter-spacing: .01em; }

/* 3. YLÄPALKKI ──────────────────────────────────────────────────── */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 80; background: var(--blue); transform-origin: left; transform: scaleX(var(--p, 0)); pointer-events: none; }
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.72); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease-out); }
.site-header.is-stuck { border-bottom-color: var(--line); }
.site-header__in { display: flex; align-items: center; gap: 24px; height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 17px; letter-spacing: -.025em; text-decoration: none; }
.monogram { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--blue); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: -.03em; }
.monogram--lg { width: 52px; height: 52px; border-radius: 14px; font-size: 18px; margin-bottom: 20px; }
.site-nav { display: flex; gap: 4px; margin-left: auto; font-size: 14px; font-weight: 500; }
.site-nav a { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--muted); transition: color .2s var(--ease-out), background .2s var(--ease-out); }
.site-nav a:hover { color: var(--ink); }
.site-nav a.is-active { color: var(--ink); background: var(--bg-2); }
/* Kokeile-linkki erottuu yläpalkissa punaisella (sama puhelimen valikossa). */
.site-nav a[href="/kokeile.html"] { color: var(--red); }
.site-nav a[href="/kokeile.html"]:hover { color: var(--red-d); }
.site-nav a[href="/kokeile.html"][aria-current="page"] { color: var(--red-d); background: var(--red-tint); }

/* 4. ALOITUSOSIO ────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(24px, 2.6vw, 38px) 0 clamp(72px, 9vw, 130px); overflow: clip; text-align: center; }
.hero__glow { position: absolute; inset: -10% -10% auto; height: 80%; pointer-events: none; background: radial-gradient(50% 55% at 50% 0%, rgba(20,72,230,.14), transparent 70%), radial-gradient(35% 40% at 85% 40%, rgba(120,140,190,.14), transparent 70%); transform: translateY(calc(var(--py, 0) * 1px)); }
.hero .wrap { position: relative; }
.hero__copy { max-width: 980px; margin: 0 auto; }
.hero h1 { margin-bottom: 16px; font-size: clamp(42px, 5vw, 72px); line-height: .98; letter-spacing: -.05em; }
.hero .lede { margin: 0 auto 26px; max-width: 56em; font-size: 19px; }
.hero .eyebrow { max-width: 40em; margin: 0 auto 12px; }
.starters { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 22px; }
.starters__label { margin-bottom: 2px; font-size: 13px; font-weight: 650; color: var(--ink); }
.starters button { min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 550; font-size: 14.5px; transition: transform .3s var(--spring), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.starters button:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(20,72,230,.7); }
.starters button:active { transform: none; }

/* Tuotenäkymä: chat ja sen tekemä luonnos samassa ikkunassa */
.stage { position: relative; text-align: left; transform-origin: top center; }
.window { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); max-width: 1160px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--shadow); overflow: hidden; }
.window::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.window__chat { position: relative; min-width: 0; }
.chat-parked { display: grid; align-content: center; justify-items: center; gap: 14px; height: var(--chat-h); padding: 28px; text-align: center; color: var(--muted); }
.window .nk-chat { border: 0; border-radius: 0; box-shadow: none; }
.draft { display: flex; flex-direction: column; min-width: 0; padding: 26px 28px; background: linear-gradient(180deg, #F7F8FB, #F1F3F8); border-left: 1px solid var(--line); }
.draft__head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.draft__head strong { font-size: 16px; letter-spacing: -.015em; }
.draft__head span { font-size: 13px; color: var(--muted); }
.draft__empty { padding: 26px 0; }
.draft__empty i { display: block; height: 12px; margin-bottom: 14px; border-radius: 6px; background: var(--bg-3); }
.draft__empty i:nth-child(1) { width: 38%; } .draft__empty i:nth-child(2) { width: 88%; } .draft__empty i:nth-child(3) { width: 72%; } .draft__empty i:nth-child(4) { width: 55%; }
.draft__empty p { margin-top: 22px; font-size: 14.5px; color: var(--muted); }
.draft__empty .starters button { text-align: left; }
.draft__body { flex: 1; padding: 18px 0 8px; overflow-y: auto; }
.draft__h { margin: 0 0 6px; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }
.draft__h--open { margin-top: 22px; color: var(--muted); }
.draft__rows > div { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; animation: rowin .5s ease both; }
.draft__rows dt { color: var(--muted); }
.draft__rows dd { font-weight: 550; overflow-wrap: anywhere; }
.draft__open li { position: relative; padding: 1px 0 1px 24px; font-size: 14.5px; animation: rowin .5s ease both; }
.draft__q { display: block; width: calc(100% + 8px); padding: 5px 78px 5px 8px; margin-left: -8px; border: 0; border-radius: 8px; background: none; font: inherit; text-align: left; color: var(--ink); transition: background .2s var(--ease-out), color .2s var(--ease-out); }
.draft__q:hover { background: var(--tint); color: var(--blue-d); }
.draft__q::after { content: "Vastaa →"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12.5px; font-weight: 600; color: var(--blue); opacity: 0; transition: opacity .2s var(--ease-out); }
.draft__q:hover::after, .draft__q:focus-visible::after { opacity: 1; }
.draft__open li::before { content: "?"; position: absolute; left: 0; top: 9px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--tint-2); color: var(--blue-d); font-size: 10.5px; font-weight: 700; line-height: 1; }
@keyframes rowin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.draft__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.draft__foot p { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* 5. APURI (CHAT) ───────────────────────────────────────────────── */
.nk-chat {
  display: flex; flex-direction: column;
  height: var(--chat-h);
  background: var(--card); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow);
  overflow: hidden; font-size: 15.5px; line-height: 1.5;
}
.nk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex: none; }
.nk-head strong { display: block; font-size: 16px; letter-spacing: -.01em; }
.nk-head strong::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ok); vertical-align: 1px; }
.nk-head span { display: block; font-size: 13px; color: var(--muted); }
#nk-close { display: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--bg-2); place-items: center; }
#nk-close:hover { background: var(--line); }
.nk-chat.is-floating #nk-close { display: grid; }

#nk-conversation { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.nk-notice { margin: 0; padding: 10px 20px; font-size: 12.5px; line-height: 1.45; color: var(--muted); background: var(--bg-2); flex: none; }
.nk-notice a { color: var(--blue); }
.nk-notice--foot { padding: 8px 20px 14px; background: none; font-size: 12px; border-top: 1px solid var(--line); }
.nk-messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; scroll-behavior: smooth; }
.nk-message { margin: 0; max-width: 88%; padding: 11px 15px; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.nk-message.assistant { align-self: flex-start; background: var(--bg-2); border-bottom-left-radius: 6px; }
.nk-message.user { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.nk-message.failed { background: #fff; color: var(--ink); border: 1.5px solid var(--warn); }
/* Apurin kirjoitustila: kolme isompaa sinistä pistettä aaltona kuplassa. Rivi #nk-status pysyy ruudunlukijalle, mutta piilotetaan silmiltä, kun apuri kirjoittaa. */
.nk-message.typing { display: inline-flex; gap: 7px; align-items: center; padding: 16px 18px; animation: nk-pop-in .32s var(--ease-smooth-out) both; }
.nk-message.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: nk-wave 1.3s ease-in-out infinite both; }
.nk-message.typing i:nth-child(2) { animation-delay: .16s; }
.nk-message.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes nk-wave { 0%, 60%, 100% { opacity: .3; transform: translateY(0) scale(.8); } 30% { opacity: 1; transform: translateY(-4px) scale(1); } }
@keyframes nk-pop-in { from { opacity: 0; transform: translateY(6px) scale(.96); filter: blur(2px); } to { opacity: 1; transform: none; filter: blur(0); } }
#nk-chat[aria-busy="true"] #nk-status:not(:empty):not(.is-error) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .nk-message.typing, .nk-message.typing i { animation: none; } .nk-message.typing i:nth-child(1) { opacity: .45; } .nk-message.typing i:nth-child(2) { opacity: .7; } }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
.nk-retry { align-self: flex-start; display: flex; gap: 10px; align-items: center; margin-top: -2px; font-size: 14px; color: var(--warn); }
.nk-retry button { min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--warn); background: #fff; color: var(--warn); font-weight: 600; }
.nk-retry button:hover { background: var(--warn); color: #fff; }
.nk-inline-contact { align-self: flex-start; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 600; box-shadow: 0 8px 22px -10px rgba(31,70,214,.8); }
.nk-inline-contact:hover { background: var(--blue-d); }

.nk-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 12px; flex: none; }
.nk-quick button { min-height: 38px; padding: 0 14px; border: 1px solid #D5D9E2; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 500; transition: border-color .15s var(--ease-out), background .15s var(--ease-out); }
.nk-quick button:hover { border-color: var(--blue); background: var(--tint); }
.nk-status { margin: 0; padding: 0 20px; min-height: 0; font-size: 13.5px; color: var(--muted); flex: none; }
.nk-status:not(:empty) { padding-bottom: 8px; }

#nk-chat-form { padding: 0 16px 8px; flex: none; }
.nk-input-row { display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 18px; background: var(--bg-2); border: 1.5px solid #D5D9E2; border-radius: 999px; transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.nk-input-row:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px var(--tint); background: #fff; }
#nk-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; min-height: 44px; font-size: 16px; /* 16 px estää iOS-zoomin */ }
#nk-input::placeholder { color: #5F6675; }
#nk-send { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; transition: background .2s var(--ease-out); }
#nk-send:hover:not(:disabled) { background: var(--blue-d); }
#nk-send:disabled { opacity: .5; cursor: progress; }
.nk-tools { display: flex; justify-content: space-between; gap: 10px; padding: 0 16px 6px; flex: none; }
.nk-tools button { min-height: 40px; padding: 0 6px; border: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.nk-tools button:hover { color: var(--ink); }
#nk-prepare { color: var(--blue); font-weight: 600; }

/* Yhteydenoton viimeistely */
#nk-contact { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 24px; }
#nk-contact h3 { font-size: 21px; letter-spacing: -.02em; margin: 10px 0 8px; }
#nk-contact .nk-notice { padding: 0; background: none; margin-bottom: 14px; font-size: 13.5px; }
#nk-contact label { display: block; margin: 14px 0 6px; font-size: 14px; font-weight: 600; }
#nk-contact input:not([type=checkbox]), #nk-contact textarea { width: 100%; padding: 12px 14px; border: 1.5px solid #D5D9E2; border-radius: 12px; background: #fff; font-size: 16px; }
#nk-contact textarea { min-height: 250px; line-height: 1.55; resize: vertical; }
#nk-contact input:not([type=checkbox]):focus, #nk-contact textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px var(--tint); }
.nk-back { display: inline-flex; align-items: center; min-height: 40px; padding: 0; border: 0; background: none; color: var(--blue); font-size: 14.5px; font-weight: 600; }
.nk-back:hover { text-decoration: underline; }
.nk-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nk-recipient { margin: 18px 0 4px; padding: 12px 14px; background: var(--tint); border-radius: 12px; font-size: 14px; }
#nk-contact label.nk-check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 14px; line-height: 1.5; margin: 12px 0 16px; }
.nk-check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--blue); }
#nk-contact-send { width: 100%; }
#nk-contact .nk-status { padding: 12px 0 0; font-size: 14.5px; color: var(--ink); }
#nk-contact .text-link { display: inline-block; margin-top: 12px; font-size: 14.5px; }



/* 6. KELLUVA APURI ──────────────────────────────────────────────── */
.nk-float { position: fixed; z-index: 60; right: 24px; bottom: 24px; width: min(430px, calc(100vw - 32px)); }
.nk-float__body { filter: drop-shadow(0 28px 50px rgba(14,17,22,.32)); }
.nk-chat.is-floating { height: min(700px, calc(100svh - 48px)); border: 1px solid var(--line); border-radius: 24px; }
.nk-launcher { position: fixed; z-index: 50; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px 0 18px; border: 0; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 600; font-size: 15px; box-shadow: 0 16px 36px -12px rgba(20,72,230,.8); }
.nk-launcher:hover { background: var(--blue-d); }
.nk-launcher.is-in { animation: pop .4s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.nk-unsent { opacity: .8; font-size: 12.5px; }
@keyframes nudge { 0% { box-shadow: 0 0 0 0 rgba(20,72,230,.45); } 100% { box-shadow: 0 0 0 14px rgba(20,72,230,0); } }
.nk-input-row.is-nudged { animation: nudge .9s ease-out 1; border-color: var(--blue); }

/* 7. OSIOT ──────────────────────────────────────────────────────── */
.section { padding: clamp(80px, 11vw, 160px) 0; }
.section-head { margin-bottom: clamp(36px, 5vw, 72px); }
.section-head--center { max-width: 920px; margin-inline: auto; text-align: center; }
.section h2, .contact h2 { font-size: clamp(38px, 5.6vw, 80px); }
.section-sub { max-width: 36em; margin-top: 22px; font-size: 19px; color: var(--muted); }
.section-head--center .section-sub { margin-inline: auto; }
.section-cta { margin-top: clamp(28px, 4vw, 44px); }

/* Lause, jonka sanat tummuvat vieritettäessä */
.statement { padding: clamp(40px, 6vw, 90px) 0 clamp(80px, 11vw, 160px); }
.statement__text { max-width: 20em; margin-inline: auto; font-size: clamp(30px, 4.6vw, 64px); font-weight: 600; line-height: 1.08; letter-spacing: -.04em; text-align: center; text-wrap: balance; }

/* Hyödyt: päävisuaali ja bento */
.benefits { background: var(--bg-2); }
.flow-pin { position: relative; }
.flow { position: relative; padding: clamp(22px, 3vw, 40px); background: var(--card); border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--shadow); }
.flow__cap { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 16px; font-size: 13px; color: var(--muted); }
.flow__scroll { display: none; font-weight: 600; color: var(--blue); }
.flow__pick { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-bottom: 26px; padding: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; }
.flow__pick button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 600; font-size: 14.5px; transition: background .2s var(--ease-out), color .2s var(--ease-out); }
.flow__pick button:hover:not([aria-selected="true"]) { background: var(--bg-3); color: var(--ink); }
.flow__pick button[aria-selected="true"] { background: var(--ink); color: #fff; }
.flow__case { display: grid; grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1.05fr); align-items: stretch; }
.flow__in { align-self: center; }
.flow__tag { display: inline-block; margin-bottom: 14px; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.flow__tag--out { color: var(--blue); }
.flow__msg { font-size: clamp(22px, 2.3vw, 30px); font-weight: 500; line-height: 1.3; letter-spacing: -.03em; }
.flow__msg mark { color: inherit; border-radius: 6px; padding: 1px 2px; margin: 0 -2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(var(--tint-2), var(--tint-2)) no-repeat left / 100% 100%; }
.flow__ribbon { align-self: center; width: 100%; height: 120px; }
.flow__ribbon--v { display: none; }
.flow__path { stroke-dasharray: 500; stroke-dashoffset: 0; }
.flow__out { padding: clamp(18px, 2.4vw, 28px); background: var(--bg-2); border: 1px solid var(--line); border-radius: 22px; }
.flow__sub { margin: 0 0 8px; font-size: 13px; font-weight: 650; }
.flow__sub--open { margin-top: 18px; }
.flow__rows > div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15.5px; }
.flow__rows dt { color: var(--muted); }
.flow__rows dd { font-weight: 550; }
.flow__open li { position: relative; padding: 7px 0 7px 24px; font-size: 15.5px; }
.flow__open li::before { content: "?"; position: absolute; left: 0; top: 8px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--tint-2); color: var(--blue-d); font-size: 11px; font-weight: 700; line-height: 1; }
.flow__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }

.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(48px, 7vw, 100px); }
.tile { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 440px; padding: clamp(24px, 2.4vw, 34px); overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 30px; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tile__kicker { margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--blue); }
.tile h3 { margin-bottom: 10px; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.03em; }
.tile__text p:not(.tile__kicker) { max-width: 30em; color: var(--muted); font-size: 16.5px; }
.tile__vis { display: flex; flex-direction: column; gap: 10px; }
.b { margin: 0; max-width: 82%; padding: 12px 16px; border-radius: 20px; font-size: 15px; line-height: 1.4; }
.b--c { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.b--a { align-self: flex-start; background: var(--bg-2); border-bottom-left-radius: 6px; }
.tile__vis--steps { align-items: flex-start; }
.dotline { display: inline-flex; align-items: center; gap: 0; margin-bottom: 8px; }
.dotline i { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-3); }
.dotline i + i { margin-left: 34px; }
.dotline i + i::before { content: ""; position: absolute; right: 100%; top: 6px; width: 34px; height: 2px; background: var(--bg-3); }
.tile__vis--draft p { display: grid; grid-template-columns: 104px 1fr; gap: 10px; margin: 0; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.tile__vis--draft b { font-weight: 500; color: var(--muted); }
.tile__vis--draft span { font-weight: 550; }
.tile__vis--draft .open span { color: var(--blue-d); }

/* Esimerkit: kompakti lista */
.examples { padding: clamp(64px, 8vw, 110px) 0; }
.examples__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 56px; margin-bottom: 36px; }
.examples__head h2 { font-size: clamp(34px, 4vw, 56px); }
.examples__head p { max-width: 28em; font-size: 14.5px; color: var(--muted); }
.ex-list { border-top: 1px solid var(--line); }
.ex-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); }
.ex-row__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--bg-2); color: var(--blue); }
.ex-row__ico svg { width: 30px; height: 30px; }
.ex-row__label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ex-row h3 { margin-bottom: 4px; font-size: 20px; }
.ex-row__text > p:last-child { max-width: 44em; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.ex-row__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 14.5px; }

/* Käyttöönotto: otsikko pysyy paikallaan, kohdalla oleva vaihe korostuu ja viiva täyttyy */
.steps { background: var(--bg-2); }
.steps__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.steps__head { position: sticky; top: 110px; }
.steps h2 { font-size: clamp(36px, 4.6vw, 68px); }
.stepper { position: relative; counter-reset: step; }
.stepper::before, .stepper::after { content: ""; position: absolute; left: 21px; top: 50px; bottom: 50px; width: 2px; background: var(--line); }
.stepper::after { background: var(--blue); transform-origin: top; transform: scaleY(var(--steps-fill, 1)); }
.stepper li { position: relative; z-index: 1; display: grid; grid-template-columns: 44px 1fr; gap: 28px; align-items: start; padding: 28px 0; counter-increment: step; }
.stepper li > div { opacity: .4; transition: opacity .5s var(--ease-out); }
.stepper li.is-active > div { opacity: 1; }
.stepper__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--line); transition: background .4s var(--ease-out), border-color .4s var(--ease-out), color .4s var(--ease-out), transform .5s cubic-bezier(.3,1.3,.5,1); }
.stepper__ico::before { content: counter(step); font-size: 15px; font-weight: 650; color: var(--muted); }
.stepper li.is-active .stepper__ico { background: var(--blue); border-color: var(--blue); transform: scale(1.12); }
.stepper li.is-active .stepper__ico::before { color: #fff; }
.stepper__n { display: none; }
.stepper h3 { margin-bottom: 8px; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.03em; }
.stepper p { color: var(--muted); font-size: 17px; }

/* UKK */
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq .section-head { position: sticky; top: 110px; margin-bottom: 0; }

/* Yhteys: tumma päätösosio */
.contact { position: relative; overflow: clip; padding: clamp(90px, 12vw, 170px) 0; background: var(--night); color: #fff; }
.contact__glow { position: absolute; inset: -20% -10% auto auto; width: 80%; height: 120%; pointer-events: none; background: radial-gradient(50% 50% at 60% 40%, rgba(20,72,230,.38), transparent 70%); transform: translateY(calc(var(--cy, 0) * 1px)); }
.contact .wrap { position: relative; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.contact .eyebrow { color: #7DA2FF; }
.contact .grad { color: #7DA2FF; }
.contact h2 { margin-bottom: 24px; max-width: 12em; font-size: clamp(36px, 4.8vw, 70px); }
.contact .lede { color: rgba(255,255,255,.68); }
.contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.contact .btn--ghost { border-color: rgba(255,255,255,.28); color: #fff; }
.contact .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.person { padding: clamp(26px, 3vw, 40px); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 28px; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.person p { margin: 0 0 6px; }
.person__name { font-size: 26px; font-weight: 600; letter-spacing: -.03em; }
.person__role { margin-bottom: 18px !important; color: rgba(255,255,255,.6); }
.person a { font-weight: 550; text-underline-offset: 4px; overflow-wrap: anywhere; }
.person__id { margin-top: 16px !important; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14px; color: rgba(255,255,255,.55); }
.site-footer { padding: 0 0 100px; background: var(--night); font-size: 14.5px; color: rgba(255,255,255,.55); }
.site-footer__in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); }
.site-footer .brand { margin-right: auto; color: #fff; }
.site-footer a:not(.brand) { text-underline-offset: 3px; }

/* 8. LIIKKEET ───────────────────────────────────────────────────── */
/* Ilmestyminen: kerran, kun elementti tulee näkyviin. Ilman JS:ää tai vähennetyllä liikkeellä kaikki näkyy heti. */

/* Otsikot: sana kerrallaan nousee esiin (motion.js jakaa sanat) */

/* Avausnäkymä: teksti ja tuotenäkymä laskeutuvat sisään */

/* Bento-kuvitukset: kuplat ja rivit ilmestyvät vuorotellen, kun ruutu tulee näkyviin */
.js .tile .b, .js .tile .dotline i, .js .tile__vis--draft p { opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .6s var(--ease-out), transform .6s cubic-bezier(.2,.8,.2,1), background .5s var(--ease-out); }
.js .tile.is-in .b, .js .tile.is-in .dotline i, .js .tile.is-in .tile__vis--draft p { opacity: 1; transform: none; }
.js .tile.is-in .b:nth-child(1), .js .tile.is-in .tile__vis--draft p:nth-child(1) { transition-delay: .5s; }
.js .tile.is-in .b:nth-child(2), .js .tile.is-in .tile__vis--draft p:nth-child(2) { transition-delay: 1.1s; }
.js .tile.is-in .tile__vis--draft p:nth-child(3) { transition-delay: 1.7s; }
.js .tile.is-in .dotline i:nth-child(1) { background: var(--blue); transition-delay: .4s; }
.js .tile.is-in .dotline i:nth-child(2) { background: var(--blue); transition-delay: .9s; }
.js .tile--b.is-in .b { transition-delay: 1.4s; }

/* Päävisuaali, ajastettu (puhelin, matala ikkuna): korostukset → viiva → rivit */
.js .flow__msg mark { background-size: 0% 100%; transition: background-size .7s var(--ease-out); }
.js .flow__case.is-play .m1 { background-size: 100% 100%; transition-delay: .5s; }
.js .flow__case.is-play .m2 { background-size: 100% 100%; transition-delay: 1.3s; }
.js .flow__case.is-play .m3 { background-size: 100% 100%; transition-delay: 2s; }
.js .flow__path { stroke-dashoffset: 500; transition: stroke-dashoffset 1.6s var(--ease-out) .6s; }
.js .flow__case.is-play .flow__path { stroke-dashoffset: 0; }
.js .flow__out [class^="r"], .js .flow__out [class*=" r"] { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js .flow__case.is-play .r1 { opacity: 1; transform: none; transition-delay: 1s; }
.js .flow__case.is-play .r2 { opacity: 1; transform: none; transition-delay: 1.7s; }
.js .flow__case.is-play .r3 { opacity: 1; transform: none; transition-delay: 2.4s; }
.js .flow__case.is-play .r4 { opacity: 1; transform: none; transition-delay: 2.9s; }
.js .flow__case.is-play .r5 { opacity: 1; transform: none; transition-delay: 3.2s; }

/* Päävisuaali, vieritykseen sidottu (työpöytä): --t kulkee 0 → 1 kun osiota vieritetään */
.flow-pin[data-scrub] { height: 200vh; }
.flow-pin[data-scrub] .flow { position: sticky; top: 88px; }
.flow-pin[data-scrub] .flow__scroll { display: inline; }
.js .flow-pin[data-scrub] .flow__msg mark { transition: none; }
.js .flow-pin[data-scrub] .m1 { background-size: calc(clamp(0, (var(--t, 0) - .04) * 7, 1) * 100%) 100%; }
.js .flow-pin[data-scrub] .m2 { background-size: calc(clamp(0, (var(--t, 0) - .16) * 7, 1) * 100%) 100%; }
.js .flow-pin[data-scrub] .m3 { background-size: calc(clamp(0, (var(--t, 0) - .28) * 7, 1) * 100%) 100%; }
.js .flow-pin[data-scrub] .flow__path { transition: none; stroke-dashoffset: calc((1 - clamp(0, (var(--t, 0) - .3) * 4, 1)) * 500); }
.js .flow-pin[data-scrub] .flow__out [class^="r"], .js .flow-pin[data-scrub] .flow__out [class*=" r"] { transition: none; }
.js .flow-pin[data-scrub] .r1 { opacity: clamp(0, (var(--t, 0) - .38) * 9, 1); transform: translateY(calc((1 - clamp(0, (var(--t, 0) - .38) * 9, 1)) * 12px)); }
.js .flow-pin[data-scrub] .r2 { opacity: clamp(0, (var(--t, 0) - .5) * 9, 1); transform: translateY(calc((1 - clamp(0, (var(--t, 0) - .5) * 9, 1)) * 12px)); }
.js .flow-pin[data-scrub] .r3 { opacity: clamp(0, (var(--t, 0) - .62) * 9, 1); transform: translateY(calc((1 - clamp(0, (var(--t, 0) - .62) * 9, 1)) * 12px)); }
.js .flow-pin[data-scrub] .r4 { opacity: clamp(0, (var(--t, 0) - .74) * 9, 1); transform: translateY(calc((1 - clamp(0, (var(--t, 0) - .74) * 9, 1)) * 12px)); }
.js .flow-pin[data-scrub] .r5 { opacity: clamp(0, (var(--t, 0) - .84) * 9, 1); transform: translateY(calc((1 - clamp(0, (var(--t, 0) - .84) * 9, 1)) * 12px)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .hero .eyebrow, .js .hero .lede, .js .window, .js .tile .b, .js .tile .dotline i, .js .tile__vis--draft p, .js .flow__out [class^="r"], .js .flow__out [class*=" r"] { opacity: 1 !important; transform: none !important; }
  .js .tile .dotline i { background: var(--blue) !important; }
  .js [data-split] .w > span { transform: none !important; }
  .js .statement__text .lw { color: var(--ink) !important; }
  .js .flow__msg mark { background-size: 100% 100% !important; }
  .js .flow__path { stroke-dashoffset: 0 !important; }
  .stage, .hero__glow, .contact__glow { transform: none !important; }
  .stepper li > div { opacity: 1 !important; }
  .nk-messages { scroll-behavior: auto; }
  .flow-pin[data-scrub] { height: auto; }
}

/* 9. RESPONSIIVISUUS ────────────────────────────────────────────── */
@media (max-width: 980px) {
  .btn--small { margin-left: auto; }
  .window { grid-template-columns: 1fr; max-width: 640px; }
  .draft { border-left: 0; border-top: 1px solid var(--line); }
  .flow__case { grid-template-columns: 1fr; }
  .flow__ribbon--h { display: none; }
  .flow__ribbon--v { display: block; width: 100px; height: 90px; margin: 4px auto; }
  .bento { grid-template-columns: 1fr; }
  .examples__head { flex-direction: column; align-items: flex-start; }
  .ex-row { grid-template-columns: 48px minmax(0, 1fr); }
  .ex-row__ico { width: 48px; height: 48px; }
  .ex-row__actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; gap: 6px 20px; align-items: flex-start; justify-content: flex-start; }
  .ex-row__actions .text-link { text-align: left; }
  .steps__grid, .faq__grid, .contact__grid { grid-template-columns: 1fr; }
  .steps__head, .faq .section-head { position: static; margin-bottom: 28px; }
  .stepper li > div { opacity: 1; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .wrap { width: calc(100% - 40px); }
  .site-header__in { height: 52px; }
  .btn--small { padding: 0 14px; }
  .hero { padding-top: 28px; }
  .hero h1 { font-size: clamp(40px, 12.4vw, 52px); letter-spacing: -.045em; }
  .hero .lede { font-size: 17px; }
  .hero .eyebrow { font-size: 12px; }
  :root { --chat-h: min(600px, 86svh); }
  .window { border-radius: 22px; }
  .nk-chat { min-height: 440px; }
  .chat-parked { min-height: 440px; }
  .nk-head { padding: 12px 16px; }
  .nk-language-row { padding: 8px 16px; }
  .nk-notice--foot { padding: 6px 16px 10px; }
  .nk-message { max-width: 92%; }
  .nk-float { inset: 0; width: auto; }
  .nk-float__body, .nk-chat.is-floating { height: 100%; }
  .nk-chat.is-floating { height: 100dvh; border-radius: 0; border: 0; }
  .nk-launcher { right: 14px; bottom: 14px; }
  .draft { padding: 22px 20px; }
  .flow__pick { display: flex; flex-wrap: nowrap; width: 100%; }
  .flow__pick button { flex: 1 1 auto; padding: 0 6px; font-size: 13px; white-space: nowrap; }
  .flow__rows > div { grid-template-columns: 84px 1fr; }
  .tile { min-height: 0; }
  .b { max-width: 90%; }
  .stepper li { grid-template-columns: 40px 1fr; gap: 18px; }
  .stepper::before, .stepper::after { left: 19px; }
  .stepper__ico { width: 40px; height: 40px; }
  .site-footer__in { flex-direction: column; align-items: flex-start; }
  html.nk-lock, html.nk-lock body { overflow: hidden; }
}
.flow__foot .btn, .ex-row__actions .btn { white-space: normal; text-align: center; }

/* 10. TIETOSUOJASIVU ────────────────────────────────────────────── */
.privacy-page { max-width: 760px; padding: 48px 0 80px; }
.privacy-page h1 { margin: 24px 0 8px; font-size: clamp(38px, 6vw, 60px); }
.privacy-page h2 { margin: 32px 0 8px; font-size: 21px; letter-spacing: -.02em; }
.privacy-page p { margin-bottom: 12px; color: var(--muted); }
.privacy-page a { color: var(--blue); }

.nk-input-row.is-typing { border-color: var(--blue); box-shadow: 0 0 0 4px var(--tint); background: #fff; }
#nk-input.is-demo { caret-color: var(--blue); }

/* ════════ Apuri tuntee yrityksen tiedot: hinnat ja sivuston opastus (kuvitteellinen havainnollistus) ════════ */
.knows { background: var(--bg); padding-top: clamp(40px, 6vw, 90px); }
.know { padding: clamp(22px, 3vw, 40px); background: var(--card); border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--shadow); }
.know__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 24px; }
.know__tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; }
.know__tabs button { min-height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 600; font-size: 14.5px; transition: background .2s var(--ease-out), color .2s var(--ease-out); }
.know__tabs button:hover:not([aria-selected="true"]) { background: var(--bg-3); color: var(--ink); }
.know__tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.know__flag { padding: 5px 12px; border-radius: 999px; background: var(--tint); color: var(--blue-d); font-size: 12.5px; font-weight: 650; }
.know__panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 36px); }
.know__data { padding: clamp(18px, 2.4vw, 28px); background: var(--bg-2); border: 1px solid var(--line); border-radius: 22px; }
.know__tag { margin-bottom: 8px; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.know__data h3 { margin-bottom: 6px; font-size: 22px; }
.know__hint { margin-bottom: 18px; font-size: 14.5px; color: var(--muted); }
.know__fine { margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.price-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-weight: 550; }
.price-list label { flex: 1; font-size: 15.5px; }
.price-in { display: inline-flex; align-items: center; gap: 8px; }
.price-in i { font-style: normal; font-weight: 600; color: var(--muted); }
.price-in input { width: 96px; min-height: 42px; padding: 0 12px; border: 1.5px solid #D5D9E2; border-radius: 12px; background: #fff; font-size: 16px; font-weight: 650; text-align: right; }
.price-in input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px var(--tint); }
.know__chat { display: flex; flex-direction: column; min-width: 0; }
.know__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.know__chips button { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 550; text-align: left; transition: border-color .2s var(--ease-out), transform .3s var(--spring), box-shadow .2s var(--ease-out); }
.know__chips button:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(20,72,230,.7); }
.know__log { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 250px; max-height: 330px; padding: 16px; overflow-y: auto; background: var(--bg-2); border: 1px solid var(--line); border-radius: 22px; }
.k { margin: 0; max-width: 88%; padding: 11px 15px; border-radius: 18px; font-size: 15px; line-height: 1.45; animation: rowin .4s ease both; }
.k--user { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.k--ai { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.k--typing { display: inline-flex; gap: 5px; align-items: center; padding: 15px 17px; }
.k--typing i { width: 7px; height: 7px; border-radius: 50%; background: #8E96A6; animation: blink 1.2s infinite both; }
.k--typing i:nth-child(2) { animation-delay: .18s; } .k--typing i:nth-child(3) { animation-delay: .36s; }
@keyframes flashbg { 0% { background: var(--tint-2); } 100% { background: #fff; } }
.k--ai.is-updated { animation: flashbg 1s ease; }
.sitemap { font-size: 15.5px; }
.sitemap li > span { display: block; padding: 8px 12px; border-radius: 10px; font-weight: 550; transition: background .35s var(--ease-out), color .35s var(--ease-out); }
.sitemap .has-sub > ul { margin: 0 0 4px 16px; padding-left: 10px; border-left: 2px solid var(--line); }
.sitemap li.is-hit > span { background: var(--blue); color: #fff; }
.sitemap li.contains-hit > span { color: var(--blue-d); }
.know__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.know__foot span { max-width: 56em; }
@media (max-width: 980px) { .know__panel { grid-template-columns: 1fr; } .know__log { min-height: 220px; } }
@media (max-width: 640px) { .know__tabs { display: flex; width: 100%; } .know__tabs button { flex: 1; padding: 0 8px; font-size: 14px; } .price-in input { width: 84px; } }
@media (prefers-reduced-motion: reduce) { .k, .k--ai.is-updated { animation: none !important; } .k--typing i { animation: none !important; } }

/* ════════ Kävijästä yhteydenotoksi: pieni kaista (mekanismi ilman tulolupauksia) ════════ */
.leads { padding: 0 0 clamp(56px, 7vw, 96px); }
.leads__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.leads__head h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.1; letter-spacing: -.04em; }
.leads__head p { font-size: 15px; color: var(--muted); }
.funnel { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 28px); }
.funnel::before, .funnel::after { content: ""; position: absolute; left: 16px; right: calc(25% - 16px); top: 15px; height: 2px; background: var(--line); }
.funnel::after { background: var(--blue); transform-origin: left; transform: scaleX(0); transition: transform 2s cubic-bezier(.3,.7,.2,1) .4s; }
.funnel.is-in::after { transform: scaleX(1); }
.funnel li { position: relative; z-index: 1; }
.funnel__n { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 700; transition: background .5s var(--ease-out), border-color .5s var(--ease-out), color .5s var(--ease-out); }
.js .funnel.is-in li:nth-child(1) .funnel__n { background: var(--blue); border-color: var(--blue); color: #fff; transition-delay: .3s; }
.js .funnel.is-in li:nth-child(2) .funnel__n { background: var(--blue); border-color: var(--blue); color: #fff; transition-delay: .85s; }
.js .funnel.is-in li:nth-child(3) .funnel__n { background: var(--blue); border-color: var(--blue); color: #fff; transition-delay: 1.4s; }
.js .funnel.is-in li:nth-child(4) .funnel__n { background: var(--blue); border-color: var(--blue); color: #fff; transition-delay: 1.95s; }
.funnel h3 { margin-bottom: 2px; font-size: 17px; letter-spacing: -.02em; }
.funnel p { font-size: 14.5px; color: var(--muted); }
.leads__note { margin-top: 22px; font-size: 13px; color: var(--muted); }
@media (max-width: 980px) { .funnel { grid-template-columns: 1fr 1fr; row-gap: 20px; } .funnel::before, .funnel::after { display: none; } }
@media (max-width: 640px) { .funnel { grid-template-columns: 1fr; } .funnel li { display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; } .funnel__n { margin: 0; } }
@media (prefers-reduced-motion: reduce) { .funnel::after { transform: none !important; } .js .funnel li .funnel__n { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; } }
.statement { padding-bottom: clamp(48px, 6vw, 80px); }

/* Logo (Vuoro) */
.brand .nkmark{flex:none;display:block}.mlg{display:block;margin-bottom:20px}.mlg svg{display:block}

/* Logon animaatio: kuplat puhuvat toisilleen (hillitty, 8 s kierros) */
.nkmark .b1,.nkmark .b2,.mlg .b1,.mlg .b2,.nkmark .d,.mlg .d{transform-box:fill-box}
.nkmark .b1,.mlg .b1{transform-origin:0 100%}
.nkmark .b2,.mlg .b2{transform-origin:50% 50%}
.nkmark .d,.mlg .d{opacity:0;transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){
  .nkmark .b1,.mlg .b1{animation:nk-b1 8s ease-in-out infinite}
  .nkmark .b2,.mlg .b2{animation:nk-b2 8s ease-in-out infinite}
  .nkmark .d,.mlg .d{animation:nk-d 8s ease-in-out infinite}
  .nkmark .d2,.mlg .d2{animation-delay:.14s}.nkmark .d3,.mlg .d3{animation-delay:.28s}
}
@keyframes nk-b1{0%,10%{transform:scale(1)}13%{transform:scale(1.14)}17%,62%{transform:scale(1)}65%{transform:scale(1.12)}69%,100%{transform:scale(1)}}
@keyframes nk-b2{0%,46%{transform:scale(1)}50%{transform:scale(1.14)}54%,100%{transform:scale(1)}}
@keyframes nk-d{0%,19%{opacity:0;transform:translateY(0)}21%{opacity:1;transform:translateY(0)}25%{transform:translateY(-7px)}29%{transform:translateY(0)}33%{transform:translateY(-7px)}37%{transform:translateY(0)}41%{transform:translateY(-7px)}44%{opacity:1;transform:translateY(0)}46%,100%{opacity:0;transform:translateY(0)}}


/* ════════ v10: GSAP-liike ja transitions.dev-siirtymät ════════ */
/* Liikkeen tunnusluvut (transitions.dev, motion tokens) */
:root {
  --duration-quick: 150ms; --duration-fast: 250ms; --duration-medium: 350ms; --duration-slow: 400ms; --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --tabs-dur: var(--duration-fast); --tabs-ease: var(--ease-smooth-out);
  --acc-expand: var(--duration-fast); --acc-collapse: var(--duration-fast); --acc-chevron: var(--duration-fast); --acc-ease: var(--ease-smooth-out);
  --check-opacity-dur: 500ms; --check-rotate-dur: 500ms; --check-rotate-from: 80deg; --check-bob-dur: 500ms; --check-y-amount: 40px; --check-blur-dur: 500ms; --check-blur-from: 10px;
  --check-path-dur: 500ms; --check-path-delay: 80ms; --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --shake-distance: 6px; --shake-overshoot: 4px; --shake-dur-a: 80ms; --shake-dur-b: 60ms; --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Alkutilat: GSAP animoi nämä näkyviin. Jos GSAP ei lataudu (html.no-gsap) tai liike on vähennetty, kaikki näkyy heti. */
.js .reveal { opacity: 0; transform: translateY(34px) scale(.985); }
.js .site-header, .js .hero .eyebrow, .js .hero .lede, .js .hero .demo-tag, .js .window { opacity: 0; }
.js [data-split], .js [data-split-now] { visibility: hidden; }
.sp-mask { overflow: clip; overflow-clip-margin: .2em; }
html.no-gsap .reveal, html.no-gsap .site-header, html.no-gsap .hero .eyebrow, html.no-gsap .hero .lede, html.no-gsap .hero .demo-tag, html.no-gsap .window { opacity: 1 !important; transform: none !important; visibility: visible !important; }
html.no-gsap [data-split], html.no-gsap [data-split-now] { visibility: visible !important; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .site-header, .js .hero .eyebrow, .js .hero .lede, .js .hero .demo-tag, .js .window { opacity: 1; transform: none; }
  .js [data-split], .js [data-split-now] { visibility: visible; }
}

/* Liukuva välilehtipilleri (tabs sliding) */
.has-pill { position: relative; }
.has-pill > [role="tab"], .has-pill > button { position: relative; z-index: 1; }
.has-pill > button[aria-selected="true"], .has-pill > button[aria-selected="true"]:hover { background: transparent; color: #fff; }
.has-pill > button:hover:not([aria-selected="true"]) { background: transparent; color: var(--ink); }
.t-tabs-pill { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 999px; background: var(--ink); transform: translate(0, 0); transition: transform var(--tabs-dur) var(--tabs-ease), width var(--tabs-dur) var(--tabs-ease), height var(--tabs-dur) var(--tabs-ease); will-change: transform, width; z-index: 0; pointer-events: none; }

/* UKK-haitari (accordion) */
.faq .t-acc { border-bottom: 1px solid var(--line); }
.faq .t-acc:first-child { border-top: 1px solid var(--line); }
.t-acc-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 70px; padding: 14px 0; border: 0; background: none; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -.02em; text-align: left; cursor: pointer; }
.t-acc-chevron { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-2); color: var(--blue); transform: scaleY(1); transform-origin: center; transition: transform var(--acc-chevron) var(--acc-ease), background var(--duration-fast) var(--ease-smooth-out); }
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc-head:hover .t-acc-chevron { background: var(--tint); }
.t-acc[data-open="true"] .t-acc-chevron { transform: scaleY(-1); background: var(--tint); }
.t-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--acc-collapse) var(--ease-in); }
.t-acc[data-open="true"] .t-acc-panel { grid-template-rows: 1fr; transition: grid-template-rows var(--acc-expand) var(--acc-ease); }
.t-acc-panel-inner { overflow: hidden; opacity: 0; filter: blur(2px); transition: opacity var(--acc-collapse) var(--ease-in), filter var(--acc-collapse) var(--ease-in); }
.t-acc[data-open="true"] .t-acc-panel-inner { opacity: 1; filter: blur(0); transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease); }
.t-acc-panel-inner p { padding: 0 54px 22px 0; color: var(--muted); }
.t-acc-panel-inner p a { color: var(--blue); }
@media (max-width: 640px) { .t-acc-panel-inner p { padding-right: 0; } }

/* Lähetyksen onnistumismerkki (success check) ja virheen ravistus (error shake) */
.t-success-check { display: inline-block; margin: 12px 0 4px; transform-origin: center; opacity: 0; will-change: transform, opacity, filter; }
.t-success-check svg { display: block; overflow: visible; }
.t-success-check svg path { stroke-dasharray: 31; stroke-dashoffset: 31; }
.t-success-check[data-state="in"] { animation: t-check-fade var(--check-opacity-dur) var(--check-ease-out) forwards, t-check-rotate var(--check-rotate-dur) var(--check-ease-out) forwards, t-check-blur var(--check-blur-dur) var(--check-ease-out) forwards, t-check-bob var(--check-bob-dur) var(--check-ease-bob) forwards; }
.t-success-check[data-state="in"] svg path { animation: t-check-draw var(--check-path-dur) var(--check-ease-out) var(--check-path-delay) forwards; }
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate { from { transform: rotate(var(--check-rotate-from)); } to { transform: rotate(0deg); } }
@keyframes t-check-blur { from { filter: blur(var(--check-blur-from)); } to { filter: blur(0); } }
@keyframes t-check-bob { from { translate: 0 var(--check-y-amount); } to { translate: 0 0; } }
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }
.nk-status.is-error { color: var(--warn); }
.t-input { will-change: transform; }
.t-input.is-shaking { animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear; }
@keyframes t-input-shake {
  0% { transform: translateX(0); animation-timing-function: var(--shake-ease); }
  28.57% { transform: translateX(var(--shake-distance)); animation-timing-function: var(--shake-ease); }
  57.14% { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57% { transform: translateX(var(--shake-overshoot)); animation-timing-function: var(--shake-ease); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .t-tabs-pill, .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron { transition: none !important; }
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
  .t-input { animation: none !important; transform: none !important; }
}

/* ════════ Hinnoittelu (etusivun hintanosto ja hinnoittelu.html) ════════
   Muokkaa hintoja ja tekstejä tiedostoista index.html (hintanosto, UKK) ja hinnoittelu.html (kortit, esimerkki, huomautukset). */
.site-nav a[aria-current="page"] { color: var(--ink); background: var(--bg-2); }

/* Etusivun pieni hintanosto */
.price-teaser { padding: 0 0 clamp(8px, 2vw, 20px); }
.price-teaser__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; max-width: 880px; margin: 0 auto; padding: 14px 24px; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 10px 30px -22px rgba(14,17,22,.35); }
.price-teaser__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 0; font-size: 15.5px; }
.price-teaser__text strong { font-weight: 650; letter-spacing: -.015em; }
.price-teaser__text span { color: var(--muted); font-size: 14.5px; }
.price-teaser .text-link { font-size: 15px; white-space: nowrap; }

/* Hinnoittelusivu: otsikko. Harmaa tausta nostaa valkoiset kortit esiin; kortit alkavat jo ensimmäisellä näytöllä. */
.pricing { position: relative; overflow: clip; padding: clamp(36px, 4.4vw, 64px) 0 clamp(48px, 6vw, 88px); background: var(--bg-2); }
.pricing .wrap { position: relative; }
.pricing__head { max-width: 980px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.pricing__head h1 { margin-bottom: 14px; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.pricing__sub { max-width: 38em; font-size: 18px; color: var(--muted); }

/* Pakettikortit: kolme rinnakkain. Subgrid pitää nimet, hinnat, kuvaukset, listat ja painikkeet samoilla riveillä. */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto auto 1fr auto; column-gap: clamp(16px, 2vw, 28px); row-gap: 0; align-items: stretch; }
.plan { --plan-lift: 0px; display: grid; grid-template-rows: subgrid; grid-row: span 6; min-width: 0; padding: clamp(24px, 2.4vw, 34px); background: #fff; border: 1px solid rgba(14,17,22,.07); border-radius: 26px; box-shadow: 0 1px 2px rgba(14,17,22,.04), 0 18px 36px -24px rgba(14,17,22,.2); transition: transform var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out); }
.plan--featured { background: #F7F9FF; border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 2px 4px rgba(20,72,230,.06), 0 28px 48px -28px rgba(20,72,230,.45); }
.plan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; min-height: 34px; }
.plan__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.plan__mark { flex: none; width: 34px; height: 31px; transition: transform var(--duration-slow) var(--ease-smooth-out); }
.plan__mark .m1 { fill: var(--ink); } .plan__mark .m2 { fill: var(--blue); } .plan__mark .m3 { fill: #8FB0FF; }
.plan__name { font-size: 21px; font-weight: 650; letter-spacing: -.03em; line-height: 1.2; }
.plan__badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; }
.plan__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin: 0; font-variant-numeric: tabular-nums; }
.plan__amount { display: inline-flex; align-items: baseline; gap: 5px; }
.plan__num { font-size: clamp(54px, 5vw, 68px); font-weight: 650; letter-spacing: -.055em; line-height: 1; }
.plan__cur { font-size: clamp(26px, 2.4vw, 32px); font-weight: 550; letter-spacing: -.03em; color: var(--muted); }
.plan__per { font-size: 17px; color: var(--muted); }
.plan__setup { justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; align-self: start; margin: 14px 0 22px; padding: 7px 14px; border-radius: 999px; background: var(--bg-2); font-size: 14.5px; color: var(--muted); }
.plan--featured .plan__setup { background: #fff; }
.plan__setup strong { color: var(--ink); font-weight: 650; }
.plan__desc { margin: 0 0 20px; padding-bottom: 22px; border-bottom: 1px solid rgba(14,17,22,.08); font-size: 16.5px; line-height: 1.5; letter-spacing: -.01em; }
.plan__list { margin: 0; padding: 0; list-style: none; }
.plan__list li { display: flex; gap: 12px; padding: 7px 0; font-size: 15px; line-height: 1.45; color: #2F3644; }
.plan__list li.plan__inherit { color: var(--ink); font-weight: 600; }
.plan__tick { flex: none; box-sizing: content-box; width: 10px; height: 10px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--tint); color: var(--blue); }
.plan--featured .plan__tick { background: var(--blue); color: #fff; }
.plan__cta { width: 100%; margin-top: 26px; white-space: normal; text-align: center; }
.plan__arrow { flex: none; width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-smooth-out); }
.plan__cta:active { transform: scale(.98); }
.plans__note { max-width: 46em; margin-top: 24px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

@media (hover: hover) and (pointer: fine) {
  .plan:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(14,17,22,.05), 0 30px 50px -26px rgba(14,17,22,.3); }
  .plan--featured:hover { box-shadow: 0 0 0 1px var(--blue), 0 2px 4px rgba(20,72,230,.08), 0 36px 58px -28px rgba(20,72,230,.55); }
  .plan__cta:hover .plan__arrow { transform: translateX(3px); }
}

/* Sisääntulo: otsikko ja kortit nousevat kerran sivun avautuessa. Pelkkä CSS, sisältö näkyy myös ilman animaatiota. */
@keyframes plan-rise { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
@media (prefers-reduced-motion: no-preference) {
  .pricing__head > * { animation: plan-rise var(--duration-very-slow) var(--ease-smooth-out) backwards; }
  .pricing__head > :nth-child(2) { animation-delay: 60ms; }
  .pricing__head > :nth-child(3) { animation-delay: 120ms; }
  .plans > .plan { animation: plan-rise 600ms var(--ease-smooth-out) backwards; }
  .plans > .plan:nth-child(1) { animation-delay: 160ms; }
  .plans > .plan:nth-child(2) { animation-delay: 230ms; }
  .plans > .plan:nth-child(3) { animation-delay: 300ms; }
}
@media (prefers-reduced-motion: reduce) {
  .plan, .plan__arrow { transition: none; }
}

.plan.reveal { animation: none; }

/* Portaikko: jokainen taso lisää jotain (käyttää etusivun .stepper-tyylejä) */
.plan-example { padding: clamp(56px, 7vw, 112px) 0; background: #fff; }
.plan-example__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.plan-example__head { position: sticky; top: 110px; }
.plan-example__head h2 { margin-bottom: 10px; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.04em; }
.plan-example__head p { color: var(--muted); }
.ladder h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ladder__price { padding: 3px 11px; border-radius: 999px; background: var(--tint); color: var(--blue-d); font-size: 13.5px; font-weight: 600; letter-spacing: 0; }

/* Hyvä tietää */
.plan-notes { padding: clamp(56px, 7vw, 112px) 0; background: var(--bg-2); }
.plan-notes__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.plan-notes h2 { margin-bottom: 10px; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.04em; }
.plan-notes__lead { color: var(--muted); }
.plan-notes__list { margin: 0; padding: 0; list-style: none; }
.plan-notes__list li { padding: 16px 0; border-top: 1px solid var(--line); font-size: 17px; }
.plan-notes__list li:last-child { border-bottom: 1px solid var(--line); }

/* Jatko */
.plan-next { padding: 0 0 clamp(64px, 8vw, 120px); }
.plan-next__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: clamp(24px, 3vw, 40px); background: var(--bg-2); border: 1px solid var(--line); border-radius: 28px; }
.plan-next { padding-top: clamp(56px, 7vw, 112px); }
.plan-next h2 { margin-bottom: 6px; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.035em; }
.plan-next p { color: var(--muted); }
.plan-next__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 980px) {
  .plans { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 20px; max-width: 560px; }
  .plan { display: flex; flex-direction: column; grid-row: auto; }
  .plan__list { flex: 1; }
  .plan-example__in { grid-template-columns: minmax(0, 1fr); }
  .plan-example__head { position: static; }
  .plan-notes__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .price-teaser__in { border-radius: 20px; padding: 14px 18px; }
  .plan-next__actions .btn { flex: 1 1 100%; }
}

/* Puhelinvalikko (alle 981 px): hampurilaispainike avaa linkkilistan yläpalkin alle. */
.nav-toggle { display: none; position: relative; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background var(--duration-quick) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out); }
.nav-toggle:active { transform: scale(.94); }
.nav-toggle span { position: absolute; left: 13px; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--duration-fast) var(--ease-smooth-out); }
.nav-toggle span:first-child { transform: translateY(-3.5px); }
.nav-toggle span:last-child { transform: translateY(3.5px); }
.site-header.is-open .nav-toggle span:first-child { transform: rotate(45deg); }
.site-header.is-open .nav-toggle span:last-child { transform: rotate(-45deg); }
@media (hover: hover) and (pointer: fine) { .nav-toggle:hover { background: var(--bg-2); } }
@media (max-width: 980px) {
  .nav-toggle { display: inline-grid; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 2px; margin: 0; padding: 8px max(20px, 4vw) 18px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 28px 40px -30px rgba(14,17,22,.35); font-size: 17px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--duration-quick) var(--ease-in), transform var(--duration-fast) var(--ease-in), visibility 0s linear var(--duration-fast); }
  .site-header.is-open .site-nav { opacity: 1; visibility: visible; transform: none; transition: opacity var(--duration-quick) var(--ease-out), transform var(--duration-fast) var(--ease-out), visibility 0s linear 0s; }
  .site-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 14px; color: var(--ink); }
  .site-nav a:active { background: var(--bg-2); }
  .site-nav a[aria-current="page"] { color: var(--blue); }
  /* Ilman JavaScriptiä linkit pysyvät näkyvissä yläpalkin alla. */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-header__in { flex-wrap: wrap; height: auto; padding: 8px 0; }
  html:not(.js) .site-nav { position: static; flex-direction: row; flex-wrap: wrap; width: 100%; order: 5; padding: 0; background: none; border: 0; box-shadow: none; font-size: 14px; opacity: 1; visibility: visible; transform: none; }
  html:not(.js) .site-nav a { min-height: 40px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .nav-toggle, .nav-toggle span, .site-nav { transition: none !important; } }

/* Pakettimerkit: puheenvuorojen määrä kasvaa pakettien mukana (Basic 1, Intelligent 2, Pro 3). Samat merkit portaikossa. */
@media (hover: hover) and (pointer: fine) { .plan:hover .plan__mark { transform: translateY(-2px); } }
.ladder .stepper__ico::before { content: none; }
.ladder__mark { width: 23px; height: 21px; color: var(--muted); transition: color .4s var(--ease-out); }
.ladder__mark rect { fill: currentColor; }
.ladder__mark .m2 { opacity: .72; } .ladder__mark .m3 { opacity: .5; }
.ladder li.is-active .ladder__mark { color: #fff; }

/* Kaikissa paketeissa */
.plans-all { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px clamp(20px, 3vw, 44px); margin-top: clamp(20px, 2.4vw, 30px); padding: clamp(18px, 2vw, 26px) clamp(22px, 2.6vw, 36px); background: #fff; border: 1px solid rgba(14,17,22,.07); border-radius: 24px; box-shadow: 0 1px 2px rgba(14,17,22,.04), 0 18px 36px -28px rgba(14,17,22,.2); }
.plans-all h3 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; }
.plans-all ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.plans-all li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.4; color: #2F3644; }
.plans-all .plan__tick { margin-top: 0; }

/* Lopetus: tumma kaista sulkee sivun kuten etusivun yhteystieto-osio */
.plan-next__in { position: relative; overflow: hidden; background: var(--night); border: 0; color: #fff; }
.plan-next__in::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 60%; height: 140%; pointer-events: none; background: radial-gradient(closest-side, rgba(76,125,255,.35), transparent 70%); }
.plan-next__in > * { position: relative; }
.plan-next p { color: rgba(255,255,255,.68); }
.plan-next .btn--ghost { border-color: rgba(255,255,255,.28); color: #fff; }
.plan-next .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }
@media (max-width: 980px) {
  .plans-all { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .plans-all ul { grid-template-columns: minmax(0, 1fr); }
}

/* 404-sivu */
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.notfound h1 { margin-bottom: 14px; font-size: clamp(36px, 5vw, 56px); letter-spacing: -.04em; }

/* Kokeile asiakaspalvelua (/kokeile) */
.kokeile-page .site-header { opacity: 1 !important; }
.kokeile { position: relative; padding: clamp(36px, 4.4vw, 64px) 0 clamp(48px, 6vw, 96px); background: var(--bg-2); }
.kokeile__head { max-width: 760px; margin-bottom: clamp(24px, 3vw, 36px); }
.kokeile__head h1 { margin-bottom: 12px; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -.045em; }
.kokeile__head .lede { margin-bottom: 24px; }
.kokeile__tabs { margin-bottom: 0; background: #fff; }
.kokeile__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(16px, 2vw, 28px); align-items: start; }
.kchat { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid rgba(14,17,22,.07); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; }
.kchat__bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #FBFBFC; border-bottom: 1px solid var(--line); font-size: 15px; }
.kchat__bar .badge { margin-left: auto; }
.kchat__dot { width: 9px; height: 9px; border-radius: 50%; background: #1B8A4B; }
.kchat__log { display: flex; flex-direction: column; gap: 10px; min-height: 340px; max-height: 480px; overflow-y: auto; overscroll-behavior: contain; padding: 18px; }
.kchat__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 14px; }
.kchip { padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; transition: background var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out); }
.kchip:hover:not(:disabled) { background: var(--tint); border-color: var(--tint-2); color: var(--blue-d); }
.kchip:active:not(:disabled) { transform: scale(.97); }
.kchip:disabled { opacity: .5; cursor: not-allowed; }
.kchip--retry { align-self: flex-start; border-color: var(--blue); color: var(--blue); }
.kchat__form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.kchat__form input { flex: 1; min-width: 0; height: 48px; padding: 0 18px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
.kchat__form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--tint); }
.kchat__form button { flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--blue); color: #fff; font-size: 20px; font-weight: 600; cursor: pointer; transition: background var(--duration-quick) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out); }
.kchat__form button:hover:not(:disabled) { background: var(--blue-d); }
.kchat__form button:active:not(:disabled) { transform: scale(.94); }
.kchat__form button:disabled, .kchat__form input:disabled { opacity: .55; cursor: not-allowed; }
.kchat__note { margin: 0; padding: 0 18px 16px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.kinfo { padding: clamp(20px, 2.2vw, 28px); background: #fff; border: 1px solid rgba(14,17,22,.07); border-radius: 24px; box-shadow: 0 1px 2px rgba(14,17,22,.04), 0 18px 36px -28px rgba(14,17,22,.2); }
.kinfo h2 { margin-bottom: 6px; font-size: 20px; letter-spacing: -.03em; }
.kinfo__lead { margin: 0 0 14px; font-size: 14.5px; color: var(--muted); }
.kinfo__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kinfo__list li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.5; color: #2F3644; }
.kinfo__list li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.kinfo__fine { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.kokeile-next { padding: clamp(48px, 6vw, 88px) 0; background: #fff; }
.kokeile-next__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: clamp(24px, 3vw, 40px); background: var(--night); border-radius: 28px; color: #fff; }
.kokeile-next h2 { margin-bottom: 6px; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.035em; }
.kokeile-next p { margin: 0; color: rgba(255,255,255,.68); }
.kokeile-next__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.kokeile-next .btn--ghost { border-color: rgba(255,255,255,.28); color: #fff; }
.kokeile-next .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }
@media (max-width: 980px) { .kokeile__grid { grid-template-columns: minmax(0, 1fr); } .kokeile__tabs { display: flex; width: 100%; } .kokeile__tabs button { flex: 1 1 auto; padding: 0 8px; } }
@media (max-width: 640px) { .kchat__log { min-height: 300px; max-height: 380px; padding: 14px; } .kchat__chips { padding: 0 14px 12px; } .kokeile-next__actions .btn { flex: 1 1 100%; } }

/* ════════ Myyvämpi aloitus (27.10.2026) ════════
   Punainen on sivustolla demon väri: yläpalkin Kokeile-hehku, live-pisteet ja demo-kaistan painike. */
.site-nav a[href="/kokeile.html"] { position: relative; isolation: isolate; background: rgba(208,41,30,.07); font-weight: 600; }
.site-nav a[href="/kokeile.html"]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: 0 0 14px 2px rgba(208,41,30,.5), 0 0 34px 6px rgba(208,41,30,.2); opacity: .55; }
@media (prefers-reduced-motion: no-preference) { .site-nav a[href="/kokeile.html"]::before { animation: nk-glow 3.4s ease-in-out infinite; } }
@keyframes nk-glow { 0%, 100% { opacity: .35; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.04); } }
.site-nav a[href="/kokeile.html"][aria-current="page"]::before { animation: none; opacity: .42; transform: none; }
@media (max-width: 980px) { .site-nav a[href="/kokeile.html"] { align-self: flex-start; } }

/* Live-demo-nauha heron tekstin ja keskusteluikkunan välissä */
.demo-tag { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; width: fit-content; max-width: 100%; margin: 0 auto 18px; padding: 7px 10px 7px 8px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.88); box-shadow: 0 10px 30px -22px rgba(14,17,22,.4); font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.demo-tag__badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--red-tint); color: var(--red-d); font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.demo-tag__badge i, .tryband__tag i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.demo-tag__badge i::after, .tryband__tag i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .demo-tag__badge i::after, .tryband__tag i::after { animation: nk-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite; } }
@keyframes nk-ping { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(3.2); opacity: 0; } }
.demo-tag__link { font-weight: 600; color: var(--blue); text-decoration: none; white-space: nowrap; }
.demo-tag__link:hover { color: var(--blue-d); text-decoration: underline; text-underline-offset: 3px; }

/* Live-demo-kaista hinnoittelunoston jälkeen: vie Kokeile-sivun esimerkkeihin */
.tryband { padding: clamp(28px, 4vw, 56px) 0 0; }
.tryband__in { position: relative; overflow: clip; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 22px clamp(24px, 4vw, 56px); align-items: center; max-width: 1160px; margin: 0 auto; padding: clamp(26px, 4vw, 52px); border-radius: 30px; background: var(--night); color: #fff; }
.tryband__in::before, .tryband__in::after { content: ""; position: absolute; pointer-events: none; }
.tryband__in::before { inset: -35% auto auto -12%; width: 70%; height: 150%; background: radial-gradient(closest-side, rgba(208,41,30,.34), rgba(208,41,30,0)); }
.tryband__in::after { inset: auto -14% -55% auto; width: 62%; height: 130%; background: radial-gradient(closest-side, rgba(20,72,230,.34), rgba(20,72,230,0)); }
.tryband__in > * { position: relative; z-index: 1; }
.tryband__tag { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #FF8A80; }
.tryband__tag i { background: #FF5A4D; box-shadow: 0 0 14px 2px rgba(255,90,77,.6); }
.tryband h2 { margin: 0 0 14px; max-width: 14em; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.04; letter-spacing: -.04em; color: #fff; }
.tryband__copy p:not(.tryband__tag) { max-width: 30em; margin: 0 0 24px; font-size: clamp(16px, 1.3vw, 18px); color: rgba(255,255,255,.74); }
.btn--red { background: var(--red); border-color: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-d); border-color: var(--red-d); box-shadow: 0 14px 34px -14px rgba(208,41,30,.95); }
.tryband a:focus-visible { outline-color: #fff; }
/* Prompt-kortti: tumma kortti, ikoniruudut riveillä ja pyöreä nuolipainike */
.pcard { position: relative; padding: 20px 22px 22px; border: 1px solid rgba(255,255,255,.16); border-radius: 26px; background: linear-gradient(180deg, #151110, #0D0B0B); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 32px rgba(255,255,255,.035), 0 40px 70px -36px rgba(0,0,0,.9); }
.pcard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pcard__brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.pcard__brand svg { flex: none; }
.pcard__label { font: 500 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.58); }
.pcard__rows { margin: 8px 0 0; padding: 0; list-style: none; }
.pcard__rows a { display: flex; align-items: center; gap: 16px; margin: 0 -8px; padding: 10px 8px; border-radius: 16px; color: #fff; text-decoration: none; transition: background .2s var(--ease-out); }
.pcard__rows a:hover { background: rgba(255,255,255,.05); }
.pcard__ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; background: rgba(208,41,30,.2); color: #FF6B57; transition: transform .3s var(--spring); }
.pcard__rows a:hover .pcard__ico { transform: scale(1.07); }
.pcard__rows a:active .pcard__ico { transform: scale(.94); }
.pcard__txt { min-width: 0; }
.pcard__txt strong { display: block; font-size: clamp(17px, 1.5vw, 20px); font-weight: 650; letter-spacing: -.02em; transition: color .2s var(--ease-out); }
.pcard__txt span { display: block; margin-top: 2px; font-size: 14.5px; color: rgba(255,255,255,.64); }
.pcard__rows a:hover strong { color: #F2907F; }
.pcard__go { display: grid; place-items: center; width: 52px; height: 52px; margin: 10px 0 0 auto; border-radius: 50%; background: var(--red-d); color: #fff; transition: transform .3s var(--spring), background .2s var(--ease-out); }
.pcard__go:hover { background: var(--red); transform: scale(1.07); }
.pcard__go:active { transform: scale(.94); }
.tryband__note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: rgba(255,255,255,.55); }
@media (max-width: 860px) { .tryband__in { grid-template-columns: minmax(0, 1fr); border-radius: 24px; } }
@media (max-width: 900px) { .demo-tag { border-radius: 22px; padding: 8px 14px 9px; text-align: center; } }
@media (max-width: 640px) {
  .demo-tag { font-size: 14px; }
  .demo-tag__link { flex-basis: 100%; }
  .tryband__in .btn--red { width: 100%; }
}

/* ════════ Liikesäännöt ════════
   Sisääntulot: ease out (--ease-out, GSAP power3/4.out). Poistumiset: ease in (--ease-in). Käyttöliittymä: jousi pienellä ylityksellä (--spring).
   Ei lineaarista liikettä; poikkeus ovat vain vieritykseen sidotut (scrub) animaatiot, joiden tulee seurata vieritystä suoraan. */
@media (prefers-reduced-motion: no-preference) {
  .nk-quick button, .kchip, #nk-send, .kchat__form button { transition: transform .3s var(--spring), border-color .2s var(--ease-out), background .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
  .nk-quick button:active, .starters button:active, .kchip:active:not(:disabled), .know__chips button:active, #nk-send:active, .kchat__form button:active, .btn--red:active { transform: scale(.96); }
}