/* Shared by the Swedish (/) and English (/en) landing pages. */
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/familjen-grotesk-latin.woff2) format("woff2")}
:root{
  --bg:#f5f4f1;--surface:#fff;--raised:#ebe9e5;--text:#17171a;--muted:#5c5c65;--line:#dcdad5;--track:#e4e2dd;
  --accent:#b8402a;--on-accent:#fff;--positive:#0f6a5a;
  --mint:#11705f;--gold:#855a12;--blue:#2c618c;--coral:#a8406f;
  --mint-fill:#4fb3a0;--gold-fill:#d9a441;--blue-fill:#5e91b8;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#111113;--surface:#19191c;--raised:#222226;--text:#ededed;--muted:#a2a2ab;--line:#2e2e34;--track:#2a2a2f;
  --accent:#f26b50;--on-accent:#111113;--positive:#4fc8ae;
  --mint:#4fc8ae;--gold:#e6b35a;--blue:#8dbde6;--coral:#f08fb5;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.55 "Familjen Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;gap:10px;align-items:center;font-weight:700;font-size:19px;text-decoration:none;letter-spacing:-.3px}
.brand svg{width:28px;height:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;border:1.5px solid var(--line);background:var(--surface);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px -10px rgba(0,0,0,.35)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.small{min-height:38px;padding:0 16px;font-size:15px}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Hero */
.hero{min-height:calc(100svh - 60px);display:grid;place-items:center;text-align:center;padding:48px 0 72px}
.hero h1{font-size:clamp(42px,8vw,92px);line-height:1.02;letter-spacing:-.045em;margin:0 0 22px;font-weight:700}
.hero h1 span{color:var(--accent)}
.hero p{font-size:clamp(18px,2.2vw,22px);color:var(--muted);max-width:620px;margin:0 auto 34px}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hint{margin-top:56px;color:var(--muted);font-size:14px;display:flex;flex-direction:column;align-items:center;gap:8px}
.hint i{width:2px;height:36px;background:linear-gradient(var(--muted),transparent);animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.rise{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.rise.d1{animation-delay:.12s}.rise.d2{animation-delay:.24s}.rise.d3{animation-delay:.5s}
@keyframes rise{from{opacity:0;transform:translateY(28px)}}
/* The headline is what search engines time; it slides in but is never hidden. */
h1.rise{animation-name:lift}
@keyframes lift{from{transform:translateY(28px)}}

/* Story: a sticky tree beside steps that scroll past */
.story{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start}
.stage{position:sticky;top:60px;height:calc(100svh - 60px);display:grid;place-items:center}
.fig{position:relative;width:min(100%,520px);aspect-ratio:440/440}
.fig svg{width:100%;height:100%;overflow:visible}
.steps{padding:12vh 0 30vh}
.step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;opacity:.25;transform:translateY(24px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
.step.on{opacity:1;transform:none}
.step .n{font-size:14px;font-weight:600;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.step h2{font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.035em;margin:0 0 16px}
.step p{font-size:19px;color:var(--muted);margin:0;max-width:30em}

/* Tree parts: hidden until their step */
.t{transition:opacity .8s,transform .9s cubic-bezier(.2,.7,.2,1);transform-box:fill-box;transform-origin:center}
.goal,.who,.amount,.chip{opacity:0}
.goal{transform:scale(.6)}
.branch{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1)}
.ring{stroke-dasharray:calc(var(--p,0)*100) 100;transition:stroke-dasharray 1.4s cubic-bezier(.2,.7,.2,1)}
.who{transform:translateX(-14px)}
.s1 .goal{opacity:1;transform:none}
.s1 .g2{transition-delay:.15s}.s1 .g3{transition-delay:.3s}
.s1 .branch{stroke-dashoffset:0}
.s2 .who{opacity:1;transform:none}.s2 .who.b{transition-delay:.2s}
.s3 .amount{opacity:1}
.flow .stream{animation:stream 1.3s cubic-bezier(.4,0,.2,1) .45s both}
.flow .drop{animation:drop .6s cubic-bezier(.5,0,.8,.4) both}
.flow .amount{animation:pop 1.6s 1.2s both}
@keyframes stream{from{stroke-dashoffset:14}to{stroke-dashoffset:-100}}
@keyframes drop{0%{opacity:0;transform:translateY(-90px)}20%{opacity:1}90%{opacity:1}100%{opacity:0;transform:none}}
@keyframes pop{0%{opacity:0;transform:translateY(8px) scale(.8)}25%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
.stream,.drop{opacity:0}
.mark{opacity:0;transition:opacity .3s,r .3s}
.s4 .mark{opacity:1}
.s4 .mark.m1{transition-delay:.3s}.s4 .mark.m2{transition-delay:.6s}.s4 .mark.m3{transition-delay:.9s}
.s4 .chip{opacity:1;transition-delay:1.4s}
.bloom{opacity:0;transform-box:fill-box;transform-origin:center}
.s4 .bloom{animation:bloom 1.4s 1.3s both}
@keyframes bloom{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.7)}}
.tree{transition:opacity .6s,filter .6s}
.s5 .tree,.s6 .tree{opacity:.22;filter:blur(1.5px)}
.card{position:absolute;left:50%;top:50%;width:min(88%,360px);transform:translate(-50%,-40%) scale(.96);opacity:0;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 22px 18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.35);transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1)}
.card h3{margin:0 0 4px;font-size:15px;color:var(--muted);font-weight:600}
.card .big{font-size:28px;font-weight:700;letter-spacing:-.03em;margin:0 0 14px}
.card .row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:16px}
.card .row b{font-weight:600}
.card .later{color:var(--accent)}
.s5:not(.s6) .afford,.s6 .year{opacity:1;transform:translate(-50%,-50%)}
.year .stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.year .stat{background:var(--raised);border-radius:12px;padding:12px}
.year .stat b{display:block;font-size:24px;letter-spacing:-.03em}
.year .stat span{font-size:14px;color:var(--muted)}

/* Below the story */
section.block{padding:120px 0}
.block h2{font-size:clamp(32px,5vw,56px);letter-spacing:-.04em;line-height:1.05;margin:0 0 20px;text-align:center}
.block .lead{text-align:center;color:var(--muted);font-size:20px;max-width:640px;margin:0 auto 56px}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px}
.tile svg{width:28px;height:28px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.tile h3{margin:0 0 6px;font-size:18px}
.tile p{margin:0;color:var(--muted);font-size:16px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:880px;margin:0 auto}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px;display:flex;flex-direction:column;gap:18px}
.plan.pro{border:2px solid var(--accent)}
.plan h3{margin:0;font-size:20px}
.plan .price{font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:1}
.plan.pro .price{font-size:26px}
.plan ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;flex-grow:1}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li::before{content:"";flex:none;width:16px;height:16px;margin-top:5px;background:var(--positive);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.note{text-align:center;color:var(--muted);font-size:15px;margin:28px auto 0;max-width:620px}
.final{text-align:center;padding:140px 0 160px}
.final h2{font-size:clamp(40px,7vw,80px);letter-spacing:-.045em;line-height:1.02;margin:0 0 28px}
footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.on{opacity:1;transform:none}
/* Scroll-driven depth where the browser has it; the story works without it. */
@supports (animation-timeline:view()){
  .hero .wrap{animation:sink linear both;animation-timeline:view();animation-range:exit 0% exit 90%}
  @keyframes sink{to{opacity:0;transform:translateY(-60px) scale(.94)}}
}

@media (max-width:860px){
  .story{grid-template-columns:1fr;gap:0}
  .stage{top:60px;height:46svh;z-index:1;background:linear-gradient(var(--bg) 85%,transparent)}
  .fig{width:min(100%,46svh)}
  .steps{padding:2vh 0 24vh}
  .step{min-height:56svh;justify-content:flex-start}
  .step p{font-size:18px}
  .trust{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr}
  section.block{padding:88px 0}
}
@media (max-width:520px){
  .wrap{padding:0 16px}
  .trust{grid-template-columns:1fr}
  .header-cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .stream,.drop,.bloom{display:none}
}
header nav{display:flex;gap:10px;align-items:center}
.lang{font-size:15px;font-weight:600;color:var(--muted);text-decoration:none;padding:8px 6px}
.lang:hover{color:var(--text)}