/* fonts: self-hosted (no requests to Google), latin + latin-ext subsets */
@font-face{font-family: 'Archivo';font-style: normal;font-weight: 500 800;font-stretch: 112% 125%;font-display: swap;src: url(../fonts/archivo-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Archivo';font-style: normal;font-weight: 500 800;font-stretch: 112% 125%;font-display: swap;src: url(../fonts/archivo-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'Inter';font-style: normal;font-weight: 400;font-display: swap;src: url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Inter';font-style: normal;font-weight: 400;font-display: swap;src: url(../fonts/inter-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'Inter';font-style: normal;font-weight: 500;font-display: swap;src: url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Inter';font-style: normal;font-weight: 500;font-display: swap;src: url(../fonts/inter-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'Inter';font-style: normal;font-weight: 600;font-display: swap;src: url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Inter';font-style: normal;font-weight: 600;font-display: swap;src: url(../fonts/inter-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'IBM Plex Sans';font-style: normal;font-weight: 400;font-stretch: 100%;font-display: swap;src: url(../fonts/ibm-plex-sans-ai.woff2) format('woff2');unicode-range: U+41, U+49;}
@font-face{font-family: 'IBM Plex Sans';font-style: normal;font-weight: 600;font-stretch: 100%;font-display: swap;src: url(../fonts/ibm-plex-sans-ai.woff2) format('woff2');unicode-range: U+41, U+49;}
@font-face{font-family: 'IBM Plex Sans';font-style: normal;font-weight: 700;font-stretch: 100%;font-display: swap;src: url(../fonts/ibm-plex-sans-ai.woff2) format('woff2');unicode-range: U+41, U+49;}
:root{
  --bg:#0D1517; --bg2:#101A1D; --s1:#19272B; --s2:#1B282C; --s3:#203034; --line:#38464A;
  --g:#1FCB4F; --g2:#5CEB86; --mint:#2EE6A6; --o:#F04937;
  --tx:#F5F7F7; --mu:#9FB0B3; --mu2:#6F8286;
  --disp:"Archivo", "Inter", system-ui, sans-serif;
  --body:"Inter", system-ui, -apple-system, sans-serif;
  --wrap:1200px; --gut:clamp(16px,4vw,40px);
  --ch:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"cv08" 1}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-family:var(--disp);font-stretch:118%;font-weight:700;letter-spacing:-.02em;line-height:1.04}
h2{font-size:clamp(32px,4.4vw,60px);max-width:16ch}
h3{font-size:21px;letter-spacing:-.01em;line-height:1.2}
p{color:var(--mu)}
.ai{font-family:"IBM Plex Sans",var(--body);font-stretch:100%;letter-spacing:.01em}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--g)}
.eyebrow::before{content:"";width:11px;height:11px;background:currentColor;clip-path:polygon(16% 14%,47% 4%,82% 10%,95% 35%,100% 69%,91% 80%,54% 100%,14% 83%,0 72%,2% 28%)}
.lead{font-size:clamp(17px,1.45vw,20px);line-height:1.6;max-width:56ch;margin-top:22px}
.lead.hy b{color:#fff;font-weight:700}
section{position:relative}
.sec{padding:clamp(96px,12vw,168px) 0}

/* button: one identical CTA everywhere */
.btn{--c:10px;display:inline-flex;align-items:center;gap:12px;background:var(--g);color:#04170A;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:16px;letter-spacing:.01em;text-decoration:none;padding:17px 26px 17px 28px;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));transition:background .25s,transform .25s;position:relative;white-space:nowrap}
.btn svg{width:18px;height:18px;transition:transform .25s}
.btn:hover{background:var(--g2)}
.btn:hover svg{transform:translateX(4px)}
.btn:focus-visible{outline:2px solid var(--tx);outline-offset:4px}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(13,21,23,.82);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-color:rgba(56,70,74,.6)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.nav-logo img{height:32px;width:auto}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a:not(.btn){font-size:14px;font-weight:500;color:var(--mu);text-decoration:none;transition:color .2s}
.nav-links a:not(.btn):hover{color:var(--tx)}
.nav-links .btn{font-size:14px;padding:10px 16px 10px 18px;gap:8px;min-height:44px}
.nav-links .btn svg{width:16px;height:16px}
.nav-links .nav-login{display:inline-flex;align-items:center;gap:7px;color:var(--tx)}
.nav-links .nav-login svg{width:15px;height:15px;color:var(--g)}

/* hero */
.hero{min-height:100svh;display:flex;align-items:center;padding:120px 0 72px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(900px 640px at 74% 46%,rgba(31,203,79,.16),transparent 62%),
  radial-gradient(700px 500px at 10% 100%,rgba(31,203,79,.07),transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(159,176,179,.16) 1px,transparent 1.2px);background-size:28px 28px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 60% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 60% 45%,#000 20%,transparent 75%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:24px;width:100%}
.hero h1{font-size:clamp(40px,3.6vw,56px);font-stretch:102%;margin-top:26px;line-height:1.02}
@media (min-width:1021px){.hero h1 span{white-space:nowrap}}
.hero h1 .g{color:var(--g)}
.hero h1 span{display:block}
.hero-cta{display:flex;align-items:center;gap:22px;margin-top:40px;flex-wrap:wrap}
.scarce{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mu)}
.scarce i{width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 0 0 rgba(31,203,79,.6);animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(31,203,79,.55)}70%,100%{box-shadow:0 0 0 10px rgba(31,203,79,0)}}
.hero-art{position:relative;aspect-ratio:1/1;width:100%;max-width:620px;justify-self:end;perspective:1200px}
.hero-art canvas{width:100%;height:100%;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
/* tablet landscape (iPad mini 1133x744): the art column is centred against the whole text column, which runs below the fold, so the icon sat low. Pin it to the top of the hero there. */
@media (min-width:1021px) and (max-width:1199px){.hero-art{align-self:start;margin-top:36px}}
.stats{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(24px,4vw,56px);margin-top:64px;padding-top:28px;border-top:1px solid rgba(56,70,74,.7);width:max-content;max-width:100%}
.stat b{display:block;font-family:var(--disp);font-stretch:118%;font-weight:700;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.02em;color:var(--tx);line-height:1}
.stat b em{font-style:normal;color:var(--g)}
.stat span{display:block;font-size:13px;color:var(--mu);margin-top:8px;max-width:17ch;line-height:1.4}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* chamfer card */
.card{--c:var(--ch);position:relative;background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 40%,rgba(255,255,255,.06));clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));padding:1px}
.card>.in{position:relative;height:100%;background:linear-gradient(170deg,rgba(32,48,52,.92),rgba(25,39,43,.92));clip-path:polygon(calc(var(--c) + .1px) 0,100% 0,100% calc(100% - var(--c) - .1px),calc(100% - var(--c) - .1px) 100%,0 100%,0 calc(var(--c) + .1px));padding:34px}

/* problem */
.prob-label{display:flex;align-items:center;gap:16px;margin-top:64px;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#E08A7E}
.prob-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(240,73,55,.45),rgba(56,70,74,.4) 40%,transparent)}
@media (max-width:640px){.prob-label{justify-content:center;text-align:center}.prob-label::before{content:"";flex:1;height:1px;background:linear-gradient(270deg,rgba(240,73,55,.45),rgba(56,70,74,.4) 40%,transparent)}}
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
.prob .tag{font-family:var(--disp);font-stretch:125%;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mu2)}
.prob h3{margin:10px 0 12px}
.prob p{font-size:15.5px;line-height:1.6}
.prob .pv{position:relative;height:172px;margin:-14px -14px 20px}
.prob .pv canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.prob.us .tag,.prob.cn .tag,.prob.own .tag{color:#C97A70}
.prob.ok{grid-column:1/-1}
.prob.ok>.in{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.prob.ok .pv{height:230px;margin:-10px 0 -10px -10px}
.prob.ok h3{font-size:30px}
.prob.ok p{font-size:16.5px;color:#C4D1D3;max-width:48ch}
.prob.ok{background:linear-gradient(160deg,rgba(31,203,79,.75),rgba(31,203,79,.15) 50%,rgba(31,203,79,.45))}
.prob.ok>.in{background:linear-gradient(170deg,rgba(24,52,38,.96),rgba(22,38,36,.96))}
.prob.ok .tag{color:var(--g)}


/* E: faktakortit */
.fx{position:relative;height:212px;margin:-6px 0 22px;padding:18px 20px 20px;border-radius:4px;background:linear-gradient(160deg,rgba(240,73,55,.10),rgba(240,73,55,.02) 60%);border:1px solid rgba(240,73,55,.22);display:flex;flex-direction:column;justify-content:space-between;gap:14px;overflow:hidden}
.fx-k{font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#E08A7E}
.fx-s{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:23px;line-height:1.15;letter-spacing:-.01em;color:var(--tx)}
.fx-s .cnt{white-space:nowrap;font-variant-numeric:tabular-nums}
.fx-s em{font-style:normal;color:#FF7A66}
.fx-n{white-space:nowrap;font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:clamp(30px,2.9vw,40px);line-height:1;letter-spacing:-.02em;color:#FF7A66;font-variant-numeric:tabular-nums}
.fx-sub{font-size:13.5px;color:var(--mu);line-height:1.45}
.fx-bar{height:2px;background:rgba(240,73,55,.18);position:relative}
.fx-bar::after{content:"";position:absolute;inset:0;background:var(--o);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .35s}
.card.in .fx-bar::after{transform:scaleX(1)}
.prob.ok .fx{height:auto;background:none;border:0;padding:0;margin:0;min-height:0;gap:0;justify-content:center}
.fx-rows{display:grid;gap:0;border-top:1px solid rgba(31,203,79,.25)}
.fx-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;padding:16px 4px;border-bottom:1px solid rgba(31,203,79,.25);opacity:0;transform:translateX(-10px);transition:opacity .6s,transform .6s}
.card.in .fx-row{opacity:1;transform:none}
.card.in .fx-row:nth-child(2){transition-delay:.18s}.card.in .fx-row:nth-child(3){transition-delay:.36s}.card.in .fx-row:nth-child(4){transition-delay:.54s}.card.in .fx-row:nth-child(5){transition-delay:.72s}
.fx-row span{font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu)}
.fx-row b{font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:26px;line-height:1;color:var(--tx)}
.fx-row i{width:26px;height:26px;border-radius:50%;background:rgba(31,203,79,.16);display:grid;place-items:center}
.fx-row i::before{content:"";width:9px;height:5px;border:2px solid var(--g);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
@media (max-width:1020px){.fx{height:auto;min-height:150px}}
@media (prefers-reduced-motion:reduce){.fx-bar::after{transition:none}.fx-row{transition:none}}


/* tradeoff */
.trade{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:start;margin-top:clamp(56px,7vw,88px);padding-top:clamp(40px,5vw,56px);border-top:1px solid rgba(56,70,74,.7)}
.trade h2{margin-top:22px;max-width:13ch}
.trade .tx p{font-size:17px;line-height:1.65;color:#C4D1D3;max-width:56ch}
.trade .tx p+p{margin-top:16px}
.trade blockquote{margin-top:28px;padding:4px 0 4px 22px;border-left:2px solid var(--g);font-family:var(--disp);font-stretch:112%;font-weight:600;font-size:clamp(20px,1.8vw,24px);line-height:1.35;color:var(--tx);max-width:34ch}
@media (max-width:1020px){.trade{grid-template-columns:1fr;gap:8px}}


/* router activation */
.lbl.rbtn{z-index:5;pointer-events:auto;cursor:pointer;appearance:none;background:none;border:0;padding:6px 10px;font:inherit;color:inherit;text-align:center}
.rbtn b sup{font-size:.6em;margin-left:1px;vertical-align:super;line-height:0}
.rbtn .act{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-family:var(--disp);font-stretch:125%;font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--g);text-shadow:0 0 12px rgba(31,203,79,.9),0 0 26px rgba(31,203,79,.55);animation:actGlow 1.6s ease-in-out infinite}
.rbtn .arr{font-style:normal;font-size:15px;letter-spacing:0;display:inline-block;animation:actNudge 1.6s ease-in-out infinite}
.rbtn.vert .arr{--nx:-4px;--ny:0}
.rbtn{--nx:0;--ny:-4px}
.rbtn[aria-pressed=true] .act{display:none}
.rbtn:focus-visible{outline:2px solid var(--g);outline-offset:4px;border-radius:6px}
@keyframes actGlow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes actNudge{0%,100%{transform:translate(0,0)}50%{transform:translate(var(--nx),var(--ny))}}
@media (prefers-reduced-motion:reduce){.rbtn .act,.rbtn .arr{animation:none;opacity:1}}


/* savings counter (replaces the two-bar ledger) */
.ledger.sv2{display:flex;align-items:center;gap:clamp(20px,4vw,56px);grid-template-columns:none}
.sv2 .svl span{display:block;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu2)}
.sv2 .svl b{display:block;margin-top:6px;font-family:var(--disp);font-stretch:118%;font-weight:800;font-size:clamp(44px,5vw,64px);line-height:1;font-variant-numeric:tabular-nums;color:var(--mu2);transition:color .5s,text-shadow .5s;white-space:nowrap}
.sv2.on .svl b{color:var(--g);text-shadow:0 0 30px rgba(31,203,79,.35)}
.sv2 .svh{margin:0;font-size:16px;line-height:1.5;color:var(--mu);max-width:44ch}
.sv2 .svh strong{color:var(--tx);font-weight:600}
@media (max-width:640px){.ledger.sv2{flex-direction:column;align-items:flex-start;gap:10px}}


/* tiers: rows line up across the three cards (sla on one line, .for equal height) */
.prod .sla{white-space:nowrap}


/* problem cards: title + text first, the problem box at the bottom, aligned across cards */
.prob:not(.ok)>.in{display:flex;flex-direction:column}
.prob:not(.ok) .fx{margin:26px 0 0;margin-top:auto}
.prob:not(.ok) p{margin-bottom:26px}

/* fourth option: name and text first, then the checklist; "Ei" answers in the problem-card red */
.prob.ok .okc{order:-1}
.fx-row b.ei{color:#FF7A66}

/* install: on wide screens the code column is exactly as tall as the copy beside it and fades out at the bottom */
@media (min-width:1021px){
  .inst{align-items:stretch}
  .inst-copy{align-self:start}
  .inst>.codes{height:0;min-height:100%;overflow:hidden;align-content:start;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 140px),transparent);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 140px),transparent)}
}

/* solution / router */
.sol-head{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-top:1px solid rgba(56,70,74,.7)}
.step{padding:22px 24px 0 0}
.step b{font-family:var(--disp);font-stretch:125%;font-size:12px;letter-spacing:.16em;color:var(--g);font-weight:600}
.step h3{font-size:18px;margin:8px 0 6px}
.step p{font-size:15px;line-height:1.55}
.stage-card{margin-top:40px;--c:18px}
.card.stage-card>.in{padding:0;background:linear-gradient(180deg,rgba(16,26,29,.96),rgba(13,21,23,.98))}
.stage-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px 0;flex-wrap:wrap}
.seg{position:relative;display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));height:44px;padding:3px;border-radius:999px;background:#19272B;box-shadow:inset 0 0 0 1px #38464A}
.seg button{position:relative;z-index:1;appearance:none;border:0;background:none;color:var(--mu);font-family:var(--disp);font-stretch:112%;font-weight:600;font-size:14px;letter-spacing:.005em;padding:0 24px;border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;white-space:nowrap;transition:color .35s}
.seg button i{display:none}
.seg button:hover{color:var(--tx)}
.seg button[aria-pressed=true]{color:#0D1517}
.seg .thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--g);box-shadow:0 6px 22px rgba(31,203,79,.32);transition:transform .4s cubic-bezier(.34,1.45,.64,1),background .4s,box-shadow .4s}
.seg[data-mode=aiv] .thumb{transform:translateX(100%)}
.seg[data-mode=norm] .thumb{background:var(--o);box-shadow:0 6px 22px rgba(240,73,55,.32)}
.seg button[aria-pressed=true] .ai{color:#0D1517}
.stage{position:relative;width:100%;height:500px}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.lbl{position:absolute;transform:translate(-50%,-50%);font-size:13px;color:var(--mu);white-space:nowrap;pointer-events:none;transition:opacity .4s,color .4s;line-height:1.3}
.lbl b{display:block;font-family:var(--disp);font-stretch:112%;font-weight:600;color:var(--tx);font-size:14px}
.lbl.l{transform:translate(0,-50%)}
.lbl.r{transform:translate(-100%,-50%);text-align:right}
/* Keskitetty etiketti (mobiilissa Kevyt/Keski/Iso ikonin alla): nimi ja % ikonin keskelle (Janne 8.10.2026) */
.lbl:not(.l):not(.r){text-align:center}
.lbl.num b{font-variant-numeric:tabular-nums}
.lbl .sh{font-variant-numeric:tabular-nums}
.ledger{display:grid;grid-template-columns:1fr auto;gap:10px 40px;align-items:center;padding:22px 26px 26px;border-top:1px solid rgba(56,70,74,.6)}
.lrows{display:grid;gap:12px}
.lrow{display:grid;grid-template-columns:150px 1fr 76px;align-items:center;gap:16px;font-size:14px}
.lrow .nm{display:flex;align-items:center;gap:9px;color:var(--mu)}
.lrow .nm i{width:8px;height:8px;border-radius:50%}
.lrow.norm .nm i{background:var(--o)}
.lrow.aiv .nm i{background:var(--g)}
.ltrack{position:relative;height:10px;background:rgba(255,255,255,.05);border-radius:2px;--gl:0;--f:0}
.ltrack::after{content:"";position:absolute;top:-7px;bottom:-7px;left:0;width:24px;margin-left:-14px;transform:translateX(calc(var(--f) * var(--tw,600px)));border-radius:50%;opacity:var(--gl);pointer-events:none}
.norm .ltrack::after{background:radial-gradient(closest-side,rgba(255,170,150,.95),rgba(240,73,55,.5) 45%,transparent)}
.aiv .ltrack::after{background:radial-gradient(closest-side,rgba(200,255,215,.95),rgba(31,203,79,.5) 45%,transparent)}
.lrow{transition:opacity .5s}
.lrow.dim{opacity:.42}
.lfill{height:100%;width:100%;transform-origin:left;transform:scaleX(0);border-radius:2px}
.norm .lfill{background:linear-gradient(90deg,rgba(240,73,55,.55),var(--o))}
.aiv .lfill{background:linear-gradient(90deg,rgba(31,203,79,.55),var(--g))}
.lval{font-family:var(--disp);font-stretch:112%;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;color:var(--tx)}
.lsave{text-align:right;border-left:1px solid rgba(56,70,74,.6);padding-left:36px}
.lsave span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu2);font-family:var(--disp);font-stretch:125%;font-weight:600}
.lsave b{display:block;font-family:var(--disp);font-stretch:118%;font-weight:800;font-size:44px;line-height:1;color:var(--g);font-variant-numeric:tabular-nums;margin-top:6px;transition:text-shadow .4s}
.lsave em{display:block;font-style:normal;font-size:13px;color:var(--mu);margin-top:6px;font-variant-numeric:tabular-nums}

