/* ==========================================================================
   palvelut.css — palvelusivujen (fi + en, 8 sivua) ja ravintolasivujen (11.10.2026)
   yhteinen pohja. Tokenit ovat index.html:n :rootin arvot; asiantuntijasivut ja 404.html
   pitävät omansa, mutta nämä sivut jakavat saman rakenteen, joten kopiot samasta tyylistä
   ajautuisivat. Sivukohtainen kuvitus (koostumus, elävä
   elementti) on kunkin sivun omassa <style>-lohkossa.
   Rakenne: hero → osiot (numeroitu .sn) → prosessi → kysyttyä (+ FAQPage) → yhteys.
   ========================================================================== */
@font-face{font-family:'Laraz';src:url('/fonts/Laraz-Regular.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('/fonts/SpaceGrotesk-latin.woff2') format('woff2');font-weight:300 700;font-display:swap;}
@font-face{font-family:'VanDoesburg';src:url('/fonts/VanDoesburgArchiType-Regular.woff2') format('woff2');font-display:swap;}

:root{
  --paper:#ECE8DF; --ink:#141310; --ink-soft:#55524A;
  --red:#F55141; --blue:#5A4BFF; --mustard:#E0AC3A;
  --accent-sm:#4A3CE0; --red-deep:#d8271f; --navy:#0B3F78;
  --hair:rgba(20,19,16,.16);
  --disp:'Laraz',sans-serif; --body:'Space Grotesk',sans-serif; --mark:'VanDoesburg',sans-serif;
  --s1:8px; --s2:12px; --s3:20px; --s4:32px; --s5:48px; --s6:64px;
  --e-out:cubic-bezier(.22,1,.3,1); --e-inout:cubic-bezier(.65,0,.35,1); --e-pop:cubic-bezier(.3,1.4,.5,1);
  /* liikeasteikko = index.html:n :root. Ei uusia kestoja eikä käyriä. */
  --t-in:.14s; --t-out:.3s; --t-quick:.28s; --t-base:.48s; --t-slow:.8s; --stagger:60ms;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--paper);scroll-behavior:smooth;}
body{font-family:var(--body);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--s3);}
@media(min-width:821px){.wrap{padding:0 var(--s4);}}
a,button,summary{transition:color var(--t-out),background-color var(--t-out),border-color var(--t-out);}
a:active,button:active,summary:active{opacity:.72;}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent-sm);outline-offset:3px;}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:60;}
.skip:focus{left:0;}

header.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--s3) 0;border-bottom:1.5px solid var(--ink);}
.site{display:flex;align-items:center;gap:var(--s2);}
/* Sanamerkki punaisena kuten etusivun wordmark. Logotyyppi on WCAG 1.4.3:n poikkeus, joten
   --red (≈3:1 paperia vasten) on sallittu; hover tummenee --red-deepiin eikä vaihda sävyä. */
.brand{display:inline-flex;align-items:center;min-height:44px;font:400 20px var(--mark);letter-spacing:.02em;color:var(--red);text-decoration:none;text-transform:lowercase;}
.brand:hover{color:var(--red-deep);}
.back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--s2);border-left:1.5px solid var(--hair);font:500 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;}
.back:hover{color:var(--accent-sm);}
.back i{font-style:normal;}
/* Murupolku = sivun oma BreadcrumbList näkyvänä (sama nimi ja kohde, generoitu siitä). */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;font:500 12px var(--body);letter-spacing:.06em;color:var(--ink-soft);}
.crumbs li{display:flex;align-items:center;}
.crumbs li+li::before{content:"/" / "";padding:0 var(--s1);color:var(--hair);}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-soft);text-decoration:none;}
.crumbs a:hover{color:var(--accent-sm);text-decoration:underline;}
.crumbs a[aria-current]{color:var(--ink);}
.langs{display:flex;gap:var(--s1);font:500 12px var(--body);letter-spacing:.12em;text-transform:uppercase;}
.langs a,.langs span{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;color:var(--ink-soft);border:1.5px solid transparent;}
.langs [aria-current]{color:var(--ink);border-color:var(--ink);}
.langs a:hover{color:var(--accent-sm);}

