/* css/etusivu.css — vain etusivu.
   Muista näkymistä poiketen tämä on luettava sivu eikä työkalu: leveys on rajattu rivipituuden
   mukaan, ja ainoa oranssi on siinä mitä sivulla tullaan tekemään. */

body.etusivu{
  background:var(--canvas); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.6; margin:0;
}

.ylapalkki{
  display:flex; align-items:center; gap:16px;
  padding:16px 24px; border-bottom:1px solid var(--line); background:var(--card);
}
.ylapalkki .logo{height:26px; width:auto}
.ylapalkki .btn{margin-left:auto}

main{max-width:860px; margin:0 auto; padding:0 24px 64px}

section{padding:48px 0; border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}

h1{font-size:38px; line-height:1.15; letter-spacing:-.02em; margin:0 0 18px}
h2{font-size:22px; margin:0 0 12px}
p{margin:0 0 14px; max-width:64ch}

.hero{padding-top:56px}
.ingressi{font-size:18.5px; color:var(--ink-soft)}
.napit{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:26px}
.ehto{color:var(--muted); font-size:14px}

/* Toiminta on lähes musta pinta — sama sääntö kuin muualla: se merkitsee kohtaa joka odottaa
   käyttäjän päätöstä, eikä sitä käytetä koristeena. */
.btn{
  display:inline-block; text-decoration:none; border:0; border-radius:9px;
  padding:9px 16px; background:var(--brand); color:var(--brand-ink);
  font-family:var(--sans); font-size:14px; font-weight:600; cursor:pointer;
}
.btn:hover{background:var(--brand2)}
.btn.ghost{background:transparent; color:var(--ink-soft); border:1px solid var(--line)}
.btn.ghost:hover{background:var(--line2)}
.btn.iso{padding:14px 26px; font-size:16px; font-weight:700}

.osapuolet{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.osapuolet .kortti{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:22px 22px 18px; box-shadow:var(--varjo);
}
.osapuolet ul{margin:12px 0 0; padding-left:20px; color:var(--ink-soft)}
.osapuolet li{margin-bottom:7px}

.kulku ol{margin:0; padding-left:22px; max-width:64ch}
.kulku li{margin-bottom:11px; color:var(--ink-soft)}
.kulku li b{color:var(--ink)}

.hinta .pieni{font-size:14.5px; color:var(--muted)}

.aloitus .btn{margin-top:10px}

footer{
  border-top:1px solid var(--line); background:var(--card);
  padding:22px 24px; text-align:center; color:var(--muted); font-size:14px;
}
footer a{color:var(--ink-soft)}

@media (max-width:720px){
  h1{font-size:29px}
  .ingressi{font-size:17px}
  .osapuolet{grid-template-columns:1fr}
  section{padding:36px 0}
}