/* ============================================================================
   FOORLY – MONIVAIHEINEN YHTEYDENOTTOLOMAKE
   Omat tyylit vain tälle komponentille. Kaikki värit, muodot ja fontit tulevat
   styles.css:n :root-muuttujista – tähän tiedostoon EI kirjoiteta värikoodeja,
   jotta teeman vaihto osuu myös lomakkeeseen.
   Ruudukot käyttävät auto-fit-sovitusta, koska lomake elää sekä täysleveänä
   (etusivu) että puolikkaassa palstassa (yhteystiedot.html).

   🛑 21.9.2026: lomake on nyt koko leveä molemmilla sivuilla (Valtteri:
   "koko näytön levyinen kuin kotisivut.fi"). Puolikkaan palstan asettelu
   poistui, joten max-width on poistettu ja ruudukot sovittuvat leveyteen.
   ============================================================================ */

/* 🛑 Yläreunan 3 px:n liukuvärikaista POISTETTU (Valtteri 22.9.2026: "se outo
   viiva ylhäältä pois kokonaan"). Se luki kuin keskeneräinen reunus eikä
   toistunut missään muualla sivustolla.
   Tausta on nyt sama kuin CTA-nauhassa ("Katsotaanko miltä sivusi voisivat
   näyttää?"): tummansininen liukuväri, jonka päällä cyan- ja violettihehku.
   Näin lomake erottuu osiostaan ilman erillistä koristetta. */
.mvf {
  position: relative;
  background: linear-gradient(135deg, var(--c-surface), var(--c-bg-2));
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3.2vw, 40px);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.mvf::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: var(--glow-cyan), var(--glow-vio); opacity: .7;
}
.mvf > * { position: relative; z-index: 1; }

/* ---- Edistymispalkki: piste + nimi + viiva (malli kotisivut.fi) ---- */
.mvf-prog { display: flex; align-items: center; gap: 0; margin: 2px 0 8px; }
.mvf-pstep { display: flex; align-items: center; gap: 9px; flex: none; }
.mvf-dot {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--c-bg); border: 2px solid var(--c-border);
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.mvf-dot.done { background: var(--grad-btn); border-color: transparent; }
.mvf-dot.on {
  background: var(--grad-btn); border-color: transparent;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent3) 22%, transparent);
}
.mvf-plabel {
  font-size: .82rem; font-weight: 600; color: var(--c-muted);
  transition: color .25s; white-space: nowrap;
}
.mvf-plabel.on { color: var(--c-heading); }
.mvf-pline {
  flex: 1; height: 2px; min-width: 14px; margin: 0 10px; border-radius: 2px;
  background: var(--c-border); transition: background .3s;
}
.mvf-pline.on { background: var(--grad-btn); }
.mvf-progtxt {
  margin: 0 0 22px; font-family: var(--font-body); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent3);
}
/* Kapealla näytöllä vaiheiden nimet jäisivät päällekkäin — pisteet riittävät,
   koska .mvf-progtxt kertoo vaiheen nimen tekstinä (myös ruudunlukijalle). */