section{padding:var(--s6) 0;border-bottom:1.5px solid var(--hair);}
h2{font:400 clamp(26px,4.4vw,40px)/1.1 var(--disp);letter-spacing:-.01em;margin-bottom:var(--s3);}
.lede{color:var(--ink-soft);max-width:58ch;margin-bottom:var(--s4);}
.eyebrow{display:flex;align-items:center;gap:var(--s1);font:500 12px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s3);}
.eyebrow i{display:block;width:10px;height:10px;background:var(--red);}
.note{font-size:14px;color:var(--ink-soft);max-width:62ch;margin-top:var(--s4);}

.hero{padding:var(--s6) 0 var(--s5);border-bottom:1.5px solid var(--ink);}
.hero h1{font:400 clamp(34px,7.4vw,72px)/1.02 var(--disp);letter-spacing:-.02em;max-width:16ch;margin-bottom:var(--s3);}
.hero h1 em{font-style:normal;color:var(--red-deep);}
.hero p{font-size:clamp(16px,2vw,19px);color:var(--ink-soft);max-width:52ch;}
.pricebar{display:inline-flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-top:var(--s4);padding:var(--s2) var(--s3);border:1.5px solid var(--ink);font-size:15px;color:var(--ink) !important;}
.pricebar b{font-weight:700;}

.pcta{display:inline-flex;align-items:center;gap:var(--s1);font:500 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;border:1.5px solid var(--ink);padding:13px 22px;min-height:44px;margin-top:var(--s4);}
.pcta i{font-style:normal;color:var(--red);transition:transform var(--t-quick) var(--e-pop);}
.pcta:hover,.pcta:focus-visible{color:#fff;background:var(--red-deep);border-color:var(--red-deep);transition-duration:var(--t-in);}
.pcta:hover i,.pcta:focus-visible i{color:#fff;transform:translateX(6px);}

/* ---------- kaksi saraketta: teksti + faktat ---------- */
.split{display:grid;gap:var(--s4);}
@media(min-width:821px){.split{grid-template-columns:1.3fr 1fr;gap:var(--s5);}}
.split p + p{margin-top:var(--s2);}
.split .body p{color:var(--ink-soft);max-width:60ch;}
.list{list-style:none;border-top:1.5px solid var(--hair);}
.list li{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;border-bottom:1.5px solid var(--hair);font-size:15px;}
.list li span:last-child{white-space:nowrap;font-weight:500;}

/* ---------- prosessi ---------- */
.steps{list-style:none;}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:baseline;padding:var(--s3) 0;border-top:1.5px solid var(--hair);}
.step:last-child{border-bottom:1.5px solid var(--hair);}
.step::before{content:"";display:block;width:18px;height:18px;margin-top:2px;}
.step:nth-child(1)::before{background:var(--red);border-radius:50%;}
.step:nth-child(2)::before{background:var(--blue);}
.step:nth-child(3)::before{background:var(--mustard);clip-path:polygon(50% 0,100% 100%,0 100%);}
.step:nth-child(4)::before{border:2.5px solid var(--ink);border-radius:50%;}
.step h3{font:500 15px var(--body);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;}
.step p{font-size:15px;color:var(--ink-soft);}

/* ---------- kysyttyä ---------- */
.faq{border-top:1.5px solid var(--hair);}
.faq details{border-bottom:1.5px solid var(--hair);}
.faq summary{cursor:pointer;list-style:none;padding:var(--s3) 0;font:500 17px var(--body);display:flex;justify-content:space-between;gap:var(--s3);align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font:400 24px var(--body);color:var(--red);line-height:1;}
.faq details[open] summary::after{content:"−";}
.faq summary:hover{color:var(--accent-sm);}
.faq p{padding:0 0 var(--s3);color:var(--ink-soft);max-width:64ch;}

/* ---------- yhteys (sama tumma käännös kuin ravintolat.html) ---------- */
.contact{background:var(--navy);color:var(--paper);border-bottom:0;margin-top:var(--s6);}
.contact h2,.contact p{color:var(--paper);}
.contact .lede{color:#C7CDD6;}
.contact .ways{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4);}
.contact .ways a{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;padding:13px 22px;border:1.5px solid var(--paper);color:var(--paper);text-decoration:none;font:500 13px var(--body);letter-spacing:.14em;text-transform:uppercase;}
.contact .ways a:hover,.contact .ways a:focus-visible{background:var(--paper);color:var(--navy);}
.contact .ways a:focus-visible{outline-color:var(--paper);}

/* Muut palvelut: kolme riviä ennen yhteysosiota. Vain värin muutos hoverissa (RM-luokka §20). */
.others{border-bottom:0;padding-bottom:0;}
.others ul{list-style:none;border-top:1.5px solid var(--ink);}
.others a{display:grid;grid-template-columns:1fr auto;gap:4px var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1.5px solid var(--hair);color:var(--ink);text-decoration:none;}
.others b{font:400 clamp(20px,2.6vw,26px)/1.15 var(--disp);}
.others span{grid-column:1;color:var(--ink-soft);font-size:15px;}
.others i{grid-column:2;grid-row:1 / span 2;font-style:normal;font-size:20px;color:var(--red-deep);}
.others a:hover b,.others a:focus-visible b{color:var(--accent-sm);}
@media(min-width:821px){.others a{grid-template-columns:minmax(220px,1fr) 2fr auto;}.others span{grid-column:2;}.others i{grid-column:3;grid-row:1;}}

footer{padding:var(--s4) 0 calc(var(--s6) + 72px);font-size:14px;color:var(--ink-soft);}
@media(min-width:821px){footer{padding-bottom:var(--s6);}}
footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);}
footer a:hover{color:var(--accent-sm);}
footer .row{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s3);}

.callbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:var(--s1);padding:var(--s2);background:rgba(236,232,223,.96);border-top:1.5px solid var(--ink);}
.callbar a{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px;text-decoration:none;font:500 13px var(--body);letter-spacing:.1em;text-transform:uppercase;}
.callbar .primary{background:var(--red-deep);color:#fff;border:1.5px solid var(--red-deep);}
.callbar .secondary{border:1.5px solid var(--ink);color:var(--ink);}
@media(min-width:821px){.callbar{display:none;}}

/* ==========================================================================
   LIIKE. Kaikki piilotus on .js-luokan takana: ilman JS:ää sivu on staattinen ja
   täysin näkyvä. Paljastus odottaa .in-luokkaa (IntersectionObserver).
   Reduced motion (CSS-kysely, elävä): transformit pois, läpinäkyvyys jää — iOS:n
   oma tapa. Silmukat (koostumus, marquee, Sanity-demo) pysähtyvät JS:ssä rmQ:n
   ELÄVÄSTÄ arvosta, ei latauksen snapshotista.
   ========================================================================== */
.js [data-rv]{opacity:0;transform:translateY(24px);transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out);transition-delay:calc(var(--i,0) * var(--stagger) * 2);}
.js [data-rv].in{opacity:1;transform:none;}
/* maskipaljastus: sama ele kuin etusivun .msk/.rv */
.msk{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;}
.msk>.rv{display:inline-block;}
.js .msk>.rv{transform:translateY(105%);transition:transform var(--t-slow) var(--e-out);transition-delay:calc(var(--i,0) * var(--stagger) * 2);}
.js .hero.in .msk>.rv{transform:none;}

