:root{
  --green:#0a6c4f; --green-d:#08543d; --green-l:#e6f2ed;
  --ink:#12211b; --ink-2:#4c5f57; --ink-3:#62716a;
  --line:#e3ebe7; --bg:#f3f7f5; --card:#ffffff;
  --amber:#b7791f; --red:#c0392b; --blue:#2f6fb2;
  --radius:14px; --shadow:0 10px 30px rgba(15,40,30,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
/* The page gradient spans the whole document (background-size 100% 100%), so
   the green deepens as the visitor scrolls. html carries a flat colour so the
   body's background is painted on its own box instead of being propagated to
   the canvas — otherwise the gradient would collapse to viewport height. */
body{margin:0;color:var(--ink);
  background-color:var(--bg);
  background-image:url(bg.svg),linear-gradient(180deg,#ffffff 0%,#f4faf7 14%,#e6f4ed 32%,#d3ecdf 52%,#bde4ce 72%,#a5dabc 88%,#93d3ae 100%);
  background-repeat:repeat,no-repeat;
  background-size:40px 40px,100% 100%;
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Noto Sans SC","Noto Sans JP","Noto Sans KR","Noto Sans Arabic","Noto Sans Hebrew","Noto Sans Thai","Noto Sans Devanagari","Noto Sans Bengali","Noto Sans Tamil","Noto Sans Telugu","Noto Sans Georgian","Noto Sans Armenian","Noto Sans Ethiopic",sans-serif;}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.narrow{max-width:820px}
/* Long unbreakable compounds (fi "Nettovarallisuuslaskuri", de …) otherwise
   push past the viewport on a narrow phone. The document's lang attribute is
   kept in sync by the app, so hyphens:auto hyphenates in the right language. */
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(28px,4.2vw,42px);line-height:1.15;margin:0 0 12px;font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(20px,2.6vw,27px);margin:0;font-weight:750;letter-spacing:-.01em}
h3{font-size:18px;margin:26px 0 8px;font-weight:700}
h3:first-of-type{margin-top:18px}
p{margin:8px 0}

/* ---------- live FX ticker ---------- */
/* Transparent bar: it sits straight on the page gradient, so the type has to
   be dark — the previous white-on-dark palette is invisible here. */
.fxbar{background:transparent;color:var(--ink-2);overflow:hidden;font-size:13px;line-height:1.2}
.fxbar[hidden]{display:none}
.fxbar-in{display:flex;width:max-content;animation:fxtick 55s linear infinite}
/* The track holds the same run twice; shifting it exactly one copy (-50%)
   is what makes the loop seamless. The second copy is hidden from AT. */
.fxcopy{display:flex}
.fxcopy>span{display:inline-flex;align-items:baseline;gap:6px;padding:8px 18px;white-space:nowrap;
  font-variant-numeric:tabular-nums;border-right:1px solid var(--line)}
.fxcopy>span i{font-style:normal;color:#000;font-size:12px;letter-spacing:.02em}
.fxcopy>span b{font-weight:700;color:var(--ink)}
/* Direction marks: green for up, red for down — the Western convention. */
.fxcopy>span em{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.01em}
.fxcopy>span em.up{color:#0f8a63}
.fxcopy>span em.down{color:var(--red)}
@keyframes fxtick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .fxbar-in{animation:none;overflow-x:auto;scrollbar-width:none}
  .fxbar-in::-webkit-scrollbar{display:none}
}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:18px;height:60px}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:800;font-size:19px;letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand-mark{width:27px;height:27px;border-radius:7px;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.brand-mark svg{width:16px;height:16px}
.nav{display:flex;gap:18px;margin-left:auto}
@media (max-width:760px){.nav{display:none}}
.nav a{color:var(--ink-2);font-weight:600;font-size:15px}
.nav a:hover{color:var(--green);text-decoration:none}
.langpick{display:flex;align-items:center;gap:6px;color:var(--ink-2)}
.langpick select{border:1px solid var(--line);border-radius:9px;padding:7px 8px;font:inherit;font-size:14px;background:#fff;color:var(--ink);max-width:170px;cursor:pointer}
.globe{width:17px;height:17px;flex:none}
.curpick select{max-width:132px;font-variant-numeric:tabular-nums}
@media (max-width:520px){
  /* Nav is hidden here, so the two pickers share what the brand leaves.
     flex:1 1 0 + min-width:0 lets them shrink below their longest option
     instead of pushing the bar (and the whole page) into overflow. */
  .top-in{gap:10px;padding-left:12px;padding-right:12px}
  .brand{font-size:17px}
  .langpick .globe,.curpick .globe{display:none}
  .langpick{margin-left:auto}
  .langpick,.curpick{flex:1 1 0;min-width:0}
  .langpick select,.curpick select{width:100%;max-width:none;min-width:0}
  /* nowrap on the "updates as you type" chip stops the flex row shrinking
     below its text, which pushes the whole result card past the viewport in
     the longer translations (de, ru, …). Let it wrap instead. */
  .res-head{flex-wrap:wrap;gap:2px 10px}
  .res-state{white-space:normal}
  .prj-col .val{font-size:9px}
}

/* ---------- hero ---------- */
.hero{background:radial-gradient(120% 145% at 50% -42%,#ffffff 0%,#e3f1ea 26%,#c7e5d6 50%,rgba(199,229,214,.62) 72%,rgba(243,247,245,.40) 100%);padding:38px 0 34px;border-bottom:1px solid var(--line)}
.eyebrow{font-size:13px;color:var(--ink-3);margin-bottom:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.lead{max-width:720px;font-size:18px;color:var(--ink-2);margin:0}

/* ---------- calculator ---------- */
.calcsec{padding:26px 0 6px}
.calc-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
@media (max-width:940px){.calc-grid{grid-template-columns:minmax(0,1fr)}.result-col{order:-1}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 10px;margin-bottom:22px;box-shadow:var(--shadow)}
.panel legend{padding:0}
.panel h2{display:inline-block}
.panel-note{color:var(--ink-3);font-size:14px;margin:-2px 0 14px}
.field{margin-bottom:12px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.input{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:#fff;transition:border-color .15s, box-shadow .15s}
.input:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(10,108,79,.14)}
.input .cur{color:var(--ink-3);padding-left:0;padding-inline-start:12px;padding-inline-end:0;font-weight:600}
.input .cur.post{order:5;padding-inline-start:0;padding-inline-end:12px}
.input input{border:0;outline:0;background:transparent;font:inherit;font-size:16px;padding:11px 8px;width:100%;min-width:0;color:var(--ink)}
.input .suf{color:var(--ink-3);padding-right:12px;font-weight:600}
details.more{margin:6px 0 16px;border-top:1px dashed var(--line);padding-top:10px}
details.more summary{list-style:none;cursor:pointer;font-weight:700;font-size:15px;color:var(--green);display:inline-flex;align-items:center;gap:8px;user-select:none}
details.more summary::-webkit-details-marker{display:none}
details.more summary .chev{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s}
details.more[open] summary .chev{transform:rotate(-135deg);margin-top:4px}
.more-body{margin-top:12px}
.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:6px}
@media (max-width:640px){.opt-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- result ---------- */
.result-col{position:sticky;top:80px}
.result-card{background:linear-gradient(180deg,#ffffff,#fbfefd);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.result-card.neg{border-color:#f3d9d5}
.res-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.res-head h2{font-size:17px}
.res-state{font-size:12px;color:var(--ink-3);white-space:nowrap}
.res-total{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.02em;margin:8px 0 16px;color:var(--green-d);word-break:break-word}
.res-total.neg{color:var(--red)}
.res-bars .res-row{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-2);padding:4px 0}
.res-bars .res-row b{margin-left:auto;color:var(--ink);font-variant-numeric:tabular-nums}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.dot-asset{background:var(--green)}
.dot-debt{background:#d9813a}
.res-track{height:7px;border-radius:6px;background:#eee;margin:10px 0 18px;overflow:hidden}
.res-track i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#2ea878);transition:width .25s}
.btn{border:0;cursor:pointer;font:inherit;font-weight:700;border-radius:10px;padding:12px 18px;font-size:15px;transition:transform .06s, background .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-d)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn-block{display:block;width:100%;margin-top:6px}
.form-actions{display:flex;justify-content:flex-end;margin:0 0 18px}
.icon-btn{padding:8px 12px}
.privacy{font-size:12.5px;color:var(--ink-3);text-align:center;margin:10px 0 0}

/* ---------- bands ---------- */
.band{padding:34px 0}
.band.compare{background:rgba(255,255,255,.45);border-block:1px solid var(--line)}
.sec-head h2{display:inline-block}
.sec-head>p{color:var(--ink-2);max-width:640px;margin-top:2px}
.cmp-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-top:6px}
.cmp-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
@media (max-width:700px){.cmp-row{grid-template-columns:minmax(0,1fr)}}
.cmp-cell{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.cmp-cell .k{display:block;font-size:12.5px;color:var(--ink-3);font-weight:600;margin-bottom:2px}
.cmp-cell .v{font-size:20px;font-weight:800;color:var(--green-d);font-variant-numeric:tabular-nums}
.cmp-verdict{font-size:17px;font-weight:600;background:var(--green-l);border-radius:10px;padding:12px 16px;color:var(--green-d)}
.cmp-verdict .tbl-note{display:block;font-weight:500;color:var(--ink-2)}
.cmp-scale{position:relative;height:26px;margin:24px 26px 0;background:linear-gradient(90deg,#f7d5cf, #fdf0d0 22%,#e6f2ed 40%,#cde9dd 60%,#9fd6c1 78%,#5bb493);border-radius:7px;overflow:visible}
.cmp-scale:after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.25);pointer-events:none}
.cmp-tick{position:absolute;top:-4px;bottom:auto;width:0;height:8px;border-left:1.5px solid rgba(40,60,50,.5)}
.cmp-tick i{position:absolute;top:12px;left:0;transform:translateX(-50%);font-style:normal;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.cmp-you{position:absolute;top:-13px;transform:translateX(-50%);color:var(--green-d);font-size:11px;font-weight:800;text-align:center;white-space:nowrap;z-index:2}
.cmp-you:before{content:"▲";display:block;font-size:9px;line-height:1;color:var(--green-d)}
.cmp-you b{display:block;font-size:11px;background:var(--green-d);color:#fff;border-radius:5px;padding:2px 8px;margin-top:2px;letter-spacing:.02em}
.cmp-note{margin:10px 0 0;color:var(--ink-3);font-size:14px}
.conv-note{margin:8px 0 0;color:var(--ink-3);font-size:12px;line-height:1.45;font-style:italic}
[hidden]{display:none !important}

/* projection */
.prj-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.prj-bars{display:flex;align-items:flex-end;gap:7px;height:190px;margin-bottom:8px;padding-top:10px}
.prj-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.prj-col .bar{width:100%;max-width:52px;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,var(--green),#8fcab1);transition:height .3s;position:relative}
.prj-col .val{font-size:10px;color:var(--ink-2);font-weight:600;height:12px;font-variant-numeric:tabular-nums;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.prj-col .lab{font-size:11px;color:var(--ink-3)}
.prj-note{font-size:13px;color:var(--ink-3);margin-top:6px;text-align:center}

/* next steps */
.band.next{background:rgba(255,255,255,.45);border-block:1px solid var(--line)}
.card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
@media (max-width:820px){.card-row{grid-template-columns:minmax(0,1fr)}}
.step-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-weight:800;margin-bottom:8px}
.step-card h3{margin:0 0 6px;font-size:16px}
.step-card p{font-size:14px;color:var(--ink-2);margin:0}

/* learn */
.learn .list{margin:6px 0 0;padding-left:20px;color:var(--ink-2)}
.formula{background:var(--green-l);border-left:4px solid var(--green);padding:10px 14px;border-radius:6px;font-weight:700;font-size:17px;margin:8px 0;color:var(--green-d)}
.age-table{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:4px}
.age-row{display:contents}
.age-row>span{padding:8px 12px;border-bottom:1px solid var(--line);font-size:14px}
.age-row>span:first-child{font-weight:600;color:var(--ink-2)}
.age-row>span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.age-table .age-head>span{background:var(--green-l);font-weight:700;color:var(--green-d);font-size:13px}
.tbl-note{color:var(--ink-3);font-size:13.5px}

/* faq */
.band.faq{background:rgba(255,255,255,.45);border-top:1px solid var(--line)}
.acc details{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:var(--bg)}
.acc summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:10px;user-select:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary .chev{width:10px;height:10px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);flex:none;transition:transform .2s}
.acc details[open] summary .chev{transform:rotate(-135deg)}
.acc details p{margin:0;padding:0 16px 15px;color:var(--ink-2)}

/* footer */
.footer{background:#0e1f19;color:#bcd4ca;padding:30px 0 40px;font-size:13.5px}
.foot-in{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:start}
@media (max-width:700px){.foot-in{grid-template-columns:minmax(0,1fr)}}
.foot-brand .brand-name{color:#fff;font-size:17px;font-weight:800}
.foot-in p{margin:6px 0 0;color:#8faaa0}
.foot-src,.foot-copy{color:#8faaa0}
.foot-brand .brand-name{display:inline-flex;gap:8px;align-items:center}

/* modal */
.pop{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:4vh 16px}
.pop[hidden]{display:none}
.pop-back{position:absolute;inset:0;background:rgba(10,20,16,.55)}
.pop-card{position:relative;background:#fff;border-radius:16px;width:100%;max-width:760px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.pop-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.pop-head h2{margin:0;font-size:19px}
.pop-actions{display:flex;gap:8px}
.pop-body{padding:20px;overflow:auto}
.rpt-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap;background:linear-gradient(135deg,var(--green),#0f8a66);color:#fff;border-radius:12px;padding:18px 20px;margin-bottom:16px}
.rpt-hero .lab{font-size:13px;opacity:.85;font-weight:600}
.rpt-hero .num{font-size:34px;font-weight:800;letter-spacing:-.02em}
.rpt-sum{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:12px}
@media (max-width:560px){.rpt-sum{grid-template-columns:minmax(0,1fr)}}
.rpt-box{border:1px solid var(--line);border-radius:12px;padding:14px}
.rpt-box .lab{font-size:12px;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.rpt-box .num{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.rpt-box.g .num{color:var(--green-d)}
.rpt-box.o .num{color:#b7791f}
.rpt-ratio{display:flex;gap:10px;align-items:center;background:var(--bg);border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:15px}
.rpt-ratio b{margin-left:auto}
.rpt-sec h4{margin:14px 0 6px;font-size:14px;text-transform:uppercase;color:var(--ink-3);letter-spacing:.03em}
.rpt-line{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line);font-size:14.5px;color:var(--ink-2)}
.rpt-line b{color:var(--ink);font-variant-numeric:tabular-nums}
.rpt-note{font-size:12.5px;color:var(--ink-3);margin-top:14px;border-top:1px solid var(--line);padding-top:10px}

/* print */
.print-root{display:none}
@media print{
  body{background:#fff}
  .topbar,.hero,.calcsec,.band,.footer,.pop{display:none !important}
  .print-root{display:block}
  .print-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:3px solid var(--green);padding-bottom:8px;margin-bottom:12px}
  .print-head .lab{font-size:12px;color:#666;text-transform:uppercase;letter-spacing:.03em}
  .print-head .num{font-size:32px;font-weight:800}
  .rpt-line{break-inside:avoid}
  .print-root h3{font-size:15px}
  .avoid-break{break-inside:avoid}
}
[dir="rtl"] .res-bars .res-row b{margin-left:0;margin-right:auto}
[dir="rtl"] .cmp-tick i{transform:translateX(50%)}