@media (max-width: 720px) {
  .mvf-plabel { display: none; }
  .mvf-pstep { gap: 0; }
  .mvf-pline { margin: 0 6px; }
  /* Vaiheen nimi ja laskuri pois näkyvistä (Valtteri 7.10.2026): työnsi lomaketta
     alemmas, eikä Seuraava-painike mahtunut ruudulle. Pisteet kertovat edistymisen,
     teksti jää ruudunlukijalle aria-live-alueena. */
  .mvf-progtxt {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .mvf-prog { margin-bottom: 16px; }
}

/* ---- Vaiheet ---- */
.mvf-step { display: none; }
.mvf-step.on { display: block; }
.mvf-branch[hidden] { display: none; }

.mvf-h {
  font-family: var(--font-display); font-weight: 700; color: var(--c-heading);
  font-size: clamp(1.18rem, 2.2vw, 1.5rem); line-height: 1.18; letter-spacing: -.02em; margin: 0;
}
/* Otsikko saa fokuksen ohjelmallisesti vaiheen vaihtuessa, jotta ruudunlukija
   lukee uuden vaiheen. Se ei ole painettava, joten reunusta ei piirretä
   (Valtteri 2.10.2026: reunus näytti valitulta kentältä). */
.mvf-h:focus, .mvf-h:focus-visible { outline: none !important; }
/* --c-muted → --c-text (30.9.2026): lomakekortin liukuväripohjalla --c-muted
   jäi 3,46–4,28:1:een (mitattu teksti piilotettuna, etusivu 390 ja 1440). */
.mvf-sub { margin: 10px 0 20px; color: var(--c-text); font-size: .94rem; max-width: 60ch; }

/* ---- Portti (vaihe 0) keskitettynä ----
   🛑 Koko sivuston tavoite on tämä lomake (Valtteri 22.9.2026), ja portti on
   sen ensimmäinen näkymä. Otsikko ja ohjerivi keskitetään, koska portissa ei
   ole lomakekenttiä vaan kaksi rinnakkaista korttia, joiden ruudukko on jo
   keskitetty (.mvf-cards--2, max-width 700px). Vasempaan reunaan tasattu
   otsikko riippui irrallaan korttien yläpuolella.
   Kortit itse pysyvät vasemmalle tasattuina: niissä on ikoni, otsikko,
   kuvaus ja painike allekkain, eikä keskitetty ladontaa lue. */
.mvf-step--portti { text-align: center; }
.mvf-step--portti .mvf-h { font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
/* Ohjerivin raja on sama 700 px kuin korttiruudukolla, jolloin rivi loppuu
   samaan kohtaan kuin kortit eikä katkea kesken lauseen niiden yläpuolella. */
.mvf-step--portti .mvf-sub { margin-inline: auto; margin-bottom: 26px; max-width: 700px; }
.mvf-step--portti .mvf-card { text-align: left; }

/* ---- Vaihe 0: palvelun valintakortit ----
   Kuusi palvelua (kotisivut, verkkokauppa, Google-mainonta, hakukoneoptimointi,
   ylläpito, konsultointi). Leveällä näytöllä 3 × 2, jolloin kumpikin rivi
   täyttyy — auto-fit tekisi 4 + 2 eli orporivin. */
.mvf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }
@media (min-width: 900px) { .mvf-cards { grid-template-columns: repeat(3, 1fr); } }
.mvf-card {
  display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; text-align: left;
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r);
  padding: 16px; cursor: pointer; color: inherit; font: inherit;
  transition: border-color .2s, transform .2s, box-shadow .3s;
}
.mvf-card .ic {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c-primary) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-primary) 30%, transparent);
  color: var(--c-accent3);
}
.mvf-card b { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--c-heading); margin-bottom: 4px; }
.mvf-card .d { display: block; font-size: .87rem; line-height: 1.5; color: var(--c-muted); }
/* Hintavihje kortissa: vain hinnaston oikeat luvut, ei arvioita.
   🛑 Ei badgeja (Valtteri 22.9.2026): pillerimuoto, tausta ja reunus poistettu,
   jäljelle jää pelkkä hillitty mono-teksti. */
.mvf-card .h {
  display: block; margin-top: 8px; font-family: var(--font-mono);
  font-size: .76rem; font-weight: 600; letter-spacing: .01em; color: var(--c-text-2);
}
.mvf-card.on { border-color: var(--c-primary); }
@media (hover: hover) {
  .mvf-card:hover { transform: translateY(-2px); box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--c-primary) 55%, var(--c-border)); }
}

/* Portin kaksi vaihtoehtoa (nopea yhteydenotto / tarjouspyyntö). Kun valintoja
   on vain kaksi, ne saavat enemmän tilaa kuin kuuden palvelun ruudukko: kortit
   ovat lomakkeen ensimmäinen asia jonka kävijä näkee, ja valinnan pitää olla
   tehtävissä yhdellä silmäyksellä. Kapealla näytöllä allekkain kuten muutkin. */
.mvf-cards--2 { max-width: 700px; margin-inline: auto; }
@media (min-width: 720px) { .mvf-cards--2 { grid-template-columns: repeat(2, 1fr); } }
.mvf-cards--2 .mvf-card { padding: 22px 20px; }
/* Portin korteissa sisältö pinotaan, jotta painike istuu aina kortin alareunaan
   samalle korkeudelle kummassakin vaihtoehdossa. */
.mvf-cards--2 .mvf-card { grid-template-columns: 42px 1fr; align-items: start; }
.mvf-cards--2 .mvf-card > span:last-child { display: flex; flex-direction: column; height: 100%; }
.mvf-cards--2 .mvf-card .d { flex: 1; }
/* 🛑 Painike on <span>, ei <button>: kortti on itse painike, ja nappi napin
   sisällä on epäkelpoa HTML:ää. Tämä on visuaalinen kehote, jonka klikkaus
   menee kortille. */