/* hero: teksti + koostumus */
.hero-grid{display:grid;gap:var(--s4);align-items:center;}
@media(min-width:821px){.hero-grid{grid-template-columns:1.25fr 1fr;gap:var(--s5);}}
.komp{position:relative;aspect-ratio:1;width:100%;max-width:400px;justify-self:center;container-type:inline-size;}
/* Palojen transform-siirtymä vasta kun sommitelma on asettunut (9.10.2026). Palat sijoitetaan
   cqw-yksiköillä, ja ennen ensimmäistä asettelua selain ratkaisee ne ruudun leveydestä (säiliötä
   ei vielä ole). Kun oikea leveys selvisi, siirtymä liu'utti palan väärästä alkukohdasta
   paikalleen: 320 px:llä pala osui hetkeksi 22 px ruudun yli ja sivu vuoti sivuttain.
   Sivun oma skripti lisää `.ready`-luokan kahden ruudun jälkeen. Läpinäkyvyys saa siirtyä
   heti. Mitattu: measure-motion osio 21. */
.komp:not(.ready) .pc{transition-property:opacity !important;}
@media(max-width:820px){.komp{max-width:260px;}}
/* osionumerot: porttien VanDoesburg-numeraali, kääntyy 360° kun osio saapuu (360:n
   monikerta → lepoasento on aina suora, sama sääntö kuin porteissa) */
/* width:fit-content: numero kääntyy paikallaan. Täysleveänä lohkona se kiersi rivin keskipisteen
   ympäri leveässä kaaressa, ja projektio vuoti käännön aikana jopa 233 px ruudun ohi (20.10.2026). */
.sn{display:block;width:fit-content;font:400 clamp(44px,6vw,72px)/1 var(--mark);color:var(--red);margin-bottom:var(--s2);}
.js .sn{transform:perspective(600px) rotateY(0deg);transition:transform 1.2s var(--e-inout);}
.js .sn.in{transform:perspective(600px) rotateY(360deg);}
section:nth-of-type(2) .sn{color:var(--blue);}
section:nth-of-type(3) .sn{color:var(--mustard);}
section:nth-of-type(4) .sn{color:var(--red);}
section:nth-of-type(5) .sn{color:var(--blue);}

/* prosessi: solmu ponnahtaa, rivin viiva piirtyy */
.js .step{border-top-color:transparent;background:linear-gradient(var(--hair),var(--hair)) 0 0/0 1.5px no-repeat;transition:background-size var(--t-slow) var(--e-inout);transition-delay:calc(var(--i,0) * var(--stagger) * 2);}
.js .step.in{background-size:100% 1.5px;}
.js .step::before{transform:scale(0);transition:transform var(--t-base) var(--e-pop);transition-delay:calc(var(--i,0) * var(--stagger) * 2 + .2s);}
.js .step.in::before{transform:none;}
.step:nth-child(4)::before{border-radius:50%;}

/* kysyttyä: avaus animoidaan JS:ssä (korkeus), merkki kääntyy */
.faq summary::after{transition:transform var(--t-base) var(--e-inout);}
.faq details[open] summary::after{content:"+";transform:rotate(135deg);}

/* yhteys: mitä ehdotus sisältää. Typografiaa suoraan navylle, ei laatikkoa: iso
   VanDoesburg-numeraali "2" (vastausaika arkipäivinä) kääntyy kuten portit, ja neljän sisällön
   rivit piirtyvät. Kuvitus (aria-hidden); sama sisältö sanotaan lede-kappaleessa. */
