/* Alasivujen "tumma kansi, vaalea sivu" (konsepti ~/presentations/jkj-alasivut-konsepti, assets/sub.css).
   Siirretty sellaisenaan; teemaan sovitetut kohdat on merkitty ja koottu tiedoston loppuun. */
/* ==========================================================================
   Alasivut: "tumma kansi, vaalea sivu".
   site.css (etusivu) tuo paletin, napit, navin, footerin ja logot.
   Tämä tiedosto lisää paperin (lukualue), Ghostin {{content}}-korttien tyylit
   ja sivukohtaiset osat. Kaikki rajattu body.sub-luokkaan.
   ========================================================================== */
:root{
 --paper:#f6efe1;      /* lukupaperi: --cream vaalennettuna */
 --paper2:#ede2cc;     /* paperin varjosävy: laatikot, kortit */
 --paper3:#e4d6bb;
 --ink:#0b1b24;        /* sinimusta teksti paperilla */
 --ink2:#4a5257;       /* toissijainen teksti paperilla */
 --prule:rgba(11,27,36,.16);
 --measure:33em;       /* ~70 merkkiä 19 px DM Sansilla */
}
body.sub{background:var(--bg)}
body.sub .links a[aria-current="page"]{opacity:1;box-shadow:inset 0 -2px 0 var(--red);padding-bottom:4px}

/* --- LINKKISÄÄNNÖT ------------------------------------------------------
   1) Alleviivattu linkki -> hoverissa alleviivaus pois.
   2) Alleviivaamaton linkki -> hoverissa alleviivaus.
   3) Tummalla: kerma -> hoverissa punainen.
   4) Paperilla: muste + punainen alleviivaus -> hoverissa tummanpunainen, ei viivaa. */
body.sub .links a:not(.btn):hover{opacity:1;color:var(--red);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
body.sub footer a:hover{color:var(--red);text-decoration:underline;text-underline-offset:.18em}
body.sub footer a.u:hover{text-decoration:none}
body.sub .dl{color:var(--cream);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.26em;transition:color .15s}
body.sub .dl:hover{color:var(--red);text-decoration-color:transparent}
body.sub .pl{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.26em;transition:color .15s}
body.sub .pl:hover{color:var(--red2);text-decoration-color:transparent}
body.sub a.nu{text-decoration:none}
body.sub a.nu:hover .nu-t,body.sub a.nu:hover>h3,body.sub a.nu:hover>h2{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.15em}
body.sub :focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* --- KANSI (tumma otsake) ------------------------------------------------ */
body.sub .cover-h{position:relative;padding:clamp(120px,13vw,170px) 0 clamp(120px,12vw,180px);overflow:hidden}
body.sub .cover-h .wrap{position:relative;z-index:2}
body.sub .cover-ph{position:absolute;top:0;right:0;bottom:0;width:56%;background-size:cover;background-repeat:no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 48%);mask-image:linear-gradient(90deg,transparent 0%,#000 48%);opacity:.92}
body.sub .cover-ph:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0%,transparent 34%)}
body.sub .h1{font-size:clamp(3.4rem,9vw,7.6rem);margin:1rem 0 1.2rem;max-width:11ch}
body.sub .sub-lead{max-width:33rem;font-size:clamp(1.08rem,1.5vw,1.25rem);color:rgba(240,230,211,.86)}
body.sub .crumbs{font-size:.88rem;color:var(--muted)}
body.sub .crumbs a{color:var(--muted);text-decoration:none}
body.sub .crumbs a:hover{color:var(--red);text-decoration:underline}

/* --- PAPERI ------------------------------------------------------------- */
body.sub .sheet{position:relative;z-index:3;background:var(--paper);color:var(--ink);max-width:1240px;margin:calc(-1 * clamp(64px,7vw,110px)) auto 0;box-shadow:0 -1px 0 rgba(255,255,255,.04),0 50px 120px rgba(0,0,0,.55)}
body.sub .sheet.flush{margin-top:0}
body.sub .sheet+.sheet{margin-top:0}
body.sub .sheet-in{padding:clamp(48px,6vw,96px) clamp(20px,6vw,96px)}
body.sub .sheet .kicker{color:var(--red2)}
body.sub .sheet .kicker:before{background:var(--red2)}
body.sub .sheet .h2{color:var(--ink)}
body.sub .sheet .btn-ghost{border-color:rgba(11,27,36,.35);color:var(--ink)}
body.sub .sheet .btn-ghost:hover{border-color:var(--ink)}
body.sub .sheet .btn-red{background:var(--red2)}
body.sub .sheet .btn-red:hover{background:#8a0d18}
body.sub .after-sheet{padding-top:clamp(80px,9vw,130px)}
body.sub .prule{border:0;border-top:1px solid var(--prule);margin:clamp(40px,5vw,64px) 0}

/* Lukualue: Ghostin {{content}} tulee tähän sellaisenaan */
body.sub .prose{font-size:19px;line-height:1.72;max-width:var(--measure);color:var(--ink)}
body.sub .prose>*+*{margin-top:1.1em}
body.sub .prose p,body.sub .prose li{hyphens:manual;-webkit-hyphens:manual}
body.sub .prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.26em;transition:color .15s}
body.sub .prose a:hover{color:var(--red2);text-decoration-color:transparent}
body.sub .prose strong,body.sub .prose b{font-weight:700}
body.sub .prose h2{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(1.65rem,2.6vw,2.15rem);line-height:1.15;margin-top:2.1em;letter-spacing:-.005em}
body.sub .prose h2 em{font-style:normal}
body.sub .prose h3{font-size:1.18rem;font-weight:700;line-height:1.3;margin-top:1.8em}
body.sub .prose h2+*,body.sub .prose h3+*{margin-top:.6em}
body.sub .prose ul,body.sub .prose ol{padding-left:1.25em}
body.sub .prose li+li{margin-top:.35em}
body.sub .prose li ul{margin-top:.35em}
body.sub .prose ul li::marker{color:var(--red2)}
body.sub .prose ol li::marker{color:var(--red2);font-weight:700}
body.sub .prose hr{border:0;height:1px;background:var(--prule);margin:2.6em 0}
body.sub .prose blockquote{font-family:'DM Serif Display',Georgia,serif;font-size:1.45em;line-height:1.3;border-left:3px solid var(--red2);padding:.1em 0 .1em .9em;margin:1.6em 0}
body.sub .prose blockquote em{font-family:'DM Sans',sans-serif;font-size:.6em;font-style:normal;color:var(--ink2);display:block;margin-top:.8em;line-height:1.5}
body.sub .prose blockquote.kg-blockquote-alt{border:0;padding:0;text-align:center;font-style:italic;font-size:1.7em;max-width:24em;margin:1.8em auto}
body.sub .prose figure{margin:2em 0}
body.sub .prose img{max-width:100%;height:auto}
body.sub .prose figcaption{font-size:.84rem;color:var(--ink2);margin-top:.7em;line-height:1.5}
body.sub .prose .kg-width-wide{width:min(calc(100vw - 40px),1000px);max-width:none;position:relative;left:50%;transform:translateX(-50%)}
body.sub .prose table{width:100%;border-collapse:collapse;font-size:.92em}
body.sub .prose th,body.sub .prose td{text-align:left;padding:.6em .7em;border-bottom:1px solid var(--prule);vertical-align:top}
body.sub .prose th{font-weight:700}
/* bookmark */
body.sub .kg-bookmark-card{margin:1.8em 0}
body.sub .kg-bookmark-container{display:flex;text-decoration:none!important;color:var(--ink)!important;background:var(--paper2);border:1px solid var(--prule);border-left:3px solid var(--red2);min-height:132px;transition:border-color .2s,background .2s}
body.sub .kg-bookmark-container:hover{background:var(--paper3)}
body.sub .kg-bookmark-container:hover .kg-bookmark-title{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.15em}
body.sub .kg-bookmark-content{flex:1;padding:18px 20px;min-width:0;display:flex;flex-direction:column}
body.sub .kg-bookmark-title{font-weight:700;font-size:1rem;line-height:1.35}
body.sub .kg-bookmark-description{font-size:.88rem;line-height:1.5;color:var(--ink2);margin-top:.35em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.sub .kg-bookmark-metadata{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;font-size:.8rem;color:var(--ink2)}
body.sub .kg-bookmark-icon{width:18px;height:18px}
body.sub .kg-bookmark-publisher{display:none}
body.sub .kg-bookmark-thumbnail{flex:0 0 34%;position:relative;max-width:240px}
body.sub .kg-bookmark-thumbnail img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* callout */
body.sub .kg-callout-card{display:flex;gap:.8em;background:var(--ink);color:var(--cream);padding:1.1em 1.3em;font-size:.95em;line-height:1.6}
body.sub .kg-callout-card a{color:var(--cream);text-decoration-color:var(--red)}
body.sub .kg-callout-card a:hover{color:#ff6b77}
body.sub .kg-callout-emoji{font-size:1.2em;line-height:1.4}
/* toggle (UKK) */
body.sub .kg-toggle-card{border-top:1px solid var(--prule);margin:0!important}
body.sub .kg-toggle-card:last-of-type{border-bottom:1px solid var(--prule)}
body.sub .kg-toggle-heading{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:18px 0;cursor:pointer}
body.sub .kg-toggle-heading-text{font-size:1.02rem;font-weight:700;line-height:1.4;margin:0}
body.sub .kg-toggle-heading:hover .kg-toggle-heading-text{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:.18em}
body.sub .kg-toggle-card-icon{flex:none;width:28px;height:28px;border:0;background:none;color:var(--red2);cursor:pointer;padding:4px;transition:transform .3s}
body.sub .kg-toggle-card-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2}
body.sub .kg-toggle-card[data-kg-toggle-state=open] .kg-toggle-card-icon{transform:rotate(180deg)}
body.sub .kg-toggle-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}
body.sub .kg-toggle-content>div{overflow:hidden}
body.sub .kg-toggle-card[data-kg-toggle-state=open] .kg-toggle-content{grid-template-rows:1fr}
body.sub .kg-toggle-content p{padding-bottom:18px;color:var(--ink);font-size:17px;line-height:1.65}
/* button card */
body.sub .kg-button-card{margin:1.8em 0}