.mvf-nappi {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 16px; padding: 11px 18px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 600; font-size: .92rem;
  background: var(--grad-btn); background-size: 180% 180%; background-position: 0% 50%;
  color: var(--c-on-primary); box-shadow: var(--glow-primary);
  transition: background-position .5s, transform .2s;
}
.mvf-nappi--kevyt {
  background: transparent; color: var(--c-heading);
  border: 1px solid var(--c-border); box-shadow: none;
}
@media (hover: hover) {
  .mvf-card:hover .mvf-nappi { background-position: 100% 50%; }
  .mvf-card:hover .mvf-nappi--kevyt { border-color: color-mix(in srgb, var(--c-primary) 60%, var(--c-border));
    background: color-mix(in srgb, var(--c-primary) 14%, transparent); }
}

/* Kolmen polun portti (Valtteri 2.10.2026): demo, tarjous, yhteystiedot. */
.mvf-cards--3 { max-width: 980px; }
@media (min-width: 900px) { .mvf-cards--3 { grid-template-columns: repeat(3, 1fr); } }
/* 720–899 px: kahden sarakkeen sääntö (.mvf-cards--2) jättäisi kolmannen kortin orvoksi. */
@media (min-width: 720px) and (max-width: 899px) { .mvf-cards--3 { grid-template-columns: 1fr; } }
.mvf-step--portti:has(.mvf-cards--3) .mvf-sub { max-width: 760px; }

/* ---- Palveluvalinta: kaksi pääpalvelua + Muu palvelu (Valtteri 2.10.2026) ----
   Kolme korttia rinnakkain, "Muu palvelu" avaa neljä vaihtoehtoa alle. */
@media (min-width: 900px) { .mvf-cards--paa { grid-template-columns: repeat(3, 1fr); } }
.mvf-muut { margin-top: 18px; }
.mvf-muut[hidden] { display: none; }
@media (min-width: 900px) { .mvf-cards--muut { grid-template-columns: repeat(2, 1fr); } }
.mvf-card--muu .h { color: var(--c-accent3); }
.mvf-muu-nuoli { display: inline-block; transition: transform .2s; }
.mvf-card--muu[aria-expanded="true"] .mvf-muu-nuoli { transform: rotate(180deg); }

/* ---- Ikkunatila (Valtteri 2.10.2026, malli kotisivut.fi) ----
   Lomake siirretään JS:llä .mvf-kehys-säiliöön body-tasolle. Ikkuna mahtuu
   aina ruutuun ja vierittää itseään; sivun vieritys lukitaan. */
html.mvf-auki, html.mvf-auki body { overflow: hidden; }
/* Kelluva widget, kiinteä CTA-palkki ja evästepalkki eivät saa jäädä ikkunan
   päälle tai sen alle näkyviin. */
html.mvf-auki .kp-root, html.mvf-auki .sticky-cta { display: none !important; }
.mvf-tausta {
  position: fixed; inset: 0; z-index: 9000;
  background: color-mix(in srgb, var(--c-bg) 78%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: mvf-hiipuu .25s ease both;
}
.mvf-kehys {
  position: fixed; inset: 0; z-index: 9001;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: mvf-ponnahtaa .3s cubic-bezier(.16,1,.3,1) both;
}
.mvf.mvf--ikkuna {
  width: min(980px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding-top: clamp(28px, 3.2vw, 40px);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), var(--shadow);
  scrollbar-width: thin;
}
/* Vierityspalkki violetti–magenta (Valtteri 7.10.2026): --c-border-sävy ei erottunut
   navylla. Chrome ja Safari käyttävät ::-webkit-scrollbaria (liukuväri), Firefox
   scrollbar-coloria. Puhelimissa palkki on käyttöjärjestelmän oma eikä värjäydy. */
@supports not selector(::-webkit-scrollbar) {
  .mvf.mvf--ikkuna { scrollbar-color: var(--c-accent) transparent; }
}
.mvf.mvf--ikkuna::-webkit-scrollbar { width: 10px; }
.mvf.mvf--ikkuna::-webkit-scrollbar-track { background: transparent; }
.mvf.mvf--ikkuna::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-primary), var(--c-accent));
  border-radius: 10px; border: 2px solid transparent; background-clip: padding-box;
}
/* Hehku taustakuvana eikä ::after-kerroksena: vierittyvässä laatikossa
   absoluuttinen kerros loppuisi ensimmäisen ruudun alareunaan, tausta taas
   pysyy laatikon kokoisena koko vierityksen ajan. */
