/* Urakkavaaka, markkinointisivu. Ulkoasu 28.9.2026 (Lovable-malli: DM Sans ja Barlow Condensed,
   lämmin harmaa pohja, valkoiset kortit, oranssi korostus). */
/* Varafontit mitoitettu verkkofonttien levyisiksi, jotta teksti ei hyppää fontin latautuessa. */
@font-face{font-family:"Barlow Fallback";font-weight:700;size-adjust:77.3%;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Roboto Bold"),local("Roboto-Bold")}
@font-face{font-family:"DM Fallback";font-weight:400;size-adjust:104.7%;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans-Regular"),local("Helvetica Neue"),local("HelveticaNeue"),local("Roboto"),local("Roboto-Regular")}
@font-face{font-family:"DM Fallback";font-weight:700;size-adjust:104.7%;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Roboto Bold"),local("Roboto-Bold")}
:root{
  --bg:#F4F3EF;--card:#FFFFFF;--fg:#1E2430;--muted:#5F6672;--border:#D5D7DC;--pinta:#ECEBE6;
  --primary:#E15700;--primary-tumma:#C24A00;--primary-teksti:#B04300;--primary-fg:#fff;--primary-wash:#F6E3D6;
  --dark:#131922;--dark-fg:#F4F3EF;--dark-muted:#AEB3BB;--dark-viiva:#2C333E;
  --ok-wash:#E2F0F0;--warn-wash:#F7F0DD;
  --r:10px;--max:1120px;
  --font:"DM Sans","DM Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Barlow Condensed","Barlow Fallback","Arial Narrow",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--primary-teksti);text-underline-offset:3px}
a:hover{color:var(--primary-tumma)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
h1,h2,h3{text-wrap:balance;margin:0 0 .5em;color:inherit}
h1,h2{font-family:var(--display);font-weight:700;letter-spacing:0}
h1{font-size:clamp(2.9rem,7.4vw,5.6rem);line-height:.96;hyphens:auto}
h2{font-size:clamp(2.1rem,4.4vw,3rem);line-height:1.03;margin-bottom:.7em}
h3{font-family:var(--display);font-weight:700;font-size:1.6rem;line-height:1.08;letter-spacing:0}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.eyebrow{display:inline-block;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--primary-teksti);margin-bottom:.9em}
.muted{color:var(--muted)}
.pieni{font-size:.9rem;color:var(--muted);line-height:1.55}

/* yläpalkki */
.top{position:sticky;top:0;z-index:20;background:rgba(244,243,239,.95);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px}
.top .logo{flex:none}
.top .logo img{height:36px;width:auto}
.nav{display:flex;gap:4px;align-items:center}
.nav a{color:var(--fg);text-decoration:none;font-weight:700;padding:10px 12px;border-radius:8px;font-size:.92rem;white-space:nowrap}
.nav a:hover{color:var(--primary-teksti)}
.nav a.kirjaudu{border:1px solid var(--border);background:var(--card);padding:10px 14px;margin-left:8px}
.nav a.kirjaudu:hover{background:var(--pinta);color:var(--fg)}
.nav a.btn{min-height:44px;padding:10px 16px;font-size:.92rem}

/* napit */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;background:var(--primary-tumma);color:var(--primary-fg)!important;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;font-family:inherit;font-size:1rem;line-height:1.2;transition:background-color .15s ease}
.btn:hover{background:#A94000}
.btn.toissijainen{background:var(--card);color:var(--fg)!important;border-color:var(--border)}
.btn.toissijainen:hover{background:var(--pinta)}
.btn.iso{min-height:52px;padding:14px 26px;font-size:1.02rem}

/* hero */
.hero{padding:64px 0 56px}
.hero .grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center}
.hero .lead{font-size:1.18rem;color:var(--muted);max-width:32em;line-height:1.6}
.hero .kuva img{width:100%}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 22px}
.kuva{border:1px solid var(--border);border-radius:var(--r);background:var(--card);overflow:hidden;box-shadow:0 24px 48px -28px rgba(19,25,34,.35)}
.tarjouslappu{display:inline-flex;flex-wrap:wrap;gap:8px 10px;align-items:center;max-width:100%;background:var(--dark);color:var(--dark-fg);border-radius:8px;padding:8px 12px 8px 8px;font-weight:500;font-size:.84rem;line-height:1.4;margin-bottom:26px}
.tarjouslappu b{background:var(--primary-tumma);color:#fff;border-radius:5px;padding:4px 8px;font-size:.74rem;letter-spacing:.06em;font-weight:700}

/* osiot */
section{padding:80px 0;border-top:1px solid var(--border)}
main>section:first-child,section.hero{border-top:0}
#vertailu{background:var(--pinta)}
section.tumma{background:var(--dark);color:var(--dark-fg);border-top-color:var(--dark)}
section.tumma h2,section.tumma h3{color:#fff}
section.tumma .muted,section.tumma p{color:var(--dark-muted)}
section.tumma .eyebrow{color:#F58A3C}
section.tumma a:not(.btn){color:#fff}

/* kortit */
.kortit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.kortit:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.kortti{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:26px}
.kortti h3{margin-bottom:.45em}
.kortti p{margin:0;line-height:1.6}
.kortti .nro{width:38px;height:38px;border-radius:50%;background:var(--primary-wash);color:var(--primary-teksti);font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:30px}
.tumma .kortit{gap:36px 48px}
.tumma .kortti{background:none;border:0;border-top:1px solid var(--dark-viiva);border-radius:0;padding:22px 0 0}
.tumma .kortti h3{font-size:1.9rem}
.luvut{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:56px}
.luku{background:var(--card);color:var(--fg);border:1px solid var(--border);border-radius:var(--r);padding:22px}
.luku b{display:block;font-family:var(--display);font-size:1.9rem;line-height:1.05;font-weight:700;color:var(--primary-teksti);margin-bottom:6px}
.luku span{color:var(--muted);font-size:.93rem;line-height:1.45;display:block}

/* ennen ja jälkeen */
.vertailu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px}
.vertailu>div{border-radius:var(--r);padding:30px 32px;background:var(--card);border:1px solid var(--border)}
.vertailu h3{margin:0 0 18px;font-size:2rem}
.vertailu ul{margin:0;padding:0;list-style:none}
.vertailu li{padding:12px 0 12px 30px;position:relative;border-top:1px solid var(--border);line-height:1.45}
.vertailu li::before{position:absolute;left:4px;top:12px;font-weight:700}
.vertailu-nyt{color:var(--muted)}
.vertailu-nyt h3{color:var(--muted)}
.vertailu-nyt li::before{content:"\2212";color:var(--muted)}
.vertailu-jalkeen{border-color:var(--primary)!important}
.vertailu-jalkeen li::before{content:"\2713";color:var(--primary-teksti)}

/* hinta */
.hinta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:72px;align-items:start}
.hinta>div:first-child .muted{max-width:36em}
.hintakortti{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:32px}
.hintakortti .iso-hinta{font-family:var(--display);font-size:3.8rem;font-weight:700;line-height:1;margin:10px 0 14px}
.hintakortti .iso-hinta small{font-family:var(--font);font-size:1rem;font-weight:500;color:var(--muted)}
.hintakortti ul{list-style:none;padding:0;margin:20px 0 22px}
.hintakortti li{position:relative;padding:9px 0 9px 26px;border-top:1px solid var(--border);font-size:.94rem;line-height:1.45}
.hintakortti li::before{content:"\2713";position:absolute;left:2px;top:9px;color:var(--primary-teksti);font-weight:700}
.hintakortti .yli{text-decoration:line-through;color:var(--muted);font-weight:700}

/* lomake */
.lomake{color:var(--fg);background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:32px}
.lomake label{display:block;font-weight:700;font-size:.9rem;margin:14px 0 6px}
.lomake input,.lomake select{width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--border);border-radius:8px;font:inherit;font-size:1rem;background:var(--card);color:var(--fg)}
.lomake input:focus,.lomake select:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
.lomake .rivi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.lomake .suostumus{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--muted);margin:18px 0}
.lomake .suostumus input{width:18px;min-height:0;height:18px;margin-top:3px;flex:none;accent-color:var(--primary)}
.lomake .suostumus a{color:var(--fg)}
.tumma .lomake p,.tumma .lomake .suostumus{color:var(--muted)}
.tumma .lomake a:not(.btn){color:var(--fg)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.ilmo{padding:14px 16px;border-radius:8px;margin-top:14px;display:none}
.ilmo.ok{display:block;background:var(--ok-wash);color:#0B4A4D}
.ilmo.virhe{display:block;background:var(--warn-wash);color:#5B4300}

/* kysymykset */
.faq{max-width:56rem;border-top:1px solid var(--border);margin-top:8px}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;font-weight:700;font-size:1rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--primary-teksti);font-weight:700;font-size:1.3rem;line-height:1;flex:none;transition:transform .15s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px;color:var(--muted);max-width:68ch}

/* esittelyn askeleet (käytössä vanhoilla sivuilla) */
.askel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:34px;align-items:center;padding:36px 0;border-top:1px solid var(--border)}
.askel:nth-child(even){grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.askel:nth-child(even) .teksti{order:2}
.puhelimet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:560px}
.puhelimet .kuva{border-radius:22px}

/* alatunniste */
footer{padding:32px 0;border-top:1px solid var(--border);color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:space-between;align-items:center}
footer b{color:var(--fg)}
footer a{color:var(--muted)}
footer a:hover{color:var(--fg)}
footer .some{display:flex;gap:10px}
footer .some a{display:inline-flex;width:40px;height:40px;border:1px solid var(--border);border-radius:50%;align-items:center;justify-content:center;color:var(--fg);background:var(--card)}
footer .some a:hover{color:#fff;background:var(--primary-tumma);border-color:var(--primary-tumma)}
footer .some svg{width:18px;height:18px}

/* oppaat ja sopimukset */
.art .wrap{max-width:46rem;padding-top:40px;padding-bottom:64px}
.art h1{font-size:clamp(2.3rem,5.4vw,3.4rem);line-height:1.02;margin-bottom:.45em}
.art .lead{font-size:1.15rem;color:var(--muted);line-height:1.6}
.art h2{font-size:2rem;line-height:1.1;margin:2.2em 0 .5em}
.art h3{font-size:1.45rem;margin:1.6em 0 .4em}
.art p,.art li{line-height:1.72}
.art ol,.art ul{padding-left:1.3em}
.art li{margin:.35em 0}
.art table{border-collapse:collapse;width:100%;font-size:.93rem;line-height:1.45;margin:1.2em 0 1.6em;display:block;overflow-x:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--r)}
.art th,.art td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--border)}
.art tr:last-child td{border-bottom:0}
.art th{background:var(--pinta);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.art pre.malli{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px;font-size:.85rem;line-height:1.5;overflow-x:auto;white-space:pre}
.murupolku{font-size:.86rem;color:var(--muted);margin-bottom:22px}
.murupolku a{color:var(--muted)}
.cta-laatikko{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:center;background:var(--dark);color:var(--dark-fg);border-radius:var(--r);padding:28px;margin:2.4em 0}
.cta-laatikko b{font-family:var(--display);font-size:1.6rem;line-height:1.08;display:block;margin-bottom:8px;color:#fff}
.cta-laatikko p{color:var(--dark-muted);margin:0;font-size:.95rem}
.cta-laatikko a:not(.btn){color:#fff}
.cta-napit{display:flex;flex-direction:column;gap:10px}
.cta-napit .btn{text-align:center}
.cta-laatikko .btn.toissijainen{background:transparent;color:#fff!important;border-color:#4A525E}
.cta-laatikko .btn.toissijainen:hover{background:#1F2631}
.lahteet{font-size:.88rem;color:var(--muted)}
.lahteet a{color:var(--muted)}
.opas-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:2.4em;padding-top:18px;border-top:1px solid var(--border);font-size:.92rem;font-weight:700}
.opas-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:10px 0 30px}
.opas-kortti{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:26px;text-decoration:none;color:var(--fg);transition:border-color .15s ease}
.opas-kortti:hover{border-color:var(--primary);color:var(--fg)}
.opas-kortti h2{font-size:1.7rem;line-height:1.05;margin:0 0 10px}
.opas-kortti p{color:var(--muted);font-size:.93rem;margin:0 0 14px}
.opas-kortti .lue{margin-top:auto;color:var(--primary-teksti);font-weight:700;font-size:.9rem}

/* etusivun perusteet-osio */
#urakkalaskenta .johdanto{font-size:1.06rem;max-width:46rem;margin:0 0 1.6em;line-height:1.75}
#urakkalaskenta h3{font-size:1.9rem;margin:2em 0 .5em}
#urakkalaskenta p{max-width:46rem;line-height:1.75}
#urakkalaskenta ol.vaiheet{max-width:46rem;padding-left:1.3em;display:flex;flex-direction:column;gap:.7em;margin:.4em 0 1em}
#urakkalaskenta ol.vaiheet li{line-height:1.6}
#urakkalaskenta ul.lista{max-width:46rem;padding-left:1.3em;display:flex;flex-direction:column;gap:.45em;margin:.4em 0 1em}
#urakkalaskenta .lahde{font-size:.88rem;margin-top:-.2em}

@media (max-width:1040px){
  /* Ahtaalla ruudulla valikosta karsitaan ensin ankkurilinkit, jotka löytyvät
     etusivua rullaamalla. Kirjaudu ja odotuslista jäävät aina. */
  .nav a[href="#urakkalaskenta"],.nav a[href="#ukk"],.nav a[href="#hinta"],.nav a[href="/#hinta"]{display:none}
  .luvut{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hinta{gap:48px}
}
@media (max-width:860px){
  .hero{padding:40px 0 48px}
  .hero .grid,.hinta,.askel,.askel:nth-child(even){grid-template-columns:minmax(0,1fr);gap:36px}
  .askel:nth-child(even) .teksti{order:0}
  .kortit,.kortit:has(>:nth-child(4):last-child){grid-template-columns:minmax(0,1fr)}
  .tumma .kortit{gap:28px}
  .lomake .rivi{grid-template-columns:minmax(0,1fr);gap:0}
  .vertailu,.puhelimet,.cta-laatikko,.opas-lista{grid-template-columns:minmax(0,1fr)}
  .nav a:not(.btn):not(.kirjaudu){display:none}
  .nav{gap:8px}
  .nav a.kirjaudu{margin-left:0;padding:10px 12px}
  .nav a.btn{padding:10px 12px}
  section{padding:56px 0}
  .vertailu>div,.hintakortti,.lomake{padding:24px 22px}
  .luvut{margin-top:40px}
}
@media (max-width:430px){
  body{font-size:16.5px}
  .top .wrap{gap:10px;min-height:64px}
  .top .logo{flex:0 1 auto;min-width:0}
  .top .logo img{height:auto;width:100px;max-width:100%}
  .nav{gap:6px;flex:none}
  .nav a.kirjaudu,.nav a.btn{font-size:.84rem;padding:8px 10px;min-height:44px}
  .luvut{grid-template-columns:minmax(0,1fr)}
  .cta .btn{width:100%}
  .hintakortti .iso-hinta{font-size:3.2rem}
}
@media (max-width:339px){
  .nav a.btn{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{
  @page{size:A4;margin:18mm}
  .top,footer,.tk-nappi{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  section{padding:24px 0;border:0}
  section.tumma,.cta-laatikko{background:#fff!important;color:#000!important}
  section.tumma h2,section.tumma h3,section.tumma p,.cta-laatikko b,.cta-laatikko p{color:#000!important}
  .art .wrap{max-width:none;padding:0}
  .art h2{break-after:avoid}
  .art table{display:table;font-size:8.5pt}
  .art tr{break-inside:avoid}
}

/* ===== Avaus 30.9.2026: uusi etusivu, Ominaisuudet, Hinta ja Vertailu (Lovable-malli) ===== */
.nav a.btn{white-space:nowrap}
.valikko{display:none;position:relative}
.valikko>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--border);border-radius:8px;background:var(--card);cursor:pointer}
.valikko>summary::-webkit-details-marker{display:none}
.valikko>summary span{position:relative;display:block;width:18px;height:2px;background:var(--fg)}
.valikko>summary span::before,.valikko>summary span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--fg)}
.valikko>summary span::before{top:-6px}.valikko>summary span::after{top:6px}
.valikko[open]>summary span{background:transparent}
.valikko[open]>summary span::before{top:0;transform:rotate(45deg)}.valikko[open]>summary span::after{top:0;transform:rotate(-45deg)}
.valikko nav{position:absolute;right:0;top:52px;width:min(280px,calc(100vw - 32px));background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:6px;box-shadow:0 20px 40px -20px rgba(19,25,34,.35);display:grid}
.valikko nav a{display:flex;align-items:center;min-height:46px;padding:0 12px;border-radius:8px;color:var(--fg);text-decoration:none;font-weight:700}
.valikko nav a:hover{background:var(--pinta)}
.puhelin{border:6px solid var(--dark);border-radius:30px;overflow:hidden;background:var(--dark);box-shadow:0 30px 60px -30px rgba(19,25,34,.5)}
.puhelin img{width:100%;height:auto;display:block;border-radius:22px}
.hero2{padding:56px 0 64px}
.hero2 .grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.hero2 h1{font-size:clamp(3rem,7.6vw,6rem);line-height:.94;margin-bottom:.35em}
.hero2 .lead{font-size:1.18rem;color:var(--muted);max-width:32em;line-height:1.6}
.hero2 .luottamus{font-size:.92rem;color:var(--muted);margin:0}
.hero-kuvat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:22px;align-items:start;max-width:560px;margin-left:auto}
.hero-kuvat .puhelin:first-child{margin-top:40px}
.kivut{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kivut .kortti h3{font-size:1.75rem}
.kivut .kortti p{color:var(--muted)}
.sivupaatos{max-width:44rem;margin:28px 0 0;font-size:1.06rem}
.vaiheet2{border-top:1px solid var(--border);margin-top:8px}
.vaihe2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:56px;align-items:center;padding:44px 0;border-bottom:1px solid var(--border)}
.vaihe2 .nro{font-size:.78rem;letter-spacing:.13em;font-weight:700;color:var(--primary-teksti)}
.vaihe2 h3{font-size:clamp(2rem,4vw,2.9rem);margin:.3em 0 .35em}
.vaihe2 p{font-size:1.08rem;color:var(--muted);max-width:32em;margin:0}
.vaihe2 .puhelin{max-width:250px;margin:0 auto;width:100%}
.hyodyt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.hyodyt article{border-top:1px solid var(--dark-viiva);padding:22px 0}
.hyodyt h3{font-size:1.8rem;margin:0 0 .3em;color:#fff}
.hyodyt p{margin:0;color:var(--dark-muted)}
.kaksi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:56px;align-items:center}
.nuolilinkki{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--primary-teksti);text-decoration:underline;text-underline-offset:4px}
.aloituskortti{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:30px}
.aloituskortti h3{font-size:2.2rem}
.harmaa{background:var(--pinta)}
.hintaosa .hintakortti .iso-hinta{margin:6px 0 4px}
.viiva{height:1px;background:var(--border);margin:22px 0}
.kaista{background:var(--dark);color:var(--dark-fg);border-top-color:var(--dark);padding:64px 0}
.kaista .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.kaista h2{color:#fff;margin:0 0 .3em;max-width:18em}
.kaista p{margin:0;color:var(--dark-muted)}
.kaista .eyebrow{color:#F58A3C}
.ominaisuus{padding:56px 0;border-top:1px solid var(--border)}
.ominaisuus:nth-of-type(even){background:var(--pinta)}
.ominaisuus .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:56px;align-items:center}
.ominaisuus h2{font-size:clamp(2rem,4.2vw,3rem)}
.ominaisuus p{font-size:1.06rem;color:var(--muted);max-width:34em}
.ominaisuus .puhelin{max-width:250px;width:100%;margin:0 auto}
.ominaisuus ul{margin:0;padding-left:1.2em;color:var(--muted)}
.ominaisuus li{margin:.3em 0}
.sisaltyy{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.sisaltyy li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid var(--border)}
.sisaltyy li::before{content:"\2713";position:absolute;left:4px;top:14px;color:var(--primary-teksti);font-weight:700}
.vertaus{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;font-size:.95rem}
.vertaus-kehys{overflow-x:auto;border-radius:var(--r)}
.vertaus th,.vertaus td{text-align:left;vertical-align:top;padding:14px 16px;border-top:1px solid var(--border)}
.vertaus thead th{background:var(--dark);color:#fff;border-top:0;font-size:.9rem}
.vertaus tbody th{width:22%;font-weight:700}
.vertaus td{color:var(--muted)}
.vertaus td.meidan{color:var(--fg)}
.sivuhero{padding:56px 0 40px}
.sivuhero h1{font-size:clamp(2.8rem,6.6vw,5rem);line-height:.98;max-width:15em}
.sivuhero .lead{font-size:1.16rem;color:var(--muted);max-width:36em}
@media (max-width:1100px){.nav a:not(.btn):not(.kirjaudu){display:none}.valikko{display:block}}
@media (max-width:980px){.kivut{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .hero2 .grid,.vaihe2,.kaksi,.ominaisuus .wrap{grid-template-columns:minmax(0,1fr);gap:28px}
  .hero-kuvat{margin:0 auto}
  .hyodyt{grid-template-columns:minmax(0,1fr)}
  .hero2{padding:36px 0 44px}
  .vaihe2 .puhelin,.ominaisuus .puhelin{max-width:230px}
}
@media (max-width:560px){.kivut{grid-template-columns:minmax(0,1fr)}.hero-kuvat{gap:12px}.hero-kuvat .puhelin{border-width:4px;border-radius:22px}.hero-kuvat .puhelin img{border-radius:18px}}
@media (max-width:430px){.nav a.btn{max-width:150px;white-space:normal;text-align:center;line-height:1.15;font-size:.8rem;padding:6px 10px}}
@media print{.valikko,.kaista,#kysy-nappi{display:none!important}}