/* --- ARTIKKELI ----------------------------------------------------------- */
body.sub .art-h{padding:clamp(104px,9.5vw,138px) 0 0;text-align:left}
body.sub .art-h .wrap{max-width:1000px}
body.sub .art-tag{font-size:.9rem;font-weight:700;color:var(--red);text-decoration:none}
body.sub .art-tag:hover{text-decoration:underline}
body.sub .art-h h1{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:1.04;margin:.9rem 0 1.3rem;max-width:18ch;letter-spacing:-.01em}
body.sub .art-ex{font-size:clamp(1.1rem,1.6vw,1.3rem);color:rgba(240,230,211,.82);max-width:36rem}
body.sub .byl{display:flex;align-items:center;gap:14px;margin-top:2rem;font-size:.92rem;color:rgba(240,230,211,.72)}
body.sub .byl img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 18%}
body.sub .byl b{color:var(--cream);font-weight:700}
body.sub .art-fig{max-width:1000px;margin:clamp(22px,2.6vw,36px) auto 0;padding:0 clamp(20px,4vw,48px);position:relative;z-index:4}
body.sub .art-fig img{width:100%;aspect-ratio:3/1;object-fit:cover;box-shadow:0 30px 70px rgba(0,0,0,.5)}
body.sub .art-sheet{margin-top:calc(-1 * clamp(70px,8vw,130px))}
body.sub .art-sheet .sheet-in{padding-top:calc(clamp(70px,8vw,130px) + clamp(40px,5vw,64px))}
body.sub .art-grid{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:clamp(40px,5vw,80px);max-width:960px;margin:0 auto}
body.sub .toc{position:sticky;top:110px;align-self:start;font-size:.86rem;line-height:1.4;border-left:1px solid var(--prule);padding-left:18px}
body.sub .toc b{display:block;font-size:.8rem;color:var(--ink2);margin-bottom:.8em;font-weight:700}
body.sub .toc ol{list-style:none}
body.sub .toc li+li{margin-top:.55em}
body.sub .toc a{color:var(--ink2);text-decoration:none;display:block;position:relative}
body.sub .toc a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:.15em}
body.sub .toc a.on{color:var(--ink);font-weight:700}
/* Aktiivisen kohdan punainen viiva reunaviivan päällä koko kohdan korkeudelta (ennen box-shadow, joka kutistui lyhyillä riveillä täpläksi) */
body.sub .toc a.on:before{content:"";position:absolute;left:-19px;top:0;bottom:0;width:3px;background:var(--red2)}
body.sub .art-end{max-width:960px;margin:clamp(48px,6vw,80px) auto 0;display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:center;border-top:1px solid var(--prule);padding-top:36px}
body.sub .art-end img{width:120px;height:120px;object-fit:cover;object-position:50% 15%;border-radius:50%}
body.sub .art-end p{font-size:1rem;line-height:1.6;max-width:34rem}
body.sub .art-end .sig{filter:none;width:150px;margin:.6rem 0 0}
body.sub .more-h{font-size:clamp(2rem,4vw,3rem);margin-bottom:2rem}
body.sub .more3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)}
body.sub .more3 a{color:var(--cream)}
body.sub .more3 .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--bg3);margin-bottom:1rem}
body.sub .more3 .thumb img{width:100%;height:100%;object-fit:cover}
body.sub .more3 h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:1.4rem;line-height:1.2;margin-top:.4rem}
body.sub .meta-s{font-size:.82rem;color:var(--muted)}
body.sub .sheet .meta-s{color:var(--ink2)}

/* --- BLOGI (lehti) -------------------------------------------------------- */
body.sub .mast{padding:clamp(120px,12vw,160px) 0 clamp(110px,11vw,170px);position:relative;overflow:hidden}
body.sub .mast-t{font-size:clamp(4rem,13vw,12rem);line-height:.84;letter-spacing:-.005em;margin-top:.8rem}
body.sub .mast-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:1.6rem;border-top:1px solid var(--line);padding-top:1rem;font-size:.95rem;color:rgba(240,230,211,.78)}
body.sub .mast .cover-ph{width:44%;opacity:.55}
body.sub .topics{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;font-size:.92rem}
body.sub .topics a,body.sub .topics .tp-more{color:var(--ink);text-decoration:none;font-weight:500;white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent}
body.sub .topics a:hover,body.sub .topics .tp-more:hover{color:var(--red2)}
body.sub .topics a.on{color:var(--red2);font-weight:700;border-bottom-color:var(--red2)}
body.sub .front{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(32px,4vw,64px);margin-top:clamp(28px,3vw,40px);padding-top:clamp(28px,3vw,40px);border-top:2px solid var(--ink)}
body.sub .lead-a{color:var(--ink)}
body.sub .lead-a .thumb{aspect-ratio:3/2;overflow:hidden;margin-bottom:1.3rem}
body.sub .lead-a .thumb img,body.sub .side-a .thumb img,body.sub .grid-a .thumb img{width:100%;height:100%;object-fit:cover}
body.sub .lead-a h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(2.2rem,4vw,3.6rem);line-height:1.04;margin:.5rem 0 .9rem;letter-spacing:-.01em}
body.sub .lead-a p{font-size:1.1rem;line-height:1.65;max-width:36rem;color:#26343c}
body.sub .side{display:flex;flex-direction:column;gap:0}
body.sub .side-a{display:grid;grid-template-columns:1fr 120px;gap:18px;color:var(--ink);padding:20px 0;border-bottom:1px solid var(--prule)}
body.sub .side-a:first-child{padding-top:0}
body.sub .side-a .thumb{aspect-ratio:1;overflow:hidden}
body.sub .side-a h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:1.32rem;line-height:1.15;margin-top:.3rem}
body.sub .side-a p{font-size:.9rem;line-height:1.5;color:var(--ink2);margin-top:.4rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body.sub .sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-top:2px solid var(--ink);margin-top:clamp(48px,6vw,80px);padding-top:12px}
body.sub .sec-h h2{font-size:clamp(1.8rem,3vw,2.4rem)}
body.sub .grid-a{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3vw,40px) clamp(20px,2.4vw,32px);margin-top:28px}
body.sub .grid-a a{color:var(--ink)}
body.sub .grid-a .thumb{aspect-ratio:4/3;overflow:hidden;margin-bottom:.9rem}
body.sub .grid-a h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:1.22rem;line-height:1.18;margin-top:.3rem}
body.sub .list-a{columns:2;column-gap:clamp(32px,5vw,72px);margin-top:20px}
body.sub .list-a a{display:grid;grid-template-columns:5.6rem 1fr;gap:14px;break-inside:avoid;padding:14px 0;border-bottom:1px solid var(--prule);color:var(--ink)}
body.sub .list-a .nu-t{font-weight:700;font-size:1rem;line-height:1.35}
body.sub .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--prule);border:1px solid var(--prule);margin-top:28px}
body.sub .pillars a{background:var(--paper);padding:24px 24px 26px;color:var(--ink)}
body.sub .pillars a:hover{background:var(--paper2)}
body.sub .pillars h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:1.5rem;line-height:1.1}
body.sub .pillars p{font-size:.92rem;color:var(--ink2);margin-top:.5rem;line-height:1.5}

/* --- UUTISKIRJE paperin jälkeen -------------------------------------------- */
body.sub .news-s{padding:clamp(64px,7vw,100px) 0}

/* --- KUKA --------------------------------------------------------------- */
body.sub .who{display:block;min-height:min(92vh,900px);position:relative}
body.sub .who-txt{padding-top:clamp(130px,13vw,180px);padding-bottom:clamp(120px,10vw,170px);position:relative;z-index:2}
body.sub .who-ph{position:absolute;right:0;top:0;bottom:0;width:48%;background:url(../imgs/promo/kuka-hihat.jpg) 50% 20%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
body.sub .who-ph:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg),transparent 30%)}
body.sub .who-name{font-size:clamp(3.6rem,9vw,8.4rem);line-height:.86}
body.sub .who-name .q{display:block;font-family:'DM Serif Display',serif;font-style:italic;color:var(--red);font-size:.62em;line-height:1;margin:.12em 0 .08em;letter-spacing:-.01em}
body.sub .roles-l{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.8rem;max-width:36rem}
body.sub .roles-l span{border:1px solid var(--line);padding:.35em .8em;font-size:.9rem;color:rgba(240,230,211,.86)}
body.sub .tl{position:relative;margin-top:clamp(28px,3vw,40px)}
body.sub .tl:before{content:"";position:absolute;left:7.2rem;top:6px;bottom:6px;width:2px;background:var(--prule)}
body.sub .tl-i{display:grid;grid-template-columns:6rem 1fr;gap:2.4rem;padding:14px 0;position:relative}
body.sub .tl-i:after{content:"";position:absolute;left:calc(7.2rem - 5px);top:1.35em;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
body.sub .tl-i.big:after{background:var(--red2);border-color:var(--red2)}
body.sub .tl-y{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;line-height:1;text-align:right;color:var(--ink)}
body.sub .tl-i.big .tl-y{color:var(--red2)}
body.sub .tl-t{font-size:1.05rem;line-height:1.6;max-width:36rem;padding-top:.2em}
body.sub .tl-t b{display:block;font-size:1.15rem}
body.sub .two-p{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px)}
body.sub .chk{list-style:none}
body.sub .chk li{padding:12px 0 12px 2rem;border-top:1px solid var(--prule);position:relative;font-size:1rem;line-height:1.6}
body.sub .chk li:before{content:"";position:absolute;left:0;top:1.15em;width:12px;height:2px;background:var(--red2)}
body.sub .triv{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,80px);align-items:center}
body.sub .triv img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
body.sub .triv ol{list-style:none;counter-reset:t}
body.sub .triv li{counter-increment:t;display:grid;grid-template-columns:3rem 1fr;gap:8px;padding:16px 0;border-top:1px solid var(--line);font-size:1.05rem;color:rgba(240,230,211,.88)}
body.sub .triv li:before{content:counter(t);font-family:'Bebas Neue';font-size:2rem;line-height:1;color:var(--red)}

/* --- KIRJAT (hylly) ------------------------------------------------------- */
body.sub .shelf-sec{padding:clamp(120px,12vw,170px) 0 clamp(120px,12vw,170px)}
body.sub .shelf{display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,2vw,28px);margin-top:clamp(40px,5vw,72px);position:relative;padding-bottom:22px}
body.sub .shelf:after{content:"";position:absolute;left:-4%;right:-4%;bottom:0;height:22px;background:linear-gradient(180deg,#2a1d15 0%,#140d09 100%);box-shadow:0 18px 40px rgba(0,0,0,.6);border-top:1px solid rgba(240,230,211,.18)}
body.sub .shelf a{display:block;position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
body.sub .shelf a:hover{transform:translateY(-12px)}
body.sub .shelf img{display:block;width:clamp(78px,11vw,150px);box-shadow:8px 10px 24px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.1)}
body.sub .shelf a.first img{width:clamp(130px,19vw,250px)}
body.sub .shelf .yr{position:absolute;left:0;right:0;top:calc(100% + 30px);text-align:center;font-family:'Bebas Neue';font-size:1.3rem;color:var(--muted);letter-spacing:.04em}
body.sub .shelf a:hover .yr{color:var(--red)}
body.sub .bk{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start;padding:clamp(48px,5vw,72px) 0;border-top:1px solid var(--prule);scroll-margin-top:90px}
body.sub .bk:first-child{border-top:0;padding-top:0}
body.sub .bk-cov img{width:100%;max-width:300px;box-shadow:14px 18px 36px rgba(11,27,36,.28)}
body.sub .bk h2{font-size:clamp(2.6rem,5vw,4.2rem);line-height:.95;margin:.6rem 0 .4rem}
body.sub .bk .pub{font-size:.95rem;color:var(--ink2);margin-bottom:1.4rem}
body.sub .bk .prose{font-size:18px}
body.sub .bk .cta{opacity:1;animation:none;margin-top:1.6rem}
body.sub .oos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,40px);margin-top:28px}
body.sub .oos article{font-size:.95rem;line-height:1.6}
body.sub .oos img{width:110px;margin-bottom:1rem;box-shadow:6px 8px 18px rgba(11,27,36,.25)}
body.sub .oos h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:1.35rem;line-height:1.15}
body.sub .oos .pub{font-size:.85rem;color:var(--ink2);margin:.2rem 0 .6rem}
body.sub .oos .gone{display:inline-block;margin-top:.7rem;font-size:.82rem;font-weight:700;color:var(--red2)}

/* --- KIRJASIVU ----------------------------------------------------------- */
body.sub .bookh{display:grid;grid-template-columns:1fr auto;gap:clamp(40px,6vw,96px);align-items:center;padding-top:clamp(120px,12vw,160px);padding-bottom:clamp(130px,13vw,190px)}
body.sub .bookh .cover{width:clamp(220px,26vw,360px)}
body.sub .quotes{columns:2;column-gap:clamp(28px,4vw,56px)}
body.sub .quotes blockquote{break-inside:avoid;font-family:'DM Serif Display',serif;font-size:1.3rem;line-height:1.35;padding:0 0 1.6rem;margin-bottom:1.6rem;border-bottom:1px solid var(--prule)}
body.sub .quotes blockquote:before{content:"\201D";display:block;font-size:3rem;line-height:.6;color:var(--red2);margin-bottom:.1em}
body.sub .bigq{font-family:'DM Serif Display',serif;font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:1;text-align:center;max-width:14ch;margin:0 auto}
body.sub .bigq-c{text-align:center;color:var(--ink2);margin-top:1rem;font-size:.95rem}