.mvf.mvf--ikkuna { background: var(--glow-cyan), var(--glow-vio), linear-gradient(135deg, var(--c-surface), var(--c-bg-2)); }
.mvf.mvf--ikkuna::after { display: none; }
.mvf-sulje {
  position: sticky; top: 0; float: right; z-index: 3;
  width: 44px; height: 44px; margin: -12px -12px 0 12px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--c-bg); color: var(--c-heading); border: 1px solid var(--c-border);
  transition: border-color .2s, color .2s, transform .2s;
}
.mvf-sulje:focus-visible { outline: 2px solid var(--c-accent3); outline-offset: 2px; }
@media (hover: hover) {
  .mvf-sulje:hover { border-color: var(--c-accent3); color: var(--c-accent3); transform: rotate(90deg); }
}
@keyframes mvf-hiipuu { from { opacity: 0; } to { opacity: 1; } }
@keyframes mvf-ponnahtaa { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mvf-tausta, .mvf-kehys { animation: none; } }
/* Puhelimessa ikkuna täyttää koko ruudun, kuten kotisivut.fi:ssä. */
@media (max-width: 768px) {
  .mvf-kehys { padding: 0; align-items: stretch; }
  .mvf.mvf--ikkuna {
    width: 100%; max-height: 100vh; max-height: 100dvh; min-height: 100vh; min-height: 100dvh;
    border-radius: 0; border: 0; padding: 16px 18px 28px;
  }
  .mvf-sulje { margin: -4px -6px 0 10px; }
}
/* Mobiilioptimointi 6.10.2026: fieldset väistää kelluvaa sulkemisnappia koko korkeudeltaan
   (oma muotoilukonteksti), joten ikkunan ensimmäinen valintaryhmä jäi kenttiä ~50 px
   kapeammaksi. Ryhmä alkaa napin alta ja saa koko leveyden. */
.mvf--ikkuna .mvf-group { clear: right; }

/* ---- Radiovalinnat ---- */
.mvf-group { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.mvf-glabel {
  display: block; padding: 0; font-family: var(--font-body); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 10px;
}
/* Neljän vaihtoehdon ryhmä 2 × 2, kolmen vaihtoehdon ryhmä yhdelle riville.
   Ilman jälkimmäistä sääntöä kolmas vaihtoehto jäisi yksin riville. */
.mvf-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 10px; }
.mvf-opts:has(> :nth-child(3):last-child) { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.mvf-opt {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-sm);
  padding: 13px 15px; cursor: pointer; transition: border-color .2s, background .2s;
}
.mvf-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.mvf-opt .tick {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--c-border);
  flex: none; margin-top: 2px; display: grid; place-items: center; transition: border-color .2s;
}
.mvf-opt .tick::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--grad-btn); transform: scale(0); transition: transform .18s;
}
.mvf-opt .tx { font-size: .93rem; font-weight: 600; color: var(--c-on-dark); line-height: 1.45; }
.mvf-opt .tx small { display: block; font-weight: 400; font-size: .83rem; color: var(--c-muted); margin-top: 3px; }
.mvf-opt:has(input:checked) { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 12%, var(--c-bg)); }
.mvf-opt:has(input:checked) .tick { border-color: var(--c-primary); }
.mvf-opt:has(input:checked) .tick::after { transform: scale(1); }
.mvf-opt:has(input:focus-visible) { outline: 2px solid var(--c-accent3); outline-offset: 2px; }
@media (hover: hover) {
  .mvf-opt:hover { border-color: color-mix(in srgb, var(--c-primary) 55%, var(--c-border)); }
}

/* ---- Tekstikentät (perii .field-tyylit styles.css:stä) ---- */
.mvf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 0 16px; }
.mvf .field { margin-bottom: 16px; }
.mvf .field input[aria-invalid="true"], .mvf .field textarea[aria-invalid="true"] { border-color: var(--c-err); }

/* ---- Virheet: teksti + merkki, ei pelkkä väri ---- */
.mvf-e { display: none; margin: 6px 0 0; font-size: .84rem; font-weight: 600; color: var(--c-err); }
.mvf-e.on { display: block; }
.mvf-e::before { content: "\26A0\A0"; }

