/* JKJ2022 — uusi ilme (konsepti: esitykset.jannejaaskelainen.fi/jkj-etusivu-konsepti).
   Yksi tiedosto, ei build-vaihetta: assets/built/jkj.css on tämän kopio.
   Ghostin hallinnan koodi-injektio asettaa body/h1-h4-fontit omalla <style>-lohkollaan
   ghost_headin lopussa, joten fonttisäännöt kirjoitetaan html.jkj-etuliitteellä
   (spesifisyys voittaa pelkän tagivalitsimen). */

:root{--sat:0px;--bg:#000d13;--bg2:#001520;--bg3:#001d27;--red:#cc2031;--red2:#a8111f;--cream:#f0e6d3;--muted:#8a847e;--line:rgba(240,230,211,.12);--w:1240px;--gut:clamp(20px,4vw,48px);--sans:'DM Sans',system-ui,-apple-system,sans-serif;--serif:'DM Serif Display',Georgia,serif;--bebas:'Bebas Neue',Impact,sans-serif;--ghost-accent-color:#cc2031}
*,*:before,*:after{box-sizing:border-box}
html,body,h1,h2,h3,h4,h5,h6,p,blockquote,figure,ol,ul,dl,dd{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(96px + var(--sat));-webkit-text-size-adjust:100%}
html.jkj body{background:var(--bg);color:var(--cream);font-family:var(--sans);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
body{position:relative}
body:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:100;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Alasivuilla (body.sub) otsikoiden fontit tulevat sub.css:stä */
html.jkj :where(body:not(.sub)) :is(h1,h2,h3,h4){font-family:var(--serif);font-weight:400;line-height:1.15;color:var(--cream)}
a{color:inherit}
img,video,iframe{max-width:100%}
img{display:block;height:auto}
strong,b{font-weight:700}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 max(var(--gut),env(safe-area-inset-right,0px)) 0 max(var(--gut),env(safe-area-inset-left,0px))}
.narrow{max-width:calc(740px + 2 * var(--gut))}
html.jkj .bebas{font-family:var(--bebas);font-weight:400;letter-spacing:.01em;line-height:.9}
html.jkj .serif{font-family:var(--serif);font-weight:400}
.dot{color:var(--red)}
.kicker{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red);font-weight:700;display:flex;align-items:center;gap:.8em}
.kicker:before{content:"";width:40px;height:1px;background:var(--red);flex:none}
.kicker a{text-decoration:none}
.kicker a:hover{text-decoration:underline}
.meta-l{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;line-height:1.5}
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.95em 1.5em;border-radius:2px;font-weight:700;font-size:.95rem;text-decoration:none;cursor:pointer;border:0;font-family:var(--sans);transition:transform .2s,background .2s,color .2s,border-color .2s}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red2);transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(240,230,211,.35);color:var(--cream);background:transparent}
.btn-ghost:hover{border-color:var(--cream);transform:translateY(-2px)}
.arr{transition:transform .2s;display:inline-block}
a:hover .arr{transform:translateX(4px)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* NAV */
#announcement-bar-root{position:relative;z-index:60}
/* Etusivulla palkki on heron päällä eikä työnnä sivua alas: sisältö pysyy konseptin kohdalla */
.home-template #announcement-bar-root{position:absolute;top:0;left:0;right:0}
/* Ghostin ilmoituspalkki sivuston ilmeeseen: punainen pohja ja valkoinen teksti riippumatta hallinnassa
   valitusta teemasta (dark/light/accent). Palkki on tavallisessa DOMissa, Ghostin oma <style> nollaa sen
   lapset (all:unset), joten säännöt tarvitsevat id-spesifisyyden. Palkki ulottuu tilapalkin alle. */
#announcement-bar-root .gh-announcement-bar{background:var(--red);color:#fff;font-family:var(--sans);font-size:.88rem;line-height:1.45;padding:calc(12px + var(--sat)) 52px 12px;min-height:48px}
#announcement-bar-root .gh-announcement-bar p,#announcement-bar-root .gh-announcement-bar span{font-family:var(--sans);color:#fff}
#announcement-bar-root .gh-announcement-bar a{color:#fff!important;font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;transition:text-decoration-color .2s}
#announcement-bar-root .gh-announcement-bar a:hover{text-decoration:none}
#announcement-bar-root .gh-announcement-bar button{color:#fff;width:44px;height:44px;margin-top:calc(var(--sat) / 2 - 22px);right:4px;opacity:.85}
#announcement-bar-root .gh-announcement-bar button:hover{opacity:1}
#announcement-bar-root .gh-announcement-bar svg{width:12px;height:12px}
/* Valikko kiinteänä yläreunassa ilmoituspalkin alla (--ab). --navpad on 0, koska --sat on 0 (ks. tiedoston loppu). */
#nav{--navpad:max(0px,calc(var(--sat) - var(--ab,0px)));position:fixed;top:var(--ab,0px);left:0;right:0;z-index:50;padding-top:var(--navpad);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
/* Turva-alueen kaistale on täysin peittävä, ettei rullaava sisältö kuulu Dynamic Islandin ympäriltä */
#nav.solid,body:not(.home-template) #nav{background:linear-gradient(var(--bg),var(--bg)) 0 0/100% var(--navpad) no-repeat,rgba(0,13,19,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
html.jkj .logo{font-family:var(--bebas);font-size:1.65rem;letter-spacing:.04em;text-decoration:none;line-height:1;display:inline-flex;align-items:center;gap:.5em;color:var(--cream);min-width:0}
.logo img{height:46px;width:46px;display:block;flex:none}
.logo span{white-space:nowrap}
.logo b{color:var(--red);font-weight:400}
.links{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);list-style:none;font-size:.92rem;font-weight:500;margin:0;padding:0}
.links a{text-decoration:none;opacity:.78;transition:opacity .2s}
.links a:hover{opacity:1}
.links .btn{opacity:1;padding:.7em 1.15em}
.burger{display:none;background:none;border:0;color:var(--cream);width:44px;height:44px;cursor:pointer;flex:none;padding:0}
.burger span{display:block;width:24px;height:2px;background:currentColor;margin:5px auto;transition:transform .3s,opacity .3s}
/* Aktiivinen kohta body_classin perusteella (navigaatio on kovakoodattu partial) */
.page-janne-jaaskelainen .nav-kuka a,.page-suositukset .nav-suositukset a,
.page-kirjat .nav-kirjat a,.page-korporaatiot-kuntoon .nav-kirjat a,.page-exit-kirja .nav-kirjat a,
.page-yritysblogi .nav-blogi a,.page-blogiarkisto .nav-blogi a,.post-template .nav-blogi a,.tag-template .nav-blogi a,.author-template .nav-blogi a,.paged .nav-blogi a,
.page-palvelut-yrittajille .nav-palvelut a,.page-tulostulva .nav-palvelut a,.page-taskuhallitus .nav-palvelut a,.page-tayskaannos .nav-palvelut a,.page-tulostulva-t5 .nav-palvelut a{opacity:1;box-shadow:inset 0 -2px 0 var(--red);padding-bottom:4px}

/* HERO (etusivu) */
.hero{position:relative;padding:calc(clamp(130px,16vw,190px) + var(--sat)) 0 clamp(70px,8vw,110px);overflow:hidden}
.hero-photo{position:absolute;top:0;right:0;bottom:0;width:62%;background-position:88% center;background-size:cover;background-repeat:no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%);opacity:.9}
.hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0%,transparent 30%)}
.hero .wrap{position:relative}
html.jkj .roles{margin:1.6rem 0 2rem;font-size:clamp(2.9rem,9.6vw,8.6rem)}
.roles span{display:block;position:relative;width:max-content;max-width:100%;opacity:0;transform:translateY(24px);animation:up .7s cubic-bezier(.2,.7,.2,1) forwards}
.roles span:nth-child(1){animation-delay:.15s}
.roles span:nth-child(2){animation-delay:.4s}
.roles span:nth-child(3){animation-delay:.65s}
.roles span.dim{color:rgba(240,230,211,.92)}
.roles span.dim:after{content:"";position:absolute;left:-.04em;right:-.04em;top:52%;height:.07em;background:var(--red);transform:scaleX(0);transform-origin:left;animation:strike .55s cubic-bezier(.7,0,.3,1) forwards}
.roles span:nth-child(1):after{animation-delay:1.35s}
.roles span:nth-child(2):after{animation-delay:1.5s}
.roles span:nth-child(3):after{animation-delay:1.65s}
.roles span.one{color:var(--red);animation-delay:2.15s;font-size:.62em;margin-top:.18em}
@keyframes up{to{opacity:1;transform:none}}
@keyframes strike{to{transform:scaleX(1)}}
.lead{max-width:34rem;font-size:clamp(1.08rem,1.5vw,1.25rem);color:rgba(240,230,211,.86);opacity:0;animation:up .8s 2.4s forwards}
.lead em{font-style:normal;color:var(--cream);font-weight:700}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.2rem}
.hero .cta{opacity:0;animation:up .8s 2.6s forwards}

/* PROOF */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.proof-item{padding:clamp(28px,3.4vw,44px) clamp(14px,2vw,28px);border-left:1px solid var(--line)}
.proof-item:first-child{border-left:0;padding-left:0}
html.jkj .proof-item .bebas{font-size:clamp(2.8rem,5vw,4.4rem);color:var(--red)}
.proof-item p{font-size:.92rem;color:rgba(240,230,211,.72);line-height:1.45;margin-top:.5rem;max-width:15rem}

/* OSIOT */
section.sec,.sec{padding:clamp(80px,10vw,140px) 0}
html.jkj .h2{font-family:var(--bebas);font-weight:400;letter-spacing:.01em;line-height:.9;font-size:clamp(2.8rem,6.4vw,5.6rem);margin:1.1rem 0 1.4rem}
.intro{max-width:38rem;color:rgba(240,230,211,.8);font-size:1.12rem}
.intro a{color:var(--cream);text-decoration-color:var(--red);text-underline-offset:.18em}