/* savings */
.save-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:center}
.big{font-family:var(--disp);font-stretch:125%;font-weight:800;font-size:clamp(96px,14vw,200px);line-height:.86;letter-spacing:-.04em;color:var(--g);background:repeating-linear-gradient(-21deg,#1FCB4F 0 8px,rgba(31,203,79,.45) 8px 10px);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.big small{font-size:.42em;letter-spacing:-.02em}
.big{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:clamp(84px,11vw,180px)}
.big-cap{font-size:18px;color:var(--tx);margin-top:18px;max-width:24ch;line-height:1.45}
.calc>.in{padding:36px}
.calc h3{font-size:16px;font-stretch:112%;color:var(--mu);font-weight:600;letter-spacing:0}
.calc h3 b{color:var(--tx);font-weight:700}
.cbar{margin-top:28px}
.cbar .row{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--mu);margin-bottom:10px}
.cbar .row b{font-family:var(--disp);font-stretch:118%;font-size:26px;color:var(--tx);font-variant-numeric:tabular-nums}
.cbar .tr{height:16px;background:rgba(255,255,255,.05);overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.cbar .fl{height:100%;transform-origin:left;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.cbar.o .fl{background:repeating-linear-gradient(-68deg,var(--o) 0 9px,rgba(240,73,55,.72) 9px 13px)}
.cbar.g .fl{background:repeating-linear-gradient(-68deg,var(--g) 0 9px,rgba(31,203,79,.72) 9px 13px)}
.calc.in-view .cbar.o .fl{transform:scaleX(1)}
.calc.in-view .cbar.g .fl{transform:scaleX(.8193021203435165);transition-delay:.35s}
.mix{display:grid;grid-template-columns:147fr 2391fr 1999fr;gap:3px;margin-top:30px;height:6px}
.mix i{background:var(--g)}
.mix i:nth-child(2){opacity:.65}.mix i:nth-child(3){opacity:.35}
.mixl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin-top:10px;font-size:12.5px;color:var(--mu2);line-height:1.35}
.fine{font-size:13px;color:var(--mu2);margin-top:26px;line-height:1.55;max-width:60ch}
.meter{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:72px}
.meter div{border-top:1px solid rgba(56,70,74,.8);padding-top:18px}
.meter b{font-family:var(--disp);font-stretch:118%;font-size:17px;display:block;margin-bottom:6px}
.meter p{font-size:15px}

/* products */
.prod-grid{display:grid;grid-template-columns:1fr 1.08fr 1fr;gap:20px;margin-top:64px;align-items:stretch}
.prod>.in{display:flex;flex-direction:column;padding:38px 34px 34px}
.prod .ptop{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.prod .glyph{width:52px;height:52px}
.prod .tier{font-family:var(--disp);font-stretch:125%;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mu2)}
.prod h3{font-size:40px;font-stretch:120%;margin:14px 0 10px;letter-spacing:-.02em;line-height:1}
.prod h3 small{display:block;font-size:15px;font-stretch:112%;font-weight:600;color:var(--mu);letter-spacing:0;margin-bottom:4px}
.prod .for{font-size:15px;color:var(--mu);min-height:3.2em}
.prod ul{list-style:none;margin:26px 0 34px;display:grid;gap:13px;font-size:15px;color:var(--tx)}
.prod li{display:grid;grid-template-columns:16px 1fr;gap:12px;align-items:baseline;line-height:1.45}
.prod li::before{content:"";width:9px;height:9px;transform:translateY(-1px);background:var(--g);clip-path:polygon(16% 14%,47% 4%,82% 10%,95% 35%,100% 69%,91% 80%,54% 100%,14% 83%,0 72%,2% 28%)}
.prod .btn{margin-top:auto;align-self:center}
.prod.hl{background:linear-gradient(160deg,var(--g),rgba(31,203,79,.25) 45%,rgba(46,230,166,.7));transform:translateY(-14px)}
.prod.hl>.in{background:radial-gradient(420px 260px at 50% 0%,rgba(31,203,79,.18),transparent 70%),linear-gradient(170deg,rgba(28,50,44,.97),rgba(22,37,38,.97))}
.prod .badge{position:absolute;z-index:3;top:0;right:30px;background:var(--g);color:#04170A;font-family:var(--disp);font-stretch:125%;font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px}

/* one stop */

/* moat */
.moat-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:64px}
.moat>.in{padding:40px}
.moat .k{font-family:var(--disp);font-stretch:125%;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#C97A70}
.moat h3{font-size:26px;margin:12px 0 14px}
.moat p{font-size:16px}
.who{margin-top:20px}
.who>.in{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;padding:36px 40px;background:linear-gradient(100deg,rgba(24,52,38,.95),rgba(25,39,43,.95))}
.who .k{color:var(--g)}
.who h3{font-size:24px;margin-top:10px}
.who p{font-size:16.5px;color:#C4D1D3}

/* close */
.close{padding:clamp(80px,9vw,130px) 0 clamp(110px,13vw,170px);overflow:hidden;isolation:isolate;text-align:center}
.close::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(760px 520px at 50% 40%,rgba(31,203,79,.17),transparent 65%)}
.close-art{position:absolute;left:50%;top:50%;width:min(1100px,150vw);aspect-ratio:1/1;transform:translate(-50%,-50%);opacity:.26;z-index:-1;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,rgba(0,0,0,.5) 25%,#000 55%,transparent);mask-image:radial-gradient(closest-side,rgba(0,0,0,.5) 25%,#000 55%,transparent)}
.close-art canvas{width:100%;height:100%;display:block}
.close .mark{width:180px;height:auto;margin:0 auto 40px}
.close h2{margin:22px auto 0;max-width:18ch;font-size:clamp(36px,5vw,68px)}
.close .lead{margin:24px auto 0}
.close .btn{margin-top:44px;font-size:18px;padding:21px 32px 21px 34px}
.contact{margin-top:28px;font-size:15px;color:var(--mu)}
.contact a{color:var(--tx);text-decoration:none;border-bottom:1px solid rgba(31,203,79,.5);padding-bottom:1px}
.contact a:hover{border-color:var(--g)}
.contact span{margin:0 12px;color:var(--line)}
footer{border-top:1px solid rgba(56,70,74,.6);padding:30px 0;font-size:13px;color:var(--mu2)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap}
footer img{height:18px;width:auto;opacity:.85}
.ft-co{display:flex;flex-wrap:wrap;gap:4px 18px;order:3;flex-basis:100%}
.ft-co b{color:var(--mu);font-weight:600}
.ft-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.ft-links a{color:var(--mu);text-decoration:none;transition:color .2s}
.ft-links a:hover{color:var(--tx)}

/* team */
.team{margin-top:64px;max-width:920px}
.team>.in{display:grid;grid-template-columns:220px 1fr;gap:44px;align-items:center;padding:34px}
.team .ph{--c:var(--ch);width:220px;aspect-ratio:44/47;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));background:var(--bg2)}
.team .ph img{width:100%;height:100%;object-fit:cover}
.team .k{font-family:var(--disp);font-stretch:125%;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g)}
.team h3{font-size:26px;margin:10px 0 14px}
.team p{font-size:16.5px;line-height:1.65;max-width:58ch}
.team p+p{margin-top:12px}
.team .contact{margin-top:20px;font-size:15px}
.team .contact span{margin:0 12px}

.divider{height:1px;max-width:var(--wrap);margin:0 auto;background:linear-gradient(90deg,transparent,rgba(56,70,74,.9) 20%,rgba(56,70,74,.9) 80%,transparent)}

@media (max-width:1020px){
  .nav-links a:not(.btn):not(.nav-login){display:none}
  .nav-links{gap:22px}
  .hero .wrap{grid-template-columns:1fr}
  .hero-art{position:absolute;right:-18%;top:70px;width:min(92vw,560px);opacity:.42;z-index:-1}
  .sol-head,.save-grid{grid-template-columns:1fr}
  .prob-grid,.prod-grid,.moat-grid,.meter{grid-template-columns:1fr}
  .prob.ok>.in{grid-template-columns:1fr;gap:0}
  .prob.ok .pv{height:190px;margin:-14px -14px 20px}
  .prob.ok .okc{margin-bottom:26px}
  .prod.hl{transform:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav .wrap{height:68px}
  .btn,.close .btn{font-size:15px;padding:13px 18px 13px 20px;gap:10px}
  .btn svg{width:16px;height:16px}
  .nav-logo img{height:26px}
  .hero{padding:96px 0 56px;min-height:auto}
  .hero-cta{flex-direction:column;align-items:center;gap:16px;text-align:center}
  .hero-art{right:auto;left:50%;transform:translateX(-50%);top:56px;width:118vw;opacity:.26}
  .close .eyebrow{display:inline-block;max-width:30ch}
  .close .eyebrow::before{display:inline-block;vertical-align:-1px;margin-right:10px}
  .stats{grid-template-columns:repeat(3,1fr);width:100%;gap:14px;margin-top:48px}
  .stat span{font-size:12px}
  .steps{grid-template-columns:1fr}
  .step{padding:18px 0 0}
  .stage-top{padding:18px 16px 0;justify-content:center}
  .seg{width:100%}
  .seg button{padding:11px 6px;font-size:13px;gap:7px}
  .stage{height:560px}
  .ledger{grid-template-columns:1fr;padding:18px 16px 20px}
  .lrow{grid-template-columns:128px 1fr 54px;gap:10px;font-size:13px}
  .lsave{border-left:0;padding-left:0;text-align:left;display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid rgba(56,70,74,.6);padding-top:14px}
  .lsave b{font-size:36px}
  .card>.in{padding:26px}
  .who>.in{grid-template-columns:1fr;gap:12px;padding:28px}
  .team>.in{grid-template-columns:1fr;gap:24px;padding:26px}
  .nav-links{gap:16px}
  .nav-links .nav-login{font-size:13.5px}
  .nav-links .nav-login svg{display:none}
  .nav-links .btn{padding:10px 14px 10px 16px}
  .team .ph{width:160px}
  .team .contact span{display:inline;height:auto;visibility:visible}
  footer .wrap{flex-direction:column;align-items:flex-start}
  .ft-co{flex-direction:column;gap:2px}
  .moat>.in{padding:28px}
  .contact span{display:block;height:6px;visibility:hidden}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .req .resp,.req .resp-bar{opacity:1;transform:none;transition:none}
  .scarce i{animation:none}
  .cbar .fl{transition:none}
}

/* ===== v4: solution stage ===== */
main{overflow-x:clip}
.sol-head{grid-template-columns:1.05fr .95fr;align-items:end}
.sol-side{display:flex;flex-direction:column;gap:30px;align-items:flex-start}
.seg{height:48px;padding:4px;background:rgba(25,39,43,.7);box-shadow:inset 0 0 0 1px rgba(56,70,74,.9),0 10px 40px rgba(0,0,0,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.seg button{font-size:14.5px;padding:0 26px}
.seg .thumb{top:4px;bottom:4px;left:4px;width:calc(50% - 4px)}
.stage-wrap{position:relative;margin-top:56px;isolation:isolate}
.stage-wrap::before{content:"";position:absolute;inset:-40px -6vw;z-index:-1;background:
  radial-gradient(60% 70% at 40% 45%,rgba(31,203,79,.07),transparent 70%),
  radial-gradient(rgba(159,176,179,.10) 1px,transparent 1.2px) 0 0/26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 75% at 50% 45%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse 70% 75% at 50% 45%,#000 30%,transparent 78%)}
.stage{height:clamp(420px,40vw,540px)}
.stage-wrap .ledger{border-top:1px solid rgba(56,70,74,.55);padding:26px 0 0;margin-top:8px}
.lbl b{font-size:14.5px}
.lbl .sh{font-size:12.5px;color:var(--mu2)}
.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:72px}
.lg{border-top:1px solid rgba(56,70,74,.8);padding-top:20px}
.lg b{font-family:var(--disp);font-stretch:125%;font-size:12px;letter-spacing:.16em;color:var(--g);font-weight:600}
.lg h3{font-size:19px;margin:10px 0 8px}
.lg p{font-size:15px;line-height:1.55}

/* ===== install ===== */
.inst{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,88px);align-items:center}
.api-pill{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:8px 14px 8px 12px;border-radius:999px;background:rgba(31,203,79,.1);box-shadow:inset 0 0 0 1px rgba(31,203,79,.45);font:600 13px/1 var(--disp);font-stretch:112%;color:#A6F5BD}
.api-pill i{width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 10px var(--g)}
.codes{display:grid;gap:18px}
.snip{border-radius:12px;background:linear-gradient(180deg,#0B1214,#0A1012);box-shadow:0 0 0 1px rgba(56,70,74,.8),0 30px 80px -30px rgba(0,0,0,.8),0 0 100px -50px rgba(31,203,79,.5);overflow:hidden}
.snip pre.wrap{white-space:pre-wrap;word-break:break-word}
.resp-bar{display:flex;gap:14px;align-items:center;padding:9px 18px;border-top:1px solid rgba(56,70,74,.6);border-bottom:1px solid rgba(56,70,74,.35);background:rgba(31,203,79,.06);font:500 12px/1 "SF Mono",ui-monospace,Menlo,monospace;color:var(--mu)}
.resp-bar .ok{color:#5CEB86}
.snip pre.resp{font-size:12.5px;line-height:1.7;color:#9FB0B3;white-space:pre-wrap;word-break:break-word}
.req .resp,.req .resp-bar{opacity:0;transform:translateY(6px);transition:opacity .7s ease,transform .7s ease}
.req.in .resp-bar{opacity:1;transform:none;transition-delay:.45s}
.req.in .resp{opacity:1;transform:none;transition-delay:.65s}
.codes-note{font-size:13px;color:var(--mu2);margin-top:-4px}
.codes-note code{font:500 12px "SF Mono",ui-monospace,Menlo,monospace;color:#A6F5BD}
section[id],main[id]{scroll-margin-top:100px}
.snip-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid rgba(56,70,74,.6);background:rgba(25,39,43,.6);font:500 12px/1 "SF Mono",ui-monospace,Menlo,monospace;color:var(--mu2)}
.snip-bar em{font-style:normal;color:var(--g)}
.snip pre{margin:0;padding:16px 0;font:400 13.5px/1.75 "SF Mono",ui-monospace,Menlo,Consolas,monospace;color:#C9D6D8;overflow-x:auto}
.snip pre{padding-left:18px;padding-right:18px}
.snip .k{color:#9FB0B3}.snip .s{color:#2EE6A6}
.snip .ln{display:inline-block;margin:0 -18px;padding:0 18px 0 15px;width:calc(100% + 36px);border-left:3px solid var(--g);background:linear-gradient(90deg,rgba(31,203,79,.16),rgba(31,203,79,.03))}
.inst-pts{list-style:none;margin-top:34px;display:grid;gap:16px;max-width:46ch}
.inst-pts li{position:relative;padding-left:28px;font-size:15.5px;color:var(--mu);line-height:1.5}
.inst-pts li::before{content:"";position:absolute;left:0;top:0;width:9px;height:9px;margin-top:7px;background:var(--g);clip-path:polygon(16% 14%,47% 4%,82% 10%,95% 35%,100% 69%,91% 80%,54% 100%,14% 83%,0 72%,2% 28%)}
.inst-pts b{color:var(--tx);font-weight:600}

/* ===== service bento ===== */
.hose{max-width:20ch}
.hose .g{color:var(--g)}
.bento{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:auto auto;gap:20px;margin-top:64px}
.tile>.in{padding:34px}
.tile .ti{display:grid;place-items:center;width:46px;height:46px;margin-bottom:22px;border-radius:12px;color:var(--g);background:linear-gradient(160deg,rgba(31,203,79,.16),rgba(31,203,79,.04));box-shadow:inset 0 0 0 1px rgba(31,203,79,.32),0 8px 24px rgba(31,203,79,.08)}
.tile .ti svg{width:22px;height:22px}
.tile h3{font-size:22px;margin-bottom:10px}
.tile p{font-size:15.5px}
.t-sla{grid-row:span 2}
.t-sla{background:linear-gradient(160deg,rgba(31,203,79,.7),rgba(31,203,79,.12) 50%,rgba(46,230,166,.45))}
.t-sla>.in{display:flex;flex-direction:column;background:radial-gradient(500px 300px at 20% 0%,rgba(31,203,79,.16),transparent 70%),linear-gradient(170deg,rgba(24,46,38,.97),rgba(20,34,35,.97))}
.tk{font-family:var(--disp);font-stretch:125%;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g)}
.sla-big{font-family:var(--disp);font-stretch:125%;font-weight:800;font-size:clamp(72px,8vw,112px);letter-spacing:-.04em;line-height:.9;margin-top:26px;color:var(--tx);font-variant-numeric:tabular-nums}
.sla-big small{font-size:.45em;color:var(--g);margin-left:4px}
.sla-cap{color:var(--tx);font-size:16px;margin:10px 0 18px}
.uptime{display:grid;grid-template-columns:repeat(60,1fr);gap:2px;height:34px;margin-top:auto;padding-top:30px;align-items:end}
.uptime i{display:block;height:100%;background:var(--g);opacity:.0;border-radius:1px;transform:scaleY(.2);transform-origin:bottom;transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.3,1.3)}
.uptime.in-view i{opacity:.75;transform:none}
.uptime i.w{background:#E8B93A}
.sla{display:flex;align-items:baseline;gap:10px;margin-top:22px;padding:14px 0;border-top:1px solid rgba(56,70,74,.7);border-bottom:1px solid rgba(56,70,74,.7)}
.sla b{font-family:var(--disp);font-stretch:118%;font-size:26px;color:var(--tx);font-variant-numeric:tabular-nums}
.sla span{font-size:13.5px;color:var(--mu)}
.prod ul{margin-top:22px}

/* ===== faq ===== */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,6vw,96px);align-items:start}
.faq-head{position:sticky;top:120px}
.faq{border-top:1px solid rgba(56,70,74,.8)}
.qa{border-bottom:1px solid rgba(56,70,74,.8)}
.q{appearance:none;background:none;border:0;width:100%;display:grid;grid-template-columns:1fr 22px;gap:24px;align-items:center;text-align:left;padding:26px 0;color:var(--tx);font-family:var(--disp);font-stretch:112%;font-weight:600;font-size:clamp(17px,1.5vw,20px);line-height:1.3;cursor:pointer;transition:color .25s}
.q:hover{color:#fff}
.q:focus-visible{outline:2px solid var(--g);outline-offset:4px}
.q i{position:relative;width:22px;height:22px}
.q i::before,.q i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.6px;background:var(--g);transform:translate(-50%,-50%);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.q i::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa.open .q i::after{transform:translate(-50%,-50%) rotate(0)}
.a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.a>div{overflow:hidden}
.a p{padding:0 40px 28px 0;font-size:16px;line-height:1.65;max-width:62ch;opacity:0;transform:translateY(-6px);transition:opacity .4s .05s,transform .4s .05s}
.qa.open .a{grid-template-rows:1fr}
.qa.open .a p{opacity:1;transform:none}

@media (max-width:1020px){
  .sol-head,.inst,.faq-wrap{grid-template-columns:1fr}
  .legend{grid-template-columns:1fr;gap:24px}
  .bento{grid-template-columns:1fr}
  .t-sla{grid-row:auto;grid-column:auto}
  .faq-head{position:static}
}
@media (max-width:640px){
  .seg{width:100%}
  .seg button{padding:0 8px;font-size:13px}
    .snip pre,.snip pre.resp{font-size:11px;padding-left:14px;padding-right:14px}
  .snip pre.wrap,.snip pre.resp{white-space:pre;word-break:normal}
  .snip .ln{margin:0 -14px;padding:0 14px 0 11px;width:calc(100% + 28px)}
    .stage-wrap .ledger{padding-top:0;border-top:0;margin-top:-40px}
  .stage{height:440px}
}
@media (prefers-reduced-motion:reduce){
  .uptime i{opacity:.75;transform:none;transition:none}
  .a,.a p{transition:none}
}

@media (max-width:380px){.nav-logo img{height:21px}.nav-links{gap:12px}}
/* Mobile eyebrow and hero body alignment */
@media (max-width:640px){
  body .hero .eyebrow,body .close .eyebrow{display:flex;width:100%;justify-content:center;text-align:center;margin-inline:auto}
  .hero .lead{text-align:center;margin-inline:auto}
  .hero h1{text-align:center}
}


/* ===== v2 ===== */
.hero h1{font-size:clamp(52px,6.2vw,96px);line-height:.98}
.hero .sub{font-size:clamp(18px,1.45vw,21px);max-width:46ch}
.hero .sub b{color:var(--tx);font-weight:600}
.nav-sep{width:1px;height:22px;background:rgba(56,70,74,.9);margin:0 -12px 0 -8px}
.nav-links .nav-login{--c:8px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 14px;font-size:14px;font-weight:500;color:var(--tx);text-decoration:none;background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px rgba(159,176,179,.32);clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));transition:box-shadow .2s,background .2s}
.nav-links .nav-login svg{width:16px;height:16px;color:var(--g);transition:transform .2s}
.nav-links .nav-login:hover{background:rgba(31,203,79,.08);box-shadow:inset 0 0 0 1px rgba(31,203,79,.6);--bc:rgba(31,203,79,.6)}
.nav-links .nav-login{position:relative;box-shadow:none!important;--bc:rgba(159,176,179,.5);border:1px solid var(--bc);transition:border-color .2s,background .2s}
.nav-links .nav-login::before,.nav-links .nav-login::after{content:"";position:absolute;width:var(--c);height:var(--c);pointer-events:none}
.nav-links .nav-login::before{top:-1px;left:-1px;background:linear-gradient(135deg,transparent 50%,var(--bc) 50%,var(--bc) calc(50% + 1.4px),transparent calc(50% + 1.4px))}
.nav-links .nav-login::after{bottom:-1px;right:-1px;background:linear-gradient(315deg,transparent 50%,var(--bc) 50%,var(--bc) calc(50% + 1.4px),transparent calc(50% + 1.4px))}
.nav-links .nav-login:hover{--bc:rgba(31,203,79,.8);background:rgba(31,203,79,.08)}
.nav-links .nav-login:hover svg{transform:translateY(-1px)}
.nav-links .nav-login:focus-visible{outline:2px solid var(--tx);outline-offset:3px}
.polku{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:72px}
.pk-line{position:absolute;left:32px;right:10%;top:31px;height:2px;background:linear-gradient(90deg,rgba(56,70,74,.9),rgba(31,203,79,.6) 22%,rgba(31,203,79,.6) 78%,rgba(56,70,74,.9));overflow:hidden}
.pk-line i{position:absolute;top:-3px;left:-10%;width:10%;height:8px;background:radial-gradient(closest-side,rgba(92,235,134,1),rgba(92,235,134,0));animation:flow 4.2s linear infinite}
@keyframes flow{to{left:100%}}
.kk{margin-top:64px}
.kk-k{font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu2)}
.kk-t{width:100%;table-layout:fixed;margin-top:18px;border-collapse:collapse;font-size:15.5px}
.kk-t th:first-child,.kk-t td:first-child{width:34%}
.kk-t th:not(:first-child),.kk-t td:not(:first-child){width:22%}
.kk-t th{text-align:left;padding:14px 16px 10px;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;background:rgba(31,203,79,.06);color:var(--g2);border-bottom:1px solid rgba(31,203,79,.28)}
.kk-t td{padding:16px 16px;border-bottom:1px solid rgba(56,70,74,.6);color:var(--mu);vertical-align:top}
.kk-t td:first-child{color:var(--tx);font-weight:600}
.kk-y{color:var(--g)}
.kk-n{color:var(--mu2)}
.kk-s{margin-top:18px;font-size:14.5px;line-height:1.55}
@media (max-width:700px){
.kk-t,.kk-t tbody{display:block;width:100%}
.kk-t thead{display:none}
.kk-t tr{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:14px;row-gap:8px;padding:18px 0;border-bottom:1px solid rgba(56,70,74,.6)}
.kk-t tr:first-child{border-top:1px solid rgba(31,203,79,.28)}
.kk-t th:first-child,.kk-t td:first-child,.kk-t th:not(:first-child),.kk-t td:not(:first-child),.kk-t td{display:contents;width:auto;padding:0;border:0}
.kk-t td:first-child{display:block;grid-column:1/-1;margin-bottom:4px;font-size:16px}
.kk-t td:not(:first-child)::before{display:block;align-self:start;line-height:21px;white-space:nowrap;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu2)}
.kk-t td:nth-child(2)::before{content:"Suoja"}
.kk-t td:nth-child(3)::before{content:"Säästö"}
.kk-t td:nth-child(4)::before{content:"Suvereniteetti"}
.kk-t td span{display:block;font-size:15px;line-height:1.4}
}
.pk{position:relative;display:block;text-decoration:none;padding-right:6px;color:inherit}
.pk b{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;font-family:var(--disp);font-stretch:118%;font-size:18px;color:var(--mu);background:var(--s1);clip-path:polygon(16% 14%,47% 4%,82% 10%,95% 35%,100% 69%,91% 80%,54% 100%,14% 83%,0 72%,2% 28%)}
.pk.on b{color:#04170A;background:var(--g)}
.pk h3{margin:22px 0 8px;font-size:20px;transition:color .2s}
.pk:hover h3,.pk:focus-visible h3{color:var(--g)}
.pk:focus-visible{outline:2px solid var(--g);outline-offset:6px}
.pk p{font-size:14.5px;line-height:1.5}

.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);margin-top:10px}
.two .lead{max-width:none}
.rule{margin-top:56px}
.rule>.in{padding:clamp(26px,3.4vw,44px)}
.rule-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:end}
.rule-k{display:block;font-family:var(--disp);font-stretch:125%;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g)}
.rule-t{margin:12px 0 0;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:clamp(22px,2.3vw,30px);line-height:1.2;color:var(--tx);max-width:22ch}
.rule-n{margin:0;font-size:16px;line-height:1.55;color:var(--mu)}
.rule-demo{display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr;align-items:stretch;margin-top:32px}
.rd{padding:18px 20px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(56,70,74,.9);font:400 14.5px/1.6 "SF Mono",ui-monospace,Menlo,Consolas,monospace;color:#C9D6D8}
.rd.ok{box-shadow:inset 0 0 0 1px rgba(31,203,79,.45)}
.rd-k{display:block;margin-bottom:10px;font-family:var(--disp);font-stretch:125%;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mu2)}
.rd.ok .rd-k{color:var(--g)}
.rd p{margin:0;color:inherit;font:inherit}
.rd{position:relative;overflow:hidden;isolation:isolate}
.rd::after{content:"\201D";position:absolute;top:-.12em;right:.06em;z-index:-1;pointer-events:none;font-family:var(--disp);font-weight:800;font-stretch:112%;font-size:120px;line-height:1;color:rgba(201,214,216,.07)}
.rd.ok::after{color:rgba(31,203,79,.09)}
.rd-k{padding-right:44px}
.rd mark{padding:1px 5px;border-radius:2px;color:#fff}
.rd mark.hit{background:rgba(240,73,55,.28);box-shadow:inset 0 0 0 1px rgba(240,73,55,.6)}
.rd mark.ps{background:rgba(31,203,79,.18);box-shadow:inset 0 0 0 1px rgba(31,203,79,.55);color:#BFF5CF}
.rd mark.rs{background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(201,214,216,.5)}
.rd-arrow{display:grid;place-items:center;color:var(--g)}
.rd-arrow svg{width:20px;height:20px}
.rule-steps{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.rule-steps li{display:grid;grid-template-columns:34px 1fr;grid-template-rows:34px auto;column-gap:14px;align-items:start;align-content:start}
.rule-steps b{display:grid;place-items:center;width:34px;height:34px;font-family:var(--disp);font-stretch:118%;font-size:14px;color:#04170A;background:var(--g);clip-path:polygon(16% 14%,47% 4%,82% 10%,95% 35%,100% 69%,91% 80%,54% 100%,14% 83%,0 72%,2% 28%)}
.rule-steps li.x b{background:var(--o);color:#fff}
.rule-steps h4{margin:0;line-height:34px;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:17px;color:var(--tx)}
.rule-steps p{grid-column:1/-1;margin:12px 0 0;font-size:14.5px;line-height:1.55}
@media (max-width:760px){.rule-top{grid-template-columns:1fr;gap:14px}.rule-demo{grid-template-columns:1fr;gap:0}.rd-arrow{height:40px}.rd-arrow svg{transform:rotate(90deg)}.rule-steps{grid-template-columns:1fr;gap:22px}}
.price{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 32px;margin-top:56px;padding:26px 30px;border-top:1px solid rgba(31,203,79,.5);background:linear-gradient(90deg,rgba(31,203,79,.1),rgba(31,203,79,0) 70%)}
.pr-k{font-family:var(--disp);font-stretch:125%;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g)}
.pr-v{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:clamp(20px,2vw,26px);color:var(--tx)}
.pr-s{grid-column:2;font-size:15px}
.price .btn{grid-row:1/span 2;grid-column:3}
#suvereniteetti .prob-label{margin-top:56px}
#suvereniteetti .trade{margin-top:96px}
.front>.in{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(28px,4vw,48px)}
.subh{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:clamp(24px,2.4vw,34px);line-height:1.12;color:var(--tx);max-width:18ch}
.trade .subh{margin-top:18px}
.juris{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.juris span{padding:7px 13px;font-size:13.5px;font-weight:500;color:var(--mu);box-shadow:inset 0 0 0 1px var(--line)}
.juris .fi{color:var(--tx);box-shadow:inset 0 0 0 1px rgba(31,203,79,.6);background:rgba(31,203,79,.08)}
.bento.b4{grid-template-columns:repeat(4,1fr);grid-template-rows:auto}
.close h2.cq{max-width:22ch;font-size:clamp(30px,4vw,54px)}
@media (max-width:1020px){#suoja .two{row-gap:0}#suoja .two>.lead+.lead{margin-top:1em}}
@media (max-width:1020px){
  .nav-sep{display:none}
  .polku{grid-template-columns:1fr;gap:28px}
  .pk-line{left:31px;right:auto;top:10px;bottom:10px;width:2px;height:auto;background:linear-gradient(180deg,rgba(56,70,74,.9),rgba(31,203,79,.6) 22%,rgba(31,203,79,.6) 78%,rgba(56,70,74,.9))}
  .pk-line i{display:none}
  .pk{display:grid;grid-template-columns:64px 1fr;column-gap:22px;padding:0}
  .pk b{grid-row:1/span 2}
  .pk h3{margin:8px 60px 4px 0}
  .two,.front>.in{grid-template-columns:1fr}
  .bento.b4{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(46px,13vw,64px)}
  .nav-links .nav-login{padding:0;width:44px;justify-content:center}
  .nav-links .nav-login span{display:none}
  .nav-links .nav-login svg{display:block!important;width:18px;height:18px}
  .price{grid-template-columns:1fr;padding:24px 20px}
  .pr-s{grid-column:1}
  .price .btn{grid-row:auto;grid-column:1;justify-self:start;margin-top:12px}
  .bento.b4{grid-template-columns:1fr}
  }
@media (prefers-reduced-motion:reduce){.pk-line i{animation:none;display:none}}

/* ---- kierros 18.10. ---- */
html{scroll-behavior:auto}
.contact a,.doc a{transition:color .2s,border-color .2s}
.contact a:hover,.contact a:focus-visible{color:var(--g);border-color:var(--g)}
.team{max-width:none}
.team>.in{grid-template-columns:300px 1fr;gap:clamp(32px,5vw,64px);padding:clamp(28px,3.4vw,44px)}
.team .ph{width:300px}
.team p{max-width:70ch}
@media (min-width:821px){
  .stage-wrap .ledger.sv2{display:grid;grid-template-columns:repeat(3,1fr);column-gap:36px;align-items:center}
  .stage-wrap .ledger.sv2 .svh{grid-column:2/span 2;max-width:52ch}
}
footer{border-top:1px solid rgba(56,70,74,.7);padding:clamp(56px,6vw,84px) 0 0;font-size:14.5px;color:var(--mu);background:linear-gradient(180deg,rgba(25,39,43,.55),rgba(13,21,23,0))}
footer .wrap{display:block}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px 48px;padding-bottom:clamp(44px,5vw,64px)}
footer img{height:26px;width:auto;opacity:1}
.ft-brand p{margin-top:18px;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:20px;color:var(--tx)}
.ft-col{display:flex;flex-direction:column;gap:9px}
.ft-k{font-family:var(--disp);font-stretch:125%;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g);margin-bottom:6px}
.ft-col a{color:var(--mu);text-decoration:none;transition:color .2s;width:fit-content}
.ft-col a:hover,.ft-col a:focus-visible{color:var(--g)}
.ft-bot{display:flex;justify-content:space-between;gap:16px;padding:22px 0 28px;border-top:1px solid rgba(56,70,74,.6);font-size:13px;color:var(--mu2)}
@media (max-width:900px){.ft-top{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}
@media (max-width:820px){.team{margin-top:28px}.team>.in{grid-template-columns:1fr}.team .ph{width:min(300px,100%);justify-self:center;margin-inline:auto}}
@media (max-width:520px){.ft-top{grid-template-columns:1fr}}

/* Säästö: tulos yhtenä nauhana, ei korttia eikä pienpränttiä */
.res .calc{padding:0;background:none}
.res .cbar{margin-top:0}
.res .cbar+.cbar{margin-top:30px}
.res .cbar .row{font-size:17px;color:var(--tx)}
.res .cbar .row b{font-size:30px}
.res .cbar .tr{height:20px}
.res .calc-n{margin-top:22px;font-size:16px;color:var(--mu)}
.res .big-cap{max-width:28ch}

/* säästölaskuri */
.est{margin-top:96px;padding-top:56px;border-top:1px solid rgba(56,70,74,.7);display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.est h3{font-size:clamp(24px,2.4vw,32px);margin:14px 0 0;max-width:18ch}
.est-f{margin-top:36px;display:grid;gap:34px}
.est-l{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:16px;color:var(--mu);margin-bottom:14px}
.est-l b{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:22px;color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.est input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:linear-gradient(90deg,var(--g) var(--p,30%),rgba(255,255,255,.12) var(--p,30%));border-radius:2px;outline:none;margin:10px 0}
.est input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--tx);border:5px solid var(--g);cursor:pointer;box-shadow:0 0 0 6px rgba(31,203,79,.15)}
.est input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--tx);border:5px solid var(--g);cursor:pointer}
.est input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(31,203,79,.45)}
.est-pv{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.est-pv button{appearance:none;cursor:pointer;min-height:64px;padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(159,176,179,.28);color:var(--tx);font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:16px;line-height:1.2;text-align:left;transition:border-color .2s,background .2s}
.est-pv button span{display:block;margin-top:4px;font-family:var(--body);font-weight:400;font-size:13px;color:var(--mu)}
.est-pv button:hover{border-color:rgba(31,203,79,.6)}
.est-pv button[aria-pressed=true]{border-color:var(--g);background:rgba(31,203,79,.1)}
.est-pv button:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.est-r{padding-top:6px}
.est-k{font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu2)}
.est-big{margin-top:10px;font-family:var(--disp);font-stretch:118%;font-weight:800;font-size:clamp(48px,6vw,84px);line-height:1;letter-spacing:-.02em;color:var(--g);font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 0 30px rgba(31,203,79,.25)}
.est-big small{font-size:.38em;color:var(--tx);text-shadow:none;margin-left:6px}
.est-rows{margin-top:32px;border-top:1px solid rgba(56,70,74,.7)}
.est-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid rgba(56,70,74,.7);font-size:16px;color:var(--mu)}
.est-rows b{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:20px;color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.est-n{margin-top:18px;font-size:15px;line-height:1.5;color:var(--mu)}
@media (max-width:1020px){.est{grid-template-columns:1fr;gap:48px}}
@media (max-width:640px){.est{margin-top:64px;padding-top:40px}.est h3{max-width:none}.est-pv{grid-template-columns:1fr}.est-pv button{min-height:56px}.est-big{white-space:normal;font-size:clamp(38px,11vw,52px);line-height:1.08}.est-big small{display:block;margin:8px 0 0}}
.est-in{display:inline-flex;align-items:baseline;gap:8px;border-bottom:1px solid rgba(31,203,79,.6)}
.est-in input{width:7.2ch;background:none;border:0;outline:none;text-align:right;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:26px;color:var(--tx);font-variant-numeric:tabular-nums;padding:0}
.est-in i{font-style:normal;font-size:16px;color:var(--mu)}
.est-in:focus-within{border-bottom-color:var(--g)}
.est-sc{position:relative;height:18px;font-size:13px;color:var(--mu2);font-variant-numeric:tabular-nums}
.est-sc span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}.est-sc span:first-child{transform:none}.est-sc span:last-child{transform:translateX(-100%)}
@media (max-width:420px){.est-sc span:nth-child(2),.est-sc span:nth-child(3){display:none}}
.est-h{margin:22px 0 0;font-size:16px;line-height:1.55;color:var(--mu)}
.est .calc{padding:0;background:none}
.est .cbar{margin-top:0}.est .cbar+.cbar{margin-top:28px}
.est .cbar .row{font-size:17px;color:var(--tx)}
.est .cbar .row b{font-size:clamp(22px,2.2vw,28px);white-space:nowrap}
.est .cbar .tr{position:relative;height:20px;display:flex}
.est .cbar .fl,.est .calc.in-view .cbar .fl{flex:none;transform:none!important;width:0;transition:width .6s cubic-bezier(.2,.7,.2,1)!important}
.est .cbar .rng{flex:none;height:100%;width:0;background:rgba(31,203,79,.28);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.est-n{grid-column:1/-1;margin:8px 0 0;padding-top:24px;border-top:1px solid rgba(56,70,74,.7);font-size:16px;line-height:1.55;color:var(--mu);max-width:none}

/* säästö: lasku, virta ja tulos yhtenä elementtinä */
.svx{display:grid;grid-template-columns:250px minmax(0,1fr) 290px;gap:clamp(24px,3vw,44px);align-items:center;margin-top:64px}
.svx .stage-wrap{margin-top:0}
.svx .stage{height:480px}
.svx-k{display:block;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu2);transition:color .5s}
.svx-bill{display:flex;align-items:baseline;gap:10px;margin-top:14px;padding-bottom:10px;border-bottom:1px solid rgba(159,176,179,.35);transition:border-color .2s}
.svx-bill:focus-within{border-color:var(--g)}
.svx-bill input{width:100%;min-width:0;background:none;border:0;outline:none;padding:0;font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:clamp(34px,3.2vw,44px);line-height:1;letter-spacing:-.02em;color:var(--tx);font-variant-numeric:tabular-nums}
.svx-bill span,.svx-big small{font-family:var(--disp);font-stretch:112%;font-weight:600;font-size:16px;color:var(--mu);white-space:nowrap}
.svx input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;margin:26px 0 0;background:linear-gradient(90deg,var(--g) var(--p,30%),rgba(255,255,255,.12) var(--p,30%));border-radius:2px;outline:none}
.svx input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--tx);border:5px solid var(--g);cursor:pointer;box-shadow:0 0 0 6px rgba(31,203,79,.15)}
.svx input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--tx);border:5px solid var(--g);cursor:pointer}
.svx input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(31,203,79,.45)}
.svx-h{margin:16px 0 0;font-size:15px;line-height:1.5;color:var(--mu)}
.svx-big{display:flex;align-items:baseline;gap:10px;margin-top:14px;white-space:nowrap}
.svx-big span{font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:clamp(40px,4vw,58px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--tx);transition:color .5s,text-shadow .5s}
.svx.on .svx-big span{color:var(--g);text-shadow:0 0 34px rgba(31,203,79,.35)}
.svx.on .svx-k{color:var(--g)}
.svx-res{margin-top:22px;padding-top:20px;border-top:1px solid rgba(56,70,74,.8);opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s}
.svx.on .svx-res{opacity:1;transform:none}
.svx-gain{margin:0;font-size:18px;line-height:1.45;color:var(--mu)}
.svx-gain b{font-family:var(--disp);font-stretch:112%;font-weight:700;color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.svx-gain b:first-child{color:var(--g)}
.svx-split{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--mu2)}
.svx-n{margin:28px 0 0;font-size:14px;color:var(--mu2);text-align:center}
.svx-in,.svx-out{align-self:start}
@media (min-width:1100px){.svx-in,.svx-out{margin-top:130px}}
@media (max-width:1099px){.svx{grid-template-columns:1fr 1fr;gap:32px 48px}.svx .stage-wrap{grid-column:1/-1;grid-row:2}.svx-out{grid-row:1;grid-column:2}.svx .stage{height:clamp(400px,46vw,480px)}}
@media (max-width:700px){.svx{grid-template-columns:1fr;gap:28px}.svx .stage-wrap,.svx-out{grid-column:auto;grid-row:auto}.svx .stage{height:440px}.svx-n{text-align:left}}
@media (prefers-reduced-motion:reduce){.svx-res,.svx-big span{transition:none}}

/* ===== v3 (20.10.2026): yksi kärki, ongelmat, polku, mockupit ===== */
.hero h1.v3{font-size:clamp(40px,4.9vw,74px);line-height:1.0;margin-top:22px}
.hero h1.v3 span{white-space:normal}
.hero .brand-k{margin-top:0}
.hero-cta.v3{flex-direction:column;align-items:flex-start;gap:14px}
.micro{font-size:14px;line-height:1.5;color:var(--mu);max-width:44ch;margin:0}
.micro b{color:var(--tx);font-weight:600}
.stats.v3 .stat span{max-width:19ch}

/* ongelmat */
.issues{list-style:none;margin:56px 0 0;padding:0;display:grid;gap:0;border-top:1px solid rgba(56,70,74,.8);counter-reset:is}
.issues li{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1fr);gap:8px clamp(24px,4vw,56px);align-items:start;padding:30px 0;border-bottom:1px solid rgba(56,70,74,.8)}
.issues .n{display:grid;place-items:center;width:48px;height:48px;font-family:var(--disp);font-stretch:118%;font-weight:700;font-size:16px;color:#fff;background:rgba(240,73,55,.85);clip-path:polygon(16% 14%,47% 4%,82% 10%,95% 35%,100% 69%,91% 80%,54% 100%,14% 83%,0 72%,2% 28%)}
.issues h3{font-size:clamp(19px,1.7vw,23px);line-height:1.3;color:var(--tx);margin-top:8px}
.issues p{margin:8px 0 0;font-size:16.5px;line-height:1.6;color:#C4D1D3;padding-left:22px;border-left:2px solid var(--g)}
.issues p b{color:var(--g);font-weight:600}
.issues li:last-child{border-bottom:0}
.dp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:56px;padding-top:30px;border-top:1px solid rgba(56,70,74,.8)}
.dp h3{font-size:clamp(19px,1.7vw,23px);line-height:1.3;color:var(--tx)}
.dp ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px}
.dp li{position:relative;padding-left:22px;font-size:16px;line-height:1.6;color:#C4D1D3}
.dp li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:2px;background:var(--o)}
.dp .fix h3{color:var(--g)}
.dp .fix li::before{top:7px;width:10px;height:6px;background:none;border:2px solid var(--g);border-top:0;border-right:0;transform:rotate(-45deg)}
.dp-src{margin-top:34px;font-size:13px;line-height:1.55;color:var(--mu2);max-width:none}
@media (max-width:860px){.dp{grid-template-columns:1fr;row-gap:36px}}
@media (max-width:860px){.issues li{grid-template-columns:48px minmax(0,1fr);column-gap:18px}.issues p{grid-column:2;margin-top:4px}.issues h3{margin-top:10px}}

/* laskentarivi */
.calcline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.calcline div{border-top:1px solid rgba(56,70,74,.8);padding-top:18px}
.calcline b{display:block;font-family:var(--disp);font-stretch:125%;font-size:12px;letter-spacing:.16em;color:var(--g);font-weight:600;text-transform:uppercase}
.calcline h3{font-size:19px;margin:10px 0 8px}
.calcline p{font-size:15px;line-height:1.55}
@media (max-width:860px){.calcline{grid-template-columns:1fr}}

/* polku: askeleet + mockupit */
.path{display:grid;gap:clamp(48px,6vw,80px);margin-top:64px}
.pstep{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center}
.pstep .pn{display:inline-grid;place-items:center;width:54px;height:54px;font-family:var(--disp);font-stretch:118%;font-weight:700;font-size:17px;color:#04170A;background:var(--g);clip-path:polygon(16% 14%,47% 4%,82% 10%,95% 35%,100% 69%,91% 80%,54% 100%,14% 83%,0 72%,2% 28%)}
.pstep h3{font-size:clamp(24px,2.4vw,32px);margin:18px 0 0;max-width:20ch}
.pstep .pt p{font-size:16.5px;line-height:1.65;margin-top:14px;max-width:52ch}
.mock{--c:16px}
.mock>.in{padding:0;background:linear-gradient(180deg,rgba(16,26,29,.97),rgba(13,21,23,.99))}
.mock-bar{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid rgba(56,70,74,.6);font:500 12px/1 "SF Mono",ui-monospace,Menlo,monospace;color:var(--mu2)}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:rgba(159,176,179,.25)}
.mock-bar span{margin-left:10px}
.mock-bar em{margin-left:auto;font-style:normal;color:var(--mu2);font-family:var(--disp);font-stretch:125%;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.mock-b{padding:clamp(22px,3vw,34px)}
.mk-k{display:block;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu2)}
.mk-field{display:flex;align-items:center;gap:12px;margin-top:12px;padding:14px 16px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(31,203,79,.45);font:400 14.5px/1.4 "SF Mono",ui-monospace,Menlo,monospace;color:#C9D6D8;overflow:hidden;white-space:nowrap}
.mk-field i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 10px var(--g)}
.mock .btn{margin-top:18px}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(56,70,74,.7)}
.kv h4{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:15px;color:var(--tx)}
.kv ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.kv li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.5;color:var(--mu)}
.kv li::before{content:"";position:absolute;left:0;top:6px;width:10px;height:6px;border:2px solid var(--g);border-top:0;border-right:0;transform:rotate(-45deg)}
.kv .no li::before{width:10px;height:2px;top:10px;border:0;background:var(--o);transform:none}
@media (max-width:640px){.kv{grid-template-columns:1fr}}

.dash{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dn{padding:20px 22px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(56,70,74,.9)}
.dn.g{box-shadow:inset 0 0 0 1px rgba(31,203,79,.5);background:linear-gradient(160deg,rgba(31,203,79,.10),rgba(31,203,79,.02))}
.dn b{display:block;margin-top:10px;font-family:var(--disp);font-stretch:118%;font-weight:800;font-size:clamp(34px,3.6vw,50px);line-height:1;letter-spacing:-.02em;color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.dn.g b{color:var(--g);text-shadow:0 0 30px rgba(31,203,79,.3)}
.dn small{display:block;margin-top:8px;font-size:13px;color:var(--mu)}
.qual{display:flex;align-items:center;gap:12px;margin-top:16px;padding:13px 16px;background:rgba(31,203,79,.07);box-shadow:inset 0 0 0 1px rgba(31,203,79,.35);font-size:14.5px;color:#C4D1D3}
.qual i{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(31,203,79,.2);display:grid;place-items:center}
.qual i::before{content:"";width:8px;height:4px;border:2px solid var(--g);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.qual b{color:var(--tx);font-weight:600}
.dl{margin-top:16px;border-top:1px solid rgba(56,70,74,.7)}
.dl div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:baseline;padding:11px 2px;border-bottom:1px solid rgba(56,70,74,.5);font:400 13px/1.4 "SF Mono",ui-monospace,Menlo,monospace;color:var(--mu)}
.dl div span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl div b{font-weight:500;color:var(--tx)}
.dl div em{font-style:normal;color:var(--g)}
.dl div.h{font-family:var(--disp);font-stretch:125%;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu2)}
.mock-n{margin:12px 0 0;font-size:13px;color:var(--mu2)}
@media (max-width:1020px){.pstep{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.dash{grid-template-columns:1fr}.dl div{grid-template-columns:minmax(0,1fr) auto}.dl div>*:nth-child(2){display:none}}

/* pilotin ehdot */
.terms{margin-top:clamp(56px,7vw,88px)}
.terms>.in{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px);padding:clamp(28px,3.6vw,48px)}
.terms{background:linear-gradient(160deg,rgba(31,203,79,.7),rgba(31,203,79,.12) 50%,rgba(46,230,166,.45))}
.terms>.in{background:radial-gradient(500px 300px at 10% 0%,rgba(31,203,79,.16),transparent 70%),linear-gradient(170deg,rgba(24,46,38,.97),rgba(20,34,35,.97))}
.terms .subh{max-width:14ch}
.terms ol{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:t}
.terms li{position:relative;padding-left:44px;font-size:16.5px;line-height:1.6;color:#C4D1D3;counter-increment:t}
.terms li::before{content:counter(t);position:absolute;left:0;top:0;width:28px;height:28px;display:grid;place-items:center;font-family:var(--disp);font-stretch:118%;font-weight:700;font-size:13px;color:#04170A;background:var(--g);clip-path:polygon(16% 14%,47% 4%,82% 10%,95% 35%,100% 69%,91% 80%,54% 100%,14% 83%,0 72%,2% 28%)}
.terms li b{color:var(--tx);font-weight:600}
@media (max-width:1020px){.terms>.in{grid-template-columns:1fr}}

/* hinnat */
.prices{margin-top:56px;border-top:1px solid rgba(31,203,79,.5)}
.prices>div{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1.3fr);gap:8px clamp(20px,3vw,40px);align-items:baseline;padding:26px 20px;border-bottom:1px solid rgba(56,70,74,.8)}
.prices .pr-k{font-size:12px}
.prices .pr-v{font-size:clamp(20px,2vw,26px)}
.prices p{margin:0;font-size:15.5px;line-height:1.55}
.prices>div.lead1{background:linear-gradient(90deg,rgba(31,203,79,.1),rgba(31,203,79,0) 70%);}
@media (max-width:860px){.prices>div{grid-template-columns:1fr;gap:6px}}

.close .micro{margin:16px auto 0;text-align:center}
.close h2.v3{max-width:16ch}
.pt code{font:500 14px "SF Mono",ui-monospace,Menlo,monospace;color:#A6F5BD}
@media (max-width:640px){.hero-cta.v3{align-items:center}.hero .micro{text-align:center}.pstep .pt{text-align:left}}
@media (max-width:560px){.nav-links .nav-cta{display:none}}


/* ===== alasivut + etusivun nostot (20.10.2026) ===== */
.nw{white-space:nowrap}
.h2m{margin-top:22px}
.nav-links a[aria-current=page]{color:var(--tx)!important;position:relative}
.nav-links a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--g)}
@media (max-width:640px){main .btn{width:100%;justify-content:center}}

/* lue lisää -linkki */
.more{display:inline-flex;align-items:center;gap:10px;margin-top:32px;padding-bottom:5px;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:17px;color:var(--g);text-decoration:none;border-bottom:1px solid rgba(31,203,79,.45);transition:color .2s,border-color .2s}
.more svg{width:18px;height:18px;transition:transform .25s}
.more:hover,.more:focus-visible{color:var(--g2);border-color:var(--g2)}
.more:hover svg{transform:translateX(4px)}
.more:focus-visible{outline:2px solid var(--g);outline-offset:4px}

/* etusivun nosto: teksti + yksi todiste */
.teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.teaser h2{margin-top:22px;max-width:15ch}
.teaser .lead{max-width:50ch}
@media (max-width:1020px){.teaser{grid-template-columns:minmax(0,1fr)}}

/* palkkivertailu: lasku ilman / kanssa */
.bars>.in{padding:clamp(26px,3vw,40px)}
.bars .bar{margin-top:26px}
.bars .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px;font-size:16px;color:var(--mu)}
.bars .row b{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:clamp(22px,2.2vw,28px);color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.bars .tr{display:flex;height:18px;background:rgba(255,255,255,.05)}
.bars .tr i{display:block;height:100%;width:calc(var(--w) * 100%);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .25s}
.bars.in .tr i{transform:none}
.bars .o i{background:repeating-linear-gradient(-68deg,var(--o) 0 9px,rgba(240,73,55,.72) 9px 13px)}
.bars .g i{background:repeating-linear-gradient(-68deg,var(--g) 0 9px,rgba(31,203,79,.72) 9px 13px);transition-delay:.65s}
.bars-res{margin:26px 0 0;padding-top:20px;border-top:1px solid rgba(56,70,74,.8);font-size:18px;line-height:1.45;color:var(--mu)}
.bars-res b{font-family:var(--disp);font-stretch:112%;font-weight:700;color:var(--tx);white-space:nowrap}
.bars-res b:first-child{color:var(--g)}
.bars-n{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--mu2)}

/* suoja-esimerkki pystyssä */
.demo-b{padding:clamp(20px,2.6vw,30px);display:grid}
.demo .rd-arrow{height:40px}
.demo .rd-arrow svg{transform:rotate(90deg)}
.demo .rd{opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s}
.demo.in .rd{opacity:1;transform:none}
.demo.in .rd:nth-of-type(2){transition-delay:.45s}.demo.in .rd:nth-of-type(3){transition-delay:.9s}
.demo .rd mark.ps{animation:psGlow 2.8s ease-in-out 1.4s infinite}
@keyframes psGlow{0%,100%{box-shadow:inset 0 0 0 1px rgba(31,203,79,.55)}50%{box-shadow:inset 0 0 0 1px rgba(31,203,79,.9),0 0 18px rgba(31,203,79,.45)}}

/* faktarivit kortissa */
.facts{background:linear-gradient(160deg,rgba(31,203,79,.75),rgba(31,203,79,.15) 50%,rgba(31,203,79,.45))}
.facts>.in{padding:clamp(26px,3vw,40px);background:linear-gradient(170deg,rgba(24,52,38,.96),rgba(22,38,36,.96))}
.facts .mk-k{color:var(--g);margin-bottom:18px}

/* alasivun hero: teksti + todiste */
.hero.sub{min-height:0;padding:clamp(128px,12vw,176px) 0 clamp(72px,8vw,112px)}
.hero.sub .wrap{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,80px);align-items:center}
.hero.sub h1.v3{font-size:clamp(38px,4.3vw,64px)}
.hero.sub .sub{max-width:50ch}
.hero.sub .stats{margin-top:52px}
.hero.sub .stat b{font-size:clamp(24px,2.3vw,32px)}
.crumb{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--mu);text-decoration:none;margin-bottom:26px;transition:color .2s}
.crumb:hover{color:var(--tx)}
.crumb svg{width:14px;height:14px;transform:rotate(180deg)}
@media (max-width:1020px){.hero.sub .wrap{grid-template-columns:minmax(0,1fr)}.hero-vis{margin-top:28px}}
@media (max-width:640px){
  .hero.sub{padding:104px 0 64px}
  .hero.sub h1.v3{font-size:clamp(30px,8.6vw,40px)}
  .crumb{display:flex;justify-content:center}
  .hero.sub .stats{margin-top:40px}
  .hero.sub .stat b{font-size:22px}
}