/* ---- Navigointi + viestit ---- */
.mvf-nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 24px; }
.mvf-nav .btn { flex: 1 1 auto; }
.mvf-note { font-size: .82rem; color: var(--c-muted); margin: 16px 0 0; }
.mvf-note a { text-decoration: underline; }
.mvf-msg { margin: 14px 0 0; font-weight: 600; font-size: .93rem; }
.mvf-msg.err { color: var(--c-err); }
.mvf-msg.ok { color: var(--c-ok); }

/* ---- Kiitos-näkymä ---- */
.mvf-done { display: none; text-align: center; padding: 8px 0 4px; }
.mvf-done.on { display: block; }
.mvf-done p { color: var(--c-on-dark); margin: 12px auto 0; max-width: 46ch; }
.mvf-done .ok-ico {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px;
  background: color-mix(in srgb, var(--c-ok) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-ok) 45%, transparent); color: var(--c-ok);
}

@media (max-width: 520px) {
  .mvf-nav { flex-direction: column-reverse; align-items: stretch; }
  .mvf-nav .btn { width: 100%; }
}

/* Portin kolme korttia keskitettyinä ilman nuolta (Valtteri 2.10.2026):
   ikoni, otsikko, teksti ja painike allekkain keskellä. */
.mvf-cards--3 .mvf-card { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; }
.mvf-step--portti .mvf-cards--3 .mvf-card { text-align: center; }
.mvf-cards--3 .mvf-card > span:last-child { align-items: center; }
.mvf-cards--3 .mvf-nappi { align-self: stretch; }
/* Otsikot samalle korkeudelle: ikoni ja teksti ylös, painike pohjaan. */
.mvf-cards--3 .mvf-card { grid-template-rows: auto 1fr; align-content: stretch; align-items: start; }
.mvf-cards--3 .mvf-card > span:last-child { height: 100%; }

