/* Hetkolan markkinointisivu. Vain tokenien arvoja (tokenit.css), ei omia värejä tai kokoja. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fontit/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fontit/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--vari-pinta-perus);
  color: var(--vari-teksti-perus);
  font-family: var(--fontti-perus);
  font-size: var(--koko-perus);
  font-weight: var(--paino-perus);
  line-height: var(--rivinkorkeus-perus);
}
h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
  padding: 0;
}
ul,
ol {
  list-style: none;
}
h1 {
  font-size: var(--koko-otsikko-1);
  line-height: var(--rivinkorkeus-tiivis);
  font-weight: var(--paino-vahva);
}
h2 {
  font-size: var(--koko-otsikko-2);
  line-height: var(--rivinkorkeus-tiivis);
  font-weight: var(--paino-vahva);
  margin-bottom: var(--valistys-5);
}
h3 {
  font-size: var(--koko-iso);
  font-weight: var(--paino-vahva);
  margin-bottom: var(--valistys-2);
}
a {
  color: var(--vari-teksti-linkki);
}
:focus-visible {
  outline: 3px solid var(--vari-kohdistus-rengas);
  outline-offset: 2px;
}
.ohitus {
  position: absolute;
  left: var(--valistys-3);
  top: -100px;
  padding: var(--valistys-3) var(--valistys-4);
  background: var(--vari-pinta-nosto);
  border-radius: var(--sade-pieni);
  z-index: 10;
}
.ohitus:focus {
  top: var(--valistys-3);
}
.leveys {
  width: 100%;
  max-width: var(--sisalto-leveys);
  margin: 0 auto;
  padding: 0 var(--valistys-4);
}
.leveys--kapea {
  max-width: 44rem;
}

/* Yläosa */
.ylaosa {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--vari-pinta-perus);
  border-bottom: 1px solid var(--vari-reuna-perus);
}
.ylaosa-sisus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--valistys-4);
  min-height: 64px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--valistys-2);
  min-height: var(--kohde-min);
  color: var(--vari-korostus-perus);
  font-weight: var(--paino-vahva);
  font-size: var(--koko-iso);
  text-decoration: none;
}
.ylaosa nav ul {
  display: flex;
  gap: var(--valistys-2);
}
.ylaosa nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--kohde-min);
  padding: 0 var(--valistys-3);
  color: var(--vari-teksti-perus);
  text-decoration: none;
  border-radius: var(--sade-pieni);
}
.ylaosa nav a:hover {
  background: var(--vari-pinta-nosto);
}
@media (max-width: 760px) {
  .ylaosa nav {
    display: none;
  }
}

/* Napit */
.nappi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--kohde-min);
  padding: 0 var(--valistys-5);
  border-radius: 999px;
  border: 2px solid var(--vari-korostus-perus);
  background: var(--vari-korostus-perus);
  color: var(--vari-korostus-teksti);
  font-weight: var(--paino-vahva);
  text-decoration: none;
  transition: background var(--liike-lyhyt);
}
.nappi:hover {
  background: var(--vari-korostus-painettu);
  border-color: var(--vari-korostus-painettu);
}
.nappi--toinen {
  background: transparent;
  color: var(--vari-korostus-perus);
}
.nappi--toinen:hover {
  background: var(--vari-pinta-nosto);
  color: var(--vari-korostus-painettu);
}
.nappi--pieni {
  padding: 0 var(--valistys-4);
}
.napit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--valistys-3);
  margin: var(--valistys-5) 0 var(--valistys-3);
}
.napit--keski {
  justify-content: center;
}