.c-grid{display:grid;gap:var(--s5);align-items:center;}
@media(min-width:821px){.c-grid{grid-template-columns:1.1fr 1fr;gap:var(--s6);}}
.inc{display:grid;grid-template-columns:auto 1fr;gap:0 var(--s4);align-items:end;}
.inc .num{width:fit-content;font:400 clamp(120px,15vw,190px)/.8 var(--mark);color:var(--mustard);}   /* fit-content: ks. .sn; alle 400 px:n sarake on täysleveä */
.inc .cap{font:500 12px var(--body);letter-spacing:.2em;text-transform:uppercase;color:#C7CDD6;padding-bottom:8px;}
.inc ol{grid-column:1/-1;list-style:none;margin-top:var(--s4);}
/* Kaksinumeroinen luku (auditoinnin 30) + "walkthrough" ei mahdu rinnakkain alle ~400 px:n:
   seo-ai-visibility-audit vuoti 357 px 320 px:n ruudussa (WCAG 1.4.10, measure-motion §21).
   Kapealla kuvateksti siirtyy luvun alle; sisältö ei muutu. */
@media(max-width:399px){.inc{grid-template-columns:1fr;}.inc .cap{padding:var(--s1) 0 0;}}
.inc li{position:relative;display:grid;grid-template-columns:18px 1fr;gap:var(--s3);align-items:center;padding:14px 0;font:400 clamp(20px,2.2vw,26px)/1.1 var(--disp);color:var(--paper);}
.inc li::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:rgba(236,232,223,.28);transform-origin:0 50%;}
.inc li:first-child::before{content:'';position:absolute;left:0;right:0;top:0;height:1.5px;background:rgba(236,232,223,.28);}
.inc li>i{width:16px;height:16px;display:block;}
.inc .g-r{border:2px solid var(--paper);border-radius:50%;}
.js .inc .num{transform:perspective(600px) rotateY(0deg);transition:transform 1.2s var(--e-inout);}
.js .inc.in .num{transform:perspective(600px) rotateY(360deg);}
.js .inc li::after{transform:scaleX(0);transition:transform var(--t-slow) var(--e-inout);transition-delay:calc(.3s + var(--i) * var(--stagger) * 3);}
.js .inc.in li::after{transform:none;}
.js .inc li>i{transform:scale(0);transition:transform var(--t-base) var(--e-pop);transition-delay:calc(.4s + var(--i) * var(--stagger) * 3);}
.js .inc.in li>i{transform:none;}

/* koostumuksen kuvateksti ja palvelumerkit: yhteiset kaikille sivuille */
.komp-l{position:absolute;left:0;bottom:-6px;font:500 12px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);}
.komp-l b{font:400 13px var(--mark);color:var(--ink);margin-right:8px;}
.g-c{border-radius:50%;background:var(--red);}
.g-s{background:var(--blue);}
.g-t{background:var(--mustard);clip-path:polygon(50% 0,100% 100%,0 100%);}
@media(prefers-reduced-motion:reduce){
  /* LUOKKA, ei elementtilista (measure-motion §20): RM:ssä siirtymä saa koskea vain
     läpinäkyvyyttä ja värejä. Elementtikohtaiset RM-säännöt jättivät aukkoja kolmena
     Codex-kierroksena peräkkäin (PR #83): kun RM kytkettiin kesken siirtymän, transform-
     siirtymä jatkoi kohti uutta arvoa. Sama periaate kuin index.html:n RM-väripalautteessa. */
  *,*::before,*::after{transition-property:opacity,color,background-color,border-color !important;animation:none !important;}
  .js .step{background-size:100% 1.5px;}
  html{scroll-behavior:auto;}
  .pcta i{transition:none;}
  .pcta:hover i,.pcta:focus-visible i{transform:none;}
  /* transformit pois, läpinäkyvyys jää */
  .js [data-rv]{transform:none;}
  .js .msk>.rv{transform:none;}
  .js .sn,.js .sn.in{transform:none;}
  .js .step::before{transform:none;}
  .faq summary::after{transform:none;}
  .faq details[open] summary::after{content:"−";}
  .komp .pc{transition:opacity var(--t-base);}
  .js .inc .num,.js .inc.in .num{transform:none;}
  .js .inc li::after{transform:none;}
  .js .inc li>i{transform:none;}
}

