:root{
  --bg:#FDF0F6; --card:#FFFFFF; --ink:#43112B; --body:#5C2743; --mut:#9A6480;
  --blue:#D6336C; --blue-deep:#A61E4D; --blue-soft:#FBDCE8;
  --line:#F2C4D8; --gold:#F7B500; --gold-deep:#D89B00; --gold-soft:#FFF3CE; --gold-line:#FFC61A;
  --silver:#B48EA0; --silver-soft:#F9EEF4; --bronze:#C08447; --bronze-soft:#F9EFE2;
  --ok:#1F9D55; --warn:#C2410C; --cream:#FFF6FB;
  --r:20px;
  --shadow:0 2px 0 rgba(67,17,43,.06),0 8px 20px rgba(166,30,77,.12);
  --pop:0 4px 0 rgba(67,17,43,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
/* Chromen "Auto Dark Mode for Web Contents" kaantaa vaaleat sivustot
   algoritmisesti tummiksi kun puhelin on yotilassa: Suomen Paraksen pinkki
   tausta muuttui mustaksi ja koko brandi katosi (havaittu 17.8.2026).
   color-scheme:light kertoo selaimelle etta sivusto on tarkoituksella vaalea,
   jolloin automaattista inversiota ei tehda. */
:root{color-scheme:light}
html{scroll-behavior:smooth;color-scheme:light}
body{font-family:'Nunito',system-ui,sans-serif;background:var(--bg);color:var(--body);line-height:1.6;font-size:16.5px;overflow-x:clip;max-width:100%}
h1,h2,h3,h4,.brand{font-family:'Baloo 2',sans-serif}
.mono{font-family:'IBM Plex Mono',monospace}
a{color:var(--blue-deep);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
/* header — graphite/silver to match the logo */
header.site{background:linear-gradient(180deg,#B03068 0%,#8A1F4E 100%);color:#fff;position:sticky;top:0;z-index:50;border-bottom:3px solid #4A0E2C}
header.site .wrap{display:flex;align-items:center;gap:24px;height:66px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.28rem;color:#fff;letter-spacing:.01em}
.brand:hover{text-decoration:none}
.brand img{width:58px;height:58px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));transition:transform .25s cubic-bezier(.3,1.6,.4,1)}
.brand:hover img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.brand .tm{color:var(--gold-line)}
.brand .btxt{display:flex;flex-direction:column;line-height:1.1}
.brand .oy{font-family:'IBM Plex Mono',monospace;font-size:.6rem;font-weight:500;letter-spacing:.22em;color:#9DABC2;text-transform:uppercase;margin-top:3px}
nav.main{display:flex;gap:22px;margin-left:auto;align-items:center}
nav.main a{color:#DCE8FC;font-weight:800;font-size:.95rem}
nav.main a:hover{color:#fff;text-decoration:none}
nav.main a.on{color:var(--gold-line)}
/* Category dropdown — a flat nav stopped fitting at 5+ categories (roadmap is 67). */
.navdd{position:relative}
.navdd-btn{background:none;border:0;padding:0;cursor:pointer;color:#DCE8FC;font-family:inherit;font-weight:800;font-size:.95rem;display:flex;align-items:center;gap:5px}
.navdd-btn:hover,.navdd.open .navdd-btn{color:#fff}
.navdd.on-cat .navdd-btn{color:var(--gold-line)}
.navdd-btn .car{font-size:.62rem;transition:transform .18s}
.navdd.open .navdd-btn .car{transform:rotate(180deg)}
.navdd-panel{display:none;position:absolute;top:calc(100% + 12px);right:0;min-width:250px;background:var(--card);border:2.5px solid var(--ink);border-radius:10px;box-shadow:5px 6px 0 rgba(20,33,63,.22);padding:7px;z-index:60}
.navdd.open .navdd-panel{display:block}
.navdd-panel a{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ink);font-size:.9rem;font-weight:700;padding:8px 10px;border-radius:6px}
.navdd-panel a:hover{background:var(--blue-soft);text-decoration:none}
.navdd-panel a.on{background:var(--gold-soft)}
.navdd-panel .n{font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:600;color:var(--mut)}
.navdd-panel hr{border:0;border-top:1.5px solid var(--line);margin:6px 4px}
.navdd-panel .all{color:var(--blue-deep)}
.demo-ribbon{background:var(--ink);color:var(--gold-line);text-align:center;font-size:.8rem;font-weight:800;padding:6px 12px;letter-spacing:.03em}
/* hero */
.hero{background:linear-gradient(170deg,#C2417A 0%,#96285C 62%,#5E1638 100%);color:#fff;padding:58px 0 74px;position:relative}
.hero-rays{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero-rays::before{content:"";position:absolute;width:1700px;height:1700px;left:50%;top:-560px;transform:translateX(-50%);background:repeating-conic-gradient(rgba(255,255,255,.55) 0 9deg,transparent 9deg 18deg);border-radius:50%;pointer-events:none;opacity:.045;animation:spin 140s linear infinite;-webkit-mask-image:radial-gradient(closest-side at 50% 42%,#000 34%,transparent 74%);mask-image:radial-gradient(closest-side at 50% 42%,#000 34%,transparent 74%)}
.hero .wrap{position:relative;z-index:1}
.kicker{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.16em;color:var(--gold-line);margin-bottom:16px;font-weight:600}
.hero h1{font-size:clamp(2.1rem,4.8vw,3.4rem);line-height:1.08;letter-spacing:.01em;color:#fff;font-weight:800;max-width:660px}
.hero h1 em{font-style:normal;color:var(--gold-line)}
.hero p.lead{margin-top:16px;font-size:1.1rem;color:#F8DCE9;max-width:560px;font-weight:600}
.hero-logo{width:240px;height:240px;margin-bottom:18px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45));animation:bounceIn .8s cubic-bezier(.3,1.5,.4,1) both,logoPulse 3.2s ease-in-out .9s infinite}
@keyframes logoPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}50%{transform:scale(1.05);filter:drop-shadow(0 14px 34px rgba(255,198,26,.28))}}
@media(prefers-reduced-motion:reduce){.hero-logo{animation:none}}
@keyframes bounceIn{from{opacity:0;transform:scale(.5) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
.hero .kicker{animation:fadeUp .65s cubic-bezier(.2,.7,.2,1) .1s both}
.hero h1{animation:fadeUp .65s cubic-bezier(.2,.7,.2,1) .17s both}
.hero p.lead{animation:fadeUp .65s cubic-bezier(.2,.7,.2,1) .25s both}
.hero .hero-stats{animation:fadeUp .65s cubic-bezier(.2,.7,.2,1) .33s both}
.board-wrap{position:relative;animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) .4s both}
/* align-items oli center, jolloin TOP5-taulu upposi vasemman palstan puoleen
   valiin ja jai ruudun alalaitaan (Anton 20.8.2026: "should be a little
   higher"). start nostaa taulun otsikon tasalle heti nakyviin. */
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
@media(min-width:841px){.board-wrap{margin-top:110px}}  /* keskivali: ei keskitetty pohjalle, ei liimattu ylareunaan */
@media(max-width:840px){.hero-grid{grid-template-columns:1fr}}
.hero-stats{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap}
.hero-stat .hs-ic{width:22px;height:22px;color:var(--gold-line);display:block;margin-bottom:4px;opacity:.9}
.hero-stat b{display:block;font-family:'Baloo 2',sans-serif;font-size:1.5rem;color:var(--gold-line);font-weight:600}
.hero-stat span{font-size:.84rem;color:#EBBCD3;font-weight:600}
/* live board */
.board{background:var(--card);border-radius:var(--r);border:3px solid var(--ink);box-shadow:0 6px 0 rgba(74,14,44,.35);color:var(--body);overflow:hidden}
.board-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:2px solid var(--line);background:var(--cream)}
.board-head .cat{font-family:'Baloo 2',sans-serif;font-weight:600;color:var(--ink);font-size:1.05rem}
.board-head .live{display:flex;align-items:center;gap:7px;font-size:.72rem;color:var(--mut);font-family:'IBM Plex Mono',monospace}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
.nposts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:20px}
.npost{background:var(--card);border:2.5px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px}
.np-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.np-k{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.14em;font-weight:600;color:var(--blue-deep);background:var(--blue-soft);border-radius:99px;padding:3px 10px}
.np-d{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--mut)}
.npost h3{font-size:1.06rem;line-height:1.25;color:var(--ink);margin-bottom:6px}
.npost p{font-size:.92rem;color:var(--body);margin:0}
.np-link{display:inline-block;margin-top:10px;font-weight:800;font-size:.86rem;color:var(--blue-deep)}
.langsw{display:inline-flex;align-items:center;margin-left:6px;padding:3px;border-radius:6px;line-height:0;border:0;background:none;transition:transform .16s ease,box-shadow .16s ease}
.langsw:hover{opacity:1;text-decoration:none}
.flagsvg{display:block;border-radius:3px;border:1.5px solid rgba(255,255,255,.7);box-shadow:0 2px 5px rgba(0,0,0,.28)}
/* Kolmen kielen valitsin (13.8.2026): fi/sv/en. Aiemmin tama oli kahden kielen
   vaihtokytkin (yksi lippu). Navipalkki nakyy tyopoydalla; mobiilissa navi
   kaartuu monelle riville ja liput hukkuvat, joten siella naytetaan sen sijaan
   kiintea palkki ruudun alareunassa (Antonin pyynto). */
.langbar{display:inline-flex;align-items:center;gap:8px;margin-left:8px}
.langbar .langsw{opacity:.62}
.langbar .langsw:hover{opacity:1}
.langbar .langsw.on{opacity:1}
.langbar .langsw.on .flagsvg{border-color:var(--gold-line);box-shadow:0 0 0 2px rgba(255,198,26,.55)}
/* Mobiilin kielivalitsin EI kellu sisallon paalla (Anton 13.8.2026: "shouldn't
   be that sticky") vaan on sivun aivan lopussa, alatunnisteen jalkeen: se
   loytyy kun scrollaa pohjaan eika peita mitaan lukiessa. */
.langbar-bottom{display:none}
.navburger{display:none}
/* Kielivalitsin siirtyy ylanavista sivun alalaitaan jo 1080px:ssa: kuudes
   navilinkki (Kannattaako vaihtaa?, 20.8.2026) tyonsi lipputekstit headerin
   reunan yli 901-1030px leveyksilla. */
@media(max-width:1080px){
  nav.main .langbar{display:none}
  .langbar-bottom{display:flex;justify-content:center;gap:20px;width:100%;margin-left:0;
    padding:20px 0 32px;background:var(--bg);border-top:1.5px solid var(--line)}
  .langbar-bottom .langsw{opacity:.7}
  .langbar-bottom .langsw.on{opacity:1}
}
@media(max-width:1180px){
  /* Hampurilaisvalikko (20.8.2026, Anton): rivitetty/vieritettava linkkirivi
     vei logolta tilan ja nayttti ahtaalta. Raja nostettu 900->1180px 1.9.2026
     kun #1-badge-linkki sai navin rivittymaan rumasti valikoilla. Navi on nyt
     napin takana pudotuspaneelina, ja header on yksi siisti rivi jossa logolla
     on tilaa. Paneeli on absolute headerin alla; sticky-header toimii
     ankkurina. JS togglaa header.site-elementille .nav-open (app.js). */
  header.site{position:sticky}
  header.site .wrap{height:60px;gap:12px}
  .navburger{display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;background:none;border:0;cursor:pointer;padding:12px 6px;
    -webkit-tap-highlight-color:transparent}
  .navburger span{display:block;width:25px;height:3px;background:#fff;
    border-radius:2px;transition:transform .22s,opacity .16s}
  header.site.nav-open .navburger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  header.site.nav-open .navburger span:nth-child(2){opacity:0}
  header.site.nav-open .navburger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;margin-left:0;
    flex-direction:column;align-items:stretch;gap:0;padding:4px 0 10px;
    background:linear-gradient(180deg,#8A1F4E 0%,#6E173D 100%);
    border-bottom:3px solid #4A0E2C;box-shadow:0 14px 26px rgba(20,5,14,.35)}
  header.site.nav-open nav.main{display:flex}
  nav.main a{padding:13px 20px;font-size:1rem;border-top:1px solid rgba(255,255,255,.09)}
  nav.main a:first-child{border-top:0}
  .navdd-panel{right:auto;left:0;min-width:min(250px,calc(100vw - 32px))}
}
.langsw:hover .flagsvg{border-color:#fff;box-shadow:0 3px 9px rgba(0,0,0,.36)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.live-dot{animation:none}}
.board-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.board-row:last-child{border-bottom:none}
.board-row .pos{font-family:'Baloo 2',sans-serif;font-weight:600;width:24px;color:var(--mut)}
.board-row.gold{background:var(--gold-soft)}
.board-row.gold .pos{color:var(--gold-deep)}
.board-row .nm{font-weight:800;color:var(--ink)}
.board-row .dots{flex:1;border-bottom:2px dotted #EFC6DA;height:2px;margin:0 6px;transform:translateY(5px)}
.board-row .sc{font-family:'Baloo 2',sans-serif;font-weight:600;color:var(--ink)}
.board-foot{padding:12px 18px;font-size:.88rem;font-weight:700}
.board{transition:opacity .26s ease}
.board.lb-fade{opacity:0}
/* front-page top-3 boards */
.top-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.top-board{display:block;background:var(--card);border-radius:var(--r);border:2.5px solid var(--line);box-shadow:var(--shadow);overflow:hidden;color:var(--body);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.top-board:hover{border-color:var(--blue);text-decoration:none;box-shadow:0 10px 22px rgba(10,25,60,.14)}
.tb-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:12px 16px;background:var(--cream);border-bottom:2px solid var(--line);font-family:'Baloo 2',sans-serif;font-weight:700;color:var(--ink);font-size:1.02rem}
.tb-head .tb-n{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--mut);font-weight:500;white-space:nowrap}
.tb-row{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--line);font-size:.92rem}
.tb-row .pos{font-family:'Baloo 2',sans-serif;font-weight:600;width:20px;color:var(--mut)}
.tb-row.gold{background:var(--gold-soft)}
.tb-row.gold .pos{color:var(--gold-deep)}
.tb-row .nm{font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-row .dots{flex:1;border-bottom:2px dotted #EFC6DA;height:2px;margin:0 4px;transform:translateY(5px);min-width:14px}
.tb-row .sc{font-family:'Baloo 2',sans-serif;font-weight:600;color:var(--ink)}
.tb-foot{padding:10px 16px;font-size:.84rem;font-weight:800;color:var(--blue)}
/* front-page search */
.sp-search{position:relative;margin:0 0 24px;max-width:600px}
.sp-search input{width:100%;padding:16px 96px 16px 52px;border-radius:999px;border:3px solid var(--ink);font-family:inherit;font-size:1.02rem;font-weight:700;background:#fff;color:var(--ink);box-shadow:0 5px 0 rgba(74,14,44,.25);appearance:none;-webkit-appearance:none}
.sp-ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:22px;height:22px;color:var(--blue-deep);pointer-events:none;z-index:2}
.sp-btn{position:absolute;right:7px;top:50%;transform:translateY(-50%);background:linear-gradient(165deg,var(--blue) 0%,var(--blue-deep) 100%);color:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:9px 20px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:.95rem;cursor:pointer;z-index:2}
.sp-btn:hover{filter:brightness(1.08)}
.sp-search input::-webkit-search-cancel-button{display:none}
.sp-search input::placeholder{color:var(--mut);font-weight:600}
.sp-search input:focus{outline:3px solid var(--gold);outline-offset:1px}
.sp-results{position:absolute;top:calc(100% + 10px);left:0;right:0;background:var(--card);border:2.5px solid var(--ink);border-radius:18px;box-shadow:5px 6px 0 rgba(74,14,44,.25);z-index:70;overflow:hidden;max-height:340px;overflow-y:auto}
.sp-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:700;font-size:.95rem}
.sp-row:hover{background:var(--blue-soft);text-decoration:none}
.sp-row:last-child{border-bottom:none}
.sp-tag{font-family:'IBM Plex Mono',monospace;font-size:.6rem;background:var(--blue-soft);color:var(--blue-deep);padding:2px 7px;border-radius:6px;font-weight:600;white-space:nowrap;letter-spacing:.05em}
.sp-tag.y{background:var(--gold-soft);color:#7A5A0E}
.sp-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Haku nostettu heroon otsikon alle (Anton 11.8.2026). Ennen se oli puolivalissa
   sivua ("Haetuimpien kategorioiden karjet" -otsikon alla) = 1287px eli 1.6
   ruudullista alaspain puhelimessa. Heron sisalla se on heti nakyvissa.
   HUOM: tama vaati .hero{overflow:hidden} -> visible, muuten hakutulosten
   pudotusvalikko (.sp-results, absoluuttinen) olisi leikkautunut heron reunaan.
   Koristesateet siirrettiin .hero-rays-kaareen, joka hoitaa rajauksen. */
.hero .sp-search{max-width:560px;margin:22px 0 0;position:relative;z-index:60;animation:fadeUp .65s cubic-bezier(.2,.7,.2,1) .29s both}
.hero .sp-search input{padding:18px 110px 18px 54px;font-size:1.05rem;
  box-shadow:0 6px 0 rgba(40,6,24,.5),0 18px 34px rgba(0,0,0,.26)}
.hero .sp-btn{padding:11px 22px;font-size:1rem}
.hero .sp-ico{left:20px;width:23px;height:23px}
.hero .sp-hint{font-size:.85rem;color:#F0C6DA;font-weight:700;margin-top:11px}
.hero .sp-hint a{color:var(--gold-line);text-decoration:underline}
.hero .sp-hint b{color:#fff}
/* Kategoriakohtaiset lapinakyvyyskriteerit kategoriasivulle (Anton 11.8.2026):
   ennen ne nakyivat VAIN yrityssivuilla ja metodologiassa, eli laskeutumissivulla
   pisteytys jai perustelematta. Data oli jo olemassa (lapinakyvyys_kriteerit). */
.critbox{background:var(--cream);border:2px solid var(--line);border-left:5px solid var(--blue);
  border-radius:var(--r);padding:15px 18px;margin:18px 0 22px;box-shadow:var(--shadow)}
.critbox h2{font-size:1rem;color:var(--ink);margin-bottom:6px;font-weight:700}
.critbox p{font-size:.92rem;color:var(--body);margin:0}
.critbox .critbox-foot{margin-top:9px;font-size:.79rem;color:var(--mut);font-weight:700}
.sp-nm small{color:var(--mut);font-weight:600}
.sp-sc{font-family:'Baloo 2',sans-serif;font-weight:600;color:var(--blue-deep)}
.sp-go{color:var(--mut)}
.sp-empty{padding:14px;color:var(--mut);font-weight:600;font-size:.92rem}
/* certificate showcase */
.cert-wrap{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:start;margin:10px 0 30px}
@media(max-width:860px){.cert-wrap{grid-template-columns:1fr}}
.cert-demo{max-width:400px}
/* Sertifikaatti uusittu 13.8.2026 (Anton: "too plain and ugly, should look
   professional"). Vanha oli vaalea pinkki gradientti, emoji-kruunu ja katkoviiva
   -> nayttti kupongilta. Nyt: syva luumu + kultafolio, kaiverrettu sinetti
   inline-SVG:na (ei emojia), kaksoiskehys ja kulmakoristeet. Kaikki inline,
   koska sivusto on staattinen eika sertifikaatti saa riippua ulkoisista kuvista. */
.cert-inner{background:radial-gradient(120% 90% at 50% 0%,#5E1638 0%,#3A0E23 55%,#280917 100%);
  border-radius:14px;padding:34px 30px 26px;text-align:center;position:relative;overflow:hidden;
  box-shadow:0 18px 40px rgba(40,9,23,.45),0 3px 0 rgba(232,185,59,.35);
  border:1px solid rgba(232,185,59,.55)}
/* kaksoiskehys: ohut kultaviiva sisapuolella */
.cert-inner::before{content:"";position:absolute;inset:10px;border:1px solid rgba(232,185,59,.42);
  border-radius:8px;pointer-events:none}
/* hienovarainen valon heijastus ylareunassa (folion tuntu) */
.cert-inner::after{content:"";position:absolute;left:-30%;top:-60%;width:160%;height:120%;
  background:radial-gradient(closest-side,rgba(255,255,255,.10),transparent 70%);pointer-events:none}
.cert-inner>*{position:relative;z-index:1}
.cert-issuer{font-family:'Baloo 2',sans-serif;font-weight:800;color:#fff;font-size:1rem;letter-spacing:.01em}
.cert-issuer span{color:#E8B93B}
.cert-title{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.5em;
  color:#E8B93B;margin:9px 0 0;text-indent:.5em}
.cert-rule{width:64px;height:1px;background:linear-gradient(90deg,transparent,#E8B93B,transparent);
  margin:14px auto 16px}
.cert-awarded{font-size:.72rem;color:#D8AFC4;font-weight:600;letter-spacing:.02em}
.cert-company{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.5rem;color:#fff;
  margin-top:6px;line-height:1.2}
.cert-seal{display:block;margin:16px auto 12px;width:96px;height:96px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.cert-score{margin:2px 0 4px;line-height:1}
.cert-score b{font-family:'Baloo 2',sans-serif;font-size:2.9rem;font-weight:700;color:#E8B93B;
  text-shadow:0 2px 12px rgba(232,185,59,.35)}
.cert-score span{color:#B98BA4;font-weight:700;font-size:.95rem;margin-left:3px}
.cert-rank{color:#fff;font-weight:800;font-size:.86rem;letter-spacing:.02em}
.cert-foot{margin-top:16px;padding-top:13px;border-top:1px solid rgba(232,185,59,.30)}
.cert-meta{font-size:.68rem;color:#C79FB6;font-weight:700}
.cert-verify{font-family:'IBM Plex Mono',monospace;font-size:.58rem;color:#E8B93B;margin-top:5px;
  word-break:break-all}
.cert-stamp{position:absolute;top:20px;right:-38px;transform:rotate(38deg);
  background:linear-gradient(180deg,#E8B93B,#C99616);color:#2A0A1B;font-family:'IBM Plex Mono',monospace;
  font-size:.52rem;font-weight:700;letter-spacing:.12em;padding:5px 44px;z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,.35)}
.cert-note{font-size:.76rem;color:var(--mut);font-weight:600;margin-top:10px;text-align:center}
.cert-list{margin:14px 0 0 22px}
.cert-list li{margin:10px 0;font-weight:600;color:var(--body)}
/* footer legal links */
.foot-legal{margin-top:20px;font-size:.8rem;line-height:2;font-weight:600}
.foot-legal a{white-space:nowrap}
/* footer bottom bar */
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:24px;border-top:1px solid rgba(255,255,255,.14);padding-top:18px;flex-wrap:wrap}
.foot-bottom .oy{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.foot-bottom .btn{background:linear-gradient(180deg,#FFCB42 0%,var(--gold) 100%);color:#3A0E24;padding:10px 20px;border-radius:10px;font-weight:700;border:1px solid rgba(58,14,36,.16)}
.foot-bottom .btn:hover{text-decoration:none}
/* category guide */
.opas-intro{margin-top:14px;color:var(--body);font-weight:600;max-width:720px}
.opas{margin:40px 0 8px;background:var(--card);border:2.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:28px}
.opas h3{color:var(--ink);font-size:1.12rem;margin:20px 0 8px}
.opas h3:first-of-type{margin-top:12px}
.opas ul{margin:0 0 6px 22px}
.opas li{margin:6px 0;font-weight:600;color:var(--body);font-size:.95rem}
.opas p{color:var(--body);font-weight:600;font-size:.95rem;max-width:720px}
details.ukk{border:2px solid var(--line);border-radius:12px;margin:8px 0;background:var(--cream)}
details.ukk summary{cursor:pointer;padding:12px 16px;font-weight:800;color:var(--ink);list-style:none;position:relative;padding-right:38px}
details.ukk summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-family:'Baloo 2',sans-serif;font-size:1.3rem;color:var(--blue-deep)}
details.ukk[open] summary::after{content:"−"}
details.ukk p{padding:0 16px 14px;margin:0}
/* analyysi form */
.aform{max-width:640px;margin-bottom:22px}
.aform label{display:block;font-weight:800;color:var(--ink);font-size:.92rem;margin:14px 0 0}
.aform input,.aform select,.aform textarea{display:block;width:100%;margin-top:6px;padding:11px 12px;border:2.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--body);font-family:inherit;font-size:.95rem;font-weight:600}
.aform input:focus,.aform select:focus,.aform textarea:focus{outline:none;border-color:var(--blue)}
.aform textarea{resize:vertical;line-height:1.5}
.aform .btn{margin-top:18px}
.aform small{display:block;margin-top:10px;color:var(--mut);font-weight:600}
.aform-note{color:var(--mut);font-weight:600;margin-bottom:4px}
/* sections */
section.band{padding:56px 0}
h2.sec{font-size:1.65rem;color:var(--ink);font-weight:700;margin-bottom:6px}
h2.sec::before{content:"";display:inline-block;width:22px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--gold-line));margin-right:11px;vertical-align:.2em}
p.sec-sub{color:var(--mut);margin-bottom:26px;max-width:640px;font-weight:600}
/* score stamp */
.stamp{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#C02A6B 0%,var(--blue-deep) 100%);color:#fff;border-radius:10px;border:1px solid rgba(58,14,36,.18);box-shadow:0 1px 2px rgba(74,14,44,.10),0 2px 6px rgba(166,30,77,.16);padding:9px 14px 7px;min-width:80px}
.stamp .n{font-family:'Baloo 2',sans-serif;font-weight:600;font-size:1.6rem;line-height:1}
.stamp .l{font-size:.56rem;letter-spacing:.13em;color:#F0C4D9;margin-top:4px;font-weight:700;font-family:'IBM Plex Mono',monospace}
.stamp.gold{background:linear-gradient(160deg,var(--gold-line),var(--gold));color:var(--ink)}
.stamp.gold .l{color:#7A5A0E}
/* ranking cards */
.rank-card{background:var(--card);border-radius:var(--r);border:2.5px solid var(--line);box-shadow:var(--shadow);padding:22px;display:grid;grid-template-columns:56px 1fr auto;gap:18px;margin-bottom:16px;position:relative}
.rank-card.m1{border-color:var(--gold);box-shadow:0 5px 0 rgba(216,155,0,.25),0 10px 26px rgba(30,79,168,.12);background:linear-gradient(0deg,var(--card) 84%,var(--gold-soft) 100%)}
.rank-card.m2{border-color:var(--silver)}
.rank-card.m3{border-color:var(--bronze)}
.medal{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Baloo 2',sans-serif;font-weight:600;font-size:1.15rem;background:var(--silver-soft);color:var(--mut);margin-top:2px;border:2px solid transparent;position:relative}
.m1 .medal{background:var(--gold-line);color:var(--ink);border-color:var(--ink);box-shadow:0 0 0 4px var(--gold-soft)}
.m1 .medal::after{content:"👑";position:absolute;top:-17px;left:50%;transform:translateX(-50%) rotate(8deg);font-size:.95rem}
.m2 .medal{background:var(--silver);color:#fff;box-shadow:0 0 0 4px var(--silver-soft)}
.m3 .medal{background:var(--bronze);color:#fff;box-shadow:0 0 0 4px var(--bronze-soft)}
.rank-main h3{font-size:1.32rem;color:var(--ink);font-weight:700}
.rank-main h3 a{color:inherit}
.rank-meta{font-size:.84rem;color:var(--mut);margin-top:1px;font-weight:600}
.badge-yl{display:inline-block;font-family:'Nunito',sans-serif;font-size:.68rem;font-weight:900;letter-spacing:.05em;background:var(--gold-line);color:var(--ink);border:2px solid var(--ink);border-radius:99px;padding:2px 10px;vertical-align:3px;margin-left:8px;box-shadow:0 2px 0 rgba(20,33,63,.2)}
.pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 22px;margin-top:13px;max-width:520px}
.pillar{display:grid;grid-template-columns:118px 1fr 40px;align-items:center;gap:9px;font-size:.78rem;color:var(--mut);font-weight:700}
.bar{height:9px;border-radius:99px;background:var(--blue-soft);overflow:hidden;border:1px solid rgba(20,33,63,.12)}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--blue-deep))}
.m1 .bar i{background:linear-gradient(90deg,var(--blue),var(--gold))}
.pillar .v{font-family:'IBM Plex Mono',monospace;font-size:.76rem;color:var(--ink);text-align:right;font-weight:600}
.rank-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;justify-content:space-between}
/* Napit siistittiin 17.8.2026 (Anton: "liian sarjakuvamainen"). Pois lahtivat
   2,5 px musta aariviiva, kova offset-varjo (0 3px 0) ja pillerimuoto, eli ne
   kolme asiaa jotka tekivat napeista tarrat. Tilalle maltillinen 10 px kulma,
   ohut reuna ja pehmea varjo. Vari ja fontti pysyvat, joten brandi sailyy. */
.btn{display:inline-block;background:linear-gradient(180deg,#FFCB42 0%,var(--gold) 100%);
  color:#3A0E24;font-weight:700;font-family:'Nunito',sans-serif;font-size:.92rem;
  border-radius:10px;padding:12px 22px;border:1px solid rgba(58,14,36,.16);cursor:pointer;
  box-shadow:0 1px 1px rgba(58,14,36,.08),0 2px 6px rgba(216,155,0,.20)}
.btn:hover{background:linear-gradient(180deg,#FFD866 0%,#F2B300 100%);text-decoration:none;
  box-shadow:0 1px 1px rgba(58,14,36,.10),0 4px 12px rgba(216,155,0,.28)}
.btn.ghost{background:#fff;color:var(--blue-deep);border:1.5px solid var(--line);
  box-shadow:0 1px 2px rgba(74,14,44,.06);font-weight:700}
.btn.ghost:hover{background:var(--cream);border-color:var(--blue);color:var(--blue-deep)}
.rank-strength{font-size:.86rem;color:var(--body);margin-top:11px;font-weight:600}
.rank-strength b{color:var(--ok);font-weight:900}
@media(max-width:700px){.rank-card{grid-template-columns:44px 1fr}.rank-side{flex-direction:row;align-items:center;grid-column:1/-1;justify-content:flex-start}.pillars{grid-template-columns:1fr}}
/* toggle chips */
.chips{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0 22px}
.chip{font-family:'Nunito',sans-serif;font-size:.88rem;font-weight:700;border:1.5px solid var(--line);background:var(--card);color:var(--body);border-radius:8px;padding:8px 16px;cursor:pointer}
.chip:hover{border-color:var(--blue)}
.chip.on{background:var(--blue);border-color:var(--blue-deep);color:#fff;box-shadow:0 1px 3px rgba(166,30,77,.24)}
/* receipt — serrated bottom edge like a printed receipt */
.receipt{background:var(--card);border-radius:var(--r) var(--r) 0 0;border:2px solid var(--line);border-bottom:none;box-shadow:var(--shadow);overflow:visible;margin-bottom:34px;position:relative}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;background-image:linear-gradient(45deg,var(--card) 5px,transparent 5px),linear-gradient(-45deg,var(--card) 5px,transparent 5px);background-size:14px 9px;background-repeat:repeat-x;filter:drop-shadow(0 3px 3px rgba(20,33,63,.06))}
.receipt-head{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:var(--cream);border-bottom:2px dashed var(--line);border-radius:18px 18px 0 0}
.receipt-head h3{font-size:1.08rem;color:var(--ink);font-weight:600}
.receipt-head .w{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--mut);font-weight:500}
.receipt-head .sub{font-family:'Baloo 2',sans-serif;font-weight:600;color:var(--ink);font-size:1.15rem}
/* Turvaverkko: jos taulukko ei mahdu kapealle naytolle, se vierii omassa
   kontissaan sen sijaan etta venyttaisi koko sivun vaakasuunnassa. EI .receipt:iin,
   koska sen ::after-repareuna on elementin ulkopuolella ja overflow leikkaisi sen. */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.rows{width:100%;border-collapse:collapse;font-size:.9rem}
table.rows th{text-align:left;font-size:.7rem;letter-spacing:.07em;color:var(--mut);font-weight:800;padding:9px 20px;border-bottom:1px solid var(--line);text-transform:uppercase;font-family:'Nunito',sans-serif}
table.rows td{padding:11px 20px;border-bottom:1px solid var(--line);vertical-align:top}
table.rows tr:last-child td{border-bottom:none}
td.pts,th.pts{text-align:right;font-family:'IBM Plex Mono',monospace;white-space:nowrap}
td.pts b{color:var(--ink)}
.src{font-size:.72rem;color:var(--mut);font-family:'IBM Plex Mono',monospace}
.quote{font-size:.8rem;color:var(--mut);font-style:italic;margin-top:4px;font-weight:400}
.qlab{display:inline-block;font-family:'IBM Plex Mono',monospace;font-style:normal;font-size:.58rem;font-weight:600;letter-spacing:.08em;color:var(--ink);background:var(--gold-soft);border:1.5px solid var(--ink);border-radius:3px;padding:0 5px;margin-right:6px;vertical-align:1px}
/* profile hero */
.p-hero{background:var(--card);border-radius:var(--r);border:2.5px solid var(--line);box-shadow:var(--shadow);padding:28px;display:grid;grid-template-columns:1fr auto;gap:24px;margin-bottom:22px;border-top:6px solid var(--blue)}
.p-hero.m1{border-top-color:var(--gold);border-color:var(--gold)}
.p-hero.m2{border-top-color:var(--silver)}
.p-hero.m3{border-top-color:var(--bronze)}
.p-hero h1{font-size:1.9rem;color:var(--ink);font-weight:800}
.p-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 26px;margin-top:16px;font-size:.88rem}
.p-facts b{display:block;color:var(--ink);font-weight:800}
.p-facts span{color:var(--mut);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.stamp-big{display:flex;flex-direction:column;align-items:center;gap:10px}
.stamp-big .stamp .n{font-size:2.4rem}
/* two-col */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
@media(max-width:700px){.duo{grid-template-columns:1fr}.p-hero{grid-template-columns:1fr}}
.panel{background:var(--card);border-radius:var(--r);border:2px solid var(--line);box-shadow:var(--shadow);padding:20px}
.panel h3{font-size:1.05rem;color:var(--ink);margin-bottom:11px;font-weight:600}
.panel ul{list-style:none}
.panel li{padding:6px 0 6px 26px;position:relative;font-size:.92rem;font-weight:600}
.panel li::before{position:absolute;left:0;font-weight:900;font-size:1rem}
.panel.plus li::before{content:"✓";color:var(--ok)}
.panel.minus li::before{content:"!";color:var(--warn);left:4px}
.ai-note{background:var(--card);border-radius:var(--r);border:2px solid var(--line);box-shadow:var(--shadow);padding:20px;margin-bottom:22px;border-left:6px solid var(--blue)}
.ai-note .tag{font-size:.66rem;font-weight:700;letter-spacing:.08em;color:var(--blue-deep);font-family:'IBM Plex Mono',monospace}
.ai-note p{margin-top:7px;font-size:.97rem;font-weight:600}
/* category dir */
.cat-group{margin-bottom:34px}
.cat-group h3{font-size:1.15rem;color:var(--ink);margin-bottom:13px;padding-bottom:8px;border-bottom:3px solid var(--blue-soft);font-weight:600}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:11px}
.cat-tile{background:var(--card);border-radius:14px;border:2px solid var(--line);box-shadow:0 2px 0 rgba(20,33,63,.07);padding:13px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:800;color:var(--ink);font-size:.92rem}
.cat-tile:hover{text-decoration:none;border-color:var(--blue)}
.cat-tile.off{opacity:.5;font-weight:700;color:var(--mut);pointer-events:none}
.cat-tile .st{font-size:.66rem;font-weight:700;font-family:'IBM Plex Mono',monospace;color:var(--mut)}
.cat-tile.live-cat{border-color:var(--ok)}
.cat-tile.live-cat .st{color:var(--ok)}
/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* "Nain pisteytamme" nostettiin navista tahan (17.8.2026). */
.steps-more{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.steps-more span{color:var(--mut);font-weight:700;font-size:.9rem}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);border-radius:var(--r);border:2px solid var(--line);box-shadow:var(--shadow);padding:22px}
.step .k{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--gold-deep);font-weight:600;letter-spacing:.1em}
.step h3{color:var(--ink);font-size:1.12rem;margin:8px 0 7px;font-weight:600}
.step p{font-size:.9rem;color:var(--mut);font-weight:600}
/* b2b */
.b2b{background:linear-gradient(165deg,var(--blue) 0%,var(--blue-deep) 100%);border-radius:var(--r);border:3px solid var(--ink);box-shadow:0 5px 0 rgba(74,14,44,.3);color:#fff;padding:30px;margin:26px 0}
.b2b h3{font-size:1.4rem;font-weight:700}
.b2b p{color:#F8DCE9;margin:9px 0 16px;max-width:640px;font-size:.95rem;font-weight:600}
.b2b small{display:block;margin-top:12px;color:#EBBCD3;font-size:.78rem;font-weight:600}
.b2b.light{background:var(--card);color:var(--ink)}
.b2b.light h3{color:var(--ink)}
.b2b.light p{color:var(--body)}
.b2b.light small{color:var(--mut)}
/* misc */
.crumb{font-size:.84rem;color:var(--mut);margin:22px 0 14px;font-weight:700}
.crumb a{color:var(--mut)}
.upd{display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--ink);background:var(--card);border:2px solid var(--line);border-radius:99px;padding:5px 13px;font-weight:600}
.upd::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.note{font-size:.82rem;color:var(--mut);background:var(--blue-soft);border:1.5px solid var(--line);border-radius:14px;padding:12px 16px;margin:18px 0;font-weight:600}
footer.site{background:var(--ink);color:#D9A8C1;padding:36px 0;margin-top:64px;font-size:.84rem}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
@media(max-width:700px){footer.site .cols{grid-template-columns:1fr}}
footer.site a{color:#F3CFE0;font-weight:700}
footer.site h4{color:var(--gold-line);font-size:.95rem;margin-bottom:9px;font-weight:600}
footer.site .fine{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:.75rem;line-height:1.6}
.pageh{padding:40px 0 8px}
.pageh h1{font-size:clamp(1.7rem,3.6vw,2.4rem);color:var(--ink);line-height:1.14;font-weight:800}
.pageh p.lead{color:var(--mut);margin-top:10px;max-width:640px;font-size:1.02rem;font-weight:600}
.meta-row{display:flex;gap:12px;align-items:center;margin-top:16px;flex-wrap:wrap}
.count-pill{font-family:'IBM Plex Mono',monospace;font-size:.76rem;color:var(--mut);font-weight:600}
/* ---------- motion & micro-interactions ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.bar i{transition:width .9s cubic-bezier(.2,.7,.2,1)}
.rank-card{transition:transform .22s cubic-bezier(.3,1.4,.4,1),box-shadow .22s ease,border-color .22s ease}
/* Koko kortti klikattavaksi (Anton 13.8.2026): ennen piti osua pieneen
   "Nain pisteet syntyvat" -nappiin. Nyt se linkki venytetaan ::after-pseudolla
   peittamaan koko kortti, joten mista tahansa kortin kohdasta paasee
   yrityssivulle. Muut linkit nostetaan sen ylapuolelle z-indexilla, jotta
   "Siirry palveluun" ja "Anna palautetta" toimivat yha omina linkkeinaan.
   Ei JS:aa: natiivi <a>, joten keskiklikki ja "avaa uuteen valilehteen"
   toimivat normaalisti. */
.rank-card{cursor:pointer}
.rank-card .cardlink::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r)}
.rank-card a:not(.cardlink),.rank-card button{position:relative;z-index:2}
/* EI LIIKETTA hoverissa eika klikissa (Anton 17.8.2026). Napit ja kortit
   nousivat, kallistuivat ja skaalautuivat osoittimen alla; se tuntui
   levottomalta ja sai painikkeet karkaamaan sivuun juuri kun niita painoi.
   Palaute annetaan nyt VAIN varilla, reunalla ja varjolla, ei koskaan
   transformilla. Ala lisaa transform:ia naihin uudelleen. */
.rank-card:hover{box-shadow:0 6px 0 rgba(20,33,63,.1),0 16px 34px rgba(30,79,168,.16)}
.cat-tile{transition:box-shadow .18s ease,border-color .18s ease,background .18s ease}
.cat-tile:not(.off):hover{box-shadow:0 4px 0 rgba(20,33,63,.12);border-color:var(--blue)}
.btn{transition:background .15s ease,box-shadow .15s ease,border-color .15s ease,color .15s ease}
/* Hover-vari tulee jo riveilta .btn:hover / .btn.ghost:hover (kulta kirkastuu,
   ghost saa sinisen savyn). Klikkipalaute = varjo litistyy, nappi EI liiku. */
.btn:active{box-shadow:inset 0 1px 3px rgba(58,14,36,.20)}
.btn.ghost:active{box-shadow:inset 0 1px 3px rgba(74,14,44,.12)}
.step{transition:box-shadow .2s ease,border-color .2s ease}
.step:hover{box-shadow:0 4px 0 rgba(20,33,63,.1)}
.chip{transition:border-color .15s ease,background .15s ease,color .15s ease}
/* Lajittelupalaute on nyt pelkka haivytys: kortit eivat enaa liu'u paikoilleen
   kun jarjestyschippia painaa (Anton 17.8.2026, "ei pikkuanimaatioita"). */
@keyframes sortIn{from{opacity:.35}to{opacity:1}}
.sort-in{animation:sortIn .25s ease}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}
/* ---------- palaute: Anna oma arvio (questionnaire, stored via api) ---------- */
#palaute{margin-top:42px}
.comm-sub b{color:var(--ink)}
.arvio-form{background:var(--card);border:2px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px;margin-bottom:20px}
.q-label{font-family:'Baloo 2',sans-serif;font-weight:600;color:var(--ink);font-size:1.02rem;margin:14px 0 9px}
.q-label:first-child{margin-top:0}
.q-label .opt{font-family:'Nunito',sans-serif;font-size:.78rem;color:var(--mut);font-weight:700}
.feel-row{display:flex;gap:8px;flex-wrap:wrap}
.feel{display:flex;flex-direction:column;align-items:center;gap:3px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:9px 12px;cursor:pointer;font-family:'Nunito',sans-serif;font-weight:800;font-size:.74rem;color:var(--mut);min-width:86px;transition:border-color .15s,background .15s}
.feel .fe{font-size:1.5rem;line-height:1;filter:grayscale(.55);transition:filter .15s}
.feel:hover{border-color:var(--blue)}
.feel.on{background:var(--gold-soft);border-color:var(--ink);color:var(--ink);box-shadow:0 2px 0 var(--ink)}
.feel.on .fe{filter:none}
.claim-row{display:flex;gap:9px;flex-wrap:wrap}
.claim{font-family:'Nunito',sans-serif;font-size:.88rem;font-weight:800;border:2px solid var(--line);background:#fff;color:var(--body);border-radius:999px;padding:8px 16px;cursor:pointer;transition:border-color .15s,background .15s}
.claim:hover{border-color:var(--blue)}
.claim.on{background:var(--blue);border-color:var(--ink);color:#fff;box-shadow:0 2px 0 var(--ink)}
.claim.on::before{content:"✓ "}
.arvio-form input,.arvio-form textarea{width:100%;border:2px solid var(--line);border-radius:12px;padding:11px 13px;font-family:'Nunito',sans-serif;font-size:.95rem;font-weight:600;color:var(--ink);background:#fff}
.arvio-form input{margin-top:16px}
.arvio-form input::placeholder,.arvio-form textarea::placeholder{color:#9DAAC5}
.arvio-form input:focus,.arvio-form textarea:focus{outline:none;border-color:var(--blue)}
.arvio-form textarea{margin-top:10px;min-height:94px;resize:vertical;line-height:1.5}
.cf-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.cf-note{font-size:.76rem;color:var(--mut);font-weight:600;max-width:340px}
.a-err{display:none;background:#FDECEA;border:2px solid var(--warn);color:var(--warn);border-radius:12px;padding:10px 14px;font-weight:700;font-size:.88rem;margin-top:12px}
.a-thanks{background:var(--card);border:2px solid var(--ok);border-radius:var(--r);box-shadow:var(--shadow);padding:20px;margin-bottom:20px;font-weight:700;color:var(--ink)}
.a-thanks .big{font-size:1.6rem;margin-right:8px;vertical-align:-3px}
/* aggregate summary */
.agg{background:var(--card);border:2px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.agg .a-emo{font-size:2.4rem;line-height:1}
.agg .a-num{font-family:'Baloo 2',sans-serif;font-weight:600;color:var(--ink);font-size:1.5rem}
.agg .a-num small{font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--mut);display:block;font-weight:500}
.agg-claims{display:flex;gap:8px;flex-wrap:wrap}
.agg-claims span{font-size:.78rem;font-weight:800;background:var(--blue-soft);border:1.5px solid var(--line);border-radius:99px;padding:4px 12px;color:var(--ink)}
/* review list */
.comment-list{display:flex;flex-direction:column;gap:12px}
.comment{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:14px 16px;animation:fadeUp .4s cubic-bezier(.2,.7,.2,1) both}
.c-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px}
.c-name{font-weight:800;color:var(--ink)}
.c-name .c-emo{font-size:1.05rem;margin-right:6px;vertical-align:-2px}
.c-date{font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--mut);white-space:nowrap}
.c-text{font-size:.94rem;font-weight:600;white-space:pre-wrap;word-break:break-word}
.c-empty{color:var(--mut);font-weight:700;padding:18px;text-align:center;background:var(--blue-soft);border-radius:12px}
/* ranking-card button group (all same size, 2-up grid) */
.rank-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;min-width:250px;max-width:310px;align-items:stretch}
.rank-btns .btn{text-align:center;padding:10px 8px;font-size:.82rem;white-space:nowrap}
.rank-btns .wide{grid-column:1/-1}
/* Korttinappien hierarkia (tiimin palaute 20.8.2026): Pete: "Siirry palveluun
   pitaa tulla silmille" + score samalle alueelle; isa: kaikki boksit olivat
   samanarvoisia ja samannakoisia. Nyt tarkeysjarjestys ylhaalta alas:
   1) SP-Score koko leveydella  2) Siirry palveluun (kulta + hehku, tulonlahde)
   3) Kannattaako vaihtaa  4) Nain pisteet syntyvat  5) Kysy kaverilta
   6) Anna palautetta hiljaisena tekstilinkkina. Kaksi varia: kulta = toiminta,
   valkoinen ghost = kaikki muu. Hehku on box-shadow-pulssi, EI liiketta
   (Anton kielsi transform-animaatiot 16.8.2026). */
.rank-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.rank-head .rank-title{min-width:0}
.rank-head .stamp{flex:0 0 auto;min-width:84px;padding:8px 12px 6px}
.rank-head .stamp .n{font-size:1.5rem}
.rank-btns .btn.go{padding:15px 10px;font-size:1rem;font-weight:800;letter-spacing:.01em;
  animation:goGlow 2.8s ease-in-out infinite}
@keyframes goGlow{
  0%,100%{box-shadow:0 1px 1px rgba(58,14,36,.08),0 2px 6px rgba(216,155,0,.28)}
  50%{box-shadow:0 1px 1px rgba(58,14,36,.10),0 3px 16px rgba(216,155,0,.60),0 0 0 3px rgba(247,181,0,.16)}}
@media(prefers-reduced-motion:reduce){.rank-btns .btn.go{animation:none}}
.rank-btns .cbtn{grid-column:1/-1;background:none;border:0;box-shadow:none;text-align:center;
  color:var(--mut);font-weight:700;font-size:.8rem;padding:5px 4px}
.rank-btns .cbtn:hover{color:var(--blue-deep);text-decoration:underline}
.cbtn .cc{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--mut);font-weight:600}
.cbtn .cc:not(:empty)::before{content:"("}
.cbtn .cc:not(:empty)::after{content:")"}
@media(max-width:700px){.rank-btns{max-width:none}}
/* ---------- mobile ---------- */
@media(max-width:720px){
  .wrap{padding:0 16px}
  /* Header: hampurilaisvalikko hoitaa navin (<=900px-lohko ylla), tassa vain
     brandin koko ja rivin korkeus. Aiempi vaakavieritettava linkkirivi
     poistettu 20.8.2026 (Anton) - se vei logolta tilan ja naytti ahtaalta. */
  header.site .wrap{height:56px;gap:10px}
  .brand{font-size:1.1rem}
  .brand img{width:46px;height:46px}
  .demo-ribbon{font-size:.7rem;padding:5px 10px}
  .hero{padding:28px 0 40px}
  .hero-logo{width:min(250px,64vw);height:auto;margin:0 auto 14px;display:block}
  .hero h1{text-align:center}
  .hero .sp-search{margin-top:18px}
  .hero .sp-hint{text-align:center;margin-top:10px}
  .hero p.lead{text-align:center;margin-left:auto;margin-right:auto;margin-top:16px}
  /* Kolme lukua samalle riville. flex+wrap teki 2+1-asettelun jossa kolmas luku
     ("kategoriaa suunnitteilla") jai yksin orvoksi omalle rivilleen. */
  .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
    margin-top:22px;text-align:center}
  .hero-stat b{font-size:1.3rem}
  .hero-stat span{display:block;font-size:.72rem;line-height:1.3}
  .sp-search{max-width:none}
  .searchband{margin-top:-16px;margin-bottom:26px}
  .searchband .sp-search input{padding:16px 96px 16px 48px;font-size:1rem}
  .searchband .sp-ico{left:17px;width:21px;height:21px}
  .top-grid{grid-template-columns:1fr}
  section.band{padding:40px 0}
}
@media(max-width:640px){
  table.rows th:nth-child(3):not(:last-child),table.rows td:nth-child(3):not(:last-child){display:none}
  /* Kriteeritaulukon 3. sarake ("Yhteensa") on joka rivilla vakio 100, eli puhdasta
     leveytta puhelimessa. Saanto yllä ohittaa sen (se ON last-child), mika pakotti
     taulukon ~519px leveaksi ~339px kontissa -> koko sivu venyi vaakaan (Anton
     11.8.2026). Muissa .rows-taulukoissa 3. sarake on oikeaa dataa (Bonus, "Mika
     muuttui"), siksi tama on rajattu .crit-luokkaan eika yleistetty. */
  table.rows.crit th:nth-child(3),table.rows.crit td:nth-child(3){display:none}
  /* Pitkat yhdyssanat ("Lastentarvikkeet-verkkokaupat") pitivat 1. sarakkeen
     min-contentin 189px:ssa -> taulukko 411px vaikka tilaa on 339px. anywhere
     (ei break-word) pienentaa nimenomaan min-contentia, joten taulukko mahtuu
     ilman vaakavieritysta. Vain mobiili + vain tama taulukko. */
  table.rows.crit td,table.rows.crit th{overflow-wrap:anywhere}
  /* anywhere yksin pudotti nimisarakkeen min-contentin ~0:aan -> selain antoi sille
     vain 62px ja nimet silppuuntuivat monelle riville. Kiinnitetaan jako 42/58,
     jolloin anywhere katkaisee vain jos yksi sana ei mahdu siihen leveyteen. */
  table.rows.crit th:first-child,table.rows.crit td:first-child{width:42%}
  table.rows th,table.rows td{padding:9px 14px;font-size:.83rem}
  .receipt-head{padding:12px 14px}
  .receipt-head h3 .w{display:block;margin-top:2px}
  .rank-card{padding:16px}
  .rank-side{flex-wrap:wrap;gap:8px}
  /* Tama saanto oli kirjoitettu vanhalle flex-napparivistolle. .rank-btns on nyt
     grid, jolloin flex-direction ei tee mitaan mutta align-items:center estaisi
     Score-leiman venymisen palautenapin korkuiseksi -> palautetaan stretch. */
  .rank-side>div{flex-wrap:wrap;align-items:stretch!important}
  .rank-btns{max-width:none}
  .btn{padding:9px 15px;font-size:.86rem}
  .rank-btns .btn.go{padding:13px 10px;font-size:.92rem}
  .p-hero{padding:20px}
  .stamp-big{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px}
  .b2b{padding:22px 18px}
  .quote{word-break:break-word}
}

/* --- Kannattaako vaihtaa? (15.8.2026, isan konsepti: vertailu -> suositus) --- */
/* --- SP-badge upotus (30.8.2026, isan sertifikaattispeksi) --- */
.embedcode{background:rgba(0,0,0,.28);border:1.5px solid var(--line,#ddd);border-radius:9px;
  padding:12px 14px;overflow-x:auto;margin:0 0 10px}
.embedcode code{font:12.5px/1.55 ui-monospace,Consolas,monospace;white-space:pre;color:inherit}
.copybtn{font-size:.85rem;padding:9px 18px}

.embed-preview{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0}
.embed-preview img{border-radius:14px;max-width:100%}
.embed-code{width:100%;font:12px/1.5 ui-monospace,Consolas,monospace;border:1.5px solid var(--line,#ddd);
  border-radius:9px;padding:10px 12px;background:rgba(255,255,255,.72);color:inherit;resize:vertical}

/* --- SP-Vahti (30.8.2026, isan seuranta-konsepti: kertakaynnista vahdiksi) --- */
.vahti{margin-top:34px;border:2px solid var(--blue);border-radius:14px;padding:22px 22px 20px;
  background:var(--blue-pale, #fff5fa)}
.vahti h3{margin:0 0 6px;font-size:1.05rem}
.vahti p{margin:0 0 14px;font-size:.92rem;color:var(--ink-soft, #555)}
.vahti-row{display:flex;gap:10px;flex-wrap:wrap}
.vahti-row input{flex:1;min-width:160px;border:1.5px solid var(--line, #ddd);border-radius:9px;
  padding:11px 13px;font:inherit;font-size:.95rem}
.vahti-row input:focus{outline:none;border-color:var(--blue)}
.vahti-row .btn{flex:none}
.vahti-note{font-size:.78rem;color:var(--ink-soft, #777);margin-top:10px}
.vahti-msg{margin-top:12px;font-weight:600;font-size:.92rem}
.vahti-msg.err{color:#b3261e}

/* Laskurinappi jokaisessa rankkauskortissa "Nain pisteet syntyvat" -napin alla.
   EI .cardlink-luokkaa, joten kortinlaajuinen overlay ei nappaa klikkausta. */
/* kv-btn ja ask-btn perivat nyt tavallisen ghost-tyylin: tiimin palaute
   20.8.2026 oli etta nappirivissa oli liikaa vareja (kulta+sininen+keltainen).
   Kaksi varia riittaa: kulta = Siirry palveluun, valkoinen = muut. */
.kv-promo{display:block;margin:20px 0 26px;padding:20px 24px;border:3px solid var(--ink);border-radius:var(--r);
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-deep) 100%);color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kv-promo:hover{text-decoration:none;filter:brightness(1.06)}
.kv-promo::after{content:"→";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:1.7rem;font-weight:800}
.kv-promo .t{font-family:'Baloo 2',sans-serif;font-size:1.25rem;font-weight:800;color:#fff;margin:0 0 2px}
.kv-promo .s{color:#FBDCE8;font-size:.95rem;margin:0;padding-right:40px}
.kv-promo .nw{display:inline-block;background:var(--gold);color:var(--ink);font-size:.66rem;font-weight:900;letter-spacing:.14em;
  padding:3px 9px;border-radius:999px;text-transform:uppercase;margin-bottom:8px}
.kv-panel{background:var(--card);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:26px;margin:6px 0 26px}
.kv-panel h2{color:var(--ink);font-size:1.3rem;margin:0 0 16px}
.kv-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}
.kv-field label{display:block;font-weight:800;color:var(--ink);font-size:.92rem;margin-bottom:6px}
.kv-field .hint{font-weight:600;color:var(--mut);font-size:.8rem;margin-top:5px}
.kv-field input[type=number],.kv-field select{width:100%;padding:13px 14px;border:3px solid var(--ink);border-radius:14px;
  font-family:inherit;font-size:1.02rem;font-weight:700;background:#fff;color:var(--ink);appearance:auto}
.kv-field input:focus,.kv-field select:focus{outline:3px solid var(--gold);outline-offset:1px}
.kv-check{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);cursor:pointer;padding:12px 0 0}
.kv-check input{width:22px;height:22px;accent-color:var(--blue)}
.kv-actions{margin-top:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.kv-verdict{border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:26px;margin:0 0 22px;background:var(--card)}
.kv-verdict .k{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.kv-verdict h3{font-size:1.65rem;margin:6px 0 8px;color:var(--ink)}
.kv-verdict.v-yes{background:linear-gradient(135deg,#EAFBF1 0%,#fff 70%);border-color:var(--ok)}
.kv-verdict.v-yes h3{color:var(--ok)}
.kv-verdict.v-maybe{background:linear-gradient(135deg,var(--gold-soft) 0%,#fff 70%);border-color:var(--gold-deep)}
.kv-verdict.v-no{background:linear-gradient(135deg,var(--silver-soft) 0%,#fff 70%)}
.kv-verdict .big{font-size:1.06rem}
.kv-verdict ul{margin:10px 0 0 20px}
.kv-vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 4px}
.kv-vs .cell{border:2px solid var(--line);border-radius:14px;padding:12px 16px;background:#fff}
.kv-vs .cell .l{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.kv-vs .cell .v{font-size:1.3rem;font-weight:900;color:var(--ink)}
.kv-vs .cell small{color:var(--mut);font-weight:700}
.kv-alt{border:3px solid var(--line);border-radius:var(--r);background:var(--card);padding:18px 20px;margin:0 0 14px;box-shadow:var(--shadow)}
.kv-alt.first{border-color:var(--gold);background:linear-gradient(135deg,var(--gold-soft) 0%,#fff 55%)}
.kv-alt .head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.kv-alt .head h4{margin:0;font-size:1.12rem;color:var(--ink)}
.kv-alt .head .op{color:var(--mut);font-weight:800;font-size:.9rem}
.kv-alt .scorepill{margin-left:auto;background:var(--ink);color:#fff;border-radius:999px;padding:3px 11px;font-size:.78rem;font-weight:800;white-space:nowrap}
.kv-alt .specs{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0;color:var(--body);font-weight:700;font-size:.9rem}
.kv-alt .specs span{background:var(--blue-soft);border-radius:999px;padding:3px 11px}
/* Kokonaisarvion erittely: hinta / Score / sopimuksen selkeys nakyvissa. */
.kv-bd{margin:10px 0;padding:12px 14px;border:2px solid var(--line);border-radius:12px;background:var(--cream)}
.kv-bd-t{display:block;font-weight:900;color:var(--ink);font-size:.92rem;margin-bottom:8px}
.kv-bd-r{display:grid;grid-template-columns:140px 1fr 92px;align-items:center;gap:10px;margin:5px 0;font-size:.82rem}
.kv-bd-r i{font-style:normal;font-weight:800;color:var(--body)}
.kv-bd-r .bar{display:block;height:9px;background:var(--blue-soft);border-radius:999px;overflow:hidden}
.kv-bd-r .bar u{display:block;height:100%;background:linear-gradient(90deg,var(--blue) 0%,var(--blue-deep) 100%);border-radius:999px}
.kv-bd-r em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--mut);text-align:right;white-space:nowrap}
.kv-alt .math{font-family:'IBM Plex Mono',monospace;font-size:.82rem;color:var(--body);background:var(--cream);
  border:2px dashed var(--line);border-radius:12px;padding:10px 14px;margin:10px 0;overflow-x:auto}
.kv-alt .foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:.85rem;color:var(--mut);font-weight:700}
.kv-alt .foot a{font-weight:800}
.kv-badge{display:inline-block;background:var(--gold);color:var(--ink);font-size:.66rem;font-weight:900;letter-spacing:.12em;
  padding:3px 9px;border-radius:999px;text-transform:uppercase;margin-bottom:6px}
.kv-badge.own{background:var(--blue-soft);color:var(--blue-deep)}
.kv-note{font-size:.86rem;color:var(--mut);font-weight:600}
.kv-src{font-size:.82rem;color:var(--mut);margin-top:6px}
.kv-table td,.kv-table th{white-space:nowrap}
.kv-table .tot{font-weight:900;color:var(--ink)}
@media(max-width:720px){
  .kv-grid{grid-template-columns:1fr}
  .kv-vs{grid-template-columns:1fr}
  .kv-promo::after{display:none}
  .kv-promo .s{padding-right:0}
  .kv-panel{padding:20px 16px}
  .kv-alt .scorepill{margin-left:0}
  .kv-bd-r{grid-template-columns:1fr 76px;gap:4px 8px}
  .kv-bd-r .bar{grid-column:1/-1;order:3}
}