/* --- PALVELUT (hinnasto) ------------------------------------------------- */
body.sub .ledger{border-top:0}
body.sub .lrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,.9fr);gap:clamp(20px,3vw,48px);padding:clamp(28px,3vw,40px) 0;border-bottom:1px solid var(--prule);align-items:start;scroll-margin-top:90px}
body.sub .lrow h2{font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:.92}
body.sub .lrow h2 a{color:var(--ink);text-decoration:none}
body.sub .lrow h2 a:hover{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:.12em}
body.sub .lrow .tag2{display:inline-block;margin-top:.7rem;font-size:.8rem;font-weight:700;color:var(--paper);background:var(--red2);padding:.2em .6em}
body.sub .lrow p{font-size:1.02rem;line-height:1.65}
body.sub .price{font-family:'Bebas Neue';font-size:clamp(2.6rem,4.4vw,3.6rem);line-height:.9;text-align:right;white-space:nowrap}
body.sub .price small{display:block;font-family:'DM Sans';font-size:.85rem;line-height:1.5;color:var(--ink2);margin-top:.5rem;white-space:normal}
body.sub .lrow .more{display:inline-block;margin-top:.9rem;font-weight:700;font-size:.95rem}
body.sub .ledger-foot{margin-top:1.6rem;color:var(--ink2);font-size:.98rem}
body.sub .dur{margin-top:clamp(36px,4vw,56px)}
body.sub .dur-row{display:grid;grid-template-columns:10rem 1fr;gap:20px;align-items:center;padding:12px 0}
body.sub .dur-row b{font-family:'Bebas Neue';font-weight:400;font-size:1.7rem;letter-spacing:.02em}
body.sub .bar{height:38px;position:relative;background:rgba(240,230,211,.06)}
body.sub .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--cream);display:flex;align-items:center;padding-left:12px;font-style:normal;font-weight:700;font-size:.85rem;color:var(--bg);white-space:nowrap}
body.sub .bar i.red{background:var(--red);color:#fff}
body.sub .bar i.inf{right:0;background:linear-gradient(90deg,var(--red) 0%,var(--red) 70%,rgba(204,32,49,0) 100%);color:#fff}
body.sub .dur-axis{display:grid;grid-template-columns:10rem 1fr;gap:20px;font-size:.8rem;color:var(--muted)}
body.sub .dur-axis div{display:flex;justify-content:space-between}

/* --- TUOTESIVUT ---------------------------------------------------------- */
body.sub .ph2{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center;padding-top:clamp(120px,12vw,160px);padding-bottom:clamp(130px,13vw,190px)}
body.sub .ph2-img img{width:100%;aspect-ratio:4/5;object-fit:cover}
body.sub .ph2-img.wide img{aspect-ratio:4/3}
body.sub .facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:2rem;font-size:.95rem;color:rgba(240,230,211,.82)}
body.sub .facts b{color:var(--cream)}
body.sub .facts span:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:.6em;vertical-align:middle}
body.sub .stmt{font-family:'DM Serif Display',serif;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.12;max-width:22ch}
body.sub .stmt.c{text-align:center;margin:0 auto}
body.sub .pain{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,4vw,56px);list-style:none;margin-top:1.6rem}
body.sub .pain li{padding:16px 0 16px 2.2rem;border-top:1px solid var(--prule);position:relative;font-size:1.02rem;line-height:1.6}
body.sub .pain li:before{content:"";position:absolute;left:0;top:1.05em;width:18px;height:18px;border:2px solid var(--red2)}
body.sub .pain.stop li:before{border-radius:50%;background:var(--red2);border-color:var(--red2);width:16px;height:16px;top:1.1em;box-shadow:inset 0 0 0 4px var(--red2),inset 0 0 0 6px var(--paper)}
body.sub .vs{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,3vw,48px);align-items:end;margin:clamp(28px,3vw,44px) 0;text-align:center}
body.sub .vs .n{font-family:'Bebas Neue';font-size:clamp(3.4rem,8vw,7rem);line-height:.85}
body.sub .vs .n.r{color:var(--red2)}
body.sub .vs p{font-size:.95rem;color:var(--ink2);margin-top:.6rem;line-height:1.5}
body.sub .vs .or{font-family:'DM Serif Display',serif;font-style:italic;font-size:1.6rem;color:var(--ink2);padding-bottom:1.2em}
body.sub .cmp{width:100%;border-collapse:collapse;margin-top:1.4rem;font-size:1rem}
body.sub .cmp th,body.sub .cmp td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--prule)}
body.sub .cmp thead th{font-size:.85rem;color:var(--ink2);font-weight:700;border-bottom:2px solid var(--ink)}
body.sub .cmp thead th.us{color:var(--red2)}
body.sub .cmp td.us{font-weight:700;background:rgba(168,17,31,.07);color:var(--red2)}
body.sub .cmp tbody th{font-weight:700}
body.sub .gtee{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:center}
body.sub .gtee .n{font-family:'Bebas Neue';font-size:clamp(6rem,15vw,13rem);line-height:.8;color:var(--red)}
body.sub .gtee .n small{display:block;font-size:.3em;color:var(--cream);letter-spacing:.04em;margin-top:.15em}
body.sub .gtee p{font-size:1.1rem;color:rgba(240,230,211,.86);max-width:34rem}
body.sub .gtee h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.1;margin-bottom:1rem}
body.sub .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,36px);margin-top:28px}
body.sub .cases a{color:var(--cream)}
body.sub .cases .thumb{aspect-ratio:16/9;overflow:hidden;background:var(--bg3);margin-bottom:.9rem}
body.sub .cases .thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2)}
body.sub .cases h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:1.3rem;line-height:1.2}
body.sub .ctaband{background:var(--red);color:#fff;padding:clamp(56px,6vw,88px) 0}
body.sub .ctaband .in{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start}
body.sub .ctaband h2{font-size:clamp(2.6rem,5.4vw,4.6rem);color:#fff}
body.sub .ctaband p{font-size:1.1rem;color:rgba(255,255,255,.94)}
body.sub .ctaband .btn{background:var(--bg);color:var(--cream);margin-top:1.3rem}
body.sub .ctaband .btn:hover{background:#000;transform:translateY(-2px)}
body.sub .ctaband a.wl{color:#fff;text-decoration:underline;text-underline-offset:.18em}
body.sub .ctaband a.wl:hover{text-decoration:none;color:var(--bg)}
/* Tulostulva: avausrepliikki */
body.sub .rant{font-family:'DM Serif Display',serif;font-size:clamp(3rem,8.4vw,7.4rem);line-height:.98;letter-spacing:-.015em;max-width:11ch}
body.sub .rant-c{margin-top:1.4rem;font-size:1.05rem;color:rgba(240,230,211,.8);max-width:30rem}
body.sub .monolog{border-left:3px solid var(--red2);padding-left:clamp(18px,2.4vw,32px)}
body.sub .monolog p{font-family:'DM Serif Display',serif;font-size:clamp(1.25rem,1.9vw,1.55rem);line-height:1.42}
body.sub .monolog p+p{margin-top:1em}
body.sub .sched{display:grid;grid-template-columns:5.6rem 1fr 1fr;border-top:2px solid var(--ink);margin-top:1.4rem;font-size:.98rem}
body.sub .sched>div{padding:12px 14px;border-bottom:1px solid var(--prule);line-height:1.45}
body.sub .sched .d{font-family:'Bebas Neue';font-size:1.45rem;line-height:1.1;color:var(--red2);padding-left:0}
body.sub .sched .hd{font-size:.82rem;font-weight:700;color:var(--ink2)}
body.sub .sched .who2{grid-column:2/4;font-weight:700}
body.sub .sched .em{color:var(--ink2)}
body.sub .deliv{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,56px);align-items:center}
body.sub .deliv img{width:clamp(180px,22vw,260px);box-shadow:16px 20px 40px rgba(11,27,36,.25)}
body.sub .testi{max-width:46rem;margin:0 auto}
body.sub .testi blockquote{font-family:'DM Serif Display',serif;font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.38}
body.sub .testi figcaption{margin-top:1.4rem;font-size:.95rem;color:rgba(240,230,211,.75)}
body.sub .testi figcaption b{color:var(--cream)}
body.sub .testi figcaption img{width:52px;height:52px;border-radius:50%;object-fit:cover;filter:grayscale(1);float:left;margin-right:14px}
/* Täyskäännös */
body.sub .alarm{background:var(--red);color:#fff;padding:clamp(40px,5vw,64px) 0}
body.sub .alarm p{font-family:'DM Serif Display',serif;font-size:clamp(1.6rem,3.4vw,2.8rem);line-height:1.15;max-width:30ch}
body.sub .alarm small{display:block;font-family:'DM Sans';font-size:.95rem;margin-top:1rem;color:rgba(255,255,255,.9)}
body.sub .phases{display:grid;grid-template-columns:1fr 1fr 2fr 2fr;margin-top:1.6rem}
body.sub .phases div{padding:16px 14px 18px;border-left:2px solid var(--paper);min-height:150px;display:flex;flex-direction:column}
body.sub .phases div:first-child{border-left:0}
body.sub .phases .p1{background:var(--ink);color:var(--cream)}
body.sub .phases .p2{background:#1f3440;color:var(--cream)}
body.sub .phases .p3{background:var(--red2);color:#fff}
body.sub .phases .p4{background:repeating-linear-gradient(135deg,var(--paper2) 0 10px,var(--paper) 10px 20px);color:var(--ink);border:1px dashed var(--ink2)}
body.sub .phases b{font-family:'Bebas Neue';font-weight:400;font-size:1.8rem;line-height:1}
body.sub .phases span{font-size:.9rem;line-height:1.45;margin-top:auto;padding-top:14px}
body.sub .phases em{font-style:normal;font-size:.8rem;opacity:.85;display:block;margin-top:4px}

/* --- SUOSITUKSET ---------------------------------------------------------- */
body.sub .feat-q{font-family:'DM Serif Display',serif;font-size:clamp(2rem,4.4vw,3.8rem);line-height:1.1;max-width:20ch;margin-top:1rem}
body.sub .feat-c{margin-top:1.6rem;display:flex;gap:14px;align-items:center;font-size:.98rem;color:rgba(240,230,211,.8)}
body.sub .feat-c img{width:56px;height:56px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
body.sub .feat-c b{color:var(--cream)}
body.sub .tw{columns:3;column-gap:clamp(28px,3.4vw,52px)}
body.sub .tw figure{break-inside:avoid;padding:0 0 28px;margin:0 0 28px;border-bottom:1px solid var(--prule)}
body.sub .tw blockquote{font-size:1rem;line-height:1.68}
body.sub .tw blockquote p+p{margin-top:.8em}
body.sub .tw blockquote a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.26em}
body.sub .tw blockquote a:hover{color:var(--red2);text-decoration-color:transparent}
body.sub .tw .pq{font-family:'DM Serif Display',serif;font-size:1.45rem;line-height:1.2;margin-bottom:.8rem;color:var(--ink)}
body.sub .tw figcaption{display:flex;gap:12px;align-items:center;margin-top:1rem;font-size:.88rem;line-height:1.4;color:var(--ink2)}
body.sub .tw figcaption img{width:46px;height:46px;border-radius:50%;object-fit:cover;filter:grayscale(1);flex:none}
body.sub .tw figcaption b{color:var(--ink)}
body.sub .tw figcaption a{color:var(--ink2)}
body.sub .tw figcaption a:hover{color:var(--red2);text-decoration:none}
body.sub .logos-sec.on-dark{background:transparent;border:0}

/* --- KANSILEHTI ----------------------------------------------------------- */
body.sub .idx{list-style:none;counter-reset:p}
body.sub .idx li{display:grid;grid-template-columns:4rem minmax(0,1.1fr) minmax(0,1.6fr) 150px;gap:clamp(16px,2.4vw,36px);padding:clamp(22px,2.4vw,32px) 0;border-top:1px solid var(--prule);align-items:start}
body.sub .idx .no{font-family:'Bebas Neue';font-size:2.6rem;line-height:.9;color:var(--red2)}
body.sub .idx h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:1.7rem;line-height:1.1}
body.sub .idx h3 a{color:var(--ink)}
body.sub .idx .task{font-size:.9rem;color:var(--ink2);margin-top:.4rem}
body.sub .idx p{font-size:1rem;line-height:1.6}
body.sub .idx img{width:150px;aspect-ratio:3/2;object-fit:cover;object-position:50% 25%}
body.sub .princ{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
body.sub .princ h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:1.5rem;line-height:1.15;margin-bottom:.6rem}
body.sub .princ p{font-size:1rem;line-height:1.65}
body.sub .swatch{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.4rem}
body.sub .swatch span{display:flex;flex-direction:column;justify-content:flex-end;width:132px;height:92px;padding:10px;font-size:.78rem;line-height:1.35;border:1px solid var(--prule)}
body.sub .lrules{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--prule);margin-top:1.4rem}
body.sub .lrules>div{padding:22px 24px;font-size:.98rem;line-height:1.6}
body.sub .lrules .dk{background:var(--bg);color:var(--cream)}
body.sub .lrules .lt{background:var(--paper);color:var(--ink)}
body.sub .lrules b{display:block;margin-bottom:.4rem}
body.sub .lrules .demo{margin-top:.8rem}

/* --- RESPONSIIVISUUS ------------------------------------------------------ */
@media(max-width:1100px){
 body.sub .art-grid{grid-template-columns:1fr;max-width:var(--measure)}
 body.sub .toc{display:none}
 body.sub .grid-a{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
 body.sub .cover-ph{position:relative;width:100%;height:62vw;max-height:440px;margin:-10px 0 -9vw;-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
 body.sub .cover-ph:after{display:none}
 body.sub .cover-h{padding-top:76px}
 body.sub .mast .cover-ph{opacity:.6}
 body.sub .front,body.sub .two-p,body.sub .triv,body.sub .bookh,body.sub .ph2,body.sub .gtee,body.sub .ctaband .in,body.sub .deliv{grid-template-columns:1fr}
 body.sub .who{min-height:0}
 body.sub .who-ph{position:relative;width:100%;height:96vw;max-height:620px;margin-top:76px;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
 body.sub .who-ph:after{display:none}
 body.sub .who-txt{padding-top:0;margin-top:-22vw}
 body.sub .lrow{grid-template-columns:1fr}
 body.sub .price{text-align:left}
 body.sub .pain,body.sub .pillars,body.sub .more3,body.sub .cases,body.sub .princ,body.sub .lrules{grid-template-columns:1fr}
 body.sub .oos{grid-template-columns:repeat(2,1fr)}
 body.sub .quotes,body.sub .tw{columns:2}
 body.sub .bk{grid-template-columns:1fr}
 body.sub .bk-cov img{max-width:200px}
 body.sub .bookh .cover{width:220px}
 body.sub .ph2-img img{aspect-ratio:3/2;object-position:50% 20%}
 body.sub .idx li{grid-template-columns:3rem 1fr}
 body.sub .idx li>p,body.sub .idx li>img{grid-column:2}
 body.sub .idx img{width:100%;max-width:320px}
 body.sub .phases{grid-template-columns:1fr 1fr}
 body.sub .phases div:nth-child(3){border-left:0}
}
@media(max-width:760px){
 body.sub .sheet{margin-top:-56px}
 body.sub .art-sheet{margin-top:-48px}
 body.sub .art-sheet .sheet-in{padding-top:88px}
 body.sub .art-fig img{aspect-ratio:16/10}
 body.sub .prose{font-size:18px}
 body.sub .list-a,body.sub .quotes,body.sub .tw{columns:1}
 body.sub .grid-a{grid-template-columns:1fr 1fr;gap:24px 16px}
 body.sub .side-a{grid-template-columns:1fr 92px}
 body.sub .tl:before{left:4.6rem}
 body.sub .tl-i{grid-template-columns:3.6rem 1fr;gap:2rem}
 body.sub .tl-i:after{left:calc(4.6rem - 5px)}
 body.sub .tl-y{font-size:1.7rem}
 body.sub .art-end{grid-template-columns:72px 1fr;gap:18px}
 body.sub .art-end img{width:72px;height:72px}
 body.sub .sched{grid-template-columns:4.2rem 1fr 1fr;font-size:.88rem}
 body.sub .sched>div{padding:10px 8px}
 body.sub .vs{grid-template-columns:1fr;gap:8px}
 body.sub .vs .or{padding:0}
 body.sub .cmp{font-size:.86rem}
 body.sub .cmp th,body.sub .cmp td{padding:10px 6px}
 body.sub .dur-row,body.sub .dur-axis{grid-template-columns:6.4rem 1fr;gap:12px}
 body.sub .dur-row b{font-size:1.3rem}
 body.sub .kg-bookmark-container{flex-direction:column-reverse}
 body.sub .kg-bookmark-thumbnail{flex:none;max-width:none;aspect-ratio:2/1}
 body.sub .shelf{gap:6px}
 body.sub .shelf img{width:52px}
 body.sub .shelf a.first img{width:96px}
 body.sub .shelf .yr{font-size:.95rem;top:calc(100% + 28px)}
 body.sub .oos{grid-template-columns:1fr 1fr;gap:28px 18px}
 body.sub .oos img{width:90px}
 body.sub .rant{font-size:clamp(2.8rem,13vw,4rem)}
 body.sub .idx li{grid-template-columns:2.4rem 1fr;gap:14px}
 body.sub .idx .no{font-size:2rem}
}
@media(prefers-reduced-motion:reduce){
 body.sub .shelf a,body.sub .kg-toggle-content{transition:none}
}
/* korjaukset: kapeat ruudukot ja vertailutaulukko mobiilissa */
body.sub .grid-a,body.sub .more3,body.sub .cases,body.sub .oos,body.sub .pillars{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
body.sub .more3,body.sub .cases,body.sub .pillars{--cols:3}
body.sub .cmp th,body.sub .cmp td{hyphens:manual;-webkit-hyphens:manual}
body.sub .cmp{table-layout:fixed}
body.sub .cmp thead th:first-child{width:27%}
@media(max-width:1100px){body.sub .grid-a{--cols:2}}
@media(max-width:900px){body.sub .more3,body.sub .cases,body.sub .pillars{--cols:1}body.sub .oos{--cols:2}}
@media(max-width:760px){
 body.sub .grid-a{--cols:2}
 body.sub .cmp{font-size:.8rem}
 body.sub .cmp th,body.sub .cmp td{padding:9px 4px}
 body.sub .cmp thead th{font-size:.72rem}
}
body.sub .logos-cta{text-align:center;margin-top:clamp(28px,3vw,40px);font-weight:700}
body.sub a[href^="tel:"]{white-space:nowrap}
body.sub .art-h .wrap,body.sub .art-fig{max-width:calc(960px + 2 * clamp(20px,4vw,48px))}
body.sub .prose p,body.sub .prose li,body.sub .tw blockquote p{hyphenate-limit-chars:10 4 4;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4}
body.sub .tw .pq{hyphens:manual}
@media(max-width:900px){body.sub .mast .cover-ph{width:100%}}

/* Artikkelin meta oikeassa sarakkeessa (kirjoittaja, kuva, pvm, lukuaika) + sisällysluettelo sen alla */
body.sub .art-grid>.art-side{grid-column:2;grid-row:1;min-width:0}
body.sub .art-grid>.prose{grid-column:1;grid-row:1}
body.sub .art-grid .prose>:first-child{margin-top:0}
body.sub .art-meta{display:flex;flex-direction:column;align-items:flex-start;gap:14px;font-size:.88rem;line-height:1.5;color:var(--ink2);border-left:1px solid var(--prule);padding-left:18px}
body.sub .art-meta img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:none}
body.sub .art-meta b{display:block;color:var(--ink);font-weight:700;font-size:.95rem;margin-bottom:.15em}
body.sub .art-meta span{display:block}
body.sub .art-meta .am-kind{color:var(--red2);font-weight:700}
body.sub .art-side .toc{margin-top:40px;max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
body.sub .art-side .toc b{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:1100px){
 body.sub .art-grid>.art-side,body.sub .art-grid>.prose{grid-column:auto;grid-row:auto}
 body.sub .art-meta{flex-direction:row;align-items:center;border-left:0;padding:0 0 22px;border-bottom:1px solid var(--prule)}
 body.sub .art-meta img{width:52px;height:52px}
 body.sub .art-meta span{display:inline}
 body.sub .art-meta span+span:before{content:" · "}
 body.sub .art-grid{row-gap:28px}
}
/* Suositukset: videot + asiakastarinat (blogin case-kirjoitukset) */
body.sub .vid-sec,body.sub .story-sec{margin-bottom:clamp(64px,7vw,104px)}
body.sub .wall-sec .h2,body.sub .vid-sec .h2,body.sub .story-sec .h2{margin-bottom:clamp(24px,2.6vw,36px)}
body.sub .vids{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
body.sub .vid{margin:0}
body.sub .vid-b,body.sub .vid iframe{display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;background:var(--bg);position:relative;cursor:pointer;overflow:hidden}
body.sub .vid-b img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s,opacity .25s}
body.sub .vid-b:hover img{transform:scale(1.03);opacity:.85}
body.sub .vid-p{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--red2);box-shadow:0 8px 24px rgba(0,0,0,.35)}
body.sub .vid-p:after{content:"";position:absolute;left:23px;top:18px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent #fff}
body.sub .vid-b:focus-visible{outline:3px solid var(--red2);outline-offset:3px}
body.sub .vid figcaption{margin-top:.8rem;font-size:.88rem;line-height:1.4;color:var(--ink2)}
body.sub .vid figcaption b{color:var(--ink)}
body.sub .story-lead{max-width:40rem;font-size:1.05rem;line-height:1.6;color:var(--ink2);margin:-.6rem 0 clamp(28px,3vw,44px)}
body.sub .stories{columns:3;column-gap:clamp(28px,3.4vw,52px)}
body.sub .st-card{break-inside:avoid;margin:0 0 28px;padding:24px 0 28px;border-top:3px solid var(--red2)}
body.sub .st-n{font-family:'Bebas Neue',sans-serif;font-size:clamp(3rem,4.4vw,4rem);line-height:.9;color:var(--red2);margin-bottom:1rem}
body.sub .st-n small{display:block;font-family:'DM Sans',sans-serif;font-size:.8rem;line-height:1.4;letter-spacing:.02em;color:var(--ink2);margin-top:.5rem}
body.sub .st-card blockquote{font-family:'DM Serif Display',serif;font-size:1.3rem;line-height:1.3;color:var(--ink)}
body.sub .st-card figcaption{margin-top:1rem;font-size:.88rem;line-height:1.4;color:var(--ink2)}
body.sub .st-card figcaption b{color:var(--ink)}
body.sub .st-l{display:inline-block;margin-top:.9rem;font-size:.9rem;font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--red2);text-decoration-thickness:2px;text-underline-offset:.26em}
body.sub .st-l:hover{color:var(--red2);text-decoration-color:transparent}
@media(max-width:1100px){body.sub .vids{grid-template-columns:repeat(2,minmax(0,1fr))}body.sub .stories{columns:2}}
@media(max-width:760px){body.sub .stories{columns:1}}
@media(max-width:480px){body.sub .vids{grid-template-columns:1fr}}
body.sub .vid-sec,body.sub .story-sec,body.sub .wall-sec{padding:0}
body.sub .st-card blockquote p{color:var(--ink);opacity:1}
body.sub .vid-p{left:auto;top:auto;right:12px;top:12px;margin:0;width:44px;height:44px}
body.sub .vid-p:after{left:17px;top:13px;border-width:9px 0 9px 14px}
/* play-merkki ei peitä pikkukuvan tekstiä: näkyy vain hoverissa keskellä, muuten kuvatekstin edessä */
body.sub .vid-p{left:50%;top:50%;right:auto;margin:-27px 0 0 -27px;width:54px;height:54px;opacity:0;transition:opacity .2s}
body.sub .vid-p:after{left:21px;top:16px;border-width:11px 0 11px 17px}
body.sub .vid-b:hover .vid-p,body.sub .vid-b:focus-visible .vid-p{opacity:1}
body.sub .vid-b:hover img{opacity:.55}
body.sub .vid figcaption b:before{content:"";display:inline-block;vertical-align:-1px;margin-right:8px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--red2)}
/* Kipupistelista: ei tyhjiä valintaruutuja (näyttivät toimimattomilta lomakkeen osilta), vaan otsikko vasemmalla + punaviivalista oikealla */
body.sub .pain-set{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
body.sub .pain-set .stmt{margin-top:.2rem}
body.sub .pain-set .pain{grid-template-columns:1fr;margin-top:0}
body.sub .pain-set .pain li:first-child{border-top:0;padding-top:0}
body.sub .pain-set .pain li:first-child:before{top:calc(.8em - 1px)}
body.sub .pain li:before,body.sub .pain.stop li:before{width:18px;height:2px;border:0;border-radius:0;background:var(--red2);box-shadow:none;top:calc(16px + .8em - 1px)}
body.sub .pain li{padding-left:2.4rem;font-size:1.08rem}
@media(max-width:900px){body.sub .pain-set{grid-template-columns:1fr;gap:20px}body.sub .pain-set .pain li:first-child{border-top:1px solid var(--prule);padding-top:16px}body.sub .pain-set .pain li:first-child:before{top:calc(16px + .8em - 1px)}}

/* Blogin aiherivi: oikeat Ghost-tagit + postausmäärät, toissijaiset "Lisää aiheita" -napin takana; mobiilissa yksi vieritettävä rivi */
body.sub .topics-w{padding-bottom:6px}
body.sub .topics small{font-size:.72em;font-weight:500;color:var(--ink2);margin-left:.4em;font-variant-numeric:tabular-nums}
body.sub .topics a.on small{color:var(--red2)}
body.sub .tp-l{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red2)}
body.sub .topics .tp-more{background:none;border-top:0;border-left:0;border-right:0;font:inherit;font-weight:700;cursor:pointer}
body.sub .topics .tp-more:after{content:"";display:inline-block;width:6px;height:6px;margin-left:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
body.sub .topics .tp-more[aria-expanded="true"]:after{transform:translateY(0) rotate(-135deg)}
body.sub .topics.tp2{margin-top:6px}
body.sub .topics.tp2[hidden]{display:none}
@media(max-width:760px){
 body.sub .topics-w{margin:0 calc(-1 * clamp(20px,6vw,96px));padding:0 0 6px}
 body.sub .topics:not(.tp2){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 clamp(20px,6vw,96px);scroll-padding:0 clamp(20px,6vw,96px);-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
 body.sub .topics:not(.tp2)::-webkit-scrollbar{display:none}
 body.sub .topics.tp2{padding:0 clamp(20px,6vw,96px);gap:6px 18px}
}
/* Asiakaslogot mobiilissa: puolet (21/42). .lg-desk = näkyy vain yli 640 px. Mobiilissa jäävät asiakkaat, joilta sivustolla on
   julkaistu suositus tai asiakastarina (17), + neljä tunnetuinta nimeä (T2H, Metropolia, Seravo, Louhos). Sama valinta kaikilla sivuilla. */
@media(max-width:640px){body.sub .logos .lg-desk{display:none}body.sub .logos .lg{flex-basis:calc(100%/3)}}
/* Mobiilissa otsikko ja leipäteksti samaan vasempaan linjaan: ei keskitettyjä otsikoita */
@media(max-width:760px){
 body.sub .stmt.c,body.sub .bigq,body.sub .bigq-c{text-align:left}
 body.sub .stmt.c,body.sub .bigq{margin-left:0;margin-right:0}
 body.sub .vs{text-align:left;grid-template-columns:1fr;gap:8px}
 body.sub .vs .or{padding-bottom:0}
}
/* === Jannen palaute 19.10.2026 (alasivut-uudet) ============================================
   1) Ei tummankeltaisia korostuksia: kellertävät varjosävyt (#ede2cc/#e4d6bb) vaihdettu musteen
      läpikuultaviksi sävyiksi, ja isot laatikot (bookmark-kortit) ilman täyttöä, vain viivat.
   2) Punaisen päälle ei massiivista varjoa: paperiarkin varjo heitetään vain ylöspäin tummalle
      kannelle; alas (punaiseen CTA-/uutiskirjenauhaan) ei tule varjoa. Punaisen napin varjo kevyeksi. */
:root{--paper2:rgba(11,27,36,.045);--paper3:rgba(11,27,36,.08)}
body.sub .kg-bookmark-container{background:transparent}
body.sub .kg-bookmark-container:hover{background:transparent;border-color:rgba(11,27,36,.4)}
body.sub .sheet{box-shadow:0 -1px 0 rgba(255,255,255,.04),0 -30px 80px rgba(0,0,0,.35)}
body.sub .vid-p{box-shadow:0 2px 8px rgba(0,0,0,.18)}

/* === TEEMAAN SOVITUS ========================================================================
   1) Ghostin koodi-injektio asettaa h2-h4:lle Overpassin tagivalitsimella. Konseptissa luokattomat
      otsikot ovat DM Sansia; :where pitää spesifisyyden alempana kuin .bebas/.serif/sivuluokat.
   2) Konseptissa body sai padding-top: safe area; teemassa ilmoituspalkki ulottuu tilapalkin alle,
      joten turva-alue lisätään kansien yläpehmusteeseen kuten jkj.css:n .ph-otsakkeessa.
   3) Ghostin toggle-kortin sisältö kääritään default.hbs:n skriptissä yhteen diviin (konseptin rakenne). */
body.sub :where(h1,h2,h3,h4,h5,h6){font-family:var(--sans)}
body.sub .cover-h{padding-top:calc(clamp(120px,13vw,170px) + var(--sat))}
body.sub .art-h{padding-top:calc(clamp(104px,9.5vw,138px) + var(--sat))}
body.sub .mast{padding-top:calc(clamp(120px,12vw,160px) + var(--sat))}
body.sub .who-txt{padding-top:calc(clamp(130px,13vw,180px) + var(--sat))}
body.sub .shelf-sec{padding-top:calc(clamp(120px,12vw,170px) + var(--sat))}
body.sub .bookh,body.sub .ph2{padding-top:calc(clamp(120px,12vw,160px) + var(--sat))}
@media(max-width:900px){
 body.sub .cover-h{padding-top:calc(76px + var(--sat))}
 body.sub .who-ph{margin-top:calc(76px + var(--sat))}
 body.sub .who-txt{padding-top:0}
}
/* Ghostin cards.min.css piilottaa suljetun toggle-sisällön height:0:lla; konsepti animoi grid-riveillä */
body.sub .kg-toggle-card[data-kg-toggle-state=close] .kg-toggle-content{height:auto;visibility:visible}
body.sub .kg-toggle-heading{position:relative}
/* Paperin lukualueen kuva-, upotus- ja vanhan sisällön luokat */
body.sub .prose .kg-image-card img{margin:0 auto}
body.sub .prose .kg-embed-card{display:flex;flex-direction:column;align-items:center}
body.sub .prose iframe{max-width:100%;border:0}
body.sub .prose img[src*="allekirjoitus"]{content:url(../imgs/allekirjoitus-punainen.png);width:170px!important;height:auto!important;margin:2rem 0 0}
body.sub .prose:after{content:"";display:table;clear:both}
body.sub .kg-toggle-card{background:none;box-shadow:none;border-radius:0;padding:0}
body.sub .kg-toggle-card[data-kg-toggle-state=close] .kg-toggle-content{height:auto;opacity:1;top:0}
body.sub .kg-toggle-card .kg-toggle-heading svg{transform:none;color:inherit}
body.sub .kg-toggle-card .kg-toggle-content p{margin-top:0;font-size:17px;line-height:1.65}
/* Artikkeli ilman kansikuvaa: paperi ei nouse otsikon päälle */
body.sub .art-sheet.no-fig{margin-top:clamp(36px,4vw,56px)}
body.sub .art-sheet.no-fig .sheet-in{padding-top:clamp(48px,6vw,96px)}
/* Yleinen sivu (page.hbs): lukualue paperin keskelle; konseptin .h1-mitta 11ch on liian kapea pitkille sivunimille */
body.sub .page-prose{margin:0 auto}
body.sub .cover-h .h1{max-width:16ch}
/* Konseptin site.css antaa jokaiselle <section>-elementille pystypehmusteen; teeman jkj.css vain .sec-luokalle */
:where(body.sub) section{padding:clamp(80px,10vw,140px) 0}

/* == RYHMÄ A kuka, kirjat, korporaatiot-kuntoon, palvelut == */
/* Konseptissa sivut, joilla on punainen toimintakehotusnauha (.ctaband), eivät näytä uutiskirjenauhaa: kaksi
   punaista nauhaa peräkkäin. Rajattu ryhmän A sivuihin (kirjasivu ja palvelut). */
.page-korporaatiot-kuntoon #uutiskirje,.page-palvelut-yrittajille #uutiskirje{display:none}
/* Konseptin otsikkomitta 11ch (teeman yleinen sivu levittää 16ch:hen) */
.page-palvelut-yrittajille .cover-h .h1,.page-kirjat .cover-h .h1{max-width:11ch}
/* == /A == */

/* == RYHMÄ B taskuhallitus, tulostulva, tayskaannos, suositukset == */
/* Tuotesivut ja suositukset päättyvät konseptissa punaiseen toimintakehotusnauhaan (.ctaband): uutiskirjenauha
   (default.hbs, myös punainen) jäisi sen perään toiseksi punaiseksi nauhaksi, joten se piilotetaan näiltä sivuilta. */
/* UKK Ghostin rungosta (Tulostulva, Täyskäännös): rungosta näytetään vain toggle-kortit, muu runko on
   tiivistetty sivupohjaan (ks. page-tulostulva.hbs ja page-tayskaannos.hbs) */
body.sub .ukk-src>:not(.kg-toggle-card){display:none}
/* Ghostin cards.min.css antaa toggle-napille margin-left 1em: kysymysrivi jäi 14-16 px konseptia kapeammaksi */
body.sub .kg-toggle-card .kg-toggle-card-icon{margin-left:0}
body.sub .ukk-src>.kg-toggle-card{margin:0!important}
body.sub .ukk-src>.kg-toggle-card:not(:has(~.kg-toggle-card)){border-bottom:1px solid var(--prule)}
/* Suositusseinä Ghostin rungosta (page-suositukset.hbs): videot näkyvät omassa ruudukossaan, tyhjät kappaleet pois;
   ilman JS:ää rungon blockquotet palstoissa kuin konseptin figuret */
body.sub .tw>.kg-embed-card,body.sub .tw>p:empty{display:none}
body.sub .tw>blockquote{break-inside:avoid;padding:0 0 28px;margin:0 0 28px;border-bottom:1px solid var(--prule);font-size:1rem;line-height:1.68}
body.sub .tw>blockquote img{width:46px;height:46px;border-radius:50%;object-fit:cover;filter:grayscale(1);margin-bottom:.8rem}
/* Tulostulva: ovikuva + "Paras konsultti on sellainen, joka ei jää asumaan." ennen ostonauhaa. Kasvot näkyvät kokonaan:
   desktopissa kuva oikealla puoliskolla (rajaus ylhäältä), mobiilissa kuva ylhäällä täysleveänä ja teksti sen alla. */
body.sub .door{position:relative;overflow:hidden;padding:0;min-height:min(86vh,800px);display:flex;align-items:center}
body.sub .door-ph{position:absolute;top:0;right:0;bottom:0;width:52%;background-size:cover;background-position:50% 18%;background-repeat:no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%)}
body.sub .door-in{position:relative;z-index:2;width:100%;padding-top:clamp(96px,10vw,140px);padding-bottom:clamp(96px,10vw,140px)}
body.sub .door-h{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(2.6rem,5.4vw,5rem);line-height:1.02;letter-spacing:-.012em;max-width:13ch;color:var(--cream);text-wrap:balance}
body.sub .door-p{margin-top:1.6rem;max-width:30rem;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.6;color:rgba(240,230,211,.86)}
@media(max-width:900px){
 body.sub .door{display:block;min-height:0}
 body.sub .door-ph{position:relative;width:100%;height:118vw;max-height:640px;background-position:50% 8%;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
 body.sub .door-in{margin-top:-26vw;padding-top:0;padding-bottom:clamp(64px,14vw,96px)}
 body.sub .door-h{font-size:clamp(2.4rem,11vw,3.6rem)}
}
body.sub.page-taskuhallitus .news,body.sub.page-tulostulva .news,body.sub.page-tayskaannos .news,body.sub.page-suositukset .news{display:none}
/* == /B == */

/* == RYHMÄ C blogi, ilmaiset oppaat, holvi == */
/* Ilmaiset oppaat: oma "Liity sisäpiiriin" -nauha korvaa default.hbs:n uutiskirjeosion */
body.sub.page-ilmaiset #uutiskirje{display:none}
/* Konseptin otsikkomitta (11ch): "Ilmaiset oppaat" kahdelle riville kuten konseptissa */
body.sub.page-ilmaiset .cover-h .h1{max-width:11ch}
/* == /C == */

/* == RYHMÄ D tulostulva-t5, kurssin sisällys, oppitunti == */
/* T5-ländäri: Ghostin sisällöstä näytetään vain UKK:n toggle-kortit (muu sisältö on taitettu page-tulostulva-t5.hbs:ään) */
body.sub .t5-faq>:not(.kg-toggle-card){display:none}
body.sub .t5-faq .kg-toggle-card:not(:has(~ .kg-toggle-card)){border-bottom:1px solid var(--prule)}
/* Konseptin ländärillä ei ole uutiskirjenauhaa: punainen ostonauha on sivun viimeinen kehotus */
body.page-tulostulva-t5 .news{display:none}
/* Ghostin cards.min.css (.kg-toggle-card h4.kg-toggle-heading-text, ladataan teeman jälkeen) kasvatti UKK-otsikot 1,15 em:iin;
   konseptin koko 1,02 rem. Koskee kaikkia paperin toggle-kortteja. */
body.sub .kg-toggle-card h4.kg-toggle-heading-text{font-size:1.02rem;line-height:1.4;font-weight:700}
/* Ghostin cards.min.css (.kg-bookmark-card a.kg-bookmark-container, valkoinen pohja, pyöreät kulmat) ladataan teeman
   jälkeen ja ohitti konseptin paperityylin: koskee kaikkia paperin bookmark-kortteja. */
body.sub .kg-bookmark-card a.kg-bookmark-container,body.sub .kg-bookmark-card a.kg-bookmark-container:hover{background:transparent;border:1px solid var(--prule);border-left:3px solid var(--red2);border-radius:0;color:var(--ink)}
body.sub .kg-bookmark-card a.kg-bookmark-container:hover{border-color:rgba(11,27,36,.4);border-left-color:var(--red2)}
body.sub .kg-bookmark-card .kg-bookmark-content{font-family:var(--sans)}
body.sub .kg-bookmark-card .kg-bookmark-description{opacity:1}
body.sub .kg-bookmark-card .kg-bookmark-metadata{margin-top:auto}
body.sub .kg-bookmark-card .kg-bookmark-metadata>span:nth-of-type(2):before{content:none}
/* == /D == */

/* == TEEMAN YLEISET SIVUT: aihe, kirjoittaja, kokoelma, blogiarkisto, 404 == */
body.sub .sheet .post-feed{margin-top:0}
body.sub .post-card{min-width:0;position:relative}
body.sub .post-card .thumb{display:block;position:relative;background:var(--paper2)}
body.sub .post-card .thumb-empty{background:var(--ink)}
body.sub .post-card .lock{left:8px;bottom:8px}
body.sub .post-card .meta-s{display:block}
body.sub .sheet .kicker+.post-feed{margin-top:28px}
body.sub .arch{max-width:calc(var(--measure) + 2 * clamp(20px,6vw,96px));margin:0 auto}
body.sub .arch>.prose:empty{display:none}
html.jkj body.sub .archive-post-label{font-family:var(--bebas);font-weight:400;font-size:2rem;line-height:1;color:var(--red2);margin:2.2rem 0 .3rem;text-transform:capitalize}
body.sub .archive-post:first-of-type .archive-post-label{margin-top:0}
body.sub .archive-post>a{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:14px;padding:12px 0;border-bottom:1px solid var(--prule);color:var(--ink)}
body.sub .archive-post .nu-t{font-weight:700;font-size:1rem;line-height:1.4}
body.sub .archive-tags{margin-top:clamp(48px,6vw,80px)}
body.sub .sheet .chips a{border-color:var(--prule);color:var(--ink)}
body.sub .sheet .chips a:hover{border-color:var(--red2);background:transparent;color:var(--red2);text-decoration:none}
body.sub .sheet .chips small{color:var(--ink2)}
body.sub .err+.sheet{margin-top:0}
@media(max-width:760px){body.sub .archive-post>a{grid-template-columns:1fr;gap:2px}}
/* Kansi ilman kuvaa (aihe, kirjoittaja, arkisto, kuvaton sivu): mobiilissa konseptin 76 px yläpehmuste olettaa
   kansikuvan valikon alle; ilman kuvaa otsikolle tilaa kuten artikkelin otsakkeessa */
@media(max-width:900px){body.sub .cover-h:not(:has(.cover-ph)){padding-top:calc(116px + var(--sat))}}
/* Vanhan sisällön luokat paperilla (ennen jkj.css:n .gh-content-säännöissä): oppaiden kansikuva oikealle,
   kampanjasivun suosittelijan pyöreä kuva */
body.sub .prose .imgright200{float:right;margin:.3em 0 1em 1.4em;width:200px}
body.sub .prose img.suositus{width:160px;height:160px;border-radius:50%;object-fit:cover;float:right;margin:.3em 0 1em 1.4em;border:3px solid var(--red2)}
@media(max-width:760px){body.sub .prose .imgright200{width:130px;margin-left:1em}body.sub .prose img.suositus{width:84px;height:84px}}

/* == KATSELMUS 19.10.2026: kaikkien sivujen läpikäynti ======================================== */
/* Tiedostokortti (oppaiden pdf:t): Ghostin valkoinen pyöreä laatikko ja kolminkertainen alleviivaus pois; sama
   paperilinja kuin bookmark-korteissa. Alleviivaamaton otsikko saa alleviivauksen hoverissa. */
body.sub .prose .kg-file-card a.kg-file-card-container{background:transparent;border:1px solid var(--prule);border-left:3px solid var(--red2);border-radius:0;color:var(--ink);text-decoration:none;font-family:var(--sans);padding:14px 14px 14px 18px;transition:border-color .2s}
body.sub .prose .kg-file-card a.kg-file-card-container:hover{border-color:rgba(11,27,36,.4);border-left-color:var(--red2);color:var(--ink)}
body.sub .prose .kg-file-card a.kg-file-card-container:hover .kg-file-card-title{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.18em}
body.sub .kg-file-card-contents{margin:2px 8px 2px 0}
body.sub .kg-file-card-title{font-size:1.02rem;font-weight:700;line-height:1.35}
body.sub .kg-file-card-caption{font-size:.9rem;line-height:1.45;color:var(--ink2);opacity:1}
body.sub .kg-file-card-metadata{font-size:.84rem;color:var(--ink2);margin-top:8px}
body.sub .kg-file-card-filename{font-weight:500}
body.sub .kg-file-card-filesize{font-size:.84rem;opacity:1}
body.sub .kg-file-card-icon{width:64px;min-width:64px;min-height:64px}
body.sub .kg-file-card-icon:before{border-radius:0;opacity:.05}
body.sub .kg-file-card-icon svg{color:var(--red2)}
/* Lukkolaatikon linkki tummalla: alleviivattu -> hoverissa ei viivaa, punainen */
body.sub .prose .gh-post-upgrade-cta-content a:not(.gh-btn):hover,.gh-post-upgrade-cta-content small a:hover{color:#ff6b77;text-decoration-color:transparent}
/* Kirjahylly: kansikuvalinkissä ei alleviivausta (vuosiluvun alle jäi oletusviiva); hoverissa kirja nousee ja vuosi punaiseksi */
body.sub .shelf a{text-decoration:none}
/* Blogin aiherivi: alleviivaamaton aihe saa hoverissa alleviivauksen (sama 2 px viiva kuin valitulla aiheella) */
body.sub .topics a:not(.on):hover{border-bottom-color:currentColor}
/* Otsikoiden rivitys: tasapainotetut rivit (ei yhden sanan viimeistä riviä). Puhelimessa sana ei saa leventää sivua;
   pitkät yhdyssanat mahdutetaan otsikkokoolla (tavutus tavutti Safarissa myös lyhyitä sanoja turhaan). */
body.sub :is(h1,h2,h3,.stmt,.rant,.door-h,.bigq,.feat-q,.mast-t){text-wrap:balance}
@media(max-width:760px){
 /* Puhelimessa paperin sisämarginaali = sivun reunus (--gut), jolloin tumman kannen otsikko ja paperin teksti ovat
    samassa linjassa (ennen 20 px vs 23 px) */
 body.sub .sheet-in{padding-left:var(--gut);padding-right:var(--gut)}
 body.sub .topics-w{margin:0 calc(-1 * var(--gut))}
 body.sub .topics:not(.tp2){padding:0 var(--gut);scroll-padding:0 var(--gut)}
 body.sub .topics.tp2{padding:0 var(--gut)}
}
/* Twitter-upotus ei saa leventää sivua puhelimessa (widgets.js antaa kiinteän 550 px leveyden) */
body.sub .prose .twitter-tweet,body.sub .prose .twitter-tweet-rendered,body.sub .prose .twitter-tweet iframe{max-width:100%!important;min-width:0!important}
/* Lukkolaatikko: otsikko, teksti, nappi ja kirjautumislinkki samaan vasempaan linjaan */
body.sub .gh-post-upgrade-cta-content{align-items:flex-start}
body.sub .gh-post-upgrade-cta-content>*,body.sub .gh-post-upgrade-cta-content p,body.sub .gh-post-upgrade-cta-content small{text-align:left;margin-left:0;margin-right:0}
/* Ghostin painikekortti (vanha sisältö): sama punainen nappi kuin teemassa; Ghostin oletus antoi tumman tekstin
   punaiselle pohjalle (kontrasti 3,2) ja pyöreät kulmat */
body.sub .kg-button-card a.kg-btn{background:var(--red2)!important;color:#fff!important;border-radius:2px;font-family:var(--sans);font-weight:700;font-size:.95rem;padding:.95em 1.5em;height:auto;line-height:1.3;text-decoration:none;transition:background .2s,transform .2s}
body.sub .kg-button-card a.kg-btn:hover{background:#8a0d18!important;transform:translateY(-2px);opacity:1}
/* Vertailutaulukko: ei kellertävää/vaaleanpunaista korostuspohjaa, vaan punainen teksti ja punainen viiva sarakkeen yllä */
body.sub .cmp td.us{background:none}
body.sub .cmp thead th.us{border-bottom-color:var(--red2)}
/* Aikataulun päivät yhdelle riville ("Päivät 7-12" katkesi kahdelle) */
body.sub .sched{grid-template-columns:6.6rem 1fr 1fr}
body.sub .sched .d{white-space:nowrap}
@media(max-width:760px){body.sub .sched{grid-template-columns:5.2rem 1fr 1fr}body.sub .sched .d{font-size:1.2rem}}
/* UKK-kysymykset samalla kirjaimella kaikilla sivuilla (osa rungon kysymyksistä oli kursivoitu) */
body.sub .kg-toggle-heading-text :is(em,i){font-style:normal}
/* Palvelut, kesto puhelimessa: palvelun nimi palkin yläpuolelle (TASKUHALLITUS® ei mahtunut 6,4 rem sarakkeeseen ja
   meni palkin päälle) */
@media(max-width:760px){
 body.sub .dur-row{grid-template-columns:1fr;gap:6px;padding:10px 0}
 body.sub .dur-axis{grid-template-columns:1fr}
 body.sub .dur-axis>:first-child:empty{display:none}
}
/* Vanhan sisällön upotus, jonka iframella on kiinteä inline-koko (690 x 517 px, position:absolute): video meni
   puhelimessa seuraavan kappaleen päälle. Kehys täyttää FitVidsin kääreen, ja ilman käärettä se on 16:9. */
body.sub .prose .fluid-width-video-wrapper iframe{width:100%!important;height:100%!important}
body.sub .prose .kg-embed-card>iframe[style*="absolute"]{position:static!important;width:100%!important;height:auto!important;aspect-ratio:16/9}
/* Pitkä lainaus (default.hbs lisää .bq-long yli 180 merkin lainaukselle): lukukoko, punainen reunaviiva säilyy */
body.sub .prose blockquote.bq-long{font-size:1.12em;line-height:1.5}
/* Blogin korttiruudukko puhelimessa (2 saraketta à ~165 px): pienempi otsikko, jottei joka rivi tavuudu, ja
   metarivi (aihe · pvm · lukuaika) ei jätä "min"-sanaa yksin riville */
@media(max-width:480px){
 body.sub .grid-a h3{font-size:1.06rem;line-height:1.2}
 body.sub .grid-a .meta-s{font-size:.74rem}
}
/* Kapealla artikkelin ruudukko ei saa kasvaa sisällön min-leveyden mukaan (taulukko/upotus levitti sivun 544 px:iin) */
@media(max-width:1100px){body.sub .art-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){body.sub .prose table{font-size:.86em}body.sub .prose th,body.sub .prose td{padding:.5em .4em}}
/* Sivu, jolta otsikko on piilotettu Ghostissa ("Show title and feature image" pois): tyhjä tumma kansi pois, paperi
   alkaa heti valikon alta (ennen 165 px tyhjää tummaa kaistaa paperin yllä) */
body.sub .cover-h.cover-empty{padding:calc(clamp(96px,9vw,124px) + var(--sat)) 0 0}
body.sub .cover-h.cover-empty+.sheet{margin-top:0}
/* Sähköpostiosoitetta ei tavuteta (moi@jan-nejaaskelainen.fi) */
body.sub a[href^="mailto:"]{hyphens:none;-webkit-hyphens:none;white-space:nowrap}
/* Pitkä kansiotsikko (default.hbs lisää .h1-long yli 40 merkille) */
body.sub .cover-h .h1.h1-long{font-size:clamp(2.6rem,5.2vw,4.8rem);line-height:.95;max-width:20ch}
/* Vanhan sisällön kansikuva oikealla: inline-leveys 250 px ohitti luokan leveyden ja vei puhelimessa tekstiltä tilan */
body.sub .prose img.imgright200{width:200px!important}
@media(max-width:760px){body.sub .prose img.imgright200{width:130px!important}}
/* Sisältöön vaihdettu logoseinä on sekä .kg-width-wide (keskitys transformilla) että .rv (esiinliuku transformilla):
   esiinliu'un jälkeen keskityssiirto katosi ja logot levisivät 280 px oikealle (vaakavieritys kaikilla leveyksillä).
   Keskitys marginaaleilla, jolloin transform jää vain esiinliu'ulle. */
body.sub .prose .page-logos.kg-width-wide{left:auto;transform:none;margin-left:calc(50% - min(calc(100vw - 40px),1000px) / 2)}
.js body.sub .prose .page-logos.kg-width-wide.rv:not(.in){transform:translateY(34px)}
/* Takuu-osio: otsikko alkaa samalta korkeudelta kuin hinta (keskitys laski otsikon 30 px hinnan yläreunan alle) */
body.sub .gtee{align-items:start}
/* Kirjat: seitsemän kantta hyllyssä; hylly kutistuu
   leveyteen, jotta seitsemän kantta mahtuu (kiinteät leveydet olisivat ylittäneet rivin sekä työpöydällä että puhelimessa).
   /ai/: tiivistelmäsivun pitkät listat ilman ylimääräistä väliä. */
body.sub .shelf a{flex:0 1 auto;min-width:0}
body.sub .shelf img{max-width:100%}

/* == OTSIKKOJÄRJESTELMÄ (Jannen palaute 20.10.2026) ==========================================================
   Palvelu- ja esittelysivuilla (kaikki body.sub-sivut paitsi pitkät lukutekstit) yksi järjestelmä:
   - kicker: DM Sans 700, .78rem, versaali, punainen viiva edessä (jkj.css .kicker)
   - H1 kansi: Bebas Neue 400 (.h1)
   - H2 osion otsikko: Bebas Neue 400, yksi koko clamp(2.5rem,4.6vw,4rem), riviväli .92 — sama paperilla, tummalla,
     punaisessa nauhassa ja takuuosiossa (ennen 48/60/73/89 px ja osa DM Serifillä, osa keinolihavoituna)
   - H3 alaotsikko: DM Sans 700, 1.18rem, riviväli 1.3
   - DM Serif Display 400 vain lausumille ja lainauksille (.stmt, sitaatit) sekä kirjoitusten otsikoille (blogi,
     oppaat, oppitunnit: lukusivujen oma järjestelmä); ei koskaan lihavoituna (fontissa ei ole lihavaa leikkausta). */
body.sub :is(.h2,.m-h2,.ctaband h2,.gtee h2){font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:clamp(2.5rem,4.6vw,4rem);line-height:.92;letter-spacing:.01em}
body.sub .gtee h2{margin-bottom:1rem}
body.sub :is(.m-fit h3,.sheet-in>.two-p h3,.prose:not(.page-prose):not(.art-grid .prose) h3){font-family:var(--sans);font-weight:700;font-size:1.18rem;line-height:1.3}
body.sub .m-fit h3{margin-bottom:.5rem}
body.sub :is(.stmt,.feat-q,.bigq,.door-h,.rant,.monolog p,.testi blockquote){font-weight:400}
/* Palvelut: palvelun nimi yhdelle riville kaikilla leveyksillä (T5-verkkokurssi oli 3 rivillä); toissijainen merkintä
   neutraalina tarrana (punainen tarra on varattu "Suosituin"-korostukselle) */
body.sub .lrow h2{white-space:nowrap;font-size:clamp(2.4rem,4vw,3.2rem)}
body.sub .lrow .tag2.alt{background:none;color:var(--ink2);border:1px solid var(--prule)}
@media(max-width:1100px) and (min-width:901px){body.sub .lrow h2{font-size:clamp(2rem,3.6vw,2.6rem)}}
/* Sivujen alun listat (kipupisteet ym.): otsikon alle, ei oikeaan reunaan; leveällä kahteen palstaan */
body.sub .pain-set{display:block}
body.sub .pain-set .pain-h{margin-bottom:clamp(20px,2.4vw,32px)}
body.sub .pain-set .pain{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,64px)}
body.sub .pain-set .pain li:first-child{border-top:1px solid var(--prule);padding-top:16px}
body.sub .pain-set .pain li:nth-child(2){border-top:1px solid var(--prule);padding-top:16px}
body.sub .pain-set .pain li:first-child:before,body.sub .pain-set .pain li:nth-child(2):before{top:calc(16px + .8em - 1px)}
@media(max-width:900px){body.sub .pain-set .pain{grid-template-columns:1fr}body.sub .pain-set .pain li:nth-child(2){padding-top:16px}}
/* Tulostulva: kansi = ovikuva + "Paras konsultti on sellainen, joka ei jää asumaan." */
body.sub .door-hero{min-height:min(100vh,880px)}
body.sub .door-hero .door-in{padding-top:calc(clamp(120px,12vw,160px) + var(--sat));padding-bottom:clamp(120px,12vw,170px)}
body.sub .door-hero .door-h{font-size:clamp(2.8rem,6vw,5.6rem);line-height:1;margin-top:1rem}
body.sub .door-lead{margin-top:1.6rem;font-family:'Bebas Neue',Impact,sans-serif;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1;letter-spacing:.01em;color:var(--red);max-width:24ch}
body.sub .door-hero .door-p{margin-top:1.1rem}
body.sub .door-hero+.sheet{margin-top:calc(-1 * clamp(64px,7vw,110px))}
body.sub .mono-c{margin-top:1rem;font-size:.98rem;line-height:1.6;color:var(--ink2);max-width:22rem}
@media(max-width:900px){
 body.sub .door-hero .door-ph{margin-top:calc(76px + var(--sat));height:92vw;max-height:520px;background-position:50% 12%}
 body.sub .door-hero .door-in{margin-top:-12vw}
 body.sub .door-hero .door-in{padding-top:0;padding-bottom:clamp(110px,26vw,150px)}
 body.sub .door-hero .door-h{font-size:clamp(2.4rem,10.4vw,3.6rem)}
}
/* Taskuhallitus: 50 000 € ja 1 590 € samalle peruslinjalle (alareunaan tasaus nosti kaksirivisen selitteen luvun
   ylemmäs); luvut yläreunasta, "vai" lukujen keskelle */
body.sub .vs{align-items:start}
body.sub .vs .or{align-self:start;padding:0;margin-top:calc(clamp(3.4rem,8vw,7rem) * .32)}
@media(max-width:760px){body.sub .vs .or{margin-top:0}}
/* Kuka: "Kassavirta" yhtä kaukana nimen molemmista riveistä (ennen 40 px yllä, kiinni alla) */
body.sub .who-name .q{margin:-.02em 0 .3em;line-height:.9}
/* Alun listat myös T5-ländärillä ja kaksipalstaisissa osioissa: lista otsikon alle kahteen palstaan (ei oikeaan reunaan) */
body.sub :is(.m-two,.two-p):has(>ul.m-qs,>ul.chk){display:block}
body.sub :is(.m-two,.two-p):has(>ul.m-qs,>ul.chk)>div:first-child{margin-bottom:clamp(20px,2.4vw,32px)}
body.sub :is(.m-two,.two-p)>:is(ul.m-qs,ul.chk){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,64px);align-content:start}
@media(max-width:900px){body.sub :is(.m-two,.two-p)>:is(ul.m-qs,ul.chk){grid-template-columns:1fr}}
/* T5-ländäri: yksinkertaisempi tekstihierarkia. Jannen omat sanat leipätekstinä (DM Serif vain asiakkaiden sitaateille),
   "Ja tärkein kaikista" -lausuma samaa lausumatyyliä kuin muilla sivuilla (.stmt), ilman kaksiväristä korostusta */
body.page-tulostulva-t5 .m-two .monolog p{font-family:var(--sans);font-size:1.12rem;line-height:1.65}
/* DM Serif Displaysta ei ole lihavaa leikkausta: lihavointi serif-otsikoissa ja -lainauksissa (vanha sisältö) näkyi
   selaimen keinolihavointina. Korostus serifissä punaisella, ei paksuudella. */
body.sub :is(.prose h2,.prose h3,.prose blockquote,.stmt,.m-big,.monolog,.testi) :is(strong,b){font-weight:400}
body.sub .prose blockquote:not(.bq-long) :is(strong,b){color:var(--red2)}
/* Mobiilin keskityssääntö alasivuilla (ks. jkj.css): keskitetty kuva vetää osion otsikot keskelle, leipäteksti vasemmalla */
@media(max-width:600px){
 body.sub .logos-sec h2,body.sub .logos-cta{text-align:center}
 /* Tulostulva "Mitä saat?": esimerkkisivujen kuva keskelle ja sen osion otsikko samalle akselille */
 body.sub .deliv{justify-items:center}
 body.sub .deliv>.prose{justify-self:stretch}
 body.sub .deliv .prose h2{text-align:center}
 body.sub .deliv .prose h3{text-align:center}
 /* Kirjat: kansi keskelle, kirjan otsikko, kustantaja ja kicker samalle akselille */
 body.sub .bk-cov{text-align:center}
 body.sub .bk-cov img{margin:0 auto}
 body.sub .bk>div:not(.bk-cov)>:is(.kicker,h2,.pub){text-align:center;justify-content:center}
}
/* Viivalistat: viiva ensimmäisen rivin x-korkeuden keskelle (Jannen palaute 20.10.: viiva oli 2,6–7,9 px liian ylhäällä).
   Viivan keskikohta = yläpehmuste + puoli riviä + 0,15 em (DM Sansin x-korkeuden keskikohta on rivin keskeltä alempana). */
body.sub .chk li:before{top:calc(12px + .95em - 1px)}
body.sub .m-fit.no .chk li:before{top:calc(12px + .95em - 6px)}
body.sub .pain li:before,body.sub .pain.stop li:before{top:calc(16px + .95em - 1px)}
body.sub .pain-set .pain li:first-child:before,body.sub .pain-set .pain li:nth-child(2):before{top:calc(16px + .95em - 1px)}
/* Aikajana: vuosi, pallo ja otsikon ensimmäinen rivi samalle keskilinjalle */
body.sub .tl-y{position:relative;top:.055em}
body.sub .tl-i:after{top:calc(1.35em + .7px)}
@media(max-width:760px){body.sub .tl-y{top:.2em}body.sub .tl-i:after{top:calc(1.35em + 2.7px)}}
/* Lukutekstissä (prose) keskityssääntö koskee kuvia: allekirjoitus samalle akselille kuin tekstin keskitetyt kuvat;
   väliotsikot kulkevat leipätekstin mukana vasemmalla */
@media(max-width:600px){body.sub .prose img[src*="allekirjoitus"]{display:block;margin:2rem auto 0!important}}
/* Tulostulvan kansi: portaikkokuva (vaakakuva). Janne (kuvassa x 46–60 %, y 35–58 %) portaikon keskellä ja kokonaan
   näkyvissä: kuvaa suurennetaan, jotta hahmo ei jää pieneksi; mitattu holvi_face.py:llä 1440 ja 390 px. */
body.sub .door-hero .door-ph{background-size:auto 150%;background-position:50% 48%}
@media(max-width:900px){body.sub .door-hero .door-ph{background-size:auto 160%;background-position:55% 56%;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}}
/* == Jannen palaute 20.10.2026 klo 11.23 =====================================================================
   1) Otsikko ei katkea koskaan kesken sanan: ei tavutusta eikä overflow-wrap-katkoa otsikoissa. Jos pisin sana ei
      mahdu riville, default.hbs:n fitHeadings() pienentää otsikon fonttia, kunnes se mahtuu (mittari wordbreak.py). */
body.sub :is(h1,h2,h3,h4,.kicker,.stmt,.bebas,.door-h,.rant,.m-h2,.feat-q,.bigq,.nu-t,.prod-name),body.sub .cover-h .h1{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;word-break:normal}
/* Blogikortit puhelimessa: kahden kapean palstan sijaan vaakakortit (kuva oikealla), jotta pitkät suomen yhdyssanat
   mahtuvat otsikossa riville */
@media(max-width:600px){
 body.sub .grid-a{--cols:1;gap:0}
 body.sub .grid-a>a,body.sub .grid-a>article>a{display:grid;grid-template-columns:minmax(0,1fr) 104px;grid-auto-rows:min-content;column-gap:16px;padding:16px 0;border-bottom:1px solid var(--prule)}
 body.sub .grid-a>a .thumb,body.sub .grid-a>article>a .thumb{grid-column:2;grid-row:1/span 3;aspect-ratio:1;margin:0}
 body.sub .grid-a>a>:not(.thumb),body.sub .grid-a>article>a>:not(.thumb){grid-column:1}
 body.sub .grid-a h3{font-size:1.15rem}
}
/* 2) Faktalista puhelimessa yhteen palstaan */
@media(max-width:600px){body.sub .facts{flex-direction:column;gap:8px}}
/* 4) Kicker vs. viivalista: kickerin viiva pidempi ja ohuempi (40 x 1 px) kuin listojen 18 x 2 px viiva, ja otsikon ja
      listan väliin selvä väli, jottei kicker näytä listan ensimmäiseltä riviltä */
body.sub .pain-set .pain-h{margin-bottom:clamp(28px,3vw,40px)}
/* Blogin etusivun sivupalstan kortit samaan mittaan kuin korttilistat puhelimessa (kuva 104 px, ei 92 px) */
@media(max-width:600px){body.sub .side-a{grid-template-columns:minmax(0,1fr) 104px;column-gap:16px}}
/* Koodinimet (evästeiden nimet ym.) lukualueessa: ei katkeamista väliviivoista, hieman pienempi kuin leipäteksti */
body.sub .prose code{font-size:.84em;white-space:nowrap}
/* Leipätekstissä ei automaattista tavutusta (Jannen palaute 20.10.2026: "What-sAppilla"): selaimen suomen tavutus
   katkaisi vieraskielisiä ja yhdyssanoja väärin. Varalla overflow-wrap, ettei poikkeuksellisen pitkä sana levitä sivua. */
html.jkj body,html.jkj body *{hyphens:manual;-webkit-hyphens:manual}
body.sub :is(p,li,td,th,dd,dt,blockquote,figcaption){overflow-wrap:break-word}
/* Kapealla kelluva kansikuva ei puristu tekstin viereen (130 px kuva jätti 360 px näytöllä tekstille ~170 px, ja pitkät
   yhdyssanat katkesivat): alle 480 px kuva tekstin yläpuolelle omalle rivilleen */
@media(max-width:480px){body.sub .prose :is(.imgright200,img.suositus){float:none;display:block;margin:0 0 1.2em}body.sub .prose .imgright200{width:160px!important}}
/* Taulukot puhelimessa: sanat eivät katkea; leveä sisältötaulukko vierii omassa laatikossaan, vertailutaulukon
   rivi- ja sarakeotsikot pienemmällä, jotta pisin sana (Tavoitettavuus, Irtisanomisaika) mahtuu */
@media(max-width:600px){
 body.sub .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
 body.sub .prose :is(td,th){overflow-wrap:normal;min-width:7.5em}
 body.sub .cmp{table-layout:auto}
 body.sub .cmp :is(th,td){overflow-wrap:normal;font-size:.72rem}
 body.sub .cmp thead th:first-child{width:auto}
}
/* Tulostulvan aikataulu 360 px: sarakkeet eivät saa kasvaa sisällön mukaan (2 px vaakavieritys) */
@media(max-width:400px){body.sub .sched{grid-template-columns:4.6rem minmax(0,1fr) minmax(0,1fr);font-size:.84rem}body.sub .sched .d{font-size:1.05rem}}
/* == Taskuhallitus rauhallisemmaksi (Jannen palaute 20.10.2026, tavoite konversio) =====================================
   Kipu -> ratkaisu -> todiste -> hinta -> yksi CTA. Vähemmän korostustapoja: kannen lupaus leipätekstin kokoisena
   kermana (ei isoa serifiä), hinta ja takuu yhdessä rauhallisessa osiossa todisteiden jälkeen, vertailutaulukon
   Taskuhallitus-sarake ilman punaista tekstiä (vain otsikko), enemmän tilaa osioiden välillä. */
body.page-taskuhallitus .ph2 .stmt,body.page-tayskaannos .ph2 .stmt{font-family:var(--sans);font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.5;max-width:30rem;margin-top:1rem}
body.page-taskuhallitus .sheet-in>.prule{margin:clamp(56px,7vw,96px) 0}
body.page-taskuhallitus .cmp td.us{color:var(--ink);font-weight:700}
body.page-taskuhallitus .th-proof{padding-top:clamp(96px,10vw,140px)}
@media(max-width:760px){body.page-taskuhallitus .th-proof{padding-top:48px}}
body.page-taskuhallitus .th-q{margin:clamp(32px,4vw,48px) 0 clamp(56px,6vw,88px);max-width:40rem;margin-left:0;border-left:2px solid var(--red);padding-left:clamp(16px,2vw,28px)}
body.page-taskuhallitus .th-q blockquote{font-size:clamp(1.3rem,2vw,1.6rem)}
body.page-taskuhallitus .th-price{padding:clamp(72px,8vw,112px) 0;border-top:1px solid var(--line)}
body.page-taskuhallitus .th-price .gtee .n{font-size:clamp(4rem,9vw,8rem);color:var(--cream)}
body.page-taskuhallitus .th-price .gtee .n small{color:var(--muted);font-family:var(--sans);font-size:.95rem;letter-spacing:0;margin-top:.6rem}

/* Taskuhallitus ja Täyskäännös: kansikuva yhtä iso kuin Tulostulvan ovikuva (Jannen palaute 20.10.2026: "kuva on liian pieni").
   Desktopissa kuva täyttää kannen oikean puoliskon ruudun reunaan asti; mobiilissa täysleveänä tekstin yläpuolella. */
body.sub .ph2-bleed{position:relative;overflow:hidden}
body.sub .ph2-bg{position:absolute;top:0;right:0;bottom:0;width:52%;background-size:cover;background-repeat:no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%),linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%),linear-gradient(180deg,#000 62%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
body.sub .ph2-bleed .ph2{position:relative;z-index:2;min-height:min(86vh,800px)}
@media(max-width:900px){
 body.sub .ph2-bg{position:relative;width:100%;height:92vw;max-height:560px;margin-top:calc(76px + var(--sat));-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
 body.sub .ph2-bleed .ph2{min-height:0;margin-top:-16vw;padding-top:0}
}

/* Tulostulva "Asiakkaan sanoin": lainaus keskitettynä koko leveydelle, ilman johdantoa (Jannen palaute 20.10.2026) */
body.sub .mono-full{text-align:center}
body.sub .mono-full .kicker{justify-content:center}
body.sub .monolog.c{border-left:0;padding-left:0;max-width:46rem;margin:1.4rem auto 0;text-align:center}
body.sub .mono-full .kicker:after{content:"";width:40px;height:1px;background:var(--red2);flex:none}