/* ==========================================================================
   TOIMIALASIVUT (ravintolat / restaurants 11.10.2026, asiantuntijat / experts 12.10.2026):
   demo on hinnasto. Asiantuntijoilla demo on vain Paketti S:llä; L on .side (alempana).
   Ensimmäinen näkymä: kaksi puhelinta oikeilla demon kuvakaappauksilla, ja kummankin alla
   paketti, hinta ja laajuus. Puhelin = sama komponentti kuin etusivun #p4 (ruutu tasan
   390/844, muoto talon värisidonnalla), mutta mitoitettu säiliöyksiköillä: --pw:n kiinteä
   leveys ei mahtunut 1440:n heron oikeaan sarakkeeseen (Madrid ylitti sisältöalueen).
   Selauksen tila (.flick, .once) ja paluu ovat sivun skriptissä. Mitattu: measure-motion §23.
   ========================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.hero-offer{display:grid;gap:var(--s5);}
/* Kaksi palstaa vasta 1100 px:stä: 821–1099 px:ssä tekstipalsta ja kahden puhelimen palsta
   ylittivät ruudun (Codex PR #94, measure-motion §23 f). Välissä puhelimet ovat tekstin alla. */
@media(min-width:1100px){.hero-offer{grid-template-columns:1fr 1.05fr;gap:var(--s6);align-items:end;}}
.offer{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s3);}
/* Sarakkeen leveys on eksplisiittinen: puhelin on säiliö (container-type), joten sen luontainen
   leveys on 0 ja auto-sarakkeet romahtaisivat. Leveys myös ikkunan korkeuden mukaan: 1280×720:ssa
   täysikokoinen puhelin työnsi hinnat ensimmäisen ruudun alle (§23). 390/844 = ruudun kuvasuhde,
   380 px = otsake + hinta-alue. Yläraja 228 px: kaksi puhelinta + väli = heron oikea sarake
   (1440:ssa 488 px; 250 px:n puhelimet ylittivät sisältöalueen 22 px). */
@media(min-width:821px){.offer{grid-template-columns:repeat(2,min(228px,calc((100svh - 380px) * 390 / 844 + 14px)));justify-content:start;gap:var(--s4);}}
@media(min-width:1100px){.offer{justify-content:end;}}
/* .hero p (0,1,1) asettaa heron kappaleille 16–19 px; ehtorivi on pienempi */
.hero .terms{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-top:var(--s4);font-size:15px;color:var(--ink-soft);}
.hero .terms b{color:var(--ink);font-weight:500;}
.demo{display:flex;flex-direction:column;gap:14px;width:100%;max-width:250px;container-type:inline-size;color:var(--ink);text-decoration:none;}
.demo .stage{position:relative;display:block;}
.demo .phone{position:relative;z-index:1;display:block;padding:2.8cqw;background:var(--ink);border-radius:15cqw;transition:transform var(--t-base) var(--e-out);}
.demo .screen{display:block;aspect-ratio:390/844;border-radius:11.5cqw;overflow:hidden;background:#000;}
.demo .strip,.demo .strip img{display:block;width:100%;}
.demo .strip img{height:auto;aspect-ratio:390/844;}
/* Muodot eivät ota osumia eivätkä ulotu ruudun ohi 320 px:ssä (§23 d). */
.demo .shape{position:absolute;z-index:0;pointer-events:none;}
.demo .s-semi{width:116%;left:-8%;bottom:-2px;aspect-ratio:2/1;background:var(--mustard);border-radius:999px 999px 0 0;}
.demo .s-sq{width:64%;left:-12%;bottom:0;aspect-ratio:1;background:var(--blue);}
.demo .lbl,.side .lbl{display:flex;flex-direction:column;gap:3px;}
.demo .tag,.side .tag{font:500 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);}
/* hinta skaalautuu puhelimen leveyden mukaan, jotta "+ alv" pysyy samalla rivillä myös kun
   puhelin kapenee matalassa ikkunassa */
