/*
  Hintasivu (/kotisivujen-hinta) — vain tämän sivun tyylit.

  Pohja, tokenit, header, footer, napit, .faq ja .price-includes tulevat
  style.css:stä. Täällä on se, mitä muualla ei ole: hintahero hinnastokortilla,
  vertailulista, kululaskelma ja vastaväiteosio. Erillinen tiedosto siksi, että
  style.css on jo 2 200 riviä eikä kampanjasivun etusivu tarvitse näistä mitään.
*/

/* Sticky header peittäisi osion otsikon, kun navista hypätään ankkuriin.
   Sivun navi on kokonaan sivunsisäinen, joten tämä osuu joka linkkiin. */
.hinnasto-card,
.hinta-compare,
.hinta-includes,
.hinta-why,
.hinta-faq {
  scroll-margin-top: 84px;
}

/* -------------------- Hero -------------------- */

.hinta-hero {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--panel-tint) 100%);
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(48px, 7vw, 88px);
}

.hinta-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}

@media (min-width: 900px) {
  .hinta-hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
  }
}

/* style.css keskittää kickerin, koska etusivulla se on aina keskitetyn osion
   otsikon yläpuolella. Hero on vasemmalle tasattu, joten keskitettynä se
   leijuisi irrallaan otsikon yläpuolella väärässä kohdassa. */
.hinta-hero .kicker {
  justify-content: flex-start;
}

.hinta-hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.2rem);
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  text-wrap: balance;
}

/* Vastaus ennen myyntipuhetta: kävijä tuli kysymyksellä, joten ensimmäinen
   kappale on luku eikä lupaus. Siksi se on muuta leipätekstiä isompi. */
.hinta-lead {
  font-size: clamp(1.02rem, 1.9vw, 1.18rem);
  line-height: 1.6;
  color: var(--text);
  max-width: 52ch;
  margin-bottom: 14px;
}

.hinta-lead strong {
  font-weight: 600;
  color: var(--ink-deep);
  white-space: nowrap;
}

.hinta-lead-note {
  font-size: 0.95rem;
  max-width: 52ch;
  margin-bottom: 28px;
}

.hinta-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (min-width: 620px) {
  .hinta-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hinta-facts > div {
  background: var(--surface);
  padding: 14px 16px;
}

.hinta-facts dt {
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 4px;
}

.hinta-facts dd {
  margin: 0;
  font-family: "Clash Display", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-deep);
}

/* Neljäs ruutu ei ole fakta vaan CTA: täyttää ruudukon viimeisen solun
   sen sijaan että se jäisi tyhjäksi harmaaksi laatikoksi. */
.hinta-facts-cta {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .btn-outline:n oma padding (15px 28px) tulee style.css:ssä .btn-sm:n
   jälkeen ja voittaisi sen kaskadissa, joten koko on pakko lyödä lukkoon
   tässä eikä luottaa btn-sm-luokkaan. */
.hinta-facts-cta .btn {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  padding: 8px 12px;
  font-size: 0.85rem;
}

/* -------------------- Hinnastokortti -------------------- */

.hinnasto-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 4vw, 32px);
}

/* section h2 on keskitetty ja iso; kortin otsikko on vasemmalla ja pienempi,
   koska se on lomakkeen otsikko eikä osion. */
.hinnasto-title {
  font-size: 1.3rem;
  text-align: left;
  margin-bottom: 8px;
}

.hinnasto-sub {
  font-size: 0.92rem;
  margin-bottom: 20px;
}

.hinnasto-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 16px;
}

.hinnasto-field input {
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 48px;
}

.hinnasto-field input:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

.hinnasto-submit {
  width: 100%;
}

.hinnasto-privacy {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-2);
  margin: 14px 0 0;
}

.hinnasto-alt {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}

.hinnasto-alt a {
  font-weight: 600;
  white-space: nowrap;
}

.hinnasto-success {
  text-align: center;
  padding: 8px 0 4px;
}

.hinnasto-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
}

.hinnasto-success-icon svg {
  width: 26px;
  height: 26px;
}

.hinnasto-success-title {
  font-family: "Clash Display", system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink-deep);
  margin-bottom: 6px;
}

