.demo-cta{padding:12px 20px;border-radius:999px;background:var(--orange);color:#111;font-weight:850}.login{padding:10px 18px;background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.34)}
.hero-flyer{min-height:auto;padding-top:clamp(50px,6vw,82px);padding-bottom:clamp(72px,7vw,98px)}.hero-flyer h1{font-size:clamp(54px,5.6vw,86px)}.hero-center{min-height:410px}.hero-app{width:138px;height:138px}.hero-points div{min-height:110px}.hero-trust{bottom:22px}
.system,.fit,.features,.outcomes,.company,.contact-section{border-top:0}
.system,.fit,.features,.outcomes,.company,.contact-section{position:relative;isolation:isolate;overflow:hidden}.fit::before,.features::before,.outcomes::before,.company::before,.contact-section::before{content:"";position:absolute;z-index:-1;top:0;left:0;width:100%;height:120px;pointer-events:none}.fit::before{background:linear-gradient(to bottom,#031b36 0%,rgba(3,27,54,.72) 24%,transparent 100%)}.features::before{background:linear-gradient(to bottom,rgba(6,31,58,.95) 0%,rgba(6,31,58,.52) 38%,transparent 100%)}.outcomes::before{background:linear-gradient(to bottom,rgba(2,15,32,.9) 0%,rgba(2,15,32,.38) 42%,transparent 100%)}.company::before{background:linear-gradient(to bottom,rgba(6,29,55,.96) 0%,rgba(6,29,55,.42) 44%,transparent 100%)}.contact-section::before{background:linear-gradient(to bottom,#031b36 0%,rgba(3,27,54,.5) 42%,transparent 100%)}
.walkthrough{position:relative;z-index:1;padding:clamp(86px,9vw,132px) clamp(22px,5vw,80px);border-top:0;background:#f4f7fa;color:#082b54}.walkthrough::before,.walkthrough::after{display:none}.walkthrough .eyebrow{color:#d96900}.walkthrough-heading h2{color:#082b54}.walkthrough-heading h2 em{color:#e87300}.walkthrough-heading>p:last-child{color:#536a82}.walkthrough-grid{display:grid;grid-template-columns:1.1fr .72fr 1fr;gap:22px;align-items:stretch;margin-top:58px}.walkthrough-card{display:flex;flex-direction:column;min-width:0;padding:22px;border:1px solid #d5e0ea;border-radius:24px;background:#fff;box-shadow:0 20px 50px rgba(8,43,84,.08)}.step-label{display:flex;align-items:center;gap:12px;margin-bottom:18px}.step-label span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff0e2;color:#d96900;font-size:12px;font-weight:900}.step-label strong{font-size:19px}.product-shot{overflow:hidden;border:1px solid #d9e2ec;border-radius:15px;background:#eef3f8}.product-shot img{display:block;width:100%;height:100%;object-fit:cover}.desktop-shot{aspect-ratio:16/10}.phone-shot{flex:1;min-height:390px;background:linear-gradient(150deg,#e9f0f7,#fff)}.phone-shot img{object-fit:contain}.walkthrough-card>p{margin:20px 2px 2px;color:#536a82;line-height:1.65}.orange-word{color:#e87300;font-weight:850}.report-preview{min-height:310px;padding:19px;border:1px solid #d9e2ec;border-radius:15px;background:#f7f9fb}.report-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid #dbe3ec}.report-top b{font-size:18px}.report-top b span{color:#e87300}.report-top small{color:#6e8195}.report-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.report-metrics div{display:grid;gap:3px;padding:12px 9px;border-radius:10px;background:#eaf2f9}.report-metrics strong{font-size:22px}.report-metrics span{font-size:10px;color:#5f7387}.report-chart{height:100px;display:flex;align-items:end;gap:8px;padding:12px;border-radius:10px;background:#fff}.report-chart i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(#ff9a31,#e87300)}.preview-note{margin:22px 0 0;color:#6d7e90;font-size:13px;text-align:center}.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.form-status{grid-column:1/-1;margin:0;color:#bfe9cf;font-weight:750}.contact-section form small{grid-column:1/-1}
@media(max-width:1100px){.walkthrough-grid{grid-template-columns:1fr 1fr}.walkthrough-card:last-child{grid-column:1/-1}.site-header nav{gap:13px}}
@media(max-width:1000px){.site-header nav .demo-cta{display:inline-flex}.site-header nav .login{display:inline-flex}.hero-center{min-height:auto}.walkthrough-grid{grid-template-columns:1fr}.walkthrough-card:last-child{grid-column:auto}.phone-shot{max-height:680px}}
@media(max-width:600px){.site-header{gap:10px}.site-header .brand small{display:none}.site-header nav{gap:8px}.site-header nav .demo-cta{padding:10px 12px;font-size:12px}.site-header nav .login{padding:9px 11px;font-size:12px}.hero-flyer{padding-bottom:64px}.hero-center{display:none}.hero-trust{position:relative;left:auto;bottom:auto;margin-top:18px}.walkthrough{padding:70px 18px}.walkthrough-grid{margin-top:38px}.walkthrough-card{padding:16px}.phone-shot{min-height:470px}}

/* Staattinen lumihiutalereuna vaalean ja tumman osion välissä. */
.walkthrough{isolation:isolate;overflow:visible}.walkthrough>*{position:relative;z-index:2}.walkthrough::before,.walkthrough::after{content:"";display:block;position:absolute;z-index:1;left:0;width:100%;height:150px;pointer-events:none;background-image:radial-gradient(ellipse 3px 8px at 7% 82%,rgba(5,43,82,.82) 0 68%,transparent 78%),radial-gradient(circle at 14% 93%,rgba(11,59,112,.58) 0 2px,transparent 3px),radial-gradient(ellipse 4px 11px at 25% 78%,rgba(5,43,82,.74) 0 68%,transparent 78%),radial-gradient(circle at 36% 91%,rgba(11,59,112,.52) 0 3px,transparent 4px),radial-gradient(ellipse 3px 9px at 48% 84%,rgba(5,43,82,.8) 0 68%,transparent 78%),radial-gradient(circle at 59% 95%,rgba(11,59,112,.55) 0 2px,transparent 3px),radial-gradient(ellipse 4px 12px at 71% 79%,rgba(5,43,82,.72) 0 68%,transparent 78%),radial-gradient(circle at 82% 92%,rgba(11,59,112,.58) 0 3px,transparent 4px),radial-gradient(ellipse 3px 10px at 93% 83%,rgba(5,43,82,.78) 0 68%,transparent 78%),radial-gradient(circle at 5% 25%,rgba(255,255,255,.98) 0 2px,transparent 3px),radial-gradient(circle at 17% 46%,rgba(255,255,255,.9) 0 3px,transparent 4px),radial-gradient(circle at 29% 19%,rgba(255,255,255,.82) 0 1.5px,transparent 2.5px),radial-gradient(circle at 41% 55%,rgba(255,255,255,.96) 0 2.5px,transparent 3.5px),radial-gradient(circle at 54% 31%,rgba(255,255,255,.88) 0 2px,transparent 3px),radial-gradient(circle at 66% 62%,rgba(255,255,255,.94) 0 3px,transparent 4px),radial-gradient(circle at 78% 23%,rgba(255,255,255,.86) 0 2px,transparent 3px),radial-gradient(circle at 90% 51%,rgba(255,255,255,.98) 0 2.5px,transparent 3.5px),linear-gradient(to bottom,transparent 0 48%,rgba(244,247,250,.12) 58%,rgba(244,247,250,.72) 78%,#f4f7fa 100%);background-size:173px 127px,139px 101px,211px 149px,167px 119px,193px 137px,151px 109px,229px 157px,181px 131px,203px 143px,137px 83px,181px 107px,149px 91px,211px 123px,163px 97px,197px 119px,173px 101px,223px 131px,100% 100%}.walkthrough::before{top:-94px}.walkthrough::after{bottom:-94px;transform:rotate(180deg)}
.walkthrough::before,.walkthrough::after{display:none!important}

/* Etusivun ensimmainen nakyma: nykyinen kokonaisuus oikeaan palstaan. */
.hero-flyer{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(34px,4vw,64px);align-items:start;padding-top:clamp(48px,5vw,72px);padding-bottom:clamp(78px,7vw,104px)}
.hero-flyer .hero-copy{max-width:760px}
.hero-flyer .hero-copy>.eyebrow,.hero-system>.section-heading>.eyebrow{font-size:clamp(15px,1.15vw,18px);letter-spacing:.1em;line-height:1.45;margin-bottom:18px}
.hero-flyer h1{font-size:clamp(34px,3.25vw,50px)}
.hero-flyer .lead{max-width:700px}
.hero-flyer .primary{white-space:nowrap}
.hero-system{position:relative;z-index:3;min-width:0;scroll-margin-top:100px}
.hero-system .section-heading{max-width:none}
.hero-system .section-heading h2{margin:0 0 18px;font-size:clamp(34px,3.25vw,50px);line-height:1.03;letter-spacing:-.05em}
.hero-flyer h1,.hero-system .section-heading h2{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:800;line-height:1.03;letter-spacing:-.05em}
.hero-flyer h1 em,.hero-system .section-heading h2 em,.hero-system .system-accent{font-family:inherit;font-weight:inherit}
.hero-system .system-accent{color:var(--orange);font-style:normal}
.hero-system .section-heading>p:last-child{max-width:none;margin:0;color:var(--soft);font-size:clamp(14px,1.2vw,17px);line-height:1.55}
.hero-system .product-pair{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(8px,1vw,14px);align-items:stretch;margin-top:24px}
.hero-system .product-pair article{min-height:0;padding:clamp(16px,1.55vw,23px);border-radius:20px}
.hero-system .product-icon{width:52px;height:52px;font-size:25px}
.hero-system .product-icon svg{width:18px;height:18px}
.hero-system .product-name{margin:14px 0 3px;font-size:clamp(21px,1.85vw,28px)}
.hero-system .product-pair h3{font-size:clamp(15px,1.3vw,19px);line-height:1.25}
.hero-system .product-intro,.hero-system .product-pair article>p:last-child,.hero-system .product-benefits{font-size:clamp(12px,.98vw,14px);line-height:1.48}
.hero-system .product-intro{margin:12px 0 9px}
.hero-system .product-benefits{padding-left:17px}
.hero-system .product-benefits li{padding:2px 0}
.hero-system .connector{align-self:center;width:24px;gap:8px;font-size:8px;line-height:1.35;text-align:center}
.hero-system .connector b{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.hero-system .connector span{height:38px}

@media(max-width:940px){
  .hero-flyer{grid-template-columns:1fr;gap:56px;padding-bottom:105px}
  .hero-flyer .hero-copy{max-width:760px}
  .hero-system{padding-top:8px}
  .hero-flyer h1,.hero-system .section-heading h2{font-size:clamp(40px,7vw,62px)}
  .hero-system .section-heading>p:last-child{max-width:760px;font-size:17px;line-height:1.65}
  .hero-system .product-pair{grid-template-columns:1fr;gap:18px;margin-top:34px}
  .hero-system .product-pair article{padding:30px}
  .hero-system .connector{grid-template-columns:1fr auto 1fr;width:auto;gap:12px;font-size:10px}
  .hero-system .connector b{writing-mode:horizontal-tb;transform:none;white-space:normal}
  .hero-system .connector span{width:100%;height:1px}
  .hero-system .product-name{font-size:30px}
  .hero-system .product-pair h3{font-size:21px}
  .hero-system .product-intro,.hero-system .product-pair article>p:last-child,.hero-system .product-benefits{font-size:16px;line-height:1.6}
}

@media(max-width:600px){
  .hero-flyer{gap:48px;padding-top:42px;padding-bottom:68px}
  .hero-flyer .hero-copy>.eyebrow,.hero-system>.section-heading>.eyebrow{font-size:15px;letter-spacing:.075em}
  .hero-flyer h1,.hero-system .section-heading h2{font-size:40px}
  .hero-system .section-heading>p:last-child{font-size:16px}
  .hero-system .product-pair article{padding:25px}
  .hero-trust{margin-top:4px}
}

/* Ylapalkin yhteyslinkki on hillitty; varsinainen CTA jaa hero-osioon. */
.site-header nav .header-contact{padding:6px 1px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.58);background:transparent;color:var(--white);font-weight:750;transition:border-color .2s ease,color .2s ease}
.site-header nav .header-contact:hover,.site-header nav .header-contact:focus-visible{border-bottom-color:var(--orange);color:var(--orange)}
.site-header .brand{gap:14px}
.site-header .brand img{width:56px;height:56px}
.site-header .brand strong{font-size:23px}
.site-header .brand small{font-size:12px}
@media(max-width:600px){
  .site-header nav .header-contact{padding:5px 0;font-size:12px}
  .site-header .brand{gap:10px}
  .site-header .brand img{width:44px;height:44px}
  .site-header .brand strong{font-size:20px}
}

/* Tuote-esittely jatkaa hero-osion typografiaa ja tasapainoista rytmia. */
.walkthrough{padding-top:clamp(72px,7vw,102px);padding-bottom:clamp(76px,8vw,112px);scroll-margin-top:82px}
.walkthrough-heading{column-gap:clamp(44px,6vw,82px);align-items:end}
.walkthrough-heading h2{font-size:clamp(34px,3.25vw,50px);line-height:1.03;letter-spacing:-.05em;font-weight:800}
.walkthrough-heading>p:last-child{max-width:560px;color:#082b54;font-size:17px;line-height:1.65}
.walkthrough-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:46px}
.walkthrough-card{padding:18px;border-radius:20px}
.walkthrough-card:last-child{grid-column:auto}
.walkthrough-card .product-shot,.walkthrough-card .report-preview{height:252px;min-height:252px;aspect-ratio:auto}
.walkthrough-card .phone-shot img{object-fit:contain}
.walkthrough-card>p{margin-top:16px;color:#082b54;font-size:15px;line-height:1.58}
.step-label{margin-bottom:14px}
.step-label strong{font-size:18px}
.preview-note{margin-top:18px}

@media(max-width:900px){
  .walkthrough-heading{grid-template-columns:1fr;gap:22px}
  .walkthrough-heading .eyebrow{grid-column:auto}
  .walkthrough-grid{grid-template-columns:1fr;gap:20px;margin-top:38px}
  .walkthrough-card .product-shot,.walkthrough-card .report-preview{height:auto;min-height:0}
  .walkthrough-card .desktop-shot{aspect-ratio:16/10}
  .walkthrough-card .phone-shot{height:480px}
  .walkthrough-card .report-preview{min-height:310px}
}

@media(max-width:600px){
  .walkthrough{padding-top:66px;padding-bottom:72px}
  .walkthrough-heading h2{font-size:40px}
  .walkthrough-heading>p:last-child{font-size:16px}
  .walkthrough-card .phone-shot{height:420px}
}

/* Yhtenainen typografinen hierarkia koko etusivulle. */
.section-heading h2,.outcomes-heading h2,.safety h2,.company h2,.contact-section h2{font-size:clamp(34px,3.25vw,50px);line-height:1.03;letter-spacing:-.05em;font-weight:800}
.eyebrow{font-size:14px;line-height:1.45;letter-spacing:.11em;margin-bottom:18px}
.section-heading>p:last-child,.safety p,.company>div>p:last-child,.contact-section>div>p{font-size:17px;line-height:1.65}
.fit-grid h3,.feature-grid h3{font-size:20px;line-height:1.3}
.fit-grid p,.feature-grid p,.outcome-list p{font-size:16px;line-height:1.65}
.outcome-list strong{font-size:18px;line-height:1.4}

/* Ominaisuudet esitetaan erillisina, pehmeasti pyoristettyina kortteina. */
.feature-grid{gap:16px;border-top:0;border-left:0}
.feature-grid article{border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(11,59,112,.38),rgba(3,27,54,.42))}
.module-note{display:grid;grid-template-columns:minmax(220px,.42fr) 1fr;gap:28px;align-items:center;margin-top:44px;padding:25px 30px;border-left:3px solid var(--orange);border-radius:0 18px 18px 0;background:rgba(2,15,32,.42)}
.module-note strong{font-size:20px;line-height:1.35}
.module-note p{margin:0;color:var(--soft);font-size:16px;line-height:1.65}
.module-note+.feature-grid{margin-top:28px}

/* Kiintea ylavalikko ei peita osioiden otsikoita ankkurilinkeista siirryttaessa. */
section[id]{scroll-margin-top:82px}

@media(max-width:600px){
  .section-heading h2,.outcomes-heading h2,.safety h2,.company h2,.contact-section h2{font-size:40px}
  .eyebrow{font-size:13px}
  .section-heading>p:last-child,.safety p,.company>div>p:last-child,.contact-section>div>p{font-size:16px}
  .module-note{grid-template-columns:1fr;gap:10px;margin-top:32px;padding:22px}
}