/* The front page of chango.fit (Figma: Piirtopöytä • Markkinointi → Chango.fit
   • Versio A; desktop 2720:6712, mobile 2770:8943, menu 2787:2178).
   The top is blue, the rest light. The other views of the wait list (check,
   thanks, left, expired) keep the dark card on the blue background, see
   waitlist.css; this file only styles the long page (#home) and, while it
   shows, turns the dark scene off. */
@font-face{
  font-family:"Luckiest Guy";
  font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/luckiest-guy.woff2) format("woff2");
}
:root{
  --blue80:#2c4c6f; --blue2:#f0f5fb; --blue5:#e5eef7; --blue10:#b7c6d5; --blue30:#809bb6;
  --text:#4c4c4c; --orange:#ff8c00; --yellow:#ffc421;
  --u:min(100vw, 520px);   /* the width the mobile layout is built on */
}
html:has(body.v-home){background:#fff; scroll-behavior:smooth}
body.wl.v-home{display:block; padding:0; background:#fff; color:var(--blue80)}
.v-home .scene, .v-home .logo, .v-home .site-foot{display:none}
.site{display:block; font-family:var(--font); color:var(--blue80); -webkit-font-smoothing:antialiased; overflow-x:clip}
.site[hidden]{display:none}
.site section{scroll-margin-top:0}
.site em{font-family:"Luckiest Guy", var(--font); font-style:normal; font-weight:400; letter-spacing:-.32px}
:where(.site) :is(h1, h2, h3, p){margin:0}
.site :is(h1, h2, h3){font-weight:300}
.site a{color:inherit}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.site [hidden]{display:none !important}

/* ---- Top (blue) ---- */
.site{--hh:max(700px, 100svh)}   /* the blue top reaches the fold; the phone carries on 120 px below it (Jenni 10.10.2026) */
.hero{position:relative; z-index:2; height:var(--hh); color:#fff}
.hero-bg, .hero-apina{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-apina{object-position:right center}
.hero-in{position:absolute; left:6.8%; top:calc(var(--hh) * .225); width:min(560px, 52%)}
.hero-in h1{font-size:64px; line-height:80px; letter-spacing:-1.28px; color:#fff}
.hero-text{margin-top:28px; font-size:19px; line-height:30px; letter-spacing:-.38px; width:539px; max-width:100%}
.hero-soon{margin-top:20px; font-size:19px; line-height:30px; letter-spacing:-.38px; font-weight:800}
.hero .hf{margin-top:28px}
.hero-phone{position:absolute; left:max(51%, 640px); top:calc(var(--hh) - 480px); width:303px}

.nav{
  position:absolute; z-index:5; left:16px; right:16px; top:16px; height:88px;
  display:flex; align-items:center; justify-content:space-between; padding:0 48px;
  border-radius:12px; background:rgba(0,0,0,.2); border:1px solid rgba(0,0,0,.3);
  color:var(--blue2); font-size:17px; letter-spacing:-.34px;
}
.nav-logo img{display:block; width:154px; height:auto}
.nav-links{display:flex; gap:80px}
.nav a{text-decoration:none}
.nav-join{display:flex; align-items:center; gap:12px}
.ball{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.3)}
.nav-burger, .menu-close{display:none}

/* Email pill (hero and bottom) */
.hf{
  display:flex; align-items:center; gap:8px; width:520px; max-width:100%; height:64px;
  padding:8px 8px 8px 24px; border-radius:32px;
  background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hf-input{
  flex:1; min-width:0; height:100%; padding:0; border:0; outline:0; background:none;
  font:400 17px/24px var(--font); letter-spacing:-.34px; color:#fff;
}
.hf-input::placeholder{color:#989898}
/* Autofill (Safari, Chrome) paints a light box over the pill: keep it dark */
.hf-input{border-radius:24px}
.hf-input:-webkit-autofill, .hf-input:-webkit-autofill:hover, .hf-input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff; caret-color:#fff;
  -webkit-box-shadow:0 0 0 1000px #222b38 inset; box-shadow:0 0 0 1000px #222b38 inset;
  transition:background-color 600000s 0s, color 600000s 0s;
}
.hf:focus-within{border-color:#fff}
.hf-btn{
  flex:none; height:48px; padding:0 24px; border:0; border-radius:24px; cursor:pointer;
  background:linear-gradient(90deg, var(--yellow), var(--orange)); color:#000;
  font:600 16px/24px var(--font); white-space:nowrap; filter:drop-shadow(0 2px 10px rgba(0,0,0,.06));
}
.hf-btn:focus-visible{outline:2px solid #fff; outline-offset:2px}
.hf-btn:disabled{opacity:.6; cursor:default}
.hf-btn .short{display:none}
.hf-consent{margin-top:12px; width:520px; max-width:100%; text-align:center; font-size:12px; line-height:16px; color:var(--blue10)}
.hf-consent a{text-underline-position:from-font}
.site .wl-error{width:520px; max-width:100%; margin-top:10px; text-align:center; font-size:14px; line-height:20px; color:#ffb4a8}

/* Turnstile appears over the page only if it needs the reader */
.wl-turnstile{position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:200}
.wl-turnstile{opacity:0; pointer-events:none}   /* shown only while it needs the reader */
.wl-turnstile.on{opacity:1; pointer-events:auto}

/* ---- Who ---- */
.usp{position:relative; z-index:1; padding:260px 24px 140px; background:var(--blue2); text-align:center}
.usp h2{font-size:56px; line-height:65px; letter-spacing:-1.12px}
.usp p{max-width:681px; margin:26px auto 0; font-size:21px; line-height:32px; font-weight:300; color:#000}
.who{padding:140px 24px; background:var(--blue2); text-align:center}
.who h2, .features h2, .next h2{font-size:56px; line-height:65px; letter-spacing:-1.12px; max-width:681px; margin:0 auto}
.who p{max-width:681px; margin:26px auto 0; font-size:21px; line-height:32px; font-weight:300; color:#000}
.more{display:inline-flex; align-items:center; gap:12px; margin-top:26px; font-size:18px; text-decoration:none}
.more .ball{width:32px; height:32px; background:var(--blue80)}
.more .ball svg{width:16px; height:16px}

/* ---- Features ---- */
.features{padding:140px 24px; background:#fff; text-align:center}
.features h2{font-size:44px; line-height:54px; letter-spacing:-.88px; max-width:860px}
.feat-row{display:grid; grid-template-columns:repeat(3, 304px); justify-content:center; margin-top:59px}
.feat{display:flex; flex-direction:column; align-items:center}
.feat h3{margin-top:75px; font-size:24px; line-height:29px; font-weight:600; color:var(--blue80); width:290px; max-width:100%}
.feat p{margin-top:8px; font-size:18px; line-height:27px; font-weight:300; color:var(--text); width:290px; max-width:100%}
.dots{display:none}

/* iPhone: frame and screen are one picture (images/marketing/verkkosivu/puhelimet/), the shadow is CSS */
.phone{position:relative; width:298px; max-width:100%; aspect-ratio:298 / 590}
.phone-img{display:block; width:100%; height:auto;
  filter:drop-shadow(3px 12px 28px rgba(32,37,70,.2)) drop-shadow(13px 50px 51px rgba(32,37,70,.17)) drop-shadow(28px 112px 69px rgba(32,37,70,.1)) drop-shadow(51px 199px 82px rgba(32,37,70,.03))}

/* ---- Progress ---- */
.progress{display:grid; grid-template-columns:453px 520px; justify-content:center; align-items:center; column-gap:78px; padding:107px 24px; background:var(--blue2)}
.fig{position:relative; width:453px; height:700px}
.fig img{position:absolute; display:block; height:auto}
.fig .nainen{left:0; top:49px; width:330px; z-index:2}   /* the woman stands in front of the man (Figma 2737:42934 is the top layer) */
.fig .hahmo{left:108px; top:0; width:345px}
.glow{position:absolute; border-radius:50%; background:radial-gradient(closest-side, rgba(32,37,70,.2), rgba(32,37,70,0)); filter:blur(5px)}
.glow.g1{left:52px; top:586px; width:258px; height:84px}
.glow.g2{left:155px; top:563px; width:258px; height:84px}
.progress-text h2{font-size:52px; line-height:63px; letter-spacing:-1.04px}
.progress-text p{margin-top:24px; max-width:500px; font-size:20px; line-height:31px; font-weight:300; color:var(--text)}
.progress-text ul{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.progress-text li{display:flex; align-items:center; gap:12px; font-size:18px; line-height:24px; color:var(--blue80)}
.progress-text li::before{content:""; flex:none; width:10px; height:10px; border-radius:50%; background:var(--blue80)}

/* ---- Next workout ---- */
.next{padding:140px 24px; background:#fff; text-align:center}
.next h2{max-width:638px}
.next-text{max-width:480px; margin:20px auto 0; font-size:20px; line-height:28px; font-weight:300; color:var(--text)}
.next .feat-row{grid-template-columns:repeat(2, 304px); margin-top:59px}

/* ---- Questions ---- */
.faq{padding:140px 24px; background:#fafafa}
.faq h2{font:400 44px/54px "Luckiest Guy", var(--font); letter-spacing:-.32px; text-align:center; color:var(--blue80)}
.faq-list{position:relative; width:860px; max-width:100%; margin:40px auto 0; padding-bottom:440px}
.q{border-bottom:1px solid rgba(138,164,190,.7)}
.q summary{display:flex; align-items:center; gap:16px; padding:26px 0; cursor:pointer; list-style:none; font-size:22px; line-height:30px; color:var(--blue80)}
.q summary::-webkit-details-marker{display:none}
.q summary > span:first-child, .q summary > span[data-lang]{flex:1}
.q summary:focus-visible{outline:2px solid var(--blue80); outline-offset:2px}
.q .pm{flex:none; position:relative; width:36px; height:36px; border-radius:50%; border:1px solid #8aa4be; margin-left:auto}
.q .pm::before, .q .pm::after{content:""; position:absolute; left:50%; top:50%; width:18px; height:1.5px; margin:-.75px 0 0 -9px; background:var(--blue80); border-radius:1px}
.q .pm::after{transform:rotate(90deg)}
.q[open] .pm::after{transform:none}
.q p{padding:0 52px 26px 0; font-size:19px; line-height:28px; font-weight:300; color:var(--text)}
.faq-apina{position:absolute; left:-19px; bottom:27px; width:387px; height:auto}
.faq-list{--s:1px}
.faq-list::before, .faq-list::after{content:""; position:absolute; border-radius:50%}
.faq-list::after{left:calc(-6 * var(--s)); bottom:calc(43 * var(--s)); width:calc(388 * var(--s)); height:calc(85 * var(--s));
  background:radial-gradient(closest-side, rgba(32,37,70,.16), rgba(32,37,70,0)); filter:blur(6px)}
.faq-list::before{left:calc(40 * var(--s)); bottom:calc(54 * var(--s)); width:calc(300 * var(--s)); height:calc(37 * var(--s));
  background:radial-gradient(closest-side, rgba(32,37,70,.3), rgba(32,37,70,0)); filter:blur(4px)}
.faq-apina{z-index:1}
.faq-list{z-index:0}

/* ---- Join (bottom) ---- */
.cta{position:relative; height:640px; overflow:hidden; color:#fff}
.cta .hero-apina{left:171px; width:calc(100% - 171px); object-position:left center}
.cta::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to left, rgba(12,28,45,0) 14.3%, rgba(0,0,0,.55))}
.cta-in{position:absolute; z-index:2; left:calc(50% - 360px); top:197px; width:520px; display:flex; flex-direction:column; align-items:center; text-align:center}
.cta-in h2{font-size:64px; line-height:70px; letter-spacing:-1.28px; white-space:nowrap}
.cta-in .cta-perk{margin:24px 0; font-size:20px; line-height:28px}
.cta .hf-consent{color:var(--blue5)}

/* ---- Footer ---- */
.foot{padding:24px; background:#fff; color:var(--blue80); font-family:var(--font); -webkit-font-smoothing:antialiased}
.foot a{color:inherit}
:where(.foot) p{margin:0}
.foot-panel{padding:40px; border-radius:12px; background:var(--blue2)}
.foot-logo{display:block; width:154px; height:30px}
.foot hr{width:429px; max-width:100%; margin:24px 0; border:0; border-top:1px solid var(--blue10)}
.foot-cols{display:flex; gap:32px; align-items:flex-start}
.foot-links{flex:1; display:flex; flex-direction:column; gap:10px; font-size:16px; line-height:20px; font-weight:500}
.foot-links a{text-decoration:none; width:max-content}
.foot-col{display:flex; flex-direction:column; gap:10px}
.foot-col:nth-child(2){width:220px}
.foot-col:nth-child(3){width:180px}
.foot-col b{padding-bottom:10px; font-size:16px; line-height:20px; font-weight:600}
.foot-social{display:flex; gap:12px}
.foot-social a{position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--blue10)}
.foot-copy{margin-top:24px; font-size:14px; line-height:20px; color:var(--blue30)}

/* Language menu (made by lang.js into every [data-langs-slot]) */
.langs-slot .langs{position:relative; display:inline-flex; align-items:center; gap:10px; width:max-content; padding:10px 12px 10px 16px;
  border-radius:22px; background:#fff; border:1px solid var(--blue10); font-size:17px; line-height:20px; color:var(--blue80); cursor:pointer}
.langs-slot .langs::before{content:""; width:20px; height:20px; background:url(/img/home/lang.svg) center/contain no-repeat}
.langs-slot .langs::after{content:""; width:18px; height:18px; background:url(/img/home/chev.svg) center/contain no-repeat}
.langs-slot .langs span{text-decoration:none}
.langs-slot .langs select{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font:inherit}

/* ---- Mobile and tablet ---- */
@media (max-width:1099px){
  /* Height follows the content: the blue ends a quarter of the width above the
     bottom of the phone, which carries on over the next section (Figma 2770:8943,
     without the 64 px status bar) */
  .hero{display:flow-root; height:auto; margin-bottom:0}
  .hero-bg{object-position:30% top}
  /* Figma 2770:8943: the monkey 1.89 × the width, its fist at .59 of the width, a bit cropped at the right edge of the SCREEN (the picture itself ends at its edge), in front of the phone */
  .hero-apina{inset:auto calc(var(--u) * -.05) 0 auto; width:calc(var(--u) * 1.893); height:auto; z-index:2; object-fit:fill}
  .nav{left:0; right:0; top:0; height:auto; padding:16px 16px 0; background:none; border:0; justify-content:space-between}
  .nav-links, .nav-join{display:none}
  .nav-logo img{width:calc(var(--u) * .38); max-width:154px}
  .nav-burger{display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer}
  .hero-in{position:relative; left:auto; top:auto; width:auto; max-width:var(--u); margin:0 auto; padding:89px 16px 0}
  .hero-in h1{font-size:calc(var(--u) * .085); line-height:1.24; letter-spacing:-.02em}
  .hero-text{display:none}
  .hero-soon{margin-top:20px; font-size:16px; line-height:24px; letter-spacing:-.2px}
  .hero .hf{margin-top:24px; height:60px; padding-left:24px}
  .hf-btn{padding:0 18px; font-size:15px}
  .hf{padding-left:20px}
  .hero .hf-consent{text-align:left; font-size:13px; line-height:18px; color:#fff}
  .hero-phone{position:relative; z-index:1; left:auto; top:auto; width:calc(var(--u) * .585); max-width:none; margin:36px 0 calc(var(--u) * -.27) calc((100vw - var(--u)) / 2 + var(--u) * .068)}
  .usp{padding:calc(var(--u) * .27 + 56px) 24px 56px}
  .usp h2{font-size:30px; line-height:36px; letter-spacing:-.6px}
  .usp p{font-size:16px; line-height:25px; margin-top:20px}
  .who{padding:64px 24px}
  .who h2, .features h2, .next h2{font-size:30px; line-height:36px; letter-spacing:-.6px}
  .who p{font-size:16px; line-height:25px; margin-top:20px}
  .features, .next{padding:72px 0 56px}
  .features h2, .next h2, .next-text{padding:0 24px}
  .next-text{font-size:17px; line-height:25px}
  .feat-row, .next .feat-row{display:flex; justify-content:flex-start; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:16px calc((100% - min(78%, 300px)) / 2) 64px; margin:8px 0 -48px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .feat-row::-webkit-scrollbar{display:none}
  .feat{flex:0 0 min(78%, 300px); scroll-snap-align:center}
  /* Figma: the phone 173 pt wide. The shadow is a box-shadow behind the picture (a filter inside a scroller is
     clipped by iOS Safari), shaped like the phone */
  .feat .phone{width:calc(var(--u) * .43)}
  .feat .phone-img{position:relative; filter:none}
  .feat .phone::before{content:""; position:absolute; left:5.6%; right:4.8%; top:3.4%; bottom:4.2%; border-radius:15% / 7.6%;
    box-shadow:0 14px 22px rgba(32,37,70,.16), 0 44px 56px rgba(32,37,70,.12)}
  .feat h3{margin-top:20px; font-size:20px; line-height:26px}
  .feat p{font-size:16px; line-height:24px}
  .dots{display:flex; justify-content:center; gap:8px; margin-top:16px}
  .dots i{width:6px; height:6px; border-radius:50%; background:var(--blue10)}
  .dots i.on{background:var(--blue80)}
  .progress{display:flex; flex-direction:column; align-items:center; padding:56px 24px 64px}
  .fig{width:min(100%, 360px); height:calc(min(100vw - 48px, 360px) * 1.72)}
  .progress{--k:calc(min(100vw - 48px, 360px) / 453)}
  .fig .nainen{left:0; top:calc(49 * var(--k)); width:calc(330 * var(--k))}
  .fig .hahmo{left:calc(108 * var(--k)); width:calc(345 * var(--k))}
  .glow.g1{left:calc(52 * var(--k)); top:calc(586 * var(--k)); width:calc(258 * var(--k)); height:calc(84 * var(--k))}
  .glow.g2{left:calc(155 * var(--k)); top:calc(563 * var(--k)); width:calc(258 * var(--k)); height:calc(84 * var(--k))}
  .fig{height:calc(700 * var(--k))}
  .progress-text{width:100%}
  .progress-text h2{font-size:34px; line-height:40px; letter-spacing:-.68px}
  .progress-text p{font-size:17px; line-height:26px; margin-top:16px}
  .progress-text li{font-size:16px}
  .faq{padding:72px 16px 0}
  .faq h2{font-size:34px; line-height:42px}
  .faq-list{margin-top:28px; padding-bottom:calc(440 * var(--s))}
  .q summary{padding:20px 0; font-size:18px; line-height:25px}
  .q p{padding:0 8px 20px 0; font-size:16px; line-height:24px}
  .faq-apina{width:calc(387 * var(--s)); left:calc(-19 * var(--s)); bottom:calc(27 * var(--s))}
  .faq-list{--s:calc(var(--u) * .0016)}
  .cta{height:auto; min-height:calc(var(--u) * 1.29)}
  .cta .hero-apina{display:none}
  .cta .hero-bg{object-position:center bottom}
  .cta-in{position:relative; left:auto; top:auto; transform:none; width:auto; max-width:var(--u); margin:0 auto; padding:calc(var(--u) * .37) 16px 56px}
  .cta-in h2{font-size:36px; line-height:42px; letter-spacing:-.72px; white-space:normal}
  .cta-in .cta-perk{margin:16px 0 24px; font-size:17px; line-height:24px}
  .cta .hf{height:60px; width:100%}
  .cta .hf-consent{font-size:13px; line-height:18px}
  .foot{padding:12px}
  .foot-panel{padding:32px 20px 28px}
  .foot-cols{flex-direction:column; gap:32px}
  .foot-copy{margin-top:34px}
  .foot-col:nth-child(2), .foot-col:nth-child(3){width:auto}
  .foot hr{width:100%; margin:24px 0 28px}
  .nav-logo img{height:auto}
  .menu{position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; padding:16px 16px 32px; overflow-y:auto; background:#1e3450; color:#fff}
  .menu[hidden]{display:none}
  .menu-top{display:flex; align-items:center; justify-content:space-between; padding-top:calc(var(--u) * .1); margin-bottom:28px}
  .menu-close{display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer}
  .menu > a:not(.nav-logo):not(.menu-join){padding:22px 8px; border-bottom:1px solid rgba(255,255,255,.2); font-size:22px; text-decoration:none}
  .menu-join{display:flex; align-items:center; justify-content:center; height:48px; margin-top:40px; border-radius:24px; background:linear-gradient(90deg, var(--yellow), var(--orange)); color:#000 !important; font:600 16px/24px var(--font); text-decoration:none}
  .menu .langs-slot{margin-top:28px}
  .menu .langs{background:var(--blue5)}
}
@media (min-width:1100px){
  .menu{display:none !important}
}
@media (prefers-reduced-motion:reduce){
  html:has(body.v-home){scroll-behavior:auto}
}

/* Soft motion (home.js adds .js-anim only when it can and may) */
.js-anim .rv{opacity:0; transform:translate3d(0, 28px, 0); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d, 0s)}
.js-anim .rv.in{opacity:1; transform:none}

/* ---- "Check your email" in the place of the form (Figma 2809:4, 2809:161) ---- */
.sent-msg{display:none; max-width:540px; color:#fff}
.sent .hf-wrap{display:none}
.sent .sent-msg{display:block}
.sent-msg:focus{outline:0}
.sent-msg h2{font-size:28px; line-height:36px; font-weight:400; letter-spacing:-.02em}
.sent-msg p{margin-top:12px; font-size:19px; line-height:30px; letter-spacing:-.38px}
.sent-msg .wl-email{text-decoration:underline; text-underline-position:from-font}
.sent-msg .wl-resend{padding:0; border:0; background:none; font:inherit; color:inherit; cursor:pointer; text-decoration:underline; text-underline-position:from-font}
.hero .sent-msg{margin-top:28px}
.cta .sent-msg{text-align:center; margin-top:0}
.cta .sent-msg h2{font-size:28px}
@media (max-width:1099px){
  /* Figma 2809:161: title, 16 px, heading 22/28 SemiBold, 8 px, text 16/24 Light, 12 px between paragraphs; no "Coming soon" line */
  .hero .sent-msg{margin-top:16px}
  .sent-msg h2{font-size:22px; line-height:28px; font-weight:600; letter-spacing:-.44px}
  .sent-msg h2 + p{margin-top:8px}
  .sent-msg p{margin-top:12px; font-size:16px; line-height:24px; font-weight:300; letter-spacing:0}
  .sent .hero-soon{display:none}
  .sent-msg .wl-email{font-weight:400}
}

/* ---- Light sub pages: Welcome, Left the list, Link expired (Figma 2810:2 / 188, 82 / 261, 135 / 305) ---- */
html:has(body.v-thanks), html:has(body.v-left), html:has(body.v-expired){background:var(--blue2)}
body.wl.v-thanks, body.wl.v-left, body.wl.v-expired{display:flex; flex-direction:column; padding:0; background:var(--blue2); color:var(--blue80)}
.v-thanks .scene, .v-left .scene, .v-expired .scene, .v-thanks .logo, .v-left .logo, .v-expired .logo{display:none}
.sub-top, .sub-foot{display:none}
.v-thanks .sub-top, .v-left .sub-top, .v-expired .sub-top{display:block}
.v-thanks .sub-foot, .v-left .sub-foot, .v-expired .sub-foot{display:block; margin-top:auto; padding-top:72px; background:linear-gradient(var(--blue2) 72px, #fff 72px)}
.nav-sub{position:relative; left:auto; right:auto; top:auto; margin:16px; display:grid; grid-template-columns:1fr auto 1fr; background:var(--blue80); border:0; color:#fff}
.nav-sub .nav-links{grid-column:2}
.v-thanks .card, .v-left .card, .v-expired .card{max-width:700px; margin:96px auto 0; padding:0 24px; background:none; border-radius:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; text-align:center; color:var(--blue80)}
.v-thanks .card h1, .v-left .card h1, .v-expired .card h1{margin:0; font-size:56px; line-height:65px; font-weight:300; letter-spacing:-1.12px}
.card h1 em{font-family:"Luckiest Guy", var(--font); font-style:normal; font-weight:400; letter-spacing:-.32px; line-height:.95}
.v-thanks .wl-place{margin-top:48px}
.v-thanks .wl-place p{margin:0 0 8px; font-size:18px; line-height:28px; letter-spacing:0; color:#000}
.v-thanks .wl-place div > p:nth-child(-n+3){font-size:22px; line-height:30px; font-weight:600; color:var(--blue80)}
.v-thanks .wl-pos{display:block !important}
.v-thanks .wl-n{font-size:inherit; line-height:inherit; color:var(--orange)}
.v-thanks .wl-invite{width:min(520px, 100%); margin:40px auto 0; text-align:left; gap:6px}
.v-thanks .wl-invite .wl-field{font-size:14px; line-height:20px; font-weight:400; letter-spacing:0; color:var(--blue80)}
.v-thanks .wl-link{margin-top:0}
.v-thanks .wl-link input{height:64px; padding:0 190px 0 24px; border:1px solid var(--blue30); border-radius:32px; background:#fff; font-size:17px; letter-spacing:-.34px; color:var(--blue80)}
.wl-copy-btn{position:absolute; right:8px; top:8px; height:48px; padding:0 24px; border:0; border-radius:24px; cursor:pointer;
  background:linear-gradient(90deg, var(--yellow), var(--orange)); color:#000; font:600 16px/24px var(--font); white-space:nowrap}
.wl-copy-btn:focus-visible{outline:2px solid var(--blue80); outline-offset:2px}
.v-thanks .wl-beta{width:min(640px, calc(100% - 32px)); max-width:none; margin:40px auto 0; padding:32px; border-radius:12px; background:#dce5ef; text-align:center; color:var(--blue80)}
.v-thanks .wl-beta h2{margin:0 0 12px; font-size:22px; line-height:28px; font-weight:600; letter-spacing:-.01em}
.v-thanks .wl-beta p{font-size:16px; line-height:26px; letter-spacing:0; color:#000}
.v-thanks .wl-beta-phones{justify-content:center; gap:12px; margin-top:24px}
.v-thanks .wl-beta-phones button{width:160px; height:48px; padding:0; border:2px solid var(--blue80); background:#f4f8fc; font-size:17px; font-weight:600; color:var(--blue80)}
.v-thanks .wl-beta-phones svg{display:none}
.v-thanks .wl-follow{width:min(640px, calc(100% - 32px)); max-width:none; margin:40px auto 0; padding:0; background:none; text-align:center; color:var(--blue80)}
.v-thanks .wl-follow h2{margin:0 0 16px; font-size:18px; line-height:24px; font-weight:400; letter-spacing:0}
.v-thanks .wl-follow-icons{justify-content:center}
.v-thanks .wl-follow-icons a{width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--blue10)}
.v-thanks .wl-follow-icons img{width:22px; height:22px}
.v-thanks .sub-foot{margin-top:auto}
.v-thanks .wl-follow{margin-bottom:72px}
.v-left .wl-end p, .v-expired .wl-end p{margin:28px auto 0; max-width:520px; font-size:18px; line-height:28px; letter-spacing:0; color:#000}
.v-left .wl-again, .v-expired .wl-again{display:inline-flex; width:auto; height:48px; margin-top:32px; padding:0 24px; font-size:16px; color:#000}
.v-left .card, .v-expired .card{margin-bottom:96px}
@media (max-width:1099px){
  .nav-sub{margin:0; background:none; display:flex; padding-top:16px}
  .nav-sub .nav-burger svg path{stroke:var(--blue80)}
  .v-thanks .card, .v-left .card, .v-expired .card{margin-top:40px}
  .v-thanks .card h1, .v-left .card h1, .v-expired .card h1{font-size:32px; line-height:38px; letter-spacing:-.64px}
  .v-thanks .wl-place{margin-top:32px}
  .v-thanks .wl-place p{font-size:16px; line-height:24px}
  .v-thanks .wl-link input{padding-right:160px; font-size:15px}
  .wl-copy-btn{padding:0 18px; font-size:15px}
  .v-thanks .wl-beta{padding:24px 20px}
  .v-thanks .wl-beta h2{font-size:20px}
  .v-thanks .wl-beta-phones button{width:min(150px, 44%)}
  .v-left .wl-end p, .v-expired .wl-end p{font-size:16px; line-height:25px}
}

/* The Spanish button is wide: on a narrow phone it goes under the field */
@media (max-width:430px){
  html[lang="es"] .hf{flex-direction:column; align-items:stretch; height:auto; border-radius:28px; padding:8px; gap:8px}
  html[lang="es"] .hf-input{height:48px; padding:0 16px}
  html[lang="es"] .hf-btn{width:100%}
}

/* ---- Typography (Media 10.10.2026, docs/muutokset/2026-10-09-uusi-etusivu.md → Typografia ja rivitys) ----
   Section titles 56/65 (phone 30/36) Blue 80 · body 21/32 (17/26) Neutral 100 ·
   card titles 24/30 (21/26) SemiBold Blue 80 · card texts 18/27 (16/24) Neutral 60 ·
   hero title 64/80 (32/40) · consent 12/16 Blue 8. Titles are balanced; the last
   two words of body texts and questions are bound with a no-break space (in the HTML). */
.site :is(h1, h2, h3), .card :is(h1, h2), .wl-beta h2{text-wrap:balance}
.usp h2, .who h2, .features h2, .next h2, .progress-text h2, .faq h2,
.v-thanks .card h1, .v-left .card h1, .v-expired .card h1{font-size:56px; line-height:65px; letter-spacing:-1.12px; color:var(--blue80)}
.features h2{max-width:900px}
.faq h2{font-weight:400; letter-spacing:-.32px}
.usp p, .who p, .progress-text p, .next-text,
.v-thanks .wl-place p, .v-left .wl-end p, .v-expired .wl-end p{font-size:21px; line-height:32px; font-weight:300; letter-spacing:0; color:#000}
.progress-text p{max-width:520px}
.next-text{max-width:560px}
.feat h3, .v-thanks .wl-place div > p:nth-child(-n+3), .v-thanks .wl-beta h2{font-size:24px; line-height:30px; font-weight:600; letter-spacing:0; color:var(--blue80)}
.feat p, .v-thanks .wl-beta p{font-size:18px; line-height:27px; font-weight:300; letter-spacing:0; color:var(--text)}
.hero-in h1{font-size:64px; line-height:80px}
.hf-consent, .hero .hf-consent, .cta .hf-consent{font-size:12px; line-height:16px; color:#dce5ef}
@media (max-width:1099px){
  .usp h2, .who h2, .features h2, .next h2, .progress-text h2, .faq h2,
  .v-thanks .card h1, .v-left .card h1, .v-expired .card h1{font-size:30px; line-height:36px; letter-spacing:-.6px}
  .usp p, .who p, .progress-text p, .next-text,
  .v-thanks .wl-place p, .v-left .wl-end p, .v-expired .wl-end p{font-size:17px; line-height:26px}
  .feat h3, .v-thanks .wl-place div > p:nth-child(-n+3), .v-thanks .wl-beta h2{font-size:21px; line-height:26px}
  .feat p, .v-thanks .wl-beta p{font-size:16px; line-height:24px}
  .hero-in h1{font-size:32px; line-height:40px; letter-spacing:-.64px}
  .hero .hf-consent{text-align:left}
  .brm::before{content:"\A"; white-space:pre}
}
.next h2{max-width:900px}

/* The form and its lines sit in .hf-wrap: it takes the width of its place, so the pill never gets wider than the screen */
.hf-wrap{width:100%; display:flex; flex-direction:column; align-items:flex-start}
.cta .hf-wrap{align-items:center}