.hinnasto-success-note {
  font-size: 0.88rem;
  margin: 0;
}

/* -------------------- Kuvat -------------------- */

/* margin: 0 auto eika margin: 0 — hero-kuva on myos .container, ja pelkka
   nolla ylikirjoittaisi sen keskityksen (hinta.css ladataan style.css:n
   jalkeen, joten sama tarkkuus voittaa). Silloin kaista valuu vasempaan
   reunaan leveilla ruuduilla. */
.hinta-shot {
  margin: 0 auto;
}

.hinta-shot img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.hinta-hero-shot {
  margin-top: clamp(36px, 5vw, 56px);
}

.hinta-shot figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-2);
}

/* Tata kuvaa EI rajata kaistaksi kuten heroa: sen sisalto on kadet
   nappaimistolla, ja matala rajaus leikkasi ne pois - jaljelle jai irrallinen
   naytonpala. Kapeampi mutta tayskorkea kuva sailyttaa sommittelun. */
.hinta-why-shot {
  max-width: 760px;
  margin: 0 auto clamp(28px, 4vw, 40px);
}

/* 16:9-kuva rajataan kaistaksi, koska tayskorkeana se olisi 585 px ja tyontaisi
   hintavertailun kokonaan ensimmaisen ruudun alapuolelle. Rajaus on vain
   leveilla ruuduilla: kapealla matala kaista litistyisi niin, ettei naytoilta
   erottaisi enaa mitaan. */
@media (min-width: 700px) {
  /* Kuvatiedosto on jo valmiiksi 2.1:1 ja rajattu tiiviisti laitteiden
     ympari, joten tama saanto vain lukitsee suhteen eika syo mitaan. */
  .hinta-hero-shot img {
    aspect-ratio: 2.1 / 1;
    object-fit: cover;
    object-position: center 50%;
  }
}

/* Mobiilissa toisin pain: 2.1:1 kaista olisi 335 px levealla vain 160 px
   korkea, jolloin ruudun sisallosta ei erottaisi mitaan. 16:9 rajaa kuvan
   sivuilta eli zoomaa laitteeseen, jolloin sivusto pysyy luettavana. */
@media (max-width: 699.98px) {
  .hinta-hero-shot img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
  }
}

/* -------------------- Vertailu -------------------- */

.hinta-compare {
  background: var(--surface);
}

.hinta-section-sub {
  text-align: center;
  max-width: 60ch;
  margin: -16px auto clamp(28px, 4vw, 40px);
}

.compare-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.compare-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 24px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

@media (min-width: 800px) {
  .compare-row {
    grid-template-columns: 1fr 0.8fr 1.6fr;
    align-items: center;
    gap: 24px;
  }
}

/* Oma vaihtoehto erottuu limellä, koska rivi on sisällöltään samanlainen kuin
   muut: ilman korostusta kävijä joutuisi lukemaan neljä riviä löytääkseen
   sen, jota hän on tullut vertaamaan. */
.compare-row.is-highlight {
  border-color: var(--lime);
  background: rgba(168, 232, 75, 0.09);
  box-shadow: var(--shadow-card);
}

.compare-who h3 {
  font-size: 1.1rem;
  margin: 0 0 2px;
}

.compare-who p {
  font-size: 0.82rem;
  margin: 0;
}

.compare-price {
  font-family: "Clash Display", system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-deep);
  margin: 0;
  line-height: 1.2;
}

.compare-price span {
  display: block;
  font-family: "General Sans", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-2);
  margin-top: 2px;
}

.compare-note {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  text-wrap: pretty;
}

.compare-footnote {
  max-width: 62ch;
  margin: clamp(24px, 4vw, 32px) auto 0;
  text-align: center;
  font-size: 0.92rem;
}

/* -------------------- Mitä sisältyy + kulut -------------------- */

.hinta-includes {
  background: var(--panel-tint);
}

.includes-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
}