/* Demopolun tyylivalinnat (2.10.2026): pieni värinäyte ja ruutuvalinnat. */
.mvf-swatch { width: 28px; height: 20px; border-radius: 6px; flex: none; margin-top: 1px; border: 1px solid var(--c-border); }
.mvf-swatch--tumma { background: linear-gradient(135deg, #111038, #2A2870); }
.mvf-swatch--vaalea { background: linear-gradient(135deg, #F5F6FD, #DDE3F5); }
.mvf-swatch--varikas { background: linear-gradient(135deg, #00C0F6, #6D5BFF 55%, #F15BB5); }
.mvf-swatch--neutraali { background: linear-gradient(135deg, #E7E2D9, #8C8C8C); }
.mvf-opt--chk .tick { border-radius: 6px; }
.mvf-opt--chk .tick::after { border-radius: 2px; }
.mvf-opt:has(input[type="checkbox"]:checked) { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 12%, var(--c-bg)); }
.mvf-opt:has(input[type="checkbox"]:checked) .tick { border-color: var(--c-primary); }
.mvf-opt:has(input[type="checkbox"]:checked) .tick::after { transform: scale(1); }

/* ---- Luettavuus (Valtteri 2.10.2026: "joka ikinen kohta erottuu tarpeeksi") ----
   Mitattu ennen: kuvaukset, lisärivit, väliotsikot, vaiheiden nimet, huomautukset
   ja placeholder 8,0:1. Nyt kuvaava teksti --c-text-2 (noin 16:1) ja labelit
   --c-text (noin 13:1). Otsikot ja valitut pysyvät kirkkaimpina. */
.mvf-card .d, .mvf-opt .tx, .mvf-opt .tx small, .mvf-sub, .mvf-note, .mvf .field label { color: var(--c-text-2); }
.mvf-glabel, .mvf-plabel { color: var(--c-text); }
.mvf-card .h:not(.mvf-card--muu .h) { color: var(--c-text-2); }
.mvf .field input::placeholder, .mvf .field textarea::placeholder { color: #B7BBD6; opacity: 1; }
/* Peruspaketti näkyy valittuna mutta ei ole poistettavissa (malli kotisivut.fi). */
.mvf-opt--kiintea { cursor: default; border-color: color-mix(in srgb, var(--c-primary) 55%, var(--c-border)); background: color-mix(in srgb, var(--c-primary) 10%, var(--c-bg)); }
.mvf-opt--kiintea .tick { border-color: var(--c-primary); }
.mvf-opt--kiintea .tick::after { transform: scale(1); }

/* ===================== KONSEPTIDEMO 5.10.2026: yhden vaiheen lomake =====================
   Aihe valitaan neljästä kortista yhdellä rivillä (kapealla kahdella), ja lähetysnappi
   on yksin oikealla. Portti, polut ja edistymispalkki eivät ole käytössä. */
.mvf-opts--aihe { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.mvf-opts--aihe .mvf-opt { padding: 11px 13px; align-items: center; }
.mvf-opts--aihe .mvf-opt .tx { font-size: .92rem; font-weight: 600; }
.mvf-aihe { margin-bottom: 18px; }
.mvf-nav--yksi { justify-content: flex-end; }
.mvf-nav--yksi .btn { flex: 0 1 auto; min-width: 200px; }
@media (max-width: 640px) { .mvf-nav--yksi .btn { flex: 1 1 auto; } }

/* Valinnaiset kentät merkitty sanalla (Baymard: merkitse sekä pakolliset että valinnaiset),
   yhden vaiheen lomake 6.10.2026. */
.mvf .field label .mvf-valinn { font-weight: 400; color: var(--c-muted); }

/* Yhden vaiheen lomake: otsikon ja aiheryhmän väli oli 0 px, koska välissä ei ole
   alaotsikkoa kuten muissa vaiheissa (Valtteri 6.10.2026). */
.mvf--yksi .mvf-h { margin-bottom: 18px; }

/* Kierros 6 (Miikka 6.10.2026): hakukoneoptimointi tarjouspolun pääpalveluihin, neljä korttia
   yhdellä rivillä leveällä. Kapealla auto-fit-ruudukko ennallaan. */
@media (min-width: 900px) { .mvf-cards--paa { grid-template-columns: repeat(4, 1fr); } }

/* ===================== KONSEPTIDEMO 6.10.2026, KIERROS 11: KUVA OMANA ELEMENTTINÄÄN LOMAKKEEN VIERESSÄ =====================
   Miikka: tuomiokirkon kuva ei ole osa lomakekorttia vaan oma elementtinsä sen vieressä, jolloin yhteydenotto-
   lomake (.mvf--yksi, Kerro, mitä tarvitset, sama lomake yhteystietosivulla) on selkeästi oma rajattu
   lomakkeensa, joka erottuu. Lomakekortti pitää oman reunansa, pyöristyksensä ja hehkunsa (.section--lomake .mvf);
   kuva on pyöristetty valokuva, jonka ylä- ja alareuna häivytetään sivun taustaan (Miikka: feidausta, jos kuva
   menee tekstin päälle). Kierroksella 10 kuva ja lomake olivat yksi kortti yhteisellä reunalla.
   Vain vähintään 1200 px: kapeammalla kuvapalsta veisi kentiltä tilan. Kuva on .mvf:n sisarus, joten ikkunatila
   (.mvf--ikkuna) ei muutu. Rajauskohta yhdestä muuttujasta: torni on kuvan keskivaiheilla.
   🛑 Valtteri hylkäsi 6.10. prosessilohkon lomakkeen vieressä foorly-demossa ("lomake on pienempi",
   kehitysideat §10 F34). Tämä on konseptin kokeilu, josta päätetään yhdessä ennen vientiä. */
.lomake-kuva { display: none; margin: 0; }
@media (min-width: 1200px) {
  .lomake-split { display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: clamp(28px, 3vw, 44px); align-items: stretch; }
  .lomake-kuva { --lomake-kuva-kohta: 50% 68%; display: block; position: relative; overflow: hidden; border-radius: var(--r-lg); }
  .lomake-kuva img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    object-position: var(--lomake-kuva-kohta); }
  .lomake-kuva::before, .lomake-kuva::after { content: ""; position: absolute; left: 0; right: 0; height: 24%; pointer-events: none; }
  .lomake-kuva::before { top: 0; background: linear-gradient(to bottom, var(--c-bg), transparent); }
  .lomake-kuva::after { bottom: 0; background: linear-gradient(to top, var(--c-bg), transparent); }
}

/* Kierros 12 (Miikka 6.10.2026): portin otsikko ja ohjerivi pois näkyvistä, koska osion otsikko kysyy jo
   saman (Mistä aloitetaan?). Ohjerivi poistettiin merkkauksesta; otsikko jää ruudunlukijalle ja fokuksen
   kohteeksi, joten vaiheen vaihtuminen porttiin kerrotaan yhä. */
.mvf-step--portti .mvf-h { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }