/* =========================================================
   Sivuston tyylit. Mobiili ensin: perustyylit ovat puhelimelle,
   leveämmät näytöt @media-säännöissä. Värit: teema.css.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fontti);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  color: var(--vari-teksti);
  background: var(--vari-tausta);
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--fontti-otsikko);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--vari-paa-tumma);
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 7vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.55rem, 5vw, 2.25rem); font-weight: 650; }
h3 { font-size: 1.15rem; font-weight: 650; }
p  { margin: 0 0 1em; }

a { color: var(--vari-paa); }
img { max-width: 100%; height: auto; display: block; }

.kehys { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.kapea { max-width: 720px; }
.keskitetty { text-align: center; }
.nakymaton {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.ohita {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--vari-paa); color: #fff; padding: 8px 14px; border-radius: 8px;
}
.ohita:focus { top: 8px; }

.ikoni { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Napit ---------- */
.nappi {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.7em 1.4em;
  font: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
  color: #fff; background: var(--vari-korostus);
  border: 1.5px solid var(--vari-korostus); border-radius: var(--pyoristys-nappi);
  box-shadow: none;
  cursor: pointer;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.nappi:hover { background: var(--vari-korostus-tumma); border-color: var(--vari-korostus-tumma); }
.nappi:focus-visible { outline: 3px solid var(--vari-paa); outline-offset: 3px; }
.nappi--iso { min-height: 56px; font-size: 1.1rem; padding: 0.8em 1.6em; }
.nappi--pieni { min-height: 40px; padding: 0.45em 1em; font-size: 0.95rem; box-shadow: none; }
.nappi--toiminto { color: #fff; background: var(--vari-toiminto); border-color: var(--vari-toiminto); }
.nappi--toiminto:hover { color: #fff; background: var(--vari-toiminto-tumma); border-color: var(--vari-toiminto-tumma); }
.nappi--toissijainen {
  color: var(--vari-paa-tumma); background: transparent; border-color: var(--vari-paa); box-shadow: none;
}
.nappi--toissijainen:hover { background: var(--vari-paa-vaalea); border-color: var(--vari-paa); }

.napit { display: flex; flex-direction: column; gap: 12px; align-items: stretch; margin-top: 1.5rem; }
.napit--keskitetty { align-items: center; }
.tekstilinkki {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 600; color: var(--vari-paa); text-decoration: none; padding: 0.4em 0;
}
.tekstilinkki:hover { text-decoration: underline; }

/* ---------- Yläpalkki ---------- */
.ylapalkki {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--vari-raja);
  backdrop-filter: saturate(1.4) blur(8px);
}
.ylapalkki__sisus { display: flex; align-items: center; gap: 6px; min-height: 64px; flex-wrap: wrap; }
.ylapalkki__cta { padding: 0.45em 0.85em; font-size: 0.9rem; }
.logo {
  margin-right: auto; display: inline-flex; align-items: center; gap: 9px;
  font-weight: 650; font-size: 1.05rem; letter-spacing: -0.025em;
  color: var(--vari-paa-tumma); text-decoration: none;
}
.logo__merkki { width: 1.45em; height: 1.45em; flex: none; transform: translateY(-0.17em); }
.logo__merkki .m1 { fill: var(--vari-lehti); }
.logo__merkki .m1v { fill: none; stroke: var(--vari-paa); stroke-width: 3.5; stroke-linecap: round; }
.logo__merkki .m2 { fill: var(--vari-merkki); }
.logo__paate { color: var(--vari-teksti-heikko); font-weight: 500; }
.logo--vaalea { color: #fff; }
.logo--vaalea .logo__merkki .m1 { fill: #fff; }
.logo--vaalea .logo__merkki .m1v { stroke: #fff; }
.logo--vaalea .logo__merkki .m2 { fill: #DDB650; }
.logo--vaalea .logo__paate { color: rgba(255, 255, 255, 0.65); }

.valikkonappi {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--vari-paa-tumma);
}
.valikkonappi__viivat, .valikkonappi__viivat::before, .valikkonappi__viivat::after {
  content: ""; display: block; width: 22px; height: 2.5px; border-radius: 2px; background: currentColor;
  position: relative; transition: transform .2s, opacity .2s;
}
.valikkonappi__viivat::before { position: absolute; top: -7px; }
.valikkonappi__viivat::after  { position: absolute; top: 7px; }
.valikkonappi[aria-expanded="true"] .valikkonappi__viivat { background: transparent; }
.valikkonappi[aria-expanded="true"] .valikkonappi__viivat::before { transform: translateY(7px) rotate(45deg); }
.valikkonappi[aria-expanded="true"] .valikkonappi__viivat::after  { transform: translateY(-7px) rotate(-45deg); }

.paavalikko { display: none; width: 100%; flex-direction: column; padding: 8px 0 16px; }
.paavalikko.auki { display: flex; }
.paavalikko a:not(.nappi) {
  padding: 12px 4px; font-weight: 500; color: var(--vari-teksti); text-decoration: none;
  border-bottom: 1px solid var(--vari-raja);
}
.paavalikko__cta { display: none; }

/* ---------- Hero ---------- */
.hero {
  padding: 28px 0 40px;
  background: var(--vari-vaalea-osio);
  border-bottom: 1px solid var(--vari-raja);
}
.hero__sisus { display: grid; gap: 28px; }
.hero__johdanto { font-size: 1.15rem; color: var(--vari-teksti-heikko); max-width: 34em; }
.merkki {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.3em 0.75em; margin-bottom: 1rem;
  font-weight: 600; font-size: 0.88rem; color: var(--vari-paa-tumma);
  background: var(--vari-paa-vaalea); border: 0; border-radius: 6px;
}
.merkki .ikoni { color: var(--vari-paa); }
.hintamerkki { margin-top: 1rem; font-size: 0.98rem; color: var(--vari-paa-tumma); }
.hintamerkki strong {
  display: inline-block; padding: 0.3em 0.8em; border-radius: 6px;
  background: var(--vari-korostus-vaalea);
}
.hero__kuva .kuva { border-radius: var(--pyoristys-iso); box-shadow: var(--varjo-iso); }

/* ---------- Kansi (etusivun ylin osio: kuva ja tekstilaatikko päällä) ---------- */
.kansi { position: relative; background: var(--vari-tausta); }
.kansi__kuva .kuva { width: 100%; border-radius: 0; aspect-ratio: 16 / 9; object-fit: cover; object-position: 70% 30%; }
.kansi__sisus { position: relative; margin-top: -40px; padding-bottom: 32px; }
.kansi .napit { margin-top: 1.2rem; }

/* ---------- Etusivun värikaista ja haku ---------- */
.hakukansi {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 48px 0 124px; color: #fff; text-align: center; background: var(--vari-paa-tumma);
}
.hakukansi__kuva { position: absolute; inset: 0; z-index: -2; }
.hakukansi__kuva .kuva { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; border-radius: 0; }
.hakukansi::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14, 47, 41, 0.55) 0%, rgba(14, 47, 41, 0.72) 100%);
}
.hakukansi h1 { color: #fff; margin: 0 auto 0.4em; max-width: 16em; }
.hakukansi__merkki {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; background: rgba(255, 255, 255, 0.14);
}
.hakukansi__merkki .ikoni { width: 18px; height: 18px; }
.hakukansi__faktat {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px;
  font-size: 0.95rem; font-weight: 500; color: rgba(255, 255, 255, 0.85);
}
.hakukansi__faktat { flex-direction: column; }
@media (min-width: 600px) {
  .hakukansi__faktat { flex-direction: row; }
  .hakukansi__faktat li + li::before { content: "·"; margin-right: 18px; color: rgba(255, 255, 255, 0.5); }
}
.hakukortti-kaari { position: relative; margin-top: -60px; }
.hakukortti {
  display: grid; gap: 0 14px; padding: 20px 18px 4px;
  background: var(--vari-pinta); border-radius: var(--pyoristys-iso); box-shadow: var(--varjo-iso);
}
.hakukortti .kentta input[type="search"] {
  display: block; width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 1rem;
  color: var(--vari-teksti); background: var(--vari-pinta); border: 1px solid #CDD3CF; border-radius: var(--pyoristys);
}
.hakukortti .kentta input[type="search"]:focus { outline: none; border-color: var(--vari-paa); box-shadow: 0 0 0 3px var(--vari-paa-vaalea); }
.hakukortti__nappi { margin-bottom: 18px; min-height: 50px; }
.pikavalinnat {
  list-style: none; margin: 16px -16px 0; padding: 0 16px 4px; display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
}
.pikavalinnat::-webkit-scrollbar { display: none; }
.pikavalinnat li { flex: none; }
@media (min-width: 900px) { .pikavalinnat { flex-wrap: wrap; overflow: visible; margin: 16px 0 0; padding: 0; } }
.pikavalinnat a {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  font-size: 0.9rem; font-weight: 500; color: var(--vari-paa-tumma); text-decoration: none;
  background: var(--vari-pinta); border: 1px solid var(--vari-raja);
}
.pikavalinnat a:hover { border-color: var(--vari-paa); }
.pikavalinnat .ikoni { width: 16px; height: 16px; }
.osio__otsikkorivi { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.osio__otsikkorivi h2 { margin-bottom: 0.3em; }
.osio__otsikkonappi { min-height: 40px; padding: 0.45em 1.1em; font-size: 0.95rem; margin-bottom: 0.6em; }
.osio__otsikkonappi .ikoni { width: 18px; height: 18px; }
@media (max-width: 599px) { .osio__otsikkonappi { display: none; } }

/* ---------- Myyjälle: kaksi laatikkoa ---------- */

/* ---------- Lupaukset ---------- */

.lupaus {
  background: var(--vari-pinta); border-radius: var(--pyoristys); padding: 22px;
  box-shadow: var(--varjo); border: 1px solid var(--vari-raja);
}
.lupaus h2 { font-size: 1.2rem; margin: 0.6em 0 0.4em; }
.lupaus p { margin: 0; color: var(--vari-teksti-heikko); }

/* ---------- Osiot ---------- */
.osio { padding: 56px 0; }
.osio--vaalea { background: var(--vari-vaalea-osio); }
.ylaotsikko {
  margin-bottom: 0.6em; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vari-korostus);
}
.kaksi { display: grid; gap: 28px; align-items: center; }
.tarkistuslista { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 12px; }
.tarkistuslista li { display: flex; gap: 12px; align-items: flex-start; }
.tarkistuslista .ikoni {
  width: 30px; height: 30px; padding: 5px; border-radius: 50%;
  color: var(--vari-paa); background: var(--vari-paa-vaalea); margin-top: -2px;
}

/* ---------- Vaiheet ---------- */
.vaiheet { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; gap: 16px; counter-reset: none; }
.vaihe {
  position: relative; background: var(--vari-pinta); border-radius: var(--pyoristys);
  padding: 24px 22px 20px; box-shadow: var(--varjo);
}
.vaihe p { margin: 0; color: var(--vari-teksti-heikko); }

/* ---------- Suosittelijat ---------- */

.suosittelu {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  padding: 46px 22px 22px; border-radius: var(--pyoristys-iso);
  background: var(--vari-pinta); border: 1px solid var(--vari-raja); box-shadow: var(--varjo);
}
.suosittelu blockquote { margin: 12px 0 0; font-size: 1.08rem; line-height: 1.55; }
.suosittelu blockquote p { margin: 0; }
.suosittelu__henkilo { display: flex; align-items: center; gap: 12px; }
.suosittelu__henkilo p { margin: 0; line-height: 1.35; }
.suosittelu__henkilo span { font-size: 0.92rem; color: var(--vari-teksti-heikko); }
.suosittelu__kuva { width: 56px !important; height: 56px; flex: none; border-radius: 50%; object-fit: cover; }
.suosittelu .kuvapaikka.suosittelu__kuva { padding: 0; border-width: 2px; }
.suosittelu .kuvapaikka.suosittelu__kuva > span { display: none; }
.suosittelu .suosittelu__nimikirjaimet {
  display: grid; place-items: center; font-size: 1.1rem; font-weight: 600; color: #fff; background: var(--vari-paa);
}

/* ---------- Kokoluokat ---------- */
.kokoluokat__johdanto { max-width: 40em; margin: 0 auto; color: var(--vari-teksti-heikko); }
.kokoluokat__lista { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 16px; }
.kokoluokka {
  overflow: hidden; border-radius: var(--pyoristys-iso); background: var(--vari-pinta);
  border: 1px solid var(--vari-raja); box-shadow: var(--varjo);
}
.kokoluokka .kuva { border-radius: 0; }
.kokoluokka .kuvapaikka > span:not(.kuvapaikka__tunnus) { display: none; }
.kokoluokka__teksti { padding: 18px 20px 20px; }
.kokoluokka h3 { margin-bottom: 0.4em; }
.kokoluokka p { margin: 0; color: var(--vari-teksti-heikko); }

/* ---------- Toimialat ---------- */
.toimialat {
  list-style: none; padding: 0; margin: 1.5rem 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.toimiala {
  display: block; position: relative; overflow: hidden; border-radius: var(--pyoristys);
  text-decoration: none; color: #fff; background: var(--vari-paa); box-shadow: var(--varjo);
}
.toimiala .kuva { border-radius: 0; transition: transform .3s; }
.toimiala:hover .kuva { transform: scale(1.04); }
.toimiala::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14, 47, 41, 0.9) 0%, rgba(14, 47, 41, 0.15) 60%, transparent 100%);
}
.toimiala__nimi {
  position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1;
  font-weight: 600; font-size: 0.98rem; line-height: 1.25;
}
/* Toimialaruudussa ei ole tilaa kuvaohjeelle: tiedostonimet ovat KUVAT.md:ssä (toimiala-<tunnus>.jpg) */
.toimiala .kuvapaikka > span { display: none; }

/* ---------- Nosto (Mietitkö myyntiä) ---------- */
.nosto { position: relative; padding: 0; background: var(--vari-paa-tumma); }

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

/* ---------- Kuvapaikat ---------- */
.kuva { width: 100%; object-fit: cover; }
.kuvapaikka {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 16px; overflow: hidden;
  font-size: 0.82rem; line-height: 1.4; color: var(--vari-paa-tumma);
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(20, 70, 60, 0.05) 14px 28px),
    linear-gradient(135deg, var(--vari-paa-vaalea), var(--vari-korostus-vaalea));
  border: 2px dashed rgba(20, 70, 60, 0.3);
}
.kuvapaikka__tunnus { font-weight: 800; font-family: ui-monospace, Menlo, monospace; word-break: break-all; }
.kuvapaikka__haku { font-style: italic; color: var(--vari-teksti-heikko); }
.kuvapaikka__koko { font-weight: 700; }

/* ---------- Lomakesivut ---------- */
.lomakesivu { padding: 28px 0 64px; }
.lomakesivu__sisus { display: grid; gap: 24px; }
.lomakesivu__ingressi { font-size: 1.1rem; color: var(--vari-teksti-heikko); }
.lomakesivu__kuva { display: none; }
.lomakesivu__johdanto .tarkistuslista { margin-top: 1rem; }

.kortti {
  background: var(--vari-pinta); border-radius: var(--pyoristys-iso);
  border: 1px solid var(--vari-raja); box-shadow: var(--varjo); padding: 20px 16px;
}
.lomake fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.lomake legend {
  font-size: 1.25rem; font-weight: 650; color: var(--vari-paa-tumma); padding: 0; margin-bottom: 12px;
}
.vaiheosio + .vaiheosio:not([hidden]) { margin-top: 24px; }

.kentta { margin-bottom: 18px; }
.kentta label { display: block; font-weight: 600; margin-bottom: 4px; }
.kentta__ohje { margin: 0 0 6px; font-size: 0.92rem; color: var(--vari-teksti-heikko); }
.vapaaehtoinen { font-weight: 400; color: var(--vari-teksti-heikko); }
.kentta input[type="text"], .kentta input[type="email"], .kentta input[type="tel"], .kentta input[type="password"],
.kentta select, .kentta textarea {
  display: block; width: 100%; min-height: 50px; padding: 12px 14px;
  font: inherit; font-size: 1rem; /* 16 px estää iPhonen automaattisen zoomauksen */
  color: var(--vari-teksti); background: var(--vari-pinta);
  border: 1px solid #CDD3CF; border-radius: var(--pyoristys);
  transition: border-color .15s, box-shadow .15s;
}
.kentta select {
  appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%230E2F29' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.kentta textarea { resize: vertical; line-height: 1.5; }
.kentta input:focus, .kentta select:focus, .kentta textarea:focus {
  outline: none; border-color: var(--vari-paa); box-shadow: 0 0 0 3px var(--vari-paa-vaalea);
}
.kentta input:disabled { background: var(--vari-harmaa-pinta); color: var(--vari-teksti-heikko); }
.kentta--virhe input, .kentta--virhe select, .kentta--virhe textarea { border-color: #C62828; }
/* Kunnan haku (lomake.js) */
.kuntahaku { position: relative; }
.kuntahaku__lista {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 320px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  background: var(--vari-pinta); border: 1px solid var(--vari-raja); border-radius: 12px; box-shadow: var(--varjo-iso);
}
.kuntahaku__osuma {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 12px; border-radius: 8px; cursor: pointer;
}
.kuntahaku__osuma[aria-selected="true"], .kuntahaku__osuma:hover { background: var(--vari-paa-vaalea); }
.kuntahaku__nimi { font-weight: 700; }
.kuntahaku__lisa { font-size: 0.88rem; color: var(--vari-teksti-heikko); text-align: right; }
.kuntahaku__tyhja { padding: 11px 12px; color: var(--vari-teksti-heikko); }
.kentta__virhe { margin: 6px 0 0; font-size: 0.92rem; font-weight: 700; color: #B71C1C; }

.valintaruutu {
  display: flex !important; gap: 10px; align-items: flex-start; margin-top: 10px;
  font-weight: 600 !important; cursor: pointer;
}
.valintaruutu input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--vari-paa); }
.lomake__huomio { font-size: 0.95rem; color: var(--vari-teksti-heikko); }
.lomake__huomio--kentta { margin: -8px 0 18px; font-size: 0.9rem; }
.lomake__napit { display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin-top: 8px; }
.lomake__napit .tekstilinkki { background: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; justify-content: center; }
.piilo { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.edistyminen {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.edistyminen__vaihe {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px;
  font-size: 0.92rem; font-weight: 600; color: var(--vari-teksti-heikko); background: var(--vari-harmaa-pinta);
}
.edistyminen__vaihe span {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: #fff; color: var(--vari-teksti-heikko); font-weight: 650;
}
.edistyminen__vaihe.aktiivinen { background: var(--vari-paa); color: #fff; }
.edistyminen__vaihe.aktiivinen span { color: var(--vari-paa); }
.edistyminen__vaihe.valmis { background: var(--vari-paa-vaalea); color: var(--vari-paa-tumma); }

.ilmoitusruutu { padding: 14px 16px; border-radius: 12px; margin-bottom: 18px; font-weight: 700; }
.ilmoitusruutu--virhe { background: #FDECEA; color: #8E1B1B; border: 2px solid #F5C2BE; }

/* ---------- Kiitos ---------- */
.kiitos { text-align: center; }
.kiitos__ikoni {
  display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: 16px;
  border-radius: 50%; color: #fff; background: var(--vari-paa);
}
.kiitos__ikoni .ikoni { width: 38px; height: 38px; }
.kiitos__tunnus { font-size: 1.1rem; }
.kiitos__vaiheet { text-align: left; max-width: 34em; margin: 1.5rem auto; padding-left: 1.4em; display: grid; gap: 8px; }

/* ---------- Ilmoituslista ---------- */
.listasivu { padding: 28px 0 48px; }
.listasivu .lomakesivu__ingressi { display: flex; gap: 8px; align-items: center; }
.listasivu .lomakesivu__ingressi .ikoni { color: var(--vari-paa); }
.suodattimet {
  display: grid; gap: 0 12px; margin: 20px 0 4px; padding: 16px 16px 0;
  background: var(--vari-pinta); border: 1px solid var(--vari-raja); border-radius: var(--pyoristys);
}
.suodattimet .kentta input[type="search"] {
  display: block; width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 1rem;
  color: var(--vari-teksti); background: var(--vari-pinta); border: 1px solid #CDD3CF; border-radius: var(--pyoristys);
}
.suodattimet .kentta input[type="search"]:focus { outline: none; border-color: var(--vari-paa); box-shadow: 0 0 0 4px var(--vari-paa-vaalea); }
.suodattimet__nappi { margin-bottom: 16px; }
.listasivu__maara { min-height: 1.6em; color: var(--vari-teksti-heikko); font-weight: 600; }
.listasivu__osio { font-size: 1.35rem; margin: 8px 0 14px; }
.listasivu__osio ~ .listasivu__osio { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--vari-raja); }
.listasivu__osioteksti { color: var(--vari-teksti-heikko); margin: -6px 0 18px; }
.ilmoitukset { list-style: none; padding: 0; margin: 12px 0 24px; display: grid; gap: 16px; }
.ilmoituskortti {
  display: block; height: 100%; overflow: hidden; border-radius: var(--pyoristys-iso);
  background: var(--vari-pinta); border: 1px solid var(--vari-raja); box-shadow: var(--varjo);
  color: var(--vari-teksti); text-decoration: none; transition: transform .15s, box-shadow .15s;
}
.ilmoituskortti:hover { border-color: #C5CCC8; box-shadow: var(--varjo-iso); }
.ilmoituskortti__kuva { position: relative; }
.ilmoituskortti__kuva .kuva { border-radius: 0; }
.ilmoituskortti__kuva .kuvapaikka > span { display: none; }
.ilmoituskortti__teksti { padding: 16px 18px 18px; }
.ilmoituskortti__ala { margin: 0 0 4px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vari-korostus); }
.ilmoituskortti h3 { margin: 0 0 12px; font-size: 1.2rem; }
.ilmoituskortti__luvut { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.ilmoituskortti__luvut dt { font-size: 0.8rem; color: var(--vari-teksti-heikko); }
.ilmoituskortti__luvut dd { margin: 0; font-weight: 600; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.tyhja { text-align: center; margin: 12px 0 24px; }
.tyhja h2 { font-size: 1.4rem; }
.osio--tiivis { padding-top: 24px; }
.hakukortti-kaari + .osio.osio--tiivis { padding-top: 48px; }
.osio.osio--tiivis { padding-top: 32px; padding-bottom: 24px; }

/* ---------- Ilmoitussivu ---------- */
.ilmoitussivu { padding: 20px 0 64px; }
.ilmoitussivu .h-takaisin { margin-bottom: 12px; }
.ilmoitussivu__sisus { display: grid; gap: 28px; }
.ilmoitussivu__ala { font-weight: 600; color: var(--vari-korostus); margin-top: -0.4em; }
.ilmoitussivu__kuva .kuva { border-radius: var(--pyoristys-iso); }
.ilmoitussivu__kuva .kuvapaikka > span:not(.kuvapaikka__tunnus) { display: none; }
.ilmoitussivu h2 { font-size: 1.4rem; margin-top: 1.4em; }
.ilmoitussivu .teksti { white-space: pre-line; }
.ilmoitussivu__pikalinkki { margin-top: 16px; }
.ilmoitussivu__vahti { margin-top: 12px; font-size: 0.95rem; text-align: center; }
.ilmoitussivu__sivu .lomake h2 { margin-top: 0; }
.h-leve { width: 100%; }
/* Faktat: hinta omana korostettuna rivinään, muut ruudut täyttävät rivin (ei tyhjiä harmaita paikkoja millään määrällä) */
.faktat {
  display: flex; flex-wrap: wrap; gap: 1px; margin: 20px 0 0; overflow: hidden;
  border-radius: var(--pyoristys); background: var(--vari-raja); border: 1px solid var(--vari-raja);
}
.faktat div { flex: 1 1 170px; background: var(--vari-pinta); padding: 14px 18px; }
.faktat dt { font-size: 0.8rem; color: var(--vari-teksti-heikko); }
.faktat dd { margin: 3px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.35; }
.faktat div:first-child { flex-basis: 100%; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px;
  background: var(--vari-paa-vaalea); padding: 16px 18px; }
.faktat div:first-child dt { font-size: 0.85rem; font-weight: 600; color: var(--vari-paa); text-transform: uppercase; letter-spacing: 0.06em; }
.faktat div:first-child dd { margin: 0; font-size: 1.3rem; color: var(--vari-paa-tumma); }
.hakuvahtilomake--tiivis .kentta { margin-bottom: 14px; }

/* ---------- Tekstisivut (tietosuoja, ehdot, tietoa palvelusta) ---------- */
.tekstisivu h2 { font-size: 1.4rem; margin-top: 1.8em; }
.tekstisivu ul { padding-left: 1.2em; display: grid; gap: 8px; }
.tekstisivu .napit { margin-top: 2rem; }
.tekstisivu__pvm { margin-top: 2rem; color: var(--vari-teksti-heikko); }
.yhteystiedot { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 1em; }
.yhteystiedot dt { font-weight: 700; color: var(--vari-teksti-heikko); }
.yhteystiedot dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.hero--matala { padding-bottom: 24px; }
.ukk { border-bottom: 1px solid var(--vari-raja); }
.ukk summary {
  display: flex; justify-content: space-between; gap: 12px; padding: 16px 0; cursor: pointer;
  list-style: none; font-weight: 600; font-size: 1.05rem; color: var(--vari-paa-tumma);
}
.ukk summary::-webkit-details-marker { display: none; }
.ukk summary::after { content: "+"; flex: none; font-size: 1.4rem; line-height: 1; color: var(--vari-korostus); }
.ukk[open] summary::after { content: "–"; }
.ukk__vastaus { padding: 0 0 12px; }

/* ---------- Alatunniste ---------- */
.alatunniste { background: var(--vari-paa-tumma); color: rgba(255, 255, 255, 0.85); padding: 48px 0 24px; margin-top: 0; }
.alatunniste a { color: #fff; text-decoration: none; }
.alatunniste a:hover { text-decoration: underline; }
.alatunniste__sisus { display: grid; gap: 32px; }
.alatunniste__brandi p { margin-top: 0.6em; max-width: 26em; }
.alatunniste__linkit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.alatunniste__linkit div { display: flex; flex-direction: column; gap: 6px; }
.alatunniste__linkit h2 {
  font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6); margin: 0 0 4px;
}
.alatunniste__pohja {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.92rem;
}
.alatunniste__pohja p { margin: 0; }

/* =========================================================
   Leveämmät näytöt
   ========================================================= */
@media (min-width: 600px) {
  .logo { font-size: 1.15rem; }
  .napit { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .vaiheet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kokoluokat__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .toimialat { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .alatunniste__linkit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kortti { padding: 32px; }
  .suodattimet { grid-template-columns: 1fr 1fr auto; align-items: end; }
  .suodattimet__haku { grid-column: 1 / -1; }
  .suodattimet__nappi { margin-bottom: 18px; }
  .ilmoitukset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lomake__napit { flex-direction: row; align-items: center; flex-wrap: wrap; }
}

@media (min-width: 900px) {
  .hakukansi { padding: 96px 0 150px; }
  .hakukortti { grid-template-columns: 1.4fr 1fr 1fr auto; align-items: end; padding: 24px 24px 6px; }
  .hakukortti__nappi { padding-left: 1.8em; padding-right: 1.8em; }
  .ylapalkki__sisus { flex-wrap: nowrap; min-height: 76px; }
  .ylapalkki__cta, .valikkonappi { display: none; }
  .paavalikko { display: flex; flex-direction: row; align-items: center; gap: 4px; width: auto; padding: 0; }
  .paavalikko a:not(.nappi) { border: 0; padding: 8px 12px; border-radius: 6px; font-size: 0.97rem; }
  .paavalikko a:not(.nappi):hover { background: var(--vari-paa-vaalea); }
  .paavalikko__cta { display: inline-flex; margin-left: 8px; }

  .hero { padding: 64px 0 72px; }
  .hero__sisus { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
  .osio { padding: 88px 0; }
  .kaksi { grid-template-columns: 1fr 1fr; gap: 64px; }
  .toimialat { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .kansi { display: grid; }
  .kansi__kuva { grid-area: 1 / 1; }
  .kansi__kuva .kuva { aspect-ratio: auto; height: 100%; min-height: 620px; }
  .kansi__sisus { grid-area: 1 / 1; margin: 0 auto; display: flex; align-items: center; padding: 64px 16px; }

  .nosto { display: grid; }

  .alatunniste__sisus { grid-template-columns: 1fr 1.6fr; }

  .lomakesivu { padding: 56px 0 96px; }
  .ilmoitukset { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .ilmoitussivu__sisus { grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
  .ilmoitussivu__sivu { position: sticky; top: 100px; }
  .ilmoitussivu__pikalinkki { display: none; }
  .lomakesivu__sisus { grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
  .lomakesivu__johdanto { position: sticky; top: 100px; }
  .lomakesivu__kuva { display: block; margin: 1.5rem 0 0.5rem; }
  .lomakesivu__kuva .kuva { border-radius: var(--pyoristys-iso); box-shadow: var(--varjo); }
}

/* ---------- Hinnasto ---------- */
.hinnasto .teksti { white-space: pre-line; }
.hinnasto__johdanto { max-width: 40em; }
.hinnasto__johdanto .teksti { font-size: 1.08rem; color: var(--vari-teksti-heikko); }
.hinnasto__lista {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.hintakortti h2 { margin: 0 0 6px; font-size: 1.2rem; }
.hintakortti__hinta { margin: 0 0 12px; font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: var(--vari-paa); }
.hintakortti .teksti { color: var(--vari-teksti-heikko); }
.hinnasto__lisatieto { max-width: 40em; margin-top: 1.5rem; font-size: 0.95rem; color: var(--vari-teksti-heikko); }
.hinnasto__napit { margin-top: 2rem; }

/* Nosto: ilmoitus hakujen kärjessä */
.ilmoituskortti--nosto { box-shadow: 0 0 0 2px var(--vari-korostus), var(--varjo); }
.ilmoituskortti__nosto {
  position: absolute; right: 12px; top: 12px; padding: 4px 10px; border-radius: 6px;
  font-size: 0.82rem; font-weight: 600; color: #fff; background: var(--vari-korostus);
}

/* ---------- Evästesuostumus ---------- */
.evasteet {
  position: fixed; z-index: 1000; left: 16px; right: 16px; bottom: 16px;
  max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 22px 22px 18px; border-radius: var(--pyoristys-iso);
  background: var(--vari-pinta); color: var(--vari-teksti);
  border: 1px solid var(--vari-raja); box-shadow: 0 18px 50px rgba(28, 38, 34, 0.25);
}
.evasteet h2 { margin: 0 0 8px; font-size: 1.25rem; }
.evasteet p { margin: 0 0 14px; font-size: 0.95rem; line-height: 1.5; }
.evasteet__napit { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.evasteet__napit .nappi { flex: 1 1 180px; }
.evasteet__napit .tekstilinkki { flex: 1 1 100%; justify-content: center; padding: 6px 0; font: inherit; font-weight: 700; background: none; border: 0; cursor: pointer; }
.evasteet__valinta {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; padding: 12px 14px;
  border: 1px solid var(--vari-raja); border-radius: 12px; font-size: 0.93rem; line-height: 1.45; cursor: pointer;
}
.evasteet__valinta input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--vari-paa); }
.evasteet__valinta input:disabled { opacity: .6; }
@media (min-width: 640px) { .evasteet { left: 24px; bottom: 24px; } }
.taulukko-kaari { overflow-x: auto; margin: 0 0 1rem; }
.evastetaulukko { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.92rem; }
.evastetaulukko th, .evastetaulukko td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--vari-raja); }
.evastetaulukko th { font-weight: 650; background: var(--vari-paa-vaalea); }

/* =========================================================
   Lomakkeet: kevyemmät kentät, tasaiset välit ja ohut vaihepalkki
   ========================================================= */
.kortti { box-shadow: 0 1px 2px rgba(23, 32, 29, 0.04), 0 8px 24px rgba(23, 32, 29, 0.06); }
.lomake legend { font-size: 1.15rem; font-weight: 650; margin-bottom: 16px; }
.kentta { margin-bottom: 16px; }
.kentta label { font-size: 0.95rem; font-weight: 600; margin-bottom: 6px; color: var(--vari-teksti); }
.kentta__ohje { margin: -2px 0 8px; font-size: 0.85rem; line-height: 1.45; }
.vapaaehtoinen { font-size: 0.85rem; font-weight: 400; }
.kentta input[type="text"], .kentta input[type="email"], .kentta input[type="tel"], .kentta input[type="password"],
.kentta input[type="search"], .kentta select, .kentta textarea,
.suodattimet .kentta input[type="search"], .hakukortti .kentta input[type="search"] {
  min-height: 44px; padding: 10px 12px; font-size: 1rem;
  border: 1px solid #D3D9D6; border-radius: var(--pyoristys); background-color: var(--vari-pinta);
  box-shadow: inset 0 1px 1px rgba(23, 32, 29, 0.03);
}
.kentta select { padding-right: 38px; background-position: right 12px center; }
.kentta textarea { min-height: 120px; }
.kentta input::placeholder, .kentta textarea::placeholder { color: #8A948F; }
.kentta input:hover, .kentta select:hover, .kentta textarea:hover { border-color: #B9C2BE; }
.kentta input:focus, .kentta select:focus, .kentta textarea:focus,
.suodattimet .kentta input[type="search"]:focus, .hakukortti .kentta input[type="search"]:focus {
  border-color: var(--vari-paa); box-shadow: 0 0 0 3px rgba(20, 70, 60, 0.15);
}
.kentta__virhe { font-size: 0.88rem; font-weight: 600; }
.valintaruutu { font-weight: 500 !important; font-size: 0.95rem; }
.valintaruutu input { width: 18px; height: 18px; margin-top: 3px; }

/* Vaihepalkki: ohut viiva ja numero, ei raskaita laatikoita */
.edistyminen { gap: 12px; margin-bottom: 24px; }
.edistyminen__vaihe {
  padding: 0 0 10px; border-radius: 0; background: none; font-size: 0.9rem; font-weight: 600;
  border-bottom: 3px solid var(--vari-raja);
}
.edistyminen__vaihe span { width: 24px; height: 24px; font-size: 0.8rem; background: var(--vari-harmaa-pinta); }
.edistyminen__vaihe.aktiivinen { background: none; color: var(--vari-paa-tumma); border-bottom-color: var(--vari-paa); }
.edistyminen__vaihe.aktiivinen span { background: var(--vari-paa); color: #fff; }
.edistyminen__vaihe.valmis { background: none; color: var(--vari-paa); border-bottom-color: var(--vari-paa); }
.edistyminen__vaihe.valmis span { background: var(--vari-paa-vaalea); color: var(--vari-paa); }

/* Vain tarkastajalle näkyvät tiedot */

.lomake__napit { margin-top: 16px; }
.lomake__huomio { font-size: 0.88rem; }

/* =========================================================
   Hakulomakkeet (etusivun hakukortti ja yrityslistan suodattimet): kevyet ja matalat
   ========================================================= */
.hakukortti, .suodattimet { gap: 0 10px; padding: 14px 14px 2px; }
.suodattimet { margin-top: 16px; box-shadow: none; }
.hakukortti .kentta, .suodattimet .kentta { margin-bottom: 12px; }
.hakukortti .kentta label, .suodattimet .kentta label {
  margin-bottom: 4px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: var(--vari-teksti-heikko);
}
.hakukortti .kentta input[type="search"], .hakukortti .kentta select,
.suodattimet .kentta input[type="search"], .suodattimet .kentta select {
  min-height: 42px; padding-top: 8px; padding-bottom: 8px; box-shadow: none;
}
.hakukortti__nappi, .suodattimet__nappi { min-height: 42px; margin-bottom: 12px; padding: 0.5em 1.4em; }
.hakukortti__nappi .ikoni { width: 18px; height: 18px; }
.pikavalinnat { margin-top: 12px; }
.pikavalinnat a { padding: 5px 12px; font-size: 0.85rem; }
@media (min-width: 900px) {
  .hakukortti, .suodattimet { padding: 16px 16px 4px; }
  .hakukortti .kentta input[type="search"], .hakukortti .kentta select,
  .suodattimet .kentta input[type="search"], .suodattimet .kentta select { font-size: 0.95rem; min-height: 40px; }
  .hakukortti__nappi, .suodattimet__nappi { min-height: 40px; margin-bottom: 12px; }
  .suodattimet { grid-template-columns: 1.4fr 1fr 1fr auto; }
  .suodattimet__haku { grid-column: auto; }
}
/* Hae-nappi täyttää oman sarakkeensa, jotta se ei jää pieneksi kentien sivuun */
.hakukortti__nappi, .suodattimet__nappi { width: 100%; border-radius: var(--pyoristys); }
@media (min-width: 900px) {
  .hakukortti { grid-template-columns: 1.5fr 1fr 1fr 160px; }
  .suodattimet { grid-template-columns: 1.5fr 1fr 1fr 160px; }
}

/* ---------- Hakukortin välilehdet: Osta yritys / Myy yrityksesi ---------- */
.valilehdet { display: flex; gap: 4px; }
.valilehti {
  padding: 11px 20px; font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
  color: rgba(255, 255, 255, 0.9); background: rgba(14, 47, 41, 0.55); border: 0;
  border-radius: var(--pyoristys-iso) var(--pyoristys-iso) 0 0; backdrop-filter: blur(6px);
}
.valilehti:hover { background: rgba(14, 47, 41, 0.75); }
.valilehti[aria-selected="true"] { color: var(--vari-paa-tumma); background: var(--vari-pinta); }
.valilehti:focus-visible { outline: 3px solid var(--vari-kulta); outline-offset: -3px; }
.hakukortti-kaari .valilehdet + .hakukortti, .hakukortti-kaari .hakukortti--myy { border-top-left-radius: 0; }
.hakukortti--myy { display: grid; gap: 4px 24px; align-items: center; padding: 18px 18px 16px; }
.hakukortti--myy[hidden] { display: none; }
.hakukortti__myyotsikko { margin: 0 0 4px; font-weight: 650; font-size: 1.1rem; color: var(--vari-paa-tumma); }
.hakukortti__myyteksti p:last-child { margin: 0; color: var(--vari-teksti-heikko); font-size: 0.95rem; }
.hakukortti__myynapit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; }
@media (min-width: 900px) {
  .hakukortti--myy { grid-template-columns: 1fr auto; padding: 20px 24px; }
  .hakukortti__myynapit { margin-top: 0; }
}
.hakukortti-kaari { margin-top: -96px; }
@media (min-width: 900px) { .hakukortti-kaari { margin-top: -104px; } }

/* ---------- Ilmoituskortti: ote kuvauksesta ---------- */
.ilmoituskortti { display: flex; flex-direction: column; }
.ilmoituskortti__ote {
  margin: -4px 0 14px; font-size: 0.92rem; line-height: 1.5; color: var(--vari-teksti-heikko);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Nostettu ilmoitus: kultainen yläpalkki ja reunus ---------- */
.ilmoituskortti--nosto { box-shadow: 0 0 0 2px var(--vari-kulta), var(--varjo); border-color: var(--vari-kulta); }
.ilmoituskortti--nosto:hover { box-shadow: 0 0 0 2px var(--vari-kulta), var(--varjo-iso); }
.ilmoituskortti .ilmoituskortti__nosto {
  position: static; display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 0;
  font-size: 0.82rem; font-weight: 650; letter-spacing: 0.02em; color: #fff; background: var(--vari-kulta);
}
.ilmoituskortti__nosto .ikoni { width: 15px; height: 15px; fill: currentColor; }
.ilmoituskortti__teksti { flex: 1; display: flex; flex-direction: column; }
.ilmoituskortti__luvut { margin-top: auto; }

/* ---------- Keskitetyt napit ja etusivun lopun toimintakehotus ---------- */
.napit--keskitetty { justify-content: center; }
.loppu { background: var(--vari-paa); color: rgba(255, 255, 255, 0.88); }
.loppu h2 { color: #fff; }
.loppu p { max-width: 44em; margin-left: auto; margin-right: auto; }
.loppu .nappi--toissijainen { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.loppu .nappi--toissijainen:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }
.loppu .nappi:focus-visible { outline-color: #fff; }

/* =========================================================
   Etusivu ilman laatikoita: sisältö avoimesti, kortteina vain ilmoitukset ja haku
   ========================================================= */
/* Myyjälle: vaalea kaista, kaksi palstaa ja ohut erotinviiva */

/* Lupaukset: kolme palstaa ikoneineen, ei kortteja */

.kokoluokat__johdanto { margin-bottom: 40px; }
.lupaus { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }

/* Kokoluokat: kuva ja teksti ilman kehystä */
.kokoluokka { overflow: visible; background: none; border: 0; box-shadow: none; border-radius: 0; }
.kokoluokka .kuva, .kokoluokka .kuvapaikka { border-radius: var(--pyoristys-iso); }
.kokoluokka__teksti { padding: 16px 2px 0; }

/* Vaiheet: numerot ja yhdysviiva, ei laatikoita */
.vaihe { padding: 0; background: none; box-shadow: none; border-radius: 0; }
@media (min-width: 600px) {
  .vaiheet { gap: 40px; }
  .vaihe::before {
    content: ""; position: absolute; top: 22px; left: 56px; right: -28px; height: 2px; background: #CFDBD5;
  }
  .vaihe:last-child::before { display: none; }
}

/* Suosittelut: lainaukset ilman kortteja, ohut viiva vasemmalla */
.suosittelu {
  padding: 4px 0 4px 22px; background: none; border: 0; box-shadow: none; border-radius: 0;
  border-left: 2px solid var(--vari-kulta);
}
.suosittelu blockquote { margin: 0; font-size: 1.05rem; color: var(--vari-teksti); }

/* =========================================================
   Oppaat
   ========================================================= */
.oppaat { list-style: none; margin: 0 0 40px; padding: 0; border-top: 1px solid var(--vari-raja); }
.oppaat__ryhma { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vari-teksti-heikko); margin: 0 0 12px; }
.oppaat__rivi { border-bottom: 1px solid var(--vari-raja); }
.oppaat__rivi a { display: block; padding: 22px 0; color: inherit; text-decoration: none; }
.oppaat__rivi h3 { margin: 0 0 6px; font-size: 1.2rem; color: var(--vari-paa); }
.oppaat__rivi p { margin: 0; color: var(--vari-teksti-heikko); }
.oppaat__rivi a:hover h3, .oppaat__rivi a:focus-visible h3 { text-decoration: underline; text-underline-offset: 3px; }
.oppaat__lue { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 600; font-size: 0.92rem; color: var(--vari-paa); }
.oppaat__lue .ikoni { width: 16px; height: 16px; transition: transform .15s; }
.oppaat__rivi a:hover .oppaat__lue .ikoni { transform: translateX(3px); }

.murupolku { font-size: 0.88rem; color: var(--vari-teksti-heikko); margin-bottom: 14px; }
.murupolku a { color: var(--vari-teksti-heikko); }
.opas__tiedot { margin-top: 14px; font-size: 0.9rem; color: var(--vari-teksti-heikko); }
.osio--opas { padding-top: 24px; }
.opas { font-size: 1.06rem; line-height: 1.75; }
.opas > p:first-child { font-size: 1.15rem; color: var(--vari-teksti); }
.opas h2 { font-size: 1.45rem; margin-top: 2em; line-height: 1.3; }
.opas h3 { font-size: 1.12rem; margin-top: 1.5em; }
.opas ul, .opas ol { padding-left: 1.3em; display: grid; gap: 8px; }
.opas__huomio {
  margin-top: 3rem; padding-top: 18px; border-top: 1px solid var(--vari-raja);
  font-size: 0.9rem; line-height: 1.6; color: var(--vari-teksti-heikko);
}
.opas__kehotus h2 { margin-top: 0; }

/* Etusivun oppaat: kolme tekstinostoa ilman kortteja */

/* =========================================================
   Ilmoituslomake: kolme vaihetta, rinnakkaiset kentät
   ========================================================= */
.vaiheosio legend { font-size: 1.25rem; font-weight: 650; color: var(--vari-teksti); margin-bottom: 4px; padding: 0; }
.vaiheosio__ohje { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 22px; font-size: 0.93rem; color: var(--vari-teksti-heikko); }
.vaiheosio__ohje .ikoni { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--vari-paa); }
.vaiheosio--vapaa .vapaaehtoinen { display: none; }
.kenttarivi { display: grid; gap: 0 16px; }
@media (min-width: 560px) {
  .kenttarivi { grid-template-columns: 1fr 1fr; }
  .kenttarivi--kolme { grid-template-columns: repeat(3, 1fr); }
}
.kenttarivi--kolme + .lomake__huomio--kentta { margin-top: -10px; }
.hintarivi { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.hintarivi input[type="text"] { flex: 1 1 180px; max-width: 260px; }
.hintarivi .valintaruutu { margin: 0; font-weight: 400; }
.hintarivi select { flex: 0 1 220px; width: auto; }
.lomake__napit { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 8px; }
.edistyminen { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.vaiheosio textarea[rows="2"], .vaiheosio textarea[rows="3"] { min-height: 0; }

/* Mietin myyntiä: mitä seuraavaksi */
.lomakesivu__alaotsikko { font-size: 1.05rem; margin: 1.6rem 0 0.6rem; }
.seuraavaksi { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; color: var(--vari-teksti-heikko); }
.seuraavaksi strong { color: var(--vari-teksti); }
.lomakesivu__linkit { margin-top: 1.4rem; font-size: 0.93rem; color: var(--vari-teksti-heikko); line-height: 1.7; }
.lomakesivu__linkit .ikoni { width: 16px; height: 16px; vertical-align: -2px; color: var(--vari-paa); }
.vaiheosio + .vaiheosio { margin-top: 8px; }

/* =========================================================
   Arvonmääritys: laskuri ja asiantuntijan arvio
   ========================================================= */
.arvo-valinnat { display: grid; gap: 0; margin-top: 24px; border-top: 1px solid var(--vari-raja); }
.arvo-valinnat a { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--vari-raja); color: var(--vari-teksti); text-decoration: none; }
.arvo-valinnat a strong { color: var(--vari-paa); }
.arvo-valinnat a span { font-size: 0.93rem; color: var(--vari-teksti-heikko); }
.arvo-valinnat a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 600px) {
  .arvo-valinnat { grid-template-columns: 1fr 1fr; gap: 0 32px; border-top: 0; }
  .arvo-valinnat a { border-bottom: 0; border-top: 2px solid var(--vari-paa); }
}
.arvotulos { margin: 0 0 28px; padding: 22px 0 18px; border-top: 3px solid var(--vari-paa); border-bottom: 1px solid var(--vari-raja); }
.arvotulos__otsikko { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--vari-teksti-heikko); }
.arvolomake .valintaruutu { font-size: 0.93rem; }
.tekstilinkki-nuoli { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--vari-paa); text-decoration: none; }
.tekstilinkki-nuoli .ikoni { width: 16px; height: 16px; transition: transform .15s; }
.tekstilinkki-nuoli:hover .ikoni { transform: translateX(3px); }
.arvo-huomio { margin: 0 0 24px; padding: 2px 0 2px 14px; border-left: 3px solid var(--vari-kulta); font-size: 0.95rem; color: var(--vari-teksti-heikko); }
.arvo-huomio strong { color: var(--vari-teksti); }
.arvotulos .arvotulos__otsikko:only-child, .arvotulos p.arvotulos__otsikko + p { margin-top: 6px; }
.opas .opas-kaava { margin: 1.2em 0; padding: 14px 18px; background: var(--vari-vaalea-osio); border-left: 3px solid var(--vari-paa); border-radius: var(--pyoristys); font-weight: 600; color: var(--vari-paa-tumma); }
.opas h2[id], .opas h3[id] { scroll-margin-top: 90px; }

/* ---------- Etusivu: arvolaskurin nostot ---------- */
.hakukansi__arvo {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 7px 16px; border-radius: 999px;
  font-size: 0.95rem; font-weight: 600; color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35);
}
.hakukansi__arvo:hover { background: rgba(255, 255, 255, 0.26); }
.hakukansi__arvo .ikoni { width: 16px; height: 16px; }
.arvokaista {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 28px;
  padding: 22px 22px; background: var(--vari-paa-vaalea); border-radius: var(--pyoristys-iso); color: var(--vari-paa-tumma);
}
.arvokaista h2 { margin: 0 0 4px; font-size: 1.3rem; color: var(--vari-paa-tumma); }
.arvokaista p { margin: 0; color: var(--vari-teksti); }
@media (min-width: 700px) {
  .arvokaista { flex-direction: row; align-items: center; justify-content: space-between; padding: 22px 28px; }
  .arvokaista .nappi { flex: none; }
}
.hakukansi__arvo-kysymys { display: none; }
@media (min-width: 600px) { .hakukansi__arvo-kysymys { display: inline; } .hakukansi__arvo-lyhyt { display: none; } }
.tarkistus input { max-width: 120px; }

/* =========================================================
   Etusivu: jokaisella osiolla oma asettelu (ei toistuvia kolmen sarakkeen rivejä)
   ========================================================= */
/* Lupaukset yhtenä ohuena rivinä */
.lupausrivi ul { list-style: none; margin: 0; padding: 22px 0; display: grid; gap: 12px; border-top: 1px solid var(--vari-raja); border-bottom: 1px solid var(--vari-raja); }
.lupausrivi li { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: var(--vari-teksti-heikko); }
.lupausrivi li strong { color: var(--vari-teksti); font-weight: 600; }
.lupausrivi .ikoni { flex: none; width: 22px; height: 22px; color: var(--vari-paa); }
@media (min-width: 900px) { .lupausrivi ul { grid-template-columns: repeat(3, auto); justify-content: space-between; } }

/* Myyjälle: kuva + vaiheet */
.myyntipolku__sisus { display: grid; gap: 32px; align-items: center; }
.myyntipolku__kuva .kuva { border-radius: var(--pyoristys-iso); }
.myyntipolku__teksti h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: 0.2em; }
.polku { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 0; }
.polku li { position: relative; padding: 0 0 20px 28px; border-left: 2px solid #C9D8D2; margin-left: 6px; }
.polku li:last-child { border-left-color: transparent; padding-bottom: 0; }
.polku li::before { content: ""; position: absolute; left: -8px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--vari-paa); border: 3px solid var(--vari-vaalea-osio); }
.polku h3 { font-size: 1.08rem; margin: 0 0 0.2em; }
.polku p { margin: 0; color: var(--vari-teksti-heikko); }
.myyntipolku__hinta { font-weight: 650; color: var(--vari-paa-tumma); margin: 0 0 14px; }
@media (min-width: 900px) { .myyntipolku__sisus { grid-template-columns: 5fr 6fr; gap: 64px; } }

/* Kokoluokat: otsikko vasemmalla, rivit oikealla */
.kokoluokat__sisus { display: grid; gap: 28px; }
.kokoluokat .kokoluokat__johdanto { margin: 0 0 16px; max-width: none; }
.kokoluokat .kokoluokat__lista { margin: 0; gap: 0; grid-template-columns: none; }
.kokoluokat .kokoluokka { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--vari-raja); background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.kokoluokat .kokoluokka:first-child { padding-top: 0; }
.kokoluokat .kokoluokka:last-child { border-bottom: 0; padding-bottom: 0; }
.kokoluokat .kokoluokka .kuva { width: 112px; height: 84px; object-fit: cover; border-radius: var(--pyoristys); }
.kokoluokat .kokoluokka__teksti { padding: 0; }
@media (min-width: 900px) {
  .kokoluokat__sisus { grid-template-columns: 4fr 7fr; gap: 72px; align-items: start; }
  .kokoluokat .kokoluokka { grid-template-columns: 168px 1fr; gap: 24px; }
  .kokoluokat .kokoluokka .kuva { width: 168px; height: 112px; }
}

/* Suosittelu: yksi iso lainaus */
.suosittelu-iso figure { margin: 0 auto; text-align: center; }
.suosittelu-iso blockquote { margin: 0 0 24px; font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.45; font-weight: 500; color: var(--vari-paa-tumma); }
.suosittelu-iso blockquote p { margin: 0; }
.suosittelu-iso blockquote p::before { content: "”"; display: block; font-family: Georgia, serif; font-size: 3.5rem; line-height: 0.8; color: var(--vari-kulta); }
.suosittelu-iso .suosittelu__henkilo { justify-content: center; text-align: left; }
.suosittelu-iso .suosittelu__henkilo span { color: var(--vari-teksti-heikko); font-size: 0.95rem; }
.suosittelu-iso .suosittelu__henkilo strong { color: var(--vari-teksti); }

/* Loppu: kehotus vasemmalla, oppaat oikealla */
.loppu__sisus { display: grid; gap: 40px; }
.loppu__kehotus p { margin-left: 0; }
.loppu__oppaat-otsikko { margin: 0 0 8px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.loppu__oppaat ul { list-style: none; margin: 0; padding: 0; }
.loppu__oppaat li { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.loppu__oppaat a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; color: #fff; text-decoration: none; font-weight: 600; }
.loppu__oppaat a .ikoni { flex: none; width: 18px; height: 18px; transition: transform .15s; }
.loppu__oppaat a:hover .ikoni { transform: translateX(4px); }
@media (min-width: 900px) { .loppu__sisus { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } }
.suosittelu-iso .suosittelu__henkilo { display: flex; align-items: center; gap: 12px; }
.suosittelu-iso .suosittelu__kuva { width: 52px !important; height: 52px; flex: none; border-radius: 50%; object-fit: cover; }
.suosittelu-iso .suosittelu__nimikirjaimet { display: grid; place-items: center; font-size: 1.05rem; font-weight: 600; color: #fff !important; background: var(--vari-paa); }
.loppu .loppu__oppaat-otsikko { margin: 0 0 8px; max-width: none; }
.loppu .loppu__kehotus p { margin-left: 0; }
@media (max-width: 599px) { .kokoluokat .kokoluokka { grid-template-columns: 96px 1fr; gap: 14px; align-items: start; } .kokoluokat .kokoluokka .kuva { width: 96px; height: 72px; } }

/* =========================================================
   Ilmoituksen lisätiedot: kortin merkit, ilmoitussivun rahoitustiedot, haun lisärajaukset, lomakkeen ruudut
   ========================================================= */
.ilmoituskortti__merkit { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; padding: 0; }
.ilmoituskortti__merkit li {
  padding: 3px 9px; font-size: 0.78rem; font-weight: 600; line-height: 1.4;
  color: var(--vari-paa-tumma); background: var(--vari-paa-vaalea); border-radius: 999px;
}
.ilmoitussivu__merkit { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 8px; }
.ilmoitussivu__merkit li { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; }
.ilmoitussivu__merkit .ikoni { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--vari-paa); }
.suodattimet__lisaa { grid-column: 1 / -1; margin: 0 -14px; padding: 0 14px; border-top: 1px solid var(--vari-raja); }
.suodattimet__lisaa summary {
  padding: 10px 0; font-size: 0.9rem; font-weight: 600; color: var(--vari-paa); cursor: pointer; list-style-position: inside;
}
.suodattimet__lisarivi { display: grid; gap: 0 10px; }
.suodattimet__ruudut { display: flex; flex-wrap: wrap; gap: 0 22px; margin: -6px 0 12px; }
.suodattimet__ruudut .valintaruutu { margin-top: 6px; font-size: 0.92rem; }
.suodattimet__ruudut .valintaruutu input { width: 18px; height: 18px; }
.suodattimet__huomio { margin: 0 0 12px; font-size: 0.85rem; color: var(--vari-teksti-heikko); }
.ruuturyhma { margin: -8px 0 18px; }
.ruuturyhma .kentta { margin-bottom: 0; }
.vaiheosio__valiotsikko { margin: 28px 0 6px; font-size: 1.05rem; }
@media (min-width: 720px) {
  .suodattimet__lisarivi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ilmoitussivu__vastuu { margin: 28px 0 0; padding-top: 14px; border-top: 1px solid var(--vari-raja); font-size: 0.88rem; color: var(--vari-teksti-heikko); }

/* Mainokset (aina "Mainos"-merkintä; tyhjä paikka ei näy lainkaan) */
.mainos { margin: 22px 0; text-align: left; }
.mainos__merkki { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vari-teksti-heikko); font-weight: 600; }
.mainos__kuva { display: block; max-width: 100%; height: auto; }
.mainos--kortti { background: var(--vari-paa-vaalea); border: 1px solid #CFDCD7; border-radius: 12px; padding: 18px 20px; }
.mainos--kortti .mainos__merkki { display: block; }
.mainos--kortti .mainos__logo { display: inline-block; margin: 10px 0 12px; padding: 10px 14px; background: #fff; border-radius: 8px; line-height: 0; }
.mainos--kortti .mainos__logo img { height: 44px; width: auto; max-width: 100%; object-fit: contain; }
.mainos--kortti .mainos__otsikko { font-size: 1.08rem; font-weight: 700; margin: 0 0 6px; color: var(--vari-teksti); line-height: 1.3; }
.mainos--kortti .mainos__teksti { font-size: 0.9rem; color: var(--vari-teksti-heikko); margin: 0 0 14px; line-height: 1.5; }
.mainos__nappi { display: inline-flex; align-items: center; gap: 6px; background: var(--vari-paa); color: #fff !important; border-radius: 999px;
  padding: 8px 16px; font-weight: 600; font-size: 0.88rem; text-decoration: none; white-space: nowrap; }
a.mainos__nappi:hover, .ilmoituskortti--mainos:hover .mainos__nappi { background: var(--vari-paa-tumma); }
.mainos--vaaka { display: flex; align-items: center; gap: 18px; background: var(--vari-pinta); border: 1px solid var(--vari-raja);
  border-left: 4px solid var(--vari-merkki); border-radius: 10px; padding: 14px 18px; }
.mainos--vaaka .mainos__logo { flex: none; line-height: 0; }
.mainos--vaaka .mainos__logo img { height: 40px; width: auto; max-width: 140px; object-fit: contain; }
.mainos--vaaka .mainos__runko { flex: 1; min-width: 0; }
.mainos--vaaka .mainos__otsikko { font-weight: 700; margin: 2px 0 2px; color: var(--vari-teksti); line-height: 1.3; }
.mainos--vaaka .mainos__teksti { font-size: 0.88rem; color: var(--vari-teksti-heikko); margin: 0; line-height: 1.45; }
@media (max-width: 640px) { .mainos--vaaka { flex-wrap: wrap; } .mainos--vaaka .mainos__runko { flex-basis: 100%; } }
.ilmoituskortti--mainos { background: var(--vari-paa-vaalea); border-color: #CFDCD7; text-decoration: none; color: inherit; }
.ilmoituskortti__mainoslogo { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; background: #fff;
  border-bottom: 1px solid #CFDCD7; padding: 16px; }
.ilmoituskortti__mainoslogo img { max-height: 56px; max-width: 70%; width: auto; height: auto; object-fit: contain; }
.ilmoituskortti--mainos h3 { margin: 4px 0 8px; }
.ilmoituskortti--mainos .mainos__nappi { margin-top: auto; align-self: flex-start; }
.ilmoituskortti--mainos .ilmoituskortti__teksti { display: flex; flex-direction: column; flex: 1; }
.mainos--banneri .mainos__merkki { display: block; margin-bottom: 5px; }
.mainos--banneri .mainos__linkki { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--vari-raja); }
.mainos--banneri .mainos__kuva { width: 100%; }
.mainos--rivi .mainos__linkki { display: flex; align-items: center; gap: 12px; background: var(--vari-vaalea-osio); border-radius: 10px; padding: 10px 14px; text-decoration: none; color: inherit; }
.mainos--rivi .mainos__linkki:hover { background: var(--vari-paa-vaalea); }
.mainos--rivi .mainos__logo { flex: none; background: #fff; border-radius: 6px; padding: 4px 6px; line-height: 0; }
.mainos--rivi .mainos__logo img { height: 22px; width: auto; }
.mainos--rivi .mainos__runko { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mainos--rivi .mainos__merkki { font-size: 0.62rem; }
.mainos--rivi .mainos__teksti { font-size: 0.86rem; color: var(--vari-teksti-heikko); line-height: 1.4; }
.mainos--rivi .mainos__teksti strong { color: var(--vari-teksti); }
.mainos--rivi .mainos__nuoli { color: var(--vari-paa); font-weight: 700; }
.mainos a:focus-visible { outline: 3px solid var(--vari-paa); outline-offset: 2px; }
.kumppanit__ruutu:focus-visible { outline: 3px solid var(--vari-paa); outline-offset: -4px; }

.kumppanit { margin: 36px 0; padding: 22px; border-radius: 16px; background: var(--vari-paa-vaalea); display: grid; gap: 18px; }
@media (min-width: 860px) {
  .kumppanit:not(.kumppanit--laaja) { grid-template-columns: 250px minmax(0, 1fr); align-items: center; gap: 28px; padding: 26px 28px; }
  .kumppanit--laaja { padding: 26px 28px; }
}
.kumppanit__yla { margin: 0 0 6px; font-size: 0.78rem; font-weight: 600; color: var(--vari-teksti-heikko); }
.kumppanit__yla .mainos__merkki { margin-left: 6px; font-weight: 500; }
.kumppanit__otsake h2 { margin: 0; font-size: 1.3rem; color: var(--vari-paa); }
.kumppanit__kuvaus { margin: 6px 0 0; font-size: 0.92rem; color: var(--vari-teksti-heikko); line-height: 1.5; }
/* Valkoinen kehys, jonka jakoviivat syntyvät 1 px välistä. Vajaat rivipaikat täytetään tyhjillä ruuduilla (PHP). */
.kumppanit__ruudukko { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--vari-raja); border: 1px solid var(--vari-raja); border-radius: 12px; overflow: hidden; }
.kumppanit__ruudukko li { display: flex; background: var(--vari-pinta); }
.kumppanit__tyhja { display: none !important; }
.kumppanit__tyhja--k { display: flex !important; }
@media (min-width: 860px) {
  .kumppanit__ruudukko { grid-template-columns: repeat(var(--sarakkeet), minmax(0, 1fr)); }
  .kumppanit__tyhja--k { display: none !important; }
  .kumppanit__tyhja--l { display: flex !important; }
}
.kumppanit__ruutu { flex: 1; min-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 12px;
  text-decoration: none; text-align: center; color: var(--vari-teksti-heikko); font-size: 0.8rem; line-height: 1.35; transition: background 0.15s; }
.kumppanit__ruutu:hover { background: #FAFCFB; }
.kumppanit__ruutu:hover .kumppanit__teksti { color: var(--vari-paa); text-decoration: underline; }
.kumppanit__kuva { max-height: 40px; max-width: min(150px, 85%); width: auto; height: auto; }
.kumppanit__nimi { font-weight: 700; font-size: 1rem; color: var(--vari-teksti); }

/* Jätä ilmoitus: asiantuntijan apu */
.apulaatikko { margin: 4px 0 22px; padding: 14px 16px; border-radius: 10px; background: var(--vari-vaalea-osio); border: 1px solid var(--vari-raja); }
.apulaatikko .kentta { margin: 0; }
.apulaatikko__teksti { margin: 6px 0 0 30px; font-size: 0.9rem; color: var(--vari-teksti-heikko); line-height: 1.5; }
.apulaatikko__siirry { margin: 8px 0 0 30px; }
.apulaatikko__siirry .tekstilinkki { font-weight: 600; color: var(--vari-paa); }
.apulaatikko--tiivis { margin: 0 0 16px; }
.apulaatikko--tiivis .apulaatikko__teksti { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.apulaatikko--tiivis .apulaatikko__teksti svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--vari-paa); }