/* ============================================================
   AYE MATEY (V7) — merikartta päivänvalossa, yövahti konsolissa
   Kerma/paperi-pohja · laivastonsininen muste · koralli-signaali.
   Display: Fraunces Supersoft · Label: Trend Slab HM · Leipä/UI: Work Sans (tabular-nums).
   Muotokieli: viirikupla · katkoviivareitti→X · aallonharja-viiva.
   Tumma "yövahti" vain dashboardissa. Ei liukuvärejä, ei glowta.
   ============================================================ */
:root{
  --bg:#faf6ee; --paper:#fffdf8; --card:#fffdf8; --field:#f2ede2;
  --ink:#14304d; --ink-2:#31506d; --text:var(--ink); --text-2:#31506d; --muted:#4d6a84; --faint:#647a90; --footer-faint:#647a90;
  --coral:#e85c4a; --coral-soft:rgba(232,92,74,.12);
  --night:#0f2740; --night-2:#16334f; --night-ink:#f3eee2;
  --ok:#1e9e6a; --warn:#c07b1f; --crit:#c2452f;
  --hair:rgba(20,48,77,.16); --hair-soft:rgba(20,48,77,.09);
  --accent:var(--coral); --accent-hi:var(--coral);
  --maxw:1200px; --pad-x:20px; --panel-w:min(1020px,84vw);
  --pad-y:clamp(64px,9vw,116px); --pad-y-sm:clamp(40px,5vw,64px); --pad-y-lg:clamp(88px,12vw,150px);
  --fs-2xs:12px; --fs-xs:13px; --fs-sm:14px; --fs-base:15px; --fs-md:17px;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --font-body:'Work Sans',system-ui,sans-serif;
  --font:var(--font-body);
  --font-display:'Fraunces',Georgia,serif; /* ladataan SOFT@100 → Fraunces Supersoft */
  --font-label:'Trend Slab HM','Work Sans',system-ui,sans-serif; /* eyebrow't, leimat, badget */
  /* aallonharja-osioerotin: hairline—yksi harja—hairline */
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='12' viewBox='0 0 1200 12'%3E%3Cpath d='M0 8 H540 C556 8 562 3 576 3 C590 3 596 8 612 8 H1200' fill='none' stroke='rgba(20,48,77,.35)' stroke-width='1.5'/%3E%3C/svg%3E");
}

@font-face{
  font-family:'Trend Slab HM';
  src:url('../fonts/LatinotypeTrendHMSlabOne.woff2') format('woff2'),url('../fonts/LatinotypeTrendHMSlabOne.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---- reset / base ---- */
*{box-sizing:border-box}
html{scroll-padding-top:72px}
/* overflow-anchor:none — itsestään pyörivät animaatiot (heromini/demo) laukoivat Chromen
   scroll-ankkuroinnin, joka kävelytti rullauksen takaisin ylös kesken lukemisen */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:470;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.55;overflow-anchor:none}
/* Hero-meri: taivas (vaalea hiekka) ylös → korallimeri alas; aallot hero-sea.js:ssä.
   Kartan alla (z-index:-1). Vain etusivulla (.hero-sea lisätään front-page.php:ssä). */
.hero-sea{position:absolute;top:0;left:0;right:0;height:110vh;z-index:-1;pointer-events:none;overflow:hidden;background:transparent}
/* TESTI: hiekka-taivas (korallihehku ylhäällä) pois — palautus tarvittaessa:
   background:linear-gradient(180deg,#efe3cf 0%,#f6efe1 22%,var(--bg) 44%); */
.hero-sea__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Purje: pieni purje uloimman aallon harjalla (hero-sea.js asemoi + keinuttaa).
   Sama väri kuin uloin aaltokerros (#F7DFD5). Ankkuripiste = alareunan keskus
   (vesiraja), keinunta pyörii sen ympäri. z-index:-1 → aaltojen SVG piirtyy päälle,
   joten lähemmät aallot peittävät poijun tyven (vain harjan ylittävä osa näkyy,
   kuin poiju aallon takana). transform-origin tyvessä → skaalaus ei nosta tyveä
   pinnasta. Piiloon mobiilissa. Liike: assets/js/hero-sea.js (driveBuoy). */
.hero-buoy{position:absolute;left:0;top:0;width:34px;opacity:0;pointer-events:none;z-index:-1;
  transform-origin:50% 100%;transform:translate(-50%,-100%);will-change:transform,opacity}
.hero-buoy svg{display:block;width:100%;height:auto}
@media (max-width:900px){.hero-buoy{display:none}}
.sea-band{position:absolute;left:0;right:0;z-index:-1;pointer-events:none;background:#EC8677}
.hero-sea--flip{height:90vh;background:none;transform:scaleY(-1)}
@media (max-width:640px){.hero-sea{height:100vh;background:linear-gradient(to top,rgba(232,92,74,.12) 0%,rgba(232,92,74,.05) 14%,transparent 34%)}}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1,h2,h3,.logo__word{font-family:var(--font-display)}
input,button{font-family:inherit}
::selection{background:var(--ink);color:var(--paper)}

/* ---- layout ---- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}
.site-main{display:block;position:relative}
.section{position:relative;padding:var(--pad-y) 0}
.section+.section::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hair);pointer-events:none}
.section > .container{position:relative}
/* sisältö kartta-arkin (.chartsheet) yläpuolelle — läpinäkymättömät pinnat leikkaavat viivat.
   .site-footer EI saa eksplisiittistä z-indexiä (jää auto:ksi) — muuten se perustaisi oman
   pinoamiskontekstin, joka vangitsisi sen SISÄLLÄ olevan .sea-finale-clipin (z-index:-1):
   se ei enää kilpailisi suoraan .site-mainin viimeisen sisällön kanssa vaan koko footer
   (yksikkönä) voittaisi DOM-järjestyksen perusteella — meri/hohde piirtyisi edeltävän
   sisällön PÄÄLLE sen sijaan että jäisi sen alle (havaittu 2026-07-16). z-index:auto +
   position:relative riittää: footer on silti DOM-järjestyksessä chartsheetin jälkeen. */
.site-main{position:relative;z-index:1}
.site-main{padding-top:108px}

/* ---- eyebrow (lokikirjarivi) ---- */
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--font-label);font-weight:400;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.eyebrow__num{color:var(--coral)}
.eyebrow__rule{width:30px;height:1px;background:var(--hair)}

/* ---- napit + interaktiotilat ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:var(--fs-sm);padding:11px 18px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .2s var(--ease-out),background-color .2s var(--ease-out)}
.btn--cta{color:var(--paper);background:var(--ink);box-shadow:0 2px 0 rgba(20,48,77,.25)}
.btn--cta:hover{transform:translateY(-1px);background:var(--coral);box-shadow:0 4px 10px rgba(232,92,74,.35)}
.btn--ghost{color:var(--ink);background:transparent;border-color:var(--ink)}
.btn--ghost:hover{color:var(--coral);border-color:var(--coral);background:var(--coral-soft)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--lg{font-size:16px;padding:15px 26px;border-radius:12px}
:focus-visible{outline:2px solid var(--coral);outline-offset:2px;border-radius:4px}
.btn:focus-visible,a.btn:focus-visible{border-radius:inherit}
.arrowlink{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--ink)}
.arrowlink:hover{color:var(--coral)}

/* Skip-link: piilossa kunnes saa nappainfokuksen (saavutettavuus). */
.skip-link{position:fixed;top:-100px;left:16px;z-index:200;background:var(--navy);color:#fff;font-weight:700;font-size:15px;padding:12px 20px;border-radius:0 0 10px 10px;transition:top .15s ease}
.skip-link:focus-visible{top:0;outline:2px solid var(--coral);outline-offset:2px}

/* ---- header ---- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;border-bottom:1px solid transparent;transition:background .3s var(--ease-out),border-color .3s var(--ease-out)}
.site-header.is-scrolled{background:rgba(250,246,238,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--hair)}
.site-header__inner{max-width:none;margin:0;padding:44px clamp(24px,3.4vw,56px) 0;height:108px;display:flex;align-items:center;gap:clamp(16px,1.8vw,30px);transition:height .3s var(--ease-out),padding-top .3s var(--ease-out)}
.site-header.is-scrolled .site-header__inner{height:60px;padding-top:0}
.logo{display:flex;align-items:center;gap:7px;min-height:44px;flex-shrink:0;color:var(--ink)}
.logo .logo-svg,.logo-mark,.logo-word{display:block;height:39px;width:auto;transition:height .3s var(--ease-out)}
.logo-mark{overflow:visible}
.site-header.is-scrolled .logo .logo-svg,.site-header.is-scrolled .logo-mark,.site-header.is-scrolled .logo-word{height:27px}
.site-footer .logo{color:var(--night-ink)}
.site-footer .logo .logo-svg,.site-footer .logo-mark,.site-footer .logo-word{height:30px}
.logo__mark{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center}
.logo__mark svg{display:block}
.logo__word{font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.nav{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.4vw,24px);flex:1;list-style:none;margin:0;padding:0}
.nav a{font-size:11.5px;font-weight:650;text-transform:uppercase;letter-spacing:.085em;white-space:nowrap}
.nav a{position:relative;font-size:14px;color:var(--ink);transition:color .2s var(--ease-out)}
.nav a:hover{color:var(--coral)}
/* animoitu koralli-alleviivaus: hoverissa + aktiivisella sivulla */
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease-out)}
.nav a:hover::after{transform:scaleX(1)}
.nav li.current-menu-item>a::after,.nav li.current_page_item>a::after,.nav li.current-menu-ancestor>a::after{transform:scaleX(1);animation:navUnderline .55s var(--ease-out)}
@keyframes navUnderline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.site-header__right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.site-header__right .login{font-size:14px;color:var(--ink);font-weight:600;border:1.5px solid var(--ink);padding:9px 17px;border-radius:10px;transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out)}
.lang-switch{position:relative;display:flex;align-items:center;margin-right:2px}
.lang-switch__toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--ink);cursor:pointer;transition:transform .2s var(--ease-out),background-color .2s var(--ease-out),color .2s var(--ease-out)}
/* Lepotilassa pelkkä maapallo (ei ympyrää); hoverissa/avattuna koralli-pallo (ja pieni nosto). */
.lang-switch__toggle:hover,
.lang-switch:hover .lang-switch__toggle,
.lang-switch:focus-within .lang-switch__toggle,
.lang-switch.is-open .lang-switch__toggle{transform:translateY(-1px);background:var(--coral);color:var(--bg)}
.lang-switch__globe{display:block}
.lang-switch__menu{position:absolute;top:calc(100% + 8px);right:0;min-width:128px;background:var(--paper);border:1px solid var(--hair);border-radius:12px;box-shadow:0 10px 30px rgba(20,48,77,.16);padding:6px;display:none;flex-direction:column;gap:2px;z-index:70}
.lang-switch.is-open .lang-switch__menu{display:flex;animation:langMenuIn .2s var(--ease-out)}
/* Osoitinlaitteet: valikko esiin hoverista + näppäimistöfokuksesta — ei klikkiä.
   Kosketuslaitteilla (esim. iPad, hover:none) klikkaus hoitaa (.is-open, site.js). */
@media (hover:hover){
  .lang-switch:hover .lang-switch__menu,
  .lang-switch:focus-within .lang-switch__menu{display:flex;animation:langMenuIn .2s var(--ease-out)}
  /* näkymätön silta toggelin ja valikon välisen 8px:n raon yli, ettei valikko katoa */
  .lang-switch__menu::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
}
@keyframes langMenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.lang-switch__item{font-size:13px;font-weight:600;letter-spacing:.02em;padding:8px 12px;border-radius:8px;color:var(--text-2);text-decoration:none;white-space:nowrap}
.lang-switch__item.is-active{color:var(--ink);background:rgba(20,48,77,.07)}
.lang-switch__item:hover{color:var(--ink);background:rgba(20,48,77,.05)}
.site-header__right .login:hover{color:var(--coral);border-color:var(--coral);background:var(--coral-soft)}
.nav-toggle{display:none;width:44px;height:44px;border-radius:10px;background:transparent;border:1px solid var(--hair);color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:18px;height:2px;background:currentColor;position:relative;transition:transform .3s cubic-bezier(.16,1,.3,1),background-color .3s ease}
.nav-toggle span::before{position:absolute;top:-6px}
.nav-toggle span::after{position:absolute;top:6px}
/* hampurilainen → X: keskiviiva haihtuu, laidat kiertyvät */
.nav-toggle.is-open span{background:transparent}
.nav-toggle.is-open span::before{transform:translateY(6px) rotate(-45deg)}
.nav-toggle.is-open span::after{transform:translateY(-6px) rotate(45deg)}
/* Kirjaudu-napin katko siirretty 1240 -> 1360, ja se on NAVIGAATION
   KESKITYKSEN EHTO eika erillinen sailo.

   MITATTU: napin kanssa oikea laita on 360,9px ja ilman sita 252,4px, kun logo
   on 226,1px. Tasakeskitys vaatii leveyden 2 x max(logo, oikea) + navi + 2 x
   padding. Napin kanssa se on 2x360,9 + 528,9 + 2x45,6 = 1341 px, eli
   valilla 1241-1340 px keskitetty navi EI MAHDU logon ja oikean laidan valiin
   — se joko tormaisi tai puristaisi logon. Ilman nappia vaatimus on 1091 px,
   joka mahtuu koko desktop-alueelle 1101 px:sta ylospain.

   Nappi on jo ennestaan piilossa 1101-1240 px:lla, joten tama ei ole uusi
   kayttaytyminen vaan saman katkon siirto 120 px leveammalle. Kirjautuminen
   sailyy mobiilivalikon nav-login-kohteessa. */
@media (max-width:1360px){
  .site-header__right .login{display:none}
}

/* ── NAVIGAATIO TASMALLEEN SIVUN KESKELLE ─────────────────────────────────
   MITATTU VIKA (1440 px): .nav on flex:1 eli se TAYTTAA logon ja oikean laidan
   valin, joten sen keskipiste on niiden puolivalissa eika sivun keskella.
   Logo 226,1px ja oikea laita 360,9px -> valikon keskipiste oli 652,6 kun sivun
   keskipiste on 720, eli 67,4px vasemmalla. Se on tasmalleen puolet
   epasymmetriasta ((360,9-226,1)/2), mika vahvistaa syyn.

   TASAKESKITYS EIKA ABSOLUUTTINEN ASEMOINTI. position:absolute + left:50% +
   translateX(-50%) keskittaisi myos tasmallisesti, mutta se irrottaa navin
   virrasta kolmella hinnalla joita ei tarvitse maksaa: (1) oikea laita
   luiskahtaisi logon viereen kun se jaa ainoaksi kasvavaksi kohteeksi,
   (2) pystykeskitys menisi rikki koska prosentit ratkeavat PADDING-laatikkoa
   vasten ja .site-header__innerilla on 44px ylapehmuste eli navi asettuisi
   22px logoa ylemmas, ja (3) tormays kapeilla naytoilla olisi paallekkaisyys
   eika puristumista. Kaksi yhta levea reunaa antaa saman tuloksen ilman naita.

   VAIN min-width:1101px. Sen alla .nav on position:fixed kokoruudun
   nousuvesivalikko (rivi 167), ja nama saannot eivat saa vuotaa sinne. */
