/* hub-pehmea.css — 28.9.2026 (julkaistu: /hub/, /hub/en/, /hub/ominaisuudet.html, /hub/en/features.html). Raslak Hubin julkiset sivut "vähän pehmeämmiksi".
   Ladataan VIIMEISENÄ sivun omien tyylien jälkeen. Poisto = poista <link>-rivi.
   EI väriteeman muutosta: ei yhtään uutta tausta- tai aksenttiväriä. Ainoat värimuutokset ovat
   läpinäkyvyyksiä sivun omiin viiva-/hehkuväreihin rgba(143,191,130,·) ja varjon mustaan rgba(0,0,0,·).
   Rakenne, tekstit, kuvat, Barlow Condensed -pääotsikot ja animaatiot pysyvät ennallaan. */

/* 1) Reunaviivat ja ruudukko hillitymmiksi (sama vihreä, pienempi opasiteetti) */
:root{
  --line:rgba(143,191,130,.11);       /* ennen .16 */
  --wire:rgba(143,191,130,.20);       /* ennen .26 */
  --wire-soft:rgba(143,191,130,.07);  /* ennen .10 */
  --wire-faint:rgba(143,191,130,.03); /* ennen .05 — sivun taustaruudukko */
}
.page-bg-line{background:linear-gradient(90deg,transparent,rgba(143,191,130,.16),transparent)}
.scanline{background:linear-gradient(90deg,transparent,rgba(143,191,130,.24),transparent)}
.raster-glowline{opacity:.4; box-shadow:0 0 18px 2px rgba(143,191,130,.3)}

/* 2) Kortit: pyöreämmät kulmat + pehmeä hajavarjo mustaan pohjaan */
.hud{border-radius:22px; box-shadow:0 22px 48px -30px rgba(0,0,0,.6)}
.hud:hover{box-shadow:0 0 0 1px rgba(143,191,130,.10), 0 26px 56px -26px rgba(0,0,0,.6), 0 0 32px rgba(143,191,130,.05)}
.feat-card,.hero-lead,.ent-band,.comp-wrap{border-radius:20px}
.mp-card,.tk-kuva img{border-radius:22px}
.mf,.faq details,.cell.lead .leadviz{border-radius:16px}
.mp-row,.mp-search{border-radius:14px}
.cell .ico,.feat-card .fc-ico{border-radius:14px}
.mf .mi{border-radius:12px}
.integ-cat{border-radius:0 14px 14px 0}
.rax-prompt{border-radius:18px 18px 18px 5px}
.rax-res{border-radius:18px 18px 5px 18px}
.contact-msg{border-radius:12px}

/* 3) HUD-kulmamerkit: pienemmät, ohuemmat, himmeämmät ja pyöristetyt (eivät katoa kokonaan) */
.hud::before,.hud::after{width:10px; height:10px; border-width:1px; opacity:.2}
.hud::before{top:12px; left:12px; border-top-left-radius:6px}
.hud::after{bottom:12px; right:12px; border-bottom-right-radius:6px}
.hud:hover::before,.hud:hover::after{opacity:.45; width:12px; height:12px}
@media(max-width:560px){.hud::before{top:10px; left:10px} .hud::after{bottom:10px; right:10px}}

/* 4) NAPIT YHTENÄISIKSI 28.9.2026: kaikki toimintonapit samaa läpikuultavaa lasipilleriä Hubin omalla vihreällä.
      Ennen: täysi vihreä tausta (.btn-primary, .hdr-cta, .plan-cta.primary, lomakkeiden lähetys, alasivujen .btn)
      ja läpinäkyvä ohut reuna (.btn-ghost, .hdr-cta.demo, .plan-cta.sec). Nyt kaikki: tausta rgba(143,191,130,.16),
      reuna .5, teksti #8fbf82 (= --accent-bright; alasivuilla --accent), blur 10px. Ei uusia värejä.
      Hinnoittelun kk/vuosi-valitsin (.toggle button) EI kuulu tähän – se on valitsin. */