/* TILANTEET / KORTIT */
.sit{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:22px;margin-top:3.4rem}
.card{position:relative;background:var(--bg2);border:1px solid var(--line);padding:clamp(28px,3vw,42px);display:flex;flex-direction:column;text-decoration:none;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,background .35s}
.card:hover{transform:translateY(-4px);border-color:rgba(204,32,49,.55);background:var(--bg3)}
.card.main{grid-row:span 2;background:linear-gradient(160deg,#16050a 0%,var(--bg2) 55%);border-color:rgba(204,32,49,.35)}
.card .num{position:absolute;right:-.06em;bottom:-.2em;font-family:var(--bebas);font-size:13rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(240,230,211,.07);pointer-events:none}
.card.main .num{font-size:22rem}
.tag{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700}
html.jkj .card h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.55rem,2.4vw,2rem);line-height:1.15;margin:.9rem 0 1rem}
html.jkj .card.main h3{font-size:clamp(2rem,3.4vw,2.9rem)}
.card p{color:rgba(240,230,211,.78);font-size:1rem;position:relative}
.card p+p{margin-top:1rem}
.card.main p{font-size:1.08rem}
.prod{margin-top:auto;padding-top:1.8rem;position:relative}
.prod-name{font-family:var(--bebas);font-size:2rem;letter-spacing:.02em;color:var(--cream)}
.card.main .prod-name{font-size:2.8rem}
.prod-meta{display:flex;flex-wrap:wrap;gap:.4em 1.2em;font-size:.86rem;color:var(--muted);margin:.25rem 0 1.1rem}
.prod-meta span:before{content:"";display:inline-block;width:5px;height:5px;background:var(--red);border-radius:50%;margin-right:.55em;vertical-align:middle}
.go{font-weight:700;font-size:.92rem;color:var(--red);display:inline-flex;gap:.5em}
.card.main .go{background:var(--red);color:#fff;padding:.9em 1.4em;width:max-content;max-width:100%}
.card:hover .arr{transform:translateX(5px)}

/* PERIAATE (kermanvärinen nosto) */
.principle{background:var(--cream);color:var(--bg);position:relative;overflow:hidden}
html.jkj .principle .q{font-family:var(--serif);font-size:clamp(2rem,4.6vw,4rem);line-height:1.1;max-width:56rem;color:var(--bg)}
.principle .q i{color:var(--red);font-style:italic}
.principle .q .b{display:block;margin-top:.42em}
.principle p{max-width:36rem;margin-top:2rem;font-size:1.12rem;color:#2b2a28}
.principle .kicker{color:var(--red2)}
.principle .kicker:before{background:var(--red2)}
.principle .mark{position:absolute;right:-2vw;top:-6vw;font-family:var(--serif);font-size:34vw;line-height:1;color:rgba(204,32,49,.07);pointer-events:none}

/* TARINA (etusivun Ghost-sisältö) */
.story-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,96px);align-items:start}
.story-side{position:sticky;top:120px}
html.jkj .story-side .h2{font-size:clamp(2.6rem,5.2vw,4.8rem)}
.braille{display:flex;gap:10px;margin-top:2rem;flex-wrap:wrap}
.braille i{display:grid;grid-template-columns:repeat(2,8px);gap:5px}
.braille i b{width:8px;height:8px;border-radius:50%;background:rgba(240,230,211,.12)}
.braille i b.on{background:var(--red)}
.braille-cap{font-size:.78rem;color:var(--muted);margin-top:.8rem;letter-spacing:.06em}
.story p{margin-bottom:1.3rem;color:rgba(240,230,211,.86)}
.story a{color:var(--cream);text-decoration-color:var(--red);text-underline-offset:.18em}
/* Etusivun sisällössä on vanhan etusivun kuvake, otsikko, kirjalaatikko ja logokuva:
   teema näyttää ne omina osioinaan, joten tarinasta piilotetaan kaksoiskappaleet. */
.story>figure:first-child:not(:has(img[src*="allekirjoitus"],img[src*="gasp-3"])),
.story>figure:first-child+h2,.story>h2:first-child,
.story #newbook-container,.story #newbook-container~*{display:none}
.story .kg-image-card{margin:1.4rem 0}
/* Postauksen oma avauskuva (Jannen naama) näytetään pyöreänä ja keskitettynä leipätekstin alussa */
.story > .kg-image-card:first-child{margin:0 0 2rem;text-align:center}
.story > .kg-image-card:first-child img{display:block;width:112px;height:112px;margin:0 auto;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--red)}