@media (min-width: 900px) {
  .includes-split {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.hinta-price-includes {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: clamp(22px, 3.5vw, 30px);
  gap: 16px;
  margin: 0;
}

.cost-panel {
  background: var(--ink-deep);
  border-radius: var(--radius-card);
  padding: clamp(22px, 3.5vw, 30px);
  color: #fff;
}

.cost-panel-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: "General Sans", system-ui, sans-serif;
  color: var(--lime);
  margin: 0 0 12px;
}

.cost-panel-title-sep {
  margin-top: 28px;
}

/* ALV-merkintä hinnaston otsikossa: hintavertailija laskee vuosihinnan joka
   tapauksessa, joten verokannan on käytävä ilmi samasta silmäyksestä. */
.cost-panel-vat {
  margin-left: 8px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}

.cost-table {
  width: 100%;
  border-collapse: collapse;
}

.cost-table th,
.cost-table td {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.92rem;
  vertical-align: baseline;
}

.cost-table th {
  text-align: left;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}

.cost-table td {
  text-align: right;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  padding-left: 16px;
}

.cost-table tr:last-child th,
.cost-table tr:last-child td {
  border-bottom: none;
}

.cost-total th,
.cost-total td {
  padding-top: 14px;
  font-size: 1.05rem;
}

.cost-total th {
  color: #fff;
  font-weight: 600;
}

.cost-total td {
  font-family: "Clash Display", system-ui, sans-serif;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--lime);
}

.cost-panel-note {
  margin: 18px 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

/* -------------------- Miksi näin edullista -------------------- */

.hinta-why {
  background: var(--surface);
}

.why-list {
  list-style: none;
  counter-reset: why;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0;
  padding: 0;
}

@media (min-width: 800px) {
  .why-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}

.why-list li {
  counter-increment: why;
  position: relative;
  padding: 24px 24px 22px 64px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.why-list li::before {
  content: counter(why);
  position: absolute;
  left: 22px;
  top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--lime-ink);
  font-family: "Clash Display", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
}

.why-list h3 {
  font-size: 1.08rem;
  margin-bottom: 8px;
}

.why-list p {
  font-size: 0.94rem;
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}

/* Rehellisyysosio on tarkoituksella hillitty eikä korostettu: se kertoo
   milloin kannattaa ostaa muualta, ja se luetaan uskottavammin toteamuksena
   kuin myyntilaatikkona. */
.why-honest {
  margin-top: clamp(24px, 4vw, 32px);
  padding: 24px 26px;
  border-left: 3px solid var(--lime);
  background: var(--panel-tint);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.why-honest h3 {
  font-size: 1.02rem;
  margin-bottom: 8px;
}

.why-honest p {
  font-size: 0.94rem;
  line-height: 1.6;
  margin: 0;
  max-width: 76ch;
}

/* -------------------- UKK -------------------- */

/* Osio käyttää style.css:n .faq-tyylejä. Hintasivulla kysymykset ovat
   kuitenkin yhtenä sarakkeena eivätkä kahtena: ne luetaan järjestyksessä
   ylhäältä alas, koska ensimmäinen on juuri se, jota kävijä tuli hakemaan. */
.hinta-faq {
  background: var(--panel-tint);
}

@media (min-width: 700px) {
  .hinta-faq .faq-grid {
    grid-template-columns: 1fr;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* -------------------- Loppu-CTA -------------------- */

/* Taustakuva on tekstuuria eika kuva: tumma peite pitaa keskitetyn tekstin
   luettavana, ja kuvan tyhja ylaosa osuu tekstin taakse. background-color jaa
   pohjalle, jotta osio on tumma myos jos webp ei lataudu. */
.hinta-cta {
  background-color: var(--ink-deep);
  background-image:
    linear-gradient(rgba(13, 13, 13, 0.84), rgba(13, 13, 13, 0.93)),
    url("../img/hinta-cta-tausta.webp");
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  text-align: center;
}

.hinta-cta h2 {
  color: #fff;
  margin-bottom: 14px;
}

.hinta-cta-sub {
  max-width: 56ch;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, 0.72);
}

.hinta-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.hinta-cta .btn-outline {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 12px 22px;
}

.hinta-cta .btn-outline:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.hinta-cta-alt {
  margin: 22px 0 0;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.62);
}

.hinta-cta-alt a {
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}