.btn,.btn-primary,.btn-ghost,a.btn-ghost,
.hdr-cta,.hdr-cta.demo,
.plan-cta,.plan-cta.primary,.plan-cta.sec,
.hlf-row button,.contact-form button[type=submit]{
  background:rgba(143,191,130,.16) !important;
  color:#8fbf82 !important;
  border:1px solid rgba(143,191,130,.5) !important;
  border-radius:999px !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(143,191,130,.14) !important;
  font-family:'DM Sans',sans-serif; font-weight:600 !important; letter-spacing:.01em; text-decoration:none;
  transition:background .2s, border-color .2s, box-shadow .25s !important;
}
/* sama padding-rytmi: normaali nappi / yläpalkin pieni nappi */
.btn,.btn-ghost,.plan-cta,.hlf-row button,.contact-form button[type=submit]{padding:.85rem 1.5rem; font-size:.95rem}
.plan-cta{padding:.8rem 1.2rem}
.hdr-cta,.hdr-cta.demo,header .btn{padding:.48rem 1rem !important; font-size:.84rem !important}
@media(max-width:560px){.hdr-cta,.hdr-cta.demo{padding:.42rem .7rem !important; font-size:.78rem !important}}
@media(max-width:640px){header .btn{padding:.42rem .85rem !important; font-size:.84rem !important}}
/* hover/focus: tausta hieman vahvempi, reuna kirkkaampi, ei hyppyä */
.btn:hover,.btn-primary:hover,.btn-ghost:hover,a.btn-ghost:hover,
.hdr-cta:hover,.hdr-cta.demo:hover,
.plan-cta:hover,.plan-cta.primary:hover,.plan-cta.sec:hover,
.hlf-row button:hover,.contact-form button[type=submit]:hover{
  background:rgba(143,191,130,.22) !important;
  border-color:rgba(143,191,130,.8) !important;
  box-shadow:inset 0 1px 0 rgba(143,191,130,.2), 0 10px 26px -16px rgba(143,191,130,.35) !important;
  transform:none !important;
}
.btn:focus-visible,.btn-ghost:focus-visible,.hdr-cta:focus-visible,.plan-cta:focus-visible,
.hlf-row button:focus-visible,.contact-form button[type=submit]:focus-visible{outline:2px solid rgba(143,191,130,.85); outline-offset:3px}
.hlf-row button:disabled,.contact-form button[type=submit]:disabled{opacity:.55; cursor:default}
.btn .ar{color:inherit}
.hdr-burger{border-radius:12px}
.mp-new,.toggle .save{letter-spacing:.04em}
.toggle .save{border-radius:999px}

/* 5) Hehkut hajavarjoiksi (sama vihreä, pehmeämpi ja matalampi). Nappien hehku poistettu kohdassa 4. */
.plan.popular{box-shadow:0 0 0 1px rgba(143,191,130,.16), 0 30px 60px -32px rgba(143,191,130,.28)}
.rax-res{box-shadow:0 14px 30px -20px rgba(143,191,130,.25)}
.brand img{filter:drop-shadow(0 0 6px rgba(143,191,130,.35)) drop-shadow(0 0 2px rgba(143,191,130,.25))}
.foot-row img{filter:drop-shadow(0 0 5px rgba(143,191,130,.3))}
.hero-head h1 .em{text-shadow:0 0 30px rgba(143,191,130,.22)}
.tst-dots button.active{box-shadow:0 0 6px rgba(143,191,130,.5)}
.tk-kuva img{box-shadow:0 22px 50px -24px rgba(0,0,0,.6)}
.mp-card{box-shadow:0 26px 56px -30px rgba(0,0,0,.6)}

/* 6) Lomakekentät: pyöreämmät, pehmeämpi fokusrengas */
.contact-form input,.contact-form textarea,.hlf-row input:not(.honeypot){border-radius:14px}
.hlf-row input:focus{box-shadow:0 0 0 3px rgba(143,191,130,.10)}

/* 7) Pienet VERSAALI-nimiöt kevyemmiksi: yläotsikot (eyebrow) ja pilleri pysyvät versaalina,
      mutta kirjainväli ja paino kevenevät. Pienimmät mikronimiöt (lomakkeen kentät, taulukon otsakkeet,
      merkit, pikkulinkit) muuttuvat tavalliseksi kirjoitukseksi DM Sansilla ja hieman isommaksi. */
.eyebrow{letter-spacing:.14em; font-weight:600}
.pill{letter-spacing:.1em; font-weight:600}
.proof .k,.calc-h,.more-head h3{letter-spacing:.14em; font-weight:600}
.plan-name{letter-spacing:.05em}
.ent-band .et b{letter-spacing:.06em}
.feat-card .fc-n,.phone-caption .pc-n{letter-spacing:.12em}
.mp-stores{letter-spacing:.1em}
.fp-toc a b{letter-spacing:.08em}
/* mikronimiöt → tavallinen kirjoitus */
.contact-form label{font-family:'DM Sans',sans-serif; text-transform:none; letter-spacing:.01em; font-size:.78rem; font-weight:600}
.comp th{text-transform:none; letter-spacing:.01em; font-size:.84rem; font-weight:600}
.calc-total .lbl{text-transform:none; letter-spacing:.01em; font-size:.8rem}
.integ .c{text-transform:none; letter-spacing:.01em; font-size:.74rem}
.ref a.more,.integ-more{text-transform:none; letter-spacing:.01em; font-weight:600}
.ref .badge,.role .tag,.plan-badge,.cell .cell-badge,.mf b .new,.mp-price em{font-family:'DM Sans',sans-serif; text-transform:none; letter-spacing:.02em; font-weight:600}
.ref .badge{font-size:.72rem; border-radius:999px}
.role .tag{font-size:.76rem}
.plan-badge{font-size:.72rem}
.cell .cell-badge,.mf b .new{font-size:.68rem}
.mp-price em{font-size:.68rem}

/* 8) Kevyemmät fonttipainot väliotsikoissa ja nappiteksteissä (pääotsikot ennallaan) */
h3{font-weight:600}
.faq summary,.role a,.toggle button{font-weight:600}
.early h2{font-weight:600}
.tk-head h2{font-weight:700}

/* 9) Alasivut ja artikkelit (laskutus.html ym., artikkelit/*.html): sama linja */
.cta-box{border-radius:24px; box-shadow:0 22px 48px -30px rgba(0,0,0,.6)}
.card{border-radius:22px; box-shadow:0 20px 44px -30px rgba(0,0,0,.6)}
main>ul>li{border-radius:16px}
summary{font-weight:600}
th{letter-spacing:.03em; font-weight:600}
.tag{letter-spacing:.06em}
.card h3{letter-spacing:.01em}

/* 10) NAPIT, jotka jäivät ennen kohdan 4 ulkopuolelle (28.9.2026 nappiaudit):
       WhatsApp-pikanappi (inline-tyyli, oma vihreä #25D366), ominaisuussivun ryhmäpillerit (.fp-toc a) ja valikkonappi.
       Sama lasi kuin kohdassa 4. */
a[href^="https://wa.me/"][style*="position:fixed"]{
  background:rgba(143,191,130,.16) !important;
  border:1px solid rgba(143,191,130,.5) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(143,191,130,.14), 0 12px 28px -14px rgba(0,0,0,.7) !important;
  width:52px !important; height:52px !important;
}
a[href^="https://wa.me/"][style*="position:fixed"] svg{fill:#8fbf82; width:26px; height:26px}
a[href^="https://wa.me/"][style*="position:fixed"]:hover{background:rgba(143,191,130,.22) !important; border-color:rgba(143,191,130,.8) !important}
.fp-toc a{
  background:rgba(143,191,130,.16) !important; color:#8fbf82 !important;
  border:1px solid rgba(143,191,130,.5) !important; border-radius:999px !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(143,191,130,.14); font-weight:600;
}
.fp-toc a:hover{background:rgba(143,191,130,.22) !important; border-color:rgba(143,191,130,.8) !important}
.fp-toc a b{color:#8fbf82}
.hdr-burger{background:rgba(143,191,130,.16) !important; border:1px solid rgba(143,191,130,.5) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}

/* 10b) Evästebannerin napit (/consent.js injektoi omat tyylinsä: .rc-ok täysvihreä, .rc-no läpinäkyvä) + EN-hinnoittelun
        oranssi "Launch offer" -pilleri + hinnoittelun kk/vuosi-valitsimen aktiivinen puoli: sama lasi. Sisältö ja hinnat ennallaan. */
.rc-ok,.rc-no,a[href="/hub/early-bird.html"][style*="#e08a2b"]{
  background:rgba(143,191,130,.16) !important; color:#8fbf82 !important;
  border:1px solid rgba(143,191,130,.5) !important; border-radius:999px !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(143,191,130,.14) !important; font-weight:600 !important;
}
.rc-ok:hover,.rc-no:hover,a[href="/hub/early-bird.html"][style*="#e08a2b"]:hover{background:rgba(143,191,130,.22) !important; border-color:rgba(143,191,130,.8) !important}
.toggle button.active{
  background:rgba(143,191,130,.16) !important; color:#8fbf82 !important;
  box-shadow:inset 0 0 0 1px rgba(143,191,130,.5), inset 0 1px 0 rgba(143,191,130,.14) !important;
}
.toggle button.active .save{background:rgba(143,191,130,.2) !important; color:#8fbf82 !important}

/* 11) OMINAISUUSLISTAT MOBIILISSA VAAKAKARUSELLIKSI (28.9.2026, Mikko: "ominaislistaukset mobiilissa ns vaaka karuselli").
       Vain CSS (scroll-snap), ei JS:ää. Kortti ~80 vw, seuraava kortti näkyy reunassa + teksti "N korttia · pyyhkäise".
       Kortin korkeus = oma sisältö (ei leikkausta, vrt. 15.8.2026 jolloin tekstit jäivät piiloon).
       Sivu itse ei vieritä vaakaan: karuselli ulottuu vain .wrap-reunuksen (1.4rem) yli ruudun reunaan asti. */
.swipe-hint{display:none}
@media(max-width:760px){
  .swipe{
    display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; grid-template-columns:none !important;
    overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; scroll-padding-inline:1.4rem;
    gap:12px !important; margin-left:-1.4rem !important; margin-right:-1.4rem !important;
    padding:4px 1.4rem 14px !important; scrollbar-width:none; align-items:stretch;
  }
  .swipe::-webkit-scrollbar{display:none}
  .swipe::after{content:""; flex:0 0 .6rem}
  .swipe>*{
    flex:0 0 80vw !important; width:80vw !important; max-width:340px !important; min-width:0 !important;
    scroll-snap-align:start; grid-column:auto !important; grid-row:auto !important;
    opacity:1 !important; transform:none !important; margin:0 !important;
  }
  .mp-points.swipe>li{border:1px solid var(--line); border-radius:16px; padding:1rem 1.05rem; background:rgba(143,191,130,.03)}
  .swipe-hint{display:flex; justify-content:flex-end; align-items:center; gap:.35rem; margin:.15rem 0 0; font-size:.78rem; color:var(--muted); letter-spacing:.01em}
  .swipe-hint .ar{color:#8fbf82}
  .mp-grid>.swipe-hint{margin-top:-1.3rem}
}