.demo .pp,.side .pp{font:400 min(52px,17cqw)/1 var(--disp);letter-spacing:-.02em;margin-top:4px;white-space:nowrap;}
.demo .pp small,.side .pp small{font:400 13px var(--body);letter-spacing:0;color:var(--ink-soft);margin-left:4px;}
.demo .scope,.side .scope{font-size:14px;line-height:1.45;color:var(--ink-soft);}
.demo .open{font:500 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-sm);margin-top:6px;}
.demo .open i{font-style:normal;color:var(--red-deep);display:inline-block;transition:transform var(--t-quick) var(--e-pop);}
/* Huomautus on linkin ULKOPUOLELLA: linkin sisällä se piti saavutettavan nimen ~150 merkissä. */
.dcol{display:flex;flex-direction:column;gap:6px;}
.dcol .fine{font-size:12px;line-height:1.4;color:var(--ink-soft);max-width:250px;}
.demo:hover .phone,.demo:focus-visible .phone{transform:translateY(-8px);transition-duration:var(--t-in);}
.demo:hover .open i,.demo:focus-visible .open i{transform:translate(3px,-3px);}
.demo:focus-visible{outline:none;}
.demo:focus-visible .phone{outline:3px solid var(--accent-sm);outline-offset:4px;}
.demo:active .phone{transform:scale(.985);transition-duration:var(--t-in);}
.demo.flick .strip{animation:tpflick 12s var(--e-inout) .3s infinite alternate;}
.demo.once .strip{animation:tponce 4.4s var(--e-inout) .4s 1 both;}
@keyframes tpflick{0%,16%{transform:translateY(0)}28%,44%{transform:translateY(-25%)}56%,72%{transform:translateY(-50%)}84%,100%{transform:translateY(-75%)}}
@keyframes tponce{0%,10%{transform:translateY(0)}24%,34%{transform:translateY(-25%)}48%,58%{transform:translateY(-50%)}72%,82%{transform:translateY(-75%)}100%{transform:translateY(0)}}

/* Paketti ilman demoa (asiantuntijat, 12.10.2026): sama sarake ja sama .lbl kuin demolinkillä,
   mutta puhelimen paikalla on sivuston rakenne tekstinä. Ei kehystä eikä kuvaa, koska kehys
   lupaisi avattavan demon. .plan on tasan puhelimen korkuinen (ruutu 94,4cqw · 844/390 +
   kehys 5,6cqw = 209,9cqw), jotta hinnat ovat samalla rivillä ilman maagista välistystä. */
.side{display:flex;flex-direction:column;gap:14px;width:100%;max-width:250px;container-type:inline-size;}
.side .plan{display:flex;flex-direction:column;height:209.9cqw;border-top:1.5px solid var(--ink);padding-top:var(--s2);}
.side .plan .k{font:500 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);}
.side .views{list-style:none;flex:1;display:flex;flex-direction:column;justify-content:space-around;counter-reset:v;}
.side .views li{counter-increment:v;display:flex;gap:var(--s1);align-items:baseline;padding:6px 0;border-bottom:1.5px solid var(--hair);font:400 min(24px,8.5cqw)/1.1 var(--disp);}
.side .views li::before{content:"0" counter(v);font:500 10px var(--body);letter-spacing:.1em;color:var(--ink-soft);}
.side .plan .lg{font-size:13px;line-height:1.4;color:var(--ink-soft);}

/* vertailu: rivit ilman laatikoita. Kapealla (≤ 600 px) jokainen rivi on otsikko + S ja L
   vierekkäin, sarakkeen nimi solun yläpuolella (data-l), koska kolme saraketta rivitti tekstin
   sanoiksi 390 px:ssä (§23 e). */