/* LOGOT */
.logos-sec{padding:clamp(60px,7vw,96px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
html.jkj .logos-sec h2{font-size:clamp(2rem,3.6vw,3rem);text-align:center}
.logos{display:flex;flex-wrap:wrap;justify-content:center;row-gap:clamp(14px,1.8vw,24px);margin-top:2.4rem}
.logos .lg{flex:0 0 calc(100%/6);height:clamp(56px,6vw,76px);display:flex;align-items:center;justify-content:center;padding:0 clamp(9px,1.2vw,18px)}
.logos img{max-height:clamp(24px,2.4vw,34px);max-width:100%;width:auto;height:auto;opacity:.66;transition:opacity .25s}
.logos img.sm{max-height:clamp(17px,1.7vw,24px)}
.logos img.sq{max-height:clamp(40px,4vw,56px)}
.logos img:hover{opacity:1}
.logos-cta{text-align:center;margin-top:clamp(28px,3vw,40px)}
/* Logot alasivujen sisällössä (partials/page-logos-swap.hbs korvaa vanhan logokuvan) */
.prose .page-logos{margin-top:1.6em}
.prose .page-logos img{margin:0}
.logos-cta a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:2px}

/* KIRJA */
.book{display:grid;grid-template-columns:auto 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.cover{width:clamp(200px,24vw,320px);transform:perspective(1200px) rotateY(-14deg) rotateX(3deg);box-shadow:30px 40px 80px rgba(0,0,0,.6),0 0 0 1px rgba(240,230,211,.08);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cover:hover{transform:perspective(1200px) rotateY(-4deg) rotateX(1deg)}
/* Kansi on myös .rv: .js .rv.in{transform:none} litisti kallistuksen. Nosto ja kallistus samaan transformiin. */
.js .cover.rv{transform:perspective(1200px) translateY(34px) rotateY(-14deg) rotateX(3deg)}
.js .cover.rv.in{transform:perspective(1200px) rotateY(-14deg) rotateX(3deg)}
.js .cover.rv.in:hover{transform:perspective(1200px) rotateY(-4deg) rotateX(1deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
html.jkj .book .h2{font-size:clamp(2.8rem,6vw,5.2rem)}
.book .meta{color:var(--muted);font-size:.92rem;margin:-.4rem 0 1.4rem;letter-spacing:.04em}
.book p.d{max-width:34rem;color:rgba(240,230,211,.82);font-size:1.1rem}

/* UUTISKIRJE */
.news{background:var(--red);color:#fff;position:relative;overflow:hidden;padding:clamp(80px,10vw,140px) 0}
/* Jannen sääntö: otsikon yläreuna ei ole leipätekstin yläreunaa alempana -> tasaus yläreunaan (ennen end) */
.news-in{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start;position:relative}
html.jkj .news .h2{color:#fff;margin:0}
.news p{font-size:1.15rem;color:rgba(255,255,255,.92);max-width:30rem}
.news .btn{background:var(--bg);color:var(--cream);margin-top:1.6rem}
.news .btn:hover{background:#000;transform:translateY(-2px)}
.news .ghostword{position:absolute;left:-1vw;bottom:-5vw;font-family:var(--bebas);font-size:22vw;line-height:1;color:rgba(0,0,0,.08);white-space:nowrap;pointer-events:none}

/* AI-kaista */
.ai{padding:44px 0;border-bottom:1px solid var(--line)}
.ai-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.ai p{color:rgba(240,230,211,.78);font-size:1.02rem}
.ai p b{color:var(--cream)}
.ai a.l{font-weight:700;color:var(--cream);text-decoration:underline;text-underline-offset:.16em;text-decoration-color:var(--red);text-decoration-thickness:2px}

/* FOOTER */
.site-footer{padding:72px 0 calc(40px + env(safe-area-inset-bottom,0px));font-size:.92rem;color:rgba(240,230,211,.7)}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.f-grid>div{min-width:0}
.site-footer .logo{max-width:100%}
.site-footer .logo span{white-space:nowrap;min-width:0;line-height:1.05}
html.jkj .site-footer h4{font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;font-weight:700;line-height:1.4}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.35rem;line-height:1.35}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--red)}
.site-footer a.u{text-decoration:underline;text-underline-offset:.16em}
.sig{width:170px;max-width:100%;margin-top:1.4rem;display:block}
.f-contact{margin-top:1.4rem!important}
.f-bottom .f-orgs{flex:1 1 auto;text-align:center}
@media(max-width:760px){.f-bottom .f-orgs{text-align:left}}
.f-social{display:flex;gap:14px;margin-top:1.4rem}
.f-social svg{width:22px;height:22px;fill:currentColor}
.f-badge{width:120px;margin-top:1.2rem;filter:grayscale(1) invert(1);mix-blend-mode:screen;opacity:.7}
.f-bottom{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--muted)}
.f-bottom a{text-decoration:none}
.f-bottom a:hover{color:var(--red)}

/* REVEAL (vain kun JS on käytössä) */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

/* ALASIVUJEN PIENET OSAT (otsakkeet, paperi ja lukualue ovat sub.css:ssä) */
.back{font-size:.9rem;text-decoration:none;opacity:.7;display:inline-block;margin-bottom:1.6rem}
.back:hover{opacity:1}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.8rem}
.chips a{font-size:.84rem;font-weight:500;text-decoration:none;padding:.45em .95em;border:1px solid rgba(240,230,211,.25);border-radius:999px;transition:border-color .2s,background .2s}
.chips a:hover{border-color:var(--red);background:rgba(204,32,49,.12)}
.chips small{color:var(--muted);margin-left:.3em}

/* BLOGILISTAT */
.thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg3);position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.thumb-empty{display:flex;align-items:center;justify-content:center;font-family:var(--bebas);font-size:4rem;color:rgba(240,230,211,.08);background:linear-gradient(160deg,#16050a 0%,var(--bg3) 70%)}
a:hover .thumb img{transform:scale(1.04)}
.lock{position:absolute;left:12px;bottom:12px;display:inline-flex;gap:.4em;align-items:center;background:rgba(0,13,19,.85);color:var(--cream);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.45em .8em}
.lock svg{width:12px;height:12px;fill:none}

.kg-width-full img{width:100%}
/* Allekirjoitus: vanha kuva on punainen valkoisella pohjalla, korvataan läpinäkyvällä */
.story img[src*="allekirjoitus"]{content:url(../imgs/allekirjoitus-punainen.png);width:170px!important;height:auto!important;margin:2rem 0 0}

/* Jäsensisällön lukko (partials/content-cta.hbs) */
.gh-post-upgrade-cta{margin-top:2em}
.gh-post-upgrade-cta-content{background:linear-gradient(160deg,#16050a 0%,var(--bg2) 60%)!important;border:1px solid rgba(204,32,49,.35);padding:clamp(28px,4vw,48px);text-align:center;color:var(--cream)}
html.jkj .gh-post-upgrade-cta-content h2{font-family:var(--bebas);font-size:clamp(2rem,4vw,3rem);line-height:.95;margin:0 0 .6em;color:var(--cream)}
.gh-post-upgrade-cta-content p{color:rgba(240,230,211,.82);font-size:1.02rem;max-width:34rem;margin:0 auto}
.gh-post-upgrade-cta-content .gh-btn{display:inline-flex;margin-top:1.4em;background:var(--red);color:#fff!important;padding:.95em 1.5em;font-weight:700;font-size:.95rem;text-decoration:none;cursor:pointer;border-radius:2px}
.gh-post-upgrade-cta-content .gh-btn:hover{background:var(--red2)}
.gh-post-upgrade-cta-content small{display:block;margin-top:1.2em;font-size:.88rem;color:var(--muted)}
.gh-post-upgrade-cta-content small a{color:var(--cream);cursor:pointer}

/* BLOGIARKISTO: kuukauden otsikko vain kuukauden ensimmäisellä kirjoituksella */
.archive-post{margin:0}
.archive-post-date-1+.archive-post-date-1 .archive-post-label,.archive-post-date-2+.archive-post-date-2 .archive-post-label,.archive-post-date-3+.archive-post-date-3 .archive-post-label,.archive-post-date-4+.archive-post-date-4 .archive-post-label,.archive-post-date-5+.archive-post-date-5 .archive-post-label,.archive-post-date-6+.archive-post-date-6 .archive-post-label,.archive-post-date-7+.archive-post-date-7 .archive-post-label,.archive-post-date-8+.archive-post-date-8 .archive-post-label,.archive-post-date-9+.archive-post-date-9 .archive-post-label,.archive-post-date-10+.archive-post-date-10 .archive-post-label,.archive-post-date-11+.archive-post-date-11 .archive-post-label,.archive-post-date-12+.archive-post-date-12 .archive-post-label{display:none}
.archive-tags .tag-opas,.archive-tags .tag-kampanja,.archive-tags .tag-tuote,.archive-post .tag-opas{display:none}

/* 404 */
.err{padding:calc(clamp(150px,16vw,200px) + var(--sat)) 0 clamp(40px,5vw,64px)}
html.jkj .err .code{font-family:var(--bebas);font-size:clamp(7rem,22vw,16rem);line-height:.85;color:var(--red)}
.err p{font-size:1.2rem;color:rgba(240,230,211,.82);margin:1rem 0 2rem;max-width:34rem}

/* Ghostin portaalinappi ja erilliset kampanjasivut */
.page-yrittaja-tuntuuko-firmasi-kultaiselta-vankilalta #nav,.page-yrittaja-tuntuuko-firmasi-kultaiselta-vankilalta .site-footer,.page-yrittaja-tuntuuko-firmasi-kultaiselta-vankilalta .news,.page-yrittaja-tuntuuko-firmasi-kultaiselta-vankilalta .ai{display:none}
.page-yrittaja-tuntuuko-firmasi-kultaiselta-vankilalta .cover-h{padding-top:calc(clamp(60px,8vw,100px) + var(--sat))}

@media(max-width:1100px){
 .f-grid{grid-template-columns:1fr 1fr 1fr}
 .f-grid>div:first-child{grid-column:1/-1}
}
@media(max-width:1000px){
 .links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--bg);padding:10px var(--gut) 28px;box-shadow:0 30px 60px rgba(0,0,0,.5);border-bottom:1px solid var(--line);transform:translateY(-130%);visibility:hidden;transition:transform .35s,visibility 0s .35s;max-height:calc(100vh - 76px - var(--sat));overflow-y:auto}
 .links.open{transform:none;visibility:visible;transition:transform .35s}
 .links li{width:100%;border-bottom:1px solid var(--line)}
 .links li:last-child{border:0;padding-top:18px}
 .links a{display:block;padding:14px 0;font-size:1.05rem}
 .links .btn{display:inline-flex;padding:.95em 1.5em}
 .links li a[class]:not(.btn){box-shadow:none}
 .burger{display:block}
 #nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 #nav.open .burger span:nth-child(2){opacity:0}
 #nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 #nav.open{background:var(--bg)}
 .page-janne-jaaskelainen .nav-kuka a,.page-suositukset .nav-suositukset a,.page-kirjat .nav-kirjat a,.page-yritysblogi .nav-blogi a,.post-template .nav-blogi a,.page-palvelut-yrittajille .nav-palvelut a{box-shadow:none;padding-bottom:14px;color:var(--red)}
 .sit{grid-template-columns:1fr}
 .card.main{grid-row:auto}
 .story-grid{grid-template-columns:1fr}
 .story-side{position:static}
 .news-in{grid-template-columns:1fr;align-items:start}
 .logos .lg{flex-basis:25%}
}
@media(max-width:900px){
}
@media(max-width:760px){
 html.jkj body{font-size:17px}
 .hero{padding-top:calc(76px + var(--sat))}
 .hero-photo{position:relative;width:100%;height:58vw;margin-bottom:-14vw;background-position:85% center;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
 .hero-photo:after{display:none}
 /* Hero-kicker yhdelle riville: kapeampi harvennus (koko ennallaan 12,5 px) */
 .hero .kicker{letter-spacing:.12em;white-space:nowrap}
 .proof-grid{grid-template-columns:1fr 1fr}
 .proof-item{padding-left:16px!important}
 .proof-item:nth-child(odd){border-left:0;padding-left:0!important}
 .proof-item:nth-child(n+3){border-top:1px solid var(--line)}
 /* Kirja-osio kapealla: kansi, otsikko ja linkki samaan vasempaan reunaan kuin muiden osioiden otsikot */
 .book{grid-template-columns:1fr;justify-items:start;text-align:left}
 .book-more .logos-cta{text-align:left}
 .cover{width:190px}
 .f-grid{grid-template-columns:1fr 1fr}
 .card .num{font-size:9rem}.card.main .num{font-size:13rem}
}
@media(max-width:370px){
 .hero .kicker{letter-spacing:.06em}
}
@media(max-width:640px){
 .logos .lg{flex-basis:calc(100%/3)}
 /* Puhelimella vain puolet logoista (merkitty home.hbs:ssä luokalla .key), kolme rinnakkain: 7 täyttä riviä */
 .logos .lg:not(.key){display:none}
}
@media(max-width:600px){
 .f-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important}
 .roles span,.lead,.hero .cta,.js .rv{opacity:1!important;transform:none!important}
 .js .cover.rv{transform:perspective(1200px) rotateY(-14deg) rotateX(3deg)!important}
 .roles span.dim:after{transform:scaleX(1)}
}

/* LINKKIEN HOVER-KÄÄNTEISYYS (Jannen sääntö): alleviivattu linkki ei ole hoverissa alleviivattu,
   alleviivaamaton on; kermanvärinen teksti tummalla pohjalla muuttuu hoverissa punaiseksi.
   Koskee tekstilinkkejä; painikkeet, logo ja kortti-/kuvalinkit sekä Ghostin ilmoituspalkki jäävät pois. */
a:where(:not(.btn,.logo,.card,.thumb,.kg-btn,.kg-bookmark-container,.kg-file-card-container,.gh-btn,.button,.gh-portal-close,.gh-announcement-bar a)):hover{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:.18em;color:var(--red)}
.intro a:hover,.story a:hover,.site-footer a.u:hover,.ai a.l:hover,.logos-cta a:hover,.page-janne-jaaskelainen .nav-kuka a:hover,.page-suositukset .nav-suositukset a:hover,.page-kirjat .nav-kirjat a:hover,.page-korporaatiot-kuntoon .nav-kirjat a:hover,.page-exit-kirja .nav-kirjat a:hover,.page-yritysblogi .nav-blogi a:hover,.page-blogiarkisto .nav-blogi a:hover,.post-template .nav-blogi a:hover,.tag-template .nav-blogi a:hover,.author-template .nav-blogi a:hover,.paged .nav-blogi a:hover,.page-palvelut-yrittajille .nav-palvelut a:hover,.page-tulostulva .nav-palvelut a:hover,.page-taskuhallitus .nav-palvelut a:hover,.page-tayskaannos .nav-palvelut a:hover,.page-tulostulva-t5 .nav-palvelut a:hover{text-decoration:none}
.intro a:hover,.story a:hover,.ai a.l:hover{color:var(--red)}
.logos-cta a{transition:border-color .2s,color .2s}
.logos-cta a:hover{border-bottom-color:transparent}
.page-janne-jaaskelainen .nav-kuka a:hover,.page-suositukset .nav-suositukset a:hover,.page-kirjat .nav-kirjat a:hover,.page-korporaatiot-kuntoon .nav-kirjat a:hover,.page-exit-kirja .nav-kirjat a:hover,.page-yritysblogi .nav-blogi a:hover,.page-blogiarkisto .nav-blogi a:hover,.post-template .nav-blogi a:hover,.tag-template .nav-blogi a:hover,.author-template .nav-blogi a:hover,.paged .nav-blogi a:hover,.page-palvelut-yrittajille .nav-palvelut a:hover,.page-tulostulva .nav-palvelut a:hover,.page-taskuhallitus .nav-palvelut a:hover,.page-tayskaannos .nav-palvelut a:hover,.page-tulostulva-t5 .nav-palvelut a:hover{box-shadow:none;color:var(--red)}
/* Logo: kermanvärinen teksti tummalla -> punainen hoverissa (sama kuin footerissa) */
html.jkj .logo{transition:color .15s}
html.jkj .logo:hover{color:var(--red)}
/* Etusivun palvelukorttien "Lue lisää →": punainen tummalla kortilla oli kontrastiltaan 3,4:1; hieman vaaleampi punainen
   (4,8:1). Pääkortin punainen nappi ennallaan. */
.card:not(.main) .go{color:#ee4a59}

/* Kiinteä valikko vieritettynä: valikkopalkki ja turva-alue yhtenä täysin peittävänä pintana samassa elementissä
   (Jannen palaute 20.10.2026: vierivä sisältö ei saa näkyä yläreunassa iOS:ssä). Ei läpikuultoa eikä sumennusta, joten
   turva-alueen ja palkin väliin ei synny saumaa. */
#nav.solid,body:not(.home-template) #nav{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
/* Ilmoituspalkin teksti tasapainotetuille riveille (puhelimessa "tästä." jäi yksin kolmannelle riville) */
#announcement-bar-root .gh-announcement-bar :is(p,div,span){text-wrap:balance}
/* Etusivun pääkortti: oma tausta ja reuna ohittivat .card:hover-säännön, joten hoverissa liikkui vain nuoli */
.card.main:hover{border-color:rgba(204,32,49,.75)}
.card.main:hover .go{background:var(--red2)}
/* Tumman pohjan pienet otsikkotarrat (.kicker, 12,5 px): brändipunainen #cc2031 oli kontrastiltaan 3,6:1; hieman
   kirkkaampi punainen 4,8:1. Viiva ennallaan. Paperilla .kicker on edelleen tummanpunainen (sub.css). */
.kicker{color:#e8394c}
/* AI-kaista (Jannen palaute 20.10.2026): lause ja "AI-strategia ↗" yhtenä keskitettynä kokonaisuutena, linkki heti lauseen
   perässä; kapealla linkki lauseen alle keskelle */
.ai-in{justify-content:center;gap:10px 18px;text-align:center}
.ai p{flex:0 1 auto}
@media(max-width:760px){.ai-in{flex-direction:column}.ai p{text-wrap:balance}}
/* Numeropalkin linkkiruutu (300 000 €+ -> /suositukset/): ei alleviivausta levossa, selite alleviivautuu hoverissa */
.proof-l{display:block;text-decoration:none;color:inherit}
.proof-l:hover p{color:var(--cream);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.2em}
.proof-l:hover .bebas{color:#e8394c}
/* Numeropalkki: luku aina yhdellä rivillä ("300 000 €+" katkesi "+"-merkin kohdalta 1440 ja 390 px) */
html.jkj .proof-item .bebas{white-space:nowrap;font-size:clamp(2.3rem,4.4vw,4rem)}
/* Etusivun Taskuhallitus-pääkortti: asiakkaan sanatarkka lainaus täyttää tilan, joka jäi tekstin ja tuotetietojen väliin
   (pääkortti on kahden kortin korkuinen); kapealla kortit ovat allekkain eikä tyhjää jää, joten lainaus piiloon */
.card-q{display:block;margin-top:auto;padding:0 0 0 1.1rem;border-left:2px solid var(--red);position:relative}
.cq-t{display:block;font-family:var(--serif);font-size:clamp(1.25rem,1.75vw,1.6rem);line-height:1.35;color:var(--cream)}
.cq-c{display:block;margin-top:.8rem;font-size:.86rem;color:rgba(240,230,211,.7)}
.cq-c b{color:var(--cream);font-weight:700}
.card.main .card-q+.prod{margin-top:auto}
@media(max-width:900px){.card-q{display:none}.card.main .card-q+.prod{margin-top:auto}}
/* iOS 26 Safari: env(safe-area-inset-top) on 0 eikä sivu ulotu tilapalkin alle; Safari värittää tilapalkin yläreunaa
   koskettavan kiinteän (fixed) elementin taustalla. Koko näkymän peittävä kiinteä rae-kerros (body:before, fixed inset:0)
   oli se elementti, joten tilapalkissa näkyi vierivä sisältö. Rae-kerros on nyt absolute koko sivun korkuisena: ylimpänä
   kiinteänä elementtinä on valikko, ja tilapalkki saa sen tumman värin (mitattu iOS-simulaattorilla, iPhone 18 Pro). */
/* == MOBIILIN KESKITYSSÄÄNTÖ (Jannen palaute 20.10.2026) ==================================================
   ≤ 600 px: jos osiossa on keskitetty elementti (avatar, logoruudukko, kuva, allekirjoitus), myös osion otsikot ja kuvat
   keskitetään; leipäteksti pysyy vasemmalla. Mittari: center_audit.py (otsikon/kuvan keskipiste vs keskitetty elementti ≤ 8 px). */
@media(max-width:600px){
 /* Tarina: avatar on keskellä -> otsikkolohko (kicker, otsikko, pistekirjoitus, selite) keskelle */
 .story-side{text-align:center}
 .story-side .kicker{justify-content:center}
 .braille{justify-content:center}
 /* Tarinan loppu: "Kassakuohuja ja tulostulvia!" ja allekirjoitus samalle keskiakselille */
 .story p:has(+ figure img[src*="allekirjoitus"]){text-align:center}
 .story figure:has(img[src*="allekirjoitus"]){text-align:center}
 .story img[src*="allekirjoitus"]{display:block;margin-left:auto!important;margin-right:auto!important}
 /* Kirjanosto: kansi keskelle (teksti ja napit vasemmalla) */
 .book .cover{justify-self:center}
 .book .kicker{justify-content:center}
 html.jkj .book .h2,.book .meta{text-align:center}
 /* Asiakaslogot: otsikko ja linkki samalle akselille kuin logoruudukko */
 html.jkj .logos-sec h2,.logos-cta{text-align:center}
}
/* Footerin Suomen Vahvimmat -merkki: kuvan näkyvä osa alkaa 3/220 sisältä -> vasen reuna tekstin linjaan; ennen 120 px
   leveä ja 70 % peittävyys, teksti ei ollut luettavissa */
.f-badge{width:190px;max-width:100%;margin-left:calc(-3 / 220 * 190px);opacity:.85}
/* Valikko rae-kerroksen yläpuolelle: Safari värittää tilapalkin valikon puhtaalla #000d13:lla, rae vaalensi valikon
   (6/19/23) ja tilapalkin ja valikon väliin jäi sauma */
#nav{z-index:110}
/* --sat on 0: sivu ei ulotu tilapalkin alle (viewport ilman coveria), joten turva-alueen täytettä ei lisätä mihinkään. */
/* Jannen palaute 20.10. klo 11.23: puhelimessa ensisijaiset ja niiden rinnalla olevat napit sisältöpalstan levyisiksi
   (sama leveys kuin palstan kuva ja teksti), ei kapeita eri levyisiä nappeja. Valikon ja evästebannerin napit omat. */
@media(max-width:600px){
 main .btn:not(.links .btn),.hero .btn,.news .btn,.gh-post-upgrade-cta-content .gh-btn,.kg-button-card a.kg-btn{display:flex;width:100%;justify-content:center;box-sizing:border-box}
 .card.main .go{width:100%;justify-content:center;box-sizing:border-box}
 main .btn,.hero .btn{text-align:center}
 main .cta,.hero .cta,.news .cta{display:flex;flex-direction:column;align-items:stretch;gap:10px}
 main .cta .btn+.btn{margin-left:0}
 html.jkj body:not(.sub) h1,html.jkj body:not(.sub) h2,html.jkj body:not(.sub) h3{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal}
}
/* Etusivun palvelukortit (Jannen pyyntö 20.10.2026): jokaisessa sama punainen nappi omalle palvelusivulle
   (/taskuhallitus/, /tulostulva/, /tayskaannos/), kortin alareunassa; puhelimessa palstan levyinen */
.card .go{background:var(--red);color:#fff;padding:.9em 1.4em;width:max-content;max-width:100%;transition:background .2s}
.card:not(.main) .go{color:#fff}
.card:hover .go{background:var(--red2)}
@media(max-width:600px){.card .go{width:100%;justify-content:center;box-sizing:border-box}}
/* Etusivun "Yrittäjä tulee luokseni…" yhdelle riville työpöydällä (Jannen pyyntö 20.10.2026) */
@media(min-width:1100px){.intro{max-width:none}}
/* AI-kaistan yläväli (Jannen palaute 20.10.2026): kun uutiskirjenauha ei näy (kirjautunut jäsen), AI-kaista seuraa
   suoraan sivun viimeistä osiota ja väliin jäi 160-265 px tyhjää. Tyhjä .after-sheet pois ja viimeisen tumman osion
   alapehmuste samaksi kuin AI-kaistan oma pehmuste, jolloin väli on sama kuin muiden osioiden välillä. */
.after-sheet:empty{display:none}
.site-content:has(+ .ai) main>:is(section,.sec,.after-sheet):not(.ctaband):last-child,.site-content:has(+ .ai) main>article:last-child>:is(.logos-sec,section):last-child{padding-bottom:clamp(56px,6vw,80px)}
/* Etusivun kansikuva mobiilissa (Jannen palaute 20.10.2026): lähdekuvan (2800 x 937) oikeassa reunassa on täysin musta
   palkki x >= 2565. Kuva korkeuden mukaan ja vaakasijainti siten, että näkyvä alue päättyy kohtaan x = 2540:
   siirto = -(2540 / 937 * 58vw - 100vw) = -57.2vw. Kasvot (x 1880-2240) jäävät näkymän kohtaan 59-81 %. */
@media(max-width:900px){.hero-photo{background-size:auto 100%;background-position:-57.2vw 50%}}
/* Etusivun julkaisijanauha heti kannen alla (Jannen päätös 42A, 20.10.2026). Sama himmennetty valkoinen kuin
   asiakaslogoissa; desktopissa yksi rivi, mobiilissa 4 + 3 keskitettynä. */
.pubs{padding:clamp(28px,3vw,40px) 0;border-top:1px solid var(--line)}
html.jkj .pubs-h{font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700;text-align:center;margin:0 0 clamp(18px,2vw,26px)}
.pubs-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:clamp(16px,2.6vw,40px)}
.pubs-l li{flex:0 1 auto;min-width:0;display:flex;justify-content:center}
.pubs-l img{display:block;height:calc(var(--h) * .44px);width:auto;max-width:100%;opacity:.66}
@media(max-width:900px){
 .pubs-l{flex-wrap:wrap;justify-content:center;gap:22px 0}
 .pubs-l li{flex:0 0 25%;padding:0 8px;box-sizing:border-box}
 .pubs-l li:nth-child(n+5){flex-basis:33.333%}
 .pubs-l img{height:calc(var(--h) * .36px)}
}
@media(max-width:400px){.pubs-l img{height:calc(var(--h) * .31px)}}