:root{
  --ink:#0a0a0a; --ink-2:#5c5c5c; --ink-3:#8a8a8a; --dim:#a3a3a3;
  --page:#ffffff; --paper:#f5f4f1; --paper-2:#ecebe7; --line:#e4e2dd;
  --accent:#1f4fd1; --ok:#1d7a46;
  --wrap:1180px;
  --fd:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --fb:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--page);color:var(--ink);font:400 16px/1.6 var(--fb);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 16px}}

h1,h2,h3{font-family:var(--fd);font-weight:400;letter-spacing:-.025em;line-height:1.08}
h1{font-size:clamp(36px,4.4vw,56px)}
h2{font-size:clamp(30px,3.4vw,44px)}
h3{font-size:24px;letter-spacing:-.015em;line-height:1.2}
.dim{color:var(--dim)}
.eyebrow{font:500 11.5px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.lead{font-size:17px;color:var(--ink-2);line-height:1.6}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;height:72px;gap:40px}
.brand{display:flex;align-items:center;gap:10px;font:500 18px var(--fd);letter-spacing:-.02em}
.brand i{width:22px;height:22px;border-radius:50%;background:var(--ink);position:relative}
.brand i::after{content:"";position:absolute;inset:6px 6px 6px 11px;background:var(--page);border-radius:0 50% 50% 0}
.nav ul{display:flex;gap:30px;list-style:none;font-size:14.5px;color:var(--ink)}
.nav ul a{opacity:.82}.nav ul a:hover{opacity:1}
.nav .sp{flex:1}
.nav .txt{font-size:14.5px}
@media(max-width:900px){.nav ul,.nav .txt{display:none}}

.btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 22px;border-radius:999px;font:500 14.5px var(--fb);white-space:nowrap;transition:background .2s,transform .2s}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#2a2a2a}
.btn-light{background:#fff;color:var(--ink)}.btn-light:hover{transform:translateX(2px)}
.btn-line{border:1px solid rgba(255,255,255,.45);color:#fff}
.btn-sm{height:38px;padding:0 18px;font-size:14px}
.arrow::after{content:"→";font-family:var(--fb)}
.tlink{display:inline-flex;gap:8px;font-size:15px;border-bottom:1px solid var(--ink);padding-bottom:3px}

/* hero */
.hero{padding:24px 0 0}
.stage{position:relative;height:740px;overflow:hidden;background:#343738 url(../img/norppa-2400.webp) right center/auto 100% no-repeat}
.stage::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#343738 0%,#343738 22%,rgba(52,55,56,.55) 38%,rgba(52,55,56,0) 52%)}
.stage-copy{position:absolute;left:56px;top:50%;transform:translateY(-50%);width:500px;color:#fff;z-index:2}
.stage-copy .eyebrow{color:rgba(255,255,255,.78)}
.stage-copy h1{margin-top:22px}
.stage-copy h1 .dim{color:rgba(255,255,255,.62)}
.stage-copy p{margin-top:22px;font-size:18px;color:rgba(255,255,255,.9);max-width:480px}
.stage-copy .row{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}

/* app window */
.app{position:absolute;left:52%;top:84px;width:760px;height:520px;background:#fff;border-radius:10px 0 0 0;box-shadow:0 30px 80px rgba(0,0,0,.28);overflow:hidden;font-size:12.5px;z-index:1;display:grid;grid-template-rows:46px 1fr}
.app-top{display:flex;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid var(--line)}
.app-top b{font:500 13px var(--fd)}
.app-top .sep{width:1px;height:18px;background:var(--line)}
.app-top .search{flex:1;height:28px;border-radius:6px;background:var(--paper);display:flex;align-items:center;padding:0 10px;color:var(--ink-3)}
.app-body{display:grid;grid-template-columns:178px 1fr;min-height:0}
.app-side{border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:4px;color:var(--ink-2)}
.app-side .new{border:1px solid var(--line);border-radius:6px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--ink);margin-bottom:12px}
.app-side .h{font-size:11px;color:var(--ink);font-weight:500;margin:4px 6px 6px}
.app-side span{padding:7px 8px;border-radius:6px}
.app-side .on{background:#eef2fd;color:var(--accent)}
.app-main{padding:20px 22px;min-width:0}
.app-main h4{font:400 21px var(--fd);letter-spacing:-.02em}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;color:var(--ink-3)}
.chips span{background:var(--paper);border-radius:5px;padding:3px 8px;color:var(--ink-2)}
.chips span.k{background:var(--ink);color:#fff}
.count{display:flex;gap:14px;align-items:center;margin-top:14px;color:var(--ink-2)}
.count b{background:#eef2fd;color:var(--accent);font-weight:500;padding:4px 10px;border-radius:5px}
.tbl{width:100%;border-collapse:collapse;margin-top:14px;table-layout:fixed}
.tbl th{font-weight:500;color:var(--ink-3);text-align:left;padding:8px 8px 8px 0;border-bottom:1px solid var(--line);font-size:11.5px}
.tbl td{padding:10px 8px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl td:first-child{font-weight:500;color:var(--ink)}
.tbl td{color:var(--ink-2)}
.tbl .d{font-variant-numeric:tabular-nums}
.app-src{margin-top:10px;font-size:11px;color:var(--ink-3)}

@media(max-width:1100px){.app{left:56%}}
@media(max-width:900px){
  .stage{height:auto;padding:72px 24px 72px}
  .stage-copy{position:relative;left:auto;top:auto;transform:none;width:auto;max-width:520px}
  .app{position:relative;left:auto;top:auto;width:calc(100% + 24px);height:400px;margin-top:48px}
  .app-body{grid-template-columns:1fr}.app-side{display:none}
}
@media(max-width:640px){.stage{padding:40px 16px 0}.tbl th:nth-child(2),.tbl td:nth-child(2){display:none}}

section{padding:136px 0}
@media(max-width:700px){section{padding:80px 0}}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.sec-head .lead{max-width:440px}
@media(max-width:900px){.sec-head{grid-template-columns:1fr;gap:20px}}

/* numbers */
.nums{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:stretch}
.nums h2{margin-top:18px}
.big{display:flex;gap:56px;margin-top:56px;flex-wrap:wrap}
.big b{display:block;font:300 clamp(46px,5vw,64px)/1 var(--fd);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.big span{display:block;margin-top:10px;font-size:13.5px;color:var(--ink-2);max-width:190px;line-height:1.45}
.nums .left{display:flex;flex-direction:column}
.nums .left .tlink{margin-top:auto;align-self:flex-start}
.photo{position:relative;min-height:360px;background:#2b3238 url(../img/metsa-1600.webp) center/cover;color:#fff;display:flex;align-items:flex-end;padding:28px}
.photo::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 60%)}
.photo .in{position:relative;display:flex;gap:40px}
.photo b{display:block;font:300 34px/1 var(--fd);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.photo span{display:block;font-size:12.5px;opacity:.85;margin-top:6px}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px}
.tabs button{all:unset;cursor:pointer;padding:12px 0;border-top:1px solid var(--line);font-size:14px;color:var(--ink-3);transition:color .2s}
.tabs button[aria-selected="true"]{border-top:1.5px solid var(--ink);color:var(--ink)}
.note{margin-top:14px;font-size:12px;color:var(--ink-3)}
@media(max-width:900px){.nums{grid-template-columns:1fr;gap:48px}.nums .left .tlink{margin-top:40px}}

/* products */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:64px}
.card{background:var(--paper);padding:20px 20px 28px;display:flex;flex-direction:column;transition:background .25s}
.card:hover{background:var(--paper-2)}
.mini{background:#fff;border-radius:6px;padding:16px;height:230px;font-size:12.5px;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card .eyebrow{margin-top:28px;color:var(--ink-3);font-size:10.5px}
.card h3{margin-top:10px}
.card p{margin-top:10px;color:var(--ink-2);font-size:15px;line-height:1.55}
.card .tlink{margin-top:auto;padding-top:36px;border:0;font-size:14px}
.card .tlink span{border-bottom:1px solid var(--ink)}
/* mini 1 */
.m1 .chips{margin-top:0}
.m1 .funnel{position:absolute;left:16px;right:16px;bottom:16px}
.m1 s{color:var(--ink-3);font-size:12px;margin-right:8px}
.m1 .n{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.m1 .n b{font:400 40px/1 var(--fd);letter-spacing:-.03em}
.m1 .n span{color:var(--ink-3)}
/* mini 2 */
.fld{display:flex;justify-content:space-between;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.fld:last-of-type{border:0}
.fld small{display:block;color:var(--ink-3);font-size:11px;margin-top:2px}
.ok{display:inline-flex;align-items:center;gap:5px;color:var(--ok);background:#eaf5ee;border-radius:4px;padding:2px 7px;font-size:11.5px;white-space:nowrap}
.no{display:inline-flex;color:#9a3b2b;background:#f8ece9;border-radius:4px;padding:2px 7px;font-size:11.5px;white-space:nowrap}
.rule{position:absolute;left:16px;right:16px;bottom:14px;font-size:11px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:8px}
/* mini 3 */
.ev{display:grid;grid-template-columns:10px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.ev:last-child{border:0}
.ev i{width:7px;height:7px;border-radius:50%;background:var(--ink);margin-top:6px}
.ev i.b{background:var(--accent)}.ev i.g{background:var(--ok)}
.ev small{display:block;color:var(--ink-3);font-size:11px}
@media(max-width:960px){.cards{grid-template-columns:1fr}}

/* flow */
.flow{background:var(--paper)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:72px;border-top:1px solid var(--ink)}
.steps div{padding:28px 32px 0 0}
.steps em{font:normal 400 13px var(--fb);color:var(--ink-3)}
.steps h3{margin-top:28px;font-size:22px}
.steps p{margin-top:10px;color:var(--ink-2);font-size:15px;max-width:300px}
@media(max-width:900px){.steps{grid-template-columns:1fr}.steps div{padding:28px 0;border-bottom:1px solid var(--line)}}

/* plans */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px}
.plan{border:1px solid var(--line);padding:36px;display:flex;flex-direction:column}
.plan .eyebrow{color:var(--ink-3);font-size:10.5px}
.plan h3{margin-top:14px}
.plan .p{margin-top:28px;font:300 52px/1 var(--fd);letter-spacing:-.035em}
.plan .p small{font:400 14px var(--fb);color:var(--ink-2);letter-spacing:0;margin-left:6px}
.plan ul{list-style:none;margin:28px 0 36px;display:grid;gap:12px;font-size:15px;color:var(--ink-2)}
.plan li{display:grid;grid-template-columns:18px 1fr;gap:8px}
.plan li::before{content:"";width:12px;height:1px;background:var(--ink);margin-top:.8em}
.plan .btn{margin-top:auto;align-self:flex-start}
.plan.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.plan.dark .eyebrow,.plan.dark ul,.plan.dark .p small{color:rgba(255,255,255,.66)}
.plan.dark li::before{background:#fff}
.guar{margin-top:24px;font-size:14px;color:var(--ink-2)}
@media(max-width:900px){.plans{grid-template-columns:1fr}.plan{padding:28px}}

/* faq */
.faqgrid{display:grid;grid-template-columns:1fr 1.4fr;gap:64px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 36px 22px 0;font:400 18px/1.4 var(--fd);letter-spacing:-.01em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:30px;width:9px;height:9px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:34px}
.faq p{padding:0 36px 24px 0;color:var(--ink-2);font-size:15.5px}
@media(max-width:900px){.faqgrid{grid-template-columns:1fr;gap:32px}}

/* final */
.final{padding:0 0 24px}
.band{position:relative;background:#3a3122 url(../img/lauma-2400.webp) center 45%/cover;color:#fff;padding:240px 56px}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,20,12,.86) 0%,rgba(24,20,12,.62) 50%,rgba(24,20,12,.12) 80%)}
.band>*{position:relative}
.band h2{max-width:640px}
.band h2 .dim{color:rgba(255,255,255,.62)}
.band .row{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
@media(max-width:640px){.band{padding:72px 20px}}

footer{padding:72px 0 40px;font-size:14px;color:var(--ink-2)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot h4{font:500 12px var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.foot ul{list-style:none;display:grid;gap:10px}
.foot a:hover{color:var(--ink)}
.legal{margin-top:64px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--ink-3)}
@media(max-width:800px){.foot{grid-template-columns:1fr 1fr}}

/* ---------- alasivut ---------- */
.nav ul a.on{opacity:1;font-weight:500}
.phero{padding:24px 0 0}
.pbox{position:relative;overflow:hidden;background:#343738 url(../img/norppa-2400.webp) right center/auto 100% no-repeat;color:#fff;padding:96px 56px 80px;min-height:620px;display:flex;flex-direction:column;justify-content:flex-end}
.pbox::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#343738 0%,#343738 44%,rgba(52,55,56,.55) 52%,rgba(52,55,56,0) 64%)}
.phero .pbox h1{max-width:560px}.phero .pbox .lead{max-width:520px}
.pbox>*{position:relative}
.pbox .dim{color:rgba(255,255,255,.62)}
.pbox .lead{color:rgba(255,255,255,.88)}
.pbox .eyebrow,.pbox .crumbs,.pbox .meta{color:rgba(255,255,255,.7)}
.pbox .crumbs a:hover{color:#fff}
@media(max-width:640px){.pbox{padding:56px 20px 40px;min-height:0}}
@media(max-width:900px){.pbox{background-size:cover;background-position:52% 50%}.pbox::before{background:linear-gradient(180deg,rgba(52,55,56,.8),rgba(52,55,56,.45))}.pbox .credit{position:static;margin-top:24px;text-align:left;max-width:none}}
.phero h1{max-width:900px;margin-top:20px}
.phero .lead{margin-top:24px;max-width:640px}
.meta{margin-top:28px;font-size:13px;color:var(--ink-3)}
.crumbs{font-size:13px;color:var(--ink-3)}.crumbs a:hover{color:var(--ink)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px}
.duo>div{background:var(--paper);padding:36px}
.duo h3{font-size:22px}
.duo ul{list-style:none;margin-top:20px;display:grid;gap:12px;color:var(--ink-2);font-size:15.5px}
.duo li{display:grid;grid-template-columns:18px 1fr;gap:8px}
.duo li::before{content:"";width:12px;height:1px;background:var(--ink);margin-top:.8em}
.duo .us{background:var(--ink);color:#fff}.duo .us ul{color:rgba(255,255,255,.72)}.duo .us li::before{background:#fff}
@media(max-width:900px){.duo{grid-template-columns:1fr}.duo>div{padding:28px}}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px}
.prices>div{border:1px solid var(--line);padding:36px}
.prices .p{font:300 56px/1 var(--fd);letter-spacing:-.035em;margin-top:20px}
.prices .p small{font:400 14px var(--fb);color:var(--ink-2);letter-spacing:0;margin-left:6px}
.prices p.s{margin-top:16px;color:var(--ink-2);font-size:15px}
@media(max-width:900px){.prices{grid-template-columns:1fr}.prices>div{padding:28px}}
.side{width:100%;border-collapse:collapse;margin-top:56px;font-size:15.5px}
.side th{font:500 11.5px var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:0 16px 14px 0;border-bottom:1px solid var(--ink)}
.side td{padding:18px 16px 18px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.side td:first-child{color:var(--ink);width:28%}
.side td:last-child{color:var(--ink)}
.side-wrap{overflow-x:auto}
@media(max-width:640px){.side{font-size:14px}.side td:first-child{width:auto}}
.quote{margin-top:40px;border-left:2px solid var(--ink);padding:4px 0 4px 24px;font:300 22px/1.45 var(--fd);letter-spacing:-.01em;max-width:820px}
.quote cite{display:block;margin-top:12px;font:400 13px var(--fb);color:var(--ink-3);font-style:normal}
.prose{max-width:720px;margin-top:28px;color:var(--ink-2);font-size:16.5px;display:grid;gap:16px}
.src{margin-top:28px;font-size:13px;color:var(--ink-3)}
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.hub a{background:var(--paper);padding:32px;display:flex;flex-direction:column;min-height:280px;transition:background .25s}
.hub a:hover{background:var(--paper-2)}
.hub h3{margin-top:16px}
.hub p{margin-top:12px;color:var(--ink-2);font-size:15px}
.hub .tlink{margin-top:auto;padding-top:32px;border:0;font-size:14px}
@media(max-width:900px){.hub{grid-template-columns:1fr}.hub a{min-height:0}}

/* taulukot puhelimessa: rivi = kortti, sarakkeen nimi arvon yläpuolelle */
@media(max-width:640px){
  .side thead{display:none}
  .side,.side tbody,.side tr,.side td{display:block;width:auto}
  .side tr{padding:18px 0;border-bottom:1px solid var(--line)}
  .side td{border:0;padding:3px 0}
  .side td:first-child{width:auto;font-weight:500;color:var(--ink);font-size:16px;padding-bottom:6px}
  .side td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;font:500 10.5px var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
  .side-wrap{overflow:visible}
}

/* ostolinkki hintakortissa */
.plan .buy{margin-top:16px;font-size:14px;text-decoration:underline;text-underline-offset:3px;opacity:.85;align-self:flex-start}
.plan .buy:hover{opacity:1}

/* lataussivu */
.dl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.dl>div{border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;position:relative;background:var(--page)}
.dl>div.yours{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.dl .yours-tag{display:none;position:absolute;top:-11px;left:24px;background:var(--ink);color:#fff;font:500 11px var(--fb);letter-spacing:.08em;text-transform:uppercase;padding:4px 10px}
.dl>div.yours .yours-tag{display:block}
.dl h3{margin-top:4px}
.dl p.req{margin-top:10px;color:var(--ink-2);font-size:15px}
.dl .btn{margin-top:28px;align-self:flex-start}
.dl .alt{margin-top:14px;font-size:14px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.paid{display:none;margin-top:20px;font-weight:500;color:#fff}
.capture{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.capture form{display:flex;gap:10px;flex-wrap:wrap}
.capture input{flex:1;min-width:220px;height:46px;border:1px solid var(--line);border-radius:999px;padding:0 20px;font:400 15px var(--fb);background:#fff}
.capture button{height:46px;padding:0 22px;border-radius:999px;border:0;background:var(--ink);color:#fff;font:500 14.5px var(--fb);cursor:pointer}
.capture .msg{display:none;margin-top:12px;font-size:14px;color:var(--ink-2)}
.capture .free{margin-top:12px;font-size:13px;color:var(--ink-3)}
@media(max-width:900px){.dl{grid-template-columns:1fr}.capture{grid-template-columns:1fr;gap:28px}}

/* heron kuvan tekijät (CC BY 4.0 vaatii maininnan) */
.stage .credit,.pbox .credit{position:absolute;right:16px;bottom:12px;z-index:2;margin:0;font-size:11px;line-height:1.4;color:rgba(255,255,255,.62);max-width:60%;text-align:right}
.stage .credit a,.pbox .credit a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:900px){.stage{background-size:cover;background-position:52% 50%}.stage::before{background:linear-gradient(180deg,rgba(52,55,56,.75),rgba(52,55,56,.35))}.stage .credit{position:static;margin-top:28px;text-align:left;max-width:none}}

/* vertailusivut: karhu ruskametsässä (Unsplash, vapaa lisenssi) */
.pbox.pbox-wolf{background:#4e4f47 url(../img/karhu-2400.webp) right center/auto 100% no-repeat}
.pbox.pbox-wolf::before{background:linear-gradient(90deg,#4e4f47 0%,#4e4f47 44%,rgba(78,79,71,.55) 52%,rgba(78,79,71,0) 64%)}
@media(max-width:900px){.pbox.pbox-wolf{background-size:cover;background-position:62% 50%}.pbox.pbox-wolf::before{background:linear-gradient(180deg,rgba(40,46,38,.8),rgba(40,46,38,.45))}}
/* hintaosio: kettu ruskametsässä (Unsplash, vapaa lisenssi) */
.band-photo{height:360px;margin-top:56px;background:#5a3a26 url(../img/kettu-1600.webp) 50% 50%/cover no-repeat}
@media(max-width:700px){.band-photo{height:220px;margin-top:40px}}

/* hintaosio: yksi tuote, Desktop-kortin tekstit kettukuvan päällä kuten norppa-herossa */
.plans.one{grid-template-columns:1fr;gap:0}
.plans.one .plan.dark{position:relative;overflow:hidden;min-height:720px;padding:56px;justify-content:center;border:0;
  background:#2b2117 url(../img/kettu-wide-2400.webp) right center/auto 100% no-repeat}
.plans.one .plan.dark::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#2b2117 0%,#2b2117 26%,rgba(43,33,23,.6) 40%,rgba(43,33,23,0) 56%)}
.plans.one .plan.dark>*{position:relative;max-width:440px}
.plans.one .plan.dark .btn{margin-top:0}.plans.one .plan.dark .buy{margin-top:16px}
.plans.one .plan.dark ul{margin-bottom:32px}
@media(max-width:900px){.plans.one .plan.dark{min-height:0;padding:32px;background-size:cover;background-position:70% 50%}
  .plans.one .plan.dark::before{background:linear-gradient(180deg,rgba(43,33,23,.82),rgba(43,33,23,.6))}}
.dl.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.dl.two{grid-template-columns:1fr}}

/* 14.10.2026 pitkä otsikko (kaupparekisteristä) mahtuu 360-420 px leveyteen */
@media (max-width:420px){.stage-copy h1{font-size:31px;overflow-wrap:break-word}}

/* 14.10.2026 vaiheet: otsikot ja tekstit samalle linjalle kaikissa sarakkeissa (vaihe 03 otsikko kahdella rivillä) */
@media (min-width:901px){
.steps{grid-template-rows:auto auto auto;column-gap:32px}
.steps div{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;padding-right:0}
.steps h3{align-self:start}
}
.steps p{max-width:none;text-wrap:pretty}

/* 14.10.2026 Jesse: "kuvat rajattuna, isommaksi" -> kuvalohkot reunasta reunaan (1920 px näytöllä kuva oli 1116 px laatikossa).
   Teksti pysyy sivun sisältölinjassa (sama vasen reuna kuin logolla). */
@media (min-width:901px){
  .stage,.pbox,.band,.plans.one .plan.dark{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .stage-copy{left:max(56px,calc(50vw - var(--wrap)/2 + 32px))}
  .pbox,.band,.plans.one .plan.dark{padding-left:max(56px,calc(50vw - var(--wrap)/2 + 32px));padding-right:max(56px,calc(50vw - var(--wrap)/2 + 32px))}
  .stage .credit,.pbox .credit{right:24px}
  .band{min-height:min(56.25vw,960px);display:flex;flex-direction:column;justify-content:center;padding-top:96px;padding-bottom:96px}
  .hero{padding-top:0}
}
/* kuvan vasen reuna liukuu taustaväriin (ei terävää saumaa kun lohko on täysleveä) */
.stage{--img:url(../img/norppa-2400.webp);--ar:1.493;--bgc:#343738}
.pbox{--img:url(../img/norppa-2400.webp);--ar:1.493;--bgc:#343738}
.pbox.pbox-wolf{--img:url(../img/karhu-2400.webp);--ar:1.5;--bgc:#4e4f47}
.plans.one .plan.dark{--img:url(../img/kettu-wide-2400.webp);--ar:1.5;--bgc:#2b2117}
@media (min-width:901px){
  .stage,.pbox,.plans.one .plan.dark{background-image:none!important;background-color:var(--bgc)!important}
  .stage::after,.pbox::after,.plans.one .plan.dark::after{content:"";position:absolute;top:0;bottom:0;right:0;aspect-ratio:var(--ar);z-index:0;
    background:var(--img) center/cover no-repeat;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
  .stage::before,.pbox::before,.plans.one .plan.dark::before{z-index:1}
  .pbox>*,.plans.one .plan.dark>*{z-index:2}
}
/* hero-korkeus seuraa leveyttä, jotta norppa pysyy tekstin oikealla puolella myös 900-1400 px näytöillä */
@media (min-width:901px){.stage{height:clamp(560px,46vw,740px)}}
/* etusivun lukukortti: luvut rivittyvät puhelimessa eivätkä valu kortin yli */
@media (max-width:640px){.photo .in{flex-wrap:wrap;gap:20px 28px}.photo b{font-size:28px}}
/* täysleveät kuvalohkot kiinni edelliseen osioon, valikkoon ja alatunnisteeseen (ei 24 px valkoista rakoa) */
@media (min-width:901px){.final{padding:0!important}.phero{padding-top:0}}
/* 14.10.2026 Jesse: "poista beige väri kokonaan taustalta, erottele asiat viivalla" */
.flow{background:#fff}
/* osioiden välinen viiva sisällön levyinen (sama linja kuin logo ja teksti), ei reunasta reunaan */
main>section+section{position:relative}
main>section+section::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(calc(100% - 64px),calc(var(--wrap) - 64px));border-top:1px solid var(--line)}
@media(max-width:640px){main>section+section::before{width:calc(100% - 32px)}}
/* "Mitä Atlas tekee" alkoi viivaa vasten (padding-top:0) */
main>section#product{padding-top:104px!important}
@media(max-width:700px){main>section#product{padding-top:64px!important}}
.card,.card:hover,.hub a,.hub a:hover,.duo>div{background:#fff}
/* ei kehyksiä korteille: osioiden välinen viiva riittää (Jesse: "liikaa viivoja") */
.card,.hub a,.duo>div{border:0}
.card,.hub a{padding-left:0;padding-right:0}
.card .mini{box-shadow:none;border:1px solid var(--line)}
.steps{border-top:0}
.hub a:hover h3,.card:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* 14.10.2026 Jesse: "Mitä Atlas tekee" -osion taustalle syksyinen karhukuva */
main>section#product{position:relative;background:#2a2620 url(../img/karhu-2400.webp) center 40%/cover no-repeat;color:#fff;border:0}
main>section#product::before{content:"";position:absolute;inset:0;left:0;width:auto;transform:none;border:0;
  background:linear-gradient(180deg,rgba(24,20,14,.78) 0%,rgba(24,20,14,.55) 45%,rgba(24,20,14,.35) 100%)}
main>section#product>.wrap{position:relative;z-index:1}
#product .eyebrow,#product h2,#product .lead{color:#fff}
#product .lead{color:rgba(255,255,255,.88)}
#product h2 .dim{color:rgba(255,255,255,.62)}
#product .card{background:#fff;color:var(--ink);padding:20px 20px 28px;border-radius:2px}
#product .card .eyebrow{color:var(--ink-3)}
#product .card h3{color:var(--ink)}
main>section#product+section::before{display:none}
@media(min-width:901px){main>section#product{padding-bottom:120px}}
/* karhu näkyviin: kuva osion alareunaan koko leveydelle, kortit sen yläpuolella tummalla ruskalla (ei venytystä puhelimessa) */
main>section#product{background:#2b241b url(../img/karhu-2400.webp) center bottom/100% auto no-repeat;padding-bottom:calc(36vw + 40px)}
main>section#product::before{background:linear-gradient(180deg,#2b241b 0%,#2b241b calc(100% - 66.7vw),rgba(43,36,27,.35) calc(100% - 40vw),rgba(43,36,27,0) 100%)}
@media(min-width:901px){main>section#product{padding-bottom:calc(36vw + 40px)}}