.cmp{width:100%;border-collapse:collapse;font-size:15px;}
.cmp th,.cmp td{text-align:left;padding:14px var(--s2) 14px 0;border-bottom:1.5px solid var(--hair);vertical-align:top;}
.cmp thead th{font:400 clamp(24px,3vw,32px)/1.1 var(--disp);border-bottom:1.5px solid var(--ink);padding-bottom:var(--s2);}
.cmp thead th small{display:block;font:500 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px;}
.cmp tbody th{font-weight:500;color:var(--ink-soft);width:24%;font-size:14px;}
.cmp .both{color:var(--ink-soft);}
.cmp tbody tr{transition:background-color var(--t-out);}
.cmp tbody tr:hover{background:rgba(90,75,255,.06);}
@media(max-width:600px){
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
  .cmp tbody tr{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s3);border-bottom:1.5px solid var(--hair);padding:var(--s2) 0;}
  .cmp tbody th{grid-column:1/-1;width:auto;padding:0 0 6px;border:0;}
  /* pitkä yhdyssana (ProfessionalService-merkinnät) vuoti 320 px:ssä 6 px (§23 d) */
  .cmp td{padding:0;border:0;font-size:14px;overflow-wrap:anywhere;}
  .cmp td[data-l]::before{content:attr(data-l);display:block;font:500 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px;}
  .cmp td.both{grid-column:1/-1;}
}
.addons-l{margin-top:var(--s5);max-width:640px;}
.addons-l h3{font:500 12px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s2);}
/* Yksisarakkeinen rivi ("jokaiseen sivustoon kuuluu") ei ole hinta: ilman tätä
   .list li span:last-child teki siitä nowrap-tekstin, joka vuoti 320 px:ssä 280 px (§23 d). */
.list li span:only-child{white-space:normal;font-weight:400;}
/* .list li span:last-child (0,2,2) lihavoi hinnat; "sovitaan erikseen" ei ole hinta */
.list li span.soft:last-child{color:var(--ink-soft);font-weight:400;}

/* aikajana: kaksi viikkoa mittanauhana (desktop vaaka, mobiili pysty), solmut talon muodoilla */
.tl{list-style:none;position:relative;}
.tl li{position:relative;}
.tl li::before{content:"";position:absolute;width:18px;height:18px;}
@media(min-width:821px){.tl{display:grid;grid-template-columns:1fr 1.4fr 1.6fr 1.3fr 1.6fr;border-top:3px solid var(--ink);}.tl li{padding:var(--s3) var(--s3) 0 0;}.tl li::before{left:0;top:-11px;}}
@media(max-width:820px){.tl{border-left:3px solid var(--ink);margin-left:8px;padding-left:var(--s4);}.tl li{padding:0 0 var(--s4);}.tl li::before{left:calc(-1 * var(--s4) - 10.5px);top:2px;}}
.tl li:nth-child(1)::before{background:var(--red);border-radius:50%;}
.tl li:nth-child(2)::before{background:var(--blue);}
.tl li:nth-child(3)::before{background:var(--mustard);clip-path:polygon(50% 0,100% 100%,0 100%);}
.tl li:nth-child(4)::before{background:var(--paper);border:2.5px solid var(--ink);border-radius:50%;}
.tl li:nth-child(5)::before{background:var(--ink);}
.tl h3{font:500 13px var(--body);letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;}
.tl p{font-size:15px;color:var(--ink-soft);}
.tl .you{display:inline-block;font:500 11px var(--body);letter-spacing:.12em;text-transform:uppercase;background:var(--mustard);color:var(--ink);padding:2px 6px;margin-top:6px;}
.js .tl li{opacity:0;transform:translateY(16px);transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out);transition-delay:calc(var(--i,0) * var(--stagger) * 3);}
.js .tl.in li{opacity:1;transform:none;}
.js .tl li::before{transform:scale(0);transition:transform var(--t-base) var(--e-pop);transition-delay:calc(var(--i,0) * var(--stagger) * 3 + .2s);}
.js .tl.in li::before{transform:none;}
@media(prefers-reduced-motion:reduce){
  .demo .strip{animation:none !important;}
  .demo:hover .phone,.demo:focus-visible .phone,.demo:active .phone{transform:none;}
  .demo:hover .open i,.demo:focus-visible .open i{transform:none;}
  .js .tl li,.js .tl li::before{transform:none;}
}