@media (min-width:1101px){
  .site-header__inner > .logo{flex:1 1 0;min-width:0;justify-content:flex-start}
  .site-header__inner > .nav{flex:0 0 auto}
  .site-header__inner > .site-header__right{flex:1 1 0;min-width:0;justify-content:flex-end}
}
@media (max-width:1100px){
  /* Koko ruudun mobiilinavi — AYE MATEY: NOUSUVESI. Navy meri nousee ruutuun
     alhaalta aaltoharja (::before) edellä, ja linkit pulpahtavat pintaan kuin
     poijut: pienestä nousten, kevyesti keinahtaen, porrastetusti alhaalta ylös. */
  .nav{position:fixed;inset:0;height:100dvh;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;background:var(--ink);padding:120px clamp(24px,7vw,48px) 48px;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;pointer-events:none;z-index:1}
  .nav::before{content:"";position:absolute;left:-10%;right:-10%;top:-34px;height:36px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='36' viewBox='0 0 220 36'%3E%3Cpath d='M0 36 V22 C 18 10 37 10 55 22 C 73 34 92 34 110 22 C 128 10 147 10 165 22 C 183 34 202 34 220 22 V36 Z' fill='%2314304d'/%3E%3C/svg%3E") repeat-x bottom/220px 36px}
  .nav.is-open{visibility:visible;pointer-events:auto;animation:navTide .55s cubic-bezier(.22,1,.36,1) both}
  .nav.is-open::before{animation:navSwell .9s ease-out both}
  .nav li{width:100%;border-bottom:1.5px solid rgba(243,238,226,.22);opacity:0;transform:translateY(34px) rotate(-1.6deg);transform-origin:left center}
  .nav.is-open li{animation:navBuoy .6s cubic-bezier(.3,1.45,.45,1) both}
  /* poijut nousevat pintaan ALHAALTA ylös — viimeinen linkki ensin, kuten vesi ne saavuttaa */
  .nav.is-open li:nth-child(1){animation-delay:.34s}
  .nav.is-open li:nth-child(2){animation-delay:.30s}
  .nav.is-open li:nth-child(3){animation-delay:.26s}
  .nav.is-open li:nth-child(4){animation-delay:.22s}
  .nav.is-open li:nth-child(5){animation-delay:.18s}
  .nav.is-open li:nth-child(6){animation-delay:.14s}
  .nav.is-open li:nth-child(7){animation-delay:.10s}
  .nav.is-open li:nth-child(8){animation-delay:.06s}
  .nav.is-open li:nth-child(9){animation-delay:.03s}
  .nav.is-open li:nth-child(10){animation-delay:0s}
  @media (prefers-reduced-motion:reduce){
    .nav.is-open,.nav.is-open::before,.nav.is-open li{animation:none;opacity:1;transform:none}
  }
  .nav a{display:block;width:100%;padding:16px 0;font-family:var(--font-display);font-variation-settings:"opsz" 40;font-size:clamp(28px,7.5vw,38px);font-weight:600;line-height:1.1;letter-spacing:0;text-transform:none;color:var(--bg)}
  .nav a:hover{color:var(--coral)}
  .nav a::after{display:none}
  .nav-toggle{display:inline-flex;border:0;border-radius:0;width:44px;justify-content:flex-end}
  .site-header__right{margin-left:auto;gap:10px}
  .lang-switch{display:none}   /* kieli valitaan mobiilinavin sisältä */
  .logo,.site-header__right{position:relative;z-index:2}
  body.nav-open{overflow:hidden;height:100dvh}
  body.nav-open .site-header,body.nav-open .site-header.is-scrolled{background:transparent;border-color:transparent}
  body.nav-open .logo{color:var(--bg)}
  body.nav-open .lang-switch__toggle{background:transparent;color:var(--bg)}
  body.nav-open .nav-toggle{color:var(--bg)}
  /* Kieli subnavina navin lopussa: pieni label + kielirivi */
  .nav .nav-lang{border-bottom:0;margin-top:30px;display:flex;flex-direction:column;gap:10px;opacity:0}
  .nav .nav-lang__label{font-family:var(--font-label);font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:rgba(243,238,226,.55)}
  .nav .nav-lang__links{display:flex;gap:22px}
  .nav .nav-lang a{display:inline-block;width:auto;padding:2px 0;font-family:var(--font-body);font-variation-settings:normal;font-size:16.5px;font-weight:600;line-height:1.4;color:var(--bg);border-bottom:2px solid transparent}
  .nav .nav-lang a.is-active{color:#fff;border-bottom-color:#fff}
  .nav .nav-login{border-bottom:0;margin-top:18px}
  .nav .nav-login a{display:inline-block;width:auto;border:1.5px solid var(--bg);color:var(--bg);font-family:var(--font-body);font-size:15.5px;font-weight:650;line-height:1;padding:13px 26px;border-radius:12px}
  .nav .nav-login a:hover{color:var(--coral);border-color:var(--coral)}
  /* CTA valikon sisällä kermanappina (koralli ei ole nappiväri) */
  .nav .nav-extra{border-bottom:0;margin-top:12px}
  .nav .nav-extra a{display:inline-block;width:auto;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15.5px;font-weight:650;line-height:1;padding:15px 28px;border-radius:12px}
  .nav .nav-extra a:hover{color:var(--ink)}
}
@media (min-width:1101px){
  .nav .nav-extra,.nav .nav-login,.nav .nav-lang{display:none}
}
@media (max-width:640px){
  /* kapealla header-CTA piiloon: sama CTA on valikon sisällä */
  .site-header .btn--cta{display:none}
}
@keyframes navTide{from{transform:translateY(103%)}to{transform:translateY(0)}}
@keyframes navSwell{0%{transform:translateX(0) scaleY(1)}60%{transform:translateX(-60px) scaleY(1.35)}100%{transform:translateX(-110px) scaleY(0)}}
@keyframes navBuoy{0%{opacity:0;transform:translateY(34px) rotate(-1.6deg)}60%{opacity:1;transform:translateY(-5px) rotate(.7deg)}100%{opacity:1;transform:none}}
@media (max-width:860px){
  .site-header__inner{height:70px;padding-top:0}
  .site-header.is-scrolled .site-header__inner{height:58px}
  .logo .logo-svg,.logo-mark,.logo-word{height:27px}
  .site-header.is-scrolled .logo .logo-svg,.site-header.is-scrolled .logo-mark,.site-header.is-scrolled .logo-word{height:23px}
  .site-main{padding-top:70px}
}

/* ---- footer ---- */
.site-footer{position:relative;background:#16304d;border-top:0;color:rgba(243,238,226,.68)}
.site-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));column-gap:96px;row-gap:36px;padding:14px 0 28px}
.site-footer__tagline{margin-top:0;font-size:clamp(14px,1.3vw,16px);font-weight:700;line-height:1.55;color:rgba(243,238,226,.94);max-width:34ch}
.site-footer__copyright{margin-top:14px;font-size:clamp(14px,1.3vw,16px);font-weight:700;line-height:1.55;color:rgba(243,238,226,.94);max-width:34ch}
.footer-col__title{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--night-ink);margin-bottom:14px;font-family:var(--font-label);font-weight:400}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer-col a{font-size:14px;color:rgba(243,238,226,.68);transition:color .2s var(--ease-out)}
.footer-col a:hover{color:#fff}
@media (max-width:640px){
  .footer-col ul{gap:0}
  .footer-col a{display:inline-flex;align-items:center;min-height:44px}
}
/* Iso laidasta laitaan (viewportin, ei containerin) kulkeva wordmark
   (Antigravity-referenssi, sovitettu yö-teemaan): OIKEA logotype-SVG (ei
   fontti, ei liikemerkki — ks. templateparts/wordmark-big.php), täyttö =
   tasan footerin navy (sulautuu taustaan) + ohut hiekanvärinen ääriviiva,
   jolloin kirjaimet lukevat ontoiksi ääriviivoiksi navya vasten. Leveys on
   viewport-sidonnainen (ei .container) → aidosti reunasta reunaan; body{
   overflow-x:hidden} imee pois 100vw-tempun mahdollisen alipikselivuodon. */
.site-footer__wordmark{position:relative;left:50%;width:100vw;margin:clamp(20px,4vw,44px) 0 0 -50vw;padding:0 clamp(16px,3.4vw,40px) clamp(10px,1.8vw,20px);box-sizing:border-box}
/* Kaksi päällekkäistä identtistä SVG:tä: base = tarkka VAIN kursorin
   ULKOPUOLELLA, ripple = vääristetty VAIN kursorin ALLA. Maskit ovat
   toistensa käänteisiä (samat pysähdykset, käänteinen musta/läpinäkyvä)
   → tasan yksi kerroista näkyy per pikseli. Maskin reuna on TERÄVÄ
   (sama pysähdyskohta kahdesti, ei liuku-vyöhykettä) — kummallakaan
   kerroksella ei siis KOSKAAN ole osittaista läpinäkyvyyttä samassa
   pikselissä, joten opasiteettien sekoittumisesta ei voi syntyä
   tuplaviivaa/haamukuvaa, vaikka vääristetty viiva onkin geometrisesti
   hieman siirtynyt suorasta juuri reunan kohdalla. (Aiempi yritys
   häivyttää itse vääristymän voimakkuutta tilallisesti filtterin
   sisällä feImage+feComposite-yhdistelmällä osoittautui epäluotettavaksi
   — ks. templateparts/wordmark-big.php:n kommentti.)
   --mx/--my päivittyy assets/js/wordmark-ripple.js:ssä kursorin mukaan. */
.site-footer__wordmark-stage{position:relative}
.site-footer__wordmark-svg{display:block;width:100%;height:auto;color:#16304d}
.site-footer__wordmark-svg path{stroke:var(--night-ink);stroke-width:.8}
/* Kolme erillistä TERÄVÄREUNAISTA vyöhykettä (tasan yksi kerros per pikseli):
   ripple 0–95px (täysi voima), ripple2 rengas 95–170px (45 % voima, JS ajaa
   scalea), base 170px+ (suora viiva). Porrastus vaimentaa aaltoilua reunaa
   kohti ILMAN opacity-feidausta — rajoilla vain pieni geometrinen taite. */
.site-footer__wordmark-svg--base{
  -webkit-mask-image:radial-gradient(circle 170px at var(--mx,-999px) var(--my,-999px),transparent 100%,#000 100%);
  mask-image:radial-gradient(circle 170px at var(--mx,-999px) var(--my,-999px),transparent 100%,#000 100%)}
.site-footer__wordmark-svg--ripple{position:absolute;inset:0;filter:url(#wordmarkRipple);pointer-events:none;
  -webkit-mask-image:radial-gradient(circle 170px at var(--mx,-999px) var(--my,-999px),#000 95px,transparent 95px);
  mask-image:radial-gradient(circle 170px at var(--mx,-999px) var(--my,-999px),#000 95px,transparent 95px)}
.site-footer__wordmark-svg--ripple2{position:absolute;inset:0;filter:url(#wordmarkRipple2);pointer-events:none;
  -webkit-mask-image:radial-gradient(circle 170px at var(--mx,-999px) var(--my,-999px),transparent 95px,#000 95px 170px,transparent 170px);
  mask-image:radial-gradient(circle 170px at var(--mx,-999px) var(--my,-999px),transparent 95px,#000 95px 170px,transparent 170px)}
/* Kuunvalon kimallus finaalimeren pinnalla: muutama himmeä, hitaasti
   sykkivä piste vesikaistan yläosassa (staattinen CSS, ei JS-kustannusta).
   Meri on nyt aina paikallaan (ei nousu-triggeriä) → kimallus näkyy suoraan. */
.sea-finale-clip::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:
    radial-gradient(1.6px 1.6px at 22% 63%,rgba(243,238,226,.85),transparent 100%),
    radial-gradient(1.3px 1.3px at 47% 58%,rgba(207,227,238,.8),transparent 100%),
    radial-gradient(1.8px 1.8px at 68% 67%,rgba(243,238,226,.7),transparent 100%),
    radial-gradient(1.3px 1.3px at 81% 60%,rgba(207,227,238,.75),transparent 100%),
    radial-gradient(1.4px 1.4px at 34% 72%,rgba(243,238,226,.6),transparent 100%);
  animation:moonGlint 5.5s ease-in-out infinite}
@keyframes moonGlint{0%,100%{opacity:.55}50%{opacity:1}}

/* ---- liike ---- */
@keyframes livePulse{0%,100%{box-shadow:0 0 0 3px rgba(30,158,106,.25)}50%{box-shadow:0 0 0 6px rgba(30,158,106,.05)}}
@keyframes coralPing{0%{box-shadow:0 0 0 0 rgba(232,92,74,.5)}70%{box-shadow:0 0 0 9px rgba(232,92,74,0)}100%{box-shadow:0 0 0 0 rgba(232,92,74,0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ============================================================
   HERO — päivänvalo, merikartta
   ============================================================ */
.hero{position:relative;padding:clamp(40px,4.5vw,64px) 0 clamp(64px,8vw,104px);text-align:center;overflow:hidden;background:transparent}
/* desktop: hero pinnataan ruutuun, sisältö haipuu ja seuraava osio liukuu yli */
@media (min-width:900px){
  /* Hero-sisältö valuu alas VAIN kun tilaa on. Mitattu 5K-näytöllä: vesiraja on
     suhteellinen (~80.8vh) mutta sisältö oli ankkuroitu pikseleinä ylhäältä,
     joten jokainen lisäpikseli korkeutta kasautui CTA:n ALLE — tyhjä väli
     CTA:sta veteen oli 43 px 900 px:n korkeudella mutta 428 px 1440:llä ja
     558 px 1600:lla.
     Yläpehmuste kasvaa PUOLELLA ylimääräisestä korkeudesta (40.4vh − 247px =
     puolet vesirajan 80.8vh:n kasvusta), jolloin tyhjä jakautuu ylä- ja
     alapuolelle. 900 px:llä lauseke antaa 117 px eli täsmälleen entisen arvon,
     joten tuttu taitto ei liiku.
     EI place-items:center: kokeilin sitä ja MITTASIN sen rikkovan matalat
     ruudut — 1280x720:llä sisältö ei mahdu vesirajan yläpuolelle, ja keskitys
     työnsi sen kiinteän headerin alle (mate.top 108 < header.bottom 109) ja
     CTA:n 81 px veden alle. clamp-alaraja 108px pitää matalat ruudut
     ennallaan, koska start-ankkurointi ei voi ylivuotaa ylöspäin. */
  .hero{position:relative;z-index:0;min-height:100vh;display:grid;place-items:start center;
    padding:clamp(108px,calc(40.4vh - 247px),520px) 0 0}
  .site-main:not(.page){padding-top:0}
  .site-main > .section{z-index:1}
}
.hero__grid{display:none}
.hero__glow{display:none}
.hero__glowfx{display:none}
.hero__inner{position:relative;z-index:2;max-width:940px}
/* Hero-pilvet: body-tasolla kartan viivojen/astelukujen ALLA (z:-2) ja meren
   alla (aallot peittävät alaosat). Mitat leiskasta; parallaksi hero-sea.js. */
.hero-clouds{position:absolute;top:0;left:0;right:0;height:110vh;overflow:hidden;pointer-events:none;z-index:-2;will-change:transform}
.hero-clouds .cloud{position:absolute;max-width:none;height:auto}
/* Matin asettelemat arvot (?pilvet=1-työkalulla 2026-07-11) */
.cloud--vy{top:15.8vh;left:-1.8vw;width:30vw}
.cloud--vk{top:31.7vh;left:15vw;width:14vw}
.cloud--va{top:32.6vh;left:-7.5vw;width:25vw}
.cloud--oy{top:13.5vh;right:-5.6vw;width:35vw}
.cloud--oa{top:26.8vh;right:-1.9vw;width:24vw}
/* hienovarainen sivuttaisdrift: eri kesto/vaihe per pilvi, ettei tahtia synny */
@media (prefers-reduced-motion: no-preference){
  .hero-clouds .cloud{--drift:2.4vw;animation:cloudDrift 13s ease-in-out infinite alternate}
  .hero-clouds .cloud--vy{--drift:2.2vw;animation-duration:15s;animation-delay:-4s}
  .hero-clouds .cloud--vk{--drift:3vw;animation-duration:10s;animation-delay:-7s}
  .hero-clouds .cloud--va{--drift:2vw;animation-duration:16s;animation-delay:-2s}
  .hero-clouds .cloud--oy{--drift:2.3vw;animation-duration:14s;animation-delay:-9s}
  .hero-clouds .cloud--oa{--drift:2.8vw;animation-duration:11s;animation-delay:-5s}
  .hero-clouds.is-editing .cloud{animation:none} /* asettelutyökalu: mitat eivät saa elää */
}
@keyframes cloudDrift{from{transform:translateX(calc(-1 * var(--drift)))}to{transform:translateX(var(--drift))}}
@media (max-width:900px){.hero-clouds{display:none}}

/* Hero-linnut: pari merilintua ilmestyy pilven (cloud--oy) takaa sen vasemmalta
   reunalta, liitää vasemmalle avotaivaalle, kutistuu ja katoaa kaukaisuuteen.
   Siivenlyönti JS:llä (birds.js swappaa path d). .hero-birds on hero-clouds-kerroksen
   ENSIMMÄINEN lapsi → pilvet piirtyvät päälle (occluusio) + piiloutuu mobiilissa. */
.hero-birds{position:absolute;inset:0;pointer-events:none}
.hero-bird{position:absolute;opacity:0;transform-origin:center;will-change:transform,opacity;
  animation:birdFly var(--dur,30s) ease-in-out var(--delay,0s) infinite}
.hero-bird svg{display:block;width:100%;height:auto;overflow:visible}
/* Lento: pilven takaa (translate 0, opaakki pilvi peittää) → ulos ylös-vasemmalle,
   kutistuu ja häipyy 0–50 % aikana. Loput 50–100 % pysyy näkymättömänä = ~15 s tauko
   (dur 30s), joten sama lento toistuu jonkin ajan kuluttua. Opasiteetti nousee jo pilven
   takana, joten reunan yli tullessa lintu on jo täysi (ei fade-poppia). */
@keyframes birdFly{
  0%     {opacity:0;                transform:translate(0,0) scale(1)}
  4%,40% {opacity:var(--op,.5)}
  50%    {opacity:0; transform:translate(var(--fx,-12vw),var(--fy,-11vh)) scale(.3)}
  100%   {opacity:0; transform:translate(var(--fx,-12vw),var(--fy,-11vh)) scale(.3)}
}
@media (prefers-reduced-motion: reduce){
  .hero-bird{animation:none;opacity:.4;
    transform:translate(calc(var(--fx,-20vw) * .6),calc(var(--fy,4vh) * .6)) scale(.55)}
}

/* TESTI: korallikajastus kajastaa aaltojen takaa heron alaosassa.
   Vesirajan (91.5vh) ylle nouseva hehku; meri (z:-1) peittää alaosan,
   joten valo näkyy vain veden yläpuolella. */
.hero-dawn{position:absolute;left:0;right:0;top:calc(91.5vh - 150px);height:190px;z-index:-2;pointer-events:none;
  background:linear-gradient(to top, rgba(232,92,74,.14) 0%, rgba(232,92,74,.05) 50%, rgba(232,92,74,0) 100%)}
@media (max-width:900px){.hero-dawn{display:none}}
/* width:max-content → säiliö kutistuu hahmon levyiseksi (ei koko rivin levyinen).
   Näin animaation re-arm (mouseleave .hero__mate) laukeaa heti kun poistut hahmon
   kohdalta myös sivusuunnassa — ei vasta koko otsikon levyisen alueen jälkeen. */
.hero__mate{display:flex;justify-content:center;width:max-content;max-width:100%;margin:0 auto 20px}
.hero__mate svg{height:clamp(96px,12vh,144px);aspect-ratio:745.4/753.5;width:auto;display:block;overflow:visible}
/* Hover-animaatio laukeaa vain hahmon (maalattujen polkujen) kohdalta, ei
   läpinäkyvän bbox-neliön kohdalta: svg-tausta ei nappaa, polut nappaavat. */
.mate-svg{pointer-events:none}
.mate-svg path{pointer-events:auto}
.hero__eyebrow{font-family:var(--font-label);font-weight:400;font-size:16px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
/* Mobiilihero: .hero-etuliite nostaa spesifisyyden (0,2,0) niin että nämä
   voittavat myöhemmin tulevat perussäännöt (.hero__title/.hero__sub jne.). */
@media (max-width:640px){
  /* padding-bottom varaa tilaa aaltojen ALLE: seuraava osio (21.34-laatikko)
     alkaa selvästi aaltoharjojen alapuolelta, ei niiden päältä. */
  .hero{padding-top:18px;padding-bottom:132px}
  .hero .hero__mate{margin:0 auto 12px}
  .hero .hero__mate svg{height:clamp(76px,10.5vh,100px)}
  .hero .hero__eyebrow{font-size:11px;letter-spacing:.10em;white-space:nowrap;margin-bottom:10px}
  /* H1 kahdelle riville (kuten desktopissa), täyttää sisältöleveyden joustavasti:
     8.4vw pitää pisimmän rivin ~89 % leveydellä joka näytöllä (ei 3. riviä). */
  .hero .hero__title{font-size:clamp(26px,8.4vw,40px);max-width:none;line-height:1.05}
  .hero .hero__title .hero__hi{display:block}
  .hero .hero__sub{font-size:13.5px;line-height:1.4;margin-top:10px}
  .hero .hero__actionrow{margin-top:22px}
}
@media (max-width:380px){.hero .hero__eyebrow{font-size:10px;letter-spacing:.06em}}
.hero__livedot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);animation:livePulse 2.4s ease-in-out infinite}
.hero__title{font-size:clamp(46px,6.6vw,84px);font-weight:700;line-height:.9;letter-spacing:-.02em;max-width:17ch;margin:0 auto;font-variation-settings:"opsz" 144;text-wrap:balance}
.hero__hi{color:var(--coral);font-style:italic}
.hero__sub{font-size:clamp(16px,1.8vw,19px);line-height:1.6;font-weight:600;color:var(--ink);max-width:70ch;margin:20px auto 0}
.hero__ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}
.hero__actionrow{position:relative;display:flex;align-items:stretch;justify-content:center;gap:16px;max-width:600px;margin:40px auto 0}
.hero__actionrow:has(.hero__trialrow){max-width:840px}
.hero__trialrow{display:flex;align-items:stretch;flex-shrink:0}
.hero__trialrow .btn{white-space:nowrap}
@media (max-width:860px){.hero__actionrow:has(.hero__trialrow){flex-wrap:wrap}.hero__trialrow{flex-basis:100%;justify-content:center;order:-1}.hero__ask,.hero__chat{order:0}.hero__trialrow .btn{width:100%;max-width:340px}}
.hero__ask{position:relative;z-index:1;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;padding:7px 7px 7px 20px;box-shadow:6px 6px 0 rgba(232,92,74,.28);transition:box-shadow .2s var(--ease-out),transform .2s var(--ease-out)}
.hero__ask:focus-within{box-shadow:8px 8px 0 rgba(232,92,74,.38);transform:translate(-1px,-1px)}
.hero__ask-input{flex:1;min-width:0;background:transparent;border:0;outline:none;font-size:17px;font-weight:500;color:var(--ink);padding:9px 0}
.hero__ask-input::placeholder{color:var(--muted)}
.hero__ask-send{flex-shrink:0;width:52px;height:48px;border:0;border-radius:10px;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s var(--ease-out),background-color .2s var(--ease-out)}
.hero__ask-send:hover{background:var(--coral)}
.hero__order{flex-shrink:0}
.hero__chat{flex:1 1 auto;min-width:0;text-align:left}
/* text-align:left on PORTATTU D&B:n ankkurisaannosta
   (.db-hero__audit-embed{text-align:left}, glitter.css:2091) ja se on
   tarpeellinen samasta syysta: hero on text-align:center, ja widget ei julista
   tasausta lainkaan, joten viestikuplat perivat keskityksen. Mitattu ketju
   tuotannosta: STRONG -> .am-msg-bot -> .am-stream -> .am-widget-inline ->
   .hero__chat -> .hero__actionrow -> .hero__inner -> section.hero, kaikki
   ta=center. Chat-kupla keskitetylla leipatekstilla ei ole se malli jota
   vasten tama tehtiin. Korjaus kuuluu ISANNALLE eika widgetille: hero omistaa
   keskityksen, joten hero myos peruu sen omalla alueellaan — tasmalleen niin
   kuin D&B tekee. */
/* VAIHE 2 TEHTY (2026-08-22): ankkuri on [data-ayematey-inline].
   Aiempi kommentti tässä sanoi että nimenmuutos "tehdään yhdessä middlewaren
   kanssa, ei ennen" — juuri niin kävi: Aye Mateyn entry.tsx etsii ankkurin
   valitsimella [data-ayematey-inline], joten vanha data-donbranco löytyi
   NOLLA kertaa ja hero jäi tyhjäksi diviksi täysin hiljaa (ei virhettä, ei
   lokia). Widget ja teema vaihdettiin samassa julkaisussa.
   !important on edelleen tarpeen: se kumoaa mahdollisen inline-min-heightin
   ankkurissa. */
.hero__chat[data-ayematey-inline]{min-height:0!important}
.hero__trust{display:flex;flex-direction:column;gap:7px;margin-top:72px;position:relative;z-index:1;font-family:var(--font-body);font-weight:500;font-size:12px;letter-spacing:.04em;color:var(--muted)}
.hero__trustrow{display:block}

/* MATALAT DESKTOP-RUUDUT (<=849px korkeus): hero mahtuu vesirajan yläpuolelle.
   Ongelma mitattuna 1280x720: sisältöpino on 554.6px korkea mutta headerin
   alalaidasta (109) aaltojen harjaan (581.8) on vain 472.8px, joten chatti-input
   JA "Aloita ilmainen kokeilu" jäivät veden alle — ja koska hero-maskin häivytys
   alkaa 91vh-44px = 611px, napin alalaita myös liukeni läpinäkyväksi.
   Vaje oli 720:llä 81.8px, 768:lla 43px, 800:lla 17px, 820:lla 2.5px.

   Jokainen mitta on suora vh-liuku joka OSUU nykyiseen arvoonsa 849px:ssä
   (esim. otsikko 12.4vh-21.3px = 84.0px kun 100vh=849) — siksi rajalla ei ole
   hyppyä eikä >=850px korkeille ruuduille tule mitään muutosta. Mitattu
   siirto 849px:llä = 0.0px, 850px:llä 0px, 900px:llä 0px, 1440px:llä 0px.

   Interaktiivinen .hero__actionrow (input + nappi) pidetään TÄYDESSÄ koossa;
   tila haetaan perämiehestä, typografiasta ja pystyväleistä. Mitattu ilma
   CTA:sta harjaan korjauksen jälkeen: 720 -> +40.5px, 768 -> +31.9,
   800 -> +26.1, 820 -> +22.5 (ennen -80.9 / -42.2 / -16.3 / -2.5).
   Ilma on mitoitettu aaltojen bump-nousulle: kursori vesirajan tuntumassa
   nostaa harjaa 18.5px, joten pahin ilma 720:llä on +20.5px eikä osuma.

   clamp-alarajat (44px/11.5px/15.5px...) purevat vasta ~630px korkeudella:
   ne ovat selaimen zoomia varten (125% @1280x720 = CSS-viewport 1024x576,
   jossa ilma on +26.7px; ilman niitä +9.6px). >=633px ne ovat passiivisia. */
@media (min-width:900px) and (max-height:849px){
  /* PAKOLLINEN typografian kutistamisen kanssa: .hero on grid + place-items:
     start center, joten .hero__inner on fit-content-solu jonka leveys tulee
     lapsien ch-mitoista (.hero__title 17ch, .hero__sub 70ch). Kun otsikko ja
     ingressi pienenevät, ch kutistuu, palsta romahtaa (940 -> 818px 720:llä)
     ja .hero__actionrow'n max-width:840px lakkaa puremasta: chatti-input kapeni
     498.9 -> 437.2px (-12.4 %) ja 768:lla -37px. Tuotannossa sama boksi on
     .hero__chat[data-ayematey-inline]-widgetin mount-piste. width:100% irrottaa solun
     ch-mitoista; max-width:940px pitää katon. Mitattu: pystymitat eivät liiku
     0.00px eikä keskitys siirry, rivimäärät pysyvät 2 ja 4 (FI + EN). */
  .hero .hero__inner{width:100%}
  .hero .hero__mate svg{height:clamp(44px,calc(23.2vh - 95px),102px)}
  .hero .hero__mate{margin-bottom:clamp(6px,calc(6.2vh - 32.6px),20px)}
  .hero .hero__eyebrow{font-size:clamp(11.5px,calc(1.55vh + 2.84px),16px);
    margin-bottom:clamp(4px,calc(6.2vh - 36.6px),16px)}
  .hero .hero__title{font-size:clamp(46px,min(6.6vw,calc(12.4vh - 21.3px)),84px)}
  .hero .hero__sub{margin-top:clamp(6px,calc(6.2vh - 32.6px),20px);
    font-size:clamp(15.5px,calc(1.16vh + 9.14px),19px);
    line-height:clamp(21px,calc(3.8vh - 1.86px),30.4px)}
  .hero .hero__actionrow{margin-top:clamp(8px,calc(17.05vh - 104.8px),40px)}
}

/* Mini-viiriloop: lyhyt esimerkkikeskustelu joka pyörii (CSS-only; reduced-motion → loppuasetelma) */
.heromini{position:relative;max-width:720px;margin:40px auto 0;text-align:left}
.heromini__win{position:relative;background:var(--paper);border:1.5px solid var(--ink);border-radius:16px;padding:26px;box-shadow:5px 5px 0 rgba(20,48,77,.12)}
/* viirikupla-häntä */
.heromini__win::after{content:"";position:absolute;left:34px;bottom:-13px;width:22px;height:13px;background:var(--paper);clip-path:polygon(0 0,100% 0,20% 100%);border-left:1.5px solid var(--ink)}
.heromini__msg{display:flex;margin:0 0 12px}
.heromini__msg:last-child{margin-bottom:0}
.heromini__msg--user{justify-content:flex-end}
.heromini__bubble{max-width:80%;padding:14px 18px;font-size:16.5px;line-height:1.55;border-radius:13px}
.heromini__msg--user .heromini__bubble{background:var(--ink);color:var(--paper);border-bottom-right-radius:3px}
.heromini__msg--bot .heromini__bubble{background:var(--field);color:var(--ink);border-bottom-left-radius:3px}
.heromini__msg--aye .heromini__bubble{background:var(--coral);color:#fff;font-weight:600;border-bottom-left-radius:3px}
.heromini__meta{margin-top:12px;font-family:var(--font-body);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.05em;font-size:12px;color:var(--muted);text-align:center}
@media (prefers-reduced-motion:no-preference){
  .heromini__msg--user{animation:miniMsg1 11s var(--ease-out) infinite}
  .heromini__msg--bot{animation:miniMsg2 11s var(--ease-out) infinite}
  .heromini__msg--aye{animation:miniMsg3 11s var(--ease-out) infinite}
  @keyframes miniMsg1{0%{opacity:0;transform:translateY(8px)}4%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
  @keyframes miniMsg2{0%,15%{opacity:0;transform:translateY(8px)}21%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
  @keyframes miniMsg3{0%,33%{opacity:0;transform:translateY(8px) scale(.97)}39%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
}

/* ============================================================
   DEMO — kertoja + tuoteikkuna paperipaneelissa
   ============================================================ */
.section--demo{padding-top:var(--pad-y-sm);padding-bottom:clamp(140px,18vh,200px);background:transparent}
.demo__panel{position:relative;max-width:var(--panel-w);margin-inline:auto;border:1.5px solid var(--ink);border-radius:18px;background:var(--paper);box-shadow:0 0 0 0 rgba(255,255,255,0),6px 6px 0 rgba(20,48,77,.1);padding:clamp(28px,5vw,64px);transition:box-shadow 1.3s var(--ease-out)}
/* Scrollaukseen sidottu reittipallo kulkee laatikon LÄPI (chart-sheet.js) — kun se on
   kohdalla, kasvava valkoinen kehys ympärille. */
.demo__panel.route-hit{box-shadow:0 0 0 6px #fff,6px 6px 0 rgba(20,48,77,.1)}
/* osion otsikko + ingressi ovat nyt demo-paneelin (kerma) SISÄLLÄ → tumma teksti,
   ei tarvetta korallitaustan tummennukselle */
.demo__head{max-width:640px;margin:0 auto clamp(52px,6.5vw,88px);text-align:center}
.demo__head-title{font-size:clamp(28px,3.6vw,44px);font-weight:700;line-height:1.1;letter-spacing:-.015em;text-wrap:balance;font-variation-settings:"opsz" 96;color:var(--ink)}
.demo__head-lead{margin-top:14px;font-size:var(--fs-md);line-height:1.6;font-weight:500;color:var(--text-2)}
/* Koko sisältö (tekstit + kalenteri-animaatio) nostettu ylös sen verran kuin poistettu pause-nappi vei. */
.demo__inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:56px;align-items:center;position:relative;transform:translateY(-30px)}
.demo__title{font-size:clamp(28px,3.6vw,42px);font-weight:700;line-height:1.12;letter-spacing:-.015em;max-width:16ch;text-wrap:balance;font-variation-settings:"opsz" 96}
/* Aktiivisen näytöksen pystypalkki otsikoiden vasemmalla puolella: haalea rata
   koko otsikkoparin matkalla, tumma segmentti liukuu aktiivisen kohdalle.
   Näkyy vain kun demo on aseistettu (mitat lasketaan JS:ssä). */
.demo__copy{position:relative}
[data-demo].is-armed .demo__copy{padding-left:26px}
.demo__actrack{display:none;position:absolute;left:0;width:4px;border-radius:2px;background:rgba(20,48,77,.14)}
[data-demo].is-armed .demo__actrack{display:block}
.demo__actbar{position:absolute;left:0;width:4px;border-radius:2px;background:var(--ink);transition:top .55s var(--ease-out),height .55s var(--ease-out)}
.demo__title--pivot{margin-top:18px}
.demo__hi{color:var(--coral);font-style:italic}
.demo__caption{margin-top:22px;font-size:15.5px;line-height:1.6;color:var(--text-2);max-width:44ch}
.demo__cta{display:inline-block;margin-top:26px;font-size:15px;font-weight:700;color:var(--ink);transition:transform .25s var(--ease-out),color .2s var(--ease-out)}
.demo__cta:hover{transform:translateX(3px);color:var(--coral)}
.demo__tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;margin-top:22px}

.demo__stage{position:relative;max-width:400px;margin:0 auto;justify-self:center}
.demo__clock{position:absolute;top:-34px;right:2px;font-family:var(--font-body);font-weight:500;font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--muted);letter-spacing:.06em}
/* leimasin-leimat (kertojakerros) */
.demo__memoir{font-family:var(--font-label);font-weight:400;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 12px}
.demo__stamp,.demo__chip{position:absolute;z-index:6;left:50%;font-family:var(--font-label);font-weight:400;font-size:clamp(17px,1.6vw,22px);text-transform:uppercase;letter-spacing:.14em;padding:10px 20px;border-radius:8px;opacity:0;white-space:nowrap;transform:translate(-50%,-50%) rotate(-8deg);background:var(--paper)}
.demo__stamp{top:40%;padding:12px 22px;border:2px solid var(--crit);border-radius:10px;color:var(--crit);box-shadow:3px 4px 0 rgba(194,69,47,.18)}
.demo__stamp::after{content:"";position:absolute;inset:4px;border:1.5px solid currentColor;border-radius:6px;pointer-events:none;opacity:.85}
.demo__chip{top:30%;display:flex;flex-direction:column;align-items:center;gap:1px;white-space:normal;text-align:center;line-height:1.15;padding:12px 22px;border:2px solid var(--coral);border-radius:10px;color:var(--coral);box-shadow:3px 4px 0 rgba(232,92,74,.18)}
.demo__chip::after{content:"";position:absolute;inset:4px;border:1.5px solid currentColor;border-radius:6px;pointer-events:none;opacity:.85}
.demo__chip-sub{font-size:.68em;letter-spacing:.2em}

/* --- Widget-ikkunan replika (Aye Matey -brändättynä) --- */
.dw{font-family:'Inter',system-ui,sans-serif;position:relative;display:flex;flex-direction:column;height:620px;background:#fff;border:1.5px solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 rgba(20,48,77,.12);color:#1f2937;overflow:hidden}
.dw__header{display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:76px;background:var(--ink);border-radius:14px 14px 0 0}
.dw__avatar{position:relative;width:48px;height:48px;flex-shrink:0;border-radius:50%;background:var(--paper);border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center}
.dw__avatar-dot{width:22px;height:22px;border-radius:50%;background:var(--coral)}
.dw__id{display:flex;flex-direction:column;min-width:0;flex:1}
.dw__name{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.2;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font)}
.dw__role{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;opacity:.8;color:#fff;margin-top:2px}
.dw__icons{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.9)}
.dw__expert{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--field);border-bottom:1px solid var(--hair)}
.dw__expert-photo{position:relative;width:40px;height:40px;flex-shrink:0;border-radius:50%;background:#c8d4e0;overflow:visible}
.dw__expert-img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.dw__online{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:var(--ok);border:2px solid #fff}
.dw__expert-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.dw__expert-name{font-size:14px;font-weight:700;color:var(--ink);line-height:1.2;font-family:var(--font)}
.dw__expert-row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dw__pill{background:#fff;border:1px solid var(--hair);border-radius:4px;padding:2px 6px;font-size:9px;font-weight:700;color:var(--ink);letter-spacing:0}
.dw__consent{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto;white-space:nowrap;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dw__checkbox{width:16px;height:16px;flex-shrink:0;border-radius:4px;border:1.5px solid var(--muted);background:#fff;position:relative}
.dw__checkbox.is-checked{background:var(--ink);border-color:var(--ink)}
.dw__checkbox.is-checked::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}
.dw__messages{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:20px;background:#fbf9f4;overflow:hidden}
.dw__msg{display:flex}
.dw__msg--user{justify-content:flex-end}
.dw__msg--bot{justify-content:flex-start}
.dw__bubble{max-width:85%;padding:12px 14px;font-size:14.5px;line-height:1.6;border-radius:14px;overflow-wrap:break-word}
.dw__bubble--bot{background:var(--field);border:1px solid var(--hair-soft);color:var(--ink);border-bottom-left-radius:3px}
/* Kuva-/videokaruselli keskustelussa (mst-media: työnäytteet sivustolta/tietopankista) */
.dw__bubble--media{padding:5px;width:min(88%,270px)}
.dwcar{position:relative;display:block;aspect-ratio:4/3;border-radius:11px;overflow:hidden;background:#e9e2d4}
/* Slider-raide: kuvat vierekkäin, dia liukuu nuolen painalluksesta (translateX
   scene-ajurista); resetissä .dwcar__track--snap poistaa transition → napsahdus alkuun */
.dwcar__track{display:flex;width:100%;height:100%;transition:transform .55s cubic-bezier(.22,1,.36,1);will-change:transform}
.dwcar__track--snap{transition:none}
.dwcar__slide{flex:0 0 100%;width:100%;height:100%;object-fit:cover;display:block}
/* Nuolet kuten tuotteen MediaCarouselissa: valkoinen puolipilleri kiinni reunassa,
   ‹ › -merkki, vasen piilossa ekalla ja oikea vikalla dialla */
.dwcar__arrow{position:absolute;top:50%;transform:translateY(-50%);width:24px;height:48px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(15,23,42,.12);color:#0f172a;font-size:22px;line-height:1;opacity:0;transition:opacity .3s var(--ease-out),color .15s}
.dwcar__arrow--l{left:0;border-radius:0 999px 999px 0;border-left:0}
.dwcar__arrow--r{right:0;border-radius:999px 0 0 999px;border-right:0}
.dwcar__arrow.is-on{opacity:1}
.dwcar__arrow.is-press{color:var(--coral)}
.dw__bubble--user{background:var(--ink);color:var(--paper);border-bottom-right-radius:3px}
.dw__bubble--typing{display:inline-flex;align-items:center;gap:5px;padding:14px 16px}
.dw__dot{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:dwDotWave .8s ease-in-out infinite}
.dw__dot:nth-child(2){animation-delay:.15s}
.dw__dot:nth-child(3){animation-delay:.3s}
@keyframes dwDotWave{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-6px);opacity:1}}
.dw__footer{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border-top:1px solid var(--hair-soft)}
.dw__input{flex:1;background:var(--field);border-radius:10px;padding:10px 14px;font-size:13.5px;color:var(--muted)}
.dw__send{width:38px;height:38px;flex-shrink:0;border-radius:10px;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.dw__dim{position:absolute;inset:0;background:rgba(15,39,64,.62);border-radius:12px;opacity:0;pointer-events:none;z-index:4}

/* --- Varauskortti (yövahti-navy — tuotteen tumma pinta) --- */
.dwbk{width:100%;background:var(--night);border-radius:12px;box-shadow:0 14px 30px -12px rgba(15,39,64,.4);color:var(--night-ink);font-size:14px}
.dwbk__head{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-bottom:1px solid rgba(243,238,226,.16)}
.dwbk__label{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.12em;opacity:.6;font-family:var(--font-label)}
.dwbk__expert{font-size:17px;font-weight:700;font-family:var(--font)}
.dwbk__body{position:relative;height:308px}
.dwbk__view{position:absolute;inset:0;padding:16px 18px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease-out),visibility .35s}
.dwbk__view.is-current{opacity:1;visibility:visible}
.dwbk__month{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dwbk__month-name{font-size:15px;font-weight:700;text-transform:capitalize;font-family:var(--font)}
.dwbk__nav{display:flex;gap:8px}
.dwbk__navbtn{width:30px;height:30px;border-radius:50%;background:rgba(243,238,226,.1);display:inline-flex;align-items:center;justify-content:center;font-size:15px;opacity:.85}
.dwbk__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px;font-size:10.5px;font-weight:800;text-transform:uppercase;opacity:.45;text-align:center}
.dwbk__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.dwbk__day{width:30px;height:30px;margin:0 auto;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;font-family:var(--font-body);font-variant-numeric:tabular-nums}
.dwbk__day--on{background:var(--night-2)}
.dwbk__day--off{opacity:.25}
.dwbk__day--sel{background:var(--coral);color:#fff;box-shadow:0 4px 12px rgba(232,92,74,.4);transform:scale(1.08)}
.dwbk__back{display:inline-flex;align-items:center;gap:4px;background:var(--night-2);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;margin-bottom:12px}
.dwbk__sublabel{display:block;font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.1em;opacity:.65;margin-bottom:4px;font-family:var(--font-label)}
.dwbk__bigday{display:block;font-size:21px;font-weight:700;text-transform:capitalize;margin-bottom:14px;font-family:var(--font)}
.dwbk__times{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.dwbk__time{padding:11px 6px;text-align:center;font-size:13.5px;font-weight:600;border:1px solid rgba(243,238,226,.25);border-radius:10px;font-family:var(--font-body);font-variant-numeric:tabular-nums}
.dwbk__time--sel{background:var(--coral);border-color:transparent;color:#fff}
.dwbk__picked{display:block;background:rgba(243,238,226,.1);border-radius:10px;padding:10px 12px;font-size:13.5px;font-weight:600;margin-bottom:12px}
.dwbk__field{display:block;margin-bottom:10px}
.dwbk__flabel{display:block;font-size:10.5px;font-weight:400;text-transform:uppercase;letter-spacing:.1em;opacity:.75;margin-bottom:4px;font-family:var(--font-label)}
.dwbk__input{display:block;background:rgba(243,238,226,.08);border:1px solid rgba(243,238,226,.2);border-radius:10px;padding:10px 12px;font-size:13.5px;min-height:38px}
.dwbk__submit{display:block;width:100%;text-align:center;background:var(--coral);border-radius:10px;padding:13px 24px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#fff;margin-top:4px}
.dwbk__view--success{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
.dwbk__confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:0 0 12px 12px}
.dwbk__conf{position:absolute;top:0;width:7px;height:10px;border-radius:2px}
.dwbk__check svg{display:block}
.dwbk__check-ring{stroke:var(--coral)!important}
.dwbk__check-mark{stroke:var(--coral)!important}
.dwbk__ok-title{font-size:21px;font-weight:700;font-family:var(--font);color:var(--coral)}
.dwbk__ok-time{background:rgba(243,238,226,.1);border-radius:10px;padding:10px 16px;font-size:13.5px;font-weight:600;line-height:1.5;font-family:var(--font-body);font-variant-numeric:tabular-nums}
.dwbk__ok-expert{opacity:.75;font-weight:500;font-family:var(--font)}
.dwbk__ok-note{font-size:12.5px;opacity:.7}

@media (max-width:760px){
  .demo__inner{gap:36px;transform:none}
  .demo__stage{max-width:min(400px,100%)}
  .dw{height:580px}
}

/* ============================================================
   JAETUT PRIMITIIVIT
   ============================================================ */
.section__title{font-family:var(--font-display);font-size:clamp(32px,4.6vw,52px);font-weight:700;line-height:1.08;letter-spacing:-.015em;max-width:22ch;margin-left:auto;margin-right:auto;text-align:center;font-variation-settings:"opsz" 96}
.section__title--center{margin:0 auto;text-align:center}
.section__lead{margin-top:18px;font-size:clamp(15px,1.6vw,17.5px);line-height:1.65;font-weight:600;color:var(--ink);max-width:62ch;margin-left:auto;margin-right:auto;text-align:center}
.section__lead--center{margin-left:auto;margin-right:auto;text-align:center}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-label);font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;padding:5px 11px;border-radius:999px;background:transparent;color:var(--ink);border:1px solid var(--hair)}
.tag--crit{color:var(--crit);border-color:rgba(194,69,47,.4)}
.tag--warn{color:var(--warn);border-color:rgba(192,123,31,.4)}
.tag--ok{color:var(--ok);border-color:rgba(30,158,106,.4)}
.tag--liidi{color:var(--coral);border-color:rgba(232,92,74,.4)}
.tag--tiimi{color:var(--warn);border-color:rgba(192,123,31,.4)}
.bubble{display:inline-block;font-size:14px;line-height:1.5;padding:11px 14px;border-radius:14px;max-width:90%}
.bubble--user{background:var(--ink);color:var(--paper);border-radius:14px 14px 4px 14px}
.bubble--ai{background:var(--field);border:1px solid var(--hair-soft);color:var(--ink);border-radius:14px 14px 14px 4px}
.checkline{margin-top:10px;font-size:13px;color:var(--ok);font-weight:600}
.checkline::before{content:"✓ "}

/* ---- Ongelma (legacy layout) ---- */
.ongelma__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:52px;align-items:center}
.ongelma__cards{display:flex;flex-direction:column;gap:16px}
.sitcard{background:var(--paper);border:1px solid var(--hair);border-radius:14px;padding:20px}
.sitcard__meta{font-family:var(--font-label);font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--faint);margin-bottom:10px}
.sitcard__bubble{margin:12px 0;font-size:15px;color:var(--text-2)}
.sitcard__bold{font-weight:700;margin-top:8px}
.sitcard--crit{border-color:rgba(194,69,47,.4)}
.sitcard--warn{border-color:rgba(192,123,31,.4)}

/* ---- Ratkaisu (legacy layout) ---- */
.ratkaisu__head{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:46px}
.ratkaisu__flow{display:flex;flex-wrap:wrap;gap:18px;align-items:stretch;justify-content:center}
.ratkaisu__arrow{display:flex;align-items:center;font-size:24px;color:var(--muted)}
.rcard{flex:1 1 270px;min-width:250px;background:var(--paper);border:1px solid var(--hair);border-radius:14px;padding:22px}
.rcard--rec{border:1.5px solid var(--ink)}
.rcard__icon{display:inline-flex;width:38px;height:38px;border-radius:10px;background:var(--field);margin-bottom:14px}
.rcard__title{font-size:17px;font-weight:700;margin-bottom:14px}
.rcard__chat{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.rcard__chat .bubble--user{align-self:flex-start;font-size:13px}
.fieldrow{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--hair-soft);font-size:13.5px}
.fieldrow__l{color:var(--muted)}
.chip{display:inline-block;font-family:var(--font-body);font-weight:500;font-size:13px;background:var(--field);color:var(--ink);padding:8px 12px;border-radius:8px;margin-right:8px}
.chip--cta{background:var(--ink);color:var(--paper)}
.rcard__sub{margin-top:12px;font-size:12.5px;color:var(--faint)}

/* ---- Kaksi varausmallia ---- */
.ajanvaraus__head{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:80px}
.ajanvaraus--band{padding:clamp(72px,10vh,120px) 0 var(--pad-y-sm)}
.bookmodel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px;max-width:var(--panel-w);margin:0 auto}
.bookmodel__card{background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;padding:26px;box-shadow:4px 4px 0 rgba(20,48,77,.1)}
.bookmodel__k{font-family:var(--font-label);font-weight:400;font-size:14px;text-transform:uppercase;letter-spacing:.13em;color:var(--coral);margin-bottom:10px;display:block}
.bookmodel__title{font-size:19px;font-weight:700;margin-bottom:10px;font-family:var(--font)}
.bookmodel__txt{font-size:var(--fs-sm);line-height:1.6;color:var(--text-2)}
.ajanvaraus__micro{text-align:center;font-size:12.5px;color:var(--faint);margin:20px auto 0;max-width:64ch}
/* vanhat luokat säilytetty yhteensopivuuden vuoksi */
.chatwin{background:var(--paper);border:1px solid var(--hair);border-radius:16px;overflow:hidden}
.chatwin__bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--hair-soft)}
.chatwin__bar .dot{width:11px;height:11px;border-radius:50%;background:var(--field)}
.chatwin__title{flex:1;text-align:center;font-size:12.5px;color:var(--muted)}
.chatwin__live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ok)}
.chatwin__body{padding:22px;display:flex;flex-direction:column;gap:13px}
.airow{display:flex;gap:9px;align-items:flex-start}
.airow__av{flex-shrink:0;width:32px;height:32px;border-radius:10px;background:var(--field)}
.slots{background:var(--field);border:1px solid var(--hair-soft);border-radius:12px;padding:15px}
.slots__title{font-size:13px;color:var(--text-2);margin-bottom:11px}
.slots__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.slot{font-family:var(--font-body);font-weight:500;font-variant-numeric:tabular-nums;font-size:13px;text-align:center;padding:9px 6px;border-radius:8px;background:var(--paper);border:1px solid var(--hair)}
.slot--sel{background:var(--ink);color:var(--paper);border-color:transparent}
.slots__btn{width:100%}
.confirm{background:var(--coral-soft);border:1px solid rgba(232,92,74,.4);border-radius:12px;padding:14px;font-size:14px;color:var(--ink)}
.steplist{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:14px}
.steplist__item{display:flex;align-items:center;gap:12px;font-size:15px}
.steplist__num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--field);font-size:13px;font-weight:700;font-family:var(--font-body);font-variant-numeric:tabular-nums}
.steplist__item--ok .steplist__num{background:var(--coral);color:#fff}
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.fallback{background:var(--paper);border:1px solid var(--hair);border-radius:14px;padding:18px}
.fallback__title{font-weight:700;margin-bottom:8px;font-size:14.5px}
.fallback__body{font-size:13px;color:var(--muted)}

/* ============================================================
   LOKIKIRJA (dashboard) — yövahti-tila: ainoa tumma pinta
   ============================================================ */
.dashboard .container{position:relative}
.dashpanel{position:relative;z-index:1;background:var(--night);border:1.5px solid var(--night);border-radius:18px;padding:22px;box-shadow:6px 6px 0 rgba(20,48,77,.14);color:var(--night-ink)}
.dashboard__head{margin-bottom:34px}
.dashpanel__status{display:flex;align-items:center;gap:14px;background:var(--night-2);border:1px solid rgba(243,238,226,.14);border-radius:14px;padding:16px 18px;flex-wrap:wrap}
.dashpanel__av{position:relative;width:52px;height:52px;border-radius:14px;background:var(--coral)}
/* Aye Matey -purjemerkki (favicon) kermalla koralliruudun sisällä */
.dashpanel__av::after{content:"";position:absolute;inset:11px;background:var(--bg);-webkit-mask:url(../img/favicon.svg) center/contain no-repeat;mask:url(../img/favicon.svg) center/contain no-repeat}
.dashpanel__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:1}
.dashpanel__meta strong{font-family:var(--font)}
.dashpanel__sub{font-size:12.5px;color:rgba(243,238,226,.7);font-family:var(--font-body);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:5px 11px;border-radius:999px;background:rgba(243,238,226,.1)}
.pill--ok{color:#7fd6ae}
.pill--ok .hero__livedot{background:#7fd6ae}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:14px;margin-top:14px}
.kpi{background:var(--night-2);border:1px solid rgba(243,238,226,.12);border-radius:14px;padding:18px}
.kpi--warn{border-color:rgba(232,92,74,.6)}
.kpi__label{font-size:13px;color:rgba(243,238,226,.7)}
.kpi__num{font-size:29px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:6px;font-family:var(--font-body)}
.kpi__sub{font-size:12.5px;color:rgba(243,238,226,.55);margin-top:6px}
.kpi--ok .kpi__sub{color:#7fd6ae}
.kpi--warn .kpi__sub{color:#ff9d8d}
.dashpanel__lower{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:14px;margin-top:14px}
.dashcard{background:var(--night-2);border:1px solid rgba(243,238,226,.12);border-radius:14px;padding:18px}
.dashcard__title{color:rgba(243,238,226,.7);margin-bottom:14px;font-family:var(--font-label);font-weight:400;text-transform:uppercase;letter-spacing:.12em;font-size:11px}
.convrow{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid rgba(243,238,226,.1)}
.convrow:first-of-type{border-top:0}
.convrow__dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.convrow__dot--ok{background:#7fd6ae}
.convrow__dot--liidi{background:#9db8d4}
.convrow__dot--tiimi{background:var(--coral);animation:coralPing 2.6s ease-out infinite}
.convrow__txt{flex:1;display:flex;flex-direction:column;font-size:13px}
.convrow__txt span{color:rgba(243,238,226,.6);font-size:11.5px;font-family:var(--font-body);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.dashpanel .tag{color:var(--night-ink);border-color:rgba(243,238,226,.3)}
.dashpanel .tag--liidi{color:#9db8d4;border-color:rgba(157,184,212,.5)}
.dashpanel .tag--ok{color:#7fd6ae;border-color:rgba(127,214,174,.5)}
.dashpanel .tag--tiimi{color:#ff9d8d;border-color:rgba(232,92,74,.55)}
.qbar{margin-bottom:14px}
.qbar__top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.qbar__c{font-family:var(--font-body);font-weight:500;font-variant-numeric:tabular-nums;color:rgba(243,238,226,.55)}
.qbar__track{height:7px;border-radius:999px;background:rgba(243,238,226,.12);overflow:hidden}
.qbar__fill{display:block;height:100%;background:rgba(243,238,226,.75);transform-origin:left center}
.dashpanel__disclaimer{font-style:italic;color:rgba(243,238,226,.5);font-size:12.5px;margin-top:16px}
.dashboard{position:relative}

/* ---- Käyttöönotto ---- */
.kayttoonotto__head{margin-bottom:clamp(48px,6vw,72px)}
.timeline{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:24px}
.timeline::before{content:"";position:absolute;top:155px;left:4%;right:8%;height:0;border-top:2px dashed var(--hair);pointer-events:none}   /* numeropallojen keskikohta (ikonit 108/124 + marginaali) */
/* 1-sarakkeisessa mobiilissa (<584px) vaakaviiva ei yhdistä numeroita → piiloon */
@media (max-width:583px){.timeline::before{display:none}}
.tstep{position:relative;padding-top:0;text-align:center;display:flex;flex-direction:column;align-items:center}
.tstep__art{height:108px;width:auto;display:block;margin:0 auto 30px}
.tstep__num{position:static;margin:0 auto 16px;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);font-weight:700;font-size:14px;z-index:1;font-family:var(--font-body);font-variant-numeric:tabular-nums;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.tstep--ok .tstep__num{background:var(--coral)}
@media (hover:hover){ .tstep:hover .tstep__num{transform:scale(1.12)} }   /* numeropallo reagoi hoveriin (rauhallinen) */
.tstep__title{font-size:17px;font-weight:700;margin-bottom:8px;font-family:var(--font)}
.tstep__txt{font-size:14px;color:var(--muted);line-height:1.6}

/* ---- Käyttöönotto: askelten inline-SVG-ikonien mikroanimaatiot ---- */
.k-icon{overflow:visible}
.k-icon--3{height:124px;margin-bottom:14px}   /* hieman isompi; kokonaiskorkeus (124+14) = muut (108+30) → numerot linjassa */
@media (prefers-reduced-motion:no-preference){
  /* Piiloon VASTA kun JS on valmis (voi lisätä .play) → ilman JS:ää / reduced-motionissa ikonit näkyvät täysinä. */
  .js-ready .k-icon .k-bubble,
  .js-ready .k-icon .k-line,
  .js-ready .k-icon--1 .k-cursor,
  .js-ready .k-icon .k-brackets>*,
  .js-ready .k-icon .k-fl,
  .js-ready .k-icon .k-cl,
  .js-ready .k-icon .k-panel,
  .js-ready .k-icon .k-sl,
  .js-ready .k-icon .k-q,
  .js-ready .k-icon .k-flag,
  .js-ready .k-icon .k-check{stroke-dasharray:1;stroke-dashoffset:1}
  .js-ready .k-icon .k-rays,
  .js-ready .k-icon .k-knob,
  .js-ready .k-icon .k-star,
  .js-ready .k-icon--3 .k-fdot,
  .js-ready .k-icon--3 .k-cdot,
  .js-ready .k-icon--5 .k-cdot,
  .js-ready .k-icon--6 .k-cdot,
  .js-ready .k-icon--7 .k-cdot,
  .js-ready .k-icon--8 .k-tick,
  .js-ready .k-icon--8 .k-needle{opacity:0}
  .js-ready .k-icon--4 .k-flag,
  .js-ready .k-icon--5 .k-bubble{fill-opacity:0}
  .k-icon .k-knob,.k-icon .k-star,.k-icon--4 .k-flag{transform-box:fill-box;transform-origin:center}
  /* Valkoiset täytöt (kursori + kalenterin alaosa + dokumenttiarkki) feidaavat sisään vasta kun ääriviivat on piirretty. */
  .js-ready .k-icon--1 .k-cursor,
  .js-ready .k-icon--2 .k-sheet,
  .js-ready .k-icon--6 .k-bubble,
  .js-ready .k-icon--7 .k-cal-fill,
  .js-ready .k-icon--3 .k-cal-fill{fill-opacity:0}
  .k-icon--1 .k-cursor,.k-icon .k-rays{transform-box:fill-box;transform-origin:center}

  /* Animaatio pyörähtää KERRAN (site.js: näkyviin tullessa + hoverilla uudelleen).
     forwards → jää lopputilaan (piirretty). */

  /* Ikoni 1 — luo tili: kupla piirtyy viivana, tekstit kirjoittuvat, kursori klikkaa, säteet jäävät. */
  @keyframes k1-bubble{0%{stroke-dashoffset:1}26%,100%{stroke-dashoffset:0}}
  @keyframes k1-l1{0%,26%{stroke-dashoffset:1}44%,100%{stroke-dashoffset:0}}
  @keyframes k1-l2{0%,44%{stroke-dashoffset:1}60%,100%{stroke-dashoffset:0}}
  @keyframes k1-l3{0%,60%{stroke-dashoffset:1}72%,100%{stroke-dashoffset:0}}
  @keyframes k1-cursor{0%{stroke-dashoffset:1}26%,100%{stroke-dashoffset:0}}   /* kursori PIIRTYY samaan aikaan kuplan kanssa */
  @keyframes k1-cursor-fill{0%,30%{fill-opacity:0}55%,100%{fill-opacity:1}}    /* valkoinen täyttö feidaa sisään ääriviivan jälkeen */
  @keyframes k1-click{0%,82%{transform:none}88%{transform:translate(4px,4px) scale(.85)}94%{transform:translate(0,0) scale(1.07)}100%{transform:none}}
  @keyframes k1-rays{0%,84%{opacity:0;transform:scale(.2)}94%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
  .k-icon--1.play .k-bubble{animation:k1-bubble 2.6s ease-out forwards}
  .k-icon--1.play .k-line--1{animation:k1-l1 2.6s ease-out forwards}
  .k-icon--1.play .k-line--2{animation:k1-l2 2.6s ease-out forwards}
  .k-icon--1.play .k-line--3{animation:k1-l3 2.6s ease-out forwards}
  .k-icon--1.play .k-cursor{animation:k1-cursor 2.6s ease-out forwards,k1-cursor-fill 2.6s ease-out forwards,k1-click 2.6s ease-in-out forwards}
  .k-icon--1.play .k-rays{animation:k1-rays 2.6s ease-out forwards}

  /* Ikoni 2 — rakentuu tiedoistasi (icon_rakentuu_2): säädinpaneeli piirtyy
     ruutuun, namiskat pongahtavat ja liikkuvat ees taas uusiin asentoihin,
     tähdet pompahtavat yksi kerrallaan reunaan. */
  @keyframes k2-knobpop{0%,22%{opacity:0}30%,100%{opacity:1}}
  @keyframes k2-wig1{0%,32%{transform:none}46%{transform:translateX(42px)}60%{transform:translateX(-16px)}74%,100%{transform:translateX(26px)}}
  @keyframes k2-wig2{0%,36%{transform:none}50%{transform:translateX(-38px)}64%{transform:translateX(20px)}78%,100%{transform:translateX(-24px)}}
  @keyframes k2-wig3{0%,40%{transform:none}54%{transform:translateX(30px)}68%{transform:translateX(-12px)}82%,100%{transform:translateX(18px)}}
  @keyframes k2-star{0%{opacity:0;transform:scale(.2) rotate(-20deg)}55%{opacity:1;transform:scale(1.18) rotate(6deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
  .k-icon--2.play .k-panel{animation:k3-draw 2.8s ease-out forwards}
  .k-icon--2.play .k-sl{animation:k3-draw 2.8s ease-out forwards}
  .k-icon--2.play .k-knob{animation-name:k2-knobpop;animation-duration:2.8s;animation-timing-function:ease-out;animation-fill-mode:forwards}
  .k-icon--2.play .k-knob--1{animation:k2-knobpop 2.8s ease-out forwards,k2-wig1 2.8s ease-in-out forwards}
  .k-icon--2.play .k-knob--2{animation:k2-knobpop 2.8s ease-out forwards,k2-wig2 2.8s ease-in-out forwards}
  .k-icon--2.play .k-knob--3{animation:k2-knobpop 2.8s ease-out forwards,k2-wig3 2.8s ease-in-out forwards}
  .k-icon--2.play .k-star--1{animation:k2-star .55s cubic-bezier(.34,1.56,.4,1) 1.35s both}
  .k-icon--2.play .k-star--2{animation:k2-star .5s cubic-bezier(.34,1.56,.4,1) 1.65s both}
  .k-icon--2.play .k-star--3{animation:k2-star .5s cubic-bezier(.34,1.56,.4,1) 1.9s both}

  /* Ikoni 3 — lisää sivustolle: selainikkuna + </> + kalenteri rakentuvat KERRALLA, pisteet ilmestyvät,
     checkmark piirtyy viimeisenä. */
  @keyframes k3-draw{0%{stroke-dashoffset:1}26%,100%{stroke-dashoffset:0}}
  @keyframes k3-calfill{0%,28%{fill-opacity:0}50%,100%{fill-opacity:1}}   /* kalenterin alaosan valkoinen täyttö feidaa sisään ääriviivojen jälkeen */
  @keyframes k3-fdot{0%,20%{opacity:0}32%,100%{opacity:1}}
  @keyframes k3-cdot{0%,30%{opacity:0}42%,100%{opacity:1}}
  @keyframes k3-check{0%,54%{stroke-dashoffset:1}82%,100%{stroke-dashoffset:0}}   /* checkmark hieman aikaisemmin */
  .k-icon--3.play .k-fl,
  .k-icon--3.play .k-b1,
  .k-icon--3.play .k-b2,
  .k-icon--3.play .k-b3,
  .k-icon--3.play .k-cl{animation:k3-draw 2.8s ease-out forwards}
  .k-icon--3.play .k-cal-fill{animation:k3-calfill 2.8s ease-out forwards}
  .k-icon--3.play .k-fdot{animation:k3-fdot 2.8s ease forwards}
  .k-icon--3.play .k-cdot{animation:k3-cdot 2.8s ease forwards}
  .k-icon--3.play .k-check{animation:k3-check 2.8s cubic-bezier(.22,1,.36,1) forwards}

  /* Ikoni 4 — valmis varaamaan (icon_valmisvaraamaan): paneeli + avatar +
     rivit piirtyvät, koralli-kirjanmerkki piirtyy ja pudottautuu paikalleen. */
  @keyframes k4-drop{0%,26%{transform:translateY(-18px)}44%{transform:translateY(4px)}58%,100%{transform:none}}
  .k-icon--4.play .k-cl{animation:k3-draw 2.8s ease-out forwards}
  .k-icon--4.play .k-line--1{animation:k1-l1 2.8s ease-out forwards}
  .k-icon--4.play .k-line--2{animation:k1-l2 2.8s ease-out forwards}
  .k-icon--4.play .k-line--3{animation:k1-l3 2.8s ease-out forwards}
  .k-icon--4.play .k-flag{animation:k3-draw 2.8s ease-out forwards,k3-calfill 2.8s ease-out forwards,k4-drop 2.8s cubic-bezier(.34,1.4,.5,1) forwards}

  /* Ikoni 5 — vaatii ihmistä (icon_vaatii-ihmista): kupla piirtyy, koralli-?
     kirjoittuu ja piste pongahtaa, henkilö piirtyy viimeisenä. */
  @keyframes k5-q{0%,26%{stroke-dashoffset:1}52%,100%{stroke-dashoffset:0}}
  @keyframes k5-dot{0%,52%{opacity:0;transform:scale(.3)}64%{opacity:1;transform:scale(1.25)}72%,100%{opacity:1;transform:scale(1)}}
  @keyframes k5-person{0%,44%{stroke-dashoffset:1}86%,100%{stroke-dashoffset:0}}
  .k-icon--5.play .k-bubble{animation:k3-draw 2.8s ease-out forwards,k3-calfill 2.8s ease-out forwards}
  .k-icon--5.play .k-q{animation:k5-q 2.8s ease-out forwards}
  .k-icon--5.play .k-cdot{animation:k5-dot 2.8s ease forwards;transform-box:fill-box;transform-origin:center}
  .k-icon--5.play .k-cl{animation:k5-person 2.8s ease-out forwards}

  /* Ikoni 6 — toisella kielellä (icon_toisellakielella): maapallo piirtyy,
     leveyspiirit kirjoittuvat, koralli-kupla piirtyy ja pisteet "kirjoittavat". */
  @keyframes k6-bubble{0%,46%{stroke-dashoffset:1}72%,100%{stroke-dashoffset:0}}
  @keyframes k6-fill{0%,74%{fill-opacity:0}90%,100%{fill-opacity:1}}   /* valkoinen täyttö vasta kun kupla on piirtynyt */
  @keyframes k6-dot{0%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
  .k-icon--6.play .k-cl{animation:k3-draw 2.8s ease-out forwards}
  .k-icon--6.play .k-line--1{animation:k1-l1 2.8s ease-out forwards}
  .k-icon--6.play .k-line--2{animation:k1-l2 2.8s ease-out forwards}
  .k-icon--6.play .k-line--3{animation:k1-l3 2.8s ease-out forwards}
  .k-icon--6.play .k-bubble{animation:k6-bubble 2.8s ease-out forwards,k6-fill 2.8s ease-out forwards}
  .k-icon--6.play .k-cdot{transform-box:fill-box;transform-origin:center}
  .k-icon--6.play .k-cdot:nth-of-type(1){animation:k6-dot .4s ease 2.0s both}
  .k-icon--6.play .k-cdot:nth-of-type(2){animation:k6-dot .4s ease 2.2s both}
  .k-icon--6.play .k-cdot:nth-of-type(3){animation:k6-dot .4s ease 2.4s both}

  /* Ikoni 7 — keskustelu ja varaus (icon_keskustelujavaraus): kupla + rivit
     piirtyvät, kalenteri rakentuu, pisteet ilmestyvät, koralli-check lopuksi. */
  @keyframes k7-cal{0%,32%{stroke-dashoffset:1}64%,100%{stroke-dashoffset:0}}
  @keyframes k7-calfill{0%,66%{fill-opacity:0}84%,100%{fill-opacity:1}}   /* kalenterin täyttö ääriviivojen jälkeen */
  .k-icon--7.play .k-bubble{animation:k3-draw 2.8s ease-out forwards}
  .k-icon--7.play .k-line--1{animation:k1-l1 2.8s ease-out forwards}
  .k-icon--7.play .k-line--2{animation:k1-l2 2.8s ease-out forwards}
  .k-icon--7.play .k-line--3{animation:k1-l3 2.8s ease-out forwards}
  .k-icon--7.play .k-cl{animation:k7-cal 2.8s ease-out forwards}
  .k-icon--7.play .k-cal-fill{animation:k7-calfill 2.8s ease-out forwards}
  .k-icon--7.play .k-cdot{animation:k3-cdot 2.8s ease forwards}
  .k-icon--7.play .k-check{animation:k3-check 2.8s cubic-bezier(.22,1,.36,1) forwards}

  /* Ikoni 8 — kasvu ja luottamus (icon_kasvujaluottamus): kompassin kehät
     piirtyvät, ilmansuuntamerkit pongahtavat ympäri kehää, ja neula löytää
     kurssin — heilahtaa yli ja asettuu (kuin oikea kompassineula). */
  @keyframes k8-tick{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
  @keyframes k8-needle-in{0%{opacity:0}30%,100%{opacity:1}}
  @keyframes k8-swing{0%{transform:rotate(-38deg)}42%{transform:rotate(16deg)}66%{transform:rotate(-8deg)}84%{transform:rotate(3deg)}100%{transform:rotate(0deg)}}
  .k-icon--8 .k-tick{transform-box:fill-box;transform-origin:center}
  .k-icon--8 .k-needle{transform-box:view-box;transform-origin:149.35px 199.19px}
  .k-icon--8.play .k-cl{animation:k3-draw 2.8s ease-out forwards}
  .k-icon--8.play .k-tick--1{animation:k8-tick .4s ease .85s both}
  .k-icon--8.play .k-tick--2{animation:k8-tick .4s ease .97s both}
  .k-icon--8.play .k-tick--3{animation:k8-tick .4s ease 1.09s both}
  .k-icon--8.play .k-tick--4{animation:k8-tick .4s ease 1.21s both}
  .k-icon--8.play .k-tick--5{animation:k8-tick .4s ease 1.33s both}
  .k-icon--8.play .k-tick--6{animation:k8-tick .4s ease 1.45s both}
  .k-icon--8.play .k-needle{animation:k8-needle-in .5s ease 1.5s both,k8-swing 1.3s cubic-bezier(.36,1.2,.4,1) 1.5s both}
}
.kayttoonotto__foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:28px;align-items:center;margin-top:48px}
.kayttoonotto__big{font-size:clamp(20px,2.4vw,28px);font-weight:600;line-height:1.3;font-family:var(--font-display)}
.codecard{background:var(--night);border-radius:12px;padding:18px;overflow-x:auto}
.codecard pre{margin:0}
.codecard code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--night-ink);white-space:pre-wrap;word-break:break-all}

/* ---- Hahmot ---- */
.hahmot__head{margin-bottom:34px}
.hahmot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:40px;align-items:start}
.hahmot__left{text-align:center}
.bust{position:relative;overflow:hidden;border-radius:20px;background:var(--g,var(--ink));border:1.5px solid var(--ink)}
.bust--lg{width:210px;height:210px;margin:0 auto}
.agent-bust{position:relative;width:var(--s,56px);height:var(--s,56px);margin:0 auto;border-radius:16px;overflow:hidden;background:var(--g,var(--ink))}
.agent-bust__shoulders{position:absolute;left:50%;bottom:-9%;transform:translateX(-50%);width:82%;height:50%;border-radius:46% 46% 0 0;background:rgba(250,246,238,.85)}
.agent-bust__head{position:absolute;left:50%;top:15%;transform:translateX(-50%);width:42%;height:42%;border-radius:50%;background:#faf6ee}
.agent-bust__spec{display:none}
.agent-bust__label{font-size:10.5px;color:var(--muted);margin-top:8px;font-weight:600}
.agent-pos{position:absolute;text-align:center;z-index:7;pointer-events:none;display:none}
.hero__agents{display:none}
.agent-bust--corner{display:none}
.hahmot__name{font-size:22px;font-weight:700;margin-top:22px;font-family:var(--font)}
.hahmot__tone{font-family:var(--font-label);font-weight:400;text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--coral);margin-top:4px}
.hahmot__options{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.bustopt{position:relative;width:50px;height:50px;border-radius:12px;border:1.5px solid transparent;cursor:pointer;background:var(--g,var(--ink));opacity:.6;transition:transform .15s,box-shadow .15s,opacity .15s;overflow:hidden}
.bustopt.is-sel{opacity:1;transform:translateY(-3px);border-color:var(--ink);box-shadow:3px 3px 0 rgba(20,48,77,.2)}
.prev-av{width:30px;height:30px;border-radius:9px;background:var(--g,var(--ink))}
.tonebtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tonebtn{font-size:13px;padding:8px 14px;border-radius:9px;background:transparent;border:1px solid var(--hair);color:var(--ink);cursor:pointer}
.tonebtn:hover{border-color:var(--ink)}
.tonebtn.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---- Nostot ("Perämiehen taidot") ---- */
.nostot__head{margin-bottom:36px}
.nostot__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.nosto{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:14px;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s var(--ease-out)}
.nosto--iso-a,.nosto--iso-b,.nosto--pieni{grid-column:span 4;background:var(--paper);border:1px solid var(--hair);padding:26px;min-height:150px}
.nosto__title{font-size:18px;font-weight:700;letter-spacing:-.01em;font-family:var(--font)}
.nosto__txt{font-size:var(--fs-sm);line-height:1.55;color:var(--muted);max-width:46ch}
.nosto__arrow{margin-top:auto;color:var(--coral);font-size:17px;transition:transform .25s var(--ease-out)}
.nosto:hover{transform:translateY(-2px)}
.nosto:hover{border-color:var(--ink);box-shadow:4px 4px 0 rgba(20,48,77,.12)}
.nosto:hover .nosto__arrow{transform:translateX(4px)}
@media (max-width:960px){.nosto--iso-a,.nosto--iso-b,.nosto--pieni{grid-column:span 6}}
@media (max-width:560px){.nosto--iso-a,.nosto--iso-b,.nosto--pieni{grid-column:span 12}}

/* ---- Hinnat ---- */
.hinnat{padding-top:var(--pad-y-lg)}
/* Kun hinnat seuraa suoraan sivun om-intro-otsikkoa (Hinnoittelu-sivu), normaali väli riittää —
   ilman tätä lg-täyte pinoutuisi intron oman alapaddingin päälle liian isoksi aukoksi. */
.om-intro + .hinnat{padding-top:var(--pad-y)}
.hinnat__head{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:38px}
.billing{display:inline-flex;background:var(--field);border-radius:10px;padding:4px;margin-top:24px}
.billing__btn{min-height:44px;border:0;background:transparent;color:var(--muted);font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:8px;cursor:pointer}
.billing__btn:hover:not(.is-active){color:var(--ink)}
.billing__btn.is-active{background:var(--ink);color:var(--paper)}
/* kortit venytetään samaan riviin ja CTA:t ankkuroidaan pohjaan samalle
   vaakalinjalle; Kuunarin lisäkorkeus tulee YLHÄÄLTÄ (negat. margin +
   kompensoiva padding pitää sisällön ja vesilinjan muiden tasossa) */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--hair);border-radius:16px;padding:26px;transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out)}
.plan:hover{transform:translateY(-6px)}
/* Suositeltu (keskimmäinen) säilyttää ison korallivarjon hoverissa. */
.plan--rec:hover{box-shadow:8px 10px 0 rgba(232,92,74,.24)}
/* Reunapaketit: hoverissa pieni HARMAA varjo — sama koko/pehmeys kuin
   keskimmäisen perustilan varjo (ei koralli, ei yhtä iso kuin sen hover). */
.plan:not(.plan--rec):hover{box-shadow:5px 5px 0 rgba(48,54,66,.14)}
.plan--rec{border:1.5px solid var(--ink);box-shadow:5px 5px 0 rgba(20,48,77,.12);margin-top:-18px;padding-top:44px}
@media (max-width:900px){.plan--rec{margin-top:0;padding-top:26px}}
/* Suositeltu-viiri (erillinen SVG taustana, kääntyvä teksti sisällä) kortin
   oikeassa yläkulmassa, kärki 12px reunan yli; pääskynpyrstö vasemmalla */
.plan__ribbon{position:absolute;top:14px;right:-10px;width:191px;height:30px;display:flex;align-items:center;justify-content:center;padding-left:9px;background:url(../img/suositeltu_viiri.svg) no-repeat center/100% 100%;font-family:var(--font-label);font-weight:400;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#faf6ee;pointer-events:none}
.plan__ribbon--en{font-size:10.5px;letter-spacing:.12em}
/* paketti-ikonit pieninä otsikon edessä; yhtenäinen skaala (~0.26 px/yks)
   säilyttää toimitetut kokosuhteet */
.plan__icon{display:block;width:auto;flex-shrink:0}
.plan__icon--jolla{height:21px}
.plan__icon--kuunari{height:23px}
.plan__icon--galeoni{height:26px}
.plan__name{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:14px;font-weight:400;color:var(--ink);font-family:var(--font-label);text-transform:uppercase;letter-spacing:.12em}
.plan__price{margin-top:12px;font-size:40px;font-weight:600;font-feature-settings:'tnum';font-family:var(--font-display)}
.plan__per{font-size:16px;font-weight:600;color:var(--muted);font-family:var(--font)}
.plan__billnote{font-size:12.5px;color:var(--ink);margin-top:2px}
.plan__setup{font-size:13px;color:var(--muted);margin-top:8px}
.plan__blurb{font-size:14px;color:var(--text-2);margin-top:14px;line-height:1.5}
.plan__features{list-style:none;margin:18px 0;padding:0;display:flex;flex-direction:column;gap:10px}
.plan__features li{position:relative;padding-left:26px;font-size:14px;color:var(--text-2)}
.plan__features li::after{content:"✓";position:absolute;left:2px;top:0;font-size:13px;color:var(--coral);font-weight:700}
/* Kiintiörivit (esim. keskustelu- ja puheminuuttikiintiö) → korostettu (navy,
   lihavoitu, ei tsekkiä). Eksplisiittinen ACF-kenttä (on_kiintio) merkitsee nämä
   — ei enää :first-child, koska Galeonilla on kaksi kiintiöriviä peräkkäin. */
.plan__features li.is-quota{font-weight:700;color:var(--ink);padding-left:0;margin-bottom:2px}
.plan__features li.is-quota::after{content:none}
/* Kaksi peräkkäistä kiintiöriviä (Galeoni) lukevat yhtenä yksikkönä — vedä
   toinen rivi lähemmäs ensimmäistä. Container-gap (10px) koskee JOKAISTA
   peräkkäistä li-paria, joten pelkkä negatiivinen margin ei riitä poistamaan
   sitä — se vain vähentää siitä. */
.plan__features li.is-quota + li.is-quota{margin-top:-8px}
.plan__cta-wrap{margin-top:auto;width:100%}
.plan__cta{width:100%}
.plan__cta-note{font-size:13px;color:var(--muted);margin-bottom:10px;text-align:center}
/* Ota yhteyttä -linkki (mailto väliaikaisesti; chatbot-kytkennän jälkeen kalenterivaraus) */
.plan__cta-note a{color:inherit;text-decoration:underline;text-underline-offset:2px;transition:color .2s var(--ease-out)}
.plan__cta-note a:hover{color:var(--coral)}
/* alaviite + kiintiöteksti vierekkäin kahdessa palstassa (kapealla allekkain) */
.hinnat__notes{margin-top:52px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:14px 56px;max-width:1060px;align-items:start}
.hinnat__foot{text-align:left;color:var(--faint);font-size:12.5px;max-width:70ch;margin:0}
.hinnat__foot--quota{color:var(--muted)}

/* ---- Founding ---- */
.founding{border-top:0;padding-top:0}
.foundcard{position:relative;overflow:hidden;background:var(--night);border-radius:18px;padding:clamp(28px,4vw,52px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:34px;align-items:start;color:var(--night-ink);box-shadow:6px 6px 0 rgba(20,48,77,.14)}
.foundcard__glow{display:none}
/* Lokikirja-/asiakirjaleimasin, ei UI-badge: ohut korallinvärinen KAKSOISVIIVA-
   kehys (border + outline + outline-offset — sama väri, pieni rako välissä,
   ilman ylimääräistä merkkausta), ei täyttöä, ei pyöristystä, ei kuvitusta.
   Teksti kutistuu sisällön mukaan ja rivittyy luonnostaan kapealla leveydellä
   (max-width:100% estää ylivuodon), joten sama merkintä toimii yhdellä tai
   kahdella rivillä ilman pakotettua rivinvaihtoa. */
.foundcard__badge{display:inline-block;max-width:100%;font-family:var(--font-label);font-weight:400;text-transform:uppercase;letter-spacing:.22em;font-size:10px;line-height:1.6;text-align:center;color:var(--night-ink);border:1px solid var(--coral);outline:1px solid var(--coral);outline-offset:3px;border-radius:1px;padding:7px 16px;margin:4px 0 26px}
.foundcard__title{font-size:clamp(26px,3.2vw,40px);font-weight:700;line-height:1.1;font-family:var(--font-display)}
.foundcard__txt{margin:16px 0 22px;color:rgba(243,238,226,.8);line-height:1.6}
.foundcard .btn--cta{background:var(--paper);color:var(--ink);box-shadow:none;transition:transform .2s var(--ease-out),background-color .2s var(--ease-out),color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.foundcard .btn--cta:hover{background:var(--coral);color:var(--paper);transform:translateY(-1px)}
.foundcard__price{position:relative;background:rgba(243,238,226,.07);border:1px solid rgba(243,238,226,.16);border-radius:14px;padding:22px 24px;margin-top:62px}
/* Mobiilissa (1-sarake) 62px desktop-offset on turha → poista, jää vain grid-gap */
@media (max-width:690px){.foundcard__price{margin-top:0}}
.foundcard__plabel{font-family:var(--font-label);font-weight:400;text-transform:uppercase;font-size:11.5px;color:rgba(243,238,226,.7);letter-spacing:.1em}
.foundcard__pbig{font-size:clamp(28px,7vw,36px);font-weight:700;margin-top:8px;font-family:var(--font)}
.foundcard__psub{font-size:13px;color:rgba(243,238,226,.8);margin-top:8px;line-height:1.5}
.foundcard__pstruck{font-size:12px;color:rgba(243,238,226,.42);text-decoration:line-through;margin-top:12px}

/* ---- UKK ---- */
.ukk__inner{max-width:820px;margin:0 auto}
.faq{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.faq__item{background:var(--paper);border:1px solid var(--hair);border-radius:12px;overflow:hidden}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;background:none;border:0;color:var(--ink);font-size:15px;font-weight:600;padding:18px;cursor:pointer}
.faq__q:hover{color:var(--coral)}
.faq__q:hover .faq__plus{border-color:var(--coral)}
.faq__plus{position:relative;flex-shrink:0;width:26px;height:26px;border-radius:7px;background:transparent;border:1.5px solid var(--hair);transition:transform .2s,background .2s,border-color .2s}
.faq__plus::before,.faq__plus::after{content:"";position:absolute;top:50%;left:50%;width:11px;height:2px;background:var(--ink);transform:translate(-50%,-50%)}
.faq__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item.is-open .faq__plus{background:var(--ink);border-color:var(--ink);transform:rotate(45deg)}
.faq__item.is-open .faq__plus::before,.faq__item.is-open .faq__plus::after{background:var(--paper)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease-out)}
.faq__a>div{min-height:0;overflow:hidden}
.faq__a p{padding:0 18px 18px;font-size:var(--fs-sm);line-height:1.6;color:var(--muted);margin:0}
.faq__a a{color:var(--coral);text-decoration:underline}
.faq__item.is-open .faq__a{grid-template-rows:1fr}

/* ---- Loppu-CTA ---- */
.finalcta{position:relative;text-align:center;padding:clamp(86px,12vw,150px) 0 clamp(260px,28vh,340px)}
.finalcta__glow{display:none}
.finalcta__inner{position:relative;z-index:1;max-width:760px}
/* Loppu-CTA:n osoittava hahmo + napin korostus kun osoittaa.
   HUOM: sama clamp kuin heron perämiehellä, mutta hero kutistuu lisäksi matalilla
   ruuduilla (max-height:849px) mahtuakseen vesirajan yläpuolelle. Tätä ei kutisteta
   sen mukana: loppu-CTA on scrollattu kohde ilman vesirajarajoitetta, eikä sitä
   nähdä koskaan yhtä aikaa heron kanssa. 1280x720:lla hero 72px, tämä 96px. */
.cta-mate{display:flex;justify-content:center;width:max-content;max-width:100%;margin:0 auto 14px}
.cta-mate svg{height:clamp(96px,12vh,144px);width:auto;display:block;overflow:visible}
.finalcta .btn--cta{transition:transform .3s cubic-bezier(.22,1,.36,1),background .3s ease,box-shadow .3s ease}
.finalcta .btn--cta.is-pointed{background:var(--coral);transform:scale(1.06) translateY(-2px);box-shadow:0 0 0 6px rgba(232,92,74,.22),0 14px 34px rgba(232,92,74,.45)}
.finalcta__title{font-size:clamp(34px,5.2vw,60px);font-weight:700;line-height:1.06;letter-spacing:-.015em;font-family:var(--font-display);font-variation-settings:"opsz" 120}
.finalcta__txt{margin:20px auto 32px;max-width:56ch;font-weight:600;color:var(--ink);line-height:1.6}
/* Hero-tyylinen loppu-CTA (esim. UKK): keskusteluikkuna + CTA vierekkäin kuten
   etusivun herossa (.hero__actionrow) + reilusti tilaa finaalimeren edessä,
   ettei aalto tunnu tulevan liian lähelle CTA-nappia. */
.finalcta--hero .finalcta__actionrow{margin-top:28px}
.finalcta--hero{padding-bottom:clamp(260px,28vh,340px)} /* sama nappi↔aallot-väli kuin etusivun .finalcta */
.finalcta--hero .finalcta__actions{position:relative;z-index:1;margin-top:16px}

/* ---- richtext (alasivut) ---- */
.richtext{max-width:740px;font-size:16px;line-height:1.7;color:var(--text-2)}
.richtext h2,.richtext h3{color:var(--ink);margin:1.4em 0 .5em;line-height:1.2}
.richtext h2{font-size:clamp(22px,3vw,32px)}.richtext h3{font-size:20px}
.richtext p{margin:0 0 1em}
.richtext a{color:var(--coral);text-decoration:underline}
.richtext ul,.richtext ol{margin:0 0 1em;padding-left:1.4em}
.richtext li{margin:.3em 0}
.richtext strong{color:var(--ink)}

/* ---- reveal v2 (rauhallinen: laiva laituriin) ---- */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:.0001;transform:translateY(12px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--rvd,0s)}
  .rv-in .rv{opacity:1;transform:none}
  /* hintakortit: reveal-transition (0.8s + delay) jäisi voimaan ja .rv-in .rv
     jyräisi hover-transformin → palautetaan kortin oma nopea transitio ja
     päästetään hover-nousu läpi korkeammalla spesifisyydellä */
  .rv-in .plan.rv{transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out);transition-delay:0s}
  .rv-in .plan.rv:hover{transform:translateY(-6px)}
}

/* ---- typografia-viimeistely ---- */
h1,h2,h3,.hero__title,.section__title,.demo__title,.finalcta__title,.foundcard__title{text-wrap:balance}
.section__lead,.richtext p,.hero__sub,.demo__caption,.finalcta__txt{text-wrap:pretty}

@property --heroCut{syntax:'<length>';inherits:false;initial-value:100vh}
/* ---- hero-entrance (rauhallinen saapuminen) ---- */
@media (prefers-reduced-motion:no-preference){
  @keyframes heroRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .hero__eyebrow{animation:heroRise .7s var(--ease-out) both}
  .hero__title{animation:heroRise .8s var(--ease-out) .06s both}
  .hero__sub{animation:heroRise .8s var(--ease-out) .16s both}
  .hero__ctas{animation:heroRise .8s var(--ease-out) .26s both}
  .hero__actionrow{animation:heroRise .8s var(--ease-out) .26s both}
  .hero__trust{animation:heroRise .8s var(--ease-out) .36s both}
  .heromini{animation:heroRise 1s var(--ease-out) .48s both}
}
/* GitHub-tyylinen hero: sisältö haipuu ja nousee kun seuraava osio tulee */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference) and (min-width:900px){
    .hero{position:sticky;top:0;-webkit-mask-image:linear-gradient(#000 0,#000 calc(var(--heroCut) - 44px),transparent var(--heroCut));mask-image:linear-gradient(#000 0,#000 calc(var(--heroCut) - 44px),transparent var(--heroCut));animation:heroClip linear both;animation-timeline:scroll(root block);animation-range:0 100vh}
    @keyframes heroClip{from{--heroCut:91vh}to{--heroCut:-9vh}}
    /* Sisältö pienenee aavistuksen kun se alkaa poistua kuvasta (uppoaa aaltoihin) */
    .hero__inner{transform-origin:50% 30%;animation:heroShrink linear both;animation-timeline:scroll(root block);animation-range:0 100vh}
    @keyframes heroShrink{to{transform:scale(.955)}}
  }
}

/* Matalassa vaakanäkymässä hero ei saa jäädä stickyksi eikä valua veden alle. */
@media (orientation:landscape) and (max-height:560px){
  .hero{position:relative!important;top:auto;min-height:auto;padding:8px 0 104px;
    -webkit-mask-image:none!important;mask-image:none!important;animation:none!important}
  .hero__inner{animation:none!important;transform:none!important}
  .hero__mate{display:none}
  .hero__eyebrow{font-size:11px;margin-bottom:6px}
  .hero__title{font-size:clamp(36px,6vw,54px);line-height:.96}
  .hero__sub{font-size:14px;line-height:1.4;margin-top:8px}
  .hero__actionrow{margin-top:16px}
}
@media (orientation:landscape) and (max-height:560px) and (min-width:641px) and (max-width:860px){
  .hero__actionrow:has(.hero__trialrow){flex-wrap:nowrap}
  .hero__trialrow{flex-basis:auto;order:0}
  .hero__trialrow .btn{width:auto;max-width:none}
}
@media (orientation:landscape) and (max-height:560px) and (min-width:900px){
  .hero{padding-top:112px}
}


/* ============================================================
   MERIKARTTAKERROS — syvyyskäyrät, koordinaatit, viestiliput, kompassi
   ============================================================ */


/* viestilippu nostokortin ikonina */
.nosto__flag{display:inline-flex;margin-bottom:10px}
.nosto__flag svg{display:block;width:46px;height:34.5px;box-shadow:3px 3px 0 rgba(20,48,77,.10)}

.site-footer__coord{font-family:var(--font-body);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.08em}
/* Sähköposti koordinaattien alla — margin asettaa sen samalle korkeudelle
   kuin oikean puolen sarakkeiden ensimmäinen linkkirivi (Käyttökohteet) */
.site-footer__email{margin:5px 0 0}
.site-footer__email a{font-size:14px;font-weight:600;color:rgba(243,238,226,.68);transition:color .2s var(--ease-out)}
.site-footer__email a:hover{color:#fff}
/* Google OAuth -verifiointia varten (EN-only): pieni, huomaamaton selite botin
   toiminnasta — ei osa brändi-taglinea, siksi oma hillitty tyyli. */
.site-footer__disclosure{margin:10px 0 0;font-size:11px;line-height:1.5;font-weight:400;color:rgba(243,238,226,.5);max-width:34ch}


/* ============================================================
   KARTTA-ARKKI — sivun luuranko, ei tapetti (Luode-periaate):
   neatline-kehys + reunaviivaimet + pystyviivat, joiden varaan
   lohkot istuvat ja joita läpinäkymättömät pinnat leikkaavat.
   ============================================================ */
html{scroll-padding-top:84px}
body{position:relative}
.chartsheet{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;overflow-anchor:none}
@media (max-width:899px){.chartsheet{display:none}}

/* neatline: kartan reunusviiva */
.chartsheet__frame{position:absolute;inset:18px;border:1px solid rgba(20,48,77,.30)}

/* reunaviivaimet: tick-merkit kuten kartan asteikko (iso tick 180px, pieni 36px) */
.chartsheet__ruler{position:absolute;top:18px;bottom:18px;width:11px;
  background-image:repeating-linear-gradient(180deg,rgba(20,48,77,.40) 0 1px,transparent 1px 180px),repeating-linear-gradient(180deg,rgba(20,48,77,.22) 0 1px,transparent 1px 36px);
  background-size:11px 100%,6px 100%;background-repeat:no-repeat}
.chartsheet__ruler--l{left:19px;background-position:0 0,0 0}
.chartsheet__ruler--r{right:19px;background-position:100% 0,100% 0}

/* koordinaattilukemat viivaimen isojen tickien kohdalla (JS asettelee) */
.chartsheet__label{position:absolute;font-family:var(--font-body);font-weight:500;font-variant-numeric:tabular-nums;font-size:10px;letter-spacing:.08em;color:var(--faint);white-space:nowrap;writing-mode:vertical-rl;transform:translateY(-50%)}
.chartsheet__label--l{left:34px}
.chartsheet__label--r{right:34px;transform:translateY(-50%) rotate(180deg)}
.chartsheet__label--sea{color:#fff}

/* pystyviivat: sisältöreunat näkyvinä + keskilinja hienovaraisena */
.chartsheet__v{position:absolute;top:0;bottom:0;width:1px;background:rgba(20,48,77,.15)}
.chartsheet__v--l{left:max(var(--pad-x),calc((100% - var(--maxw)) / 2))}
.chartsheet__v--r{right:max(var(--pad-x),calc((100% - var(--maxw)) / 2))}
.chartsheet__v--c{left:50%;background:rgba(20,48,77,.08)}

/* reittiviiva: plotattu kurssi ruudukkoa pitkin, väylämerkit + X (JS piirtää) */
.chartsheet__route{position:absolute;top:0;left:0}
.chartsheet__route path.route{fill:none;stroke:#14304d;stroke-opacity:.38;stroke-width:1.5;stroke-dasharray:4 6;stroke-linecap:round}
.chartsheet__route path.route--alt{stroke-opacity:.2}
.chartsheet__route circle.buoy{fill:var(--bg);stroke:#14304d;stroke-opacity:.6;stroke-width:1.5;transform-box:fill-box;transform-origin:center;transition:fill .45s var(--ease-out),stroke .45s var(--ease-out)}
.chartsheet__route circle.buoy--navy{fill:#fff}
.chartsheet__route circle.buoy.passed{fill:var(--coral);stroke:var(--coral);stroke-opacity:1;animation:buoyPass .55s var(--ease-out)}
.chartsheet__route circle.buoy--navy.passed{fill:#14304d;stroke:#14304d}
.chartsheet__route text.wpnum{transition:fill .45s var(--ease-out)}
.chartsheet__route text.wpnum.passed{fill:var(--coral);font-weight:700}
.chartsheet__route text.wpnum--navy.passed{fill:#14304d}
@keyframes buoyPass{45%{transform:scale(1.65)}100%{transform:scale(1)}}
.chartsheet__route text.wpnum{font-family:var(--font-body);font-weight:500;font-variant-numeric:tabular-nums;font-size:10px;letter-spacing:.08em;fill:#4d6a84}
.chartsheet__route text.wpnum--navy{fill:#14304d}
.chartsheet__route .mark-x line{stroke:var(--coral);stroke-width:2.5;stroke-linecap:round}
.chartsheet__route .mark-x circle{fill:none;stroke:#14304d;stroke-opacity:.5;stroke-width:2.5}
.chartsheet__route .ship-bg{fill:#faf6ee}
.chartsheet__route .ship-dot{fill:#14304d}
.chartsheet__route .route-start{fill:var(--bg);stroke:#14304d;stroke-opacity:.6;stroke-width:1.5;transition:opacity .5s var(--ease-out)}
.chartsheet__route .route-start.gone{opacity:0}
/* palkinto: X-pop + sonar-renkaat kun merkki saapuu perille */
.chartsheet__route .mark-x{transition:opacity .45s var(--ease-out)}
.chartsheet__route .mark-x.arrived{opacity:0}
.chartsheet__route .ship-scale{transform-box:fill-box;transform-origin:center;transition:transform .5s var(--ease-out)}
.chartsheet__route .ship.arrived .ship-scale{transform:scale(1.55)}
.chartsheet__route circle.sonar{fill:none;stroke:#e85c4a;stroke-width:1.5;transform-box:fill-box;transform-origin:center;opacity:0;animation:sonar 1.6s cubic-bezier(.2,.6,.35,1) forwards}
@keyframes sonar{0%{transform:scale(.25);opacity:.9}70%{opacity:.4}100%{transform:scale(3.2);opacity:0}}

@media (min-width:1101px){.nav li.nav-secondary{display:none}}
.hero__sub-brand{}
@media (max-width:640px){.hero__sub-brand{display:inline;margin:0;color:inherit}}

/* WPML:n dev-site-banneri piiloon (vain lokaali kehityssivusto; poistuu
   tuotantoavaimella) + footer-kielivalitsimen varmistus pois */
.otgs-development-site-front-end,.wpml-ls-statics-footer{display:none!important}

/* ---- Tuotenäkymät: keskitetty karuselli, seuraava kurkkaa oikealta ---- */
.tuotenakymat{overflow:hidden}
.tn__head{margin-bottom:clamp(36px,4.5vw,56px)}
.tn__viewport{position:relative;width:100%;overflow:hidden;overflow-x:clip;overflow-y:visible;cursor:grab;touch-action:pan-y}
.tn__viewport:active{cursor:grabbing}
.tn__track{display:flex;gap:28px;transition:transform .6s var(--ease-out);will-change:transform}
.tn__panel{flex:0 0 auto;width:var(--panel-w);height:clamp(480px,44vw,600px);transition:opacity .5s var(--ease-out)}
.tn__panel.is-passed{opacity:0;pointer-events:none}
.tn__panel:not(.is-active){cursor:pointer}
.tn__panel .dashpanel--tn{height:100%;overflow:hidden;display:flex;flex-direction:column;gap:18px}
/* tekstit tasataan keskitetyn paneelin vasempaan, navigointi (nuolet+dotit)
   oikeaan reunaan; paneeli on keskitetty → sama --tn-align molemmin puolin */
.tn__captions{margin-top:26px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;padding-left:max(var(--tn-align,var(--pad-x)),var(--pad-x));padding-right:max(var(--tn-align,var(--pad-x)),var(--pad-x))}
.tn__caption{display:none;max-width:56ch}
.tn__caption.is-active{display:block;animation:tnCapIn .45s var(--ease-out)}
@keyframes tnCapIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tn__caption-title{font-family:var(--font-display);font-variation-settings:"opsz" 40;font-size:clamp(20px,2vw,25px);font-weight:700;color:var(--ink);margin:0 0 6px}
.tn__caption p{margin:0;font-size:15.5px;line-height:1.6;color:var(--text-2)}
.tn__more{display:inline-block;margin-top:8px;font-size:14px}
.tn__nav{display:flex;flex-direction:column;align-items:flex-end;gap:12px;padding-top:6px}
.tn__dots{display:flex;align-items:center;gap:0}
/* pyöreäkulmainen jana: aktiivinen dotti venyy leveäksi pilleriksi.
   Kosketusalue kasvatetaan PYSTYSUUNTAAN (44 px), ei vaakaan: etusivulla on 9
   näkymää, joten 36 px leveä dotti teki dottiriviin 9 × 36 = 324 px ja
   .tn__captions-gridin min-content nousi 438 px:ään — 390 px puhelimessa dotit
   8 ja 9 valuivat ruudun ulkopuolelle. 20 px × 9 = 180 px mahtuu (180 + nuolet
   102 + gap 12 = 294 px < 343 px sisältöleveys). Vaakasuuntaa ei voi kasvattaa
   ilman että naapuridottien osumakohdat menevät päällekkäin ja klikkaus osuu
   väärään dottiin, joten korkeus hoitaa kosketustavoitteen. */
.tn__dot{position:relative;width:20px;height:44px;padding:0;border:0;border-radius:99px;background:transparent;cursor:pointer}
.tn__dot::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:99px;background:rgba(20,48,77,.28);transform:translate(-50%,-50%);transition:width .35s var(--ease-out),background-color .3s}
.tn__dot.is-active::before{width:28px;background:var(--coral)}
.tn__arrows{display:flex;gap:10px}
.tn__arrow{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);font-size:18px;cursor:pointer;transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out),transform .2s var(--ease-out)}
.tn__arrow:hover{background:var(--coral);border-color:var(--coral);color:var(--paper);transform:translateY(-1px)}
@media (max-width:900px){
  /* Mobiili: näkymä luonnollisella korkeudella (kuten Ominaisuudet-sivulla) →
     sisältö skaalautuu leveyteen 88vw, korkeus seuraa sisältöä. Näkymäkohtaiset
     mobiilikorjaukset jaettu molemmille pinnoille .dashpanel--tn-juuren kautta. */
  .tn__panel{width:88vw;height:auto;min-height:0}
  .tn__panel .dashpanel--tn{height:auto;min-height:0;overflow:hidden}
  .tn__captions{grid-template-columns:1fr}
  .tn__nav{flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  /* Viewport-korkeus seuraa AKTIIVISTA näkymää (JS: fitHeight) → ei "koko
     karusellin korkein näkymä" -tyhjää alle. overflow-y:hidden leikkaa muut
     (korkeammat) paneelit; korkeus animoituu pehmeästi näkymää vaihtaessa. */
  .tn__viewport{overflow:hidden;transition:height .5s var(--ease-out)}
}
/* Mittausvaihe (fitHeight): reveal-elementit pakotetaan auki ilman animaatiota. */
.tn-measuring,.tn-measuring *{transition:none !important;animation:none !important}

/* Live Voice: middlewaren aurora-orbi (orb.css 1:1, aurora-variantti) */
.dashpanel--voice{align-items:stretch}
.tnv-voice{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.orb{--size:88px;--level:0;--speed:1;--hue-shift:0deg;width:var(--size);height:var(--size);position:relative;display:grid;place-items:center;transform:translateZ(0) scale(calc(1 + var(--level) * .14));transition:transform .12s ease-out;filter:drop-shadow(0 8px 22px rgba(47,77,138,.18)) drop-shadow(0 0 calc(18px + var(--level) * 30px) rgba(168,85,247,.28));will-change:transform,filter}
.orb::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from calc(var(--hue-shift) * 1), #ff6b6b, #ffd166, #06d6a0, #4cc9f0, #7b2cbf, #ff4bd8, #ff6b6b);filter:blur(10px);opacity:calc(.35 + var(--level) * .55);animation:orbSpin calc(9s * var(--speed)) linear infinite;z-index:0}
.orb--aurora .core{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#1a1032;box-shadow:inset 0 0 30px rgba(255,255,255,.25), inset 0 -10px 24px rgba(0,0,0,.25)}
.orb--aurora .core::before{content:"";position:absolute;width:160%;height:160%;top:-30%;left:-30%;background:radial-gradient(circle at 30% 30%, #ff5f6d 0%, transparent 50%),radial-gradient(circle at 70% 60%, #ffd166 0%, transparent 45%),radial-gradient(circle at 50% 80%, #9bf6ff 0%, transparent 50%),radial-gradient(circle at 20% 70%, #6a67f8 0%, transparent 45%),radial-gradient(circle at 80% 20%, #b457ff 0%, transparent 40%),radial-gradient(circle at 60% 40%, #ff6ec7 0%, transparent 50%);filter:blur(8px) saturate(1.4);animation:auroraFlow1 calc(8s * var(--speed)) ease-in-out infinite;opacity:.85}
.orb--aurora .core::after{content:"";position:absolute;width:140%;height:140%;top:-20%;left:-20%;background:radial-gradient(circle at 60% 25%, #ff9966 0%, transparent 45%),radial-gradient(circle at 35% 65%, #ff5f6d 0%, transparent 40%),radial-gradient(circle at 75% 75%, #6a67f8 0%, transparent 50%),radial-gradient(circle at 25% 40%, #9bf6ff 0%, transparent 45%);filter:blur(10px) saturate(1.2);animation:auroraFlow2 calc(10s * var(--speed)) ease-in-out infinite;opacity:.7;mix-blend-mode:screen}
.orb--aurora .wave{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:2;pointer-events:none}
.orb--aurora .wave::before{content:"";position:absolute;top:6%;left:16%;width:55%;height:38%;border-radius:50%;background:radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.75), rgba(255,255,255,.05) 65%, transparent 80%);filter:blur(2px)}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@keyframes auroraFlow1{0%{transform:translate(0,0) rotate(0deg) scale(1)}25%{transform:translate(12%,-8%) rotate(45deg) scale(1.05)}50%{transform:translate(-8%,12%) rotate(120deg) scale(.95)}75%{transform:translate(6%,6%) rotate(200deg) scale(1.08)}100%{transform:translate(0,0) rotate(360deg) scale(1)}}
@keyframes auroraFlow2{0%{transform:translate(0,0) rotate(0deg) scale(1)}20%{transform:translate(-10%,8%) rotate(-30deg) scale(1.1)}40%{transform:translate(14%,-6%) rotate(-90deg) scale(.9)}60%{transform:translate(-6%,-10%) rotate(-180deg) scale(1.05)}80%{transform:translate(8%,12%) rotate(-270deg) scale(.92)}100%{transform:translate(0,0) rotate(-360deg) scale(1)}}
/* puhetila: --level nostaa skaalaa, rengasta ja hehkua kuten oikeassa widgetissä */
.orb.is-speaking{--level:.8;animation:orbTalk .85s ease-in-out infinite}
@keyframes orbTalk{0%,100%{transform:translateZ(0) scale(1.06)}50%{transform:translateZ(0) scale(1.14)}}
.tnv-voicecount{margin:0;font-family:var(--font-label);font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:rgba(243,238,226,.6)}
.voice-play{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:12px;border:0;background:var(--paper);color:var(--ink);font-weight:700;font-size:14.5px;cursor:pointer;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.voice-play:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.voice-play.is-playing{background:var(--coral);color:#fff}
.voice-play__icon{font-size:12px}

/* Näkymien sisäinen kieli (yövahti-paneelin jatke) */
.dashpanel--tn .tnv-card{background:rgba(243,238,226,.05);border:1px solid rgba(243,238,226,.14);border-radius:14px;padding:16px 18px}
.tnv-card__title{display:flex;align-items:center;justify-content:space-between;gap:6px 10px;flex-wrap:wrap;font-family:var(--font-label);font-weight:400;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:rgba(243,238,226,.65);margin-bottom:12px}
.tnv-count{font-family:var(--font-body);font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
.tnv-toggle{position:relative;width:34px;height:19px;border-radius:999px;background:rgba(243,238,226,.25)}
.tnv-toggle.is-on{background:var(--coral)}
.tnv-toggle::after{content:"";position:absolute;top:2.5px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .2s}
.tnv-toggle.is-on::after{left:17px}
.tnv-greeting{font-size:14.5px;line-height:1.55;color:var(--night-ink);font-style:italic}
.tnv-path{display:flex;flex-direction:column;gap:7px;padding:11px 0;border-top:1px solid rgba(243,238,226,.1)}
.tnv-path:first-of-type{border-top:0;padding-top:0}
.tnv-path__name{font-weight:700;font-size:14.5px;color:var(--night-ink)}
.tnv-chain{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.tnv-node{font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:8px;background:rgba(243,238,226,.09);border:1px solid rgba(243,238,226,.16);color:rgba(243,238,226,.85);white-space:nowrap}
.tnv-node--booking{background:rgba(232,92,74,.16);border-color:rgba(232,92,74,.5);color:#f6b0a4}
.tnv-arrow{color:rgba(243,238,226,.4);font-size:13px}
.tnv-tabs{display:flex;gap:6px}
.tnv-tab{font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:9px 9px 0 0;background:rgba(243,238,226,.06);border:1px solid rgba(243,238,226,.12);border-bottom:0;color:rgba(243,238,226,.6)}
.tnv-tab.is-active{background:rgba(243,238,226,.12);color:var(--night-ink)}
.tnv-doc{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid rgba(243,238,226,.1)}
.tnv-doc:first-child{border-top:0;padding-top:0}
.tnv-doc__url{flex:1;font-weight:600;font-size:14px;color:var(--night-ink);font-variant-numeric:tabular-nums}
.tnv-doc__meta{font-size:12.5px;color:rgba(243,238,226,.55);font-variant-numeric:tabular-nums}
.tnv-badge{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap}
.tnv-badge--ok{background:rgba(30,158,106,.18);color:#7fd3ae;border:1px solid rgba(30,158,106,.45)}
.tnv-badge--crawling{background:rgba(243,238,226,.1);color:rgba(243,238,226,.7);border:1px solid rgba(243,238,226,.25)}
.tnv-badge--uusi{background:rgba(232,92,74,.18);color:#f6b0a4;border:1px solid rgba(232,92,74,.5)}
.tnv-badge--kontaktoitu{background:rgba(243,238,226,.1);color:var(--night-ink);border:1px solid rgba(243,238,226,.3)}
.tnv-badge--arkistoitu{background:transparent;color:rgba(243,238,226,.45);border:1px solid rgba(243,238,226,.18)}
.tnv-table{display:flex;flex-direction:column;background:rgba(243,238,226,.05);border:1px solid rgba(243,238,226,.14);border-radius:14px;padding:6px 18px;flex:1;min-height:0;overflow:hidden}
.tnv-table__head,.tnv-table__row{display:grid;grid-template-columns:170px 1fr 110px 90px;gap:14px;align-items:center;padding:11px 0;border-top:1px solid rgba(243,238,226,.1)}
.tnv-table__head{border-top:0;font-family:var(--font-label);font-weight:400;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:rgba(243,238,226,.55)}
.tnv-table__name{font-weight:700;font-size:14px;color:var(--night-ink);display:flex;flex-direction:column}
.tnv-table__name em{font-style:normal;font-weight:500;font-size:12px;color:rgba(243,238,226,.55)}
.tnv-table__sum{font-size:13px;line-height:1.5;color:rgba(243,238,226,.75)}
.tnv-table__time{font-size:12.5px;color:rgba(243,238,226,.55);font-variant-numeric:tabular-nums}
.tnv-setting{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid rgba(243,238,226,.1);font-size:14px;color:rgba(243,238,226,.8)}
.tnv-setting:first-of-type{border-top:0;padding-top:0}
.tnv-val{font-weight:700;color:var(--night-ink);font-variant-numeric:tabular-nums;display:flex;gap:6px}
.tnv-chip{font-size:12px;font-weight:600;padding:4px 9px;border-radius:8px;background:rgba(243,238,226,.09);border:1px solid rgba(243,238,226,.2)}
/* Polkupuu: juurikortit + sisäkkäiset haarat liitinviivoin (sales-path-tree) */
.tree{display:flex;flex-direction:column;gap:14px;flex:1;min-height:0;overflow:hidden}
.tree__root{background:rgba(243,238,226,.05);border:1px solid rgba(243,238,226,.14);border-radius:14px;overflow:hidden}
.tree__root--dim{opacity:.62}
.tree__roothead{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;background:rgba(243,238,226,.06);border-bottom:1px solid rgba(243,238,226,.12)}
.tree__roottitle{font-family:var(--font-label);font-weight:400;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--night-ink)}
.tree__count{font-size:11.5px;color:rgba(243,238,226,.5);font-variant-numeric:tabular-nums}
.tree__body{padding:14px 16px}
/* liitinviiva SÄILIÖLLÄ (ei per-node): sisarusten välinen marginaali ei
   katkaise viivaa (Referenssit-sisar katkoi keskiviivan Kartoituspuhelun alla) */
.tree__body > .tree__node,.tree__children{margin-left:12px;padding-left:14px;border-left:3px solid rgba(232,92,74,.4)}
.tree__node{position:relative}
.tree__node + .tree__node{margin-top:10px}
.tree__node > .tree__label{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:rgba(243,238,226,.88);background:rgba(243,238,226,.08);border:1px solid rgba(243,238,226,.16);border-radius:9px;padding:7px 12px}
.tree__node--booking > .tree__label{background:rgba(232,92,74,.16);border-color:rgba(232,92,74,.5);color:#f6b0a4}
.tree__children{margin-top:10px}
.tree__btns{display:inline-flex;gap:6px;margin-left:8px;vertical-align:middle}
.tree__btn{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:6px;border:1px solid rgba(243,238,226,.25);color:rgba(243,238,226,.55);transition:background-color .3s,color .3s}
.tree__btn.is-flash{background:var(--coral);border-color:var(--coral);color:#fff}
.tree__node--new{display:none}
.tree__node--new.is-in{display:block;animation:treeNodeIn .5s var(--ease-out)}
@keyframes treeNodeIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* Liidi: rivin avaus → AI-yhteenveto + keskusteluotteet */
.tnv-lead__open{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-out)}
.tnv-lead.is-open .tnv-lead__open{grid-template-rows:1fr}
.tnv-lead__in{min-height:0;overflow:hidden}
.tnv-lead.is-open .tnv-lead__in{padding:4px 0 14px}
.tnv-lead__chat{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.tnv-lead__msg{max-width:75%;font-size:12.5px;line-height:1.5;padding:7px 11px;border-radius:10px}
.tnv-lead__msg--user{align-self:flex-end;background:rgba(243,238,226,.14);color:var(--night-ink);border-bottom-right-radius:3px}
.tnv-lead__msg--bot{align-self:flex-start;background:rgba(243,238,226,.07);border:1px solid rgba(243,238,226,.12);color:rgba(243,238,226,.85);border-bottom-left-radius:3px}

/* Tietopankki: crawl-tilan vaihto + uusi PDF-rivi */
.tnv-badge--crawling{animation:kbPulse 1.2s ease-in-out infinite}
.tnv-badge--crawling.is-done{animation:none;background:rgba(30,158,106,.18);color:#7fd3ae;border-color:rgba(30,158,106,.45)}
@keyframes kbPulse{0%,100%{opacity:1}50%{opacity:.45}}
.tnv-doc--new{display:none}
.tnv-doc--new.is-in{display:flex;animation:treeNodeIn .5s var(--ease-out)}

/* Tietopankki v2: yhden napin crawl + omat ohjeet + PDF-taulukko */
.tnv-cols{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;flex:1;min-height:0}
@media (max-width:700px){.tnv-cols{grid-template-columns:1fr}}
.tnv-crawlrow{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tnv-btn--small{font-size:12px;padding:6px 12px}
.tnv-btn{transition:background-color .3s,color .3s,transform .2s}
.tnv-btn.is-flash{background:var(--coral);color:#fff;transform:scale(1.04)}
.tnv-crawlstatus{font-size:12px;color:rgba(243,238,226,.6);font-variant-numeric:tabular-nums}
.tnv-crawlstatus.is-running{color:#f6b0a4;animation:kbPulse 1.1s ease-in-out infinite}
.tnv-crawlstatus.is-done{color:#7fd3ae}
.tnv-doclist .tnv-doc{opacity:0;transform:translateY(5px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.tnv-doclist.is-in .tnv-doc{opacity:1;transform:none}
.tnv-doclist.is-in .tnv-doc:nth-child(2){transition-delay:.12s}
.tnv-doclist.is-in .tnv-doc:nth-child(3){transition-delay:.24s}
.tnv-doclist.is-in .tnv-doc:nth-child(4){transition-delay:.36s}
.tnv-check{color:#7fd3ae;font-weight:700}
.tnv-own{margin-top:12px;padding:10px 12px;border:1px dashed rgba(243,238,226,.3);border-radius:10px;font-size:12.5px;line-height:1.5;color:rgba(243,238,226,.8);opacity:0;transform:translateY(5px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.tnv-own.is-in{opacity:1;transform:none}
.tnv-own__label{display:block;font-family:var(--font-label);font-weight:400;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:rgba(243,238,226,.6);margin-bottom:4px}
.tnv-card--pdf{opacity:0;transform:translateX(14px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.tnv-card--pdf.is-in{opacity:1;transform:none}
.tnv-pdftable{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.tnv-pdftable th{text-align:left;font-family:var(--font-label);font-weight:400;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:rgba(243,238,226,.55);padding:6px 8px;border-bottom:1px solid rgba(243,238,226,.2)}
.tnv-pdftable td{padding:8px;border-bottom:1px solid rgba(243,238,226,.1);color:rgba(243,238,226,.85)}
.tnv-pdftable tr:last-child td{border-bottom:0}

/* Liidit: rivi "hoveroituu" vaaleammaksi ennen litteroinnin avaamista */
.tnv-table__row{transition:background-color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.tnv-table__row.is-hover{background:rgba(243,238,226,.09);border-radius:10px;box-shadow:0 0 0 7px rgba(243,238,226,.09)}
/* Liidit: litterointi-drawer oikealta (käyty keskustelu näkyy kerralla) */
.tnv-drawer{position:absolute;top:0;right:0;bottom:0;width:min(420px,58%);background:var(--night-2,#0b1f36);border-left:1px solid rgba(243,238,226,.18);box-shadow:-18px 0 40px rgba(0,0,0,.35);transform:translateX(105%);transition:transform .55s var(--ease-out);display:flex;flex-direction:column;z-index:5;border-radius:0 18px 18px 0}
.tnv-drawer.is-in{transform:none}
.tnv-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(243,238,226,.14);font-size:13.5px;color:var(--night-ink)}
.tnv-drawer__x{color:rgba(243,238,226,.5)}
.tnv-drawer__body{padding:16px 18px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.tn__panel .dashpanel--tn{position:relative}

/* Ajanvaraus: yhdistämisflow + slotit */
.tnv-caret{display:inline-block;width:1.5px;height:13px;background:rgba(243,238,226,.8);vertical-align:-2px;animation:kbPulse 1s steps(1) infinite}
.tnv-badge--consent{background:rgba(243,238,226,.92);color:#1f2937;border:1px solid rgba(243,238,226,1);animation:kbPulse 1.3s ease-in-out infinite}
.tnv-card--slots{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.tnv-card--slots.is-in{opacity:1;transform:none}
.tnv-slotrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
[data-cal-booked]{opacity:0;transform:scale(.85);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
[data-cal-booked].is-in{opacity:1;transform:none}
/* ajanvaraus-paneelissa 4 korttia + footer — tiiviimpi rytmi, jotta slots-kortti mahtuu */
[data-tn-panel][data-view="ajanvaraus"] .dashpanel--tn{gap:12px}
[data-tn-panel][data-view="ajanvaraus"] .tnv-card{padding:12px 18px}

/* Botin ohjeet: osiolista (staattinen) + sävyeditori + sävynäyte */
.tnv-doclist--static .tnv-doc{opacity:1;transform:none}
.tnv-card__title--gap{margin-top:12px}
.tnv-doc--sel{transition:background-color .35s var(--ease-out),box-shadow .35s var(--ease-out);border-radius:8px}
.tnv-doc--sel.is-flash{background:rgba(243,238,226,.1);box-shadow:0 0 0 6px rgba(243,238,226,.1)}
.tnv-card--editor{display:flex;flex-direction:column;gap:10px}
.tnv-editor{background:rgba(0,0,0,.25);border:1px solid rgba(243,238,226,.16);border-radius:10px;padding:12px 14px;min-height:88px;font-size:12.5px;line-height:1.55;color:rgba(243,238,226,.9)}
.tnv-tonesample{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.tnv-tonesample.is-in{opacity:1;transform:none}
.tnv-tonesample__label{display:block;font-family:var(--font-label);font-weight:400;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:rgba(243,238,226,.5);margin-bottom:5px}
.tnv-tonesample__msg{display:inline-block;background:rgba(243,238,226,.09);border:1px solid rgba(243,238,226,.14);border-radius:10px;border-bottom-left-radius:3px;padding:8px 12px;font-size:12.5px;line-height:1.5;color:rgba(243,238,226,.9)}

/* Ulkoasu: säätimet + live-esikatselu (CSS-muuttujat --pvp/--pvr) */
[data-tn-panel][data-view="ulkoasu"] .dashpanel--tn{gap:12px}
[data-tn-panel][data-view="ulkoasu"] .tnv-card{padding:12px 18px}
.tnv-card--styles .tnv-setting{padding:4px 0;font-size:12px}
.tnv-card--styles .tnv-val{font-size:11.5px}
.tnv-card--styles .tnv-swatch{width:19px;height:19px}
.tnv-card--styles .tnv-chip{font-size:11px;padding:3px 8px}
.tnv-card--pv{display:flex;flex-direction:column}
.tnv-card--pv .tnv-pv{flex:1}
.tnv-pv__input{margin-top:auto}
.tnv-swatches{display:flex;gap:8px}
.tnv-swatch{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1px rgba(243,238,226,.25);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.tnv-swatch.is-sel{box-shadow:0 0 0 2px var(--bg);transform:scale(1.15)}
.tnv-chip{transition:background-color .3s var(--ease-out)}
.tnv-chip.is-sel{background:rgba(243,238,226,.26)}
.tnv-pv{background:#f7f3ea;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.tnv-pv__head{display:flex;align-items:center;gap:9px;padding-bottom:8px;border-bottom:1px solid rgba(20,48,77,.12)}
/* Esikatselun botti on Yritys Oy:n brändiä → sama Y.-merkki kuin MST:n dw-ikkunoissa */
.tnv-pv__dot{width:26px;height:26px;flex-shrink:0;border-radius:50%;background:#fff;border:1px solid rgba(20,48,77,.15);display:flex;align-items:center;justify-content:center}
.tnv-pv__dot .dw__avatar-y svg{width:14px}
.tnv-pv__name{font-size:12px;font-weight:700;color:#14304d;display:flex;flex-direction:column;line-height:1.25}
.tnv-pv__name em{font-style:normal;font-weight:500;font-size:10px;color:rgba(20,48,77,.6)}
.tnv-pv__msg{max-width:82%;padding:7px 11px;font-size:12px;line-height:1.45;border-radius:var(--pvr);transition:border-radius .45s var(--ease-out),background-color .45s var(--ease-out)}
.tnv-pv__msg--bot{align-self:flex-start;background:rgba(20,48,77,.08);color:#14304d}
.tnv-pv__msg--user{align-self:flex-end;background:var(--pvp);color:#fff}
.tnv-pv__input{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;padding:7px 8px 7px 12px;border:1px solid rgba(20,48,77,.18);border-radius:var(--pvr);font-size:11.5px;color:rgba(20,48,77,.55);transition:border-radius .45s var(--ease-out)}
.tnv-pv__send{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;border-radius:calc(var(--pvr) - 2px);background:var(--pvp);color:#fff;font-size:11px;transition:background-color .45s var(--ease-out),border-radius .45s var(--ease-out)}

/* Inline-upotus: selainmockup, jossa keskustelu sisällön seassa */
.tnv-page{flex:1;min-height:0;display:flex;flex-direction:column;background:#f7f3ea;border-radius:12px;overflow:hidden}
.tnv-page__chrome{display:flex;align-items:center;gap:5px;padding:9px 12px;background:rgba(20,48,77,.07);border-bottom:1px solid rgba(20,48,77,.1)}
.tnv-page__chrome span{width:8px;height:8px;border-radius:50%;background:rgba(20,48,77,.18)}
.tnv-page__chrome em{margin-left:8px;font-style:normal;font-size:10.5px;letter-spacing:.06em;color:rgba(20,48,77,.55)}
.tnv-page__body{flex:1;padding:18px 22px;display:flex;flex-direction:column;gap:10px}
.tnv-page__line{height:9px;border-radius:5px;background:rgba(20,48,77,.1);width:100%}
.tnv-page__line--h{height:16px;width:52%;background:rgba(20,48,77,.2);margin-bottom:2px}
.tnv-page__line--short{width:68%}
/* inline-kenttä kavennettu -> oikealle jää tilaa aukeavalle kulmawidgetille */
.tnv-inline{margin:6px 0;display:flex;flex-direction:column;gap:8px;max-width:58%}
.tnv-inline__input{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1.5px solid #14304d;border-radius:12px;padding:10px 10px 10px 14px;font-size:13px;color:#14304d;box-shadow:4px 4px 0 rgba(20,48,77,.08)}
.tnv-inline__send{width:28px;height:28px;flex-shrink:0;display:grid;place-items:center;border-radius:9px;background:var(--coral);color:#fff;font-size:12px}
.tnv-caret--ink{background:rgba(20,48,77,.75)}
.tnv-inline__conv{opacity:0;transform:translateY(6px);max-height:0;overflow:hidden;transition:max-height .55s var(--ease-out),opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.tnv-inline__conv.is-in{opacity:1;transform:none;max-height:150px}
/* vastaus oikeana puhekuplana (kuten widgetissä), ei laatikkona */
.tnv-inline__msg{display:inline-block;max-width:86%;background:#fff;border:1px solid rgba(20,48,77,.16);border-radius:14px;border-bottom-left-radius:4px;padding:10px 14px;font-size:12.5px;line-height:1.5;color:#14304d;box-shadow:0 2px 6px rgba(20,48,77,.08)}
.tnv-inline__hint{display:block;margin-top:6px;font-family:var(--font-label);font-weight:400;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:rgba(20,48,77,.5)}
/* vaihtoehto: sama botti tuttuna kulmawidgettinä (launcher mockin kulmassa) */
.tnv-launcher{position:absolute;right:16px;bottom:14px;display:flex;align-items:center;gap:9px}
.tnv-launcher__tip{opacity:0;transform:translateX(8px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);background:#14304d;color:#faf6ee;font-size:11px;line-height:1.35;padding:7px 11px;border-radius:9px;border-bottom-right-radius:3px;max-width:180px}
.tnv-launcher.is-in .tnv-launcher__tip{opacity:1;transform:none}
.tnv-launcher__btn{position:relative;width:42px;height:42px;flex-shrink:0;border-radius:50%;background:var(--coral);box-shadow:0 5px 12px rgba(20,48,77,.28);display:flex;align-items:center;justify-content:center}
/* Käynnistinkin on Yritys Oy:n botin — Y-kirjain, ei Aye Mateyn purjemerkki */
.tnv-launcher__btn::after{content:"";width:19px;height:15px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 473.24 374.68'%3E%3Cpolygon points='473.24 0 309.93 246.8 309.93 374.67 163.35 374.68 163.37 246.88 0 .02 171.82 .03 236.63 109.74 301.41 .04 473.24 0'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 473.24 374.68'%3E%3Cpolygon points='473.24 0 309.93 246.8 309.93 374.67 163.35 374.68 163.37 246.88 0 .02 171.82 .03 236.63 109.74 301.41 .04 473.24 0'/%3E%3C/svg%3E") center/contain no-repeat}
.tnv-launcher.is-in .tnv-launcher__btn{animation:launcherPop .5s var(--ease-out)}
@keyframes launcherPop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.tnv-page{position:relative}
/* kulmawidget aukeaa launcherin ylle (skenen loppuvaihe) */
.tnv-miniwidget{position:absolute;right:16px;bottom:66px;width:min(240px,46%);background:#fff;border:1px solid rgba(20,48,77,.16);border-radius:14px;border-bottom-right-radius:4px;box-shadow:0 12px 28px rgba(20,48,77,.18);padding:10px 12px;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(10px) scale(.92);transform-origin:bottom right;transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);pointer-events:none}
.tnv-miniwidget.is-in{opacity:1;transform:none}
/* Palaute ja sokeat pisteet -näkymä */
.tnv-gap .tnv-val{display:flex;align-items:center;gap:8px;white-space:nowrap}
.tnv-addchip{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--coral);color:#fff;border-radius:999px;padding:3px 9px;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.tnv-addchip.is-flash{box-shadow:0 0 0 5px rgba(232,92,74,.3)}
.tnv-fb{display:flex;flex-direction:column;gap:12px;padding-top:4px}
.tnv-fb__bubble{background:rgba(243,238,226,.1);border-radius:10px;border-bottom-left-radius:3px;padding:10px 13px;font-size:12.5px;line-height:1.55;max-width:95%}
.tnv-fb__row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tnv-fb__ask{font-family:var(--font-label);font-weight:400;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,238,226,.55)}
.tnv-thumbs{display:flex;gap:8px}
.tnv-thumb{width:34px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(243,238,226,.25);border-radius:8px;font-size:14px;transition:background-color .3s var(--ease-out),transform .3s var(--ease-out),border-color .3s var(--ease-out)}
.tnv-thumb.is-on{background:var(--coral);border-color:var(--coral);transform:scale(1.1)}
.tnv-miniwidget__head{display:flex;align-items:center;gap:8px;padding-bottom:7px;border-bottom:1px solid rgba(20,48,77,.1);font-size:11.5px;font-weight:700;color:#14304d}
.tnv-miniwidget__head span em{display:block;font-style:normal;font-weight:500;font-size:9.5px;color:rgba(20,48,77,.55)}
/* Kulmachatti on Yritys Oy:n botti → Y.-merkki, ei Aye Mateyn purjemerkki */
.tnv-miniwidget__dot{width:20px;height:20px;flex-shrink:0;border-radius:50%;background:#fff;border:1px solid rgba(20,48,77,.15);display:flex;align-items:center;justify-content:center}
.tnv-miniwidget__dot .dw__avatar-y svg{width:11px}
.tnv-miniwidget__msg{background:rgba(20,48,77,.07);border-radius:10px;border-bottom-left-radius:3px;padding:7px 10px;font-size:11.5px;line-height:1.45;color:#14304d;align-self:flex-start}
.tnv-miniwidget__input{display:flex;align-items:center;justify-content:space-between;gap:6px;border:1px solid rgba(20,48,77,.16);border-radius:9px;padding:5px 6px 5px 9px;font-size:10.5px;color:rgba(20,48,77,.5)}
.tnv-miniwidget__send{width:20px;height:20px;flex-shrink:0;display:grid;place-items:center;border-radius:6px;background:var(--coral);color:#fff;font-size:9px}

/* Demo-otsikot klikattavia (demo-scene.js lisää is-clickable + role=button) */
[data-demo-title-a].is-clickable,[data-demo-title-b].is-clickable{cursor:pointer;transition:filter .2s var(--ease-out)}
[data-demo-title-a].is-clickable:hover,[data-demo-title-b].is-clickable:hover{filter:brightness(.75) saturate(1.2)}

/* Liquid-orbi (middleware orb.css variantti B) */
.orb--liquid .core{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 55%, #fff 0%, #fef3ff 12%, transparent 45%), #fff;box-shadow:inset 0 0 30px rgba(255,255,255,.7), inset 0 -14px 28px rgba(0,0,0,.18);filter:saturate(calc(var(--intensity, 1) * 1.15)) brightness(calc(1 + (var(--intensity, 1) - 1) * .18)) contrast(calc(1 + (var(--intensity, 1) - 1) * .15))}
.orb--liquid .blob{position:absolute;border-radius:50%;filter:blur(calc(14px - var(--level) * 4px)) saturate(calc(1 + var(--intensity, 1) * .6));opacity:calc(.75 + var(--intensity, 1) * .15);mix-blend-mode:screen}
.orb--liquid .b1{width:78%;height:78%;top:8%;left:6%;background:#ff4d8d;animation:bl1 calc(7s * var(--speed)) ease-in-out infinite}
.orb--liquid .b2{width:72%;height:72%;top:16%;left:26%;background:#ffb347;animation:bl2 calc(9s * var(--speed)) ease-in-out infinite}
.orb--liquid .b3{width:66%;height:66%;top:22%;left:14%;background:#3dd6d0;animation:bl3 calc(8s * var(--speed)) ease-in-out infinite}
.orb--liquid .b4{width:70%;height:70%;top:8%;left:24%;background:#7c6bff;animation:bl4 calc(10s * var(--speed)) ease-in-out infinite}
.orb--liquid .b5{width:62%;height:62%;top:28%;left:6%;background:#5be38a;animation:bl5 calc(6.5s * var(--speed)) ease-in-out infinite}
.orb--liquid .core::after{content:"";position:absolute;top:10%;left:18%;width:52%;height:36%;border-radius:50%;background:radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.9), rgba(255,255,255,.1) 65%, transparent 80%);filter:blur(1px);pointer-events:none}
@keyframes bl1{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(22%,-18%) scale(1.12)}50%{transform:translate(-16%,14%) scale(.9)}75%{transform:translate(18%,10%) scale(1.05)}}
@keyframes bl2{0%,100%{transform:translate(0,0) scale(1)}20%{transform:translate(-28%,-12%) scale(1.15)}40%{transform:translate(12%,-22%) scale(.88)}60%{transform:translate(24%,16%) scale(1.1)}80%{transform:translate(-10%,18%) scale(.92)}}
@keyframes bl3{0%,100%{transform:scale(.85);opacity:.7}50%{transform:scale(1.2);opacity:1}}
@keyframes bl4{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(-20%,-16%) rotate(120deg)}66%{transform:translate(16%,20%) rotate(240deg)}}
@keyframes bl5{0%,100%{transform:translate(0,0) scale(1)}30%{transform:translate(16%,-24%) scale(1.1)}70%{transform:translate(-20%,12%) scale(.95)}}

.tnv-actionrow{display:flex;align-items:center;gap:14px}
.tnv-btn{font-size:13px;font-weight:700;padding:9px 16px;border-radius:10px;background:var(--paper);color:var(--ink);white-space:nowrap}
.tnv-hint{font-size:12.5px;color:rgba(243,238,226,.6)}
.tnv-foot{margin:auto 0 0;font-size:12.5px;line-height:1.55;color:rgba(243,238,226,.55)}
@media (max-width:640px){.tnv-table__head,.tnv-table__row{grid-template-columns:1fr 90px;gap:8px}.tnv-table__sum,.tnv-table__time{display:none}}

/* ---- Miten se toimii: sivunäkymät (asiakkaan sivusto, ei hallintapaneeli) ---- */
/* Askel 3: kartoituspolku — botin viestit + valintapillerit */
.tnv-guide{display:flex;flex-direction:column;gap:9px;max-width:82%}
.tnv-guide__bot{background:#fff;border:1px solid rgba(20,48,77,.16);border-radius:14px;border-bottom-left-radius:4px;padding:9px 13px;font-size:12px;line-height:1.5;color:#14304d;box-shadow:0 2px 6px rgba(20,48,77,.08);align-self:flex-start;max-width:94%;opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.tnv-guide__bot.is-in{opacity:1;transform:none}
.tnv-guide__pills{display:flex;flex-wrap:wrap;gap:6px;opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.tnv-guide__pills.is-in{opacity:1;transform:none}
.tnv-pill{display:inline-block;padding:6px 12px;border-radius:999px;border:1.5px solid rgba(20,48,77,.28);background:#fff;font-size:11px;font-weight:650;color:#14304d;white-space:nowrap;transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out),color .3s var(--ease-out),opacity .3s var(--ease-out),transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.tnv-pill.is-sel{background:#14304d;border-color:#14304d;color:#faf6ee}
.tnv-pill.is-dim{opacity:.35}
.tnv-pill--cta{border-color:var(--coral);color:var(--coral)}
.tnv-pill--cta.is-glow{background:var(--coral);color:#fff;box-shadow:0 0 0 6px rgba(232,92,74,.2);transform:scale(1.05)}

/* Askel 4: varaus suoraan keskustelussa — päivät, ajat, onnistumiskortti + konfetti */
.tnv-book{display:flex;flex-direction:column;gap:10px;max-width:88%;position:relative}
.tnv-book__days{display:flex;gap:6px;opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.tnv-book__days.is-in{opacity:1;transform:none}
.tnv-book__day{display:flex;flex-direction:column;align-items:center;gap:2px;width:38px;padding:6px 0;border-radius:12px;border:1.5px solid rgba(20,48,77,.2);background:#fff;font-size:10px;color:#14304d;transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out),color .3s var(--ease-out),transform .3s var(--ease-out)}
.tnv-book__day em{font-style:normal;text-transform:uppercase;letter-spacing:.04em;opacity:.6}
.tnv-book__day b{font-size:14px;font-weight:700}
.tnv-book__day.is-sel{background:#14304d;border-color:#14304d;color:#faf6ee;transform:scale(1.06)}
.tnv-book__times{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.tnv-book__times.is-in{opacity:1;transform:none}
.tnv-book__time{padding:7px 0;text-align:center;border-radius:10px;border:1.5px solid rgba(20,48,77,.2);background:#fff;font-size:11.5px;font-weight:650;color:#14304d;font-variant-numeric:tabular-nums;transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out),color .3s var(--ease-out)}
.tnv-book__time.is-sel{background:var(--coral);border-color:var(--coral);color:#fff}
.tnv-book__success{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:16px 12px;border-radius:14px;background:#fff;border:1px solid rgba(20,48,77,.14);box-shadow:0 6px 18px rgba(20,48,77,.1);opacity:0;transform:translateY(8px) scale(.97);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);overflow:hidden}
.tnv-book__success.is-in{opacity:1;transform:none}
.tnv-book__success strong{font-size:14px;color:#14304d}
.tnv-book__meta{font-size:11.5px;color:rgba(20,48,77,.6);font-variant-numeric:tabular-nums}
.tnv-book__check{width:40px;height:40px;margin-bottom:2px}
.tnv-book__check-circle{stroke:#1e9e6a;stroke-width:3;stroke-dasharray:145;stroke-dashoffset:145;transition:stroke-dashoffset .6s var(--ease-out)}
.tnv-book__check-tick{stroke:#1e9e6a;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;transition:stroke-dashoffset .4s var(--ease-out) .5s}
.tnv-book__success.is-in .tnv-book__check-circle{stroke-dashoffset:0}
.tnv-book__success.is-in .tnv-book__check-tick{stroke-dashoffset:0}
.tnv-book__confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tnv-conf{position:absolute;top:-10px;width:6px;height:10px;border-radius:1px;animation:tnvConfFall 1.7s ease-in forwards}
@keyframes tnvConfFall{from{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(130px) rotate(var(--r,180deg));opacity:0}}

/* Askel 5: myynnin sähköposti — liidi-ilmoituksen replika */
.tnv-mail{display:flex;flex-direction:column;align-items:center;gap:12px}
.tnv-mail__toast{align-self:flex-start;background:#fff;border:1px solid rgba(20,48,77,.16);border-radius:999px;padding:7px 14px;font-size:11px;font-weight:700;color:#14304d;box-shadow:0 4px 10px rgba(20,48,77,.1);opacity:0;transform:translateY(-6px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.tnv-mail__toast.is-in{opacity:1;transform:none}
.tnv-mail__card{width:100%;max-width:340px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(20,48,77,.14);opacity:0;transform:translateY(10px) scale(.97);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.tnv-mail__card.is-in{opacity:1;transform:none}
.tnv-mail__head{display:flex;align-items:center;gap:10px;padding:13px 15px;background:linear-gradient(135deg,#14304d,#1e4a78,#2f6fae);color:#fff}
.tnv-mail__icon{width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;background:rgba(255,255,255,.18);border-radius:10px;font-size:15px}
.tnv-mail__head strong{display:block;font-size:13.5px}
.tnv-mail__head span{display:block;font-size:10px;opacity:.8;margin-top:1px}
.tnv-mail__body{padding:12px 15px;display:flex;flex-direction:column;gap:9px}
.tnv-mail__box{border-radius:8px;padding:8px 10px;font-size:10.5px;line-height:1.5;opacity:0;transform:translateY(5px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.tnv-mail__box.is-in{opacity:1;transform:none}
.tnv-mail__box--ok{background:#f0fdf4;border-left:3px solid #22c55e;color:#166534}
.tnv-mail__box--ai{background:#fefce8;border-left:3px solid #eab308;color:#713f12}
.tnv-mail__box--ai em{display:block;margin-top:3px;font-style:italic}
.tnv-mail__section{opacity:0;transform:translateY(5px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.tnv-mail__section.is-in{opacity:1;transform:none}
.tnv-mail__section-title{font-family:var(--font-label);font-weight:400;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:rgba(20,48,77,.5);margin-bottom:5px}
.tnv-mail__row{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#14304d;padding:3px 0;border-bottom:1px solid rgba(20,48,77,.08)}
.tnv-mail__row span:first-child{color:rgba(20,48,77,.5)}
.tnv-mail__tags{display:flex;flex-wrap:wrap;gap:5px;opacity:0;transform:translateY(5px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.tnv-mail__tags.is-in{opacity:1;transform:none}
.tnv-mail__tag{background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:3px 9px;font-size:10px;font-weight:650}
.tnv-mail__stats{font-size:10px;color:rgba(20,48,77,.5);opacity:0;transition:opacity .4s var(--ease-out)}
.tnv-mail__stats.is-in{opacity:1}
.tnv-mail__foot{padding:8px 15px;background:#f8f8f6;font-size:9px;color:rgba(20,48,77,.45);text-align:center}

/* Finaali: koko footer on jo sininen, joten meri ei enää nouse/piiloudu
   erikseen — se on aina paikallaan (ks. hero-sea.js: risen-mekaniikka
   poistettu kokonaan). Ankkuroitu SUORAAN footerin omaan laatikkoon
   (bottom:100%, footer.php:n ensimmäinen lapsi, .site-footer{position:
   relative}) — EI JS:llä laskettua px-asemointia. Näin se pysyy aina
   juuri footerin yläreunassa riippumatta sivun muun sisällön pituudesta
   tai myöhemmin muuttuvasta korkeudesta (esim. fonttien vaihtuminen). */
.sea-finale-clip{position:absolute;left:0;right:0;bottom:100%;height:560px;overflow:hidden;z-index:-1;pointer-events:none}
/* Meren aaltokaista alkaa ~215px footerin yläreunan YLÄPUOLELTA (vaalein
   aaltopolku; sen yläpuolella vain pehmeä koralliliuku). Sivut jotka
   päättyvät finalcta-osioon kantavat oman tilansa (pad ~260-340px), mutta
   tavalliseen sisältöosioon päättyvillä sivuilla (hinnoittelu, tietoturva,
   käyttökohteet, integraatiot, ominaisuudet) viimeinen sisältö upposi
   aaltojen SISÄÄN (+83..+98px mitattuna). Alapehmuste nostaa viimeisen
   sisällön KOKONAAN korallikajastuksen yläpuolelle: gradientti alkaa
   ~380px footerin yläreunasta (32%-stop 560px-clipissä), joten ~420px
   padding jättää viimeisen sisällön puhtaalle kermapohjalle ilman
   minkäänlaista korallisävyä takana (40px ja 120px harjan yläpuolella
   kokeiltiin — kajastus tuntui yhä liian läheiseltä).
   Finalcta-sivujen välistys ei muutu. */
.site-main > .section:last-child:not(.finalcta){padding-bottom:420px}
/* om-feature on 2-palstainen grid, jonka pohja (korkeampi mediapalsta)
   ulottuu jo valmiiksi lähemmäs osion reunaa → pienempi arvo tuottaa
   saman etäisyyden calloutille. Sama specificity kuin yllä →
   järjestys ratkaisee (tämä myöhempänä voittaa). */
.site-main > .section.om-feature:last-child{padding-bottom:340px}
/* Korallin sarastus sinisten aaltojen YLÄPUOLELLA: taustaliuku istuu
   SAMASSA .sea-finale-elementissä kuin aallot itse. Tummenee TASAISESTI
   kohti aaltojen harjaa (~63% korkeudesta) eikä käänny takaisin
   vaaleammaksi ennen sitä; huippuvoimakkuus vaimennettu (.92 -> .5). */
.sea-finale{position:absolute;inset:0;background:linear-gradient(180deg,
    rgba(232,92,74,0) 0%,
    rgba(232,92,74,0) 32%,
    rgba(228,90,74,.18) 46%,
    rgba(220,82,70,.32) 56%,
    rgba(196,72,62,.5) 63%)}

/* Akti I: geneerinen yhteydenottolomake (tylsä verkkosivulomake, EI Aye Matey) */
[data-demo]:not(.is-armed) .dwgen{display:none}
.dwgen{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;border:1px solid #d3d5d9;border-radius:8px;box-shadow:0 8px 26px rgba(15,23,42,.10);color:#374151;font-family:Arial,Helvetica,sans-serif;overflow:hidden}
.dwgen__bar{padding:13px 18px;background:#f3f4f6;border-bottom:1px solid #e0e2e6;font-size:14px;font-weight:700;color:#111827}
.dwgen__body{display:flex;flex-direction:column;gap:12px;padding:18px}
.dwgen__field{display:flex;flex-direction:column;gap:4px}
.dwgen__flabel{font-size:11.5px;font-weight:600;color:#6b7280}
.dwgen__input{min-height:34px;display:flex;align-items:center;padding:7px 10px;background:#fff;border:1px solid #cfd2d8;border-radius:4px;font-size:13.5px;color:#111827}
.dwgen__input--area{min-height:84px;align-items:flex-start;line-height:1.5}
.dwgen__input .caret{display:inline-block;width:1px;height:14px;background:#111827;margin-left:1px;animation:genCaret 1s steps(1) infinite}
@keyframes genCaret{50%{opacity:0}}
.dwgen__submit{align-self:flex-start;margin-top:2px;padding:9px 22px;background:#4b5563;color:#fff;border-radius:4px;font-size:13px;font-weight:600}
.dwgen__thanks{margin-top:2px;padding:10px 12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:4px;font-size:12.5px;color:#166534;opacity:0;visibility:hidden}

/* Koominen kala (joka ~10. pärske) — Matin fish.svg; halo lähdeyksiköissä (skaala 0.028) */
.sea-fish .fish-body{fill:#14304d;stroke:#faf6ee;stroke-width:90;paint-order:stroke}
.sea-fish .fish-eye{fill:#faf6ee}
.sea-fish .fish-pupil{fill:#14304d}

/* ============================ OMINAISUUDET-SIVU ============================ */
/* Intro-hero */
.om-intro{padding-top:clamp(20px,4vh,56px);padding-bottom:clamp(16px,3vh,40px)}
.om-intro__inner{max-width:780px;margin:0 auto;text-align:center}
.om-intro .eyebrow{justify-content:center;font-size:16px;letter-spacing:.18em}
.om-intro .eyebrow__rule{display:none}
.om-intro .eyebrow__label{color:var(--ink)}
@media (max-width:640px){.om-intro .eyebrow{font-size:13.5px}}
.om-intro__title{font-family:var(--font-display);font-variation-settings:"opsz" 120;font-weight:700;font-size:clamp(34px,5vw,60px);line-height:1.03;letter-spacing:-.02em;color:var(--ink);margin:.32em 0 .34em;text-wrap:balance}
.om-intro__lead{font-size:clamp(15px,1.6vw,17.5px);line-height:1.65;font-weight:600;color:var(--ink);max-width:62ch;margin:0 auto}
.om-intro__lead--sub{margin-top:.7em}

/* Kiinteä pikanavi (sticky yläpalkki, vaakascroll, chipit ryhmiteltynä) */
.om-nav{position:sticky;top:60px;z-index:50;background:rgba(250,246,238,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair)}
.om-nav[hidden]{display:none}
.om-nav__inner{display:flex;align-items:baseline;flex-wrap:wrap;justify-content:center;gap:6px 40px;padding-top:13px;padding-bottom:13px}
/* Ankkurilinkit samalla tyylillä kuin päänavi (.nav a): isot Work Sans -kapiteelit
   + animoitu koralli-alleviivaus. */
.om-nav__chip{position:relative;white-space:nowrap;font-size:14px;font-weight:650;text-transform:uppercase;letter-spacing:.085em;color:var(--ink);text-decoration:none;padding:4px 0;transition:color .2s var(--ease-out)}
.om-nav__chip::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease-out)}
.om-nav__chip:hover{color:var(--coral)}
.om-nav__chip:hover::after,.om-nav__chip.is-active::after{transform:scaleX(1)}

/* Ryhmäotsikot */
.om-group{max-width:var(--maxw);margin:clamp(44px,7vh,92px) auto clamp(4px,2vh,18px);padding:0 var(--pad-x);scroll-margin-top:130px}
.om-group__title{font-family:var(--font-display);font-variation-settings:"opsz" 80;font-weight:700;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.015em;color:var(--ink);text-align:center;margin:0}

/* Ominaisuusosiot */
.om-feature{padding-top:clamp(28px,4.5vh,56px);padding-bottom:clamp(28px,4.5vh,56px);scroll-margin-top:130px}
.om-feature__inner{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
/* Media aina LEVEÄ palsta (1.28fr), teksti kapea (0.72fr) — puoli vuorottelee. */
.om-feature--media .om-feature__inner{grid-template-columns:minmax(300px,0.72fr) minmax(0,1.28fr)}
.om-feature--media.om-media-left .om-feature__inner{grid-template-columns:minmax(0,1.28fr) minmax(300px,0.72fr)}
.om-feature--media.om-media-left .om-feature__media{order:-1}
.om-feature--plain .om-feature__inner{grid-template-columns:1fr;max-width:820px}
.om-feature__tag{font-family:var(--font-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-bottom:12px}
.om-feature__title{font-family:var(--font-display);font-variation-settings:"opsz" 72;font-weight:700;font-size:clamp(25px,3vw,37px);line-height:1.1;letter-spacing:-.015em;color:var(--ink);margin:0 0 .34em;text-wrap:balance}
.om-feature__lede{font-size:clamp(17px,1.4vw,20px);font-weight:600;line-height:1.42;color:var(--ink);margin:0 0 .8em}
.om-feature__body{font-size:16px;line-height:1.65;color:var(--text-2)}
.om-feature__body p{margin:0 0 .8em}
.om-feature__body p:last-child{margin-bottom:0}
.om-feature__list{list-style:none;margin:1.15em 0 0;padding:0;display:flex;flex-direction:column;gap:.5em}
.om-feature__list li{position:relative;padding-left:26px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.om-feature__list li::before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:2px;background:var(--coral);transform:rotate(45deg)}
/* Täysin peittävä (ei rgba-läpikuultavuutta): viimeisen ominaisuuden laatikko
   osuu geometrisesti footerin meri-liu'un päälle (bottom:100%-ankkuroitu,
   560px korkea), ja läpikuultava tausta päästi meren korallin/aallon
   näkymään laatikon läpi. Litistetty sama sävy kiinteäksi väriksi
   (--bg-taustaa vasten), jotta tausta on identtinen kaikkialla eikä riipu
   siitä mikä sattuu olemaan laatikon TAKANA. */
.om-feature__why{margin-top:1.3em;padding:14px 18px;border-left:3px solid var(--ink);background:#ece9e2;border-radius:0 10px 10px 0;font-size:15px;line-height:1.55;color:var(--ink)}
.om-feature__why-label{display:block;font-family:var(--font-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:3px}

/* Upotettu näkymä (tuotenäkymä-replika) */
.om-feature__media{min-width:0}
.om-feature__media .dashpanel--tn{height:auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:16px}
/* Liidit-taulu levennetyssä palstassa: tiivistä sarakeleveyksiä niin että kaikki
   (myös "Luotu") mahtuu ilman ylivuotoa. */
.om-feature__media .tnv-table__head,
.om-feature__media .tnv-table__row{grid-template-columns:130px 1fr 96px 74px;gap:10px}

/* Tilaa sisällön ja footerin väliin (Ominaisuudet + UKK). */
.site-main:has(.om-feature),.site-main:has(.om-faq){padding-bottom:clamp(56px,9vh,112px)}

/* UKK-kategoria: kapea luettava accordion-palsta (reuse .faq). */
.om-faq{padding-top:clamp(6px,1.2vh,16px);padding-bottom:clamp(20px,3vh,40px);scroll-margin-top:130px}
.om-faq__inner{max-width:860px;margin:0 auto}
.om-faq .faq{margin-top:0}

/* Loppu-CTA: kaksi painiketta rinnakkain. */
.finalcta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:6px}

@media (max-width:900px){
  .om-nav{top:58px}
  .om-feature--media .om-feature__inner,
  .om-feature--media.om-media-left .om-feature__inner{grid-template-columns:1fr}
  .om-feature--media.om-media-left .om-feature__media{order:0}
}

/* ==================== MITEN SE TOIMII · dw-chat-näkymät ==================== */
/* Etappien näkymät käyttävät etusivun 21.34-kohtauksen widget-ikkunan (.dw)
   anatomiaa sellaisenaan — korkea kapea chatti ILMAN navy-kehyspaneelia.
   Ikkuna on aina VASEMMALLA ja tekstipalsta leveämpänä oikealla (ei
   vuorottelua). Mobiili-pinoutuminen tulee yleisestä .om-feature--median
   max-width:900px-säännöstä (sama specificity → tämä desktop-sääntö on
   media queryssa, ettei se voita mobiilisääntöä järjestyksellä). */
@media (min-width:901px){
  /* Kapea keskitetty pari: chat-ikkuna 400px + tekstipalsta max 600px
     (leveä palsta luki huonosti täydellä container-leveydellä). */
  .om-feature--mst.om-media-left .om-feature__inner{grid-template-columns:minmax(300px,400px) minmax(0,600px);justify-content:center;align-items:center}
}
.om-feature--mst .om-feature__media{display:flex;justify-content:center}
.dw--mst{width:100%;max-width:400px;height:660px}
.dw__avatar-img{display:block;width:44px;height:44px}
/* Keksityn Yritys.fi-esimerkkiyrityksen logomerkki chat-headerissa */
.dw__avatar-y{display:flex;align-items:center;justify-content:center}
.dw__avatar-y svg{display:block;width:26px;height:auto}
.dw__expert-photo--initials{display:flex;align-items:center;justify-content:center;background:#c8d4e0}
.dw__expert-initials{font-size:13px;font-weight:800;color:var(--ink);font-family:var(--font);letter-spacing:.02em}
/* Viestit ilmestyvät askel kerrallaan: piilossa 0-korkuisina (container-gap
   pois + marginaali vasta is-in-tilassa), etteivät tulevat viestit varaa
   tilaa flex-end-pinossa ja jätä tyhjää ikkunan alalaitaan. */
.dw__messages--mst{gap:0}
/* flex-shrink:0 on PAKOLLINEN: viestit ovat flex-itemeitä, ja kun sisällön
   yhteiskorkeus ylittää ikkunan, oletus-shrink:1 + overflow:hidden puristaa
   JOKAISEN kuplan/kortin kasaan → tekstit ja kortit leikkautuvat alhaalta.
   shrink:0 pitää viestit täyskorkuisina, jolloin vanhin viesti liukuu
   luonnollisesti yläreunasta ulos (flex-end) kuten oikeassa chatissa. */
.dw__messages--mst .mstep{flex-shrink:0;opacity:0;transform:translateY(10px);max-height:0;overflow:hidden;margin-top:0;transition:max-height .5s var(--ease-out),opacity .45s var(--ease-out),transform .45s var(--ease-out),margin-top .5s var(--ease-out)}
.dw__messages--mst .mstep.is-in{opacity:1;transform:none;max-height:520px;margin-top:12px}
.dwbk--mst .dwbk__body{height:270px}

/* Etappi 5: sähköposti-inbox samassa ikkunakehyksessä (.dw + .dwmail).
   Saapuneet-lista → uusi liidi-ilmoitus kilahtaa ylimmäksi → avautuu
   liidi-ilmoitussähköpostiksi (listakerros ja avattu meili päällekkäin,
   is-open vaihtaa). */
.dwmail__bar .dw__name{text-transform:none;letter-spacing:0;font-size:15px}
.dwmail__bar .dw__role{text-transform:none;letter-spacing:.02em;font-size:10px}
.dwmail__appicon{width:38px;height:38px;flex-shrink:0;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center}
.dwmail__count{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--coral);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;font-family:var(--font-body);font-variant-numeric:tabular-nums}
.dwmail__body{position:relative;flex:1;min-height:0;background:#fbf9f4;overflow:hidden}
.dwmail__list{position:absolute;inset:0;display:flex;flex-direction:column;transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.dwmail.is-open .dwmail__list{opacity:0;transform:translateY(-14px);pointer-events:none}
.dwmail__row{display:flex;align-items:flex-start;gap:8px;padding:13px 14px;border-bottom:1px solid var(--hair-soft);background:#fff;font-family:'Inter',system-ui,sans-serif}
.dwmail__row:not(.dwmail__row--new){background:transparent;opacity:.72}
.dwmail__rowmain{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.dwmail__from{font-size:12.5px;font-weight:700;color:var(--ink)}
.dwmail__subject{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dwmail__preview{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dwmail__time{font-size:11px;color:var(--muted);flex-shrink:0;font-variant-numeric:tabular-nums}
.dwmail__unread{width:8px;height:8px;border-radius:50%;background:var(--coral);flex-shrink:0;margin-top:5px}
.dwmail__row--new{box-shadow:inset 3px 0 0 var(--coral)}
.dwmail__row--new .dwmail__subject{font-weight:800}
.dwmail__row--new.is-hilite{background:var(--field)}
/* Uusi rivi liukuu listaan (mstep listassa: korkeus-collapse + fade) */
.dwmail__list .mstep{opacity:0;transform:translateY(-8px);max-height:0;overflow:hidden;padding-top:0;padding-bottom:0;transition:max-height .45s var(--ease-out),opacity .45s var(--ease-out),transform .45s var(--ease-out),padding .45s var(--ease-out),background-color .3s var(--ease-out)}
.dwmail__list .mstep.is-in{opacity:1;transform:none;max-height:96px;padding:13px 14px}
/* Avattu liidi-ilmoitusmeili (sama pohja kuin oikea ilmoitussähköposti) */
.dwmail__open{position:absolute;inset:0;overflow:auto;padding:12px;opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);pointer-events:none;font-family:'Inter',system-ui,sans-serif}
.dwmail.is-open .dwmail__open{opacity:1;transform:none}
.dwmail__mailhead{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:12px 12px 0 0;background:linear-gradient(135deg,#14304d,#1e4a78,#2f6fae);color:#fff}
.dwmail__mailicon{width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;background:rgba(255,255,255,.18);border-radius:10px;font-size:15px}
.dwmail__mailhead strong{display:block;font-size:13px}
.dwmail__mailhead em{display:block;font-style:normal;font-size:10px;opacity:.8;margin-top:1px}
.dwmail__mailbody{background:#fff;border:1px solid var(--hair-soft);border-top:0;border-radius:0 0 12px 12px;padding:12px;display:flex;flex-direction:column;gap:9px}
.dwmail__mailbody .mstep{opacity:0;transform:translateY(-8px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.dwmail__mailbody .mstep.is-in{opacity:1;transform:none}
.dwmail__box{border-radius:10px;padding:9px 11px;font-size:11.5px;line-height:1.5}
.dwmail__box--ok{background:#ecfdf3;border:1px solid #bbf7d0;color:#166534}
.dwmail__box--ai{background:#fefce8;border:1px solid #fde68a;color:#713f12}
.dwmail__box--ai em{font-style:italic;display:block;margin-top:3px}
.dwmail__section{border:1px solid var(--hair-soft);border-radius:10px;padding:9px 11px}
.dwmail__sectitle{font-size:11px;font-weight:800;color:var(--ink);margin-bottom:6px}
.dwmail__krow{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:3px 0;border-bottom:1px dashed var(--hair-soft)}
.dwmail__krow:last-child{border-bottom:0}
.dwmail__krow span:first-child{color:var(--muted)}
.dwmail__krow span:last-child{font-weight:600;color:var(--ink)}
.dwmail__tags{display:flex;flex-wrap:wrap;gap:6px}
.dwmail__tag{background:var(--field);border:1px solid var(--hair);border-radius:999px;padding:4px 10px;font-size:10.5px;font-weight:700;color:var(--ink)}
.dwmail__stats{font-size:11px;color:var(--muted)}

/* Entä jos… — ikonikortit (etusivun käyttöönotto-ikonien tyyli, EI numeroita,
   EI aikajanan katkoviivaa — siksi oma grid-luokka .timeline-luokan sijaan;
   kortit käyttävät .tstep-luokkia, jotta site.js:n ikonianimaatiot toimivat). */
.ikonit__head{max-width:820px;margin:0 auto clamp(32px,4vw,48px);text-align:center}
.ikonit__lead{font-size:clamp(15px,1.6vw,17px);line-height:1.65;color:var(--text-2);max-width:56ch;margin:12px auto 0}
.ikonit__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:32px}

/* ==================== OMINAISUUDET · uudet lisänäkymät ==================== */
/* Yleinen askelpaljastus dashpanel-näkymissä (vrt. .mstep chat-ikkunoissa,
   mutta ilman korkeus-collapsea — sisältö on pinottu ylhäältä alas ja tila
   on varattu valmiiksi). */
.tnv-step{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.tnv-step.is-in{opacity:1;transform:none}
/* Kävijän kupla + kielenvaihtochip (kielet-näkymä) */
.tnv-userbubble{align-self:flex-end;background:#14304d;color:#faf6ee;border-radius:14px;border-bottom-right-radius:4px;padding:9px 13px;font-size:12px;line-height:1.5;max-width:94%;margin:0}
.tnv-langchip{align-self:flex-start;display:inline-block;background:#fff;border:1px solid rgba(20,48,77,.2);border-radius:999px;padding:5px 12px;font-size:10.5px;font-weight:700;color:#14304d}

/* Ohjaus ihmiselle — Slack-siirto */
.slk{background:#fff;border-radius:12px;overflow:hidden;font-family:'Inter',system-ui,sans-serif;color:#1d1c1d}
.slk__head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid #e8e8e8;font-size:13px;font-weight:800}
.slk__members{font-size:11px;font-weight:500;color:#616061}
.slk__body{padding:12px 14px;display:flex;flex-direction:column;gap:12px}
.slk__msg{display:flex;gap:10px}
.slk__ava{width:36px;height:36px;flex-shrink:0;border-radius:8px;overflow:hidden;display:grid;place-items:center}
.slk__ava--app{background:#faf6ee;border:1px solid #e8e8e8}
.slk__ava--app img{width:32px;height:32px;display:block}
.slk__ava--mv{background:#14304d;color:#fff;font-size:12px;font-weight:800}
.slk__content{min-width:0;flex:1}
.slk__meta{font-size:12px;color:#616061;display:flex;align-items:center;gap:6px}
.slk__meta strong{color:#1d1c1d;font-size:13px}
.slk__appbadge{font-style:normal;font-size:9px;font-weight:700;background:#e8e8e8;border-radius:3px;padding:1px 4px;color:#616061;letter-spacing:.02em}
.slk__meta time{font-size:10.5px}
.slk__text{margin:3px 0 0;font-size:12.5px;line-height:1.5}
.slk__card{margin-top:8px;border-left:3px solid var(--coral);background:#f8f8f8;border-radius:0 8px 8px 0;padding:9px 11px}
.slk__card strong{font-size:11.5px}
.slk__card p{margin:4px 0 8px;font-size:12px;line-height:1.5;color:#3f3f3f}
.slk__btn{display:inline-block;background:#007a5a;color:#fff;border-radius:6px;padding:6px 12px;font-size:11.5px;font-weight:700;transition:box-shadow .3s var(--ease-out),transform .3s var(--ease-out)}
.slk__btn.is-flash{box-shadow:0 0 0 5px rgba(0,122,90,.25);transform:scale(1.04)}
.slk__handoff{align-self:center;background:#ecfdf3;border:1px solid #bbf7d0;color:#166534;border-radius:999px;padding:5px 14px;font-size:11px;font-weight:700}

/* WhatsApp-puhelinruutu (kanavat) */
.wap{max-width:320px;margin:0 auto;border-radius:16px;overflow:hidden;font-family:'Inter',system-ui,sans-serif;box-shadow:0 10px 26px rgba(15,39,64,.25)}
.wap__head{display:flex;align-items:center;gap:10px;background:#075e54;color:#fff;padding:10px 12px}
.wap__ava{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1;font-family:var(--font);font-weight:800;font-size:16px;color:#14304d}
.wap__ava i{font-style:normal;color:var(--coral)}
.wap__id{flex:1;min-width:0}
.wap__id strong{display:block;font-size:13px}
.wap__id em{display:block;font-style:normal;font-size:10px;opacity:.8}
.wap__icons{font-size:12px;opacity:.9;letter-spacing:4px}
.wap__body{background:#efe7db;padding:14px 10px;display:flex;flex-direction:column;gap:8px;min-height:150px}
.wap__in,.wap__out{max-width:85%;border-radius:10px;padding:7px 9px 5px;font-size:12px;line-height:1.45;color:#1d1c1d;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.wap__in{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.wap__out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:2px}
.wap__in time,.wap__out time{display:block;text-align:right;font-size:9px;color:#8a8a8a;margin-top:2px}
.wap__out time b{color:#53bdeb;font-weight:700}
.wap__foot{display:flex;align-items:center;gap:8px;background:#f0f0f0;padding:8px 10px}
.wap__input{flex:1;background:#fff;border-radius:999px;padding:8px 14px;font-size:12px;color:#8a8a8a}
.wap__mic{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:#00a884;display:grid;place-items:center;font-size:13px}

/* Analytiikka-KPI:t Ominaisuudet-palstassa: aina 4 samalla rivillä */
.om-feature__media .kpis{grid-template-columns:repeat(4,1fr);gap:10px}
.om-feature__media .kpi{padding:12px 10px}
.om-feature__media .kpi__label{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.om-feature__media .kpi__num{font-size:22px}

/* Markkinointi- ja kasvutyökalut — korkeampi, ilmavampi taitto */
.om-feature__media[data-view="kasvu"] .tnv-page__body{min-height:400px;gap:18px;justify-content:center}
.om-feature__media[data-view="kasvu"] .grw__ab,
.om-feature__media[data-view="kasvu"] .grw__row{max-width:390px}
.grw__bar{background:var(--coral);color:#fff;margin:-18px -22px 8px;padding:10px 14px;font-size:11.5px;font-weight:700;text-align:center}
.grw__ab{background:#fff;border:1px solid rgba(20,48,77,.14);border-radius:12px;padding:12px 14px;max-width:340px;box-shadow:0 4px 12px rgba(20,48,77,.08)}
.grw__ab-title{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:rgba(20,48,77,.55);margin-bottom:6px}
.grw__ab-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#14304d;padding:7px 9px;border-radius:8px}
.grw__ab-row b{font-variant-numeric:tabular-nums}
.grw__ab-row--win{background:rgba(30,158,106,.12);font-weight:700;color:#166534}
.grw__row{display:flex;gap:10px;align-items:stretch;max-width:340px}
.grw__mini{flex:1;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid rgba(20,48,77,.14);border-radius:12px;padding:8px 10px;font-size:10.5px;font-weight:700;line-height:1.4;color:#14304d;box-shadow:0 4px 12px rgba(20,48,77,.08)}
.grw__mini svg{flex-shrink:0}
.grw__mini em{font-style:normal;color:#166534}

/* ===== Tuotenäkymien mobiilikorjaukset (jaettu: karuselli + Ominaisuudet) =====
   Kohdistus .dashpanel--tn-juureen → koskee molempia pintoja; sijainti tiedoston
   lopussa → voittaa .om-feature__media-perussäännöt lähdejärjestyksellä. */
@media (max-width:640px){
  /* Analytiikka: KPI:t 2×2 (ei 4×1-ylivuotoa Ominaisuuksissa eikä 1×4-pötköä karusellissa) */
  .dashpanel--tn .kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  /* Liidit: piilota Tila (3.) + Luotu (4.) → Nimi | AI-yhteenveto (2 saraketta).
     Kapea Luotu-sarake leikkasi "2 min sitten" -aikaleimoja → pois kokonaan. */
  .dashpanel--tn .tnv-table__head,.dashpanel--tn .tnv-table__row{grid-template-columns:100px 1fr;gap:10px}
  .dashpanel--tn .tnv-table__head>span:nth-child(3),.dashpanel--tn .tnv-table__row>span:nth-child(3),
  .dashpanel--tn .tnv-table__head>span:nth-child(4),.dashpanel--tn .tnv-table__row>span:nth-child(4){display:none}
  .dashpanel--tn .tnv-table__sum{display:block;font-size:11.5px;line-height:1.4}
  /* Ajanvaraus: kalenteri- ja vapaat-ajat-rivit saavat rivittyä (ei badge-ylivuotoa animaation aikana) */
  .dashpanel--tn .tnv-doc{flex-wrap:wrap}
  .dashpanel--tn .tnv-slotrow{flex-wrap:wrap;row-gap:6px}
  /* Palaute: kysymysrivit saavat rivittyä (kysymys + "Lisää tietopankkiin" -chip) */
  .dashpanel--tn .tnv-setting{flex-wrap:wrap;align-items:flex-start;gap:6px}
  /* Kasvu: mini-kortit allekkain, A/B- ja mini-rivit koko leveydelle */
  .dashpanel--tn .grw__row{flex-direction:column;max-width:none}
  .dashpanel--tn .grw__ab{max-width:none}
}

/* Ajanvaraus: kalenteririvit pinoutuvat siististi — nimi/sähköposti + status
   yläriville (space-between), "Yhdistä Google Calendar" -nappi omalle rivilleen
   VASEMMALLE (ei keskitetty/leijuva; sama alussa ja lopussa). */
@media (max-width:900px){
  [data-view="ajanvaraus"] .tnv-doc{flex-wrap:wrap;justify-content:space-between;column-gap:10px;row-gap:8px}
  [data-view="ajanvaraus"] .tnv-doc__url{flex:1 1 auto;min-width:0;order:1}
  [data-view="ajanvaraus"] .tnv-doc>.tnv-badge{order:2;flex:0 0 auto}
  [data-view="ajanvaraus"] .tnv-doc__meta{order:3;flex:1 1 100%}
}
/* Keskustelu sivullasi: kapeat (58 %) puhekuplat rivittyivät mobiilissa niin
   pitkiksi että vastaus leikkautui conv-max-heightiin → koko leveys + korkeampi
   max-height kapealla ruudulla. */
@media (max-width:640px){
  [data-view="inline"] .tnv-inline{max-width:100%}
  [data-view="inline"] .tnv-inline__msg{max-width:100%}
  [data-view="inline"] .tnv-inline__conv.is-in{max-height:360px}
}

/* Proaktiivinen aloitus */
.tnv-page--pro .tnv-page__body{position:relative;min-height:210px}
.pro__cursor{position:absolute;left:46%;top:60%;z-index:2;transform:scaleX(-1);transition:left 2.4s var(--ease-out),top 2.4s var(--ease-out)}
.pro__cursor.is-up{left:calc(100% - 56px);top:-26px}   /* selainkromin sulje-X:n VASEMMALLE puolelle, karki osoittaa X:aa */
.tnv-page__chrome .tnv-page__x{margin-left:auto;width:auto;height:auto;background:none;border-radius:0;font-size:13px;font-weight:700;color:rgba(20,48,77,.55);line-height:1}
.pro__launcher{position:absolute;right:16px;bottom:14px;width:44px;height:44px;border-radius:50%;background:var(--coral);display:grid;place-items:center;box-shadow:0 6px 16px rgba(232,92,74,.4)}
.pro__launcher.is-pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(232,92,74,.5);animation:proPulse 1.4s ease-out infinite}
@keyframes proPulse{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.25);opacity:0}}
.pro__nudge{position:absolute;right:70px;bottom:18px;max-width:230px;background:#fff;border:1px solid rgba(20,48,77,.16);border-radius:14px;border-bottom-right-radius:4px;padding:9px 12px;font-size:11.5px;line-height:1.5;color:#14304d;box-shadow:0 6px 18px rgba(20,48,77,.14)}

/* Tietoturva: tietosuojan itsepalvelu (sailytysaika -> PDF-vienti -> poisto) */
.priv{background:#fff;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;font-family:'Inter',system-ui,sans-serif}
.priv__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.priv__title{font-size:13px;font-weight:800;color:#14304d}
.priv__badge{background:var(--field);border:1px solid var(--hair);border-radius:999px;padding:4px 10px;font-size:10px;font-weight:700;color:#14304d;white-space:nowrap}
.priv__row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(20,48,77,.12);border-radius:10px;padding:9px 11px}
.priv__label{font-size:12px;color:#14304d}
.priv__select{display:inline-flex;align-items:center;gap:8px;border:1.5px solid rgba(20,48,77,.3);border-radius:8px;padding:5px 10px;font-size:12px;font-weight:700;color:#14304d;font-variant-numeric:tabular-nums;transition:box-shadow .3s var(--ease-out),border-color .3s var(--ease-out)}
.priv__select.is-flash{box-shadow:0 0 0 4px rgba(232,92,74,.2);border-color:var(--coral)}
.priv__select.is-set{border-color:#1e9e6a}
.priv__tick{color:#1e9e6a;font-weight:800;opacity:0;transition:opacity .3s var(--ease-out)}
.priv__select.is-set .priv__tick{opacity:1}
.priv__btn{display:inline-block;background:#14304d;color:#fff;border-radius:8px;padding:7px 12px;font-size:11.5px;font-weight:700;white-space:nowrap;transition:box-shadow .3s var(--ease-out),transform .3s var(--ease-out)}
.priv__btn.is-flash{box-shadow:0 0 0 4px rgba(20,48,77,.22);transform:scale(1.04)}
.priv__btn--danger{background:var(--coral)}
.priv__btn--danger.is-flash{box-shadow:0 0 0 4px rgba(232,92,74,.28)}
.priv__chip{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:#ecfdf3;border:1px solid #bbf7d0;color:#166534;border-radius:999px;padding:5px 12px;font-size:11px;font-weight:700}
.priv__done{text-align:center;background:#ecfdf3;border:1px solid #bbf7d0;color:#166534;border-radius:10px;padding:9px 12px;font-size:11.5px;font-weight:700}
.priv__done-sub{display:block;margin-top:3px;font-size:10.5px;font-weight:600;opacity:.9}

/* Video → keskustelu */
.vid{position:relative;aspect-ratio:16/9;background:#14202f;border-radius:12px;overflow:hidden}
.vid__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid__play{position:absolute;left:50%;top:50%;width:52px;height:52px;transform:translate(-50%,-50%);border-radius:50%;background:var(--coral);transition:opacity .4s var(--ease-out)}
.vid__play::after{content:"";position:absolute;left:55%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.vid.is-playing .vid__play{opacity:0}
.vid__progress{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.2)}
.vid__progress i{display:block;height:100%;width:0;background:var(--coral)}
.vid.is-playing .vid__progress i{width:100%;transition:width 5s linear}
.vid__end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(20,32,47,.86)}
.vid__end strong{color:#faf6ee;font-family:var(--font);font-size:17px}
.vid__cta{background:var(--coral);color:#fff;border-radius:999px;padding:9px 18px;font-size:12.5px;font-weight:700;transition:box-shadow .3s var(--ease-out),transform .3s var(--ease-out)}
.vid__cta.is-glow{box-shadow:0 0 0 7px rgba(232,92,74,.25);transform:scale(1.05)}

/* Kategoriakortit intron alla (ankkurilinkit ikoneilla) */
.omkat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:32px;max-width:1020px;margin:clamp(32px,4.5vw,52px) auto 0}
.omkat{position:relative}
.omkat::before{content:"";position:absolute;top:151px;left:4%;right:4%;height:0;border-top:2px dashed var(--hair);pointer-events:none}   /* numeropallojen keskikohta: ikoni 108 + mb 22 + gap 4 + pallo 34/2 */
.omkat__card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;text-decoration:none;transition:transform .3s var(--ease-out)}
.omkat__card:hover{transform:translateY(-3px)}
/* grid venyttaa kortit samankorkuisiksi + margin-top:auto → Siirry osioon
   -linkit asettuvat aina samalle riville tekstien pituudesta riippumatta */
.omkat__card .k-icon{height:108px;width:auto;margin:0 0 22px}
.omkat__card .k-icon--3{height:108px;margin-bottom:22px}
.omkat__title{font-family:var(--font);font-weight:700;font-size:15.5px;color:var(--ink)}
.omkat__txt{font-size:14.5px;line-height:1.6;color:var(--muted);max-width:34ch}
.omkat__go{margin-top:auto;padding-top:14px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--coral)}
/* Kun kortit menevät yhteen pystysarakkeeseen, vaakasuora katkoviiva ei enää
   yhdistä numeropalloja → piilotetaan (mobiili). Ruudukko romahtaa 1-sarakkeiseksi
   n. 592px:n alapuolella (kortti-min 260 + gap 32 + container-padding 40). */
@media (max-width:591px){.omkat::before{display:none}}

/* ============ TIETOTURVA & TIETOSUOJA · reittipoiju-kortit ============ */
/* Pitkä asiakirjateksti taitetaan intro + numeroidut kortit -muotoon
   (rikas_teksti.php jakaa sisällön h3-rajoilta). Korttien numeropoijut
   toistavat etusivun reittipoijujen kuvakieltä: koralliympyrä, jonka
   ympärillä taustanvärinen halo. Viimeinen pariton kortti levenee koko
   riville, ettei ruudukkoon jää tyhjää kolosta. */
.rikas--tt .rikas__inner{max-width:1100px}
/* intron perässä korttiosio nousee lähelle ingressiä (section-oletuspadding pois) */
.om-intro + .rikas--tt{padding-top:0}
.richtext--ttlead{max-width:72ch}
.richtext--ttlead > p:first-child{font-size:clamp(17px,1.9vw,21px);line-height:1.6;font-weight:600;color:var(--ink)}
.ttk{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:38px;margin-top:clamp(30px,4.5vw,48px)}
.ttk__card{position:relative;background:var(--paper);border:1.5px solid var(--ink);border-radius:16px;padding:36px 34px 30px;box-shadow:5px 5px 0 rgba(20,48,77,.12)}
.ttk__num{position:absolute;top:-17px;left:22px;width:34px;height:34px;border-radius:50%;background:var(--coral);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;font-family:var(--font-body);font-variant-numeric:tabular-nums;box-shadow:0 0 0 4px var(--bg)}
.ttk__card h3{margin:0 0 10px;font-size:19px;color:var(--ink);scroll-margin-top:150px} /* footerin ankkurilinkit (#konsultointi ym.) laskeutuvat kiinteän headerin alle */
.ttk__card p{font-size:15px;line-height:1.65;color:var(--text-2);margin:0 0 10px}
.ttk__card p:last-child{margin-bottom:0}
.ttk__card:last-child:nth-child(odd){grid-column:1/-1}

/* ============ BRÄNDIKÄSIKIRJA (piilotettu /brandikasikirja/ · /en/brand-book/) ============ */
/* Brandpad-tyylinen lukusivu (page-templates/page-brandbook.php): kermakansi,
   scroll-spy-lukunavi (bb-nav.js), numeroidut luvut, navy-lausuntokaistat,
   spesimenkortit (logo/värit/typografia) ja positiointinelikenttä. */
.bb-cover{min-height:calc(100svh - 171px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 0 clamp(72px,12vh,160px);text-align:center} /* 171 = .site-mainin header-offset 108 + lukunavin 63 → navi päättyy täsmälleen näkymän alareunaan; alapaddingilla keskitetty sisältö nousee ylemmäs (iso H1 painoi ennen alas) */
.bb-cover__logo{display:flex;justify-content:center;align-items:center;gap:9px;color:var(--ink);margin-bottom:clamp(32px,5.5vh,56px)}
.bb-cover__logo .logo-mark,.bb-cover__logo .logo-word{display:block;height:46px;width:auto}
.bb-cover__eyebrow{font-family:var(--font-label);font-weight:400;text-transform:uppercase;letter-spacing:.2em;font-size:14px;color:var(--coral)}
.bb-cover__title{font-family:var(--font-display);font-variation-settings:"opsz" 120;font-weight:600;font-size:clamp(56px,10vw,132px);line-height:1.02;letter-spacing:-.02em;color:var(--ink);margin:.12em 0 .32em;text-wrap:balance}
.bb-cover__title em{font-style:italic;color:var(--coral)}
.bb-cover__tag{font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--muted);font-size:clamp(18px,2vw,24px);margin:0}
.bb-nav{position:sticky;top:60px;z-index:55;background:rgba(250,246,238,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.bb-nav__inner{display:flex;justify-content:space-between;gap:clamp(18px,3vw,44px);overflow-x:auto;scrollbar-width:none}
@media (max-width:900px){.bb-nav__inner{justify-content:flex-start;gap:22px}}
.bb-nav{overflow:hidden}
.bb-nav__inner::-webkit-scrollbar{display:none}
.bb-nav a{display:flex;align-items:center;gap:10px;padding:18px 0 16px;font-family:var(--font-label);font-weight:400;font-size:clamp(13px,1.15vw,16.5px);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;transition:font-size .3s var(--ease-out),padding .3s var(--ease-out),gap .3s var(--ease-out),color .2s var(--ease-out)}
/* Kun navi tarttuu ylös (bb-nav.js .is-stuck), linkkitekstit kutistuvat hillitysti. */
.bb-nav.is-stuck a{font-size:clamp(11.5px,1vw,14px);padding-top:12px;padding-bottom:11px;gap:8px}
/* Kutistettuna otsikot vain keskittyvät, ei enää laidasta laitaan (vain desktop;
   mobiilissa navi pysyy vasemmalle tasattuna ja vieritettävänä). */
@media (min-width:901px){.bb-nav.is-stuck .bb-nav__inner{justify-content:center;gap:clamp(26px,3.6vw,58px)}}
@media (prefers-reduced-motion:reduce){.bb-nav a{transition:color .2s var(--ease-out)}}
.bb-nav a span{color:var(--coral);font-variant-numeric:tabular-nums}
.bb-nav a:hover{color:var(--ink)}
.bb-nav a.is-active{color:var(--ink);border-bottom-color:var(--coral)}
.bb-nav__sentinel{height:0}
.bb-chapter{padding-top:clamp(80px,10vw,132px);scroll-margin-top:96px}
.site-main > .bb-chapter:last-child{padding-bottom:420px} /* footerin aaltokaista (sama sääntö kuin .section:last-child) */
.bb-chap-head{display:flex;align-items:flex-start;gap:clamp(14px,2vw,24px);border-bottom:1.5px solid var(--ink);padding-bottom:24px;margin-bottom:clamp(36px,4.5vw,56px)}
.bb-chap-num{font-family:var(--font-label);font-weight:400;font-size:clamp(22px,3.2vw,34px);letter-spacing:.08em;color:var(--coral);font-variant-numeric:tabular-nums;margin-top:clamp(4px,0.85vw,12px)} /* linjaan Fraunces-otsikon versaalin ylälaitaan */
.bb-chap-title{font-family:var(--font-display);font-variation-settings:"opsz" 120;font-weight:600;font-size:clamp(56px,10vw,132px);line-height:1;letter-spacing:-.02em;margin:0}
.bb-sub{margin-top:clamp(56px,7vw,88px)}
.bb-sub__head{margin-bottom:clamp(22px,3vw,32px)}
.bb-sub__head h3{font-family:var(--font-display);font-weight:600;font-size:clamp(25px,3vw,33px);line-height:1.12;margin:0 0 8px}
.bb-sub__def{font-size:15px;line-height:1.55;color:var(--ink);max-width:62ch;margin:10px 0 0;padding:14px 18px;border-left:3px solid var(--ink);background:#ece9e2;border-radius:0 10px 10px 0}
.bb-statement{font-family:var(--font-display);font-weight:600;font-size:clamp(27px,3.6vw,42px);line-height:1.14;letter-spacing:-.015em;color:var(--ink);max-width:26ch;margin:0 0 clamp(24px,3vw,36px);text-wrap:balance}
.bb-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px)}
.bb-prose p{font-size:16px;line-height:1.72;color:var(--text-2);max-width:62ch;margin:0 0 16px}
.bb-prose p:last-child{margin-bottom:0}
.bb-prose--narrow{max-width:72ch;margin-bottom:clamp(24px,3vw,34px)}
.bb-prose code{font-family:inherit;font-weight:600;background:var(--field);padding:1px 6px;border-radius:6px;font-size:14px}
.bb-callout{background:var(--night);color:var(--night-ink);border-radius:16px;padding:30px 34px;margin-top:clamp(30px,4vw,44px)}
.bb-callout__label{display:inline-block;font-family:var(--font-label);font-weight:400;font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--coral);margin-bottom:12px}
.bb-callout p{font-size:16px;line-height:1.7;margin:0;max-width:78ch}
.bb-callout--pitch{background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);box-shadow:5px 5px 0 rgba(20,48,77,.12)}
.bb-callout--pitch p{color:var(--text-2)}
.bb-quote{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(20px,2.3vw,25px);line-height:1.4;color:var(--ink);border-left:3px solid var(--coral);padding-left:22px;max-width:36ch;margin:clamp(28px,3.5vw,40px) 0 0}
/* Brändin tarina: aloittava pull-quote (leveämpi + väli alle ennen palstoja) */
.bb-quote--story{max-width:46ch;margin-top:0;margin-bottom:clamp(26px,3.4vw,38px)}
/* Brändin tarina: päättävä kertosäe oikean palstan lopussa — korallinvärinen
   display-rivi ilman reunaa. .bb-prose-etuliite voittaa .bb-prose p -perussäännön. */
.bb-prose .bb-story__coda{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,2.5vw,30px);line-height:1.2;letter-spacing:-.015em;color:var(--coral);max-width:none;margin:clamp(20px,2.6vw,30px) 0 0}
.bb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,2.6vw,30px)}
.bb-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,30px)}
.bb-card{background:var(--paper);border:1.5px solid var(--ink);border-radius:16px;padding:28px 28px 24px;box-shadow:5px 5px 0 rgba(20,48,77,.12)}
.bb-card h4{font-family:var(--font-display);font-weight:600;font-size:19px;margin:0 0 10px;color:var(--ink)}
.bb-card p{font-size:14.5px;line-height:1.68;color:var(--text-2);margin:0 0 10px}
.bb-card p:last-child{margin-bottom:0}
.bb-card--tone blockquote{margin:16px 0 0;padding:12px 16px;background:var(--field);border-radius:10px;font-size:13.5px;font-style:italic;line-height:1.6;color:var(--muted)}
/* Brändiarkkityyppi: ympyrägrafiikka + kortit */
.bb-arch{margin:clamp(28px,3.6vw,44px) 0 0;display:flex;flex-direction:column;align-items:center;gap:14px}
.bb-arch__wrap{width:100%;position:relative}
.bb-arch .bba-s[data-arch-name]{cursor:default}
.bb-arch .bba-s[data-arch-name]:hover path:first-of-type{filter:brightness(.95)}
.bba-tip{position:absolute;left:0;top:0;z-index:5;width:max-content;max-width:250px;background:var(--paper);border:1.5px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 rgba(20,48,77,.12);padding:12px 15px;opacity:0;pointer-events:none;transition:opacity .2s var(--ease-out)}
.bba-tip.is-on{opacity:1}
.bba-tip__name{display:block;font-family:var(--font-label);font-weight:400;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--coral);margin-bottom:6px}
.bba-tip__desc{font-size:13px;line-height:1.55;color:var(--ink);margin:0 0 6px}
.bba-tip__ex{font-size:12px;line-height:1.5;color:var(--muted);margin:0}
.bb-arch__svg{display:block;width:100%;max-width:680px;height:auto;margin:0 auto}
.bb-arch figcaption{font-size:13px;color:var(--muted);max-width:64ch;line-height:1.6;text-align:center}
.bba-name{font-family:var(--font-label);font-weight:400;font-size:18px;letter-spacing:.13em;text-transform:uppercase}
.bba-kw{font-family:var(--font-body);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.bba-q{font-family:var(--font-label);font-weight:400;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;transition:fill .2s var(--ease-out)}
/* Keskustan neljännesryhmät (arkkityyppiperheet) saavat saman hover-tooltipin kuin siivut */
.bb-arch .bba-q-grp{cursor:default}
.bb-arch .bba-q-grp:hover .bba-q{fill:var(--coral)}
/* Rattaan esiintulo: keskiö ensin, siivut myötäpäivään staggerilla, tähdet poksahtavat lopuksi.
   Viritetään vain JS:llä (.anim-armed) — ilman JS:ää/reduced-motionilla ratas on valmiiksi piirretty. */
.bb-arch .bba-s,.bb-arch .bba-c{transform-box:view-box;transform-origin:50% 50%}
.bb-arch.anim-armed .bba-s,.bb-arch.anim-armed .bba-c{opacity:0}
.bb-arch.anim-armed .bba-star path{opacity:0}
.bb-arch.is-inview .bba-c{animation:bbaCenter .6s var(--ease-out) both}
.bb-arch.is-inview .bba-s{animation:bbaSlice .65s var(--ease-out) both;animation-delay:calc(.3s + var(--i)*70ms)}
.bb-arch.is-inview .bba-star path{transform-box:fill-box;transform-origin:center;animation:bbaStarPop .55s var(--ease-out) both;animation-delay:1.75s}
@keyframes bbaCenter{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes bbaSlice{from{opacity:0;transform:rotate(-9deg) scale(.94)}to{opacity:1;transform:none}}
@keyframes bbaStarPop{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
.bb-arch__cards{margin-top:clamp(24px,3.2vw,38px)}
.bb-arch__tag{display:inline-block;font-family:var(--font-label);font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:14px}
.bb-card--arch-primary{border-color:var(--coral);box-shadow:5px 5px 0 rgba(232,92,74,.18)}
.bb-card--arch-primary .bb-arch__tag{background:var(--coral);color:var(--paper)}
.bb-card--arch-secondary .bb-arch__tag{background:var(--night);color:var(--night-ink)}
@media (max-width:700px){
  .bb-arch{margin-left:calc(-1*var(--pad-x));margin-right:calc(-1*var(--pad-x))}
  .bb-arch__wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 var(--pad-x)}
  .bb-arch__svg{min-width:540px;max-width:none}
  .bb-arch figcaption{padding:0 var(--pad-x)}
}
.bb-band{background:var(--night);color:var(--night-ink);border-radius:24px;width:min(calc(var(--maxw) - 2*var(--pad-x)),calc(100% - 2*var(--pad-x)));margin:clamp(48px,6vw,72px) auto 0;padding:clamp(52px,6.5vw,84px) 0}
.bb-band .container{padding-left:clamp(34px,5.5vw,76px);padding-right:clamp(34px,5.5vw,76px)}
.bb-band__text{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3.4vw,40px);line-height:1.18;letter-spacing:-.015em;max-width:30ch;margin:0}
.bb-band__sub{font-size:16.5px;line-height:1.7;opacity:.85;max-width:62ch;margin:20px 0 0}
.bb-band--tagline{text-align:center}
.bb-band__big{font-family:var(--font-display);font-variation-settings:"opsz" 120;font-weight:600;font-size:clamp(38px,6.5vw,80px);line-height:1.05;letter-spacing:-.02em;margin:0;text-wrap:balance}
.bb-band__big em{font-style:italic;color:var(--coral)}
.bb-msgs{list-style:none;counter-reset:bbmsg;margin:0 0 clamp(28px,3.5vw,40px);padding:0;max-width:72ch}
.bb-msgs li{counter-increment:bbmsg;position:relative;padding:0 0 0 54px;margin-bottom:16px;font-size:16.5px;font-weight:600;line-height:1.55;color:var(--ink)}
.bb-msgs li::before{content:counter(bbmsg,decimal-leading-zero);position:absolute;left:0;top:1px;width:36px;height:36px;border-radius:50%;background:var(--coral);color:#fff;font-weight:700;font-size:12.5px;display:grid;place-items:center;font-variant-numeric:tabular-nums;font-family:var(--font-body)}
/* Ydinviestit: käyttövalmiit lauseet ryhmiteltynä (yhden lauseen versiot,
   ostajakärjet, erottautumiskärki). Kukin ryhmä = oma bb-msgs-lista, jonka
   koralliympyränumerointi alkaa uudelleen 01:stä. */
.bb-msgsets{max-width:72ch;margin:0 0 clamp(28px,3.5vw,40px);display:flex;flex-direction:column;gap:clamp(26px,3.4vw,38px)}
.bb-msgset__title{font-family:var(--font-label);font-weight:400;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 16px}
.bb-msgset .bb-msgs{margin:0;max-width:none}
.bb-msgs__seg{color:var(--ink);font-weight:800}
/* Golden Circle: Miksi → Miten → Mitä */
.bb-golden{display:grid;grid-template-columns:340px 1fr;gap:clamp(30px,4vw,60px);align-items:center;margin-top:6px}
.bb-golden__rings{position:relative;width:320px;height:320px;margin:0 auto}
.bb-golden__ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;clip-path:circle(50%);display:flex;align-items:flex-start;justify-content:center}
.bb-golden__ring span{font-family:var(--font-label);font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.1em;padding-top:11px}
.bb-golden__ring--what{width:320px;height:320px;border:2px solid var(--ink);color:var(--ink);cursor:default;transition:background .18s,border-color .18s}
.bb-golden__ring--how{width:220px;height:220px;border:2px solid var(--ink);color:var(--ink);background:var(--bg);cursor:default;transition:background .18s,border-color .18s}
.bb-golden__ring--why{width:120px;height:120px;background:var(--coral);color:#fff;align-items:center;cursor:default;transition:transform .18s}
.bb-golden__ring--why span{padding-top:0}
.bb-golden__ring--what.is-hi{background:rgba(232,92,74,.08);border-color:var(--coral)}
.bb-golden__ring--how.is-hi{background:rgba(232,92,74,.12);border-color:var(--coral)}
.bb-golden__ring--why.is-hi{transform:translate(-50%,-50%) scale(1.06)}
.bb-golden__list{list-style:none;margin:0;padding:0}
.bb-golden__list li{margin-bottom:18px;padding:10px 0 10px 16px;margin-left:-16px;border-left:2px solid transparent;transition:border-color .18s,opacity .18s}
.bb-golden__list li.is-hi{border-left-color:var(--coral);background:rgba(232,92,74,.05)}
.bb-golden__list li:last-child{margin-bottom:0}
.bb-golden__k{display:inline-block;font-family:var(--font-label);font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--coral);margin-bottom:5px}
.bb-golden__lead{display:block;font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.3;color:var(--ink);margin:0 0 6px}
.bb-golden__list p{margin:0;font-size:15.5px;line-height:1.6;color:var(--text-2)}
/* Ketä vastaan / minkä puolesta */
.bb-vs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px)}
.bb-vs__col{border-radius:16px;padding:clamp(22px,2.6vw,32px);border:1.5px solid var(--hair)}
.bb-vs__col--against{background:var(--night);color:var(--night-ink);border-color:transparent}
.bb-vs__col--for{background:var(--paper)}
.bb-vs__label{display:inline-block;font-family:var(--font-label);font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px;color:var(--muted)}
.bb-vs__col--against .bb-vs__label{color:var(--coral)}
.bb-vs__quote{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,2.5vw,30px);line-height:1.15;color:var(--coral);margin:0 0 14px}
.bb-vs__body{margin:0;font-size:15px;line-height:1.6}
/* Viestitalo (message house) */
.bb-house{max-width:920px;margin:0 auto}
.bb-house__roof{background:var(--hair);clip-path:polygon(50% 0,100% 32%,100% 100%,0 100%,0 32%);margin-bottom:12px;padding:1.5px}
.bb-house__roof-in{background:var(--paper);color:var(--ink);text-align:center;padding:46px 30px 26px;clip-path:polygon(50% 0,100% 32%,100% 100%,0 100%,0 32%)}
.bb-house__roof p{font-family:var(--font-display);font-weight:600;font-size:clamp(21px,2.4vw,30px);line-height:1.2;margin:6px auto 0;max-width:24ch}
.bb-house__label{font-family:var(--font-label);font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--coral)}
.bb-house__pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.bb-house__pillar{background:var(--paper);border:1.5px solid var(--hair);border-radius:12px;padding:20px 18px}
.bb-house__num{font-family:var(--font-body);font-variant-numeric:tabular-nums;font-weight:700;font-size:12px;color:var(--coral)}
.bb-house__pillar strong{display:block;margin:9px 0 6px;font-size:15.5px;color:var(--ink)}
.bb-house__pillar p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-2)}
.bb-house__base{background:var(--paper);border:1.5px solid var(--hair);color:var(--ink);border-radius:12px;padding:24px 26px;text-align:center}
.bb-house__base .bb-house__label{color:var(--coral)}
.bb-house__base p{margin:7px auto 0;font-size:14.5px;line-height:1.6;max-width:82ch}
/* Brändiarkkitehtuuri (branded house) */
.bb-brarch{display:flex;flex-direction:column;align-items:center;text-align:center}
.bb-brarch__master{background:var(--night);color:var(--night-ink);border-radius:16px;padding:26px 36px;display:flex;flex-direction:column;align-items:center;gap:12px}
.bb-brarch__masterlogo{display:flex;align-items:center;gap:9px}
.bb-brarch__masterlogo .logo-mark,.bb-brarch__masterlogo .logo-word{display:block;height:34px;width:auto}
.bb-brarch__mastertag{font-size:13px;color:rgba(255,255,255,.72);max-width:44ch;line-height:1.5}
.bb-brarch__children{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);margin-top:30px;position:relative;width:100%;max-width:760px}
.bb-brarch__children::before{content:'';position:absolute;top:-30px;left:50%;width:2px;height:30px;background:var(--hair);transform:translateX(-50%)}
.bb-brarch__child{background:var(--paper);border:1.5px solid var(--hair);border-radius:14px;padding:22px 24px;text-align:left}
.bb-brarch__child--live{border-color:var(--coral)}
.bb-brarch__badge{display:inline-block;font-family:var(--font-label);font-weight:400;font-size:10px;text-transform:uppercase;letter-spacing:.1em;padding:4px 10px;border-radius:20px;background:var(--coral);color:#fff;margin-bottom:12px}
.bb-brarch__badge--future{background:transparent;color:var(--muted);border:1px solid var(--hair)}
.bb-brarch__child strong{display:block;font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--ink);line-height:1.2}
.bb-brarch__child strong span{color:var(--coral)}
.bb-brarch__child--future strong span{color:var(--muted)}
.bb-brarch__child p{margin:9px 0 0;font-size:14px;line-height:1.55;color:var(--text-2)}
.bb-brarch__note{margin:clamp(24px,3vw,34px) auto 0;max-width:76ch;font-size:14.5px;line-height:1.65;color:var(--text-2);text-align:center}
/* Design system: tokenit + komponenttigalleria */
.bb-ds{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px);margin-top:clamp(20px,2.6vw,30px)}
.bb-ds__tile{background:var(--paper);border:1.5px solid var(--hair);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:14px}
.bb-ds__tile--wide{grid-column:1/-1}
.bb-ds__label{font-family:var(--font-label);font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.bb-ds__hint{font-size:12.5px;color:var(--muted);line-height:1.5}
.bb-ds__spacing{display:flex;align-items:flex-end;gap:9px;flex-wrap:nowrap}
.bb-ds__spacing span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--text-2);font-variant-numeric:tabular-nums}
.bb-ds__spacing i{display:block;width:var(--w);height:var(--w);background:var(--coral);border-radius:2px}
.bb-ds__radii{display:flex;gap:14px;flex-wrap:wrap}
.bb-ds__radii i{width:52px;height:52px;background:var(--field);border:1.5px solid var(--ink);display:grid;place-items:center;font-size:11px;font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums}
.bb-ds__btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.bb-ds__surfaces{display:flex;gap:12px;flex-wrap:wrap}
.bb-ds__surf{flex:1;min-width:130px;border-radius:10px;padding:24px 16px;font-size:12.5px;text-align:center}
.bb-ds__surf--paper{background:var(--bg);border:1.5px solid var(--hair);color:var(--ink)}
.bb-ds__surf--night{background:var(--night);color:var(--night-ink)}
.bb-ds__chat{display:flex;flex-direction:column;gap:8px}
.bb-ds__bub{max-width:82%;padding:10px 14px;font-size:13px;line-height:1.4}
.bb-ds__bub--bot{align-self:flex-start;background:#EEF1F4;color:#0f2740;border-radius:14px 14px 14px 4px}
.bb-ds__bub--user{align-self:flex-end;background:var(--night);color:#fff;border-radius:14px 14px 4px 14px}
.bb-ty__row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:13px 0;border-bottom:1px solid var(--hair)}
.bb-ty__row:last-child{border-bottom:0}
.bb-ty__row:first-of-type{padding-top:4px}
.bb-ty__spec{color:var(--ink);min-width:0}
.bb-ty__spec--h1{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.4vw,38px);line-height:.95;letter-spacing:-.02em}
.bb-ty__spec--h2{font-family:var(--font-display);font-weight:700;font-size:27px;line-height:1.08;letter-spacing:-.015em}
.bb-ty__spec--h3{font-family:var(--font-display);font-weight:600;font-size:21px;line-height:1.1}
.bb-ty__spec--lead{font-family:var(--font-body);font-weight:500;font-size:18px;line-height:1.5;color:var(--text-2)}
.bb-ty__spec--body{font-family:var(--font-body);font-weight:450;font-size:15px;line-height:1.65;color:var(--text-2)}
.bb-ty__spec--label{font-family:var(--font-label);font-weight:400;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink)}
.bb-ty__meta{flex-shrink:0;font-family:var(--font-body);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;line-height:1.4}
.bb-ds__markers{display:flex;align-items:center;gap:20px}
.bb-ds__buoy{width:40px;height:40px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;box-shadow:0 0 0 3px var(--bg)}
.bb-ds__stamp{font-family:var(--font-label);font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--coral);border:2px double var(--coral);border-radius:8px;padding:8px 14px;transform:rotate(-2deg)}
.bb-scales{max-width:820px;margin-top:clamp(30px,4vw,44px)}
.bb-scale{margin-bottom:clamp(24px,3vw,34px)}
.bb-scale__row{display:grid;grid-template-columns:132px 1fr 132px;align-items:center;gap:18px}
.bb-scale__end{font-family:var(--font-label);font-weight:400;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink);min-width:0;white-space:nowrap} /* sarake mitoitettu pisimmälle sanalle (MUODOLLINEN ~122px) → ei katkea keskeltä; mobiilissa rivitys sallitaan uudelleen */
.bb-scale__end:first-child{text-align:right}
.bb-scale__track{position:relative;height:2px;background:var(--hair)}
.bb-scale__track::before{content:'';position:absolute;left:50%;top:50%;width:1.5px;height:12px;transform:translate(-50%,-50%);background:var(--hair)}
.bb-scale__track i{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:var(--coral);transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--bg)}
.bb-scale__note{font-size:13.5px;color:var(--muted);line-height:1.6;margin:9px 0 0 138px;max-width:60ch}
.bb-vocab-wrap{overflow-x:auto;margin-top:6px}
.bb-vocab{width:100%;max-width:860px;border-collapse:collapse}
.bb-vocab th{font-family:var(--font-label);font-weight:400;font-size:12px;text-transform:uppercase;letter-spacing:.12em;text-align:left;color:var(--muted);padding:10px 16px 12px;border-bottom:1.5px solid var(--ink)}
.bb-vocab th:first-child{color:var(--ink)}
.bb-vocab td{padding:11px 16px;border-bottom:1px solid var(--hair);font-size:14.5px;line-height:1.5;vertical-align:top}
.bb-vocab td:first-child{font-weight:650;color:var(--ink)}
.bb-vocab td:last-child{color:var(--muted)}
.bb-ladder{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(26px,3.4vw,38px)}
.bb-ladder span{border:1.5px solid var(--ink);border-radius:999px;padding:9px 20px;font-weight:650;font-size:15px;color:var(--ink);background:var(--paper)}
.bb-ladder i{font-style:normal;color:var(--coral);font-weight:700}
.bb-fine{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:16px;max-width:78ch}
.bb-grid2--doavoid{margin-top:clamp(10px,1.5vw,18px)}
.bb-card--do h4{color:var(--ok)}
.bb-card--avoid h4{color:var(--coral)}
.bb-card--do ul,.bb-card--avoid ul{margin:0;padding-left:18px}
.bb-card--do li,.bb-card--avoid li{font-size:14.5px;line-height:1.62;color:var(--text-2);margin-bottom:10px}
.bb-logospec{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,2.6vw,30px);margin-bottom:18px}
.bb-logospec__light,.bb-logospec__dark{display:flex;align-items:center;justify-content:center;gap:10px;border-radius:16px;padding:clamp(44px,6vw,72px) 24px}
.bb-logospec__light{background:var(--paper);border:1.5px solid var(--hair);color:var(--ink)}
.bb-logospec__dark{background:var(--night);color:var(--night-ink)}
.bb-logospec .logo-mark,.bb-logospec .logo-word{display:block;height:clamp(40px,5vw,58px);width:auto}
.bb-favrow{display:flex;align-items:flex-end;gap:20px;margin:0 0 clamp(26px,3.4vw,38px)}
.bb-favrow img{display:block}
.bb-favrow__note{font-size:13px;color:var(--muted);padding-bottom:1px}
/* Logo-alaosion 2-palsta: turva-alue (leveämpi) vasemmalle, favicon-kortti oikealle. */
.bb-logogrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,2.6vw,30px);align-items:stretch;margin:0 0 clamp(26px,3.4vw,38px)}
.bb-logogrid .bb-safearea{margin:0}
.bb-favcard{background:var(--paper);border:1.5px solid var(--hair);border-radius:16px;padding:clamp(24px,2.6vw,34px);display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(20px,2.4vw,32px)}
.bb-favcard__main{display:flex;flex-direction:column;gap:16px;min-width:0}
.bb-favcard__label{font-family:var(--font-label);font-weight:400;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.bb-favcard .bb-favrow{margin:0;gap:22px}
.bb-favcard__note{font-size:13.5px;color:var(--muted);line-height:1.6;max-width:30ch}
.bb-favcard__app{display:flex;flex-direction:column;align-items:center;gap:16px;flex-shrink:0}
.bb-favcard__appicon{display:block;width:76px;height:76px;border-radius:17px;overflow:hidden;border:1.5px solid var(--hair);box-shadow:0 3px 10px rgba(20,48,77,.1)}
.bb-favcard__appicon img{display:block;width:100%;height:100%}
.bb-favcard__applabel{font-family:var(--font-label);font-weight:400;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);white-space:nowrap}
.bb-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,30px);margin-bottom:clamp(22px,2.6vw,30px)}
.bb-swatch{border-radius:16px;padding:24px;min-height:200px;display:flex;flex-direction:column}
.bb-swatch__name{font-family:var(--font-display);font-weight:600;font-size:19px}
.bb-swatch__hex{font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.04em;opacity:.75;margin-top:3px}
.bb-swatch p{font-size:13.5px;line-height:1.62;margin:auto 0 0;padding-top:22px;opacity:.92}
.bb-swatch--navy{background:var(--ink);color:var(--night-ink)}
.bb-swatch--cream{background:var(--bg);color:var(--ink);border:1.5px solid var(--ink)}
.bb-swatch--coral{background:var(--coral);color:#fff}
/* Osavärit (aaltokerrokset) laatikon alaosassa: kolme sävyä vierekkäin — samat,
   joita hero-/footer-aallot käyttävät. Vain navyssä ja korallissa (aaltoväreissä). */
.bb-swatch__tints{margin-top:20px}
.bb-swatch__tintcap{display:block;font-family:var(--font-label);font-weight:400;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;opacity:.72;margin-bottom:10px}
/* Osaväririvi kiinni laatikon pohjaan ja reunoihin (negatiiviset marginaalit
   kumoavat .bb-swatch-paddingin 24px); alakulmat pyöristyvät laatikon mukaan. */
.bb-swatch__tintrow{display:flex;height:44px;margin:0 -24px -24px;border-radius:0 0 16px 16px;overflow:hidden}
.bb-swatch__tint{flex:1;border:0;padding:0;cursor:pointer;position:relative;font:inherit}
.bb-swatch__tint.is-copied::after{content:"✓";position:absolute;inset:0;margin:auto;width:22px;height:22px;display:grid;place-items:center;background:rgba(250,246,238,.9);color:var(--ink);border-radius:6px;font-size:12px;font-weight:700}
.bb-swatches--support .bb-swatch{min-height:120px}
.bb-swatches--support .bb-swatch p{padding-top:12px;font-size:12.5px}
.bb-swatch--night{background:var(--night);color:var(--night-ink)}
.bb-swatch--nightink{background:var(--night-ink);color:var(--ink);border:1.5px solid var(--hair)}
.bb-swatch--ok{background:var(--ok);color:#fff}
/* Visuaaliset brändiesimerkit (Mailchimp/Slack/Notion): alkuperäiset logolockupit */
.bb-brandex{list-style:none;margin:clamp(28px,3.4vw,42px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.bb-brandex__item{display:flex;flex-direction:column;gap:12px}
.bb-brandex__mark{display:block;border-radius:14px;overflow:hidden;border:1.5px solid var(--hair)}
.bb-brandex__mark img{display:block;width:100%;height:auto}
.bb-brandex__cap{font-size:13px;line-height:1.5;color:var(--muted)}
@media (max-width:640px){.bb-brandex{grid-template-columns:1fr}}
.bb-typegrid{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
.bb-type{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:clamp(20px,2.6vw,36px);align-items:center}
.bb-type__id{margin:0}
.bb-type__aa{display:block;line-height:.95;font-size:clamp(56px,6vw,92px);color:var(--ink);margin:0 0 14px;white-space:nowrap}
.bb-type__aa--display{font-family:var(--font-display);font-weight:600}
.bb-type__aa--label{font-family:var(--font-label);font-weight:400}
.bb-type__aa--body{font-family:var(--font-body);font-weight:500}
.bb-type__set{display:flex;flex-direction:column;gap:clamp(8px,1vw,14px);color:var(--ink);min-width:0}
.bb-type__set span{display:block;line-height:1.15;white-space:nowrap} /* mitoitettu täyttämään palsta desktopilla; mobiilissa rivittyy (media-query alla) */
.bb-type__set--display span{font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.75vw,38px)}
.bb-type__set--label span{font-family:var(--font-label);font-weight:400;font-size:clamp(15px,2.2vw,31px);letter-spacing:.06em}
.bb-type__set--body span{font-family:var(--font-body);font-weight:470;font-size:clamp(17px,3vw,42px);font-variant-numeric:tabular-nums}
.bb-type__sample{color:var(--ink)!important}
.bb-type__sample--display{font-family:var(--font-display);font-weight:600;font-size:22px!important;line-height:1.3!important}
.bb-type__sample--display em{font-style:italic;color:var(--coral)}
.bb-type__sample--label{font-family:var(--font-label);font-weight:400;font-size:13.5px!important;text-transform:uppercase;letter-spacing:.14em}
.bb-type__sample--body{font-variant-numeric:tabular-nums;font-size:15.5px!important;font-weight:600}
.bb-mate{display:grid;grid-template-columns:210px 1fr 1fr;gap:clamp(26px,4vw,48px);align-items:start}
.bb-mate__figure{background:var(--field);border-radius:50%;width:200px;height:200px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.bb-mate__figure img{width:86%;height:86%;display:block}
.bb-dayarc{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--ink);border-radius:16px;overflow:hidden;height:130px;margin-bottom:clamp(28px,3.5vw,40px)}
.bb-dayarc__step{display:flex;align-items:flex-end;padding:16px 18px}
.bb-dayarc__step span{font-family:var(--font-label);font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.bb-dayarc__step--dawn{background:#F7DFD5;color:var(--ink)}
.bb-dayarc__step--day{background:var(--bg);color:var(--ink);border-left:1.5px solid var(--hair);border-right:1.5px solid var(--hair)}
.bb-dayarc__step--night{background:var(--night);color:var(--night-ink)}
/* Aaltoesimerkki (Kuvamaailma): 2 paneelia sisältöleveydellä, kevyt CSS-drift. */
.bb-waves{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);margin:clamp(20px,2.6vw,32px) 0 14px}
.bb-waves__panel{margin:0;border:1.5px solid var(--hair);border-radius:14px;overflow:hidden}
.bb-waves__sea{position:relative;height:150px;overflow:hidden;background:linear-gradient(180deg,#FAF6EE 0%,#FBEDE6 55%,#F7DFD5 100%)}
.bb-waves__panel--footer .bb-waves__sea{background:linear-gradient(180deg,#FAF6EE 0%,#F6D9CC 30%,#EC8A6E 56%)}
.bb-waves__layer{position:absolute;left:0;bottom:0;width:200%;height:82%;will-change:transform;animation:bbWaveDrift 22s linear infinite}
.bb-waves__layer--mid{height:70%;animation-duration:18s}
.bb-waves__layer--front{height:58%;animation-duration:13s}
.bb-waves__panel--hero .bb-waves__layer--back{opacity:.85}
.bb-waves__panel--footer .bb-waves__layer--back{opacity:.75}
.bb-waves__panel figcaption{font-family:var(--font-label);font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:10px 14px;background:var(--paper);border-top:1.5px solid var(--hair)}
.bb-waves__panel--footer figcaption{background:var(--night);color:var(--night-ink);border-top-color:rgba(255,255,255,.12)}
.bb-waves__note{font-size:14px;color:var(--muted);line-height:1.65;max-width:74ch;margin:0 0 clamp(20px,2.6vw,30px)}
@keyframes bbWaveDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bb-waves__layer{animation:none}}
.bb-ships{display:flex;align-items:flex-end;gap:clamp(28px,5vw,64px);margin:6px 0 clamp(28px,3.5vw,40px)}
.bb-ships figure{margin:0;text-align:center}
.bb-ships img{width:auto;display:block;margin:0 auto}
.bb-ships figure:nth-child(1) img{height:64px}
.bb-ships figure:nth-child(2) img{height:70px}
.bb-ships figure:nth-child(3) img{height:79px}
.bb-ships figcaption{font-family:var(--font-label);font-weight:400;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:10px}
.bb-icons{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:clamp(18px,2.5vw,32px);margin-top:clamp(48px,6vw,76px)}
.bb-icons svg,.bb-icons .k-icon{height:clamp(64px,7vw,100px);width:auto;margin:0}
.bb-quad{margin:clamp(30px,4vw,48px) auto;max-width:660px;color:var(--ink)}
.bb-quad svg{width:100%;height:auto;display:block}
.bb-quad__axis{font-family:var(--font-label);font-size:11.5px;letter-spacing:.12em;fill:var(--muted)}
.bb-quad__blob{font-family:var(--font-body);font-size:12.5px;font-weight:600;fill:var(--muted)}
.bb-quad__us{fill:var(--coral)}
.bb-quad__uslabel{font-family:var(--font-display);font-weight:600;font-size:15px;fill:var(--ink)}
.bb-card--num{position:relative}
.bb-num{width:36px;height:36px;border-radius:50%;background:var(--coral);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;font-family:var(--font-body);font-variant-numeric:tabular-nums;margin-bottom:14px}
.bb-profile__head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.bb-profile__avatar{width:48px;height:48px;border-radius:50%;background:var(--night);overflow:hidden;display:grid;place-items:center;flex-shrink:0}
.bb-profile__avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.bb-profile__head h4{margin:0}
.bb-profile__role{font-size:13px;color:var(--muted)}
.bb-profile ul{margin:0;padding-left:18px}
.bb-profile li{font-size:14px;line-height:1.6;color:var(--text-2);margin-bottom:8px}
.bb-profile__pain{margin-top:14px;padding:12px 14px;background:var(--coral-soft);border-radius:10px;font-size:14px!important}
.bb-profile__pain strong{color:var(--crit)}
.bb-journey{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,2.6vw,30px)}
.bb-journey__note{font-style:italic;font-size:13.5px!important;color:var(--muted)!important}
.bb-end{margin-top:clamp(64px,8vw,96px);text-align:center}
.bb-end p{margin:0 auto;max-width:44ch}
.bb-end em{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(17px,1.9vw,21px);color:var(--ink)}
.bb-end__stamp{display:inline-block;margin-top:22px;font-family:var(--font-label);font-weight:400;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);border:1.5px solid var(--hair);border-radius:8px;padding:9px 18px;transform:rotate(-2deg)}
@media (max-width:900px){
  .bb-cols,.bb-grid2,.bb-grid3,.bb-logospec,.bb-swatches,.bb-journey,.bb-logogrid,.bb-waves,.bb-golden,.bb-vs,.bb-brarch__children{grid-template-columns:1fr}
  .bb-house__pillars,.bb-ds{grid-template-columns:1fr 1fr}
  .bb-type{grid-template-columns:1fr;gap:16px}
  .bb-type__set span{white-space:normal;overflow-wrap:anywhere}
  .bb-favcard{flex-direction:column;align-items:flex-start;gap:22px}
  .bb-ty__row{flex-direction:column;align-items:flex-start;gap:5px}
  .bb-ty__meta{text-align:left}
  .bb-golden__rings{margin-bottom:8px}
  .bb-mate{grid-template-columns:1fr}
  .bb-scale__row{grid-template-columns:86px 1fr 86px;gap:10px}
  .bb-scale__end{white-space:normal;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word} /* kapealla sarakkeella pitkä sana tavutetaan dokumentin kielen mukaan (fi/en/sv/de) tavurajalta, ei mielivaltaisesti */
  .bb-scale__note{margin-left:0}
  .bb-dayarc{height:100px}
  .bb-cover{min-height:calc(100svh - 148px);padding:28px 0}
}

.bb-swatch__vals{display:flex;flex-direction:column;align-items:flex-start;gap:1px;margin-top:6px}
.bb-copy{appearance:none;background:none;border:0;padding:2px 0;font:inherit;font-size:12.5px;line-height:1.5;font-variant-numeric:tabular-nums;letter-spacing:.03em;color:inherit;opacity:.82;cursor:pointer;text-align:left;border-bottom:1px dashed transparent}
.bb-copy:hover{opacity:1;border-bottom-color:currentColor}
.bb-copy.is-copied{opacity:1}
.bb-copy.is-copied::after{content:' ✓';font-weight:700}
.bb-safearea{margin:0 0 clamp(26px,3.4vw,38px);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.bb-safearea__stage{position:relative;display:inline-block;background:var(--paper);border:1px solid var(--hair);overflow:hidden}
.bb-safearea__gl{position:absolute;pointer-events:none}
.bb-safearea__gl--t{left:0;right:0;top:36px;border-top:1px solid rgba(232,92,74,.6)}
.bb-safearea__gl--b{left:0;right:0;bottom:36px;border-top:1px solid rgba(232,92,74,.6)}
.bb-safearea__gl--l{top:0;bottom:0;left:29.7px;border-left:1px solid rgba(232,92,74,.6)} /* pystyraja = A:n LEVEYS (36 × 49.03/59.36) → kulma-A täyttää solun */
.bb-safearea__gl--r{top:0;bottom:0;right:29.7px;border-left:1px solid rgba(232,92,74,.6)}
/* mittayksikkö = liikemerkin A-purjeen korkeus (~36px kun merkki on 56px) — oikea favicon kulmissa */
.bb-safearea__unit{position:absolute;width:29.7px;height:36px;display:flex;align-items:center;color:var(--ink);opacity:.45}
.bb-safearea__unit svg{height:100%;width:auto;display:block} /* A täyttää kaistan korkeuden tarkalleen — mitta tulee siitä */
.bb-safearea__unit--tl,.bb-safearea__unit--bl{justify-content:flex-start}
.bb-safearea__unit--tr,.bb-safearea__unit--br{justify-content:flex-end}
.bb-safearea__unit--tl{top:0;left:0}
.bb-safearea__unit--tr{top:0;right:0}
.bb-safearea__unit--bl{bottom:0;left:0}
.bb-safearea__unit--br{bottom:0;right:0}
/* viivat kulkevat logon ulkoreunoja pitkin → logon marginaali = tasan yksi yksikkö */
.bb-safearea__logo{display:flex;align-items:center;gap:9px;color:var(--ink);margin:36px 29.7px}
.bb-safearea__logo .logo-mark,.bb-safearea__logo .logo-word{display:block;height:56px;width:auto}
.bb-safearea figcaption{font-size:13px;color:var(--muted);max-width:64ch;line-height:1.6}
@media (max-width:700px){
  .bb-safearea__gl--t{top:24px}.bb-safearea__gl--b{bottom:24px}.bb-safearea__gl--l{left:19.8px}.bb-safearea__gl--r{right:19.8px}
  .bb-safearea__unit{width:19.8px;height:24px}
  .bb-safearea__logo{margin:24px 19.8px}
  .bb-safearea__logo .logo-mark,.bb-safearea__logo .logo-word{height:36px}
}

.bb-vision__h{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,2.5vw,28px);line-height:1.2;color:var(--ink);margin:clamp(30px,4vw,46px) 0 14px}
.bb-prose--vision p{max-width:72ch}
.bb-vchart{margin:clamp(8px,1.6vw,18px) 0 clamp(32px,4.5vw,52px)}
.bb-vchart svg{display:block;width:100%;height:auto}
.bb-vchart svg.bb-vchart__m{display:none}
.bb-vchart .bbv-line{stroke:var(--ink);fill:none}
.bb-vchart .bbv-mark{fill:var(--ink)}
.bb-vchart .bbv-route{stroke:var(--ink);stroke-width:2.5;fill:none;stroke-dasharray:8 9;stroke-linecap:round}
.bb-vchart .bbv-star{fill:var(--coral)}
.bb-vchart .bbv-label{font-family:var(--font-body);font-weight:500;fill:var(--ink)}
.bb-vchart .bbv-label--strong{font-weight:700}
.bb-vchart .bbv-depth{font-family:var(--font-body);font-style:italic;font-size:12px;fill:var(--ink);opacity:.32}
@media (max-width:700px){.bb-vchart svg.bb-vchart__d{display:none}.bb-vchart svg.bb-vchart__m{display:block}}
/* Piirtoanimaatio: bb-nav.js lisää .anim-armed vain kun prefers-reduced-motion EI ole
   päällä (ja JS on käytössä) → ilman JS:ää/liikerajoituksella kartta on aina staattinen. */
@media (prefers-reduced-motion:no-preference){
  /* Vaiheistus: syvyysmerkinnät häivähtävät esiin → reitti piirtyy → poijut
     labeleineen nousevat reitin tahdissa → pohjantähti syttyy ja saa tuikkeen. */
  .bb-vchart.anim-armed .bbv-env{opacity:0}
  .bb-vchart.anim-armed.is-inview .bbv-env{opacity:1;transition:opacity 1.6s ease .1s}
  .bb-vchart.anim-armed .bbv-reveal{stroke-dashoffset:1}
  .bb-vchart.anim-armed.is-inview .bbv-reveal{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1) .5s}
  .bb-vchart.anim-armed .bbv-pop{opacity:0;transform:translateY(7px)}
  .bb-vchart.anim-armed.is-inview .bbv-pop{opacity:1;transform:none;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
  .bb-vchart.anim-armed.is-inview .bbv-pop--1{transition-delay:.55s}
  .bb-vchart.anim-armed.is-inview .bbv-pop--2{transition-delay:1.7s}
  .bb-vchart.anim-armed.is-inview .bbv-pop--3{transition-delay:2.8s}
  .bb-vchart.anim-armed .bbv-starwrap{opacity:0}
  .bb-vchart.anim-armed.is-inview .bbv-starwrap{opacity:1;transition:opacity 1s ease 3.2s}
  .bb-vchart.anim-armed .bbv-star{transform-box:fill-box;transform-origin:center}
  .bb-vchart.anim-armed.is-inview .bbv-star{animation:bbvGlint 1.5s ease 3.3s 1,bbvTwinkle 7s ease-in-out 5.5s infinite}
}
@keyframes bbvGlint{0%{transform:scale(.85)}55%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes bbvTwinkle{0%,100%{opacity:1}50%{opacity:.7}}

/* ---- Richtext-taulukot (mm. tietosuojaselosteen alihankkijalista) ---- */
.richtext table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14.5px}
.richtext th{font-family:var(--font-label);font-weight:400;font-size:12px;text-transform:uppercase;letter-spacing:.1em;text-align:left;color:var(--muted);padding:9px 12px;border-bottom:1.5px solid var(--ink)}
.richtext td{padding:10px 12px;border-bottom:1px solid var(--hair);vertical-align:top;line-height:1.55;color:var(--text-2)}
.richtext h4{font-family:var(--font-display);font-weight:700;font-size:17.5px;margin:26px 0 8px;color:var(--ink)}

.bb-dl{margin:clamp(24px,3vw,34px) 0 clamp(28px,3.5vw,40px);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.bb-dl__btn{font-size:15px}
.bb-dl__note{font-size:13px;color:var(--muted);line-height:1.6;max-width:66ch}

/* ---- Dokumenttimaiset lakisivut: keskitetty tekstipalsta intron alla ---- */
.om-intro + .rikas--doc{padding-top:clamp(8px,1.5vw,20px)}
.rikas--doc .richtext{max-width:76ch;margin-left:auto;margin-right:auto}

/* ---- Brändikäsikirja mobiilissa ---- */
@media (max-width:640px){
  .bb-chap-head{flex-wrap:wrap;row-gap:6px}
  .bb-chap-title{font-size:clamp(30px,11vw,52px);overflow-wrap:break-word;hyphens:auto}
  .bb-cover__title{font-size:clamp(36px,11vw,52px)}
}
/* Lakisivujen taulukot kapealla: vieritettävät (solut eivät mahdu riviin) */
@media (max-width:700px){
  .richtext table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ============================================================
   404 — "Taisit eksyä kurssilta." Käyttää etusivun hero-asettelua
   ja -merta 1:1 (.hero / .hero-sea / .hero-clouds / .hero-dawn).
   Vain 404-erot alla: coral eyebrow, kaukoputkiperämies, kelluva laiva.
   ============================================================ */
.nf-eyebrow{color:var(--coral)}
.nf__dot{color:var(--coral)}
.hero__mate .nf-mate-svg{height:clamp(96px,12vh,144px);width:auto;aspect-ratio:auto;display:block;overflow:visible;pointer-events:none}
.nf-mate-svg path,.nf-mate-svg circle{pointer-events:auto}
.nf__cta{display:inline-flex;align-items:center;gap:9px;margin-top:28px;font-family:var(--font-body);font-weight:700;font-size:17px;color:var(--coral);transition:gap .2s var(--ease-out),color .2s var(--ease-out)}
.nf__cta:hover{color:var(--ink);gap:14px}
/* Kuten etusivun ensinäkymä: taustalla KORALLI hero-meri (hero-sea, GEO_DEFAULT).
   Footerin sininen finaalimeri (560px korkea, aaltoharja ~215px footerin yläpuolella)
   painetaan taitteen ALLE ylimääräisellä hero-korkeudella, jottei se peitä korallia
   ensinäkymässä — footeriin skrollattaessa merisiirtymä on sama saumaton kuin muualla. */
.nf-hero{min-height:calc(100vh + 300px)}
/* 404 EI käytä etusivun hero-kohtauksen scroll-mekaniikkaa: ei sticky-pinnausta,
   ei scroll-timeline-maskia (heroClip) eikä sisällön kutistusta (heroShrink) →
   laiva ei "katoa scrollatessa". (JS-hero-klippi ohitetaan hero-sea.js:ssä IS_404.) */
body.error404 .nf-hero{position:relative;top:auto;-webkit-mask-image:none;mask-image:none;animation:none}
body.error404 .hero__inner{animation:none}
/* Tumma koralli (#EC8677 = hero-meren tummin kerros) täyttää hero-meren pohjan ja
   footerin sinisten aaltojen VÄLIN: poistaa vaalean korallikajastuksen sinisten
   takaa (desktop) ja kermavälin korallin ja sinisten välistä (mobiili). Alkaa
   selvästi etuaallon aallonpohjan (~94 vh) alapuolelta → ei leikkaa eläviä aaltoja;
   z-1 (aaltojen ja laivan takana), jatkuu footerin alle (footer peittää ylijäämän). */
.nf-sea-fill{position:absolute;left:0;right:0;top:96vh;height:90vh;background:#EC8677;z-index:-1;pointer-events:none}
/* 404: footerin korallikajastus (sarastusliuku) pois → siniset aallot nousevat
   suoraan tummasta korallista (yllä), ei vaaleaa sävyä niiden takana. */
body.error404 .sea-finale{background:transparent}
/* Etummaisen (tummimman) koralliaallon KOPIO laivan PÄÄLLE (z-index:2) → laiva jää
   tummimman aallon taakse (runko häviää aallon harjan alle). Sama geometria kuin
   .hero-sea; polku piirretään hero-sea.js:ssä (synkassa varsinaisen meren kanssa). */
/* Etuaalto laivan eteen mutta merikerroksissa (z-1, kartta-arkin ALLA), jotta
   kartta-arkin viivaimet + pysty/keskiviivat + neatline (z0) piirtyvät sen ja
   laivan päälle koko korallikaistalla. Aalto istuu laivan (z-1, DOM:issa ennen)
   JÄLKEEN → peittää rungon vesirajan. */
.nf-wave-front{position:absolute;top:0;left:0;right:0;height:110vh;z-index:-1;pointer-events:none;overflow:hidden}
@media (max-width:640px){.nf-wave-front{height:100vh}}
/* Laiva kelluu KORALLIaaltojen pinnalla; ankkuroitu TAITTEESEEN (top vh) eikä
   hero-laatikon pohjaan, joten lisätty hero-korkeus ei pudota sitä. Navy runko
   erottuu korallista. Isolla ruudulla suurempi (täyttää tilaa); upotettu aaltoihin
   (etuharja ~91 vh, takaharja ~82 vh → runko istuu selvästi vedenpinnan alle).
   Keinunta + kallistus ajetaan hero-sea.js:ssä (driveShip) → reagoi hover-aaltoihin. */
.nf-ship{position:absolute;left:50%;top:64vh;width:clamp(210px,34vw,min(760px,52vh,92vw));transform:translateX(-50%);transform-origin:50% 72%;z-index:-1;pointer-events:none}
.nf-ship img{width:100%;height:auto;display:block}
/* Pystysijainti (vesiraja aina samassa kohtaa runkoa, uppoamistaso vakio) ajetaan
   JS:ssä (driveShip); yllä oleva top on vain esilatausarvo. Koko: iso ruutu → isompi
   laiva täyttää tyhjää tilaa, MUTTA 92vw estää vaakaylivuodon (mobiili) ja 52vh pitää
   404-kärjen "Palaa etusivulle" -tekstin alapuolella. */


/* ── HERON INLINE-CHAT NÄYTTÄÄ SIVUSTON OMALTA KYSYMYSKENTÄLTÄ ─────────────
   Arvot ovat samat kuin .hero__askilla tässä tiedostossa (rivit ~419): sama
   paperitausta, sama 1,5 px navy-reunus, sama koralli-offset-varjo, sama
   14 px pyöristys ja sama padding. Kenttä ON osa heron taittoa, joten se ei
   voi näyttää widgetiltä.

   !important on välttämätön eikä laiskuutta: widget asettaa nämä REACTIN
   inline-tyyleinä (background:#fff, borderRadius, boxShadow), ja inline-tyyli
   voittaa tyylitiedoston ilman sitä. Vaihtoehto olisi ollut lisätä neljä uutta
   ulkoasukenttää sopimukseen — mutta heron ilme on TEEMAN asia, ei
   vuokralaisen säädettävä, joten se kuuluu tänne. */
/* CTA:n linjaus: EI MAGISTA LUKUA.
   Aiemmin tassa oli min-height:62px ja kommentti jonka laskutoimitus oli
   virheellinen (7+7+48+3 = 65, ei 62) — eika kumpikaan luku ollut se mika
   koodissa toteutui: *{box-sizing:border-box} (main.css:35) tekee pillerin
   ulkokorkeudesta 63,5px kokoontaitettuna ja 64,5px laajennettuna, joten
   kiintea 62px sai CTA:n alalaidan HYPPAAMAAN pikselin kun kavija kirjoitti
   ensimmaisen viestin.
   align-items:stretch antaa taydellisen korkeustasmayksen ilman yhtaan lukua,
   ja se vaihdetaan flex-startiksi VAIN laajennetussa tilassa jossa venyminen
   olisi vaara. Sama attribuutti kuin muualla. */
.hero__actionrow:has(.hero__chat[data-am-expanded]){align-items:flex-start}

/* ── SYÖTERIVIN LEVEYS LUKKOON ENNEN ENSIMMÄISTÄ PIIRTOA ──────────────────
   PORTATTU D&B:stä: glitter.css:2106-2112 `.db-hero__audit-embed
   .db-inline-root{max-width:100%!important}` — sama ongelma, sama ratkaisu,
   sama !important-peruste.

   MITATTU NYTKÄHDYS. Widget mountaa ASIAKASPUOLEN OLETUKSILLA ennen kuin
   config-kierros on valmis ja renderöi inline-juureensa Reactin INLINE-tyylin
   `max-width: var(--am-inline-max-width)`. entry.tsx sanoo syyn itse
   (rivit 9-13): "ulkoasuasetukset tulevat vasta istuntovastauksessa, eli
   verkkokierroksen jälkeen".

   Aikajana mitattuna tuotannosta (rAF-otanta, ankkuri 593,7px):
     t=~30ms    muuttuja 720px (appearance.ts:163 DEFAULT_APPEARANCE)
                → ei pure 593,7px ankkuriin → pilleri 593,7px
     t=~2000ms  muuttuja 560px (lisenssin arvo) → PUREE → pilleri 560,0px
   Δ = 33,7px, ja käyttäjän havainto oli 1197 → 1163 eli ~34px. Täsmää.

   HUOM mekanismista: muuttuja EI ole ensimmäisessä ruudussa määrittelemätön —
   asiakaspuolen oletus on 720px. Näkyvä lopputulos on sama (720px ei pure
   593,7px:ään sen enempää kuin `none`), mutta ero olisi havaittava jos ankkuri
   ylittäisi 720px. Se vaatisi CTA:n kapenemisen alle 104px:ään
   (.hero__actionrow max-width 840px, main.css:412), joten nykyisellä
   sisällöllä ei.

   CTA ei liikkunut koska .hero__actionrow on kiinteä max-width ja
   .hero__trialrow on flex-shrink:0 — kapeneminen tapahtui kokonaan ankkurin
   sisällä. Juuri se selittää havainnon "CTA pysyy paikallaan".

   !important on pakollinen eikä laiskuutta: vastapuoli on inline-tyyli. Arvo
   tulee tyylitiedostosta joka on <head>issä, eli se on voimassa
   ENSIMMÄISESTÄ ruudusta — molemmat tilat ovat nyt identtiset. 100% eikä
   pikseliluku: ankkurin leveys on flex-grow'n tulos ja riippuu ikkunasta,
   joten yksikään kiinteä px-arvo ei voi osua siihen. Samalla katoaa pysyvä
   33,7px vaje. Heron leveys on TEEMAN asia; lisenssin inlineMaxWidth jää
   voimaan muille upotuspaikoille. */
.hero__chat .am-widget-inline{max-width:100%!important}

/* ── HERON CHAT: PILLERI ON VAIN SYÖTERIVI, KUPLAT OVAT PALJAINA ───────────
   Mallissa (donbranco.fi) viestikuplat ovat sivun virrassa ilman ympäröivää
   korttia, ja vain syöterivi on pilleri. Widget ei enää piirrä korttia
   inline-tilassa lainkaan (tausta läpinäkyvä, ei reunusta, ei varjoa,
   overflow:visible), joten pillerin tyyli kuuluu tähän — syöteriville. */
.hero__chat .am-inputrow{
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:14px;
  box-shadow:6px 6px 0 rgba(232,92,74,.28);
  padding:7px 7px 7px 20px!important;
  transition:box-shadow .2s var(--ease-out),transform .2s var(--ease-out);
}
.hero__chat .am-inputrow:focus-within{
  box-shadow:8px 8px 0 rgba(232,92,74,.38);
  transform:translate(-1px,-1px);
}
.hero__chat .am-inputrow > div{gap:8px!important}

/* Kenttä: läpinäkyvä ja reunukseton — reunus on pillerillä. */
.hero__chat .am-input{
  background:transparent!important;border:0!important;outline:none!important;
  font-size:17px!important;font-weight:500!important;color:var(--ink)!important;
  padding:9px 0!important;
}
.hero__chat .am-input::placeholder{color:var(--muted)!important}

/* Lähetysnappi: navy pyöristetty suorakulmio, ei pyöreä pallo. */
/* > div > button EIKA pelkka button: .am-inputrow'n SUORIA lapsia ovat myos
   asiantuntijoiden varausnapit (Widget.tsx:904-916, width:100%,
   background:var(--am-bk-btn)) ja tietosuojarivi. Lahetysnappi on sisemman
   flex-divin sisalla (Widget.tsx:874-901). Laveampi valitsin litisti
   varausnapit 52x48 laatikoiksi ja maalasi ne hoverissa koralliksi — olemassa
   oleva vika joka laukesi kun booking_available on tosi JA keskustelu on
   laajentunut. */
.hero__chat .am-inputrow > div > button{
  width:52px!important;height:48px!important;flex:0 0 52px!important;
  border-radius:10px!important;
  /* Vari myos lukkoon, samasta syysta kuin leveys yllaa: widget mountaa
     asiakaspuolen oletuksella (--am-send-bg #0f172a) ja vaihtaa sen vasta
     istuntovastauksessa, eli nappi valahti ~2 s eri varisena. Mitattu
     lisenssin arvo on #14304d = var(--ink), joten tama lukitsee lopputilan
     eika muuta sita. Ei riko :disabled-tilaa (widget himmentaa opacity:0.6:lla,
     Widget.tsx:893, ei taustavarilla). */
  background:var(--ink)!important;
}
.hero__chat .am-inputrow > div > button:hover{background:var(--coral)!important}

/* Viestivirta: ilmaa kuplien ja pillerin väliin, ei omaa vieritystä. */
.hero__chat .am-stream{margin-bottom:14px}
.hero__chat .am-stream:empty{display:none;margin:0}

/* ── VIESTIT TYÖNTÄVÄT AALTOJA ALAS ───────────────────────────────────────
   MITATTU ESTE. .hero on `position:sticky; top:0` + `overflow:hidden` +
   scroll-ohjattu mask-image (--heroCut / heroClip). Se on sivun tunnusomainen
   efekti, MUTTA pinnattu ja leikattu osio ei voi kasvaa: viestit jäisivät
   maskin alle eivätkä työntäisi mitään.

   Purku tehdään VAIN kun keskustelu on auennut. Widget asettaa
   data-am-expanded-attribuutin inline-ankkuriin (sopimus, ks. Widget.tsx),
   joten scroll-efekti säilyy kaikille jotka eivät aloita keskustelua — sitä ei
   uhrata ominaisuudelle jota useimmat eivät käytä.

   Kaikki neljä on purettava: sticky pinnaa, overflow leikkaa, mask haivuttaa
   ja animation ajaa maskia. Yhden jättäminen riittää peittämään viestit. */
.hero:has(.hero__chat[data-am-expanded]){
  position:static;
  overflow:visible;
  -webkit-mask-image:none;
  mask-image:none;
  animation:none;
  /* clip-path on VIIDES este ja se oli puuttunut talta listalta. Se on myos
     ainoa joka on paalla KAIKISSA desktop-selaimissa: sticky, mask ja
     animation ovat @supports(animation-timeline)-lohkon sisalla, clip-path
     tulee JS:sta joka ei kysy tukea keneltakaan.
     !important on tassa PAKOLLINEN eika laiskuutta: vastapuoli on
     hero-sea.js:n asettama INLINE-tyyli, jonka vain !important voittaa.
     hero-sea.js lakkaa myos itse asettamasta sita (sama attribuuttiehto), eli
     tama on kaksinkertainen varmistus — JS voi olla estetty tai vanhentunut
     valimuistista. */
  clip-path:none!important;
  /* min-height, EI height. Aiemmin tassa oli height:auto joka on NO-OP:
     .herolla ei ole missaan height-maarittelya. Rajoite on min-height:100vh
     (main.css:318), ja juuri se jattaa tyhjaa tilaa syoterivin alle lyhyella
     keskustelulla. */
  min-height:0;
  padding-bottom:clamp(48px,6vw,88px);
}
/* heroShrink skaalaa .hero__inneria scrollissa (scale .955). Laajennetussa
   tilassa se kutistaisi keskustelua kesken lukemisen, ja murto-osapikselin
   skaalaus sumentaa 1,5px reunukset. */
.hero:has(.hero__chat[data-am-expanded]) .hero__inner{animation:none;transform:none}

/* ── KULMAWIDGET JA VIHJE VASTA HERON JÄLKEEN ─────────────────────────────
   Kaksi sisäänmenoa yhtä aikaa ruudulla on hämmentävä: heron kysymyskenttä ja
   kelluva kupla ovat sama keskustelu kahdessa paikassa.

   Tarkkaillaan HERON KENTTÄÄ, ei heroa eikä sen jälkeistä sentineliä. Kaksi
   aiempaa yritystä ja miksi ne eivät toimineet:
     1. section.hero on `position:sticky` → ei poistu ruudusta, isIntersecting
        oli tosi vielä 1600 px alaspäin ja kupla jäi ikuisesti piiloon.
     2. Nollakorkuinen sentineli heron jälkeen: sticky-heron asettelulaatikko on
        lyhyempi kuin sen visuaalinen alue → sentineli näkyi jo alussa eikä
        luokkaa asetettu lainkaan.
   Heron kenttä on täsmälleen se pinta jonka rinnalla kuplaa ei haluta.

   visibility+opacity eikä display:none: display purkaisi asettelun ja
   aiheuttaisi hyppäyksen paluussa. pointer-events:none on se osa joka tekee
   piilotetusta myös klikkaamattoman — ilman sitä näkymätön kupla nappaisi
   klikkauksia heron päältä. */
/* ── SISAANTULOANIMAATIO — PORTATTU LAHTEESTA, JA SE ON TRANSITIO ─────────
   Lahteessa (AgentWidget.tsx:4826-4839) tama EI ole @keyframes vaan TRANSITIO
   kelluvan kontissa: opacity 0->1, translateY(40px)->0, scale(.85)->1,
   blur(6px)->0. Sisaan 500ms cubic-bezier(.34,1.56,.64,1) (ylilyova jousi),
   blur 400ms; ulos 250ms ease-out. Ei viivetta, ei porrastusta — kupla ja
   nappi liikkuvat yhdessa koska transitio on niiden YHTEISESSA kontissa.

   TRANSITIO EIKA ANIMAATIO ON SE OSA JOKA TEKEE TASTA TOISTOKELPOISEN: luokan
   kaanto interpoloi siita arvosta jossa elementti sillä hetkellä on, joten
   kesken jaanyt paluu jatkaa siita eika nykaise alkuun. @keyframes alkaisi
   joka kerta nollasta.

   TRANSFORM JA FILTER OVAT LAPSESSA, EIVAT JUURESSA, ja tama on MITATTU
   pakko: #ayematey-widget-root on staattinen div ja kaynnistin sen sisalla on
   position:fixed. transform tai filter juuressa luo containing blockin
   fixedille ja lennattaa kaynnistimen ruudun ulkopuolelle — mitattu top
   760 -> 6490 px 900px korkeassa ikkunassa. Juureen jaa vain opacity ja
   visibility, jotka eivat luo containing blockia.

   :not(.am-widget) rajaa avatun paneelin ulos: se on oma kelluva kontti eika
   sen kuulu liukua sisaan hero-tilan mukana. PAATOS joka on kirjattava eika
   jatettava valitsimen sivuvaikutukseksi: avattu paneeli KATOAA kun hero
   palaa ruutuun, koska piilotus on juuritasolla. Sama kuin ennen tata
   muutosta; lahde jattaisi sen nakyviin, mutta talla sivustolla hero-tila
   omistaa oikean alakulman.

   KORJAUS AIEMPAAN KOMMENTTIIN: tassa luki ennen etta "pointer-events on se
   osa joka tekee piilotetusta myos klikkaamattoman". Se on VAARIN. Widgetin
   lapset palauttavat pointer-events:auto itselleen (kontti, kaynnistin,
   kupla), joten juuren pointer-events:none ei koskaan estanyt klikkausta —
   sen tekee visibility:hidden, joka periytyy eika sita kumota missaan. */
#ayematey-widget-root{
  opacity:1;visibility:visible;
  transition:opacity .5s cubic-bezier(.34,1.56,.64,1),visibility .5s;
}
html.am-hero-visible #ayematey-widget-root{
  opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease-out),visibility .25s;
}
#ayematey-widget-root > div:not(.am-widget){
  transform:translateY(0) scale(1);filter:blur(0);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),filter .4s var(--ease-out);
}
html.am-hero-visible #ayematey-widget-root > div:not(.am-widget){
  transform:translateY(40px) scale(.85);filter:blur(6px);
  transition:transform .25s var(--ease-out),filter .25s var(--ease-out);
}

/* NYTKAHDYSKELLO PYSAHTYY KUN KUPLA ON PIILOSSA, ja tama on koko
   "ei nytkahda" -oireen juurisyy. visibility:hidden EI pysayta CSS-animaatiota:
   am-launcher-nudge on 30s x 3 = 90s MOUNTISTA laskien, ja kello kaynnistyy
   sivun latauksessa jolloin hero on ruudussa ja kupla piilossa. Kavija joka
   skrollaa heron ohi 90 sekunnin jalkeen ei nahnyt pomppua KERTAAKAAN.
   Pysaytys korjaa sen ILMAN etta toistoa tarvitsee muuttaa ikuiseksi: nyt
   kolme kierrosta ajetaan vain kun kupla on ruudulla, ja ensimmaiset nelja
   pomppua osuvat tasmalleen ilmestymishetkeen. Se on parempi kuin lahde,
   jossa kello juoksee taustalla. */
html.am-hero-visible #ayematey-widget-root .am-launcher-msg{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  /* Teeman globaali reduced-motion -saanto kattaa animationin mutta EI
     transitionia, joten sisaantulo on nollattava tassa erikseen. */
  #ayematey-widget-root > div:not(.am-widget),
  html.am-hero-visible #ayematey-widget-root > div:not(.am-widget){
    transform:none;filter:none;transition:none;
  }
  #ayematey-widget-root,
  html.am-hero-visible #ayematey-widget-root{transition:opacity .2s linear,visibility .2s}
}

/* ── VIHJE VAIN JOS KESKUSTELU ON TODELLA ALKANUT ─────────────────────────
   Vihje oli aiemmin niputettu kulmaikonin kanssa samaan sääntöön, eli se
   näkyi heti kun hero oli skrollattu ohi — myös kävijälle joka ei ollut
   kirjoittanut mitään. "Keskustelu on auki sisällössä" oli silloin VÄÄRÄ
   VÄITE, ja väärä väite on pahempi kuin puuttuva vihje.

   Nippu on purettu: kulmaikonin näkyvyys ei muutu lainkaan (se näkyy heron
   jälkeen aina), vihje saa oman ehtonsa.

   Ehto on .hero__chat[data-am-expanded]. Widget asettaa sen täsmälleen kun
   thread sisältää vähintään yhden role==='user' -viestin (Widget.tsx:239,271)
   ja POISTAA sen kun ei sisällä. Tarkistettu ettei signaali voi olla väärä:
   Widget ei palauta keskustelua mistään, eikä palautuspolkua ole olemassa:
   setMessages-kutsupaikat ovat Widget.tsx:385 (tervehdys, role 'model'), 413,
   429 ja 431 — kaikki paikallisia — ja historia kulkee VAIN asiakkaalta
   palvelimelle (api.ts:692 history, :707 body). Yksikään vastaus ei palauta
   transkriptiä, eikä upotuksen localStorage koske viesteihin (api.ts:796 =
   visitorId, popups/storage.ts = popupien esiintymistiheys). Sama pätee
   TUOTANNON bundleen. Attribuutti ei siis voi olla olemassa ilman että kävijä
   on lähettänyt viestin TÄSSÄ sivulatauksessa. Botin tervehdys ei riitä, koska
   se ei ole role==='user'.

   Spesifisyys kantaa järjestyksen, ei lähdejärjestys. :has() saa
   spesifisimmän argumenttinsa spesifisyyden, ja [data-am-expanded] on
   luokkatason komponentti:
     näyttö    html:has(.hero__chat[data-am-expanded]) .am-inline-hint
               = html(0,0,1) + :has(0,2,0) + .am-inline-hint(0,1,0) = (0,3,1)
     piilotus  + .am-hero-visible                                   = (0,4,1)
   Piilotus voittaa siis lähdejärjestyksestä riippumatta.
   :has() on jo tämän tiedoston oletus (ks. .hero:has(...) yllä).
   Luokan html.am-hero-visible asettaa site.js (IntersectionObserver
   .hero__chatista) — CSS hoitaa ehdon, mutta ei kumpaakaan yksin. */
.am-inline-hint{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease-out),visibility .25s var(--ease-out);
}
html:has(.hero__chat[data-am-expanded]) .am-inline-hint{
  opacity:1;visibility:visible;
}
html.am-hero-visible:has(.hero__chat[data-am-expanded]) .am-inline-hint{
  opacity:0;visibility:hidden;
}

/* KAKSI KUPLAA EI SAA OLLA YHTA AIKAA. Widget nayttaa kaynnistimen vieressa
   aloituspuhekuplan (launcherMessage, "Ahoy! Kysy mita vain."), ja teema
   nayttaa SAMASSA paikassa vihjeen kun keskustelu on auki herossa. Ne ovat
   sama pinta kahdella eri viestilla, joten tervehdys vaistyy heti kun
   keskustelu on alkanut — silloin vihje on se tosi ja tarkeampi vaite.
   Selektori on rakenteellinen samasta syysta kuin lisenssin omassa CSS:ssa:
   widget ei anna kuplalle luokkaa. */
html:has(.hero__chat[data-am-expanded]) #ayematey-widget-root > div > span{
  display:none;
}

/* ── KULMAIKONIN VIHJE KUN KESKUSTELU ON HERON SISÄLLÄ ─────────────────────
   Mallissa (donbranco.fi) kulmaikoni pysyy SULJETTUNA ja sen vieressä on
   vihje siitä että keskustelu on jo auki sisällössä. Ilman vihjettä kävijä
   näkee kaksi sisäänmenoa eikä tiedä että ne ovat sama keskustelu.

   Vihje on TEEMAN elementti eikä widgetin: vain teema tietää että tällä
   sivulla on hero-inline, ja vain teema tietää sivun kielen. Widgetissä ei ole
   i18n-kerrosta, joten sinne kovakoodattu suomenkielinen vihje näkyisi myös
   muiden vuokralaisten sivustoilla väärällä kielellä.

   EHTO ON KAKSIOSAINEN, ja tässä luki aiemmin vain toinen puoli ("elementti on
   olemassa vain kun hero renderöi chat-ankkurin, joten pelkkä CSS riittää").
   Juuri se puolitotuus päästi väärän väitteen läpi: vihje näkyi jokaiselle joka
   skrollasi heron ohi, myös kirjoittamatta mitään.
     1. ELEMENTTI tulostuu vain hero-lipulla (hero.php:65 → functions.php:43).
        Tämä rajaa SIVUT.
     2. NÄKYVYYS vaatii lisäksi että kävijä on LÄHETTÄNYT viestin
        (.hero__chat[data-am-expanded], widgetin asettama) JA että hero ei ole
        ruudussa (html.am-hero-visible, jonka site.js:n IntersectionObserver
        asettaa ja poistaa). Tämä rajaa HETKEN, ja se on yllä olevissa kolmessa
        :has()-säännössä.
   Vihjeellä ei ole omaa JS:ää, mutta ehto 2 EI ole pelkkää CSS:ää: ilman
   site.js:ää luokka am-hero-visible ei tule koskaan, jolloin vihje näkyisi myös
   heron päällä heti kun kävijä lähettää viestin. ÄLÄ poista yllä olevia
   sääntöjä olettaen että PHP-lippu riittäisi — lippu ei tiedä keskustelusta
   mitään.
   Piiloon mobiilissa, jossa kulmaikonin viereen ei mahdu. */
/* SIJAINTI SEURAA WIDGETIN KUPLAA, EI OLE OMA VALINTA. Widgetin
   aloituspuhekupla siirtyi kaynnistimen vasemmalta puolelta sen YLAPUOLELLE
   (porttaus D&B:sta), ja yllaoleva kommentti julistaa naan kaksi SAMAKSI
   pinnaksi kahdella eri viestilla. Jos vihje jaa right:88px -paikalleen,
   vaite on vaara: kupla katoaa napin ylta ja vihje ilmestyy sen viereen, eli
   kavija nakee kaksi eri asiaa kahdessa eri paikassa.

   LUVUT ON JOHDETTU WIDGETIN OMISTA MITOISTA eivatka silmamaaraisesti:
   kelluva kontti on bottom:20px right:20px, kaynnistin on 56px korkea
   (--am-launcher-size, medium) ja kuplan margin-bottom on 24px, joten kuplan
   alareuna on 20+56+24 = 100px alalaidasta ja sen oikea reuna 20px oikeasta
   laidasta. Vihje asettuu samaan pikseliin.

   HUOM: jos lisenssin "Kaynnistimen koko" vaihdetaan (small 48 / large 64),
   tama luku on paivitettava — 56 on kovakoodattu tassa koska teema ei nae
   lisenssin arvoa. Kaynnistimen korkeus on mitattavissa:
   getComputedStyle(document.querySelector('.am-launcher')).height

   RADIUS 14px EIKA 999px, samasta syysta kuin kuplassa: pillerin paatykaari
   on korkeus/2 eika istu sakaran juureen, ja kahden pinnan on nayttava
   samalta jotta vaihto on huomaamaton. */
.am-inline-hint{
  position:fixed;right:20px;bottom:100px;z-index:2147482999;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--hair);border-radius:14px;
  padding:8px 14px;font-size:12.5px;font-weight:600;
  box-shadow:0 6px 18px rgba(20,48,77,.14);
  pointer-events:none;white-space:nowrap;
}
@media (max-width:900px){.am-inline-hint{display:none}}