/* Kysely (25-09-2026). Monocromo por la regla 7 del plan: grafito, cromo, blanco y gris claro, sin rojo. */
.kysely-ruudukko { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start }
@media (min-width: 900px) { .kysely-ruudukko { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) } .kysely-paa { position: sticky; top: 120px } }
.kysely .kysely-eyebrow { color: var(--muted) }
.kysely-kortti { scroll-margin-top: clamp(92px, 11vw, 128px); padding: clamp(22px, 3vw, 44px); min-height: clamp(380px, 34vw, 480px); display: flex; flex-direction: column; gap: clamp(20px, 2vw, 28px) }
.kysely-palkki { display: flex; align-items: center; gap: 16px; min-height: 36px }
.kysely-edistys { flex: 1; height: 2px; background: var(--line); position: relative; overflow: hidden }
.kysely-edistys i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--bone); transition: width .6s var(--e-out) }
.kysely-takaisin { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--muted); background: none; border: 0; padding: 8px 0; cursor: pointer; transition: color .3s }
.kysely-takaisin:hover { color: var(--bone) }
.kysely-alku[hidden] { display: none }
.kysely-johdanto { margin: clamp(18px, 2vw, 28px) 0 0; font-family: var(--font-mono); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: #c4c2bd; max-width: 32ch }
.kysely-vaihe:empty { display: none }
.kysely-vaihe { flex: 1; display: flex; flex-direction: column }
.kysely-sisaan { animation: kysely-sisaan .5s var(--e-out) both }
@keyframes kysely-sisaan { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
.kysely-lomake, .kysely-tulos { display: flex; flex-direction: column; gap: 18px; flex: 1 }
.kysely-lomake fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px }
.kysely-otsikko { margin: 0 0 6px; padding: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.1vw, 1.85rem); line-height: 1.15; letter-spacing: -.02em; color: var(--bone); outline: none }
.kysely-vihje { margin: 0; font-family: var(--font-mono); font-size: 14px; color: var(--muted) }
.kysely-vaihtoehdot { display: grid; gap: 10px }
.kysely-vaihtoehto { position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; font-family: var(--font-mono); font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.35; color: #d6d4cf; transition: border-color .3s, background .3s, color .3s }
.kysely-vaihtoehto:hover { border-color: rgba(255, 255, 255, .42); color: var(--bone) }
.kysely-vaihtoehto input { appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border: 1.5px solid var(--muted); border-radius: 2px; background: transparent; display: grid; place-content: center; transition: border-color .3s, background .3s }
.kysely-vaihtoehto input:checked { border-color: var(--bone); background: var(--bone); box-shadow: inset 0 0 0 3px var(--panel) }
.kysely-vaihtoehto:has(input:checked) { border-color: var(--bone); background: rgba(255, 255, 255, .06); color: var(--bone) }
.kysely-vaihtoehto:has(input:focus-visible) { outline: 2px solid var(--bone); outline-offset: 3px }
.kysely-teksti, .kysely-kentta input, .kysely-kentta select { width: 100%; font: inherit; font-family: var(--font-mono); font-size: 16px; color: var(--bone); background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2); border-radius: 10px; padding: 14px 16px; transition: border-color .3s }
.kysely-teksti { resize: vertical; min-height: 120px; line-height: 1.5 }
.kysely-teksti:focus, .kysely-kentta input:focus, .kysely-kentta select:focus { border-color: var(--bone); outline: 2px solid var(--bone); outline-offset: 2px }
.kysely-kentta { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 14px; color: var(--muted) }
.kysely-kentta select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat }
.kysely-kentta select option { background: var(--panel); color: var(--bone) }
.kysely-yhteys { gap: 14px }
@media (min-width: 640px) { .kysely-yhteys { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px } .kysely-yhteys > .kysely-otsikko, .kysely-yhteys > .kysely-suostumus, .kysely-yhteys > .kysely-virhe, .kysely-yhteys > .kysely-seuraava, .kysely-yhteys > .kysely-vihje { grid-column: 1 / -1 } }
.kysely-suostumus { justify-self: start; align-self: flex-start; display: inline-flex; gap: 12px; align-items: flex-start; font-family: var(--font-mono); font-size: 14.5px; line-height: 1.5; color: #c4c2bd; cursor: pointer }
.kysely-suostumus input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 2px 0 0; border: 1.5px solid var(--muted); border-radius: 2px }
.kysely-suostumus input:checked { background: var(--bone); border-color: var(--bone); box-shadow: inset 0 0 0 3px var(--panel) }
.kysely-suostumus input:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px }
.kysely-suostumus a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px }
.kysely-virhe { margin: 0; min-height: 0; font-family: var(--font-mono); font-size: 14px; color: var(--bone) }
.kysely-virhe:empty { display: none }
.kysely .btn::before { background: #34343a }
.kysely .btn:hover { color: var(--bone); border-color: rgba(255, 255, 255, .42) }
.kysely .btn:focus-visible, .kysely-takaisin:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px }
.kysely-seuraava, .kysely-uudelleen { align-self: flex-start; justify-self: start; margin-top: auto }
.kysely-alaotsikko { margin: 10px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.kysely-suositus { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.3; color: var(--bone) }
.kysely-selite { margin: 0; font-family: var(--font-mono); font-size: 17px; line-height: 1.55; color: #c4c2bd }
.kysely-kerroit { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line) }
.kysely-kerroit li { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.kysely-k { font-family: var(--font-mono); font-size: 13px; color: var(--muted) }
.kysely-v { font-family: var(--font-mono); font-size: 15.5px; color: var(--bone) }
.kysely-demo { font-size: 12.5px; color: var(--dim) }
@media (max-width: 480px) { .kysely-kortti { padding: 20px 16px; border-radius: 14px } .kysely-seuraava, .kysely-uudelleen { align-self: stretch; justify-self: stretch } }
@media (prefers-reduced-motion: reduce) { .kysely-sisaan { animation: none } .kysely-edistys i { transition: none } }

/* el final: el producto recomendado, con su precio de la lista de precios (28-09-2026). Monocromo. */
.kysely-ehdotus { display: flex; flex-direction: column; gap: 16px; flex: 1 }
.kysely-tuotteet { display: grid; gap: 12px }
@media (min-width: 640px) { .kysely-tuotteet--monta { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.kysely-tuote { padding: clamp(18px, 2.2vw, 28px); border: 1px solid var(--bone); border-radius: 14px; background: rgba(255, 255, 255, .04) }
.kysely-tuote--pieni { border-color: var(--line-2); background: transparent }
.kysely-tuote-lippu { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px; background: var(--bone); color: var(--ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase }
.kysely-tuote-nimi { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.15; letter-spacing: -.02em; color: var(--bone); overflow-wrap: break-word }
.kysely-tuote-hinta { margin: 14px 0 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; letter-spacing: -.03em; color: var(--bone) }
.kysely-tuote--pieni .kysely-tuote-hinta { font-size: clamp(1.2rem, 1.7vw, 1.4rem) }
.kysely-tuote-selite { margin: 8px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.kysely-tuote-kuvaus { margin: 12px 0 0; font-family: var(--font-mono); font-size: 15px; line-height: 1.5; color: #c4c2bd }
.kysely-tuote-rivit { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; font-family: var(--font-mono); font-size: 15px; line-height: 1.45; color: #d6d4cf }
.kysely-tuote-rivit li { position: relative; padding-left: 24px }
.kysely-tuote-rivit li::before { content: ""; position: absolute; left: 0; top: .42em; width: 9px; height: 9px; background: var(--bone); border-radius: 1px }
.kysely-napit { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 8px }
.kysely-valitut { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
@media (max-width: 480px) { .kysely-napit .btn { flex: 1 1 100%; justify-content: center } }