/* Sankari */
.sankari {
  padding: var(--valistys-8) 0;
  background: var(--vari-pinta-nosto);
}
.sankari-sisus {
  display: grid;
  gap: var(--valistys-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .sankari-sisus {
    grid-template-columns: 1.3fr 1fr;
  }
}
.yla-otsikko {
  color: var(--vari-teksti-toissijainen);
  margin-bottom: var(--valistys-3);
}
.ingressi {
  font-size: var(--koko-iso);
  margin-top: var(--valistys-4);
  max-width: 40rem;
}
.pieni {
  font-size: var(--koko-pieni);
  color: var(--vari-teksti-toissijainen);
}

/* Puhelinesimerkki */
.puhelin {
  display: flex;
  justify-content: center;
}
.puhelin-kuori {
  width: 100%;
  max-width: 320px;
  padding: var(--valistys-5);
  border-radius: var(--sade-iso);
  border: 1px solid var(--vari-reuna-perus);
  background: var(--vari-pinta-perus);
  box-shadow: var(--syvyys-taso-2);
  display: grid;
  gap: var(--valistys-3);
}
.puhelin-vaihe {
  font-size: var(--koko-pieni);
  color: var(--vari-teksti-toissijainen);
}
.puhelin-otsikko {
  font-size: var(--koko-otsikko-3);
  font-weight: var(--paino-vahva);
}
.puhelin-palvelu {
  display: flex;
  justify-content: space-between;
  gap: var(--valistys-3);
  padding: var(--valistys-3) var(--valistys-4);
  border-radius: var(--sade-keski);
  background: var(--vari-pinta-upotus);
}
.puhelin-palvelu span {
  font-weight: var(--paino-vahva);
}
.puhelin-paiva {
  font-weight: var(--paino-vahva);
}
.puhelin-ajat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--valistys-2);
}
.puhelin-ajat span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--kohde-min);
  border-radius: var(--sade-keski);
  border: 1px solid var(--vari-reuna-vahva);
}
.puhelin-ajat .valittu {
  background: var(--vari-korostus-perus);
  border-color: var(--vari-korostus-perus);
  color: var(--vari-korostus-teksti);
  font-weight: var(--paino-vahva);
}
.puhelin-nappi {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--kohde-min);
  border-radius: 999px;
  background: var(--vari-korostus-perus);
  color: var(--vari-korostus-teksti);
  font-weight: var(--paino-vahva);
}

/* Osiot */
.osio {
  padding: var(--valistys-8) 0;
}
.osio--nosto {
  background: var(--vari-pinta-nosto);
}
.osio--toiminta {
  text-align: center;
}
.osio--toiminta .ingressi {
  margin-left: auto;
  margin-right: auto;
}
.askeleet,
.kortit,
.hinnat {
  display: grid;
  gap: var(--valistys-4);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .askeleet,
  .hinnat {
    grid-template-columns: repeat(3, 1fr);
  }
  .kortit {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1040px) {
  .kortit {
    grid-template-columns: repeat(3, 1fr);
  }
}
.askeleet li,
.kortit li,
.hinnat li {
  padding: var(--valistys-5);
  border-radius: var(--sade-iso);
  border: 1px solid var(--vari-reuna-perus);
  background: var(--vari-pinta-perus);
}
.osio--nosto .kortit li {
  background: var(--vari-pinta-perus);
}
.hinnat {
  margin-top: var(--valistys-5);
}
.hinnat .suositus {
  border: 2px solid var(--vari-korostus-perus);
}
.hinta {
  font-size: var(--koko-otsikko-2);
  font-weight: var(--paino-vahva);
  margin-bottom: var(--valistys-3);
}
.hinta span {
  font-size: var(--koko-perus);
  font-weight: var(--paino-perus);
  color: var(--vari-teksti-toissijainen);
}

/* UKK */
details {
  border-bottom: 1px solid var(--vari-reuna-vahva);
}
summary {
  display: flex;
  align-items: center;
  min-height: var(--kohde-min);
  padding: var(--valistys-3) 0;
  cursor: pointer;
  font-weight: var(--paino-vahva);
}
details p {
  padding-bottom: var(--valistys-4);
}

/* Teksti (tietosuoja) */
.teksti p {
  margin-top: var(--valistys-4);
}

/* Alaosa */
.alaosa {
  padding: var(--valistys-6) 0;
  border-top: 1px solid var(--vari-reuna-perus);
  background: var(--vari-pinta-perus);
}
.alaosa-sisus {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--valistys-3);
  align-items: center;
}
.alaosa ul {
  display: flex;
  gap: var(--valistys-4);
  flex-wrap: wrap;
}
.alaosa a {
  display: inline-flex;
  align-items: center;
  min-height: var(--kohde-min);
}
summary::after {
  content: '+';
  margin-left: auto;
  padding-left: var(--valistys-3);
  font-size: var(--koko-otsikko-3);
}
details[open] summary::after {
  content: '\2212';
}

.valikko-pieni {
  display: none;
  border-top: 1px solid var(--vari-reuna-perus);
  overflow-x: auto;
}
.valikko-pieni ul {
  display: flex;
  gap: var(--valistys-2);
  padding: 0 var(--valistys-4);
  width: max-content;
}
.valikko-pieni a {
  display: inline-flex;
  align-items: center;
  min-height: var(--kohde-min);
  padding: 0 var(--valistys-3);
  color: var(--vari-teksti-perus);
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .valikko-pieni {
    display: block;
  }
}
.puhelin-kuori {
  pointer-events: none;
  user-select: none;
}