/* yleiset alasivupalikat */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;margin-top:56px}
.split.top{align-items:start}
.split .lead{max-width:none;margin-top:0}
.split .lead+.lead{margin-top:18px}
@media (max-width:1020px){.split{grid-template-columns:minmax(0,1fr)}}
.sec-lead{max-width:60ch}
.ticks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.ticks li{position:relative;padding-left:30px;font-size:16.5px;line-height:1.55;color:#C4D1D3}
.ticks li::before{content:"";position:absolute;left:2px;top:7px;width:11px;height:6px;border:2px solid var(--g);border-top:0;border-right:0;transform:rotate(-45deg)}
.ticks li b{color:var(--tx);font-weight:600}
.ticks.x li::before{width:11px;height:2px;top:11px;border:0;background:var(--o);transform:none}

/* kolme korttia rinnakkain, sama korkeus */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.quad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:56px}
.tc>.in{display:flex;flex-direction:column;padding:clamp(26px,2.6vw,34px)}
.tc .ab{display:grid;place-items:center;width:40px;height:40px;font-family:var(--disp);font-stretch:118%;font-weight:700;font-size:15px;color:#04170A;background:var(--g);clip-path:polygon(16% 14%,47% 4%,82% 10%,95% 35%,100% 69%,91% 80%,54% 100%,14% 83%,0 72%,2% 28%)}
.tc.x .ab{background:var(--o);color:#fff}
.tc h3{font-size:clamp(20px,1.7vw,23px);margin:20px 0 10px;line-height:1.2}
.tc p{font-size:15.5px;line-height:1.6}
.tc .out{margin-top:auto;padding-top:22px}
.tc .out span{display:block;padding:12px 14px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(56,70,74,.9);font:400 13px/1.5 "SF Mono",ui-monospace,Menlo,monospace;color:#C9D6D8}
.tc .out mark{padding:1px 4px;border-radius:2px;background:rgba(31,203,79,.18);box-shadow:inset 0 0 0 1px rgba(31,203,79,.55);color:#BFF5CF}
.tc.x .out span{box-shadow:inset 0 0 0 1px rgba(240,73,55,.55);color:#FFB4A8}
@media (max-width:1020px){.trio{grid-template-columns:minmax(0,1fr)}.quad{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.quad{grid-template-columns:minmax(0,1fr)}}

/* säästö: laskuesimerkki */
.wf>.in{padding:clamp(26px,3vw,40px)}
.wf .bar{margin-top:24px}
.wf .bar:first-of-type{margin-top:18px}
.wf .tr{display:flex;height:22px;background:rgba(255,255,255,.04);gap:2px}
.wf .tr i{display:block;height:100%;width:calc(var(--w) * 100%);transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.wf.in .tr i{transform:none}
.wf .tr i.p{background:repeating-linear-gradient(-68deg,rgba(159,176,179,.55) 0 9px,rgba(159,176,179,.38) 9px 13px);transition-delay:.4s}
.wf .tr i.f{background:var(--g2);transition-delay:.9s}
.wf .tr i.k{background:repeating-linear-gradient(-68deg,var(--g) 0 9px,rgba(31,203,79,.72) 9px 13px);transition-delay:1.2s;box-shadow:0 0 24px rgba(31,203,79,.45)}
.wf .tr i.o{background:repeating-linear-gradient(-68deg,var(--o) 0 9px,rgba(240,73,55,.72) 9px 13px)}
.wf .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px;font-size:16px;color:var(--mu)}
.wf .row b{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:clamp(20px,2vw,26px);color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.wf-leg{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;font-size:14px;color:var(--mu)}
.wf-leg span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.wf-leg span::before{content:"";width:12px;height:12px;background:rgba(159,176,179,.5)}
.wf-leg .f::before{background:var(--g2)}
.wf-leg .k::before{background:var(--g)}
.wf-leg b{color:var(--tx);font-weight:600}
.ledg{border-top:1px solid rgba(56,70,74,.8)}
.ledg div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:17px 0;border-bottom:1px solid rgba(56,70,74,.7);font-size:16.5px;color:var(--mu)}
.ledg b{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:clamp(19px,1.7vw,22px);color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.ledg .tot{border-bottom:0;padding-top:22px}
.ledg .tot span{color:var(--tx);font-weight:600}
.ledg .tot b{font-size:clamp(30px,3vw,40px);color:var(--g);text-shadow:0 0 30px rgba(31,203,79,.3)}
.ledg .y b{color:var(--g)}

/* pyyntöloki: vertailu näkyy myös mobiilissa */
.dl.keep div span:first-child{white-space:normal}
@media (max-width:520px){.dl.keep div{grid-template-columns:minmax(0,1fr) auto auto;gap:10px}.dl.keep div>*:nth-child(2){display:block}}

/* suoja: tunnistettavat tiedot */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;font-size:15px;font-weight:500;color:var(--tx);background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(159,176,179,.3);transition:background .5s,box-shadow .5s}
.chips span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mu2);transition:background .5s}
.scan.in .chips span{background:rgba(240,73,55,.09);box-shadow:inset 0 0 0 1px rgba(240,73,55,.5)}
.scan.in .chips span::before{background:var(--o)}
.scan>.in{padding:clamp(26px,3vw,40px)}
.scan .mk-k{margin-bottom:18px}
.scan-n{margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(56,70,74,.7);font-size:17px;line-height:1.55;color:var(--mu)}
.scan-n b{color:var(--tx);font-weight:600}

/* suoja: pilotti ennen / jälkeen */
.pp{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:stretch;margin-top:56px}
.pp .arrow{display:grid;place-items:center;color:var(--g)}
.pp .arrow svg{width:22px;height:22px}
.pp .tc .mk-k{color:var(--mu2)}
.pp .tc.on .mk-k{color:var(--g)}
.pp .tc h3{margin-top:12px}
.pp-rows{margin-top:auto;padding-top:24px;display:grid;gap:8px}
.pp-rows div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(56,70,74,.9);font-size:14.5px;color:#C9D6D8}
.pp-rows em{font-style:normal;flex:none;padding:4px 10px;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mu);box-shadow:inset 0 0 0 1px rgba(159,176,179,.35)}
.pp-rows em.g{color:#BFF5CF;background:rgba(31,203,79,.14);box-shadow:inset 0 0 0 1px rgba(31,203,79,.55)}
.pp-rows em.x{color:#FFB4A8;background:rgba(240,73,55,.12);box-shadow:inset 0 0 0 1px rgba(240,73,55,.55)}
.tc.on{background:linear-gradient(160deg,rgba(31,203,79,.7),rgba(31,203,79,.12) 50%,rgba(46,230,166,.45))}
.tc.on>.in{background:radial-gradient(500px 300px at 10% 0%,rgba(31,203,79,.14),transparent 70%),linear-gradient(170deg,rgba(24,46,38,.97),rgba(20,34,35,.97))}
@media (max-width:860px){.pp{grid-template-columns:minmax(0,1fr)}.pp .arrow{height:48px}.pp .arrow svg{transform:rotate(90deg)}}

/* tallennetaan / ei tallenneta */
.store>.in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding:clamp(26px,3.4vw,44px)}
.store h3{font-size:clamp(20px,1.8vw,24px)}
.store .ticks{margin-top:20px}
@media (max-width:860px){.store>.in{grid-template-columns:minmax(0,1fr)}}
.where{display:flex;align-items:center;gap:14px;margin-top:20px;padding:16px 20px;background:rgba(31,203,79,.07);box-shadow:inset 0 0 0 1px rgba(31,203,79,.35);font-size:15.5px;color:#C4D1D3}
.where i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--g);box-shadow:0 0 10px var(--g)}
.where b{color:var(--tx);font-weight:600}

/* suvereniteetti: riskikortit kuvineen */
.prob-grid.duo{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:56px}
.prob-grid.duo .prob .pv{margin:-10px -10px 22px}
.prob-grid.duo .prob p{margin-bottom:0}
.prob-grid.duo .prob.ok .pv{margin:-10px 0 -10px -10px}
@media (max-width:1020px){.prob-grid.duo{grid-template-columns:minmax(0,1fr)}.prob-grid.duo .prob.ok .pv{margin:0 0 20px}}

/* suvereniteetti: pyynnön kulku */
.flow{display:grid;grid-template-columns:minmax(0,.9fr) 48px minmax(0,.9fr) 48px minmax(0,1.3fr);align-items:center;margin-top:56px}
.fl-node,.fl-lane{padding:20px 22px;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(56,70,74,.9)}
.fl-node span,.fl-lane span{display:block;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu2)}
.fl-node b,.fl-lane b{display:block;margin-top:8px;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:18px;line-height:1.3;color:var(--tx)}
.fl-node small,.fl-lane small{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:var(--mu)}
.fl-node.g{box-shadow:inset 0 0 0 1px rgba(31,203,79,.55);background:rgba(31,203,79,.06)}
.fl-arr{display:grid;place-items:center;color:var(--g)}
.fl-arr svg{width:22px;height:22px}
.fl-split{display:grid;gap:14px}
.fl-lane.fi{box-shadow:inset 0 0 0 1px rgba(31,203,79,.7);background:linear-gradient(160deg,rgba(31,203,79,.14),rgba(31,203,79,.03))}
.fl-lane.fi span{color:var(--g)}
@media (max-width:1020px){.flow{grid-template-columns:minmax(0,1fr)}.fl-arr{height:44px}.fl-arr svg{transform:rotate(90deg)}}

/* hinta-nauha alasivulla */
.price.sub-price{margin-top:0}

/* kolme kytkintä: ristiinlinkitys */
.xl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
a.xc{text-decoration:none;color:inherit;display:block}
.xc>.in{display:flex;flex-direction:column;padding:clamp(26px,2.6vw,34px)}
.xc .xk{font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--g)}
.xc h3{margin:14px 0 10px;font-size:clamp(20px,1.7vw,23px);line-height:1.25;transition:color .2s}
.xc p{font-size:15.5px;line-height:1.55}
.xc .xm{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:22px;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:15px;color:var(--g)}
.xc .xm svg{width:16px;height:16px;transition:transform .25s}
a.xc:hover h3{color:var(--g)}
a.xc:hover .xm svg{transform:translateX(4px)}
a.xc:focus-visible{outline:2px solid var(--g);outline-offset:4px}
.xc.here{background:linear-gradient(160deg,rgba(31,203,79,.7),rgba(31,203,79,.12) 50%,rgba(46,230,166,.45))}
.xc.here>.in{background:linear-gradient(170deg,rgba(24,46,38,.97),rgba(20,34,35,.97))}
.xc.here .xm{color:var(--mu)}
@media (max-width:1020px){.xl{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){
  .bars .tr i,.wf .tr i,.demo .rd,.chips span{transition:none;transform:none;opacity:1}
  .demo .rd mark.ps{animation:none}
}
.calcline.stack{grid-template-columns:minmax(0,1fr);gap:26px;margin:0;padding:0;list-style:none}
.calcline.stack li{border-top:1px solid rgba(56,70,74,.8);padding-top:18px}
.hero.sub .stat b{white-space:nowrap}
.crumb{display:flex;width:fit-content;margin-bottom:22px}
@media (max-width:640px){.crumb{margin-inline:auto}}
.hero.sub h1.v3{font-size:clamp(36px,4vw,60px)}
@media (max-width:640px){.hero.sub h1.v3{font-size:clamp(30px,8.6vw,40px)}}
.sec.tight{padding-top:0}
.teaser h2{font-size:clamp(30px,3.4vw,48px);max-width:16ch}
.scan .chips span{font-size:15.5px;padding:11px 16px}
/* alasivun hero: luvut koko leveydeltä tekstin ja todisteen alla */
.hero.sub .stats{grid-column:1/-1;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,5vw,64px)}
.hero.sub .stat span{max-width:30ch}
.hero.sub .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.hero.sub h1.v3{font-size:clamp(36px,3.8vw,54px)}
@media (max-width:1020px){.hero.sub .wrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.hero.sub h1.v3{font-size:clamp(30px,8.6vw,40px)}}
@media (max-width:1020px){.two{row-gap:18px}}

/* "Näin pääset alkuun" tiivis versio (3b, Jannen valinta 32A) */
.qs .pn{display:inline-grid;place-items:center;width:46px;height:46px;font-family:var(--disp);font-stretch:118%;font-weight:700;font-size:16px;color:#04170A;background:var(--g);clip-path:polygon(16% 14%,47% 4%,82% 10%,95% 35%,100% 69%,91% 80%,54% 100%,14% 83%,0 72%,2% 28%)}
.qs{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.qs li{display:flex;flex-direction:column;gap:10px;padding:26px 24px;background:linear-gradient(170deg,rgba(32,48,52,.7),rgba(25,39,43,.7));box-shadow:inset 0 0 0 1px rgba(56,70,74,.8)}
.qs h3{font-size:clamp(19px,1.7vw,23px);line-height:1.3;color:var(--tx);margin-top:6px}
.qs p{font-size:16px;line-height:1.6;color:#C4D1D3;margin:0}
.qs code{font-size:.9em}
.qs .btn,.qs .qs-rep{margin-top:auto}
.qs .btn{align-self:flex-start}
.qs .qs-rep{color:var(--g);font-weight:600;text-decoration:none;padding:14px 0 4px}
.qs .qs-rep:hover{text-decoration:underline}
.qs-modal{width:min(980px,94vw);height:90vh;padding:0;border:0;background:var(--bg2);box-shadow:0 0 0 1px var(--line)}
.qs-modal::backdrop{background:rgba(0,0,0,.7)}
.qs-mbar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:13px;color:var(--mu)}
.qs-mbar button{background:none;border:0;color:var(--tx);font-size:18px;cursor:pointer;min-width:44px;min-height:44px}
.qs-modal iframe{width:100%;height:calc(100% - 64px);border:0;background:#fff}
@media (max-width:640px){.qs .btn{align-self:stretch;justify-content:center}}
.qs-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin:40px 0 56px;padding-top:30px;border-top:1px solid rgba(56,70,74,.8)}
.qs-why h4{position:relative;padding-left:22px;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--g)}
.qs-why h4::before{content:"";position:absolute;left:0;top:2px;width:10px;height:6px;border:2px solid var(--g);border-top:0;border-right:0;transform:rotate(-45deg)}
.qs-why p{margin-top:12px;font-size:16px;line-height:1.6;color:#C4D1D3}
@media (max-width:1020px){.qs{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.qs,.qs-why{grid-template-columns:minmax(0,1fr)}}

/* mobiilinavi: palvelusivut omana rivinään navin alla */
.nav-m{display:none}
@media (max-width:1020px){
  .nav-m{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);border-top:1px solid rgba(56,70,74,.6);background:rgba(13,21,23,.82);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
  .nav-m a{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:14px;font-weight:500;color:var(--mu);text-decoration:none;position:relative;white-space:nowrap}
  .nav-m a:hover{color:var(--tx)}
  .nav-m a[aria-current=page]{color:var(--tx)}
  .nav-m a[aria-current=page]::after{content:"";position:absolute;left:22%;right:22%;bottom:0;height:2px;background:var(--g)}
  .nav-m a:focus-visible{outline:2px solid var(--g);outline-offset:-4px}
  .hero{padding-top:164px}
  .hero.sub{padding-top:172px}
  section[id],main[id]{scroll-margin-top:136px}
}
@media (max-width:640px){.hero{padding-top:140px}.hero.sub{padding-top:148px}}
.micro{text-wrap:balance}

/* ===== kierros 20.10. iltapäivä: lyhyt etusivu, syvät alasivut ===== */
/* etusivu: kolme kytkintä nostoina, rivit linjassa korttien välillä */
.kx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto 1fr auto auto;gap:0 20px;margin-top:56px}
a.kc{display:grid;grid-row:span 6;grid-template-rows:subgrid;text-decoration:none;color:inherit}
.kc>.in{display:grid;grid-row:span 6;grid-template-rows:subgrid;padding:clamp(26px,2.6vw,34px)}
.kc .xk{font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--g)}
.kp{margin:16px 0 0;font-size:15px;line-height:1.55;color:#C4D1D3}
.kp i{display:block;margin-bottom:6px;font-style:normal;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#FF8A7A}
.kc h3{margin:20px 0 0;padding-top:20px;border-top:1px solid rgba(56,70,74,.8);font-size:clamp(20px,1.7vw,23px);line-height:1.25;transition:color .2s}
.kvis{align-self:end;margin-top:24px;padding:16px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(56,70,74,.9);font-size:13.5px;color:var(--mu)}
.kvis-bars div{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:baseline}
.kvis-bars div+div{margin-top:12px}
.kvis-bars b{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:16px;color:var(--tx);white-space:nowrap}
.kvis-bars i{grid-column:1/-1;display:block;height:10px;width:calc(var(--w)*100%);transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .3s}
.kvis-bars i.o{background:repeating-linear-gradient(-68deg,var(--o) 0 7px,rgba(240,73,55,.7) 7px 10px)}
.kvis-bars i.g{background:repeating-linear-gradient(-68deg,var(--g) 0 7px,rgba(31,203,79,.7) 7px 10px);transition-delay:.7s}
.kc.in .kvis-bars i{transform:none}
.kvis-mask p{margin:0;font:400 13px/1.55 "SF Mono",ui-monospace,Menlo,monospace;color:#C9D6D8}
.kvis-mask p+p{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(56,70,74,.9)}
.kvis-mask .k{display:block;margin-bottom:2px;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu2)}
.kvis-mask mark{padding:1px 4px;border-radius:2px;white-space:nowrap}
.kvis-mask mark.hit{background:rgba(240,73,55,.16);box-shadow:inset 0 0 0 1px rgba(240,73,55,.6);color:#FFB4A8}
.kvis-mask mark.ps{background:rgba(31,203,79,.16);box-shadow:inset 0 0 0 1px rgba(31,203,79,.6);color:#BFF5CF}
.kvis-rows div{display:flex;justify-content:space-between;gap:12px;padding:5px 0}
.kvis-rows div+div{border-top:1px solid rgba(56,70,74,.7)}
.kvis-rows b{font-family:var(--disp);font-stretch:112%;font-weight:700;color:var(--tx)}
.kvis-rows b.ei{color:var(--o)}
.kpr{margin:18px 0 0;font-size:14.5px;color:var(--mu)}
.kpr b{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:17px;color:var(--tx)}
.kc .xm{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:15px;color:var(--g)}
.kc .xm svg{width:16px;height:16px;flex:none;transition:transform .25s}
a.kc:hover h3{color:var(--g)}
a.kc:hover .xm svg{transform:translateX(4px)}
a.kc:focus-visible{outline:2px solid var(--g);outline-offset:4px}
@media (max-width:1020px){.kx{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:20px}a.kc,.kc>.in{grid-row:auto;grid-template-rows:none;display:block}.kc>.in{display:flex;flex-direction:column}.kvis{align-self:stretch}}

/* etusivu: todiste */
.proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.proof h2{max-width:15ch}
.proof .lead{max-width:48ch}
.proof-n{padding:clamp(26px,3vw,40px);background:linear-gradient(170deg,rgba(24,52,38,.9),rgba(22,38,36,.9));box-shadow:inset 0 0 0 1px rgba(31,203,79,.45)}
.pn-big{display:flex;align-items:center;gap:22px;padding-bottom:26px;border-bottom:1px solid rgba(31,203,79,.3)}
.pn-big b{font-family:var(--disp);font-stretch:118%;font-weight:700;font-size:clamp(56px,6vw,88px);line-height:.9;letter-spacing:-.03em;color:var(--g);text-shadow:0 0 40px rgba(31,203,79,.35);white-space:nowrap}
.pn-big span{font-size:15.5px;line-height:1.45;color:#C4D1D3}
.pn-big em{font-style:normal;font-family:var(--disp);font-stretch:112%;font-weight:700;color:var(--tx);white-space:nowrap}
.pn-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding-top:24px}
.pn-row b{display:block;font-family:var(--disp);font-stretch:118%;font-weight:700;font-size:clamp(24px,2.4vw,32px);color:var(--tx);white-space:nowrap}
.pn-row span{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:var(--mu)}
@media (max-width:1020px){.proof{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.pn-big{flex-direction:column;align-items:flex-start;gap:12px}.pn-row{grid-template-columns:1fr}}

/* etusivu: hinnat tiiviisti */
#hinnat .prices{margin-top:22px}
.pr-foot{margin-top:18px;font-size:15px;color:var(--mu)}
.faq-more{margin-top:22px;font-size:15.5px;line-height:1.6;color:var(--mu)}
.faq-more a{color:var(--g);text-decoration:none;border-bottom:1px solid rgba(31,203,79,.45)}
.faq-more a:hover{color:var(--g2)}

/* etusivu: perustaja loppuosiossa */
.founder{display:grid;grid-template-columns:120px minmax(0,1fr);gap:28px;align-items:center;max-width:760px;margin:clamp(56px,7vw,88px) auto 0;padding:24px;text-align:left;background:rgba(13,21,23,.6);box-shadow:inset 0 0 0 1px rgba(56,70,74,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.founder img{width:120px;height:128px;object-fit:cover;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.founder .k{font-family:var(--disp);font-stretch:125%;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g)}
.founder b{display:block;margin-top:6px;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:20px;color:var(--tx)}
.founder p{margin-top:8px;font-size:14.5px;line-height:1.55}
.founder .contact{margin-top:10px;font-size:14.5px}
.founder .contact span{margin:0 10px}
@media (max-width:640px){.founder{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}}
/* etusivu on tiivis: hieman matalampi osiorytmi kuin alasivuilla */
.home .sec{padding:clamp(80px,9vw,128px) 0}
.home .sec.tight{padding-top:0}

/* ===== säästö-alasivu ===== */
.case .case-big{display:flex;align-items:center;gap:18px;margin-bottom:6px}
.case .case-big b{font-family:var(--disp);font-stretch:118%;font-weight:700;font-size:clamp(48px,5vw,72px);line-height:.9;letter-spacing:-.03em;color:var(--g);text-shadow:0 0 36px rgba(31,203,79,.35);white-space:nowrap}
.case .case-big span{font-size:15px;line-height:1.4;color:#C4D1D3;max-width:16ch}
.case .bar{margin-top:22px}
.case .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:8px;font-size:15px;color:var(--mu)}
.case .row b{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:clamp(20px,2vw,24px);color:var(--tx);white-space:nowrap}
.case .tr{display:flex;height:14px;background:rgba(255,255,255,.05)}
.case .tr i{display:block;height:100%;width:calc(var(--w)*100%);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .25s}
.case.in .tr i{transform:none}
.case .o i{background:repeating-linear-gradient(-68deg,var(--o) 0 9px,rgba(240,73,55,.72) 9px 13px)}
.case .g i{background:repeating-linear-gradient(-68deg,var(--g) 0 9px,rgba(31,203,79,.72) 9px 13px);transition-delay:.65s}
.case .bars-n{margin-top:20px;padding-top:16px;border-top:1px solid rgba(31,203,79,.25);color:#9FB8AE}

/* ongelma: tehtävälista */
.tsk{padding:clamp(18px,2.4vw,28px) clamp(18px,2.4vw,28px) 0}
.tsk>div{display:grid;grid-template-columns:minmax(0,1fr) 92px 92px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(56,70,74,.7);font-size:15px;color:#C9D6D8}
.tsk>div:last-child{border-bottom:0}
.tsk .tsk-h{padding-top:0;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu2)}
.tsk em{justify-self:start;font-style:normal;padding:4px 9px;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--mu);box-shadow:inset 0 0 0 1px rgba(159,176,179,.35)}
.tsk em.x{color:#FFB4A8;background:rgba(240,73,55,.1);box-shadow:inset 0 0 0 1px rgba(240,73,55,.5)}
.tsk em.g{color:#BFF5CF;background:rgba(31,203,79,.12);box-shadow:inset 0 0 0 1px rgba(31,203,79,.55)}
.tasks .mock-n{margin:0;padding:16px clamp(18px,2.4vw,28px) clamp(18px,2.4vw,26px);font-size:14.5px;line-height:1.5;color:var(--mu)}
.tasks .tsk>div:not(.tsk-h){opacity:0;transform:translateX(-8px);transition:opacity .5s,transform .5s}
.tasks.in .tsk>div{opacity:1;transform:none}
.tasks.in .tsk>div:nth-child(3){transition-delay:.12s}.tasks.in .tsk>div:nth-child(4){transition-delay:.24s}.tasks.in .tsk>div:nth-child(5){transition-delay:.36s}.tasks.in .tsk>div:nth-child(6){transition-delay:.48s}
@media (max-width:520px){.tsk>div{grid-template-columns:minmax(0,1fr) auto auto;gap:8px}.tsk em{padding:3px 6px;font-size:9.5px}}

/* laskelma auki */
.c2-ctl{margin-bottom:26px}
.c2-k{display:block;margin-bottom:12px;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu2)}
.c2-seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.c2-seg button{appearance:none;-webkit-appearance:none;cursor:pointer;min-height:64px;padding:12px 16px;text-align:left;background:rgba(255,255,255,.03);border:1px solid rgba(159,176,179,.28);border-radius:0;color:var(--tx);transition:border-color .2s,background .2s}
.c2-seg b{display:block;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:20px;line-height:1.1}
.c2-seg span{display:block;margin-top:4px;font-size:13.5px;color:var(--mu)}
.c2-seg button:hover{border-color:rgba(31,203,79,.6)}
.c2-seg button[aria-pressed=true]{border-color:var(--g);background:rgba(31,203,79,.1)}
.c2-seg button[aria-pressed=true] b{color:var(--g)}
.c2-seg button:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.ledg i{font-style:normal}
.wf .mk-k i{font-style:normal}
.wf .tr i{transition:transform 1.2s cubic-bezier(.2,.7,.2,1),width .5s cubic-bezier(.2,.7,.2,1)}
.c2-pilot{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline;margin-top:26px;padding-top:20px;border-top:1px solid rgba(56,70,74,.8)}
.c2-pilot span{grid-column:1/-1;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--g)}
.c2-pilot b{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:clamp(26px,2.6vw,34px);color:var(--tx);white-space:nowrap;font-variant-numeric:tabular-nums}
.c2-pilot small{font-size:14.5px;line-height:1.45;color:var(--mu)}
.c2-n{margin-top:36px;padding-top:22px;border-top:1px solid rgba(56,70,74,.7);font-size:15px;line-height:1.6;color:var(--mu);max-width:none}
.calc2 .card.wf{align-self:stretch}

/* todiste: raportti */
.rep{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:stretch;margin-top:56px}
.rep-n{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(56,70,74,.8)}
.rep-n>div{padding:28px 24px 28px 0;border-bottom:1px solid rgba(56,70,74,.8)}
.rep-n>div:nth-child(odd){padding-right:28px;border-right:1px solid rgba(56,70,74,.8)}
.rep-n>div:nth-child(even){padding-left:28px}
.rep-n b{display:block;font-family:var(--disp);font-stretch:118%;font-weight:700;font-size:clamp(34px,3.6vw,52px);line-height:1;letter-spacing:-.02em;color:var(--tx);white-space:nowrap}
.rep-n .g b{color:var(--g);text-shadow:0 0 30px rgba(31,203,79,.3)}
.rep-n span{display:block;margin-top:12px;font-size:15px;line-height:1.5;color:var(--mu)}
.rep-cover{--c:16px;position:relative;display:flex;flex-direction:column;height:100%;padding:28px 28px 24px;text-decoration:none;color:#0D1517;background:#F4F6F5;clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%);box-shadow:0 30px 60px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.rep-cover::before{content:"";position:absolute;right:0;top:0;width:34px;height:34px;background:linear-gradient(225deg,#0D1517 50%,#C9D2CF 50%)}
.rep-cover:hover{transform:translateY(-4px) rotate(-.4deg)}
.rep-cover:focus-visible{outline:2px solid var(--g);outline-offset:4px}
.rc-k{font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#1A9B43}
.rc-t{margin-top:10px;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:21px;line-height:1.2;color:#0D1517}
.rc-row{display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid #DDE3E1;font-size:14px;color:#4A5A5E}
.rc-row:first-of-type{margin-top:22px}
.rc-row b{font-family:var(--disp);font-stretch:112%;font-weight:700;color:#0D1517;white-space:nowrap}
.rc-row.g b{color:#13843A}
.rc-bars{display:flex;align-items:flex-end;gap:5px;height:64px;margin-top:22px}
.rc-bars i{flex:1;height:calc(var(--h)*100%);background:linear-gradient(180deg,#1FCB4F 0 32%,#C8D3D0 32%)}
.rc-open{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:22px;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:15px;color:#13843A}
.rc-open svg{width:16px;height:16px;transition:transform .25s}
.rep-cover:hover .rc-open svg{transform:translateX(4px)}
@media (max-width:1020px){.rep{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.rep-n{grid-template-columns:1fr}.rep-n>div,.rep-n>div:nth-child(odd),.rep-n>div:nth-child(even){padding:22px 0;border-right:0}}

/* laatu: luku kortin pohjalla */
.tc .qn{margin-top:auto;padding-top:22px}
.tc .qn b{display:block;padding-top:18px;border-top:1px solid rgba(56,70,74,.8);font-family:var(--disp);font-stretch:118%;font-weight:700;font-size:clamp(26px,2.4vw,32px);color:var(--g);white-space:nowrap}
.tc .qn span{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:var(--mu)}

#ongelma .split .lead{margin-top:22px}
#ongelma .split .lead+.lead{margin-top:16px}

/* ===== suoja-alasivu ===== */
.days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.day>.in{padding:24px 26px}
.day p{margin-top:12px;font-size:16px;line-height:1.55;color:#D3DEE0}
.day mark{padding:1px 5px;border-radius:2px;background:rgba(240,73,55,.14);box-shadow:inset 0 0 0 1px rgba(240,73,55,.5);color:#FFB4A8}
@media (max-width:1020px){.days{grid-template-columns:minmax(0,1fr)}}

/* sääntödemo */
.sx{margin-top:56px;padding:clamp(20px,3vw,36px);background:linear-gradient(180deg,rgba(16,26,29,.97),rgba(13,21,23,.99));box-shadow:inset 0 0 0 1px rgba(56,70,74,.9)}
.sx-step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:18px;padding-bottom:26px}
.sx-step+.sx-step{padding-top:26px;border-top:1px dashed rgba(56,70,74,.9)}
.sx-n{display:grid;place-items:center;width:40px;height:40px;font-family:var(--disp);font-stretch:118%;font-weight:700;font-size:15px;color:#04170A;background:var(--g);clip-path:polygon(16% 14%,47% 4%,82% 10%,95% 35%,100% 69%,91% 80%,54% 100%,14% 83%,0 72%,2% 28%)}
.sx-k{display:block;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu2)}
.sx-prompt{margin-top:12px;padding:16px 18px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(56,70,74,.9);font:400 15px/1.7 "SF Mono",ui-monospace,Menlo,monospace;color:#D3DEE0}
.sx mark{padding:1px 5px;border-radius:2px;color:inherit;background:none;transition:background .4s,box-shadow .4s,color .4s}
.sx mark.hit,.sx-prompt mark{background:rgba(240,73,55,.16);box-shadow:inset 0 0 0 1px rgba(240,73,55,.6);color:#FFB4A8}
.sx mark.ps{background:rgba(31,203,79,.16);box-shadow:inset 0 0 0 1px rgba(31,203,79,.65);color:#BFF5CF}
.sx mark.fi{background:rgba(46,230,166,.1);box-shadow:inset 0 0 0 1px rgba(46,230,166,.5);color:#BFF5E3}
.sx mark.ok{background:none;box-shadow:inset 0 -2px 0 rgba(31,203,79,.7);color:var(--tx)}
.sx-found{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sx-found span{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;font-size:13px;color:#FFB4A8;background:rgba(240,73,55,.08);box-shadow:inset 0 0 0 1px rgba(240,73,55,.45)}
.sx-found span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--o)}
.sx-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.sx-tabs button{appearance:none;-webkit-appearance:none;cursor:pointer;min-height:72px;padding:12px 14px;text-align:left;background:rgba(255,255,255,.03);border:1px solid rgba(159,176,179,.28);border-radius:0;color:var(--tx);transition:border-color .2s,background .2s}
.sx-tabs b{display:block;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:17px;line-height:1.2}
.sx-tabs span{display:block;margin-top:4px;font-size:13px;line-height:1.35;color:var(--mu)}
.sx-tabs button:hover{border-color:rgba(31,203,79,.6)}
.sx-tabs button[aria-selected=true]{border-color:var(--g);background:rgba(31,203,79,.1)}
.sx-tabs button[aria-selected=true] b{color:var(--g)}
.sx-tabs button[data-m=block][aria-selected=true]{border-color:var(--o);background:rgba(240,73,55,.1)}
.sx-tabs button[data-m=block][aria-selected=true] b{color:#FF8A7A}
.sx-tabs button:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.sx-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-left:58px}
.sx-col{padding:18px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(56,70,74,.9)}
.sx-col .sx-k{margin-bottom:12px}
.sx-dest{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:4px 10px;font-size:12.5px;font-weight:500;color:var(--mu);box-shadow:inset 0 0 0 1px rgba(159,176,179,.35)}
.sx-dest::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mu2)}
.sx-dest.fi{color:#BFF5CF;box-shadow:inset 0 0 0 1px rgba(31,203,79,.55)}.sx-dest.fi::before{background:var(--g);box-shadow:0 0 8px var(--g)}
.sx-dest.x{color:#FFB4A8;box-shadow:inset 0 0 0 1px rgba(240,73,55,.5)}.sx-dest.x::before{background:var(--o)}
.sx-txt{margin:0;font:400 14px/1.65 "SF Mono",ui-monospace,Menlo,monospace;color:#C9D6D8}
.sx-none{color:var(--mu2);font-style:italic}
.sx-stop{display:block;padding:10px 12px;color:#FFB4A8;background:rgba(240,73,55,.1);box-shadow:inset 0 0 0 1px rgba(240,73,55,.45);font-family:var(--body)}
.sx-log{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sx-log li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(56,70,74,.9);font-size:14px;color:#C9D6D8}
.sx-log em{flex:none;padding:3px 8px;font-style:normal;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#BFF5CF;box-shadow:inset 0 0 0 1px rgba(31,203,79,.55)}
.sx-log em.log{color:var(--mu);box-shadow:inset 0 0 0 1px rgba(159,176,179,.4)}
.sx-log em.block{color:#FFB4A8;box-shadow:inset 0 0 0 1px rgba(240,73,55,.55)}
.sx-log li.sx-note{display:block;padding:8px 0 0;background:none;box-shadow:none;font-size:13.5px;line-height:1.5;color:var(--mu)}
.sx.swap .sx-out .sx-col{animation:sxIn .45s cubic-bezier(.2,.7,.2,1) both}
.sx.swap .sx-out .sx-col:nth-child(2){animation-delay:.08s}.sx.swap .sx-out .sx-col:nth-child(3){animation-delay:.16s}
@keyframes sxIn{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:1020px){.sx-out{grid-template-columns:minmax(0,1fr);margin-left:0}.sx-tabs{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.sx-step{grid-template-columns:minmax(0,1fr);gap:12px}.sx-prompt{font-size:14px;padding:14px}.sx-tabs button{min-height:64px;padding:10px 12px}.sx-tabs b{font-size:15.5px}.sx-tabs span{font-size:12px}}
@media (prefers-reduced-motion:reduce){.sx.swap .sx-out .sx-col{animation:none}}

/* todiste: estetyt pyynnöt */
.blk>.in{padding:clamp(26px,3vw,40px)}
.blk .mk-k{margin-bottom:8px}
.blk-r{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(56,70,74,.7)}
.blk-r b{font-family:var(--disp);font-stretch:118%;font-weight:700;font-size:clamp(28px,2.6vw,36px);line-height:1;color:var(--tx);text-align:right;font-variant-numeric:tabular-nums}
.blk-r span{display:block;font-size:15px;line-height:1.4;color:#C4D1D3}
.blk-r i{display:block;height:6px;margin-top:10px;width:calc(var(--w)*100%);min-width:6px;background:var(--o);transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .3s}
.blk.in .blk-r i{transform:none}
.blk .bars-n{margin-top:18px}

/* ===== suvereniteetti-alasivu ===== */
.opt3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.opt3 .prob .pv{margin:-10px -10px 22px}
.opt3 .prob p{margin-bottom:0}
@media (max-width:1020px){.opt3{grid-template-columns:minmax(0,1fr)}}
#ongelma .prob.ok .pv{margin:-10px 0 -10px -10px}
@media (max-width:1020px){#ongelma .prob.ok .pv{margin:0 0 20px}}

/* lakivalitsin */
.lx{margin-top:56px;padding:clamp(20px,3vw,36px);background:linear-gradient(180deg,rgba(16,26,29,.97),rgba(13,21,23,.99));box-shadow:inset 0 0 0 1px rgba(56,70,74,.9)}
.lx-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lx-tabs button{appearance:none;-webkit-appearance:none;cursor:pointer;min-height:72px;padding:12px 16px;text-align:left;background:rgba(255,255,255,.03);border:1px solid rgba(159,176,179,.28);border-radius:0;color:var(--tx);transition:border-color .2s,background .2s}
.lx-tabs b{display:block;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:17px;line-height:1.2}
.lx-tabs span{display:block;margin-top:4px;font-size:13px;color:var(--mu)}
.lx-tabs button:hover{border-color:rgba(159,176,179,.6)}
.lx-tabs button[aria-selected=true]{border-color:var(--o);background:rgba(240,73,55,.08)}
.lx-tabs button[aria-selected=true] b{color:#FF8A7A}
.lx-tabs button[data-k=fi][aria-selected=true]{border-color:var(--g);background:rgba(31,203,79,.1)}
.lx-tabs button[data-k=fi][aria-selected=true] b{color:var(--g)}
.lx-tabs button:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.lx-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(24px,3vw,36px)}
.lx-ring{position:relative;padding:40px 18px 18px;box-shadow:inset 0 0 0 1.5px var(--rc);background:var(--rb);transition:box-shadow .5s,background .5s}
.lx-ring>span{position:absolute;left:14px;top:12px;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rt);transition:color .5s;white-space:nowrap}
.lx-ring.x{--rc:rgba(240,73,55,.65);--rb:rgba(240,73,55,.05);--rt:#FF8A7A}
.lx-ring.ok{--rc:rgba(31,203,79,.65);--rb:rgba(31,203,79,.05);--rt:#7CEB9C}
.lx-ring.r3{padding:44px 22px 22px}
.lx-ring.r1{padding:40px 18px 22px;border-style:dashed}
.lx-data{display:grid;grid-template-columns:repeat(3,22px);gap:6px;justify-content:center;padding:6px 0}
.lx-data i{width:22px;height:22px;background:var(--g);border-radius:3px;box-shadow:0 0 12px rgba(31,203,79,.35);transition:background .5s,box-shadow .5s}
.lx[data-k=cn] .lx-data i{background:#C9604F;box-shadow:0 0 12px rgba(240,73,55,.35)}
.lx[data-k=us] .lx-data i{box-shadow:0 0 0 2px rgba(240,73,55,.55)}
.lx-qa{margin:0;display:grid;gap:0;border-top:1px solid rgba(56,70,74,.8)}
.lx-qa>div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;padding:14px 0 14px 18px;border-bottom:1px solid rgba(56,70,74,.8);position:relative}
.lx-qa>div::before{content:"";position:absolute;left:0;top:21px;width:8px;height:8px;border-radius:50%;background:var(--o)}
.lx-qa>div.ok::before{background:var(--g);box-shadow:0 0 8px var(--g)}
.lx-qa dt{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:15px;line-height:1.4;color:var(--tx)}
.lx-qa dd{margin:0;font-size:15px;line-height:1.55;color:#C4D1D3}
.lx.swap .lx-qa>div{animation:sxIn .45s cubic-bezier(.2,.7,.2,1) both}
.lx.swap .lx-qa>div:nth-child(2){animation-delay:.05s}.lx.swap .lx-qa>div:nth-child(3){animation-delay:.1s}.lx.swap .lx-qa>div:nth-child(4){animation-delay:.15s}.lx.swap .lx-qa>div:nth-child(5){animation-delay:.2s}
@media (max-width:1020px){.lx-body{grid-template-columns:minmax(0,1fr)}.lx-vis{max-width:460px;width:100%;margin:0 auto}}
@media (max-width:640px){.lx-tabs{grid-template-columns:minmax(0,1fr)}.lx-tabs button{min-height:60px}.lx-qa>div{grid-template-columns:minmax(0,1fr);gap:4px}}
@media (prefers-reduced-motion:reduce){.lx.swap .lx-qa>div{animation:none}}

/* todiste: oma kapasiteetti */
.sv-proof .svp{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.svp>div{padding:18px 0;border-bottom:1px solid rgba(31,203,79,.22)}
.svp b{display:block;font-family:var(--disp);font-stretch:118%;font-weight:700;font-size:clamp(30px,3vw,42px);line-height:1;color:var(--tx);white-space:nowrap}
.svp>div:first-child b{color:var(--g);text-shadow:0 0 30px rgba(31,203,79,.3)}
.svp span{display:block;margin-top:8px;font-size:14.5px;line-height:1.45;color:#C4D1D3}
.sv-proof .bars-n{margin-top:18px}
@media (max-width:520px){.sv-proof .svp{grid-template-columns:1fr}}
.demo mark,.sx-txt mark{white-space:nowrap}

/* vierekkäiset palstat samaan korkeuteen (Jannen linjaus): kortti venyy tekstin mittaiseksi */
.proof{align-items:stretch}
.proof-n{display:flex;flex-direction:column;justify-content:center}
.proof-t{display:flex;flex-direction:column;justify-content:center}
#ongelma .split,#todiste .split{align-items:stretch}
#ongelma .split>div:first-child,#todiste .split>div:first-child{display:flex;flex-direction:column;justify-content:center}
#ongelma .split>div:first-child>*,#todiste .split>div:first-child>*{align-self:flex-start}
.tasks>.in{display:flex;flex-direction:column}
.tasks .tsk{flex:1;display:flex;flex-direction:column;justify-content:space-evenly}
.blk>.in,.sv-proof>.in{display:flex;flex-direction:column;justify-content:center}
.lx-body{align-items:stretch}
.lx-vis{display:flex}
.lx-vis .lx-ring{flex:1;display:flex;flex-direction:column}
.lx-vis .lx-data{margin:auto}
.flow{align-items:stretch}
.flow>.fl-node{display:flex;flex-direction:column;justify-content:center}
@media (max-width:1020px){.flow{align-items:center}}

/* suoja: käyttökohdematriisi */
.mx{margin-top:48px;border-top:1px solid rgba(31,203,79,.5)}
.mx>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:center;padding:18px 16px;border-bottom:1px solid rgba(56,70,74,.8)}
.mx .mx-h{padding-top:14px;padding-bottom:14px;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--g)}
.mx b{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:16.5px;color:var(--tx)}
.mx span[role=cell]{display:flex;align-items:baseline;gap:10px;font-size:15px;line-height:1.45;color:#C4D1D3}
.mx i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--mu2);transform:translateY(-1px)}
.mx i.g{background:var(--g);box-shadow:0 0 8px rgba(31,203,79,.6)}
.mx i.x{background:var(--o)}
.mx>div:not(.mx-h):hover{background:rgba(255,255,255,.02)}
.mx-n{margin-top:16px;font-size:14.5px;color:var(--mu2)}
@media (max-width:860px){
  .mx .mx-h{display:none}
  .mx>div{grid-template-columns:minmax(0,1fr);gap:8px;padding:18px 4px}
  .mx span[role=cell]::before{content:attr(data-k);flex:none;width:7.5em;order:-1;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mu2)}
}
.tx .slog{margin-top:18px;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:clamp(20px,1.8vw,24px);color:var(--g)}
.trade .slog{margin-top:18px;font-size:16.5px;line-height:1.55;color:#C4D1D3;max-width:44ch}
@media (max-width:860px){.mx span[role=cell]::before{width:auto;min-width:0;flex:0 0 122px;font-size:10px;letter-spacing:.06em}}
.blk-big{display:flex;align-items:center;gap:20px;padding:10px 0 24px;border-bottom:1px solid rgba(56,70,74,.7)}
.blk-big b{font-family:var(--disp);font-stretch:118%;font-weight:700;font-size:clamp(56px,6vw,84px);line-height:.9;letter-spacing:-.03em;color:var(--g);text-shadow:0 0 36px rgba(31,203,79,.35)}
.blk-big span{font-size:16px;line-height:1.45;color:#C4D1D3;max-width:20ch}
.blk-share{padding-top:22px}
.blk-tr{height:12px;background:rgba(159,176,179,.18)}
.blk-tr i{display:block;height:100%;width:calc(var(--w)*100%);min-width:8px;background:var(--g);box-shadow:0 0 12px rgba(31,203,79,.6)}
.blk-l{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:14px;color:var(--mu)}
.blk-l b{font-family:var(--disp);font-stretch:112%;font-weight:700;color:var(--tx)}

/* säästö: ote todellisesta raportista */
.rpx{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.rpx .lead{margin-top:22px;max-width:44ch}
.rpx-k{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid rgba(56,70,74,.8)}
.rpx-k li{padding:13px 0 13px 22px;position:relative;border-bottom:1px solid rgba(56,70,74,.8);font-size:15.5px;line-height:1.5;color:var(--mu)}
.rpx-k li::before{content:"";position:absolute;left:0;top:21px;width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 8px rgba(31,203,79,.6)}
.rpx-k b{color:var(--tx);font-weight:600}
.rpx-pdf{display:inline-block;margin-top:22px;font-size:14.5px;color:var(--mu);text-decoration:none;border-bottom:1px solid rgba(159,176,179,.4)}
.rpx-pdf:hover{color:var(--tx);border-color:var(--g)}
.rpx-fig{margin:0;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.rpx-paper{--c:22px;padding:clamp(10px,1.4vw,18px);background:#fff;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));transform:rotate(-.6deg);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.rpx-fig:hover .rpx-paper{transform:none}
.rpx-paper img{width:100%;height:auto;display:block}
.rpx-fig figcaption{margin-top:16px;font-size:14px;color:var(--mu2);text-align:center}
@media (max-width:1020px){.rpx{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.rpx-paper{transform:none}}
@media (prefers-reduced-motion:reduce){.rpx-paper{transition:none}}
/* mobiilissa kuva heti otsikon ja johdannon jälkeen: raporttilinkistä tultaessa ote näkyy ensimmäisenä */
@media (max-width:1020px){
  .rpx{gap:0}
  .rpx-t{display:contents}
  .rpx-t .eyebrow{order:1;justify-self:start}
  .rpx-t h2{order:2}
  .rpx-t .lead{order:3}
  .rpx-fig{order:4;margin-top:32px}
  .rpx-k{order:5}
  .rpx-pdf{order:6;justify-self:start}
}
@media (max-width:640px){.rpx-t .eyebrow{justify-self:center}}
/* selaimen oma hash-vieritys ja ankkuriskripti päätyvät samaan kohtaan: osion yläpadding pitää otsikon irti navista */
section#raportti{scroll-margin-top:0}
@media (max-width:1020px){section#raportti{scroll-margin-top:40px}}
/* hintalohko: "jopa" pienellä samalla rivillä, selitteet mahtuvat kahdelle–kolmelle riville */
.stat b .jopa{font-style:normal;font-size:.5em;font-weight:600;letter-spacing:0;color:var(--mu);vertical-align:.18em}
.stats.v3 .stat span{max-width:22ch}
.hero.sub .stats.v3 .stat span{max-width:30ch}

/* kilpilaatikko CTA:n alla (pieni präntti pois, ehto tähän) */
.tbox{display:flex;gap:12px;align-items:flex-start;max-width:70ch;margin:22px 0 0;padding:14px 16px;border-left:2px solid var(--g);background:rgba(31,203,79,.06);font-size:15px;line-height:1.5;color:var(--mu);text-align:left}
.tbox svg{flex:0 0 20px;width:20px;height:20px;color:var(--g);margin-top:2px}
.tbox b{color:var(--tx);font-weight:600}
.close .tbox{margin:22px auto 0}
@media (max-width:640px){.tbox{margin-inline:auto}}

/* tiiviimpi alanavi */
.ft-col{gap:2px}.ft-col a,.ft-col span{line-height:1.5;font-size:15px}.ft-k{margin-bottom:8px}
.ft-bot .ft-r{display:flex;gap:18px;align-items:center}.ft-bot a{color:var(--mu2);text-decoration:none}.ft-bot a:hover,.ft-bot a:focus-visible{color:var(--g)}
.ft-lang{display:inline-flex;gap:6px;align-items:center}.ft-lang a[aria-current]{color:var(--tx);font-weight:600}

/* mobiili: hampurilaisvalikko (22.10.) */
.nav-links .nav-burger{display:none}
@media (max-width:1020px){
  .nav-links .nav-burger{display:inline-flex;align-items:center;justify-content:center;width:44px;padding:0;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
  .nav-burger svg{width:20px!important;height:20px!important;color:var(--tx)!important;display:block!important}
  .nav-links .nav-burger .ic-x,.nav.open .nav-links .nav-burger .ic-m{display:none!important}
  .nav.open .nav-links .nav-burger .ic-x{display:block!important}
  .nav-m{display:none}
  .nav.open{background:rgba(13,21,23,.97);border-color:rgba(56,70,74,.6)}
  .nav.open .nav-m{display:flex;flex-direction:column;max-width:var(--wrap);margin:0 auto;padding:6px var(--gut) 22px;max-height:calc(100svh - 68px);overflow-y:auto;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-top:1px solid rgba(56,70,74,.6)}
  .nav-m a{justify-content:flex-start;min-height:54px;padding-left:14px;font-size:17px;color:var(--tx);border-bottom:1px solid rgba(56,70,74,.45)}
  .nav-m a[aria-current=page]{color:var(--g)}
  .nav-m a[aria-current=page]::after{left:0;right:auto;top:17px;bottom:17px;width:3px;height:auto;background:var(--g)}
  .nav-m .nm-lang{display:flex;gap:10px;margin-top:18px;padding-left:14px}
  .nav-m .nm-lang a{min-height:40px;padding:0 16px;font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--mu);border:1px solid rgba(159,176,179,.4);border-bottom:1px solid rgba(159,176,179,.4)}
  .nav-m .nm-lang a[aria-current=page]{color:var(--bg);background:var(--g);border-color:var(--g)}
  .nav-m .nm-lang a[aria-current=page]::after{display:none}
  .h4{padding-top:88px}
  .hero{padding-top:120px}
  .hero.sub{padding-top:128px}
  section[id],main[id]{scroll-margin-top:92px}
}
@media (max-width:640px){.hero{padding-top:96px}.hero.sub{padding-top:104px}}

/* mobile: same section rhythm as the front page (96px between sections) */
@media (max-width:640px){.sec{padding:48px 0}}

/* report excerpt as illustration under a proof split */
.rep-row{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);margin-top:clamp(56px,6vw,88px)}
.rep-row .subh{margin:0}
@media (max-width:1020px){.rep-row{grid-template-columns:minmax(0,1fr)}.rep-row .rpx-fig{order:2;margin-top:24px}.rep-row .rpx-k{order:3}}

/* trust box text centred wherever its surroundings are centred */
.close .tbox{display:block;text-align:center}
.close .tbox svg{display:inline-block;vertical-align:-4px;margin-right:8px}
@media (max-width:640px){.hero .tbox{display:block;text-align:center}.hero .tbox svg{display:inline-block;vertical-align:-4px;margin-right:8px}}
.d4{transition-delay:.32s}